/* Hallmark · shape: Worksheet · genre: editorial · theme: Loom (deal 1/3, seed rekenzorg-medisch-rekenen-oefenen-e44f·e9d2f953·2026-11-02·r0) · job: try · draw: manual
 * hero: Split, head left, live worked question right · nav: wordmark left, links and one action · footer: wordmark over links · imagery: the product, a live question · signature: one real question worked out in rows, answerable in the hero · loom: ecru, teal accent by request
 * axes: light/roman-serif/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S3 R4 V3 · weakest: V, no app screenshots yet so the product is shown by the live question; app screens return after the app redesign */
/* answered: the wordmark is set in Sora 700 as the brand logotype, read as an outlier role beside Caslon and Hanken */
/* waive 47b: accent is a teal from the existing brand (#1A6570), not the Loom indigo, by request */
@import url("./rz-shared.css");

/* hero */
.hero { padding-block: var(--space-2xl) var(--space-2xl); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 3.4vw + 1rem, 4.25rem); max-width: 12ch; margin-bottom: var(--space-lg); }
.hero .lead { margin-bottom: var(--space-xl); color: var(--color-ink-2); }

/* the worked question */
.sheet { background: var(--color-paper-2); border-top: var(--rule-ink) solid var(--color-rule-ink); padding: var(--space-lg) var(--space-lg) var(--space-lg); }
.sheet-topic { margin-bottom: var(--space-xs); }
.sheet-q { font-family: var(--font-display); font-size: var(--text-title); line-height: 1.25; letter-spacing: var(--tracking-display); margin-bottom: var(--space-lg); max-width: 34ch; }
.sheet-form { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: stretch; margin-bottom: var(--space-md); }
.sheet-form label { flex: 1 1 100%; }
.field { flex: 1 1 140px; min-width: 0; display: flex; align-items: center; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: 0; transition: border-color var(--dur-short) var(--ease-out); }
.field:focus-within { border-color: var(--color-focus); outline: 2px solid var(--color-focus); outline-offset: 2px; }
.field input { flex: 1; min-width: 0; padding: var(--space-sm) var(--space-md); border: 0; background: transparent; color: var(--color-ink); font-size: var(--text-lg); font-variant-numeric: tabular-nums; outline: none; }
.field .unit { padding-right: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.sheet-verdict { margin-bottom: var(--space-sm); font: 500 var(--text-md)/1.4 var(--font-body); }
.sheet-verdict[data-ok="true"] { color: var(--color-success); }
.sheet-verdict[data-ok="false"] { color: var(--color-error); }
.rows { margin: 0; padding: 0; list-style: none; }
.row { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.row dt { color: var(--color-muted); }
.row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.row-total { border-top: var(--rule-ink) solid var(--color-rule-ink); align-items: baseline; padding-top: var(--space-md); }
.row-total dd { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; letter-spacing: var(--tracking-display); }
.sheet-next { margin-top: var(--space-md); }

/* sections */
.section { padding-block: var(--section-gap-s); }
.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: end; margin-bottom: var(--space-xl); }
.section-head p { color: var(--color-ink-2); }

/* topics */
.topics { background: var(--color-paper); }
.topic-group { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); padding-block: var(--space-lg) var(--space-xl); }
.topic-group + .topic-group { padding-top: var(--space-lg); }
.topic-group h3 { max-width: 14ch; }
.topic-group .label { margin-top: var(--space-xs); }
.list { margin: 0; padding: 0; list-style: none; border-top: var(--rule-ink) solid var(--color-rule-ink); }
.list li { display: flex; justify-content: space-between; gap: var(--space-md); align-items: baseline; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.list a, .list .name { font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.list a:hover { border-color: var(--color-accent); }
.list .levels { color: var(--color-muted); font-size: var(--text-sm); text-align: right; }

/* levels */
.levels-band { background: var(--color-paper-2); }
.level-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-ink) solid var(--color-rule-ink); }
.level { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-lg) var(--space-lg) var(--space-xl); }
.level + .level { border-left: var(--rule-hair) solid var(--color-rule); }
.level h3 { margin-bottom: var(--space-xs); }
.level .label { margin-bottom: var(--space-md); }
.level p:not(.label) { margin-bottom: var(--space-lg); color: var(--color-ink-2); }
.level .link { margin-top: auto; }

/* also on the site */
.also .list li { padding-block: var(--space-md); }
.also .list .what { flex: 1; }
.also .list .what p { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-3xs); }

/* app band */
.band { background: var(--color-accent); color: var(--color-accent-ink); }
.band .section-head { align-items: start; margin-bottom: 0; }
.band .section-head p { color: var(--color-accent-ink); max-width: 44ch; }
.band h2 { color: var(--color-accent-ink); }
.stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.store { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-md); align-items: center; padding: var(--space-md); background: var(--color-paper); color: var(--color-ink); text-decoration: none; border: 0; transition: background-color var(--dur-short) var(--ease-out); }
.store:hover { background: var(--color-paper-2); }
.store img { width: 112px; height: 112px; background: var(--color-paper); }
.store strong { display: block; font: 500 var(--text-md)/1.3 var(--font-body); }
.store span { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); border-bottom: 0; }
.band :focus-visible { outline-color: var(--color-accent-ink); }
.band .store:focus-visible { outline-color: var(--color-accent-ink); }

@media (max-width: 60rem) {
  .hero { padding-block: var(--space-xl); }
  .hero-grid, .section-head, .topic-group { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero h1 { max-width: 14ch; }
  .level-grid { grid-template-columns: minmax(0, 1fr); }
  .level + .level { border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .stores { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .sheet { padding: var(--space-md); }
  .store { grid-template-columns: 88px minmax(0, 1fr); }
  .store img { width: 88px; height: 88px; }
  .list li { flex-direction: column; gap: var(--space-3xs); }
  .list .levels { text-align: left; }
}