/* Layout: fixed left rail (conversations + the turns inside one), a scrolling
   transcript under a sticky turn bar, and a composer pinned to the bottom. */

:root {
  /* Neutrals carry a faint green bias toward the teal accent, so greys read as
     chosen rather than defaulted. */
  --bg:        #f3f5f4;
  --panel:     #ffffff;
  --raised:    #eceff0;
  --line:      #dfe4e3;
  --line-soft: #ebefee;
  --ink:       #16201f;
  --muted:     #5d6b68;
  --faint:     #697774;

  --accent:      #136f63;
  --accent-ink:  #ffffff;
  --accent-soft: #e3efed;

  /* Accounting semantics, kept separate from the accent. */
  --dr:   #1f4e79;
  --cr:   #a4452f;
  --ok:   #2d6a4f;
  --warn-bg:   #fdf6e3;
  --warn-line: #e0c27a;
  --warn-ink:  #6d5214;
  --err:  #a8322a;

  --radius:   10px;
  --radius-sm: 6px;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0d1413;
    --panel:     #141c1b;
    --raised:    #1b2524;
    --line:      #26322f;
    --line-soft: #1e2927;
    --ink:       #e3ebe8;
    --muted:     #93a39e;
    --faint:     #8a9a95;

    --accent:      #4fb3a1;
    --accent-ink:  #07100e;
    --accent-soft: #15302c;

    --dr:   #7eaedd;
    --cr:   #e0907c;
    --ok:   #74c79b;
    --warn-bg:   #2b2415;
    --warn-line: #6a5729;
    --warn-ink:  #e3c47f;
    --err:  #ef8f85;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:        #0d1413;
  --panel:     #141c1b;
  --raised:    #1b2524;
  --line:      #26322f;
  --line-soft: #1e2927;
  --ink:       #e3ebe8;
  --muted:     #93a39e;
  --faint:     #8a9a95;

  --accent:      #4fb3a1;
  --accent-ink:  #07100e;
  --accent-soft: #15302c;

  --dr:   #7eaedd;
  --cr:   #e0907c;
  --ok:   #74c79b;
  --warn-bg:   #2b2415;
  --warn-line: #6a5729;
  --warn-ink:  #e3c47f;
  --err:  #ef8f85;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
/* Mobile browsers shrink the visual viewport as their toolbars hide, and 100%
   keeps measuring the taller layout viewport — which leaves the composer under
   the URL bar. dvh follows the visible height instead. */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

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

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- login -- */

.login-wrap { min-height: 100%; display: grid; place-items: center; padding: 24px; }

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px 28px;
}
.login-mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 600; font-size: 15px;
  margin-bottom: 18px;
}
.login-card h1 { margin: 0 0 4px; font-size: 21px; letter-spacing: -0.015em; }
.login-card .sub { margin: 0 0 26px; color: var(--muted); font-size: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.field input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* Tokens, not literals: a hardcoded white here is invisible in dark mode. */
  background: var(--bg);
  color: var(--ink);
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.field .help { font-size: 11.5px; color: var(--faint); }

/* The signup card carries more fields than the login one. */
.login-card.wide { max-width: 460px; }
.login-card .alt { margin: 16px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.login-card .alt a { color: var(--accent); text-decoration: none; }
.login-card .alt a:hover { text-decoration: underline; }

/* Details nobody has to supply to get started are folded away rather than
   dropped: a client who knows their Tally address can give it now. */
.login-card .more {
  margin: 4px 0 18px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
}
.login-card .more summary {
  cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 500;
}
.login-card .more summary:hover { color: var(--accent); }
.login-card .more[open] summary { margin-bottom: 12px; }
.login-card .more .field:last-child { margin-bottom: 0; }

.btn {
  width: 100%;
  padding: 11px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .55; cursor: default; filter: none; }

.error { color: var(--err); font-size: 13px; margin-top: 12px; min-height: 18px; }

.demo-users {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--muted);
  display: grid; gap: 5px;
}
.demo-users b { color: var(--ink); font-weight: 600; }
.demo-users code { font-family: var(--mono); font-size: 12px; }

/* ---------------------------------------------------------------- shell -- */

/* minmax(0, 1fr), not the implicit `auto` row: an auto row is sized by its
   content and `stretch` only hands out space that is already free, so a long
   transcript made the row — and the page — taller than the window instead of
   scrolling inside it. */
.shell {
  display: grid;
  grid-template-columns: 272px 1fr;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
}

.rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0;
}

.brand { display: flex; gap: 10px; align-items: center; padding: 16px 16px 14px; }
.brand .brand-text { min-width: 0; }
.brand .mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 600; font-size: 13px;
  flex: none;
}
.brand h1 { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.brand .company { font-size: 12px; color: var(--muted); }
.brand .company { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .company-pick {
  margin-top: 1px; max-width: 100%;
  font: inherit; font-size: 12px; color: var(--muted);
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1px 4px;
}
.brand .company-pick:hover { color: var(--ink); border-color: var(--accent); }

.rail-actions { padding: 0 12px 12px; }
.new-chat {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.new-chat:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.rail-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 0 8px 12px; overscroll-behavior: contain; }
.rail-heading {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); font-weight: 600;
  padding: 10px 8px 6px;
}

.conv {
  display: block; width: 100%; text-align: left;
  padding: 7px 9px; border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv .conv-title { display: block; overflow: hidden; text-overflow: ellipsis; }
/* When it was last touched, and — where there is more than one — which company
   it is about. One line, so a long title still gets the full width above it. */
.conv .conv-meta {
  display: flex; gap: 6px; align-items: baseline;
  font-size: 11px; font-weight: 400; opacity: .75;
  min-width: 0;
}
.conv .conv-when { flex: none; }
.conv .conv-co { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .conv-co::before { content: "·"; margin-right: 6px; }
.conv:hover { background: var(--raised); color: var(--ink); }
.conv.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* The turns inside the open conversation — this is the jump-to-question list. */
.turns { display: grid; gap: 1px; margin: 2px 0 6px; padding-left: 9px; border-left: 2px solid var(--line); }
.turn-link {
  display: block; width: 100%; text-align: left;
  font-size: 12.5px; color: var(--muted);
  padding: 5px 8px; border-radius: var(--radius-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.turn-link:hover { background: var(--raised); color: var(--ink); }
.turn-link.current { color: var(--accent); font-weight: 600; }
.turn-link .n { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-right: 6px; }

.rail-foot { border-top: 1px solid var(--line-soft); padding: 12px 16px 14px; }
.who { display: flex; align-items: center; gap: 9px; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--raised); color: var(--muted);
  display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none;
}
.who .name { font-size: 13.5px; font-weight: 500; }
.who .role { font-size: 11.5px; color: var(--muted); text-transform: capitalize; }
.rail-links { display: flex; gap: 14px; margin-top: 11px; font-size: 12.5px; align-items: center; }
.rail-links a { color: var(--muted); text-decoration: none; }
.rail-links a:hover { color: var(--accent); }

.theme-toggle {
  margin-left: auto;
  display: flex; gap: 2px;
  background: var(--raised);
  border-radius: 999px; padding: 2px;
}
.theme-toggle button {
  width: 26px; height: 22px; border-radius: 999px;
  display: grid; place-items: center;
  color: var(--muted);
}
.theme-toggle button[aria-pressed="true"] { background: var(--panel); color: var(--accent); }
.theme-toggle svg { width: 13px; height: 13px; }

/* ----------------------------------------------------------------- main -- */

/* min-height: 0 for the same reason .messages needs it: a grid item's automatic
   minimum is its content, so without this the column refuses to shrink to the
   row and .messages never gets a bounded height to scroll inside. */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  font-size: 12.5px; color: var(--muted);
  flex: none;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); display: inline-block; }
.dot.up { background: var(--ok); }
.dot.down { background: var(--err); }
.topbar .spacer { flex: 1; }
.topbar .tally-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar #asOf { white-space: nowrap; flex: none; }
.topbar .mode { font-family: var(--mono); font-size: 11.5px; }

/* Sticky context bar: the question you are reading stays visible however far
   into a long answer you scroll, with arrows to step between turns. */
.turnbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 22px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  flex: none;
}
.turnbar[hidden] { display: none !important; }
.turnbar .q {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink); font-weight: 500;
}
.turnbar .counter { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.nav-btn {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--muted);
  border: 1px solid var(--line);
}
.nav-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.nav-btn:disabled { opacity: .35; cursor: default; }
.nav-btn svg { width: 13px; height: 13px; }

.messages { flex: 1; overflow-y: auto; min-height: 0; scroll-behavior: smooth; overscroll-behavior: contain; }
.thread { max-width: 780px; margin: 0 auto; padding: 26px 22px 40px; display: grid; gap: 30px; }

/* ----------------------------------------------------------------- turn -- */

.turn { scroll-margin-top: 58px; display: grid; gap: 12px; }

.question {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 15px;
}
.question .num {
  font-family: var(--mono); font-size: 11px; color: var(--faint);
  padding-top: 2px; flex: none;
}
.question .text { font-weight: 500; }

.answer { display: grid; gap: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--raised); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 3px 10px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.chip.running { border-color: var(--accent); color: var(--accent); }
.chip.running::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; animation: pulse 1s ease-in-out infinite;
}
.chip.failed { border-color: var(--err); color: var(--err); }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.prose { min-width: 0; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 10px 0; }
.prose h3, .prose h4, .prose h5 { margin: 18px 0 8px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.prose ul, .prose ol { margin: 10px 0; padding-left: 20px; }
.prose li { margin: 3px 0; }
.prose code {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--raised); padding: 1px 5px; border-radius: 4px;
}
.prose strong { font-weight: 600; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.prose table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.prose th, .prose td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.prose thead th {
  background: var(--raised); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  position: sticky; top: 0;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover { background: var(--raised); }
/* Figures line up and compare only with tabular numerals. */
.prose td:not(:first-child), .prose th:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.prose td .dr { color: var(--dr); font-weight: 500; }
.prose td .cr { color: var(--cr); font-weight: 500; }

.table-more {
  display: block; width: 100%;
  padding: 8px; font-size: 12.5px; color: var(--accent);
  background: var(--raised); border-top: 1px solid var(--line-soft);
}
.table-more:hover { background: var(--accent-soft); }

.answer-foot { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--faint); }
.answer-foot .usage { font-family: var(--mono); }
.icon-btn {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted); font-size: 11.5px;
  padding: 3px 7px; border-radius: var(--radius-sm);
}
.icon-btn:hover { background: var(--raised); color: var(--accent); }
.icon-btn svg { width: 12px; height: 12px; }

.stream-error {
  color: var(--err); font-size: 13.5px;
  border-left: 3px solid var(--err); padding: 6px 12px; background: var(--raised);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ------------------------------------------------------------- approval -- */

.approval {
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  border-radius: var(--radius);
  overflow: hidden;
}
.approval header {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  border-bottom: 1px solid var(--warn-line);
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--warn-ink);
}
.approval .body { padding: 13px 15px; }
.approval pre {
  font-family: var(--mono); font-size: 12.5px;
  margin: 0; white-space: pre-wrap; color: var(--ink);
}
.approval .warn {
  color: var(--err); font-size: 12.5px; margin-bottom: 9px;
  display: flex; gap: 6px; align-items: flex-start;
}
.approval .actions { display: flex; gap: 8px; padding: 0 15px 13px; }
.approval .actions button {
  padding: 7px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--warn-line); font-size: 13px; font-weight: 500;
  color: var(--warn-ink);
}
.approval .actions .approve { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.approval .actions button:hover { filter: brightness(1.06); }
.approval .note { padding: 0 15px 13px; font-size: 12px; color: var(--warn-ink); opacity: .85; }

/* ------------------------------------------------------------- composer -- */

.composer {
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 14px 22px calc(16px + env(safe-area-inset-bottom, 0px));
}
.composer-inner {
  max-width: 780px; margin: 0 auto;
  display: flex; gap: 10px; align-items: flex-end;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 6px 6px 6px 14px;
}
.composer-inner:focus-within { border-color: var(--accent); }
.composer textarea {
  flex: 1; min-width: 0;
  resize: none; border: 0; background: none;
  padding: 7px 0; min-height: 24px; max-height: 180px;
}
.composer textarea:focus { outline: none; }
.send {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; flex: none;
}
.send:hover:not(:disabled) { filter: brightness(1.08); }
.send:disabled { opacity: .4; cursor: default; }
.send svg { width: 15px; height: 15px; }
.hint {
  max-width: 780px; margin: 7px auto 0;
  font-size: 11.5px; color: var(--faint);
  display: flex; gap: 12px;
}
.hint kbd {
  font-family: var(--mono); font-size: 10.5px;
  border: 1px solid var(--line); border-radius: 4px;
  padding: 0 4px; color: var(--muted);
}

/* Jump back to the newest turn without hunting for the scrollbar. */
.to-latest {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 108px; z-index: 6;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
  box-shadow: 0 2px 10px rgb(0 0 0 / .09);
}
/* A class selector outranks the UA's [hidden] { display: none }, so hiding it
   from JS does nothing without this — the same guard .turnbar needs. */
.to-latest[hidden] { display: none; }
.to-latest:hover { color: var(--accent); border-color: var(--accent); }
.to-latest svg { width: 12px; height: 12px; }

/* ---------------------------------------------------------------- empty -- */

.empty { padding: 48px 0 20px; }
.empty h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.015em; }
.empty p { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.samples { display: grid; gap: 8px; }
.sample {
  text-align: left; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); font-size: 13.5px;
  display: flex; align-items: center; gap: 10px;
}
.sample:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.sample .tag {
  font-family: var(--mono); font-size: 10.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .05em; margin-left: auto; flex: none;
}

/* ------------------------------------------------------------ responsive -- */
/* One mechanism for every narrow screen: below 1024px the rail slides over the
   transcript as a drawer, opened from the topbar. Phones and portrait tablets
   get it; a landscape tablet is wide enough to keep the rail pinned, so the
   breakpoint is the rail's own width plus a readable transcript, not a device.

   The drawer's whole state is one class on .shell, so the JS toggles nothing
   else and the layout cannot disagree with itself. */

.rail-toggle, .rail-close { display: none; }
.rail-scrim { display: none; }

@media (max-width: 1023px) {
  .shell { grid-template-columns: 1fr; }
  /* The 780px reading measure is kept, not dropped: with the rail gone a
     tablet has room to stretch a line of prose far past comfortable, and on a
     phone the cap never binds anyway. */

  .rail-toggle {
    display: grid; place-items: center; flex: none;
    width: 38px; height: 38px; margin: -7px 0 -7px -8px;
    border-radius: var(--radius-sm); color: var(--muted);
  }
  .rail-toggle:hover { color: var(--accent); background: var(--raised); }
  .rail-toggle svg { width: 18px; height: 18px; }

  .rail {
    position: fixed; z-index: 30; top: 0; bottom: 0; left: 0;
    /* 80vw at most, so even the narrowest phone keeps a fifth of the screen as
       a comfortable strip to tap the drawer away with. */
    width: min(300px, 80vw);
    transform: translateX(-100%);
    /* visibility, not just transform: nothing in a shut drawer should be
       reachable by tab or read out by a screen reader. */
    visibility: hidden;
    transition: transform .22s ease, visibility .22s;
    box-shadow: 10px 0 30px rgb(0 0 0 / .22);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .shell.rail-open .rail { transform: none; visibility: visible; }

  .rail-scrim {
    display: block; position: fixed; inset: 0; z-index: 20;
    background: rgb(0 0 0 / .45);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, visibility .22s;
    touch-action: none;
  }
  .shell.rail-open .rail-scrim { opacity: 1; visibility: visible; }

  .rail-close {
    display: grid; place-items: center; flex: none;
    width: 34px; height: 34px; margin: -4px -4px -4px auto;
    border-radius: var(--radius-sm); color: var(--muted);
  }
  .rail-close:hover { color: var(--accent); background: var(--raised); }
  .rail-close svg { width: 16px; height: 16px; }

  /* Touch targets. A 14px-tall row is a coin toss with a fingertip. */
  .conv { padding: 10px 10px; }
  .turn-link { padding: 9px 8px; }
  .rail-links { gap: 18px; font-size: 13.5px; }
  .rail-links a { padding: 5px 0; }
  .nav-btn { width: 32px; height: 32px; }

  /* 16px or smaller makes iOS Safari zoom the page in when a field takes
     focus, and it never zooms back out. */
  .composer textarea,
  .field input,
  .filters select,
  .filters input,
  .brand .company-pick { font-size: 16px; }
}

@media (max-width: 640px) {
  .topbar { padding: 9px 14px; gap: 10px; }
  .turnbar { padding: 8px 14px; }
  .thread { padding: 18px 16px 34px; gap: 24px; }
  .question { padding: 11px 13px; }
  .composer { padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }

  /* Keyboard shortcuts mean nothing on a touch keyboard, and the row costs
     more than it tells. Removing it also moves the composer down, so the
     jump-to-latest pill follows. */
  .hint { display: none; }
  .to-latest { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  .as-of-label { display: none; }

  .empty { padding: 26px 0 16px; }
  .empty h2 { font-size: 17.5px; }
  .empty p { font-size: 13.5px; margin-bottom: 18px; }
  .sample { flex-wrap: wrap; gap: 3px 10px; padding: 12px 13px; }
  .sample .tag { margin-left: 0; }

  .approval .actions { flex-wrap: wrap; }
  .approval .actions button { flex: 1 1 auto; min-height: 40px; }
  .approval .checks { grid-template-columns: 1fr; gap: 1px 0; }
  .approval .checks .h { display: none; }

  /* Narrower cells before the table has to scroll sideways. */
  .prose table { font-size: 12.5px; }
  .prose th, .prose td { padding: 6px 8px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }

  .answer-foot { flex-wrap: wrap; gap: 6px 12px; }
  .login-wrap { padding: 16px; }
  .login-card { padding: 28px 22px 24px; }
}

/* --------------------------------------------------- Tally screen view -- */
/* A facsimile of the screen an accountant would see in TallyPrime, so the
   thing being approved is recognisable rather than merely described. */

.approval .viewtabs { display: flex; gap: 2px; margin-left: auto; background: var(--raised); border-radius: 999px; padding: 2px; }
.approval .viewtabs button {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; color: var(--muted);
}
.approval .viewtabs button[aria-pressed="true"] { background: var(--panel); color: var(--accent); }

.tally-screen {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tally-screen .ts-head {
  display: flex; align-items: baseline; gap: 12px;
  background: var(--accent); color: var(--accent-ink);
  padding: 6px 12px;
  font-weight: 600; font-size: 12px;
}
.tally-screen .ts-head .co { margin-left: auto; font-weight: 400; opacity: .9; font-size: 11.5px; }
.tally-screen .ts-sub {
  display: flex; justify-content: space-between;
  padding: 6px 12px; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 11.5px;
}
.tally-screen .ts-body { padding: 10px 12px; overflow-x: auto; }

/* label : value, colons aligned the way Tally aligns them */
.ts-fields { display: grid; grid-template-columns: max-content 1ch 1fr; gap: 3px 6px; }
.ts-fields .lbl { color: var(--muted); }
.ts-fields .val { color: var(--ink); font-weight: 500; }

.ts-entries { width: 100%; border-collapse: collapse; }
.ts-entries th {
  text-align: left; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  border-bottom: 1px solid var(--line); padding: 4px 0 5px;
}
.ts-entries th.num, .ts-entries td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ts-entries td { padding: 4px 0; vertical-align: top; }
.ts-entries .side { width: 3ch; color: var(--muted); }
.ts-entries .side.dr { color: var(--dr); font-weight: 600; }
.ts-entries .side.cr { color: var(--cr); font-weight: 600; }
.ts-entries .billref { display: block; font-size: 11px; color: var(--muted); padding-left: 1.5ch; }
.ts-entries tfoot td { border-top: 1px solid var(--line); padding-top: 6px; font-weight: 600; }
.ts-narration { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 11.5px; }
.ts-narration b { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------- approval states -- */

/* Once decided, the card stops asking for attention: the amber goes, and the
   outcome takes its place in the colour of what happened. */
.approval.settled { border-color: var(--line); background: var(--panel); }
.approval.settled header { border-bottom-color: var(--line-soft); color: var(--muted); }
.approval .actions button:disabled { opacity: .5; cursor: default; filter: none; }
.approval .result { padding: 0 15px 13px; display: grid; gap: 8px; font-size: 13px; }
.approval .result .headline { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; }
.approval .result .headline .icon { flex: none; font-weight: 600; }
.approval .result.good .headline { color: var(--ok); }
.approval .result.wait .headline { color: var(--warn-ink); }
.approval .result.bad .headline { color: var(--err); }
.approval .result .byline { font-size: 12px; color: var(--muted); }
.approval .checks {
  display: grid; grid-template-columns: max-content max-content max-content; gap: 2px 18px;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.approval .checks .h { color: var(--faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.approval .checks .off { color: var(--err); font-weight: 600; }

/* Where the assistant's word-for-word memory of a conversation begins. */
.condensed-note {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--faint);
}
.condensed-note::before, .condensed-note::after {
  content: ""; flex: 1; border-top: 1px dashed var(--line);
}

/* ------------------------------------------------------------ admin pages -- */

body.page { height: auto; min-height: 100%; }
.page-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 22px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.page-head .brand { padding: 0; }
.page-head .spacer { flex: 1; }
.page-head .back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); text-decoration: none; font-size: 13px;
}
.page-head .back:hover { color: var(--accent); }
.page-head .theme-toggle { margin-left: 0; }
.page-body { max-width: 1240px; margin: 0 auto; padding: 20px 22px 48px; }

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 14px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
.filters select, .filters input {
  min-width: 150px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); font-size: 13.5px;
}
.btn-small {
  display: inline-block; padding: 7px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--ink);
  font-size: 13px; font-weight: 500; text-decoration: none;
}
.btn-small:hover { border-color: var(--accent); color: var(--accent); }
.btn-small.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-small.primary:hover { filter: brightness(1.06); color: var(--accent-ink); }

.audit-count { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.audit-wrap { background: var(--panel); }
table.audit { width: 100%; border-collapse: collapse; font-size: 13px; }
table.audit th {
  padding: 9px 12px; text-align: left;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); background: var(--raised); border-bottom: 1px solid var(--line);
}
table.audit td { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.audit tr.entry { cursor: pointer; }
table.audit tr.entry:hover td, table.audit tr.entry[aria-expanded="true"] td { background: var(--raised); }
table.audit .mono { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
table.audit .role { display: block; font-size: 11px; color: var(--muted); text-transform: capitalize; }
table.audit .what { max-width: 440px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.audit tr.more td { padding: 12px 16px 16px; background: var(--bg); }

.kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 5px 0; }
.kv .k { font-size: 12px; font-weight: 500; color: var(--muted); }
.kv .v { font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.kv pre {
  margin: 0; max-height: 260px; overflow: auto;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel);
  font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; word-break: break-all;
}

/* ------------------------------------------------------- client dashboard -- */

.who-mini { font-size: 13px; color: var(--muted); }

.tiles {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.tile {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
}
.tile-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint);
}
.tile-value {
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; margin: 2px 0 1px;
}
.tile-note { font-size: 11.5px; color: var(--muted); }

table.audit td.right { text-align: right; }
/* An identifier, shown exactly as it is stored — not .role, which capitalises. */
.slug {
  display: block; font-family: var(--mono); font-size: 11px; color: var(--muted);
  text-transform: none;
}
.row-select {
  padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); font-size: 12.5px; color: var(--ink);
}
.filters.invite { align-items: flex-end; }
.filters.invite label { flex: 1 1 160px; }
.filters.invite input, .filters.invite select { width: 100%; }
/* A suspended client is still listed — it is a customer, not a mistake — but
   it should not read as one that is working. */
table.audit tr.entry.suspended td { opacity: .62; }

.manage { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.manage-form { display: grid; gap: 10px; }
.manage-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; font-weight: 500; color: var(--muted);
}
.manage-form input {
  padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); font-size: 13.5px; color: var(--ink);
}
.manage-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.manage-note { font-size: 12px; color: var(--muted); }
.manage-hint { margin: 2px 0 0; font-size: 12px; color: var(--faint); max-width: 44em; }

.manage-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.manage-block.danger { border-top-color: color-mix(in srgb, var(--err) 35%, var(--line)); }
.btn-small.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--line)); }
.btn-small.danger:hover { background: color-mix(in srgb, var(--err) 10%, transparent); color: var(--err); }

/* A connector token is shown once and never again, so it has to be obvious
   that this is the moment to copy it. */
.token-box {
  margin-top: 10px; padding: 11px 13px;
  border: 1px solid var(--warn-line); border-radius: var(--radius-sm);
  background: var(--warn-bg);
}
.token-head {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--warn-ink); margin-bottom: 6px;
}
.token-box .token {
  display: block; font-family: var(--mono); font-size: 12px;
  word-break: break-all; user-select: all;
  padding: 7px 9px; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
}
.token-box .manage-hint { margin-top: 7px; }

.manage-people { display: grid; gap: 4px; align-content: start; }
.people-head {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); margin-bottom: 2px;
}
.person {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) max-content;
  gap: 8px; align-items: center; font-size: 12.5px;
}
.person .mono { font-family: var(--mono); font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 820px) {
  .manage { grid-template-columns: 1fr; }
}

.pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
  background: var(--raised); color: var(--muted);
}
.pill.good { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.pill.wait { background: var(--warn-bg); color: var(--warn-ink); }
.pill.bad { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }
.muted { color: var(--muted); }

@media (max-width: 820px) {
  .page-head { flex-wrap: wrap; padding: 10px 16px; }
  .page-body { padding: 16px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  table.audit .what { max-width: 200px; }
}

@media (max-width: 640px) {
  /* The audit trail is a wide table by nature. Squeezing six columns into
     390px would make it unreadable, so it keeps its shape and scrolls sideways
     inside its panel rather than taking the page with it. The action id goes:
     it is usually empty, and tapping a row shows it in full anyway. */
  .audit-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.audit { min-width: 540px; }
  table.audit th:nth-child(6), table.audit td:nth-child(6) { display: none; }
  table.audit th, table.audit td { padding: 7px 9px; }

  .page-head .brand .company { display: none; }  /* the long standfirst */
  .page-head { gap: 10px; }
  .filters { gap: 8px 10px; }
  .filters label { flex: 1 1 140px; }
  .filters select, .filters input { min-width: 0; width: 100%; }
  .filters .btn-small { flex: 1 1 auto; text-align: center; }
}

/* ----------------------------------------------------------------- notice -- */

/* What the application says about a turn, as opposed to the assistant's answer:
   Tally was down, so the question never reached the model. */
.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px;
  border: 1px solid var(--warn-line); border-radius: var(--radius);
  background: var(--warn-bg); color: var(--warn-ink);
  font-size: 13.5px;
}
.notice .icon {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--warn-ink); color: var(--warn-bg);
  font-size: 12px; font-weight: 700;
}
.notice p { margin: 0 0 9px; }
.notice p:last-child { margin-bottom: 0; }
.notice .retry {
  padding: 5px 13px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink);
  font-size: 13px; font-weight: 500;
}
.notice .retry:hover { filter: brightness(1.06); }

/* A turn the user started by approving rather than typing: quieter than a question. */
.turn.event .question {
  background: transparent; border-style: dashed;
  font-size: 13px; color: var(--muted);
}
.turn.event .question .text { font-weight: 500; }

/* ----------------------------------------------------------- second factor -- */

/* The enrolment page and the code step on the sign-in screen. Both reuse the
   login card, because both are things you do before you are properly in. */
.mfa-card { max-width: 440px; }
.mfa-card h1 { margin-bottom: 6px; }
.mfa-card .sub { margin-bottom: 20px; }

.mfa-steps {
  margin: 0 0 18px; padding-left: 20px;
  font-size: 13px; color: var(--muted); line-height: 1.55;
}
.mfa-steps li { margin-bottom: 5px; }

/* The key is read off the screen and typed into a phone, so it is spaced in
   blocks of four and selectable in one click. */
.mfa-secret { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.mfa-secret .token {
  flex: 1; display: block; padding: 10px 12px;
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .04em;
  word-break: break-all; user-select: all;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink);
}
.mfa-secret .btn-small { flex: none; }

.mfa-hint { margin: 0 0 16px; font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.mfa-hint.strong {
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn-ink);
}
.mfa-hint a { color: var(--accent); }

/* Recovery codes: written down once, so they are big enough to copy by hand. */
.mfa-codes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px;
  margin-bottom: 16px;
}
.mfa-codes code {
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px; text-align: center;
  user-select: all; color: var(--ink);
}

/* On the sign-in screen the error sits below whichever card is showing, so it
   does not jump position when the code step replaces the password step. */
.login-error { margin-top: 14px; text-align: center; }

/* Whether a person has a second factor, on the People page. */
.factor { font-size: 12px; }
.factor.due { color: var(--warn-ink); }

/* ------------------------------------------------------------ staff access -- */

/* Access one of our own people holds over one client's data. Amber, like the
   connector token: both are moments where somebody should be paying attention. */
.access-open {
  margin-top: 10px; padding: 9px 12px;
  border: 1px solid var(--warn-line); border-radius: var(--radius-sm);
  background: var(--warn-bg); color: var(--warn-ink); font-size: 12.5px;
}
.access-open b { font-weight: 600; }
.access-open .manage-actions { margin-top: 7px; }

.access-list { display: grid; gap: 6px; margin-top: 10px; }
.access-entry {
  display: grid; gap: 2px; font-size: 12.5px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg);
}
.access-entry .who { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.access-entry .reason { color: var(--muted); }
.access-entry .range { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

/* ----------------------------------------------------------------- posture -- */

/* Which controls are on, read from the running configuration. Shown as a plain
   list of claims rather than a score, because each line is a thing to go and
   fix or a thing to put in front of a client. */
.posture { display: grid; gap: 10px; margin-bottom: 18px; }
.posture-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.posture-head h2 { margin: 0; font-size: 14px; letter-spacing: -0.01em; }
.posture-head .muted { font-size: 12px; }
.posture-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.posture-item {
  display: grid; gap: 3px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
  font-size: 12.5px;
}
.posture-item .label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint);
}
.posture-item .note { color: var(--muted); font-size: 11.5px; }

.posture-blockers {
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--err) 35%, var(--line));
  background: color-mix(in srgb, var(--err) 8%, transparent);
  font-size: 12.5px; color: var(--ink);
}
.posture-blockers ul { margin: 6px 0 0; padding-left: 18px; }
.posture-blockers li { margin-bottom: 4px; }

/* The enrolment QR. Always a white card, whatever the theme: most readers cope
   with an inverted code and some do not, and this is the wrong screen on which
   to find out which phone somebody brought. */
.mfa-qr {
  display: flex; justify-content: center;
  margin: 0 0 14px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.mfa-qr img { display: block; width: 220px; height: 220px; }

.mfa-hint.center { text-align: center; }

/* The typed key, for a desktop password manager or a camera that will not focus.
   Folded away because scanning is what almost everybody does. */
.mfa-manual { margin: 0 0 18px; }
.mfa-manual summary {
  cursor: pointer; font-size: 12.5px; color: var(--muted); font-weight: 500;
  text-align: center; list-style-position: inside;
}
.mfa-manual summary:hover { color: var(--accent); }
.mfa-manual[open] summary { margin-bottom: 10px; }
.mfa-manual .mfa-hint { margin-bottom: 8px; }

@media (max-width: 420px) {
  .mfa-qr img { width: 180px; height: 180px; }
}