/* SecRadar working UI. Reference: Nixtio HR Dashboard, 2026-10-03.
   Visual layer only: retain table structure, evidence labels and responsive rules. */
:root{--work-panel:var(--secradar-surface,#080b0f);--work-raised:var(--secradar-well,#10151b);--work-border:var(--secradar-line,#292d33);--work-text:var(--secradar-text,#edf2f7);--work-muted:var(--secradar-muted,#a2aab6);--work-accent:var(--secradar-accent,#ee9187);--work-selected:var(--secradar-tint,#281c20);--work-focus:var(--secradar-accent,#ee9187)}
.picker,.shortlist{--pick-accent:var(--work-accent)}
.picker #picker-form,.picker .pick-product,.shortlist-controls{background:var(--work-panel);border:1px solid var(--work-border);border-radius:20px;box-shadow:none}
.shortlist-controls{padding:24px}
.picker .pick-option,.shortlist .shortlist-option{background:var(--work-raised);border:1px solid var(--work-border);border-radius:14px;color:var(--work-text);box-shadow:none}
.picker .pick-option:has(:checked),.shortlist .shortlist-option:has(:checked){background:var(--work-selected);border-color:var(--work-accent);box-shadow:inset 0 0 0 1px var(--work-accent)}
.picker .pick-option small,.shortlist .shortlist-option small,.picker .pick-scope{color:var(--work-muted)}
.picker .pick-fields input,.picker .pick-select select,.shortlist select,.vpn-page .vpn-toolbar input,#comparison .search{background:var(--work-raised);color:var(--work-text);border:1px solid var(--secradar-line-strong,#515a67);border-radius:12px;min-height:44px;box-sizing:border-box}
.picker input[type=radio]:checked{background:var(--work-accent);border-color:var(--work-accent)}
.picker input[type=checkbox]:checked{background:var(--work-accent);border-color:var(--work-accent)}
.shortlist input{accent-color:var(--work-accent)}
.picker button,.shortlist button,#comparison #selected-only{background:var(--work-raised);border:1px solid var(--secradar-line-strong,#515a67);border-radius:100px;min-height:44px;color:var(--work-text);padding:11px 18px}
.picker button.pick-primary,.shortlist button.shortlist-primary{background:var(--secradar-action,#dfe8f0);border-color:var(--secradar-action,#dfe8f0);color:var(--secradar-action-text,#10151b);box-shadow:none}
.picker button[type=reset]{background:transparent;border-color:transparent;color:var(--work-muted)}
.picker .pick-notice{border:1px solid var(--work-border);border-radius:14px;background:var(--work-panel)}
.picker .pick-mark,.picker .picker-eyebrow,.shortlist .shortlist-kicker{color:var(--work-accent)!important}
.vpn-page .vpn-scenarios{gap:10px}
.vpn-page .vpn-scenarios a,#comparison .scenario{background:var(--work-raised);border:1px solid var(--work-border);border-radius:14px;color:var(--work-text);box-shadow:none}
.vpn-page .vpn-scenarios a[aria-current=true],#comparison .scenario[aria-pressed=true]{background:var(--work-selected);border-color:var(--work-accent);color:var(--work-text)}
#comparison .scenario[aria-pressed=true] span{color:var(--work-text)}
#comparison .scenario[aria-pressed=true]:after{display:none}
#comparison .scenario-list{background:transparent;border:0;gap:10px}
.vpn-page .vpn-scroll,.shortlist .shortlist-scroll{border:1px solid var(--work-border);border-radius:18px;background:var(--work-panel)}
.vpn-page .vpn-scroll :is(th,td),.shortlist .shortlist-scroll :is(th,td){border-color:var(--work-border);background:var(--work-panel);color:var(--work-text)}
.vpn-page .vpn-scroll thead th,.shortlist .shortlist-scroll thead th{background:var(--work-raised)}
.vpn-page .vpn-scroll tbody tr:nth-child(even) td,.shortlist .shortlist-scroll tbody tr:nth-child(even) td{background:var(--work-raised)}
.vpn-page .vpn-scroll tbody tr:hover td,.shortlist .shortlist-scroll tbody tr:hover td{background:var(--secradar-raised,#18212b)}
.vpn-page .vpn-scroll :is(td,th) :is(small,.status),.shortlist .shortlist-badge{color:var(--work-muted)}
:is(.picker,.shortlist,.vpn-scenarios,.vpn-toolbar,#comparison) :is(a,button,input,select,summary):focus-visible{outline:3px solid var(--work-focus);outline-offset:4px}
@media(max-width:760px){.shortlist-controls{padding:18px 14px;border-radius:16px}.picker #picker-form{border-radius:16px}.vpn-page .vpn-scenarios a{padding:16px}.shortlist select{width:100%;min-width:0}}
@media(prefers-reduced-motion:reduce){:is(.picker,.shortlist,.vpn-scenarios) *{scroll-behavior:auto;transition:none}}
/* Section navigation stays semantic links, with a clear button affordance. */
main .seo-jumps{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
main .seo-jumps a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;box-sizing:border-box;padding:12px 20px;border:1px solid var(--secradar-line-strong,#515a67);border-radius:100px;background:var(--work-raised);color:var(--work-text);text-decoration:none;font-size:14px;line-height:1.4;font-weight:550;white-space:normal;text-align:center;transition:background .15s,border-color .15s}
main .seo-jumps a:hover{background:var(--secradar-raised,#18212b);border-color:var(--work-accent);text-decoration:none}
main .seo-jumps a:focus-visible{outline:3px solid var(--work-focus);outline-offset:4px}
main .seo-jumps a:active{background:var(--work-selected)}
#comparison .table-scroll{border:1px solid var(--work-border);border-radius:18px;background:var(--work-panel);overflow:auto}
#comparison .table-scroll th{background:var(--work-raised)}
#comparison .table-scroll td{background:var(--work-panel);border-color:var(--work-border)}
@media(max-width:550px){main .seo-jumps{gap:8px}main .seo-jumps a{flex:1 1 160px;padding:12px 16px;border-radius:14px;font-size:13px}}
@media(prefers-reduced-motion:reduce){main .seo-jumps a{transition:none}}