/* Morning Call — design system
 *
 * An editorial surface sitting on a trading product: serif for anything a
 * person reads as prose, mono for anything they read as a number, sans for
 * chrome. Colour is reserved for direction and outcome so nothing decorative
 * can be mistaken for a signal.
 */

:root {
  /* Surfaces: a soft, slightly cool off-white rather than pure #fff, so large
     areas do not glare and cards can sit a step brighter than the page. */
  --bg:          #f6f8fc;
  --bg-2:        #eaeef7;
  --surface:     #ffffff;
  --surface-2:   #f3f6fc;
  --surface-3:   #e6ecf8;
  --line:        #e0e6f1;
  --line-soft:   #edf1f8;
  --line-strong: #ccd5e5;

  --text:        #1c2437;
  --text-dim:    #59637a;
  --text-mute:   #8a94a8;
  --text-body:   #414b60;   /* prose — softer than headings, still readable */

  /* Every accent has a text-weight value, a pale fill and a border tint, so
     badges read as friendly chips instead of hard blocks of colour. */
  --accent:      #4a5fe8;
  --accent-2:    #3a4dd0;
  --accent-dim:  #edf0fe;
  --accent-line: #c9d2fa;

  --bull:        #0f9268;
  --bull-dim:    #e4f6ef;
  --bull-line:   #b3e3d0;

  --bear:        #d24545;
  --bear-dim:    #fdecec;
  --bear-line:   #f4c6c6;

  --flat:        #94a0b5;
  /* The "called" bar is deliberately neutral, but on white it still has to be
     clearly visible next to the coloured "actual" bar. */
  --pred-fill:   #d6deec;
  --pred-line:   #b2bfd6;

  --warn:        #b0770f;
  --warn-dim:    #fdf4e2;
  --warn-line:   #eedcaf;

  --radius:      14px;
  --radius-sm:   9px;
  --radius-xs:   6px;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --shadow:      0 1px 2px rgba(28,36,55,.07), 0 12px 32px rgba(28,36,55,.10);
  --shadow-card: 0 1px 2px rgba(28,36,55,.05);
}

* { box-sizing: border-box; }

/* The UA rule for [hidden] is `display: none`, which any explicit display
   value beats. Several elements here are flex containers toggled with the
   hidden attribute, so this has to win. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-2); }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up   { color: var(--bull); }
.down { color: var(--bear); }
.mute { color: var(--text-mute); }

/* =========================================================== app bar ===== */
.appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 26px;
  height: 60px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}

/* The bar needs roughly 1500px to hold everything on one row: the brand, eight
   tabs, the data-provider chip, the clock, the identity block and three
   buttons. That is more than a 1440-wide laptop has, and the shortfall only
   appears AFTER load — the provider chip is empty until a desk tab has been
   visited — so the bar was changing shape on a tab change.
   Two steps down, rather than one:

   1. Below 1500 the clock drops. It is the only decorative thing up there and
      losing it buys back ~85px, which is enough to keep one clean row on a
      normal laptop.
   2. Below 1180 even that is not enough, so the tabs take a row of their own,
      which is what the narrow layout below already does. */
@media (max-width: 1500px) {
  .clock { display: none; }
  /* Eight tabs at 14px of side padding is 620px of nav. Trimming to 11px
     costs nothing legible and buys back another ~48px, which is the
     difference between a 1440 laptop fitting on one row and not. */
  .nav button { padding: 7px 11px; }
}

@media (max-width: 1380px) {
  .appbar { height: auto; flex-wrap: wrap; gap: 10px 14px; padding: 10px 26px; }
  .nav { order: 3; width: 100%; margin-left: 0; }
}

/* Narrow screens: the bar becomes two rows (identity + actions, then nav) and
   the market clock drops — it is the one element here that is nice-to-have. */
@media (max-width: 760px) {
  .appbar {
    height: auto;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 10px 16px;
  }
  .nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  .appbar-right { gap: 8px; }
  .clock { display: none; }
  /* the date is already in the masthead, so it is redundant here */
  .brand-sub { display: none; }
  .page, .page.narrow { padding: 20px 16px 48px; }
  .masthead h1 { font-size: 27px; }
  .call { padding: 16px 16px 14px; }
  .call h3 { font-size: 19px; }
  .call-meta { margin-left: 0; width: 100%; }
}

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand svg { width: 28px; height: 28px; }
.brand-name {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: -3px;
}

/* The nav is the one part of the bar that may give way. Everything else is
   either fixed (the brand) or must stay legible at all times (the identity
   and the action buttons), so when the bar runs out of room the tab strip
   scrolls rather than the buttons deforming.

   This matters because the bar's width CHANGES after load: the provider chip
   is empty until a desk tab has been visited, and appears afterwards. Before
   this, that reveal pushed the flex row past its limit and the browser
   resolved it by wrapping the text inside the buttons — "View as member"
   became two lines, and the bar grew taller on a tab change for no reason a
   reader could see. */
.nav {
  display: flex;
  gap: 2px;
  margin-left: 8px;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav button { flex: none; white-space: nowrap; }
.nav button {
  padding: 7px 14px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13.5px;
  transition: color .12s, background .12s;
}
.nav button:hover { color: var(--text); background: var(--surface-2); }
.nav button.on { color: var(--text); background: var(--surface-3); }

.appbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Never squeezed: these are controls, and a control whose label has wrapped
     reads as broken. The nav absorbs the pressure instead. */
  flex: none;
}

/* A long display name is the other thing that can grow without warning, so
   it truncates rather than pushing the buttons. */
.whoami { min-width: 0; max-width: 200px; }
.who, .role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.clock { text-align: right; line-height: 1.25; }
.clock .state { font-size: 12px; }
.clock .state.pre  { color: var(--warn); }
.clock .state.open { color: var(--bull); }
.clock .state.shut { color: var(--text-mute); }
.clock .until { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }

.chip {
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--text-mute);
  white-space: nowrap;
}
.chip.sample { color: var(--warn); border-color: var(--warn-line); background: var(--warn-dim); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  font-size: 13.5px;
  box-shadow: var(--shadow-card);
  transition: background .12s, border-color .12s;
  /* A button is sized by its label; a wrapped label makes it two lines tall
     and the row it sits in jump. Applies everywhere, not just the appbar. */
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 550;
}
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }

.banner {
  padding: 10px 26px;
  background: var(--warn-dim);
  border-bottom: 1px solid var(--warn-line);
  color: #7a5309;
  font-size: 12.5px;
}
.banner.error {
  background: var(--bear-dim);
  border-color: var(--bear-line);
  color: #8f2b2b;
}

/* ============================================================== page ===== */
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 26px 64px;
}
.page.narrow { max-width: 820px; }

.masthead { margin-bottom: 22px; }
.masthead .eyebrow {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.masthead h1 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 6px 0 4px;
}
.masthead .dek {
  color: var(--text-dim);
  font-size: 14.5px;
  max-width: 62ch;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.seg {
  display: inline-flex;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
}
.seg button {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  padding: 5px 14px;
  border-radius: 100px;
  cursor: pointer;
  font-size: 13px;
}
.seg button.on { background: var(--surface-3); color: var(--text); }

.field {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
}
.field:focus { border-color: var(--accent); }
select.field { cursor: pointer; }

.spacer { flex: 1; }

.summary-line {
  font-size: 13px;
  color: var(--text-mute);
  font-family: var(--mono);
}

/* ============================================================== feed ===== */
.daygroup + .daygroup { margin-top: 34px; }
.daygroup > h2 {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.feed { display: flex; flex-direction: column; gap: 16px; }

.call {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 18px;
  position: relative;
  overflow: hidden;
  /* On a light page, cards need a little lift to separate from the background
     the way a darker surface did on the dark one. */
  box-shadow: var(--shadow-card);
}
.call::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--flat);
}
.call.bullish::before { background: var(--bull); }
.call.bearish::before { background: var(--bear); }

.call-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.ticker {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.ticker .sym {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ticker .co { font-size: 13px; color: var(--text-mute); }

.dir {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--flat);
}
.dir { background: var(--surface-2); }
.dir.bullish { color: var(--bull); border-color: var(--bull-line); background: var(--bull-dim); }
.dir.bearish { color: var(--bear); border-color: var(--bear-line); background: var(--bear-dim); }

.call-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-mute);
}

.conviction { display: inline-flex; align-items: center; gap: 5px; }
.conviction .dots { display: inline-flex; gap: 3px; }
.conviction i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--surface-3);
  display: block;
}
.conviction i.on { background: var(--accent); }

.call h3 {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 14px 0 10px;
  max-width: 46ch;
}

.thesis { max-width: 68ch; }
.thesis p {
  margin: 0 0 11px;
  color: var(--text-body);
  font-size: 14.5px;
  line-height: 1.62;
}
.thesis p:last-child { margin-bottom: 0; }

/* --- citations ---------------------------------------------------------
   A claim you can check. Deliberately quiet: superscript-weight, accent
   colour, no underline until hover — the prose has to stay readable with a
   dozen of these in it. */
.cite {
  display: inline-block;
  margin: 0 1px;
  padding: 0 4px;
  border: 1px solid var(--accent-line);
  border-radius: 5px;
  background: var(--accent-dim);
  color: var(--accent-2);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 1.5px;
  text-decoration: none;
  white-space: nowrap;
}
a.cite:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Computed price facts have no link — same anchor, no affordance to click. */
.cite.fact {
  border-color: var(--line-strong);
  background: var(--surface-3);
  color: var(--text-dim);
  cursor: help;
}

.sources {
  margin-top: 14px;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}
.sources summary {
  cursor: pointer;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
  list-style: none;
}
.sources summary::-webkit-details-marker { display: none; }
.sources summary::before {
  content: '▸ ';
  color: var(--text-mute);
}
.sources[open] summary::before { content: '▾ '; }
.sources summary:hover { color: var(--accent-2); }

.source-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.source-list li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 7px;
  font-size: 13px;
  line-height: 1.5;
}
.source-list .ref {
  flex: none;
  min-width: 30px;
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 600;
}
.source-list a { color: var(--accent-2); text-decoration: none; }
.source-list a:hover { text-decoration: underline; }
.source-list .src {
  color: var(--text-mute);
  font-size: 11.5px;
  white-space: nowrap;
}
.source-list .fact-text { color: var(--text-body); }
.fact-head {
  margin-top: 12px;
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.levels {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin: 16px 0 0;
  padding: 13px 0 0;
  border-top: 1px solid var(--line-soft);
}
.level .k {
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.level .v { font-family: var(--mono); font-size: 15px; margin-top: 1px; }

.call-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--text-mute);
}
.cat {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
}
.byline { font-style: italic; font-family: var(--serif); font-size: 13px; color: var(--text-dim); }

.empty {
  padding: 70px 20px;
  text-align: center;
  color: var(--text-mute);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* ==================================================== outcome / record ==== */
.verdict {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
  color: var(--text-mute);
}
.verdict.hit     { color: var(--bull); border-color: var(--bull-line); background: var(--bull-dim); }
.verdict.partial { color: var(--warn); border-color: var(--warn-line); background: var(--warn-dim); }
.verdict.miss    { color: var(--bear); border-color: var(--bear-line); background: var(--bear-dim); }
.verdict.open    { color: var(--accent-2); border-color: var(--accent-line); background: var(--accent-dim); }
.verdict.void    { color: var(--text-mute); border-color: var(--line); background: var(--surface-2); }

/* A withdrawn call stays visible — the reason is part of the record. */
.call.voided { opacity: .82; }
.call.voided::before { background: var(--flat) !important; }
.void-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text-dim);
}
.void-note b { color: var(--text); }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}
.kpi .k {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.kpi .v {
  font-family: var(--mono);
  font-size: 27px;
  letter-spacing: -0.02em;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.kpi .sub { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.kpi .meter { height: 4px; margin-top: 9px; border-radius: 100px; background: var(--bg-2); overflow: hidden; }
.kpi .meter i { display: block; height: 100%; border-radius: 100px; background: var(--accent); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 22px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.panel-head h2 {
  margin: 0;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.panel-head .note { font-size: 12px; color: var(--text-mute); margin-left: auto; }
.panel-body { padding: 16px 18px; }

.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px) { .charts { grid-template-columns: 1fr; } }
.chart-title { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.chart-sub { font-size: 11.5px; color: var(--text-mute); margin-bottom: 10px; }

/* record rows */
.record { display: flex; flex-direction: column; }
.rec {
  border-bottom: 1px solid var(--line-soft);
}
.rec:last-child { border-bottom: 0; }
.rec-main {
  display: grid;
  grid-template-columns: 146px 92px 1fr 132px 84px;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  cursor: pointer;
}
.rec-main:hover { background: var(--surface-2); }
.rec.open-row .rec-main { background: var(--surface-2); }

.rec-sym .s { font-family: var(--mono); font-weight: 600; font-size: 14px; }
.rec-sym .d { font-size: 10.5px; color: var(--text-mute); font-family: var(--mono); }

.legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-mute); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 14px; height: 6px; border-radius: 2px; display: inline-block; }
.legend i.pred { background: var(--pred-fill); border: 1px solid var(--pred-line); }

/* Capped so the bars stay dense enough to compare at a glance on wide screens. */
.pva { position: relative; height: 26px; max-width: 430px; margin: 0 auto; width: 100%; }
.pva .axis {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--line);
}
.pva .bar { position: absolute; height: 7px; border-radius: 2px; }
.pva .bar.pred { top: 2px; background: var(--pred-fill); border: 1px solid var(--pred-line); }
.pva .bar.act  { bottom: 3px; }
.pva .bar.act.pos { background: var(--bull); }
.pva .bar.act.neg { background: var(--bear); }

.rec-nums { display: flex; gap: 14px; justify-content: flex-end; }
.rec-nums div { text-align: right; }
.rec-nums .k { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); }
.rec-nums .v { font-family: var(--mono); font-size: 13px; }

.rec-detail {
  padding: 4px 18px 20px 136px;
  background: var(--surface-2);
  border-top: 1px solid var(--line-soft);
}
.rec-detail .said {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 70ch;
  margin: 10px 0 14px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
}
.rec-detail .happened {
  font-size: 13.5px;
  color: var(--text-dim);
  max-width: 70ch;
}
.rec-detail h5 {
  margin: 12px 0 0;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
}

@media (max-width: 820px) {
  .rec-main { grid-template-columns: 100px 1fr; grid-row-gap: 8px; }
  .rec-detail { padding-left: 18px; }
}

/* =========================================================== archive ===== */
.arch { display: flex; flex-direction: column; }
.arch-day {
  display: grid;
  grid-template-columns: 190px 1fr 150px 110px;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.arch-day:last-child { border-bottom: 0; }
.arch-day:hover { background: var(--surface-2); }
.arch-date { font-family: var(--serif); font-size: 16px; }
.arch-date .rel { font-family: var(--sans); font-size: 11.5px; color: var(--text-mute); display: block; }
.arch-syms { display: flex; gap: 6px; flex-wrap: wrap; }
.arch-syms span {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.arch-syms span.bullish { color: var(--bull); }
.arch-syms span.bearish { color: var(--bear); }
.ratebar { height: 5px; border-radius: 100px; background: var(--bg-2); overflow: hidden; }
.ratebar i { display: block; height: 100%; background: var(--bull); }

@media (max-width: 820px) {
  .arch-day { grid-template-columns: 1fr; }
}

/* ========================================================== composer ===== */
dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 0;
  width: min(680px, 94vw);
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(28, 36, 55, .34); backdrop-filter: blur(3px); }

.dlg-head {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.dlg-head h2 { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 600; }
.dlg-head .x {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--text-mute);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
}
.dlg-body { padding: 18px 20px; max-height: 64vh; overflow: auto; }
.dlg-foot {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--line-soft);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
label.lbl {
  display: block;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 5px;
}
.form-grid .field, .form-grid textarea { width: 100%; }
textarea.field { resize: vertical; min-height: 118px; font-family: var(--sans); line-height: 1.55; }
.hint { font-size: 11.5px; color: var(--text-mute); margin-top: 5px; }
.err { color: var(--bear); font-size: 12.5px; }

@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* ============================================================ footer ===== */
.foot {
  border-top: 1px solid var(--line-soft);
  padding: 18px 26px 34px;
  color: var(--text-mute);
  font-size: 12px;
  max-width: 1180px;
  margin: 0 auto;
}
.foot b { color: var(--text-dim); font-weight: 600; }

/* Licence attribution. Quiet, but always present — it is a contractual
   requirement, so it must not be inside anything conditional. */
.attribution {
  display: block;
  margin-top: 8px;
  color: var(--text-mute);
  font-size: 11.5px;
}
.attribution a { color: var(--text-dim); text-decoration: underline; }
.attribution a:hover { color: var(--accent-2); }

/* Two buttons side by side, wrapping rather than overflowing on a phone.
   Used by the delete-account confirmation, where the safe choice sits beside
   the destructive one. */
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Terms and Privacy. Same treatment as the attribution above, and for the
   same reason: quiet, but present on every page rather than tucked behind a
   menu. Both pages are served signed-out. */
.legal-links {
  display: block;
  margin-top: 6px;
  color: var(--text-mute);
  font-size: 11.5px;
}
.legal-links a { color: var(--text-dim); text-decoration: underline; }
.legal-links a:hover { color: var(--accent-2); }

/* The same pair under the sign-in form — the only place a signed-out visitor
   can be, and the moment they are deciding whether to hand over an address. */
.gate-legal {
  margin: 16px auto 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-mute);
}
.gate-legal a { color: var(--text-mute); text-decoration: underline; }
.gate-legal a:hover { color: var(--accent-2); }

/* --- the no-calls-today notice -------------------------------------------
 * Reads as an editorial decision, not as an error state. Deliberately unlike
 * a call card: no direction colour, no target, nothing that suggests a
 * position, because it is not one.
 */
.notice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid #94a3b8;
  border-radius: var(--radius);
  padding: 22px 26px;
}
.notice-mark {
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 10px;
}
.notice-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}
.notice-body p { margin: 0 0 12px; }
.notice-body p:last-child { margin-bottom: 0; }
.notice-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--text-mute);
}

/* --- settings ------------------------------------------------------------ */
.kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--text-dim); }
.kv b { text-align: right; }

.pending-note {
  background: #fdf3d7;
  border: 1px solid #f0dda4;
  color: #7a5b12;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
}

/* Deleting an account is the one irreversible thing a reader can do here. */
.danger-card { border-color: #fecaca; }
.danger-card .card-head { border-bottom-color: #fecaca; }
.danger-card .card-head h2 { color: #b91c1c; }
.btn.danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

/* Marks a verdict produced by the grading rule in force before 15 Sep 2026.
   Small, but present on every affected row: the alternative is a record that
   silently mixes two rules under one hit rate. */
.graded-old {
  margin-left: 2px;
  font-weight: 700;
  cursor: help;
}