:root {
  color-scheme: dark;
  --sidebar-width: 300px;
  /* 83, not 82: minus the 1px right border and 2×14px padding this leaves a
     54px row, and centring an even icon in an even row keeps it on whole
     pixels. At 82 the row was 53 and every collapsed icon sat at x.5, which
     smeared the strokes across two pixel columns. */
  --sidebar-width-collapsed: 83px;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 28px;
  --text-3xl: 32px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --button-height-sm: 34px;
  --button-height-md: 40px;
  --button-height-lg: 44px;
  --nav-item-height: 40px;
  --card-padding: 18px;
  --card-padding-compact: 16px;
  --bg: #070a12;
  --panel: rgba(19, 26, 43, 0.86);
  --panel-2: rgba(14, 20, 34, 0.94);
  --border: rgba(154, 171, 205, 0.16);
  --border-strong: rgba(17, 197, 198, 0.36);
  --text: #eef4ff;
  --muted: #9ba9c1;
  --muted-2: #66758e;
  --gold: #11c5c6;
  --gold-2: #8ff7f1;
  --green: #48d48a;
  --red: #ff6776;
  --orange: #ffb45c;
  --blue: #72a9ff;
  --brand-teal: #11c5c6;
  --brand-cyan: #0e9fe6;
  --brand-blue: #1457c8;
  --brand-deep-blue: #132a6b;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
  --radius: 18px;
}

body.theme-light {
  color-scheme: light;
  --bg: #f4f7fb;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-2: rgba(248, 250, 253, 0.96);
  --border: rgba(8, 24, 48, 0.12);
  --border-strong: rgba(14, 159, 230, 0.34);
  --text: #0b1220;
  --muted: #46566d;
  --muted-2: #64748b;
  --gold: #0e9fe6;
  --gold-2: #0b6fc4;
  --green: #168a50;
  --red: #c24152;
  --orange: #b86a0d;
  --blue: #1457c8;
  --shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 18% 6%, rgba(14, 159, 230, 0.17), transparent 28%),
    radial-gradient(circle at 74% 10%, rgba(17, 197, 198, 0.15), transparent 24%),
    radial-gradient(circle at 63% 67%, rgba(72, 212, 138, 0.09), transparent 25%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  overflow: hidden;
}

body.theme-light {
  background:
    radial-gradient(circle at 16% 8%, rgba(14, 159, 230, 0.12), transparent 28%),
    radial-gradient(circle at 82% 0%, rgba(17, 197, 198, 0.10), transparent 24%),
    var(--bg);
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { display: grid; grid-template-columns: 292px 1fr; height: 100vh; }
.sidebar {
  position: relative;
  padding: 36px 22px 22px;
  background: rgba(7, 11, 21, 0.92);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.sidebar::after {
  content: "";
  position: absolute;
  inset: auto -40px 90px auto;
  width: 160px;
  height: 160px;
  background: rgba(17, 197, 198, 0.10);
  filter: blur(50px);
  pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 16px; margin: 24px 4px 34px; }
.brand-mark {
  width: 58px; height: 58px; border-radius: 20px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #07111f, #132a6b 58%, #0e9fe6);
  box-shadow: 0 16px 30px rgba(14, 159, 230, 0.20);
  overflow: hidden;
}
.brand-mark img { width: 76%; height: 76%; object-fit: contain; filter: none; }
.brand-name { font-size: 20px; font-weight: 800; }
.brand-byline { color: var(--gold); font-size: 12px; font-weight: 850; margin-top: 2px; }
.brand-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.nav { display: grid; gap: 10px; }
.nav-item {
  text-align: left;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: #c7d2e6;
  font-weight: 650;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.05); }
.nav-item.active {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.045));
  border-color: var(--border-strong);
}
.sidebar-card {
  position: absolute;
  left: 22px; right: 22px; bottom: 88px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--border);
}
.compact-card { bottom: 226px; }
.small-label { color: #9daac1; font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 800; }
.guard-status { margin-top: 8px; font-size: 20px; font-weight: 900; }
.expert-score { margin-top: 8px; font-size: 34px; font-weight: 950; letter-spacing: 0; color: var(--gold-2); }
.sidebar-footer { position: absolute; left: 22px; right: 22px; bottom: 22px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main { overflow-y: auto; padding: 58px 48px 70px; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 34px; }
h1 { margin: 0; font-size: 36px; letter-spacing: 0; }
.topbar p, .panel p { color: var(--muted); margin: 8px 0 0; }
.topbar-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.primary-btn, .ghost-btn, .danger-btn, .row-action, .icon-btn {
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--text);
  font-weight: 800;
  min-height: 42px;
  padding: 0 16px;
}
.primary-btn { background: linear-gradient(135deg, #11c5c6, #0e9fe6 58%, #1457c8); color: #f7fcff; box-shadow: 0 14px 34px rgba(14, 159, 230, 0.24); }
.ghost-btn { background: rgba(255,255,255,0.055); border-color: var(--border); }
.ghost-btn:hover { background: rgba(255,255,255,0.085); }
.danger-btn { background: rgba(255,103,118,0.14); border-color: rgba(255,103,118,0.35); color: #ffd7dc; }
.row-action { min-height: 30px; padding: 0 10px; border-radius: 10px; background: rgba(255,255,255,0.06); border-color: var(--border); color: #d8e4f7; font-size: 12px; }
.icon-btn { min-width: 42px; padding: 0; border-radius: 999px; background: rgba(255,255,255,0.06); border-color: var(--border); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { width: 16px; height: 16px; }
.small { min-height: 32px; padding: 0 11px; border-radius: 10px; font-size: 12px; }

.screen { display: none; }
.screen.active-screen { display: block; }
.grid { display: grid; gap: 18px; margin-bottom: 18px; }
.two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.command-grid { align-items: stretch; }

.panel {
  background: linear-gradient(180deg, rgba(21, 29, 48, 0.88), rgba(13, 19, 33, 0.92));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.large-panel { min-height: 350px; }
.command-panel { min-height: 180px; }
.danger-panel { border-color: rgba(255, 103, 118, 0.20); }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.panel-header.compact { margin-bottom: 12px; }
h2 { margin: 0; font-size: 20px; letter-spacing: 0; }
.pill, .grade {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; padding: 6px 10px; border-radius: 999px;
  background: rgba(72, 212, 138, 0.16); border: 1px solid rgba(72, 212, 138, 0.44); color: #d7fff0; font-size: 12px; font-weight: 900;
}
.grade.bad { color: #ffd9df; background: rgba(255, 103, 118, 0.16); border-color: rgba(255,103,118,0.42); }
.grade.warn { color: #fff0cf; background: rgba(255, 180, 92, 0.16); border-color: rgba(255,180,92,0.42); }

.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi-card {
  padding: 20px;
  border-radius: 18px;
  background: rgba(18, 26, 44, 0.92);
  border: 1px solid var(--border);
  min-height: 126px;
}
.kpi-label { color: var(--muted); text-transform: uppercase; letter-spacing: 0.13em; font-size: 12px; font-weight: 800; }
.kpi-value { font-size: 31px; margin-top: 10px; font-weight: 950; letter-spacing: 0; }
.kpi-foot { margin-top: 8px; color: var(--muted); font-size: 13px; }
.pos { color: var(--green) !important; }
.neg { color: var(--red) !important; }
.warn { color: var(--orange) !important; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }

canvas { width: 100%; display: block; border-radius: 12px; }
.chart-canvas {
  width: 100%;
  height: 230px;
  display: block;
  border-radius: 12px;
}
.chart-canvas.tall {
  height: 260px;
}
.chart-visual {
  position: relative;
  min-width: 0;
}
.chart-crosshair {
  position: absolute;
  z-index: 2;
  width: 1px;
  pointer-events: none;
  background: rgba(154, 171, 205, 0.38);
}
.chart-tooltip {
  position: absolute;
  z-index: 3;
  max-width: 190px;
  padding: 6px 8px;
  transform: translate(-50%, calc(-100% - 8px));
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  font: 11px/1.35 "IBM Plex Mono", var(--font-mono);
  pointer-events: none;
  white-space: nowrap;
}
.chart-data-disclosure {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}
.chart-data-disclosure summary {
  width: max-content;
  cursor: pointer;
  color: var(--muted-2);
  user-select: none;
}
.chart-data-scroll {
  max-height: 190px;
  margin-top: 8px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.chart-data-disclosure table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.chart-data-disclosure th,
.chart-data-disclosure td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.chart-data-disclosure th:last-child,
.chart-data-disclosure td:last-child { text-align: right; }
.verdict-list, .insights-list, .rules-list, .timeline { display: grid; gap: 12px; }
.verdict-item, .insight, .rule-item, .timeline-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 15px;
  background: rgba(255,255,255,0.035);
}
.verdict-item strong, .insight strong, .rule-item strong, .timeline-item strong { display: block; margin-bottom: 5px; }
.verdict-item span, .insight span, .rule-item span, .timeline-item span { color: var(--muted); line-height: 1.45; font-size: 13px; }

.trade-tools { align-items: center; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
input, select, textarea {
  width: 100%;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  padding: 11px 12px;
}
input:focus, select:focus, textarea:focus { border-color: rgba(17, 197, 198, 0.58); box-shadow: 0 0 0 3px rgba(17, 197, 198, 0.10); }
select option { background: #101827; color: #edf3ff; }
textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
label { color: #c5d1e6; font-size: 12px; font-weight: 800; display: grid; gap: 7px; }

.table-wrap { overflow: auto; border-radius: 14px; border: 1px solid var(--border); }
.data-table { width: 100%; border-collapse: collapse; min-width: 1180px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid rgba(154,171,205,0.10); font-size: 13px; vertical-align: top; }
th { color: #92a1bb; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; background: rgba(255,255,255,0.035); position: sticky; top: 0; }
tr:hover td { background: rgba(255,255,255,0.025); }

.edge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.edge-card {
  border: 1px solid var(--border);
  border-radius: 17px;
  padding: 18px;
  background: rgba(255,255,255,0.035);
}
.edge-card h3 { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 14px; letter-spacing: 0; }
.edge-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.edge-metric { padding: 11px; border-radius: 13px; background: rgba(0,0,0,0.16); border: 1px solid rgba(154,171,205,0.10); }
.edge-metric small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.edge-metric b { font-size: 15px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.dense { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.one-col { grid-template-columns: 1fr !important; }
.wide { grid-column: 1 / -1; }
.settings-form .primary-btn, .review-form .primary-btn { justify-self: start; }
.review-form { display: grid; gap: 14px; }
.risk-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.result-tile { border-radius: 14px; padding: 14px; background: rgba(255,255,255,0.045); border: 1px solid var(--border); }
.result-tile small { color: var(--muted); display: block; margin-bottom: 8px; }
.result-tile b { font-size: 20px; }
.playbook-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.playbook-card { border: 1px solid var(--border); border-radius: 17px; padding: 18px; background: rgba(255,255,255,0.035); }
.playbook-card h3 { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 8px; }
.playbook-card p { margin: 0 0 12px; }
ul { margin: 10px 0 0 18px; padding: 0; color: #cbd6e8; }
li { margin-bottom: 7px; }
.card-actions { margin-top: 14px; }

.modal { border: 0; padding: 0; background: transparent; color: var(--text); width: min(1180px, calc(100vw - 40px)); max-height: calc(100vh - 40px); }
.modal::backdrop { background: rgba(0,0,0,0.62); backdrop-filter: blur(4px); }
.modal-card {
  margin: 0;
  background: #0b111f;
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.56);
  padding: 24px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.small-modal { width: min(720px, calc(100vw - 40px)); }
.modal-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.modal-header h2 { font-size: 26px; }
.modal-header p { margin: 6px 0 0; color: var(--muted); }
.modal-section-title { margin: 22px 0 12px; color: var(--gold-2); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 950; font-size: 12px; }
/* Quick-capture header + live R preview badge */
.capture-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.capture-head .modal-section-title { margin: 0; }
.r-preview { padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); font-weight: 900; font-size: 14px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--muted); }
.r-preview.is-positive { background: rgba(72,212,138,0.14); border-color: rgba(72,212,138,0.4); color: #48d48a; }
.r-preview.is-negative { background: rgba(255,103,118,0.14); border-color: rgba(255,103,118,0.4); color: #ff8b98; }
.r-preview.is-invalid { background: rgba(255,103,118,0.14); border-color: rgba(255,103,118,0.5); color: #ff8b98; }
/* Collapsible "Add context" — keeps quick capture low-friction */
.capture-more { margin-top: 18px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.02); }
.capture-more > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; gap: 10px; font-weight: 900; }
.capture-more > summary::-webkit-details-marker { display: none; }
.capture-more > summary .caret { flex: 0 0 auto; color: var(--gold-2); transition: transform 0.15s ease; }
.capture-more[open] > summary .caret { transform: rotate(90deg); }
.capture-more > summary span { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.capture-more[open] > summary { border-bottom: 1px solid var(--border); }
.capture-more > *:not(summary) { margin-left: 16px; margin-right: 16px; }
.capture-more > .modal-section-title:first-of-type { margin-top: 16px; }
.capture-more > .evidence-grid:last-child, .capture-more > .form-grid:last-child { margin-bottom: 16px; }
.modal-footer { display: flex; align-items: center; gap: 12px; margin-top: 24px; border-top: 1px solid var(--border); padding-top: 18px; }
.spacer { flex: 1; }
.checklist-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.checklist-grid label { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,0.04); font-size: 13px; }
.checklist-grid input { width: auto; accent-color: var(--gold); }
.live-score { margin-top: 12px; padding: 14px; border-radius: 14px; border: 1px solid rgba(17, 197, 198, 0.25); background: rgba(17,197,198,0.08); color: var(--gold-2); font-weight: 900; }
.evidence-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.evidence-slot { border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.04); padding: 12px; display: grid; gap: 8px; }
.evidence-slot.is-dragging { border-color: rgba(17,197,198,0.65); background: rgba(17,197,198,0.10); }
.evidence-slot span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 900; }
.evidence-slot b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(18px);
  min-width: 280px;
  max-width: 720px;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  border-radius: 14px;
  padding: 14px 18px;
  background: rgba(16, 23, 38, 0.96);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  color: var(--text);
  transition: all 0.22s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .three-col { grid-template-columns: 1fr; }
  .playbook-list { grid-template-columns: 1fr 1fr; }
  .form-grid.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checklist-grid, .evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v2.1 layout fix: sidebar uses real flow instead of absolute cards, so nav items never get covered. */
.app-shell { grid-template-columns: 304px 1fr; }
.sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: visible;
  gap: 12px;
}
.brand { flex: 0 0 auto; margin: 22px 4px 22px; }
.nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 6px;
}
.nav::-webkit-scrollbar, .main::-webkit-scrollbar, .modal-card::-webkit-scrollbar { width: 8px; height: 8px; }
.nav::-webkit-scrollbar-thumb, .main::-webkit-scrollbar-thumb, .modal-card::-webkit-scrollbar-thumb { background: rgba(154, 171, 205, 0.22); border-radius: 999px; }
.nav-item { min-height: 44px; }
.sidebar-card {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  flex: 0 0 auto;
  padding: 15px 16px;
  margin-top: 0;
}
.compact-card { bottom: auto; order: 3; }
.sidebar-card:not(.compact-card) { order: 4; }
.sidebar-footer {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  flex: 0 0 auto;
  order: 5;
  margin-top: 2px;
}
.expert-score { font-size: 30px; }
.guard-status { font-size: 18px; }

.sidebar-utility {
  display: grid;
  gap: 14px;
  flex: 0 0 auto;
  order: 5;
  padding: 15px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.045);
}
.theme-utility {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
}
.theme-picker {
  position: relative;
  display: inline-flex;
}
.theme-picker-trigger {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(154,171,205,0.18);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255,255,255,0.045);
}
.theme-picker-trigger:hover,
.theme-picker.open .theme-picker-trigger {
  color: var(--text);
  border-color: rgba(17,197,198,0.38);
  background: rgba(17,197,198,0.10);
}
.theme-picker-trigger:focus-visible,
.theme-picker-menu button:focus-visible {
  outline: 2px solid var(--brand-teal);
  outline-offset: 2px;
}
.theme-status-icon,
.theme-picker-menu svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-status-icon {
  display: none;
}
.theme-icon-auto {
  display: inline-flex;
}
body[data-theme-preference="light"] .theme-icon-auto,
body[data-theme-preference="dark"] .theme-icon-auto {
  display: none;
}
body[data-theme-preference="light"] .theme-icon-light,
body[data-theme-preference="dark"] .theme-icon-dark {
  display: inline-flex;
}
.theme-picker-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 60;
  min-width: 150px;
  display: none;
  gap: 3px;
  padding: 7px;
  border: 1px solid rgba(154,171,205,0.18);
  border-radius: 12px;
  background: rgba(9, 17, 31, 0.98);
  box-shadow: 0 18px 46px rgba(0,0,0,0.34);
}
.theme-picker.open .theme-picker-menu {
  display: grid;
}
.theme-picker-menu button {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  color: #dce8f8;
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 760;
}
.theme-picker-menu button:hover,
.theme-picker-menu button.active {
  color: #f7fcff;
  background: rgba(17,197,198,0.14);
}
.theme-picker-menu button.active {
  box-shadow: inset 0 0 0 1px rgba(17,197,198,0.28);
}
.theme-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
  padding: 4px;
  border-radius: 13px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(154,171,205,0.12);
}
.theme-segment button,
.choice-card {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  min-height: 34px;
  font-weight: 850;
}
.theme-segment button {
  padding: 0 5px;
  font-size: 12px;
  letter-spacing: 0;
}
.theme-segment button.active,
.choice-card.active {
  background: linear-gradient(135deg, rgba(17,197,198,0.18), rgba(14,159,230,0.18));
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(17,197,198,0.26);
}
.utility-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.utility-grid div {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(154,171,205,0.12);
  background: rgba(0,0,0,0.12);
}
.utility-grid .wide-status { grid-column: 1 / -1; }
.utility-grid span,
.risk-strip-stat span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.utility-grid strong,
.risk-strip-stat strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 14px;
}

.risk-strip {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(17,197,198,0.10), rgba(14,159,230,0.06)), rgba(255,255,255,0.035);
  box-shadow: var(--shadow);
}
.risk-strip-main,
.risk-strip-stat {
  min-height: 92px;
  border-radius: 14px;
  border: 1px solid rgba(154,171,205,0.12);
  background: rgba(0,0,0,0.13);
  padding: 13px;
}
.risk-strip-stat small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.data-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.12;
  text-align: center;
  border: 1px solid rgba(154,171,205,0.18);
  color: var(--muted);
  background: rgba(255,255,255,0.045);
}
.data-status.complete { color: #d7fff0; background: rgba(72,212,138,0.16); border-color: rgba(72,212,138,0.44); }
.data-status.review { color: #fff0cf; background: rgba(255,180,92,0.16); border-color: rgba(255,180,92,0.44); }
.data-status.missing { color: #ffd9df; background: rgba(255,103,118,0.16); border-color: rgba(255,103,118,0.44); }

.evidence-library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.evidence-card {
  display: grid;
  gap: 11px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.035);
}
.evidence-card-preview {
  height: 150px;
  border-radius: 13px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(154,171,205,0.13);
  background: rgba(0,0,0,0.18);
}
.evidence-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.evidence-card h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0;
}
.evidence-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.settings-choice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.choice-card {
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 14px;
  text-align: left;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.035);
}
.choice-card strong { color: var(--text); }
.choice-card span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.about-panel {
  display: grid;
  align-content: start;
  gap: 16px;
}
.about-logo {
  width: min(100%, 320px);
  max-height: 150px;
  object-fit: contain;
  justify-self: start;
}
.about-copy {
  display: grid;
  gap: 5px;
  color: var(--muted);
}
.about-copy strong {
  color: var(--text);
  font-size: 20px;
}

body.theme-light .sidebar {
  background: rgba(248, 250, 253, 0.94);
}
body.theme-light .panel,
body.theme-light .kpi-card,
body.theme-light .edge-card,
body.theme-light .playbook-card,
body.theme-light .modal-card {
  background: var(--panel);
}
body.theme-light .playbook-card {
  color: #172338;
}
body.theme-light .playbook-card p,
body.theme-light .playbook-card .muted,
body.theme-light .playbook-card .tiny.muted {
  color: #4d5d74;
}
body.theme-light .playbook-card ul,
body.theme-light .playbook-card li {
  color: #3f5068;
}
body.theme-light .playbook-card strong {
  color: #233148;
}
body.theme-light .nav-item {
  color: #526177;
}
body.theme-light .nav-item:hover,
body.theme-light .nav-item.active {
  background: rgba(14,159,230,0.10);
}
body.theme-light input,
body.theme-light select,
body.theme-light textarea {
  background: rgba(255,255,255,0.88);
}
body.theme-light .row-action,
body.theme-light .ghost-btn,
body.theme-light .icon-btn {
  color: #33435c;
  background: rgba(255,255,255,0.68);
}
body.theme-light select option {
  background: #ffffff;
  color: #0b1220;
}
body.theme-light .theme-segment,
body.theme-light .utility-grid div,
body.theme-light .risk-strip-main,
body.theme-light .risk-strip-stat,
body.theme-light .edge-metric,
body.theme-light .evidence-preview,
body.theme-light .evidence-card-preview {
  background: rgba(8,24,48,0.04);
}
body.theme-light th {
  background: rgba(8,24,48,0.04);
  color: #5d6f8d;
}
body.theme-light .pill,
body.theme-light .grade,
body.theme-light .data-status.complete {
  color: #067647;
  background: #e8f9ef;
  border-color: #8bdcac;
}
body.theme-light .grade.bad,
body.theme-light .data-status.missing {
  color: #b4233c;
  background: #fff0f3;
  border-color: #ff9eae;
}
body.theme-light .grade.warn,
body.theme-light .data-status.review {
  color: #946200;
  background: #fff4dc;
  border-color: #f1c67d;
}
body.theme-light .calendar-date,
body.theme-light .calendar-label,
body.theme-light .calendar-meta,
body.theme-light .edge-metric b,
body.theme-light .evidence-file-thumb {
  color: var(--text);
}
body.theme-light .about-logo {
  filter: none;
}
body.theme-light .theme-picker-trigger {
  color: #526177;
  background: rgba(255,255,255,0.72);
}
body.theme-light .theme-picker-trigger:hover,
body.theme-light .theme-picker.open .theme-picker-trigger {
  color: #0b1220;
  border-color: rgba(14,159,230,0.32);
  background: rgba(14,159,230,0.09);
}
body.theme-light .theme-picker-menu {
  background: rgba(255,255,255,0.98);
  border-color: rgba(8,24,48,0.12);
  box-shadow: 0 18px 42px rgba(15,23,42,0.14);
}
body.theme-light .theme-picker-menu button {
  color: #33435c;
}
body.theme-light .theme-picker-menu button:hover,
body.theme-light .theme-picker-menu button.active {
  color: #0b1220;
  background: rgba(14,159,230,0.10);
}

@media (max-width: 1320px) {
  .risk-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evidence-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v2.1 calendar heatmap */
.month-picker { min-width: 160px; max-width: 190px; }
.calendar-heatmap {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 9px;
}
.calendar-label, .calendar-cell {
  border-radius: 13px;
  border: 1px solid rgba(154,171,205,0.10);
}
.calendar-label {
  padding: 9px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
  background: rgba(255,255,255,0.025);
}
.calendar-cell {
  min-height: 86px;
  padding: 10px;
  background: rgba(255,255,255,0.035);
  display: grid;
  align-content: space-between;
  gap: 8px;
}
.calendar-cell.empty { opacity: 0.22; }
.calendar-date { font-weight: 900; color: #dbe6f7; }
.calendar-meta { color: var(--muted); font-size: 11px; line-height: 1.35; }
.calendar-pnl { font-size: 13px; font-weight: 950; }
.calendar-cell.gain { background: linear-gradient(180deg, rgba(72,212,138,0.18), rgba(72,212,138,0.055)); border-color: rgba(72,212,138,0.28); }
.calendar-cell.loss { background: linear-gradient(180deg, rgba(255,103,118,0.18), rgba(255,103,118,0.055)); border-color: rgba(255,103,118,0.28); }
.calendar-cell.flat { background: linear-gradient(180deg, rgba(255,180,92,0.14), rgba(255,180,92,0.04)); border-color: rgba(255,180,92,0.22); }
.calendar-cell.overtraded { box-shadow: inset 0 0 0 2px rgba(17, 197, 198, 0.30); }

/* v2.1 evidence preview gallery */
.evidence-preview {
  height: 104px;
  border-radius: 12px;
  border: 1px solid rgba(154,171,205,0.13);
  background: rgba(0,0,0,0.18);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
}
.evidence-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.evidence-file-thumb {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
  color: #dce7f8;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 8px, rgba(255,255,255,0.06) 8px, rgba(255,255,255,0.06) 16px);
}

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 270px 1fr; }
  .main { padding: 44px 28px 60px; }
  .two-col { grid-template-columns: 1fr; }
  .calendar-cell { min-height: 72px; }
}

/* Patch brief density pass: compact, commercial macOS-style UI. */
.app-shell {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
  padding: 22px 18px 18px;
  gap: 10px;
}

.sidebar::after {
  opacity: 0.72;
  width: 120px;
  height: 120px;
}

.brand {
  gap: 13px;
  margin: 4px 2px 16px;
  min-width: 0;
}

.brand-mark {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(14, 159, 230, 0.18);
}

.brand-mark img {
  width: 74%;
  height: 74%;
  filter: none;
}

.brand-name {
  font-size: 19px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.brand-byline {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 760;
}

.brand-sub {
  margin-top: 3px;
  max-width: 176px;
  font-size: 12px;
  line-height: 1.25;
}

.nav {
  gap: 7px;
  padding-right: 3px;
}

.nav-item {
  height: var(--nav-item-height);
  min-height: var(--nav-item-height);
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 660;
  letter-spacing: 0;
}

.sidebar-utility {
  gap: 11px;
  padding: 13px;
  border-radius: 14px;
}

.theme-segment {
  margin-top: 7px;
  padding: 3px;
  border-radius: 11px;
}

.theme-segment button {
  min-height: 30px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 760;
}

.utility-grid {
  gap: 7px;
}

.utility-grid div {
  padding: 8px;
  border-radius: 10px;
}

.utility-grid span,
.risk-strip-stat span,
.small-label {
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

.utility-grid strong,
.risk-strip-stat strong {
  font-size: 13px;
}

.main {
  padding: 38px 36px 48px;
}

.topbar {
  gap: 18px;
  margin-bottom: 22px;
}

h1 {
  font-size: var(--text-3xl);
  line-height: 1.08;
  letter-spacing: 0;
}

h2 {
  font-size: 19px;
  line-height: 1.18;
  letter-spacing: 0;
}

h3,
.edge-card h3,
.playbook-card h3,
.evidence-card h3 {
  letter-spacing: 0;
}

.topbar p,
.panel p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.38;
}

.topbar-actions {
  gap: 9px;
}

.primary-btn,
.ghost-btn,
.danger-btn,
.row-action,
.icon-btn {
  min-height: var(--button-height-md);
  padding: 0 14px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 720;
  letter-spacing: 0;
}

.primary-btn {
  box-shadow: 0 10px 24px rgba(14, 159, 230, 0.20);
}

.row-action,
.small {
  min-height: var(--button-height-sm);
  padding: 0 10px;
  border-radius: 9px;
  font-size: 12px;
}

.icon-btn {
  min-width: 40px;
  font-size: 18px;
}

.grid {
  gap: 15px;
  margin-bottom: 15px;
}

.panel {
  min-width: 0;
  border-radius: 14px;
  padding: var(--card-padding);
}

.panel-header {
  gap: 14px;
  margin-bottom: 14px;
}

.panel-header.compact {
  margin-bottom: 10px;
}

.large-panel {
  min-height: 308px;
}

.command-panel {
  min-height: 158px;
}

.kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.kpi-card {
  min-width: 0;
  min-height: 116px;
  padding: 14px;
  border-radius: 14px;
}

.kpi-label {
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0.08em;
}

.kpi-value {
  max-width: 100%;
  min-width: 0;
  margin-top: 9px;
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-foot {
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.35;
}

.risk-strip {
  grid-template-columns: minmax(228px, 1.35fr) repeat(4, minmax(112px, 1fr));
  gap: 10px;
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 14px;
}

.risk-strip-main,
.risk-strip-stat {
  min-width: 0;
  min-height: 86px;
  padding: 12px;
  border-radius: 12px;
}

.guard-status {
  margin-top: 7px;
  font-size: 18px;
  line-height: 1.1;
}

.risk-strip-stat small {
  font-size: 11.5px;
  line-height: 1.3;
}

.verdict-list,
.insights-list,
.rules-list,
.timeline {
  gap: 10px;
}

.verdict-item,
.insight,
.rule-item,
.timeline-item {
  min-width: 0;
  padding: 13px 14px;
  border-radius: 12px;
}

.verdict-item strong,
.insight strong,
.rule-item strong,
.timeline-item strong {
  font-size: 14px;
  line-height: 1.25;
}

.verdict-item span,
.insight span,
.rule-item span,
.timeline-item span {
  font-size: 12.8px;
  line-height: 1.42;
}

.pill,
.grade,
.data-status {
  min-height: 23px;
  min-width: 0;
  padding: 4px 8px;
  font-size: 11px;
  letter-spacing: 0;
}

input,
select,
textarea {
  min-height: 38px;
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 13px;
}

textarea {
  min-height: 82px;
}

label {
  min-width: 0;
  gap: 6px;
  font-size: 11.5px;
}

.filters {
  gap: 8px;
}

.filters input,
.filters select {
  max-width: 210px;
}

.table-wrap {
  border-radius: 12px;
}

th,
td {
  padding: 10px 12px;
  font-size: 12.5px;
}

th {
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

.edge-grid,
.playbook-list {
  gap: 13px;
}

.edge-card,
.playbook-card,
.evidence-card {
  min-width: 0;
  padding: 15px;
  border-radius: 14px;
}

.edge-metrics {
  gap: 8px;
}

.edge-metric {
  min-width: 0;
  padding: 9px;
  border-radius: 11px;
}

.edge-metric small {
  font-size: 10.5px;
}

.edge-metric b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.form-grid,
.review-form {
  gap: 12px;
}

.modal-card {
  border-radius: 18px;
  padding: 20px;
}

.modal-header {
  margin-bottom: 16px;
}

.modal-header h2 {
  font-size: 22px;
}

.modal-section-title {
  margin: 18px 0 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.checklist-grid,
.evidence-grid {
  gap: 9px;
}

.checklist-grid label,
.evidence-slot {
  padding: 10px;
  border-radius: 11px;
}

.evidence-library-grid {
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: 12px;
}

.evidence-card-preview {
  height: 126px;
  border-radius: 11px;
}

.settings-choice-row {
  gap: 10px;
}

.choice-card {
  min-height: 78px;
  padding: 12px;
  border-radius: 12px;
}

.choice-card span {
  font-size: 12.5px;
}

.about-logo {
  width: min(100%, 260px);
  max-height: 120px;
}

.calendar-heatmap {
  gap: 7px;
}

.calendar-label,
.calendar-cell {
  border-radius: 11px;
}

.calendar-label {
  padding: 7px;
  font-size: 10.5px;
}

.calendar-cell {
  min-height: 74px;
  padding: 8px;
  gap: 6px;
}

.calendar-date {
  font-size: 12.5px;
}

.calendar-pnl {
  font-size: 12.5px;
}

.calendar-meta {
  font-size: 10.5px;
}

.card,
.kpi-card,
.panel,
.metric-box,
.edge-card,
.playbook-card,
.result-tile,
.timeline-item,
.rule-item,
.insight,
.verdict-item,
.trade-tools,
.panel-header > div,
.brand > div,
.topbar > div {
  min-width: 0;
}

.truncate,
.brand-name,
.utility-grid strong,
.data-table strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1320px) {
  .risk-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  :root {
    --sidebar-width: 280px;
  }

  .main {
    padding: 32px 24px 44px;
  }

  .kpi-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

.trade-command-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
}

.saved-view-bar,
.review-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.view-chip {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.view-chip.active {
  color: var(--text);
  border-color: rgba(17,197,198,0.34);
  background: rgba(17,197,198,0.13);
}

.column-menu {
  position: relative;
  flex: 0 0 auto;
}

.column-menu summary,
.advanced-filters summary {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  font-size: 12px;
  font-weight: 760;
  list-style: none;
  cursor: pointer;
}

.column-menu summary::-webkit-details-marker,
.advanced-filters summary::-webkit-details-marker {
  display: none;
}

.column-menu-panel {
  position: absolute;
  right: 0;
  top: 38px;
  z-index: 5;
  width: 220px;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(10, 16, 28, 0.98);
  box-shadow: var(--shadow);
}

.column-menu-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: var(--text);
  font-size: 12px;
  font-weight: 680;
}

.column-menu-panel input {
  width: auto;
  min-height: auto;
  accent-color: var(--gold);
}

.advanced-filters {
  margin-bottom: 10px;
}

.advanced-filter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}

.sort-button {
  width: 100%;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

.sort-caret {
  color: var(--gold-2);
  flex: 0 0 auto;
}

.status-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.trade-row {
  cursor: pointer;
}

.trade-row td:last-child {
  cursor: default;
}

.day-detail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.day-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.day-stat {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(154,171,205,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
}

.day-stat span {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 820;
}

.day-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
}

.calendar-cell {
  cursor: pointer;
}

.calendar-cell.selected {
  border-color: rgba(17,197,198,0.70);
  box-shadow: inset 0 0 0 1px rgba(17,197,198,0.55), 0 0 0 3px rgba(17,197,198,0.10);
}

.import-dropzone {
  min-height: 92px;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 16px;
  border: 1px dashed rgba(17,197,198,0.45);
  border-radius: 13px;
  background: rgba(17,197,198,0.07);
  text-align: center;
  color: var(--muted);
}

.import-dropzone strong {
  color: var(--text);
  font-size: 14px;
}

.import-dropzone.is-dragging {
  border-color: rgba(143,247,241,0.78);
  background: rgba(17,197,198,0.13);
}

.import-preview-panel {
  display: grid;
  gap: 12px;
}

#importPreviewPanel[hidden] {
  display: none;
}

.import-summary {
  display: grid;
  gap: 7px;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid rgba(154,171,205,0.12);
  background: rgba(255,255,255,0.035);
  color: var(--muted);
  font-size: 12.5px;
}

.mapping-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.import-preview-table {
  max-height: 220px;
}

.review-tabs {
  margin-bottom: 2px;
}

.review-dynamic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.review-dynamic-grid label {
  align-content: start;
}

.review-dynamic-grid label:nth-last-child(1):nth-child(odd) {
  grid-column: 1 / -1;
}

body.theme-light .column-menu-panel {
  background: rgba(255,255,255,0.98);
}

body.theme-light .view-chip,
body.theme-light .column-menu summary,
body.theme-light .advanced-filters summary,
body.theme-light .advanced-filter-grid,
body.theme-light .day-stat,
body.theme-light .import-summary {
  background: rgba(255,255,255,0.70);
}

body.theme-light .import-dropzone {
  background: rgba(14,159,230,0.06);
}

@media (max-width: 1180px) {
  .trade-command-row {
    display: grid;
  }

  .column-menu-panel {
    left: 0;
    right: auto;
  }

  .advanced-filter-grid,
  .mapping-grid,
  .review-dynamic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Expert polish patch: alignment, theme-safe toast, contextual shell density. */
button {
  appearance: none;
  -webkit-appearance: none;
  line-height: 1;
}

.primary-btn,
.ghost-btn,
.danger-btn,
.row-action,
.icon-btn,
.view-chip,
.theme-segment button,
.settings-nav-item,
.column-menu summary,
.advanced-filters summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

.choice-card {
  justify-items: start;
  align-content: center;
  line-height: 1.25;
}

.nav-item {
  justify-content: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1;
}

.nav-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--gold-2);
  background: rgba(17, 197, 198, 0.10);
  border: 1px solid rgba(17, 197, 198, 0.16);
  font-size: 11px;
  font-weight: 860;
}

.nav-item.active .nav-icon {
  color: #f7fcff;
  background: linear-gradient(135deg, #11c5c6, #0e9fe6);
  border-color: rgba(17, 197, 198, 0.35);
}

.sidebar {
  background: rgba(8, 13, 24, 0.86);
}

.brand-mark {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

.toast {
  color: #eef4ff;
  background: rgba(16, 23, 38, 0.97);
}

body.theme-light .toast {
  color: #f8fbff;
  background: rgba(17, 24, 39, 0.97);
  border-color: rgba(14, 159, 230, 0.46);
}

.kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.kpi-card {
  overflow: hidden;
}

.kpi-value {
  font-size: 23px;
  font-weight: 760;
  letter-spacing: 0;
}

.kpi-foot {
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-shell {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.settings-nav,
.settings-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(21, 29, 48, 0.88), rgba(13, 19, 33, 0.92));
  box-shadow: var(--shadow);
}

.settings-nav {
  position: sticky;
  top: 0;
  display: grid;
  gap: 5px;
  padding: 8px;
}

.settings-nav-item {
  width: 100%;
  min-height: 36px;
  justify-content: flex-start;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 760;
}

.settings-nav-item:hover {
  color: var(--text);
  background: rgba(255,255,255,0.055);
}

.settings-nav-item.active {
  color: var(--text);
  border-color: rgba(17,197,198,0.28);
  background: rgba(17,197,198,0.12);
}

.settings-content,
.settings-panel {
  min-width: 0;
}

.settings-panel {
  display: none;
  padding: 18px;
}

.settings-panel.active {
  display: block;
}

.settings-panel-head {
  margin-bottom: 14px;
}

.settings-panel-head h2 {
  font-size: 19px;
  line-height: 1.15;
}

.settings-panel-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.settings-stack {
  display: grid;
  gap: 10px;
}

.release-stack {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.setting-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 320px);
  gap: 16px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(154,171,205,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
}

.setting-row > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.setting-row strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.setting-row span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.setting-row input,
.setting-row select {
  max-width: 100%;
}

.setting-row > .data-status {
  width: auto;
  justify-self: end;
  align-self: center;
  padding-inline: 12px;
}

.settings-theme {
  width: 100%;
  max-width: 320px;
  justify-self: end;
  margin-top: 0;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.settings-command-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.settings-warning {
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,180,92,0.28);
  color: #ffdc99;
  background: rgba(255,180,92,0.10);
  font-size: 12.5px;
  line-height: 1.4;
}

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.privacy-grid div {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid rgba(154,171,205,0.12);
  background: rgba(255,255,255,0.035);
}

.privacy-grid strong {
  font-size: 12.5px;
}

.privacy-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.about-compact {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid rgba(154,171,205,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
}

.about-mark {
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  object-fit: contain;
}

.about-copy {
  min-width: 0;
}

body.theme-light .settings-nav,
body.theme-light .settings-panel {
  background: var(--panel);
}

body.theme-light .setting-row,
body.theme-light .privacy-grid div,
body.theme-light .about-compact {
  background: rgba(255,255,255,0.70);
}

body.theme-light .settings-warning {
  color: #7a4200;
  background: rgba(255,180,92,0.13);
}

body.theme-light .nav-icon {
  color: #0b6fc4;
  background: rgba(14,159,230,0.08);
}

@media (max-width: 1400px) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-shell {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    position: static;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .settings-nav-item {
    justify-content: center;
  }

  .setting-row {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .settings-theme {
    justify-self: stretch;
  }

  .settings-command-grid,
  .privacy-grid {
    grid-template-columns: 1fr;
  }
}

/* Public polish: centered toasts, real sidebar icons, and private diagnostics. */
.toast {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  text-align: center;
  line-height: 1.2;
  font-weight: 780;
}

.nav-icon,
body.theme-light .nav-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}

/* Stroke WEIGHT is what reads as crisp here, not grid alignment. The
   Terminal's toolbar icons render a 0.93px hairline at fractional coordinates
   and still look clean; the bad case is a stroke near 1.5px, which spreads
   across two pixel columns at partial opacity — that was the original 18px/2
   setting. 20px × 1.2 renders a whole 1px and matches the Terminal's weight.
   Do not thicken this to 2px: it scores better on a fully-opaque-pixel count
   but reads blunter and heavier than the rest of the product. */
.nav-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item.active .nav-icon,
body.theme-light .nav-item.active .nav-icon {
  color: var(--gold-2);
  background: transparent;
  border-color: transparent;
}

.sidebar-utility {
  gap: 8px;
  padding: 12px;
}

.license-status-grid,
.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.readonly-card,
.diagnostic-grid div {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(154,171,205,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
}

.readonly-card span,
.diagnostic-grid strong {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
}

.readonly-card strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.advanced-diagnostics {
  border: 1px solid rgba(154,171,205,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.022);
  padding: 0;
}

.advanced-diagnostics > summary {
  min-height: 42px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  color: var(--text);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 850;
}

.advanced-diagnostics[open] {
  padding-bottom: 12px;
}

.advanced-diagnostics:not([open]) > :not(summary),
.diagnostic-path-details:not([open]) > :not(summary) {
  display: none !important;
}

.about-diagnostics {
  margin-top: 12px;
}

.diagnostic-help {
  margin: 0;
  padding: 0 13px 10px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.diagnostic-actions-only {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  padding: 0 12px 10px;
}

.diagnostic-path-details {
  margin: 0 12px;
  border-top: 1px solid rgba(154,171,205,0.12);
}

.diagnostic-path-details summary {
  min-height: 36px;
  display: flex;
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 820;
}

.diagnostic-path-details[open] .diagnostic-grid {
  padding-top: 4px;
  padding-bottom: 2px;
}

.diagnostic-value {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  user-select: text;
}

.diagnostics-actions {
  padding: 0 12px;
  flex-wrap: wrap;
}

body.theme-light .readonly-card,
body.theme-light .diagnostic-grid div,
body.theme-light .advanced-diagnostics {
  background: rgba(255,255,255,0.72);
}

body.theme-light .diagnostic-path-details {
  border-top-color: rgba(15,23,42,0.10);
}

button,
.sidebar-toggle,
.nav-item,
.settings-nav-item {
  user-select: none;
}

input,
textarea,
select,
.main,
.panel,
.settings-panel,
.readonly-card,
.data-table,
.diagnostic-value {
  user-select: text;
}

@media (max-width: 1180px) {
  .license-status-grid,
  .diagnostic-grid {
    grid-template-columns: 1fr;
  }
}

/* Premium beta shell: persistent icon-only sidebar mode. */
.app-shell {
  transition: grid-template-columns 180ms ease;
}

.sidebar-toggle {
  width: 36px;
  height: 32px;
  margin: 12px 2px 10px auto;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(154, 171, 205, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  box-shadow: none;
}

.sidebar-toggle:hover {
  color: var(--text);
  border-color: rgba(17, 197, 198, 0.34);
  background: rgba(17, 197, 198, 0.10);
}

.sidebar-toggle:focus-visible {
  outline: 2px solid var(--brand-teal);
  outline-offset: 2px;
}

/* The Terminal's toolbar icons, exactly: 14px at 1.6 = a 0.93px hairline. */
.sidebar-toggle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

body.sidebar-collapsed .app-shell {
  grid-template-columns: var(--sidebar-width-collapsed) minmax(0, 1fr);
}

body.sidebar-collapsed .sidebar {
  padding: 18px 14px;
  align-items: center;
}

body.sidebar-collapsed .sidebar::after {
  opacity: 0.34;
}

body.sidebar-collapsed .sidebar-toggle {
  width: 38px;
  height: 34px;
  margin: 26px auto 12px;
}

body.sidebar-collapsed .brand {
  width: 100%;
  justify-content: center;
  margin: 2px 0 16px;
}

body.sidebar-collapsed .brand > div:not(.brand-mark) {
  display: none;
}

body.sidebar-collapsed .brand-name,
body.sidebar-collapsed .brand-byline,
body.sidebar-collapsed .brand-sub,
body.sidebar-collapsed .sidebar-utility .small-label {
  display: none;
}

body.sidebar-collapsed .brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

body.sidebar-collapsed .nav {
  width: 100%;
  justify-items: center;
  gap: 8px;
  padding-right: 0;
}

body.sidebar-collapsed .nav-item {
  width: 48px;
  height: 44px;
  min-height: 44px;
  margin-inline: auto;
  padding: 0;
  justify-content: center;
  border-radius: 14px;
}

body.sidebar-collapsed .nav-item > span:not(.nav-icon) {
  display: none;
}

body.sidebar-collapsed .nav-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin: 0;
}

body.sidebar-collapsed .sidebar-utility.theme-utility {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

body.sidebar-collapsed .theme-picker-menu {
  left: calc(100% + 10px);
  bottom: 0;
}

@media (max-width: 1180px) {
  body.sidebar-collapsed .app-shell {
    grid-template-columns: var(--sidebar-width-collapsed) minmax(0, 1fr);
  }
}

/* Sidebar top polish: keep the collapse control out of the brand flow. */
.sidebar {
  padding-top: 64px;
}

.sidebar-toggle {
  position: absolute;
  top: 26px;
  right: 18px;
  width: 34px;
  height: 30px;
  margin: 0;
  z-index: 3;
  border-radius: 11px;
}

.brand {
  margin: 0 2px 18px;
  align-items: center;
}

.brand-mark {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
}

.brand-name {
  font-size: 20px;
  line-height: 1.06;
}

.brand-byline {
  margin-top: 4px;
}

.brand-sub {
  margin-top: 5px;
  max-width: 198px;
  line-height: 1.22;
}

body.sidebar-collapsed .sidebar {
  padding-top: 56px;
}

body.sidebar-collapsed .sidebar-toggle {
  position: static;
  width: 36px;
  height: 32px;
  margin: 0 auto 14px;
}

body.sidebar-collapsed .brand {
  margin: 0 0 16px;
}

.sidebar .theme-utility {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 0;
  margin-top: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.sidebar-collapsed .sidebar .theme-utility {
  justify-content: center;
}

.settings-theme {
  display: grid;
}

/* Commercial contrast pass: keep light-theme form labels, table headers, and destructive actions readable. */
.data-table th {
  height: 44px;
  vertical-align: middle;
  line-height: 1;
  white-space: nowrap;
}

.data-table td {
  vertical-align: middle;
}

.data-table .sort-button {
  min-height: 20px;
  align-items: center;
}

.data-table .data-status,
.data-table .grade {
  position: relative;
  top: 0;
  vertical-align: middle;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
  flex: 0 0 16px;
  accent-color: var(--gold);
}

.checklist-grid label {
  line-height: 1.2;
}

body.theme-light label {
  color: #526177;
}

body.theme-light .modal-section-title {
  color: #086bbf;
}

body.theme-light .checklist-grid label {
  color: #526177;
  background: rgba(255,255,255,0.78);
}

body.theme-light .checklist-grid label:has(input:checked) {
  color: #34435a;
  border-color: rgba(14,159,230,0.22);
  background: rgba(14,159,230,0.055);
}

body.theme-light .danger-btn {
  color: #b4233c;
  background: #fff0f3;
  border-color: #ff9eae;
}

body.theme-light .danger-btn:hover {
  color: #8f1830;
  background: #ffe4e9;
}

/* --- Web edition: AlphaPine family identity -------------------------------
   The journal ships inside the Terminal's site. Its wordmark takes the exact
   shape of the Terminal's mark — same size, same mono face, same pulsing
   dot — in the journal's own light blue where the Terminal wears amber. */

:root { --journal-accent: #63b2e4; --journal-accent-halo: rgba(99, 178, 228, 0.16); }
body.theme-light { --journal-accent: #1f6fa8; --journal-accent-halo: rgba(31, 111, 168, 0.16); }

.journal-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--journal-accent);
  font-family: "IBM Plex Mono", var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.journal-mark span {
  display: inline-block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--journal-accent);
  box-shadow: 0 0 0 3px var(--journal-accent-halo);
}

.brand .journal-mark { margin-bottom: 6px; }
.about-copy .journal-mark { margin-bottom: 4px; }

/* Interactive accents follow the wordmark: light blue, not teal or gold. */
.nav-item:focus-visible,
button:focus-visible,
a:focus-visible { outline-color: var(--journal-accent) !important; }
.checklist-grid input, input[type="checkbox"] { accent-color: var(--journal-accent); }
.nav-item.active { box-shadow: inset 2px 0 0 var(--journal-accent); }

/* --- Access gate ---------------------------------------------------------- */
.journal-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 8, 12, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.journal-gate-card {
  width: min(420px, 100%);
  padding: 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: #0d1014;
  color: #edf0f5;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.journal-gate-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #9aa4b2;
}

.journal-gate-note b { color: #edf0f5; font-weight: 600; }

.journal-gate-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 16px;
  border: 1px solid var(--journal-accent);
  border-radius: 8px;
  background: transparent;
  color: var(--journal-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.journal-gate-btn:hover { background: var(--journal-accent-halo); }

.journal-gate-sub {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #808a99;
}

/* --- Terminal-family redesign ---------------------------------------------
   The journal is the Terminal's sibling and dresses like it. One palette,
   defined here exactly as the Terminal defines its own: near-black ground,
   hairline rules, IBM Plex Mono carrying every number in the work area,
   uppercase micro-labels naming things. The sidebar speaks the landing
   page's Inter — it is navigation, not instrument. Light is not an
   inversion: directional colours are darkened for a pale ground, exactly
   as the Terminal's light theme does. */

body {
  --bg: #090b0e;
  --panel: #11151b;
  --panel-2: #0d1014;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(99, 178, 228, 0.4);
  --text: #edf0f5;
  --muted: #9aa4b2;
  --muted-2: #808a99;
  --gold: #63b2e4;
  --gold-2: #8fcaf0;
  --green: #2bc482;
  --red: #ec6058;
  --orange: #efad4a;
  --blue: #63b2e4;
  --brand-teal: #63b2e4;
  --brand-cyan: #63b2e4;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  --radius: 12px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  background: var(--bg);
}

body.theme-light {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --panel-2: #eef0f4;
  --border: rgba(18, 22, 28, 0.1);
  --border-strong: rgba(31, 111, 168, 0.4);
  --text: #12161c;
  --muted: #545d6a;
  --muted-2: #656d7a;
  --gold: #1f6fa8;
  --gold-2: #155a8a;
  --green: #0b7d4d;
  --red: #c2352d;
  --orange: #a56a09;
  --blue: #1f6fa8;
  --brand-teal: #1f6fa8;
  --brand-cyan: #1f6fa8;
  --shadow: 0 18px 44px rgba(18, 22, 28, 0.12);
  background: var(--bg);
}

/* --- Sidebar: the landing page's voice ------------------------------------ */
.sidebar {
  font-family: "Inter", var(--font-sans);
  background: var(--panel-2);
  border-right: 1px solid var(--border);
}

.brand-sub {
  font-family: "Inter", var(--font-sans);
  font-size: 11px;
  line-height: 1.5;
}

.nav-item {
  font-family: "Inter", var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nav-item.active {
  background: var(--panel);
  border-color: var(--border);
}

/* --- Work area: the Terminal's voice -------------------------------------- */
.main,
.modal-card {
  font-family: "IBM Plex Mono", var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.main { font-size: 13px; }

.topbar h1 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#screenSubtitle {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.panel,
.kpi-card,
.risk-strip {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: none;
}

.panel-header h2,
.settings-panel-head h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.panel-header p,
.settings-panel-head p,
.small-label,
.tiny {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted-2);
}

.small-label {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kpi-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.kpi-value {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.kpi-foot {
  font-size: 11px;
  color: var(--muted-2);
}

/* Buttons in the work area take the Terminal's control shape: bordered,
   uppercase, quiet until touched. The primary action wears the accent. */
.main button,
.modal-card button {
  font-family: "IBM Plex Mono", var(--font-mono);
  letter-spacing: 0.08em;
}

.primary-btn {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--bg);
  font-size: 11px;
  text-transform: uppercase;
}

.primary-btn:hover { filter: brightness(1.1); }

.ghost-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.ghost-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.data-table {
  font-size: 12px;
}

.data-table th {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* Form fields: mono values on panel-2 ground, hairline borders. */
.modal-card input,
.modal-card select,
.modal-card textarea,
.main input,
.main select,
.main textarea {
  font-family: "IBM Plex Mono", var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
}

.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus,
.main input:focus,
.main select:focus,
.main textarea:focus {
  border-color: var(--gold);
  outline: none;
}

.modal-card label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.toast {
  font-family: "IBM Plex Mono", var(--font-mono);
  font-size: 12px;
}

/* --- Sidebar refinements --------------------------------------------------
   The nav tightens into a ruled list — rows separated by hairlines instead
   of floating apart — and the theme control takes the Terminal's segmented
   pill, two discs only: light and dark. */
/* The nav flexes to fill the sidebar; without align-content the grid rows
   stretch with it, which is where the yawning gaps came from. */
.nav {
  gap: 0;
  align-content: start;
}

.nav-item {
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 8px;
}

.nav-item + .nav-item {
  border-top: 1px solid var(--border);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-item:has(+ .nav-item) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.journal-theme {
  display: flex;
  gap: 1px;
  padding: 3px;
  width: fit-content;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
}

.journal-theme button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
}

/* This pill is the Terminal theme control's twin — use its exact icon spec. */
.journal-theme button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journal-theme button:hover { color: var(--text); }

.journal-theme button.active {
  background: var(--panel-2);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* --- Demo mode ------------------------------------------------------------ */
.journal-gate-demo {
  display: block;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted, #9aa4b2);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.journal-gate-demo:hover { color: var(--journal-accent); }

/* A quiet, persistent ribbon: the demo is the real product, so the ribbon
   informs rather than nags — one line, one link, out of the way. */
.journal-demo-ribbon {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-family: "IBM Plex Mono", var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow);
}

.journal-demo-ribbon b { color: var(--journal-accent); letter-spacing: 0.12em; }

.journal-demo-ribbon a {
  color: var(--journal-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--journal-accent);
}

/* --- Theme discs: collapsed to the choice, expanded on approach -----------
   The sidebar control mirrors Settings > Appearance exactly — the same
   three states, so the two controls can never disagree. At rest it shows
   only the current choice; hovering or focusing the pill reveals all three. */
.journal-theme:not(:hover):not(:focus-within) button:not(.active) {
  display: none;
}

/* --- Sidebar top row -------------------------------------------------------
   The logo is gone, so nothing should sit in its old footprint: the wordmark
   moves up to share the top row with the collapse toggle. */
.sidebar {
  position: relative;
  padding-top: 20px;
}

.sidebar-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  margin: 0;
}

.brand {
  margin: 4px 4px 22px;
  padding-right: 48px;
}

/* Collapsed: the toggle keeps its exact position instead of dropping into
   the logo's old space; the wordmark yields; rows keep their height so the
   list never grows a scrollbar it did not have when expanded. */
body.sidebar-collapsed .sidebar-toggle {
  position: absolute;
  top: 16px;
  right: 50%;
  margin: 0;
  transform: translateX(50%);
}

body.sidebar-collapsed .brand { display: none; }

body.sidebar-collapsed .nav { margin-top: 48px; }

body.sidebar-collapsed .nav-item { min-height: 38px; }

body.sidebar-collapsed .journal-theme { flex-direction: column; }

/* --- Collapsed sidebar: same language as expanded --------------------------
   Collapsed rows had their own 48px pill boxes while expanded rows were a
   ruled list — two designs for one control. Collapsed rows now match:
   full-width, flat, hairline-separated, icon centred. And the theme discs
   expand as an overlay anchored to the bottom, so hovering them can never
   push the column taller and summon a scrollbar. */
body.sidebar-collapsed .nav { gap: 0; }

body.sidebar-collapsed .nav-item {
  width: 100%;
  height: 38px;
  min-height: 38px;
  margin-inline: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

body.sidebar-collapsed .nav-item.active {
  background: var(--panel);
  box-shadow: inset 2px 0 0 var(--journal-accent);
}

body.sidebar-collapsed .sidebar-utility.theme-utility {
  position: relative;
  height: 36px;
  flex: 0 0 36px;
}

body.sidebar-collapsed .journal-theme {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column-reverse;
}

/* ---- Settings → Account (web) -------------------------------------------
   The desktop License panel became the Account panel, whose actions are
   links (open the Terminal, buy the plan), not form buttons. Give anchors
   wearing the button classes the same footing as real <button>s. */
.settings-actions a.settings-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
/* display:inline-flex above would defeat the [hidden] attribute (author beats
   UA styles) — the upgrade link hides for paid accounts, so restore it. */
.settings-actions a.settings-link[hidden],
.settings-actions button[hidden] { display: none; }

/* Base Currency is a grouped select now. The original palette hard-coded the
   option popup (#101827), which predates the Terminal token remap — align the
   popup, and its optgroup labels, with the theme actually in force. */
.main select option,
.main select optgroup {
  background: var(--panel-2);
  color: var(--text);
}

.main select optgroup {
  font-style: normal;
  font-weight: 600;
}

/* ---- Icon weight ---------------------------------------------------------
   The Appearance theme icons were 17px at 2.2, which renders 1.56px — the
   width that smears worst. 16px × 1.5 is a whole 1px hairline, the same
   weight the Terminal wears. */
.theme-status-icon,
.theme-picker-menu svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
}

/* Storage recovery notice: shown only when this browser holds a journal that
   could not be parsed. It has to read as a warning, not a routine panel. */
.settings-recovery {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 103, 118, 0.42);
  border-radius: 12px;
  background: rgba(255, 103, 118, 0.10);
}

.settings-recovery strong { font-size: 13px; }
.settings-recovery span { color: var(--muted); font-size: 12px; line-height: 1.55; }

/* ---- Phones and small tablets --------------------------------------------
   Below 768px the sidebar cannot hold a column: at 390px it left the content
   110px wide and KPI cards 30px across, which reads as a broken app rather
   than a narrow one. It becomes an off-canvas drawer instead, and the content
   gets the whole viewport. */
@media (max-width: 767px) {
  .app-shell {
    grid-template-columns: 1fr;
    height: 100dvh;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(302px, 86vw);
    height: 100dvh;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: none;
  }

  body.nav-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
  }

  /* The desktop collapse state has no meaning here — the drawer is simply
     open or shut — so its rules must not shrink the open drawer. */
  body.sidebar-collapsed .sidebar {
    width: min(302px, 86vw);
    padding: 20px 18px 18px;
    align-items: stretch;
  }
  body.sidebar-collapsed .brand { display: flex; }
  body.sidebar-collapsed .nav-item > span:not(.nav-icon) { display: inline; }
  body.sidebar-collapsed .nav { margin-top: 0; }
  body.sidebar-collapsed .nav-item { justify-content: flex-start; }

  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(3, 6, 12, 0.62);
    border: 0;
  }

  .sidebar-toggle { display: none; }

  .nav-drawer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-2);
    color: var(--text);
  }

  /* journal.css has no global svg reset, so the stroke must be stated here or
     the icon renders as three invisible unfilled paths. */
  .nav-drawer-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  .main { padding: 18px 16px 56px; }

  .topbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
  }

  .topbar > div { flex: 1 1 200px; min-width: 0; }
  h1 { font-size: 22px; }
  .topbar p { font-size: 12px; }

  .topbar-actions {
    flex: 1 1 100%;
    justify-content: stretch;
    gap: 8px;
  }

  .topbar-actions > * { flex: 1 1 auto; }

  /* Two columns keeps a KPI legible; one column wastes a phone's height. */
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .risk-strip,
  .two-col,
  .three-col,
  .edge-grid,
  .edge-metrics { grid-template-columns: minmax(0, 1fr); }

  .settings-shell,
  .settings-layout { grid-template-columns: minmax(0, 1fr); }

  /* Wide data scrolls inside its own box; the page itself never does. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .modal-card {
    padding: 18px 16px;
    border-radius: 16px;
    max-height: calc(100dvh - 24px);
  }

  .form-grid,
  .settings-stack { grid-template-columns: minmax(0, 1fr); }

  .setting-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
  }

  /* Touch targets: 44px is the smallest reliably tappable control. */
  .primary-btn,
  .ghost-btn,
  .danger-btn,
  .row-action,
  .nav-item,
  input,
  select,
  textarea { min-height: 44px; }
}

/* The drawer trigger and its scrim exist only on phones. Hidden from 768px up
   rather than by a base rule, which would come after the media block above and
   override the display it sets. */
@media (min-width: 768px) {
  .nav-drawer-btn,
  .nav-scrim { display: none !important; }
}

/* ---- Settings navigation, narrow layouts ---------------------------------
   Wherever the nav runs horizontally rather than down the side it is drawn as
   a hairline grid: the 1px gaps let the container colour through, giving one
   line between each row and column, and the pills go away. The treatment is
   identical from a portrait phone to a tablet, so rotating a phone does not
   redraw the panel into a different component. It used to flip back to pills in
   landscape, because a phone on its side is 844px wide and fell past a 720px
   breakpoint. Appended at the end of the file so it wins over the 1180px block
   above on source order. */
@media (max-width: 1180px) {
  .settings-nav {
    /* Two columns at every horizontal width, portrait or landscape: the label
       widths are the same either way, and a consistent shape means rotating
       the phone does not redraw the panel into something else. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    padding: 0;
    background: var(--border);
    overflow: hidden;
  }

  .settings-nav-item {
    min-height: 46px;
    padding: 11px 13px;
    border: 0;
    border-radius: 0;
    justify-content: flex-start;
    text-align: left;
    background: var(--panel-2);
    font-size: 12.5px;
    line-height: 1.3;
  }

  .settings-nav-item:hover { background: var(--panel); }

  /* The active row is marked by an accent edge rather than a pill, matching
     the sidebar's treatment. */
  .settings-nav-item.active {
    background: var(--panel);
    color: var(--journal-accent);
    box-shadow: inset 2px 0 0 var(--journal-accent);
  }
}

/* ---- Calendar on a narrow screen -----------------------------------------
   A month grid is seven columns wide whatever the screen is, so at 390px each
   cell is about 40px across — enough for the date and a compact figure, and
   nowhere near enough for the "N trades · R · Exec" meta line, which pushed
   its way out of all 42 cells. The meta is dropped here rather than shrunk:
   tapping a day already opens the full breakdown below the grid, and the daily
   ledger under it lists every day in full, so nothing is lost. Landscape and
   tablet keep the fuller cell. */
@media (max-width: 720px) {
  .calendar-cell {
    min-height: 54px;
    padding: 5px 4px;
    gap: 2px;
    align-content: start;
    text-align: center;
    overflow: hidden;
  }

  .calendar-date { font-size: 11px; font-weight: 800; }

  .calendar-meta { display: none; }

  .calendar-pnl {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .calendar-label { padding: 5px 2px; font-size: 9px; }

  /* A panel header is a title beside its control. Side by side on a phone it
     squeezes the description into a four-word column, so it stacks instead and
     each part gets the full width. */
  .panel-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .panel-header > * { min-width: 0; }
}

/* ---- Content grids on a phone --------------------------------------------
   These grids were sized for a desktop column and kept their track count on a
   390px screen, leaving each cell 100-155px wide: playbook cards clipped their
   own headings, review textareas were too narrow to write in, and filter
   controls sat beside labels that wrapped. A phone reads one thing at a time,
   so they go to a single column — except the risk calculator's result tiles,
   which are short figures that still pair up cleanly two across. */
@media (max-width: 720px) {
  .playbook-list,
  .review-dynamic-grid,
  .advanced-filter-grid { grid-template-columns: minmax(0, 1fr); }

  .risk-result { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* With the full width available the card no longer has to clip its title. */
  .playbook-card h3 {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .review-dynamic-grid textarea { min-height: 86px; }

  /* Tap targets. The filter chips were 32px tall and the table's sort headers
     only 20px — small enough on a phone that hitting the wrong one is the
     likely outcome. The chips get a full target; the sort headers get as much
     as a dense table header can give without turning into a band of its own. */
  .view-chip { min-height: 44px; }

  /* Matched to `.data-table .sort-button` above, which is more specific than a
     bare `.sort-button` — a media query adds no specificity of its own, so the
     desktop 20px would otherwise keep winning. */
  .data-table .sort-button {
    min-height: 36px;
    padding-block: 8px;
  }
}

/* ---- Demo ribbon clearance -------------------------------------------------
   The ribbon is fixed to the bottom-right and sat on top of Save Settings and
   the last review fields on a phone. While the demo is active the work area
   keeps that much room free at the bottom, so the last control is always
   reachable. */
body.journal-demo .main { padding-bottom: 96px; }

@media (max-width: 720px) {
  body.journal-demo .main { padding-bottom: 112px; }

  /* Opened (a datetime picker) and Symbol are each too wide for half a phone
     row and were truncating; they take the full row. Side/Entry, Stop/Exit and
     the rest still pair up. */
  #tradeForm .form-grid.dense > label:nth-child(-n+2) { grid-column: 1 / -1; }

  /* Remaining sub-44px controls: table sort headers, the chart data-table
     toggle, and the trade log's Columns / Advanced Filters summaries. */
  .data-table .sort-button { min-height: 44px; padding-block: 10px; }
  .chart-data-disclosure > summary,
  .column-menu > summary,
  .advanced-filters > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* The trade table is ~1180px wide inside a scroller with no visible cue.
     A fading right edge says "there is more" without a word of copy. */
  .table-wrap {
    position: relative;
    background:
      linear-gradient(to left, var(--panel-2) 0, rgba(0, 0, 0, 0) 28px) right / 28px 100% no-repeat,
      var(--panel);
    background-attachment: local, scroll;
  }
  .table-hint { display: block; }
}

/* Shown only on phones (above); a one-line cue placed before wide tables. */
.table-hint {
  display: none;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ---- Trading accounts ------------------------------------------------------
   One login, several accounts. The filter lives in the topbar beside the
   screen's actions; the account cards and cash-flow ledger live in Settings. */
.account-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--panel-2);
  color: var(--muted);
  font-family: "IBM Plex Mono", var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.account-filter select {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: "IBM Plex Mono", var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.accounts-list { display: grid; gap: 10px; }

.account-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
}

.account-card.is-archived { opacity: 0.62; }

.account-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.account-card-head strong { font-size: 14px; }
.account-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.account-card .card-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }

.account-form h3, .cashflow-form h3 { margin: 0; font-size: 15px; }
.cashflow-form h3 + .tiny { margin-top: -4px; }
.account-form,
.cashflow-form {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
}

.cashflow-form .settings-actions { grid-column: 1 / -1; }
.cashflow-form label.wide { grid-column: 1 / -1; }

/* Risk Desk: eyebrow above each prop account's tracker. */
.prop-account-head {
  margin: 14px 0 6px;
  font-family: "IBM Plex Mono", var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--journal-accent);
}
.prop-account-head:first-child { margin-top: 0; }

@media (max-width: 720px) {
  .account-filter { flex: 1 1 100%; justify-content: space-between; }
  .account-filter select { flex: 1; text-align: right; }
  /* Phones stack every field (same call as the playbook form): one column, top to bottom. */
  .account-form .form-grid.dense,
  .cashflow-form .form-grid.dense { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Dashboard: collapsible Review Queue ---------------------------------- */
.queue-fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.queue-fold > summary::-webkit-details-marker { display: none; }
.queue-fold > summary .panel-header { margin-bottom: 0; flex: 1 1 auto; }
.queue-fold[open] > summary .panel-header { margin-bottom: 10px; }
.queue-fold > summary .caret { flex: 0 0 auto; margin-top: 4px; color: var(--muted); transition: transform 0.15s ease; }
.queue-fold:not([open]) > summary .caret { transform: rotate(-90deg); }
.queue-fold:not([open]) { min-height: 0; }
.queue-count {
  display: inline-block;
  min-width: 22px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,103,118,0.16);
  color: #ff8b98;
  font-size: 11px;
  text-align: center;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* ---- Trade Log: cards on phones ------------------------------------------- */
.trade-cards, .trade-cards-bar { display: none; }
.trade-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.035);
  display: grid;
  gap: 6px;
  cursor: pointer;
}
.trade-card:focus-visible { outline: 2px solid rgba(17,197,198,0.6); outline-offset: 2px; }
.trade-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.trade-card-row > * { min-width: 0; }
.trade-card-row > :last-child { flex: 0 0 auto; text-align: right; }
.trade-card-symbol { font-size: 15px; }
.trade-card-r { font-size: 15px; font-variant-numeric: tabular-nums; }
.trade-card-setup { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-card-outcome { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.trade-card-empty { padding: 14px 4px; }
.trade-cards-bar { align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; }
.trade-cards-sort { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; font-size: 12px; white-space: nowrap; }
.trade-cards-sort select { flex: 1 1 auto; min-height: 44px; }
.trade-cards-bar .ghost-btn.small { min-height: 44px; }

@media (max-width: 720px) {
  #tradeLog .table-wrap, #tradeLog .table-hint { display: none; }
  .trade-cards { display: grid; gap: 10px; }
  .trade-cards-bar { display: flex; }
}

/* A folded queue must not be stretched to the height of Observations. */
.command-grid:has(.queue-fold:not([open])) { align-items: start; }
.queue-fold h2 { white-space: nowrap; }
.trade-card-account { max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Execution fills (trade dialog) ---------------------------------------- */
.legs-editor { display: grid; gap: 10px; }
.legs-list { display: grid; gap: 6px; }
.legs-list:empty { display: none; }
.leg-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.8fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.leg-kind { font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; }
.leg-row.entry .leg-kind { color: var(--gold-2); }
.leg-row.exit .leg-kind { color: #48d48a; }
.leg-at { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leg-num { text-align: right; }
.legs-summary { margin: 0; }
.legs-add {
  display: grid;
  grid-template-columns: 90px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr) auto;
  gap: 8px;
  align-items: end;
}
.legs-add label { font-size: 11px; }
.legs-add .ghost-btn.small { min-height: 42px; }
.legs-actions { display: flex; }
input.is-derived { color: var(--muted); background: rgba(255,255,255,0.02); border-style: dashed; }
.leg-nums { display: contents; }
.legs-add label, .legs-add input, .legs-add select { min-width: 0; }
/* display:inline-flex on the button classes beats the UA's [hidden] rule. */
.primary-btn[hidden], .ghost-btn[hidden], .danger-btn[hidden], .row-action[hidden], .icon-btn[hidden] { display: none; }
@media (max-width: 720px) {
  .leg-row { grid-template-columns: 50px minmax(0, 1fr) auto; row-gap: 2px; }
  .leg-row .leg-at { grid-column: 2 / 3; }
  .leg-nums { display: flex; gap: 10px; grid-column: 2 / 3; flex-wrap: wrap; }
  .leg-row .leg-num { text-align: left; }
  .leg-row .row-action { grid-column: 3 / 4; grid-row: 1 / 3; align-self: center; }
  .legs-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .legs-add label:nth-child(2) { grid-column: 1 / -1; }
  .legs-add .ghost-btn.small { grid-column: 1 / -1; min-height: 44px; }
}

/* ---- Data & Backup: backup history and encrypted sync ---------------------- */
.backup-history { display: grid; gap: 6px; }
.backup-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.backup-entry > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backup-entry code { font-family: "IBM Plex Mono", var(--font-mono); font-size: 11px; }
.sync-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
}
.sync-head h3 { margin: 0 0 6px; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.sync-head p { margin: 0; }
.sync-status { margin: 0; }
.sync-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.sync-form .primary-btn { min-height: 44px; }
@media (max-width: 720px) {
  .backup-entry { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sync-form { grid-template-columns: minmax(0, 1fr); }
}

/* The hidden attribute always wins. Several layout classes set display:grid
   or inline-flex, which beats the UA's [hidden] rule by specificity, so the
   contract is restated here at the end of the cascade once and for all. */
[hidden] { display: none !important; }

/* ---- Edge Lab window + setup taxonomy ------------------------------------- */
.edge-filters input[type="date"] { width: auto; }
.edge-window-note { margin: -4px 0 12px; }
.taxonomy-panel { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.taxonomy-panel h3 { margin: 6px 0 0; font-size: 15px; }
.taxonomy-panel p { margin: 0; }
.taxonomy-list { display: grid; gap: 6px; }
.taxonomy-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
}
.taxonomy-row.has-lookalike { border-color: rgba(255,178,74,0.45); }
.taxonomy-name { display: grid; gap: 2px; min-width: 0; }
.taxonomy-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taxonomy-row input { min-height: 40px; }
@media (max-width: 720px) {
  .edge-filters { flex-direction: column; align-items: stretch; }
  .edge-filters input[type="date"] { width: 100%; }
  .taxonomy-row { grid-template-columns: minmax(0, 1fr); }
  .taxonomy-row .row-action { min-height: 44px; }
}

/* ---- Topbar account chip ------------------------------------------------- */
.account-chip { position: relative; flex: 0 0 auto; }
.account-chip > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
}
.account-chip > button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.account-chip > button:hover { color: var(--text); }
.account-chip > button[data-signed-in="1"] { color: var(--journal-accent); box-shadow: inset 0 0 0 1px rgba(17,197,198,0.35); }
.account-chip > button:focus-visible { outline: 2px solid rgba(17,197,198,0.6); outline-offset: 2px; }
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 8px;
  min-width: 240px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
}
.account-menu-email { color: var(--text); font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-plan { color: var(--muted); font-size: 11.5px; }
.account-menu-plan:empty { display: none; }
.account-menu-link {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 2px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--journal-accent);
  font-size: 12.5px; font-weight: 800; text-decoration: none;
}
.account-menu-link i { font-style: normal; }
.account-menu-link.is-upgrade { border-top: 0; margin-top: -8px; }
.account-menu button {
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.account-menu button:hover { border-color: var(--journal-accent); }
@media (max-width: 767px) {
  /* Drawer button | title | account disc on one row; the actions row follows. */
  .account-chip { order: 2; }
  .topbar > div { order: 1; }
  .topbar-actions { order: 3; }
  .account-menu { right: 0; min-width: 220px; }
}

/* ---- Demo ribbon + wall ---------------------------------------------------- */
.journal-demo-ribbon button {
  border: 1px solid var(--journal-accent);
  border-radius: 999px;
  background: none;
  color: var(--journal-accent);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  cursor: pointer;
}
.journal-demo-ribbon button:hover { background: rgba(17,197,198,0.12); }
.demo-wall-card .modal-header p { margin-top: 6px; }
.demo-wall-copy { margin: 0 0 14px; color: var(--muted); line-height: 1.55; font-size: 13.5px; }
/* Both footer links are anchors now — the buy button included, because the
   purchase lives on the site, not behind a form here. */
.demo-wall-card .modal-footer a.ghost-btn,
.demo-wall-card .modal-footer a.primary-btn { display: inline-flex; align-items: center; text-decoration: none; }

.demo-wall-list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
}

.demo-wall-list li {
  position: relative;
  padding-left: 18px;
}

.demo-wall-list li::before {
  content: "\203A";
  position: absolute;
  left: 2px;
  color: var(--muted);
}

/* On a phone the three footer controls squeeze into three wrapped lines each
   and the buy button ends up the narrowest of them. Give it its own row. */
@media (max-width: 480px) {
  .demo-wall-card .modal-footer { flex-wrap: wrap; }
  .demo-wall-card .modal-footer .spacer { display: none; }
  .demo-wall-card .modal-footer a.primary-btn {
    order: -1;
    width: 100%;
    justify-content: center;
  }
  .demo-wall-card .modal-footer > a.ghost-btn,
  .demo-wall-card .modal-footer > button.ghost-btn { flex: 1; justify-content: center; }
}
@media (max-width: 720px) {
  .journal-demo-ribbon { flex-direction: column; align-items: stretch; text-align: center; gap: 8px; }
  .journal-demo-ribbon button { min-height: 40px; }
}

/* The title takes the slack; actions and the account disc sit together on
   the right instead of space-between spreading them across the row. */
.topbar { justify-content: flex-start; gap: 12px; }
.topbar > div:not(.topbar-actions):not(.account-chip) { flex: 1 1 auto; min-width: 0; }
.topbar > .topbar-actions { margin-left: auto; }

/* Phone topbar: drawer button, title and account disc on one row; the
   actions row beneath. (The desktop rule above gave the title flex-grow,
   which on a phone pushed it under the drawer button.) */
/* `.topbar > div` (0,1,1) in the phone block outranks a bare class (0,1,0),
   so the two named children are addressed as `.topbar > .name` (0,2,0). */
@media (max-width: 767px) {
  .topbar { flex-wrap: wrap; align-items: center; }
  .topbar > .nav-drawer-btn { order: 0; }
  .topbar > div:not(.topbar-actions):not(.account-chip) { order: 1; flex: 1 1 0; min-width: 0; }
  .topbar > .account-chip { order: 2; flex: 0 0 auto; margin-left: auto; }
  .topbar > .topbar-actions { order: 3; flex: 1 1 100%; margin-left: 0; }
}

/* ---- Account menu: the Terminal link wears the Terminal's amber ---------
   Same gesture as the Terminal's own menu row (its Journal link is cyan,
   the Journal's colour): rules above and below light up in the destination's
   colour on hover, the arrow slides forward. */
.account-menu-link {
  color: var(--terminal-amber);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.account-menu-link i { transition: transform 0.15s ease; }
.account-menu-link:hover,
.account-menu-link:focus-visible {
  border-color: var(--terminal-amber);
  box-shadow: 0 1px 0 0 rgba(239, 173, 74, 0.25), 0 -1px 0 0 rgba(239, 173, 74, 0.25);
  outline: none;
}
.account-menu-link:hover i,
.account-menu-link:focus-visible i { transform: translateX(3px); }
/* The plan link keeps the Journal's own accent; only the Terminal is amber. */
.account-menu-link.is-upgrade { color: var(--journal-accent); }
.account-menu-link.is-upgrade:hover,
.account-menu-link.is-upgrade:focus-visible { border-color: var(--journal-accent); box-shadow: none; }
.account-menu button { transition: border-color 0.15s ease, color 0.15s ease; }
:root { --terminal-amber: #efad4a; }
body.theme-light { --terminal-amber: #a56a09; }

/* ---- Account menu typography: the Terminal's hand ------------------------
   The Terminal menu is 11px mono, tracked, normal weight; the Journal's was
   13px sans at weight 800, which reads heavy beside it. Same voice now. */
.account-menu {
  gap: 10px;
  font-family: "IBM Plex Mono", var(--font-mono);
}
.account-menu-email {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.account-menu-plan {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.account-menu-link {
  padding: 10px 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.account-menu button {
  min-height: 0;
  padding: 8px 10px;
  border-radius: 7px;
  font-family: "IBM Plex Mono", var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Weight and colour to match the Terminal menu exactly: muted 11px email at
   normal weight, the plan line in the product's accent, nothing bolder than
   400 anywhere in the menu. */
.account-menu-email { color: var(--muted); font-weight: 400; font-size: 11px; letter-spacing: 0.04em; }
.account-menu-plan { color: var(--journal-accent); font-weight: 400; }
.account-menu-link { font-weight: 400; }
.account-menu button { font-weight: 400; }

/* ---- Site masthead -------------------------------------------------------
   The Journal is a full-viewport application, and until now that meant it had
   no way out: no logo to click, no nav, nothing but the browser's back
   button. The Terminal has carried the site header all along; this is the
   same bar, so moving between the two apps does not move the masthead.

   It is deliberately NOT theme-aware. An earlier pass wired it to the
   Journal's own tokens so it would follow light and dark, which made the same
   masthead render three different ways across the site — the CTA in
   particular came out a different blue in the Journal's light theme and gold
   in its dark one. The masthead is site chrome, not app chrome: it belongs to
   alphapinelab.com and looks the same on every page of it. The values below
   are app.css's, copied literally, and they do not read a single Journal
   token.

   It does not import app.css to get them. That stylesheet defines `body`,
   `.brand`, `.nav` and `.section-shell`, every one of which the Journal
   already uses for something else, so borrowing a header from it would
   quietly restyle the sidebar. The rules are scoped to their own `site-`
   names instead.

   Appended at the end of the file on purpose: journal.css is ordered, not
   layered, and rules added earlier lose to the ones already below them. */

:root {
  --site-header-h: 65px;
}

.site-header {
  height: var(--site-header-h);
  border-bottom: 1px solid rgba(29, 29, 31, 0.08);
  /* app.css paints this bar 82% white and blurs what shows through, because
     on the Terminal it is sticky and content scrolls beneath it — over a
     light page that composites to very nearly white. In the Journal nothing
     is behind it (the application starts below, it never overlaps), and what
     did show through was the dark body and its gradients, which turned the
     same bar grey the moment the app was switched to its dark theme. Copying
     the declared value was not enough: the rendered colour is the value AND
     what is behind it. Opaque white is what app.css composites to on the
     Terminal, so it is what is stated here, and the blur goes with it since
     there is nothing left to blur. */
  background: #ffffff;
}

.site-header-shell {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: 24px;
  width: min(1180px, calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  /* Ratio B, matching the landing page and the Terminal. */
  gap: 10px;
  color: #1d1d1f;
  text-decoration: none;
}

/* The monogram only. */
.site-brand > img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 163, 154, 0.14));
}

.site-brand .brand-wordmark {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* Nine flipping cards, sized by --wm-w at the end of this file. */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  color: #5f666d;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  white-space: nowrap;
}

/* The Terminal gives its own entry aria-current and no styling of its own, so
   the Journal's does the same: the trail of nav items reads as one row. */
.site-nav a,
.site-nav-current {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: #1d1d1f;
}

.site-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.site-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #ffffff;
  background: #0071e3;
  box-shadow: 0 8px 24px rgba(0, 113, 227, 0.18);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* app.css sets no size here, so the Terminal's button inherits the site's
     16px body text. journal.css has a different base, so the value is stated
     rather than inherited — otherwise the same button is 14px on one app and
     16px on the other. */
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.site-cta:hover,
.site-cta:focus-visible {
  transform: translateY(-1px);
  background: #005bb8;
  box-shadow: 0 12px 30px rgba(0, 113, 227, 0.22);
}

/* The application now starts below the masthead rather than at the top of
   the viewport, so every full-height rule it depends on loses that band. */
.app-shell {
  height: calc(100vh - var(--site-header-h));
}

.sidebar {
  height: 100%;
}

/* Below 900px the middle column is what has to give: the brand and the way
   back to the site are the reason this bar exists, and Products/Pricing are
   one tap further away on the home page anyway. */
@media (max-width: 900px) {
  .site-header-shell {
    grid-template-columns: 1fr auto;
    gap: 14px;
  }

  .site-nav {
    justify-content: flex-end;
    gap: 18px;
  }

  .site-nav a[href*="#products"],
  .site-nav a[href*="#pricing"],
  .site-nav-current {
    display: none;
  }

  .site-header-actions {
    display: none;
  }
}

@media (max-width: 767px) {
  .app-shell {
    height: calc(100dvh - var(--site-header-h));
  }

  .site-header-shell {
    width: calc(100% - 28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav a,
  .site-cta {
    transition: none;
  }
}

/* ---- The wordmark, as nine cards ---------------------------------------
   Ratio B: a 205px wordmark against the 38px monogram, with a 10px gap. The
   old lockup gave the wordmark 140px, which left the monogram looking like
   the logo and the name looking like a caption beside it.

   The nine letters are windows onto ONE image, positioned by background
   offset, so nine independently flipping cards still cost a single request —
   4.2 KB, less than the 7.2 KB the three old renditions spent between them.

   Every width, offset and gap is a fraction of --wm-w rather than a pixel, so
   one set of rules serves the header, the narrow breakpoint and anywhere else
   the mark is placed: set --wm-w and the geometry follows.

   The delays are classes, never style attributes. This site serves
   style-src 'self', which drops an inline style exactly as it drops an inline
   script — the mistake that silently flattened the hero's timing to zero. */
.wm-flip {
  --wm-w: 205px;
  display: inline-flex;
  align-items: flex-start;
  width: var(--wm-w);
  height: calc(var(--wm-w) * 0.090361);
  /* Shallow, so the far edge of a turning letter does not visibly stretch. */
  perspective: 620px;
}

.wm-flip i {
  display: block;
  flex: none;
  height: 100%;
  background-image: url("./assets/alphapine-wordmark-664.png");
  background-repeat: no-repeat;
  background-size: var(--wm-w) auto;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  animation: wmCardFlip 620ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.wm-flip i:last-child { margin-right: 0; }

  .wm-flip i:nth-child(1) { width: calc(var(--wm-w) * 0.109940); background-position-x: calc(var(--wm-w) * -0.000000); }
  .wm-flip i:nth-child(2) { width: calc(var(--wm-w) * 0.087349); background-position-x: calc(var(--wm-w) * -0.135542); }
  .wm-flip i:nth-child(3) { width: calc(var(--wm-w) * 0.097892); background-position-x: calc(var(--wm-w) * -0.246988); }
  .wm-flip i:nth-child(4) { width: calc(var(--wm-w) * 0.093373); background-position-x: calc(var(--wm-w) * -0.367470); }
  .wm-flip i:nth-child(5) { width: calc(var(--wm-w) * 0.109940); background-position-x: calc(var(--wm-w) * -0.484940); }
  .wm-flip i:nth-child(6) { width: calc(var(--wm-w) * 0.097892); background-position-x: calc(var(--wm-w) * -0.620482); }
  .wm-flip i:nth-child(7) { width: calc(var(--wm-w) * 0.016566); background-position-x: calc(var(--wm-w) * -0.740964); }
  .wm-flip i:nth-child(8) { width: calc(var(--wm-w) * 0.097892); background-position-x: calc(var(--wm-w) * -0.784639); }
  .wm-flip i:nth-child(9) { width: calc(var(--wm-w) * 0.090361); background-position-x: calc(var(--wm-w) * -0.909639); }

  .wm-flip i:nth-child(1) { margin-right: calc(var(--wm-w) * 0.025602); }
  .wm-flip i:nth-child(2) { margin-right: calc(var(--wm-w) * 0.024096); }
  .wm-flip i:nth-child(3) { margin-right: calc(var(--wm-w) * 0.022590); }
  .wm-flip i:nth-child(4) { margin-right: calc(var(--wm-w) * 0.024096); }
  .wm-flip i:nth-child(5) { margin-right: calc(var(--wm-w) * 0.025602); }
  .wm-flip i:nth-child(6) { margin-right: calc(var(--wm-w) * 0.022590); }
  .wm-flip i:nth-child(7) { margin-right: calc(var(--wm-w) * 0.027108); }
  .wm-flip i:nth-child(8) { margin-right: calc(var(--wm-w) * 0.027108); }

  .wm-flip i:nth-child(1) { animation-delay: 0ms; }
  .wm-flip i:nth-child(2) { animation-delay: 60ms; }
  .wm-flip i:nth-child(3) { animation-delay: 120ms; }
  .wm-flip i:nth-child(4) { animation-delay: 180ms; }
  .wm-flip i:nth-child(5) { animation-delay: 240ms; }
  .wm-flip i:nth-child(6) { animation-delay: 300ms; }
  .wm-flip i:nth-child(7) { animation-delay: 360ms; }
  .wm-flip i:nth-child(8) { animation-delay: 420ms; }
  .wm-flip i:nth-child(9) { animation-delay: 480ms; }

/* Each letter turns in from its edge, overshoots a little, and settles. */
@keyframes wmCardFlip {
  0%   { transform: rotateY(-95deg); opacity: 0; }
  50%  { opacity: 1; }
  64%  { transform: rotateY(12deg); }
  84%  { transform: rotateY(-4deg); }
  100% { transform: rotateY(0); opacity: 1; }
}

/* Asked for less motion: the wordmark is simply there, already finished. */
@media (prefers-reduced-motion: reduce) {
  .wm-flip i { animation: none; }
}

/* This header keeps its nav inline on a phone rather than collapsing to a
   button, so the wordmark yields a little there — the same lockup, sized to
   the room it actually has. */
@media (max-width: 767px) {
  .site-brand .wm-flip {
    --wm-w: 150px;
  }
}