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

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* light: warm cream paper, dark ink chrome */
  --fg:        #16191C;
  --fg-2:      #4C575E;
  --fg-3:      #838D94;
  --bg:        #F2EFE7;
  --bg-2:      #E9E4D9;
  --surface:   #FFFDF8;
  --line:      #D7D1C3;
  --line-soft: #E7E2D6;
  --accent:    #8B1E33;   /* claret */
  --accent-2:  #8A6612;   /* brass */
  --good:      #2C5B4E;   /* verdigris */
  --warn:      #8A5A12;

  --mast-bg:   #16191C;
  --mast-fg:   #F2EFE7;
  --mast-fg-2: #99A3A9;
  --mast-line: rgba(242,239,231,.16);
  --mast-accent: #C9A254;

  --shadow: 0 1px 2px rgba(22,25,28,.05), 0 8px 24px -12px rgba(22,25,28,.14);
  --shadow-lift: 0 2px 4px rgba(22,25,28,.06), 0 18px 40px -16px rgba(22,25,28,.24);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fg:        #E9E5DC;
    --fg-2:      #A7B0B6;
    --fg-3:      #78838A;
    --bg:        #13161A;
    --bg-2:      #191D22;
    --surface:   #1B1F24;
    --line:      #2F363C;
    --line-soft: #242A2F;
    --accent:    #E08A9B;
    --accent-2:  #C9A254;
    --good:      #6FB09C;
    --warn:      #D3A45F;

    --mast-bg:   #0E1114;
    --mast-fg:   #E9E5DC;
    --mast-fg-2: #7C878E;
    --mast-line: rgba(233,229,220,.13);
    --mast-accent: #C9A254;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  --fg:        #E9E5DC;
  --fg-2:      #A7B0B6;
  --fg-3:      #78838A;
  --bg:        #13161A;
  --bg-2:      #191D22;
  --surface:   #1B1F24;
  --line:      #2F363C;
  --line-soft: #242A2F;
  --accent:    #E08A9B;
  --accent-2:  #C9A254;
  --good:      #6FB09C;
  --warn:      #D3A45F;

  --mast-bg:   #0E1114;
  --mast-fg:   #E9E5DC;
  --mast-fg-2: #7C878E;
  --mast-line: rgba(233,229,220,.13);
  --mast-accent: #C9A254;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.7);
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* dvh tracks mobile Safari's disappearing toolbar; vh is the fallback. */
  min-height: 100vh;
  min-height: 100dvh;
  /* faint paper grain, pure CSS */
  background-image:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--accent-2) 5%, transparent), transparent 42%),
    radial-gradient(circle at 88% 2%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 38%);
  background-attachment: fixed;
}

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: color-mix(in srgb, var(--accent-2) 28%, transparent); }

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

.mono, .eyebrow, .tab, .label, .tag, .stat span {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   MASTHEAD  — dark band, brass hairline
   ============================================================ */
.mast {
  background: var(--mast-bg);
  color: var(--mast-fg);
  border-bottom: 1px solid var(--mast-accent);
  position: sticky;
  top: 0;
  z-index: 30;
}
.mast-in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 24px 14px;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.wordmark em { font-style: italic; color: var(--mast-accent); }
.wordmark-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mast-fg-2);
  margin-top: 7px;
}
.mast-right {
  margin-left: auto;
  display: flex;
  align-items: flex-end;
  gap: 18px;
}
.whoami {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mast-fg-2);
  text-align: right;
  line-height: 1.7;
}
.whoami b { font-weight: 500; color: var(--mast-fg); letter-spacing: 0.09em; }

.themebtn {
  background: none;
  border: 1px solid var(--mast-line);
  color: var(--mast-fg-2);
  padding: 7px 11px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.themebtn:hover { color: var(--mast-fg); border-color: var(--mast-accent); }

/* tabs live inside the dark band */
.tabs {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 15px 11px;
  margin-bottom: -1px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mast-fg-2);
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--mast-fg); }
.tab[aria-selected="true"] { color: var(--mast-fg); border-bottom-color: var(--mast-accent); }
.tab .n {
  font-size: 9px;
  color: var(--mast-fg-2);
  margin-left: 6px;
  vertical-align: 1.5px;
}

/* ============================================================
   LAYOUT + SHARED TYPE
   ============================================================ */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px 96px; }
.view { display: none; padding-top: 40px; }
.view.on { display: block; animation: fade .28s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .view.on { animation: none; }
}

.eyebrow {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
  display: flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  max-width: 90px;
}
h2.title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.024em;
  margin: 12px 0 10px;
}
.lede {
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0 0 30px;
  font-size: 15.5px;
}
.rule { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ============================================================
   ASK
   ============================================================ */
.askbar {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--fg);
  box-shadow: var(--shadow);
  transition: box-shadow .18s;
}
.askbar:focus-within { box-shadow: var(--shadow-lift); }
.askbar input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 17px 18px;
  font-family: var(--serif);
  font-size: 20px;
  outline: none;
}
.askbar input::placeholder { color: var(--fg-3); font-style: italic; }
.askbar button {
  border: 0;
  background: var(--fg);
  color: var(--bg);
  padding: 0 26px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background .15s;
}
.askbar button:hover { background: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  background: none;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 12.5px;
  color: var(--fg-2);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover {
  border-color: var(--accent-2);
  color: var(--fg);
  background: color-mix(in srgb, var(--accent-2) 7%, transparent);
}

/* the answer reads as an internal memo */
.memo {
  margin-top: 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--fg);
  box-shadow: var(--shadow);
  padding: 26px 28px 24px;
}
.memo-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 14px;
  margin-bottom: 20px;
}
.memo-head .who {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.answer-body {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.58;
  max-width: 66ch;
}
.answer-body p { margin: 0 0 14px; }
.answer-body p:last-child { margin-bottom: 0; }
.answer-body strong { font-weight: 600; }

.srcnote {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex-shrink: 0; }
.dot.wait { background: var(--warn); animation: pulse 1.1s infinite; }
.dot.none { background: var(--fg-3); }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .dot.wait { animation: none; } }

/* stat strip inside the memo */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin-top: 22px;
}
.strip > div { background: var(--surface); padding: 13px 15px; }
.strip b {
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: -0.02em;
  display: block;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.strip span {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: block;
  margin-top: 3px;
}

.pitch {
  margin-top: 24px;
  background: color-mix(in srgb, var(--accent-2) 6%, var(--surface));
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent-2);
  padding: 18px 20px;
}
.pitch h4 {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
}
.pitch p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.58; }

.btn-quiet {
  margin-top: 14px;
  background: none;
  border: 1px solid var(--line);
  padding: 7px 13px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--fg-2);
  transition: border-color .15s, color .15s;
}
.btn-quiet:hover { border-color: var(--fg); color: var(--fg); }

/* ============================================================
   TOOLBAR / FILTERS
   ============================================================ */
.toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  border-top: 1px solid var(--fg);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  background: var(--bg);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.field select, .field input, .field textarea {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg);
  padding: 9px 11px;
  font-size: 14px;
  min-width: 148px;
  border-radius: 0;
  transition: border-color .15s;
}
.field select:hover, .field input:hover, .field textarea:hover { border-color: var(--fg-3); }
.field textarea { resize: vertical; min-height: 82px; line-height: 1.5; }
.field.wide { flex: 1; min-width: 220px; }
.field.wide input, .field.wide select, .field.wide textarea { width: 100%; }

.seg { display: flex; border: 1px solid var(--line); background: var(--surface); }
.seg button {
  background: none;
  border: 0;
  padding: 9px 13px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  transition: background .15s, color .15s;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

.countbar {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0 0;
}
.count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0;
}
.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
}
.linkbtn[hidden] { display: none; }

/* ============================================================
   TOMBSTONE CARDS
   ============================================================ */
.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.tomb {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0 20px 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.tomb::before {
  content: '';
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--accent-2);
  opacity: 0;
  transition: opacity .16s;
}
.tomb:hover { border-color: var(--fg-3); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.tomb:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tomb:hover { transform: none; } }

.tomb-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 0 11px;
  margin-bottom: 15px;
}
.tomb-sector {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--good);
}
.tomb-ref {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--fg-3);
  letter-spacing: 0.09em;
}
.tomb-val {
  font-family: var(--mono);
  font-size: 23px;
  letter-spacing: -0.03em;
  margin-bottom: 7px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tomb-val.none { font-size: 12px; color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; }
.tomb-client {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.tomb-desc { font-size: 13.5px; color: var(--fg-2); line-height: 1.5; margin-bottom: 16px; flex: 1; }
.tomb-role {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.tomb-foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-2);
  border: 1px solid var(--line-soft);
  padding: 3px 7px;
}
/* ---------- why a result matched ---------- */
.why {
  border-top: 1px dashed var(--line);
  margin-top: 12px;
  padding-top: 10px;
}
.whylab {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: block;
  margin-bottom: 6px;
}
.why ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.why li {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--fg-2);
  padding-left: 13px;
  position: relative;
}
.why li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--fg-3);
}
.why li.r-sector::before { background: var(--good); }
.why li.r-type::before { background: var(--accent); }
.why li.r-role::before { background: var(--accent-2); }
.why li.r-more { color: var(--fg-3); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; }
.why li.r-more::before { display: none; }

/* ---------- agent: people, drafts, follow-ups ---------- */
.refined {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.refined b { color: var(--accent); font-weight: 500; }

.folk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin-top: 20px;
}
.person { background: var(--surface); padding: 14px 16px; }
.person b { font-family: var(--serif); font-size: 18px; font-weight: 500; display: block; }
.person span { font-size: 12px; color: var(--fg-2); display: block; margin-top: 3px; }
.person i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: block;
  margin-top: 6px;
}

.draft {
  margin-top: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.draft-head { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); background: var(--bg-2); }
.draft-head dl { display: grid; grid-template-columns: 62px 1fr; gap: 4px 12px; margin: 0; }
.draft-head dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 2px;
}
.draft-head dd { margin: 0; font-size: 13.5px; }
.draft-body {
  margin: 0;
  padding: 18px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.62;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 340px;
  overflow-y: auto;
}
.draft .btn-quiet { margin: 0 18px 18px; }

/* ---------- proposal wording ---------- */
.proposal {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-2);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.proposal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
}
.proposal-head .whylab { margin: 0; }
.proposal-body { padding: 20px 22px 8px; }
/* an empty answer block must not leave a gap above the list */
.answer-body:empty { display: none; }
.answer-body:empty + .folk, .answer-body:empty + .proposal { margin-top: 0; }
.prop-intro {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
/* An actual bullet list. */
.prop-list {
  list-style: disc outside;
  margin: 0;
  padding-left: 22px;
}
.prop-list li { margin-bottom: 14px; }
.prop-list li::marker { color: var(--accent-2); font-size: 1.05em; }
.prop-text {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  display: block;
}
.prop-tail {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: block;
  margin-top: 5px;
}
.proposal .btn-quiet { margin: 8px 22px 20px; }

/* ---------- externally sourced records ---------- */
/* Sits in the results like any matter, but says where it came from. */
.tag-src {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 9%, transparent);
}
.dl dd a { color: var(--accent); }

.nextup { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--line); }
.nextup .chips { margin-top: 8px; }

/* the answer the tool could not give */
.caveat {
  display: flex;
  gap: 14px;
  align-items: baseline;
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-left: 3px solid var(--warn);
  padding: 14px 16px;
  margin: 0 0 20px;
}
.caveat b {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warn);
  flex-shrink: 0;
  white-space: nowrap;
}
.caveat span { font-size: 13.5px; line-height: 1.55; color: var(--fg); }

.counted {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-2);
  border-left: 2px solid var(--good);
  padding: 2px 0 2px 12px;
  margin: 16px 0 0;
  max-width: 70ch;
}
.counted b { color: var(--fg); font-weight: 600; }

.match {
  position: absolute;
  top: -1px; right: -1px;
  background: var(--accent-2);
  color: #fff;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 4px 9px;
}
.match.strong { background: var(--accent); }

/* ============================================================
   LEDGER VIEW — the register as a bound book
   ============================================================ */
.ledger { width: 100%; border-collapse: collapse; margin-top: 24px; }
.ledger th {
  text-align: left;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
  padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--fg);
  white-space: nowrap;
}
.ledger td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: baseline;
  font-size: 14px;
}
.ledger tbody tr { cursor: pointer; transition: background .12s; }
.ledger tbody tr:hover { background: color-mix(in srgb, var(--accent-2) 8%, transparent); }
.ledger td.ref { font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); }
.ledger td.cl { font-family: var(--serif); font-size: 17px; font-weight: 500; }
.ledger td.num { font-family: var(--mono); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger td.small { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.ledger-scroll { overflow-x: auto; }

/* ============================================================
   CLOSE-OUT
   ============================================================ */
.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.notice {
  background: var(--fg);
  color: var(--bg);
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 30px;
  border-left: 3px solid var(--mast-accent);
}
.notice .bell {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--bg) 40%, transparent);
  padding: 4px 8px;
  flex-shrink: 0;
  margin-top: 2px;
}
.notice p { margin: 0; font-size: 14px; line-height: 1.55; }
.notice p b { font-weight: 600; }
.notice p span { color: color-mix(in srgb, var(--bg) 62%, var(--fg)); display: block; margin-top: 4px; font-size: 12.5px; }

.fieldset-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.fieldset-head h3 {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg);
}
.fieldset-head span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-left: auto;
}
/* ---------- close-out: the three steps ---------- */
.steps {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.step {
  background: var(--surface);
  padding: 15px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  opacity: .5;
  transition: opacity .2s, background .2s;
}
.step.on { opacity: 1; }
.step.on b { background: var(--accent); color: #fff; border-color: var(--accent); }
.step b {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.step span { font-family: var(--serif); font-size: 17px; font-weight: 500; }
.step i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  flex-basis: 100%;
  padding-left: 30px;
}

.stage { display: none; }
.stage.on { display: block; animation: fade .28s ease-out; }
@media (prefers-reduced-motion: reduce) { .stage.on { animation: none; } }
.stagehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.stagehead h3 { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.015em; }
.stagehead h3 b { font-weight: 500; color: var(--accent); }
.stagenote { color: var(--fg-2); font-size: 14px; margin: 0 0 18px; max-width: 62ch; }
.stageactions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.stageactions .submit { margin-top: 0; }
.capture {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ---------- the pending queue ---------- */
.queue { display: flex; flex-direction: column; gap: 10px; }
.qrow {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.qrow:hover { border-color: var(--fg-3); border-left-color: var(--accent); box-shadow: var(--shadow); transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .qrow:hover { transform: none; } }
.qrow.done { border-left-color: var(--good); opacity: .62; }
.qrow .qref { font-family: var(--mono); font-size: 11px; color: var(--fg-3); flex-shrink: 0; }
.qrow .qmain { flex: 1; min-width: 0; }
.qrow .qclient { font-family: var(--serif); font-size: 18px; font-weight: 500; display: block; }
.qrow .qmeta { font-size: 12.5px; color: var(--fg-2); }
.qrow .qwhen {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: right;
  flex-shrink: 0;
  color: var(--fg-3);
}
.qrow .qwhen.late { color: var(--warn); }
.qrow .qwhen.ok { color: var(--good); }

/* ---------- the prompt, as delivered ---------- */
.mail {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  max-width: 700px;
}
.mailbar {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: 9px 18px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.mailhead { padding: 16px 22px; border-bottom: 1px solid var(--line-soft); }
.mailhead dl { display: grid; grid-template-columns: 62px 1fr; gap: 5px 12px; margin: 0; }
.mailhead dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 3px;
}
.mailhead dd { margin: 0; font-size: 13.5px; }
.mailsubject { font-family: var(--serif); font-size: 19px; font-weight: 500; margin: 12px 0 0; }
.mailbody { padding: 20px 22px 22px; }
.mailbody p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; }
.mailbody p.greet { font-family: var(--serif); font-size: 17px; margin-bottom: 12px; }
.mailfoot {
  border-top: 1px solid var(--line-soft);
  padding: 12px 22px 16px;
  font-size: 11.5px;
  color: var(--fg-3);
  line-height: 1.5;
}

/* the pre-filled block inside the message */
.known {
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--accent-2) 5%, transparent);
  padding: 14px 16px;
  margin: 0 0 16px;
}
.known h5 {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
}
.known dl { display: grid; grid-template-columns: 108px 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.known dt { color: var(--fg-3); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 2px; }
.known dd { margin: 0; }
.asks { margin: 0 0 4px; padding-left: 18px; font-size: 14px; }
.asks li { margin-bottom: 5px; }

.mailcta {
  background: var(--fg);
  color: var(--bg);
  border: 0;
  padding: 12px 22px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 6px;
  transition: background .15s;
}
.mailcta:hover { background: var(--accent); }

.chase {
  display: flex;
  gap: 10px;
  align-items: baseline;
  border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  padding: 11px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  max-width: 700px;
}
.chase b {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--warn);
  flex-shrink: 0;
}

/* Teams variant reuses the same content in different chrome */
.mail.teams { max-width: 460px; border-left: 3px solid var(--accent); }
.mail.teams .mailbar { background: var(--fg); color: var(--bg); border-bottom: 0; }
.mail.teams .mailhead { padding-bottom: 12px; }

/* fields the matter record already knew */
.field.prefilled > label::after {
  content: 'from the matter record';
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  margin-left: 7px;
  text-transform: uppercase;
}
.field.prefilled input, .field.prefilled select {
  background: color-mix(in srgb, var(--accent-2) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent-2) 35%, var(--line));
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 580px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .span2 { grid-column: 1 / -1; }
.qnum {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--accent-2);
  margin-right: 6px;
}
.hint { font-size: 12px; color: var(--fg-3); margin-top: -2px; }

.submit {
  margin-top: 26px;
  background: var(--fg);
  color: var(--bg);
  border: 0;
  padding: 14px 28px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.submit:hover { background: var(--accent); }
.submit:disabled { background: var(--fg-3); cursor: default; }

.aside { border-left: 1px solid var(--line); padding-left: 26px; }
@media (max-width: 900px) {
  .aside { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 26px; }
}
.aside h3 {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 16px;
  font-weight: 500;
}
.trig { border-top: 1px solid var(--line-soft); padding: 15px 0; }
.trig b { font-family: var(--serif); font-size: 18px; font-weight: 500; display: block; margin-bottom: 4px; }
.trig span { font-size: 13.5px; color: var(--fg-2); line-height: 1.5; display: block; }
.trig i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--good);
  display: block;
  margin-top: 7px;
}

/* ============================================================
   BACKFILL
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 26px;
}
.stat { background: var(--surface); padding: 18px 20px; }
.stat b {
  font-family: var(--mono);
  font-size: 27px;
  display: block;
  letter-spacing: -0.03em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.stat span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: block;
  margin-top: 4px;
}
.conf { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; }
.conf.hi { color: var(--good); }
.conf.lo { color: var(--warn); }
.conf::before { content: '● '; font-size: 8px; vertical-align: 1px; }

/* ============================================================
   DIALOG
   ============================================================ */
dialog.sheet {
  border: 1px solid var(--fg);
  border-top: 3px solid var(--accent);
  background: var(--surface);
  color: var(--fg);
  max-width: 660px;
  width: calc(100% - 40px);
  padding: 0;
  box-shadow: var(--shadow-lift);
  margin: auto;
}
dialog.sheet::backdrop {
  background: rgba(10,13,16,.62);
  -webkit-backdrop-filter: blur(2px);   /* Safari needs the prefix */
  backdrop-filter: blur(2px);
}
.sheet-in { padding: 28px 32px 34px; }
.sheet h3 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  margin: 10px 0 5px;
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.sheet .role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
.dl { display: grid; grid-template-columns: 150px 1fr; margin: 26px 0 0; }
@media (max-width: 520px) { .dl { grid-template-columns: 1fr; } .dl dd { padding-top: 0 !important; border-top: 0 !important; } }
.dl dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.dl dd { margin: 0; padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; line-height: 1.5; }
.close {
  float: right;
  background: none;
  border: 1px solid var(--line);
  padding: 6px 11px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.close:hover { border-color: var(--fg); color: var(--fg); }

/* ============================================================
   EMPTY + TOAST
   ============================================================ */
.empty {
  border: 1px dashed var(--line);
  padding: 48px 28px;
  text-align: center;
  color: var(--fg-2);
  margin-top: 24px;
}
.empty b {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
  color: var(--fg);
}

.toast {
  position: fixed;
  bottom: 28px; left: 50%;
  background: var(--fg);
  color: var(--bg);
  padding: 13px 22px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .2s, transform .2s;
  box-shadow: var(--shadow-lift);
  border-left: 3px solid var(--mast-accent);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .2s; } }

.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* ============================================================
   PHONES
   Measured on a 375px viewport: the masthead was taking 24% of the
   screen, form inputs were 14px (which makes iOS Safari zoom in on
   focus and never zoom back out), labels were 9px, and several tap
   targets were under Apple's 44px minimum.
   ============================================================ */
@media (max-width: 640px) {

  /* --- iOS Safari zooms any input under 16px. Nothing else fixes it. --- */
  .field select, .field input, .field textarea,
  .askbar input, input, select, textarea {
    font-size: 16px;
  }

  /* --- give the masthead back to the content ---
     nowrap keeps the theme toggle on the same row as the wordmark; without it
     the long subtitle claims the full width and pushes it onto a second line,
     which cost 50px of a 812px screen. min-width:0 lets the block shrink. */
  .mast-in { padding: 11px 16px 9px; gap: 10px; align-items: center; flex-wrap: nowrap; }
  .mast-in > div:first-child { min-width: 0; flex: 1; }
  .wordmark-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .wordmark { font-size: 21px; }
  .wordmark-sub { font-size: 8.5px; letter-spacing: 0.16em; margin-top: 4px; }
  .whoami { font-size: 9px; line-height: 1.5; }
  .whoami br { display: none; }          /* firm and user on one line */
  .whoami b::after { content: ' ·'; }
  .mast-right { gap: 10px; }
  .themebtn { padding: 12px 12px; min-height: 44px; display: flex; align-items: center; }
  .tabs { padding: 0 10px; }
  .tab { padding: 14px 12px 12px; font-size: 11px; min-height: 46px; }

  .wrap { padding: 0 16px 64px; }
  .view { padding-top: 24px; }

  /* --- readable label text --- */
  .eyebrow, .whylab { font-size: 10.5px; letter-spacing: 0.14em; }
  .tag, .tomb-ref, .tomb-sector, .prop-tail, .person i, .stat span,
  .strip span, .field > label, .ledger td.small { font-size: 10.5px; }
  .why li { font-size: 12.5px; }
  .count, .srcnote, .counted { font-size: 12px; }
  .lede { font-size: 16px; }

  /* --- comfortable tap targets --- */
  .chip { padding: 11px 16px; font-size: 14px; }
  .btn-quiet, .linkbtn, .close { min-height: 44px; padding: 12px 14px; font-size: 11px; }
  .seg button { min-height: 44px; padding: 12px 14px; font-size: 11px; }
  .submit { width: 100%; padding: 16px 20px; font-size: 12px; }
  .askbar button { padding: 0 18px; font-size: 12px; }

  /* --- cards and answers, less cramped --- */
  .wall { grid-template-columns: 1fr; gap: 14px; }
  .tomb { padding: 0 16px 16px; }
  .tomb-client { font-size: 19px; }
  .tomb-val { font-size: 20px; }
  .memo { padding: 20px 18px; }
  .answer-body { font-size: 17.5px; }
  .askbar input { padding: 15px 14px; }

  /* --- stacked, not squeezed --- */
  .toolbar { gap: 14px; }
  .field { width: 100%; }
  .field select, .field input, .field textarea { min-width: 0; width: 100%; }
  .strip { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .folk { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }

  /* --- dialog: full height, scrollable, thumb-reachable close --- */
  dialog.sheet { width: calc(100% - 20px); max-height: 88dvh; }
  .sheet-in { padding: 20px 18px 28px; }
  .sheet h3 { font-size: 23px; }

  .draft-body { font-size: 14px; padding: 16px; max-height: 260px; }
  .mail { max-width: 100%; }
  .mailhead, .mailbody { padding-left: 16px; padding-right: 16px; }
}

/* Very small phones — the last places things still collide. */
@media (max-width: 380px) {
  .wordmark { font-size: 19px; }
  .whoami { display: none; }             /* keep the theme toggle reachable */
  .strip, .stats { grid-template-columns: 1fr; }
}