/* ScotBus Network & Fleet: the theme. */
/* LEARN: Everything visual comes from the tokens (custom properties) at the top. Colour modes and presets */
/* LEARN: only swap token values; the component rules underneath never mention a colour or a radius directly. */
/* LEARN: Lines that start with "LEARN:" are teaching notes; tools/strip_learn.php removes them for production. */

/* ------------------------------------------------------------------------------------------------
   1. Tokens: light mode (the base)
   ------------------------------------------------------------------------------------------------ */
:root {
  --tk-font: Inter, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --tk-font-mono: "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --tk-font-plate: "Charles Wright", "DIN Alternate", "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

  --tk-bg: #f3f5f7;
  --tk-surface: #ffffff;
  --tk-surface-2: #e9edf1;
  --tk-text: #1a1f26;
  --tk-muted: #58636f;
  --tk-border: #cfd6dd;
  --tk-border-strong: #7f8c99;
  --tk-link: #0b5aa3;
  --tk-focus: #ffbf47;
  --tk-focus-ink: #0b0c0c;

  --tk-brand: #0b3d5c;        /* overridden per page by the nonce'd <style> block */
  --tk-brand-ink: #ffffff;

  --tk-ok-bg: #e2f3e7;  --tk-ok-text: #0d5126;  --tk-ok-line: #1f7a3f;
  --tk-warn-bg: #fff0d2; --tk-warn-text: #6d4400; --tk-warn-line: #b36b00;
  --tk-bad-bg: #fce6e4;  --tk-bad-text: #8a1a12;  --tk-bad-line: #b42318;
  --tk-info-bg: #e2edfa; --tk-info-text: #0b3a6b; --tk-info-line: #0b5aa3;
  --tk-muted-bg: #eceff2; --tk-muted-text: #4a545e; --tk-muted-line: #9aa4ae;
  --tk-danger-bg: #b42318; --tk-danger-ink: #ffffff;

  --tk-plate-bg: #f7d117;
  --tk-plate-ink: #111111;

  --tk-shadow: none;
  --tk-radius: 4px;
  --tk-radius-s: 3px;
  --tk-space: 0.75rem;
  --tk-line: 1px;
  --tk-menu-w: 240px;
  --tk-menu-bg: #ffffff;
  --tk-menu-text: #1a1f26;
  --tk-menu-hover: #e9edf1;
}

/* ------------------------------------------------------------------------------------------------
   2. Colour modes
   ------------------------------------------------------------------------------------------------ */
/* LEARN: "auto" follows the device: the two media queries below apply dark and high-contrast tokens */
/* LEARN: only while data-mode is auto. The explicit modes repeat the same tokens so a person's choice */
/* LEARN: wins over the device. Windows contrast themes (forced-colors) are respected at the end. */
[data-mode="dim"] {
  --tk-bg: #2a323c; --tk-surface: #343d49; --tk-surface-2: #3d4856;
  --tk-text: #eef2f6; --tk-muted: #b4bec9; --tk-border: #4e5a68; --tk-border-strong: #7c8997;
  --tk-link: #93c6ff; --tk-focus: #ffd45c;
  --tk-ok-bg: #22422f; --tk-ok-text: #b9f0c9; --tk-ok-line: #4fbf74;
  --tk-warn-bg: #4a3a16; --tk-warn-text: #ffd98c; --tk-warn-line: #e0a53a;
  --tk-bad-bg: #4d2321; --tk-bad-text: #ffb8b1; --tk-bad-line: #ef6f66;
  --tk-info-bg: #1f3650; --tk-info-text: #b9d9ff; --tk-info-line: #6fb1f7;
  --tk-muted-bg: #3d4856; --tk-muted-text: #cdd5de; --tk-muted-line: #7c8997;
  --tk-danger-bg: #ef6f66; --tk-danger-ink: #1a1f26;
  --tk-menu-bg: #222931; --tk-menu-text: #eef2f6; --tk-menu-hover: #343d49;
}
@media (prefers-color-scheme: dark) {
  [data-mode="auto"] {
    --tk-bg: #0f1620; --tk-surface: #182230; --tk-surface-2: #1f2b3b;
    --tk-text: #e6ebf0; --tk-muted: #a7b1bd; --tk-border: #2e3b4b; --tk-border-strong: #60718a;
    --tk-link: #8ec0f4; --tk-focus: #ffd45c;
    --tk-ok-bg: #16331f; --tk-ok-text: #9fe3b3; --tk-ok-line: #3fae62;
    --tk-warn-bg: #3b2d0c; --tk-warn-text: #f3c56d; --tk-warn-line: #d79a2b;
    --tk-bad-bg: #401a18; --tk-bad-text: #f7a59c; --tk-bad-line: #e8695f;
    --tk-info-bg: #122a44; --tk-info-text: #a9cff6; --tk-info-line: #5aa3ec;
    --tk-muted-bg: #1f2b3b; --tk-muted-text: #c0c9d3; --tk-muted-line: #60718a;
  --tk-danger-bg: #e8695f; --tk-danger-ink: #1a1f26;
    --tk-danger-bg: #e8695f; --tk-danger-ink: #1a1f26;
    --tk-menu-bg: #0b1119; --tk-menu-text: #e6ebf0; --tk-menu-hover: #182230;
  }
}
[data-mode="dark"] {
  --tk-bg: #0f1620; --tk-surface: #182230; --tk-surface-2: #1f2b3b;
  --tk-text: #e6ebf0; --tk-muted: #a7b1bd; --tk-border: #2e3b4b; --tk-border-strong: #60718a;
  --tk-link: #8ec0f4; --tk-focus: #ffd45c;
  --tk-ok-bg: #16331f; --tk-ok-text: #9fe3b3; --tk-ok-line: #3fae62;
  --tk-warn-bg: #3b2d0c; --tk-warn-text: #f3c56d; --tk-warn-line: #d79a2b;
  --tk-bad-bg: #401a18; --tk-bad-text: #f7a59c; --tk-bad-line: #e8695f;
  --tk-info-bg: #122a44; --tk-info-text: #a9cff6; --tk-info-line: #5aa3ec;
  --tk-muted-bg: #1f2b3b; --tk-muted-text: #c0c9d3; --tk-muted-line: #60718a;
  --tk-danger-bg: #e8695f; --tk-danger-ink: #1a1f26;
  --tk-menu-bg: #0b1119; --tk-menu-text: #e6ebf0; --tk-menu-hover: #182230;
}
@media (prefers-contrast: more) {
  [data-mode="auto"] {
    --tk-bg: #000000; --tk-surface: #000000; --tk-surface-2: #141414;
    --tk-text: #ffffff; --tk-muted: #e6e6e6; --tk-border: #ffffff; --tk-border-strong: #ffffff;
    --tk-link: #ffff00; --tk-focus: #ffffff;
    --tk-ok-bg: #000000; --tk-ok-text: #ffffff; --tk-ok-line: #ffffff;
    --tk-warn-bg: #000000; --tk-warn-text: #ffffff; --tk-warn-line: #ffffff;
    --tk-bad-bg: #000000; --tk-bad-text: #ffffff; --tk-bad-line: #ffffff;
    --tk-info-bg: #000000; --tk-info-text: #ffffff; --tk-info-line: #ffffff;
    --tk-muted-bg: #000000; --tk-muted-text: #ffffff; --tk-muted-line: #ffffff;
  --tk-danger-bg: #000000; --tk-danger-ink: #ffffff;
    --tk-danger-bg: #000000; --tk-danger-ink: #ffffff;
    --tk-menu-bg: #000000; --tk-menu-text: #ffffff; --tk-menu-hover: #262626;
    --tk-line: 2px; --tk-shadow: none;
  }
}
[data-mode="contrast"] {
  --tk-bg: #000000; --tk-surface: #000000; --tk-surface-2: #141414;
  --tk-text: #ffffff; --tk-muted: #e6e6e6; --tk-border: #ffffff; --tk-border-strong: #ffffff;
  --tk-link: #ffff00; --tk-focus: #ffffff;
  --tk-ok-bg: #000000; --tk-ok-text: #ffffff; --tk-ok-line: #ffffff;
  --tk-warn-bg: #000000; --tk-warn-text: #ffffff; --tk-warn-line: #ffffff;
  --tk-bad-bg: #000000; --tk-bad-text: #ffffff; --tk-bad-line: #ffffff;
  --tk-info-bg: #000000; --tk-info-text: #ffffff; --tk-info-line: #ffffff;
  --tk-muted-bg: #000000; --tk-muted-text: #ffffff; --tk-muted-line: #ffffff;
  --tk-danger-bg: #000000; --tk-danger-ink: #ffffff;
  --tk-menu-bg: #000000; --tk-menu-text: #ffffff; --tk-menu-hover: #262626;
  --tk-line: 2px; --tk-shadow: none;
}
[data-mode="contrast"] a, [data-mode="contrast"] .tk-button--ghost { text-decoration: underline; }
[data-mode="contrast"] .tk-button--primary { background: #ffffff; color: #000000; border-color: #ffffff; }
[data-mode="contrast"] .tk-plate { outline: 2px solid #ffffff; }
[data-mode="contrast"] .tk-menu__link.is-current { background: #ffffff; color: #000000; }

/* ------------------------------------------------------------------------------------------------
   3. Presets, text size and density
   ------------------------------------------------------------------------------------------------ */
[data-preset="balanced"] { --tk-radius: 8px; --tk-radius-s: 5px; --tk-space: 1rem; --tk-shadow: 0 1px 2px rgba(0,0,0,.08); }
[data-preset="soft"]     { --tk-radius: 14px; --tk-radius-s: 8px; --tk-space: 1.15rem; --tk-shadow: 0 4px 14px rgba(0,0,0,.09); }
[data-text="90"]  { font-size: 90%; }
[data-text="100"] { font-size: 100%; }
[data-text="110"] { font-size: 110%; }
[data-text="120"] { font-size: 120%; }
[data-text="130"] { font-size: 130%; }
[data-density="compact"] { --tk-space: 0.5rem; }
[data-density="compact"] .tk-table th, [data-density="compact"] .tk-table td { padding: 0.3rem 0.5rem; }
/* LEARN: Dense is the spreadsheet look: small type, tight rows, zebra stripes, grid lines, no breathing room. */
/* LEARN: Every rule is an override of a token or a component, so nothing else needs to know it exists. */
/* LEARN: Rows are at least 24px tall and buttons at least 24px, the WCAG 2.2 target-size minimum (2.5.8). */
[data-density="dense"] { --tk-space: 0.35rem; --tk-radius: 3px; --tk-radius-s: 2px; --tk-shadow: none; font-size: 87.5%; }
[data-density="dense"] body { line-height: 1.3; }
[data-density="dense"] .tk-main { padding: 0.5rem 0.75rem; max-width: none; }
[data-density="dense"] .tk-h1 { font-size: 1.2rem; }
[data-density="dense"] .tk-h2 { font-size: 0.95rem; margin: 0 0 0.3rem; }
[data-density="dense"] .tk-h3 { font-size: 0.875rem; margin: 0.4rem 0 0.2rem; }
[data-density="dense"] .tk-subtitle { font-size: 0.85rem; margin-top: -0.2rem; }
[data-density="dense"] .tk-crumbs ol { margin-bottom: 0.2rem; font-size: 0.8rem; }
[data-density="dense"] .tk-page-head { margin-bottom: 0.4rem; gap: 0.4rem; }
[data-density="dense"] .tk-page-head--brand { border-left-width: 3px; padding-left: 0.5rem; }
[data-density="dense"] .tk-card { padding: 0.5rem 0.6rem; margin-bottom: 0.4rem; }
[data-density="dense"] .tk-grid { gap: 0.4rem; }
[data-density="dense"] .tk-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0.4rem; margin-bottom: 0.4rem; }
[data-density="dense"] .tk-tile { padding: 0.4rem 0.6rem; grid-template-columns: auto 1fr; align-items: center; gap: 0.1rem 0.5rem; }
[data-density="dense"] .tk-tile .tk-icon { width: 1.1rem; height: 1.1rem; grid-row: span 2; }
[data-density="dense"] .tk-tile__blurb { font-size: 0.75rem; }
[data-density="dense"] .tk-kpis { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.35rem; margin-bottom: 0.4rem; }
[data-density="dense"] .tk-kpi { padding: 0.3rem 0.5rem; gap: 0; }
[data-density="dense"] .tk-kpi__label { font-size: 0.68rem; letter-spacing: 0.04em; }
[data-density="dense"] .tk-kpi__value { font-size: 1.15rem; }
[data-density="dense"] .tk-kpi__value--long { font-size: 0.95rem; }
[data-density="dense"] .tk-kpi__note { font-size: 0.75rem; }
[data-density="dense"] .tk-table { font-size: 0.8125rem; border: var(--tk-line) solid var(--tk-border); }
[data-density="dense"] .tk-table th, [data-density="dense"] .tk-table td { padding: 0.2rem 0.4rem; border-right: var(--tk-line) solid var(--tk-border); line-height: 1.35; }
[data-density="dense"] .tk-table th:last-child, [data-density="dense"] .tk-table td:last-child { border-right: 0; }
[data-density="dense"] .tk-table thead th { font-size: 0.7rem; letter-spacing: 0.03em; padding-top: 0.2rem; padding-bottom: 0.2rem; }
[data-density="dense"] .tk-table tbody tr:nth-child(even) { background: var(--tk-surface-2); }
[data-density="dense"] .tk-table tbody tr:hover { background: var(--tk-menu-hover); }
[data-density="dense"] .tk-table-wrap { margin-bottom: 0.3rem; }
[data-density="dense"] .tk-status { font-size: 0.72rem; padding: 0 0.4rem 0 0.3rem; gap: 0.2rem; }
[data-density="dense"] .tk-status .tk-icon { width: 0.8rem; height: 0.8rem; }
[data-density="dense"] .tk-code, [data-density="dense"] .tk-route-number { font-size: 0.75rem; padding: 0 0.3rem; }
[data-density="dense"] .tk-button { min-height: 30px; padding: 0.2rem 0.6rem; font-size: 0.8rem; gap: 0.3rem; }
[data-density="dense"] .tk-button .tk-icon { width: 0.9rem; height: 0.9rem; }
[data-density="dense"] .tk-chip { min-height: 26px; padding: 0 0.55rem; font-size: 0.78rem; }
[data-density="dense"] .tk-chips { gap: 0.25rem; margin-bottom: 0.4rem; }
[data-density="dense"] .tk-dl { gap: 0.15rem 0.6rem; grid-template-columns: minmax(7rem, 10rem) 1fr; font-size: 0.85rem; }
[data-density="dense"] .tk-dl dd { min-height: 24px; }
[data-density="dense"] .tk-details > summary { min-height: 30px; padding: 0.3rem 0.5rem; font-size: 0.85rem; }
[data-density="dense"] .tk-flash { padding: 0.3rem 0.6rem; margin-bottom: 0.4rem; font-size: 0.85rem; }
[data-density="dense"] .tk-hint { font-size: 0.78rem; margin-bottom: 0.15rem; }
[data-density="dense"] .tk-field { margin-bottom: 0.4rem; }
[data-density="dense"] .tk-input, [data-density="dense"] .tk-select, [data-density="dense"] .tk-textarea { padding: 0.2rem 0.4rem; min-height: 30px; font-size: 0.85rem; border-width: 1px; }
[data-density="dense"] .tk-label { font-size: 0.85rem; margin-bottom: 0.1rem; }
[data-density="dense"] .tk-steps { gap: 0.2rem; }
[data-density="dense"] .tk-steps__item { padding: 0.2rem 0.5rem; font-size: 0.85rem; }
[data-density="dense"] .tk-timeline__item, [data-density="dense"] .tk-list li { margin-bottom: 0.1rem; }
[data-density="dense"] .tk-menu__link { min-height: 32px; padding: 0.3rem 0.8rem; font-size: 0.85rem; gap: 0.5rem; }
[data-density="dense"] .tk-menu__link .tk-icon { width: 1rem; height: 1rem; }
[data-density="dense"] .tk-menu__brand { padding: 0.5rem 0.8rem; }
[data-density="dense"] .tk-topbar { padding: 0.25rem 0.75rem; font-size: 0.85rem; min-height: 0; }
[data-density="dense"] .tk-foot { padding: 0.4rem 0.75rem; font-size: 0.72rem; }
[data-density="dense"] .tk-map { height: 360px; }
[data-density="dense"] .tk-operator-head { margin-bottom: 0.2rem; }
/* LEARN: One line per row, as a spreadsheet: cells do not wrap, long text is cut with an ellipsis (the */
/* LEARN: record page has the whole of it), stacked "date / age" pairs run on one line, and the row */
/* LEARN: action buttons shrink to links. Tables wider than the screen scroll sideways, as in Excel. */
[data-density="dense"] .tk-table td, [data-density="dense"] .tk-table tbody th { white-space: nowrap; max-width: 24rem; overflow: hidden; text-overflow: ellipsis; }
[data-density="dense"] .tk-table td br { display: none; }
[data-density="dense"] .tk-table td br + .tk-muted::before, [data-density="dense"] .tk-table td br + .tk-small::before { content: " · "; }
[data-density="dense"] .tk-plate { font-size: 0.78em; padding: 0 0.3em; letter-spacing: 0.02em; }
[data-density="dense"] .tk-table .tk-button { min-height: 24px; padding: 0 0.4rem; font-size: 0.75rem; border-color: transparent; background: transparent; color: var(--tk-link); box-shadow: none; }
[data-density="dense"] .tk-table .tk-button:hover { text-decoration: underline; }
[data-density="dense"] .tk-table .tk-button .tk-icon { display: none; }
[data-density="dense"] .tk-table .tk-actions-cell { padding-top: 0; padding-bottom: 0; }
[data-density="dense"] .tk-table .tk-meter { height: 0.6rem; }
[data-density="dense"] .tk-card--operator { border-top-width: 3px; }

/* ------------------------------------------------------------------------------------------------
   4. Base
   ------------------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--tk-font); line-height: 1.5; -webkit-text-size-adjust: 100%; color-scheme: light; }
[data-mode="dim"], [data-mode="dark"], [data-mode="contrast"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { [data-mode="auto"] { color-scheme: dark; } }
body { margin: 0; background: var(--tk-bg); color: var(--tk-text); min-height: 100vh; }
a { color: var(--tk-link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--tk-space); font-weight: 650; letter-spacing: -0.01em; }
.tk-h1 { font-size: 1.75rem; }
.tk-h2 { font-size: 1.2rem; }
.tk-h3 { font-size: 1rem; margin-top: var(--tk-space); }
p { margin: 0 0 var(--tk-space); }
ul, ol { margin: 0 0 var(--tk-space); padding-left: 1.25rem; }
code, .tk-code, .tk-hash { font-family: var(--tk-font-mono); font-size: 0.875em; }
.tk-code { background: var(--tk-surface-2); border: var(--tk-line) solid var(--tk-border); border-radius: var(--tk-radius-s); padding: 0 0.3em; white-space: nowrap; }
.tk-muted { color: var(--tk-muted); }
.tk-small { font-size: 0.875rem; }
.tk-mt { margin-top: var(--tk-space); }
.tk-num { text-align: right; font-variant-numeric: tabular-nums; }
.tk-cluster { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.tk-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* LEARN: One focus style everywhere: a thick yellow ring with a dark inner line, visible on any background. */
/* LEARN: :focus-visible means mouse clicks do not draw it, keyboard focus always does. */
:focus-visible { outline: 3px solid var(--tk-focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--tk-focus-ink); }
.tk-skip { position: absolute; left: -999px; top: 0.5rem; background: var(--tk-focus); color: var(--tk-focus-ink); padding: 0.5rem 1rem; z-index: 100; font-weight: 600; }
.tk-skip:focus { left: 0.5rem; }

/* ------------------------------------------------------------------------------------------------
   5. Frame: menu, top bar, main
   ------------------------------------------------------------------------------------------------ */
.tk-shell { display: flex; min-height: 100vh; }
.tk-menu { width: var(--tk-menu-w); flex: 0 0 auto; background: var(--tk-menu-bg); color: var(--tk-menu-text); border-right: var(--tk-line) solid var(--tk-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.tk-menu__brand { display: flex; align-items: center; gap: 0.6rem; padding: 1rem; border-bottom: var(--tk-line) solid var(--tk-border); border-top: 5px solid var(--tk-brand); }
.tk-menu__mark { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--tk-radius); background: var(--tk-brand); color: var(--tk-brand-ink); font-weight: 700; letter-spacing: 0.02em; }
.tk-menu__name { font-weight: 650; line-height: 1.2; }
.tk-menu__list { list-style: none; margin: 0.5rem 0; padding: 0; flex: 1 1 auto; }
.tk-menu__link { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; color: inherit; text-decoration: none; min-height: 44px; border-left: 4px solid transparent; }
.tk-menu__link:hover { background: var(--tk-menu-hover); }
.tk-menu__link.is-current { border-left-color: var(--tk-brand); background: var(--tk-menu-hover); font-weight: 650; }
.tk-menu__foot { padding: 0.75rem 1rem; font-size: 0.8rem; color: var(--tk-muted); border-top: var(--tk-line) solid var(--tk-border); }
.tk-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tk-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--tk-surface); border-bottom: var(--tk-line) solid var(--tk-border); min-height: 56px; }
.tk-topbar .tk-topbar__menu { display: none; }
.tk-topbar__world { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--tk-muted); }
.tk-topbar__world strong { color: var(--tk-text); }
.tk-topbar__spacer { flex: 1 1 auto; }
.tk-topbar__user { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0.5rem; }
.tk-inline-form { display: inline; margin: 0; }
.tk-main { padding: calc(var(--tk-space) * 1.5) calc(var(--tk-space) * 2); max-width: 1180px; width: 100%; flex: 1 1 auto; }
.tk-main--wide { max-width: 1600px; }
.tk-main:focus { outline: none; }
.tk-foot { padding: 1rem 2rem; color: var(--tk-muted); font-size: 0.8rem; border-top: var(--tk-line) solid var(--tk-border); }
.tk-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--tk-muted); }
.tk-crumbs li + li::before { content: "›"; margin-right: 0.35rem; }
.tk-page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--tk-space); margin-bottom: var(--tk-space); }
.tk-page-head--brand { border-left: 5px solid var(--tk-brand); padding-left: calc(var(--tk-space) * 1.25); }
.tk-page-head__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.tk-eyebrow { margin: 0 0 0.25rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tk-muted); font-weight: 600; }
.tk-subtitle { color: var(--tk-muted); margin: -0.5rem 0 0; max-width: 70ch; }

/* Plain pages (sign in) */
.tk-plain__main { display: grid; place-items: center; min-height: 100vh; padding: var(--tk-space); }
.tk-plain__card { width: min(100%, 440px); background: var(--tk-surface); border: var(--tk-line) solid var(--tk-border); border-top: 5px solid var(--tk-brand); border-radius: var(--tk-radius); padding: calc(var(--tk-space) * 2); box-shadow: var(--tk-shadow); }
.tk-choice-list { list-style: none; padding: 0; margin: 0 0 var(--tk-space); display: grid; gap: 0.5rem; }
.tk-choice { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; background: var(--tk-surface); color: inherit; border: var(--tk-line) solid var(--tk-border); border-radius: var(--tk-radius); padding: 0.75rem; cursor: pointer; font: inherit; min-height: 44px; }
.tk-choice:hover { background: var(--tk-surface-2); }
.tk-choice__mark { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--tk-radius); background: var(--tk-brand); color: var(--tk-brand-ink); font-weight: 700; }
.tk-choice__text { display: grid; flex: 1 1 auto; }

/* ------------------------------------------------------------------------------------------------
   6. Components
   ------------------------------------------------------------------------------------------------ */
.tk-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; vertical-align: -0.3em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-preset="soft"] .tk-icon { stroke-width: 1.75; }

.tk-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; padding: 0.5rem 1rem; border-radius: var(--tk-radius); border: var(--tk-line) solid var(--tk-border-strong); background: var(--tk-surface); color: var(--tk-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2; }
.tk-button:hover { background: var(--tk-surface-2); }
.tk-button--primary { background: var(--tk-brand); color: var(--tk-brand-ink); border-color: var(--tk-brand); }
.tk-button--primary:hover { filter: brightness(1.12); background: var(--tk-brand); }
.tk-button--danger { background: var(--tk-danger-bg); color: var(--tk-danger-ink); border-color: var(--tk-bad-line); }
.tk-button--danger:hover { filter: brightness(1.1); background: var(--tk-danger-bg); }
.tk-button--ghost { background: transparent; border-color: transparent; }
.tk-button--ghost-danger { background: transparent; border-color: transparent; color: var(--tk-bad-text); min-height: 36px; padding: 0.25rem 0.5rem; }
.tk-button--ghost-danger:hover { background: var(--tk-bad-bg); }
.tk-button--small { min-height: 36px; padding: 0.25rem 0.6rem; font-size: 0.875rem; }
.tk-link-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; }
.tk-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: var(--tk-space); }
.tk-actions-cell { white-space: nowrap; }
/* Tweak 2026-10-29: the market's Cart and Buy buttons stacked, so a row fits a laptop screen. */
.tk-actions-cell--stack .tk-inline-form { display: block; margin: 0 0 0.25rem; }

.tk-status { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem 0.1rem 0.4rem; border-radius: 999px; border: var(--tk-line) solid; font-size: 0.85rem; font-weight: 600; white-space: nowrap; line-height: 1.4; }
.tk-status--ok   { background: var(--tk-ok-bg);   color: var(--tk-ok-text);   border-color: var(--tk-ok-line); }
.tk-status--warn { background: var(--tk-warn-bg); color: var(--tk-warn-text); border-color: var(--tk-warn-line); }
.tk-status--bad  { background: var(--tk-bad-bg);  color: var(--tk-bad-text);  border-color: var(--tk-bad-line); }
.tk-status--info { background: var(--tk-info-bg); color: var(--tk-info-text); border-color: var(--tk-info-line); }
.tk-status--muted{ background: var(--tk-muted-bg);color: var(--tk-muted-text);border-color: var(--tk-muted-line); }

.tk-flash { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; border-radius: var(--tk-radius); border: var(--tk-line) solid; margin-bottom: var(--tk-space); font-weight: 600; }
.tk-flash--ok   { background: var(--tk-ok-bg); color: var(--tk-ok-text); border-color: var(--tk-ok-line); }
.tk-flash--bad  { background: var(--tk-bad-bg); color: var(--tk-bad-text); border-color: var(--tk-bad-line); }
.tk-flash--info, .tk-flash--warn { background: var(--tk-info-bg); color: var(--tk-info-text); border-color: var(--tk-info-line); }

/* LEARN: The plate: black on yellow, condensed capitals, like the rear plate of a bus. */
.tk-plate { display: inline-block; font-family: var(--tk-font-plate); font-weight: 700; font-size: 0.95em; letter-spacing: 0.04em; background: var(--tk-plate-bg); color: var(--tk-plate-ink); border: 1px solid #b89a00; border-radius: 3px; padding: 0 0.4em; line-height: 1.5; white-space: nowrap; text-transform: uppercase; }
.tk-plate-link { text-decoration: none; }
.tk-plate-link:hover .tk-plate, .tk-plate-link:focus-visible .tk-plate { outline: 2px solid var(--tk-link); outline-offset: 1px; }
.tk-route-number { display: inline-block; font-weight: 700; font-family: var(--tk-font-mono); background: var(--tk-brand); color: var(--tk-brand-ink); border-radius: var(--tk-radius-s); padding: 0 0.45em; text-decoration: none; min-width: 3.2em; text-align: center; }
.tk-route-number:hover { filter: brightness(1.15); }
.tk-place { font-weight: 600; }
.tk-via { max-width: 26ch; color: var(--tk-muted); font-size: 0.875rem; }

.tk-card { background: var(--tk-surface); border: var(--tk-line) solid var(--tk-border); border-radius: var(--tk-radius); padding: calc(var(--tk-space) * 1.25); margin-bottom: var(--tk-space); box-shadow: var(--tk-shadow); min-width: 0; }
.tk-card--operator { border-top: 5px solid var(--tk-brand); }
.tk-operator-head { display: flex; align-items: center; gap: 0.6rem; }
.tk-operator-head .tk-h2 { margin-bottom: 0; }
.tk-operator-head + .tk-kpis, .tk-operator-head + .tk-dl { margin-top: var(--tk-space); }
.tk-swatch { width: 1rem; height: 1rem; border-radius: 50%; background: var(--tk-brand); flex: 0 0 auto; }
.tk-brand-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--tk-brand); margin-right: 0.35rem; vertical-align: 0.05em; }
.tk-grid { display: grid; gap: var(--tk-space); }
.tk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.tk-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.tk-grid > .tk-card { margin-bottom: 0; }
.tk-group-head { margin-top: calc(var(--tk-space) * 1.5); display: flex; align-items: center; gap: 0.2rem; }

.tk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--tk-space); margin-bottom: var(--tk-space); }
.tk-kpi { display: grid; gap: 0.1rem; padding: 0.75rem; border-radius: var(--tk-radius); background: var(--tk-surface-2); }
.tk-kpi__label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tk-muted); font-weight: 600; }
.tk-kpi__value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* LEARN: A nine-figure balance does not fit at the headline size; long values step down rather than clip. */
.tk-kpi__value--long { font-size: 1.05rem; letter-spacing: -0.01em; }
.tk-kpi__note { font-size: 0.85rem; color: var(--tk-muted); }

.tk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--tk-space); margin-bottom: var(--tk-space); }
.tk-tile { display: grid; gap: 0.2rem; padding: var(--tk-space); background: var(--tk-surface); border: var(--tk-line) solid var(--tk-border); border-radius: var(--tk-radius); text-decoration: none; color: inherit; box-shadow: var(--tk-shadow); min-height: 44px; }
.tk-tile:hover { border-color: var(--tk-brand); }
.tk-tile .tk-icon { width: 1.75rem; height: 1.75rem; color: var(--tk-brand); }
.tk-tile__label { font-weight: 650; }
.tk-tile__blurb { color: var(--tk-muted); font-size: 0.875rem; }

.tk-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--tk-space); }
.tk-chip { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 36px; padding: 0.2rem 0.75rem; border-radius: 999px; border: var(--tk-line) solid var(--tk-border-strong); background: var(--tk-surface); color: var(--tk-text); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.tk-chip:hover { background: var(--tk-surface-2); }
.tk-chip.is-current { background: var(--tk-brand); color: var(--tk-brand-ink); border-color: var(--tk-brand); }
.tk-chip__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--tk-brand); }
.tk-chip.is-current .tk-chip__dot { background: var(--tk-brand-ink); }
.tk-chip__count { opacity: 0.8; font-weight: 500; }

.tk-filters { background: var(--tk-surface); border: var(--tk-line) solid var(--tk-border); border-radius: var(--tk-radius); padding: var(--tk-space); margin-bottom: var(--tk-space); }
.tk-filters__row { display: flex; flex-wrap: wrap; gap: var(--tk-space); align-items: flex-end; }
.tk-filters .tk-field { margin: 0; flex: 1 1 12rem; }
.tk-filters .tk-field--button { flex: 0 0 auto; display: flex; align-items: center; gap: 0.25rem; }
.tk-filters .tk-input, .tk-filters .tk-select { width: 100%; }

.tk-table-wrap { overflow-x: auto; background: var(--tk-surface); border: var(--tk-line) solid var(--tk-border); border-radius: var(--tk-radius); margin-bottom: var(--tk-space); box-shadow: var(--tk-shadow); }
.tk-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tk-table--fleet { font-size: 0.875rem; }
.tk-nowrap { white-space: nowrap; }
.tk-table th, .tk-table td { padding: 0.5rem 0.65rem; text-align: left; vertical-align: top; border-bottom: var(--tk-line) solid var(--tk-border); }
.tk-table thead th { background: var(--tk-surface-2); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tk-muted); white-space: nowrap; }
.tk-table tbody th { font-weight: 600; }
.tk-table tbody tr:hover { background: var(--tk-surface-2); }
.tk-table tfoot th, .tk-table tfoot td { font-weight: 700; background: var(--tk-surface-2); border-bottom: 0; }
.tk-table tr[data-brand] > th:first-child { box-shadow: inset 4px 0 0 var(--tk-brand); }
.tk-meter { width: 100%; max-width: 12rem; height: 1rem; }
.tk-meter::-webkit-meter-bar { background: var(--tk-surface-2); border: var(--tk-line) solid var(--tk-border); border-radius: 3px; }
.tk-meter::-webkit-meter-optimum-value { background: var(--tk-ok-line); }
.tk-meter::-webkit-meter-suboptimum-value { background: var(--tk-warn-line); }
.tk-meter::-webkit-meter-even-less-good-value { background: var(--tk-bad-line); }
.tk-meter:-moz-meter-optimum::-moz-meter-bar { background: var(--tk-ok-line); }
.tk-meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--tk-warn-line); }
.tk-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--tk-bad-line); }

.tk-dl { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 0.35rem 1rem; margin: 0; }
.tk-dl dt { color: var(--tk-muted); font-weight: 600; }
.tk-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tk-dl--tight { gap: 0.2rem 1rem; }
.tk-record-head { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: var(--tk-space); font-size: 1.1rem; }
.tk-list { padding-left: 1.1rem; }
.tk-list--plain { list-style: none; padding: 0; margin: 0; }
.tk-list li { margin-bottom: 0.25rem; }

.tk-empty { display: grid; justify-items: center; gap: 0.5rem; padding: calc(var(--tk-space) * 2); color: var(--tk-muted); text-align: center; }
.tk-empty .tk-icon { width: 2.5rem; height: 2.5rem; }
.tk-empty p { margin: 0; }

.tk-details { background: var(--tk-surface); border: var(--tk-line) solid var(--tk-border); border-radius: var(--tk-radius); margin-bottom: var(--tk-space); }
.tk-details > summary { cursor: pointer; padding: 0.75rem var(--tk-space); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.tk-details > summary:hover { background: var(--tk-surface-2); }
/* Tweak 2026-10-31: a + that turns to − shows a section opens and closes (the browser's own triangle goes with flex). */
.tk-details > summary { list-style: none; gap: 0.6rem; }
.tk-details > summary::-webkit-details-marker { display: none; }
.tk-details > summary::before { content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border: var(--tk-line) solid var(--tk-border); border-radius: 4px; font-weight: 700; line-height: 1; }
.tk-details[open] > summary::before { content: "\2212"; }
.tk-details > :not(summary) { margin-left: var(--tk-space); margin-right: var(--tk-space); }
.tk-details > :last-child:not(summary) { margin-bottom: var(--tk-space); }
.tk-details--inline { margin-top: var(--tk-space); }
.tk-history, .tk-timeline { list-style: none; padding: 0; margin: 0 0 var(--tk-space); }
.tk-history__item, .tk-timeline__item { display: grid; grid-template-columns: minmax(10rem, 12rem) 1fr; gap: 0.5rem 1rem; padding: 0.5rem 0; border-bottom: var(--tk-line) dashed var(--tk-border); align-items: start; }
.tk-history__when, .tk-timeline__date { color: var(--tk-muted); font-variant-numeric: tabular-nums; }
.tk-timeline__item { display: flex; flex-wrap: wrap; align-items: center; }
.tk-history__changes, .tk-diff { margin: 0; padding-left: 1rem; font-size: 0.9rem; }
.tk-from { color: var(--tk-bad-text); text-decoration: line-through; }
.tk-to { color: var(--tk-ok-text); font-weight: 600; }
.tk-audit { list-style: none; padding: 0; margin: 0 0 var(--tk-space); }
.tk-audit li { padding: 0.35rem 0; border-bottom: var(--tk-line) dashed var(--tk-border); }
.tk-audit__when { color: var(--tk-muted); font-variant-numeric: tabular-nums; }
.tk-audit__who { font-weight: 600; }
.tk-hash { color: var(--tk-muted); }
.tk-pager { display: flex; align-items: center; gap: 1rem; justify-content: center; margin: var(--tk-space) 0; }
.tk-icons-demo { gap: 1rem; }
.tk-icon-demo { display: inline-grid; justify-items: center; gap: 0.2rem; font-size: 0.75rem; color: var(--tk-muted); min-width: 5rem; }
.tk-icon-demo .tk-icon { width: 1.5rem; height: 1.5rem; color: var(--tk-text); }

/* ------------------------------------------------------------------------------------------------
   7. Forms (GOV.UK patterns: label above, hint, error message, thick left border on error)
   ------------------------------------------------------------------------------------------------ */
.tk-field { margin-bottom: var(--tk-space); }
.tk-field--error { border-left: 5px solid var(--tk-bad-line); padding-left: 0.75rem; }
.tk-label, .tk-legend { display: block; font-weight: 600; margin-bottom: 0.2rem; }
.tk-required { color: var(--tk-bad-line); }
.tk-hint { color: var(--tk-muted); font-size: 0.9rem; margin-bottom: 0.3rem; }
.tk-error-message { color: var(--tk-bad-text); font-weight: 600; margin: 0 0 0.3rem; }
.tk-input, .tk-select, .tk-textarea { font: inherit; color: var(--tk-text); background: var(--tk-surface); border: 2px solid var(--tk-border-strong); border-radius: var(--tk-radius-s); padding: 0.45rem 0.6rem; min-height: 44px; width: 100%; max-width: 100%; }
.tk-input--error { border-color: var(--tk-bad-line); }
.tk-input--xs { max-width: 7rem; }
.tk-input--s { max-width: 12rem; }
.tk-input--m { max-width: 22rem; }
.tk-input--l { max-width: 34rem; }
.tk-select { max-width: 24rem; }
.tk-textarea { max-width: 40rem; resize: vertical; }
.tk-colour { width: 3rem; height: 44px; padding: 0.1rem; border: 2px solid var(--tk-border-strong); border-radius: var(--tk-radius-s); background: var(--tk-surface); }
.tk-field-row { display: flex; flex-wrap: wrap; gap: var(--tk-space); align-items: flex-start; }
.tk-fieldset { border: var(--tk-line) solid var(--tk-border); padding: calc(var(--tk-space) * 1.25); margin: 0; min-width: 0; }
.tk-fieldset > legend { padding: 0 0.4rem; }
.tk-legend { margin-bottom: 0.4rem; }
.tk-checkbox, .tk-radio { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; min-height: 44px; }
.tk-checkbox__input, .tk-radio__input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--tk-brand); flex: 0 0 auto; }
.tk-checkbox__hint { flex-basis: 100%; margin: -0.3rem 0 0.4rem 2.1rem; }
.tk-checkboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; margin-bottom: var(--tk-space); }
.tk-radios--inline { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.tk-error-summary { border: 4px solid var(--tk-bad-line); padding: var(--tk-space); margin-bottom: var(--tk-space); background: var(--tk-surface); }
.tk-error-summary__title { margin: 0 0 0.5rem; font-size: 1.1rem; }
.tk-error-summary__list { margin: 0; padding-left: 1.2rem; font-weight: 600; }
.tk-error-summary__list a { color: var(--tk-bad-text); }
.tk-form--inline .tk-field { display: inline-block; vertical-align: top; margin-right: 0.75rem; }
.tk-day-block { background: var(--tk-surface-2); border-radius: var(--tk-radius); padding: var(--tk-space); }
.tk-day-block .tk-h3 { margin-top: 0; }

/* ------------------------------------------------------------------------------------------------
   8. Small screens: the menu becomes a drawer, tables become cards
   ------------------------------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .tk-shell { display: block; }
  .tk-menu { position: fixed; inset: 0 auto 0 0; z-index: 30; height: 100vh; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 0 0 0 100vmax rgba(0,0,0,0); }
  .tk-menu.is-open { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
  .tk-topbar .tk-topbar__menu { display: inline-flex; }
  .tk-main { padding: var(--tk-space); }
}
@media (max-width: 760px) {
  .tk-topbar { gap: 0.25rem; padding: 0.5rem; }
  .tk-topbar__world { white-space: nowrap; font-size: 0.875rem; }
  .tk-topbar__world span, .tk-topbar__user { display: none; }
  /* LEARN: On phones the button labels are hidden visually but kept for screen readers. */
  .tk-topbar__mode span, .tk-topbar .tk-inline-form .tk-button span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tk-topbar .tk-button { padding: 0.5rem 0.6rem; }
  /* LEARN: The card layout. Each cell shows its column heading from data-label, so a row reads as a */
  /* LEARN: small record card instead of a strip that has to be scrolled sideways. */
  .tk-table--cards, .tk-table--cards tbody, .tk-table--cards tr, .tk-table--cards td, .tk-table--cards th { display: block; }
  .tk-table--cards thead, .tk-table--cards tfoot { display: none; }
  .tk-table--cards tr { border-bottom: 4px solid var(--tk-border); padding: 0.5rem 0; }
  .tk-table--cards tr[data-brand] { border-left: 5px solid var(--tk-brand); }
  .tk-table--cards tr[data-brand] > th:first-child { box-shadow: none; }
  .tk-table--cards td, .tk-table--cards th { border: 0; padding: 0.25rem 0.75rem; text-align: left; display: grid; grid-template-columns: 9rem 1fr; gap: 0.5rem; }
  .tk-table--cards td[data-label]::before, .tk-table--cards th[data-label]::before { content: attr(data-label); color: var(--tk-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; padding-top: 0.15rem; }
  .tk-table--cards td:not([data-label]), .tk-table--cards th:not([data-label]) { grid-template-columns: 1fr; }
  .tk-table--cards td:empty { display: none; }
  .tk-table--cards .tk-num { text-align: left; }
  .tk-table--cards .tk-via { max-width: none; }
  .tk-dl { grid-template-columns: 1fr; gap: 0 0; }
  .tk-dl dt { margin-top: 0.5rem; }
  .tk-history__item { grid-template-columns: 1fr; }
  .tk-form--inline .tk-field { display: block; margin-right: 0; }
}

/* ------------------------------------------------------------------------------------------------
   9. Print and motion
   ------------------------------------------------------------------------------------------------ */
@media print {
  .tk-menu, .tk-topbar, .tk-page-head__actions, .tk-actions, .tk-actions-cell, .tk-chips, .tk-filters, .tk-foot, .tk-skip, .tk-button, .tk-details--inline { display: none !important; }
  body { background: #fff; color: #000; }
  .tk-card, .tk-table-wrap { border-color: #999; box-shadow: none; break-inside: avoid; }
  .tk-details { border: 0; }
  .tk-details > summary { display: none; }
  .tk-details[open] > :not(summary), .tk-details > :not(summary) { display: block; }
  a { color: #000; text-decoration: none; }
  .tk-main { max-width: none; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .tk-status, .tk-chip, .tk-plate, .tk-route-number, .tk-button { border: 1px solid CanvasText; forced-color-adjust: auto; }
}

/* Confirm dialog (created by app.js) */
.tk-dialog { border: var(--tk-line) solid var(--tk-border-strong); border-top: 5px solid var(--tk-bad-line); border-radius: var(--tk-radius); background: var(--tk-surface); color: var(--tk-text); padding: calc(var(--tk-space) * 1.5); max-width: 32rem; width: min(100%, 32rem); }
.tk-dialog::backdrop { background: rgba(0,0,0,.5); }
.tk-dialog__text { font-size: 1.05rem; font-weight: 600; }

/* Setup page */
.tk-setup { width: min(100%, 680px); }
.tk-checks li { margin-bottom: 0.35rem; }
.tk-setup .tk-field-row .tk-field { flex: 0 1 auto; }

/* ---- eBus engine additions: maps, process steps, notices ---- */
/* LEARN: The map is a plain block the script fills; a fixed height keeps the page steady before and after Leaflet loads. */
/* LEARN: Leaflet's own stylesheet handles the tiles; these rules only size and frame it. */
.tk-map { height: 460px; border: var(--tk-line) solid var(--tk-border); border-radius: var(--tk-radius); background: var(--tk-surface-2); margin-bottom: 0.5rem; }
.tk-map--small { height: 320px; }
.tk-map-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.tk-map-point { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tk-brand); color: var(--tk-brand-ink); border: 2px solid #fff; font: 700 10px/1 var(--tk-font-mono); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.tk-map-point--unplaced { background: var(--tk-muted-bg); color: var(--tk-muted-text); }
.leaflet-container { font-family: inherit; }
.leaflet-container a { color: var(--tk-link); }
.tk-mono { font-family: var(--tk-font-mono); font-size: 0.85rem; }
.tk-steps { list-style: none; margin: 0 0 var(--tk-space); padding: 0; display: grid; gap: 0.5rem; }
.tk-steps__item { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.5rem 0.75rem; border-radius: var(--tk-radius-s); background: var(--tk-surface-2); color: var(--tk-muted); }
.tk-steps__item .tk-icon { flex: none; margin-top: 0.15rem; }
.tk-steps__item.is-done { color: var(--tk-text); background: var(--tk-ok-bg); border-left: 4px solid var(--tk-ok-line); }
.tk-steps__item.is-done .tk-icon { color: var(--tk-ok-text); }
.tk-status-line { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 var(--tk-space); }
.tk-list--attention li { margin-bottom: 0.4rem; }
.tk-kpi__value--bad { color: var(--tk-bad-text); }
.tk-bad-text { color: var(--tk-bad-text); }
.tk-topbar__group { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.5rem; padding: 0.2rem 0.6rem; border-radius: 999px; border: var(--tk-line) solid var(--tk-border-strong); color: var(--tk-text); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.tk-topbar__group:hover { background: var(--tk-surface-2); }
.tk-notice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.tk-notice { padding: 0.75rem; border-left: 4px solid var(--tk-brand); background: var(--tk-surface-2); border-radius: var(--tk-radius-s); }
.tk-notice__head { margin-bottom: 0.25rem; }
.tk-flash--warn { background: var(--tk-warn-bg); border-color: var(--tk-warn-line); color: var(--tk-text); }
.tk-flash--info { background: var(--tk-info-bg); border-color: var(--tk-info-line); color: var(--tk-text); }
@media (max-width: 760px) {
  .tk-map { height: 340px; }
  .tk-topbar__group span { display: none; }
}
@media print {
  .tk-map { height: 300px; }
}

/* ---- News feed and menu badge ---- */
.tk-menu__badge { margin-left: auto; min-width: 1.5em; padding: 0 0.45em; border-radius: 999px; background: var(--tk-brand); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1.5em; text-align: center; }
.tk-chips__gap { width: 100%; height: 0; }
.tk-feed { list-style: none; margin: 0 0 var(--tk-space); padding: 0; display: grid; gap: 0.6rem; }
.tk-feed__item { border: var(--tk-line) solid var(--tk-border); border-radius: var(--tk-radius); padding: 0.7rem 0.9rem; background: var(--tk-surface); border-left: 4px solid var(--tk-muted-line); }
.tk-feed__item.is-new { border-left-color: var(--tk-brand); }
.tk-feed__item.is-pinned { background: var(--tk-info-bg); }
.tk-feed__item--breakdown { border-left-color: var(--tk-bad-line); }
.tk-feed__item--pay { border-left-color: var(--tk-ok-line); }
.tk-feed__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; font-size: 0.85rem; color: var(--tk-muted); margin-bottom: 0.2rem; }
.tk-feed__date { font-weight: 700; color: var(--tk-text); }
.tk-feed__title { font-size: 1.05rem; margin: 0 0 0.25rem; }
.tk-feed__title a { display: inline-block; min-height: 24px; line-height: 24px; }
.tk-feed__body { white-space: normal; }
.tk-feed__actions { margin-top: 0.4rem; display: flex; gap: 0.4rem; }
.tk-feed__posted { font-size: 0.78rem; color: var(--tk-muted); margin-top: 0.3rem; }
[data-density="dense"] .tk-feed { gap: 0.3rem; }
[data-density="dense"] .tk-feed__item { padding: 0.4rem 0.6rem; }
[data-density="dense"] .tk-feed__title { font-size: 0.95rem; }
[data-density="dense"] .tk-feed__title a { min-height: 24px; line-height: 24px; }

/* ---- Livery studio ---- */
.tk-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--tk-space); }
.tk-gallery__item { border: var(--tk-line) solid var(--tk-border); border-radius: var(--tk-radius); background: #fff; overflow: hidden; }
.tk-gallery__item a { display: block; padding: 0.4rem; background: #fff; }
.tk-gallery__item img { display: block; width: 100%; height: 9rem; object-fit: contain; }
.tk-gallery__caption { padding: 0.4rem 0.6rem; font-size: 0.875rem; color: var(--tk-text); background: var(--tk-surface); border-top: var(--tk-line) solid var(--tk-border); }
.tk-gallery--nets .tk-gallery__item img { height: 7rem; }
.tk-paint { border: var(--tk-line) solid var(--tk-border); border-radius: var(--tk-radius); background: var(--tk-surface); margin-bottom: var(--tk-space); }
.tk-paint__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.6rem 0.9rem; border-bottom: var(--tk-line) solid var(--tk-border); }
.tk-paint__group { display: flex; gap: 0.3rem; border: 0; margin: 0; padding: 0; }
.tk-paint__tool { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; border: var(--tk-line) solid var(--tk-border); border-radius: 999px; cursor: pointer; min-height: 24px; }
.tk-paint__tool:has(input:checked) { background: var(--tk-brand); color: #fff; border-color: var(--tk-brand); }
.tk-paint__field { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; }
.tk-paint__field input[type="color"] { width: 2.6rem; height: 1.8rem; padding: 0; border: var(--tk-line) solid var(--tk-border); border-radius: var(--tk-radius); background: none; }
.tk-paint__field input[type="range"] { width: 7rem; }
.tk-paint__swatches { display: inline-flex; gap: 0.25rem; }
.tk-paint__swatch { width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--tk-border-strong); background: var(--swatch); cursor: pointer; padding: 0; }
.tk-paint__stage { overflow: auto; padding: 0.6rem; background: repeating-conic-gradient(#e9ecef 0 25%, #f8f9fa 0 50%) 0 0 / 20px 20px; max-height: 80vh; }
.tk-paint__stage canvas { display: block; background: #fff; cursor: crosshair; touch-action: none; image-rendering: pixelated; }
.tk-paint__stage canvas:focus-visible { outline: 3px solid var(--tk-brand); outline-offset: 2px; }
.tk-paint__status { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--tk-muted); }
.tk-livery-view img { max-width: 100%; height: auto; background: #fff; border: var(--tk-line) solid var(--tk-border); }
[data-mode="dark"] .tk-paint__stage { background: repeating-conic-gradient(#2a3440 0 25%, #1f2731 0 50%) 0 0 / 20px 20px; }
.tk-livery-thumb { max-width: 100%; max-height: 14rem; background: #fff; border: var(--tk-line) solid var(--tk-border); margin-top: 0.3rem; }
.tk-invite-link { display: block; padding: 0.6rem 0.8rem; background: var(--tk-muted-bg); border-radius: var(--tk-radius); word-break: break-all; font-size: 0.95rem; }
.tk-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.tk-thread__reply { border: var(--tk-line) solid var(--tk-border); border-radius: var(--tk-radius); padding: 0.6rem 0.8rem; border-left: 4px solid var(--tk-muted-line); }
.tk-thread__reply.is-new { border-left-color: var(--tk-brand); }
.tk-quote { margin: 0.3rem 0; padding: 0.2rem 0.7rem; border-left: 3px solid var(--tk-border-strong); color: var(--tk-muted); }
.tk-thread__post .tk-feed__body { font-size: 1.02rem; }
.tk-prose { max-width: 60rem; }
.tk-prose p, .tk-prose ul, .tk-prose ol { margin: 0 0 0.8rem; }
.tk-prose h2 { margin-top: 1.6rem; }
.tk-prose h3 { margin-top: 1.2rem; }
.tk-prose code { background: var(--tk-muted-bg); padding: 0 0.3em; border-radius: 3px; }
.tk-row--changed td, .tk-row--changed th { background: var(--tk-warn-bg); }

/* ------------------------------------------------------------------------------------------------
   0.4: History (year tabs, the focused period) and the Welcome back choice
   ------------------------------------------------------------------------------------------------ */
.tk-tabs { margin-bottom: var(--tk-space); }
.tk-tabs__list { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; padding: 0; margin: 0; }
.tk-tabs__link { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; padding: 0.4rem 0.9rem; border: var(--tk-line) solid var(--tk-border); border-radius: var(--tk-radius); text-decoration: none; color: var(--tk-text); background: var(--tk-surface); }
.tk-tabs__link:hover { background: var(--tk-surface-2); }
.tk-tabs__link.is-current { background: var(--tk-brand); border-color: var(--tk-brand); color: #fff; }
.tk-tabs__link.is-current .tk-muted { color: rgba(255, 255, 255, 0.85); }
.tk-card--focus { border-left: 4px solid var(--tk-brand); }
/* LEARN: A block radio puts a two-line label beside the button so each choice can carry its own sentence. */
.tk-radio--block { align-items: flex-start; padding: 0.5rem 0; }
.tk-radio--block .tk-radio__input { margin-top: 0.3rem; }
.tk-radio--block .tk-radio__label { flex: 1 1 20rem; }
.tk-progress { height: 0.9rem; background: var(--tk-surface-2); border: var(--tk-line) solid var(--tk-border); border-radius: var(--tk-radius); overflow: hidden; }
.tk-progress__bar { height: 100%; background: var(--tk-brand); transition: width 0.3s; }