/* Polycarp admin — brand board 2026-09-02: one product, one design sphere.
   Navy #18304B on parchment #F4EFE6; sage for good news, gold for accents;
   Cormorant Garamond headings, Inter body. Same tokens the site uses. */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink: #18304B; --paper: #F4EFE6; --card: #fff;
  --line: #D8D2C8; --mut: #6f6a60; --ok: #4F7C78; --warn: #b3382c;
  --gold: #C49A4A; --charcoal: #252A2E;
  --serif: "Cormorant Garamond", Georgia, serif;
}
body {
  font: 15px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--paper); color: var(--charcoal);
}
h1, h2, h3 { font-family: var(--serif); color: var(--ink); font-weight: 600; }
h1 { font-size: 30px; }
h2 { font-size: 23px; }
.brand .mark { height: 26px; width: auto; color: var(--paper); }
.brand { display: flex; align-items: center; gap: 9px; }
.brand .wordmark {
  font-family: var(--serif); letter-spacing: 0.18em; text-transform: uppercase;
  font-size: 17px; font-weight: 600;
}
code { font-size: 13px; background: var(--paper); padding: 1px 5px; border-radius: 5px; }
.muted { color: var(--mut); }
.error { color: var(--warn); margin: 8px 0; }
.flash {
  background: #e4eeed; color: var(--ok);
  padding: 9px 14px; border-radius: 9px; margin-bottom: 16px;
}

/* login */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 36px; width: 320px; display: flex; flex-direction: column; gap: 12px;
  text-align: center;
}
.login-card h1 { font-size: 1.4em; }

/* chrome */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ink); color: #fff; padding: 12px 24px;
}
.brand, .brand a { color: #fff; font-weight: 650; text-decoration: none; }
button {
  border: 0; border-radius: 9px; background: var(--ink); color: #fff;
  padding: 9px 18px; font: inherit; cursor: pointer;
}
button.ghost { background: transparent; border: 1px solid rgba(255,255,255,.35); }

main { max-width: 960px; margin: 32px auto; padding: 0 20px; }
h1 { margin-bottom: 18px; }
h2 { margin-bottom: 10px; }

/* dashboard cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px; color: inherit; text-decoration: none;
}
.card:hover { border-color: var(--gold); }
.card-head { display: flex; justify-content: space-between; align-items: center; }
.card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.card dt { font-size: 12px; color: var(--mut); }
.card dd { font-weight: 600; }
.pill {
  font-size: 12px; padding: 2px 10px; border-radius: 999px; font-weight: 600;
}
.pill.on { background: #e4eeed; color: var(--ok); }
.pill.off { background: #fbeae8; color: var(--warn); }

/* panels + forms */
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; margin-top: 24px;
}
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.grid label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--mut); }
.grid label.wide { grid-column: 1 / -1; }
.grid label.check { flex-direction: row; align-items: center; color: var(--ink); }
.grid button { grid-column: 1 / -1; justify-self: start; }
input, select, textarea {
  font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px;
  background: #fff;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ok); }

.test-link { font-size: 14px; font-weight: 400; margin-left: 10px; }

/* test bench */
.snippet {
  background: var(--charcoal); color: #efe9db; border-radius: 10px;
  padding: 12px 14px; font-size: 13px; overflow-x: auto; margin-top: 6px;
}

/* transcript — a chat pane: bounded height, scrolls, pinned to the newest */
.transcript {
  display: flex; flex-direction: column; gap: 12px; margin-top: 14px;
  max-height: 62vh; overflow-y: auto; padding-right: 6px;
}
.composer-row { display: flex; gap: 8px; margin-top: 8px; }
.composer-row textarea { flex: 1; resize: none; }
.composer-row button { align-self: flex-end; }
.turn { max-width: 75%; padding: 10px 14px; border-radius: 12px; }
.turn.user { align-self: flex-end; background: var(--ink); color: #fff; }
.turn.assistant { align-self: flex-start; background: var(--paper); }
.turn.human { border-left: 3px solid var(--ok); }
.turn.human .who { color: var(--ok); opacity: 1; font-weight: 600; }
.turn .who { font-size: 11px; opacity: .7; display: block; margin-bottom: 3px; }
.turn p { white-space: pre-wrap; }

/* escalation state + reply confirmation */
.ok { color: var(--ok); margin: 8px 0; }
.chip {
  display: inline-block; font-size: 12px; padding: 2px 10px;
  border-radius: 999px; border: 1px solid var(--line); margin-right: 6px;
}
.chip.pending { border-color: var(--warn); color: var(--warn); }
.chip.replied { border-color: var(--ok); color: var(--ok); }

/* tables */
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th { text-align: left; font-size: 12px; color: var(--mut); padding: 6px 10px; }
td { padding: 8px 10px; border-top: 1px solid var(--line); }
.turn .shared-pages { font-size: 11px; opacity: .75; margin-top: 6px;
  white-space: normal; }
.turn .shared-pages a { color: inherit; text-decoration: underline; }

/* Operate view (2026-08-19): new-since-last-look markers */
.chip.new { border-color: var(--gold); color: #9a7526; }
.row-new td { background: #f8f1e2; }
.head-links { font-weight: 400; }

/* Mobile (2026-08-19): the admin is used from a phone — panels never force
   the page wide; tables scroll inside their own strip instead. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 620px; }
@media (max-width: 640px) {
  main { margin: 16px auto; padding: 0 10px; }
  .panel { padding: 14px; margin-top: 16px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  input[type=file] { width: 100%; min-width: 0; }
  .topbar { padding: 10px 12px; font-size: 14px; }
  .turn { max-width: 92%; }
  h1 { font-size: 26px; }
  h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 21px; }
  .test-link { margin-left: 0; }
  /* nothing may widen the page: tables scroll in their strip, code wraps */
  .table-scroll table { min-width: 560px; }
  .table-scroll table.stack { min-width: 0; }
  table:not(.stack) { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  code { overflow-wrap: anywhere; }
  pre, .snippet { max-width: 100%; overflow-x: auto; }
  .card-head { flex-wrap: wrap; gap: 4px 8px; }
  .cards { grid-template-columns: 1fr; }
  .knowledge-actions { flex-wrap: wrap; }
  .kv div { grid-template-columns: 96px 1fr; }
  /* touch: 16px inputs (iOS zooms the page on focus below that), 44px targets */
  input, select, textarea { font-size: 16px; max-width: 100%; min-width: 0; }
  select { width: 100%; }
  button, .btn, .btn-summary { min-height: 42px; }
  .composer-row { flex-direction: column; }
  .composer-row button { align-self: stretch; }
  /* the lists a customer reads one-handed: rows become cards */
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { display: none; }
  table.stack tr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-top: 8px; background: var(--card); }
  table.stack tr.row-new { background: #f8f1e2; }
  table.stack td { border: 0; padding: 2px 0; }
  table.stack td.row-new { background: transparent; }
  table.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--mut); font-size: 12px; }
  table.stack td.lead { font-weight: 600; }
  table.stack td:empty { display: none; }
  table.stack td.knowledge-actions { display: flex; gap: 14px; padding-top: 6px; }
  table.stack td[data-label="Chunks"], table.stack td[data-label="Added"] { display: inline-block; width: auto; margin-right: 14px; }
}

/* breadcrumb home carries the mark */
.crumb-home { display: inline-flex; align-items: center; gap: 8px; }
.crumb-home .mark { height: 22px; width: auto; color: var(--paper); }
/* login door */
.login-mark .mark { height: 64px; width: auto; color: var(--ink); margin: 0 auto 6px; }
.login-card h1.wordmark {
  font-family: var(--serif); letter-spacing: 0.2em; text-transform: uppercase;
  font-size: 22px;
}

/* ── shell: sidebar + content (2026-09-02) ─────────────────────────────── */
body.shell {
  /* minmax(0, 1fr), not 1fr: a bare 1fr can never shrink below its content,
     so one wide table stretched main to 700-950px and the phone zoomed the
     whole admin out (found 2026-09-22, measured at 390px) */
  display: grid; grid-template-columns: 225px minmax(0, 1fr); min-height: 100vh;
}
body.shell main, body.shell .side { min-width: 0; }
.side {
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; gap: 20px;
  padding: 22px 18px; position: sticky; top: 0; height: 100vh;
}
.side .brand { color: var(--paper); text-decoration: none; }
.side .wordmark {
  font-family: var(--serif); letter-spacing: 0.18em; text-transform: uppercase;
  font-size: 17px; font-weight: 600;
}
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  color: var(--paper); opacity: 0.75; text-decoration: none;
  padding: 8px 12px; border-radius: 9px; font-size: 15px;
}
.side-nav a:hover { opacity: 1; background: rgba(244, 239, 230, 0.08); }
.side-nav a.here {
  opacity: 1; background: rgba(244, 239, 230, 0.14);
  border-left: 3px solid var(--gold); padding-left: 9px;
}
.side-bot { border-top: 1px solid rgba(244, 239, 230, 0.18); padding-top: 16px; }
.side-bot-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 600; font-size: 14px; margin-bottom: 8px; padding: 0 12px;
}
.side-nav.sub a { font-size: 14px; }
.side-out { margin-top: auto; }
body.shell main { max-width: 1020px; margin: 28px auto; padding: 0 26px; width: 100%; }

/* phone chrome: hidden on desktop */
.phone-bar, .phone-tabs, .drawer-scrim, .drawer-close, .drawer-button { display: none; }

/* phone: a left DRAWER behind a menu button (2026-09-23); the current
   agent's tabs stay in view as a slim row. The checkbox #drawer-toggle
   drives it — no JavaScript needed. */
@media (max-width: 760px) {
  body.shell { grid-template-columns: minmax(0, 1fr); }
  .phone-bar {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30;
    background: var(--ink); color: var(--paper); padding: 8px 10px; min-height: 52px;
  }
  .phone-bar .brand { gap: 7px; }
  .phone-bar .brand .mark { height: 24px; }
  .phone-bar .wordmark { font-size: 15px; letter-spacing: 0.16em; }
  .phone-bot { margin-left: auto; font-size: 13px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
  .drawer-button {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px; margin: -8px 0 -8px -4px;
    border-radius: 9px; cursor: pointer; min-width: 44px; min-height: 44px; justify-content: center;
  }
  .drawer-lines { display: inline-flex; flex-direction: column; gap: 4px; }
  .drawer-lines i { display: block; width: 20px; height: 2px; background: var(--paper); border-radius: 2px; }
  .phone-tabs {
    display: flex; gap: 2px; overflow-x: auto; background: var(--ink); padding: 0 8px 6px;
    position: sticky; top: 52px; z-index: 29; -webkit-overflow-scrolling: touch;
  }
  .phone-tabs a {
    color: var(--paper); opacity: 0.75; text-decoration: none; font-size: 14px;
    padding: 8px 11px; white-space: nowrap; border-bottom: 2px solid transparent;
  }
  .phone-tabs a.here { opacity: 1; border-bottom-color: var(--gold); }
  /* the drawer */
  .side {
    display: flex; position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: min(300px, 84vw); height: 100vh;
    flex-direction: column; gap: 18px; padding: 18px 16px; overflow-y: auto;
    transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: none;
  }
  .side-nav, .side-nav.sub { flex-direction: column; }
  .side-bot { display: block; }
  .side-bot-name { display: flex; }
  .drawer-close {
    display: block; position: absolute; top: 10px; right: 10px; font-size: 26px; line-height: 1;
    padding: 6px 12px; cursor: pointer; opacity: 0.8;
  }
  .drawer-scrim {
    display: block; position: fixed; inset: 0; z-index: 35; background: rgba(24, 48, 75, 0.45);
    opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
  }
  .drawer-toggle:checked ~ .side { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .drawer-toggle:checked ~ .drawer-scrim { opacity: 1; pointer-events: auto; }
  .side-out { margin-top: auto; }
  .side-who { display: block; }
  body.shell main { margin: 14px auto; padding: 0 12px; }
}
}

/* rail bot tree */
.side-bots { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 0 10px; }
.side-bots-item {
  display: flex; align-items: center; gap: 8px;
  color: var(--paper); opacity: 0.7; text-decoration: none;
  font-size: 14px; padding: 6px 12px; border-radius: 8px;
}
.side-bots-item:hover { opacity: 1; background: rgba(244, 239, 230, 0.08); }
.side-bots-item.here { opacity: 1; background: rgba(244, 239, 230, 0.14); }
.side-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.side-dot.on { background: var(--ok); }
.side-dot.off { background: rgba(244, 239, 230, 0.35); }
.side-badge {
  margin-left: auto; background: var(--gold); color: var(--ink);
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 7px;
}
.side-bots .side-nav.sub { margin-left: 22px; }

/* fold-away creation form: a button until you mean it */
.btn-summary {
  display: inline-block; cursor: pointer; list-style: none;
  border-radius: 9px; background: var(--ink); color: var(--paper);
  padding: 9px 18px; font-weight: 500; user-select: none;
}
.btn-summary::-webkit-details-marker { display: none; }
details[open] > .btn-summary { opacity: 0.7; }

/* Bots disclosure row + arrow */
.side-row { display: flex; align-items: center; }
.side-row > a { flex: 1; }
.side-arrow {
  background: none; border: 0; color: var(--paper); opacity: 0.6;
  cursor: pointer; font-size: 13px; padding: 6px 10px; border-radius: 8px;
  transition: transform 0.15s ease;
}
.side-arrow:hover { opacity: 1; background: rgba(244, 239, 230, 0.08); }
.side-arrow.open { transform: rotate(180deg); }

/* the hidden attribute must beat the flex display — without this the
   disclosure toggled state invisibly (found live: list stuck open) */
.side-bots[hidden] { display: none; }

/* iOS-style active/paused toggle (2026-09-03) — pure CSS over a real
   checkbox, so the form semantics and no-JS submit are unchanged. */
.switch-row { flex-direction: row !important; align-items: center; gap: 12px; color: var(--charcoal) !important; }
.switch { position: relative; display: inline-flex; flex-shrink: 0; }
.switch input {
  position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.switch-track {
  width: 46px; height: 27px; border-radius: 999px;
  background: var(--stone); transition: background 0.2s ease; display: block;
}
.switch-knob {
  position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28);
  transition: transform 0.2s ease;
}
.switch input:checked + .switch-track { background: var(--ok); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(19px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px rgba(79,124,120,.4); }
.switch-label { font-size: 14px; }

/* who is signed in (2026-09-07: customer logins) */
.side-who { display: block; font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.link { background: none; color: var(--ink); padding: 0; text-decoration: underline; font-size: inherit; }
button.danger { background: var(--warn); }
.knowledge-actions { display: flex; gap: 10px; align-items: center; }
.knowledge-actions form { display: inline; }

/* crawl progress (2026-09-07) */
.bar { height: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.bar-fill { height: 100%; background: var(--ok); transition: width .4s ease; }

/* Account page (2026-09-10): key/value summary + the destructive button */
.kv { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.kv div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.kv dt { font-size: 12px; color: var(--mut); padding-top: 2px; }
.kv dd { font-weight: 500; }
button.danger { background: var(--warn); color: var(--paper); }

/* Set-up checklist (2026-09-21): the sequence, on a customer's Today. */
.checklist { margin: 4px 0 10px 22px; }
.checklist li { margin-bottom: 8px; }
.checklist li.done { color: var(--muted, #6b6b6b); }
.checklist li.done a { text-decoration: line-through; }
.checklist li.done::marker { content: "✓ "; }

/* ── The agent dashboard (2026-09-24) ──────────────────────────────────── */
.overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.stat { background: var(--paper); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat .n { font-family: var(--serif); font-size: 30px; line-height: 1.05; color: var(--ink); font-weight: 600; }
.stat .l { font-size: 13px; color: var(--charcoal); }
.stat .d { font-size: 12px; color: var(--mut); margin-top: 4px; }
.spark { color: var(--ok); display: block; max-width: 100%; height: 36px; }
.spark-stat .d { margin-top: 2px; }
.chip.ok { border-color: var(--ok); color: var(--ok); }
.chip.warn { border-color: var(--gold); color: #9a7526; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.inbox-head h2 { margin-bottom: 0; }
.filters { display: flex; gap: 2px; flex-wrap: wrap; }
.filters a { font-size: 13px; color: var(--mut); text-decoration: none; padding: 6px 10px; border-radius: 999px; }
.filters a.here { background: var(--ink); color: var(--paper); }
.filters a:hover:not(.here) { background: var(--paper); color: var(--ink); }
.inbox-body { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 16px; margin-top: 14px; min-height: 420px; }
.conv-list { list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 72vh; overflow-y: auto; padding-right: 4px; }
.conv { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.conv > a[data-pane] { display: block; padding: 10px 12px 10px 14px; color: inherit; text-decoration: none; }
.conv.new { border-left: 3px solid var(--gold); }
.conv.sel { border-color: var(--ink); background: var(--paper); }
.conv:hover { border-color: var(--ink); }
.conv-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mut); }
.conv-who { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-top time { margin-left: auto; white-space: nowrap; }
.conv-title { margin-top: 4px; font-weight: 500; color: var(--charcoal); overflow-wrap: anywhere; }
.conv-preview { font-size: 13px; color: var(--mut); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.conv-meta { font-size: 12px; color: var(--mut); margin-top: 4px; overflow-wrap: anywhere; }
.conv-person { position: absolute; right: 12px; bottom: 8px; font-size: 11px; color: var(--mut); text-decoration: none; opacity: 0; }
.conv:hover .conv-person, .conv.sel .conv-person { opacity: 1; }
.pane { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); min-height: 420px; position: sticky; top: 20px; height: 72vh; overflow: hidden; }
.pane iframe { width: 100%; height: 100%; border: 0; background: var(--paper); }
.pane-empty { display: grid; place-items: center; height: 100%; padding: 24px; text-align: center; }
.pane-empty[hidden] { display: none; }
body.bare { background: var(--paper); }
body.bare main { max-width: none; margin: 0; padding: 10px 12px; }
.pane-panel { margin-top: 0; }
.ids { display: inline; }
.ids summary { display: inline; cursor: pointer; text-decoration: underline dotted; }
.ids[open] summary { display: block; }
.stood-on { display: inline-block; font-size: 11px; margin-top: 6px; opacity: .8; }
.stood-on.ok { color: var(--ok); }
.stood-on.none { color: #9a7526; }
.turn.user .stood-on { display: none; }
.asked { margin: 6px 0 0 18px; }
.asked li { margin-bottom: 6px; overflow-wrap: anywhere; }
@media (max-width: 979px) {
  .inbox-body { grid-template-columns: minmax(0, 1fr); }
  .pane { display: none; }
  .conv-list { max-height: none; overflow: visible; }
  .conv-person { opacity: 1; }
}
@media (max-width: 640px) {
  .overview { grid-template-columns: 1fr 1fr; }
  .stat .n { font-size: 24px; }
  .spark-stat { grid-column: 1 / -1; }
}

/* explain this answer (2026-09-25) */
button.explain { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 11px; color: var(--ok); text-decoration: underline dotted; }
.cited { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.cite { border-left: 3px solid var(--line); padding: 4px 10px; background: rgba(255,255,255,.6); border-radius: 0 8px 8px 0; }
.cite.replaced { border-left-color: var(--gold); }
.cite.gone { border-left-color: var(--warn); }
.cite-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 500; }
.cite-head a { color: var(--ink); }
.cite-text { margin-top: 4px; color: var(--charcoal); white-space: pre-wrap; font-size: 12.5px; max-height: 9em; overflow: hidden; }
.turn.assistant .cited { background: transparent; }

/* unanswered by topic + disagreements (2026-09-25) */
.topics { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.topic summary { cursor: pointer; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.topic .asked { margin-top: 6px; }
.topic.single { font-size: 14px; padding-left: 2px; overflow-wrap: anywhere; }
.disagree { border-color: var(--gold); }
.disagreement { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.claims { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 10px; align-items: stretch; }
.claim { background: var(--paper); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.claim p { margin-top: 4px; overflow-wrap: anywhere; }
.claim-where { font-size: 12px; color: var(--mut); overflow-wrap: anywhere; }
.claim-where a { color: var(--ink); }
.versus { align-self: center; font-family: var(--serif); font-size: 26px; color: #9a7526; }
.why { font-size: 13px; margin-top: 6px; }
.disagree-actions { display: flex; gap: 14px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.disagree-actions form { display: inline; }
button.ghost-dark { background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 7px 14px; }
@media (max-width: 640px) {
  .claims { grid-template-columns: minmax(0,1fr); }
  .versus { justify-self: center; font-size: 20px; }
}

/* answers from your team (2026-09-26) */
.answers .inline-form { margin: 6px 0 4px; }
.suggestion { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.suggestion .grid { margin-top: 8px; }
.sugg-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sugg-actions { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; }
.sugg-src { margin-top: 8px; font-size: 13px; }
.sugg-src summary { cursor: pointer; color: var(--mut); }
.sugg-src blockquote { border-left: 3px solid var(--line); padding: 4px 10px; margin: 6px 0; color: var(--charcoal); white-space: pre-wrap; overflow-wrap: anywhere; }
.approved-entry { border-top: 1px solid var(--line); padding: 10px 0; }
.approved-entry summary { cursor: pointer; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid textarea { width: 100%; }

/* automations (2026-09-26) */
.automation { border-top: 1px solid var(--line); padding: 12px 0; }
.automation.off { opacity: .6; }
.auto-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.auto-rule { margin-top: 4px; overflow-wrap: anywhere; }
.auto-runs { list-style: none; margin-top: 6px; font-size: 12px; color: var(--mut); }
.auto-runs li.bad { color: var(--warn); }
.auto-actions { display: flex; gap: 14px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.auto-actions form { display: inline; }
.auto-secret { margin-top: 8px; font-size: 13px; }
.auto-secret summary { cursor: pointer; color: var(--mut); }
.auto-secret code.secret { overflow-wrap: anywhere; }
.error-inline { color: var(--warn); }
#auto-keywords[hidden] { display: none; }

/* procedures (2026-09-26) */
.proc-run { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: var(--paper); }
.approval { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
fieldset { border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; }
fieldset legend { font-size: 13px; color: var(--mut); padding: 0 4px; }
fieldset label.check { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; color: var(--charcoal); font-size: 14px; }
fieldset input[size] { width: auto; }

.steps-list { margin: 8px 0 10px 22px; }
.steps-list li { margin-bottom: 6px; }

/* Accounts & teams (2026-09-28) */
.acct-totals { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 12px 0 8px; }
.acct-totals div { background: var(--paper); border-radius: 10px; padding: 10px 12px; }
.acct-totals .n { display: block; font: 600 24px var(--serif); color: var(--ink); }
.acct-totals .l { font-size: 12px; color: var(--mut); }
.acct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.acct-grid .panel { margin: 0; }
.acct-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acct-head h2 { margin: 0; }
.pill.warn { background: #fdf3df; color: #8a6414; }
.pill.muted { background: var(--paper); color: var(--mut); }
.acct-plan { margin: 6px 0 10px; color: var(--mut); }
.acct-due { float: right; color: var(--ink); font-weight: 600; }
.acct-attn { margin: 0 0 10px 18px; color: var(--warn); font-size: 14px; }
.acct-bar { height: 6px; background: var(--paper); border-radius: 4px; overflow: hidden; }
.acct-bar span { display: block; height: 100%; background: var(--ok); }
.acct-links { margin: 12px 0 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.btn-lite { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; text-decoration: none; color: var(--ink); font-size: 14px; }
.btn-lite:hover { border-color: var(--ok); }
.acct-ops summary { cursor: pointer; color: var(--mut); font-size: 14px; margin-top: 6px; }
@media (max-width: 1100px) { .acct-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); } .acct-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .acct-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acct-due { float: none; display: block; } }

/* Team — one card per person (2026-09-28) */
.people { display: grid; gap: 12px; margin-top: 14px; }
.person { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--card); }
.person-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.person-head .who strong { font-size: 16px; color: var(--ink); }
.person-head .chip { margin-left: 6px; }
.person-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.person-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--mut); }
.person-form input, .person-form select { width: 100%; min-width: 0; }
.person-form .ro { font-size: 14px; color: var(--charcoal); padding: 8px 0; }
.limit-row { display: flex; gap: 6px; }
.limit-row .amt { display: none; max-width: 90px; }
.limit-row:has(option[value="upto"]:checked) .amt { display: block; }
.person-ro { display: flex; gap: 28px; margin-top: 10px; font-size: 14px; }
.person-ro dt { font-size: 12px; color: var(--mut); }
.person-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.person-actions { display: flex; gap: 12px; align-items: center; }
.person-actions form { margin: 0; }
.person-actions button.link.danger, button.link.danger { background: none; border: none; color: var(--warn); padding: 6px 4px; text-decoration: underline; box-shadow: none; }
@media (max-width: 900px) { .person-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .person-form { grid-template-columns: minmax(0, 1fr); } .person-foot { flex-direction: column; align-items: stretch; } .person-actions { justify-content: space-between; } }
.team-seats { margin: 4px 0 2px; }
.team-help { margin: 6px 0 4px; font-size: 14px; }
.team-help summary { cursor: pointer; color: var(--ok); }
.team-help ul { margin: 8px 0 0 18px; display: grid; gap: 6px; color: var(--charcoal); }

/* Account — billing (2026-09-28) */
.bill-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.bill-strip div { background: var(--paper); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.bill-strip .l { font-size: 12px; color: var(--mut); }
.bill-strip .n { font: 600 22px var(--serif); color: var(--ink); }
.bill-strip .s { font-size: 13px; color: var(--mut); }
.bill-note { margin: 8px 0; }
.bill-terms { margin: 10px 0 14px 18px; display: grid; gap: 5px; font-size: 14px; }
.plan-pick { margin-top: 10px; }
.plan-pick > summary { cursor: pointer; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 6px 0 10px; }
.plan-card { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--card); }
.plan-card.featured { border-color: var(--ok); box-shadow: 0 10px 28px rgba(24, 48, 75, 0.08); }
.plan-top { display: flex; justify-content: space-between; align-items: baseline; }
.plan-top strong { font: 600 20px var(--serif); color: var(--ink); }
.plan-top .price { font: 600 24px var(--serif); color: var(--ink); }
.plan-top .price small { font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 400; color: var(--mut); }
.plan-card ul { margin: 0 0 0 16px; display: grid; gap: 4px; font-size: 14px; }
.plan-note { font-size: 13px; color: var(--charcoal); background: rgba(196, 154, 74, 0.12); border-radius: 8px; padding: 8px 10px; margin: 0; }
.plan-buttons { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.plan-buttons button { width: 100%; }
p.small, .muted.small { font-size: 13px; }
@media (max-width: 900px) { .bill-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan-cards { grid-template-columns: minmax(0, 1fr); } }
.panel h2 .pill { font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 500; vertical-align: middle; margin-left: 6px; }
.agents-field { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; }
.agents-field .lbl { font-size: 12px; color: var(--mut); width: 100%; }
.agents-field select { width: auto; }
.agent-picks { display: none; flex-wrap: wrap; gap: 6px 14px; }
.agents-field:has(option[value="some"]:checked) .agent-picks { display: flex; }
.person-form .agent-picks .pick { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--charcoal); }
.agent-picks .pick input { width: auto; }

/* Customers (2026-09-28) */
.cust-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.cust-tab { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; text-decoration: none; color: var(--charcoal); font-size: 14px; }
.cust-tab .n { color: var(--mut); margin-left: 4px; }
.cust-tab.here { background: var(--ink); color: #fff; border-color: var(--ink); }
.cust-tab.here .n { color: rgba(255,255,255,.75); }
.cust-tab.warn:not(.here) { border-color: var(--warn); color: var(--warn); }
.cust-search { margin-left: auto; min-width: 220px; }
.cust-search input { width: 100%; }
.cust-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.cust-summary { max-width: 32ch; font-size: 14px; }
.pill.st-attention { background: #fbeae8; color: var(--warn); }
.pill.st-buying { background: #e4eeed; color: var(--ok); }
.pill.st-active { background: var(--paper); color: var(--ink); }
.pill.st-quiet { background: var(--paper); color: var(--mut); }
.chip.sig { font-size: 12px; margin: 2px 4px 2px 0; }
.chip.sig-bad { background: #fbeae8; color: var(--warn); border-color: #f1c9c3; }
.chip.sig-good { background: #e4eeed; color: var(--ok); border-color: #cfe0de; }
.facts { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.facts li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 8px 10px; background: var(--paper); border-radius: 8px; }
.facts li > span:first-child { flex: 1 1 260px; }
.fact-src { font-size: 12px; }
.fact-add { display: flex; gap: 8px; margin-top: 10px; }
.fact-add input { flex: 1; min-width: 0; }
.cust-convs { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.cust-convs a { text-decoration: none; color: var(--ink); }
.need-you { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; }
.need-you a { text-decoration: none; color: var(--ink); margin-right: 6px; }
.conv-read { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 12px; font-size: 14px; }
.crumbs { margin: 0 0 10px; font-size: 14px; }
.crumbs a { color: var(--mut); text-decoration: none; }
.plain-list { list-style: none; padding: 0; display: grid; gap: 8px; }
@media (max-width: 700px) { .cust-search { margin-left: 0; width: 100%; } .fact-add { flex-direction: column; } }
.cust-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin: 0 0 12px; }
.cust-bar label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mut); }
.cust-bar label.grow { flex: 1 1 220px; }
.cust-bar select, .cust-bar input { min-width: 0; }
.cust-tags { max-width: 26ch; }
.tag { display: inline-block; font-size: 12px; padding: 2px 8px; margin: 2px 4px 2px 0; border-radius: 6px; background: var(--paper); color: var(--ink); text-decoration: none; border: 1px solid var(--line); }
.tag:hover { border-color: var(--ok); }
.tag.acct { background: #eef1f6; font-weight: 600; }
.cust-table .pill, .cust-table td[data-label="Known"], .cust-table td[data-label="Last contact"] { white-space: nowrap; }

/* Customers: act from the row (2026-09-28) */
.cust-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1100px) { .cust-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.cust-pane { display: none; }
@media (min-width: 1100px) { .cust-pane { display: block; border: 1px solid var(--line); border-radius: 12px; min-height: 70vh; overflow: hidden; background: var(--paper); }
  .cust-pane iframe { width: 100%; height: 78vh; border: 0; display: block; }
  .cust-pane .pane-empty { padding: 24px; } }
.cust-table tbody tr { cursor: pointer; }
.cust-table tbody tr:hover td { background: #faf8f4; }
.cust-table tbody tr.sel td { background: #f2efe7; }
.cust-summary { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 30ch; font-size: 14px; }
.cust-tags { margin-top: 4px; }
.btn-next { display: inline-block; white-space: nowrap; font-size: 13px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; }
.btn-next.primary { background: var(--ink); color: #fff; }
.who-chip { font-size: 13px; background: var(--paper); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.cust-tab.mine { margin-left: 6px; }
.act-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.act-bar form { margin: 0; }
.act-inline label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mut); }
.act-inline select { width: auto; }
.act-follow summary { cursor: pointer; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; list-style: none; }
.act-follow[open] summary { margin-bottom: 8px; }
.follow-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.follow-form .quick { display: flex; gap: 6px; width: 100%; }
.follow-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mut); }
.timeline { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.timeline li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; font-size: 14px; padding: 6px 0; border-top: 1px solid #f0ede6; }
.tl-when { color: var(--mut); font-size: 12px; padding-top: 2px; }
.tl-what a { margin-left: 6px; font-size: 13px; }
.tl-note .tl-what strong, .tl-done .tl-what strong { color: var(--ok); }
.tl-handoff .tl-what strong { color: var(--warn); }
.cust-table .chip.sig { white-space: nowrap; }
.cust-table td[data-label="Why"] { min-width: 140px; }
@media (min-width: 1100px) {
  .cust-split { grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr); align-items: start; }
  .cust-pane { position: sticky; top: 12px; }
}

/* Wider work area (2026-09-28, Anton: "Should we reconsider the width in the
   backend main panel?"): the cap was 1020px — right for reading, wrong for
   lists and panes. Pages use the width; prose keeps a reading measure. */
body.shell main { max-width: 1440px; }
.panel > p, .panel > details > p, .panel p.muted, .flash, .error { max-width: 82ch; }
.panel table p, .cust-table p { max-width: none; }
.panel form.grid, .panel form.settings-form { max-width: 1120px; }
.need-you li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #f0ede6; }
.need-you li:first-child { border-top: 0; }
.ny-who { min-width: 0; }
.email-box summary { cursor: pointer; }
.email-form { display: grid; gap: 8px; margin-top: 8px; }
.email-form textarea { width: 100%; }
.tl-body summary { display: inline; cursor: pointer; color: var(--ok); font-size: 13px; margin-left: 6px; }
.tl-body pre { white-space: pre-wrap; font: inherit; font-size: 14px; background: var(--paper); padding: 8px 10px; border-radius: 8px; margin-top: 6px; }
.tl-email .tl-what strong { color: var(--ok); }
.tl-email_failed .tl-what strong { color: var(--warn); }
.csv-link { align-self: end; margin-bottom: 1px; }