/* Hallmark · shape: Long Document with a product strip · genre: modern-minimal · theme: brand · redesign: full
 * paper: oklch(15% 0.006 80) · accent: oklch(81% 0.165 75) · display: Chakra Petch · body: IBM Plex Sans · hero: Settled, head and one sentence over a strip of the app · nav: wordmark and four links · footer: plain links in a row · signature: the drive on the map, set large
 * axes: dark/grotesk-tech/warm · posture: night instrument · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H3 E3 S3 R3 V3 · weakest: S, the app pictures carry it; no invented proof */
/* Hallmark · waive 77 · intro, features, limits, steps and FAQ run 62 to 72ch · Long Document: these are search-answer pages, the measure stays readable and the mass comes from the app screens in the hero and the pair */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Chakra Petch"; src: url("fonts/ChakraPetch-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("fonts/ChakraPetch-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans.ttf") format("truetype"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root { color-scheme: dark; }
body { font-size: 1.0625rem; }
a { color: var(--color-accent); }
a:visited { color: var(--color-ink-2); }
a:hover { color: var(--color-ink); }
.top { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); align-items: center; justify-content: space-between; max-width: var(--container); margin: 0 auto; padding: var(--space-md) var(--gutter); }
.brand { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-accent); text-decoration: none; }
.brand:visited { color: var(--color-accent); }
nav { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }
nav a { color: var(--color-muted); text-decoration: none; font-size: var(--text-sm); padding: var(--space-xs) 0; min-height: 44px; display: inline-flex; align-items: center; }
nav a:visited { color: var(--color-muted); }
nav a:hover { color: var(--color-ink); }
main { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.hero { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 340px); gap: var(--space-2xl); align-items: center; padding: var(--space-md) 0 var(--space-xl); }
.hero h1 { font-size: var(--text-display); }
.hero .lead { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lg); max-width: 34ch; }
.hero img { width: 100%; height: min(720px, calc(100svh - 150px)); object-fit: contain; object-position: left center; border-radius: var(--radius-card); }
@media (max-width: 48rem) { .hero { grid-template-columns: minmax(0, 1fr); } .hero img { max-width: 300px; } }
.intro p { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 62ch; }
main > section + section { margin-top: var(--section-gap-s); }
h2 { margin: 0 0 var(--space-md); }
h1, h2, h3 { font-weight: 700; color: var(--color-ink); }
b, strong { font-weight: 600; }
.cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-top: var(--space-lg); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; text-decoration: none; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.btn:visited { color: var(--color-accent-ink); }
.btn:hover { background: var(--color-ink); color: var(--color-accent-ink); }
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; }
.quiet { color: var(--color-accent); font-weight: 600; min-height: 48px; display: inline-flex; align-items: center; }
.small { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 60ch; }
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-xl) var(--gap-columns); }
.spec.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.spec h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.spec p { color: var(--color-ink-2); }
.spec a { display: inline-flex; align-items: center; min-height: 44px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: var(--gap-columns); }
.pair figure { margin: 0; }
.pair img { width: 100%; height: auto; border-radius: var(--radius-card); }
.pair figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 36rem) { .pair { grid-template-columns: minmax(0, 1fr); } .pair figure { max-width: 300px; } }
.limits { padding-left: var(--space-lg); color: var(--color-ink-2); max-width: 68ch; }
.limits b { color: var(--color-ink); }
.limits li { margin: var(--space-xs) 0; }
.steps { list-style: decimal; padding-left: var(--space-lg); max-width: 68ch; }
.steps li { padding: 0 0 var(--space-sm) var(--space-2xs); }
.steps li::marker { color: var(--color-accent); font-family: var(--font-outlier); }
.faq details { border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-sm) 0; max-width: 72ch; }
.faq summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.faq p { color: var(--color-ink-2); padding-bottom: var(--space-xs); }
table { border-collapse: collapse; width: 100%; max-width: 820px; font-size: var(--text-sm); display: block; overflow-x: auto; }
th, td { text-align: left; padding: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
thead th { color: var(--color-accent); font-weight: 600; }
tbody th { font-weight: 400; color: var(--color-muted); }
footer { max-width: var(--container); margin: var(--section-gap-s) auto 0; padding: var(--space-lg) var(--gutter) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
footer ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); list-style: none; padding: 0; margin: var(--space-sm) 0 0; }
.langbar { margin: 0; display: flex; justify-content: center; gap: var(--space-sm); align-items: center; background: var(--color-paper-2); padding: var(--space-2xs) var(--space-md); font-size: var(--text-sm); }
.langbar button { background: none; border: 0; color: var(--color-muted); font-size: var(--text-md); min-width: 44px; min-height: 44px; cursor: pointer; }
.langbar button:hover { color: var(--color-ink); }

/* log viewer (viewer.js): values from the log are text, colours of categories come in as inline background */
#out > section + section, #out + section { margin-top: var(--section-gap-s); }
#out { margin-top: var(--space-2xl); }
.error { color: var(--color-alert); }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); text-align: center; padding: var(--space-lg);
  height: min(720px, calc(100svh - 150px)); min-height: 200px; border: 2px dashed var(--color-rule); border-radius: var(--radius-card); color: var(--color-ink-2); cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out); }
.drop:hover { border-color: var(--color-accent); }
@media (max-width: 48rem) { .drop { height: 200px; } }
.nums { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-xl); }
.nums div { display: flex; flex-direction: column; }
.nums .k { font-size: var(--text-sm); color: var(--color-muted); }
.nums .v { font-family: var(--font-outlier); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.stats h3 { margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-lg); }
.kinds, .timeline { list-style: none; padding: 0; margin: 0; }
.kinds { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.kinds li, .timeline li { display: flex; align-items: center; gap: var(--space-xs); }
.timeline li { padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.timeline .t { font-family: var(--font-outlier); color: var(--color-muted); min-width: 3.5em; }
.dot { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; margin-right: var(--space-2xs); }
.scroll { overflow-x: auto; }
.scroll table { display: table; max-width: none; }
td.num { font-family: var(--font-outlier); text-align: right; }
.map { height: min(480px, 70svh); border-radius: var(--radius-card); }