/* PD Agent design system: tokens, base elements, the shared components, the top bar, the panels
   and the shortcuts popover. Nothing page-specific lives here: each area has its own file, linked
   after this one by base.html (today.css, review.css, report.css, project.css, source.css,
   ask.css).

   The pitch's language: ink on a light grey page, white cards with hairline borders, one blue
   accent; amber = waits on a decision, red = late, green = done. Colour always sits next to a
   text label. Use the tokens; never hard-code a colour.

   TOKENS
   Colour   --bg page · --paper cards, panels · --soft quiet fill · --ink text · --muted secondary
            text · --faint hairline marks, disabled · --line hairlines · --rule stronger rules ·
            --acc / --acc-soft the one accent · --amber(-soft) waits on a decision ·
            --red(-soft) late · --green(-soft) done · --hl / --hl-strong a highlighted quote.
            Each is light-dark(light, dark); the theme is :root's color-scheme (the OS setting,
            or data-theme="light" | "dark" from the toggle). An element that must stay light
            (the report preview) sets color-scheme: light and the tokens follow.
            --shadow (cards), --shadow-panel, --scrim (behind a panel).
   Type     --ui Source Sans 3 (everything) · --serif Source Serif 4 (the brief's prose only).
            Five sizes: --t-meta 13px (uppercase labels and one-line meta, never sentences) ·
            --t-body 15px · --t-lead 18px · --t-h2 22px · --t-h1 30px. Nothing smaller, nothing
            in between. Numbers are tabular everywhere (set on body); never a monospace font.
   Space    --s1 4px · --s2 8px · --s3 12px · --s4 16px · --s5 24px · --s6 32px · --s7 48px
   Radius   --r-sm 6px (controls, chips) · --r-lg 12px (cards, panels). Round only .avatar.
   Layout   main is a centred column (max 1120px, --s5 gutters); reading text at most
            --measure (72ch); --topbar-h is the top bar's height. At 700px and below: one
            column, --s4 gutters. No full-height rails, no fixed bars.

   COMPONENTS (the class names are the contract)
   .card                  the one container: paper, hairline, --r-lg, --s5 padding
   .chip                  the one chip; tones .chip.amber .chip.red .chip.green .chip.blue
   .btn                   a button (or a link styled as one); .btn.primary filled, .btn.quiet
                          without the accent; .btn.busy while its request runs (a spinner, the
                          label still legible)
   .field                 an input, select or textarea (bare form controls look the same)
   .label                 the uppercase 13px section label
   .meta                  a muted one-line meta row
   .rows                  rows separated by hairlines (each child is a row)
   table.table            a real table
   .flash, .flash.error   the one-line notice after an action
   .avatar                the round initials
   a.ev                   an evidence link: quiet, dotted underline. A plain click on one whose
                          href starts with /sources/ opens the source panel. Build it with
                          m.email_link(source_id, event_id), never by hand.
   .unconfirmed           the muted word "unconfirmed" after a fact CK has not confirmed
   .panel, .dim           the right-side panel (Ask and the source panel share it) and the dim
                          layer behind it; base.html opens one at a time

   KEYBOARD (base.html): "/" opens Ask, Esc closes a panel, "?" shows the shortcuts popover. A page
   with its own keys pushes {keys, label} onto window.pdShortcuts and handles them in
   window.pdKeys(e). No key hints printed on buttons, no key bar. */

/* --- tokens --------------------------------------------------------------- */
:root {
  color-scheme: light dark;
  --bg: light-dark(#f3f5f8, #12161c);
  --paper: light-dark(#ffffff, #1a1f27);
  --soft: light-dark(#eef1f5, #232a34);
  --ink: light-dark(#1d2430, #e6e9ee);
  --muted: light-dark(#5f6b7a, #a3acb8);
  --faint: light-dark(#9aa6b5, #6f7985);
  --line: light-dark(#d9dee5, #2b323c);
  --rule: light-dark(#c6ccd4, #3c4552);
  --acc: light-dark(#1f5f8b, #7fb3dc);
  --acc-soft: light-dark(#e4eef6, #1e2f40);
  --amber: light-dark(#9a6700, #e0b457);
  --amber-soft: light-dark(#fff4d6, #3a3120);
  --red: light-dark(#b3261e, #f08a83);
  --red-soft: light-dark(#fbe9e7, #3a2222);
  --green: light-dark(#2a6f3e, #7fcf96);
  --green-soft: light-dark(#e6f3ea, #1f3320);
  --hl: light-dark(#fff3b0, #4a4420);
  --hl-strong: light-dark(#ffd54a, #7a6a10);
  --shadow: 0 1px 2px light-dark(rgba(29, 36, 48, .04), transparent), 0 6px 18px light-dark(rgba(29, 36, 48, .06), transparent);
  --shadow-panel: -12px 0 40px light-dark(rgba(29, 36, 48, .18), rgba(0, 0, 0, .5));
  --scrim: light-dark(rgba(29, 36, 48, .28), rgba(0, 0, 0, .5));

  --ui: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --t-meta: 13px; --t-body: 15px; --t-lead: 18px; --t-h2: 22px; --t-h1: 30px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 6px; --r-lg: 12px;
  --measure: 72ch;
  --topbar-h: 56px;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* --- base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: var(--t-body)/1.5 var(--ui); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }
main { max-width: 1120px; margin: 0 auto; padding: var(--s5) var(--s5) var(--s7); }
h1 { font: 700 var(--t-h1)/1.2 var(--ui); letter-spacing: -.01em; margin: 0 0 var(--s4); }
h2 { font: 600 var(--t-h2)/1.25 var(--ui); margin: var(--s6) 0 var(--s3); }
h3 { font: 600 var(--t-lead)/1.3 var(--ui); margin: var(--s5) 0 var(--s2); }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
mark { background: var(--hl); color: inherit; }
time { white-space: nowrap; }
summary { cursor: pointer; }
table { border-collapse: collapse; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* --- components ------------------------------------------------------------ */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow); }
.card + .card { margin-top: var(--s4); }

.chip { display: inline-block; max-width: 100%; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--soft); color: var(--ink); font: 600 var(--t-meta)/22px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: 1px; }
a.chip { color: var(--acc); }
a.chip:hover { border-color: var(--acc); text-decoration: none; }
.chip.amber { background: var(--amber-soft); border-color: transparent; color: var(--amber); }
.chip.red { background: var(--red-soft); border-color: transparent; color: var(--red); }
.chip.green { background: var(--green-soft); border-color: transparent; color: var(--green); }
.chip.blue { background: var(--acc-soft); border-color: transparent; color: var(--acc); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 36px; padding: 7px var(--s4); border: 1px solid var(--acc); border-radius: var(--r-sm); background: var(--paper); color: var(--acc); font: 600 var(--t-body)/1.2 var(--ui); white-space: nowrap; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--acc-soft); text-decoration: none; }
.btn.primary { background: var(--acc); color: var(--paper); }
.btn.primary:hover { background: var(--acc); filter: brightness(1.08); }
.btn.quiet { border-color: var(--line); color: var(--ink); }
.btn.quiet:hover { background: var(--soft); }
.btn:disabled { border-color: var(--line); background: var(--soft); color: var(--muted); cursor: default; filter: none; }
.btn.busy { cursor: progress; }
.btn.busy::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pd-spin .8s linear infinite; }
.btn.busy:disabled { color: var(--ink); }
@keyframes pd-spin { to { transform: rotate(360deg); } }

.field, :where(input[type=text], input[type=date], input[type=search], input:not([type]), select, textarea) { min-height: 36px; padding: 6px var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; }
textarea.field, :where(textarea) { line-height: 1.45; }
.field:hover, :where(input, select, textarea):hover { border-color: var(--rule); }

.label { display: block; margin: 0 0 var(--s2); font: 700 var(--t-meta)/1.3 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; margin: 0; font-size: var(--t-meta); color: var(--muted); }

.rows { list-style: none; margin: 0; padding: 0; }
.rows > * { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.rows > :first-child { border-top: 0; }

table.table { width: 100%; }
table.table th { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); background: none; text-align: left; font: 700 var(--t-meta)/1.3 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
table.table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.table .num { text-align: right; white-space: nowrap; }

.flash { margin: 0 0 var(--s4); padding: var(--s2) var(--s3); border: 1px solid transparent; border-radius: var(--r-sm); background: var(--green-soft); color: var(--ink); }
.flash.error { background: var(--red-soft); border-color: var(--red); }

.avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--acc); color: var(--paper); font: 700 var(--t-meta)/1 var(--ui); letter-spacing: .02em; }

a.ev { color: inherit; text-decoration: underline dotted var(--faint); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.ev:hover { color: var(--acc); text-decoration-color: var(--acc); }

.unconfirmed { color: var(--muted); font-weight: 400; white-space: nowrap; }

/* --- the top bar ------------------------------------------------------------- */
.topbar { display: flex; align-items: center; gap: var(--s5); height: var(--topbar-h); padding: 0 var(--s5); background: var(--paper); border-bottom: 1px solid var(--line); }
.topbar .brand { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink); font-weight: 700; white-space: nowrap; }
.topbar .brand::before { content: ""; width: 16px; height: 16px; border-radius: var(--r-sm); background: var(--acc); }
.topbar .brand:hover { text-decoration: none; }
.topbar nav { display: flex; gap: var(--s1); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a { padding: 6px var(--s3); border-radius: var(--r-sm); color: var(--muted); font-weight: 600; white-space: nowrap; }
.topbar nav a:hover { background: var(--soft); color: var(--ink); text-decoration: none; }
.topbar nav a.active { background: var(--acc-soft); color: var(--acc); }
.topbar .right { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.topbar .ask { width: 280px; min-height: 36px; padding: 6px var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--muted); font: inherit; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.topbar .ask:hover { border-color: var(--acc); }
.topbar .theme { width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font-size: var(--t-lead); cursor: pointer; }
.topbar .theme:hover { background: var(--soft); color: var(--ink); }
@media (max-width: 900px) { .topbar .ask { width: 180px; } }
.topbar .ask-short { display: none; }
@media (max-width: 700px) {
  /* one row with all three tabs whole: no brand (Today is home), Ask as the word only */
  .topbar { gap: var(--s2); padding: 0 var(--s3); }
  .topbar .brand { display: none; }
  .topbar nav { flex: 0 0 auto; overflow: visible; }
  .topbar nav a { padding: 6px var(--s2); }
  .topbar .right { flex: 0 0 auto; gap: var(--s1); }
  .topbar .ask { width: auto; padding: 6px var(--s3); color: var(--ink); font-weight: 600; text-align: center; cursor: pointer; }
  .topbar .ask-full { display: none; }
  .topbar .ask-short { display: inline; }
}

/* --- panels: Ask and the source panel share one; the dim layer behind ----------- */
.dim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); }
.panel { position: fixed; top: var(--s3); right: var(--s3); bottom: var(--s3); z-index: 41; width: min(480px, calc(100vw - 2 * var(--s3))); display: flex; flex-direction: column; overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-panel); }

/* --- the shortcuts popover ("?") --------------------------------------------------- */
.shortcuts { position: fixed; top: calc(var(--topbar-h) + var(--s2)); right: var(--s5); z-index: 50; width: min(340px, calc(100vw - 2 * var(--s4))); padding: var(--s4) var(--s5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-panel); }
.shortcuts dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); align-items: baseline; margin: 0; }
.shortcuts dt { display: flex; gap: var(--s1); }
.shortcuts dd { margin: 0; }
.shortcuts kbd { min-width: 26px; padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-sm); background: var(--soft); color: var(--ink); font: 600 var(--t-meta)/22px var(--ui); text-align: center; }

/* --- phone width --------------------------------------------------------------- */
@media (max-width: 700px) {
  main { padding: var(--s4) var(--s4) var(--s6); }
  .panel { top: 0; right: 0; bottom: 0; width: 100vw; border: 0; border-radius: 0; }
  .shortcuts { right: var(--s4); }
}

/* --- print ------------------------------------------------------------------------ */
@media print {
  .topbar, .panel, .dim, .shortcuts { display: none !important; }
  main { max-width: none; padding: 0; }
  .card { break-inside: avoid; box-shadow: none; }
  a { color: inherit; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}