/* Prism premium UI.
   The imported Agent Scoreboard design is the source of truth: editorial typography,
   hairline structure, warm-paper light mode, and private-office dark mode. */
@import url("./premium-fonts.css");

/* Reference and semantic tokens. Brass is the default light colorway. The old Prism token
   names remain as semantic aliases so every existing tool adopts the system together. */
:root {
  color-scheme: light;

  --font-display: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-label: "IBM Plex Mono", "Cascadia Mono", monospace;

  --ref-canvas: #F4F2EC;
  --ref-surface: #FFFDF9;
  --ref-surface-soft: #F7F4EC;
  --ref-surface-strong: #EFEADD;
  --ref-ink: #16181A;
  --ref-muted: #6E6B5C;
  --ref-subtle: #9A9788;
  --ref-line: #E4E1D9;
  --ref-accent: #A8843A;
  --ref-accent-strong: #8A6A22;
  --ref-accent-soft: #F7F0DF;
  --ref-on-accent: #FFFFFF;

  --paper: var(--ref-canvas);
  --card: var(--ref-surface);
  --ink: var(--ref-ink);
  --muted: var(--ref-muted);
  --subtle: var(--ref-subtle);
  --line: var(--ref-line);
  --soft: var(--ref-surface-soft);
  --soft-strong: var(--ref-surface-strong);
  --accent: var(--ref-accent);
  --accent-strong: var(--ref-accent-strong);
  --accent-soft: var(--ref-accent-soft);
  --on-accent: var(--ref-on-accent);

  --positive: #0B6A56;
  --positive-soft: #E5F2EC;
  --danger: #B3261E;
  --danger-soft: #F8E9E7;
  /* Text laid ON a --danger fill. It cannot be a fixed white: --danger is a dark red on paper
     but a LIGHT red in the dark colorway, where white on it measures 2.28:1. Pairing it the way
     --on-accent pairs with --accent keeps a destructive button legible in both. */
  --on-danger: #FFFFFF;
  --warn: #8A5300;
  --warn-soft: #F8EEDC;
  --ql: #1F4E79;          /* hypothetical qualified plan */
  --ql-soft: #E4EBF2;
  --iul: var(--positive); /* the policy and positive outcomes */
  --iul-soft: var(--positive-soft);

  --shadow: none;
  --radius: 2px;
  --radius-sm: 0;
  --radius-pill: 999px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Saved light colorways from the imported design. They change identity accents and paper
   temperature without changing status semantics such as positive, warning, and danger. */
:root[data-colorway="ink"] {
  --ref-canvas: #F1F5F9;
  --ref-surface: #FCFDFF;
  --ref-surface-soft: #F6F8FB;
  --ref-surface-strong: #E4EBF2;
  --ref-ink: #111820;
  --ref-muted: #5F6B78;
  --ref-subtle: #8793A0;
  --ref-line: #DFE3E8;
  --ref-accent: #1F4E79;
  --ref-accent-strong: #173D61;
  --ref-accent-soft: #E4EBF2;
}
:root[data-colorway="forest"] {
  --ref-canvas: #F0F5F2;
  --ref-surface: #FBFDFB;
  --ref-surface-soft: #F5F8F6;
  --ref-surface-strong: #E2ECE7;
  --ref-ink: #121A17;
  --ref-muted: #5C6B65;
  --ref-subtle: #829088;
  --ref-line: #DDE5E1;
  --ref-accent: #1E5F4B;
  --ref-accent-strong: #174A3B;
  --ref-accent-soft: #E2ECE7;
}
:root[data-colorway="oxblood"] {
  --ref-canvas: #F8F2F0;
  --ref-surface: #FFFCFB;
  --ref-surface-soft: #FBF6F4;
  --ref-surface-strong: #F0E4E1;
  --ref-ink: #1C1414;
  --ref-muted: #6E5F5C;
  --ref-subtle: #948783;
  --ref-line: #E8DEDB;
  --ref-accent: #7A2E2E;
  --ref-accent-strong: #652525;
  --ref-accent-soft: #F0E4E1;
}
:root[data-colorway="violet"] {
  --ref-canvas: #F3F2F8;
  --ref-surface: #FDFCFF;
  --ref-surface-soft: #F8F7FC;
  --ref-surface-strong: #E8E5F1;
  --ref-ink: #161522;
  --ref-muted: #63607A;
  --ref-subtle: #89859D;
  --ref-line: #E2DFEA;
  --ref-accent: #4A3F7A;
  --ref-accent-strong: #3D3465;
  --ref-accent-soft: #E8E5F1;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ref-canvas: #111311;
  --ref-surface: #16181A;
  --ref-surface-soft: #1D2022;
  --ref-surface-strong: #22262A;
  --ref-ink: #F7F5EF;
  --ref-muted: #A7AAAC;
  --ref-subtle: #6F7377;
  --ref-line: #2A2E31;
  --ref-accent: #C9A227;
  --ref-accent-strong: #C9A227;
  --ref-accent-soft: #332E1D;
  --ref-on-accent: #111311;
  --positive: #4FC7A8;
  --positive-soft: #183B33;
  --danger: #FF8A80;
  --danger-soft: #3A2523;
  --on-danger: #111311;   /* dark ink on the light red: 8.09:1, where white was 2.28:1 */
  --warn: #E0A250;
  --warn-soft: #3A3021;
  --ql: #8EABD0;
  --ql-soft: #242F3D;
  --shadow: none;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 15px/1.55 var(--font-body);
  text-rendering: optimizeLegibility;
}
#app { display: flex; min-height: 100vh; }

/* ---------- sidebar ---------- */
#sidebar {
  width: 240px; flex: none; background: var(--card); border-right: 1px solid var(--line);
  padding: 16px 14px; display: flex; flex-direction: column; gap: 12px;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 2px 2px 8px; cursor: pointer; user-select: none; }
.brand:hover { opacity: .85; }
.brand-mark {
  width: 34px; height: 34px; border-radius: var(--radius); background: var(--accent-strong); color: var(--on-accent);
  display: grid; place-items: center; font: 600 12px var(--font-label); letter-spacing: .08em;
}
.brand-name { font: 600 13px var(--font-label); letter-spacing: .06em; text-transform: uppercase; }
.brand-sub { font-size: 11px; color: var(--muted); }
#clientList { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.client-link {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px;
  border: 0; background: none; color: var(--ink); cursor: pointer; font: inherit;
}
.client-link:hover { background: var(--soft); }
.client-link.active { background: var(--iul-soft); color: var(--iul); font-weight: 600; }
.client-link .sub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.sidebar-foot { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }

/* ---------- main ---------- */
#main { flex: 1; min-width: 0; padding: 22px 26px 60px; }
#main.prism-product-main {
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 30px 20px 54px;
}
.page-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 {
  margin: 0; font: 700 clamp(2rem, 3.5vw, 3.25rem)/1.12 var(--font-display);
  letter-spacing: -.025em;
}
.page-head .spacer { flex: 1; }

/* ---------- shared Prism launcher rail ---------- */
.app-rail-mount { width: 100%; margin: 0 0 28px; }
.app-rail {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "brand tools appearance identity";
  align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 9px 12px;
}
.rail-brand {
  grid-area: brand; display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--ink);
}
.rail-brand:hover { opacity: .85; }
.rail-mark {
  width: 30px; height: 30px; border-radius: var(--radius); background: var(--accent-strong); color: var(--on-accent);
  display: grid; place-items: center; font: 600 12px var(--font-label); letter-spacing: .08em;
}
.rail-word { font: 600 12px var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
.rail-tiles { grid-area: tools; min-width: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.rail-tile {
  text-decoration: none; color: var(--muted); font: 500 10.5px var(--font-label);
  letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 10px; border-radius: var(--radius); border: 1px solid transparent; white-space: nowrap;
}
.rail-tile:hover { color: var(--ink); background: var(--soft); }
.rail-tile.on { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent-soft); }
.rail-tile-old::after { content: ' \2197'; font-size: .8em; opacity: .7; }
.rail-id {
  grid-area: identity; justify-self: end; min-width: 0;
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}
.rail-org { font: 600 10.5px var(--font-label); letter-spacing: .06em; text-transform: uppercase; }
.rail-who {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; color: var(--muted);
}
.rail-appearance { grid-area: appearance; display: inline-flex; align-items: center; gap: 6px; }
.rail-colorway {
  width: auto; min-width: 94px; padding: 6px 24px 6px 8px;
  font: 500 10.5px var(--font-label); letter-spacing: .04em; color: var(--muted);
  background-color: var(--card);
}
.rail-theme { min-width: 54px; font: 500 10.5px var(--font-label); letter-spacing: .04em; }

.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tab {
  border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600;
  padding: 9px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--accent-strong); border-bottom-color: var(--accent); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 16px;
}
.card h2 { font: 700 23px/1.2 var(--font-display); margin: 0 0 12px; letter-spacing: -.01em; }
.card h3 {
  font: 600 10.5px/1.2 var(--font-label); margin: 16px 0 8px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .13em;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 980px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- buttons + inputs ---------- */
.btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-weight: 600; font-size: 13.5px; padding: 8px 14px;
  border-radius: var(--radius); cursor: pointer;
}
.btn:hover { background: var(--soft); }
.btn:focus-visible, .tab:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--focus-ring);
}
.btn-primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); filter: brightness(1.08); }
.btn-ghost { border: 0; background: none; color: var(--muted); text-align: left; padding: 6px 8px; }
.btn-ghost:hover { color: var(--ink); background: var(--soft); }
.btn-sm { padding: 4px 10px; font-size: 12.5px; }
/* Destructive buttons sit in table rows a thumb-width from Edit. The flex gap that separates
   them is 6px, which is a mouse distance, not a finger one. */
.btn + .btn-danger { margin-left: 6px; }

label.field { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
label.field > span { display: block; margin-bottom: 3px; }
/* Every text-entry type has to be listed. An omitted type is a text box too, and the ones that
   used to be missing here (password above all) are exactly the ones on the sign-in gate, so the
   first screen an agent ever saw put a browser-default password box next to two styled fields.
   checkbox, radio, range and file are deliberately absent: they have their own rules below. */
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=search], input[type=url], input[type=number], input[type=date],
input:not([type]), select, textarea {
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; width: 100%;
}
textarea { min-height: 140px; font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; }
.inline-fields { display: flex; gap: 12px; flex-wrap: wrap; }
.inline-fields label.field { flex: 1; min-width: 130px; margin-bottom: 0; }

.toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; padding: 5px 0; }
.toggle input { accent-color: var(--iul); width: 15px; height: 15px; }
.toggles { display: flex; flex-wrap: wrap; gap: 4px 20px; }

input[type=range] { width: 100%; accent-color: var(--iul); }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th {
  text-align: left; font: 500 10.5px/1.2 var(--font-label); text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); padding: 9px 10px; border-bottom: 1px solid var(--ink); white-space: nowrap;
}
td { padding: 7px 10px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: right; }
.grid-edit input { border: 1px solid transparent; background: none; padding: 3px 6px; width: 100%; min-width: 84px; text-align: right; border-radius: 4px; }
.grid-edit input:hover { border-color: var(--line); }
.grid-edit input:focus { border-color: var(--iul); background: var(--card); }

/* ---------- comparison summary ---------- */
.age-slider-card { position: sticky; top: 0; z-index: 5; }
.age-readout { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.age-big { font: 700 48px/.95 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.badge { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 99px; padding: 2px 9px; }
.badge-age { background: var(--soft); color: var(--muted); }
.badge-ret { background: var(--ql-soft); color: var(--ql); }
.badge-out { background: var(--danger-soft); color: var(--danger); }
.badge-win { background: var(--iul-soft); color: var(--iul); }

.cmp-table th.col-q { color: var(--ql); }
.cmp-table th.col-i { color: var(--iul); }
.cmp-table td { font-variant-numeric: tabular-nums; }
.cmp-table .depleted td.q-cell { background: var(--danger-soft); color: var(--danger); }
.verdict { width: 22px; text-align: center; font-weight: 700; }
.verdict.win  { color: var(--iul); }
.verdict.lose { color: var(--danger); }
.verdict.tie  { color: var(--muted); }
.legend-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; margin-right: 14px; }
.legend-chip .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.chart-box { height: 260px; position: relative; }
.chart-box.tall { height: 320px; }

/* ---------- stats ---------- */
.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.stat { background: var(--card); border-radius: 0; padding: 14px 15px; min-width: 0; }
.stat .k {
  font: 500 10px/1.2 var(--font-label); text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
}
.stat .v {
  font: 700 clamp(1.75rem, 3vw, 2.45rem)/1 var(--font-display);
  font-variant-numeric: tabular-nums; margin-top: 7px; letter-spacing: -.02em;
}
.stat .v.good { color: var(--iul); }
.stat .v.bad { color: var(--danger); }
.stat .sub { font-size: 11.5px; color: var(--muted); }

/* ---------- misc ---------- */
.dropzone {
  border: 2px dashed var(--line); border-radius: var(--radius); padding: 22px;
  text-align: center; color: var(--muted); cursor: pointer;
}
.dropzone.drag { border-color: var(--iul); color: var(--iul); background: var(--iul-soft); }
/* The dropzone is the keyboard path to the file input, so it needs a focus ring of its own: the
   browser default is hard to see against a dashed border in either theme. */
.dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.issue { color: var(--danger); font-size: 13px; margin: 3px 0; }
.notice {
  background: var(--soft); border-left: 3px solid var(--accent); border-radius: 0;
  padding: 10px 14px; font-size: 13px; margin: 12px 0;
}
.event-list { font-size: 13px; }
.event-list li { margin-bottom: 4px; }
.mono { font-family: var(--font-label); font-size: .92em; }

.empty {
  text-align: center; color: var(--muted); padding: 60px 20px;
}
.empty h2 { color: var(--ink); }
.danger { color: var(--danger); }
/* .ghl-* modal styles are injected by public/js/ghl.js (self-contained module). */

/* app modals (util.js formModal) */
.pl-overlay {
  position: fixed; inset: 0; background: rgba(16, 24, 32, .45);
  display: grid; place-items: center; z-index: 60; padding: 20px;
}
.pl-modal { width: min(440px, 100%); margin: 0; }

/* slider marker rail (key ages / dates under a range input) */
.marker-rail { position: relative; height: 20px; margin-top: 2px; }
.marker {
  position: absolute; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; color: var(--muted);
}
.marker::before {
  content: ''; display: block; width: 2px; height: 6px; margin: 0 auto 1px;
  background: currentColor; border-radius: 1px;
}
.marker.m-ret { color: var(--ql); }
.marker.m-out { color: var(--danger); }
.marker.m-win { color: var(--iul); }

/* disclaimer gate */
.gate {
  max-width: 720px; margin: 30px auto;
}
.gate ol { padding-left: 20px; }
.gate li { margin-bottom: 8px; }

/* presentation mode */
body.present #sidebar { display: none; }
body.present #main { padding: 28px 48px; }
body.present .no-present { display: none !important; }
body.present { font-size: 17px; }
body.present .age-big { font-size: 44px; }

/* print report */
@media print {
  #sidebar, .no-print { display: none !important; }
  #main { padding: 0; }
  body { background: #fff; color: #111; font-size: 12px; }
  .card { box-shadow: none; break-inside: avoid; }
  .chart-box { height: 220px; }
  a { color: inherit; text-decoration: none; }
}

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

@media (max-width: 760px) {
  /* Phones, which for Prism means the GHL mobile webview. Two things only bite here, so they
     are fixed here and the desktop density is left exactly as designed.

     1. iOS Safari zooms the entire page whenever a focused field is under 16px. Prism's fields
        inherit 12.5px from label.field, so every tap into an input yanked the layout.
     2. A 27px control is a mouse target. 44px is the documented finger minimum, and these rows
        carry Delete next to Edit. */
  input, select, textarea { font-size: 16px; }
  .btn, .btn-sm, .rail-tile, .rail-theme, .tab {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  /* A select renders its own control, so only the box grows. Never make it a flex container.
     Checkbox and radio keep the explicit 15px .toggle sizing - min-height would beat it. */
  input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 44px; }
  .btn-ghost { justify-content: flex-start; }
  .btn + .btn-danger { margin-left: 14px; }

  #app { flex-direction: column; }
  #sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
  #clientList { flex-direction: row; flex-wrap: wrap; }
  #main { padding: 14px; }
  #main.prism-product-main { padding: 14px 10px 34px; }
  .app-rail-mount { margin-bottom: 20px; }
  .app-rail {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand appearance" "tools tools" "identity identity";
    gap: 9px 8px;
  }
  .rail-tiles {
    width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px; overflow: visible;
  }
  .rail-tile { text-align: center; white-space: normal; }
  .rail-appearance { justify-self: end; }
  .rail-id {
    width: 100%; justify-self: stretch; justify-content: flex-start;
    padding-top: 8px; border-top: 1px solid var(--line);
  }
  .rail-out { margin-left: auto; }
}

@media (min-width: 761px) and (max-width: 1120px) {
  .app-rail {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand appearance identity" "tools tools tools";
    gap: 9px 12px;
  }
  .rail-appearance { justify-self: end; }
}

/* ---------------------------------------------------------------- AI settings panel
   Uses the existing .pl-overlay / .pl-modal shell. Only the pieces formModal has no
   equivalent for live here: the consent note, inline status, and the destructive block. */
.ai-settings { max-width: 34rem; display: flex; flex-direction: column; gap: .65rem; }
.ai-settings h2 { margin: 0; }

.ai-note {
  background: var(--soft); border: 1px solid var(--line); border-radius: 10px;
  padding: .75rem .9rem; font-size: .875rem; color: var(--ink);
}
.ai-note p { margin: 0 0 .5rem; }
.ai-note p:last-child { margin-bottom: 0; }

.ai-hint { margin: -.25rem 0 .25rem; font-size: .8125rem; color: var(--muted); }
.ai-hint a { color: inherit; }

/* Checkbox beside its label. .field stacks; consent has to sit inline or the sentence
   reads as a heading over an unrelated control. */
.field-check {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .8125rem; color: var(--muted); line-height: 1.45;
}
.field-check input { margin-top: .2rem; flex: 0 0 auto; }

.ai-status { margin: 0; min-height: 1.25rem; font-size: .8125rem; color: var(--muted); }
.ai-status-good { color: var(--iul); }
.ai-status-bad { color: var(--danger); }

.ai-actions { display: flex; align-items: center; gap: .5rem; }

/* Set apart deliberately: this block deletes the book of business on this machine. */
.ai-danger { border-top: 1px solid var(--line); margin-top: .35rem; padding-top: .75rem; }
.ai-danger h3 { margin: 0 0 .3rem; font-size: .9375rem; }
.ai-danger p { margin: 0 0 .6rem; font-size: .8125rem; color: var(--muted); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn-danger:hover { filter: brightness(1.08); }

/* ---------------------------------------------------------------- AI story panel
   Headline and story are client-facing and stay visible in Present mode. Talking points
   and objections are notes to the agent, so they carry .no-present like every other
   backstage control. */
.story-headline { font-size: 1.15rem; font-weight: 600; margin: .75rem 0 .5rem; }
.story-aside {
  border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .75rem;
}
.story-aside h3 { font-size: .9375rem; margin: 0 0 .4rem; }
.story-aside ul { margin: 0; padding-left: 1.1rem; }
.story-aside li { margin-bottom: .3rem; }
.story-aside dt { font-weight: 600; margin-top: .5rem; }
.story-aside dd { margin: .15rem 0 0; color: var(--muted); }