/* The Lab shell — adaptive nav (sidebar on big screens, bottom tab bar on
   phones) rendered from build-line.json. Self-contained; unifies with the
   securacv.com visual system (Inter/system, blue + canary). */

:root{
  --brand:#2563eb;--brand-dark:#1d4ed8;--brand-light:#eef4ff;
  --canary:#e0a100;--canary-strong:#f5b301;--good:#0a9d64;
  --bg:#fafaf9;--bg-alt:#f1f1ef;--surface:#ffffff;--side:#f6f6f7;
  --text:#0b0b0c;--text-2:#54545c;--muted:#9a9aa2;
  --sep:#e6e6e3;--sep-strong:#d5d5cf;--rail:#dcdcd8;
  --sel:#2563eb;--sel-soft:#e7effd;--hover:#ececed;
  --shadow:0 1px 2px rgba(11,11,12,.05),0 10px 30px -16px rgba(11,11,12,.16);
  --mono:ui-monospace,"SF Mono","Fira Code",Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;
  --side-w:264px;
  --glow-op:.3;
}
@media (prefers-color-scheme:dark){:root{
  --brand:#6899f2;--brand-dark:#86adf5;--brand-light:#18243c;
  --canary:#f0c04a;--canary-strong:#f7c948;--good:#34d399;
  --bg:#0b0b0d;--bg-alt:#141418;--surface:#17171b;--side:#141417;
  --text:#f2f2f0;--text-2:#b4b4bb;--muted:#78787f;
  --sep:#26262c;--sep-strong:#3a3a41;--rail:#2f2f36;
  --sel:#3b6fd4;--sel-soft:#20304e;--hover:#212127;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -18px rgba(0,0,0,.7);
  --glow-op:.55;
}}

*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  line-height:1.5;-webkit-font-smoothing:antialiased;letter-spacing:-.011em;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px;}

.ns{max-width:640px;margin:40px auto;padding:0 24px;}
.ns ul{line-height:2;}

/* ===== layout ===== */
.shell{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh;}
#lab-shell[data-loading]{display:flex;align-items:center;justify-content:center;min-height:100vh;color:var(--muted);font-size:14px;}

/* ===== sidebar ===== */
.side{background:var(--side);border-right:1px solid var(--sep);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;}
.side-head{display:flex;align-items:center;gap:9px;padding:16px 16px 12px;}
.side-head .bird{width:24px;height:24px;flex:none;}
.side-head b{font-size:15px;letter-spacing:-.02em;}
.side-head .dot{color:var(--canary);}
.side-head small{color:var(--text-2);font-weight:500;}
.side-search{margin:0 12px 8px;display:flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--sep-strong);border-radius:8px;padding:6px 10px;color:var(--muted);font-size:12.5px;}
.side-search svg{width:13px;height:13px;flex:none;}
.side-search input{border:0;background:transparent;outline:none;color:var(--text);font:inherit;font-size:12.5px;width:100%;}
.side-scroll{flex:1;overflow-y:auto;padding:4px 8px 16px;}
.side-sec{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:12px 8px 5px;}

.item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;
  padding:7px 9px;border-radius:8px;font-size:13.5px;color:var(--text);}
.item:hover{background:var(--hover);}
.item.sel{background:var(--sel);color:#fff;}
.item.sel .meta,.item.sel .chev,.item.sel .num{color:rgba(255,255,255,.82);}
.item .chev{width:12px;height:12px;color:var(--muted);flex:none;transition:transform .15s ease;}
.item .chev.open{transform:rotate(90deg);}
.item .ic{width:16px;height:16px;flex:none;color:var(--text-2);}
.item.sel .ic{color:#fff;}
.item .num{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:none;width:11px;text-align:center;}
.item .lb{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;}
.item .lb .q{color:var(--muted);font-weight:400;}
.item.sel .lb .q{color:rgba(255,255,255,.7);}
.item .meta{margin-left:auto;flex:none;display:flex;align-items:center;gap:6px;}
.item .chk{width:15px;height:15px;border-radius:50%;background:var(--good);display:grid;place-items:center;flex:none;}
.item .chk svg{width:9px;height:9px;color:#fff;}
.item .rf{width:6px;height:6px;border-radius:50%;background:var(--canary);flex:none;}
.children{margin-left:16px;border-left:1.5px solid var(--sep);padding-left:5px;
  display:flex;flex-direction:column;gap:1px;margin-top:1px;overflow:hidden;}
.children[hidden]{display:none;}
.children .item{font-size:13px;}
.lvl2{margin-left:12px;}
.lvl2 .item .lb{font-weight:450;}

/* ===== content ===== */
.main{min-width:0;display:flex;flex-direction:column;min-height:0;}
.topbar{display:none;} /* phone only */
.content{flex:1;padding:30px 40px 40px;max-width:1020px;width:100%;min-height:0;}
/* A bench fills the pane instead of sitting in a reading column — it is an
   application surface, not prose, and the 1020px cap left most of a desktop
   window empty. The reading views (overview, start, all, settings) keep it.
   Class set by renderContent, not `:has()`, which macOS 10.15's WebView lacks. */
.content.content-full{max-width:none;padding:0;display:flex;flex-direction:column;}

/* ===== a bench, embedded ===== */
.bench-wrap{flex:1;display:flex;flex-direction:column;min-height:0;}
/* One row, always. A depth label in the manifest doubles as its description
   ("Dev — the Proving Ground: test your flashed Sense, live or emulated"), so
   left to wrap they shove the steppers onto a second line and tear a gap
   across the top of every multi-depth bench. Each cell truncates instead; the
   full text is on the button's title. */
.bench-bar{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;
  padding:12px 22px;border-bottom:1px solid var(--sep);background:var(--surface);}
.bb-where{min-width:0;flex:0 1 auto;}
.bb-where .crumbs{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bb-title{display:flex;align-items:center;gap:9px;margin-top:2px;min-width:0;}
.bb-title h1{font-size:19px;font-weight:680;letter-spacing:-.02em;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bench-bar .seg{margin:0 0 0 auto;flex:0 1 auto;min-width:0;flex-wrap:nowrap;}
.bench-bar .seg button{padding:5px 12px;font-size:12.5px;
  max-width:20ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bb-go{display:flex;align-items:center;gap:6px;flex:none;}

.stepper{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  border:1px solid var(--sep-strong);background:var(--surface);color:var(--text-2);}
.stepper svg{width:16px;height:16px;}
.stepper:hover:not(:disabled){border-color:var(--brand);color:var(--brand);}
.stepper:disabled{opacity:.32;cursor:default;}
.stepper.out{margin-left:6px;}

.bench-wrap .forknote{margin:10px 22px 0;}
.bench-frame{flex:1;width:100%;border:0;display:block;min-height:0;background:var(--bg);}

/* ===== the Overview — the isometric room staged as a hero ===== */
.ov-hero{position:relative;isolation:isolate;}
/* ambient color pooling behind the room: two soft blobs (canary + brand)
   drifting very slowly — pure CSS, composited transforms only */
.ov-glow{position:absolute;inset:-48px -64px;z-index:-1;pointer-events:none;opacity:var(--glow-op,.3);}
.ov-glow::before,.ov-glow::after{content:"";position:absolute;width:46%;height:60%;border-radius:50%;
  filter:blur(70px);will-change:transform;}
.ov-glow::before{left:-6%;top:-12%;background:radial-gradient(closest-side,var(--canary-strong),transparent 72%);
  animation:ovdrift 16s ease-in-out infinite alternate;}
.ov-glow::after{right:-8%;bottom:-16%;background:radial-gradient(closest-side,var(--brand),transparent 72%);
  animation:ovdrift 21s ease-in-out -9s infinite alternate-reverse;}
@keyframes ovdrift{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(6%,10%,0) scale(1.14);}}
.room-wrap{border:1px solid var(--sep);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:var(--surface);
  animation:ovin .7s cubic-bezier(.2,.9,.3,1) backwards;}
.room{width:100%;height:min(76vh,680px);border:0;display:block;}
@keyframes ovin{from{opacity:0;transform:translateY(18px) scale(.985);}to{opacity:1;transform:none;}}

.ov-line{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:28px 0 14px;}
.ov-cards-head{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;}
/* six pips, one per stage, lit in the stage's accent once visited */
.ov-prog{display:inline-flex;align-items:center;gap:5px;margin-left:auto;}
.ov-prog .pip{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ac);opacity:.45;transition:opacity .3s,box-shadow .3s;}
.ov-prog .pip.lit{background:var(--ac);opacity:1;box-shadow:0 0 8px var(--ac);}
.ov-prog .pt{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:5px;}

.crumbs{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-family:var(--mono);}
.crumbs b{color:var(--text-2);font-weight:600;}
.crumbs .sep{opacity:.5;}
.c-h{display:flex;align-items:center;gap:11px;margin:12px 0 2px;flex-wrap:wrap;}
.c-h h1{font-size:clamp(22px,3vw,29px);font-weight:700;letter-spacing:-.025em;margin:0;}
.badge{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 8px;border-radius:5px;color:#fff;background:var(--canary);}
.verb{color:var(--text-2);font-size:15px;margin:2px 0 0;}

.seg{display:inline-flex;background:var(--bg-alt);border-radius:9px;padding:3px;border:1px solid var(--sep);margin:16px 0 2px;gap:2px;flex-wrap:wrap;}
.seg button{border:0;background:transparent;font-size:13px;font-weight:550;color:var(--text-2);padding:6px 14px;border-radius:6px;}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.12);}

.forknote{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:13px;color:var(--canary);
  background:color-mix(in srgb,var(--canary-strong) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--canary-strong) 32%,transparent);padding:9px 13px;border-radius:10px;width:fit-content;max-width:100%;}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:620;padding:10px 18px;border-radius:10px;border:1px solid transparent;}
.btn.primary{background:var(--brand);color:#fff;box-shadow:var(--shadow);}
.btn.primary:hover{background:var(--brand-dark);}
.btn.ghost{background:var(--surface);border-color:var(--sep-strong);color:var(--text);}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand);}
.btn svg{width:16px;height:16px;}

.sitelinks{margin-top:20px;font-size:12.5px;color:var(--text-2);}
.sitelinks .k{font-family:var(--mono);color:var(--muted);}
.chip{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--sep);margin:3px 4px 0 0;color:var(--text-2);}
.chip:hover{border-color:var(--brand);color:var(--brand);}

/* The prev/next booklet that used to close a bench card lives on as the two
   arrow steppers in .bench-bar — its rules are gone rather than orphaned. */

/* overview + all-index views */
.hero-o{padding:8px 0 0;}
.hero-o .kick{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--canary);
  background:color-mix(in srgb,var(--canary-strong) 14%,transparent);border:1px solid color-mix(in srgb,var(--canary-strong) 34%,transparent);padding:4px 11px;border-radius:999px;}
.hero-o h1{font-size:clamp(26px,4vw,38px);letter-spacing:-.03em;margin:16px 0 0;font-weight:730;max-width:16ch;line-height:1.05;}
.hero-o h1 em{font-style:normal;color:var(--brand);}
.hero-o p{font-size:17px;color:var(--text-2);max-width:60ch;margin:14px 0 0;}
.stage-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
/* each stage card carries its accent as --ac (set inline by overviewView) —
   the badge, hover glow, top rail and shine all key off it */
.scard{position:relative;overflow:hidden;border:1px solid var(--sep);background:var(--surface);border-radius:14px;padding:16px;
  box-shadow:var(--shadow);text-align:left;display:flex;flex-direction:column;gap:2px;
  transition:transform .35s cubic-bezier(.18,1.25,.4,1),border-color .2s ease,box-shadow .35s ease;
  animation:cardin .6s cubic-bezier(.18,1.25,.4,1) backwards;animation-delay:calc(var(--i,0)*70ms + 150ms);}
@keyframes cardin{from{opacity:0;transform:translateY(22px) scale(.96);}to{opacity:1;transform:none;}}
.scard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ac,var(--brand));
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.9,.3,1);}
.scard:hover{transform:translateY(-4px);border-color:var(--ac,var(--brand));box-shadow:0 18px 40px -22px var(--ac,var(--brand));}
.scard:hover::before{transform:scaleX(1);}
.sc-shine{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.15) 46%,transparent 62%);
  transform:translateX(-110%);}
.scard:hover .sc-shine{animation:shine .8s cubic-bezier(.3,.6,.4,1) .05s;}
@keyframes shine{to{transform:translateX(110%);}}
.scard .top{display:flex;align-items:center;gap:9px;}
.scard .circ{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;font-weight:700;
  flex:none;color:var(--ac-ink,#fff);background:var(--ac,var(--brand));box-shadow:0 4px 12px -4px var(--ac,var(--brand));
  transition:transform .35s cubic-bezier(.18,1.6,.4,1);}
.scard:hover .circ{transform:scale(1.12) rotate(-6deg);}
.scard .sc-chk{display:grid;place-items:center;}
.scard .sc-chk svg{width:13px;height:13px;display:block;}
.scard.done .circ{background:var(--good);color:#fff;box-shadow:0 4px 12px -4px var(--good);}
.scard h3{font-size:15.5px;margin:0;font-weight:660;}
.scard .sc-go{margin-left:auto;color:var(--ac,var(--brand));opacity:0;transform:translateX(-6px);
  transition:opacity .25s ease,transform .3s cubic-bezier(.2,1.4,.4,1);}
.scard .sc-go svg{width:16px;height:16px;display:block;}
.scard:hover .sc-go{opacity:1;transform:none;}
.scard .verb{font-size:12.5px;color:var(--text-2);margin-top:8px;}
.scard .cnt{font-size:11.5px;color:var(--muted);margin-top:6px;font-family:var(--mono);}

.allgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:20px;}
.allcol h4{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-family:var(--mono);}
.allcol a{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:7px;font-size:13.5px;}
.allcol a:hover{background:var(--hover);color:var(--brand);}
.allcol a .rf{width:6px;height:6px;border-radius:50%;background:var(--canary);margin-left:auto;flex:none;}
/* The stage's securacv.com pages sit in the same column as its benches, so the
   full-width row style above would claim them too — chips have to say chip
   louder than `.allcol a` says row. */
.allcol .sitelinks{margin-top:12px;}
.allcol .sitelinks a.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;}
.allcol .sitelinks a.chip:hover{background:var(--bg-alt);border-color:var(--brand);color:var(--brand);}

/* ===== Settings — updates & about (app only, see lab-settings.js) ===== */
.settings .set-sec{margin-top:28px;}
.settings .set-sec h2{font-size:15px;font-weight:660;letter-spacing:-.01em;margin:0 0 10px;}
.set-lede{font-size:13.5px;color:var(--text-2);line-height:1.6;max-width:66ch;margin:0 0 12px;}

.set-specs{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:0;
  border:1px solid var(--sep);border-radius:12px;padding:14px 16px;background:var(--surface);width:fit-content;min-width:min(380px,100%);}
.set-specs dt{font-size:12.5px;color:var(--muted);}
.set-specs dd{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--text);}

.set-card{border:1px solid var(--sep);border-radius:12px;padding:16px;background:var(--surface);box-shadow:var(--shadow);}
.set-status{margin:0;font-size:14.5px;font-weight:600;}
.set-status.ok{color:var(--good);}
.set-status.warn{color:var(--canary);}
.set-card .set-lede{margin:8px 0 0;}
.set-card .actions{margin-top:14px;}

.set-notes{margin-top:12px;border-left:2px solid var(--sep-strong);padding-left:12px;}
.set-notes b{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.set-notes p{font-size:13.5px;color:var(--text-2);margin:6px 0 0;}
.set-notes ul{margin:6px 0 0;padding-left:18px;}
.set-notes li{font-size:13.5px;color:var(--text-2);line-height:1.55;margin-top:3px;}

.set-log{border:1px solid var(--sep);border-radius:12px;background:var(--surface);
  max-height:340px;overflow-y:auto;}
.set-log-row{display:flex;gap:12px;align-items:baseline;padding:7px 14px;border-top:1px solid var(--sep);font-size:12.5px;}
.set-log-row:first-child{border-top:0;}
.set-log-row time{font-family:var(--mono);font-size:11.5px;color:var(--muted);flex:none;}
.set-log-row .l-msg{color:var(--text-2);min-width:0;overflow-wrap:anywhere;}
.set-log-row .muted{color:var(--muted);}
.set-path{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:8px 0 0;overflow-wrap:anywhere;}

/* status footer strip */
.foot{margin-top:auto;border-top:1px solid var(--sep);padding:12px 40px;font-family:var(--mono);font-size:11.5px;color:var(--muted);display:flex;gap:10px;}
.foot .grow{flex:1;}

/* ===== bottom tab bar (phones) ===== */
.tabbar{display:none;}

@media (max-width:860px){
  .shell{grid-template-columns:1fr;}
  .side{display:none;}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:10;
    background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);
    border-bottom:1px solid var(--sep);padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));}
  .topbar .back{display:flex;align-items:center;gap:4px;color:var(--brand);font-size:15px;font-weight:600;background:none;border:0;padding:0;}
  .topbar .back[hidden]{visibility:hidden;}
  .topbar .ttl{font-weight:660;font-size:15px;flex:1;text-align:center;}
  .topbar .off{font-size:10.5px;color:var(--good);font-weight:600;}
  .content{padding:20px 18px 96px;}
  .room{height:min(64vh,500px);}
  .foot{display:none;}

  /* The bench bar on a phone. At 420px the desktop layout collapsed into
     nonsense — the title ellipsed to one letter, the badge wrapped to two
     lines, and each depth button read "M…". Nothing there was lost by
     dropping it: the sticky .topbar directly above already names the bench,
     and the sidebar's crumb trail is not on screen to be echoed. What's left
     is what only this bar offers — the depth switcher, which now shares the
     row evenly instead of truncating, and the prev/next/open steppers. */
  .bench-bar{gap:10px;padding:9px 14px;}
  .bb-where{display:none;}
  /* Not every depth head is short — "What the mic hears (4.3C)" has no tail to
     drop — so squeezing them all into one 420px row clips whichever is longest.
     The strip scrolls sideways instead: every label stays whole, and it takes
     any number of depths without re-tuning. */
  .bench-bar .seg{margin:0;flex:1 1 auto;overflow-x:auto;scrollbar-width:none;}
  .bench-bar .seg::-webkit-scrollbar{display:none;}
  .bench-bar .seg button{flex:0 0 auto;max-width:none;padding:6px 10px;font-size:12px;}
  /* 32px is a mouse target, not a thumb one. */
  .stepper{width:36px;height:36px;}
  .bench-wrap .forknote{margin:9px 14px 0;font-size:12px;}

  /* The tab bar's box is stated once, as a number, because something else has
     to reserve exactly it: a full-bleed bench has no padding of its own, so a
     hand-guessed reserve ran short and the bar sat on the last strip of the
     framed page. Explicit height + the global border-box makes this token the
     single source, not a description of what the padding happens to produce. */
  :root{--tabbar-h:calc(48px + 6px + max(6px,env(safe-area-inset-bottom)));}
  .content.content-full{padding-bottom:var(--tabbar-h);}

  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:20;height:var(--tabbar-h);
    background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:saturate(1.5) blur(12px);
    border-top:1px solid var(--sep);padding:6px 4px;padding-bottom:max(6px,env(safe-area-inset-bottom));
    justify-content:space-around;}
  .tab{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;color:var(--muted);padding:2px 6px;flex:1;}
  .tab.on{color:var(--brand);}
  .tab svg{width:20px;height:20px;}
  .tab .lb{font-size:9px;font-weight:550;}
  .tab .chkmini{position:absolute;transform:translate(11px,-8px);width:8px;height:8px;border-radius:50%;background:var(--good);border:1.5px solid var(--surface);}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
  .ov-glow::before,.ov-glow::after,.room-wrap,.scard,.scard:hover .sc-shine{animation:none !important;}
}

/* ── "still on SecuraCV" bar ─────────────────────────────────────────────
   Mapped to lab-shell's own tokens, which flip with its dark theme. Earlier
   this borrowed --edge/--faint/--canary fallbacks from the Quiet Glass
   palette; those tokens do not exist here, so the fallbacks were dark
   literals sitting on a light surface. */
.scv-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--surface); border-bottom: 1px solid var(--sep);
  font: 500 13px/1.4 var(--sans); color: var(--text-2);
}
.scv-bar a { color: var(--text); text-decoration: none; font-weight: 600; }
.scv-bar a:hover { color: var(--brand); text-decoration: underline; }
.scv-bar .scv-home { color: var(--brand); }
.scv-bar .scv-sep { color: var(--muted); }
.scv-bar .scv-where { margin-left: auto; color: var(--muted); font-weight: 500; }
@media (max-width: 560px) { .scv-bar .scv-where { display: none; } }

/* In the native app this strip is a second bar stacked above the sidebar,
   repeating the wordmark the sidebar already shows and offering links that
   leave the app. Its two useful destinations (Glossary, Help) moved into the
   sidebar's Reference section, so the strip is hidden here — on the website it
   stays, because there it is the way back to securacv.com from another origin.
   `.scv-app` is set by lab-nav.js when window.__TAURI__ exists. */
.scv-app .scv-bar { display: none; }

.item .ext{margin-left:auto;flex:none;opacity:.45;}
.item .ext svg{width:11px;height:11px;display:block;}
.item:hover .ext{opacity:.8;}