/* v110-shell.css — night build Oct 7–8 2026 (phase 1). Tokens only.
   The shared system states (ui/states.js): the 404 page, the error boundary, offline, session expired, no access, expired links, sectionState,
   progress by steps, pageSkeleton (ui/core.js) and the boot skeleton index.html draws before the app's code runs. Prefix: sys- (psk- for skeletons). */

/* ---------- a system page: one card, centred in the page area ---------- */
.page.sys-page{align-items:center}
.sys-card{width:100%;max-width:560px;margin-top:6vh;padding:28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-card)}
.sys-ic{display:grid;place-items:center;width:36px;height:36px;margin-bottom:4px;border-radius:var(--r-full);background:var(--fill-2);color:var(--text-3);flex:none}
.sys-ic.is-orange{background:var(--st-orange-bg);color:var(--st-orange-fg)}
.sys-h{margin:0;font-size:var(--t-t1);line-height:var(--lh-t1);font-weight:var(--w-semibold);letter-spacing:var(--ls-t1);color:var(--text-1);text-wrap:balance}
.sys-p{margin:0;max-width:52ch;font-size:var(--t-body);line-height:var(--lh-body);color:var(--text-2);text-wrap:pretty}
.sys-note{margin:0;font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--text-3)}
.sys-addr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 0;font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--text-3)}
.sys-addr code{font-family:var(--mono);font-size:var(--t-meta);padding:1px 6px;border-radius:var(--r-6);background:var(--fill-1);color:var(--text-2);overflow-wrap:anywhere}
.sys-acts{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
.sys-btn{text-decoration:none}
.sys-kbd{margin-left:2px;padding:0 6px;border-radius:var(--r-full);background:var(--fill-1);font-family:inherit;font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-medium);color:inherit}
.btn.pri .sys-kbd{background:transparent;box-shadow:inset 0 0 0 1px currentColor}
.sys-h2{margin:0;font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-semibold);color:var(--text-3)}
.sys-recent{align-self:stretch;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.sys-recent ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sys-rc{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 8px;margin:0 -8px;border-radius:var(--r-8);color:var(--text-1);text-decoration:none;font-size:var(--t-body);line-height:var(--lh-body)}
.sys-rc:hover{background:var(--hover)}
.sys-rc svg{color:var(--text-3);flex:none}
.sys-rc-t{min-width:0;flex:1;overflow-wrap:anywhere}
.sys-rc-p{flex:none;max-width:40%;font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sys-det{align-self:stretch;margin-top:6px}
.sys-det[open] > summary{margin-bottom:8px}
.sys-pre{margin:0;padding:10px 12px;border-radius:var(--r-8);background:var(--fill-1);font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere}
.sys-can{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--text-2)}
.sys-can li{display:flex;align-items:flex-start;gap:6px}
.sys-can svg{color:var(--st-green-fg);flex:none;margin-top:2px}
.sys-who{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--text-2)}
.sys-who svg{color:var(--text-3)}
.sys-or{margin:0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--text-2)}
.sys-or a{color:var(--link);font-weight:var(--w-medium)}
.sys-pv{align-self:stretch;max-width:560px;width:100%;margin:0 auto 12px}   /* night fix (Oct 8): 12px between the preview strip and the card */
.sys-pv + .sys-card{margin-top:0}   /* night fixer (#53): the card sits 12px under the strip at every height — it never covers the strip's Back link */
.sys-pv a{margin-left:auto;color:var(--link);font-weight:var(--w-medium)}

/* ---------- D6 · the error boundary's card (the page, the sidebar, the top bar, the panels) ---------- */
.sys-crash{width:100%;max-width:560px;margin-top:6vh;padding:24px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-card)}
.sys-crash.is-small{margin:0;max-width:none;padding:12px;gap:6px;border-radius:var(--r-12)}
.sys-crash.is-small .sys-h{font-size:var(--t-body);line-height:var(--lh-body)}
.sys-crash.is-small .sys-p{font-size:var(--t-co);line-height:var(--lh-co)}
.sys-crash.is-small .sys-acts{margin-top:2px;gap:4px}
.sys-crash.is-float{margin:0;max-width:420px;box-shadow:var(--sh-high);background:var(--elev)}
.sys-float{position:fixed;left:16px;bottom:16px;z-index:970;max-width:calc(100vw - 32px)}
.sb.sys-sb-crash{padding:8px;display:flex;flex-direction:column}
.app.v89 .topbar.sys-tb-crash,.topbar.sys-tb-crash{height:auto;min-height:var(--top-h);padding:8px 16px}   /* night fix (Oct 8, UX2-13): beats the shell's fixed bar height — the card grows the bar, never spills */
.topbar.sys-tb-crash .sys-crash{flex-direction:row;flex-wrap:wrap;align-items:center;border:0;padding:0;background:transparent}
.topbar.sys-tb-crash .sys-p{flex:1 1 240px;max-width:none}
@media (max-width:600px){.topbar.sys-tb-crash .sys-p{display:none}}
.sys-app-crash{min-height:100vh;display:flex;justify-content:center;padding:16px;background:var(--canvas)}
/* the rail (76px): the sidebar's card keeps its title and two icon buttons; their words stay for screen readers */
.app.v89.is-rail .sys-sb-crash .sys-crash{padding:8px 4px;align-items:center;text-align:center}
.app.v89.is-rail .sys-sb-crash .sys-h{font-size:var(--t-meta);line-height:var(--lh-meta)}
.app.v89.is-rail .sys-sb-crash :is(.sys-p,.sys-det){display:none}
.app.v89.is-rail .sys-sb-crash .sys-acts{flex-direction:column}
.app.v89.is-rail .sys-sb-crash .sys-btn > span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- D7 · offline · session expired ---------- */
.sys-offline{flex:none;display:flex;align-items:center;gap:8px;padding:8px var(--page-x,32px);background:var(--st-orange-bg);color:var(--st-orange-fg);border-bottom:1px solid var(--line);font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium)}
.sys-offline svg{flex:none}
/* closing round L (#70): offline, the banner runs across the whole frame, above the sidebar and the page (as the demo bar does) — the sidebar's top
   row and the header keep one line; ui/lshell.js puts it first in .app and adds .is-offline */
.app.is-offline{grid-template-rows:auto minmax(0,1fr)}
.app.is-offline > .sys-offline{grid-column:1 / -1;grid-row:1}
.app.is-offline > :not(.sys-offline){grid-row:2}
.sys-scrim{position:fixed;inset:0;z-index:970;display:grid;place-items:center;padding:16px;background:var(--scrim)}
.sys-dlg{width:min(440px,100%);padding:28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--elev);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-high)}
.sys-dlg .sys-h{font-size:var(--t-t2);line-height:var(--lh-t2);letter-spacing:var(--ls-t2)}

/* ---------- B1 · sectionState: one line, one action, the two clocks ---------- */
.sys-ss{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-12);min-width:0}
.sys-ss.is-compact{padding:10px 0;background:transparent;border:0;border-radius:0}
.fi-st > .sys-ss{padding:0;background:transparent;border:0;border-radius:0}   /* closing round L (#27): Findings' state sits in its panel — one box, never a box in a box */
.sys-ss-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-full);background:var(--fill-2);color:var(--text-3);flex:none}
.sys-ss.is-blue .sys-ss-ic{background:var(--st-blue-bg);color:var(--st-blue-fg)}
.sys-ss.is-orange .sys-ss-ic{background:var(--st-orange-bg);color:var(--st-orange-fg)}
.sys-ss.is-green .sys-ss-ic{background:var(--st-green-bg);color:var(--st-green-fg)}
.sys-ss-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sys-ss-m{margin:0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--text-1);text-wrap:pretty}
.sys-ss-meta{margin:0;font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--text-3);font-variant-numeric:tabular-nums}
.sys-ss-a{flex:none;text-decoration:none}

/* ---------- D5 · progress by steps ---------- */
.sys-prog{display:flex;flex-direction:column;gap:6px;min-width:0}
.sys-prog-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:var(--t-co);line-height:var(--lh-co)}
.sys-prog-l{color:var(--text-1);font-weight:var(--w-medium);min-width:0}
.sys-prog-n{color:var(--text-3);font-variant-numeric:tabular-nums;flex:none}
.sys-prog-bar{height:6px;border-radius:var(--r-full);background:var(--fill-2);overflow:hidden}
.sys-prog-bar i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0));transition:transform var(--dur-3) var(--ease-out)}   /* home fixer: a transform, never a width animation */
.sys-prog.is-done .sys-prog-bar i{background:var(--st-green)}
.sys-prog-s{margin:0;font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--text-3)}

/* ---------- D5 · pageSkeleton(kind) (ui/core.js) — the shimmer is linear.css .sk ---------- */
.psk{gap:16px}
.psk-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.psk-hl{display:flex;flex-direction:column;gap:10px;min-width:0;max-width:100%}
.psk-hr{display:flex;gap:8px}
.psk .sk.psk-pill{border-radius:var(--r-ctl)}
.psk-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px 18px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-card)}
.psk-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.psk .sk.psk-chart{border-radius:var(--r-12)}
.psk-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.psk-two.is-detail{grid-template-columns:minmax(0,1fr) minmax(0,320px)}
.psk-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.psk-kv{display:flex;justify-content:space-between;gap:12px}
.psk-tabs{display:flex;gap:20px;padding:4px 0 10px;border-bottom:1px solid var(--line)}
.psk-row{display:flex;align-items:center;gap:12px;padding:6px 0}
.psk-row + .psk-row{border-top:1px solid var(--line);padding-top:12px}
.psk .sk.psk-dot{border-radius:var(--r-full);flex:none}
.psk-lines{flex:1;min-width:0;gap:6px}
.psk-bar{display:flex;gap:8px}
.psk-tr{display:grid;grid-template-columns:3fr repeat(5,minmax(0,1fr));gap:16px;align-items:center;padding:8px 0}
.psk-tr + .psk-tr{border-top:1px solid var(--line)}

/* ---------- #/dev/states ---------- */
.sys-dev{gap:8px;max-width:1120px}
.sys-dev-h{margin:0 0 4px;font-size:var(--t-page);line-height:var(--lh-page);font-weight:var(--w-semibold);letter-spacing:var(--ls-page);color:var(--text-1)}
.sys-dev-sec{display:flex;flex-direction:column;gap:10px;padding:18px 0;border-top:1px solid var(--line)}
.sys-dev-sec > .sys-h2{font-size:var(--t-t3);line-height:var(--lh-t3);color:var(--text-1)}
.sys-dev-ss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sys-dev-it{display:flex;flex-direction:column;gap:6px;min-width:0}
.sys-dev-k{align-self:flex-start;font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-meta);padding:0 6px;border-radius:var(--r-6);background:var(--fill-1);color:var(--text-2)}
.sys-dev-pg{display:flex;flex-direction:column;gap:14px;max-width:520px}
.sys-dev-sk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sys-dev-fr{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.sys-dev-fr figcaption{font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--text-3)}
.sys-dev-frb{height:300px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-12);background:var(--canvas)}
.sys-dev-frb .page{padding:16px}
.sys-dev-ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sys-dev-li{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--t-body);line-height:var(--lh-body)}
.sys-dev-w{flex:0 0 300px;color:var(--text-2)}
.sys-dev-a{min-width:0;color:var(--link);font-family:var(--mono);font-size:var(--t-co);line-height:var(--lh-co);overflow-wrap:anywhere}

/* ---------- the boot skeleton (index.html) — the shell's frame in CSS before the app's code runs; the first render replaces it ---------- */
.sys-boot{--sys-sb:248px;position:fixed;inset:0;display:grid;grid-template-columns:var(--sys-sb) minmax(0,1fr);background:var(--canvas);overflow:hidden}
:root[data-boot~="rail"] .sys-boot{--sys-sb:76px}
.sys-boot-sb{display:flex;flex-direction:column;gap:6px;padding:8px;border-right:1px solid var(--line);container-type:inline-size;overflow:hidden}
.sys-boot-sb .sys-bk-top{height:40px;display:flex;align-items:center;padding:0 12px}   /* identity v1.0: the 20 px mark lands where the sidebar draws it (x 20, y 18), the live name 9 px after it — no jump when the app takes over */
.sys-boot-sb .sys-bk-pj{display:flex;align-items:center;gap:10px;height:44px;padding:0 10px;margin-bottom:6px}
.sys-boot-sb .sys-bk-row{display:flex;align-items:center;gap:10px;height:32px;padding:0 14px}
.sys-boot .sk.is-tile{width:24px;height:24px;border-radius:var(--r-6);flex:none}
.sys-boot .sk.is-ic{width:16px;height:16px;border-radius:var(--r-4);flex:none}
.sys-boot .sk.is-lb{height:10px;flex:1;max-width:120px}
.sys-boot .sk.is-logo{width:96px;height:16px}
.sys-boot .sk.is-q{height:32px;border-radius:var(--r-ctl);margin:0 4px 6px}
@container (max-width:120px){.sys-boot-sb .sk.is-lb,.sys-boot-sb .sk.is-logo{display:none}.sys-boot-sb .sys-bk-pj,.sys-boot-sb .sys-bk-row{justify-content:center;padding:0}}
.sys-boot-main{display:flex;flex-direction:column;min-width:0}
.sys-boot-top{flex:none;height:56px;display:flex;align-items:center;gap:10px;padding:0 16px 0 32px;background:var(--surface-1);border-bottom:1px solid var(--line)}
.sys-boot .sk.is-crumb{width:120px;height:12px}
.sys-boot .sk.is-crumb2{width:80px;height:12px}
.sys-boot .sk.is-menu{display:none;width:20px;height:20px}
.sys-boot-page{display:flex;flex-direction:column;gap:14px;padding:22px 32px}
.sys-boot .sk.is-h1{width:260px;height:26px}
.sys-boot .sk.is-sub{width:420px;height:14px}
.sys-boot-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:6px}
.sys-boot .sk.is-card{height:84px;border-radius:var(--r-card)}
.sys-boot .sk.is-block{height:260px;border-radius:var(--r-card)}
.sys-boot-fail{position:absolute;left:50%;top:22vh;transform:translateX(-50%);width:min(420px,calc(100% - 32px));margin:0;padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-med);font-size:var(--t-body);line-height:var(--lh-body);color:var(--text-1)}
.sys-boot-fail[hidden]{display:none}
.sys-boot:not([aria-busy]) .sk{animation:none;opacity:.35}   /* night fix (Oct 8, UX6-12): failed — the skeleton stops and fades behind the card */
@media (max-width:1279px){.sys-boot{--sys-sb:76px}:root[data-boot~="mid"] .sys-boot{--sys-sb:248px}.sys-boot-top,.sys-boot-page{padding-left:24px}}

/* the phone's crumb (ui/lshell.js topbar): its link's -6px hover pad overflowed the crumb by 6px on every record page — the right side keeps its pad inside */
.app.v89 .crumbs.cr-ph > a.cr-a:last-child{margin-right:0}

/* ---------- phones (≤ 760px) ---------- */
@media (max-width:760px){
  .sys-card,.sys-crash{margin-top:16px;padding:20px}
  .sys-acts .sys-btn{min-height:40px;flex:1 1 auto}
  .sys-acts .sys-kbd{display:none}
  .sys-rc{min-height:44px}
  .sys-rc-p{display:none}
  .sys-ss{flex-wrap:wrap}
  .sys-ss-t{flex-basis:calc(100% - 40px)}
  .sys-ss-a{min-height:40px;margin-left:40px}
  .psk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .psk-two,.psk-two.is-detail{grid-template-columns:minmax(0,1fr)}
  .psk-hr{display:none}
  .psk-tr{grid-template-columns:2fr repeat(2,minmax(0,1fr))}
  .psk-tr > :nth-child(n+4){display:none}
  .sys-dev-ss,.sys-dev-sk{grid-template-columns:minmax(0,1fr)}
  .sys-dev-li{flex-direction:column;gap:2px}
  .sys-dev-w{flex:none}
  .sys-boot{grid-template-columns:minmax(0,1fr)}
  .sys-boot-sb{display:none}
  .sys-boot-top,.sys-boot-page{padding-left:16px;padding-right:16px}
  .sys-boot .sk.is-menu{display:block}
  .sys-boot-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.sys-prog-bar i{transition:none}.sys-boot .sk,.psk .sk{animation:none}}