/* ─────────────────────────────────────────────────────────────────────────
   Lana dashboard — calm clinical light.

   Colour discipline: amber and red are reserved EXCLUSIVELY for referral
   flags and contraindication warnings. Nothing decorative may use them, so
   that when they appear they read as genuinely urgent rather than as styling.

   No web fonts: a demo must not depend on a network request resolving.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --bg:            #faf8f5;
  --surface:       #ffffff;
  --surface-sunk:  #f4f1ec;
  --border:        #e6e0d6;
  --border-strong: #d4cbbd;

  --ink:           #1f1d1a;
  --ink-soft:      #57514a;
  --ink-faint:     #8b837a;

  --accent:        #2f6f62;
  --accent-deep:   #235349;
  --accent-wash:   #e9f2ef;

  /* Reserved. Referral + contraindication only. */
  --alarm:         #a32b1c;
  --alarm-wash:    #fdeeeb;
  --alarm-edge:    #f0c9c1;
  --caution:       #99650d;
  --caution-wash:  #fdf5e6;
  --caution-edge:  #ecd7ad;

  --ok:            #2f6f62;

  --radius:        10px;
  --radius-sm:     6px;
  --shadow:        0 1px 2px rgba(31, 29, 26, .05),
                   0 8px 24px -12px rgba(31, 29, 26, .18);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

/* Must outrank every `display` rule below. The UA sheet's [hidden] is only
   `display: none`, so any class that sets its own display (.app, .gate,
   .draft-banner) silently ignores the attribute — which put a fixed,
   z-index-50 token gate on top of the whole dashboard, and showed the draft
   banner before a draft existed. Everything here hides with `hidden`, so this
   is the one place to enforce it. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

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

h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0 0 .6em; }
p:last-child { margin-bottom: 0; }

.muted   { color: var(--ink-faint); font-size: 13.5px; }
.empty-state { color: var(--ink-faint); font-size: 14px; padding: 28px 4px; }

/* ── Token gate ─────────────────────────────────────────────────────────── */

.gate {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--bg);
  z-index: 50;
}
.gate-card {
  width: min(420px, calc(100vw - 48px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}
.gate-card h1 { font-size: 22px; margin-bottom: 10px; letter-spacing: -.01em; }
.gate-card p { color: var(--ink-soft); font-size: 14px; }
.gate-card form { display: flex; gap: 8px; margin: 18px 0 12px; }
.gate-card input {
  flex: 1; min-width: 0;
  padding: 9px 11px;
  font: inherit; font-size: 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.gate-card input:focus,
.contact-request input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.gate-card button { /* shares .btn-primary styling below via .btn rules */ }
.gate-hint { font-size: 12.5px; color: var(--ink-faint); }

/* ── App shell ──────────────────────────────────────────────────────────── */

.app {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  border: 2.5px solid var(--accent);
  position: relative;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 5px;
  border-radius: 50%; background: var(--accent);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text strong { font-size: 16px; letter-spacing: -.01em; }
.brand-sub { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }

.topbar-status { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar-actions { display: flex; gap: 8px; }

/* State pill */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  font-size: 13px; font-weight: 550;
  border: 1px solid transparent;
  transition: background .25s, color .25s, border-color .25s;
}
.pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.pill-idle      { background: var(--surface-sunk); color: var(--ink-faint); border-color: var(--border); }
.pill-listening { background: var(--accent-wash);  color: var(--accent-deep); border-color: #c8ded7; }
.pill-thinking  { background: var(--surface-sunk); color: var(--ink-soft);   border-color: var(--border-strong); }
.pill-speaking  { background: var(--accent);       color: #fff; }
.pill-listening .pill-dot,
.pill-thinking  .pill-dot { animation: dot-pulse 1.4s ease-in-out infinite; }

@keyframes dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  white-space: nowrap;
}
.chip-key   { color: var(--ink-faint); }
.chip-value { color: var(--ink-soft); font-weight: 550; }
.chip.is-good  .chip-value { color: var(--accent); }
.chip.is-stale .chip-value { color: var(--ink-faint); }

/* Buttons */
.btn {
  font: inherit; font-size: 13.5px; font-weight: 550;
  padding: 7px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled) { background: var(--surface-sunk); color: var(--ink); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary,
.gate-card button {
  background: var(--accent); border-color: var(--accent); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 550;
  padding: 7px 15px; border-radius: var(--radius-sm);
  border-style: solid; border-width: 1px; cursor: pointer;
}
.btn-primary:hover:not(:disabled),
.gate-card button:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn-quiet {
  border-color: transparent; background: transparent;
  color: var(--ink-faint); font-size: 12.5px; padding: 4px 9px;
}
.btn-quiet:hover { background: var(--surface-sunk); color: var(--ink-soft); }

/* Error bar — component failure, not a plan warning, so it stays neutral-dark
   rather than borrowing the alarm colours reserved for clinical flags. */
.error-bar {
  padding: 9px 20px;
  background: #2c2823; color: #f6f1e9;
  font-size: 13px;
  border-bottom: 1px solid #1a1713;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.layout {
  display: grid;
  grid-template-columns: 274px minmax(0, 1fr) 505px;
  gap: 0;
  min-height: 0;
}

.rail {
  border-right: 1px solid var(--border);
  padding: 26px 20px;
  display: flex; flex-direction: column; gap: 26px;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 320px);
}

.transcript-wrap,
.context { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.context { border-left: 1px solid var(--border); background: var(--surface); }

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  min-height: 51px;
}
.section-head h2 {
  font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint);
}

.transcript { overflow-y: auto; padding: 20px 22px 40px; }
.panel { overflow-y: auto; padding: 18px 20px 40px; flex: 1; min-height: 0; }

/* ── Presence ───────────────────────────────────────────────────────────── */

.presence { text-align: center; padding-top: 8px; }

.orb {
  position: relative;
  width: 120px; height: 120px;
  margin: 0 auto 18px;
  display: grid; place-items: center;
}
.orb-core {
  position: absolute;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent);
  transition: transform .4s ease, background .4s ease, opacity .4s;
}
.orb-ring {
  position: absolute;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
}
.orb-bars {
  position: absolute; display: none;
  align-items: center; gap: 4px; height: 40px;
}
.orb-bars i {
  display: block; width: 4px; border-radius: 2px;
  background: #fff; height: 10px;
}

/* idle — a slow breath, so the thing never looks frozen on camera */
.orb-idle .orb-core { animation: breathe 4.5s ease-in-out infinite; opacity: .32; }

/* listening — rings travelling outward */
.orb-listening .orb-core { transform: scale(.82); }
.orb-listening .orb-ring { animation: ripple 2.4s ease-out infinite; }
.orb-listening .orb-ring:nth-child(2) { animation-delay: 1.2s; }

/* thinking — one orbiting arc */
.orb-thinking .orb-core { transform: scale(.72); opacity: .5; }
.orb-thinking .orb-ring:nth-child(1) {
  opacity: 1; width: 86px; height: 86px;
  border-color: var(--border-strong);
  border-top-color: var(--accent);
  animation: spin 1.15s linear infinite;
}

/* speaking — solid core with level bars */
.orb-speaking .orb-core { transform: scale(1.18); }
.orb-speaking .orb-bars { display: flex; }
.orb-speaking .orb-bars i { animation: levels .85s ease-in-out infinite; }
.orb-speaking .orb-bars i:nth-child(1) { animation-delay: -.5s; }
.orb-speaking .orb-bars i:nth-child(2) { animation-delay: -.25s; }
.orb-speaking .orb-bars i:nth-child(3) { animation-delay: -.7s; }
.orb-speaking .orb-bars i:nth-child(4) { animation-delay: -.1s; }
.orb-speaking .orb-bars i:nth-child(5) { animation-delay: -.4s; }

@keyframes breathe { 0%,100% { transform: scale(.94); } 50% { transform: scale(1.06); } }
@keyframes ripple {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.3); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes levels { 0%,100% { height: 9px; } 50% { height: 30px; } }

.presence-label { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.presence-hint  { font-size: 12.5px; color: var(--ink-faint); min-height: 2.6em; }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 16px;
}
.card-title {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 11px;
}

.grounding-body dl { margin: 0; display: grid; gap: 7px; }
.grounding-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13px;
}
.grounding-row dt { color: var(--ink-faint); }
.grounding-row dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.grounding-split { font-size: 12px; color: var(--ink-faint); font-weight: 400; }
.grounding-hash {
  margin-top: 11px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  word-break: break-all;
}
.grounding-docs { margin-top: 10px; }
.grounding-docs summary {
  cursor: pointer; font-size: 12px; color: var(--ink-faint);
  list-style: none;
}
.grounding-docs summary::-webkit-details-marker { display: none; }
.grounding-docs summary::before { content: "▸ "; }
.grounding-docs[open] summary::before { content: "▾ "; }
.grounding-docs ul {
  margin: 8px 0 0; padding: 0; list-style: none;
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  display: grid; gap: 3px;
}

/* The review status is shown, never hidden — she is the reviewer. */
.review-note {
  margin-top: 12px; padding: 9px 11px;
  background: var(--caution-wash);
  border: 1px solid var(--caution-edge);
  border-radius: var(--radius-sm);
  font-size: 12px; color: var(--caution); line-height: 1.45;
}
.review-note strong { font-weight: 650; }
.review-ok {
  margin-top: 12px; font-size: 12px; color: var(--accent);
}

/* ── Transcript ─────────────────────────────────────────────────────────── */

.turn { display: grid; grid-template-columns: 74px 1fr; gap: 14px; padding: 9px 0; }
.turn + .turn { border-top: 1px solid var(--border); }
.turn-who {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-top: 3px;
}
.turn-lana .turn-who { color: var(--accent); }
.turn-text { font-size: 15.5px; line-height: 1.6; }
.turn-time {
  font-size: 11px; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.turn-system .turn-text { color: var(--ink-faint); font-size: 13.5px; font-style: italic; }

/* Dictation is one growing block, not N chat turns — that is what makes a
   multi-segment capture read as a single continuous consult. */
.dictation {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}
.dictation-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 8px;
}
.dictation-count { color: var(--ink-faint); font-weight: 500; letter-spacing: 0; text-transform: none; }
.dictation-text { font-size: 15px; line-height: 1.65; white-space: pre-wrap; }
.dictation.is-live .dictation-head::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); animation: dot-pulse 1.2s ease-in-out infinite;
}

/* ── Context tabs ───────────────────────────────────────────────────────── */

.tabs { display: flex; gap: 3px; }
.tab {
  font: inherit; font-size: 12.5px; font-weight: 550;
  padding: 5px 12px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent;
  color: var(--ink-faint); cursor: pointer;
}
.tab:hover { background: var(--surface-sunk); color: var(--ink-soft); }
.tab-active,
.tab-active:hover {
  background: var(--accent-wash); color: var(--accent-deep);
  border-color: #c8ded7;
}
.tab-badge {
  display: inline-block; margin-left: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); vertical-align: middle;
}

/* ── Draft banner — sticky, never dismissible ───────────────────────────── */

.draft-banner {
  position: sticky; top: 0; z-index: 5;
  margin: -18px -20px 16px;
  padding: 11px 20px;
  background: var(--caution-wash);
  border-bottom: 1px solid var(--caution-edge);
  color: var(--caution);
  font-size: 13px; line-height: 1.45;
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  box-shadow: 0 6px 12px -10px rgba(31, 29, 26, .35);
}
.draft-banner strong { font-weight: 650; }
.draft-banner span { color: #7d5510; }
/* A sticky element resolves top:0 to the scroll container's PADDING box, so
   the panel's 18px padding-top leaves a band above the banner that scrolling
   cards pass through in full view. This paints that band in the banner's own
   colour so nothing ever appears above the notice. */
.draft-banner::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -22px; height: 22px;
  background: var(--caution-wash);
}

/* ── Stage rail ─────────────────────────────────────────────────────────── */

.stage-rail { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 1px; }
.stage {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center;
  gap: 10px; padding: 6px 2px;
  font-size: 13.5px; color: var(--ink-faint);
}
.stage-icon {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: grid; place-items: center;
  font-size: 10px; line-height: 1;
}
.stage-done { color: var(--ink-soft); }
.stage-done .stage-icon {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.stage-active { color: var(--ink); font-weight: 600; }
.stage-active .stage-icon {
  border-color: var(--accent); border-top-color: transparent;
  animation: spin 1s linear infinite;
}
/* A stage the run passed over — the memo path never drafts or checks. Muted
   and struck, so it can't be mistaken for a completed one at a glance. */
.stage-skipped { color: var(--ink-faint); }
.stage-skipped > span:nth-child(2) { text-decoration: line-through; opacity: .75; }
.stage-skipped .stage-icon { border-style: dashed; color: var(--ink-faint); }
.stage-note { font-size: 12px; color: var(--ink-faint); font-weight: 400; }

/* ── Plan cards ─────────────────────────────────────────────────────────── */

.plan-body { display: grid; gap: 14px; }

.pcard {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.pcard-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunk);
}
.pcard-title {
  font-size: 11.5px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft);
}
.pcard-body { padding: 13px 14px; }
.pcard-body > :last-child { margin-bottom: 0; }

.pcard-alarm  { border-color: var(--alarm-edge); }
.pcard-alarm  .pcard-head { background: var(--alarm-wash); border-bottom-color: var(--alarm-edge); }
.pcard-alarm  .pcard-title { color: var(--alarm); }
.pcard-caution { border-color: var(--caution-edge); }
.pcard-caution .pcard-head { background: var(--caution-wash); border-bottom-color: var(--caution-edge); }
.pcard-caution .pcard-title { color: var(--caution); }
.pcard-ok .pcard-title { color: var(--accent); }

.count-tag {
  font-size: 11px; font-weight: 650;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--ink-soft);
}
.pcard-alarm .count-tag { background: #fff; border-color: var(--alarm-edge); color: var(--alarm); }
.pcard-caution .count-tag { background: #fff; border-color: var(--caution-edge); color: var(--caution); }

/* A flag: the model's reason, then Alexandra's own words underneath. */
.flag + .flag { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.flag-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.flag-id {
  font-family: var(--mono); font-size: 11px;
  padding: 1px 6px; border-radius: 4px;
  background: var(--surface-sunk); color: var(--ink-soft);
  border: 1px solid var(--border);
}
.flag-action { font-size: 13.5px; font-weight: 600; }
.flag-why { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 7px; }
.flag-verbatim {
  font-family: var(--serif);
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-soft);
  border-left: 2px solid var(--border-strong);
  padding: 2px 0 2px 11px;
  margin: 0;
}
.flag-source {
  display: block; margin-top: 5px;
  font-family: var(--sans); font-size: 11px; color: var(--ink-faint);
  font-style: normal;
}
.flag-possible .flag-action { font-weight: 550; color: var(--ink-soft); }
.confidence-tag {
  font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px;
}
.confidence-confident { background: var(--alarm-wash); color: var(--alarm); border: 1px solid var(--alarm-edge); }
.confidence-possible  { background: var(--surface-sunk); color: var(--ink-faint); border: 1px solid var(--border); }

.subhead {
  font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint); margin: 14px 0 9px;
}

/* Phases */
.phase-list { display: grid; gap: 8px; }
.phase {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13.5px;
}
.phase-name { font-weight: 550; }
.phase-meta { color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; }

.kv { display: flex; gap: 8px; font-size: 13px; margin-bottom: 5px; }
.kv-key { color: var(--ink-faint); min-width: 84px; }

.plain-list { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-soft); }
.plain-list li { margin-bottom: 3px; }

/* ── Document viewer ────────────────────────────────────────────────────── */

.doc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
}
.doc-file {
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  word-break: break-all;
}
.doc-scroll {
  max-height: 46vh; overflow-y: auto;
  padding: 16px 16px 20px;
  border-top: 1px solid var(--border);
  background: #fdfcfa;
}
.doc {
  font-family: var(--serif);
  font-size: 14px; line-height: 1.62;
  color: var(--ink);
}
.doc h1 { font-size: 16px; margin: 0 0 6px; }
.doc h2 {
  font-size: 14.5px; margin: 20px 0 8px;
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
  font-family: var(--sans); letter-spacing: -.005em;
}
.doc h3 {
  font-size: 12.5px; margin: 15px 0 6px;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint);
}
.doc p { margin: 0 0 9px; }
.doc hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.doc ul { margin: 0 0 10px; padding-left: 19px; }
.doc li { margin-bottom: 4px; }
.doc code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--surface-sunk); padding: 1px 5px; border-radius: 4px;
}
/* The dictated case, verbatim, in the referral memo. Wraps rather than
   scrolls — it is prose, not code, and a clinician reads it. */
.doc pre {
  margin: 0 0 11px;
  padding: 11px 13px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.doc pre code {
  background: none; padding: 0; border-radius: 0;
  font-family: var(--serif); font-size: 13px; line-height: 1.6;
  color: var(--ink-soft);
  white-space: pre-wrap; word-break: break-word;
}
.doc blockquote {
  margin: 0 0 11px;
  padding: 10px 13px;
  background: var(--caution-wash);
  border: 1px solid var(--caution-edge);
  border-radius: var(--radius-sm);
  color: var(--caution);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.5;
}
.doc blockquote h1 { font-size: 13px; font-family: var(--sans); margin-bottom: 4px; }
.doc blockquote p:last-child { margin-bottom: 0; }
/* Quoted rule text inside a list (the "> verbatim" lines) is source material,
   not a warning — it must not borrow the caution colour. */
.doc li blockquote {
  background: transparent; border: 0;
  border-left: 2px solid var(--border-strong);
  border-radius: 0; padding: 2px 0 2px 10px;
  color: var(--ink-faint); font-family: var(--serif); font-size: 12.5px;
  margin-top: 5px;
}
.doc-table-wrap { overflow-x: auto; margin: 0 0 12px; }
.doc table {
  border-collapse: collapse; width: 100%;
  font-family: var(--sans); font-size: 12px;
}
.doc th, .doc td {
  border: 1px solid var(--border);
  padding: 5px 8px; text-align: left; vertical-align: top;
}
.doc th { background: var(--surface-sunk); font-weight: 600; color: var(--ink-soft); }
.doc td:empty::after { content: "·"; color: var(--border-strong); }

/* ── Saved drafts list ──────────────────────────────────────────────────── */

.recent-plans { margin-top: 22px; }
.recent-head {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 9px;
}
.recent-item {
  display: block; width: 100%; text-align: left;
  font: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px; margin-bottom: 7px;
}
.recent-item:hover { border-color: var(--border-strong); background: var(--surface-sunk); }
.recent-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.recent-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.recent-when { font-size: 11.5px; color: var(--ink-faint); margin-left: auto; }
.recent-tag {
  font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px;
  background: var(--caution-wash); color: var(--caution);
  border: 1px solid var(--caution-edge);
}
.recent-tag-memo { background: var(--alarm-wash); color: var(--alarm); border-color: var(--alarm-edge); }

/* ── Email ──────────────────────────────────────────────────────────────── */

.account { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 13px; }
.account-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface-sunk);
}
.account-label { font-size: 14px; font-weight: 600; }
.account-provider {
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px solid var(--border-strong);
  padding: 1px 6px; border-radius: 999px;
}
.account-unread { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.account-body { padding: 4px 0 6px; }
.account-window {
  font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint); padding: 8px 14px 6px;
}
.mail { padding: 7px 14px; border-top: 1px solid var(--border); }
.mail:first-of-type { border-top: 0; }
.mail-top { display: flex; align-items: baseline; gap: 8px; }
.mail-from { font-size: 13px; font-weight: 600; }
.mail-when { font-size: 11.5px; color: var(--ink-faint); margin-left: auto; white-space: nowrap; }
.mail-subject { font-size: 13px; color: var(--ink-soft); }
.mail-unread .mail-from::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent); margin-right: 6px;
  vertical-align: middle;
}
.account-error {
  margin: 0 14px 10px; padding: 8px 10px;
  background: var(--surface-sunk); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 12px; color: var(--ink-soft);
}

.contact-request {
  border: 1px solid var(--accent); background: var(--accent-wash);
  border-radius: var(--radius); padding: 14px; margin-bottom: 16px;
}
.contact-request p { font-size: 13.5px; }
.contact-request form { display: flex; gap: 8px; margin: 10px 0 8px; }
.contact-request input {
  flex: 1; min-width: 0; padding: 7px 10px;
  font: inherit; font-size: 13.5px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface);
}
.contact-request button {
  font: inherit; font-size: 13px; font-weight: 550;
  padding: 7px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  cursor: pointer;
}
.contact-msg { font-size: 12.5px; min-height: 1.3em; color: var(--accent-deep); }
.contact-msg.is-bad { color: var(--alarm); }

/* ── Narrower windows ───────────────────────────────────────────────────── */

@media (max-width: 1500px) {
  .layout { grid-template-columns: 240px minmax(0, 1fr) 440px; }
}
@media (max-width: 1240px) {
  .layout { grid-template-columns: minmax(0, 1fr) 420px; }
  .rail { display: none; }
}

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