/* ==========================================================================
   Theme layer.

   Loaded after style.css. Everything here is additive: it introduces the
   tabbed calculator layout, the category-coloured page header, the key
   takeaways block and the result table. Colour comes from the per-category
   --hue / --hue-wash tokens declared in style.css, so a new family needs a
   hue token and nothing else.
   ========================================================================== */

:root {
  --tab-h: 40px;
  --shadow-1: 0 1px 2px rgba(16, 22, 28, .06);
  --shadow-2: 0 6px 20px rgba(16, 22, 28, .10);
}

/* ---------- Calculator page header ---------- */

/* The header carries the method name and nothing else: no category line, no
   strapline, no badges. Everything that used to sit here is now the first
   paragraph of the Overview tab, where it can be read in context. */
.calc-head {
  max-width: none;
  padding: 0 0 .9rem;
  margin-bottom: 1rem;
  border-bottom: 3px solid var(--hue, var(--brand));
}
.calc-head h1 {
  margin: 0;
  font-size: 28px; line-height: 1.15; letter-spacing: -.02em;
  color: var(--hue, var(--ink));
}

/* ---------- Tabs (CSS only; no JavaScript required) ---------- */

.tab-radio {
  position: absolute; opacity: 0;
  width: 1px; height: 1px; margin: 0;
}

.tablist {
  display: flex; flex-wrap: wrap; gap: .25rem;
  border-bottom: 2px solid var(--line);
  margin-bottom: 1.25rem;
}

.tab {
  display: inline-flex; align-items: center;
  min-height: var(--tab-h);
  padding: 0 .95rem;
  font-size: var(--fs-small); font-weight: 600;
  color: var(--slate);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  user-select: none;
  transition: background .12s, color .12s;
}
.tab:hover { color: var(--hue, var(--brand)); background: var(--hue-wash, var(--paper)); }

.tabpanel { display: none; }

/* One rule per tab: the checked radio lights its label and shows its panel. */
#tab-overview:checked ~ .tablist .tab[for="tab-overview"],
#tab-size:checked     ~ .tablist .tab[for="tab-size"],
#tab-method:checked   ~ .tablist .tab[for="tab-method"],
#tab-examples:checked ~ .tablist .tab[for="tab-examples"],
#tab-limits:checked   ~ .tablist .tab[for="tab-limits"],
#tab-refs:checked     ~ .tablist .tab[for="tab-refs"] {
  color: #fff;
  background: var(--hue, var(--brand));
  border-color: var(--hue, var(--brand));
}

#tab-overview:checked ~ .tabpanels #panel-overview,
#tab-size:checked     ~ .tabpanels #panel-size,
#tab-method:checked   ~ .tabpanels #panel-method,
#tab-examples:checked ~ .tabpanels #panel-examples,
#tab-limits:checked   ~ .tabpanels #panel-limits,
#tab-refs:checked     ~ .tabpanels #panel-refs {
  display: block;
}

/* Keyboard focus must remain visible even though the radio itself is hidden. */
#tab-overview:focus-visible ~ .tablist .tab[for="tab-overview"],
#tab-size:focus-visible     ~ .tablist .tab[for="tab-size"],
#tab-method:focus-visible   ~ .tablist .tab[for="tab-method"],
#tab-examples:focus-visible ~ .tablist .tab[for="tab-examples"],
#tab-limits:focus-visible   ~ .tablist .tab[for="tab-limits"],
#tab-refs:focus-visible     ~ .tablist .tab[for="tab-refs"] {
  outline: 2px solid var(--ink); outline-offset: 2px;
}

/* Printing has no interactive state, so every panel is shown. */
@media print {
  .tablist { display: none; }
  .tabpanel { display: block !important; page-break-inside: avoid; }
}

.section-title {
  margin: 0 0 .9rem;
  font-size: var(--fs-h2);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: .4rem;
}
.sub-title {
  margin: 1.6rem 0 .5rem;
  font-size: var(--fs-h3); color: var(--hue, var(--brand));
}

.tab-jump { margin-top: 1.4rem; }
.tab-jump .btn-ghost { cursor: pointer; }

/* ---------- Overview: when-to-use and key takeaways ---------- */

.lede {
  font-size: 17px; line-height: 1.55; color: var(--ink);
  max-width: var(--measure); margin: 0 0 .8rem;
}
#panel-overview p { max-width: var(--measure); }

.use-list { margin: .4rem 0 0; padding-left: 1.15rem; max-width: var(--measure); }
.use-list li { margin-bottom: .4rem; font-size: var(--fs-small); color: var(--ink-2); }
.use-list strong { color: var(--hue, var(--brand)); }

.when-not {
  margin: .4rem 0 0;
  padding: .7rem .9rem;
  font-size: var(--fs-small); color: var(--ink-2);
  background: var(--rose-wash);
  border-left: 4px solid var(--rose);
  border-radius: 4px;
  max-width: var(--measure);
}

/* ---------- Key takeaways ---------- */

.takeaways {
  margin: 1.2rem 0 .4rem;
  padding: .95rem 1.1rem;
  background: linear-gradient(180deg, var(--readout-bg) 0%, var(--readout-bg-2) 100%);
  color: #e8eef8;
  border-radius: 8px;
  border-left: 6px solid var(--readout-num);
  box-shadow: var(--shadow-2);
  max-width: var(--measure);
}
.takeaways h3 {
  margin: 0 0 .55rem;
  font-size: var(--fs-h3); color: var(--readout-num); letter-spacing: .02em;
}
.takeaways ul { margin: 0; padding-left: 1.1rem; }
.takeaways li { margin-bottom: .35rem; font-size: var(--fs-small); line-height: 1.5; }
.takeaways li:last-child { margin-bottom: 0; }
.takeaways strong { color: #fff; }

/* ---------- Overview: method cards ---------- */

.method-list {
  list-style: none; margin: .6rem 0 0; padding: 0;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.method-list li {
  padding: .8rem .9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-1);
}
.method-list li.is-active {
  border-top-color: var(--hue, var(--brand));
  background: var(--hue-wash, var(--paper));
}
.method-list strong { display: block; font-size: var(--fs-small); color: var(--ink); }
.method-list li.is-active strong { color: var(--hue, var(--brand)); }
.method-list span { display: block; margin-top: .3rem; font-size: var(--fs-small); color: var(--slate); }
.method-list .mc-when { color: var(--ink-2); }
.method-list .mc-when em { font-style: normal; font-weight: 700; color: var(--hue, var(--brand)); }

/* ---------- Assumptions / adjustments ---------- */

.spec-cols .assump h3 { color: var(--indigo); }
.spec-cols .adjust h3 { color: var(--amber); }
.spec-cols ul, .spec-cols ol { margin: 0; padding-left: 1.1rem; }
.spec-cols li { font-size: var(--fs-small); margin-bottom: .3rem; }
.spec-cols p { font-size: var(--fs-small); }

/* ---------- Dashboard: category "when to use" line ---------- */

.cat-when {
  margin: -.4rem 0 1rem;
  padding: .6rem .85rem;
  font-size: var(--fs-small); color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--hue, var(--brand));
  border-radius: 4px;
  max-width: var(--measure);
}
.cat-when strong { color: var(--hue, var(--brand)); }

@media (max-width: 700px) {
  .tab { padding: 0 .7rem; font-size: 13px; }
}

/* ---------- Sample size tab ---------- */

/* Supporting figures from the calculation, shown as tiles rather than a table:
   they are read one at a time, not compared down a column. */
.figures {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  margin: .9rem 0 0;
}
.figure-tile {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .55rem .7rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--hue, var(--brand));
  border-radius: 4px;
}
.ft-label { font-size: 12px; color: var(--slate); line-height: 1.35; }
.ft-value { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--ink); }

.adjust-list { margin: .3rem 0 0; max-width: var(--measure); }
.adjust-list dt {
  font-weight: 700; font-size: var(--fs-small);
  color: var(--hue, var(--brand)); margin-top: .7rem;
}
.adjust-list dd { margin: .15rem 0 0; font-size: var(--fs-small); color: var(--ink-2); }

.quant-table {
  border-collapse: collapse; margin: .6rem 0 .8rem;
  font-size: var(--fs-small); min-width: 320px;
}
.quant-table th, .quant-table td {
  padding: .35rem .9rem .35rem 0; text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.quant-table thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--slate); border-bottom: 2px solid var(--line);
}
.quant-table tbody th { font-weight: 700; color: var(--ink); }
.quant-table .qv { font-family: var(--serif); font-weight: 700; }

.rounding {
  padding: .7rem .9rem;
  background: var(--amber-wash);
  border-left: 4px solid var(--amber);
  border-radius: 4px;
  font-size: var(--fs-small); color: var(--ink-2);
  max-width: var(--measure);
}

/* ---------- Examples tab ---------- */

.examples { list-style: none; margin: .6rem 0 0; padding: 0; counter-reset: ex; }
.examples li {
  counter-increment: ex;
  position: relative;
  padding: .85rem 1rem .85rem 2.6rem;
  margin-bottom: .7rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--hue, var(--brand));
  border-radius: 6px;
  box-shadow: var(--shadow-1);
  max-width: var(--measure);
}
.examples li::before {
  content: counter(ex);
  position: absolute; left: .85rem; top: .9rem;
  width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center;
  background: var(--hue, var(--brand)); color: #fff;
  font-family: var(--serif); font-weight: 700; font-size: 13px;
  border-radius: 50%;
}
.examples p { margin: 0 0 .35rem; font-size: var(--fs-small); color: var(--ink-2); }
.examples p:last-child { margin-bottom: 0; }
.examples .ex-obj strong { color: var(--ink); }
.examples .ex-why strong { color: var(--hue, var(--brand)); }

/* ==========================================================================
   Home page
   ========================================================================== */

.landing {
  position: relative;      /* the grid backdrop is absolute inside this box */
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 2rem;
  align-items: center;
  padding: 2.2rem 2rem;
  margin-bottom: 2rem;
  border-radius: 14px;
  background:
    radial-gradient(120% 130% at 92% 8%, var(--violet-wash) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(110% 120% at 4% 92%, var(--blue-wash) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #ffffff 0%, var(--paper) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}

.landing-kicker {
  display: inline-block; margin: 0 0 .7rem;
  padding: .15rem .7rem;
  font-size: 13px; font-weight: 700; letter-spacing: .03em;
  color: var(--blue); background: #fff;
  border: 1px solid var(--blue-wash);
  border-radius: 999px;
}

.landing-title {
  margin: 0 0 .7rem;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.06; letter-spacing: -.03em;
  color: var(--readout-bg);
}
.landing-title span {
  background: linear-gradient(90deg, var(--blue) 0%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Fallback for engines without background-clip on text. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .landing-title span { color: var(--blue); background: none; }
}

.landing-lede { margin: 0 0 1.3rem; color: var(--ink-2); max-width: 52ch; }

.landing-search { display: flex; gap: .5rem; max-width: 560px; }
.landing-search input {
  flex: 1 1 auto; min-width: 0;
  padding: .7rem .9rem;
  font-size: var(--fs-body); font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
}
.landing-search input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.landing-search .btn { border-radius: 999px; padding-left: 1.3rem; padding-right: 1.3rem; }

.landing-note { margin: .8rem 0 0; font-size: var(--fs-small); color: var(--slate); }

/* The hero sits on a plain gradient: the faint grid that used to sit behind it
   read as a rendering fault rather than as texture. */

/* ---------- Hero illustration ----------
   Light and unboxed: the curve, the formula and the parameters sit directly on
   the page. Placement is Tailwind (see home.php); this covers only what a
   utility class cannot express — the MathML type size and the print rule. */

.hero-art { position: relative; }
.hero-formula math { font-size: 21px; color: var(--violet); }
.hero-formula { pointer-events: none; }

.landing-note { margin: 1rem 0 0; font-size: var(--fs-small); color: var(--slate); }

@media (max-width: 900px) {
  .hero-art { display: none; }
}
@media print {
  .hero-art { display: none; }
}

/* ---------- All-methods list ---------- */

.list-head { margin-bottom: 1.4rem; }
.list-head h1 { margin: 0 0 .3rem; color: var(--hue, var(--ink)); }
.list-lede { margin: 0; color: var(--ink-2); max-width: 80ch; }
.list-count {
  margin: .5rem 0 0; font-family: var(--serif); font-weight: 700;
  color: var(--hue, var(--slate)); font-size: var(--fs-small);
}

.method-group { margin-bottom: 1.8rem; }
.method-group h2 {
  margin: 0 0 .5rem;
  font-size: var(--fs-h3); color: var(--hue, var(--ink));
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--hue, var(--line));
}
.method-index { list-style: none; margin: 0; padding: 0; }
.method-index li { border-bottom: 1px solid var(--line-soft); }
.method-index a {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .55rem .4rem;
  text-decoration: none; color: var(--ink);
}
.method-index a:hover { background: var(--hue-wash, var(--paper)); color: var(--hue, var(--brand)); }
.mi-no {
  min-width: 2.1rem;
  font-family: var(--serif); font-size: 15px; color: var(--slate); text-align: right;
}
.mi-name { flex: 1 1 auto; font-size: 17px; }
.mi-go { color: var(--hue, var(--brand)); opacity: 0; }
.method-index a:hover .mi-go { opacity: 1; }

/* ---------- Choose a method ---------- */

.choose { margin-bottom: 2.4rem; }
.choose-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem;
}
.choose-head h2 { margin: 0; font-size: var(--fs-h2); }
.choose-all { font-size: var(--fs-small); color: var(--slate); text-decoration: none; }
a.choose-all:hover { color: var(--brand); }

.choose-grid {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: stretch;
  /* 1fr rows rather than auto: without this each row sizes to its own tallest
     card, so the second row came out shorter than the first. */
  grid-auto-rows: 1fr;
}
.choose-card {
  display: flex; flex-direction: column; gap: .35rem;
  height: 100%;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-1);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.choose-card:hover {
  transform: translateY(-3px);
  border-color: var(--hue, var(--brand));
  box-shadow: var(--shadow-2);
}
/* The cards carry a coloured rule rather than a glyph: "x̄" and "S(t)" needed
   explaining, which is the opposite of what a category tile is for. */
.choose-card { border-top: 4px solid var(--hue, var(--brand)); }
.choose-card strong { font-size: var(--fs-body); color: var(--hue, var(--ink)); line-height: 1.25; }
.cc-sub { font-size: var(--fs-small); color: var(--slate); flex: 1 1 auto; }
.cc-foot { margin-top: auto; }   /* footers align across the row */
.cc-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small);
}
.cc-count { color: var(--slate); font-family: var(--serif); }
.cc-go { color: var(--hue, var(--brand)); font-weight: 700; }

.search-banner {
  margin: 0 0 1.2rem; padding: .6rem .9rem;
  font-size: var(--fs-small); color: var(--ink-2);
  background: var(--brand-wash);
  border-left: 4px solid var(--brand);
  border-radius: 4px;
}

/* ==========================================================================
   Typography — Times New Roman throughout, at a larger reading size
   ==========================================================================
   The base stylesheet routes all prose through --sans and all numerals through
   --serif. Redefining --sans here switches the whole application to Times in
   one place; nothing else has to change, and the numeral rules keep working. */

:root {
  --sans: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;

  --fs-body:  18px;
  --fs-small: 16px;
  --fs-h1:    26px;
  --fs-h2:    22px;
  --fs-h3:    19px;
}

body { line-height: 1.6; }

.calc-head h1 { font-size: 32px; }
.landing-lede, .hero-lede { font-size: var(--fs-body); }
.hint, .gl-range, .ft-label, .row-note { font-size: 15px; }
.tab { font-size: 17px; }
.field label { font-size: 16px; }

/* ---------- Formulas ---------- */

.formula {
  padding: 1.3rem 1.2rem;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--hue, var(--brand));
  border-radius: 6px;
  box-shadow: var(--shadow-1);
  text-align: center;
}
.formula math {
  font-size: 27px;          /* the formula is the point of the panel; it is set larger than body text */
  line-height: 1.5;
  color: var(--ink);
}
.formula figcaption {
  margin-top: .8rem;
  font-size: var(--fs-small);
  color: var(--hue, var(--slate));
  text-align: center;
  font-style: italic;
}

.glossary dt .gl-sym { font-size: 19px; }
.glossary dd { font-size: var(--fs-small); }

/* ---------- Method cards: every method carries a colour ---------- */

.method-list li {
  background: var(--hue-wash, var(--paper));
  border: 1px solid var(--line);
  border-top: 4px solid var(--hue, var(--brand));
}
.method-list li strong { color: var(--hue, var(--ink)); font-size: 17px; }
.method-list li.is-active {
  box-shadow: 0 0 0 2px var(--hue, var(--brand)) inset, var(--shadow-2);
}
/* The selected card is shown by its outline; the word "selected" beside the
   method name read as part of the method's name. */
.method-list li span + span { margin-top: .35rem; }
.method-list .mc-when em { color: var(--hue, var(--brand)); }

/* ---------- Category page hero ---------- */

.cat-hero {
  padding: 1.2rem 1.3rem;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--hue-wash) 0%, #fff 78%);
  border: 1px solid var(--line);
  border-left: 6px solid var(--hue);
}
.cat-hero h1 { color: var(--hue); }
.cat-hero-count {
  margin: .6rem 0 0; font-size: var(--fs-small);
  color: var(--hue); font-family: var(--serif); font-weight: 700;
}

#panel-method .spec-cols {
  margin-top: 1.6rem;
  /* The procedure now carries typeset expressions, so it gets the wider column. */
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}
#panel-method .spec-hyp { margin-top: 1.4rem; }
.glossary { margin-bottom: .4rem; }

/* ---------- Overview definition ---------- */

.definition {
  margin: 0 0 1rem;
  padding: .9rem 1.1rem;
  font-size: 17px; line-height: 1.65;
  color: var(--ink);
  background: var(--hue-wash, var(--paper));
  border-left: 5px solid var(--hue, var(--brand));
  border-radius: 6px;
  max-width: var(--measure);
}

/* ---------- Worked example ---------- */

.worked {
  padding: 1rem 1.15rem;
  margin-bottom: 1.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--hue, var(--brand));
  border-radius: 8px;
  box-shadow: var(--shadow-1);
  max-width: var(--measure);
}
.worked h3 { margin: 0 0 .4rem; color: var(--hue, var(--ink)); font-size: var(--fs-h3); }
.worked > p { font-size: var(--fs-small); color: var(--ink-2); margin: 0 0 .8rem; }

.worked-inputs { border-collapse: collapse; margin: 0 0 .9rem; font-size: var(--fs-small); }
.worked-inputs caption {
  text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate); padding-bottom: .3rem;
}
.worked-inputs th, .worked-inputs td {
  padding: .3rem 1.2rem .3rem 0; text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.worked-inputs th { font-weight: 400; color: var(--ink-2); }
.worked-inputs td { font-family: var(--serif); font-weight: 700; }

.worked-answer {
  display: flex; align-items: baseline; gap: .8rem;
  margin: 0 0 .6rem; padding: .6rem .9rem;
  background: linear-gradient(180deg, var(--readout-bg) 0%, var(--readout-bg-2) 100%);
  border-radius: 6px;
}
.wa-label { color: #cfd9e8; font-size: var(--fs-small); }
.wa-value { font-family: var(--serif); font-size: 27px; font-weight: 700; color: var(--readout-num); }

.worked-rows { margin: 0 0 .6rem; padding-left: 1.1rem; font-size: var(--fs-small); color: var(--ink-2); }
.worked-rows li { margin-bottom: .2rem; }
.worked-reading { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }

/* The formula panel names the method it belongs to: with several methods per
   calculator, a formula on its own does not say which one produced the number. */
.formula-for {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 .9rem; padding: .5rem .8rem;
  background: var(--hue-wash, var(--paper));
  border-left: 4px solid var(--hue, var(--brand));
  border-radius: 4px;
}
.formula-for span {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate);
}
.formula-for strong { font-size: var(--fs-small); color: var(--hue, var(--ink)); }

/* Procedure steps carry inline MathML, so they need a little more line height
   than a plain list and must not let a long expression overflow the column. */
.procedure li { margin-bottom: .55rem; line-height: 1.8; }
/* Keep a rendered expression on one line so a fraction never splits mid-symbol. */
.procedure math { display: inline-block; vertical-align: middle; }
.procedure math { font-size: 17px; }
.procedure { overflow-x: auto; }

/* The method narrative sits on the Methodology tab, under the formulas it
   explains. The Overview carries the plain-language definition and nothing
   else, so the two no longer say the same thing twice. */
.method-notes { margin-top: 1.6rem; max-width: var(--measure); }
.method-notes h3 { margin: 0 0 .5rem; font-size: var(--fs-h3); color: var(--hue, var(--ink)); }
.method-notes p { font-size: var(--fs-small); margin: 0 0 .6rem; }
.method-notes p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Consistent measure and type scale
   ==========================================================================
   Every block on a calculator page — the definition, the key takeaways, the
   method cards, the callouts, the tables, the examples — was carrying its own
   max-width, so blocks that belong to the same column ended at different
   points. They now share one measure, one padding and one border weight, and
   the type scale is fixed at 18px for every heading and 16px for body text. */

:root {
  --measure: 78rem;        /* one column width for every block on a page */
  --block-pad: .9rem 1.1rem;
  --block-radius: 6px;
  --block-rule: 4px;       /* the coloured left rule on a callout */

  --fs-body:  16px;
  --fs-small: 15px;
  --fs-h1:    22px;
  --fs-h2:    18px;
  --fs-h3:    18px;
}

/* ---------- One measure for every block ---------- */

.tabpanel > p,
.tabpanel > ul,
.tabpanel > ol,
.tabpanel > dl,
.tabpanel > table,
.definition,
.takeaways,
.use-list,
.when-not,
.rounding,
.worked,
.method-notes,
.adjust-list,
.intro-lede,
.lede,
.method-list,
.examples,
.refs,
.glossary,
.formula,
.formula-for,
.spec-hyp,
.figures,
.results,
.form,
.spec-cols,
.conclusion-box {
  max-width: var(--measure);
}

/* ---------- One shape for every callout ---------- */

.definition,
.when-not,
.rounding,
.use-when,
.cat-use,
.search-banner,
.interpretation-panel .interp-spec {
  padding: var(--block-pad);
  border-left-width: var(--block-rule);
  border-left-style: solid;
  border-radius: var(--block-radius);
  margin-bottom: 1rem;
}

.definition, .takeaways, .worked, .method-list li, .examples li {
  margin-bottom: 1rem;
}

/* ---------- One type scale ---------- */

.calc-head h1 { font-size: 26px; }
.section-title,
.sub-title,
.takeaways h3,
.worked h3,
.method-notes h3,
.spec-cols h3,
.conclusion-box h3,
.choose-head h2,
.method-group h2 {
  font-size: var(--fs-h2);
}

.definition,
.lede,
.tabpanel p,
.tabpanel li,
.tabpanel dd,
.tabpanel td,
.tabpanel th {
  font-size: var(--fs-body);
}

.hint, .gl-range, .ft-label, .row-note, .worked-inputs caption,
.method-list li.is-active strong::after {
  font-size: 13px;
}

.tab { font-size: var(--fs-body); }
.method-list li strong { font-size: var(--fs-body); }
.formula math { font-size: 24px; }
.procedure math, .method-notes math { font-size: var(--fs-body); }

/* Tables take the same measure as the blocks around them rather than shrinking
   to their content, so nothing on a page ends at a different point. */
.quant-table, .worked-inputs { width: 100%; max-width: var(--measure); }
.quant-table th:first-child, .worked-inputs th:first-child { width: 34%; }
.quant-table .qv { text-align: right; }

/* ==========================================================================
   Institutional header and footer
   ==========================================================================
   Matches the ICAR-NIVEDI Disease Simulation Portal: a light title bar with a
   logo at each end, a coloured navigation strip beneath it, and a single dark
   footer line. */

.portal-head { border-bottom: 3px solid #4c1d95; }

.portal-bar {
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.5rem;
  background: linear-gradient(180deg, #ede4fb 0%, #e3d6f9 100%);
}
.portal-logo { display: flex; align-items: center; justify-content: center; }
.portal-logo-left { justify-content: flex-start; }
.portal-logo-right { justify-content: flex-end; }
/* Sized so the header holds its shape whether or not the logo files are in
   place; if one is missing its alt text reads as a wordmark rather than as a
   broken image. */
.portal-logo img {
  height: 58px; width: auto; max-width: 100%;
  object-fit: contain;
  font-size: 13px; font-weight: 700; color: #1e3a8a;
}

.portal-title {
  margin: 0;
  text-align: center;
  font-size: 30px; font-weight: 700; letter-spacing: -.01em;
  color: #1e3a8a;
}

.portal-nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 2.6rem;
  padding: .55rem 1rem;
  background: #7c22ce;
}
.portal-nav a {
  color: #fff; text-decoration: none;
  font-size: var(--fs-body); font-weight: 700;
  padding: .1rem 0;
  border-bottom: 2px solid transparent;
}
.portal-nav a:hover,
.portal-nav a.is-current { border-bottom-color: #f6c344; }
.portal-nav a {
  color: #fff; text-decoration: none;
  font-size: var(--fs-body); font-weight: 700;
  padding: .15rem 0;
  border-bottom: 2px solid transparent;
}
.portal-nav a:hover { border-bottom-color: #f6c344; }
.portal-nav a.is-current { border-bottom-color: #f6c344; }

.portal-foot {
  padding: 1rem;
  background: #1e3a8a;
  text-align: center;
}
.portal-foot p { margin: 0; color: #fff; font-size: var(--fs-body); }

@media (max-width: 700px) {
  .portal-bar { grid-template-columns: 60px 1fr 60px; padding: .6rem .8rem; }
  .portal-title { font-size: 20px; }
  .portal-logo img { max-height: 38px; }
  .portal-nav { gap: 1.1rem; }
}

/* ---------- Result readout: the number is the answer ----------
   Scoped under .readout because the page-wide ".tabpanel p" rule that fixes body
   text at 16px is more specific than a bare class and was flattening it. */

.readout { padding: 1.4rem 1.6rem; }
.readout .readout-label {
  /* Not uppercased: the label carries the symbol n, and capitalising it turned
     "(n)" into "(N)", which is a different quantity. */
  font-size: var(--fs-body); letter-spacing: .02em;
  color: #cfd9e8; margin: 0 0 .2rem;
}
.readout .readout-value {
  font-size: 64px; line-height: 1.02; font-weight: 700;
  color: var(--readout-num);
  margin: 0;
}
.readout .readout-note, .readout .readout-error { font-size: var(--fs-body); }
.readout.is-idle .readout-value { font-size: 40px; }

/* The header title is the way back to the landing page: with the rail listing
   every method, a separate Home / All methods pair was a third navigation. */
.portal-title a { color: inherit; text-decoration: none; }
.portal-title a:hover { text-decoration: underline; }


/* ---------- Team page ---------- */

.team-head { margin-bottom: 1.6rem; }
.team-head h1 { margin: 0 0 .3rem; }

.team-role {
  margin: 2rem 0 .9rem;
  font-size: var(--fs-h2);
  color: var(--brand);
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--line);
}

.team-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 260px));
}
.team-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.4rem 1.1rem;
  background: linear-gradient(180deg, #ffffff 0%, var(--paper) 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
}
.team-photo {
  width: 150px; height: 150px;
  border-radius: 50%;
  object-fit: cover; object-position: center top;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(16, 22, 28, .18);
  margin-bottom: 1rem;
}
/* Stand-in for a member with no photo: initials rather than an empty circle. */
.team-initials {
  width: 150px; height: 150px; margin-bottom: 1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--blue), var(--violet));
  color: #fff; font-family: var(--serif); font-size: 44px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(16, 22, 28, .18);
}
.team-name { margin: 0; font-size: 20px; font-weight: 700; color: var(--ink); }
.team-title { margin: .25rem 0 0; font-size: var(--fs-small); color: var(--slate); }
.team-affil {
  margin: .2rem 0 0;
  font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em;
  color: var(--brand);
}

/* ---------- All methods' formulas, side by side ---------- */

.formula-table {
  width: 100%; max-width: var(--measure);
  border-collapse: collapse;
  margin: .6rem 0 1.4rem;
}
.formula-table thead th {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate); text-align: left;
  padding: .4rem .8rem .4rem 0;
  border-bottom: 2px solid var(--line);
}
.formula-table td, .formula-table tbody th {
  padding: .7rem .8rem .7rem 0;
  border-bottom: 1px solid var(--line-soft);
  text-align: left; vertical-align: middle;
}
.formula-table tbody th { width: 34%; font-weight: 700; color: var(--ink); }
.formula-table .ft-formula { overflow-x: auto; }
.formula-table .ft-formula math { font-size: 19px; }
/* The row for the method currently selected in the form. */
.formula-table tr.is-current { background: var(--hue-wash, var(--paper)); }
.formula-table tr.is-current th { color: var(--hue, var(--brand)); }

/* Supporting definitions sit under the requirement as plain lines: they are the
   pieces the formula is built from, not alternatives to it. */
/* Applied after the method's own calculation — the finite population
   correction, and the statement of which quantile the cards were evaluated
   with. Plain lines, so they do not read as further formulas. */
.formula-after { list-style: none; margin: -.4rem 0 1.4rem; padding: 0; max-width: var(--measure); }
.formula-after li {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .9rem;
  padding: .5rem 0 .5rem 1.1rem;
  border-left: 3px solid var(--line);
}
.formula-after math { font-size: 19px; color: var(--ink); }
.formula-after span { font-size: var(--fs-small); color: var(--slate); font-style: italic; }

.formula-sides {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .9rem;
  margin: -.4rem 0 1.4rem;
  padding: .55rem 0 .55rem 1.1rem;
  max-width: var(--measure);
  border-left: 3px solid var(--line);
}
.formula-sides math { font-size: 19px; color: var(--ink); }
.formula-sides span { font-size: var(--fs-small); color: var(--slate); font-style: italic; }

/* ---------- Formula card ----------
   A formula anywhere outside the main panel sits on its own white card, so it
   reads as a formula rather than as table content. Used by the method
   comparison table; the shape matches .formula, one step smaller. */

.formula-card {
  display: block;
  padding: .7rem .9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--block-radius);
  box-shadow: var(--shadow-1);
  text-align: center;
  overflow-x: auto;
}
.formula-card math { font-size: 21px; color: var(--ink); }

/* In the comparison table the cell is just a container for that card. */
.formula-table .ft-formula { padding-right: 0; }
.formula-table tr.is-current .formula-card { border-color: var(--hue, var(--brand)); }