/* ============================================================
   LEKHANAM — design tokens & system
   Direction: "Ink & Iodine" — cool porcelain chart-paper canvas,
   prussian sidebar, iodine-amber as the single vivid accent (it is
   the color of live capture: dictated words arrive amber, settle to
   ink once mapped). Bricolage Grotesque display / Instrument Sans
   body / Spline Sans Mono for transcript + data.
   Contrast (vs #FFFFFF): ink 15.9:1 · ink-soft 6.6:1 · muted 5.4:1
   · iodine 4.7:1 (large/UI only) · jade 5.2:1.
   ============================================================ */

:root {
  /* Teal clinical theme — matches the landing + product reference. */
  --porcelain: #F5F9FA;
  --rule: #E2ECEF;
  --surface: #FFFFFF;
  --ink: #12333D;
  --ink-soft: #45606B;
  --muted: #6E8791;
  --prussian: #FFFFFF;          /* sidebar surface (light) */
  --prussian-2: #EDF4F6;        /* sidebar hover */
  --sidebar-text: #45606B;
  --iodine: #0E9494;            /* primary action / live accent */
  --iodine-deep: #0B7676;
  --iodine-soft: #E3F4F4;
  --iodine-live: #12A5A5;
  --jade: #17845B;
  --jade-soft: #E1F3EA;
  --danger: #B3261E;
  --danger-soft: #F9E5E3;
  --amber-note: #8A5A00;
  --amber-soft: #FBF0DA;

  --font-display: "Bricolage Grotesque", "Avenir Next", sans-serif;
  --font-body: "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Spline Sans Mono", "SF Mono", Menlo, monospace;

  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(16, 32, 43, .05), 0 4px 16px rgba(16, 32, 43, .06);
  --sidebar-w: 236px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; margin: 0 0 .4em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
a { color: var(--iodine-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--font-mono); font-size: .92em; }
:focus-visible { outline: 2px solid var(--iodine); outline-offset: 2px; border-radius: 4px; }

/* ---------- App shell: topbar + light sidebar ---------- */
.topbar {
  background: var(--surface); border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 14px; padding: 0 22px; height: 60px;
  position: sticky; top: 0; z-index: 40;
}
.topbar .ws-brand { display: flex; align-items: center; gap: 10px; }
.topbar .ws-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: #fff; }
.topbar .ws-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.topbar .divider { width: 1px; height: 26px; background: var(--rule); }
.topbar .product-mark { font-family: var(--font-display); font-weight: 700; color: var(--iodine-deep); font-size: 1.02rem; }
.topbar .product-mark small { font-family: var(--font-body); font-weight: 400; color: var(--muted); font-size: .82rem; margin-left: 5px; }
.topbar .user-chip { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar .avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--iodine);
  color: #fff; font-weight: 700; font-size: .8rem; display: grid; place-items: center;
}
.topbar .user-meta { line-height: 1.15; text-align: right; }
.topbar .user-meta .name { font-weight: 600; font-size: .88rem; }
.topbar .user-meta .role { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.shell { display: flex; min-height: calc(100vh - 60px); }
.sidenav {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--prussian); color: var(--sidebar-text);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
  position: sticky; top: 60px; height: calc(100vh - 60px); padding: 18px 12px;
}
.sidenav .brand { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--ink); padding: 4px 10px 2px; }
.sidenav .brand .dot { color: var(--iodine); }
.sidenav .brand-sub { font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); padding: 0 10px 16px; }
.sidenav nav { display: flex; flex-direction: column; gap: 3px; }
.sidenav nav a {
  color: var(--sidebar-text); padding: 10px 12px; border-radius: 10px;
  font-weight: 500; font-size: .92rem; display: flex; align-items: center; gap: 11px;
  border-left: 3px solid transparent;
}
.sidenav nav a:hover { background: var(--prussian-2); text-decoration: none; color: var(--ink); }
.sidenav nav a.active { background: var(--iodine-soft); color: var(--iodine-deep); font-weight: 700; border-left-color: var(--iodine); }
.sidenav nav a .glyph { width: 18px; text-align: center; opacity: .8; }
.sidenav .spacer { flex: 1; }
.sidenav .sys-status {
  border: 1px solid var(--rule); border-radius: 12px; padding: 10px 12px;
  font-size: .74rem; color: var(--ink-soft); background: var(--surface);
}
.sidenav .sys-status .ok-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--jade); margin-right: 6px; }
.sidenav .version { font-size: .66rem; color: var(--muted); padding: 10px 12px 0; }

.main { flex: 1; padding: 26px 30px 60px; max-width: 1280px; min-width: 0; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .sub { color: var(--muted); font-size: .9rem; }

/* ---------- Cards, tables, badges ---------- */
.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow);
}
.card + .card { margin-top: 16px; }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

table.lk { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.lk th {
  text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--rule);
}
table.lk td { padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.lk tr:last-child td { border-bottom: 0; }

.badge {
  display: inline-block; font-size: .7rem; font-weight: 600; padding: 2px 9px;
  border-radius: 99px; text-transform: uppercase; letter-spacing: .05em;
}
.badge.amber { background: var(--iodine-soft); color: var(--iodine-deep); }
.badge.jade { background: var(--jade-soft); color: var(--jade); }
.badge.slate { background: #E7EDF0; color: var(--ink-soft); }
.badge.red { background: var(--danger-soft); color: var(--danger); }
.badge.note { background: var(--amber-soft); color: var(--amber-note); }

/* ---------- Buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: .92rem;
  border-radius: 10px; padding: 9px 18px; border: 1px solid transparent;
  transition: background .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--iodine); color: #fff; }
.btn-primary:hover { background: var(--iodine-deep); text-decoration: none; color: #fff; }
.btn-quiet { background: var(--surface); color: var(--ink-soft); border-color: var(--rule); }
.btn-quiet:hover { border-color: var(--muted); text-decoration: none; }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger-soft); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-jade { background: var(--jade); color: #fff; }
.btn-jade:hover { background: #0F6647; color: #fff; text-decoration: none; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-lg { padding: 12px 26px; font-size: 1rem; }

label.lk { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .07em; }
input.lk, select.lk, textarea.lk {
  width: 100%; font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px;
}
textarea.lk.mono { font-family: var(--font-mono); font-size: .85rem; line-height: 1.6; }
input.lk:focus, select.lk:focus, textarea.lk:focus { border-color: var(--iodine); outline: none; }
.field { margin-bottom: 16px; }
.help { font-size: .8rem; color: var(--muted); margin-top: 4px; }

.flash { border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: .9rem; }
.flash.success { background: var(--jade-soft); color: var(--jade); }
.flash.info { background: #E7EDF0; color: var(--ink-soft); }
.flash.error { background: var(--danger-soft); color: var(--danger); }

/* ---------- Stat tiles (insights + dashboard) ---------- */
.stat { padding: 16px 18px; }
.stat .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.stat .v { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.stat .d { font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* ---------- Bars (single-hue magnitude, direct labels) ---------- */
.bar-row { display: grid; grid-template-columns: 130px 1fr 70px; gap: 10px; align-items: center; font-size: .85rem; padding: 5px 0; }
.bar-row .bar-label { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--porcelain); border-radius: 6px; height: 14px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--iodine-live); border-radius: 0 4px 4px 0; min-width: 2px; }
.bar-fill.jade { background: var(--jade); }
.bar-row .bar-val { text-align: right; font-family: var(--font-mono); font-size: .78rem; color: var(--ink-soft); }

.spark { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.spark .col { flex: 1; background: var(--iodine-soft); border-radius: 3px 3px 0 0; position: relative; min-height: 2px; }
.spark .col .fill { position: absolute; bottom: 0; left: 0; right: 0; background: var(--iodine-live); border-radius: 3px 3px 0 0; }
.spark-labels { display: flex; gap: 3px; margin-top: 4px; }
.spark-labels span { flex: 1; text-align: center; font-size: .58rem; color: var(--muted); }

/* ---------- Studio (record screen) ---------- */
.studio { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .studio { grid-template-columns: 1fr; } }

.paper {
  background:
    repeating-linear-gradient(transparent 0 27px, var(--rule) 27px 28px),
    var(--surface);
}
.transcript-pane { min-height: 320px; max-height: 60vh; overflow-y: auto; font-family: var(--font-mono); font-size: .86rem; line-height: 28px; padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--rule); }
.transcript-pane .fresh { color: var(--iodine-deep); background: var(--iodine-soft); border-radius: 3px; transition: background 2s, color 2s; }
.transcript-pane .settled { color: var(--ink); background: transparent; }
.transcript-pane .interim { color: var(--muted); font-style: italic; }

.rec-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); }
.rec-dot.live { background: var(--iodine-live); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(18, 165, 165, .45); } 50% { box-shadow: 0 0 0 9px rgba(18, 165, 165, 0); } }

.vu { display: flex; align-items: center; gap: 2px; height: 26px; }
.vu span { width: 4px; background: var(--iodine-live); border-radius: 2px; height: 4px; transition: height .08s linear; }

.engine-chip { font-size: .72rem; font-family: var(--font-mono); color: var(--muted); }
.engine-chip.degraded { color: var(--amber-note); }

.section-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  border-left: 3px solid var(--rule); padding: 12px 16px; margin-bottom: 12px;
  transition: border-color .3s, box-shadow .3s;
}
.section-card.filled { border-left-color: var(--jade); }
.section-card.active-now { border-left-color: var(--iodine-live); box-shadow: 0 0 0 3px var(--iodine-soft); }
.section-card.missing { border-left-color: var(--danger); }
.section-card h4 { margin: 0 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; }
.section-card .conf { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.section-card .body { font-size: .93rem; min-height: 1.4em; white-space: pre-wrap; }
.section-card .body[contenteditable="true"]:focus { outline: 2px solid var(--iodine); border-radius: 6px; }
.section-card .body:empty::before { content: attr(data-placeholder); color: var(--muted); font-style: italic; font-size: .85rem; }
.section-card .ghost { color: var(--muted); font-style: italic; font-size: .85rem; border-top: 1px dashed var(--rule); margin-top: 8px; padding-top: 6px; }
.section-card .ghost::before { content: "◦ anticipating — "; color: var(--iodine-live); font-style: normal; }

.preempt-strip { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.preempt-strip .gap-note { background: var(--amber-soft); color: var(--amber-note); border-radius: 8px; padding: 7px 12px; font-size: .84rem; }
.preempt-strip .sug-note { background: #E7EDF0; color: var(--ink-soft); border-radius: 8px; padding: 7px 12px; font-size: .84rem; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .login-wrap { grid-template-columns: 1fr; } .login-art { display: none; } }
.login-art { background: linear-gradient(160deg, #0B7676, #0E9494); color: #D7F0F0; padding: 60px; display: flex; flex-direction: column; justify-content: center; }
.login-art h2 { color: #fff; font-size: 1.9rem; max-width: 420px; }
.login-form-side { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.login-card { width: 100%; max-width: 400px; }
.cred-box { background: var(--porcelain); border: 1px dashed var(--muted); border-radius: 10px; padding: 12px 14px; font-family: var(--font-mono); font-size: .78rem; margin-top: 18px; }
.cred-box strong { display: block; font-family: var(--font-body); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: 6px; }

/* ---------- Landing ---------- */
.land { background: var(--porcelain); color: var(--ink); }
.land-nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 6vw; }
.land-nav .brand { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.land-nav .brand .dot { color: var(--iodine); }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 40px 6vw 70px; }
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; } }
.hero .eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--iodine-deep); font-weight: 700; }
.hero h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.08; margin: 14px 0 18px; }
.hero .sub { font-size: 1.06rem; color: var(--ink-soft); max-width: 520px; }
.hero .cta-row { display: flex; gap: 14px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.hero .friction { font-size: .8rem; color: var(--muted); margin-top: 10px; }
.proof-strip { display: flex; gap: 28px; padding: 0 6vw 50px; flex-wrap: wrap; }
.proof-strip .p { font-size: .84rem; color: var(--ink-soft); }
.proof-strip .p b { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }

/* Landing live demo panel */
.demo-panel {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 20px; position: relative; overflow: hidden;
}
.demo-panel .demo-head { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--muted); margin-bottom: 12px; }
.demo-transcript { font-family: var(--font-mono); font-size: .78rem; line-height: 1.7; min-height: 66px; color: var(--ink-soft); }
.demo-transcript .amber { color: var(--iodine-deep); background: var(--iodine-soft); border-radius: 2px; }
.demo-cursor { display: inline-block; width: 7px; height: 14px; background: var(--iodine-live); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.demo-sections { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.demo-sec { border: 1px solid var(--rule); border-left: 3px solid var(--rule); border-radius: 9px; padding: 8px 12px; font-size: .8rem; opacity: .55; transition: all .5s; }
.demo-sec.on { opacity: 1; border-left-color: var(--jade); }
.demo-sec .t { font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); font-weight: 700; }
.demo-sec .x { color: var(--ink); min-height: 1.2em; }
.demo-vu { display: flex; gap: 3px; align-items: center; height: 20px; }
.demo-vu span { width: 3px; border-radius: 2px; background: var(--iodine-live); animation: vu 1s ease-in-out infinite; }
.demo-vu span:nth-child(2n) { animation-delay: .15s; }
.demo-vu span:nth-child(3n) { animation-delay: .3s; }
@keyframes vu { 0%, 100% { height: 4px; } 50% { height: 18px; } }

.demo-legend { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: .66rem; }
.demo-legend mark.ent { font-size: .64rem; padding: 1px 7px; border-radius: 99px; }
.compare-wrap { overflow-x: auto; margin-top: 26px; }
table.compare { width: 100%; max-width: 860px; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
table.compare th { text-align: left; padding: 12px 16px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
table.compare th:first-child { background: #E7EDF0; color: var(--ink-soft); }
table.compare th:last-child { background: var(--iodine-soft); color: var(--iodine-deep); }
table.compare td { padding: 10px 16px; border-top: 1px solid var(--rule); font-size: .9rem; width: 50%; }
table.compare td:first-child { color: var(--muted); }
.try-list { columns: 2; gap: 40px; max-width: 700px; }
.try-list li { margin-bottom: 6px; break-inside: avoid; }
@media (max-width: 640px) { .try-list { columns: 1; } }
.faq-list { max-width: 760px; }
.faq-item { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 0 18px; margin-bottom: 10px; }
.faq-item summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; position: relative; }
.faq-item summary::after { content: '+'; position: absolute; right: 0; color: var(--iodine-deep); font-family: var(--font-mono); }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: 0 0 14px; color: var(--ink-soft); font-size: .93rem; }
.proof-strip .p b { margin-bottom: 3px; }
@media (max-width: 900px) { .steps[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 600px) { .steps[style*="repeat(4"] { grid-template-columns: 1fr !important; } }
.band { padding: 56px 6vw; }
.band.alt { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.band h2 { font-size: 1.6rem; max-width: 640px; }
.band .lede { color: var(--ink-soft); max-width: 620px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step h3 { font-size: 1rem; }
.step .n { font-family: var(--font-mono); color: var(--iodine-deep); font-size: .8rem; }
.step p { color: var(--ink-soft); font-size: .9rem; }
.land-footer { padding: 40px 6vw; color: var(--muted); font-size: .8rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ---------- Studio: mic, waveform, word-throw, autocorrect ---------- */
.dictation-head { display: flex; align-items: center; gap: 18px; }
.mic-btn {
  width: 74px; height: 74px; border-radius: 50%; border: 2px solid var(--rule);
  background: var(--surface); cursor: pointer; font-size: 1.5rem; color: var(--muted);
  transition: all .2s; flex-shrink: 0;
}
.mic-btn:hover { border-color: var(--iodine); color: var(--iodine); }
.mic-btn.live { background: var(--iodine); border-color: var(--iodine); color: #fff; animation: micPulse 1.6s ease-in-out infinite; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(14,148,148,.35); } 50% { box-shadow: 0 0 0 14px rgba(14,148,148,0); } }
.mic-btn[disabled] { opacity: .45; cursor: default; animation: none; }
.dict-mid { flex: 1; min-width: 0; }
#wave { width: 100%; height: 64px; display: block; }
.dict-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
#wordStage { position: relative; height: 0; overflow: visible; }
.thrown-word {
  position: absolute; top: -30px; font-family: var(--font-mono); font-size: .72rem;
  color: var(--iodine-deep); background: var(--iodine-soft); border-radius: 4px; padding: 1px 6px;
  pointer-events: none; opacity: 0; animation: wordFly 1.3s ease-out forwards;
}
@keyframes wordFly {
  0% { opacity: 0; transform: translate(0, 0) scale(.7) rotate(-4deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, -160px), var(--dy, 90px)) scale(1) rotate(3deg); }
}
.stat-row { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.mini-stat { flex: 1; min-width: 110px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; }
.mini-stat .k { font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.mini-stat b { font-family: var(--font-display); font-size: 1.15rem; }

.autocorr { text-decoration: underline wavy var(--iodine-live) 1.5px; cursor: pointer; border-radius: 2px; }
.autocorr:hover { background: var(--iodine-soft); }
.autocorr.resolved { text-decoration-style: solid; text-decoration-color: var(--jade); }
.ac-popover {
  position: absolute; z-index: 60; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(16,32,43,.18); padding: 12px 14px; width: 290px;
}
.ac-heard { font-size: .8rem; color: var(--ink-soft); }
.ac-heard b { font-family: var(--font-mono); }
.ac-btn { padding: 4px 10px; font-size: .74rem; }

/* Live report doc (studio right panel) */
.rd-live .body { min-height: 1.3em; white-space: pre-wrap; font-size: .93rem; }
.rd-live .body:empty::before { content: attr(data-placeholder); color: var(--muted); font-style: italic; font-size: .84rem; }
.rd-live .body[contenteditable="true"]:focus { outline: 2px solid var(--iodine); border-radius: 6px; }
.rd-live .conf { font-size: .66rem; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.rd-live.filled .rd-h { color: var(--jade); }
.rd-live.active-now { background: var(--iodine-soft); margin: 0 -22px; padding-left: 22px; padding-right: 22px; border-radius: 6px; }
.rd-live.missing .rd-h { color: var(--danger); }
.rd-live .ghost { color: var(--muted); font-style: italic; font-size: .82rem; border-top: 1px dashed var(--rule); margin-top: 6px; padding-top: 4px; }
.rd-live .ghost::before { content: "◦ anticipating — "; color: var(--iodine-live); font-style: normal; }

/* ---------- Report document ---------- */
.report-doc { max-width: 820px; padding: 0; overflow: hidden; }
.rd-banner { background: var(--surface); color: var(--ink); padding: 18px 34px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--iodine); }
.rd-facility { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--iodine-deep); }
.rd-modality { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.rd-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px; margin: 0; padding: 16px 34px; border-bottom: 2px solid var(--ink); background: var(--porcelain); }
.rd-meta > div { display: flex; flex-direction: column; }
.rd-meta dt { font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.rd-meta dd { margin: 0; font-size: .88rem; }
@media (max-width: 700px) { .rd-meta { grid-template-columns: repeat(2, 1fr); } }
.rd-body { padding: 10px 34px 20px; }
.rd-section { padding: 12px 0 4px; }
.rd-section + .rd-section { border-top: 1px solid var(--rule); }
.rd-h { font-size: .74rem; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-soft); margin: 0 0 7px; font-family: var(--font-body); font-weight: 700; }
.rd-para { margin: 0 0 7px; font-size: .95rem; }
.rd-empty { color: var(--muted); font-style: italic; font-size: .85rem; margin: 0 0 7px; }
.rd-organ { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 3px 0; font-size: .93rem; }
.rd-organ-label { font-weight: 600; color: var(--ink-soft); font-size: .84rem; }
@media (max-width: 600px) { .rd-organ { grid-template-columns: 1fr; gap: 0; } }
.rd-num { display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 3px 0; font-size: .97rem; }
.rd-num-marker { font-family: var(--font-mono); color: var(--iodine-deep); font-weight: 600; }
.rd-impression { background: var(--iodine-soft); margin: 8px -34px 0; padding: 14px 34px; border-top: 2px solid var(--iodine) !important; }
.rd-impression .rd-h { color: var(--iodine-deep); }
.rd-sig { border-top: 2px solid var(--ink); padding: 14px 34px 20px; }
.rd-final-mark { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .2em; text-align: center; color: var(--ink-soft); padding-bottom: 8px; }
.rd-sig-lines { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; color: var(--ink-soft); }

/* Entity highlighting (taxonomy borrowed from OpenMed) */
/* No background on the base rule: `mark.ent` outspecifies `.ent-<type>`,
   so a base background would override every tint below (that bug shipped once). */
mark.ent { border-radius: 3px; padding: 0 2px; color: inherit; }
.ent-anatomy { background: #E1ECF7; }
.ent-condition { background: #FBE3D4; }
.ent-measurement { background: #EAE3F7; font-family: var(--font-mono); font-size: .9em; }
.ent-medication { background: #DDF2EE; }
.ent-procedure { background: #E7EDF0; }
.ent-date { background: #F3ECDC; }
.ent-negation { background: #E2F3EC; }
.ent-laterality { background: transparent; text-decoration: underline dotted var(--ink-soft); }
.ents-off mark.ent { background: transparent !important; text-decoration: none !important; }
.ent-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .74rem; color: var(--muted); margin-top: 10px; max-width: 820px; }

@media print {
  .sidenav, .no-print, .ent-legend { display: none !important; }
  .main { padding: 0; max-width: none; }
  .report-doc { box-shadow: none; border: none; border-radius: 0; max-width: none; }
  mark.ent { background: transparent !important; }
  body { background: #fff; }
}

/* ---------- Misc ---------- */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.right { margin-left: auto; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
hr.lk { border: 0; border-top: 1px solid var(--rule); margin: 16px 0; }

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidenav { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; padding: 8px 12px; gap: 8px; }
  .sidenav nav { flex-direction: row; }
  .sidenav .brand, .sidenav .brand-sub, .sidenav .sys-status, .sidenav .version { display: none; }
  .sidenav .spacer { display: none; }
  .topbar { padding: 0 14px; }
  .topbar .user-meta { display: none; }
  .main { padding: 18px 16px 50px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}