/* ============================================================================
   The model page. Additions only; every colour, radius, spacing step and type
   size comes from the tokens in site.css.

   Two things here are load-bearing rather than decorative:
   1. The range inputs have to beat `.field input`, which frames every input
      with a 2px border. Without `border: 0` a slider renders as a text box
      with a thumb loose inside it.
   2. The gate is an overlay on already-rendered content, not a swap. The
      numbers behind it are computed and correct before anyone fills the form,
      so unlocking is a class change and never a recalculation.
   ============================================================================ */

.mdl-grid { margin-top: var(--s5, 48px); gap: var(--s4, 32px) var(--s5, 48px); }
.mdl-grid .field { margin-bottom: 0; }

/* Numeric fields read as numbers, not as prose. */
.mdl-grid input[type="number"] {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-head); font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------- systems in scope */

.mdl-systems {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--s3, 24px); margin-top: var(--s5, 48px);
}
.mdl-sys {
  display: grid; grid-template-columns: 26px minmax(0, 1fr);
  grid-template-areas: "box title" ". desc";
  gap: 4px var(--s2, 16px);
  background: #FFFFFF; border: 1px solid var(--rule, #D2DEE7);
  border-left: 4px solid var(--rule, #D2DEE7);
  border-radius: var(--radius, 4px);
  padding: var(--s3, 24px); cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.mdl-sys:hover { border-color: var(--accent-hi, #0B7A82); }
.mdl-sys:has(input:checked) { border-left-color: var(--accent, #07595F); background: var(--tint-2, #EAF4F4); }
.mdl-sys:has(input:focus-visible) { outline: 3px solid var(--accent-hi, #0B7A82); outline-offset: 2px; }
.mdl-sys input {
  grid-area: box; width: 22px; height: 22px; margin: 3px 0 0;
  accent-color: var(--accent, #07595F); cursor: pointer;
}
.mdl-sys-t {
  grid-area: title; font-family: var(--font-head); font-weight: 700; font-size: 18px;
  color: var(--navy, #0E2A45); line-height: 1.3;
}
.mdl-sys-d { grid-area: desc; font-size: 15.5px; line-height: 1.5; color: var(--ink-muted, #4E6377); }
.mdl-sys-3p {
  display: inline-block; font-family: var(--font-body); font-weight: 700;
  font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  background: #F6EDDC; color: var(--gold, #B07A1E);
  padding: 2px 8px; border-radius: 100px; vertical-align: 2px; margin-left: 6px;
}
.mdl-sysnote {
  margin-top: var(--s4, 32px); font-size: 16px; font-weight: 700;
  color: var(--accent, #07595F);
}

/* ----------------------------------------------------------- sample button */

.mdl-diceRow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s3, 24px); margin-top: var(--s5, 48px);
}
.mdl-diceRow .btn { min-width: 0; min-height: 50px; font-size: 16px; }
.mdl-dicehint {
  font-size: 15px; line-height: 1.5; color: var(--ink-muted, #4E6377); max-width: 46ch;
}

/* ---------------------------------------------------------------- presets */

.mdl-presets { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s5, 48px); }
.mdl-preset { min-width: 0; min-height: 50px; font-size: 16px; padding-inline: var(--s3, 24px); }
.mdl-preset.is-on {
  background: var(--navy, #0E2A45); border-color: var(--navy, #0E2A45); color: #FFFFFF;
}
@media (max-width: 560px) { .mdl-preset { width: auto; flex: 1 1 30%; } }

/* --------------------------------------------------------------- sliders */

.mdl-assume {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s5, 48px); margin-top: var(--s6, 64px);
}
.mdl-assume .field { margin-bottom: 0; }
.mdl-assume label {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s2, 16px); margin-bottom: var(--s2, 16px);
}
.mdl-assume .unit {
  font-family: var(--font-head); font-weight: 800; font-size: 26px;
  color: var(--accent, #07595F); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em; white-space: nowrap;
}

/* `border: 0` beats .field input, which frames every input. Without it a range
   renders inside a 2px box and reads as a broken text field. */
.mdl-assume input[type="range"] {
  width: 100%; height: 44px; min-height: 0; margin: 0; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.mdl-assume input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 100px; background: var(--rule, #D2DEE7);
}
.mdl-assume input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 100px; background: var(--rule, #D2DEE7);
}
.mdl-assume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%; margin-top: -10px;
  background: var(--accent, #07595F); border: 3px solid #FFFFFF;
  box-shadow: 0 1px 5px rgba(8, 25, 42, .3);
}
.mdl-assume input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent, #07595F); border: 3px solid #FFFFFF;
  box-shadow: 0 1px 5px rgba(8, 25, 42, .3);
}
/* A lever whose system is switched off is dead, and it has to look dead. */
.mdl-assume .field[data-off="true"] { opacity: .42; }
.mdl-assume .field[data-off="true"] input[type="range"] { pointer-events: none; }

/* --------------------------------------------------------------- advanced */

.mdl-adv { border-top: 1px solid var(--rule, #D2DEE7); border-bottom: 1px solid var(--rule, #D2DEE7); margin-top: var(--s6, 64px); }
.mdl-adv summary {
  cursor: pointer; list-style: none; padding: var(--s4, 32px) 44px var(--s4, 32px) 0;
  position: relative; font-family: var(--font-head); font-weight: 700; font-size: 19px;
  color: var(--navy, #0E2A45);
}
.mdl-adv summary::-webkit-details-marker { display: none; }
.mdl-adv summary::after {
  content: ""; position: absolute; right: 8px; top: calc(var(--s4, 32px) + .5em);
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--accent-hi, #0B7A82);
  border-bottom: 2.5px solid var(--accent-hi, #0B7A82);
  transform: translateY(-40%) rotate(45deg); transition: transform 160ms ease;
}
.mdl-adv[open] summary::after { transform: translateY(-10%) rotate(-135deg); }
.mdl-advbody { padding-bottom: var(--s5, 48px); }
.mdl-advbody .lede { font-size: 17.5px; }

/* --------------------------------------------------------------- headline */

.mdl-headline { margin-top: var(--s6, 64px); }
.mdl-headline .bignum { font-variant-numeric: tabular-nums; }
.mdl-plain {
  margin-top: var(--s6, 64px); padding: var(--s4, 32px);
  background: rgba(255, 255, 255, .08); border-left: 4px solid #7FD0D6;
  border-radius: 0 var(--radius, 4px) var(--radius, 4px) 0;
  font-size: 17px; line-height: 1.6; color: #E4EEF4 !important; max-width: 74ch;
}

/* ------------------------------------------------------------ the ledger */

.mdl-ledger { margin-top: var(--s5, 48px); }
.mdl-cap {
  caption-side: top; text-align: left; font-size: 15px; line-height: 1.5;
  color: var(--ink-muted, #4E6377); padding-bottom: var(--s3, 24px); max-width: 62ch;
}
.mdl-ledger td:first-child { width: 42%; }
.mdl-ledger td:nth-child(2) { width: 26%; color: var(--ink-muted, #4E6377); font-size: 16px; }
.mdl-ledger td:last-child {
  width: 32%; text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--font-head); font-weight: 700; color: var(--navy, #0E2A45);
}
.mdl-ledger tfoot td { border-bottom: 0; border-top: 2px solid var(--navy, #0E2A45); font-size: 19px; }
.mdl-ledger tfoot td:last-child { color: var(--accent, #07595F); }

/* Phones: the three-column ledger becomes stacked rows. The desktop widths
   above are on td selectors and would otherwise outrank a bare media query
   rule, so every one of them is re-stated here. */
@media (max-width: 700px) {
  .mdl-ledger td:first-child, .mdl-ledger td:nth-child(2), .mdl-ledger td:last-child {
    width: 100%; text-align: left;
  }
  .mdl-ledger td:nth-child(2)::before { content: "Assumption: "; font-weight: 700; }
  .mdl-ledger td:last-child { font-size: 21px; padding-top: 6px; }
  /* One bar under the whole foot row, not three unequal ones under each cell. */
  .mdl-ledger tfoot td { border-top: 0; }
  .mdl-ledger tfoot tr {
    border-top: 2px solid var(--navy, #0E2A45); border-bottom: 0;
    margin-top: var(--s2, 16px); padding-top: var(--s3, 24px);
  }
  .mdl-ledger tfoot td:nth-child(2) { display: none; }
  .mdl-formulas td:first-child, .mdl-formulas td:last-child { width: 100%; }
}

.mdl-formulas { margin-top: var(--s4, 32px); }
.mdl-formulas td:first-child { width: 38%; font-family: var(--font-head); font-weight: 700; color: var(--navy, #0E2A45); }
.mdl-formulas td:last-child { color: var(--ink-muted, #4E6377); font-size: 16px; }

/* ----------------------------------------------------------------- tiles */

.mdl-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s3, 24px); margin-top: var(--s6, 64px);
}
.mdl-tile {
  background: var(--tint-1, #F3F7FA); border-radius: var(--radius, 4px);
  border-top: 4px solid var(--accent, #07595F);
  padding: var(--s4, 32px);
}
.mdl-tile-lab {
  margin: 0 0 var(--s2, 16px); font-family: var(--font-head); font-weight: 700;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent, #07595F);
}
.mdl-tile-num {
  margin: 0; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(26px, 3.4vw, 36px); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--navy, #0E2A45); font-variant-numeric: tabular-nums;
}
.mdl-tile[data-empty="true"] { border-top-color: var(--rule, #D2DEE7); }
.mdl-tile[data-empty="true"] .mdl-tile-num { color: var(--ink-muted, #4E6377); }
.mdl-feenote {
  margin-top: var(--s3, 24px); font-size: 15.5px; line-height: 1.55;
  color: var(--ink-muted, #4E6377); max-width: 66ch;
}
.mdl-feenote[hidden] { display: none; }

/* ------------------------------------------------------------- the gate
   An overlay on rendered content, not a content swap. Everything behind it is
   already computed, so unlocking is one class change with no recalculation and
   nothing to get out of step.

   `inert` is set by script alongside data-locked, so the hidden numbers are
   out of the tab order and out of the accessibility tree while covered. */
.mdl-lockwrap { margin-top: var(--s5, 48px); }

/* Both children share ONE grid cell, so the wrapper is as tall as the taller of
   them. An absolutely positioned gate looked right until the card grew past the
   620px preview and its buttons were clipped off the bottom, which is exactly
   what a render at 1440 caught. */
.mdl-lockwrap[data-locked="true"] { display: grid; overflow: hidden; }
.mdl-lockwrap[data-locked="true"] > .mdl-locked,
.mdl-lockwrap[data-locked="true"] > .mdl-gate { grid-area: 1 / 1; }

.mdl-lockwrap[data-locked="true"] .mdl-locked {
  filter: blur(7px); opacity: .45; user-select: none; pointer-events: none;
  max-height: 620px; overflow: hidden;
}
.mdl-lockwrap[data-locked="false"] .mdl-gate { display: none; }

.mdl-gate {
  z-index: 2; align-self: center; justify-self: center;
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: var(--s5, 48px) 0;
}
.mdl-gate-card {
  width: 100%; max-width: 640px;
  background: #FFFFFF; border: 1px solid var(--rule, #D2DEE7);
  border-top: 5px solid var(--accent, #07595F);
  border-radius: var(--radius, 4px);
  padding: var(--s5, 48px);
  box-shadow: 0 24px 60px rgba(8, 25, 42, .18);
}
.mdl-gate-card h3 { margin: var(--s3, 24px) 0 var(--s2, 16px); }
.mdl-gate-card > p { color: var(--ink-muted, #4E6377); }
.mdl-gate-card .mdl-grid { margin-top: var(--s4, 32px); }
.mdl-gate-card .btn { min-width: 0; }
@media (max-width: 560px) {
  .mdl-gate-card { padding: var(--s4, 32px); }
  .mdl-lockwrap[data-locked="true"] .mdl-locked { max-height: 760px; }
}

.mdl-unlocked-note {
  margin-top: var(--s3, 24px); font-size: 16px; font-weight: 700;
  color: var(--accent, #07595F);
}