/* TBS driver apps (reports menu · help me choose · hub) — phone-first, big targets, DRH colours */
:root {
  --navy: #0d2340; --navy-mid: #1a3a5c; --navy-light: #2b5280;
  --amber: #f5a623; --amber-dark: #d4861a; --red: #c0392b; --green: #1e7f4f;
  --text: #0d2340; --muted: #5a6a82; --bg: #f4f6f9; --surface: #fff; --border: #dde3ed;
  --radius: 14px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif-condensed, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.45; display: flex; flex-direction: column; font-size: 17px; min-height: 100svh; }
/* Page footer: pinned to the bottom of the visible screen when the page is short, following the content when it is long. The visible height comes from a script in base.html (window.innerHeight), because 100vh on Android includes the address bar and made the page scroll; 100svh is the CSS fallback. */
a { color: inherit; }

.app-header { background: var(--navy); color: #fff; border-bottom: 3px solid var(--amber); position: sticky; top: 0; z-index: 10; }
.app-header-inner { max-width: none; margin: 0; padding: 0 16px; height: 61px; display: flex; align-items: center; gap: 8px; }
.app-header img { margin-right: 4px; }
.app-home { display: block; flex-shrink: 0; line-height: 0; }
.app-header img { height: 42px; width: auto; flex-shrink: 0; }
.app-header-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.app-header-inner .header-back { margin-left: auto; }
.app-header-inner .header-back + .theme-toggle { margin-left: 0; }
.app-org { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.app-title { font-family: var(--cond); font-size: 24px; font-weight: 800; line-height: 1.05; }
.header-back { font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; background: rgba(255,255,255,.12); padding: 8px 12px; border-radius: 999px; white-space: nowrap; }

.app-main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 12px 14px 16px; }
.app-footer { background: var(--navy); color: #fff; font-size: 13px; padding: 10px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; width: 100%; }
.app-footer-inner { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.app-footer a { color: var(--amber); font-weight: 700; text-decoration: none; display: inline-block; border: 1.5px solid rgba(245,166,35,.7); border-radius: 999px; padding: 0 9px; }

/* red band — always first */
.danger-band { background: var(--red); color: #fff; border-radius: 10px; padding: 8px 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; }
.danger-q { font-family: var(--cond); font-size: 22px; font-weight: 800; letter-spacing: .01em; }
.danger-call { background: #fff; color: var(--red); font-family: var(--cond); font-size: 20px; font-weight: 800; padding: 4px 14px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.danger-then { font-size: 14px; font-weight: 700; }
.danger-then a { color: #fff; text-decoration: none; white-space: nowrap; display: inline-block; border: 1.5px solid rgba(255,255,255,.85); border-radius: 999px; padding: 1px 10px; margin-left: 2px; }
.danger-then a::before { content: ''; display: inline-block; width: .85em; height: .85em; margin-right: .3em; vertical-align: -.08em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.6%2010.8a15.1%2015.1%200%200%200%206.6%206.6l2.2-2.2c.3-.3.7-.4%201-.2%201.1.4%202.3.6%203.6.6.6%200%201%20.4%201%201V20c0%20.6-.4%201-1%201A17%2017%200%200%201%203%204c0-.6.4-1%201-1h3.5c.6%200%201%20.4%201%201%200%201.3.2%202.5.6%203.6.1.3%200%20.7-.2%201z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.6%2010.8a15.1%2015.1%200%200%200%206.6%206.6l2.2-2.2c.3-.3.7-.4%201-.2%201.1.4%202.3.6%203.6.6.6%200%201%20.4%201%201V20c0%20.6-.4%201-1%201A17%2017%200%200%201%203%204c0-.6.4-1%201-1h3.5c.6%200%201%20.4%201%201%200%201.3.2%202.5.6%203.6.1.3%200%20.7-.2%201z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; }

.lead { color: var(--muted); font-size: 15px; margin: 0 2px 10px; }
.group-title { font-family: var(--cond); font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-light); margin: 12px 2px 6px; }

/* the buttons: 2 + 2 + 1 wide */
.button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.big-button { display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0; overflow: hidden; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 0 12px 0 14px; height: 60px; text-decoration: none; color: var(--text); box-shadow: 0 2px 8px rgba(26,35,50,.06); -webkit-tap-highlight-color: transparent; }
.big-button:active { transform: scale(.985); }
.big-button.wide { grid-column: 1 / -1; gap: 14px; padding: 0 16px; background: var(--navy); color: #fff; border-color: var(--navy); }
.big-button.wide .big-sub { color: rgba(255,255,255,.85); }
.big-button.wide .big-icon { font-size: 34px; }
.mate-icon { width: 44px; height: 44px; border-radius: 10px; display: block; }
.big-button.wide .big-title { font-size: 24px; white-space: nowrap; }
.big-button.choose { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,166,35,.25); }
.big-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.big-button .big-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.big-title { font-family: var(--cond); font-size: 22px; font-weight: 800; line-height: 1.05; color: inherit; }
.big-sub { font-size: 13px; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.big-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.big-button.report-breakdown { border-color: #e5b3ad; } .big-button.report-breakdown .big-title { color: var(--red); }
.big-button.report-defect .big-title { color: var(--navy); }
.big-button.report-incident .big-title { color: var(--amber-dark); }
.big-button.report-hazard .big-title { color: var(--navy-light); }
.big-button.tool { border-color: var(--navy-light); }
.seat-rule { margin: 12px 2px 0; font-size: 14px; color: var(--navy); font-weight: 600; text-align: center; line-height: 1.5; }
.seat-rule strong { color: var(--red); font-weight: 700; }   /* as on SOP-00: question navy, the whole answer red */

/* what we know so far — answered questions, greyed, tappable to change */
.tri-known { margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.tri-known-head { font-family: var(--cond); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 2px 2px; }
.tri-known-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px; background: #e9edf2; border: 2px solid #d5dbe4; border-radius: 10px; padding: 7px 12px; text-decoration: none; color: var(--muted); }
.tri-known-row::before { content: '✓'; font-weight: 900; color: var(--green); }
.tri-known-text { display: flex; flex-direction: column; min-width: 0; }
.tri-known-q { font-size: 12px; line-height: 1.2; }
.tri-known-a { font-family: var(--cond); font-size: 19px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.tri-known-edit { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--navy-light); border: 1px solid var(--navy-light); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

.tri-tel { display: inline-block; margin-left: 6px; background: rgba(245,166,35,.16); border: 2px solid var(--amber-dark); color: #7a4f00; font-family: var(--cond); font-weight: 800; font-size: 15px; padding: 1px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap; vertical-align: 1px; }

/* triage flow */
.tri-nav { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 15px; font-weight: 700; }
.tri-nav a { text-decoration: none; color: var(--navy-light); padding: 6px 0; }
.tri-q { font-family: var(--cond); font-size: 24px; font-weight: 800; line-height: 1.1; margin: 4px 2px 2px; }
.tri-sub { color: var(--muted); font-size: 14px; margin: 0 2px 8px; }
.tri-q-inline { font-size: 22px; margin: 2px 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tri-q-sub { font-family: var(--font); font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.tri-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 0; }
.tri-opts.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tri-opt { display: flex; align-items: center; gap: 12px; min-width: 0; overflow: hidden; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 14px 14px; text-decoration: none; color: var(--text); min-height: 64px; box-shadow: 0 2px 8px rgba(26,35,50,.06); -webkit-tap-highlight-color: transparent; }
.tri-opt:active { transform: scale(.985); }
.tri-opt.tile { flex-direction: row; align-items: center; gap: 10px; min-height: 0; height: 60px; padding: 0 10px 0 12px; }
.tri-opt.tile .tri-opt-label, .tri-opt.tile .tri-opt-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tri-opt.tile .tri-icon { font-size: 26px; }
.tri-opt.tile .tri-opt-label { font-size: 20px; }
.tri-opt.tile .tri-opt-sub { font-size: 12px; margin-top: 1px; }
.tri-opt.opt-red { border-color: var(--red); }
.tri-opt.opt-red .tri-opt-label { color: var(--red); }
.tri-icon { font-size: 30px; line-height: 1; }
.tri-opt-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tri-opt-label { font-family: var(--cond); font-size: 22px; font-weight: 800; line-height: 1.05; }
.tri-opt-sub { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.tri-arrow { color: var(--amber-dark); font-size: 16px; font-weight: 900; }

.tri-status { display: inline-block; font-family: var(--cond); font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 6px 14px; border-radius: 8px; background: var(--navy); color: #fff; margin: 4px 0 6px; }
.tri-status.red { background: var(--red); } .tri-status.amber { background: var(--amber); color: var(--navy); } .tri-status.green { background: var(--green); }
.tri-call000 { display: block; text-align: center; background: var(--red); color: #fff; font-family: var(--cond); font-size: 30px; font-weight: 800; padding: 14px; border-radius: var(--radius); text-decoration: none; margin: 8px 0 12px; }
.tri-steps { list-style: none; margin: 6px 0 16px; display: flex; flex-direction: column; gap: 8px; }
.tri-steps li { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 18px; line-height: 1.35; }
.tri-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.tri-report { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; background: var(--navy); color: #fff; border-radius: var(--radius); padding: 16px 18px; text-decoration: none; margin: 6px 0 12px; box-shadow: 0 4px 14px rgba(13,35,64,.25); }
.tri-report.none { background: #dfe4ea; color: var(--navy); border: 2px solid var(--navy); box-shadow: none; }
.tri-report-title { font-family: var(--cond); font-size: 26px; font-weight: 800; line-height: 1.05; text-transform: uppercase; letter-spacing: .03em; }
.tri-report-when { font-size: 14px; font-weight: 600; opacity: .9; grid-column: 1; }
.tri-report-go { grid-column: 2; grid-row: 1 / 3; align-self: center; background: var(--amber); color: var(--navy); font-family: var(--cond); font-size: 20px; font-weight: 800; padding: 10px 14px; border-radius: 10px; white-space: nowrap; }
.tri-alsos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.tri-also { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border: 2px solid var(--navy-light); border-radius: 10px; padding: 10px 14px; font-weight: 700; text-decoration: none; color: var(--navy); font-size: 16px; }
.tri-unsure { background: rgba(245,166,35,.16); border-left: 4px solid var(--amber-dark); border-radius: 0 10px 10px 0; padding: 10px 14px; font-size: 15px; }
.tri-unsure a { font-weight: 800; text-decoration: none; color: var(--navy); white-space: nowrap; display: inline-block; border: 1.5px solid var(--navy); border-radius: 999px; padding: 0 10px; background: #fff; }
.tri-unsure a::before { content: ''; display: inline-block; width: .85em; height: .85em; margin-right: .3em; vertical-align: -.08em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.6%2010.8a15.1%2015.1%200%200%200%206.6%206.6l2.2-2.2c.3-.3.7-.4%201-.2%201.1.4%202.3.6%203.6.6.6%200%201%20.4%201%201V20c0%20.6-.4%201-1%201A17%2017%200%200%201%203%204c0-.6.4-1%201-1h3.5c.6%200%201%20.4%201%201%200%201.3.2%202.5.6%203.6.1.3%200%20.7-.2%201z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.6%2010.8a15.1%2015.1%200%200%200%206.6%206.6l2.2-2.2c.3-.3.7-.4%201-.2%201.1.4%202.3.6%203.6.6.6%200%201%20.4%201%201V20c0%20.6-.4%201-1%201A17%2017%200%200%201%203%204c0-.6.4-1%201-1h3.5c.6%200%201%20.4%201%201%200%201.3.2%202.5.6%203.6.1.3%200%20.7-.2%201z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; }

/* Landscape bus tablet (Tab Active5: 768 x 442 CSS px of page under the status bar): push the phone rule fully
   below the fold rather than showing half a line at the screen edge. It stays on the page, one scroll away. */
@media (orientation: landscape) and (max-height: 520px) {
  .seat-rule { margin-top: 40px; }
  .tri-opt.tile { height: 56px; }
  .tri-opts.tiles { gap: 6px; }
}
@media (max-width: 660px) {
  .big-title { font-size: 19px; }
  .tri-opt.tile .tri-opt-label { font-size: 18px; }
  .tri-opt.tile { gap: 8px; padding: 0 8px 0 10px; }
  .tri-opt.tile .tri-icon { font-size: 24px; }
}
@media (max-width: 570px) {
  .big-title { font-size: 17px; }
  .big-sub { font-size: 12px; }
  .big-button { gap: 9px; padding: 0 8px 0 10px; }
  .big-icon { font-size: 24px; }
}
@media (max-width: 500px) {
  .big-title { font-size: 16px; }
}
/* Phones (Jason, 14 Sept): two columns of tiles forced 16 px labels, unreadable for 55+ eyes. One column, and the
   labels are the same size as on the main menu. Eight tiles still fit a Pro Max screen; smaller phones scroll a little. */
@media (max-width: 520px) {
  .tri-opts.tiles { grid-template-columns: 1fr; gap: 6px; }
  .tri-opt.tile { height: 56px; gap: 12px; padding: 0 12px 0 14px; }
  .tri-opt.tile .tri-opt-label { font-size: 22px; }
  .tri-opt.tile .tri-opt-sub { font-size: 14px; }
  .tri-opt.tile .tri-icon { font-size: 28px; }
}
@media (max-width: 380px) {
  .button-grid { grid-template-columns: 1fr; }
}

/* Launcher pages (/pti, /driver): hand over to the Mitti app, with a button as the fallback */
.launch { text-align: center; padding: 6px 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.launch-icon { width: 72px; height: 72px; border-radius: 16px; }
.launch-title { font-family: var(--cond); font-size: 30px; font-weight: 800; color: var(--navy); line-height: 1.05; margin-top: 4px; }
.launch-sub { font-size: 16px; color: var(--muted); }
.launch-btn { display: inline-block; margin-top: 6px; background: var(--navy); color: #fff; font-family: var(--cond); font-size: 26px; font-weight: 800; padding: 14px 40px; border-radius: 14px; text-decoration: none; box-shadow: 0 0 0 3px rgba(245,166,35,.35); }
.launch-btn:active { transform: scale(.985); }
.launch-alt { font-size: 14px; color: var(--muted); margin-top: 8px; }
.launch-alt a { color: var(--navy-light); font-weight: 700; }
.launch-note { font-size: 14px; color: var(--navy); font-weight: 600; margin-top: 4px; }
.launch-note strong { color: var(--red); font-weight: 700; }

/* Defect: one question, two answers */
.defect-grid { grid-template-columns: 1fr; margin-top: 8px; }
.defect-grid .big-button { height: 72px; }
.defect-grid .big-button .big-sub { white-space: normal; }
.big-button.defect-oos { border-color: #e5b3ad; } .big-button.defect-oos .big-title { color: var(--red); }
.big-button.defect-svc .big-title { color: var(--navy); }
.defect-note { margin-top: 14px; font-size: 15px; color: var(--muted); }
.defect-note a { color: var(--red); font-weight: 700; }

/* Day / night toggle in the header: sun when light is on, moon when dark is on, a small "auto" tag while following the
   tablet. One button, three states, see static/js/theme.js. */
.theme-toggle { display: inline-flex; align-items: center; gap: 5px; height: 36px; width: 92px; padding: 0; justify-content: center; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; font: 600 12px/1 inherit; cursor: pointer; flex-shrink: 0; }
.theme-toggle:active { background: rgba(255,255,255,.18); }
.theme-toggle .tt-sun, .theme-toggle .tt-moon { width: 16px; height: 16px; display: block; flex-shrink: 0; }   /* inline SVG, not a text glyph: the same sun on every page and font (14 Sept) */
.theme-toggle .tt-moon { display: none; }
.theme-toggle .tt-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.theme-toggle .tt-label::after { content: "Day"; }
:root[data-theme="dark"] .theme-toggle .tt-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .tt-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .tt-label::after { content: "Night"; }
:root[data-theme-mode="auto"] .theme-toggle .tt-label::after { content: "Auto"; }

/* Night mode (13 Sept 2026) */
:root[data-theme="dark"] { --navy: #0a1628; --navy-mid: #16304f; --navy-light: #24466f; --text: #e6ebf2; --muted: #a7b3c4; --bg: #0f1a2b; --surface: #172538; --border: #2a3b52; }
:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .big-button { background: var(--surface); color: var(--text); border-color: var(--border); }
:root[data-theme="dark"] .big-title { color: var(--text); }
:root[data-theme="dark"] .big-sub { color: var(--muted); }
:root[data-theme="dark"] .seat-rule { color: var(--text); }
:root[data-theme="dark"] .seat-rule strong { color: #ff7b6b; }
:root[data-theme="dark"] .launch-title, :root[data-theme="dark"] .launch-note { color: var(--text); }   /* was navy on navy (Jason, 14 Sept) */
:root[data-theme="dark"] .launch-note strong { color: #ff7b6b; }
:root[data-theme="dark"] .launch-alt a { color: #9fb8d6; }
:root[data-theme="dark"] .launch-icon { box-shadow: 0 0 0 1.5px rgba(245,166,35,.85); }
:root[data-theme="dark"] .danger-call { background: #fff; color: #c0392b; }
:root[data-theme="dark"] .big-button.report-defect .big-title, :root[data-theme="dark"] .big-button.defect-svc .big-title { color: #cfe0f5; }
:root[data-theme="dark"] .big-button.report-hazard .big-title { color: #9fb4d0; }
:root[data-theme="dark"] .big-button.tool { border-color: #24466f; }
:root[data-theme="dark"] .big-button.wide { background: #16304f; color: #fff; }

/* One look for every header pill: Search, Reports, Home and the day/night button sit side by side and must match
   (Jason, 13 Sept): same height, border, fill, and the same small bold capitals. */
.site-header .nav-link, .app-header .header-back, .theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap; line-height: 1; cursor: pointer; flex-shrink: 0; font-family: inherit;
}
.site-header .nav-link:hover, .app-header .header-back:hover, .theme-toggle:active { background: rgba(255,255,255,.18); color: #fff; }
.theme-toggle { width: 92px; padding: 0; }

/* Phones (14 Sept 2026): the 64 px header must stay one clean row on a 390 to 430 px iPhone. The title never wraps
   (ellipsis if it ever comes to that), the org line gives way to the title, the logo drops to 36 px, the day/night
   button keeps its sun or moon AND its Auto/Day/Night label at a fixed 74 px (the label is what tells a driver that
   Auto is on, so it never goes; Jason, 14 Sept), and the launchers drop the Home pill because the logo already goes
   home. Tablets are untouched. */
.logo-org, .logo-title, .app-org, .app-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) {
  .logo img, .app-header img { height: 36px; }
  .logo { gap: 8px; margin-right: 4px; }
  .logo-org, .app-org { display: none; }
  .logo-title, .app-title { font-size: 20px; }
  .site-header .nav-link, .app-header .header-back { padding: 0 12px; }
  .theme-toggle { width: 74px; gap: 4px; }
  .theme-toggle .tt-sun, .theme-toggle .tt-moon { width: 14px; height: 14px; }
  .theme-toggle .tt-label { font-size: 10px; letter-spacing: .05em; }
  .app-header .header-home { display: none; } /* the logo already goes home */
}
@media (max-width: 400px) {
  /* smaller iPhones: everything a notch tighter, still one row, still labelled */
  .logo img, .app-header img { height: 32px; }
  .header-inner, .app-header-inner { padding: 0 12px; }
  .site-header .nav-link, .app-header .header-back { padding: 0 9px; font-size: 10px; }
  .theme-toggle { width: 64px; gap: 3px; }
  .theme-toggle .tt-sun, .theme-toggle .tt-moon { width: 13px; height: 13px; }
  .theme-toggle .tt-label { font-size: 9px; letter-spacing: .03em; }
}

/* Night sweep (Jason, 14 Sept): Back and Start again, the answered-so-far rows, the phone chip in the steps and the
   Breakdown link on the Defect page were all navy, dark amber or plain red on the dark page. */
:root[data-theme="dark"] .tri-nav a { color: #9fb8d6; }
:root[data-theme="dark"] .tri-known-row { background: var(--surface); border-color: var(--border); }
:root[data-theme="dark"] .tri-known-q { color: var(--muted); }
:root[data-theme="dark"] .tri-known-a { color: var(--text); }
:root[data-theme="dark"] .tri-known-edit { color: #9fb8d6; border-color: #9fb8d6; }
:root[data-theme="dark"] .tri-tel { color: #f5a623; border-color: #f5a623; background: rgba(245,166,35,.14); }
:root[data-theme="dark"] .defect-note a { color: #ff7b6b; }

/* Driver's Mate 14 Sept: a rule above a question (the tunnel rule, never swerve for an animal) and a red escalation link */
.tri-rule { border-left: 5px solid var(--amber); background: rgba(245,166,35,.12); border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 0 0 12px; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--navy); }
.tri-rule.red { border-color: var(--red); background: rgba(192,57,43,.09); color: var(--red); }
.tri-also.red { border-color: var(--red); color: var(--red); }
:root[data-theme="dark"] .tri-rule { color: var(--text); background: rgba(245,166,35,.16); }
:root[data-theme="dark"] .tri-rule.red { color: #ff7b6b; background: rgba(255,107,91,.14); border-color: #ff6b5b; }
:root[data-theme="dark"] .tri-also.red { color: #ff7b6b; border-color: #ff6b5b; }
/* found by walking every Mate screen in night mode (14 Sept): the plain cross-links were navy on navy, red answers too dark */
:root[data-theme="dark"] .tri-also { color: var(--text); border-color: #3d5f8a; }
:root[data-theme="dark"] .tri-opt.opt-red { border-color: #ff6b5b; }
:root[data-theme="dark"] .tri-opt.opt-red .tri-opt-label { color: #ff7b6b; }
:root[data-theme="dark"] .tri-also.red { color: #ff7b6b; border-color: #ff6b5b; }