/* Knowledge Base ingestion console — Taraz light theme (teal + navy). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* The hidden attribute must always win — several components set their own
   display (flex/inline-flex), which would otherwise override the UA rule and
   render "hidden" elements (e.g. the add-domain row) visible by default. */
[hidden] { display: none !important; }

:root {
  --teal: #009999;
  --teal-dark: #007a7a;
  --teal-light: #e0f5f5;
  --navy: #15063F;
  --navy-2: #201d3a;
  --blue: #528ffe;
  --text-1: #1D2939;
  --text-2: #344054;
  --text-3: #475467;
  --text-4: #667085;
  --border: #e4e7ec;
  --border-soft: #eaecf0;
  --bg: #f2f2f2;
  --bg-2: #f8f8fc;
  --bg-3: #f9fafb;
  --white: #ffffff;
  --ok: #12b76a;
  --ok-light: #ecfdf3;
  --warn: #f79009;
  --warn-light: #fffaeb;
  --err: #f04438;
  --err-light: #fef3f2;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 4px 8px -2px rgba(16,24,40,.1), 0 2px 4px -2px rgba(16,24,40,.06);
}

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  color: var(--text-2);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
code { font-family: var(--mono); }
.hide { display: none !important; }
.muted { color: var(--text-4); }
.small { font-size: 12.5px; font-weight: 400; }

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  width: 100%; padding: 0 clamp(24px, 8vw, 120px); height: 72px;
  display: flex; align-items: center; gap: 36px;
}
.brand { display: flex; align-items: center; gap: 12px; cursor: default; }
.brand img { height: 40px; width: auto; }
.brand-divider { width: 1px; height: 28px; background: var(--border); }
.brand-label {
  font-size: 13px; font-weight: 600; color: var(--text-3);
  letter-spacing: .02em; text-transform: uppercase;
}
.nav-links { display: flex; gap: 26px; font-size: 14px; font-weight: 600; }
.nav-links a { color: var(--text-2); transition: color .15s; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav-links a:hover, .nav-links a.active { color: var(--teal); }
.nav-badge, .tab-badge {
  background: var(--teal); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.nav-spacer { flex: 1; }

.store-chips { display: flex; gap: 8px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: var(--white); color: var(--text-2);
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer;
  font-family: inherit; transition: border-color .15s;
}
.chip:hover { border-color: var(--teal); }
.chip.store { cursor: default; color: var(--text-4); }
.chip.store b { font-weight: 700; }
.chip.store.ok b { color: var(--ok); }
.chip.store.bad b { color: var(--err); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-4); }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(18,183,106,.15); }
.dot.bad { background: var(--err); box-shadow: 0 0 0 3px rgba(240,68,56,.15); }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(ellipse at top right, rgba(0,153,153,.35) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(82,143,254,.25) 0%, transparent 55%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: white; padding: 52px 32px 56px; text-align: center;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 860px; margin: 0 auto; }
.hero h1 {
  font-size: clamp(26px, 4vw, 40px); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.15; margin-bottom: 14px;
}
.hero h1 .accent { color: #5bd9d9; }
.hero p { font-size: 16px; color: rgba(255,255,255,.78); max-width: 640px; margin: 0 auto; }
.hero-stats {
  display: flex; justify-content: center; gap: 40px; margin-top: 26px;
  color: rgba(255,255,255,.85); font-size: 14px;
}
.hero-stats div { display: flex; align-items: center; gap: 8px; }
.hero-stats strong { color: #5bd9d9; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.hero-tabs {
  position: relative; display: inline-flex; gap: 6px; margin-top: 28px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  padding: 5px; border-radius: 12px;
}
.hero-tabs button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px; font: 600 14px 'Open Sans', sans-serif;
  color: rgba(255,255,255,.78); background: transparent;
  border: none; border-radius: 8px; cursor: pointer; transition: all .15s;
}
.hero-tabs button:hover { color: #fff; }
.hero-tabs button.active { background: var(--white); color: var(--navy); box-shadow: var(--shadow-md); }
.hero-tabs button.active .tab-badge { background: var(--teal); }

/* ── Main / panels ──────────────────────────────────────── */
main {
  flex: 1; width: 100%; margin: 0;
  padding: 40px clamp(24px, 8vw, 120px) 56px;
  max-width: 1160px; align-self: center;
}
.panel { display: none; }
.panel.active { display: block; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none; } }

.section-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.section-title h2 { font-size: 20px; font-weight: 700; color: var(--text-1); letter-spacing: -.01em; }
.section-title .count { font-size: 13px; color: var(--text-4); font-weight: 500; }

.card {
  background: var(--white); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 24px; margin-bottom: 22px; box-shadow: var(--shadow-sm);
}
.card h3 {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-4); margin-bottom: 16px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
label.fl { display: block; font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 6px; }

input[type=text], input[type=password], input[type=url], input[type=number],
input[type=email], input[type=search], select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font: 14px 'Open Sans', sans-serif; color: var(--text-1); background: var(--white); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input[type=text]:focus, input[type=password]:focus, input[type=url]:focus,
input[type=number]:focus, input[type=email]:focus, input[type=search]:focus,
select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,153,153,.12); }
input[type=text]:disabled, input[type=password]:disabled, input[type=url]:disabled,
input[type=number]:disabled { background: var(--bg-3); color: var(--text-4); }
input::placeholder { color: var(--text-4); }
input[type=range] { width: 100%; accent-color: var(--teal); margin-top: 8px; }
.qrow { display: flex; align-items: baseline; justify-content: space-between; }
.qval { font-size: 18px; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }

.domain-add { display: flex; gap: 8px; margin-top: 8px; }
.domain-add input { flex: 1; }

.vlm-row { display: flex; gap: 12px; align-items: flex-start; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; margin-top: 2px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0; border-radius: 999px; background: #d0d5dd;
  transition: background .15s; cursor: pointer;
}
.slider::before {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  left: 3px; top: 3px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s;
}
.switch input:checked + .slider { background: var(--teal); }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* ── Dropzone ───────────────────────────────────────────── */
.drop {
  border: 2px dashed var(--border); border-radius: 12px; padding: 34px; text-align: center;
  color: var(--text-4); cursor: pointer; transition: .15s; background: var(--bg-3);
}
.drop.hot, .drop:hover { border-color: var(--teal); color: var(--text-2); background: var(--teal-light); }
.drop strong { color: var(--text-1); }
.drop .browse { color: var(--teal); font-weight: 600; }
.drop .dz-icon { color: var(--teal); margin-bottom: 10px; }
.fileinfo {
  margin-top: 4px; font-size: 13.5px; color: var(--text-3);
  display: inline-flex; align-items: center; gap: 10px;
}
.file-badge {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .5px;
  background: var(--teal-light); color: var(--teal-dark); border-radius: 6px; padding: 4px 8px;
}
.fileinfo strong { color: var(--text-1); }
.dz-progress { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.dz-progress .bar { flex: 1; height: 6px; border-radius: 999px; background: #d7e9e9; overflow: hidden; position: relative; }
.dz-progress .bar::after {
  content: ""; position: absolute; inset: 0; width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--teal), #33cccc); border-radius: 999px; transition: width .2s;
}
.dz-progress span { font-family: var(--mono); font-size: 12px; color: var(--text-4); min-width: 38px; text-align: right; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  font: 600 14px 'Open Sans', sans-serif; border-radius: 8px; border: 1px solid var(--border);
  background: var(--white); color: var(--text-2); cursor: pointer; transition: all .15s;
}
.btn:hover { border-color: var(--teal); color: var(--teal); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--border); color: var(--text-2); }
.btn.primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn.primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
.btn.tiny { padding: 3px 9px; font-size: 12px; border-radius: 6px; }
.btn.danger { color: var(--err); }
.btn.danger:hover { border-color: var(--err); }
.btn.danger.armed { background: var(--err); border-color: var(--err); color: #fff; }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* ── Pipeline / jobs ────────────────────────────────────── */
.jobs { display: flex; flex-direction: column; gap: 16px; }
.job {
  background: var(--white); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.job-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.job-title { font-weight: 700; font-size: 14px; color: var(--text-1); }
.job-meta { color: var(--text-4); font-size: 12.5px; }
.job-status {
  margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .4px;
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase;
}
.job-status.processing { background: var(--teal-light); color: var(--teal-dark); }
.job-status.done { background: var(--ok-light); color: var(--ok); }
.job-status.failed, .job-status.done_with_errors { background: var(--err-light); color: var(--err); }
.job-status.interrupted, .job-status.queued { background: var(--warn-light); color: var(--warn); }
.job-status.cancelled { background: var(--bg-3); color: var(--text-4); }

.doc-row { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--border-soft); }
.doc-name { font-size: 13.5px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 8px; }
.doc-name .elapsed { color: var(--text-4); font-weight: 400; font-family: var(--mono); font-size: 11.5px; }

.tracker { display: flex; align-items: flex-start; margin-top: 12px; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; min-width: 0; }
.step::before {
  content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 2px;
  background: var(--border);
}
.step:first-child::before { display: none; }
.step.done::before, .step.active::before { background: var(--teal); opacity: .35; }
.step .node {
  width: 17px; height: 17px; border-radius: 50%; z-index: 1;
  border: 2px solid var(--border); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #fff;
}
.step.done .node { background: var(--ok); border-color: var(--ok); }
.step.done .node::after { content: "✓"; font-weight: 900; }
.step.active .node { background: var(--teal); border-color: var(--teal); animation: pulse 1.2s ease-in-out infinite; }
.step.failed .node { background: var(--err); border-color: var(--err); }
.step.failed .node::after { content: "✕"; font-weight: 900; }
.step span { font-size: 10.5px; color: var(--text-4); margin-top: 5px; white-space: nowrap; }
.step.active span { color: var(--teal-dark); font-weight: 700; }
.step.done span { color: var(--ok); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(0,153,153,.15); } }

.stage-detail {
  margin-top: 10px; font-family: var(--mono); font-size: 12px; color: #b8f0f0;
  background: var(--navy); border-radius: 8px; padding: 7px 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-error {
  margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--err);
  background: var(--err-light); border: 1px solid #fecdca; border-radius: 8px; padding: 8px 10px;
  white-space: pre-wrap; max-height: 130px; overflow-y: auto;
}
.doc-summary { margin-top: 8px; font-size: 12.5px; color: var(--text-4); }
.doc-summary b { color: var(--text-2); }
.doc-summary .okmark { color: var(--ok); }
.doc-summary .warnmark { color: var(--warn); }
.doc-summary .errmark { color: var(--err); }

.doc-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.attempt-badge {
  background: var(--warn-light); color: var(--warn); border-radius: 999px;
  font-size: 11px; font-weight: 700; padding: 2px 9px;
}
.retry-btn { color: var(--teal-dark); }
.doc-log {
  margin-top: 10px; font: 11.5px/1.55 var(--mono); color: #b8f0f0;
  background: var(--navy); border-radius: 8px; padding: 10px 12px;
  max-height: 320px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
}

.empty-card, .empty { color: var(--text-4); text-align: center; padding: 26px 0; font-size: 13.5px; }

/* ── Documents / stats ──────────────────────────────────── */
.stats-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.stat {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  background: var(--white); border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 12px 18px; box-shadow: var(--shadow-sm);
}
.stat b { color: var(--teal); font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--text-4); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
th { color: var(--text-4); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
td.num { font-family: var(--mono); font-size: 13px; }
tr:hover td { background: var(--bg-3); }
.domain-tag {
  background: var(--teal-light); color: var(--teal-dark);
  padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}

/* ── Synced Google Docs ─────────────────────────────────── */
.sync-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.sync-head h3 { margin: 0; }
.sync-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.sync-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.sync-pill.active { background: var(--ok-light); color: var(--ok); }
.sync-pill.stale { background: var(--warn-light); color: var(--warn); }
.sync-pill.syncing { background: var(--teal-light); color: var(--teal-dark); }
.sync-pill.superseded { background: var(--bg-3); color: var(--text-4); }
.gdoc-sync-card td a { color: var(--teal-dark); font-weight: 600; text-decoration: none; }
.gdoc-sync-card td a:hover { text-decoration: underline; }

/* ── S8 versioning: history modal + snapshots ───────────── */
.rowbtns { white-space: nowrap; }
.rowbtns .btn + .btn { margin-left: 6px; }
.snap-form { display: flex; gap: 10px; margin-bottom: 14px; }
.snap-form input#snapName { max-width: 320px; }
.snap-form .btn { flex-shrink: 0; }
/* .modal sets max-width:380px LATER in this file — these need the extra
   class to win, or the document tables get crushed into a 380px column */
.modal.ver-modal { max-width: 940px; width: min(940px, 95vw); }
.ver-modal td:first-child { max-width: 320px; word-break: break-word; }
.ver-modal .domain-tag, .ver-modal .sync-pill { white-space: nowrap; }
.snap-serve-list { margin: 10px 0 0; padding-left: 18px; }
.snap-serve-list li { margin-bottom: 5px; }
.snap-serve-list .docs { color: var(--text-4); }
.in-use-badge {
  background: var(--ok-light); color: var(--ok); font-weight: 700;
  font-size: 11.5px; padding: 4px 11px; border-radius: 999px;
  white-space: nowrap;
}
.ver-diff {
  background: var(--bg-3); border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 12px 14px; margin: 8px 0 0; max-height: 320px; overflow: auto;
  font: 12.5px/1.55 ui-monospace, 'Cascadia Code', Consolas, monospace;
  color: var(--text-2); white-space: pre;
}
/* ── Module h: access control ───────────────────────────── */
.acl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 900px) { .acl-cols { grid-template-columns: 1fr; } }
.acl-h {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-4); margin: 0 0 10px;
}
.acl-person { padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.acl-person:last-child { border-bottom: 0; }
.acl-who { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.acl-who b { font-size: 13.5px; }
.acl-chips, .acl-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.acl-pick { margin-bottom: 8px; }
/* what a tag choice actually reaches — access chosen blind is the failure C0
   existed to end, so the consequence sits next to the control, not in a doc */
.acl-reach { margin: 0 0 16px; line-height: 1.5; }
.acl-effective { margin-top: 4px; }
.acl-parent {
  font-family: inherit; font-size: 12px; padding: 2px 6px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--white); color: var(--text-3); max-width: 190px;
}
.acl-chip {
  border: 1px solid var(--border); background: var(--white); color: var(--text-3);
  padding: 3px 11px; border-radius: 999px; font-size: 12px; cursor: pointer;
  font-family: inherit; transition: all .12s;
}
.acl-chip:hover { border-color: var(--teal); color: var(--teal-dark); }
.acl-chip.on {
  background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600;
}
.acl-chip.all { background: var(--ok-light); border-color: var(--ok-light); color: var(--ok); cursor: default; }
.acl-tag-cell { font-family: var(--mono); font-size: 12.5px; }
/* the Access cell is a button but must read as content, not a control */
.btn-plain {
  background: none; border: 0; padding: 2px; font: inherit; cursor: pointer;
  text-align: left; border-radius: 6px;
}
.btn-plain:hover { background: var(--bg-3); outline: 1px solid var(--border); }
.acl-none { color: var(--text-4); font-size: 12px; font-style: italic; }
/* ── C3: several memberships, one of them the ingest picker's default ──
   `primary` is a DEFAULT, never access — it is drawn as a quiet badge, while
   authority (`manages`) keeps the loud amber pill it has everywhere else. */
.acl-mems { margin-top: 6px; display: grid; gap: 4px; }
.acl-mem-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acl-mem-kind {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-4); min-width: 76px;
}
.acl-mem {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; color: var(--text-3);
  background: var(--bg-3); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 2px 4px 2px 9px;
}
.acl-mem.primary { border-color: var(--teal); color: var(--teal-dark); }
.acl-mem-badge {
  font-family: inherit; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--teal-dark); background: var(--teal-light);
  border-radius: 4px; padding: 1px 5px;
}
.acl-mem .btn.tiny { padding: 1px 8px; font-size: 11px; }
/* the picker's pre-selection must be legible AS a pre-selection, not as a
   choice the uploader made — same teal "on" chip, plus a ring and a word */
.acl-chip.dflt { box-shadow: 0 0 0 3px var(--teal-light); }
.chip-dflt {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; background: rgba(255,255,255,.28);
  border-radius: 4px; padding: 1px 5px; margin-left: 4px;
}
.aud-default {
  margin-top: 4px; font-size: 12.5px; color: var(--teal-dark);
  background: var(--teal-light); border-radius: 6px; padding: 6px 10px;
  line-height: 1.45;
}
.serving-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-3); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; font-size: 13.5px;
}
.serving-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-4);
}
.serving-bar .drift { color: var(--warn); font-weight: 600; }
.serving-bar button { margin-left: auto; }
.serve-foot {
  display: flex; align-items: center; gap: 16px; margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--border-soft);
}
.serve-foot p { margin: 0; flex: 1; }
.serve-foot .btn { flex-shrink: 0; }
.btn.primary.armed { background: var(--err); border-color: var(--err); color: #fff; }
.ver-diff .add { color: var(--ok); }
.ver-diff .del { color: var(--err); }
.ver-diff .hunk { color: var(--teal-dark); font-weight: 600; }

/* ── Footer ─────────────────────────────────────────────── */
footer {
  background: var(--navy); color: rgba(255,255,255,.7);
  padding: 28px clamp(24px, 8vw, 120px); text-align: center; font-size: 13px;
}
footer .brand-mini { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 600; color: #fff; }
footer img { height: 26px; filter: brightness(0) invert(1); opacity: .9; }

/* ── Toasts ─────────────────────────────────────────────── */
.toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 9px; z-index: 60; }
.toast {
  background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--teal);
  border-radius: 10px; padding: 11px 15px; font-size: 13.5px; max-width: 380px;
  box-shadow: var(--shadow-md); animation: slidein .18s ease-out; color: var(--text-2);
}
.toast.err { border-left-color: var(--err); }
.toast.ok { border-left-color: var(--ok); }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }

/* ── Auth: login gate ───────────────────────────────────── */
/* While signed out, hide the whole app chrome and show the login screen. */
body[data-auth="out"] .topbar,
body[data-auth="out"] .hero,
body[data-auth="out"] main,
body[data-auth="out"] footer { display: none; }

.login-screen { display: none; }
body[data-auth="out"] .login-screen {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 100; padding: 24px;
  background:
    radial-gradient(ellipse at top right, rgba(0,153,153,.35) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(82,143,254,.25) 0%, transparent 55%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
}
.login-card {
  width: 100%; max-width: 400px; background: var(--white);
  border-radius: 16px; padding: 32px 30px; box-shadow: 0 20px 48px -12px rgba(16,24,40,.4);
  animation: loginIn .25s ease;
}
@keyframes loginIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-brand img { height: 34px; width: auto; }
.login-card h1 { font-size: 22px; font-weight: 700; color: var(--text-1); letter-spacing: -.01em; }
.login-sub { font-size: 13.5px; color: var(--text-4); margin: 4px 0 22px; }
.login-form .field { margin-bottom: 16px; }
.login-btn { width: 100%; justify-content: center; margin-top: 6px; padding: 11px 16px; }
.login-error {
  font-size: 13px; color: var(--err); background: var(--err-light);
  border: 1px solid #fecdca; border-radius: 8px; padding: 8px 11px; margin-bottom: 14px;
}
.login-note {
  font-size: 13px; color: var(--warn); background: var(--warn-light);
  border: 1px solid #fde08a; border-radius: 8px; padding: 8px 11px; margin-bottom: 14px;
}
.login-foot { margin-top: 22px; text-align: center; font-size: 12px; color: var(--text-4); }

/* ── Auth: topbar user ──────────────────────────────────── */
.topbar-user { display: flex; align-items: center; gap: 10px; }
.user-meta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.user-name { font-size: 13px; font-weight: 700; color: var(--text-1); }
.user-role {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--teal-dark);
}
.user-role.admin { color: var(--teal-dark); }

/* ── Modals (change / reset password) ───────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(21,6,63,.45); animation: fade .18s ease;
}
.modal {
  width: 100%; max-width: 380px; background: var(--white);
  border-radius: 14px; padding: 24px; box-shadow: var(--shadow-md);
  animation: loginIn .2s ease;
}
.modal h3 {
  font-size: 16px; font-weight: 700; color: var(--text-1);
  text-transform: none; letter-spacing: normal; margin-bottom: 18px;
}
.modal .field { margin-bottom: 16px; }
.modal-target { color: var(--teal-dark); font-weight: 700; }

/* Tall modals (document lists): the BODY scrolls, never the page — the
   header and the action footer must stay reachable at any list length. */
.modal.tall {
  display: flex; flex-direction: column; max-height: calc(100vh - 48px);
  overflow: hidden; padding: 0;
}
.modal.tall > .modal-head { padding: 24px 24px 12px; flex-shrink: 0; }
.modal.tall > .modal-scroll {
  overflow: auto; padding: 0 24px; flex: 1; min-height: 0;
}
/* one scroll container only — a nested overflow context kills the sticky
   header, so the wrap inside a tall modal must not scroll on its own */
.modal.tall .table-wrap { overflow: visible; }
.modal.tall > .modal-foot {
  padding: 14px 24px; flex-shrink: 0; border-top: 1px solid var(--border-soft);
  background: var(--bg-3); display: flex; align-items: center; gap: 14px;
  border-radius: 0 0 14px 14px;
}
.modal.tall > .modal-foot p { margin: 0; flex: 1; }
.modal.tall > .modal-foot .btn { flex-shrink: 0; }
.modal.tall .modal-head h3 { margin-bottom: 6px; }
.modal.tall table thead th {
  position: sticky; top: 0; background: var(--white); z-index: 1;
}

/* ── Users panel ────────────────────────────────────────── */
.role-select { width: auto; min-width: 110px; padding: 6px 10px; font-size: 13px; }
.user-actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.you-badge {
  background: var(--teal-light); color: var(--teal-dark); border-radius: 999px;
  font-size: 10px; font-weight: 700; padding: 1px 8px; margin-left: 6px;
  text-transform: uppercase; letter-spacing: .04em;
}
.role-tag {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--bg-3); color: var(--text-3);
}
.role-tag.admin { background: var(--teal-light); color: var(--teal-dark); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .topbar-inner { padding: 0 16px; gap: 16px; height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  main { padding: 28px 16px 40px; }
  .hero { padding: 40px 16px 44px; }
  .grid2 { grid-template-columns: 1fr; }
  .hero-stats { gap: 22px; flex-wrap: wrap; }
  .step span { font-size: 9px; }
  .topbar-user { width: 100%; justify-content: flex-end; }
}

/* ── metered spend (Usage tab + spend chip) ──────────────────── */
.chip.spend-chip { cursor: pointer; color: var(--teal-dark); font-weight: 700;
  background: var(--teal-light); border-color: transparent; }
.chip.spend-chip:hover { border-color: var(--teal); }

.usage-head { display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; }
.usage-total { display: flex; flex-direction: column; gap: 4px; }
.usage-big { font-size: 38px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; line-height: 1; }
.usage-sub { font-size: 13px; color: var(--text-4); }
.usage-provs { display: flex; gap: 12px; flex-wrap: wrap; }
.usage-prov { display: flex; flex-direction: column; gap: 2px; min-width: 120px;
  padding: 12px 16px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--border-soft); }
.usage-prov-name { font-size: 12px; font-weight: 700; text-transform: capitalize; }
.usage-prov.prov-openai .usage-prov-name { color: var(--teal-dark); }
.usage-prov.prov-gemini .usage-prov-name { color: var(--blue); }
.usage-prov.prov-other .usage-prov-name { color: var(--text-4); }
.usage-prov-usd { font-size: 19px; font-weight: 700; color: var(--text-1); }
.usage-prov-tok { font: 500 11px var(--mono); color: var(--text-4); }

.usage-days { display: flex; align-items: flex-end; gap: 6px; height: 150px;
  padding: 12px 4px 2px; overflow-x: auto; }
.usage-bar { flex: 1 0 26px; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; gap: 6px; }
.usage-bar-fill { width: 60%; min-height: 3px; border-radius: 5px 5px 0 0;
  background: linear-gradient(var(--teal), var(--teal-dark)); transition: height .2s ease; }
.usage-bar-lbl { font: 500 9.5px var(--mono); color: var(--text-4); white-space: nowrap; }
.usage-note { font-size: 12px; color: var(--text-4); line-height: 1.6; margin-top: 14px; max-width: 760px; }
.usage-note code { font: 600 11px var(--mono); background: var(--bg-3); padding: 1px 6px; border-radius: 5px; }

/* ─────────────── graph editor ─────────────── */
.graph-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.graph-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.gseg { padding: 7px 16px; font: 600 13px 'Open Sans', sans-serif; background: var(--white);
  color: var(--text-2); border: none; cursor: pointer; transition: .15s; }
.gseg + .gseg { border-left: 1px solid var(--border); }
.gseg.active { background: var(--teal); color: #fff; }
.gseg:not(.active):hover { background: var(--bg-3); }
.graph-search { flex: 1; min-width: 220px; max-width: 420px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px; }
.g-title { font-weight: 600; color: var(--text-2); }
.g-alias { display: block; font-size: 11px; color: var(--text-4); margin-top: 2px; }
.g-type { display: inline-block; font: 600 11px var(--mono); background: var(--teal-light);
  color: var(--teal-dark); padding: 2px 8px; border-radius: 5px; }
.g-rel { font-style: italic; color: var(--text-2); }
.g-desc { max-width: 380px; color: var(--text-4); font-size: 12.5px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g-num { text-align: right; font: 500 12px var(--mono); color: var(--text-4); white-space: nowrap; }
.g-actions { white-space: nowrap; text-align: right; }
.g-actions .btn.tiny + .btn.tiny { margin-left: 6px; }
#graphFields textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; font: inherit; resize: vertical; }

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .step.active .node { animation: none; }
}

/* ── Web Review tab ──────────────────────────────────────────────── */
.review-toolbar { display:flex; align-items:center; gap:8px; margin:10px 0 14px; flex-wrap:wrap; }

/* website groups (outer level — one card per scraped site) */
.rv-site { background:var(--white,#fff); border:1px solid var(--border,#e5e7eb);
  border-radius:12px; margin-bottom:14px; overflow:hidden; box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.04)); }
.rv-shead { display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer;
  user-select:none; background:var(--bg-3,#f8fafc); border-bottom:1px solid transparent; }
.rv-site.open .rv-shead { border-bottom-color:var(--border,#e5e7eb); }
.rv-shead:hover { background:var(--bg-2,#eef2f7); }
.rv-scheck { width:16px; height:16px; cursor:pointer; flex:0 0 auto; }
.rv-sicon { font-size:14px; line-height:1; }
.rv-sname { font-weight:800; font-size:14px; word-break:break-all; }
.rv-scount { color:var(--text-3,#64748b); font-size:12px; margin-left:auto; white-space:nowrap; }
.rv-sbody { padding:10px; display:flex; flex-direction:column; gap:8px; }
.rv-sbody[hidden] { display:none; }
/* category cards nested inside a website card — lighter & flush */
.rv-sbody .rv-group { margin-bottom:0; box-shadow:none; border-radius:8px; }

/* expandable category groups */
.rv-group { background:var(--white,#fff); border:1px solid var(--border,#e5e7eb);
  border-radius:12px; margin-bottom:12px; overflow:hidden; box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.04)); }
.rv-ghead { display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer; user-select:none; }
.rv-ghead:hover { background:var(--bg-3,#f8fafc); }
.rv-caret { width:14px; color:var(--text-3,#64748b); font-size:12px; text-align:center; }
.rv-gcheck { width:16px; height:16px; cursor:pointer; flex:0 0 auto; }
.rv-gname { font-weight:700; text-transform:capitalize; }
.rv-gcount { color:var(--text-3,#64748b); font-size:12px; margin-left:auto; white-space:nowrap; }
.rv-gbody { border-top:1px solid var(--border,#eceef1); }
.rv-gbody[hidden] { display:none; }

/* per-page rows */
.rv-row { display:flex; align-items:center; gap:12px; padding:10px 16px;
  border-top:1px solid var(--border,#f1f5f9); }
.rv-gbody > .rv-row:first-child { border-top:none; }
.rv-check { flex:0 0 auto; display:flex; }
.rv-check input { width:16px; height:16px; cursor:pointer; }
.rv-body { flex:1 1 auto; min-width:0; cursor:pointer; }
.rv-body .doc-name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rv-body:hover .rv-more { text-decoration:underline; }
.rv-chips { margin-top:4px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.rv-more { font-size:11px; color:#6366f1; }
.rv-before { color:#9ca3af; text-decoration:line-through; }

/* metadata chips */
.chip-mini { font-size:11px; padding:2px 7px; border-radius:999px; background:#eef2ff; color:#4338ca; }
.chip-mini.pdf { background:#fef3c7; color:#92400e; margin-right:6px; }
.chip-mini.img { background:#e0f2fe; color:#075985; }
.chip-mini.q-low { background:#fee2e2; color:#991b1b; }
.chip-mini.q-medium { background:#fef9c3; color:#854d0e; }
.chip-mini.q-high { background:#dcfce7; color:#166534; }

/* per-page detail modal (reuses .modal-overlay / .modal) */
.rv-detail { max-width:560px; position:relative; text-align:left; }
.rv-modal-x { position:absolute; top:12px; right:14px; border:0; background:none;
  font-size:18px; line-height:1; cursor:pointer; color:var(--text-3,#64748b); }
.rv-dtitle { font-size:16px; font-weight:700; margin:0 24px 14px 0; word-break:break-word; }
.rv-drow { display:flex; gap:12px; padding:8px 0; border-top:1px solid var(--border,#f1f5f9); font-size:13px; }
.rv-dk { flex:0 0 84px; color:var(--text-3,#64748b); font-weight:600; }
.rv-dv { flex:1 1 auto; min-width:0; word-break:break-word; }
/* inline editors in the detail / bulk-edit modals */
.rv-edit-input { width:100%; max-width:280px; padding:6px 9px; border:1px solid var(--border,#d1d5db);
  border-radius:7px; font-size:13px; background:var(--white,#fff); color:inherit; }
.rv-edit-input:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.rv-qedit { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rv-qedit input[type=range] { flex:1 1 140px; max-width:220px; accent-color:#6366f1; cursor:pointer; }
.rv-qnum { color:var(--text-3,#64748b); font-size:12px; white-space:nowrap; }
.rv-qnum b { color:var(--text-1,#111827); font-size:13px; }
.rv-echk { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--text-3,#64748b);
  white-space:nowrap; cursor:pointer; }
.rv-echk input { width:14px; height:14px; cursor:pointer; }
.rv-modal-actions { margin-top:20px; display:flex; gap:10px; justify-content:flex-end; align-items:center; }

/* ── Ingest sub-tabs (Document / Google Docs / Website) ────────── */
.subtabs { display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap; }
.subtab { border:1px solid var(--border,#e5e7eb); background:var(--white,#fff); color:var(--text-2,#475569);
  border-radius:10px; padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; }
.subtab:hover { border-color:var(--teal,#0d9488); }
.subtab.active { background:var(--teal-dark,#0f766e); color:#fff; border-color:var(--teal-dark,#0f766e); }
.subtab.active .nav-badge { background:rgba(255,255,255,.28); color:#fff; }

/* ── Website crawl: scope cards + live log ─────────────────────── */
.scope-cards { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.scope-card { flex:1 1 150px; text-align:left; border:1px solid var(--border,#e5e7eb);
  background:var(--white,#fff); border-radius:11px; padding:11px 14px; cursor:pointer;
  display:flex; flex-direction:column; gap:2px; }
.scope-card:hover { border-color:var(--teal,#0d9488); }
.scope-card.active { border-color:var(--teal-dark,#0f766e); box-shadow:0 0 0 2px var(--teal-light,#ccfbf1); }
.scope-card strong { font-size:14px; color:var(--text-1,#1e293b); }
.scope-card span { font-size:12px; color:var(--text-3,#64748b); }
.weblog { background:#0f172a; color:#d7dde7; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px; line-height:1.5; padding:12px 14px; border-radius:9px; max-height:240px; overflow:auto;
  white-space:pre-wrap; word-break:break-word; margin:0; }


/* document record (metadata) modal */
.rec-table { width: 100%; border-collapse: collapse; margin: 12px 0 10px; }
.rec-table th, .rec-table td {
  padding: 7px 10px; text-align: left; font-size: .85rem; vertical-align: top;
  border-bottom: 1px solid var(--line, #eef1f4);
}
.rec-table th { width: 34%; font-weight: 600; color: var(--muted, #6b7785); }
.rec-table td { word-break: break-word; }
/* admin-only state control (review_status / lifecycle) under the record table */
.rec-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.rec-state label { font-size: 13px; font-weight: 600; color: var(--text-3); }

/* ── Org tree (Phase C) ─────────────────────────────────────────────
   Depth is drawn with a CSS var so nesting is unlimited — 009 removed
   the 2-level cap and the editor must not silently re-impose one. */
.org-tree { margin-top: 12px; }
.org-h { margin: 18px 0 6px; }
.org-node { margin-left: calc(var(--d, 0) * 22px); }
.org-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 8px; border-left: 2px solid var(--border); margin: 2px 0;
}
.org-row:hover { background: var(--bg-2, #fafafa); }
.org-label { font-size: 13px; }
.org-kind {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 4px; background: var(--border);
  color: var(--text-3);
}
.org-kind.root    { background: var(--teal); color: #fff; }
.org-kind.project { background: #6b4fa8; color: #fff; }
.org-kind.user    { background: transparent; border: 1px solid var(--border); }
/* authority reads DOWN the tree, so it must never look like plain membership */
.org-mgr {
  font-size: 11px; font-weight: 600; color: #8a5a00;
  background: #fff4d6; border-radius: 4px; padding: 1px 6px;
}

/* C6: the one control in the ACL card that WIDENS access, so it reads as a
   warning rather than as another setting. */
.acl-setting { border: 1px solid var(--warn-border, #e6c07b);
  background: var(--warn-bg, #fffaf0); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 14px; }
.acl-setting-row { display: flex; align-items: center; gap: 8px;
  cursor: pointer; }
.acl-setting-row input { cursor: pointer; }
#managerSeesPersonalWhat { margin-top: 6px; line-height: 1.5; }
#managerSeesPersonalWhat div { margin-top: 2px; }
#managerSeesPersonalErr { margin-top: 6px; color: var(--danger, #b23b3b); }

/* ── Org chart ───────────────────────────────────────────────────────────
   Kind is carried by COLOUR, and the two kinds of edge mean different
   things: solid = the tree (a person's home), dashed = a membership grant
   (a second department). Drawing them the same way is how a second
   department goes unnoticed. */
.org-chart-bar { display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  margin:10px 0 6px; font-size:12px; color:var(--muted,#667); }
.org-legend { display:inline-flex; align-items:center; gap:6px; }
.dot { width:11px; height:11px; border-radius:50%; display:inline-block; }
.dot.k-org{background:#7c4dff} .dot.k-dept{background:#0d8f7a}
.dot.k-team{background:#2f7fd4} .dot.k-user{background:#e2842b}
.dot.k-project{background:#b5457b} .dot.k-root{background:#98a2b3}
.edge-key { width:18px; height:0; border-top:2px solid #98a2b3; display:inline-block; }
.edge-key.dashed { border-top-style:dashed; }

.org-chart-wrap { position:relative; }
.org-toolbar { display:flex; align-items:center; gap:10px; margin:0 0 6px; }
.org-chart { overflow:auto; border:1px solid var(--line,#e6e8ec);
  border-radius:10px; background:var(--card,#fff); padding:6px;
  min-height:min(72vh, 720px); resize:vertical; }
.org-svg { display:block; max-width:100%; }

.org-edge { fill:none; stroke:#c3c9d4; stroke-width:1.6; }
.org-edge.grant { stroke-dasharray:5 4; stroke:#e2842b; opacity:.85; }
.org-edge.grant.mgr { stroke:#c0392b; stroke-width:2.1; }

.org-node { cursor:pointer; }
.org-node circle { stroke:#fff; stroke-width:2.5; transition:r .12s ease; }
.org-node.k-org circle{fill:#7c4dff} .org-node.k-dept circle{fill:#0d8f7a}
.org-node.k-team circle{fill:#2f7fd4} .org-node.k-user circle{fill:#e2842b}
.org-node.k-project circle{fill:#b5457b} .org-node.k-root circle{fill:#98a2b3}
.org-node .mgr-ring { fill:none; stroke:#c0392b; stroke-width:2; stroke-dasharray:3 3; }
.org-node:hover circle:first-of-type { filter:brightness(1.12); }
.org-node.selected circle:first-of-type { stroke:#111; stroke-width:3; }
.org-node.connectable circle:first-of-type {
  stroke:#0d8f7a; stroke-width:3; stroke-dasharray:4 3; }
.org-node:focus { outline:none; }
.org-node:focus circle:first-of-type { stroke:#111; stroke-width:3; }
.org-cap { text-anchor:middle; font-size:12px; font-weight:600; fill:#222; }
.org-sub { text-anchor:middle; font-size:10px; fill:#8a93a3; }

/* the details are a POPOVER anchored to the node, so the graph keeps the
   whole width instead of losing 300px to a panel that is empty most of the
   time */
.org-pop { position:absolute; z-index:30; width:320px; max-height:80%;
  overflow:auto; border:1px solid var(--line,#d8dce3); border-radius:10px;
  padding:12px 14px 14px; background:var(--card,#fff);
  box-shadow:0 10px 30px rgba(16,24,40,.16); }
.org-pop-x { position:absolute; top:6px; right:8px; border:0; background:none;
  font-size:20px; line-height:1; cursor:pointer; color:var(--muted,#98a2b3); }
.org-pop-x:hover { color:#111; }
.org-dtitle { display:flex; align-items:center; gap:8px; margin:0 0 10px;
  font-size:15px; }
.org-facts { width:100%; border-collapse:collapse; font-size:12px; }
.org-facts th { text-align:left; color:var(--muted,#667); font-weight:500;
  padding:3px 8px 3px 0; vertical-align:top; white-space:nowrap; }
.org-facts td { padding:3px 0; word-break:break-word; }
.org-act { margin:12px 0 8px; }
.org-act .btn.on { background:#0d8f7a; color:#fff; }
.org-memb-row { display:flex; align-items:center; gap:8px; margin:4px 0; }
.org-mgrbox { font-size:11px; color:var(--muted,#667); display:inline-flex;
  align-items:center; gap:4px; cursor:pointer; }

@media (max-width: 900px) {
  .org-pop { position:static; width:auto; max-height:none; margin-top:10px;
    box-shadow:none; }
  .org-pop-x { display:none; }
}

/* A person or department with no parent is not a peer of the organisation —
   it is unattached, and the tree grants it nothing. */
.org-node.floating circle:first-of-type { fill-opacity:.35; stroke-dasharray:3 3; }
.org-node.floating .org-cap { fill:#8a93a3; font-style:italic; }

/* The org chart is the one view that genuinely wants the screen: a tree
   squeezed into the 1160px reading column has to be dragged sideways, which
   is the complaint this answers. Only this panel widens, and only when it is
   the visible one, so every other page keeps its comfortable measure. */
main:has(#panel-org.active) {
  max-width: min(1900px, 96vw);
  padding-left: clamp(16px, 3vw, 48px);
  padding-right: clamp(16px, 3vw, 48px);
}

/* view switch + the popover's new controls */
.org-views { display:inline-flex; border:1px solid var(--line,#d8dce3);
  border-radius:8px; overflow:hidden; }
.org-views .btn { border:0; border-radius:0; margin:0; }
.org-views .btn.on { background:#0d8f7a; color:#fff; }
.org-field { margin:10px 0 4px; }
.org-field label { display:block; font-size:11px; color:var(--muted,#667);
  margin-bottom:3px; }
.org-field select { width:100%; }
.org-danger { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line,#eef0f3); }

.org-warn { margin:10px 0 4px; padding:8px 10px; border-radius:8px;
  background:var(--warn-bg,#fffaf0); border:1px solid var(--warn-border,#e6c07b);
  font-size:12px; line-height:1.5; }

/* In the projects view a department means "someone from here is on it" —
   a project cannot itself be granted to a department, so it is drawn more
   faintly than a real membership edge. */
.org-edge.spans { stroke:#0d8f7a; stroke-dasharray:2 5; opacity:.55; }

.edge-key.spans { border-top:2px dotted #0d8f7a; opacity:.7; }

/* ── personal MCP connectors ─────────────────────────────────── */
.conn-mint-row { display:flex; gap:10px; margin:6px 0 10px; }
.conn-mint-row input { flex:1; min-width:0; }
.conn-secret { border:1px solid #e8b93140; background:#fdf8e9; border-radius:10px;
  padding:14px 16px; margin-top:10px; }
.conn-item { margin:12px 0; }
.conn-item label { display:block; font-weight:600; font-size:.85rem; margin-bottom:4px; }
.conn-copy-row { display:flex; gap:8px; align-items:flex-start; }
.conn-copy-row code { flex:1; min-width:0; overflow-wrap:anywhere; background:#fff;
  border:1px solid #e5e7eb; border-radius:6px; padding:6px 8px; font-size:.78rem; }
.conn-revoke-row { display:flex; gap:10px; align-items:center; margin-top:10px; }
.conn-warn { color:#9a5b00; background:#fff4e0; border-radius:6px; padding:6px 10px; margin:8px 0; }

/* API keys: the row is the control — click it to configure the key. */
.key-row { cursor: pointer; }
.key-row:hover { background: var(--bg-3); }
.key-row .row-actions { color: var(--text-2); align-self: center; }
/* wider than a confirm dialog: this one carries seven switches, each with a
   line of explanation, and at 380px every label wraps to three lines */
.modal.key-modal { max-width: 560px; }
.modal.key-modal .vlm-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.modal.key-modal .acl-pick { display: flex; flex-wrap: wrap; gap: 8px 16px; }

/* ── app connectors (external accounts) ────────────────────────────────── */
.appconn-grid { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.appconn-card { display: flex; flex-direction: column; gap: 8px; }
.appconn-card.appconn-off { opacity: .55; }
.appconn-head { display: flex; align-items: center; gap: 8px; }
.appconn-icon { font-size: 20px; }
.appconn-stat.ok  { color: var(--ok);  font-size: 12px; margin-left: auto; }
.appconn-stat.err { color: var(--err); font-size: 12px; margin-left: auto; }
.appconn-toggles { display: flex; flex-direction: column; gap: 4px; }
.appconn-toggle  { font-size: 13px; display: flex; gap: 6px; align-items: center; }
.appconn-actions { display: flex; gap: 8px; margin-top: auto; }
.sync-block   { border-top: 1px solid var(--border-soft); margin-top: 10px; padding-top: 8px; }
.sync-form    { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.sync-form select { width: 100%; }
.sync-actions { display: flex; gap: 8px; align-items: center; }

/* The organisation's ingestion connector. Visually distinct from the personal
   cards on purpose — it is not "your Claude", and a card that looked the same
   would invite somebody to mint one for themselves. */
.bot-card       { border-left: 3px solid var(--warn); }
.bot-card h3    { display: flex; align-items: center; gap: 8px; }
.bot-badge      { font-size: 11px; font-weight: 700; text-transform: uppercase;
                  letter-spacing: .06em; color: var(--warn);
                  background: var(--warn-light); border-radius: 999px;
                  padding: 2px 8px; }

/* ── Chats ─────────────────────────────────────────────────────────────────
   A chat card leads with the two things that identify a conversation to a
   human — who is in it and when it ran — and keeps the filing, audience and
   sync state one click away. The roster is the SUBTITLE rather than a column:
   in a 40-person meeting thread it is the longest field on the row, and a
   column that wide pushes everything else off a laptop screen. */
.chat-counts { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }
.chat-count  { font-size: 13px; color: var(--text-4); }
.chat-count b { color: var(--text-2); font-weight: 700; margin-right: 3px; }

.chat-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chat-filters input[type=search] { flex: 1 1 200px; min-width: 160px; }
.chat-scope { font-size: 12px; color: var(--text-4); display: flex;
              align-items: center; gap: 5px; white-space: nowrap; }

.chat-card { padding: 12px 16px; margin-bottom: 8px; }
.chat-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline;
             justify-content: space-between; cursor: pointer; }
.chat-title { font-weight: 700; font-size: 14px; color: var(--text-2);
              display: flex; align-items: center; gap: 8px; }
.chat-kind  { font-size: 11px; font-weight: 700; text-transform: uppercase;
              letter-spacing: .04em; color: var(--text-4); background: var(--bg-3);
              border: 1px solid var(--border-soft); border-radius: 6px; padding: 1px 6px; }
.chat-meta  { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
              font-size: 12px; color: var(--text-4); }
.chat-who   { margin-top: 3px; overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; }
.chat-detail { border-top: 1px dashed var(--border-soft); margin-top: 10px;
               padding-top: 10px; }

/* two columns, label then value: the labels are short and the values vary
   wildly in length, so a grid keeps them aligned where a table would not wrap */
.chat-facts { display: grid; grid-template-columns: max-content 1fr;
              gap: 4px 14px; margin: 0 0 8px; font-size: 13px; }
.chat-facts dt { color: var(--text-4); }
.chat-facts dd { margin: 0; color: var(--text-2); }
.chat-facts .mono { font-family: var(--mono); font-size: 12px; }

.chat-redaction { font-size: 12px; color: var(--warn); background: var(--warn-light);
                  border: 1px solid var(--warn); border-radius: 8px;
                  padding: 6px 10px; margin: 6px 0; }
.chat-error { font-size: 12px; color: var(--err); background: var(--err-light);
              border-radius: 8px; padding: 6px 10px; margin: 6px 0; }
.chat-filing { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.chat-filing select { min-width: 220px; }
.chat-filing p { flex-basis: 100%; margin: 2px 0 0; }
/* Used by every chat's status. There was no rule for it anywhere in this
   stylesheet, so "in the knowledge base", "waiting" and "failed" all rendered
   as identical unstyled text and the one that matters -- failed -- did not
   stand out at all. The browser test read textContent, which is exactly why it
   passed while the view was unreadable. */
.pill { display: inline-block; font-size: 11px; font-weight: 700;
        line-height: 1.6; padding: 0 8px; border-radius: 999px;
        border: 1px solid var(--border); background: var(--bg-3);
        color: var(--text-4); white-space: nowrap; }
.pill.ok   { background: var(--ok-light);   border-color: var(--ok);   color: #027a48; }
.pill.warn { background: var(--warn-light); border-color: var(--warn); color: #b54708; }
.pill.err  { background: var(--err-light);  border-color: var(--err);  color: #b42318; }

.tagchip { display: inline-block; font-size: 11px; font-weight: 600;
           background: var(--bg-3); border: 1px solid var(--border-soft);
           border-radius: 6px; padding: 1px 6px; color: var(--text-3); }


/* ── the chat-sync set-up dialog ───────────────────────────────────────────
   A group chat's audience cannot be derived - nothing in a roster says whether
   "AI Team" is a department or a project - so somebody has to say, and the only
   moment they are reliably present is when they turn sync on. This is that
   moment, which is why it is a dialog and not a panel somebody may never open. */
.modal.chatsetup { max-width: 720px; }
.chatsetup-busy { display: flex; gap: 12px; align-items: center; padding: 14px 2px; }
.chatsetup-busy p { margin: 0; }
.spinner { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
           border: 2px solid var(--border); border-top-color: var(--text-3);
           animation: kbspin .8s linear infinite; }
@keyframes kbspin { to { transform: rotate(360deg); } }

/* Scrolls INSIDE the card: an account with forty group chats must not push the
   Turn on sync button below the fold, where it reads as "there is no way out". */
.chatsetup-list { max-height: 44vh; overflow-y: auto; margin: 4px 0 10px;
                  border: 1px solid var(--border-soft); border-radius: 10px; }
.chatsetup-row { display: grid; grid-template-columns: 1fr 250px; gap: 10px;
                 align-items: start; padding: 10px 12px;
                 border-bottom: 1px solid var(--border-soft); }
.chatsetup-row:last-child { border-bottom: 0; }
.chatsetup-name { font-weight: 700; font-size: 13px; color: var(--text-2); }
.chatsetup-facts { font-size: 12px; color: var(--text-4); margin-top: 2px; }
.chatsetup-row select { width: 100%; }
.chatsetup-empty { padding: 14px; font-size: 13px; color: var(--text-4); }
@media (max-width: 620px) { .chatsetup-row { grid-template-columns: 1fr; } }

/* The mail correspondent picker rides the chatsetup shell; a row here is one
   checkbox + a person, not a chat + an audience editor. */
.mailpick-row { display: flex; gap: 10px; align-items: flex-start;
                padding: 10px 12px; cursor: pointer;
                border-bottom: 1px solid var(--border-soft); }
.mailpick-row:last-child { border-bottom: 0; }
.mailpick-row input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }
.mailpick-who { min-width: 0; }
.mailpick-row.disabled { cursor: default; opacity: .55; }

/* The SharePoint pickers ride the chatsetup shell too. A site is a heading,
   a library a row, and the one open config panel indents beneath its row. */
.sp-lib { padding: 12px 14px; margin-bottom: 10px; }
.sp-lib-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.sp-lib-aud { margin-top: 4px; }
.sp-lib-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sp-site { padding: 8px 0; }
.sp-site-name { font-weight: 700; font-size: 13px; color: var(--text-2);
                padding: 6px 12px 4px; }
.sp-librow { border-bottom: 1px solid var(--border-soft); }
.sp-librow:last-child { border-bottom: 0; }
.sp-librow-head { display: flex; gap: 10px; align-items: center;
                  padding: 8px 12px; flex-wrap: wrap; }
.sp-librow-head .chatsetup-facts { flex: 1; min-width: 0; }
.sp-config { padding: 4px 12px 12px 24px; }
.sp-config-sec { margin-top: 10px; font-size: 13px; }
.sp-modes { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.sp-modes label { display: block; cursor: pointer; }
.sp-types { display: flex; gap: 4px 12px; flex-wrap: wrap; margin-top: 6px; }
.sp-types label { cursor: pointer; font-size: 12.5px; white-space: nowrap; }

/* ── the audience editor ───────────────────────────────────────────────────
   Replaces a <select multiple>, which hid the whole decision behind ctrl-click
   and showed nothing about what was currently chosen. Chips are legible at a
   glance and each carries its own remove; adding is a search, because the
   People list is the staff directory and nobody scrolls that. */
.aud { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.aud-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aud-empty { font-size: 12px; color: var(--text-4); font-style: italic; }
.aud-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  font-weight: 600; padding: 2px 4px 2px 9px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--border); color: var(--text-2);
}
/* a person reads differently from a place, and the difference matters:
   one is "the sales team", the other is "Uzair, personally" */
.aud-chip.person { background: #eef4ff; border-color: #b2ccff; color: #1c4ed8; }
.aud-x {
  border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1;
  padding: 0 3px; color: var(--text-4); border-radius: 999px;
}
.aud-x:hover { background: var(--err-light); color: var(--err); }
.aud-add {
  border: 1px dashed var(--border); background: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-3);
  padding: 3px 10px; border-radius: 999px;
}
.aud-add:hover { border-color: var(--teal); color: var(--teal-dark); }

/* Appended to <body>, not to the row: the dialog's list scrolls and clips, so
   a menu nested inside a row is cut off at the first boundary it crosses. */
.aud-menu {
  position: fixed; z-index: 120; width: 280px; max-height: 250px;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-md);
}
.aud-search { margin: 8px; width: calc(100% - 16px); font-size: 13px; }
.aud-menu-list { overflow-y: auto; padding-bottom: 6px; }
.aud-sec {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-4); padding: 8px 12px 3px;
}
.aud-opt {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  cursor: pointer; font-size: 13px; color: var(--text-2); padding: 5px 12px;
}
.aud-opt:hover { background: var(--bg-3); }
.aud-opt.self { font-weight: 700; }
.aud-none { padding: 10px 12px; font-size: 12px; color: var(--text-4); }

/* the editor takes the full width of a set-up row now, so the row is one
   column with the chips under the chat's name on a narrow screen */
.chatsetup-row .aud { align-items: flex-start; }
.chat-filing .aud { flex: 1 1 260px; }