/* The Unit Circle — identity.
   Signature: the coloured geometry plate of Oliver Byrne's Euclid (London, 1847) brought to life. A white page set in
   Caslon (the face of Byrne's book); a solid ultramarine field behind each title; diagrams drawn with thick flat bars
   of Byrne's three colours, each with one fixed meaning everywhere on the site:
     cosine = blue (the x-coordinate), sine = vermilion (the y-coordinate), tangent = yellow (the tangent-line segment).
   Arc length / radians = green; secant & cosecant = purple. Okabe–Ito-safe pairings, all strokes ≥ 3:1 on white. */
/* Self-hosted OFL faces (licences in ../fonts). Libre Caslon (Pablo Impallari & Rodrigo Fuenzalida) for text and
   display; Libre Franklin for figure labels and controls; a Greek-only subset of STIX Two Text so θ, π, α, β set in a
   matching serif (Caslon has no Greek). */
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-text-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-text-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/libre-caslon-text-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Caslon Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-display-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-franklin-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/libre-franklin-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "STIX Greek"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/stix-two-text-greek-400-normal.woff2") format("woff2"); unicode-range: U+0391-03C9; }
@font-face { font-family: "STIX Greek"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/stix-two-text-greek-400-italic.woff2") format("woff2"); unicode-range: U+0391-03C9; }

:root {
  --bg: #ffffff; --surface: #f5f5f2; --ink: #161616; --ink-soft: #383835; --muted: #64635d; --rule: #dadad4;
  --ultramarine: #1f4fa3;
  --accent: #1f4fa3; --accent-ink: #fff; --link: #1d4a9c; --focus: #1f4fa3; --mark: rgba(31, 79, 163, .1);
  --font-serif: "Libre Caslon Text", "STIX Greek", "Iowan Old Style", Georgia, serif;
  --font-display: "Libre Caslon Display", "Libre Caslon Text", "STIX Greek", Georgia, serif;
  --font-sans: "Libre Franklin", "STIX Greek", "Helvetica Neue", Arial, sans-serif;
  --font-ui: var(--font-sans); --font-body: var(--font-serif); --font-h1: var(--font-display);
  --fs-body: 1.1875rem; --lh-body: 1.6; --prose: 41rem; --wide: 66rem; --radius: 2px;
  /* figures */
  --fig-bg: #ffffff; --fig-surface: #f5f5f2; --fig-ink: #161616; --fig-muted: #64635d;
  --fig-grid: rgba(22, 22, 22, .09); --fig-grid-strong: rgba(22, 22, 22, .32); --fig-border: transparent;
  /* Byrne's colours, one meaning each */
  --c-cos: #1d5fc4; --c-sin: #d0391e; --c-tan: #f2b705; --c-tan-ink: #7a5a00; --c-arc: #0e7c55; --c-sec: #7a3e9d; --c-plane: #f8e2a0;
  --c-primary: var(--c-cos); --c-second: var(--c-sin); --c-ref: #7a5a00; --c-third: var(--c-sec); --c-ok: var(--c-arc); --c-warn: #b35c00;
  --ctl-accent: var(--ultramarine); --ctl-bg: #fff;
  --band-bg: var(--ultramarine); --band-ink: #ffffff; --band-muted: rgba(255, 255, 255, .86);
}
:root[data-theme="dark"] {
  --bg: #121316; --surface: #1c1d21; --ink: #ecebe6; --ink-soft: #cfcdc6; --muted: #a2a097; --rule: #34363b;
  --link: #9cbcf0; --focus: #9cbcf0; --accent: #6f97e0;
  --fig-bg: #121316; --fig-surface: #1c1d21; --fig-ink: #ecebe6; --fig-muted: #a2a097;
  --fig-grid: rgba(236, 235, 230, .1); --fig-grid-strong: rgba(236, 235, 230, .34);
  --c-cos: #6f9fec; --c-sin: #f0745a; --c-tan: #f2c53d; --c-tan-ink: #f2c53d; --c-arc: #43b98a; --c-sec: #c18ee0; --c-plane: #44391a;
  --ctl-accent: #6f97e0; --ctl-bg: #1c1d21; --band-bg: #1b3f85;
}

body { font-feature-settings: "kern", "liga"; }
::selection { background: rgba(242, 183, 5, .45); }

/* Header: a plain line, Caslon wordmark with a small drawn circle */
.site-header { border-bottom: 1px solid var(--rule); padding-top: .55rem; padding-bottom: .55rem; }
.wordmark { font: 400 1.3rem/1 var(--font-display); display: inline-flex; align-items: center; gap: .5rem; }
.wm-mark { display: inline-block; width: 1.05rem; height: 1.05rem; border: 2px solid var(--ink); border-radius: 50%; position: relative; flex: none; }
.wm-mark::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--c-sin); right: -1px; top: 0; }
.site-nav a { font-size: .92rem; }

/* Type */
h1, h2, h3 { font-family: var(--font-serif); font-weight: 700; letter-spacing: 0; }
h1 { font-family: var(--font-h1); font-weight: 400; line-height: 1.02; }
h2 { font-size: clamp(1.5rem, 3.2vw, 1.95rem); }
h3 { font-size: 1.25rem; }
.prose p, .prose li { hyphens: auto; -webkit-hyphens: auto; }
.prose .lede { font-size: 1.22em; line-height: 1.5; }
var, .v { font-family: var(--font-serif); font-style: italic; }
.eq { font-size: 1.32rem; padding: .6rem 0; }
.eq .op { padding: 0 .15em; }
.frac { font-size: .82em; margin: 0 .08em; }
.frac > span { line-height: 1.15; }
.rad { white-space: nowrap; }
.rad > .radicand { border-top: 1px solid currentColor; padding: 0 .08em 0 .04em; margin-left: .02em; }
.c-sin { color: var(--c-sin); } .c-cos { color: var(--c-cos); } .c-tan { color: var(--c-tan-ink); } .c-arc { color: var(--c-arc); } .c-sec { color: var(--c-sec); }
.sw { display: inline-block; width: .9em; height: .32em; vertical-align: .12em; margin-right: .2em; }
.sw-sin { background: var(--c-sin); } .sw-cos { background: var(--c-cos); } .sw-tan { background: var(--c-tan); outline: 1px solid var(--c-tan-ink); } .sw-arc { background: var(--c-arc); }

/* Title band: the plate's colour field */
.band { background: var(--band-bg); }
.essay-head-wrap.band { margin-bottom: 2rem; padding: .5rem 0 1.6rem; }
.essay-head-wrap.band h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); margin: .25em 0 .3em; }
.essay-head-wrap.band .dek { font-size: clamp(1.15rem, 2.6vw, 1.45rem); max-width: 40rem; }
.essay-head-wrap.band .kicker { font: 400 1rem var(--font-sans); }
.band .meta-line { font-family: var(--font-sans); }

/* Home */
.uc-band { padding: 1.4rem 0 1.5rem; }
.uc-band-inner { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.uc-band h1 { font-size: clamp(2.75rem, 9vw, 6rem); margin: 0 0 .18em; color: var(--band-ink); }
.uc-band .dek { color: var(--band-ink); font-size: clamp(1.12rem, 2.5vw, 1.5rem); max-width: 42rem; margin-bottom: .55rem; }
.uc-band .meta-line { color: var(--band-muted); margin: 0; font-size: .88rem; }
.uc-hero { max-width: 76rem; margin: 0 auto; padding: .4rem var(--gutter) 0; }
.uc-hero figcaption { max-width: var(--prose); }
.home-body { padding-top: .5rem; }
.home-body h2 { margin-top: 2.2rem; }
.uc-toc { max-width: var(--prose); margin: 1.2rem auto 2.5rem; padding: 0 var(--gutter); }
.uc-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: ch; }
.uc-toc li { counter-increment: ch; display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 .6rem; padding: .95rem 0; border-top: 1px solid var(--rule); }
.uc-toc li:last-child { border-bottom: 1px solid var(--rule); }
.uc-toc li::before { content: counter(ch); font: 400 2.1rem/1 var(--font-display); color: var(--ultramarine); }
.uc-toc a { font: 700 1.28rem/1.25 var(--font-serif); color: var(--ink); text-decoration-color: var(--rule); }
.uc-toc a:hover { text-decoration-color: var(--ink); }
.uc-toc .q { display: block; font: italic 400 1.02rem/1.45 var(--font-serif); color: var(--ink-soft); margin-top: .2rem; }


/* Figures sit on the page */
.figure figcaption { font: 400 .95rem/1.5 var(--font-sans); color: var(--ink-soft); }
.fig-n { font-variant: small-caps; letter-spacing: .04em; color: var(--accent); }
.widget-mount { background: transparent; }
.w { gap: .75rem; }
.w-stage { border-radius: 0; }
.w-stage.grab canvas { cursor: grab; }
.w-ctl label, .w-lab { font-size: .93rem; }
.w-readout dt { font-size: .82rem; }
.w-eq { font-size: 1.15rem; }
.w-toolbar .w-btn { background: rgba(255, 255, 255, .92); }
:root[data-theme="dark"] .w-toolbar .w-btn { background: rgba(18, 19, 22, .9); }
.w-btn.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.w-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
input[type=range] { accent-color: var(--ctl-accent); }
.w-hint { font-size: .88rem; }

/* The sentence-readout under the big circle */
.uc-say { font: 400 1.08rem/1.55 var(--font-serif); color: var(--fig-ink); margin: 0; min-height: 3.2em; }
.uc-say b { font-weight: 700; }
.uc-say .num { font-family: var(--font-sans); font-size: .9em; color: var(--fig-muted); }
.uc-say .frac { font-size: .78em; }
.uc-controls { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: flex-end; }
.uc-controls .w-ctl { flex: 1 1 15rem; }

/* Practice ("fill in the circle") */
.pr-wrap { display: grid; gap: 1rem; }
@media (min-width: 820px) { .pr-wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.pr-svg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.pr-svg .slot { cursor: pointer; }
.pr-svg .slot:focus { outline: none; }
.pr-svg .slot:focus-visible circle.ring, .pr-svg .slot.sel circle.ring { stroke: var(--ultramarine); stroke-width: 3; }
.pr-panel h4 { font: 600 1rem var(--font-sans); margin: 0 0 .35rem; }
.pr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .8rem; margin-bottom: .6rem; }
.pr-field { font: 400 .92rem var(--font-sans); }
.pr-field button { width: 100%; min-height: 44px; text-align: left; padding: .35rem .6rem; background: var(--fig-bg); color: var(--fig-ink);
  border: 1px solid var(--fig-grid-strong); border-radius: var(--radius); font: 400 1.05rem var(--font-serif); cursor: pointer; }
.pr-field button[aria-pressed="true"] { border-color: var(--ultramarine); box-shadow: inset 0 0 0 1px var(--ultramarine); }
.pr-field button.done { border-color: var(--c-arc); }
.pr-pal { display: flex; flex-wrap: wrap; gap: .4rem; }
.pr-pal button { min-width: 3.6rem; min-height: 44px; padding: .3rem .55rem; background: var(--fig-bg); color: var(--fig-ink); border: 1px solid var(--fig-grid-strong);
  border-radius: var(--radius); font: 400 1.08rem var(--font-serif); cursor: pointer; }
.pr-pal button:hover { border-color: var(--ink); }
.pr-msg { font: 400 .98rem/1.45 var(--font-sans); min-height: 2.9em; margin: .5rem 0 0; color: var(--ink-soft); }
.pr-msg.bad { color: var(--c-sin); }

/* The printable chart */
.chart-plate { margin: 1.5rem auto; max-width: 54rem; }
.chart-plate svg { width: 100%; height: auto; display: block; }
.chart-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; font-family: var(--font-sans); }
.chart-actions a, .chart-actions button { font: 400 .95rem var(--font-sans); padding: .5rem .8rem; border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); text-decoration: none; cursor: pointer; min-height: 40px; }
@media print {
  .site-header, .site-footer, .no-print, .essay-foot, .w-toolbar, .chart-actions, .home-body > *:not(.chart-plate) { display: none !important; }
  body { background: #fff; }
  .chart-plate { break-inside: avoid; page-break-inside: avoid; max-width: 100%; margin: 0; }
  .plain { padding: 0; }
}

/* Tables (exact-value table, Āryabhaṭa) */
.table-wrap table { font: 400 .98rem var(--font-sans); font-variant-numeric: tabular-nums; }
.table-wrap th { font-weight: 600; }
.table-wrap td.ex { font-family: var(--font-serif); font-size: 1.05rem; }
.callout-history { border-left-color: var(--c-tan); }
.simplification { border-left-color: var(--c-tan); }
.callout-research { border-left-color: var(--c-sec); }

@media (max-width: 520px) {
  :root { --fs-body: 1.125rem; }
  .eq { font-size: 1.15rem; }
}
.w-toolbar.in-flow { position: static; display: inline-flex; gap: .5rem; }
.w-toolbar.in-flow .w-btn { font-size: .9rem; padding: .45rem .8rem; min-height: 36px; background: var(--fig-bg); }
@media print { #chart-blank { break-before: page; page-break-before: always; } .plain h1, .plain .dek { margin-top: 0; } }
/* the circle beside its sentence and controls */
.uc-grid { display: grid; gap: .8rem 1.6rem; }
.uc-side { display: flex; flex-direction: column; gap: .9rem; }
@media (min-width: 760px) { .uc-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } .uc-side .uc-controls .w-ctl { flex-basis: 100%; } }
/* display equations: one centred line, label at the right */
.eq { display: block; text-align: center; padding: .6rem 3rem; }
.eq-label { top: 50%; transform: translateY(-50%); }
@media (max-width: 520px) { .eq { padding: .5rem 0; } .eq-label { position: static; display: block; transform: none; text-align: right; } }
.w-hint { top: -1.85rem; bottom: auto; left: 0; background: none; padding: 0; max-width: 55%; line-height: 1.2; }
@media (pointer: coarse) { .w-hint { top: -2.35rem; } .w-toolbar.in-flow .w-btn { min-height: 44px; } }
.figure figcaption .fig-link { text-decoration: underline; text-decoration-thickness: 1px; color: var(--muted); }
.table-wrap td.ex { white-space: nowrap; } .table-wrap td, .table-wrap th { padding-left: .4rem; padding-right: .4rem; }

/* readouts: never break inside a coordinate */
.uc-say .nw { white-space: nowrap; }
/* segmented controls size to their content */
.w-ctl .w-seg { width: auto; max-width: 100%; }
.uc-controls .w-ctl:has(.w-seg) { flex: 0 1 auto; }

/* Chapter openers: a compact, working plate on the ultramarine field, like a plate tipped into a book */
.essay-head-wrap.band .essay-hero { background: var(--fig-bg); color: var(--ink); padding: .1rem .85rem .75rem; }
.essay-head-wrap.band .essay-hero figcaption { color: var(--ink-soft); margin-top: .4rem; }
.essay-head-wrap.band .essay-hero a { color: var(--link); }
.essay-hero .uc-say { font-size: 1rem; min-height: 0; }
.uc-grid.compact .uc-side { gap: .5rem; }
@media (min-width: 980px) {
  .essay-head.has-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: center; column-gap: 2.5rem; }
  .essay-head.has-hero .essay-head-text { margin: 0; }
  .essay-head-wrap.band .essay-hero .uc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .prose .lede { font-size: 1.06em; line-height: 1.55; hyphens: manual; -webkit-hyphens: manual; }
  .essay-head-wrap.band { padding-bottom: 1rem; }
  .essay-head-wrap.band h1 { font-size: 2.45rem; margin: .15em 0 .2em; }
  .essay-head-wrap.band .dek { font-size: 1.05rem; line-height: 1.4; margin-bottom: .4rem; }
  .essay-head-wrap.band .meta-line { display: none; }
  .essay-head.has-hero { gap: .6rem; padding-top: 1.1rem; }
  .essay-hero .uc-say { font-size: .95rem; }
}
.pr-svg .slot.marked circle.ring { stroke: var(--c-warn); stroke-width: 3; stroke-dasharray: 3 2; }

/* Print: the chart on one page, the blank on the next; nothing else */
@media print {
  @page { size: auto; margin: 0.45in; }
  .chart-print-intro { display: none !important; }
  .plain h1 { font-size: 20pt; margin: 0 0 .1in; }
  .plain .dek { font-size: 10.5pt; margin: 0 0 .12in; }
  .chart-plate { margin: 0 auto; max-width: none; break-inside: avoid; page-break-inside: avoid; }
  .chart-plate svg { width: auto; height: 8.6in; max-width: 100%; margin: 0 auto; }
  #chart-full { break-after: page; page-break-after: always; }
  #chart-blank { break-before: auto; page-break-before: auto; }
  #chart-blank svg { height: 9.4in; }
  .figure.widget, .table-wrap { display: none !important; }
}

/* Converter */
.conv-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; }
.conv-fields input, .conv-fields input[type=number] { width: 100%; max-width: none; box-sizing: border-box; min-height: 44px; font: 400 1.15rem var(--font-serif); padding: .3rem .5rem; border: 1px solid var(--fig-grid-strong); border-radius: var(--radius); background: var(--ctl-bg); color: var(--fig-ink); }
.conv-fields input[aria-invalid="true"] { border-color: var(--c-sin); }
.conv-help { display: block; font: 400 .8rem/1.35 var(--font-sans); color: var(--muted); margin-top: .2rem; }
.conv-work p { margin: 0 0 .35rem; }
@media (max-width: 420px) { .conv-fields { grid-template-columns: 1fr 1fr; gap: .5rem; } }
/* Practice round */
.pr-tally { font: 600 1rem var(--font-sans); font-variant-numeric: tabular-nums; margin: 0 0 .4rem; color: var(--ink); }
/* Cheat sheet */
.cheat { display: grid; gap: 0 2rem; }
@media (min-width: 900px) { .cheat { grid-template-columns: 1fr 1fr; } }
.cheat section { break-inside: avoid; page-break-inside: avoid; border-top: 2px solid var(--ink); padding-top: .4rem; margin-bottom: 1.2rem; }
.cheat h2 { font-size: 1.2rem; margin: 0 0 .3rem; }
.cheat ul { list-style: none; padding: 0; margin: 0; }
.cheat li { font: 400 1.08rem/1.5 var(--font-serif); padding: .22rem 0; border-bottom: 1px solid var(--rule); }
.cheat li .why { display: block; font: 400 .85rem/1.4 var(--font-sans); color: var(--muted); }
.cheat .bar-cos { border-left: 4px solid var(--c-cos); padding-left: .5rem; }
/* One sheet, Letter or A4: three newspaper columns and small but legible type; the tester stays on screen, and the
   sources print as a compact footnote */
@media print {
  .page-cheat-sheet .cheat-page .lede, .page-cheat-sheet .cheat-page .figure.widget, .page-cheat-sheet .cheat-after,
  .page-cheat-sheet .kicker { display: none !important; }
  .page-cheat-sheet .foot-section { margin: .04in 0 0; padding: .03in 0 0; border-top: 1px solid #999; font-size: 6.5pt; line-height: 1.25; }
  .page-cheat-sheet .foot-section h2 { font-size: 7pt; margin: 0 0 .02in; }
  .page-cheat-sheet .foot-section ol.refs { margin: 0; padding-left: 1.2em; font-size: 6.5pt; }
  .page-cheat-sheet .foot-section ol.refs li { margin: 0; }
  .page-cheat-sheet .plain h1 { font-size: 17pt; margin: 0 0 .04in; }
  .page-cheat-sheet .plain .dek { font-size: 9pt; margin: 0 0 .08in; }
  .cheat { display: block; columns: 3; column-gap: .22in; column-fill: balance; }
  .cheat section { margin: 0 0 .1in; padding-top: .04in; border-top-width: 1.5px; }
  .cheat h2 { font-size: 11pt; margin: 0 0 .03in; }
  .cheat li { font-size: 9.6pt; line-height: 1.3; padding: .035in 0; }
  .cheat li .why { font-size: 7.4pt; line-height: 1.28; color: #444; }
  .cheat li .why a { color: inherit; text-decoration: none; }
}
@media print { @page { margin: .4in; } }
/* the game needs the whole width of the band */
@media (min-width: 980px) { .essay-head.has-hero:has(#fig-game) { grid-template-columns: minmax(0, 1fr); } .essay-head.has-hero:has(#fig-game) .essay-head-text { margin: 0 auto; } }
.conv-err { grid-column: 1 / -1; margin: .1rem 0 0; font: 400 .9rem/1.4 var(--font-sans); color: var(--c-warn, #b35c00); }
.conv-err[hidden] { display: none; }

/* ---- Utility strip above the instrument (home, Chapter 1, trig calculator): angle, live values, play, tools ---- */
.uc-strip { display: grid; gap: .35rem; padding: .55rem 0 .5rem; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.uc-strip-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }
.uc-strip-row .w-btn { min-height: 40px; padding: .3rem .75rem; font-size: .95rem; }
.uc-strip-row .w-ctl { flex: 0 1 auto; display: flex; align-items: center; gap: .4rem; margin: 0; }
.uc-strip-row .w-ctl label { font-size: .9rem; }
.uc-strip-row select { min-height: 40px; font: 400 .92rem var(--font-sans); }
.uc-strip-links { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-left: auto; font: 400 .93rem/1.3 var(--font-sans); }
.uc-strip-links a { color: var(--link); text-underline-offset: 2px; padding: .35rem 0; }
/* The live values change on every pointer move (decimals, fractions, radicals, "undefined"): a grid whose column count
   depends only on the strip's width (never on the values), and rows one fixed line tall that hold a fraction, so the
   strip, and the stage under it, never move while dragging. */
.uc-vals { --uc-row: 1.85em; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--uc-v-col, 12em)), 1fr)); gap: 0 1rem; font: 400 1.12rem/1.5 var(--font-serif); color: var(--fig-ink); font-variant-numeric: tabular-nums; }
.uc-vals-cells { display: contents; }
.uc-vals .uc-v { display: block; white-space: nowrap; line-height: var(--uc-row); height: var(--uc-row); min-width: 0; }
.uc-vals .frac > span { line-height: 1.05; }   /* a fraction fits inside the fixed row, so the baseline never moves */
/* the "θ lands on …" note in the grid's free cell: at most two small lines, inside the row height */
.uc-vals .uc-co { display: flex; align-items: center; height: var(--uc-row); min-width: 0; overflow: hidden; }
.uc-vals .uc-co .uc-angle-co { margin: 0; font: 400 max(11px, .68em)/1.2 var(--font-sans); color: var(--fig-ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.uc-vals .fn { font-style: italic; }
.uc-vals .num { font: 400 .86em var(--font-sans); color: var(--fig-muted); }
.uc-vals .frac { font-size: .78em; }
.uc-note { margin: 0; font: 400 1rem/1.45 var(--font-serif); color: var(--fig-ink); border-left: 3px solid var(--accent); padding: .1rem 0 .1rem .6rem; }
.uc-note[hidden] { display: none; }
.uc-note .frac { font-size: .78em; }
/* the tour's annotation keeps its height as it changes (a step's text and fractions differ), so nothing below it moves */
.uc-tour .uc-note { min-height: 3.2em; box-sizing: content-box; }
/* the angle box: text, so it reads −30, 47.5, 5π/6 and 2.5pi */
.uc-angle { display: grid; gap: .2rem; }
.uc-angle-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; }
.uc-angle-row > label { font: 600 .95rem var(--font-sans); }
.uc-angle-box { position: relative; display: inline-flex; align-items: center; }
.uc-angle-in { width: 8.6rem; min-height: 44px; box-sizing: border-box; padding: .25rem 2.4rem .25rem .55rem; font: 400 1.2rem var(--font-serif); color: var(--fig-ink);
  background: var(--ctl-bg); border: 1px solid var(--fig-grid-strong); border-radius: var(--radius); font-variant-numeric: tabular-nums; }
.uc-angle-in:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.uc-angle-in[aria-invalid="true"] { border-color: var(--c-sin); box-shadow: inset 0 0 0 1px var(--c-sin); }
.uc-angle-unit { position: absolute; right: .5rem; font: 400 .95rem var(--font-sans); color: var(--fig-muted); pointer-events: none; }
.uc-angle-seg button { min-height: 40px; }
.uc-angle-msg { margin: 0; font: 400 .92rem/1.4 var(--font-sans); color: var(--c-warn); max-width: 40rem; }
.uc-angle-msg[hidden], .uc-angle-co[hidden] { display: none; }
.uc-angle-co { margin: 0; font: 400 .95rem/1.4 var(--font-serif); color: var(--fig-ink); }
/* the "lands on" line: its own full-width row at the foot of the controls (angle-field.js), so the row of controls
   keeps one height and alignment */
.uc-angle-co-row { flex: 1 1 100%; order: 99; }
/* a reserved box whose readout is hidden and has nothing to reserve (the tour note outside a story step) takes no
   room and no gap */
.lf-steady:not(:has(> :not([hidden]))) { display: none; }
.uc-angle.compact .uc-angle-in { width: 8.2rem; }
/* layers: a quiet row of toggles */
.uc-layers-ctl { flex: 1 1 100% !important; }
.uc-layers { display: flex; flex-wrap: wrap; gap: .3rem; }
.uc-layers button { min-height: 40px; padding: .2rem .65rem; border: 1px solid var(--fig-grid-strong); border-radius: var(--radius); background: var(--fig-bg); color: var(--fig-ink); font: 400 .9rem var(--font-sans); }
.uc-layers button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (pointer: coarse) { .uc-layers button, .uc-strip-row .w-btn, .uc-strip-row select, .uc-angle-seg button { min-height: 44px; } }
.uc-goto { font: 400 .9rem var(--font-sans); min-height: 36px; padding: .15rem .6rem; border: 1px solid var(--accent); color: var(--accent); background: var(--bg); border-radius: var(--radius); cursor: pointer; }
@media (pointer: coarse) { .uc-goto { min-height: 44px; } }
/* the home hero: the strip and the point together in the first screen on a phone */
.uc-hero .uc-strip { margin-bottom: .2rem; }
@media (max-width: 600px) {
  .uc-band { padding: .7rem 0 .8rem; }
  .uc-band h1 { font-size: 2.6rem; margin-bottom: .1em; }
  .uc-band .dek { font-size: 1.02rem; line-height: 1.38; margin-bottom: 0; }
  .uc-band .meta-line { display: none; }
  .uc-strip { padding-top: .45rem; gap: .3rem; }
  .uc-vals { --uc-row: 1.85em; --uc-v-col: 11.3em; font-size: .9rem; gap: 0 .5rem; }   /* cos and sin side by side from 340 px */
  .uc-vals .num { font-size: .76em; }
  .uc-strip-links { margin-left: 0; width: 100%; gap: 0 1rem; }
  .uc-hero .w-hint, .essay-hero .w-hint, .layout-tool .w-hint { display: none; }
  .layout-tool .w-stage { margin-top: .2rem; }
  .uc-hero .w-stage, .essay-hero .w-stage { margin-top: .2rem; }
}

/* ---- The tour (scroll story on the home page) ---- */
.uc-tour .story-h { font: 700 1.15rem/1.3 var(--font-serif); margin: 0 0 .35rem; }
.uc-tour .story-step p { margin: 0 0 .5rem; }
.uc-step-view { display: none; }
.uc-tour .story-figure figcaption { font-size: .85rem; }
/* phones: no pinned band (the instrument needs ~300–470 px); each step carries its own view of the same point */
@media (max-width: 999px) {
  .uc-tour .story-figure { position: static; }
  .uc-tour .story-figure .widget-mount { max-height: none; overflow: visible; }
  .uc-tour .story-figure .uc-layers-ctl { display: none; }
  .uc-tour .story-step { margin-bottom: 1.6rem; }
  .uc-tour.uc-inline .uc-step-view { display: block; margin: .2rem 0 .6rem; }
  /* the view comes straight after the step heading, so "Set θ = 100°" and the prose sit under the picture they change */
  .uc-tour.uc-inline .story-step { display: flex; flex-direction: column; }
  .uc-tour.uc-inline .story-step > .story-h { order: 0; }
  .uc-tour.uc-inline .story-step > .uc-step-view { order: 1; }
  .uc-tour.uc-inline .story-step > :not(.story-h):not(.uc-step-view) { order: 2; }
  .uc-step-view .uc-step-ctl { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-top: .3rem; }
  .uc-step-view .uc-step-ctl .w-ctl { flex-direction: row; align-items: center; gap: .4rem; margin: 0; }
  /* a step with a prediction asks it before its view (and Play) appears: heading, set-up, question, view, the rest */
  .uc-tour.uc-inline .story-step:has(> [data-widget="lf:predict"]) > p:first-of-type { order: 1; }
  .uc-tour.uc-inline .story-step:has(> [data-widget="lf:predict"]) > [data-widget="lf:predict"] { order: 2; }
  .uc-tour.uc-inline .story-step:has(> [data-widget="lf:predict"]) > .uc-step-view { order: 3; }
  .uc-tour.uc-inline .story-step:has(> [data-widget="lf:predict"]) > p:not(:first-of-type) { order: 4; }
}
@media (pointer: coarse) { .uc-tour select { min-height: 44px; } }
@media (min-width: 1000px) { .uc-tour .story-figure .uc-controls .w-ctl:not(.uc-layers-ctl) { flex-basis: 12rem; } }

/* ---- Trig calculator table ---- */
.uc-calc { display: grid; gap: .5rem; }
.uc-calc-table th[scope=row] { white-space: nowrap; font: 400 1.05rem var(--font-serif); text-align: left; }
.uc-calc-table th .def { display: block; font: 400 .78rem var(--font-sans); color: var(--muted); }
.uc-calc-table td.dec { font: 400 .98rem var(--font-sans); font-variant-numeric: tabular-nums; }
.uc-calc-table td.ex { font: 400 1.1rem var(--font-serif); }
.uc-calc-table .muted { color: var(--muted); font: italic 400 .85rem var(--font-sans); }
.uc-facts { margin: 0; font: 400 1rem/1.5 var(--font-serif); }
.uc-facts .frac { font-size: .78em; }
.layout-tool .uc-strip { border-top-width: 1px; }
.uc-strip-row .w-ctl { flex-direction: row; }
@media (max-width: 600px) {
  .uc-strip-row { gap: .35rem; }
  .uc-strip-row .w-btn { padding: .3rem .55rem; }
  .uc-strip-row .w-ctl label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .uc-strip-links { font-size: .9rem; gap: 0 .85rem; }
  .uc-angle-row { flex-wrap: nowrap; gap: .4rem; }
  .uc-angle-row > label { white-space: nowrap; }
  .uc-angle-in { width: 7.4rem; font-size: 1.12rem; }
  .uc-angle-seg button { padding: .2rem .55rem; }
  .essay-head-wrap.band .kicker { margin-bottom: 0; }
  .essay-head-wrap.band .essay-hero { padding: 0 .6rem .5rem; }
  .essay-hero figcaption { font-size: .85rem; }
}
@media (min-width: 760px) { .uc-grid.calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
/* Chart page: on phones the exact-value table comes first; on desktop chart and table share the first screen */
.chart-top .chart-plate { margin: 1rem auto; }
.chart-top .table-wrap { margin: .6rem 0; }
@media (min-width: 1000px) {
  .chart-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: start;
    width: min(var(--wide), calc(100vw - 2 * var(--gutter))); margin-left: 50%; transform: translateX(-50%); }
  .chart-top .chart-plate { order: -1; margin: 0; max-width: none; }
  .chart-top .table-wrap { margin: 0; }
}
@media print { .chart-top { display: block; width: auto; transform: none; margin: 0; } .chart-top .chart-values { display: none !important; } }
.uc-calc .w-btn { justify-self: start; }