/* Track design (DESIGN.md): warm paper, tartan-red accent, condensed sport headings, soft 10px corners. */
:root {
  --canvas: #fbfaf7; --layer: #f1eee8; --layer-2: #e4dfd6; --line: #e2ddd3; --line-strong: #1b1d22;
  --ink: #1b1d22; --muted: #575b63; --subtle: #6b6f77;
  --primary: #c8401f; --primary-hover: #a93418; --primary-press: #872910; --link: #b23a1b;
  --ok: #1f8a4c; --warn: #d9a400; --err: #c4161c;
  --inv: #14161a; --inv-2: #262a31; --inv-ink: #ffffff; --inv-muted: #c3c6cc;
  --team-a: #c8401f; --team-b: #1d6fb8; --team-c: #1f8a4c; --team-d: #7a3fb0;
  --font: 'Barlow', 'Helvetica Neue', Arial, sans-serif; --head: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --r: 10px; --res: #1b1d22;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #14161a; --layer: #1f2228; --layer-2: #2c3038; --line: #2f333b; --line-strong: #f1f1f1;
    --ink: #f1f1f1; --muted: #c3c6cc; --subtle: #9ea3ab; --link: #ff8a66; --primary: #c8401f; --primary-hover: #a93418; --err: #ff6b6b; --inv: #0b0c0f; --inv-2: #1f2228;
    --team-b: #5aa9ef; --team-c: #4cc27f; --team-d: #b48ae0; --res: #2b2f37; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #14161a; --layer: #1f2228; --layer-2: #2c3038; --line: #2f333b; --line-strong: #f1f1f1;
  --ink: #f1f1f1; --muted: #c3c6cc; --subtle: #9ea3ab; --link: #ff8a66; --primary: #c8401f; --primary-hover: #a93418; --err: #ff6b6b; --inv: #0b0c0f; --inv-2: #1f2228;
  --team-b: #5aa9ef; --team-c: #4cc27f; --team-d: #b48ae0; --res: #2b2f37; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; } /* sticky header never hides a focused field or an anchor target */
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16px/1.5 var(--font); letter-spacing: .16px; }
a { color: var(--link); }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
h1, h2, h3 { margin: 0 0 12px; }
h2 { font-size: 28px; font-weight: 400; line-height: 1.25; margin-top: 48px; }
h3 { font-size: 20px; font-weight: 400; line-height: 1.4; margin-top: 24px; }
.wrap { max-width: 1056px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--primary); color: #fff; padding: 8px 12px; z-index: 10; outline: 2px solid var(--ink); outline-offset: 2px; }
main:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num, .tnum { font-variant-numeric: tabular-nums; }

/* Header */
.top { background: var(--canvas); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 48px; }
.logo { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.logo svg { width: 24px; height: 24px; }
.nav { display: flex; gap: 0; overflow-x: auto; flex: 1; }
.nav a { color: var(--muted); text-decoration: none; font-size: 14px; padding: 14px 12px; white-space: nowrap; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); border-bottom-color: var(--primary); }
.menu-btn { display: none; background: none; border: 0; color: var(--ink); font-size: 20px; min-width: 48px; min-height: 48px; cursor: pointer; }
@media (max-width: 672px) {
  .menu-btn { display: block; margin-left: auto; }
  .nav { display: none; position: absolute; top: 48px; left: 0; right: 0; flex-direction: column; background: var(--canvas); border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .nav a { padding: 12px 16px; border-bottom: 1px solid var(--line); }
}

/* Hero */
.hero { padding: 32px 0 16px; }
.hero h1 { font-weight: 300; font-size: 42px; line-height: 1.2; letter-spacing: 0; }
.lede { font-size: 18px; color: var(--muted); max-width: 720px; margin: 0; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.crumbs a { color: var(--muted); }
@media (max-width: 672px) { .hero h1 { font-size: 30px; } .lede { font-size: 16px; } }

/* Tool panel */
.tool { padding: 8px 0 24px; }
.panel { background: var(--layer); padding: 24px; }
@media (max-width: 672px) { .panel { padding: 16px; margin: 0 -16px; } }
.panel + .panel { margin-top: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span, .label { font-size: 12px; color: var(--muted); letter-spacing: .32px; }
input[type=text], input[type=number], input[type=date], input[type=time], select, textarea {
  font: inherit; color: var(--ink); background: var(--canvas); border: 0; border-bottom: 1px solid var(--subtle);
  border-radius: 0; padding: 11px 12px; min-height: 48px; width: 100%; font-variant-numeric: tabular-nums;
}
.panel input, .panel select { background: var(--canvas); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
input.bad { outline: 2px solid var(--err); outline-offset: -2px; }
input::placeholder { color: var(--subtle); opacity: 1; font-size: 14px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }

.btn { font: inherit; font-size: 14px; border: 0; border-radius: 0; min-height: 48px; padding: 12px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { background: var(--primary-press); }
.btn-secondary { background: var(--ink); color: var(--canvas); }
.btn-ghost { background: transparent; color: var(--link); }
.btn-ghost:hover { background: var(--layer-2); }
.btn-tertiary { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1px var(--primary); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Tabs (Carbon) */
.tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button { font: inherit; font-size: 14px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 14px 16px; min-height: 48px; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--primary); }

/* Results */
.result { background: var(--canvas); border-left: 4px solid var(--primary); padding: 16px 20px; margin-top: 16px; }
.result .big { font-size: 42px; font-weight: 300; line-height: 1.2; font-variant-numeric: tabular-nums; }
.result .cap { font-size: 12px; color: var(--muted); letter-spacing: .32px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 16px; }
.tile { background: var(--canvas); padding: 12px 16px; }
.tile b { display: block; font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; }
.tile span { font-size: 12px; color: var(--muted); }
details.how { margin-top: 16px; background: var(--canvas); padding: 0 16px; }
details.how summary { cursor: pointer; padding: 12px 0; font-size: 14px; color: var(--link); }
details.how div { font-size: 14px; padding-bottom: 12px; }
.note { font-size: 12px; color: var(--muted); margin-top: 12px; }

/* Tables */
.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
table.data th, table.data td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
table.data thead th { background: var(--layer-2); font-weight: 600; font-size: 14px; }

/* Content */
.content { padding: 8px 0 24px; }
.prose { max-width: 760px; }
.prose p, .prose li { color: var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 16px; }
.faq p { margin: 0 0 16px; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card { background: var(--canvas); padding: 16px; text-decoration: none; color: var(--ink); min-height: 96px; }
.card:hover { background: var(--layer); }
.card b { display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.card span { font-size: 14px; color: var(--muted); }
.hub-section { padding-top: 8px; padding-bottom: 32px; }

/* Footer */
.foot { background: var(--inv); color: var(--inv-muted); padding: 48px 0 32px; margin-top: 48px; font-size: 14px; }
.foot h3, .foot-h { color: var(--inv-ink); font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.foot ul { list-style: none; margin: 0 0 24px; padding: 0; }
.foot li { padding: 3px 0; }
.foot a { color: var(--inv-muted); text-decoration: none; }
.foot a:hover { color: var(--inv-ink); text-decoration: underline; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.fine { border-top: 1px solid var(--inv-2); padding-top: 16px; }
.fine p { margin: 4px 0; }

.print-only { display: none; }
@media print {
  @page { margin: 12mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .top, .foot, .content, .actions, .no-print, .crumbs, .lede, .tabs { display: none !important; }
  .print-only { display: block; }
  .hero { padding: 0 0 8px; } .hero h1 { font-size: 20pt; }
  .panel { background: #fff; padding: 0; }
  input, select { border: 0; border-bottom: 1px solid #000; background: #fff; min-height: 0; padding: 4px; }
  .result { border-left-color: #000; }
  table.data th, table.data td { border-bottom: 1px solid #000; padding: 6px 8px; }
  a { color: #000; text-decoration: none; }
}
fieldset.days { display: flex; flex-wrap: wrap; gap: 0 16px; }
fieldset.days legend { margin-bottom: 4px; }
fieldset.days label, label.check { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-size: 14px; cursor: pointer; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; }
.hr-t td { padding: 4px 8px 4px 0; border: 0; } .hr-t th { padding: 0 8px 6px 0; background: none !important; font-weight: 400 !important; font-size: 12px !important; color: var(--muted); }
.hr-t input { min-height: 44px; }
.big-out { font-size: 34px; font-weight: 300; font-variant-numeric: tabular-nums; }
.swap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 672px) { .swap { grid-template-columns: 1fr; } }
table.chart td, table.chart th { padding: 6px 12px; font-size: 14px; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* Day / night switcher */
.theme-btn { background: none; border: 0; color: var(--ink); min-width: 48px; min-height: 48px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
.theme-btn:hover { background: var(--layer); }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}
@media (max-width: 672px) { .menu-btn { margin-left: 0; } }
@media print { .theme-btn { display: none; } }

/* Reserve space for results rendered by script (CLS) */
[id$="-out"]:empty { min-height: 120px; }
.ro-cal:empty { min-height: 400px; }

table.pat td, table.pat th { text-align: center; padding: 6px 4px; font-size: 12px; min-width: 38px; }
table.pat .c-D { background: var(--team-b); color: #fff; } table.pat .c-N { background: var(--inv); color: #fff; } table.pat .c-W { background: var(--team-a); color: #fff; } table.pat .c-O { color: var(--muted); }
@media print { table.pat td { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

.sources { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 32px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-end; }
.chips button { font: inherit; font-size: 14px; background: var(--canvas); color: var(--ink); border: 1px solid var(--line); min-height: 40px; min-width: 48px; padding: 6px 10px; cursor: pointer; }
.chips button:hover { border-color: var(--primary); color: var(--link); }

textarea { font: inherit; color: var(--ink); background: var(--canvas); border: 0; border-bottom: 1px solid var(--subtle); border-radius: 0; padding: 11px 12px; width: 100%; font-variant-numeric: tabular-nums; }

.foot-h a { color: var(--inv-ink); text-decoration: none; }
.foot-h a:hover { text-decoration: underline; }
.foot .fmore a { color: var(--inv-ink); font-weight: 600; }
.finfo { margin: 0 0 16px; }

.logo .wm { font-size: 17px; font-weight: 300; letter-spacing: 0; color: var(--ink); }
.logo .wm b { font-weight: 600; }
.logo svg { width: 28px; height: 28px; }

/* cookie consent (GA4 loads only after Accept) */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin: 0 auto; background: var(--canvas); color: var(--ink);
  border: 1px solid var(--line-strong); padding: 14px 16px; box-shadow: 0 8px 28px rgba(0,0,0,.18); font-size: 14px; }
.consent p { margin: 0 0 10px; }
.consent-btns { display: flex; gap: 8px; justify-content: flex-end; }
.consent .btn { min-height: 40px; padding: 8px 18px; }
@media print { .consent { display: none !important; } }

.tc-cell { display: flex; align-items: stretch; } .tc-cell input { flex: 1; min-width: 0; }
.tc-cell .now { background: var(--canvas); border: 0; border-bottom: 1px solid var(--subtle); color: var(--muted); width: 30px; cursor: pointer; font-size: 14px; padding: 0; }
.tc-cell .now:hover { color: var(--link); background: var(--layer-2); }
@media print { .tc-cell .now { display: none; } }

@media print { body.print-chart .tool .swap, body.print-chart #mt-now, body.print-chart .share-bar, body.print-chart .hero .lede { display: none !important; } }

/* Row tables (hours, rounding, work hours grid) become labelled 2-column cards on phones */
.hr-t td.hrs-cell { text-align: right; white-space: nowrap; }
@media (max-width: 672px) {
  .hr-t thead { display: none; }
  .hr-t, .hr-t tbody, .hr-t tfoot { display: block; width: 100%; }
  .hr-t tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .hr-t td { padding: 0 !important; border: 0 !important; min-width: 0; }
  .hr-t td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
  .hr-t td.full { grid-column: 1 / -1; }
  .hr-t td.m-hide { display: none; }
  .hr-t td.hrs-cell { text-align: left; align-self: end; font-weight: 600; }
  .hr-t tr { position: relative; }
  .hr-t td.del-cell { position: absolute; right: 0; top: 2px; }
  .hr-t td.del-cell .btn { min-height: 32px; padding: 4px 10px; }
  .hr-t input { width: 100%; min-width: 0; min-height: 48px; }
  .tc-cell { width: 100%; }
}

/* ---- Track skin ---- */
body { letter-spacing: 0; font-size: 17px; }
h1, h2, h3, .big, .result .big, .tile b, .big-out, .logo .wm { font-family: var(--head); }
h2 { font-weight: 700; font-size: 30px; letter-spacing: .2px; }
h3 { font-weight: 700; font-size: 22px; }
.hero h1 { font-weight: 700; font-size: 48px; line-height: 1.05; letter-spacing: .2px; }
@media (max-width: 672px) { .hero h1 { font-size: 36px; } }
.logo .wm { font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.logo .wm b { font-weight: 700; color: var(--primary); }
.panel { border-radius: var(--r); border: 1px solid var(--line); }
@media (max-width: 672px) { .panel { border-radius: 0; border-left: 0; border-right: 0; } }
input[type=text], input[type=number], input[type=date], input[type=time], select, textarea { border: 1px solid var(--line); border-radius: 8px; }
.btn { border-radius: 999px; font-weight: 600; padding: 12px 20px; }
.result { border-left: 0; border-radius: var(--r); background: var(--res); color: var(--inv-ink); padding: 18px 22px; }
.result .big { font-weight: 700; font-size: 54px; letter-spacing: .5px; }
.result .cap { color: var(--inv-muted); font-size: 14px; letter-spacing: .2px; }
.tiles { border-radius: var(--r); overflow: hidden; }
.tile b { font-weight: 700; font-size: 28px; }
details.how { border-radius: var(--r); border: 1px solid var(--line); }
.cards { border-radius: var(--r); overflow: hidden; }
.card b { font-family: var(--head); font-size: 20px; font-weight: 700; letter-spacing: .2px; }
.nav a { font-weight: 500; }
.nav a:hover, .nav a[aria-current] { border-bottom-color: var(--primary); }
.tabs button[aria-selected="true"] { border-bottom-color: var(--primary); }
table.data thead th { background: var(--layer-2); }
table.data tbody tr:nth-child(even) td { background: var(--layer); }
table.data tr.hl td { background: color-mix(in srgb, var(--primary) 16%, var(--canvas)) !important; font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { font: inherit; font-size: 14px; font-weight: 600; background: var(--canvas); color: var(--muted); border: 0; padding: 10px 16px; min-height: 44px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--canvas); }
.chips button { border-radius: 999px; }
.foot { border-top: 4px solid var(--primary); }
/* printable pace band */
.band-sheet { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.band { border: 1.5px solid #000; border-radius: 6px; background: #fff; color: #000; font: 600 11px/1.25 var(--font); padding: 4px 6px; width: 210px; }
.band .bh { font: 700 12px var(--head); text-transform: uppercase; border-bottom: 1.5px solid #000; padding-bottom: 2px; margin-bottom: 2px; display: flex; justify-content: space-between; }
.band table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.band td { padding: 0 2px; border-bottom: .5px solid #999; }
.band td:last-child { text-align: right; }
@media print { .band-sheet { gap: 6px; } .band { break-inside: avoid; } body.print-band .tool .panel:not(.band-wrap), body.print-band .result, body.print-band .tiles, body.print-band details.how, body.print-band .share-bar, body.print-band .hero, body.print-band .no-band { display: none !important; } }
.timer-face { font-family: var(--head); font-size: clamp(64px, 18vw, 140px); font-weight: 700; text-align: center; line-height: 1; font-variant-numeric: tabular-nums; }
.timer-phase { text-align: center; font: 700 28px var(--head); text-transform: uppercase; letter-spacing: 1px; }
.timer-box { border-radius: var(--r); padding: 24px 16px; background: var(--inv); color: var(--inv-ink); margin-top: 16px; }
/* fixed colours in both themes: white text needs >= 4.5:1 (the dark-theme team colours gave 2.3-2.5:1) */
.timer-box.run { background: #c8401f; } .timer-box.walk { background: #17773f; } .timer-box.rest { background: #1d6fb8; }
h2.h3 { font-size: 22px; margin-top: 24px; }
.unit-btn { margin-left: auto; background: var(--layer); border: 1px solid var(--line); border-radius: 999px; padding: 3px; display: inline-flex; cursor: pointer; font: 600 13px var(--font); min-height: 36px; align-items: center; }
.unit-btn span { padding: 5px 10px; border-radius: 999px; color: var(--muted); }
.unit-btn span.on { background: var(--ink); color: var(--canvas); }
.unit-btn + .theme-btn { margin-left: 4px; }
@media print { .unit-btn { display: none; } }
.band .bf { font-size: 9px; margin-top: 2px; line-height: 1.3; }
.band-s { width: 170px; font-size: 10px; } .band-l { width: 260px; font-size: 13px; } .band-l .bh { font-size: 14px; }
/* guides */
.byline { font-size: 15px; color: var(--muted); margin: 12px 0 0; }
.byline a { color: var(--ink); font-weight: 600; }
.toc { background: var(--layer); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; margin: 8px 0 24px; }
.toc .toc-h { font: 700 16px var(--head); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 6px; }
.toc ol { margin: 0; padding-left: 20px; } .toc li { padding: 2px 0; }
.author-box { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; background: var(--layer); }
.author-box p { margin: 0; }
.guide-links { padding-left: 20px; } .guide-links li { padding: 3px 0; }
.prose h2[id] { scroll-margin-top: 64px; }
.finding { border-left: 4px solid var(--primary); background: var(--layer); padding: 12px 16px; border-radius: 0 var(--r) var(--r) 0; margin: 16px 0; }
.finding p { margin: 0; }
.glossary dt { font: 700 20px var(--head); margin-top: 18px; scroll-margin-top: 64px; }
.glossary dd { margin: 4px 0 0; }
/* wide data tables on phones: keep the first column in view while scrolling sideways */
.table-wrap { position: relative; }
table.data th:first-child, table.data td:first-child { position: sticky; left: 0; z-index: 1; background: var(--canvas); }
table.data thead th:first-child { background: var(--layer-2); }
table.data tbody tr:nth-child(even) td:first-child { background: var(--layer); }
@media (max-width: 672px) { table.chart td, table.chart th { padding: 6px 8px; font-size: 13px; white-space: nowrap; } }
@media print { table.data th:first-child, table.data td:first-child { position: static; } }

/* ---- Accessibility pass (7 Oct 2026) ---- */
/* Focus: buttons get an outside ring so it shows on filled buttons (an inset red ring vanished on the red primary button).
   Items inside overflow containers (nav, tabs, seg, cards) keep the inset ring so it is not clipped. */
.btn:focus-visible, .unit-btn:focus-visible, .theme-btn:focus-visible, .menu-btn:focus-visible, .chips button:focus-visible,
a:focus-visible, summary:focus-visible, input[type=checkbox]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nav a:focus-visible, .tabs button:focus-visible, .seg button:focus-visible, .card:focus-visible, .cards a:focus-visible { outline-offset: -3px; }
.seg button[aria-pressed="true"]:focus-visible { outline-color: var(--canvas); }
.foot a:focus-visible { outline-color: var(--inv-ink); }
.result a { color: var(--inv-ink); }
.result a:focus-visible, .timer-box :focus-visible { outline-color: var(--inv-ink); }
/* Visible error text under a field (added by ui.js when a field is marked bad) */
.field-err { color: var(--err); font-size: 13px; line-height: 1.35; }
input[aria-invalid="true"] { border-color: var(--err); }
/* Narrow phones (320-380 px): the header row (logo, units, theme, menu) must fit without sideways scrolling */
@media (max-width: 380px) {
  .top .wrap { gap: 6px; }
  .logo .wm { font-size: 19px; }
  .unit-btn span { padding: 5px 8px; }
  .theme-btn, .menu-btn { min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .field-err { display: none; } }
/* Empty state: a result box with nothing in it says what to do instead of showing a blank gap */
.tool [id$="-out"]:empty::before { content: "Fill in the fields above to see your result."; display: block; padding: 16px 0; font-size: 14px; color: var(--muted); }
@media print { .tool [id$="-out"]:empty::before { content: none; } }
/* field borders at 3:1 or better against panels (WCAG 1.4.11) */
:root { --field: #85827c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --field: #767b85; } }
:root[data-theme="dark"] { --field: #767b85; }
input[type=text], input[type=number], input[type=date], input[type=time], select, textarea { border-color: var(--field); }
.table-wrap[tabindex]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* simple calculators: grid with top-aligned fields so labels and boxes line up whatever the hint length */
#sp-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 20px; align-items: start; }
#sp-form > .field { flex: none !important; }
#sp-form > label.check { grid-column: 1 / -1; }
#sp-form .field > small.note { font-size: 13px; line-height: 1.4; margin-top: 2px; }
.with-unit { display: flex; gap: 8px; }
.with-unit > input { flex: 1 1 auto; min-width: 0; }
.with-unit > select { flex: 0 0 88px; width: 88px; }
@media (min-width: 560px) { #sp-form > .wide { grid-column: span 2; } }
.panel .row { align-items: flex-start; }
.panel .row > label.check { margin-top: 24px; min-height: 48px; }
/* long tables: scroll inside a box with the header row (and first column) pinned */
.table-wrap.tall { max-height: 72vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); }
.table-wrap.tall thead th { position: sticky; top: 0; z-index: 2; }
.table-wrap.tall thead th:first-child { z-index: 3; }
@media print { .table-wrap.tall { max-height: none; overflow: visible; border: 0; } .table-wrap.tall thead th { position: static; } }