/* ============================================================
   CloseWise "Ledger" design language.
   A daylight trading-desk: warm paper, ink, one confident market
   green. Ruled lines and stamps instead of shadows and gradients.
   Custom-drawn glyphs only (see index.html defs). No icon fonts,
   no dark neon, no default dashboard skin.
   ============================================================ */

:root {
  --paper: #f4f1e9;
  --paper-2: #ede9dd;
  --card: #fbfaf5;
  --ink: #1c2422;
  --ink-2: #4a5751;
  --ink-3: #7b877f;
  --rule: #d9d3c3;
  --rule-strong: #b9b09a;

  --green: #0f6c4f;      /* market green — action, positive */
  --green-soft: #e3ede7;
  --amber: #96610f;      /* signal amber — objections, attention */
  --amber-soft: #f3e9d8;
  --brick: #9e3b2c;      /* brick — blocked, compliance */
  --brick-soft: #f2e2de;
  --slate: #33596e;      /* slate — manager, info */
  --slate-soft: #e2e9ee;
  --violet: #5d4a7c;     /* reserved: sensitive/empathy */
  --violet-soft: #e9e4f1;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: Consolas, "Cascadia Mono", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
}

/* ---------- shell ---------- */
#root { min-height: 100%; }
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.rail {
  border-right: 1px solid var(--rule-strong);
  background: var(--paper-2);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.wordmark {
  font-family: var(--serif);
  font-size: 24px; letter-spacing: 0.2px; margin: 2px 6px 4px;
}
.wordmark b { font-weight: 700; }
.wordmark .wise { color: var(--green); font-style: italic; }
.wordmark-sub {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--ink-3); margin: 0 6px 14px;
}
.railsec {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.8px;
  color: var(--ink-3); margin: 14px 6px 4px;
  border-bottom: 1px solid var(--rule); padding-bottom: 3px;
}
.navlink {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 6px; border: 1px solid transparent;
  color: var(--ink-2); text-decoration: none; font-size: 13.5px;
  cursor: pointer; background: none; width: 100%; text-align: left; font-family: var(--sans);
}
.navlink svg { width: 17px; height: 17px; flex: none; }
.navlink:hover { color: var(--ink); border-color: var(--rule); background: var(--card); }
.navlink.active {
  color: var(--ink); background: var(--card);
  border-color: var(--rule-strong);
  box-shadow: 2px 2px 0 rgba(28, 36, 34, 0.08);
}
.rail .spacer { flex: 1; }
.railfoot { font-size: 11px; color: var(--ink-3); padding: 8px 6px; border-top: 1px solid var(--rule); }
.railfoot .who { color: var(--ink-2); font-weight: 600; }

.main { padding: 26px 34px 80px; max-width: 1240px; width: 100%; margin: 0 auto; min-width: 0; }

/* ---------- typography & rules ---------- */
h1 {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  margin: 0 0 2px; letter-spacing: 0.2px;
}
.sub { color: var(--ink-2); margin: 0 0 20px; font-size: 13.5px; }
h2.rule {
  font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: 0.3px;
  margin: 26px 0 10px; padding-bottom: 5px;
  border-bottom: 2px solid var(--ink);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
h2.rule small { font-family: var(--sans); font-weight: 400; font-size: 12px; color: var(--ink-3); }

/* ---------- cards & grids ---------- */
.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: 1fr 1fr; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .grid.c4 { grid-template-columns: 1fr 1fr; } .grid.c3 { grid-template-columns: 1fr; } .grid.c2 { grid-template-columns: 1fr; } .shell { grid-template-columns: 200px 1fr; } }

.card {
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: 14px 16px;
  min-width: 0;
}
.card.flat { background: transparent; border-style: dashed; }
.kpi .n { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.kpi .l { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-3); margin-top: 3px; }
.kpi .d { font-size: 12px; color: var(--ink-2); margin-top: 4px; }

/* ---------- stamps (status chips) ---------- */
.stamp {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px;
  padding: 2.5px 8px; border: 1.4px solid currentColor; border-radius: 3px;
  color: var(--ink-2); background: transparent;
  transform: rotate(-0.4deg);
}
.stamp.green { color: var(--green); background: var(--green-soft); }
.stamp.amber { color: var(--amber); background: var(--amber-soft); }
.stamp.brick { color: var(--brick); background: var(--brick-soft); }
.stamp.slate { color: var(--slate); background: var(--slate-soft); }
.stamp.violet { color: var(--violet); background: var(--violet-soft); }
.stamp.plain { transform: none; border-style: dashed; }

/* ---------- forms & buttons ---------- */
label.f { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-3); margin: 10px 0 4px; }
input, select, textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  color: var(--ink);
  padding: 8px 10px;
  font: 13.5px/1.4 var(--sans);
}
textarea { resize: vertical; min-height: 60px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 6px;
  padding: 7px 14px; font: 600 13px var(--sans); letter-spacing: 0.2px;
  cursor: pointer; text-decoration: none;
}
.btn:hover { box-shadow: 2px 2px 0 rgba(28,36,34,0.25); transform: translate(-1px,-1px); }
.btn:active { transform: none; box-shadow: none; }
.btn.primary { background: var(--green); border-color: var(--green); color: #fdfcf7; }
.btn.quiet { border-color: var(--rule-strong); color: var(--ink-2); font-weight: 500; }
.btn.danger { border-color: var(--brick); color: var(--brick); background: transparent; }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn svg { width: 15px; height: 15px; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.row.tight { margin: 6px 0; gap: 6px; }

/* ---------- tables ---------- */
table.ledger { width: 100%; border-collapse: collapse; font-size: 13px; }
.ledger th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.3px;
  color: var(--ink-3); font-weight: 600; padding: 6px 10px 5px;
  border-bottom: 2px solid var(--ink);
}
.ledger td { padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ledger tr.click { cursor: pointer; }
.ledger tr.click:hover td { background: var(--green-soft); }
.ledger td.num, .ledger th.num { text-align: right; font-family: var(--mono); font-size: 12.5px; }
.mono { font-family: var(--mono); font-size: 12px; }
.dim { color: var(--ink-3); }
.ok { color: var(--green); } .warn { color: var(--amber); } .bad { color: var(--brick); }

/* ---------- transcript & coaching cards ---------- */
.turnfeed { display: flex; flex-direction: column; gap: 7px; max-height: 430px; overflow-y: auto; padding-right: 4px; }
.turn { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: baseline; }
.turn .who {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700;
  padding-top: 2px; text-align: right;
}
.turn.rep .who { color: var(--slate); }
.turn.prospect .who { color: var(--ink); }
.turn.unknown .who { color: var(--ink-3); }
.turn .txt { border-left: 2px solid var(--rule); padding: 2px 0 2px 10px; }
.turn.prospect .txt { border-left-color: var(--rule-strong); }
.turn .cue { margin-left: 8px; }

.coach-card {
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--green);
  border-radius: 7px; background: var(--card);
  padding: 10px 12px; margin-bottom: 9px;
}
.coach-card.objection, .coach-card.pricing_risk { border-left-color: var(--amber); }
.coach-card.compliance { border-left-color: var(--brick); }
.coach-card.empathy { border-left-color: var(--violet); }
.coach-card.talk_listen, .coach-card.methodology, .coach-card.next_question { border-left-color: var(--slate); }
.coach-card .head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.coach-card .body { font-size: 13.5px; }
.coach-card .src { font-size: 11px; color: var(--ink-3); margin-top: 5px; font-family: var(--mono); }

/* ---------- the Cue Ring avatar ---------- */
.cuering { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.cuering svg { display: block; }
.cuering .ring { fill: none; stroke-width: 5; stroke: var(--ink-3); }
.cuering .core { fill: var(--ink-3); }
.cuering .needle { stroke: var(--ink-3); stroke-width: 4; stroke-linecap: round; }
.cuering .arc { fill: none; stroke-width: 5; stroke-linecap: round; opacity: 0; }
.cuering .statelabel { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--ink-2); font-weight: 700; }
.cuering .reclabel { font-size: 10px; letter-spacing: 1px; color: var(--brick); font-weight: 700; display: none; }

.cuering .needle { opacity: 0; }
.cuering[data-state="pre_call_ready"] .needle,
.cuering[data-state="objection_detected"] .needle { opacity: 1; }

.cuering[data-state="pre_call_ready"] .ring { stroke: var(--ink-2); }
.cuering[data-state="pre_call_ready"] .core { fill: var(--ink-2); }
.cuering[data-state="pre_call_ready"] .needle { stroke: var(--ink-2); }

.cuering[data-state="listening_silently"] .ring { stroke: var(--green); animation: cw-breathe 2.6s ease-in-out infinite; transform-origin: center; }
.cuering[data-state="listening_silently"] .core { fill: var(--green); }
.cuering[data-state="listening_silently"] .reclabel { display: block; }

.cuering[data-state="insight_available"] .ring { stroke: var(--slate); }
.cuering[data-state="insight_available"] .core { fill: var(--slate); animation: cw-pulse 1.4s ease-in-out infinite; transform-origin: center; }
.cuering[data-state="insight_available"] .reclabel { display: block; }

.cuering[data-state="objection_detected"] .ring { stroke: var(--amber); }
.cuering[data-state="objection_detected"] .core { fill: var(--amber); }
.cuering[data-state="objection_detected"] .needle { stroke: var(--amber); animation: cw-swing 0.9s ease-in-out infinite alternate; transform-origin: center; }
.cuering[data-state="objection_detected"] .reclabel { display: block; }

.cuering[data-state="manager_review"] .ring { stroke: var(--slate); stroke-dasharray: 10 6; }
.cuering[data-state="manager_review"] .core { fill: var(--slate); }

.cuering[data-state="crm_sync_pending"] .ring { stroke: var(--slate); stroke-dasharray: 4 7; animation: cw-rotate 6s linear infinite; transform-origin: center; }
.cuering[data-state="crm_sync_pending"] .core { fill: var(--slate); }

.cuering[data-state="compliance_blocked"] .ring { stroke: var(--brick); stroke-dasharray: 30 14; }
.cuering[data-state="compliance_blocked"] .core { fill: var(--brick); }
.cuering[data-state="compliance_blocked"] .statelabel { color: var(--brick); }

.cuering[data-state="roleplay_coach_speaking"] .ring { stroke: var(--green); }
.cuering[data-state="roleplay_coach_speaking"] .core { fill: var(--green); }
.cuering[data-state="roleplay_coach_speaking"] .arc { stroke: var(--green); opacity: 1; animation: cw-ripple 1.6s ease-out infinite; transform-origin: center; }

@keyframes cw-breathe { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.045); opacity: 0.75; } }
@keyframes cw-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes cw-swing { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes cw-rotate { to { transform: rotate(360deg); } }
@keyframes cw-ripple { from { transform: scale(0.7); opacity: 0.9; } to { transform: scale(1.25); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cuering .ring, .cuering .core, .cuering .needle, .cuering .arc { animation: none !important; }
  .btn:hover { transform: none; box-shadow: none; }
}

/* ---------- talk/listen dial ---------- */
.dial { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.dial .track { fill: none; stroke: var(--rule); stroke-width: 9; }
.dial .val { fill: none; stroke: var(--slate); stroke-width: 9; stroke-linecap: round; }
.dial .num { font-family: var(--serif); font-size: 19px; }
.dial .cap { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-3); }

/* ---------- bars ---------- */
.bar { display: grid; grid-template-columns: 150px 1fr 46px; gap: 8px; align-items: center; margin: 5px 0; font-size: 12.5px; }
.bar .track { height: 12px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--amber); opacity: 0.85; }
.bar.green .fill { background: var(--green); }
.bar .v { text-align: right; font-family: var(--mono); font-size: 12px; }

/* ---------- consent strip ---------- */
.consent-strip {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  border: 1.4px solid var(--rule-strong); border-radius: 8px;
  background: var(--paper-2); padding: 10px 14px; margin-bottom: 14px;
}
.consent-strip .jur { font-family: var(--serif); font-size: 15px; }
.consent-strip.blocked { border-color: var(--brick); background: var(--brick-soft); }
.consent-strip.cleared { border-color: var(--green); background: var(--green-soft); }

/* ---------- login ---------- */
.loginwrap { min-height: 100vh; display: grid; place-items: center; padding: 30px;
  background:
    linear-gradient(0deg, transparent 31px, var(--rule) 31px, var(--rule) 32px, transparent 32px) 0 0 / 100% 32px,
    var(--paper);
}
.logincard {
  width: 420px; max-width: 94vw;
  background: var(--card); border: 1.4px solid var(--ink);
  border-radius: 10px; padding: 30px 34px 26px;
  box-shadow: 5px 5px 0 rgba(28,36,34,0.14);
}
.logincard .wordmark { font-size: 34px; margin: 0; }
.logintabs { display: flex; gap: 0; margin: 18px 0 6px; border-bottom: 1px solid var(--rule-strong); }
.logintabs button {
  background: none; border: none; padding: 7px 14px; cursor: pointer;
  font: 600 12.5px var(--sans); letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.logintabs button.active { color: var(--ink); border-bottom-color: var(--green); }
.demolist { margin-top: 14px; border-top: 1px dashed var(--rule-strong); padding-top: 10px; }
.demolist .drow { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 12.5px; }
.demolist .drow a { color: var(--green); cursor: pointer; text-decoration: underline dotted; }

/* ---------- misc ---------- */
.notice { border: 1px dashed var(--rule-strong); border-radius: 7px; padding: 9px 12px; font-size: 12.5px; color: var(--ink-2); background: var(--paper-2); }
.notice.error { border-color: var(--brick); color: var(--brick); background: var(--brick-soft); }
.notice.okay { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 4px 12px; font-size: 13px; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; }
.audio-inline { height: 30px; width: 100%; margin-top: 6px; }
pre.block { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px; padding: 10px; font: 12px/1.5 var(--mono); overflow: auto; max-height: 300px; white-space: pre-wrap; word-break: break-word; }
a.plain { color: var(--green); }
.right { margin-left: auto; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 120px; border: 1px solid var(--rule-strong); border-radius: 7px; overflow: hidden; font-size: 11px; }
.swatch .c { height: 44px; } .swatch .t { padding: 5px 8px; background: var(--card); font-family: var(--mono); }
.glyphgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.glyphcell { border: 1px solid var(--rule); border-radius: 7px; padding: 10px; text-align: center; background: var(--card); }
.glyphcell svg { width: 26px; height: 26px; }
.glyphcell .n { font-size: 10.5px; color: var(--ink-3); margin-top: 6px; font-family: var(--mono); }
.toast {
  position: fixed; right: 22px; z-index: 70;
  bottom: calc(22px + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--paper); border-radius: 7px;
  padding: 10px 16px; font-size: 13px; box-shadow: 4px 4px 0 rgba(28,36,34,0.25);
  max-width: 420px;
}
.toast.error { background: var(--brick); }

/* ============================================================
   PWA layer — install/update/offline banners, install sheet,
   offline sync chip, mobile top bar + drawer, safe-area insets.
   ============================================================ */

/* floating banner stack (bottom, thumb-reachable, notch-safe) */
.cw-pwa-host {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.cw-banner {
  pointer-events: auto;
  width: min(560px, 100%);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card); color: var(--ink);
  border: 1.4px solid var(--ink); border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(28,36,34,0.16);
  padding: 11px 14px; font-size: 13.5px;
}
.cw-banner.update { border-color: var(--green); background: var(--green-soft); }
.cw-banner.offline { border-color: var(--amber); background: var(--amber-soft); }
.cw-banner.install { border-color: var(--slate); background: var(--slate-soft); }
.cw-banner-actions { display: flex; gap: 8px; flex: none; }
.cw-banner button {
  min-height: 40px; padding: 7px 14px; border-radius: 7px; cursor: pointer;
  background: var(--green); color: #fdfcf7; border: 1px solid var(--green);
  font: 600 12.5px var(--sans);
}
.cw-banner button.ghost { background: transparent; color: var(--ink-2); border-color: var(--rule-strong); }
.cw-banner button:active { transform: translateY(1px); }

/* install instructions sheet (iOS / manual) */
.cw-sheet-wrap {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: end center;
  background: rgba(28,36,34,0.42);
  padding-bottom: env(safe-area-inset-bottom);
}
.cw-sheet {
  width: min(460px, 100%); background: var(--card);
  border: 1.4px solid var(--ink); border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 0 rgba(28,36,34,0.12);
  padding: 20px 22px calc(22px + env(safe-area-inset-bottom));
  animation: cw-rise 0.22s ease;
}
@keyframes cw-rise { from { transform: translateY(30px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.cw-sheet-head { font-family: var(--serif); font-size: 18px; margin-bottom: 10px; }
.cw-sheet ol { margin: 0 0 8px; padding-left: 22px; line-height: 1.9; font-size: 14px; }
.cw-sheet-note { font-size: 12.5px; color: var(--ink-3); margin: 6px 0 14px; }
.cw-sheet button {
  width: 100%; min-height: 46px; border-radius: 8px; cursor: pointer;
  background: var(--green); color: #fdfcf7; border: 1px solid var(--green); font: 600 14px var(--sans);
}

/* offline sync status chip */
.cw-sync-chip {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1.4px solid var(--rule-strong); border-radius: 999px;
  padding: 5px 12px; font-size: 12px; color: var(--ink-2);
}
.cw-sync-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.cw-sync-chip.pending .dot { background: var(--amber); }
.cw-sync-chip.syncing { border-color: var(--slate); color: var(--slate); }
.cw-sync-chip.syncing .dot { background: var(--slate); animation: cw-blink 1s ease-in-out infinite; }
.cw-sync-chip.conflict { border-color: var(--brick); color: var(--brick); }
.cw-sync-chip.conflict .dot { background: var(--brick); }
@keyframes cw-blink { 50% { opacity: 0.3; } }

/* mobile top bar + drawer scrim (shown only on small screens) */
.cw-topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 54px;
  align-items: center; gap: 10px; padding: 0 12px;
  padding-top: env(safe-area-inset-top);
  height: calc(54px + env(safe-area-inset-top));
  background: var(--paper-2); border-bottom: 1px solid var(--rule-strong);
}
.cw-topbar #cw-nav-toggle {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--rule-strong); border-radius: 8px;
  color: var(--ink); cursor: pointer;
}
.cw-topbar-wm { font-family: var(--serif); font-size: 20px; }
.cw-topbar-wm b { font-weight: 700; } .cw-topbar-wm i { color: var(--green); font-style: italic; }
.cw-topbar-spacer { flex: 1; }
.cw-scrim {
  display: none; position: fixed; inset: 0; z-index: 44;
  background: rgba(28,36,34,0.4); opacity: 0; transition: opacity 0.2s;
}

/* standalone (installed) — pad the app for status bar / home indicator */
html[data-standalone] .rail { padding-top: calc(18px + env(safe-area-inset-top)); }
html[data-standalone] .main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

/* ---------- phones & narrow tablets ---------- */
@media (max-width: 760px) {
  .cw-topbar { display: flex; }
  body.cw-auth .cw-topbar { display: none; }        /* login screen: no chrome */

  .shell { grid-template-columns: 1fr; }
  .rail {
    position: fixed; top: 0; left: 0; z-index: 45;
    width: 274px; max-width: 84vw; height: 100vh;
    border-right: 1px solid var(--rule-strong);
    transform: translateX(-100%); transition: transform 0.22s ease;
    padding-top: calc(18px + env(safe-area-inset-top));
  }
  body.cw-nav-open .rail { transform: none; box-shadow: 6px 0 24px rgba(28,36,34,0.22); }
  body.cw-nav-open .cw-scrim { display: block; opacity: 1; }
  body.cw-auth .rail { display: none; }

  /* main content clears the fixed top bar (except on the login screen) */
  .main { padding: 18px 16px calc(72px + env(safe-area-inset-bottom)); }
  body:not(.cw-auth) .main { padding-top: calc(66px + env(safe-area-inset-top)); }

  h1 { font-size: 22px; }
  h2.rule { font-size: 15px; }

  /* stack every multi-column layout, including inline-styled grids */
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .main .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* wide ledgers scroll horizontally instead of overflowing */
  table.ledger { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  .kv { grid-template-columns: 108px 1fr; }
  .bar { grid-template-columns: 108px 1fr 42px; }
  .turn { grid-template-columns: 62px 1fr; }

  /* touch targets */
  .btn { min-height: 44px; }
  .btn.sm { min-height: 38px; }
  .navlink { padding: 11px 10px; font-size: 15px; }
  .navlink svg { width: 19px; height: 19px; }
  input, select, textarea { font-size: 16px; }   /* iOS: avoids zoom-on-focus */

  /* the live console: transcript over cards, comfortable spacing */
  .turnfeed { max-height: 46vh; }
  .consent-strip { gap: 10px; }
  .cw-banner { width: 100%; }
}

@media (max-width: 400px) {
  .main { padding-left: 12px; padding-right: 12px; }
  .kpi .n { font-size: 26px; }
  .cw-topbar-wm { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .rail, .cw-scrim, .cw-sheet, .cw-sync-chip.syncing .dot { transition: none !important; animation: none !important; }
}