/* ==========================================================================
   K03 Typography — page styles
   Families, fluid type scale specimen, registers, numerals and measure.
   ========================================================================== */

/* ── 03.1 Families ──────────────────────────────────────────────────────── */

.family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
  overflow: hidden;
}

.family {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
}
.family:not(:last-child) { border-right: 1px solid var(--ink-a10); }

.family__meta {
  display: flex;
  justify-content: space-between;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.family__glyph--sans  { font: 500 128px/.9 'Geist', sans-serif; letter-spacing: -.05em; }
.family__glyph--serif { font: italic 400 136px/.86 'Instrument Serif', serif; }
.family__glyph--mono  { font: 400 112px/.96 'Geist Mono', monospace; letter-spacing: -.04em; }

.family__about {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.family__name { font: 500 22px/1.2 'Geist', sans-serif; }

.family__text {
  font: 400 14px/1.5 'Geist', sans-serif;
  color: var(--graphite-600);
}

.family__weights {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font: 400 13px/1 'Geist', sans-serif;
  color: var(--graphite-600);
}
.family__weights--serif { font: 400 16px/1 'Instrument Serif', serif; }
.family__weights--mono  { font: 400 13px/1 'Geist Mono', monospace; }

.family__weight--300 { font-weight: 300; }
.family__weight--400 { font-weight: 400; }
.family__weight--500 { font-weight: 500; }
.family__weight--600 { font-weight: 600; }

/* ── 03.2 Fluid scale ───────────────────────────────────────────────────── */

.type-scale__viewport {
  font: 400 13px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
}

.type-scale {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-a08);
}

.type-scale__row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--ink-a08);
}

.type-scale__spec {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 400 12px/1.4 'Geist Mono', monospace;
  color: var(--graphite-500);
}

.type-scale__name {
  font: 500 14px/1.2 'Geist', sans-serif;
  color: var(--graphite-900);
}

.type-scale__now { color: var(--scrub-600); }

.type-scale__sample {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  text-wrap: pretty;
}

/* One modifier per step of the scale — sizes come straight from tokens.css */
.type-scale__sample--display-xxl  { font-size: var(--text-display-xxl); line-height: .94; letter-spacing: -.045em; }
.type-scale__sample--display-xl   { font-size: var(--text-display-xl);  line-height: .96; letter-spacing: -.04em; }
.type-scale__sample--display-l    { font-size: var(--text-display-l);   line-height: 1;   letter-spacing: -.035em; }
.type-scale__sample--serif-accent {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(43px, 24.2px + 4.3vw, 91px); /* 1.08 × display-l */
  line-height: .95;
  letter-spacing: -.02em;
}
.type-scale__sample--h1           { font-size: var(--text-h1); line-height: 1.05; letter-spacing: -.03em; }
.type-scale__sample--h2           { font-size: var(--text-h2); line-height: 1.1;  letter-spacing: -.025em; }
.type-scale__sample--h3           { font-size: var(--text-h3); line-height: 1.2;  letter-spacing: -.02em; }
.type-scale__sample--h4           { font-size: var(--text-h4); line-height: 1.3;  letter-spacing: -.01em; }
.type-scale__sample--lead         { font-size: var(--text-lead);         font-weight: 400; line-height: 1.5; }
.type-scale__sample--body-patient { font-size: var(--text-body-patient); font-weight: 400; line-height: 1.65; }
.type-scale__sample--body         { font-size: var(--text-body);         font-weight: 400; line-height: 1.6; }
.type-scale__sample--small        { font-size: var(--text-small);        font-weight: 400; line-height: 1.5; }
.type-scale__sample--caption {
  font-family: 'Geist Mono', monospace;
  font-size: var(--text-caption);
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── 03.3 Pairing by register ───────────────────────────────────────────── */

.register-grid,
.guidance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.register {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
}

.register__label {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.register__headline {
  font: 500 34px/1.05 'Geist', sans-serif;
  letter-spacing: -.03em;
}
.register__headline--patient {
  font: 400 40px/1.02 'Instrument Serif', serif;
  letter-spacing: -.01em;
}

.register__accent {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: -.01em;
}

.register__text {
  margin: 0;
  font: 400 16px/1.6 'Geist', sans-serif;
  color: var(--graphite-750);
}
.register__text--patient { font-size: 18px; }

.guidance {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.guidance__text {
  font: 400 15px/1.5 'Geist', sans-serif;
  color: var(--graphite-750);
}

/* ── 03.4 Numerals — tabular figures card ───────────────────────────────── */

.numerals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: start;
}

.figures {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
}

.figures__head {
  display: flex;
  justify-content: space-between;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.figures__toggle {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--ink-a20);
  border-radius: var(--radius-pill);
  background: var(--graphite-0);
  color: var(--graphite-900);
  font: 500 11px/1 'Geist Mono', monospace;
  cursor: pointer;
}

.figures__list {
  display: flex;
  flex-direction: column;
  font: 400 18px/1 'Geist', sans-serif;
  font-variant-numeric: tabular-nums;
}
.figures.is-proportional .figures__list { font-variant-numeric: proportional-nums; }

.figures__row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-a08);
}

.figures__key {
  font-size: 15px;
  color: var(--graphite-600);
}

.figures__note {
  font: 400 13px/1.5 'Geist', sans-serif;
  color: var(--graphite-600);
}
.figures__note code { font: 500 12px 'Geist Mono', monospace; }

/* ── 03.4 Numerals — write / not table ──────────────────────────────────── */

.unit-rules {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
  overflow: hidden;
}

.unit-rules__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--ink-a10);
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.unit-rules__col {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 20px;
}

.unit-rules__mark--ok { color: var(--leaf-700); }
.unit-rules__mark--no { color: var(--red-600); }

.unit-rules__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--ink-a07);
}

.unit-rules__ok {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 20px;
}

.unit-rules__value {
  font: 400 17px/1.3 'Geist', sans-serif;
  font-variant-numeric: tabular-nums;
}

.unit-rules__why {
  font: 400 12px/1.4 'Geist', sans-serif;
  color: var(--graphite-500);
}

.unit-rules__no {
  padding: 12px 20px;
  font: 400 17px/1.3 'Geist', sans-serif;
  color: var(--graphite-500);
  text-decoration: line-through;
  text-decoration-color: rgba(184, 38, 28, .6);
}

/* ── 03.5 Body & measure ────────────────────────────────────────────────── */

.measure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
}

.measure {
  --measure: 68ch;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.measure--patient { --measure: 62ch; }

.measure__meta {
  display: flex;
  justify-content: space-between;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.measure__text {
  margin: 0;
  max-width: var(--measure);
  font: 400 16px/1.6 'Geist', sans-serif;
  color: var(--graphite-900);
  text-wrap: pretty;
}
.measure--patient .measure__text { font: 400 18px/1.65 'Geist', sans-serif; }

/* Ruler: ticks every 10 % of the measure. Note: its `ch` resolves against
   the 16px body font, not the paragraph (as in the original). */
.measure__ruler {
  position: relative;
  height: 10px;
  max-width: var(--measure);
  background: repeating-linear-gradient(90deg, rgba(10, 18, 22, .45) 0 1px, transparent 1px 10%);
}

.measure__ruler-label {
  position: absolute;
  right: 0;
  top: 14px;
  font: 400 11px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
}

/* ── 03.6 Self-hosting ──────────────────────────────────────────────────── */

.self-hosting { gap: 20px; }

.code-block {
  margin: 0;
  padding: 24px 28px;
  border-radius: var(--radius-l);
  background: var(--graphite-950);
  color: var(--graphite-mist);
  font: 400 14px/1.7 'Geist Mono', monospace;
  overflow-x: auto;
}

.code-block__comment { color: var(--mist-400); }

.next-up {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
}

.next-up__text {
  font: 400 16px/1.5 'Geist', sans-serif;
  color: var(--graphite-750);
}

.next-up__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}