/* ════════════════════════════════════════════════════════════════
   THE NORTH STAR — chat-centric KB (v9 rebuild from Council 04 FINAL.html)
   FINAL.html's <style> is the source of truth for the chat home + chrome.
   The legacy dashboard support styles (auth gate, modals, admin/drive view,
   doc grid, kb-prose) are kept at the bottom, scoped under #toolsView, so
   the demoted admin/drive view + the auth gate still render.

   CONTRAST GUARDRAIL (locked):
     gold #e2bc5c on white = 1.81:1 → FAILS → gold is FILL / CHROME / ON-TEAL ONLY
     gold on teal #00272d  = 8.72:1 → AAA  → active bar, send glyph, badges
     body #373530 on #faf9f6 ≈ 12:1 → all reading text
     teal --link #00474f on white ≈ 7:1 → interactive text / links on canvas
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* — Chrome (teal world) — */
  --teal:            #00272d;
  /* The sidebar chrome (desktop sidebar, mobile topbar + drawer) paints from THIS, not
     --teal, so the admin Branding "Sidebar Color" picker can repaint just the chrome.
     Set at runtime by applyBranding() in js/admin.js. Defaults to the brand teal. */
  --sidebar-bg:      var(--teal);
  --teal-row:        #013840;
  --teal-active:     #02464f;
  --teal-2:          #0a4853;
  --teal-line:       rgba(255,255,255,.08);
  --on-teal:         #cfe0e2;
  --on-teal-soft:    #85a0a5;

  /* — Canvas (white world) — */
  --canvas:          #faf9f6;
  --surface:         #ffffff;
  --surface-sunk:    #f3f1ec;

  /* — Ink — */
  --ink:             #373530;
  --ink-soft:        #5d5950;
  --ink-faint:       #807b70;

  /* — Interactive ON CANVAS = teal (never gold) — */
  --link:            #00474f;
  --link-hover:      #00272d;
  --link-wash:       #ecf2f1;

  /* — Accent (gold) — fills / chrome / on-teal ONLY — */
  --gold:            #e2bc5c;
  --gold-deep:       #c9a340;

  /* — Lines — */
  --line:            #e4e0d6;
  --line-strong:     #d4cfc1;
  --line-soft:       #efece6;

  /* — Feedback — */
  --good:            #1d7a4d;
  --good-bg:         #e6f4ec;
  --warn:            #9a6b00;
  --warn-bg:         #fbf2da;

  /* — System — */
  --radius:          12px;
  --radius-sm:       8px;
  --radius-pill:     999px;
  --tap:             44px;
  --bar-h:           60px;
  --sidebar-w:       288px;
  --read-col:        720px;
  --font: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: .16s cubic-bezier(.4,0,.2,1);
  --shadow:    0 1px 2px rgba(13,28,30,.05), 0 4px 16px rgba(13,28,30,.06);
  --shadow-lg: 0 8px 30px rgba(13,28,30,.16);

  /* — legacy aliases (read by admin/drive/render JS + #toolsView markup) — */
  --gold-dark:      #c9a340;
  --gold-light:     #fdf6e3;
  --teal-light:     #e4eff0;
  --page-bg:        #faf9f6;
  --panel-bg:       #ffffff;
  --panel-border:   #e4e0d6;
  --table-header:   #00272d;
  --text-primary:   #373530;
  --text-secondary: #5d5950;
  --text-muted:     #807b70;
  --green:          #22c55e;
  --green-light:    #dcfce7;
  --red:            #ef4444;
  --red-light:      #fee2e2;
  --border:         #e4e0d6;
  --radius-md:      8px;
  --radius-lg:      12px;
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.07);
  --shadow-md:      0 3px 12px rgba(0,0,0,0.09);
  --transition:     0.15s ease;
}

html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}
button { font-family: inherit; cursor: pointer; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #dcd8cf; border-radius: 99px; border: 3px solid var(--canvas); }
.sidebar ::-webkit-scrollbar-thumb, .drawer ::-webkit-scrollbar-thumb { background: #11434b; border: 3px solid var(--sidebar-bg); }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ════════════ APP SHELL — mobile-first single column ════════════ */
.app { min-height: 100dvh; display: flex; flex-direction: column; }

/* ───────── MOBILE TOP CHROME ───────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--sidebar-bg); color: #fff;
  padding: max(10px, env(safe-area-inset-top)) 10px 10px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.16);
}
.icon-btn {
  width: var(--tap); height: var(--tap); min-width: var(--tap);
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: #fff; border-radius: 10px;
}
.icon-btn:hover { background: rgba(255,255,255,.10); }
.icon-btn svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.topbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.topbar .brand-name { font-size: 15px; font-weight: 800; letter-spacing: .01em; line-height: 1.05; color: #fff; }
.topbar .brand-sub  { font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); line-height: 1.2; }

.brand-link {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  border: none; background: none; padding: 0; margin: 0;
  font-family: var(--font); text-align: left; cursor: pointer; color: inherit;
  border-radius: 10px; transition: opacity var(--ease);
}
.brand-link:hover { opacity: .82; }
.brand-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.brand-text { min-width: 0; }

.brand-mark {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.brand-mark svg { width: 20px; height: 20px; fill: var(--teal); }

/* ───────── PERSISTENT SIDEBAR (desktop only) ───────── */
.sidebar { display: none; }

.nav-search { margin: 0 14px 10px; position: relative; }
.nav-search input {
  width: 100%; min-height: var(--tap);
  font-family: var(--font); font-size: 14px; color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  padding: 9px 12px 9px 38px; outline: none;
}
.nav-search input::placeholder { color: var(--on-teal-soft); }
.nav-search input:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(226,188,92,.45); background: rgba(255,255,255,.10); }
.nav-search input:focus:not(:focus-visible) { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.10); }
.nav-search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--on-teal-soft); pointer-events: none; display: flex; }
.nav-search .ico svg { width: 17px; height: 17px; }

.ask-ai {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 16px;
  padding: 11px 14px; min-height: var(--tap);
  width: calc(100% - 28px);
  background: var(--gold); color: var(--teal);
  border: none; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 800; letter-spacing: .01em;
  transition: background var(--ease);
}
.ask-ai:hover { background: var(--gold-deep); }
.ask-ai svg { width: 19px; height: 19px; flex-shrink: 0; stroke: var(--teal); fill: none; stroke-width: 2.2; }
/* Secondary variant — Ask AI sits under the gold "browse" CTA since the v10 flip. */
.ask-ai--soft {
  margin-top: -6px;
  background: transparent; color: var(--on-teal);
  border: 1px solid rgba(255,255,255,.20); font-weight: 700;
}
.ask-ai--soft:hover { background: rgba(255,255,255,.10); color: #fff; }
.ask-ai--soft svg { stroke: var(--gold); }

.nav-group { padding: 4px 8px 2px; }
.nav-label {
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-teal-soft); padding: 12px 10px 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-label .count { color: var(--gold); font-weight: 800; }

/* Collapsible section header (Field Guides / Dashboards / Conversations).
   Deliberately styled as .nav-label was, so folding arrived without the sidebar
   changing character — it is the same small uppercase heading, now clickable. */
.nav-sec {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 12px 10px 6px;
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 10px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-teal-soft); text-align: left;
  transition: color var(--ease);
}
.nav-sec:hover { color: #fff; }
.nav-sec .chev {
  width: 13px; height: 13px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 2.6;
  transition: transform var(--ease);
}
/* Open = pointing down. Matches .nav-row's existing chevron behaviour. */
.nav-sec[aria-expanded="true"] .chev { transform: rotate(90deg); }

/* The fold itself. An adjacent-sibling rule, so the header's aria-expanded is the only
   state there is — no inline styles, and no `hidden` attribute for a CSS `display` to
   silently override. */
.nav-sec[aria-expanded="false"] + .nav-sec-body { display: none; }

/* Outbound dashboard links sit in the guide-row shape but are <a>, so the underline and
   visited color that come free with links have to be turned off. */
.nav-dash { text-decoration: none; }
.nav-dash:visited { color: var(--on-teal); }
.nav-ext {
  width: 12px; height: 12px; margin-left: auto; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 2.2;
  opacity: .55; transition: opacity var(--ease);
}
.nav-dash:hover .nav-ext { opacity: 1; }


.nav-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px; min-height: var(--tap);
  border: none; background: transparent; border-radius: var(--radius-sm);
  color: var(--on-teal); font-size: 14px; font-weight: 600; text-align: left;
  transition: background var(--ease), color var(--ease);
}
.nav-row:hover { background: var(--teal-row); color: #fff; }
.nav-row .dept-ic { width: 17px; height: 17px; flex-shrink: 0; stroke: var(--gold); fill: none; stroke-width: 2; }
.nav-row .chev { margin-left: auto; transition: transform var(--ease); color: var(--on-teal-soft); width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.nav-row[aria-expanded="true"] .chev { transform: rotate(90deg); }

.nav-children { margin: 1px 0 4px 14px; padding-left: 8px; border-left: 1px solid var(--teal-line); }

/* Flat guide list in the sidebar/drawer (replaced the bucket folders — 14 guides is
   short enough to show outright, and folders cost a click to reveal it). */
.nav-guide {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; min-height: 38px;
  border: none; background: transparent; border-radius: var(--radius-sm);
  color: var(--on-teal); font-size: 13.5px; font-weight: 600; text-align: left;
  font-family: var(--font); cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.nav-guide:hover { background: var(--teal-row); color: #fff; }
.nav-guide-ic { width: 15px; height: 15px; flex-shrink: 0; stroke: var(--gold); fill: none; stroke-width: 2; }
.nav-guide-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-child {
  display: flex; align-items: center; width: 100%; min-height: var(--tap);
  padding: 8px 10px 8px 14px;
  border: none; background: transparent; text-align: left;
  border-radius: var(--radius-sm);
  color: var(--on-teal); font-size: 13.5px; font-weight: 500; line-height: 1.3;
  transition: background var(--ease), color var(--ease);
}
.nav-child:hover { background: var(--teal-row); color: #fff; }

.conv-row {
  display: block; width: 100%; padding: 9px 10px;
  border: none; background: transparent; text-align: left;
  border-radius: var(--radius-sm); margin-bottom: 2px;
  position: relative; min-height: var(--tap);
  transition: background var(--ease);
}
.conv-row:hover { background: var(--teal-row); }
.conv-row.active { background: var(--teal-active); }
.conv-row.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 99px; background: var(--gold);
}
.conv-title { font-size: 13.5px; font-weight: 600; color: var(--on-teal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.conv-row:hover .conv-title, .conv-row.active .conv-title { color: #fff; }
.conv-time { font-size: 11px; color: var(--on-teal-soft); margin-top: 1px; display: block; }
.conv-title { display: block; padding-right: 4px; }
.conv-empty { padding: 8px 10px 12px; font-size: 12px; color: var(--on-teal-soft); line-height: 1.5; }
/* v9 Phase 2 — conversation list controls (gold/text on the teal sidebar = contrast-safe) */
.conv-new {
  display: block; width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 4px;
  border: none; background: transparent; color: var(--gold); font-weight: 700; font-size: 12.5px;
  border-radius: var(--radius-sm); cursor: pointer; min-height: var(--tap);
}
.conv-new:hover { background: var(--teal-row); }
.conv-acts { position: absolute; top: 6px; right: 6px; display: none; gap: 2px; }
.conv-row:hover .conv-acts, .conv-row:focus-within .conv-acts { display: inline-flex; }
.conv-act {
  width: 26px; height: 26px; border: none; background: rgba(255,255,255,.10); color: var(--on-teal);
  border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.conv-act:hover { background: var(--teal-2); color: #fff; }
@media (max-width: 900px) { .conv-acts { display: inline-flex; } }

/* v9 doc redesign — embedded Google Doc viewer (full-screen overlay; gold only on teal) */
.doc-viewer { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; background: var(--canvas); }
.dv-head { display: flex; align-items: center; gap: 10px; background: var(--teal); color: var(--on-teal); padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); flex-shrink: 0; }
.dv-back { border: 1px solid var(--teal-line); background: var(--teal-2); color: #fff; border-radius: var(--radius-sm); padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer; min-height: var(--tap); white-space: nowrap; }
.dv-back:hover { background: var(--teal-active); }
.dv-source { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); background: var(--gold); border-radius: var(--radius-pill); padding: 3px 9px; }
.dv-title { flex: 1; min-width: 0; color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* LINKED CHILD attribution strip in the reader header. Sits between the document title and
   the header controls; hidden entirely for a field guide, which has no parent. */
.dv-parent { flex: 0 0 auto; color: rgba(255,255,255,.72); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.dv-parent-link { background: none; border: 0; padding: 0; margin: 0 0 0 3px; font: inherit; color: #fff; text-decoration: underline; cursor: pointer; }
.dv-parent-link:hover { opacity: .85; }
.dv-parent-sec { opacity: .85; }
.dv-open { color: var(--gold); font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; min-height: var(--tap); display: inline-flex; align-items: center; }
.dv-open:hover { text-decoration: underline; }
.dv-jump { display: flex; align-items: center; gap: 9px; background: var(--teal-active); color: #fff; padding: 11px 16px; flex-shrink: 0; font-size: 13.5px; border-top: 1px solid var(--teal-line); }
.dv-jump-ic { color: var(--gold); font-size: 16px; flex-shrink: 0; }
.dv-jump-link { color: var(--gold); font-weight: 700; text-decoration: none; min-width: 0; }
.dv-jump-link:hover { text-decoration: underline; }
.dv-jump-meta { color: var(--on-teal); font-weight: 600; font-size: 11.5px; }
.dv-note { background: var(--warn-bg); color: var(--warn); font-size: 12.5px; font-weight: 600; padding: 9px 16px; flex-shrink: 0; border-bottom: 1px solid var(--line); }
.dv-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--surface-sunk); }
.dv-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
@media (min-width: 900px) {
  .dv-frame { left: 50%; transform: translateX(-50%); width: min(900px, 100%); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
}
.dv-shimmer { position: absolute; inset: 0; display: none; flex-direction: column; gap: 14px; padding: 40px clamp(16px, 8vw, 80px); background: var(--surface); z-index: 2; }
@media (min-width: 900px) { .dv-shimmer { padding-left: max(16px, calc(50% - 420px)); padding-right: max(16px, calc(50% - 420px)); } }
.dv-sk { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-sunk) 25%, #f1ece1 50%, var(--surface-sunk) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.dv-sk-title { height: 26px; width: 55%; margin-bottom: 10px; }
.dv-sk.w60 { width: 60%; } .dv-sk.w70 { width: 70%; } .dv-sk.w85 { width: 85%; } .dv-sk.w90 { width: 90%; } .dv-sk.w95 { width: 95%; }

/* sidebar-footer entries (user + Files/Admin links) */
.sidebar-foot, .drawer-foot {
  margin-top: auto;
  padding: 13px 16px calc(13px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--teal-line);
}
.foot-user { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gold); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; flex-shrink: 0; overflow: hidden;
}
.foot-name { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-role { font-size: 10.5px; color: var(--on-teal-soft); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-links { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.foot-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: var(--radius-sm);
  border: none; background: rgba(255,255,255,.08); color: var(--on-teal);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  transition: background var(--ease), color var(--ease);
}
.foot-link:hover { background: rgba(255,255,255,.16); color: #fff; }
.foot-link svg { width: 15px; height: 15px; stroke: var(--gold); fill: none; stroke-width: 2; }
.foot-link.signout { margin-left: auto; background: transparent; color: var(--on-teal-soft); }
.foot-link.signout svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.app.rail .foot-link.signout { margin-left: 0; }
.foot-link.signout:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ───────── MAIN STAGE ───────── */
.stage { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.thread-wrap {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
  padding-bottom: calc(var(--bar-h) + 150px);
}
.thread, .welcome { max-width: var(--read-col); margin: 0 auto; }
.thread   { padding: 24px 16px 8px; }
.welcome  { padding: 30px 16px 8px; text-align: center; }

/* Way back to the home page (the guides & documents list). */
.chat-backrow { max-width: var(--read-col); margin: 0 auto; padding: 14px 16px 0; }

.state { display: none; }
.state.show { display: block; }

/* ════════════ EMPTY / WELCOME ════════════ */
.welcome-mark {
  width: 64px; height: 64px; margin: 4px auto 20px;
  border-radius: 18px; background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
.welcome-mark svg { width: 32px; height: 32px; fill: var(--gold); }
.welcome h1 { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.015em; line-height: 1.18; }
.welcome h1 .nm { color: var(--link); }
.welcome .lede { font-size: 16px; color: var(--ink-soft); margin: 12px auto 0; max-width: 460px; line-height: 1.55; font-weight: 500; }

.starter-label {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); text-align: left; margin: 28px 4px 12px;
}
.starters { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.starter {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: var(--tap); padding: 13px 16px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius); text-align: left;
  transition: border-color var(--ease), transform var(--ease), background var(--ease);
}
.starter:hover { border-color: var(--teal); background: #fff; transform: translateY(-1px); }
.starter:active { transform: translateY(0); }
.starter .s-ic {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--teal);
  display: flex; align-items: center; justify-content: center;
}
.starter .s-ic svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 2; }
.starter .s-txt { min-width: 0; flex: 1; }
.starter .s-q { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.starter .s-d { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; margin-top: 2px; }
.starter .s-go { color: var(--link); flex-shrink: 0; display: flex; transition: transform var(--ease); }
.starter:hover .s-go { transform: translateX(2px); }
.starter .s-go svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; }

.reassure {
  margin: 26px auto 0; display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--ink-soft); font-weight: 500; flex-wrap: wrap; justify-content: center;
}
.grounded-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--teal); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.grounded-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ════════════ CONVERSATION TURNS ════════════ */
.turn { margin-bottom: 28px; }
.turn:last-child { margin-bottom: 8px; }

.q-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 8px;
}
.q-label .who {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0;
}
.q-text { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.45; letter-spacing: -.005em; }

.a-block {
  margin-top: 18px; position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 18px 6px;
}
.a-block::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--gold), #d6a83f 60%, transparent);
}
.a-label {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12px; font-weight: 800; letter-spacing: .03em;
  color: var(--teal); margin-bottom: 11px;
}
.a-label .who {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: var(--teal);
  display: inline-flex; align-items: center; justify-content: center;
}
.a-label .who svg { width: 15px; height: 15px; fill: var(--gold); }
.a-label .from-pill {
  margin-left: auto;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--surface-sunk);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px 9px;
}

.prose { font-size: 16px; color: var(--ink); line-height: 1.7; }
.prose p { margin: 0 0 13px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose ol, .prose ul { margin: 0 0 13px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose ol li::marker { font-weight: 800; color: var(--ink-soft); }
.prose .lead-step { font-weight: 700; color: var(--ink); }
.prose h1, .prose h2, .prose h3 { font-weight: 700; color: var(--ink); margin: 16px 0 8px; line-height: 1.3; }
.prose h1 { font-size: 20px; } .prose h2 { font-size: 17px; } .prose h3 { font-size: 15px; }
.prose a { color: var(--link); font-weight: 600; }
.prose a:hover { color: var(--link-hover); }
.prose code { font-family: monospace; font-size: 13px; background: var(--surface-sunk); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line); }
.prose blockquote { margin: 0 0 13px; padding: 8px 14px; border-left: 3px solid var(--line-strong); background: var(--surface-sunk); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-soft); }
.prose table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin: 0 0 13px; font-size: 14px; }
.prose th { background: var(--teal); color: #fff; font-weight: 600; padding: 7px 10px; text-align: left; font-size: 12px; }
.prose td { padding: 7px 10px; border-bottom: 1px solid var(--line); }

/* inline citation chip */
.cite {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline;
  font-size: 13px; font-weight: 700; color: var(--link);
  background: var(--surface-sunk); border: 1.5px solid var(--line);
  border-radius: var(--radius-pill); padding: 1px 9px 1px 6px; margin: 0 1px;
  line-height: 1.4; position: relative; white-space: nowrap;
  transition: background var(--ease), border-color var(--ease);
}
.cite:hover, .cite[aria-expanded="true"] { background: var(--link-wash); border-color: var(--link); }
.cite .num {
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--teal); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; flex-shrink: 0;
}
.cite .preview {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(5px);
  width: 290px; max-width: 78vw;
  background: var(--teal); color: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 13px 15px; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--ease), transform var(--ease);
  z-index: 30; white-space: normal;
}
.cite:hover .preview, .cite:focus-visible .preview, .cite[aria-expanded="true"] .preview {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.cite .preview::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--teal);
}
.preview-src  { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; display: block; }
.preview-snip { font-size: 13px; font-weight: 500; color: #eef3f3; line-height: 1.5; display: block; }
.preview-open { font-size: 11px; font-weight: 700; color: var(--gold); margin-top: 9px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.preview-open svg { width: 12px; height: 12px; stroke: var(--gold); fill: none; stroke-width: 2.4; }

.cite { max-width: 100%; }
.cite-label {
  max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700;
}
.cite-go { display: inline-flex; flex-shrink: 0; margin-left: 1px; }
.cite-go svg { width: 12px; height: 12px; stroke: var(--link); fill: none; stroke-width: 2.4; }
.cite:hover .cite-go svg, .cite[aria-expanded="true"] .cite-go svg { stroke: var(--link-hover); }
@media (max-width: 380px) { .cite-label { max-width: 120px; } }

.kb-fallback-note { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 9px 13px; border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 600; border: 1px solid var(--line); }

.a-tools {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft);
}
.tool-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); min-width: var(--tap); padding: 7px 12px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink-soft); font-size: 12.5px; font-weight: 700;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.tool-btn:hover { border-color: var(--link); color: var(--link); }
.tool-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.tool-btn[aria-pressed="true"] { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.tool-btn[aria-pressed="true"] svg { fill: var(--good); stroke: var(--good); }
.tool-btn.copied { background: var(--teal); border-color: var(--teal); color: #fff; }
.tool-btn.copied svg { stroke: #fff; }
.tool-spacer { flex: 1; }
.tool-hint { font-size: 11.5px; color: var(--ink-faint); font-weight: 600; letter-spacing: .02em; }
.tool-fb-msg { font-size: 12px; font-weight: 600; color: var(--link); padding: 0 6px; }

.sources { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sources-head {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); padding: 9px 14px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface-sunk);
}
.source-row {
  display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: var(--tap); padding: 10px 14px;
  border: none; background: var(--surface); text-align: left;
  border-bottom: 1px solid var(--line-soft); transition: background var(--ease);
}
.source-row:last-child { border-bottom: none; }
.source-row:hover { background: var(--surface-sunk); }
.source-num {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.source-meta { min-width: 0; flex: 1; }
.source-dept { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--link); }
.source-title { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source-go { color: var(--link); display: flex; flex-shrink: 0; }
.source-go svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* ════════════ SEARCHING / LOADING ════════════ */
.searching { display: flex; align-items: center; gap: 13px; font-size: 15px; color: var(--ink); font-weight: 700; }
.scan {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--teal); display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.scan svg { width: 20px; height: 20px; fill: var(--gold); position: relative; z-index: 2; }
.scan::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(226,188,92,.5), transparent);
  height: 60%; animation: scanline 1.4s ease-in-out infinite;
}
@keyframes scanline { 0% { transform: translateY(-120%); } 100% { transform: translateY(220%); } }
.dots { display: inline-flex; gap: 4px; margin-left: 2px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--link); display: inline-block; animation: bob 1.1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .16s; }
.dots i:nth-child(3) { animation-delay: .32s; }
@keyframes bob { 0%,80%,100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

.found {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--surface-sunk); border: 1px solid var(--line);
  padding: 7px 12px; border-radius: var(--radius-pill);
}
.found svg { width: 14px; height: 14px; stroke: var(--link); fill: none; stroke-width: 2.4; }

.skeleton { margin-top: 16px; }
.sk-line { height: 13px; border-radius: 6px; margin-bottom: 11px;
  background: linear-gradient(90deg, var(--surface-sunk) 25%, #f1ece1 50%, var(--surface-sunk) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.sk-line.w70 { width: 70%; } .sk-line.w90 { width: 90%; } .sk-line.w50 { width: 50%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ════════════ NO-ANSWER ════════════ */
.no-answer {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 5px solid var(--warn); border-radius: var(--radius);
  padding: 18px 18px 16px;
}
.na-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.na-ico {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--warn-bg); display: flex; align-items: center; justify-content: center;
}
.na-ico svg { width: 21px; height: 21px; stroke: var(--warn); fill: none; stroke-width: 2.2; }
.na-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.no-answer p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 14px; font-weight: 500; }
.no-answer p strong { color: var(--ink); font-weight: 700; }
/* The decline text is rendered markdown (see _renderNoAnswer), so it can be a list as well as
   paragraphs. <p> is already styled above; these match lists to it. The wrapper owns the gap
   before .na-actions and the last child drops its own, so spacing is unchanged from when this
   was a single <p>. */
.na-body { margin-bottom: 14px; }
.na-body > :last-child { margin-bottom: 0; }
.na-body ul, .na-body ol { margin: 0 0 14px 20px; }
.na-body li { font-size: 15px; color: var(--ink-soft); line-height: 1.6; font-weight: 500; margin-bottom: 4px; }
.na-body li strong { color: var(--ink); font-weight: 700; }
.na-actions { display: flex; flex-direction: column; gap: 9px; }
.na-act {
  display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: var(--tap); padding: 11px 14px;
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; color: var(--link); text-align: left;
  transition: border-color var(--ease), background var(--ease);
}
.na-act:hover { border-color: var(--link); background: var(--link-wash); }
.na-act svg { width: 19px; height: 19px; stroke: var(--link); fill: none; stroke-width: 2.2; flex-shrink: 0; }

/* ════════════ COMPOSER ════════════ */
.dock {
  position: fixed; left: 0; right: 0; bottom: var(--bar-h); z-index: 30;
  background: linear-gradient(to top, var(--canvas) 62%, rgba(250,249,246,0));
  padding: 10px 16px 12px;
}
.dock-inner { max-width: var(--read-col); margin: 0 auto; }


.followups {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 0 10px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.followups::-webkit-scrollbar { display: none; }
.fup {
  flex: 0 0 auto; min-height: var(--tap);
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700; color: var(--link); white-space: nowrap;
  transition: border-color var(--ease), background var(--ease);
}
.fup:hover { border-color: var(--teal); background: var(--link-wash); }
.fup .fdot { width: 7px; height: 7px; border-radius: 50%; background: var(--link); flex-shrink: 0; }

.composer {
  display: flex; align-items: flex-end; gap: 9px;
  background: var(--surface); border: 2px solid var(--line-strong);
  border-radius: var(--radius); padding: 7px 7px 7px 16px;
  box-shadow: var(--shadow-lg);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.composer:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,39,45,.10), var(--shadow-lg); }
.composer textarea {
  flex: 1; min-width: 0; border: none; outline: none; resize: none;
  font-family: var(--font); font-size: 16px; line-height: 1.45;
  color: var(--ink); background: transparent; padding: 9px 0; max-height: 130px;
}
.composer textarea::placeholder { color: var(--ink-faint); font-weight: 500; }
.send {
  width: 46px; height: 46px; flex-shrink: 0;
  border: none; border-radius: 11px; background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ease), transform var(--ease);
}
.send:hover { background: var(--teal-2); }
.send:active { transform: scale(.95); }
.send svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 2.3; }
.grounded-note {
  margin-top: 8px; text-align: center;
  font-size: 11.5px; color: var(--ink-faint); font-weight: 600; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.grounded-note svg { width: 13px; height: 13px; stroke: var(--link); fill: none; stroke-width: 2.2; }
.grounded-note b { color: var(--ink-soft); font-weight: 700; }

/* ───────── MOBILE BOTTOM ACTION BAR ───────── */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: flex; background: var(--teal);
  border-top: 1px solid var(--teal-line); box-shadow: 0 -6px 18px rgba(0,0,0,.14);
}
.ab-btn {
  flex: 1; min-height: var(--bar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: none; background: transparent; color: var(--gold);
  padding: 7px 4px calc(7px + env(safe-area-inset-bottom)); position: relative;
}
.ab-btn svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 2; }
.ab-btn span { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--on-teal); }
.ab-btn[aria-current="true"] span { color: #fff; }
.ab-btn[aria-current="true"]::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 34px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold);
}

/* ───────── SLIDE-OVER DRAWER ───────── */
.scrim {
  position: fixed; inset: 0; z-index: 55; background: rgba(13,28,30,.5);
  opacity: 0; visibility: hidden; transition: opacity var(--ease);
}
.scrim.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
  width: min(330px, 86vw);
  background: var(--sidebar-bg); color: #fff;
  transform: translateX(-100%); transition: transform .24s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 14px 12px; border-bottom: 1px solid var(--teal-line);
}
.drawer-head .dh-text { flex: 1; min-width: 0; }
.drawer-head .dh-name { font-size: 15px; font-weight: 800; color: #fff; }
.drawer-head .dh-sub { font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.drawer-scroll { flex: 1; overflow-y: auto; padding: 14px 0 16px; }

/* ════════════ DESKTOP ≥900px ════════════ */
@media (min-width: 900px) {
  body { font-size: 15px; }
  .app { flex-direction: row; }
  .topbar { display: none; }
  .actionbar { display: none; }
  .scrim, .drawer { display: none; }

  .sidebar {
    display: flex; flex-direction: column;
    width: var(--sidebar-w); flex-shrink: 0;
    background: var(--sidebar-bg); color: var(--on-teal);
    height: 100dvh; position: sticky; top: 0; overflow-y: auto;
  }
  .sidebar .brand-row { display: flex; align-items: center; gap: 8px; padding: 18px 14px 14px; }
  .sidebar .brand-link { flex: 1; }

  /* Collapse toggle. The rail keeps navigation reachable rather than hiding it
     entirely — a 56px strip of icons beats a button that reveals a whole panel. */
  .rail-toggle {
    width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
    border-radius: 8px; color: var(--on-teal); cursor: pointer;
    transition: background var(--ease), color var(--ease), transform var(--ease);
  }
  .rail-toggle:hover { background: rgba(255,255,255,.14); color: #fff; }
  .rail-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }

  /* --sidebar-w drives BOTH the sidebar width and the composer dock's left offset,
     so overriding the variable on the collapsed state moves both in one stroke. */
  .app.rail { --sidebar-w: 62px; }
  .app.rail .sidebar { overflow: visible; }
  .app.rail .brand-row { flex-direction: column; gap: 10px; padding: 16px 0 12px; }
  .app.rail .brand-text,
  .app.rail .nav-search,
  .app.rail .nav-label,
  .app.rail .conv-empty,
  .app.rail #kbNavTree,
  .app.rail #convGroup,
  /* Section headers and their bodies have no room in a 62px rail. Listed explicitly
     rather than relying on the ids above, so a new section is hidden automatically. */
  .app.rail .nav-sec,
  .app.rail .nav-sec-body,
  .app.rail .btn-label,
  .app.rail .foot-user { display: none; }
  .app.rail .rail-toggle svg { transform: rotate(180deg); }
  .app.rail .ask-ai {
    width: 38px; margin: 0 auto 8px; padding: 0; justify-content: center; gap: 0;
  }
  .app.rail .nav-group { padding: 0; }
  .app.rail .sidebar-foot { padding: 10px 0; }
  .app.rail .foot-links { flex-direction: column; gap: 6px; align-items: center; }
  .app.rail .foot-link { width: 38px; justify-content: center; padding: 0; height: 34px; }
  .app.rail .foot-link svg { margin: 0; }
  .sidebar .brand-name { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.1; }
  .sidebar .brand-sub  { font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-top: 2px; }
  .sidebar .nav-search { margin-top: 4px; }

  .stage { height: 100dvh; }
  .thread-wrap { padding-bottom: 150px; }
  .thread, .welcome { padding-left: 28px; padding-right: 28px; }
  .dock { left: var(--sidebar-w); bottom: 0; padding: 14px 28px 18px; }
  .welcome h1 { font-size: 30px; }
  .q-text { font-size: 18px; }
  .prose { font-size: 15px; }
}

@media (max-width: 380px) {
  .welcome h1 { font-size: 23px; }
  .q-text { font-size: 16px; }
  .cite .preview { width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .scan::after { display: none; }
  .dots i { opacity: .7; }
}

/* ════════════════════════════════════════════════════════════════
   AUTH GATE — pre-login (full-screen teal cover)
   ════════════════════════════════════════════════════════════════ */
#authGate { position: fixed; inset: 0; z-index: 2000; background: #00272D; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-gate { background: #fff; width: 400px; max-width: 100%; border-radius: 12px; padding: 48px 40px; box-shadow: 0 4px 24px rgba(0,0,0,.2); text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.auth-gate-img { width: 56px; height: 56px; object-fit: contain; border-radius: 4px; margin: 0 auto 16px; display: block; }
.auth-gate-title { font-size: 20px; font-weight: 800; color: #00272D; letter-spacing: .5px; text-transform: uppercase; }
.auth-gate-sub { font-size: 11px; font-weight: 600; color: #006271; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
.auth-gate-org { font-size: 12px; font-weight: 400; color: #666; margin-top: 4px; margin-bottom: 32px; }
.auth-gbtn { display: flex; justify-content: center; margin-bottom: 16px; min-height: 40px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.auth-divider-line { flex: 1; height: 1px; background: #CCE4E8; }
.auth-divider-text { font-size: 11px; font-weight: 500; color: #999; }
.asana-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 280px; max-width: 100%; height: 40px; margin: 0 auto; border: 1px solid #dadce0; border-radius: 4px; background: #fff; font-family: 'Google Sans', Roboto, Arial, sans-serif; font-size: 14px; font-weight: 500; color: #3c4043; cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.asana-btn:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.asana-logo { width: 18px; height: 18px; }
.auth-error { margin-top: 16px; padding: 10px 14px; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 6px; color: #DC2626; font-size: 12px; line-height: 1.4; }
.auth-note { margin-top: 32px; font-size: 10px; font-weight: 400; color: #999; }

/* ════════════ TOAST ════════════ */
.toast { position: fixed; bottom: 76px; right: 20px; z-index: 999; background: var(--table-header); color: white; padding: 9px 16px; border-radius: var(--radius-md); font-size: 12px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none; border-left: 3px solid var(--gold); }
.toast.show { opacity: 1; transform: translateY(0); }
@media (min-width: 900px) { .toast { bottom: 20px; } }

/* ════════════════════════════════════════════════════════════════
   TOOLS VIEW (demoted admin + drive/documents) — reachable via the
   sidebar/drawer footer. Scrolls inside .stage; chat dock hidden when shown.
   ════════════════════════════════════════════════════════════════ */
#toolsView { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 20px 16px calc(var(--bar-h) + 24px); }
@media (min-width: 900px) { #toolsView { padding: 28px 28px 40px; } }
#toolsView.show { display: block; }
.tools-back {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--link);
  padding: 0 0 16px; letter-spacing: .01em;
}
.tools-back svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:.4; } 50% { opacity:1; } }

/* ── shared legacy widgets used inside #toolsView + modals ── */
.page-header { margin-bottom: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-header h1 { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.page-header p { font-size: 12px; color: var(--text-secondary); margin-top: 3px; font-weight: 500; }
.page-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.tab-item { padding: 10px 18px; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--transition); letter-spacing: .02em; }
.tab-item:hover { color: var(--ink); }
.tab-item.active { color: var(--ink); border-bottom-color: var(--link); }

.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }
.section-action { font-size: 11px; font-weight: 600; color: var(--link); background: none; border: none; cursor: pointer; font-family: var(--font); transition: var(--transition); padding: 3px 8px; border-radius: var(--radius-sm); }
.section-action:hover { background: var(--link-wash); }

.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 24px; }
.qa-card { background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 13px; cursor: pointer; transition: var(--transition); display: flex; flex-direction: column; gap: 5px; position: relative; }
.qa-card:hover { border-color: var(--gold); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.qa-card-emoji { font-size: 19px; }
.qa-card-title { font-size: 12px; font-weight: 700; color: var(--text-primary); letter-spacing: .01em; }
.qa-card-desc { font-size: 10px; color: var(--text-secondary); line-height: 1.4; font-weight: 500; }
.qa-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 99px; align-self: flex-start; margin-top: 3px; letter-spacing: .04em; text-transform: uppercase; }
.qa-badge.ext { background: var(--green-light); color: #166534; }
.qa-badge.int { background: var(--teal-light); color: var(--teal); }
.qa-badge.tool { background: var(--gold-light); color: #92670a; }
.qa-edit-btn { position: absolute; top: 7px; right: 7px; background: none; border: none; cursor: pointer; opacity: 0; transition: var(--transition); font-size: 12px; padding: 2px 4px; border-radius: 3px; line-height: 1; }
.qa-card:hover .qa-edit-btn { opacity: 0.4; }
.qa-edit-btn:hover { opacity: 1 !important; background: var(--gold-light); }
.qa-add-card { background: transparent; border: 1.5px dashed var(--border); border-radius: var(--radius-md); padding: 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--text-muted); font-size: 11px; font-weight: 600; transition: var(--transition); min-height: 95px; }
.qa-add-card:hover { border-color: var(--link); color: var(--link); background: var(--link-wash); }

.panel { background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.panel-header { padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.panel-title { font-size: 12px; font-weight: 700; color: var(--text-primary); letter-spacing: .02em; }
.panel-body { padding: 16px 20px; }

.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-chip { padding: 4px 11px; border-radius: 99px; font-size: 10px; font-weight: 700; cursor: pointer; border: 1px solid var(--border); background: var(--panel-bg); color: var(--text-secondary); transition: var(--transition); letter-spacing: .03em; text-transform: uppercase; }
.filter-chip:hover { border-color: var(--gold); color: var(--text-primary); }
.filter-chip.active { background: var(--gold); color: var(--table-header); border-color: var(--gold); }
.view-toggle { margin-left: auto; display: flex; gap: 2px; }
.vbtn { padding: 4px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff; cursor: pointer; color: var(--text-secondary); font-size: 14px; transition: var(--transition); }
.vbtn.active { background: var(--table-header); color: white; border-color: var(--table-header); }

.ng-table { width: 100%; border-collapse: collapse; font-family: var(--font); }
.ng-table thead tr { background: var(--table-header); }
.ng-table thead th { padding: 10px 16px; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #ffffff; white-space: nowrap; }
.ng-table tbody tr { border-bottom: 1px solid var(--border); transition: var(--transition); }
.ng-table tbody tr:last-child { border-bottom: none; }
.ng-table tbody tr:hover { background: #f9fafb; }
.ng-table tbody td { padding: 10px 16px; font-size: 12px; color: var(--text-primary); font-weight: 500; vertical-align: middle; }
.ng-table tbody td.muted { color: var(--text-secondary); }

.btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--font); transition: var(--transition); letter-spacing: .03em; border: 1px solid; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--table-header); }
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.btn-outline { background: #fff; border-color: var(--border); color: var(--text-primary); }
.btn-outline:hover { border-color: var(--teal); color: var(--teal); }
.btn-outline-teal { background: #fff; border-color: var(--teal); color: var(--teal); }
.btn-outline-teal:hover { background: var(--teal); color: #fff; }
.btn-outline-red { background: #fff; border-color: var(--red); color: var(--red); }
.btn-outline-red:hover { background: var(--red); color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 10px; }

.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.badge-yes { background: var(--green-light); color: #166534; }
.badge-no  { background: var(--red-light);   color: #991b1b; }
.badge-teal { background: var(--teal-light); color: var(--teal); }

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.doc-card { background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; }
.doc-card:hover { border-color: var(--gold); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.doc-card.expanded { grid-column: 1 / -1; transform: none; }
.doc-card-header { padding: 13px 14px 9px; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.doc-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.doc-icon.pdf { background: #fee2e2; } .doc-icon.doc { background: #dbeafe; }
.doc-icon.xls { background: #dcfce7; } .doc-icon.ppt { background: #fef3c7; }
.doc-icon.other { background: var(--teal-light); }
.doc-meta { flex: 1; min-width: 0; }
.doc-name { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-info { font-size: 10px; color: var(--text-muted); margin-top: 2px; font-weight: 500; }
.doc-type-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
.doc-type-badge.pdf { background: #fee2e2; color: #dc2626; } .doc-type-badge.doc { background: #dbeafe; color: #1d4ed8; }
.doc-type-badge.xls { background: #dcfce7; color: #16a34a; } .doc-type-badge.ppt { background: #fef3c7; color: #d97706; }
.doc-type-badge.other { background: var(--teal-light); color: var(--teal); }
.doc-card-footer { padding: 8px 14px 11px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 6px; margin-top: auto; }
.doc-list { display: flex; flex-direction: column; gap: 1px; }
.doc-list-row { background: var(--panel-bg); border-bottom: 1px solid var(--border); padding: 9px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: var(--transition); }
.doc-list-row:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.doc-list-row:last-child { border-bottom: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.doc-list-row:hover { background: #f9fafb; }
.doc-list-row .doc-icon { width: 26px; height: 26px; font-size: 13px; }
.doc-list-row .doc-name { font-size: 12px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-list-row .doc-dept { font-size: 10px; color: var(--text-muted); min-width: 90px; font-weight: 500; }
.doc-list-row .doc-date { font-size: 10px; color: var(--text-muted); min-width: 85px; text-align: right; font-weight: 500; }
.doc-list-row .list-actions { display: flex; gap: 5px; margin-left: 8px; }
.preview-open-link { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: var(--radius-sm); background: var(--teal); color: white; text-decoration: none; font-size: 11px; font-weight: 700; transition: var(--transition); }
.preview-open-link:hover { background: #004a56; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .18s; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal { background: white; border-radius: var(--radius-lg); padding: 24px; max-width: 500px; width: 92%; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); transform: translateY(8px); transition: transform .18s; }
.modal-overlay.open .modal { transform: translateY(0); }
.modal-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.modal h2 { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.modal-sub { font-size: 12px; color: var(--text-secondary); margin-bottom: 16px; font-weight: 500; }
.mlabel { font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: 4px; }
.minput { width: 100%; padding: 8px 11px; border-radius: var(--radius-md); border: 1px solid var(--border); font-family: var(--font); font-size: 12px; outline: none; transition: var(--transition); margin-bottom: 10px; font-weight: 500; }
.minput:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(226,188,92,.15); }
.mrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.modal-actions { display: flex; gap: 7px; justify-content: flex-end; margin-top: 16px; }
.drive-folder-row { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: 6px; cursor: pointer; transition: var(--transition); font-size: 12px; font-weight: 500; }
.drive-folder-row:hover { border-color: var(--gold); background: var(--gold-light); }
.drive-folder-row.selected { border-color: var(--gold); background: var(--gold-light); }
.drive-folder-row .check { color: var(--teal); margin-left: auto; font-weight: 700; }
/* Quick-Link icon-image upload field (modal) */
.qa-img-field { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.qa-img-preview { width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; padding: 6px; }
.qa-img-preview svg { width: 22px; height: 22px; stroke: var(--text-muted); fill: none; stroke-width: 2; }
.qa-img-preview.has-img { padding: 5px; }
.qa-img-preview img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; display: block; }
.qa-img-ctrls { min-width: 0; }
.qa-img-btns { display: flex; gap: 6px; }
.qa-img-hint { font-size: 10.5px; color: var(--text-muted); margin-top: 6px; font-weight: 500; }
.badge-row { display: flex; gap: 6px; margin-bottom: 10px; }
.badge-opt { padding: 4px 11px; border-radius: 99px; font-size: 10px; font-weight: 700; cursor: pointer; border: 2px solid transparent; transition: var(--transition); text-transform: uppercase; letter-spacing: .04em; }
.badge-opt.ext { background: var(--green-light); color: #166534; }
.badge-opt.int { background: var(--teal-light); color: var(--teal); }
.badge-opt.tool { background: var(--gold-light); color: #92670a; }
.badge-opt.selected { border-color: var(--table-header); }
.guide-step { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.guide-step:last-child { border-bottom: none; }
.guide-num { width: 24px; height: 24px; border-radius: 50%; background: var(--table-header); color: white; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.guide-body h4 { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.guide-body p { font-size: 11px; color: var(--text-secondary); line-height: 1.6; font-weight: 500; }
.guide-body a { color: var(--teal); font-weight: 600; }
.guide-body code { background: var(--page-bg); padding: 1px 5px; border-radius: 3px; font-family: monospace; font-size: 11px; color: var(--text-primary); }
.code-snippet { display: flex; align-items: center; gap: 8px; background: var(--page-bg); border-radius: 5px; padding: 7px 10px; margin-top: 6px; font-family: monospace; font-size: 11px; color: var(--text-primary); word-break: break-all; border: 1px solid var(--border); }
.copy-btn { padding: 3px 9px; border-radius: 3px; background: var(--table-header); color: white; border: none; font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; font-family: var(--font); letter-spacing: .03em; }

.empty-state { text-align: center; padding: 50px 20px; color: var(--text-muted); }
.empty-state .icon { font-size: 40px; margin-bottom: 12px; }
.empty-state h3 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; }
.empty-state p { font-size: 11px; max-width: 300px; margin: 0 auto 14px; font-weight: 500; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; }
.loading-row { display: flex; align-items: center; gap: 9px; padding: 14px; color: var(--text-muted); font-size: 12px; font-weight: 500; }
.admin-subtab { padding:9px 16px; font-size:12px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; color:var(--text-secondary); transition:var(--transition); letter-spacing:.02em; }
.admin-subtab:hover { color:var(--ink); }
.admin-subtab.active { color:var(--link); border-bottom-color:var(--link); }

/* KB doc reader prose (used by openKbDoc → #kbContent) */
.kb-prose { font-size: 14px; color: var(--text-primary); line-height: 1.75; }
.kb-prose h1 { font-size: 24px; font-weight: 800; color: var(--text-primary); margin: 0 0 6px; letter-spacing: -.01em; }
.kb-prose h2 { font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 28px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.kb-prose h3 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 20px 0 6px; }
.kb-prose p  { margin: 0 0 12px; }
.kb-prose ul, .kb-prose ol { margin: 0 0 12px 20px; padding: 0; }
.kb-prose li { margin-bottom: 4px; }
.kb-prose blockquote { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--gold); background: var(--page-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-secondary); font-style: italic; }
.kb-prose code { font-family: monospace; font-size: 12px; background: var(--page-bg); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border); }
.kb-prose pre  { background: var(--page-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; overflow-x: auto; margin: 0 0 12px; }
.kb-prose pre code { background: none; border: none; padding: 0; }
.kb-prose table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 12px; }
.kb-prose th { background: var(--table-header); color: white; font-weight: 600; padding: 7px 10px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.kb-prose td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.kb-prose tr:last-child td { border-bottom: none; }
.kb-prose tr:nth-child(even) td { background: var(--page-bg); }
.kb-prose a  { color: var(--teal); text-decoration: none; font-weight: 600; }
.kb-prose a:hover { text-decoration: underline; }
.kb-prose img { max-width: 100%; border-radius: var(--radius-sm); margin: 8px 0; }
.kb-prose hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* bucketed KB doc list (used by renderKbDocList inside #toolsView) */
.kb-bucket { margin-bottom: 28px; }
.kb-bucket-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); padding: 0 2px 10px; }
.kb-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kb-guide { display: flex; align-items: flex-start; gap: 13px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; cursor: pointer; text-align: left; width: 100%; font-family: var(--font); transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
.kb-guide:hover { border-color: var(--teal); box-shadow: var(--shadow); transform: translateY(-1px); }
.kb-guide .g-ic { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; background: var(--teal); display: flex; align-items: center; justify-content: center; }
.kb-guide .g-ic svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 2; }
.kb-guide .g-meta { min-width: 0; flex: 1; }
.kb-guide .g-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 3px; }
.kb-guide .g-sub { font-size: 11px; color: var(--ink-faint); font-weight: 500; }
.kb-guide .g-desc { font-size: 12px; color: var(--ink-soft); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Department chips inside the tools view (rendered by renderFolderSidebar as .nav-item) */
#sidebarFolders .nav-item {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: #fff; color: var(--link); cursor: pointer;
  font-weight: 700; transition: var(--transition);
}
#sidebarFolders .nav-item:hover { border-color: var(--teal); background: var(--link-wash); }
#sidebarFolders .nav-item svg { stroke: var(--link); }

@media (max-width: 899px) { .mrow { grid-template-columns: 1fr; } .kb-guide-grid { grid-template-columns: 1fr; } }

/* v9 doc-embed: citation chips + source rows are now <a> links (one-click open) — no underline */
.cite, .source-row { text-decoration: none; }
.cite:hover, .source-row:hover { text-decoration: none; }

/* v9 native in-app reader — rendered doc + section TOC */
.dv-body { flex: 1; display: flex; min-height: 0; overflow: hidden; position: relative; }
.dv-toc { width: 240px; flex-shrink: 0; overflow-y: auto; background: var(--surface-sunk); border-right: 1px solid var(--line); padding: 14px 8px; }
.dv-toc-link { display: block; padding: 5px 10px; border-radius: 6px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.35; cursor: pointer; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-toc-link:hover, .dv-toc-link.active { background: var(--link-wash); color: var(--link); }
.dv-toc-link.active { font-weight: 700; }
.dv-toc-h2 { padding-left: 22px; } .dv-toc-h3 { padding-left: 34px; font-size: 12px; }
.dv-content { flex: 1; overflow-y: auto; padding: 30px clamp(16px,5vw,72px) 80px; }
.dv-loading { color: var(--ink-faint); padding: 40px 8px; font-size: 14px; }
.dv-content img.doc-img { max-width: 100%; height: auto; border-radius: 6px; margin: 12px 0; display: block; }
.dv-content h1 { font-size: 26px; } .dv-content h2 { font-size: 20px; } .dv-content h3 { font-size: 16px; }
.dv-content h1, .dv-content h2, .dv-content h3 { color: var(--ink); margin: 24px 0 8px; line-height: 1.25; scroll-margin-top: 14px; }
.dv-content p { margin: 0 0 12px; line-height: 1.7; }
.dv-content a { color: var(--link); }
.dv-content ul, .dv-content ol { margin: 0 0 12px 22px; }
.dv-content li { margin: 3px 0; line-height: 1.6; }
.doc-table-wrap { overflow-x: auto; margin: 14px 0; }
.doc-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.doc-table td { border: 1px solid var(--line); padding: 6px 9px; vertical-align: top; }
@media (max-width: 900px) { .dv-toc { display: none; } .dv-content { padding: 18px 16px 80px; } }

/* ════════════════════════════════════════════════════════════════════════════
   FILES PAGE — Stripe-enterprise redesign (Phase 1)
   SCOPED to .fadm so it never touches the chat home or the (old) Admin panel.
   Brand: teal #00272d / #006271 · gold #e2bc5c (FILL/CHROME ONLY) · white.
   AA: gold is never text on white; links use --link (#00474f ~7:1).
   Vars are declared on .fadm (NOT :root) so existing global vars are untouched.
   ════════════════════════════════════════════════════════════════════════════ */
.fadm{
  --teal:#00272d; --teal-2:#006271; --teal-active:#02464f;
  --ink:#373530; --ink-faint:#6b6760; --ink-muted:#6f6a61; /* AA: 5.37:1 on white (was #8d8980 = 3.49:1, failed) */
  --link:#00474f; --link-hover:#00272d;
  --gold:#e2bc5c; --gold-dark:#caa544;
  --surface:#ffffff; --surface-2:#f6f5f1;
  --border:#e7e4dd; --border-strong:#d8d4cb;
  --amber-fill:#fbf3df; --amber-ink:#8a6516;
  --green:#1f7a5a; --green-fill:#e7f3ee;
  --red:#b4452f; --red-fill:#fbeae6;
  --radius:10px; --radius-lg:14px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(20,30,33,.05);
  --shadow-sm:0 1px 3px rgba(20,30,33,.06),0 1px 2px rgba(20,30,33,.04);
  --shadow-md:0 4px 14px rgba(20,30,33,.07),0 1px 3px rgba(20,30,33,.05);
  --t:.16s ease;
  color:var(--ink);
}
.fadm *{box-sizing:border-box;}

/* ── Page header ── */
.fadm .phead{display:flex;align-items:flex-start;gap:20px;margin-bottom:26px;flex-wrap:wrap;}
.fadm .phead .ico{width:46px;height:46px;border-radius:13px;
  background:linear-gradient(160deg,var(--link),var(--teal-2));border:none;
  display:grid;place-items:center;flex-shrink:0;box-shadow:0 4px 12px rgba(0,71,79,.22);}
.fadm .phead .ico svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:2;}
.fadm .phead h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.025em;color:var(--ink);line-height:1.08;}
.fadm .phead p{margin:5px 0 0;font-size:13px;color:var(--ink-faint);font-weight:500;}
.fadm .phead-actions{margin-left:auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap;}

/* ── Buttons (scoped) ── */
.fadm .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:8px;font-size:12.5px;font-weight:700;letter-spacing:.01em;border:1px solid transparent;min-height:38px;white-space:nowrap;transition:var(--t);font-family:inherit;cursor:pointer;}
.fadm .btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.1;}
.fadm .btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border-strong);box-shadow:var(--shadow-xs);}
.fadm .btn-ghost:hover{border-color:var(--teal-2);color:var(--link);}

/* ── Sections / cards ── */
.fadm .section{margin-bottom:30px;}
.fadm .section-head{display:flex;align-items:baseline;gap:12px;margin-bottom:13px;flex-wrap:wrap;}
.fadm .section-head h2{margin:0;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);display:flex;align-items:center;gap:9px;}
.fadm .section-head h2::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--gold);flex-shrink:0;}
.fadm .section-head .hint{font-size:11.5px;color:var(--ink-muted);font-weight:500;}
.fadm .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.fadm .card-head{padding:15px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.fadm .card-head h3{margin:0;font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.fadm .card-head .sub{font-size:11.5px;color:var(--ink-muted);font-weight:500;}

/* ── Quick Access ──
   The most-clicked thing on the page, so it gets real presence: a teal-washed icon
   plate, a hairline that warms to teal on hover, a lift, and an arrow that slides.
   Still compact enough that seven links cost two rows and the guides stay above the
   fold — the v10 density lesson holds, this just makes the density look deliberate. */
.fadm .qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.fadm .qa-card{display:flex;flex-direction:row;align-items:center;gap:12px;
  background:linear-gradient(180deg,#fff 0%,var(--surface-2) 190%);
  border:1px solid var(--border);border-radius:12px;padding:13px 14px;
  box-shadow:var(--shadow-xs);transition:var(--t);min-width:0;text-align:left;color:inherit;
  position:relative;text-decoration:none;cursor:pointer;overflow:hidden;}
/* A teal edge that wipes in from the left on hover — reads as "this is a link out". */
.fadm .qa-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--teal-2);transform:scaleY(0);transform-origin:50% 50%;transition:transform var(--t);}
.fadm .qa-card:hover{border-color:var(--teal-2);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.fadm .qa-card:hover::before{transform:scaleY(1);}
.fadm .qa-card .qa-ico{width:38px;height:38px;border-radius:10px;
  background:linear-gradient(160deg,rgba(0,98,113,.13),rgba(0,98,113,.05));
  border:1px solid rgba(0,98,113,.16);
  display:grid;place-items:center;flex-shrink:0;transition:var(--t);}
.fadm .qa-card:hover .qa-ico{background:var(--link);border-color:var(--link);}
.fadm .qa-card .qa-ico svg{width:19px;height:19px;stroke:var(--teal-2);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:var(--t);}
.fadm .qa-card:hover .qa-ico svg{stroke:var(--gold);}
/* Uploaded logos: keep them on white so brand colors read true. */
.fadm .qa-card .qa-ico--img{background:#fff;padding:5px;overflow:hidden;position:relative;border-color:var(--border);}
.fadm .qa-card:hover .qa-ico--img{background:#fff;border-color:var(--teal-2);}
.fadm .qa-card .qa-ico--img img{width:100%;height:100%;object-fit:contain;object-position:center;border-radius:5px;display:block;}
.fadm .qa-card .qa-ico--img::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(20,30,33,.07), inset 0 1px 0 0 rgba(255,255,255,.7);}
.fadm .qa-card .qa-body{min-width:0;flex:1;}
.fadm .qa-card .qa-title{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.fadm .qa-card .qa-dept{font-size:11px;font-weight:500;color:var(--ink-muted);letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin-top:1px;}
.fadm .qa-card .qa-go{margin-left:auto;flex-shrink:0;display:flex;opacity:.45;transition:var(--t);}
.fadm .qa-card:hover .qa-go{opacity:1;transform:translate(2px,-2px);}
.fadm .qa-card .qa-go svg{width:14px;height:14px;stroke:var(--teal-2);fill:none;stroke-width:2.2;}
.fadm .qa-card .qa-edit-btn{position:absolute;top:5px;right:5px;border:none;background:rgba(255,255,255,.9);
  border-radius:5px;cursor:pointer;opacity:0;transition:var(--t);padding:3px;line-height:1;display:flex;z-index:1;}
.fadm .qa-card .qa-edit-btn svg{width:12px;height:12px;stroke:var(--ink-muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.fadm .qa-card:hover .qa-edit-btn{opacity:.75;}
.fadm .qa-card .qa-edit-btn:hover{opacity:1;}
.fadm .qa-card .qa-edit-btn:hover svg{stroke:var(--link);}
.fadm .qa-more{display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--border-strong);
  border-radius:12px;color:var(--ink-faint);font-size:12.5px;font-weight:700;background:none;min-height:66px;
  cursor:pointer;transition:var(--t);font-family:inherit;}
.fadm .qa-more:hover{border-color:var(--teal-2);color:var(--link);background:rgba(0,98,113,.03);}

/* ── Department filter row ── */
.fadm .dept-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.fadm .dept-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--radius-pill);font-size:12px;font-weight:700;color:var(--ink-faint);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-xs);transition:var(--t);min-height:36px;cursor:pointer;font-family:inherit;}
.fadm .dept-chip:hover{border-color:var(--border-strong);color:var(--ink);}
.fadm .dept-chip.active{background:var(--teal);color:#fff;border-color:var(--teal);}
.fadm .dept-chip .cnt{font-size:10px;font-weight:700;padding:1px 7px;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.fadm .dept-chip.active .cnt{background:rgba(255,255,255,.18);color:#fff;}

/* ── Documents filter row ── */
.fadm .docfilter{display:flex;align-items:center;gap:8px;padding:13px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.fadm .seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:3px;gap:2px;}
.fadm .seg button{border:none;background:none;padding:6px 12px;border-radius:6px;font-size:11.5px;font-weight:700;color:var(--ink-faint);letter-spacing:.02em;transition:var(--t);min-height:30px;cursor:pointer;font-family:inherit;}
.fadm .seg button:hover{color:var(--ink);}
.fadm .seg button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-xs);}
.fadm .seg-div{width:1px;height:22px;background:var(--border);margin:0 2px;}
.fadm .tfilter{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;}
.fadm .tchip{padding:6px 12px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ink-faint);background:var(--surface);border:1px solid var(--border);transition:var(--t);min-height:30px;cursor:pointer;font-family:inherit;}
.fadm .tchip:hover{border-color:var(--border-strong);color:var(--ink);}
.fadm .tchip.active{background:var(--teal);color:#fff;border-color:var(--teal);}
.fadm .docfilter .spacer{margin-left:auto;}
.fadm .vtoggle{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface);}
.fadm .vtoggle button{border:none;background:none;width:34px;height:32px;display:grid;place-items:center;color:var(--ink-muted);transition:var(--t);cursor:pointer;}
.fadm .vtoggle button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.fadm .vtoggle button:hover{color:var(--ink);}
.fadm .vtoggle button.active{background:var(--teal);color:#fff;}
.fadm .docstatus{padding:11px 20px 0;font-size:11.5px;color:var(--ink-muted);font-weight:600;font-variant-numeric:tabular-nums;}

/* ── Document grid / list ── */
.fadm .docs-body{padding:16px 20px 20px;}
.fadm .doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:13px;}
.fadm .doc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-xs);display:flex;flex-direction:column;transition:var(--t);min-width:0;overflow:hidden;}
.fadm .doc-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.fadm .doc-top{display:flex;align-items:flex-start;gap:11px;padding:14px 15px 10px;min-width:0;}
.fadm .ftype{width:36px;height:42px;border-radius:6px;display:grid;place-items:center;flex-shrink:0;position:relative;color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.04em;}
.fadm .ftype svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;position:absolute;top:6px;}
.fadm .ftype .tag{position:absolute;bottom:5px;}
.fadm .ft-pdf{background:#c0392b;} .fadm .ft-doc{background:#2a6fc9;}
.fadm .ft-xls{background:#1f8b4c;} .fadm .ft-ppt{background:#d68227;}
.fadm .ft-gde{background:var(--teal-2);}
.fadm .doc-meta{min-width:0;flex:1;}
.fadm .doc-name{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.fadm .doc-sub{font-size:10.5px;color:var(--ink-muted);font-weight:600;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.fadm .doc-foot{margin-top:auto;padding:9px 15px 11px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.fadm .doc-foot .open{font-size:11.5px;font-weight:700;color:var(--link);display:inline-flex;align-items:center;gap:5px;text-decoration:none;}
.fadm .doc-foot .open svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;}
.fadm .doc-foot .open.disabled{color:var(--ink-muted);opacity:.5;cursor:not-allowed;}
.fadm .doc-foot .modi{font-size:10px;color:var(--ink-muted);font-weight:600;margin-left:auto;font-variant-numeric:tabular-nums;}
.fadm .star{width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;flex-shrink:0;transition:var(--t);margin-left:auto;cursor:pointer;}
.fadm .star svg{width:15px;height:15px;stroke:var(--ink-muted);fill:none;stroke-width:1.8;transition:var(--t);}
.fadm .star:hover{border-color:var(--border-strong);}
.fadm .star.on{background:var(--amber-fill);border-color:#e6cf95;}
.fadm .star.on svg{stroke:var(--gold-dark);fill:var(--gold);}

/* list mode */
.fadm .doc-list{display:grid;grid-template-columns:1fr;gap:8px;}
.fadm .doc-list .doc-card{flex-direction:row;align-items:center;}
.fadm .doc-list .doc-top{flex:1;align-items:center;padding:11px 15px;}
.fadm .doc-list .doc-name{-webkit-line-clamp:1;}
.fadm .doc-list .doc-foot{margin:0;border-top:none;border-left:1px solid var(--border);padding:11px 15px;flex-shrink:0;}
.fadm .doc-list .doc-foot .modi{margin-left:0;min-width:96px;text-align:right;}
.fadm .doc-list .star{order:2;margin-left:0;}
@media(max-width:560px){.fadm .doc-list .doc-foot .modi{display:none;}}

/* ── Empty state ── */
.fadm .empty{text-align:center;padding:46px 24px;color:var(--ink-faint);}
.fadm .empty .e-ico{width:48px;height:48px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;margin:0 auto 14px;border:1px solid var(--border);}
.fadm .empty .e-ico svg{width:23px;height:23px;stroke:var(--ink-muted);fill:none;stroke-width:1.8;}
.fadm .empty h4{margin:0 0 6px;font-size:14px;font-weight:800;color:var(--ink);}
.fadm .empty p{margin:0 auto;max-width:380px;font-size:12.5px;line-height:1.6;}

/* ── Field Guides minilist ── */
.fadm .minilist{display:flex;flex-direction:column;}
.fadm .mini-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);min-width:0;text-decoration:none;color:inherit;}
.fadm .mini-row:last-child{border-bottom:none;}
.fadm .mini-row .mi{width:30px;height:30px;border-radius:7px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;flex-shrink:0;}
.fadm .mini-row .mi svg{width:15px;height:15px;stroke:var(--teal-2);fill:none;stroke-width:2;}
.fadm .mini-row .mi--img{background:#fff;padding:3px;overflow:hidden;}
.fadm .mini-row .mi--img img{width:100%;height:100%;object-fit:contain;border-radius:4px;display:block;}
.fadm .mini-row .mtxt{min-width:0;flex:1;}
.fadm .mini-row .mtxt .mn{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.fadm .mini-row .mtxt .md{font-size:10.5px;color:var(--ink-muted);font-weight:600;display:block;}
.fadm .mini-row .qa-go{margin-left:auto;flex-shrink:0;display:flex;}
.fadm .mini-row .qa-go svg{width:15px;height:15px;stroke:var(--ink-muted);fill:none;stroke-width:2;}
.fadm .mini-empty{padding:24px 12px;color:var(--ink-muted);font-size:12px;font-weight:500;}

/* ════════════════════════════════════════════════════════════════════════════
   ADMIN PAGE (Stripe-enterprise) — admin-only rules, all scoped to .fadm.
   Ported from the Files/Admin makeover council (archive: ~/.claude/councils/NorthgateKB/).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Extra button variants used by Admin (Files page only needed .btn-ghost) ── */
.fadm .btn-gold{background:var(--gold);color:var(--teal);border-color:var(--gold);box-shadow:var(--shadow-xs);}
.fadm .btn-gold:hover{background:var(--gold-dark);}
.fadm .btn-danger{background:var(--surface);color:var(--red);border-color:#e7c4ba;}
.fadm .btn-danger:hover{background:var(--red-fill);}
.fadm .btn-sm{padding:6px 11px;min-height:32px;font-size:11.5px;}
.fadm .btn-block{width:100%;}
.fadm .btn[disabled]{opacity:.55;cursor:default;}

/* ── Card padding + head/section right slots ── */
.fadm .card-pad{padding:20px 22px;}
.fadm .card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.fadm .section-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;}

/* ── Group tabs ── */
.fadm .grouptabs{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:4px;gap:3px;box-shadow:var(--shadow-xs);margin-bottom:26px;flex-wrap:wrap;}
.fadm .grouptab{display:inline-flex;align-items:center;gap:9px;border:none;background:none;padding:9px 16px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--ink-faint);transition:var(--t);min-height:38px;text-align:left;cursor:pointer;font-family:inherit;}
.fadm .grouptab svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.fadm .grouptab small{display:block;font-size:10px;font-weight:600;color:var(--ink-muted);letter-spacing:.01em;}
.fadm .grouptab:hover{color:var(--ink);}
.fadm .grouptab.active{background:var(--teal);color:#fff;}
.fadm .grouptab.active small{color:#a9c4c6;}
.fadm .adminview{display:none;}
.fadm .adminview.active{display:block;animation:fadmFade .2s ease;}
@keyframes fadmFade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ── KB metrics ── */
.fadm .metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px;}
.fadm .metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 17px;box-shadow:var(--shadow-xs);min-width:0;}
.fadm .metric .mv{font-size:26px;font-weight:800;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.fadm .metric .ml{font-size:11px;font-weight:700;color:var(--ink-faint);margin-top:6px;letter-spacing:.02em;}
.fadm .metric .ms{font-size:10.5px;color:var(--ink-muted);margin-top:2px;font-weight:500;}
.fadm .metric.accent{border-left:3px solid var(--teal-2);}
.fadm .metric .mv.good{color:var(--green);}

/* ── Status pills ── */
.fadm .pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
.fadm .pill .dot{width:7px;height:7px;border-radius:50%;}
.fadm .pill-run{background:var(--green-fill);color:var(--green);}
.fadm .pill-run .dot{background:var(--green);animation:fadmBlink 1.3s ease-in-out infinite;}
.fadm .pill-queue{background:var(--amber-fill);color:var(--amber-ink);}
.fadm .pill-queue .dot{background:var(--gold-dark);}
.fadm .pill-fail{background:var(--red-fill);color:var(--red);}
.fadm .pill-fail .dot{background:var(--red);}
.fadm .pill-ok{background:var(--green-fill);color:var(--green);}
.fadm .pill-ok .dot{background:var(--green);}
@keyframes fadmBlink{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ── Progress + ingest counts ── */
.fadm .progress{height:8px;border-radius:var(--radius-pill);background:var(--surface-2);overflow:hidden;border:1px solid var(--border);}
.fadm .progress > i{display:block;height:100%;background:var(--teal-2);border-radius:var(--radius-pill);transition:width .5s ease;}
.fadm .ingest-counts{display:flex;gap:18px;flex-wrap:wrap;margin-top:11px;}
.fadm .ingest-counts .c{font-size:12px;font-weight:600;color:var(--ink-faint);}
.fadm .ingest-counts .c b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.fadm .ingest-now{font-size:11.5px;color:var(--ink-faint);margin-top:9px;font-weight:500;}
.fadm .ingest-now b{color:var(--ink);font-weight:700;}

/* ── Stripe tables ── */
.fadm .tbl-wrap{overflow-x:auto;border-radius:var(--radius);}
.fadm table.tbl{width:100%;border-collapse:collapse;font-size:12px;}
.fadm table.tbl th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-muted);padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap;}
.fadm table.tbl td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--ink);vertical-align:middle;}
.fadm table.tbl tr:last-child td{border-bottom:none;}
.fadm table.tbl tr:hover td{background:var(--surface-2);}
.fadm table.tbl th.num,.fadm table.tbl td.num{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;}
.fadm .qcount{display:inline-block;min-width:30px;text-align:center;padding:2px 9px;border-radius:var(--radius-pill);background:var(--surface-2);font-size:11px;font-weight:800;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.fadm .qcount.hot{background:var(--red-fill);color:var(--red);}
.fadm .sev{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 9px;border-radius:var(--radius-pill);}
.fadm .sev-gap{background:var(--red-fill);color:var(--red);}
.fadm .sev-abst{background:var(--amber-fill);color:var(--amber-ink);}
.fadm .sev-down{background:var(--surface-2);color:var(--ink-faint);}

/* ── Access section (Domains + Folders merged) ── */
.fadm .access-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.fadm .lock{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted);background:var(--surface-2);border:1px solid var(--border);padding:2px 8px;border-radius:var(--radius-pill);}
.fadm .x-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;color:var(--ink-muted);flex-shrink:0;transition:var(--t);cursor:pointer;}
.fadm .x-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
.fadm .x-btn:hover{color:var(--red);border-color:#e7c4ba;background:var(--red-fill);}
.fadm .addrow{display:flex;gap:8px;margin-top:14px;}
.fadm .field{flex:1;min-width:0;border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:9px 12px;font:inherit;font-size:12.5px;color:var(--ink);}
.fadm .field::placeholder{color:var(--ink-muted);}
.fadm .field:focus{outline:none;border-color:var(--teal-2);box-shadow:0 0 0 3px rgba(0,98,113,.12);}
.fadm .scrollist{max-height:230px;overflow-y:auto;padding-right:4px;}

/* ── Nudge banner ── */
.fadm .banner{display:flex;align-items:center;gap:12px;background:var(--amber-fill);border:1px solid #e9d8a8;border-radius:10px;padding:12px 15px;margin:16px 20px 0;}
.fadm .banner svg{width:18px;height:18px;stroke:var(--amber-ink);fill:none;stroke-width:2;flex-shrink:0;}
.fadm .banner .bt{font-size:12px;font-weight:600;color:var(--amber-ink);min-width:0;}
.fadm .banner .bt b{font-weight:800;}
.fadm .banner .btn{margin-left:auto;}

/* ── Activity log rows ── */
.fadm .log-row{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);font-size:12px;align-items:baseline;}
.fadm .log-row:last-child{border-bottom:none;}
.fadm .log-row .lt{font-size:10.5px;color:var(--ink-muted);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0;width:150px;}
.fadm .log-row .lm{color:var(--ink);min-width:0;}
.fadm .log-row .lm b{font-weight:700;}
.fadm .log-row .who{color:var(--ink-faint);font-weight:600;}

/* ── Collapsible folds (Branding, Activity Log) ── */
.fadm details.fold{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:18px;}
.fadm details.fold > summary{list-style:none;cursor:pointer;padding:15px 20px;display:flex;align-items:center;gap:12px;}
.fadm details.fold > summary::-webkit-details-marker{display:none;}
.fadm details.fold > summary .fi{width:32px;height:32px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;flex-shrink:0;}
.fadm details.fold > summary .fi svg{width:16px;height:16px;stroke:var(--teal-2);fill:none;stroke-width:2;}
.fadm details.fold > summary h3{margin:0;font-size:14px;font-weight:800;color:var(--ink);}
.fadm details.fold > summary .sub{font-size:11px;color:var(--ink-muted);font-weight:500;}
.fadm details.fold > summary .fold-count{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink-faint);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill);padding:2px 9px;white-space:nowrap;}
.fadm details.fold > summary .fold-count + .chev{margin-left:10px;}
.fadm details.fold > summary:hover{background:var(--surface-2);}
.fadm details.fold > summary .chev{margin-left:auto;color:var(--ink-muted);transition:transform var(--t);display:flex;}
.fadm details.fold > summary .chev svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;}
.fadm details.fold[open] > summary .chev{transform:rotate(180deg);}
.fadm details.fold .fold-body{padding:0 20px 20px;border-top:1px solid var(--border);}
/* The files box nests a full .card; strip its chrome so it doesn't read as a box-in-a-box. */
.fadm #filesFold .fold-body .dept-row{margin:16px 0 14px;}
.fadm #filesFold .fold-body > #docsSection{border:none;box-shadow:none;border-radius:0;}
.fadm #filesFold .fold-body > #docsSection > .card-head{padding-left:0;padding-right:0;}

/* ── Branding form (mrow / colorrow) ── */
.fadm .mrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;}
.fadm .mlabel{display:block;font-size:11px;font-weight:700;color:var(--ink-faint);margin-bottom:5px;letter-spacing:.02em;}
.fadm .colorrow{display:flex;gap:9px;align-items:center;}
.fadm .colorrow input[type=color]{width:38px;height:36px;border:1px solid var(--border);border-radius:7px;padding:2px;background:var(--surface);cursor:pointer;flex-shrink:0;}
.fadm .colorrow .hex{flex:1;font-family:ui-monospace,Menlo,monospace;font-size:12px;}

/* ── HERO ──────────────────────────────────────────────────────────────────
   The page had no focal point: a stack of equal-weight card rows reading as a
   pile of stuff. One deep-teal band gives it a top, puts search at the centre
   instead of in the queue, and lets everything below be secondary. Kept short
   (~190px) so the guides still clear the fold. */
.fadm .hero{position:relative;border-radius:18px;padding:30px 30px 28px;margin-bottom:18px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(226,188,92,.16) 0%, rgba(226,188,92,0) 55%),
    linear-gradient(150deg, var(--teal) 0%, #013b45 55%, var(--teal-2) 100%);
  box-shadow:0 10px 30px rgba(0,39,45,.18);overflow:hidden;}
/* A faint star, echoing the brand mark, anchoring the empty right side. */
.fadm .hero::after{content:"";position:absolute;right:-40px;bottom:-70px;width:250px;height:250px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M12 1l2.4 7.1L22 9.3l-5.8 4.5L18 22l-6-4.3L6 22l1.8-8.2L2 9.3l7.6-1.2z'/></svg>") no-repeat center/contain;
  opacity:.045;pointer-events:none;}
.fadm .hero-in{position:relative;z-index:1;max-width:660px;}
.fadm .hero-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px;}
.fadm .hero-h1{margin:0;font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.03em;color:#fff;}
.fadm .hero-sub{margin:8px 0 20px;font-size:14px;font-weight:500;color:rgba(255,255,255,.72);}
/* The search sits ON the hero, so it needs its own light treatment. */
.fadm .hero-search{margin:0;}
.fadm .hero-search input{min-height:54px;border-color:transparent;
  box-shadow:0 6px 20px rgba(0,20,24,.22);font-size:15.5px;}
.fadm .hero-search input:focus{border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(226,188,92,.35),0 6px 20px rgba(0,20,24,.22);}
.fadm .hero-sync{position:absolute;top:20px;right:20px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:var(--radius-pill);cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:700;color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);transition:var(--t);}
.fadm .hero-sync:hover{background:rgba(255,255,255,.2);color:#fff;}
.fadm .hero-sync svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.1;}

/* ── Quick Access as a toolbar strip ──
   Seven big tiles used to outweigh the guides. These are external tools — the
   lightest thing on the page now, one scannable row. */
.fadm .qa-strip{display:flex;align-items:flex-start;gap:12px;margin:0 0 26px;padding:0 2px;}
/* Align to the FIRST row of pills, not the block's centre — with seven links the row
   wraps, and a centred label drifted to the middle of a two-row strip. */
.fadm .qa-strip-label{flex-shrink:0;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-muted);line-height:38px;}
/* TWO EVEN ROWS, whatever the count. This was flex-wrap, which breaks wherever the row runs
   out of width — with ten links that is a ragged 7 + 3, and it changes shape every time
   someone adds a link or renames one. A grid fills ROW-FIRST, so the column count IS the top
   row: renderQaGrid() sets --qa-cols to ceil(n/2) (capped at 8), which gives an even split
   and hands the extra tile to the TOP row when the count is odd.
   Equal-width columns are the trade: pills no longer hug their text. That is what makes the
   two rows line up, and it is why .qa-title gets min-width:0 to ellipsis instead of
   overflowing. */
.fadm .qa-strip .qa-grid{display:flex;flex-direction:column;gap:8px;flex:1;}
/* Each row is its OWN grid, all sharing --qa-cols (set from the longest row), so every pill is
   the same width across the whole strip and a short row leaves its trailing cell empty rather
   than stretching to fill. One grid for everything cannot do this — it fills left-to-right, so
   19 links would be 7+7+5 instead of 7+6+6. */
.fadm .qa-strip .qa-row{display:grid;grid-template-columns:repeat(var(--qa-cols,4),minmax(0,1fr));
  gap:8px;}
.fadm .qa-strip .qa-card{gap:8px;padding:7px 13px 7px 9px;border-radius:var(--radius-pill);
  background:var(--surface);box-shadow:var(--shadow-xs);min-width:0;}
.fadm .qa-strip .qa-card::before{display:none;}
.fadm .qa-strip .qa-card .qa-ico{width:24px;height:24px;border-radius:7px;}
.fadm .qa-strip .qa-card .qa-ico svg{width:13px;height:13px;}
.fadm .qa-strip .qa-card .qa-title{font-size:12.5px;}
.fadm .qa-strip .qa-card .qa-dept,
.fadm .qa-strip .qa-card .qa-go{display:none;}
.fadm .qa-strip .qa-add{flex-shrink:0;}
.fadm .qa-strip .qa-add:empty{display:none;}
.fadm .qa-strip .qa-more{min-height:0;padding:7px 14px;border-radius:var(--radius-pill);font-size:12px;}

/* ── Home search (v10: browse-first home) ── */
.fadm .hsearch{position:relative;display:flex;align-items:center;margin:0 0 12px;}
.fadm .hsearch input{width:100%;min-height:52px;font-family:inherit;font-size:16px;font-weight:500;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius-lg);
  padding:12px 44px 12px 46px;outline:none;box-shadow:var(--shadow-sm);transition:var(--t);}
.fadm .hsearch input::placeholder{color:var(--ink-muted);font-weight:500;}
.fadm .hsearch input:focus{border-color:var(--teal-2);box-shadow:0 0 0 3px rgba(0,98,113,.12),var(--shadow-sm);}
.fadm .hsearch input::-webkit-search-cancel-button{display:none;}   /* we ship our own clear button */
.fadm .hsearch .hs-ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-muted);pointer-events:none;display:flex;}
.fadm .hsearch .hs-ico svg{width:19px;height:19px;}
.fadm .hsearch .hs-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;
  display:grid;place-items:center;border:none;background:none;border-radius:7px;cursor:pointer;transition:var(--t);}
.fadm .hsearch .hs-clear svg{width:15px;height:15px;stroke:var(--ink-muted);fill:none;stroke-width:2.2;stroke-linecap:round;}
.fadm .hsearch .hs-clear:hover{background:var(--surface-2);}
.fadm .hsearch .hs-clear:hover svg{stroke:var(--ink);}

.fadm .hs-results{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:26px;}
.fadm .hs-results .hs-head{display:flex;align-items:baseline;gap:8px;padding:11px 16px;background:var(--surface-2);
  border-bottom:1px solid var(--border);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
.fadm .hs-results .hs-count{margin-left:auto;letter-spacing:.02em;text-transform:none;font-weight:600;color:var(--ink-muted);}
.fadm .hs-results .hs-empty{padding:16px;font-size:13px;color:var(--ink-muted);font-weight:500;}
.fadm .hs-row{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 16px;text-align:left;
  border:none;border-bottom:1px solid var(--border);background:var(--surface);cursor:pointer;font-family:inherit;transition:var(--t);}
.fadm .hs-row:hover{background:var(--surface-2);}
.fadm .hs-row .hs-ic{width:30px;height:30px;border-radius:7px;background:var(--surface-2);border:1px solid var(--border);
  display:grid;place-items:center;flex-shrink:0;}
.fadm .hs-row .hs-ic svg{width:15px;height:15px;stroke:var(--teal-2);fill:none;stroke-width:2;}
.fadm .hs-row .hs-txt{min-width:0;flex:1;}
.fadm .hs-row .hs-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink);}
.fadm .hs-row .hs-park{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;font-weight:700;color:#fff;
  background:var(--teal-2);border-radius:3px;padding:1px 5px;letter-spacing:.04em;}
.fadm .hs-row .hs-head-sub{display:block;font-size:11px;font-weight:600;color:var(--link);margin-top:2px;}
.fadm .hs-row .hs-snip{display:block;font-size:12px;color:var(--ink-muted);margin-top:3px;line-height:1.45;}
.fadm .hs-row .hs-snip b{color:var(--ink);background:var(--amber-fill);border-radius:2px;padding:0 2px;}
.fadm .hs-go{margin-left:auto;flex-shrink:0;display:flex;padding-top:2px;}
.fadm .hs-go svg{width:15px;height:15px;stroke:var(--ink-muted);fill:none;stroke-width:2;}
/* The AI handoff — last row, deliberately quieter than the results above it. */
/* Dashboard rows inside the search-results panel. They reuse .hs-row wholesale; these
   rules only undo what comes free with <a> and dim the not-yet-shipped ones. */
.fadm .hs-row--dash{text-decoration:none;align-items:center;}
.fadm .hs-row--dash .hs-go svg{width:13px;height:13px;}

.fadm .hs-ask{display:flex;align-items:center;gap:11px;width:100%;padding:12px 16px;text-align:left;
  border:none;background:var(--surface-2);cursor:pointer;font-family:inherit;transition:var(--t);}
.fadm .hs-ask:hover{background:var(--amber-fill);}
.fadm .hs-ask .hs-ask-ic{width:26px;height:26px;border-radius:7px;background:var(--link);display:grid;place-items:center;flex-shrink:0;}
.fadm .hs-ask .hs-ask-ic svg{width:15px;height:15px;fill:var(--gold);stroke:none;}
.fadm .hs-ask .hs-ask-txt{font-size:12.5px;color:var(--ink-faint);font-weight:500;min-width:0;}
.fadm .hs-ask .hs-ask-txt b{color:var(--ink);font-weight:700;}

/* ── Field-guide cards (promoted above the document grid) ── */
.fadm .guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.fadm .gcard{display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#fff 0%,var(--surface-2) 210%);
  border:1px solid var(--border);border-radius:12px;padding:14px 15px;box-shadow:var(--shadow-xs);
  transition:var(--t);min-width:0;text-align:left;cursor:pointer;font-family:inherit;}
.fadm .gcard:hover{border-color:var(--teal-2);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.fadm .gcard:hover .g-go{opacity:1;transform:translateX(2px);}
.fadm .gcard .g-ic{width:36px;height:36px;border-radius:9px;background:var(--link);display:grid;place-items:center;flex-shrink:0;}
.fadm .gcard .g-ic svg{width:19px;height:19px;stroke:var(--gold);fill:none;stroke-width:2;}
.fadm .gcard .g-meta{min-width:0;flex:1;}
.fadm .gcard .g-title{display:block;font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fadm .gcard .g-sub{display:block;font-size:10.5px;font-weight:600;color:var(--ink-muted);letter-spacing:.02em;margin-top:2px;}
.fadm .gcard .g-go{margin-left:auto;flex-shrink:0;display:flex;opacity:.4;transition:var(--t);}
.fadm .gcard .g-go svg{width:16px;height:16px;stroke:var(--teal-2);fill:none;stroke-width:2.2;}
.fadm .mini-empty{font-size:12.5px;color:var(--ink-muted);font-weight:500;padding:14px 2px;}

/* ── Mission, vision & core values (the culture band under the hero) ──
   Markup is written by renderValuesBand() in js/values.js. Everything here is under the
   .fadm scope and uses only that scope's variables, so it inherits the same ink, borders and
   shadows as the guide cards next to it. */
.fadm .vals-section{margin-bottom:26px;}

/* Mission + vision, side by side. Not cards: two quiet columns separated by a rule, because
   they are statements to be read once, not controls to be clicked. The left gold bar ties
   them to the section headings further down the page, which use the same 3px gold mark. */
.fadm .mv{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:0 0 22px;
  padding:18px 20px;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 260%);
  box-shadow:var(--shadow-xs);}
.fadm .mv-item{min-width:0;padding-left:13px;border-left:3px solid var(--gold);}
.fadm .mv-lbl{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-muted);margin-bottom:6px;}
.fadm .mv-item p{margin:0;font-size:13.5px;line-height:1.6;font-weight:500;color:var(--ink);}

/* The service promise. Italic and quoted so it reads as the company's own words rather than
   as UI copy, and sits between the heading and the cards it explains. */
.fadm .vals-promise{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 0 20px;padding:10px 14px;border-radius:var(--radius);
  background:var(--amber-fill);border:1px solid #f0e2bf;}
.fadm .vals-promise span{flex-shrink:0;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber-ink);}
.fadm .vals-promise em{font-size:13px;line-height:1.55;font-weight:600;color:var(--ink);
  font-style:italic;min-width:0;}

/* Five cards in one row. Fixed 5-up rather than auto-fill: the printed guide is five
   columns read left to right, and matching that makes the two versions the same object. */
.fadm .vals-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;}
.fadm .vcard{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  background:linear-gradient(180deg,#fff 0%,var(--surface-2) 240%);
  border:1px solid var(--border);border-radius:12px;padding:15px 14px 12px;
  box-shadow:var(--shadow-xs);transition:var(--t);min-width:0;text-align:left;
  cursor:pointer;font-family:inherit;}
.fadm .vcard:hover{border-color:var(--vc,var(--teal-2));box-shadow:var(--shadow-md);transform:translateY(-2px);}
/* The open card keeps a teal edge and loses its lift, so it reads as attached to the panel
   below it rather than as one more thing hovering above the page. */
/* Each card carries its own --vc/--vc-ink/--vc-tint (written by _valVars() in js/values.js),
   so every colour below is the CURRENT value's, and the five columns of the printed guide
   read as five colours here too. The var() fallbacks are the old teal/gold, so a value added
   without colours still renders. */
.fadm .vcard.is-open{border-color:var(--vc,var(--link));box-shadow:var(--shadow-sm);transform:none;
  background:var(--surface);}
.fadm .vcard.is-open .v-more svg{transform:rotate(180deg);}
/* Bigger tile than the other icons on the page, and a pale wash instead of a solid teal
   block: these are five detailed multi-colour drawings, not line-art marks, and at the old
   19px the owl's eyes and the rainbow's five bands were unreadable. */
.fadm .vcard .v-ic{width:40px;height:40px;border-radius:10px;background:var(--vc-tint,var(--surface-2));
  border:1px solid var(--vc,var(--border));display:grid;place-items:center;flex-shrink:0;}
/* .vsym is an <img> (the cut-out artwork) or, for a value with no symbol file, an inline
   <svg> fallback — so the selector must not name either. Square assets, so a square box:
   object-fit keeps the aspect ratio if a replacement ever isn't square. */
.fadm .vcard .v-ic .vsym{width:29px;height:29px;object-fit:contain;display:block;}
.fadm .vcard .v-name{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);line-height:1.3;}
/* NOT clamped: the blurb is one sentence saying what the value MEANS, and cutting it at two
   lines with an ellipsis left every card mid-thought. The cards are grid items, so they all
   stretch to the tallest one and the row stays even even though the five sentences differ in
   length; `.v-more` is pinned to the bottom with margin-top:auto, so the footer still lines
   up across the row. Longest of the five wraps to about five lines at the 5-up width. */
.fadm .vcard .v-blurb{font-size:11.5px;line-height:1.5;font-weight:500;color:var(--ink-muted);}
/* --vc-ink, not --vc: this is text. */
.fadm .vcard .v-more{display:flex;align-items:center;gap:4px;margin-top:auto;padding-top:4px;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;color:var(--vc-ink,var(--link));}
.fadm .vcard .v-more svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;
  transition:var(--t);}

/* The one shared drill-down panel. `hidden` on the element does the hiding — no display rule
   here — so the attribute stays the single source of truth for open/closed. */
.fadm .vals-panel{margin-top:11px;padding:18px 20px 16px;border:1px solid var(--vc,var(--link));
  border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);}
.fadm .vp-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px;}
.fadm .vp-ic{width:48px;height:48px;border-radius:12px;background:var(--vc-tint,var(--surface-2));
  border:1px solid var(--vc,var(--border));display:grid;place-items:center;flex-shrink:0;}
/* Same as the card, one step larger. */
.fadm .vp-ic .vsym{width:36px;height:36px;object-fit:contain;display:block;}
.fadm .vp-h-txt{min-width:0;flex:1;}
.fadm .vp-h-txt h3{margin:0;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.fadm .vp-h-txt p{margin:4px 0 0;font-size:12.5px;line-height:1.55;font-weight:500;color:var(--ink-muted);}
.fadm .vp-x{flex-shrink:0;width:30px;height:30px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);display:grid;place-items:center;cursor:pointer;transition:var(--t);}
.fadm .vp-x:hover{border-color:var(--red);background:var(--red-fill);}
.fadm .vp-x svg{width:14px;height:14px;stroke:var(--ink-muted);fill:none;stroke-width:2.2;}
.fadm .vp-x:hover svg{stroke:var(--red);}
.fadm .vp-sub{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:10px;}

/* Commitments three-up on desktop — they are peers, and stacking three full sentences down a
   720px column buries the third one. Numbered because the printed guide lists them in order. */
.fadm .vp-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;
  margin:0;padding:0;list-style:none;counter-reset:vpc;}
.fadm .vp-list li{counter-increment:vpc;position:relative;padding:13px 14px 13px 15px;
  border:1px solid var(--border);border-left:3px solid var(--vc,var(--gold));border-radius:var(--radius);
  background:var(--surface-2);font-size:12.5px;line-height:1.6;font-weight:500;color:var(--ink);}
.fadm .vp-list li strong{font-weight:800;color:var(--ink);}

/* Categories. Deliberately NOT styled like the commitments above: they are the label the
   source document puts at the foot of each column to say what KIND of commitments those are,
   so they read as metadata, not as a fourth commitment. */
.fadm .vp-cats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--border);}
.fadm .vp-cats-lbl{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);}
/* White on --vc-ink, never on --vc: the vivid yellow would leave white text at 1.9:1. */
.fadm .vp-cat{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--vc-ink,var(--link));color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.01em;}

/* Core-value rows in the home search panel reuse .hs-row wholesale; only the icon tile needs
   fixing up, so the symbol arrives in colour here as well and the row is recognisably the
   same object as the card. Size only — see the note on .v-ic svg.vsym. */
.fadm .hs-row--val .hs-ic{background:var(--vc-tint,var(--surface-2));
  border-color:var(--vc,var(--border));}
.fadm .hs-row--val .hs-ic .vsym{width:22px;height:22px;object-fit:contain;display:block;}

/* ── Responsive ── */
@media(max-width:980px){
  /* Not enough width for the planned columns to stay legible, so let the width decide how
     many fit. `display:contents` dissolves the row wrappers so the pills become children of
     the grid again and flow on their own. */
  .fadm .qa-strip .qa-row{display:contents;}
  .fadm .qa-strip .qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  .fadm .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fadm .qa-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fadm .access-grid{grid-template-columns:1fr;}
  .fadm .mrow{grid-template-columns:1fr;}
  /* Five value cards across a tablet leaves ~130px each, which clips the longer names
     ("Unforgettable Experiences") to nothing useful. 3-up, then 2 on the second row. */
  .fadm .vals-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .fadm .vp-list{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:820px){
  .fadm .grouptabs{display:flex;width:100%;}
  .fadm .grouptab{flex:1;justify-content:center;}
}
@media(max-width:560px){
  .fadm .dept-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
  .fadm .dept-chip{flex-shrink:0;}
  .fadm .log-row{flex-direction:column;gap:2px;}
  .fadm .log-row .lt{width:auto;}
}
@media(max-width:560px){
  /* Stack the label and let the pills scroll sideways as one line, instead of wrapping
     into five ragged rows above the guides. */
  .fadm .qa-strip{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:22px;}
  .fadm .qa-strip-label{line-height:1.2;}
  /* One sideways-scrolling line: rows dissolve again, and the grid goes back to a flex row
     (not the flex COLUMN of the desktop rule) so flex-wrap/nowrap applies to the pills. */
  .fadm .qa-strip .qa-row{display:contents;}
  .fadm .qa-strip .qa-grid{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;
    padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .fadm .qa-strip .qa-grid::-webkit-scrollbar{display:none;}
  .fadm .qa-strip .qa-card{flex:0 0 auto;}
  .fadm .qa-strip .qa-card .qa-title{white-space:nowrap;}
  .fadm .hero{padding:24px 20px 22px;border-radius:16px;}
  .fadm .hero-h1{font-size:25px;}
  .fadm .hero-sync span{display:none;}
  .fadm .hero-sync{padding:7px 9px;}
  /* Phones: mission above vision, values 2-up, one commitment per row. The blurb comes off
     the cards entirely — at this width it is two clipped lines of grey under a heading, and
     the full text is one tap away in the panel. */
  .fadm .mv{grid-template-columns:1fr;gap:16px;padding:16px 16px;}
  .fadm .vals-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  .fadm .vcard{padding:13px 12px 11px;}
  .fadm .vcard .v-blurb{display:none;}
  .fadm .vals-panel{padding:16px 15px 14px;}
  .fadm .vp-list{grid-template-columns:1fr;}
}
@media(max-width:520px){
  .fadm .guide-grid{grid-template-columns:1fr;}
  /* Quick Access stays 2-up on phones — title only, no description or arrow — so
     seven pinned links don't cost a full screen of scrolling before the guides.
     The title WRAPS rather than truncating: at 390px a 2-up tile leaves ~100px of
     text, and "Company Calendar" clipped to "Company C…" is worse than two lines. */
  .fadm .qa-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .fadm .qa-card{padding:11px 12px;gap:10px;}
  .fadm .qa-card .qa-ico{width:32px;height:32px;border-radius:9px;}
  .fadm .qa-card .qa-ico svg{width:17px;height:17px;}
  .fadm .qa-card .qa-title{white-space:normal;overflow:visible;line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .fadm .qa-card .qa-dept,
  .fadm .qa-card .qa-go{display:none;}
  .fadm .qa-more{min-height:58px;}
  .fadm .doc-grid{grid-template-columns:1fr;}
  .fadm .phead-actions{width:100%;}
  .fadm .phead-actions .btn{flex:1;}
}
@media(prefers-reduced-motion:reduce){.fadm *,.fadm *::before,.fadm *::after{transition:none!important;animation:none!important;}}