/* CaliRecord app shell — /farm and /golden.
   Layout in the manner of an enterprise data workbench: a dark, collapsible icon sidebar on the left
   (always dark, in either theme), a light content frame with a top app bar, cards for the working
   surfaces, and a Settings view with its own left sub-nav. Palette: slate greys for structure, one
   blue for primary actions, state gold only as the "you are here" mark — a nod to the landing page.
   auth.js owns #authbar (who is signed in) and #authgate (the sign-in card); this file only styles and
   places them. The bench scripts (farm.js / golden.js) are untouched: every id they use is preserved. */

:root {
  --side: #1c2127; --side-ink: #e5e8eb; --side-muted: #9aa5b1; --side-line: #2f343c; --side-hover: #252a31; --side-w: 220px;
  --frame: #ffffff; --card: #ffffff; --ink: #1c2127; --muted: #4b5563; --line: #dce0e5; --line-strong: #b8c0ca;
  --blue: #2d72d2; --blue-hover: #215db0; --gold: #fdb515; --gold-ink: #9a6b00;
}
:root[data-theme="dark"], :root:not([data-theme="light"]) { }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --frame: #1c2127; --card: #1c2127; --ink: #f6f7f9; --muted: #b6bec9; --line: #383e47; --line-strong: #566072; --blue: #4c90f0; --blue-hover: #2d72d2; --gold-ink: #f2c14e; }
}
:root[data-theme="dark"] { --frame: #1c2127; --card: #1c2127; --ink: #f6f7f9; --muted: #b6bec9; --line: #383e47; --line-strong: #566072; --blue: #4c90f0; --blue-hover: #2d72d2; --gold-ink: #f2c14e; }

/* ---- frame: the page CSS sets body padding + max-width for a single column; the shell takes over */
html, body { height: 100%; }
body { display: flex; margin: 0 !important; padding: 0 !important; max-width: none !important; background: var(--frame) !important; color: var(--ink); min-height: 100vh; font-family: -apple-system, system-ui, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.5; }
#frame { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--side-w); transition: margin-left .15s ease; }
html[data-side="collapsed"] #frame, html.narrow #frame { margin-left: 56px; }
#app, #settings { padding: 18px 28px 40px; max-width: 1560px; box-sizing: border-box; width: 100%; }
body:not(.cre-signed) #app, body.cre-locked #app, body:not(.cre-signed) #settings, body.cre-locked #settings { display: none; }
body.show-settings #app { display: none; } body:not(.show-settings) #settings { display: none; }

/* ---- sidebar */
#side { width: var(--side-w); flex: none; background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; position: fixed; left: 0; top: 0; height: 100vh; border-right: 1px solid var(--side-line); transition: width .15s ease; color-scheme: dark; z-index: 20; }
html[data-side="collapsed"] #side, html.narrow #side { width: 56px; }
#side .top { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; border-bottom: 1px solid var(--side-line); min-height: 52px; box-sizing: border-box; }
#side .logo { width: 30px; height: 30px; border-radius: 8px; background: #fff; color: #1c2127; font: 800 15px/30px system-ui; text-align: center; text-decoration: none; letter-spacing: -.04em; flex: none; }
#side .logo b { color: var(--gold-ink); color: #c9931b; }
#side .wordmark { font-weight: 650; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; }
#side .grow { flex: 1; }
#side nav { display: flex; flex-direction: column; padding: 8px; gap: 2px; }
#side nav + nav { border-top: 1px solid var(--side-line); }
#side nav a, #side nav button { display: flex; align-items: center; gap: 12px; padding: 12px 12px; min-height: 44px; border-radius: 6px; color: var(--side-ink); text-decoration: none; font: 15px/1.2 system-ui; background: transparent; border: 0; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; width: 100%; box-sizing: border-box; }
#side nav a:hover, #side nav button:hover { background: var(--side-hover); }
#side nav a[hidden] { display: none; }   /* display:flex above would otherwise beat the hidden attribute — role filtering relies on it */
#side nav a.here { background: var(--gold); color: #14213d; font-weight: 600; } #side nav a.here svg { opacity: 1; }
#side nav svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
#side .label { overflow: hidden; text-overflow: ellipsis; }
#side .section { font: 600 12px/1 system-ui; letter-spacing: .06em; text-transform: uppercase; color: var(--side-muted); padding: 14px 18px 6px; white-space: nowrap; overflow: hidden; }
html[data-side="collapsed"] #side .label, html[data-side="collapsed"] #side .wordmark, html[data-side="collapsed"] #side .section, html[data-side="collapsed"] #side .who, html[data-side="collapsed"] #side .role,
html.narrow #side .label, html.narrow #side .wordmark, html.narrow #side .section, html.narrow #side .who, html.narrow #side .role { display: none; }
#collapse { margin-left: auto; background: transparent; border: 0; color: var(--side-muted); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; }
#collapse:hover { background: var(--side-hover); color: var(--side-ink); }
/* the collapse button shows chevrons pointing the way the sidebar will move: « to collapse, » to expand */
#collapse .ic-out { display: none; } html[data-side="collapsed"] #collapse .ic-in { display: none; } html[data-side="collapsed"] #collapse .ic-out { display: block; }
html[data-side="collapsed"] #side .top, html.narrow #side .top { justify-content: center; padding: 12px 8px 10px; flex-wrap: wrap; gap: 8px; }
html[data-side="collapsed"] #collapse { margin: 0; }
html[data-side="collapsed"] #side nav a, html[data-side="collapsed"] #side nav button,
html.narrow #side nav a, html.narrow #side nav button { justify-content: center; padding: 9px 0; }
/* account block at the bottom: auth.js's #authbar is parked here and re-dressed */
#side .account { padding: 10px 8px 12px; border-top: 1px solid var(--side-line); min-height: 124px; box-sizing: border-box; }   /* fixed height: the block is filled late (cache, then auth.js), and Theme / Settings above it must not move */
#side #authbar { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; opacity: 1; font: 14px system-ui; padding: 6px 10px; }
#side #authbar .who { color: var(--side-ink); overflow: hidden; text-overflow: ellipsis; }
#side #authbar .role { align-self: flex-start; border-color: var(--side-line); color: var(--side-muted); font-size: 11px; text-transform: capitalize; }
#side #authbar button { font: 14px system-ui; padding: 8px 10px; background: transparent; color: var(--side-ink); border: 1px solid var(--side-line); border-radius: 6px; cursor: pointer; }
#side #authbar button:hover { background: var(--side-hover); }
html[data-side="collapsed"] #side #authbar button, html.narrow #side #authbar button { font-size: 0; padding: 8px; }
html[data-side="collapsed"] #side #authbar button::before, html.narrow #side #authbar button::before { content: "⎋"; font-size: 14px; }

/* ---- top app bar */
/* flex: none — #frame is a flex COLUMN, so the app bar's default flex-shrink squashed its fixed
   58px height down to 45px whenever the page's content overflowed the window, moving everything
   below it up by 13px. Expanding Advanced options on a short window did exactly that. */
#topbar { flex: none; display: flex; align-items: center; gap: 14px; padding: 0 28px; height: 58px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
#topbar .appicon { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; background: color-mix(in srgb, var(--blue) 14%, transparent); font-size: 15px; }
#topbar .apptitle { font-weight: 650; font-size: 17px; letter-spacing: -.01em; }
#topbar .appsub { color: var(--muted); font-size: 15px; border-left: 1px solid var(--line); padding-left: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#topbar .spacer { flex: 1; }
#topbar .pill { font: 13px system-ui; color: var(--muted); border: 1px solid var(--line); border-radius: 12px; padding: 2px 9px; white-space: nowrap; }
/* A label that truncates has failed at being a label (CLAUDE.md: labels never truncate). The
   subtitle is the one thing in the app bar that is optional, so below the width where it fits it
   is DROPPED rather than shown as a stub with an ellipsis. Shortening the copy alone did not fix
   this: on a half-screen window the sidebar and the freshness pill take the room, and "The
   register as an org chart" still needed 203px in 167px. The room icon and title always stay. */
@media (max-width: 1000px) { #topbar .appsub { display: none; } }
/* NARROW MODE (html.narrow, set by shell.js from a matchMedia at 760px). The sidebar becomes the
   56px icon rail whatever the remembered preference says: at phone width the full 220px sidebar
   took 40% of the screen and left the content 155px, the wordmark clipped and the search box
   collapsed to a circle. It is also what stopped the app bar overflowing the document.
   Every rule above that answers to data-side="collapsed" answers to html.narrow too, so the two
   MUST be edited together. */
@media (max-width: 760px) { #collapse { display: none; } #topbar { padding: 0 14px; gap: 10px; } #app, #settings { padding: 14px 14px 32px; } }

/* ---- content: the bench's own elements, dressed as cards. The h1/.sub duplicate the top bar, so they
        become a compact page heading. */
#app > h1 { display: none; }   /* the app bar is the one heading; the room's own h1 would repeat it */
#app .sub { color: var(--muted); opacity: 1 !important; margin: 4px 0 18px !important; max-width: 900px; font-size: 15px; }
#app .card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; margin: 0 0 16px; }
#app .card .row { margin: 6px 0; }
#app textarea { border: 1px solid var(--line-strong); border-radius: 6px; background: var(--frame); color: var(--ink); }
#app button { background: var(--blue); border-color: transparent; color: #fff; border-radius: 6px; font-weight: 500; }
#app button:hover:not(:disabled) { background: var(--blue-hover); }
#app button.secondary { background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); }
#app button.secondary:hover:not(:disabled) { background: var(--frame); }
#app select, #app input[type=text], #app input[type=number] { border: 1px solid var(--line-strong); border-radius: 5px; background: var(--card); color: var(--ink); padding: 4px 7px; }
#app table { background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: 14px !important; }
#app th, #app td { border-color: var(--line) !important; }
#app th { background: var(--frame) !important; color: var(--muted); font-weight: 600; font-size: 13px; text-transform: none; letter-spacing: 0; }
#app .tile { background: var(--card); border-color: var(--line); }

/* ---- settings view */
.subview .head { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 18px; } .subview h1 { font-size: 20px; margin: 0; letter-spacing: -.02em; }
/* Settings and Admin used to put a SECOND vertical sidebar beside the app's own, which read as two
   competing navigations. Their sub-nav is a horizontal tab strip now: one column, tabs across the
   top, content beneath. The group headings ("User settings", "Workspace", "Control panel") are
   dropped rather than squeezed in — with three to six self-describing tabs they labelled nothing,
   and the grouping survives in the tab order. */
.subview .cols { display: block; }
.subview .subnav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 2px;
                   border-bottom: 1px solid var(--line); margin: 0 0 22px; }
.subview .subnav .section { display: none; }
.subview .subnav button { background: transparent; border: 0; border-bottom: 2px solid transparent;
                          margin-bottom: -1px; color: var(--blue); font: 14px system-ui; padding: 10px 14px;
                          border-radius: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
                          white-space: nowrap; }
.subview .subnav button:hover:not(.on) { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.subview .subnav button.on { background: transparent; color: var(--ink); font-weight: 600;
                             border-bottom-color: var(--blue); }
.subview .pane { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 22px 26px; max-width: 720px; }
.subview .pane[hidden] { display: none; } .subview h2 { font-size: 17px; margin: 0 0 4px; } .subview .lede { color: var(--muted); margin: 0 0 18px; font-size: 13.5px; }
.subview .field { margin: 0 0 14px; } .subview .field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.subview .field .val { border: 1px solid var(--line); background: var(--frame); border-radius: 5px; padding: 7px 10px; font-size: 14px; }
.subview .choices { display: flex; gap: 8px; } .subview .choices button { font: 13.5px system-ui; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer; }
.subview .choices button.on { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); color: var(--blue); font-weight: 600; }
.subview .danger { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .subview .danger button { font: 13.5px system-ui; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer; }

/* ---- sign-in card (auth.js content) */
body #authgate { background: color-mix(in srgb, var(--frame) 55%, transparent); backdrop-filter: blur(3px); }
body #authgate .card { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 10px; padding: 30px 34px; max-width: 420px; font: 15px/1.55 -apple-system, system-ui, sans-serif; box-shadow: 0 12px 40px #0004; }
body #authgate .card b { display: block; font-size: 22px; letter-spacing: -.02em; margin-bottom: 8px; } body #authgate .card b::after { content: "."; color: #c9931b; }
body #authgate .card > div { color: var(--muted); margin: 0 0 14px !important; }
body #authgate button { font: 14px/1 system-ui; font-weight: 600; padding: 11px 18px; background: var(--blue); color: #fff; border: 0; border-radius: 6px; cursor: pointer; }
body #authgate button:hover { background: var(--blue-hover); }

/* ---- rooms: offline banner (U7), admin gate, report modal + toast (U5), tags */
#offline.banner { background: color-mix(in srgb, #fdb515 22%, var(--card)); border-bottom: 1px solid color-mix(in srgb, #fdb515 60%, var(--line)); padding: 9px 28px; font-size: 13.5px; color: var(--ink); }
#offline.banner b { color: #9a6b00; } :root[data-theme="dark"] #offline.banner b { color: #f2c14e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #offline.banner b { color: #f2c14e; } }
body.role-denied #app, body.role-denied #settings { display: none !important; }
#denied { display: none; } body.role-denied #denied { display: flex; justify-content: center; padding: 80px 28px; }
#denied .card { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 10px; padding: 26px 30px; max-width: 440px; font-size: 15px; line-height: 1.5; }
#denied .card b { display: block; font-size: 20px; margin-bottom: 6px; } #denied .card div { color: var(--muted); margin-bottom: 14px; } #denied .card a { color: var(--blue); font-weight: 600; text-decoration: none; }
.modal { position: fixed; inset: 0; background: #0006; display: flex; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(2px); }
.modal .sheet { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 22px 26px; width: 520px; max-width: 94vw; box-shadow: 0 16px 50px #0005; font: 14px/1.5 -apple-system, system-ui, sans-serif; }
.modal h3 { margin: 0 0 10px; font-size: 17px; letter-spacing: -.01em; }
.modal .ctx { background: var(--frame); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 0 0 12px; font-size: 13px; }
.modal label { display: block; font-size: 13px; margin: 0 0 6px; } .modal .muted { color: var(--muted); }
.modal textarea { width: 100%; box-sizing: border-box; font: 13.5px/1.45 system-ui; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--frame); color: var(--ink); resize: vertical; }
.modal .acts { display: flex; justify-content: flex-end; gap: 8px; margin: 12px 0 8px; }
.modal .acts button { font: 13.5px system-ui; padding: 8px 14px; border-radius: 6px; border: 1px solid transparent; background: var(--blue); color: #fff; cursor: pointer; }
.modal .acts button.secondary { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.modal .small { font-size: 12px; margin: 0; }
.tag { display: inline-block; font-size: 11px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 7px; margin-left: 8px; vertical-align: middle; color: var(--muted); }
#toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: #1c2127; color: #f6f7f9; border: 1px solid #383e47; border-radius: 8px; padding: 10px 16px; font: 13.5px system-ui; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; max-width: 80vw; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
/* room pages: their own controls in the card should match the bench look */
#app input[type=search] { border: 1px solid var(--line-strong); border-radius: 6px; background: var(--card); color: var(--ink); }
/* sub-nav + chips inside #app must not inherit the primary-button look */
#app .subview .subnav button { background: transparent; color: var(--blue); border: 0;
                               border-bottom: 2px solid transparent; font-weight: 400; }
#app .subview .subnav button.on { background: transparent; color: var(--ink); font-weight: 600;
                                  border-bottom-color: var(--blue); }
#app .chips button { background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); } #app .chips button.on { border-color: var(--blue); color: var(--blue); }

/* ---- Search room: a hero box like a search engine's front page; after the first query the box docks at the top */
#app.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 52px - 58px); }
#app.hero .brandmark { font-size: 44px; font-weight: 750; letter-spacing: -.045em; margin: 0 0 6px; } #app.hero .brandmark span { color: #c9931b; }
#app.hero .tagline { color: var(--muted); margin: 0 0 26px; font-size: 15px; text-align: center; max-width: 560px; }
#app:not(.hero) .brandmark, #app:not(.hero) .tagline, #app:not(.hero) .examples { display: none; }
.searchbox { display: flex; align-items: center; gap: 10px; width: min(760px, 100%); box-sizing: border-box; background: var(--card); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 8px 6px 18px; box-shadow: 0 1px 2px #0001; }
.searchbox:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
.searchbox svg { width: 20px; height: 20px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; flex: none; }
.searchbox input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; font-size: 17px; padding: 10px 4px; outline: none; color: var(--ink); }
.searchbox button { border-radius: 999px; padding: 9px 18px; }
#app:not(.hero) .searchbox { width: min(760px, 100%); margin: 0; }
.options-toggle { background: transparent; border: 0; color: var(--muted); font: 13px system-ui; padding: 6px 8px; cursor: pointer; border-radius: 6px; }
.options-toggle:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.options { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center; margin: 12px 0 0; font-size: 13px; width: min(760px, 100%); }
.options[hidden] { display: none; }
#app.hero .examples { display: flex; gap: 8px; align-items: center; margin-top: 18px; color: var(--muted); font-size: 13px; }
.searchhead { width: min(1180px, 100%); margin: 0 auto; }
#app:not(.hero) .searchhead { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 8px; }
#app:not(.hero) .options { justify-content: flex-start; margin-top: 8px; }
.star { background: transparent !important; border: 0 !important; color: var(--line-strong) !important; font-size: 18px; line-height: 1; padding: 0 4px !important; cursor: pointer; }
.star.on, .star:hover { color: #fdb515 !important; }
.saved { margin: 10px 0 0; width: min(760px, 100%); font-size: 13px; }
.saved .chip { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); border-radius: 999px; padding: 3px 12px; font: 12.5px system-ui; cursor: pointer; }
.saved .chip .n { color: #c9931b; font-weight: 600; }
.saved-list { margin-top: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 4px; }
.saved-list .it { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; } .saved-list .it:hover { background: var(--frame); }
.saved-list .it a { flex: 1; color: inherit; text-decoration: none; } .saved-list .it a b { display: block; } .saved-list .it a span { color: var(--muted); font-size: 12px; }
.saved-list .it button { background: transparent !important; border: 0 !important; color: var(--muted) !important; cursor: pointer; padding: 2px 6px !important; }

/* ---- readability pass: three sizes (22 / 15 / 13), real greys instead of opacity, nothing under 12px */
#app, #settings { font-size: 15px; }
#app .muted, #settings .muted, #app .sub, .subview .lede { opacity: 1 !important; color: var(--muted); }
#app button, #app select, #app input[type=text], #app input[type=number], #app input[type=search], #app label.inline { font-size: 14px; }
#app button { padding: 8px 14px; }
#app .pill, #app .tag, .tag { font-size: 12px; }
#app [style*="font-size:12px"], #app [style*="font-size:11"], #app [style*="font-size: 12px"] { font-size: 13px !important; }
.subview h1, #app.hero .brandmark { font-size: 22px; } #app.hero .brandmark { font-size: 40px; }
.subview h2 { font-size: 19px; } .subview .lede { font-size: 15px; }
.subview .subnav button { font-size: 15px; padding: 11px 14px; }
#app.hero .tagline { font-size: 17px; max-width: 620px; line-height: 1.45; }
/* search: one primary action in the box; options are a text disclosure under it, like SOS "Advanced" */
.searchbox { padding: 6px 8px 6px 20px; } .searchbox input { font-size: 18px; padding: 12px 4px; }
.options-toggle { display: block; margin: 10px auto 0; font-size: 14px; color: var(--blue); }
#app:not(.hero) .options-toggle { margin: 8px 0 0; }
#app.hero .examples { font-size: 14px; } #app.hero .examples button { font-size: 14px; }
.options { font-size: 14px; }
#app #status { font-size: 15px; margin: 14px 0 6px; }
/* text-style buttons inside #app must not inherit the primary look (the #app button rule outranks a class) */
#app .options-toggle { background: transparent; color: var(--blue); border: 0; padding: 6px 8px; font-weight: 500; }
#app .options-toggle:hover { background: color-mix(in srgb, var(--blue) 10%, transparent); }
#app .saved .chip { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); padding: 5px 14px; }
#app .saved .chip:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
#app .saved-list .it button { background: transparent; color: var(--muted); border: 0; }

/* ---- no-flash: everything the sidebar shows on load is painted from <html data-…> set in <head>, before first paint.
        The live answers (auth.js's #authbar, /me, /stats) replace the cached ones in place. */
#theme .label::after { content: "auto"; } html[data-theme="light"] #theme .label::after { content: "light"; } html[data-theme="dark"] #theme .label::after { content: "dark"; }
html[data-role="staff"] #side nav a[hidden][data-roles~="staff"], html[data-role="admin"] #side nav a[hidden][data-roles~="staff"], html[data-role="admin"] #side nav a[hidden][data-roles~="admin"] { display: flex; }
#authbar-cache { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px; font: 14px system-ui; }
#authbar-cache .who { color: var(--side-ink); overflow: hidden; text-overflow: ellipsis; } #authbar-cache .role { align-self: flex-start; border: 1px solid var(--side-line); border-radius: 10px; padding: 0 6px; color: var(--side-muted); font-size: 11px; text-transform: capitalize; }
#authbar-cache button { font: 14px system-ui; padding: 8px 10px; background: transparent; color: var(--side-ink); border: 1px solid var(--side-line); border-radius: 6px; opacity: .7; }   /* same shape as the real Sign out, so the swap does not move anything */
#side #authbar[hidden] { display: none; }   /* while the cached block matches the live answer, the live bar stays parked out of sight */
#authbar-cache .who { opacity: .8; } #authbar-cache button { opacity: 1; cursor: pointer; } #authbar-cache button:hover { background: var(--side-hover); }
html[data-side="collapsed"] #authbar-cache, html.narrow #authbar-cache { display: none; }
#side { transition: none; } #frame { transition: none; }   /* no width animation on load; the state is already right */

/* ---- search box: one pill, one round action. The action is a return-key glyph (the box submits on ↵ anyway). */
#app .searchbox { padding: 6px 6px 6px 20px; }
#app .searchbox .go { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; flex: none; }
#app .searchbox .go svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* bookmark star: the size of a search-bar icon, with a real hit area */
#app .star { font-size: 26px; width: 40px; height: 40px; padding: 0 !important; display: inline-grid; place-items: center; border-radius: 50%; line-height: 1; }
#app .star:hover { background: color-mix(in srgb, #fdb515 14%, transparent); }
#results td.act { width: 48px; text-align: center; vertical-align: middle; }
/* nested orgs are links: click to search that parent */
#app .nest { color: var(--blue); text-decoration: none; border-bottom: 1px dotted currentColor; cursor: pointer; }
#app .nest:hover { border-bottom-style: solid; }

/* ---- Pro: the holdings block is a subscription feature. Until the API carries a plan, staff and admin see it; users see the paywall. */
.ptag { display: inline-grid; place-items: center; height: 18px; padding: 0 7px; border-radius: 9px; font: 700 10px/1 system-ui; letter-spacing: .04em; color: #14213d; margin-left: auto; } .ptag.pro { background: #fdb515; }
/* the "not for regular users" badge (shell.js paintRoles). Outline, not a fill: it is a note about
   visibility, not a product tier like Pro, and the sidebar is dark in both themes. */
.ptag.gate { background: transparent; border: 0; padding: 0; width: 14px; height: 14px; color: var(--side-muted); opacity: .8; flex: none; }
.ptag.gate svg { width: 13px; height: 13px; }
#side nav a:hover .ptag.gate { opacity: 1; color: var(--side-ink); }
/* Lists (Drive): the room's icon carries the connection state, so it is visible from any room
   without opening Settings. Set by shell.js from the token in sessionStorage — the room drops a
   token Google rejects, so a stale green corrects itself on the next visit to the room. */
/* the Google Drive connection row in Settings > Account. It lives in the SHELL, not in one room,
   because the connection is account-level: while it sat in the Lists room's markup it vanished the
   moment you opened Settings from any other room. */
.conn-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.conn-logo { width: 26px; height: 26px; flex: none; object-fit: contain; }
.conn-text { flex: 1; min-width: 0; }
.conn-name { font-size: 15px; font-weight: 500; }
.conn-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12.5px; font-weight: 500;
             padding: 4px 11px 4px 8px; border-radius: 999px; border: 1px solid var(--line-strong);
             color: var(--muted); background: color-mix(in srgb, var(--card) 94%, gray); }
.conn-pill svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2;
                 stroke-linecap: round; stroke-linejoin: round; opacity: .45; }
.conn-row.on .conn-pill { border-color: color-mix(in srgb, #22c55e 55%, transparent); color: #15803d;
                          background: color-mix(in srgb, var(--card) 88%, #22c55e); }
.conn-row.on .conn-pill svg { opacity: 1; }
:root[data-theme="dark"] .conn-row.on .conn-pill { color: #4ade80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .conn-row.on .conn-pill { color: #4ade80; } }
/* NOT scoped #app: Settings is <section id="settings">, so an #app rule would not match and the
   room's own `button { background: … }` would paint the switch blue in its off state. */
button.switch { width: 42px; height: 24px; flex: none; padding: 0; border-radius: 999px; border: 0;
                background: color-mix(in srgb, var(--card) 74%, gray); position: relative; cursor: pointer;
                transition: background .15s; }
button.switch .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
                      background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .15s; }
.conn-row.on button.switch { background: #22c55e; }
.conn-row.on button.switch .knob { transform: translateX(18px); }
#side nav a.drive-on svg { stroke: #34d399; opacity: 1; }
#side nav a.drive-on.here svg { stroke: #0b6b47; }   /* a dark green: bright green on gold is unreadable, but navy would hide the state exactly where you are */
.ptag + .ptag { margin-left: 4px; }   /* two autos would split the free space and separate them */
html[data-side="collapsed"] .ptag, html.narrow .ptag { display: none; }
.sample { display: inline-block; font-size: 11px; border: 1px solid #c90; color: #b80; border-radius: 9px; padding: 0 7px; margin-left: 8px; vertical-align: middle; }
.paywall { border: 1px solid var(--line); border-left: 4px solid #fdb515; border-radius: 8px; padding: 14px 18px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.paywall .t { flex: 1; min-width: 260px; } .paywall .t b { display: block; font-size: 15px; } .paywall .t span { color: var(--muted); font-size: 14px; }
#app .paywall button { background: #fdb515; color: #14213d; border: 0; font-weight: 600; }
.legend { display: none; }
/* subject switch on the search box */
.subject { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; margin: 14px auto 0; background: var(--card); }
#app .subject button { background: transparent; color: var(--muted); border: 0; border-radius: 999px; padding: 6px 16px; font-size: 14px; }
#app .subject button.on { background: #0f2f5c; color: #fff; font-weight: 600; }
#app .subject button:hover:not(.on) { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }   /* the generic #app button:hover paints blue under grey text — unreadable */
#app .subject button.on:hover { background: #0f2f5c; color: #fff; }
#app:not(.hero) .subject { margin: 10px 0 0; }
/* holdings blocks: two labelled halves — the register (roles) and your sheets (owner of record) */
.hold { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 14px 0 6px; }
.hold section { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.hold h4 { margin: 0 0 4px; font-size: 15px; } .hold .src { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.hold table { width: 100%; border-collapse: collapse; font-size: 14px; } .hold td, .hold th { padding: 5px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .hold th { color: var(--muted); font-weight: 600; font-size: 13px; }
.tieline { font-size: 13px; color: #1e9e63; margin: 6px 0 0; } .tieline.bad { color: #d4433b; }
@media (max-width: 1100px) { .hold { grid-template-columns: 1fr; } }
/* portfolio tree in the Holdings room */
.tree { list-style: none; margin: 0; padding: 0; } .tree li { padding: 6px 0 6px 18px; border-left: 2px solid var(--line); margin-left: 8px; } .tree li b { font-weight: 600; } .tree li .m { color: var(--muted); font-size: 13px; }
.tree > li { border-left: 0; margin-left: 0; padding-left: 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 14px 0; }
.kpi { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; } .kpi .l { font-size: 13px; color: var(--muted); } .kpi .n { font-size: 24px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kpi .s { font-size: 13px; color: var(--muted); }

/* .searchhead is a 1180 column (line 154) while the box, the subrow and the panel are each 760.
   The box has no auto margin so it sits flush left in that column; .subrow and .options.panel had
   `margin: … auto` and centred instead — 210px to the right of the box, with the panel's right edge
   overhanging it by the same amount. Only those two move: the brandmark, the tagline and the "try"
   chips keep the position they always had. */
#app.hero .subrow, #app.hero .options.panel { margin-left: 0; margin-right: auto; }

/* The hero is TOP-ANCHORED, not vertically centred. Centred, opening Advanced options grew the
   column and re-centred it, lifting the brandmark and the search box 96px — the page moved under
   the cursor on a click that was meant to reveal filters. Anchored, the panel grows downward into
   empty space and nothing above it ever moves. 30vh reproduces where the centred hero used to sit
   (measured: 368px of a 1224px viewport = 30.1vh) and scales with the window instead of a magic
   pixel offset. The docked state is unaffected — it is not .hero. */
#app.hero { justify-content: flex-start; padding-top: 30vh; }

/* Bookmarks: the CHIP sits in the subrow, between the subject selector and Advanced options. Its
   LIST renders in flow from #saved-list under that row — not as a floating card, because as a
   popover its per-row "remove" control read as the card's close button. */
#app .subrow .saved { width: auto; margin: 0; }
.saved-host { width: min(760px, 100%); font-size: 13px; }
#app.hero .saved-host { margin-left: 0; margin-right: auto; }
.saved-list .it button.rm { font: 12px system-ui; padding: 2px 8px !important; border-radius: 6px; }
.saved-list .it button.rm:hover { background: color-mix(in srgb, var(--ink) 8%, transparent) !important; color: var(--ink) !important; }

/* ---- options panel (Search + Lists): one width with the box, labels above fields, a grid that does not wrap at random */
.subrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(760px, 100%); margin: 14px auto 0; }
#app:not(.hero) .subrow { margin: 10px 0 0; }
#app .subrow .subject { margin: 0; } #app .subrow .options-toggle { margin: 0; }
.options.panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 18px; width: min(760px, 100%); margin: 10px auto 0; padding: 14px 18px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); box-sizing: border-box; }
#app:not(.hero) .options.panel { margin: 10px 0 0; }
.options.panel[hidden] { display: none; }
.options.panel label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.options.panel select, .options.panel input[type=text] { width: 100%; box-sizing: border-box; }
.options.panel .check { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 14px; min-height: 32px; }
.options.panel .clear { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
#app .linkish { background: transparent; color: var(--blue); border: 0; padding: 4px 6px; font-size: 14px; } #app .linkish:hover:not(:disabled) { background: color-mix(in srgb, var(--blue) 10%, transparent); } #app .linkish:disabled { color: var(--muted); }
.fchips { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; } .fchip { font-size: 12px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 9px; color: var(--muted); }
/* Lists: toolbar shows list · Enrich · download; filter + Metrics appear once a list is open */
#app .toolbar .spacer { flex: 1; } #app .toolbar .options { display: flex; gap: 14px; align-items: center; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
#app .toolbar .options[hidden] { display: none; }
body:not(.has-results) .after-results { display: none; }

/* A table wider than the pane used to push the DOCUMENT sideways, taking the sidebar and the app bar
   with it: at 768px the Search results table is 945px and no room gave its tables a scroll container.
   display:block turns the table into its own scroller while the rooms' own `width: 100%` still makes
   it fill on a wide screen. Two kinds opt out because they rely on a real table box for
   `table-layout: fixed`: the 📊 metric-tree tables in `.box`, and anything marked `.fixed`. */
#app table { display: block; overflow-x: auto; }
#app .box table, #app table.fixed { display: table; overflow-x: visible; }
/* ...and the `hidden` attribute has to keep winning. `#app table` is (1,0,1) and the reset's
   `[hidden]` is (0,1,0), so the rule above quietly out-specified it and `table.hidden = true`
   stopped hiding anything: Search rendered a person answer UNDER the stale entity table, and
   Lists' "wipe the last result" left the old rows on screen. Same trap the sidebar had with
   `#side nav a[hidden]`. */
#app table[hidden] { display: none !important; }