/* ═══ delegate + calculator — page-specific layout ════════════════════════
   Loaded after /style.css on /delegate and /calculator. Consumes the shared
   tokens (BRIEF §1); never redefines them and never restates a shared
   component (BRIEF §5.2).

   Two things live here that the rest of the site does not have: a guided
   transaction flow whose numbered steps each carry their own live control,
   and the rewards calculator's form/output layout.                          */

/* ── the live case: the shared `.record` plate (BRIEF §2.3), modified ──────────
   Everything structural — the 3px ink top rule, the paper, the radius, the card
   shadow, `.record-label`, `.record-figure`, `.record-foot` — comes from style.css.
   `.dg-record` only states the two things this instance genuinely does differently:
   the lead figure sits *beside* its rows (five equal cells gave the APR, the number
   a delegator acts on, the same weight as availability), and each row carries a
   magnitude meter on a fixed 0–100% domain.                                     */
.dg-record {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  margin: var(--s5) 0 0;
}
.dg-record .record-lead { border-right: 1px solid var(--rule); border-bottom: none; }
.dg-record .record-figure { margin: var(--s2) 0 var(--s3); font-size: clamp(2.6rem, 5vw, 3.4rem); }
.dg-record-sub { margin: 0; font-size: 0.86rem; color: var(--ink-3); max-width: 46ch; }
.dg-record-sub b { color: var(--ink-2); font-weight: 600; }
/* the foot spans both columns — it is the plate's provenance, not the rows' */
.dg-record .record-foot { grid-column: 1 / -1; }

/* rows stack down the right-hand column instead of sitting three-up, and read
   label-over-figure because each figure is followed by its meter */
.dg-record-rows { grid-template-columns: 1fr; align-content: start; }
.dg-mrow {
  flex-direction: column; gap: .35rem;
  padding: var(--s4) var(--s5);
  border-right: none; border-bottom: 1px solid var(--rule);
}
.dg-mrow:last-of-type { border-bottom: none; }
.dg-mrow dt {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.dg-mrow dd { margin: 0; display: flex; align-items: center; gap: var(--s4); white-space: normal; }
.dg-mrow dd b {
  font-family: var(--font-display); font-size: 1.42rem; font-weight: 600;
  line-height: 1; color: var(--ink); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  flex: 0 0 auto; min-width: 5.6rem;
}
.dg-mnote { font-size: 0.78rem; color: var(--ink-4); }
/* the anomaly semantics (§2.5) must survive this file: `.bad`/`.warn` are a single
   class and lose to `.dg-mrow dd b` on specificity, which would silently disarm the
   flag rather than fail loudly. */
.dg-mrow dd b.bad { color: var(--neg); }
.dg-mrow dd b.warn { color: var(--caution); }
/* magnitude rule, fixed 0–100% domain (BRIEF §2.4) */
.dg-meter {
  flex: 1 1 auto; min-width: 60px; height: 3px;
  background: var(--paper-sunk); border-radius: 1px; overflow: hidden;
}
.dg-meter i { display: block; height: 100%; background: var(--accent-bright); }
@media (max-width: 860px) {
  .dg-record { grid-template-columns: 1fr; }
  .dg-record .record-lead { border-right: none; border-bottom: 1px solid var(--rule); }
}
/* the shared 460px rule re-columns `.record-rows` to 1fr 1fr; these rows are a
   single stack at every width, so it is opted out of explicitly */
@media (max-width: 460px) {
  .dg-record-rows { grid-template-columns: 1fr; }
  .dg-mrow:nth-child(2n) { border-right: none; }
  .dg-mrow:last-of-type:nth-child(odd) { grid-column: auto; border-bottom: none; }
}

.dg-case-note {
  max-width: var(--measure);
  margin: var(--s4) 0 0;
  font-size: 0.88rem;
  color: var(--ink-3);
}

/* ── the guided flow ───────────────────────────────────────────────────── */
/* the shared .dg wrapper is capped at 720px for the old single-column widget;
   the flow now owns the full measure and splits it into procedure + reference. */
.dg { max-width: none; }

.dg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(290px, 0.85fr);
  gap: var(--s6) var(--s7);
  align-items: start;
}
@media (max-width: 980px) {
  .dg-grid { grid-template-columns: 1fr; gap: var(--s5); }
}

.dg-flow {
  margin: 0; padding: 0; list-style: none; counter-reset: dgstep;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2);
  box-shadow: var(--shadow-card);
}
.dg-step {
  counter-increment: dgstep;
  position: relative;
  padding: var(--s5) var(--s5) var(--s5) calc(var(--s5) + 2.5rem);
  border-bottom: 1px solid var(--rule);
}
.dg-step:last-child { border-bottom: none; }
.dg-step::before {
  content: counter(dgstep, decimal-leading-zero);
  position: absolute; left: var(--s5); top: var(--s5);
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  line-height: 1.35; color: var(--accent);
  font-variant-numeric: tabular-nums lining-nums;
}
.dg-step h3 {
  margin: 0 0 var(--s2); font-size: var(--fs-h3);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
}

/* live state, written onto the step by /delegate.js once the chain has answered */
.dg-state {
  font-family: var(--font-text); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4);
  font-variant-numeric: tabular-nums lining-nums;
}
.dg-state:empty { display: none; }
.dg-state.is-done { color: var(--pos); }
.dg-step.is-done { background: var(--paper-3); }
.dg-step.is-done::before { color: var(--pos); }
.dg-step p { margin: 0; max-width: 60ch; font-size: 0.95rem; color: var(--ink-2); }
@media (max-width: 560px) {
  .dg-step { padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 2.2rem); }
  .dg-step::before { left: var(--s4); top: var(--s4); }
}

/* controls that belong to a step */
.dg-control {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--s3) var(--s4);
  margin: var(--s4) 0 var(--s3);
}
.dg-field { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 200px; min-width: 0; }
.dg-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-4);
}
.dg-field input, .dg-field select { width: 100%; }
.dg-control button { flex: 0 0 auto; }
.dg-control .dg-status { flex: 1 1 14rem; margin: 0; }

/* a disabled control explains itself rather than disappearing — so it has to stay
   readable: --ink-3, not the --ink-4 floor */
.dg-step button:disabled,
.dg-step button:disabled:hover {
  background: var(--paper-3); color: var(--ink-3);
  border-color: var(--rule-2); cursor: not-allowed;
}
.dg-step input:disabled, .dg-step select:disabled {
  background: var(--paper-3); color: var(--ink-3); cursor: not-allowed;
}

.dg-note { margin: 0 0 var(--s3); font-size: 0.84rem; color: var(--caution); max-width: 60ch; }
.dg-note:empty { display: none; }
.dg-alt {
  margin: var(--s3) 0 0; padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: 0.83rem; color: var(--ink-3); max-width: 62ch;
}
.dg-step p.dg-alt { font-size: 0.83rem; color: var(--ink-3); }
.dg-alt code { font-size: 0.74rem; }

/* ── the reference rail ────────────────────────────────────────────────── */
.dg-rail { display: grid; gap: var(--s5); position: sticky; top: calc(var(--header-h) + var(--s4)); }
@media (max-width: 980px) { .dg-rail { position: static; } }

.dg-panel {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2); padding: var(--s4) var(--s5);
}
.dg-disclosure { background: var(--paper-3); }
.dg-panel-h {
  margin: 0 0 var(--s3);
  font-family: var(--font-text); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3);
}
.dg-facts { margin: 0; display: grid; gap: var(--s3); }
.dg-facts dt {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: .25rem;
}
.dg-facts dd { margin: 0; font-size: 0.86rem; color: var(--ink-2); }
.dg-facts code { word-break: break-all; }
.dg-check { margin: 0; padding: 0 0 0 1.1rem; }
.dg-check li { margin: 0 0 .4rem; font-size: 0.86rem; color: var(--ink-2); line-height: 1.5; }
.dg-check li::marker { color: var(--accent); }
.dg-panel-note {
  margin: var(--s4) 0 0; padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: 0.82rem; color: var(--ink-3);
}
#dg-widget p, #dg-current p { font-size: 0.88rem; }
#dg-current ul { margin: var(--s2) 0 0; font-size: 0.84rem; }

/* ── the calculator ────────────────────────────────────────────────────── */
/* .calc-* layout rules live in public/style.css — CalculatorWidget is shared
   across /calculator, /delegate and /learn/reward-simulator (see
   CSS-REQUESTS-delegate.md §2). Only the delegate-specific lede stays here. */
.dg-calc-lede { max-width: var(--measure); font-size: 0.94rem; color: var(--ink-2); margin: 0; }

/* ── the FAQ ───────────────────────────────────────────────────────────── */
/* four questions, so the grid is fixed 2-up: auto-fit resolves to three columns at
   this width and leaves two ruled empty cells in row two. */
.faq {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2); overflow: hidden;
}
.faq-item {
  padding: var(--s5);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.faq-item:nth-child(2n) { border-right: none; }
.faq-item:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 820px) {
  .faq { grid-template-columns: 1fr; }
  .faq-item { border-right: none; border-bottom: 1px solid var(--rule); }
  .faq-item:last-child { border-bottom: none; }
}
.faq-item h3 { margin: 0 0 var(--s2); font-size: var(--fs-h3); }
.faq-item p { margin: 0; font-size: 0.94rem; color: var(--ink-2); max-width: 62ch; }
.faq-item .callout { margin: var(--s4) 0 0; padding: var(--s3) var(--s4); font-size: 0.88rem; }
.dg-closing { margin-top: var(--s6); }

/* ── the second stream: staking ─────────────────────────────────────────────
   Delegation keeps the lead; this section is deliberately a two-column brief —
   prose on the left, the live rank device in the same `.dg-panel` the rail uses,
   on the right — so it reads as an addition to the page, not a rival flow. */
.dg-stake { margin-top: var(--s8); }
.dg-stake-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--s6); align-items: start;
}
.dg-stake-prose p { margin: 0 0 var(--s4); font-size: 0.94rem; color: var(--ink-2); max-width: 62ch; }
.dg-stake-how { margin: 0; max-width: 62ch; }
.dg-stake-rank .record-label { display: block; margin-bottom: var(--s2); }
.dg-stake-figure {
  margin: 0 0 var(--s4);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.5rem); font-weight: 600; line-height: .95;
  letter-spacing: -0.032em; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.dg-stake-figure .of {
  font-family: var(--font-text); font-size: 0.8rem; font-weight: 500;
  letter-spacing: .01em; color: var(--ink-3);
}
/* the three APR figures read as one register: cells divided by their own
   hairlines, our own flagged with the §2.4 inset accent rule */
.dg-stake-facts {
  gap: 0; margin-top: var(--s4);
  border-top: 1px solid var(--rule-2);
}
.dg-stake-facts > div {
  display: flex; flex-direction: column-reverse; gap: .25rem;
  padding: var(--s3) 0 var(--s3) var(--s3);
  border-bottom: 1px solid var(--rule);
}
/* the panel note draws its own top rule, so a bottom rule on the last figure
   leaves a hairline pair with nothing between them — an empty ruled row */
.dg-stake-facts > div:last-child { border-bottom: none; }
.dg-stake-facts > div:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.dg-stake-facts > div:first-child dt { color: var(--accent-deep); }
html.dark .dg-stake-facts > div:first-child dt { color: var(--accent); }
.dg-stake-facts dd {
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 600;
  line-height: 1; letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.dg-stake-facts dd b { font-weight: 600; }
@media (max-width: 980px) {
  .dg-stake-grid { grid-template-columns: 1fr; gap: var(--s5); }
}