/* =========================================================================
   Troutwood learning center
   The hub at /learn (the apps and games, the calculators and the books) and
   the four calculator pages it leads to.

   Additive on two layers. Tokens, primitives, the field, nav, footer and the
   router cards come from tw-system.css; the two-column ask, the panel and the
   fields come from tw-forms.css, because a calculator is the same shape as
   the demo form: a short argument on the left, something to fill in on the
   right. What is here is only what a form that answers back needs and a form
   that sends does not: the result, the steps of the crisis, the slider, and
   the formula written out.

   Organised by section, in page order.
   ========================================================================= */

/* -------------------------------------------------------------------------
   01. The way back
   The calculators are one level down from the hub, and nothing in the nav
   points at either. The trail sits where the eyebrow would, at the eyebrow's
   size, so it reads as the page's label rather than as extra chrome.
   ------------------------------------------------------------------------- */

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.crumb a {
  color: var(--sage-bright);
  text-decoration: none;
}

.crumb a:hover {
  text-decoration: underline;
}

.crumb__sep {
  opacity: 0.6;
}

/* -------------------------------------------------------------------------
   02. Hub: the toolkit
   The trust panel from tw-system.css, holding eight pieces rather than four.
   Two to a row on tablet and four from desktop, so the set always reads as
   even rows; the shared 13rem track lands on three at some widths and leaves
   two underneath.
   ------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .trust__grid--fours {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .trust__grid--fours {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------------
   03. Hub: who it serves
   The two-chair split the institutions, advisors and employers pages each
   carry, restated here for the same reason they restate it: a shared
   component across four pages is one nobody can change for one page. No
   cover image on this page, so the panel's padding is a plain clamp.
   ------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.split__panel {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

/* One lit edge per panel, the same pairing the institutions page uses: sky
   for the organisation's side, sage for the people it serves. */
.split__panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.split__panel--partner::before {
  background: linear-gradient(to right, var(--sky), rgba(90, 167, 248, 0));
}

.split__panel--participant::before {
  background: linear-gradient(to right, var(--sage), rgba(103, 188, 124, 0));
}

.split__title {
  margin-top: 1rem;
  font-size: var(--step-h2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.split__list {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
}

.split__list h4 {
  margin: 0;
  font-size: var(--step-body);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.split__list p {
  margin-top: 0.375rem;
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   04. Hub: the library
   Every way in, apps, games and books alike, as one held card: the art on a
   stage at the top, the note on it underneath, two to a row. A set rather
   than a sequence, so the reader can see the whole shelf before choosing
   from it. The calculators keep the router card, because each of those is a
   single destination and the whole card can be the link; these carry one or
   two buttons that leave the site, so the card is a surface, not a link.

   The art is the Meet Finn page's and the books' tablets, finished
   composites with their own window chrome, handsets and painted shadow. The
   stage gives them a lit ground to sit on and nothing else: no frame, no
   bezel, for the reason section 04 of tw-meet-finn.css gives.
   ------------------------------------------------------------------------- */

.library__body {
  margin-top: 1.5rem;
  font-size: var(--step-lead);
  color: var(--text-secondary);
}

.library {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 48rem) {
  .library {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The router card's surface, edge and radius, so a calculator and an app on
   the same page read as two shelves of one library. */
.entry {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* The canopy's own light, off the top of the stage: the art is lit from
   above the way a band is, rather than set on a flat tint. A fixed ratio so
   every stage in a row is the same height whatever the art's shape; the art
   is contained inside it. */
.entry__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: radial-gradient(85% 75% at 50% 20%, rgba(103, 188, 124, 0.16), transparent 72%),
    rgba(4, 12, 7, 0.28);
  border-bottom: 1px solid var(--rule);
}

.entry__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The two research screens are real app screens, not composites, so they sit
   in the `.shot--app` handset from tw-system.css. Square rather than 4:3 so a
   whole phone fits at a readable size; the two cards share a row, so the row
   stays even. Width-driven: at 40% of the stage a 2.17:1 handset lands
   inside the stage's height after padding, and two fit side by side. */
.entry__stage--phones {
  aspect-ratio: 1 / 1;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.entry__stage--phones .shot {
  flex: none;
  width: 40%;
}

/* A tablet is taller than it is wide, and at 4:3 the cover shrinks to a
   thumbnail. */
.entry__stage--book {
  aspect-ratio: 5 / 4;
}

.entry__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* What the reader does there, or the award a book won. The careers status
   line's held label, so it sits above the name instead of competing with it. */
.entry__kind {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-bright);
}

.entry__kind i {
  font-size: 0.875rem;
}

.entry__name {
  margin-top: 0.75rem;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.entry__body {
  margin-top: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* What it covers. Small held chips rather than a checklist: they are for
   scanning across the shelf, not for reading down one card. */
.entry__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.entry__tags li {
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--step-fine);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}

/* margin-top:auto, as on the router cue: cards in a row carry different
   amounts of copy, and buttons at different heights read as unrelated. */
.entry .btn-row {
  margin-top: auto;
  padding-top: 1.75rem;
}

/* The app runs the width of the grid on top, art beside the note, because it
   is the one the other four lead back to. Below 62rem it is a card like the
   rest. */
.entry--wide .entry__stage {
  aspect-ratio: 5 / 4;
}

@media (min-width: 48rem) {
  .entry--wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 62rem) {
  .entry--wide {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto;
  }

  .entry--wide .entry__stage {
    aspect-ratio: 1 / 1;
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }

  .entry--wide .entry__copy {
    justify-content: center;
    padding: clamp(2rem, 4vw, 3.5rem);
  }

  .entry--wide .btn-row {
    margin-top: 0;
  }
}

/* ---- Books -------------------------------------------------------------- */

.book__meta {
  margin-top: 0.5rem;
  font-size: var(--step-small);
  color: var(--text-tertiary);
}

/* The line on the cover, quoted. Set in the primary colour a step up from the
   body so it reads as the book speaking, not as more of the page's copy. */
.book__line {
  margin-top: 1.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--sage);
  font-size: var(--step-lead);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-wrap: pretty;
}

/* The downloads. Three small links under the buttons rather than three more
   buttons: they are for the reader who already knows they want the guide,
   and five buttons in a row would leave nothing to choose first. */
.book__files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-top: 1.25rem;
}

.book__files a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--sage-bright);
  text-decoration: none;
}

.book__files a:hover {
  text-decoration: underline;
}

.book__files i {
  font-size: 1rem;
  color: var(--text-tertiary);
}

.book__files .book__kind {
  font-weight: 400;
  color: var(--text-tertiary);
}

/* Both books are also in the app. Under the pair rather than repeated in
   each, because it is true of the series, not of either book. */
.books__note {
  max-width: var(--max-prose);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--text-secondary);
}

.books__note a {
  font-weight: 600;
}

/* The new-tab mark at button scale. Defined on the Meet Finn page too; the
   two copies are the same rule, kept identical so a button that leaves the
   site looks the same wherever it is. */
.btn__ext {
  flex: none;
  width: 11px;
  height: 11px;
  opacity: 0.75;
}

/* -------------------------------------------------------------------------
   05. Hub: the calculators
   The router card, two to a row. Four destinations in a row of three leaves
   one alone underneath, which reads as an afterthought; two by two is a set.
   ------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .router__grid--pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The router card's three rows become four: the tile goes on top. */
.router__card--calc {
  grid-template-rows: auto auto auto 1fr;
}

/* The trust panel's tile, at the same size and on the same wash, so a glyph
   means the same thing wherever it is held. */
.router__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.625rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: rgba(103, 188, 124, 0.12);
  color: var(--sage-bright);
  font-size: 1.25rem;
  line-height: 1;
}

/* What the reader brings to it. Tertiary and small: it helps someone choose
   between two cards, and is not the reason to open either. */
.router__meta {
  font-size: var(--step-fine);
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
}

/* -------------------------------------------------------------------------
   06. The panel
   The ask panel from tw-forms.css with a result under the button. The form
   keeps its own gap; the result is held off it by a rule, because it is the
   answer to the form rather than one more field in it.
   ------------------------------------------------------------------------- */

.calc__lead {
  margin-top: 0.5rem;
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* A field with a unit after it: "%" or "years". Inside the control's edge
   rather than beside it, so a row of fields keeps one width. */
.calc__affix {
  position: relative;
}

.calc__affix .form__control {
  padding-right: 3.75rem;
}

.calc__unit {
  position: absolute;
  top: 50%;
  right: 0.875rem;
  transform: translateY(-50%);
  font-size: var(--step-small);
  color: var(--text-tertiary);
  pointer-events: none;
}

/* ---- The slider ---------------------------------------------------------
   The one control here that is not a box to type into. The track is the
   field's own recessed fill and edge; the filled part and the thumb are the
   brand green, written as a gradient from the value the script keeps on
   --fill, so the slider still reads at its default with scripting off. */

.calc__range-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.calc__range-value {
  font-size: var(--step-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sage-bright);
}

.calc__range {
  --fill: 50%;
  width: 100%;
  height: 46px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.calc__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--sage) var(--fill), rgba(4, 12, 7, 0.35) var(--fill));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.calc__range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(4, 12, 7, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.calc__range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--sage);
}

.calc__range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 2px solid var(--forest-800);
  border-radius: 50%;
  background: var(--sage-bright);
  box-shadow: 0 0 14px var(--accent-glow);
  appearance: none;
  -webkit-appearance: none;
}

.calc__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--forest-800);
  border-radius: 50%;
  background: var(--sage-bright);
  box-shadow: 0 0 14px var(--accent-glow);
}

/* The base ring would square off around the whole 46px box. The thumb is the
   thing being moved, so the ring goes there. */
.calc__range:focus-visible {
  outline: none;
}

.calc__range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.calc__range:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ---- The result ---------------------------------------------------------- */

.calc__result {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* Reads like an eyebrow but is not one, for the same reason the careers
   status line is not: the panel already sits under the page's own eyebrow. */
.calc__label {
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* The number is the page. Display scale, so --sage is legal here; tabular
   figures so the count does not jitter sideways as the digits change. */
.calc__figure {
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--sage);
  overflow-wrap: anywhere;
  transition: color 300ms var(--ease);
}

/* Before the first calculation the figure is a prompt, not a number. */
.calc__figure[data-empty] {
  color: var(--text-tertiary);
}

/* The crisis, mid-drop. The form's alert tone rather than a red: the same
   warmth the site already uses for something going wrong. */
.calc__figure.is-drop {
  color: var(--alert);
}

.calc__caption {
  min-height: 1.5em;
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* The supporting numbers. A two-column list rather than a table: label left,
   figure right, so the figures line up as one column down the panel. */
.calc__facts {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.calc__fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step-small);
}

.calc__fact dt {
  color: var(--text-tertiary);
}

.calc__fact dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.calc__disclosure {
  margin-top: 0.75rem;
  font-size: var(--step-eyebrow);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
}

/* ---- The crisis, in three steps -------------------------------------------
   The count tells the story once and then it is gone. These hold it: where
   the money started, what the drop left, and where it ended up. Each lights
   as the count reaches it. */

.calc__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.calc__step {
  display: grid;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  background: rgba(4, 12, 7, 0.35);
  border: 1px solid var(--rule);
  border-radius: 10px;
  opacity: 0.45;
  transition: opacity 300ms var(--ease), border-color 300ms var(--ease);
}

.calc__step.is-on {
  opacity: 1;
}

.calc__step--drop.is-on {
  border-color: var(--alert-line);
}

.calc__step--end.is-on {
  border-color: rgba(103, 188, 124, 0.55);
}

.calc__step dt {
  font-size: var(--step-eyebrow);
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

.calc__step dd {
  margin: 0;
  font-size: var(--step-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   07. How the math works
   The formula, written the way it is computed, on the panel recipe the
   careers page uses for a held surface on a dark band.
   ------------------------------------------------------------------------- */

.math__body {
  margin-top: 1.5rem;
  font-size: var(--step-lead);
  color: var(--text-secondary);
}

.math__panel {
  max-width: var(--max-prose);
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius) + 4px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Set apart from the prose, in the brand green, and allowed to scroll on a
   phone rather than wrap mid-term: a formula broken across two lines reads
   as two formulas. */
.math__formula {
  display: block;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  font-size: var(--step-h3);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--sage-bright);
}

.math__formula + .math__formula {
  margin-top: 0.5rem;
}

.math__terms {
  display: grid;
  gap: 0.625rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.math__term {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--text-secondary);
}

.math__term dt {
  font-weight: 700;
  color: var(--text-primary);
}

.math__term dd {
  margin: 0;
}

.math__note {
  margin-top: 1.5rem;
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--text-tertiary);
}

/* -------------------------------------------------------------------------
   08. Reduced motion and print
   The count is skipped in tw-calc.js; what is left here is transitions.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .calc__figure,
  .calc__step {
    transition: none;
  }
}

@media print {
  .entry {
    break-inside: avoid;
  }

  .math__panel {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}