/* Hallmark · macrostructure: introduction + live workbench · theme: Graphite
 * pre-emit critique: P5 H4 E4 S5 R5 V4 · contrast: pass · mobile: 320 / 375 / 414 / 768
 * Every colour, size, radius, shadow and space comes from tokens.css.
 */
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-body)/1.5 var(--font-body); font-synthesis: none; }
button, input, select { font: inherit; color: inherit; }
button, a, summary, select { -webkit-tap-highlight-color: var(--color-transparent); }
button, select, summary { cursor: pointer; }
button, a { touch-action: manipulation; }
button, footer a { white-space: nowrap; }
button:disabled { opacity: .45; cursor: default; }
button:not(:disabled):active { transform: translateY(1px); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--space-1); }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1 { line-height: 1; }
h2 { font-size: var(--text-title); font-weight: 400; }
/* Subtitles: one serif for the workbench columns, the measures and the questions. */
.column-title, .metrics h3, .qa h3 { font: 400 var(--text-subtitle)/1.35 var(--font-display); color: var(--color-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; top: var(--space-3); left: var(--space-4); background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-3); z-index: 4; clip-path: inset(50%); }
.skip:focus { clip-path: none; }

/* Links: one style everywhere; navigation marks and match names drop the underline until hovered. */
a { color: inherit; text-decoration: underline 1px var(--link-rule); text-underline-offset: var(--link-offset); }
a:hover { text-decoration-color: currentColor; }
.wordmark, .header-icon { text-decoration: none; }

/* Code: inline, on grey. */
code { padding: 1px var(--space-1); font: 400 var(--text-code)/1.6 var(--font-mono); color: var(--color-ink); background: var(--color-well); border-radius: var(--radius-panel); }

/* Pills: a short label on grey, the same on every page: the verdict, a match's face, a catalog's terms. */
.pill { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-well); color: var(--color-muted); font-size: var(--text-small); line-height: 1.6; white-space: nowrap; }
.pill:empty { display: none; }

/* Popovers and tooltips share one surface. */
.popover { position: absolute; inset: auto; margin: 0; border: 1px solid var(--color-rule); border-radius: var(--radius-popover); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-popover); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--color-rule) var(--color-transparent); }
.popover::backdrop { background: var(--color-transparent); }
.popover::-webkit-scrollbar { width: 6px; }
.popover::-webkit-scrollbar-track { background: var(--color-transparent); }
.popover::-webkit-scrollbar-thumb { background: var(--color-rule); border-radius: var(--radius-popover); }

.masthead, main, footer { width: min(1200px, calc(100% - var(--space-10))); margin-inline: auto; }
.masthead { display: flex; align-items: center; justify-content: space-between; min-height: 96px; border-bottom: 1px solid var(--color-rule); gap: var(--space-5); }
.wordmark { font: 400 var(--text-wordmark)/1 var(--font-display); letter-spacing: -.05em; }
.header-icon, .footer-icon { display: grid; place-items: center; width: var(--size-target); height: var(--size-target); }
.header-icon { color: var(--color-muted); }
.site-nav { display: flex; gap: var(--space-5); margin-left: auto; font-size: var(--text-small); }
.site-nav a { padding-block: var(--space-3); color: var(--color-muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-ink); }
.header-icon:hover, .footer-icon:hover { color: var(--color-ink); }

.intro { display: grid; gap: var(--space-6); padding-block: var(--space-10) var(--space-9); border-bottom: 1px solid var(--color-rule); }
.intro h1 { font: 400 var(--text-hero)/1.06 var(--font-display); letter-spacing: -.035em; overflow-wrap: anywhere; min-width: 0; }
.intro-copy { align-self: end; max-width: 38ch; }
.intro-copy > p:first-child { font-size: var(--text-lead); line-height: 1.45; text-wrap: pretty; }
.intro-scope { margin-top: var(--space-3); color: var(--color-muted); font-size: var(--text-small); }

.workbench { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
/* Until the model loads, the matcher keeps its size and shows only the download, centred in it and on screen. */
.workbench[aria-busy="true"] > :not(.loader) { visibility: hidden; }
.workbench:not([aria-busy="true"]) > .loader { display: none; }
.loader { position: absolute; inset: 0 0 auto; block-size: min(100%, 50svh); display: grid; place-content: center; justify-items: center; gap: var(--space-3); color: var(--color-muted); font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.loader progress { width: 12rem; height: 2px; border: 0; appearance: none; background: var(--color-rule); color: var(--color-ink); }
.loader progress::-webkit-progress-bar { background: var(--color-rule); }
.loader progress::-webkit-progress-value { background: currentColor; transition: width .2s linear; }
.loader progress::-moz-progress-bar { background: currentColor; }
.source-panel, .results-column { min-width: 0; padding-block: var(--space-6) var(--space-8); }
/* The crop stays in view beside a long list of matches: the Source title scrolls away, the preview and Model stick,
   within the column's full height, as far from the window's edges as the column's padding. Taller than the window, they
   stick by their bottom edge (--body-height, measured by app.mjs), so an unfolded Model never scrolls away. */
@media (min-width: 62rem) { .source-body { position: sticky; top: min(var(--space-6), calc(100dvh - var(--body-height, 0px) - var(--space-8))); } }
.results-panel, .catalog-panel { min-width: 0; }
/* Each block opens on one label line: label left, its controls right. Equal heights keep the columns level. */
.panel-head { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); min-height: var(--size-target); margin-bottom: var(--space-2); color: var(--color-muted); font-size: var(--text-small); }
.panel-head > :first-child { margin-right: auto; }
.panel-head h2 { font-size: inherit; }
/* Each workbench column opens on a row naming it: Source on the left; Matches on the right, with the
   catalog selector on its line; under it, the verdict for the crop, on the right. */
.column-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--size-target); margin-bottom: var(--space-2); }
.text-button { border: 0; background: var(--color-transparent); color: var(--color-muted); padding: var(--space-2); min-height: var(--size-target); font-size: var(--text-small); }
.text-button:not(:disabled):hover { color: var(--color-accent); text-decoration: underline 1px currentColor; text-underline-offset: var(--link-offset); }
.icon-button { display: grid; place-items: center; width: var(--size-target); height: var(--size-target); padding: 0; border: 0; background: var(--color-transparent); color: var(--color-muted); }
.icon-button:hover { color: var(--color-ink); }
.icon-button[aria-pressed="true"] { color: var(--color-ink); background: var(--color-well); border-radius: var(--radius-panel); }

/* Source line: the current kind and its name on the left, the other kinds on the right. */
.source-spacer { flex: 1; }
.font-icon { flex-shrink: 0; font: 400 var(--text-glyph)/1 var(--font-display); }
.source-kind .font-icon { font-size: var(--text-glyph-small); }
.sample-button { display: flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; min-height: var(--size-target); padding: var(--space-2) 0; border: 0; background: var(--color-transparent); font-size: var(--text-title); }
.sample-button:hover { color: var(--color-muted); }
#sample { min-width: 0; margin-left: var(--space-2); }
#sample svg { flex-shrink: 0; }
#sample[aria-expanded="true"] { color: var(--color-ink); }
#sample:not([data-source="font"]) .chevron { display: none; }
#sample[data-source="drawing"] { display: none; }
#sample-label { min-width: 0; color: var(--color-muted); font-size: var(--text-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sample-label:empty { display: none; }
.sample-menu { width: min(560px, calc(100vw - var(--space-10))); max-height: min(520px, calc(100dvh - var(--space-10))); padding: var(--space-2); }
.sample-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--space-2); }
.sample-option { display: flex; align-items: center; min-width: 0; min-height: var(--space-14); width: 100%; border: 0; border-radius: var(--radius-panel); padding: var(--space-2) var(--space-3); text-align: left; background: var(--color-transparent); font: 400 var(--text-glyph)/1.4 var(--font-specimen), var(--font-body); }
.sample-option:hover, .sample-option:focus-visible { background: var(--color-well); }
.sample-option:focus-visible { outline-offset: -3px; }
.sample-option[aria-pressed="true"] { background: var(--color-tint); }
.sample-name { width: 100%; overflow: hidden; text-overflow: ellipsis; }
#sample-empty { padding: var(--space-4) var(--space-3); font-size: var(--text-small); color: var(--color-muted); }
@media (max-width: 32rem) { .sample-list { grid-template-columns: minmax(0, 1fr); } }

/* Stage: the preview, its tools and the resolution menu. */
.stage { position: relative; background: var(--color-well); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: var(--radius-panel); }
.stage.dragover { outline: 2px dashed var(--color-accent); outline-offset: calc(-1 * var(--space-2)); background: var(--color-tint); color: var(--color-ink); }
.image-viewport { position: relative; pointer-events: none; min-height: 240px; display: flex; align-items: center; justify-content: center; padding: var(--space-5) var(--space-3) var(--size-target); }
#image-frame { position: relative; pointer-events: auto; max-width: 100%; line-height: 0; touch-action: none; cursor: crosshair; }
#image-frame:focus-visible { outline-offset: var(--space-1); }
#source { display: block; max-width: 100%; max-height: 480px; width: auto; height: auto; }
#selection { position: absolute; border: 1px solid var(--color-accent); box-shadow: 0 0 0 1px var(--color-surface); cursor: move; }
.crop-mask { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#crop-shade { position: absolute; box-shadow: 0 0 0 1000px var(--color-mask); }
.crop-handle { position: absolute; width: var(--space-6); height: var(--space-6); padding: 0; min-height: 0; border: 0; background: var(--color-transparent); transform: translate(-50%, -50%); touch-action: none; }
.crop-handle[data-handle="nw"]::after, .crop-handle[data-handle="se"]::after { content: ''; position: absolute; inset: var(--space-2); border: 1px solid var(--color-accent); background: var(--color-surface); }
.crop-handle[data-handle="nw"], .crop-handle[data-handle="ne"], .crop-handle[data-handle="se"], .crop-handle[data-handle="sw"] { z-index: 1; }
.crop-handle:not(:disabled):active { transform: translate(-50%, -50%); }
.crop-handle:focus-visible { outline-offset: 0; }
.crop-handle[data-handle="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.crop-handle[data-handle="n"] { left: 50%; top: 0; width: 100%; cursor: ns-resize; }
.crop-handle[data-handle="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.crop-handle[data-handle="e"] { left: 100%; top: 50%; height: 100%; cursor: ew-resize; }
.crop-handle[data-handle="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.crop-handle[data-handle="s"] { left: 50%; top: 100%; width: 100%; cursor: ns-resize; }
.crop-handle[data-handle="sw"] { left: 0; top: 100%; cursor: nesw-resize; }
.crop-handle[data-handle="w"] { left: 0; top: 50%; height: 100%; cursor: ew-resize; }
/* While a drawing tool is active the crop stays visible but does not take the pointer. */
#image-frame:not([data-tool="crop"]) #selection { pointer-events: none; }
#image-frame:not([data-tool="crop"]) .crop-handle { display: none; }
.stage-tools { position: absolute; z-index: 2; bottom: 0; left: var(--space-2); display: flex; align-items: center; gap: 2px; }
.stage-tools[data-tool="crop"] .pen-size { display: none; }
.stage-tools [aria-pressed="true"] { background: var(--color-surface); }
/* Brush size as a volume wedge: the input is invisible over its drawn triangle. */
.pen-size { position: relative; display: block; flex-shrink: 1; width: 64px; min-width: var(--space-7); height: var(--size-target); cursor: pointer; }
.pen-size::before { content: ''; position: absolute; inset: 15px 0; background: linear-gradient(to right, var(--color-ink) var(--fill, 22%), var(--color-rule) var(--fill, 22%)); clip-path: polygon(0 100%, 100% 0, 100% 100%); pointer-events: none; }
.pen-size:has(:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
#pen-size { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
#resolution { width: auto; padding: 0 var(--space-1); border: 0; background: var(--color-transparent); color: var(--color-muted); font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.empty-state { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; padding: var(--space-7); }
.empty-action { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-3); width: 100%; min-height: var(--size-target); padding: var(--space-3); border: 0; background: var(--color-transparent); color: var(--color-muted); font-size: var(--text-small); }
.empty-action:hover, .empty-action[aria-expanded="true"] { color: var(--color-ink); }
.empty-action .font-icon { font-size: var(--text-glyph-large); }
.empty-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-muted); font-size: var(--text-small); }
.empty-divider::before, .empty-divider::after { content: ''; height: 1px; background: var(--color-rule); flex: 1; }
#replace-image { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: var(--color-transparent); }
@media (pointer: coarse) { .crop-handle { width: var(--size-target); height: var(--size-target); } .crop-handle::after { inset: 18px; } .image-viewport { padding-inline: var(--space-6); } }
/* Phones: slimmer controls keep the source switch and name on one line. */
@media (max-width: 24rem) { .source-head .icon-button { width: var(--space-10); } .pen-size { width: var(--space-10); } }

label { display: grid; gap: var(--space-1); font-size: var(--text-small); }
input, select { width: 100%; min-width: 0; padding: var(--space-2); min-height: var(--size-target); border: 1px solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-body); }
.message { padding-top: var(--space-2); font-size: var(--text-small); color: var(--color-muted); }
.message:empty { display: none; }
.message[data-error] { color: var(--color-error); }

/* Model: folded under the preview, as More matches unfolds the list: the input windows. Its row keeps the time on the
   right, open or folded. Folded, the preview drops the windows' outlines too. */
.model-details { margin-top: var(--space-5); }
.model-details > summary { display: flex; align-items: center; gap: var(--space-1); min-height: var(--size-target); color: var(--color-muted); font-size: var(--text-small); list-style: none; }
.model-details > summary::-webkit-details-marker { display: none; }
.model-details > summary:hover, .model-details[open] > summary { color: var(--color-ink); }
.model-details[open] > summary .chevron { transform: rotate(180deg); }
.source-body:has(.model-details:not([open])) #input-regions { display: none; }
.input-time { display: inline-flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; color: var(--color-muted); font-size: var(--text-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.input-time:has(#detection-time:empty) { visibility: hidden; }
/* Model input: windows are at most 128 × 48, shown at up to 2×. The row keeps one height for every crop, that of a
 * full-width window in its third, so narrow crops never move the page; each window is as large as its third and that
 * height allow, at any page width. */
.model-input { display: flex; flex-direction: column; margin: 0; container-type: inline-size; }
.input-windows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--space-3); --row: min(96px, (100cqi - 2 * var(--space-3)) / 8); height: var(--row); }
.input-windows canvas { display: block; width: min(100%, var(--w) * 2px, var(--w) / var(--h) * var(--row)); height: auto; image-rendering: pixelated; outline: 1px dashed var(--color-rule); border-radius: var(--radius-panel); }
#input-regions { position: absolute; inset: 0; pointer-events: none; }
#input-regions span { position: absolute; border: 1px dashed var(--color-rule); }
/* What the crop was detected as, one pill per label, on the right: level with the sample row. */
.input-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-1); min-height: var(--size-target); margin-bottom: var(--space-2); }

/* Matches: rank width and gap together equal the preview indent. */
.results { padding: 0; margin: 0; list-style: none; }
.results[aria-busy="true"] { opacity: .6; }
.result { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-rule); }
.result:first-child { padding-top: 0; }
.result:last-child { border-bottom: 0; }
.result-top { display: flex; gap: var(--space-3); align-items: baseline; }
.result-score { color: var(--color-muted); font-size: var(--text-small); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rank { flex-shrink: 0; width: var(--space-4); color: var(--color-muted); font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.font-name { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-small); flex: 1; min-width: 0; }
.font-name a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font-twins { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-muted); cursor: help; }
.font-twins:focus-visible { outline-offset: 2px; }
/* A preview's line is its font's own ascent and descent, so no font scrolls inside its field; one height keeps rows even. */
.result-preview { font: 400 var(--text-preview)/normal var(--font-specimen); width: calc(100% - var(--space-7)); height: 1.3em; margin: var(--space-2) 0 0 var(--space-7); padding: 0; border: 0; background: var(--color-transparent); min-height: var(--space-12); text-overflow: ellipsis; }
.result-preview:not([readonly]):hover, .result-preview:not([readonly]):focus { background: var(--color-well); }
.result-preview:focus { outline: none; }
/* More matches, and the JSON export on the right, wait until there are matches. */
.results-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.results:empty + .results-foot { visibility: hidden; }
.more-matches, #save { display: inline-flex; align-items: center; gap: var(--space-1); padding-inline: 0; }
.more-matches[aria-expanded="true"] { color: var(--color-ink); }
.more-matches[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.result-unavailable { margin: var(--space-2) 0 0 var(--space-7); color: var(--color-muted); font-size: var(--text-small); }
/* Unavailable, it keeps its row, so fewer matches never move the page. */
.more-matches[inert] { visibility: hidden; }
/* A tooltip lists every folded family; the full ranking opens in a scrollable list. */
.twins-tip { padding: var(--space-2) var(--space-3); max-width: min(300px, calc(100vw - var(--space-6))); max-height: 50vh; font-size: var(--text-small); }
.twins-tip ul { margin: 0; padding: 0; list-style: none; }

/* Catalog selector. */
#catalog-button { display: flex; gap: var(--space-2); align-items: center; min-width: 0; max-width: 100%; padding-right: 0; }
#catalog-button:not(:disabled):hover { text-decoration: none; color: var(--color-ink); }
#catalog-button:not(:disabled):hover #catalog-label { text-decoration: underline 1px currentColor; text-underline-offset: var(--link-offset); }
#catalog-button[aria-busy="true"] { opacity: .5; }
#catalog-button svg { flex-shrink: 0; }
#catalog-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-menu { width: min(340px, calc(100vw - var(--space-6))); max-height: calc(100dvh - var(--space-6)); padding: var(--space-1); }
.catalog-option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; min-height: var(--size-target); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-panel); background: var(--color-transparent); text-align: left; font-size: var(--text-small); }
.catalog-option:hover, .catalog-option[aria-pressed="true"] { background: var(--color-well); }
.catalog-option:focus-visible { outline-offset: -2px; }
.catalog-option span:last-child { color: var(--color-muted); }
#import-catalog { border-top: 1px solid var(--color-rule); border-radius: 0; }
#add-my-fonts { text-decoration: none; }

/* Sections. Short prose sets its heading beside the copy; a split sets it above its text and figure; lists stack it on top at full width. */
.explanation, .stacked { display: grid; gap: var(--space-5); border-top: 1px solid var(--color-rule); padding-block: var(--space-10); scroll-margin-top: var(--space-6); }
.explanation h2, .stacked h2 { font: 400 var(--text-section)/1.2 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; min-width: 0; }
.stacked .explanation-copy { max-width: none; }
.stacked .explanation-copy > p { max-width: var(--measure); }
.explanation-copy { max-width: var(--measure); font-size: var(--text-small); color: var(--color-muted); }
.explanation-copy p + p { margin-top: var(--space-3); }
/* Split: a heading with its text under it, and its figure (facts, table, bars) beside them, from the heading's top. */
.split { display: grid; gap: var(--space-5); }
.split > :nth-child(3) { min-width: 0; margin: 0; }
/* How it works: its text and the model's facts on the left; accuracy over speed on the right, bars only. */
.metrics { display: grid; align-content: start; gap: var(--space-8); }
.metrics h3 { margin-bottom: var(--space-4); }
/* How does it compare: the table alone; each finder names its owner and each count its sources. A narrow screen scrolls it. */
#compare :is(th, td) { text-align: left; }
#compare :is(th, td) + :is(th, td) { padding-left: var(--space-5); }
#compare thead th { white-space: nowrap; }
/* Questions: short ones, text only, two to a row. */
.questions { display: grid; gap: var(--space-8) var(--space-14); }
.qa { display: grid; align-content: start; gap: var(--space-3); color: var(--color-muted); font-size: var(--text-small); }
.qa > p { max-width: var(--measure); text-wrap: pretty; }
/* Meters: a label over a bar and its value; --value is the fraction the bar fills. */
.meters { display: grid; gap: var(--space-3); margin: 0; color: var(--color-muted); font-size: var(--text-small); }
.meters > div { display: grid; gap: var(--space-1); }
.meters dt { color: var(--color-ink); }
.meter { display: grid; margin: 0; grid-template-columns: minmax(0, 1fr) 6.5em; align-items: center; gap: var(--space-3); color: var(--color-ink); text-align: right; font-variant-numeric: tabular-nums; }
.meter::before { content: ''; height: 6px; background: linear-gradient(to right, var(--color-ink) calc(var(--value, 0) * 100%), var(--color-tint) 0); }

/* Facts about the model, under How it works' text. */
.facts { margin: 0; }
.explanation-copy + .facts { margin-top: var(--space-5); }
.facts > div { display: flex; gap: var(--space-3); justify-content: space-between; border-bottom: 1px solid var(--color-rule); padding-block: var(--space-2); font-size: var(--text-small); }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.figures { width: 100%; border-collapse: collapse; font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.figures caption { text-align: left; margin-bottom: var(--space-2); color: var(--color-muted); }
.figures th, .figures td { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-rule); text-align: right; vertical-align: baseline; font-weight: 400; }
.figures th:first-child, .figures td:first-child { text-align: left; }
.figures :is(th, td) + :is(th, td) { padding-left: var(--space-4); }
@media (max-width: 30rem) { .figures :is(th, td) + :is(th, td) { padding-left: var(--space-2); } }
.figures thead { color: var(--color-muted); white-space: nowrap; }
.facts + .figures { margin-top: var(--space-5); }

/* Sources page: one plain row per source, most progress first. */
.sources { padding-block: var(--space-8) var(--space-6); }
.table-scroll { overflow-x: auto; }
/* Fixed layout: column widths come from the header, never from the rows, so sorting never moves a column. */
.sources-table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; }
.sources-table th, .sources-table td { padding: var(--space-4) var(--space-6) var(--space-4) 0; border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: top; font-weight: 400; }
.sources-table thead th { padding-top: 0; color: var(--color-muted); font-size: var(--text-small); }
/* Terms, Licence and Status share one width. */
.sources-table thead th:nth-child(1) { width: 25%; }
.sources-table thead th:is(:nth-child(2), :nth-child(3), :nth-child(4)) { width: 22%; }
.sources-table thead th:nth-child(5) { width: 9%; }
/* Narrower, the table scrolls rather than cut a terms or status word. */
#sources .sources-table { min-width: 58rem; }
.sources-table td, .sources-table th { overflow-wrap: anywhere; }
.sources-table tbody th > a { color: var(--color-ink); }
.sources-table tbody td { color: var(--color-muted); }
/* Groups fold open into their sources, which sit indented under them. A group's arrow stands in the indent, before its
   name, so the name lines up with its sources'. */
.fold { margin-left: calc(-1 * var(--space-6)); padding: 0; border: 0; background: var(--color-transparent); color: var(--color-ink); font: inherit; text-align: left; }
.fold::before { content: ''; display: inline-block; box-sizing: border-box; width: .4em; height: .4em; margin-right: calc(var(--space-6) - .4em); vertical-align: .15em; border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor; transform: rotate(-45deg); }
.fold[aria-expanded="true"]::before { vertical-align: .3em; transform: rotate(45deg); }
.fold:hover { text-decoration: underline 1px currentColor; text-underline-offset: var(--link-offset); }
.sources-table :is(.member-row, .group-row) > th { padding-left: var(--space-6); }
.sources-table .number { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Sortable headers: the sorted column is ink with its direction; a template row stays hidden until sprae renders it. */
.sort { display: inline-flex; gap: var(--space-1); padding: 0; border: 0; background: var(--color-transparent); color: inherit; font: inherit; }
.sort:hover, [aria-sort] > .sort { color: var(--color-ink); }
[aria-sort="ascending"] > .sort::after { content: '↑'; }
[aria-sort="descending"] > .sort::after { content: '↓'; }
.sources-table tr[\:each] { display: none; }
/* Rules separate rows; the last row has none, so a table ends on its content. */
.sources-table tbody tr:last-child > *, .figures tbody tr:last-child > *, .facts > div:last-child { border-bottom: 0; }
/* Two sizes: each cell's leading word or phrase in body text and ink; its details, notes and clauses small and grey. */
.cell-main { display: block; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A catalog downloads from its size, under its family count, marked by a download icon. The icon is an inline
   replaced element, so the link's underline runs under the size alone. */
.json-link { display: inline-block; margin-top: var(--space-1); color: var(--color-muted); font-size: var(--text-small); white-space: nowrap; }
.json-link > svg { margin-right: var(--space-1); vertical-align: -.2em; }
.json-link:hover { color: var(--color-ink); }
.held, .detail { display: block; margin-top: var(--space-1); color: var(--color-muted); font-size: var(--text-small); }
.sources-table blockquote { margin: var(--space-2) 0; padding-left: var(--space-3); border-left: 2px solid var(--color-rule); color: var(--color-ink); font-size: var(--text-small); }
.checked { display: block; margin-top: var(--space-1); color: var(--color-muted); font-size: var(--text-small); }

footer { padding-block: var(--space-6) var(--space-8); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-small); color: var(--color-muted); }
footer a { padding-block: var(--space-3); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-4); }
.footer-links { margin-left: auto; }
.footer-license { display: flex; align-items: center; min-height: var(--size-target); }
.footer-license:hover { color: var(--color-ink); }
.footer-icon { padding: 0; }
.omkara span { line-height: 1; }

@media (min-width: 40rem) {
  .masthead, main, footer { width: min(1200px, calc(100% - var(--space-10) * 2)); }
}
@media (min-width: 62rem) {
  .intro, .explanation { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-14); }
  .intro { padding-block: var(--space-12) var(--space-10); }
  .workbench { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-14); }
  .source-panel, .results-column { padding-top: var(--space-8); }
  .image-viewport { min-height: 360px; }
  /* Every two-column block shares one grid: two equal columns, one gap. */
  /* The figure spans both rows; the text row takes any extra height, so the text stays under its heading. */
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--space-5) var(--space-14); }
  .split > :nth-child(2) { grid-column: 1; }
  .split > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
  .questions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0s !important; animation: none !important; } }

/* Catalogs page: My fonts follows the intro's rule; Included and Not included follow it. */
.intro + .stacked { border-top: 0; }
.action { min-height: var(--size-target); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-rule); border-radius: var(--radius-panel); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-small); }
.action:not(:disabled):hover { background: var(--color-well); }
.my-fonts-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
#my-fonts-status { color: var(--color-ink); font-variant-numeric: tabular-nums; }
#my-fonts-status[data-error] { color: var(--color-error); }
#my-fonts-stored { display: flex; align-items: center; gap: var(--space-3); }
#my-fonts-stored[hidden] { display: none; }
#my-fonts-remove { padding-inline: 0; }
/* My fonts: family, its styles, its face count. */
.my-fonts-table thead th:nth-child(1) { width: 30%; }
.my-fonts-table thead th:nth-child(2) { width: auto; }
.my-fonts-table thead th:nth-child(3) { width: 9%; }
#my-fonts-status:empty { display: none; }
#index-files { padding-inline: 0; }