/* base.css — the design system and the shell, as the Mac app draws them.
   Design.swift (Ink, Space, Radius, Face), Components.swift, Views.swift,
   ported measurement for measurement. One palette, pinned dark. Seven font
   sizes. Owned by the foundation; a surface file never adds a rule here.
   Contract: docs/web-redesign-spec/1-design-system.md and 2-shell.md. */

/* ============================================================== 1.1 tokens */
:root{
  --bg:#212121;      /* the page */
  --side:#171717;    /* the rail, the Chat list */
  --card:#2B2B2B;    /* a raised thing */
  --card2:#383838;   /* raised and pressed, or chosen */
  --line:#3B3B3B;    /* every hairline, card strokes */
  --line2:#4D4D4D;   /* stronger stroke: toast, composer island, off dot */
  --text:#ECECEC; --muted:#B4B4B4; --faint:#8A8A8A;
  --ok:#3DDC97; --bad:#FF5F57; --warn:#F5B544;
  --accent:#6FA5FF;  /* the busy dot, the busy state word, a focused field's ring. Nowhere else. */
  --link:#6FA5FF;    /* a.md-link inside .md only */
  --focus:color-mix(in srgb,var(--accent) 70%,transparent);
  --s-xxs:2px; --s-xs:4px; --s-s:6px; --s-m:8px; --s-l:12px;
  --s-xl:16px; --s-xxl:24px; --s-h3:32px; --s-h4:48px;
  --h-chip:26px; --h-button:32px; --h-field:40px; --h-row:38px; --h-head:64px;
  --rail:240px; --roster:252px; --deskcol:360px; --subrail:216px;
  --sheet:700px; --sheet-narrow:520px;
  --r-sm:8px; --r-row:10px; --r-md:12px; --r-lg:16px;
  --r-bubble:18px; --r-island:22px; --r-float:26px;
  color-scheme:dark;
}

/* ================================================== 1.2 reset, type, focus */
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
  font-size:14.5px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--text)}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--card2)}
:focus-visible{outline:2px solid var(--line2);outline-offset:2px}
kbd,.mono,.md-tick,.md-pre,.setupcode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
kbd{font-size:11px;color:var(--faint)}
.mono{font-size:11px}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* macOS overlay scrollbars: a thin thumb that appears over the thing you hover */
*{scrollbar-width:thin;scrollbar-color:transparent transparent}
*:hover{scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:transparent;border-radius:6px;border:2px solid transparent;background-clip:padding-box}
*:hover::-webkit-scrollbar-thumb{background:var(--line2);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
/* no native clear button: a search field that clears draws its own .xbtn.sm */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}

/* ================================================== 1.4 buttons (Components.swift:19)
   One shape, a capsule. 40 high primary; 32 high sec / quiet / danger / sm. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h-field);
  padding:0 20px;border-radius:999px;border:1px solid transparent;background:var(--text);color:var(--bg);
  font-size:14.5px;font-weight:500;cursor:pointer;white-space:nowrap;width:auto;
  transition:background .12s ease,border-color .12s ease,color .12s ease}
.btn:hover:not(:disabled){background:color-mix(in srgb,var(--text) 82%,transparent)}
.btn:disabled{opacity:.38;cursor:default}
.btn svg{width:12px;height:12px}
.btn.sm{height:var(--h-button);padding:0 14px;font-size:12.5px}
.btn.sec{background:var(--card);color:var(--text);border-color:var(--line)}
.btn.sec:hover:not(:disabled){background:var(--card2);border-color:var(--line2)}
.btn.quiet{background:transparent;color:var(--text);border-color:transparent}
.btn.quiet:hover:not(:disabled){background:var(--card)}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--line)}
.btn.danger:hover:not(:disabled){background:var(--card2);border-color:color-mix(in srgb,var(--bad) 50%,transparent)}
.btn.sec,.btn.quiet,.btn.danger{height:var(--h-button);padding:0 14px;font-size:12.5px}
.btn.big,.btn.field{height:var(--h-field);padding:0 20px;font-size:14.5px}
.btn.wide{width:100%}
.btnrow{display:flex;gap:var(--s-m);align-items:center;flex-wrap:wrap;margin-top:var(--s-l)}
.xbtn{display:inline-grid;place-items:center;width:var(--h-button);height:var(--h-button);border:0;padding:0;
  border-radius:var(--r-md);background:none;color:var(--muted);cursor:pointer;flex:none;font-size:16px;line-height:1}
.xbtn:hover{background:var(--card);color:var(--text)}
.xbtn.sm{width:var(--h-chip);height:var(--h-chip)}
.link{background:none;border:0;padding:0;color:var(--text);font-size:14.5px;font-weight:500;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.link:hover{color:var(--muted)}

/* ================================================== 1.4 fields (Components.swift:100) */
.f{width:100%;height:var(--h-field);padding:0 var(--s-l);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--text);font-size:14.5px;font-family:inherit}
.f::placeholder{color:var(--faint)}
.f:focus{outline:none;border-color:var(--focus)}
.f.sm{height:var(--h-button);font-size:12.5px}
.f.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
textarea.f{height:auto;min-height:88px;padding:10px var(--s-l);line-height:1.5;resize:vertical}
select.f,.orgpick{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 5'><path d='M1 1l3.5 3L8 1' fill='none' stroke='%238A8A8A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center;background-size:9px 5px}
.orgpick{width:auto;height:var(--h-button);padding-left:var(--s-l);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text);font-size:12.5px}
label{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin:0 0 var(--s-s)}
label.strong{font-size:14.5px;color:var(--text)}
.field{margin-bottom:var(--s-l)}
.searchf{display:flex;align-items:center;gap:var(--s-m);height:var(--h-field);padding:0 var(--s-l);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.searchf.sm{height:var(--h-button);width:240px}
.searchf svg{color:var(--faint);flex:none}
.searchf input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font-size:14.5px}
.searchf input::placeholder{color:var(--faint)}
.searchf:focus-within{border-color:var(--focus)}
.stepper{display:inline-flex;align-items:center;gap:var(--s-s)}
.stepper button{width:var(--h-chip);height:var(--h-chip);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--text);cursor:pointer;font-size:14.5px;line-height:1;padding:0}
.stepper button:hover:not(:disabled){background:var(--card2)}
.stepper button:disabled{opacity:.38;cursor:default}
.stepper .n{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;min-width:2ch;text-align:center}
#head-tools input[type=search],#head-tools input[type=text],#head-tools .f{flex:0 1 auto;min-width:104px}

/* ================================================== 1.4 segmented control */
.seg{display:inline-flex;gap:var(--s-xxs);padding:var(--s-xxs);background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);flex:none}
.seg button{height:26px;padding:0 var(--s-l);border:0;border-radius:var(--r-sm);background:none;color:var(--muted);font-size:12.5px;cursor:pointer;white-space:nowrap;flex:none}
.seg button:hover:not([aria-pressed="true"]){color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--card2);color:var(--text);font-weight:500}

/* ================================================== 1.4 chips and source chips (Components.swift:197)
   A chip's text is never tinted; the 6×6 square is the only coloured pixel. */
.chip,.classchip,.linkchip,.tagchip,.role{display:inline-flex;align-items:center;gap:var(--s-s);height:var(--h-chip);padding:0 var(--s-m);border-radius:var(--r-sm);
  background:var(--card2);border:1px solid var(--line);color:var(--muted);font-size:12.5px;white-space:nowrap}
.chip .sq,.classchip .sq{width:6px;height:6px;border-radius:1.5px;flex:none;display:inline-block}
.chip.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.chips{display:flex;gap:var(--s-s);flex-wrap:wrap}
.classchip{background:none;cursor:pointer;font-family:inherit}
.classchip[aria-pressed="true"]{background:var(--card2);border-color:var(--line2);color:var(--text);font-weight:500}
.linkchip{cursor:pointer}
.linkchip:hover{border-color:var(--line2);color:var(--text)}
.linkrow{display:flex;gap:var(--s-s);flex-wrap:wrap}
.linklabel{font-size:11px;color:var(--faint);margin-bottom:var(--s-s)}
.srcchip{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:999px;background:var(--card);
  border:1px solid var(--line);color:var(--faint);font-size:11px;line-height:1;cursor:pointer;white-space:nowrap;max-width:240px;font-family:inherit}
.srcchip span{overflow:hidden;text-overflow:ellipsis;line-height:1.4}   /* the chip's line-height:1 let overflow:hidden cut descenders ("Optics", "Aug", DEFECTS 1) */
.srcchip:hover{border-color:var(--line2);color:var(--text);background:var(--card2)}
a.srcchip{text-decoration:none}
.srcchip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
span.srcchip{cursor:default}
span.srcchip:hover{border-color:var(--line);color:var(--faint);background:var(--card)}
.srcchip b{font-weight:600;color:var(--muted)}
.srcs{display:flex;gap:var(--s-s);flex-wrap:wrap;margin-top:var(--s-m)}
.btn.quiet.srcmore{height:20px;padding:0 8px;border-radius:999px;font-size:11px;color:var(--faint)}   /* chip geometry, no border: a control, not a source */
.btn.quiet.srcmore:hover:not(:disabled){color:var(--text)}

/* ================================================== 1.4 state (Components.swift:442)
   .state is the one carrier of state colour on the whole site. */
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--line2);display:inline-block}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)}
.dot.busy{background:var(--accent)} .dot.off{background:var(--line2)}
.state{display:inline-flex;align-items:center;gap:var(--s-s);font-size:12.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.state .dot{background:var(--line2)}
.state[data-kind="busy"]{color:var(--accent)}
.state[data-kind="busy"] .dot{background:var(--accent)}
.state[data-kind="warn"]{color:var(--warn)}   .state[data-kind="warn"] .dot{background:var(--warn)}
.state[data-kind="ok"]{color:var(--ok)}       .state[data-kind="ok"] .dot{background:var(--ok)}
.state[data-kind="bad"]{color:var(--bad)}     .state[data-kind="bad"] .dot{background:var(--bad)}
.state[data-kind="off"]{color:var(--faint)}

/* ================================================== 1.4 rows and tables (SidebarRow, TableRow) */
.rowbtn{display:flex;align-items:center;gap:10px;width:100%;height:var(--h-row);padding:0 var(--s-l);border:0;
  border-radius:var(--r-row);background:none;color:var(--muted);cursor:pointer;font-size:14.5px;text-align:left;
  margin-bottom:var(--s-xxs);position:relative;font-family:inherit}
.rowbtn:hover{background:var(--card)}
.rowbtn[aria-current]{background:var(--card2);color:var(--text);font-weight:500}
/* SidebarRow draws a 15 pt SF Symbol, which renders 16-26 pt wide and 17-22 pt tall; an 18 px icon in a 24 px column matches it */
.rowbtn .ico{width:26px;flex:none;display:grid;place-items:center;position:relative;z-index:1}
.rowbtn .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.tag{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--text);background:var(--card2);border-radius:999px;padding:3px var(--s-m);line-height:1;position:relative;z-index:1}
.rowbtn[aria-current] .tag{background:var(--line2)}
.rowbtn .cnt{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;position:relative;z-index:1}
.rowbtn .dot{position:relative;z-index:1}
.rowbtn.shimmer,.rowbtn.shimmer .lbl{color:var(--text);font-weight:500}
.rowbtn.shimmer canvas{position:absolute;inset:0;border-radius:var(--r-row);pointer-events:none;z-index:0}
/* ================================================== 1.4 a place's own colour
   Every place in the sidebar carries its own colour, on the GLYPH itself — no tile behind it.
   The glyphs are filled and shaded from one colour (APPICON in app.js), so this single
   `color` paints the whole thing. The colour says WHAT a place is; the row's fill says where
   you are, so the hue stays when the row is current. The command palette repeats it, so the
   two ways in agree. Settings and the plain utilities stay grey: they are not places.
   A new surface picks a hue not already in this list. */
#rail-nav .rowbtn .ico{color:var(--muted)}
#rail-nav .rowbtn[data-surface="port"] .ico,.pitem[data-surface="port"]>svg{color:#4FB3A3}
#rail-nav .rowbtn[data-surface="classify"] .ico,.pitem[data-surface="classify"]>svg{color:#D9A85C}
#rail-nav .rowbtn[data-surface="overview"] .ico,.pitem[data-surface="overview"]>svg{color:#6CA8E0}
#rail-nav .rowbtn[data-surface="onto"] .ico,.pitem[data-surface="onto"]>svg{color:#5E8EE6}
#rail-nav .rowbtn[data-surface="ai"] .ico,.pitem[data-surface="ai"]>svg{color:#8C8AE0}
#rail-nav .rowbtn[data-surface="train"] .ico,.pitem[data-surface="train"]>svg{color:#C98BC4}
#rail-nav .rowbtn[data-surface="audit"] .ico,.pitem[data-surface="audit"]>svg{color:#9AA6B8}
#rail-nav .rowbtn[data-surface="employee"] .ico,.pitem[data-surface="employee"]>svg{color:#6FB28C}
#rail-nav .rowbtn[data-surface="screens"] .ico,.pitem[data-surface="screens"]>svg{color:#6FB28C}
#rail-nav .rowbtn[data-surface="workflow"] .ico,.pitem[data-surface="workflow"]>svg{color:#E09A5F}
#rail-nav .rowbtn[data-surface="auto"] .ico,.pitem[data-surface="auto"]>svg{color:#E3B341}
#rail-nav .rowbtn[data-surface="knowledge"] .ico,.pitem[data-surface="knowledge"]>svg{color:#5FBFC4}
#rail-nav .rowbtn[data-surface="org"] .ico,.pitem[data-surface="org"]>svg{color:#8FA3C4}
#rail-nav .rowbtn[data-surface="reports"] .ico,.pitem[data-surface="reports"]>svg{color:#E0777C}
#rail-nav .rowbtn[data-surface="releases"] .ico,.pitem[data-surface="releases"]>svg{color:#A98BD8}

.sec-label{font-size:12.5px;font-weight:600;color:var(--faint);padding:var(--s-l) var(--s-l) var(--s-xs)}
.noterow,.statusrow{display:flex;align-items:center;gap:var(--s-l);min-height:48px;padding:var(--s-m) 0;border-bottom:1px solid var(--line)}
.noterow:last-child,.statusrow:last-child{border-bottom:0}
.statusrow{min-height:56px}
.statusrow .k{font-size:12.5px;color:var(--faint);width:150px;flex:none}
.statusrow .v{font-size:14.5px;flex:1;min-width:0}
.nr-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nr-name{font-size:14.5px;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.nr-sub{font-size:12.5px;line-height:1.2;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nr-date{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;flex:none}
.nr-thumb{width:32px;height:32px;border-radius:var(--r-sm);background:var(--card2);display:grid;place-items:center;color:var(--muted);flex:none;overflow:hidden}
.trow{display:flex;align-items:center;gap:var(--s-l);min-height:44px;padding:var(--s-m) var(--s-xxl);border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trow>.lead{flex:1;min-width:0}
.trow>.trail{color:var(--faint);font-size:12.5px;font-variant-numeric:tabular-nums}
table.people{width:100%;border-collapse:collapse;font-size:14.5px}
.people th{text-align:left;font-size:12.5px;font-weight:600;color:var(--muted);padding:0 var(--s-l) var(--s-m) 0;border-bottom:1px solid var(--line)}
.people td{padding:var(--s-m) var(--s-l) var(--s-m) 0;border-bottom:1px solid var(--line)}
.people td.num{text-align:right;font-variant-numeric:tabular-nums}
.count{color:var(--faint);font-size:12.5px;margin-bottom:var(--s-l)}
.folder{font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:var(--s-xs)}

/* ================================================== 1.4 the number on a step
   Workflows and Automations both draw a numbered step, so the number is ONE object defined
   here, not two slightly different circles in two surface files. A surface may position it;
   it may not redraw it. */
.stepnum{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;
  background:var(--card2);color:var(--muted);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}

/* ================================================== 1.4 cards, groups, hints (Training.swift:125) */
.block{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-xl) 20px;min-width:0}
.block>h4{margin:0 0 var(--s-m);font-size:16px;font-weight:600}
.blockhead{display:flex;align-items:baseline;gap:10px;margin-bottom:var(--s-l)}
.blockhead .eyebrow{margin:0}
.blockhead h4{margin:0;font-size:16px;font-weight:600}
.blockhead .sq{width:6px;height:6px;border-radius:1.5px;flex:none;align-self:center;display:inline-block}
.blockmeta{font-size:12.5px;color:var(--muted);margin-left:auto}
.more{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-m)}
.eyebrow{font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 var(--s-m);letter-spacing:0;text-transform:none}
.hint{font-size:12.5px;color:var(--muted);margin:var(--s-m) 0;line-height:1.5;max-width:70ch}
.hint.fine{color:var(--faint)}
.hint.body{font-size:14.5px}
.rule{height:1px;background:var(--line);margin:18px 0}
.group>.eyebrow{padding:0 var(--s-xs)}
.group>.block{padding:0}
.tpage{flex:1;min-width:0;overflow-y:auto;min-height:0}
.tbody{padding:var(--s-xxl);max-width:900px;display:flex;flex-direction:column;gap:var(--s-xl)}

/* ================================================== 1.4 empty state (Components.swift:460) */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-l);text-align:center;
  color:var(--muted);font-size:14.5px;line-height:1.5;max-width:420px;padding:var(--s-xxl);margin:auto}
.empty b{font-size:16px;font-weight:600;color:var(--text);line-height:1.3}
.empty.wide{max-width:520px}
.empty .btn{margin-top:0}

/* ================================================== 1.4 banners and messages (Components.swift:480)
   A strip: dot · body text · the action on the right. Under a header it is a
   band across the pane (.banner.bar); #banner is the shell's one strip slot. */
.msg,.banner{display:flex;align-items:center;gap:var(--s-l);min-height:36px;padding:var(--s-m) var(--s-xxl);background:var(--card);
  color:var(--text);border:0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.4;border-radius:0;flex:none;margin:0}
.msg::before,.banner::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--line2)}
.msg.err,.msg.bad,.banner.err,.banner.bad{color:var(--bad)}
.msg.err::before,.msg.bad::before,.banner.err::before,.banner.bad::before{background:var(--bad)}
.msg.warn::before,.banner.warn::before{background:var(--warn)}
.msg.ok::before,.banner.ok::before{background:var(--ok)}
.msg.info{color:var(--muted)}
.banner>span:nth-child(2){min-width:0;flex:1}
.msg .btn,.banner .btn{margin-left:auto}
#banner{flex:none}
#banner:empty{display:none}

/* ================================================== 1.4 toast */
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:var(--s-l);
  padding:var(--s-m) var(--s-xl);border-radius:var(--r-md);background:var(--card2);border:1px solid var(--line2);color:var(--text);
  font-size:14.5px;box-shadow:0 8px 30px rgba(0,0,0,.4);width:max-content;max-width:min(560px,90vw)}
#toast:empty{display:none}

/* ================================================== 1.4 scrim, sheets, the one confirm
   Every modal is a .scrim (classify's key guard reads .scrim:not([hidden])).
   A sheet's scrim also carries .sheet-scrim and is centred. */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:flex;justify-content:center;align-items:flex-start;padding:88px 24px 24px}
.sheet-scrim,.scrim:has(>.sheet){background:rgba(0,0,0,.5);z-index:55;align-items:center;padding:24px}
.sheet{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-lg);width:var(--sheet);max-width:100%;
  max-height:min(560px,92vh);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.sheet.narrow{width:var(--sheet-narrow)}
.sheet[aria-label="Settings"]{height:min(560px,92vh)}
.sheet-head{height:auto;min-height:52px;flex:none;display:flex;align-items:center;gap:var(--s-l);padding:0 var(--s-xxl);border-bottom:1px solid var(--line)}
.sheet-head h3,.sheet h3{margin:0;font-size:20px;font-weight:600;flex:1}
.sheet-head h3{line-height:1.25;padding:12px 0;overflow-wrap:anywhere}
.sheet-body{flex:1;min-height:0;display:flex;overflow:hidden}
.sheet-nav{width:180px;flex:none;padding:var(--s-m);border-right:1px solid var(--line);overflow-y:auto}
.sheet-nav .rowbtn{font-size:14.5px}
.sheet-pane{flex:1;min-width:0;overflow-y:auto;padding:var(--s-xxl)}
.sheet-body .sheet-pane{flex:1;min-height:0;overflow-y:auto}
.sheet-pane>.eyebrow{margin-top:var(--s-xl)}
.sheet-pane>.eyebrow:first-child,.sheet-pane>.hint:first-child+.eyebrow{margin-top:0}
.sheet-pane>.swrow{margin-top:var(--s-l)}
.sheet-pane>.swhelp{margin-top:var(--s-s)}
.sheet-pane>.block{margin-bottom:var(--s-l)}
.sheet-pane>.btnrow{margin-top:var(--s-xl)}
.sheet-foot{flex:none;display:flex;gap:var(--s-m);align-items:center;padding:var(--s-l) var(--s-xxl);border-top:1px solid var(--line)}
.sheet-foot .btn:last-child{margin-left:auto}
.sheet .btnrow .btn{width:auto}
.krow{display:flex;align-items:center;gap:var(--s-l);padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.krow:last-child{border-bottom:0}
.krow kbd{width:84px;flex:none;color:var(--muted);background:var(--card2);border-radius:3px;padding:2px 6px;text-align:center}
.check{display:flex;gap:var(--s-m);align-items:flex-start;font-size:14.5px;color:var(--text);font-weight:400;cursor:pointer}

/* ================================================== 2.4 palette (Palette.swift:160) */
#palette{z-index:58;align-items:flex-start;padding:88px 24px 24px}
.palette-panel{width:560px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--line2);border-radius:var(--r-sm);overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.5)}
.palette-head{display:flex;align-items:center;gap:10px;padding:0 14px;height:48px;border-bottom:1px solid var(--line)}
.palette-head svg{color:var(--faint);flex:none}
.palette-head input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font-size:14.5px}
.palette-head input::placeholder{color:var(--faint)}
.palette-head kbd{border:1px solid var(--line2);border-radius:3px;padding:1px 5px;font-size:11px;color:var(--faint)}
.palette-list{max-height:380px;overflow-y:auto;padding:var(--s-xs)}
.pitem{display:flex;align-items:center;gap:10px;width:100%;padding:7px 14px;border:0;border-radius:var(--r-row);
  background:none;color:var(--text);cursor:pointer;text-align:left;font-size:14.5px;font-family:inherit}
.pitem svg{color:var(--faint);flex:none}
.pitem[aria-selected="true"]{background:var(--card2)}
.pitem .ttl{flex:none;max-width:60%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pitem .det{flex:1 1 0;min-width:0;font-size:12.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pitem .kind{font-size:11px;color:var(--faint);margin-left:auto;flex:none;padding-left:8px}
.pempty{padding:14px;font-size:12.5px;color:var(--faint)}

/* ================================================== 1.4 switch (controlSize .mini: a 26×15 track) */
.swrow{display:flex;flex-direction:column;gap:var(--s-xs);margin-bottom:var(--s-l)}
.swlab,.switch{display:flex;align-items:center;gap:var(--s-m);margin:0;cursor:pointer;font-size:14.5px;font-weight:400;color:var(--text);position:relative;white-space:nowrap}
.swlab input,.switch:has(.sw) input{position:absolute;opacity:0;width:0;height:0}
.sw{width:26px;height:15px;border-radius:999px;background:var(--line2);flex:none;position:relative;transition:background .15s ease}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:transform .15s ease}
input:checked+.sw{background:var(--ok)}
input:checked+.sw::after{transform:translateX(11px)}
input:focus-visible+.sw{outline:2px solid var(--line2);outline-offset:2px}
.swtitle{font-size:14.5px}
.swhelp{font-size:12.5px;color:var(--faint);line-height:1.45;max-width:64ch}

/* ================================================== 1.4 drop zone, progress bar, drop veil (Views.swift:1090) */
.dropzone{min-height:150px;border:1.5px dashed var(--line2);border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s-l);text-align:center;color:var(--muted);font-size:14.5px;padding:var(--s-xl)}
.dropzone>*{max-width:100%}
.dropzone>b,.dropzone>strong{font-size:16px;font-weight:600;color:var(--text)}
.dropzone.over{background:var(--card);border-color:color-mix(in srgb,var(--text) 50%,transparent)}
.dropzone.compact{min-height:72px;flex-direction:row;align-items:center;padding:var(--s-l) var(--s-xl);text-align:left}
.dropzone.short{min-height:120px;gap:var(--s-m);border-width:1px}
.bar4{height:4px;border-radius:999px;background:var(--line2);overflow:hidden}
.bar4>i{display:block;height:100%;min-width:6px;background:var(--text);border-radius:999px;transition:width .4s ease}
#drop-veil{position:fixed;inset:0;z-index:70;display:none;place-items:center;background:color-mix(in srgb,var(--bg) 86%,transparent);
  font-size:16px;font-weight:600;color:var(--text);pointer-events:none}
#drop-veil.on{display:grid}
#drop-veil::before{content:"";position:absolute;inset:16px;border:1.5px dashed var(--line2);border-radius:var(--r-lg)}
#drop-veil span{position:relative}

/* ================================================== 1.4 marks */
.mark{display:block;flex:none;border-radius:6px;background:none;-webkit-user-drag:none;user-select:none}
.mark.sm{border-radius:5px}
/* the logo placeholder: a plain tile until there is a logo */
/* the logo (assets/brand/logo-256.png, rendered by docs/brand/render_logo.py): a white sphere with
   Catalyst's face rising from the corner, looking up-left; each place rounds it */
.mark.ph,.brand .mark.ph{background:#161616 url("../assets/brand/logo-256.png?v=l6") center/cover no-repeat}   /* .brand .mark clears the background; this wins */
.mgr-mark{display:inline-grid;place-items:center;border-radius:50%;background:var(--card2);color:var(--text);flex:none}

/* ================================================== 1.4 the composer island (Chat and Employees) */
.island{position:relative;width:100%;max-width:780px;margin:0 auto;border-radius:var(--r-island);background:var(--card);
  border:1px solid var(--line2);display:flex;flex-direction:column;overflow:hidden}
.island:focus-within{border-color:var(--focus)}
.island.over{border-color:var(--text)}
.island.chat{max-width:860px}
.island-ask{padding:12px 12px 4px;border-bottom:1px solid var(--line);margin-bottom:6px;background:color-mix(in srgb,var(--warn) 10%,transparent)}
.island-ask .who{font-size:12.5px;font-weight:500;color:var(--warn);display:flex;align-items:center;gap:6px}
.island-ask[data-kind="question"] .who{color:var(--muted)}
.island-ask .q{font-size:14.5px;color:var(--text);margin:6px 0 10px;line-height:1.45}
.island-ask .chips{margin:0 0 6px}
.island-note{display:flex;align-items:center;gap:var(--s-m);padding:10px var(--s-l) 0;font-size:12.5px;color:var(--muted)}
.island-note.err{color:var(--bad)}
.island-files,.island-to{display:flex;gap:var(--s-s);flex-wrap:wrap;align-items:center;padding:10px var(--s-l) 0}
.island-row{display:flex;align-items:flex-end;gap:var(--s-m);padding:var(--s-m) var(--s-l)}
.island-row textarea{flex:1;min-width:0;min-height:40px;max-height:132px;padding:10px 4px;border:0;background:none;outline:none;
  color:var(--text);font-size:14.5px;line-height:1.45;resize:none;font-family:inherit}
.island.chat .island-row textarea{min-height:38px}
.island-row textarea::placeholder{color:var(--faint)}
.island-clip{width:40px;height:40px;border:0;border-radius:var(--r-md);background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none}
.island-clip:hover{background:var(--card2);color:var(--text)}
.island-send{width:30px;height:30px;border-radius:50%;border:0;background:var(--text);color:var(--bg);display:grid;place-items:center;cursor:pointer;flex:none;margin-bottom:5px}
.island.chat .island-send{width:32px;height:32px;margin-bottom:4px}
.island-send:disabled{background:var(--faint);opacity:1;cursor:default}
.island-send.stop{background:var(--text)}

/* ================================================== 1.4 markdown reader (MarkdownBody, Graph.swift:945) */
.md{font-size:14.5px;line-height:1.5;color:var(--text);max-width:68ch;display:flex;flex-direction:column;gap:var(--s-m)}
.md-p{line-height:1.5;margin:0}
.md-h1{font-size:16px;font-weight:600;line-height:1.3;padding-top:var(--s-xs);margin:0}
.md-h2{font-size:14.5px;font-weight:600;line-height:1.3;padding-top:var(--s-xs);margin:0}
.md-h3{font-size:12.5px;font-weight:600;line-height:1.3;color:var(--muted);padding-top:var(--s-xs);margin:0}
.md-li{display:flex;align-items:flex-start;gap:7px}
.md-mark{color:var(--muted);line-height:1.5;flex:none}
.md-quote{border-left:2px solid var(--line2);padding-left:10px;color:var(--muted)}
.md-tablewrap{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:10px}
.md-table{border-collapse:collapse;font-size:13px;line-height:1.4;width:100%;font-variant-numeric:tabular-nums}
.md-table th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.md-table td{padding:7px 10px;border-top:1px solid var(--line);vertical-align:top;white-space:nowrap}
.md-table td:last-child{white-space:normal;overflow-wrap:anywhere;min-width:12ch}
.md-table tr:first-child td{border-top:0}
.md-b{font-weight:600}
.md-tick{font-size:12.5px}
.md-code{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;display:flex;flex-direction:column;gap:var(--s-s);align-items:flex-start}
.md-pre{font-size:11px;color:var(--muted);white-space:pre-wrap;word-break:break-word;width:100%;line-height:1.45;margin:0}
.md a{color:var(--text);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
a.md-link{color:var(--link);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.md-dead{text-decoration:underline dotted;text-underline-offset:2px;color:var(--muted)}
.md mark.note-hit,.note-hit{background:var(--card2);color:inherit;border-radius:4px;box-shadow:0 0 0 3px var(--card2);padding:0 .12em;font:inherit}
.meta{display:flex;align-items:center;gap:var(--s-s);flex-wrap:wrap;font-size:11px;color:var(--faint);margin-bottom:var(--s-l)}

/* ================================================== 2.1 the grid (Views.swift:263)
   Rail 240 on Ink.side, one hairline, then the page. The body never scrolls. */
.app{display:grid;grid-template-columns:var(--rail) 1fr;height:100dvh;background:var(--bg)}
aside#rail{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
main{display:flex;position:relative;overflow:hidden;min-width:0;background:var(--bg)}
#subrail{display:none}
#subrail[data-on]{display:flex;flex-direction:column;flex:none;width:var(--subrail);min-height:0;padding:0 var(--s-m);border-right:1px solid var(--line);background:var(--bg);overflow-y:auto}
#subrail[data-on="ai"]{width:var(--rail);background:var(--side)}
#subrail>.eyebrow{padding:26px 12px 8px;margin:0}
#subrail .rowbtn{height:40px}
.main-col{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
#view{flex:1;min-height:0;display:flex;overflow:hidden}
.surf-pane{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;overflow:hidden}
.surf-pane[hidden]{display:none!important}
#graph-host{position:absolute;inset:auto;z-index:1;background:var(--side);overflow:hidden}
#graph-host iframe{width:100%;height:100%;border:0;display:block}

/* ================================================== 2.2 the rail (Views.swift:263-513) */
.rail-top{padding:20px 0 0;flex:none}
.wordmark{display:flex;align-items:center;gap:10px;padding:0 var(--s-xl);font-size:16px;font-weight:600;letter-spacing:-.2px;margin-bottom:var(--s-xl);color:var(--text)}
.wordmark .mark{width:28px;height:28px;border-radius:6px;flex:none;display:block}
.wordmark .mark img,.brand .mark img{display:block;width:100%;height:100%;background:none;-webkit-user-drag:none;user-select:none}
.rail-search{display:flex;align-items:center;gap:var(--s-m);width:calc(100% - 16px);height:var(--h-field);margin:0 var(--s-m) var(--s-l);
  padding:0 var(--s-l);border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);color:var(--muted);
  cursor:pointer;font-size:14.5px;flex:none;font-family:inherit}
.rail-search:hover{background:var(--card2)}
.rail-search svg{color:var(--faint);flex:none}
.rail-search span{flex:1;text-align:left}
.rail-search kbd{font-size:11px;color:var(--faint)}
nav#rail-nav{flex:1;min-height:0;overflow-y:auto;padding:0 var(--s-m) var(--s-m)}
/* The rows give way before one falls under the fold (2026-09-19): the nav is a column whose rows shrink
   evenly from their height (38, or a band's) down to 30 when the window is short, a role has more rows or
   the reading block shows; the section labels keep their size. Past that the nav scrolls, and its last
   row fades while more is below (app.js ui_railClip). */
nav#rail-nav{display:flex;flex-direction:column}
nav#rail-nav>*{flex:none}
nav#rail-nav>.rowbtn{flex:0 1 auto;min-height:30px}
nav#rail-nav.is-clipped{-webkit-mask-image:linear-gradient(to bottom,var(--text) calc(100% - 28px),transparent);
  mask-image:linear-gradient(to bottom,var(--text) calc(100% - 28px),transparent)}
.rail-bottom{flex:none;padding:0 0 var(--s-l)}
.activity{padding:0 var(--s-xl) var(--s-m);display:flex;flex-direction:column;gap:var(--s-s)}
.arow{display:flex;align-items:center;gap:6px;height:22px;font-size:11px;color:var(--muted);min-width:0}
.arow svg{color:var(--faint);flex:none}
.arow .name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow .pct{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;flex:none}
a.arow{text-decoration:none;cursor:pointer}   /* a row with a page behind it: the Ontology's reading (app.js ui_railReading) */
a.arow:hover{color:var(--text)}
.abar{height:2px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:-2px}
.abar>i{display:block;height:100%;background:color-mix(in srgb,var(--text) 60%,transparent);border-radius:999px;transition:width .4s ease}
.status{padding:0 var(--s-xl) var(--s-l);display:flex;flex-direction:column;gap:var(--s-s);font-size:12.5px;color:var(--faint)}
.status .line,.line{display:flex;align-items:center;gap:var(--s-m);width:100%;min-height:20px;margin:0;padding:0;border:0;background:none;
  text-align:left;font:inherit;font-size:12.5px;color:var(--faint);-webkit-appearance:none;appearance:none;min-width:0}
.status .line>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.status button.line{cursor:pointer}
.status button.line:hover{color:var(--muted)}
.reportbtn{display:flex;align-items:center;gap:6px;width:100%;height:30px;padding:0 var(--s-m);margin:0 0 var(--s-xxs);
  border:1px solid transparent;border-radius:var(--r-sm);background:none;color:var(--muted);
  font-size:12.5px;font-weight:500;cursor:pointer;text-align:left;font-family:inherit;white-space:nowrap}
.reportbtn svg{flex:none}
.reportbtn.problem{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.reportbtn.problem:hover{background:color-mix(in srgb,var(--bad) 16%,transparent)}
.reportbtn.idea{color:var(--muted)}
.reportbtn.idea:hover{background:var(--card);color:var(--text)}
.rail-bottom .rowbtn,#settings-row{width:calc(100% - 16px);margin:0 var(--s-m)}

/* ================================================== 2.3 the page header (Components.swift:396-428)
   64 high, padding 0 24, title 20 semibold with the caption BESIDE it in muted. */
.page-head{height:var(--h-head);flex:none;display:flex;align-items:center;gap:var(--s-l);padding:0 var(--s-xxl);
  border-bottom:1px solid var(--line);min-width:0;justify-content:space-between}
.page-title-row{display:flex;align-items:baseline;gap:var(--s-l);min-width:0;flex:1 1 auto}
#emp-head-lead{display:flex;align-items:center;gap:10px;flex:none;align-self:center;min-width:0}
#emp-head-lead:empty{display:none}
#view-title,.page-head h2{margin:0;font-size:20px;font-weight:600;line-height:1.2;white-space:nowrap;flex:none}
.caption,.page-head .caption{margin:0;font-size:14.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#view-caption:empty{display:none}
#head-tools,.head-tools{display:flex;align-items:center;gap:var(--s-m);margin-left:auto;flex:0 1 auto;min-width:min-content}
#head-tools>*{flex:none}
#head-tools .btn{width:auto}
#head-tools .swlab,#head-tools .switch{height:var(--h-button);font-size:12.5px}
.page-head.emp-mac .page-title-row{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;align-self:stretch}
.page-head.emp-mac .caption{line-height:1.3;max-width:100%}
.page-head.emp-desk .page-title-row{flex-direction:row;align-items:center;gap:var(--s-l)}
.page-head.emp-wall .page-title-row{align-items:center}
.page-head.emp-desk #view-title,.page-head.emp-desk #view-caption{display:none}
#vanish-bar{flex:none}

/* ================================================== Browse: the notes lane (Surfaces.swift) */
.two{display:grid;grid-template-columns:320px 1fr;width:100%;flex:1;min-height:0}
.list-col{border-right:1px solid var(--line);overflow-y:auto;overflow-x:hidden;min-height:0}
.reader{overflow-y:auto;min-height:0;padding:22px;display:flex;flex-direction:column}
.reader-inner{max-width:640px;flex:none}
.nrow{display:flex;gap:9px;width:100%;text-align:left;border:0;background:none;color:inherit;cursor:pointer;padding:8px 12px;min-height:48px;border-bottom:1px solid var(--line);font-family:inherit}
.nrow:hover{background:var(--card)}
.nrow[aria-current]{background:var(--card2)}
.nrow .bullet{width:6px;height:6px;border-radius:50%;margin-top:5px;flex:none;background:var(--faint)}
.nrow .nr-body{min-width:0;flex:1}
.reader-top{display:flex;align-items:flex-start;gap:10px}
.reader-top h1{flex:1;min-width:0}
.nrow .t{font-size:14.5px;font-weight:500;color:var(--text);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nrow .s{display:block;font-size:12.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.reader h1,.mapreader h1{font-size:20px;font-weight:600;margin:0 0 var(--s-l);line-height:1.2}

/* ================================================== Browse: the map (Graph.swift:466) */
.maplane{display:flex;flex-direction:column;width:100%;flex:1;min-height:0}
.bar2{height:48px;flex:none;background:var(--bg);border-bottom:1px solid var(--line);padding:0 var(--s-xxl);display:flex;align-items:center;gap:var(--s-m)}
.bar2 .chips{flex:1;min-width:0;flex-wrap:nowrap;overflow:hidden}
.maprow{display:flex;flex:1;min-height:0}
.explorer{flex:none;overflow-y:auto;min-height:0;background:var(--bg);padding-bottom:10px}
.xhead{display:flex;align-items:center;justify-content:space-between;padding:10px 13px 4px}
.xhead .eyebrow{margin:0}
.xhead-end{display:flex;align-items:center;gap:var(--s-xs)}
.xtools{display:flex;gap:var(--s-s);padding:0 13px 6px}
.xrow{position:relative;display:flex;align-items:center;gap:var(--s-s);height:30px;padding:0 10px 0 13px;cursor:pointer;font-size:12.5px;color:var(--muted);border-radius:0}
.xrow:hover{background:var(--card)}
.xrow .guide{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.xrow .chev{width:10px;flex:none;color:var(--faint);display:inline-grid;place-items:center}
.xrow .sq{width:9px;height:9px;border-radius:2.5px;flex:none}
.xrow .xname{flex:1;font-weight:500;color:var(--text);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xrow .xname.is-hidden{text-decoration:line-through}
.xrow.note .xname{font-weight:400;opacity:1;color:var(--muted)}
.xrow.note .xname.is-sel{color:var(--text)}
.xrow .eye{flex:none}
.xrow .xcnt{font-size:11px;color:var(--faint);opacity:.65;min-width:14px;text-align:right;font-variant-numeric:tabular-nums}
.vdiv{width:9px;margin:0 -4px;cursor:col-resize;flex:none;position:relative;z-index:2}
.vdiv::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:var(--line)}
.mapreader{width:316px;flex:none;border-left:1px solid var(--line);border-right:0;overflow-y:auto;min-height:0;padding:var(--s-xl) var(--s-xl) 20px;background:var(--side)}
#graph-slot{flex:1;min-width:0;background:var(--side)}

/* ================================================== redaction (redact.js) */
.redact-bar{display:inline-block;height:.82em;min-width:4em;border-radius:2px;background:#000;vertical-align:-.12em;margin:0 .12em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.board-clip{overflow:hidden;line-height:1.35;max-height:calc(1.35em * var(--lines, 3));min-height:0;height:auto;word-wrap:break-word;overflow-wrap:anywhere}
.disappear-chip{font-size:11px;padding:2px 9px;border-radius:999px;background:var(--card2);color:var(--muted);white-space:nowrap;flex:none}
.disappear-chip.is-warn{color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
.disappear-row{display:flex;align-items:center;gap:var(--s-m);flex-wrap:wrap;margin:var(--s-m) 0}
.disappear-sel{height:30px;max-width:220px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:12.5px;padding:0 6px}
#vanish-bar{border-bottom:1px solid var(--line);background:var(--card);padding:var(--s-m) var(--s-xxl);min-height:36px}
#vanish-bar .vanish-line{display:flex;align-items:center;gap:var(--s-l)}
#vanish-bar .vanish-mark{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none}
#vanish-bar .vanish-copy{flex:1;min-width:0;font-size:14.5px;color:var(--text);line-height:1.4}
#vanish-bar .btn{height:var(--h-button);padding:0 14px;font-size:12.5px}

/* ================================================== the gate (Login.swift, its own screen) */
.gate{min-height:100dvh;display:grid;grid-template-columns:minmax(0,392px);place-content:center;place-items:center;padding:var(--s-xxl);background:var(--bg);overflow-y:auto}
/* the column, not the card, caps the width: a grid track sized to its content let a 392px card overflow a 390px phone */
.gate-card{width:100%;background:var(--side);border:1px solid var(--line);border-radius:20px;padding:34px 34px 30px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.brand{display:flex;flex-direction:column;align-items:center;gap:0}
.brand .mark{width:64px;height:64px;border-radius:14px;display:block;margin-bottom:var(--s-xl);background:none}
.brand b{font-size:26px;font-weight:600;letter-spacing:-.6px;line-height:1.15}
.gate h1{display:none}
.gate .sub{color:var(--faint);margin:var(--s-m) auto 22px;font-size:12.5px;line-height:1.45;max-width:268px}
.gate label{display:none}
.gate .f{max-width:290px;margin:0 auto;height:43px;border-radius:13px;background:var(--card);border:1px solid var(--line);text-align:center;font-size:14.5px}
.gate .f:focus{border-color:var(--line2)}
.gate .field{margin-bottom:10px}
.gate .btn{width:100%;max-width:290px;margin:0 auto;height:38px;border-radius:5px;background:var(--card2);color:var(--text);border:1px solid var(--line2);font-weight:500;font-size:12.5px}
.gate .btn:hover:not(:disabled){background:var(--line2);border-color:var(--line2)}
.swap{margin:14px auto 0;font-size:11px;color:var(--faint);line-height:1.5;max-width:290px}
.gate .swap .link{font-size:12.5px;font-weight:400;color:var(--faint)}
.gate .swap .link:hover{color:var(--text)}
.gate .msg{display:block;background:none;border:0;padding:0;min-height:0;font-size:11px;max-width:290px;margin:0 auto 14px;line-height:1.5;color:var(--faint);text-align:center}
.gate .msg::before{display:none}
.gate .msg.err{color:var(--bad)} .gate .msg.ok{color:var(--ok)}
.code-in{letter-spacing:.4em;text-align:center;font-size:20px;font-weight:500;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
#qr-box{background:#fff;padding:14px;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:14px}
#qr-box img{width:180px;height:180px;display:block}
.gate #step-wait{margin:var(--s-xl) auto 0}
.gate .keyhint{font-size:12.5px;color:var(--muted);margin:0 0 var(--s-s)}
#enrol-secret{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;word-break:break-all;background:var(--card);
  padding:10px 12px;border-radius:var(--r-sm);margin-bottom:18px;color:var(--text)}

/* ================================================== the two breakpoints (the Mac window floor is 940) */
@media (max-width:1180px){
  .page-head:not(.emp-mac):not(.emp-wall) .caption{display:none}
}
@media (max-width:939px){
  .page-head{height:auto;min-height:var(--h-head);flex-wrap:wrap;padding:12px 24px}
  .page-head .page-title-row{flex:1 0 100%;align-items:center;min-height:26px}
  #head-tools,.head-tools{width:100%;flex:1 1 100%;margin-left:0;min-width:0;overflow-x:auto}
  #head-tools::-webkit-scrollbar{height:0}
}
/* The rail's top and bottom tighten from 860 down (they gave 42 px back only from 800 before, so between
   801 and 860 the rows fell under the fold with the Ontology row and the reading block); rows and labels
   tighten from 800. Measured, 12 rows (platform admin) + the reading block: every row shows at 1440 × 941,
   900, 861, 860, 844, 810, 801, 800 and down to 767; below that the nav scrolls under its fade. */
@media (max-height:860px){
  .rail-top{padding-top:12px}
  .wordmark{margin-bottom:10px}
  .rail-search{margin-bottom:var(--s-s)}
  .reportbtn{margin-bottom:0}
  .status{gap:var(--s-xs);padding-bottom:var(--s-s)}
  .rail-bottom{padding-bottom:var(--s-s)}
  #settings-row{margin-bottom:0}
}
@media (max-height:800px){
  .sec-label{padding:8px 12px 2px}
  nav#rail-nav .rowbtn{height:34px}
  nav#rail-nav{padding-bottom:0}
  nav#rail-nav .rowbtn{margin-bottom:0}
}
@media (max-width:480px){.gate{padding:var(--s-l)}.gate-card{padding:28px 20px 24px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .rowbtn.shimmer canvas{display:none}
}

/* live text (2026-09-15): one spinner, one shimmer, words that roll in — shared by Chat and Employees */
.live-spin{display:inline-block;flex:none;box-sizing:border-box;width:14px;height:14px;border-radius:50%;
  border:2px solid color-mix(in srgb,currentColor 22%,transparent);border-top-color:currentColor;animation:live-spin .75s linear infinite}
.live-spin.xs{width:11px;height:11px;border-width:1.5px}
@keyframes live-spin{to{transform:rotate(360deg)}}
.shimmer{background-image:linear-gradient(90deg,var(--muted) 0%,var(--muted) 38%,var(--text) 50%,var(--muted) 62%,var(--muted) 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 2.2s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
.roll-word{animation:roll-word .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes roll-word{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
.fade-in{animation:fade-in .28s ease-out}
.shimmer.fade-in{animation:fade-in .28s ease-out,shimmer 2.2s linear infinite}
@keyframes fade-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .shimmer{background:none;color:var(--text)}
}