/* Copyright © 2026 G-Metro Studio. All rights reserved. */
/* Gotham Metro — "Uniform & Hardware". Themes swap colors and fonts only. */
:root, [data-theme="gsta"] {
  --bg: #0C1626; --panel: #122137; --panel2: #18294199; --ink: #E9E4D8; --muted: #A19F96;
  --accent: #B7925D; --ok: #5B9BC8; --late: #D8923B; --bad: #E0574A; --line: #2A3B55;
  --crew: #8C8768; --score-riders:#438AAD; --score-profit:#C2953B; --score-crew:#9774AD;
  --display: "Archivo Black", Impact, sans-serif; --label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, sans-serif; --radius: 6px;
}
[data-theme="gsta"] { --chip-bg:#182941; }
/* The header ticker (the moving train scoreboard) on every theme (designer, Oct 14): a dark departure-board strip
   in Carbon's colors, the same on every theme, so its contrast never depends on the theme (white on #0D1921 is
   about 16:1, every icon color 7:1 or more). Slant and Carbon set their own below. */
:root { --ticker-bg:#0D1921; --ticker-ink:#EDF2F5; --ticker-accent:#C6D6E0; --ticker-line:#667D8B;
  --ticker-trophy:#F3C55B; --ticker-clock:#79C8EE; --ticker-money:#78D6A1;
  --ticker-crew:#C2A0ED; --ticker-crew-secondary:#78BEEA;
  --planner-enamel:color-mix(in srgb,var(--ticker-bg) 92%,var(--ticker-clock));
  --planner-am-ink:color-mix(in srgb,var(--bad) 55%,var(--ticker-trophy));
  --planner-pm-ink:var(--ticker-trophy); --planner-mid-ink:var(--ticker-crew); }
[data-theme="neon"] { --panel2:#21172D; --crew:#B49BC8; --chip-bg:#21172D;
  --score-riders:#3FE8FF; --score-profit:#FFB547; --score-crew:#FF4FD8;
  --body:"Barlow", system-ui, sans-serif; --radius:6px; --bg:#07060B; --panel:#120F1C; --ink:#F2EEFF; --muted:#9C95B8; --accent:#FF4FD8; --ok:#3FE8FF;
  --late:#FFB547; --bad:#FF5A6E; --line:#2A2340; --display:"Rajdhani", sans-serif; --label:"Rajdhani", sans-serif; }
/* Art Deco: warm black, cream and gold, with teal operating accents. */
[data-theme="deco"] {
  --bg:#11120F; --panel:#1C1E19; --panel2:#282B24; --ink:#F5EAD2; --muted:#C3B89D;
  --accent:#D8B56C; --ok:#6DB39B; --late:#E8B66F; --bad:#F18E83; --line:#63583D; --crew:#B8A678;
  --chip-bg:#282B24; --score-riders:#7CBDA9; --score-profit:#D8B56C; --score-crew:#C7A0BA;
  --display:"Limelight", serif; --label:"Josefin Sans", sans-serif;
  --body:"Source Sans 3", system-ui, sans-serif; --radius:0; color-scheme:dark;
}
/* Hyperline: very modern. Graphite near-black, electric lime, teal, soft round corners, a geometric sans. */
[data-theme="hyperline"] { --bg:#0B0C0E; --panel:#15171B; --panel2:#1C1F2499; --ink:#ECEEF1; --muted:#9AA1AC;
  --accent:#C5F24A; --ok:#4FD8C4; --late:#FFB23E; --bad:#FF6B6B; --line:#262A31; --crew:#8A93A0;
  --display:"Space Grotesk", system-ui, sans-serif; --label:"Space Grotesk", system-ui, sans-serif;
  --body:"Inter", system-ui, sans-serif; --radius:12px; --chip-bg:#1C1F24;
  --score-riders:#4FD8C4; --score-profit:#C5F24A; --score-crew:#A9A4F4; }
[data-theme="hyperline"] h1 { font-weight: 700; letter-spacing: -.02em; }

/* Slant: stainless steel, pale panels and green controls. Existing themes inherit none of these tokens. */
[data-theme="slant"] {
  --bg:#E8EEEF; --panel:#F8FAFA; --panel2:#DFE8E7; --ink:#20363B; --muted:#4B6266;
  --accent:#355F58; --ok:#2C6A51; --late:#875400; --bad:#A63136; --line:#BAC9C9; --crew:#536664;
  --chip-bg:#DFE8E7; --display:"Outfit", system-ui, sans-serif; --label:"Outfit", system-ui, sans-serif;
  --body:"Manrope", system-ui, sans-serif; --radius:5px;
  --score-riders:#438AAD; --score-profit:#967129; --score-crew:#9774AD;
  --steel-light:#FFFFFF; --steel-shadow:#91A6AA; --ticker-bg:#1B3038; --ticker-ink:#EDF3F2;
  --ticker-accent:#BDD9CE; --ticker-line:#81999F;
  --ticker-trophy:#F3C55B; --ticker-clock:#79C8EE; --ticker-money:#78D6A1;
  --ticker-crew:#C2A0ED; --ticker-crew-secondary:#78BEEA; color-scheme:light;
}


/* Carbon / Chrome: woven graphite, cool chrome edges and red controls. */
[data-theme="carbon"] {
  --bg:#0B1117; --panel:#18232C; --panel2:#202E38; --ink:#EDF2F5; --muted:#AFBEC8;
  --accent:#FF7C89; --ok:#7CD7B2; --late:#F1B667; --bad:#FF8992; --line:#526674; --crew:#ABB9C7;
  --display:"Space Grotesk", system-ui, sans-serif; --label:"Barlow Condensed", "Arial Narrow", sans-serif;
  --body:"Inter", system-ui, sans-serif; --radius:5px; --chip-bg:#202E38;
  --score-riders:#79C8EE; --score-profit:#78D6A1; --score-crew:#C2A0ED;
  --steel-light:#D9E3E9; --steel-shadow:#607582; --chrome-mid:#A8BAC5; --chrome-low:#354954;
  --shadow:#020509; --button-top:#DB3048; --button-bottom:#A51F34; --button-ink:#FFFFFF;
  --fiber-dark:#080D12; --fiber-base:#111A22; --fiber-light:#26333F; --fiber-mid:#1A2630;
  --ticker-bg:#0D1921; --ticker-ink:#EDF2F5; --ticker-accent:#C6D6E0; --ticker-line:#667D8B;
  --ticker-trophy:#F3C55B; --ticker-clock:#79C8EE; --ticker-money:#78D6A1;
  --ticker-crew:#C2A0ED; --ticker-crew-secondary:#78BEEA; color-scheme:dark;
  --carbon-weave:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2268%22%20height%3D%2268%22%20viewBox%3D%220%200%2067.882251%2067.882251%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22h%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%230b1218%22%2F%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%231e2a33%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%2319242c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23101920%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22v%22%3E%3Cstop%20stop-color%3D%22%230a1117%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%231b2730%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%23151f27%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230b131a%22%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%22twill%22%20width%3D%2248%22%20height%3D%2248%22%20patternUnits%3D%22userSpaceOnUse%22%20patternTransform%3D%22rotate%2845%29%22%3E%3Crect%20width%3D%2248%22%20height%3D%2248%22%20fill%3D%22%230a1016%22%2F%3E%3Crect%20x%3D%220.3%22%20width%3D%2211.4%22%20height%3D%2248%22%20fill%3D%22url%28%23v%29%22%2F%3E%3Cpath%20d%3D%22M2%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M4%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M6%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M8%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M10%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Crect%20x%3D%2212.3%22%20width%3D%2211.4%22%20height%3D%2248%22%20fill%3D%22url%28%23v%29%22%2F%3E%3Cpath%20d%3D%22M14%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M16%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M18%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M20%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M22%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Crect%20x%3D%2224.3%22%20width%3D%2211.4%22%20height%3D%2248%22%20fill%3D%22url%28%23v%29%22%2F%3E%3Cpath%20d%3D%22M26%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M28%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M30%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M32%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M34%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Crect%20x%3D%2236.3%22%20width%3D%2211.4%22%20height%3D%2248%22%20fill%3D%22url%28%23v%29%22%2F%3E%3Cpath%20d%3D%22M38%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M40%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M42%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M44%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M46%200v48%22%20stroke%3D%22%23697b87%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%22.45%22%2F%3E%3Crect%20x%3D%22-48%22%20y%3D%220.35%22%20width%3D%2224%22%20height%3D%2211.3%22%20rx%3D%22.5%22%20fill%3D%22url%28%23h%29%22%2F%3E%3Cpath%20d%3D%22M-48%202h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-48%204h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-48%206h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-48%208h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-48%2010h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-48%2011.5h24%22%20stroke%3D%22%23071018%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%22.5%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220.35%22%20width%3D%2224%22%20height%3D%2211.3%22%20rx%3D%22.5%22%20fill%3D%22url%28%23h%29%22%2F%3E%3Cpath%20d%3D%22M0%202h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M0%204h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M0%206h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M0%208h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M0%2010h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M0%2011.5h24%22%20stroke%3D%22%23071018%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%22.5%22%2F%3E%3Crect%20x%3D%22-36%22%20y%3D%2212.35%22%20width%3D%2224%22%20height%3D%2211.3%22%20rx%3D%22.5%22%20fill%3D%22url%28%23h%29%22%2F%3E%3Cpath%20d%3D%22M-36%2014h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-36%2016h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-36%2018h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-36%2020h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-36%2022h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-36%2023.5h24%22%20stroke%3D%22%23071018%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%22.5%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212.35%22%20width%3D%2224%22%20height%3D%2211.3%22%20rx%3D%22.5%22%20fill%3D%22url%28%23h%29%22%2F%3E%3Cpath%20d%3D%22M12%2014h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M12%2016h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M12%2018h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M12%2020h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M12%2022h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M12%2023.5h24%22%20stroke%3D%22%23071018%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%22.5%22%2F%3E%3Crect%20x%3D%22-24%22%20y%3D%2224.35%22%20width%3D%2224%22%20height%3D%2211.3%22%20rx%3D%22.5%22%20fill%3D%22url%28%23h%29%22%2F%3E%3Cpath%20d%3D%22M-24%2026h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-24%2028h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-24%2030h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-24%2032h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-24%2034h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-24%2035.5h24%22%20stroke%3D%22%23071018%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%22.5%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2224.35%22%20width%3D%2224%22%20height%3D%2211.3%22%20rx%3D%22.5%22%20fill%3D%22url%28%23h%29%22%2F%3E%3Cpath%20d%3D%22M24%2026h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M24%2028h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M24%2030h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M24%2032h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M24%2034h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M24%2035.5h24%22%20stroke%3D%22%23071018%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%22.5%22%2F%3E%3Crect%20x%3D%22-12%22%20y%3D%2236.35%22%20width%3D%2224%22%20height%3D%2211.3%22%20rx%3D%22.5%22%20fill%3D%22url%28%23h%29%22%2F%3E%3Cpath%20d%3D%22M-12%2038h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-12%2040h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-12%2042h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-12%2044h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-12%2046h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-12%2047.5h24%22%20stroke%3D%22%23071018%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%22.5%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%2236.35%22%20width%3D%2224%22%20height%3D%2211.3%22%20rx%3D%22.5%22%20fill%3D%22url%28%23h%29%22%2F%3E%3Cpath%20d%3D%22M36%2038h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M36%2040h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M36%2042h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M36%2044h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M36%2046h24%22%20stroke%3D%22%2375858f%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M36%2047.5h24%22%20stroke%3D%22%23071018%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%22.5%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23twill%29%22%2F%3E%3C%2Fsvg%3E");
}

/* Whole Car: original NYC subway-piece lettering; the selector entry is left to Claude. */
@font-face {
  font-family:"Whole Car"; src:url("whole-car/whole-car.woff") format("woff");
  font-style:normal; font-weight:400 900; font-display:swap;
}
[data-theme="whole-car"] {
  --bg:#101313; --panel:#202323; --panel2:#292D2B; --ink:#F7EBD2; --muted:#C3C6BB;
  --accent:#64DFD2; --ok:#8FE1AC; --late:#FFC36B; --bad:#FF929C; --line:#73756A;
  --crew:#DFACF8; --score-riders:#64DFD2; --score-profit:#FFE17C; --score-crew:#F99ACD;
  --display:"Whole Car", "Archivo Black", Impact, sans-serif;
  --label:"Barlow Condensed", "Arial Narrow", sans-serif; --body:"Barlow", system-ui, sans-serif;
  --radius:7px; --chip-bg:#292D2B; color-scheme:dark;
  --paint-cyan:#64DFD2; --paint-lime:#C7EF72; --paint-orange:#FFC36B;
  --paint-pink:#F99ACD; --paint-purple:#CCA9F4; --paint-yellow:#FFE17C;
  --paint-shadow:#080B0B; --paint-outline:#F7EBD2;
  --paint:var(--paint-cyan);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--body); }
a { color: var(--accent); }
.wrap { max-width: 1100px; margin: 0 auto; padding-inline: 16px; padding-block: 12px 48px; }
header.top { background: var(--panel); border-bottom: 3px solid var(--accent); }
header.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
/* Display the supplied badge without its rectangular white corners. */
.brand .mark { width:72px; height:auto; flex:none; object-fit:contain;
  clip-path:polygon(15.5% 7.4%, 84.6% 7.4%, 96.7% 30%, 96.7% 67.2%,
                    84.6% 91.7%, 15.5% 91.7%, 3.1% 67.2%, 3.1% 30%); }
.brand b { font: 22px var(--display); letter-spacing: .02em; color: var(--accent); }
/* The connected wordmark replaces the badge and text as one responsive asset. */
.brand .brand-wordmark { display:block; width:280px; max-width:100%; height:auto; }
@media (max-width:799px) {
  .brand .brand-wordmark { width:230px; }
}
@media (max-width:374px) {
  .brand .brand-wordmark { width:205px; }
}
nav.main { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 600 17px var(--label); text-transform: uppercase; letter-spacing: .05em; }
nav.main a { color: var(--ink); text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
nav.main a:hover, nav.main a.on { border-color: var(--accent); }
.nav-more { display:none; }
.nav-more > summary { display:none; }
.hdr-right { margin-left: auto; display: flex; gap: 10px; align-items: center; font: 15px var(--label); }
/* The page style and clock menus, each with an icon that says what it is. */
.hdr-pick { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.hdr-pick svg { flex: none; }
.cash { font: 700 20px var(--label); color: var(--accent); }
.strip { background: var(--bg); border-bottom: 1px solid var(--line); font: 15px var(--label); color: var(--muted); }
.strip .wrap { padding-block: 6px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.strip-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.strip-link:hover { color: var(--ink); }
.challenges .on { border-color: var(--accent); }
h1, h2, h3 { font-family: var(--label); text-transform: uppercase; letter-spacing: .04em; margin: 1.2em 0 .4em; }
h1 { font: 30px var(--display); color: var(--accent); text-transform: none; letter-spacing: .01em; }
h2 { font-size: 22px; color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.card h3 { margin-top: 0; font-size: 18px; }
/* Human Resources' Crew benefits: one row per benefit, its name on the left and the switch on the right. */
.card.benefits { max-width: 760px; }
.benefit-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px;
  padding: 10px 0; border-top: 1px solid var(--line); }
.stat { font: 700 30px var(--label); }
.stat small { font-size: 15px; color: var(--muted); font-weight: 400; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { font: 600 14px var(--label); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: left; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
/* Sortable headings (Human Resources): tap to sort, again to reverse; the arrow marks the current sort. */
th a.th-sort { color: inherit; text-decoration: none; }
th a.th-sort:hover, th a.th-sort:focus-visible { color: var(--accent); }
th[aria-sort] a.th-sort { color: var(--ink); }
th[aria-sort="ascending"] a.th-sort::after { content: " ▲"; font-size: 10px; }
th[aria-sort="descending"] a.th-sort::after { content: " ▼"; font-size: 10px; }
.th-short { display: none; }   /* a column heading's phone form (run report) */
.crew-sort { display: none; }   /* phones only, where the table turns into cards without headings */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.me td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.btn, button { font: 700 16px var(--label); text-transform: uppercase; letter-spacing: .06em; background: var(--accent);
  color: var(--bg); border: 0; border-radius: var(--radius); padding: 8px 16px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn.ghost, button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
button.small { font-size: 13px; padding: 4px 10px; }
.btn.big { font-size: 22px; padding: 12px 28px; }
/* Sign-in provider buttons: the provider's logo before the words; a provider not set up yet is grayed out */
.btn.social { display: inline-flex; align-items: center; gap: 8px; }
.btn.social .brand { width: 18px; height: 18px; flex: none; }
.btn.social.disabled { opacity: .45; cursor: not-allowed; filter: grayscale(1); }
.btn.social small { text-transform: none; letter-spacing: 0; font-weight: 400; }
button:disabled { opacity: .45; cursor: not-allowed; }
select, input[type=text], input[type=password], input[type=number], input[type=email] { font: 16px var(--body); background: var(--bg);
  color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 9px; max-width: 100%; }
label { font: 600 15px var(--label); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: block; margin: 10px 0 4px; }
form.inline { display: inline; }
.legal { margin-top: 6px; font-size: 11px; opacity: .55; }
.legal a { color: inherit; }
/* Patch notes: one card per update, newest first. */
.patch { display: grid; gap: 16px; max-width: 820px; }
.patch .card h2 { margin-top: 0; }
.patch .card h3 { margin: 14px 0 4px; font-size: 14px; color: var(--muted); }
.patch .card ul { margin: 0; padding-left: 20px; }
.patch .card li { margin: 4px 0; }
/* Big screens (Pete, Oct 26: a 3440x1440 monitor): the cards sit side by side, newest first across each row, so
   the notes fill the page while each line stays readable. */
@media (min-width: 1600px) {
  .patch { max-width: none; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); align-items: start; }
}
/* Sign-in pages (django-allauth's forms, wrapped by templates/allauth/elements/). */
.card.entrance { max-width: 520px; }
.card.entrance p { margin: 10px 0; }
.card.entrance input { width: 100%; box-sizing: border-box; }
.card.entrance input[type=checkbox], .card.entrance input[type=radio] { width: auto; margin: 0; flex: none; }
/* a checkbox or radio button sits on one line with its label, not above it */
.card.entrance p:has(> input[type=checkbox]), .card.entrance p:has(> input[type=radio]) {
  display: flex; align-items: center; gap: 10px; }
.card.entrance p:has(> input[type=checkbox]) > label, .card.entrance p:has(> input[type=radio]) > label {
  display: inline; margin: 0; font: inherit; text-transform: none; letter-spacing: 0; color: var(--ink); }
.nowrap { white-space: nowrap; }
.helptext { display: block; color: var(--muted); font-size: 14px; }
.errorlist { list-style: none; padding: 0; margin: 4px 0; color: var(--bad); font-size: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.row > div { min-width: 160px; flex: 1; }
.badge { display: inline-block; font: 700 13px var(--label); text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 8px; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap; }
/* Epic and Legendary crew (crew.RARITY); Codex may restyle. */
.badge.epic { color: #b48cff; }
.badge.legendary { color: #f2b233; }
/* Slant is light: the same hues, dark enough to read (its lunch rarity colors). */
[data-theme="slant"] .badge.epic { color: #7c25b5; }
[data-theme="slant"] .badge.legendary { color: #9f4900; }
/* A crew member's employee ID like a badge number: a small EMPLOYEE # and the digits in Share Tech Mono. */
.emp-badge { display: inline-flex; align-items: baseline; gap: 6px; vertical-align: middle; white-space: nowrap;
  border: 1px solid var(--accent); border-radius: 4px; padding: 1px 7px; background: var(--chip-bg, rgba(0, 0, 0, .35)); }
.emp-badge .k { font-size:0; letter-spacing:0; color:var(--muted); }
.emp-badge .k::after { content:"#"; font:700 16px/1 var(--label); }
.emp-badge .n { font: 16px/1.25 "Share Tech Mono", ui-monospace, monospace; letter-spacing: .12em; color: var(--ink); }
/* The crew member's page: employee number, role and level in a row of boxes under their name. The role icon is
   drawn at the height of the capitals beside it. */
.id-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.id-chips .emp-badge, .id-chips .chip { padding: 4px 10px; }
.id-chips .emp-badge .n { font-size: 19px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--accent); border-radius: 4px;
  background: var(--chip-bg, rgba(0, 0, 0, .35)); font: 600 19px/1.2 var(--label); color: var(--ink); white-space: nowrap; }
.chip .role-icon { margin: 0; vertical-align: 0; }
.chip .k { font: 700 11px var(--label); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--ink); }
.chip.open { color: var(--ok); }
.chip.closed { color: var(--muted); border-color: var(--line); }
/* Pick Jobs: the heading with the player's AM, PM and MID jobs beside it (they wrap under it on a phone). */
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 1.2em 0 .6em; }
.title-row h1, .title-row .id-chips { margin: 0; }
.chip .role-icon svg { width: 18px; height: 18px; }
/* Express and Local, like the signs on the front of an R32 or R36: red EXP, green LCL, white letters. The colors
   are the same on every theme (white on these fills passes the 4.5:1 contrast
   test); a job that changes kind blends from one to the other in the order it runs (each end stays its pure color). */
:root { --exp-bg: #C62828; --lcl-bg: #1B7F3B; --sign-ink: #FFFFFF; }
/* Line letters use blue for A/C/E and orange for B/D, with white lettering (Pete, Nov 3). */
:root { --run-marker-bg:#0062CF; --run-marker-ink:#FFFFFF; }
.line-B, .line-D { --run-marker-bg:#EB6800; --run-marker-ink:#FFFFFF; }
/* WoW-style lunch rarity hues, adjusted for readable text on each panel. */
:root { --lunch-poor:#9d9d9d; --lunch-common:#ffffff; --lunch-uncommon:#1eff00; --lunch-rare:#4da3ff; --lunch-epic:#c07aff; --lunch-legendary:#ff8000; }
[data-theme="slant"] { --lunch-poor:#666666; --lunch-common:#263238; --lunch-uncommon:#187800; --lunch-rare:#005bb5; --lunch-epic:#7c25b5; --lunch-legendary:#9f4900; }
/* Signal aspects stay literal in every theme. */
:root { --signal-plate:#1c1c1c; --signal-rim:#8a8a8a; --signal-stop:#ff3b30; --signal-hold:#ffc21a; --signal-clear:#43d981; }
:root { --event-track:#9bbdd8; --event-structural:#dcb68b; }
[data-theme="slant"] { --event-track:#375c79; --event-structural:#80552a; }
/* Final event-type colors: the hue identifies the event, independent of severity. */
:root { --event-passenger:#edbd67; --event-police:#88baff; --event-sports:#7cd89a; --event-parade:#c9a3f7; --event-fire-dept:#ffa078; --event-protest:#f39aca; --event-chemistry:#73d6cb; }
[data-theme="slant"] { --event-passenger:#875700; --event-police:#175cb1; --event-sports:#19743c; --event-parade:#7546a7; --event-fire-dept:#b23d13; --event-protest:#a92575; --event-chemistry:#14746c; }
/* The gradient must span the whole badge, border included, and not repeat: by default it is drawn inside the padding
   and tiled into the 1px border, so the far end showed as a sliver on each edge (green, red...green, red). Use background-image and
   background-color here, never the `background` shorthand: it would reset the origin and repeat set below. */
.badge.exp, .badge.lcl, .badge.lcl-exp, .badge.exp-lcl { color: var(--sign-ink); border-color: transparent;
  background-origin: border-box; background-repeat: no-repeat; }
.badge.exp { background-color: var(--exp-bg); }
.badge.lcl { background-color: var(--lcl-bg); }
.badge.lcl-exp { background-image: linear-gradient(90deg, var(--lcl-bg) 22%, var(--exp-bg) 78%); }
.badge.exp-lcl { background-image: linear-gradient(90deg, var(--exp-bg) 22%, var(--lcl-bg) 78%); }
/* Job codes and trip numbers get a fixed width so the badges after them line up down a table. */
td.code-cell { white-space: nowrap; }
.code { display: inline-block; min-width: 3.3em; font-variant-numeric: tabular-nums; }
.code.trip { min-width: 1.6em; }
.ok { color: var(--ok); } .late { color: var(--late); } .bad { color: var(--bad); }
.bullet { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font: 700 16px var(--body); color: var(--bg); background: var(--accent); }  /* theme-colored, never a real line color */
.msg { padding: 10px 14px; border-radius: var(--radius); margin: 10px 0; border-left: 4px solid var(--accent); background: var(--panel); }
.msg.error { border-color: var(--bad); }
.warn { border-left: 4px solid var(--late); background: color-mix(in srgb, var(--late) 10%, transparent); padding: 8px 12px; margin: 6px 0; }
.forecast { font: 700 26px var(--label); }
.event { padding: 8px 12px; margin: 6px 0; border-left: 4px solid var(--late); background: var(--bg); }
.event.positive { border-color: var(--ok); }
.event.severe { border-color: var(--bad); }
.event.moment { border-color: var(--muted); }
.badge.moment { color: var(--muted); }
.fmeter { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; vertical-align: middle; }
.fmeter-track { flex: 1 1 70px; max-width: 90px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.fmeter-fill { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
.fmeter-label { font: 14px var(--label); color: var(--muted); white-space: nowrap; }
.fmeter-label b { color: var(--ink); font-weight: 600; }
.f-worn .fmeter-fill { background: var(--crew); }
.f-late .fmeter-fill { background: var(--late); } .f-late .fmeter-label { color: var(--late); }
.f-bad .fmeter-fill { background: var(--bad); } .f-bad .fmeter-label { color: var(--bad); }
.crewlist { display: grid; gap: 2px; }
.crewrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--line); }
.crewrow:last-child { border-bottom: 0; }
.crewrow .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crewrow .who a { color: var(--ink); text-decoration: none; font-weight: 600; }
.crewrow .who a:hover { color: var(--accent); }
.role-tag { display: inline-block; font: 600 12px var(--label); letter-spacing: .06em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; margin-left: 6px; }
.xpbar { display: block; height: 4px; max-width: 120px; margin-top: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.xpbar span { display: block; height: 100%; background: var(--accent); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 16px; }
.facts div small { display: block; font: 600 13px var(--label); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.facts div b { font: 700 22px var(--label); }
.facts > div { min-width: 0; }
.facts .note { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
/* Stat tiles: equal squares, everything centered (crew member page). */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 10px;
  min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; min-width: 0; }
.tile small { font: 600 12px var(--label); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.tile b { font: 700 25px/1.1 var(--label); }
.tile b .of { font-size: 15px; font-weight: 400; color: var(--muted); }
.tile .note { font-size: 13px; line-height: 1.3; color: var(--muted); }
.tile .tile-action { margin-top: 8px; }
.tile .net { font: 600 18px/1.2 var(--label); }
/* Pick Jobs: the week at a glance above the tour tabs (free skips, tour bonus, pay factor). */
.jobs-day { margin-bottom: 10px; }
.jobs-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 10px; }
.jobs-table tr.job-taken { background:color-mix(in srgb, var(--muted) 18%, var(--panel)); }
.skip-pips { display: flex; gap: 6px; }
.skip-pips i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--muted); }
.skip-pips i.on { background: var(--ok); border-color: var(--ok); }
.tile .net .of { font-size: 13px; font-weight: 400; color: var(--muted); }
.tile .bar { width: 78%; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tile .bar span { display: block; height: 100%; background: var(--accent); }
.tile .bar.f-ok span { background: var(--ok); } .tile .bar.f-worn span { background: var(--crew); }
.tile .bar.f-late span { background: var(--late); } .tile .bar.f-bad span { background: var(--bad); }
.tile .levels { display: flex; gap: 3px; width: 78%; color: var(--ink); }
.tile .levels i { flex: 1; height: 5px; border-radius: 2px; background: var(--line); }
.tile .levels i.on { background: currentColor; }
/* Card grids (fleet page): one card per train, part, loan or car class. */
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-bottom: 12px; }
.cards .card { display: flex; flex-direction: column; gap: 8px; }
.cards .card > * { margin: 0; }
.train-display { display:block; position:relative; width:128px; aspect-ratio:1323 / 1365; flex:none; }
.train-display-u1 { aspect-ratio:1272 / 1406; }
.train-display-f8, .train-display-p0 { aspect-ratio:1316 / 1371; }
.train-display-square { aspect-ratio:1254 / 1424; }
.train-sprite { display:block; position:absolute; top:0; left:0; width:100%; height:auto; }   /* no pixelated: the art is ~10x its shown size, and nearest-neighbor shrinking dropped 9 pixels in 10 (designer, Oct 14: better at 200% zoom) */
.train-platform { display:block; position:absolute; bottom:0; left:0; width:100%; height:26%; }
.platform-edge { fill:var(--muted); }
.platform-rim { fill:var(--line); stroke:var(--muted); stroke-width:14; }
.platform-deck { fill:var(--panel2, var(--panel)); }
.platform-ties { fill:none; stroke:var(--muted); stroke-width:24; }
.platform-rail-shadow { fill:none; stroke:var(--ink); stroke-width:40; }
.platform-rails { fill:none; stroke:var(--line); stroke-width:18; }
.barn-train-heading:has(.train-display) { display:flex; align-items:center; gap:12px; }
.barn-train-copy { min-width:0; }
.barn-train-copy .sub { margin-top:6px; }
.office-train-art { display:flex; align-items:center; justify-content:center; color:inherit; border-radius:var(--radius); }
a.office-train-art:hover .train-sprite, a.office-train-art:focus-visible .train-sprite { transform:translateY(-2px); }
a.office-train-art:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.office-train-name > a { color:inherit; }
/* The Office's maintenance picker: all four levels side by side, saved on a tap (as the Barn's drop-down). */
.office-maint { margin:4px 0 0; min-width:0; container-type:inline-size; }
.office-maint fieldset { border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; min-width:0; }
.office-maint legend { grid-column:1 / -1; padding:0; margin-bottom:4px; font:11px var(--label); color:var(--muted); }
.office-maint-opt { position:relative; display:flex; min-width:0; cursor:pointer; }
.office-maint-opt input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.office-maint-opt span { display:block; width:100%; text-align:center; padding:6px 8px; min-height:36px; border:1px solid var(--line);
  border-radius:var(--radius); font:600 12px/1.25 var(--label); color:var(--ink); background:var(--panel); }
.office-maint-opt small { display:block; font-weight:400; color:var(--muted); }
.office-maint-opt input:checked + span { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);
  background:var(--panel2, var(--panel)); }
.office-maint-opt input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.office-stockline:has(.train-display) { display:grid; grid-template-columns:112px minmax(0, 1fr); gap:8px 14px; align-items:center; padding-block:14px; }
.office-stockline:has(.train-display) .office-train-art { grid-column:1; grid-row:1 / span 3; }
.office-stockline:has(.train-display) > :not(.office-train-art) { grid-column:2; }
.office-train-art .train-display { width:112px; }
.office-stockline:has(.train-display) .office-separator { display:none; }
.office-stockline:has(.train-display) .office-reliability { display:block; color:var(--muted); font-weight:400; font-size:12px; margin-top:5px; }
.office-stockline:has(.train-display) .office-condition progress { display:block; width:100%; height:6px; margin-top:5px; accent-color:var(--accent); }
.card .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card .head b { font: 700 19px var(--label); }
.card .sub { color: var(--muted); font-size: 14px; }
.card .price { font: 700 20px var(--label); }
.mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mini.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini .tile { min-height: 64px; padding: 6px 4px; gap: 2px; }
.mini .tile small { font-size: 11px; }
.mini .tile b { font-size: 19px; }
.mini .tile b.word { font-size: 14px; font-weight: 600; }
.buy { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.buy .col { display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 8px; }
.buy .col small { font: 600 12px var(--label); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.buy button, .btnrow button, .stackform button { width: 100%; }
.buy .note { font-size: 13px; color: var(--muted); }
.btnrow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: auto; }
.stackform select { width: 100%; }
.stackform label { margin-top: 0; }
details.explain { margin: 4px 0 14px; }
details.explain summary { cursor: pointer; color: var(--accent); font: 600 15px var(--label); text-transform: uppercase; letter-spacing: .05em; }
details.explain[open] summary { margin-bottom: 8px; }
/* Label-and-value rows: the label on the left, the value on the right, a rule between rows. */
.kv { display: grid; grid-template-columns: fit-content(55%) minmax(0, 1fr); margin: 0 0 10px; font-size: 15px; }
.kv dt, .kv dd { padding: 6px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-weight: 600; padding-left: 12px; }
.kv dt.sub { padding-left: 14px; font-size: 14px; } .kv dd.sub { font-weight: 400; font-size: 14px; }
.formrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 4px 0 12px; }   /* one column: the drop-down shows its whole text, e.g. "Wednesday and Thursday" */
.formrow select { width: 100%; }
.formrow button { width: 100%; padding: 9px 12px; }
.report-head { display:grid; grid-template-columns:minmax(240px, 1.7fr) repeat(4, minmax(0, 1fr)); gap:12px 20px; align-items:end; }
.report-head > div { min-width:0; }
.report-performance-label { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin-bottom:2px; }
.report-result { font-size:13px; line-height:1.4; padding:1px 7px; letter-spacing:.025em; vertical-align:middle; }
.report-head .stat { overflow-wrap:anywhere; }
@media (max-width:900px) {
  .report-head { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 16px; }
  .report-performance { grid-column:1 / -1; }
  .report-head .stat { font-size:24px; }
}
.pill-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pill-tabs a { font: 600 15px var(--label); text-transform: uppercase; padding: 4px 12px; border: 1px solid var(--line);
  border-radius: 99px; text-decoration: none; color: var(--ink); }
.pill-tabs a.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
/* The Board's Past boards menu (designer, Oct 3): a dashed pill after the period tabs; it opens shortcuts to the newest
   closed day, week and season and a jump to every past board. While a past board is shown, a filled pill names it (✕). */
.past-menu { position: relative; }
.past-menu summary { list-style: none; cursor: pointer; font: 600 15px var(--label); text-transform: uppercase; padding: 4px 12px;
  border: 1px dashed var(--accent); border-radius: 99px; color: var(--accent); }
.past-menu summary::-webkit-details-marker { display: none; }
.past-menu[open] summary { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.past-menu-list { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; min-width: 240px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.pill-tabs .past-menu-list a { display: flex; justify-content: space-between; gap: 12px; border: 0; border-radius: 4px;
  padding: 7px 10px; font: 15px var(--body); text-transform: none; color: var(--ink); }
.pill-tabs .past-menu-list a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.past-menu-list small { color: var(--muted); }
.pill-tabs .past-menu-list a.past-all { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; font-weight: 600; color: var(--accent); }
tr.skipped td { opacity: .4; }
tr.hasevent td { background: color-mix(in srgb, var(--late) 8%, transparent); }
footer { color: var(--muted); font-size: 13px; text-align: center; padding: 30px 16px; }
/* The page style and clock menus (moved from the header, designer, Oct 6: the header is for the game and the ticker). */
.footer-prefs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 14px; font: 14px var(--label); }
.footer-prefs .hdr-pick { white-space: nowrap; }
.footer-prefs select { max-width: 62vw; }
.role-icon { display: inline-flex; vertical-align: -3px; margin-left: 6px; color: var(--muted); cursor: help; }
.role-icon.role-operator { color: var(--ok); }
.role-icon.role-conductor { color: var(--accent); }
/* Keep the role filter's accessible wrapper and size; replace its old hand with the approved direction. */
.role-icon.role-conductor svg { background:currentColor;
  mask:url("icons/conductor-point.svg") center / contain no-repeat; }
.role-icon.role-conductor svg > g { visibility:hidden; }
/* Reserved portrait frames use a neutral pixel silhouette until the crew artwork arrives. */
.crew-portrait { display:inline-grid; place-items:center; width:64px; height:80px; flex:none;
  border:1px solid var(--line); border-radius:var(--radius); color:var(--muted);
  background:linear-gradient(145deg, var(--panel2, var(--panel)), var(--bg)); overflow:hidden; }
.crew-portrait svg { display:block; width:100%; height:100%; opacity:.55; shape-rendering:crispEdges; }
.crew-identity { display:flex; align-items:flex-start; gap:12px; min-width:210px; }
.crew-identity-text { min-width:0; }
/* The portrait with an Epic or Legendary badge under it, so the names stay lined up down the list. The column keeps
   the portrait's width; a longer badge overhangs it evenly. */
.crew-face { display:flex; flex-direction:column; align-items:center; gap:6px; width:64px; flex:none; }
.crew-face > .badge { font-size:11px; letter-spacing:.03em; padding:0 6px; }
.crew-identity-text > b { display:block; line-height:1.35; }
.crew-identity-text > br { display:none; }
.crew-identity-text > .emp-badge { margin:7px 0; }
.crew-identity-text > .small { display:block; margin-top:4px; }
.crew-table td { padding-block:14px; vertical-align:top; }
.crew-table { font-size:14px; line-height:1.5; }
.crew-table .crew-identity { min-width:180px; }
.crew-background { min-width:140px; max-width:230px; text-align:left; }
.crew-background > .small { display:block; margin-top:6px; font-size:13px; line-height:1.5; }
.crew-background > br { display:none; }
.crew-background > .crew-trait-line { margin-top:10px; color:var(--muted); }
.crew-background > .crew-trait-line b { color:var(--ink); }
.crew-rdo-cell .crew-rdo { flex-direction:column; align-items:flex-start; gap:5px; }
.crew-pay-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; margin-top:8px; }
.crew-development { min-width:100px; }
.crew-xp { display:block; width:100%; max-width:140px; height:6px; border:0; border-radius:3px; overflow:hidden;
  margin:8px 0 5px; appearance:none; background:var(--line); color:var(--accent); accent-color:var(--accent); }
.crew-xp::-webkit-progress-bar { background:var(--line); border-radius:3px; }
.crew-xp::-webkit-progress-value { background:var(--accent); border-radius:3px; }
.crew-xp::-moz-progress-bar { background:var(--accent); border-radius:3px; }
.crew-xp-caption { display:block; text-align:left; font-size:12px; white-space:nowrap; }
.crew-wellbeing { min-width:170px; }
.crew-morale-state { display:block; margin:6px 0; }
.crew-leave { display:flex; flex-direction:column; align-items:flex-start; gap:7px; margin-top:10px; font-size:12px; }
.crew-rdo { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; padding:5px 7px; border:1px solid var(--line);
  border-radius:var(--radius); color:var(--ink); background:var(--bg); }
.crew-rdo abbr { color:var(--muted); text-decoration:none; font-size:10px; letter-spacing:.05em; }
.crew-off-today { color:var(--ok); font-weight:700; }
.crew-rdo:has(.crew-off-today) { border-color:var(--ok); }
.crew-sick { display:inline-flex; align-items:center; gap:7px; color:var(--muted); }
.crew-sick > b { display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 5px; border-radius:var(--radius);
  background:var(--panel2, var(--panel)); border:1px solid var(--line); color:var(--ink); font-size:14px; }
.crew-member-stats .tiles { gap:12px; }
.crew-member-panels { display:block; column-count:2; column-gap:14px; }
.crew-member-panels > .card { break-inside:avoid; margin-bottom:14px; }
.crew-member-panels .card > h3 { padding-bottom:10px; border-bottom:1px solid var(--line); }
.crew-member-panels .card > p:last-child { margin-bottom:0; }
.crew-member-panels .badge { margin-bottom:4px; }
.attribute-explanation { line-height:1.55; }
/* Rating and focus use separate scales: ability above, share of recorded practice below. */
.attribute-row { display:grid; grid-template-columns:minmax(100px, 1fr) minmax(160px, 2fr) 30px; align-items:center; gap:6px 10px; padding:12px 0; border-top:1px solid var(--line); }
.attribute-name { grid-row:1 / 3; min-width:0; overflow-wrap:anywhere; }
.attribute-row .fmeter { grid-column:2; grid-row:1; min-width:0; width:100%; display:grid; grid-template-columns:40px minmax(0, 1fr) 32px; gap:8px; }
.attribute-row .fmeter::before { content:"Rating"; font:11px var(--label); color:var(--muted); }
.attribute-row .fmeter-track { width:100%; max-width:none; }
.attribute-row .fmeter-label { text-align:right; }
.attribute-practice { grid-column:2; grid-row:2; display:grid; grid-template-columns:40px minmax(0, 1fr) 32px; align-items:center; gap:8px; font-variant-numeric:tabular-nums; }
.focus-label { font:11px var(--label); color:var(--muted); }
.attribute-practice > b { font:600 11px var(--label); text-align:right; color:var(--muted); }
.focus-track { height:3px; border-radius:2px; background:var(--line); overflow:hidden; }
.focus-track > span { display:block; height:100%; background:var(--accent); }
.attribute-row form { grid-column:3; grid-row:1 / 3; }
@media (max-width:900px) {
  .attribute-row { grid-template-columns:minmax(0, 1fr) 30px; gap:6px 10px; }
  .attribute-name { grid-column:1; grid-row:1; }
  .attribute-row .fmeter { grid-column:1; grid-row:2; }
  .attribute-practice { grid-column:2; grid-row:2; }
  .attribute-row form { grid-column:2; grid-row:1 / 4; }
}
.crew-table td:nth-child(2) > .nowrap { display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; cursor:help; }
.crew-table td:nth-child(2) .role-icon { margin:0; vertical-align:0; }
.crew-table td:nth-child(2) .role-icon svg, .office-crew-role .role-icon svg { width:32px; height:32px; }
.crew-member-role:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.crew-member-heading { display:flex; align-items:center; gap:20px; margin:20px 0; }
.crew-member-heading > div { min-width:0; }
.crew-member-heading .crew-portrait { width:96px; height:120px; }
.crew-member-heading h1 { margin:0 0 12px; overflow-wrap:anywhere; }
.crew-member-heading .id-chips { margin:0; }
.crew-member-role { display:inline-flex; }
.crew-member-role .role-icon svg { width:36px; height:36px; }
.office-crew-panel .office-crew-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; }
.office-crew-panel .crewrow.office-crew-tile { display:grid; grid-template-columns:minmax(0, 1fr); grid-template-rows:1fr auto;
  gap:8px; padding:10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel2, var(--panel)); }
.office-crew-panel .who { display:flex; align-items:center; gap:10px; white-space:normal; }
.office-crew-panel .crew-portrait { width:40px; height:50px; }
.office-crew-copy { display:grid; gap:4px; min-width:0; }
.office-crew-copy a { overflow-wrap:anywhere; font-size:13px; line-height:1.3; }
.office-crew-role { display:flex; align-items:center; gap:6px; }
.office-crew-role .role-icon { margin:0; flex:none; }
.office-crew-panel .office-crew-tile .role-icon svg { width:24px; height:24px; }
.office-crew-panel .office-crew-tile .fmeter { display:grid; grid-template-columns:minmax(0, 1fr) auto;
  min-width:0; width:100%; gap:6px; margin:0; }
.office-crew-panel .office-crew-tile .fmeter-track { max-width:none; width:100%; }
.office-crew-panel .office-crew-tile .fmeter-label { font-size:11px; }
/* Alerts on a tile: a perk point to spend (gold star on the portrait) and being out (dimmed, red line). A flaw is
   just part of who they are, so it's listed quietly. */
.office-crew-panel .office-crew-tile .who { overflow:visible; }   /* names wrap here; let the perk badge show */
.office-crew-face { position:relative; flex:none; display:inline-flex; }
.crewrow .who a.office-crew-perk { position:absolute; top:-6px; left:-6px; display:grid; place-items:center; width:20px; height:20px;
  border-radius:50%; background:#F3C55B; color:#2B2100; font-size:12px; line-height:1; text-decoration:none;
  box-shadow:0 0 0 2px var(--panel2, var(--panel)); }   /* the same gold in every theme: it's an alert */
.office-crew-flaw { font-size:11px; line-height:1.3; overflow-wrap:anywhere; }
.office-crew-flaw [title] { cursor:help; }
.office-crew-status { font-size:11px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.office-crew-out .crew-portrait, .office-crew-out .office-crew-role, .office-crew-out .fmeter { opacity:.5; }
.office-crew-panel .crewrow.office-crew-tile.office-crew-out { border-color:var(--bad); }
/* Off today on an RDO: greyed and at the end of the panel, a dashed edge; not an alert, so no color. */
.office-crew-rdo .crew-portrait, .office-crew-rdo .office-crew-role, .office-crew-rdo .fmeter, .office-crew-rdo .office-crew-copy > a { opacity:.5; }
.office-crew-panel .crewrow.office-crew-tile.office-crew-rdo { border-style:dashed; }
/* RDOs as the week, Sunday first (S M T W T F S): working days filled, days off plain, today circled. Office tiles,
   HR and crew pages. Information, not an alert. Today's square becomes a circle with a ring outside it, past a gap, so
   it shows on a filled day as well as a plain one. */
.rdo-week { display:inline-grid; grid-template-columns:repeat(7, minmax(13px, 1fr)); gap:4px; padding:3px; vertical-align:middle; }
.rdo-week span { padding:3px 0; border-radius:2px; text-align:center; font:600 10px/1 var(--label); color:var(--bg);
  background:var(--accent); }
.rdo-week .off { background:transparent; color:var(--muted); box-shadow:inset 0 0 0 1px var(--line); }
.rdo-week .now { border-radius:50%; outline:1.5px solid var(--ink); outline-offset:1.5px; }
.office-crew-tile .rdo-week { display:grid; width:100%; }
.office-crew-level { font:600 12px/1 var(--label); letter-spacing:.04em; color:var(--muted); white-space:nowrap; }
/* A line that belongs to the T/O, the C/R or both: icons in a fixed column, words wrapping beside them. */
.crewline { display: flex; align-items: flex-start; gap: 6px; }
.crewline-icons { display: inline-flex; flex: none; gap: 3px; margin-top: 2px; white-space: nowrap; }
.crewline-icons .role-icon { margin-left: 0; vertical-align: baseline; }
.crewline-text { min-width: 0; overflow-wrap: break-word; }
/* A job's badges: the kind (LCL, EXP, LCL/EXP, EXP/LCL) with OPTO on the same line for a whole job, or on a line
   above (starts one-person) or below (ends one-person). Rows never wrap inside themselves. */
.jobtags { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; vertical-align: middle; }
.jobtags .tagrow { display: flex; gap: 4px; white-space: nowrap; }
.callsign { font: 600 13px var(--label); letter-spacing: .04em; color: var(--muted); white-space: nowrap; cursor: help; }
.halfmin { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

button { white-space: nowrap; }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

/* A spreadsheet (Admin, Invites): thin gridlines, tight rows, one line per row; scrolls sideways on narrow screens. */
.sheet-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0; font-size: 14px; }
.sheet-bar input:not([type="radio"]) { width: auto; margin: 0; padding: 4px 8px; }
.sheet-bar input[type="number"] { width: 5em; }
.sheet-bar label { margin: 0; font-weight: normal; }
.sheet-pick { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
table.sheet { border-collapse: collapse; font-size: 14px; width: 100%; }
table.sheet th, table.sheet td { border: 1px solid var(--line); padding: 3px 6px; white-space: nowrap; text-align: left;
  vertical-align: middle; }
table.sheet th { background: var(--panel); font: 600 13px var(--label); text-transform: uppercase; position: sticky; top: 0; }
table.sheet tr:nth-child(even) td { background: color-mix(in srgb, var(--panel) 45%, transparent); }
table.sheet button.small { padding: 1px 8px; font-size: 13px; }
table.sheet form.inline { margin: 0; }
table.sheet th[scope="row"] { position: static; text-transform: none; font: 600 14px var(--label); white-space: nowrap; }
table.sheet-wrap td { white-space: normal; min-width: 12em; }
table.sheet td.bad { color: var(--bad); }
table.sheet .sheet-sort { cursor: pointer; user-select: none; }
table.sheet .sheet-sort[aria-sort="ascending"]::after { content: " \25B2"; }
table.sheet .sheet-sort[aria-sort="descending"]::after { content: " \25BC"; }
table.sheet tr.sheet-edit td { background: var(--panel); padding: 6px 8px; }
table.sheet tr.sheet-edit input { width: auto; margin: 0; padding: 3px 6px; }
table.sheet select.sheet-select { width: auto; margin: 0; padding: 1px 4px; font-size: 13px; }
table.sheet form + form { margin-top: 4px; }
table.sheet form.inline + form, table.sheet td > form:not(.inline) + form.inline { margin-top: 4px; }
.sheet-gap { display: inline-block; width: 16px; }
table.sheet tr.sheet-edit td { white-space: normal; line-height: 2.2; }
/* Wider than the screen (long emails): the first column stays put while the rest scrolls, like a frozen pane. */
table.sheet tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
table.sheet tr:first-child > :first-child { z-index: 2; background: var(--panel); }
table.sheet tr:nth-child(even) > td:first-child { background: color-mix(in srgb, var(--panel) 45%, var(--bg)); }
table.sheet tr.sheet-edit > td:first-child { position: static; background: var(--panel); }
table.sheet tr > th:first-child { background: var(--panel); }
.sheet-bar input[type="search"] { min-width: 16em; }
table.sheet .sheet-open { color: var(--ok); font-weight: 600; }
table.sheet .sheet-used { color: var(--ink); }
table.sheet .sheet-expired, table.sheet .sheet-revoked { color: var(--muted); }

/* Phones. Tables marked .stack turn into one card per row (base.html copies each column
   header into its cells as data-label); other tables scroll sideways inside .tablewrap. */
@media (max-width:799px) {
  table.stacked .crew-name { grid-column:1 / -1; }
  .crew-member-heading { gap:12px; align-items:flex-start; }
  .crew-member-heading .crew-portrait { width:72px; height:90px; }
  .office-crew-panel .office-crew-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .office-crew-panel .crewrow.office-crew-tile { padding:8px; }
  .office-crew-panel .who { gap:6px; }
  .office-crew-panel .crew-portrait { width:32px; height:40px; }
  h1 { font-size: 24px; }
  .stat { font-size: 24px; }
  .hdr-right { margin-left: 0; width: 100%; flex-wrap: wrap; row-gap: 8px; }
  .strip { font-size: 14px; }
  .strip .wrap { gap: 0 12px; }
  button.small { font-size: 14px; padding: 7px 12px; }
  .tablewrap table { font-size: 14px; }
  .tablewrap th, .tablewrap td { padding: 6px 5px; }
  .tablewrap table:not(.stacked) tr > :first-child { position: sticky; left: 0; background: var(--bg); }
  .tablewrap tr.hasevent > td:first-child { background: color-mix(in srgb, var(--late) 8%, var(--bg)); }
  table.timeline td:not(:first-child) { white-space: nowrap; }
  /* Station by station fits a phone: small type, headings may wrap (v0.31.4). */
  .tablewrap table.timeline { font-size: 12px; }
  .tablewrap table.timeline th, .tablewrap table.timeline td { padding: 5px 3px; }
  .tablewrap table.timeline th { white-space: normal; letter-spacing: 0; vertical-align: bottom; font-size: 10px; }
  .tablewrap table.timeline td:nth-child(4) { white-space: normal; }
  .th-long { display: none; }
  .th-short { display: inline; }
  table.stacked, table.stacked tbody { display: block; }
  .crew-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; font-size: 14px; }
  table.stacked tr:first-child:has(th) { display: none; }
  table.stacked tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
  table.stacked tr.me { border-color: var(--accent); }
  table.stacked tr.me td { background: none; }
  table.stacked td { display: block; padding: 0; border: 0; text-align: left; position: static; background: none; min-width: 0; }
  table.stacked td.wide, table.stacked td[colspan] { grid-column: 1 / -1; }
  table.stacked button { white-space: normal; text-align: left; }
  /* Fact cards: two to a row on phones; long ones (a meter, morale, a status) take the whole row. */
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px 14px; }
  .facts .wide { grid-column: 1 / -1; }
  .facts div small { font-size: 12px; }
  .facts div b { font-size: 20px; }
  .card:has(> .facts) { padding: 14px 16px; }
  .tiles, .tiles.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile { min-height: 104px; padding: 10px 8px; }
  .tile b { font-size: 23px; }
  .formrow { grid-template-columns: 1fr; }
  .formrow button { width: 100%; padding: 9px 12px; }
  table.stacked td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block;
    font: 600 12px var(--label); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .crew-member-panels { column-count:1; }
  .footer-prefs .hdr-pick { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; white-space:normal; }
}

/* Human Resources turns into cards up to 1099px, not only on phones: its eight columns need about 1,100px
   (v0.31.1). The same card rules as the phones' table.stacked above, for this table. */
@media (max-width: 1099px) {
  .crew-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; font-size: 14px; }
  .crew-table table.stacked, .crew-table table.stacked tbody { display: block; }
  .crew-table table.stacked tr:first-child:has(th) { display: none; }
  .crew-table table.stacked tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
  .crew-table table.stacked td { display: block; padding: 0; border: 0; text-align: left; position: static; background: none; min-width: 0; }
  .crew-table table.stacked td.wide, .crew-table table.stacked td[colspan], .crew-table table.stacked .crew-name { grid-column: 1 / -1; }
  .crew-table table.stacked button { white-space: normal; text-align: left; }
  .crew-table table.stacked td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block;
    font: 600 12px var(--label); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .crew-table table.stacked tr:not(:first-child) { position:relative; gap:14px 16px; padding:16px; }
  .crew-table table.stacked .crew-name { padding-bottom:14px; border-bottom:1px solid var(--line); }
  .crew-table table.stacked td.crew-name::before { display:none; }
  .crew-table .crew-identity { min-width:0; }
  .crew-table .crew-identity-text { flex:1; }
  .crew-table .crew-identity-text > b { padding-right:42px; font-size:17px; overflow-wrap:anywhere; }
  .crew-table table.stacked td:nth-child(2) { position:absolute; top:14px; right:12px; }
  .crew-table table.stacked td:nth-child(2) > .nowrap { min-height:32px; }
  .crew-table table.stacked td:nth-child(2)::before { display:none; }
  .crew-table table.stacked td.wide { padding-top:12px; border-top:1px solid var(--line); }
  .crew-table table.stacked td[data-label]::before { margin-bottom:5px; }
  .crew-table table.stacked td:last-child { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px;
    padding-top:14px; border-top:1px solid var(--line); }
  .crew-table table.stacked td:last-child form { flex:1; margin:0; }
  .crew-table table.stacked td:last-child button { width:100%; text-align:center; }
  .crew-table table.stacked .fmeter { min-width:0; flex-wrap:wrap; }
  .crew-table table.stacked .fmeter-track { width:70px; }
  .crew-table table.stacked .perk-pick { max-width:100%; }
  .crew-table table.stacked .crew-background { min-width:0; max-width:none; }
  .crew-table table.stacked .crew-pay-actions { justify-content:flex-start; }
  .crew-table table.stacked .crew-wellbeing, .crew-table table.stacked .crew-development { min-width:0; }
  .crew-table table.stacked .crew-rdo { gap:4px; }
  .crew-table table.stacked .crew-leave { font-size:11px; }
  .crew-table table.stacked .crew-sick { flex-wrap:wrap; gap:4px; }
  .crew-table table.stacked td[data-label="Pay"] .nowrap,
  .crew-table table.stacked td[data-label="Asking"] .nowrap { white-space:normal; }
  .crew-table table.stacked td.num { white-space:normal; }
}
@media (min-width:800px) and (max-width: 1099px) {
  .crew-table table.stacked tr:not(:first-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Keep crew metadata compact, and let personal history notes use the card width. */
.crew-history-result { display:inline-flex; align-items:center; min-height:44px; }
@media (max-width:799px) {
  .crew-table table.stacked tr:not(:first-child) { gap:10px 12px; padding:12px; }
  .crew-table table.stacked .crew-name { padding-bottom:10px; }
  .crew-table .crew-identity { gap:10px; }
  .crew-table .crew-identity-text > .small { display:inline; margin:0; line-height:1.5; }
  .crew-table .crew-identity-text > .small ~ .small::before { content:" · "; }
  .crew-table .crew-identity-text > .emp-badge { display:table; margin:4px 0; }
  .crew-table table.stacked td.crew-development { grid-column:1 / -1; display:flex; flex-wrap:wrap;
    align-items:center; gap:5px 8px; }
  .crew-table table.stacked td.crew-development::before { flex-basis:100%; margin:0; }
  .crew-development > br { display:none; }
  .crew-development .crew-xp { flex:1 1 80px; margin:0; }
  .crew-development .crew-xp-caption { margin-right:6px; }
  .crew-development > form { flex-basis:100%; }
  .crew-history { overflow:visible; }
  .crew-history table.stacked tr { gap:8px 12px; padding:12px; }
  .crew-history table.stacked td { min-width:0; overflow-wrap:anywhere; }
  .crew-history table.stacked td:nth-child(1) { grid-column:1; grid-row:1; }
  .crew-history table.stacked td:nth-child(2) { grid-column:1; grid-row:2; }
  .crew-history table.stacked td:nth-child(3) { grid-column:2; grid-row:1 / 3; text-align:right; }
  .crew-history table.stacked td:nth-child(4) { grid-column:1 / -1; padding-top:8px; border-top:1px solid var(--line); }
  .crew-history .badge { white-space:normal; }
}

/* GSTA Trip Number: the run report's machine-printed reference, bottom right. Quiet, but easy to find and copy. */
/* The run report's header: a GSTA form. A title bar with the trip number printed on a strip of ticket card (inked
   5x7 dots, the same card and ink in every theme, like the real thing), then a ruled grid of labeled boxes. */
.run-form { margin: 0 0 14px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--panel); overflow: hidden; }
.run-form-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 3px 8px;
  background: var(--ink); color: var(--bg); font: 700 24px/1 var(--label); letter-spacing: .06em; text-transform: uppercase; }
/* The bar's words nearly fill its height (the ticket sets it) (designer, Oct 9). */
.run-form-no { display: inline-flex; align-items: center; gap: 8px; }
.run-form-no .k { font-size: 20px; letter-spacing: .08em; }
.run-form-print { position: relative; display: inline-flex; padding: 3px 7px; background: #EFE9DA; color: #1E1E1E; border: 1px solid #B9B09A;
  border-radius: 2px; box-shadow: 0 1px 0 #00000033; }
.printed-number { display: block; height: 22px; width: auto; }
/* The real digits, invisible, laid over the dots: one tap or click selects the number to copy (and screen readers
   read it). Spaced to the dots' width so the selection highlight covers them. */
.run-form-copy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font: 700 20px/1 ui-monospace, monospace; letter-spacing: 6.3px; text-indent: 6.3px; color: transparent;
  user-select: all; -webkit-user-select: all; cursor: text; }
.run-form-copy::selection { background: #1D4E8966; color: transparent; }
.run-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }   /* hairlines from the gap */
.run-form-grid > div { min-width: 0; padding: 4px 9px 6px; background: var(--panel); }
.run-form-grid .wide { grid-column: span 2; }
.run-form-grid .k { display: block; font: 600 9.5px/1.2 var(--label); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.run-form-grid .v { display: block; margin-top: 1px; font: 600 14px/1.3 var(--body); color: var(--ink); overflow-wrap: anywhere; }
.run-form-grid .v.big, .run-form-grid .v .callsign { font: 700 16px/1.25 var(--label); letter-spacing: .03em; color: var(--ink); }
/* Phones: one row in every theme (designer, Oct 9: no wrapping), so the ticket shrinks a little and the spacing
   tightens; the invisible copy digits scale with the dots. */
@media (max-width:799px) {
  .run-form-bar { font-size: 15px; letter-spacing: .02em; gap: 4px 8px; }
  .run-form-no { gap: 5px; }
  .run-form-no .k { font-size: 12px; letter-spacing: .04em; }
  .run-form-print { padding: 2px 5px; }
  .printed-number { height: 16px; }
  .run-form-copy { font-size: 14.5px; letter-spacing: 4.6px; text-indent: 4.6px; }
  .run-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-form-grid .wide { grid-column: 1 / -1; }
}
@media (max-width: 380px) { .run-form-bar { font-size: 14px; } }

/* Board Initials: the one place the game uses an arcade/terminal look. Every themed page shares this class
   (it uses no theme variable but color, which it inherits). IBM Plex Mono (Google Fonts, loaded in base.html, bold
   only) comes first because its zero is dotted on every device; the fallbacks are monospace fonts whose zero is
   slashed or dotted, so 0 never looks like O; "zero" turns on the slashed zero where a font has one. */
.board-initials, input.board-initials, .board-table td.board-rank {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono",
               "Noto Sans Mono", monospace;
  font-variant-numeric: slashed-zero; font-feature-settings: "zero" 1;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-style: normal;
}
@font-face { font-family:"Press Start 2P"; src:url("fonts/PressStart2P-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap; }
.board-initials-big { font-family:"Press Start 2P", ui-monospace, monospace;
  font-weight:400;
  font-size:16px; letter-spacing:0; line-height:1.4; }
/* Press Start 2P's zero looks like its O, and initials may hold both ("W0OD", "WOOD"): a one-pixel dot in the zero,
   on the font's own 8-pixel grid (the pixel_initials filter wraps each 0). */
.board-initials-big .zero, .ticker-placing .initials .zero { position:relative; }
.board-initials-big .zero::after, .ticker-placing .initials .zero::after { content:""; position:absolute;
  left:.375em; top:calc(50% - .125em); width:.125em; height:.125em; background:currentColor; }
.board-company { font-size: 12px; }
.board-table td { vertical-align: baseline; }
.board-table td.board-rank { color: var(--accent); white-space: nowrap; }   /* arcade places: 1ST, 2ND, 3RD in gold */   /* the rank and score line up with the initials, not the name under them */   /* the company name under its initials on The Board's three boards */
input.board-initials { font-size: 16px; }
/* The full table's arrows: places moved since yesterday (an hour ago on Today), next to the place. */
.rank-cell { white-space: nowrap; }
.move { display: inline-block; margin-left: 6px; font: 700 12px var(--label); letter-spacing: .02em; }
.move-up { color: var(--ok); }
.move-down { color: var(--bad); }
.move-new { color: var(--accent); border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; font-size: 10px; }
/* Company avatars: an empty placeholder until the designer's set arrives (chosen from a list, no uploads). */
.avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; vertical-align: middle;
  color: var(--muted); background: var(--panel); border: 1px solid var(--line); }
/* The Board's icons (game/data/icons.py): the theme's accent, lit details in their own colors. 40px in the three board
   titles (designer), 20px in a phone row's opened line. */
.gm-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; vertical-align: -4px; margin-right: 5px;
  color: var(--accent); }
.gm-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.score-mix { max-width:900px; display:grid; grid-template-columns:auto 44px minmax(0, 1fr); align-items:center; gap:12px; margin:12px 0; padding:8px 12px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.score-mix > b { font-size:13px; }
.score-pie { display:block; width:44px; aspect-ratio:1; border-radius:50%;
  background:conic-gradient(var(--score-riders) 0 var(--weight-riders), var(--score-profit) var(--weight-riders) calc(var(--weight-riders) + var(--weight-profit)), var(--score-crew) calc(var(--weight-riders) + var(--weight-profit)) calc(var(--weight-riders) + var(--weight-profit) + var(--weight-crew))); }
.score-legend { display:flex; flex-wrap:wrap; gap:5px 18px; }
.score-weight { display:grid; grid-template-columns:auto 3ch; gap:8px; align-items:center; font-size:12px; }
.score-weight > span:first-child { display:flex; align-items:center; gap:6px; }
.score-weight .gm-icon { display:none; }
.score-weight > b { text-align:right; font-variant-numeric:tabular-nums; }
.score-weight { --score-category:var(--score-riders); }
.score-weight-profit { --score-category:var(--score-profit); }
.score-weight-crew { --score-category:var(--score-crew); }
.score-weight > span:first-child::before { content:""; width:9px; height:9px; flex:none; border-radius:50%; background:var(--score-category); }
@media (max-width:799px) {
  .score-mix { grid-template-columns:40px minmax(0, 1fr); gap:4px 10px; padding:10px; }
  .score-mix > b { grid-column:2; grid-row:1; font-size:12px; }
  .score-pie { grid-column:1; grid-row:1 / 3; width:40px; }
  .score-legend { grid-column:2; grid-row:2; display:grid; gap:3px; }
  .score-weight { grid-template-columns:minmax(0, 1fr) 3ch; }
}
.board h3 .gm-icon { width: 40px; height: 40px; vertical-align: -12px; margin-right: 10px; }
.ov-key { display: none; }
/* The Overall table on phones (designer, Oct 3): one calm line per company (place and arrow, initials and avatar, company
   under, the score on the right); a tap opens its figures with the icons, your own row always open. No run counts: they
   would give away how a company plays (designer). A COMPANY / SCORE header stays at the top while the rows scroll. */
.ov-phone { display: none; width: 100%; border-collapse: collapse; }
.ov-need { display: block; margin-top: 2px; font-size: 12px; color: var(--late); }
@media (max-width:799px) {
  .ov-desk { display: none; }
  .ov-phone { display: table; }
  .ov-phone td { padding: 12px 4px; vertical-align: middle; }
  .ov-phone tr.ov-row { cursor: pointer; }
  .ov-phone tr.ov-row td { border-bottom: 1px solid var(--line); }
  .ov-phone tr.ov-row.open td { border-bottom: 0; padding-bottom: 4px; }
  .ov-phone tr.me td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .ov-phone .ov-place { color: var(--accent); white-space: nowrap; width: 1%; }
  .ov-phone .ov-score { width: 1%; text-align: right; font: 700 24px var(--label); }
  .ov-phone .ov-score small { font: 600 11px var(--label); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
  .ov-phone tr.ov-detail { display: none; }
  .ov-phone tr.ov-row.open + tr.ov-detail { display: table-row; }
  .ov-phone tr.ov-detail td { padding: 0 4px 12px; border-bottom: 1px solid var(--line); }
  .ov-line { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
  .ov-line > span { white-space: nowrap; }
  .ov-line b { color: var(--ink); font-weight: 600; }
  .ov-key { display: flex; justify-content: space-between; padding: 8px 2px 10px; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 2; background: var(--bg); }
  .ov-key .board-initials { font-size: 11px; color: var(--muted); }
}

/* The company box's label on the signup pages is a heading and a line; on the company screen it is for screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
label .company-heading { display: block; font-size: 18px; color: var(--accent); }
label .company-line { display: block; font: 400 15px var(--body); text-transform: none; letter-spacing: 0; color: var(--muted); }

/* The confirmation page for consequential actions (game/confirm.py): a card of facts, then the final button and Cancel. */
.confirm { max-width: 560px; }
.confirm-rows { width: 100%; border-collapse: collapse; }
.confirm-rows th { text-align: left; font-weight: 600; color: var(--muted); padding: 6px 12px 6px 0; vertical-align: top; }
.confirm-rows td { text-align: right; padding: 6px 0; font-variant-numeric: tabular-nums; }
.confirm-rows tr { border-bottom: 1px solid var(--line); }
.confirm-rows tr.total th, .confirm-rows tr.total td { color: var(--ink); font-weight: 700; }
.confirm-rows tr.bad td { color: var(--bad); }
.confirm-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
@media (max-width:799px) {
  .confirm-form { flex-direction: column; align-items: stretch; }
  .confirm-form .btn, .confirm-form button { text-align: center; width: 100%; }
}

/* The Office heading: the company's name with its Board Initials opposite, then the home line and Tax ID underneath. */
.company-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.company-head h1.company-name { margin-bottom: 2px; min-width: 0; }
.company-initials { font-size: 22px; color: var(--accent); white-space: nowrap; }
.company-sub { margin: 0 0 14px; }
.company-sub .bullet { margin-right: 6px; }

/* A dropdown is as wide as its longest option: inside a table that can push the table wider than the page
   (Human Resources, a perk to learn). Keep table dropdowns to a sensible width; the confirmation page says the rest. */
td select { max-width: 12em; }

/* The Admin page's welcome message preview. */
textarea.welcome-text { width: 100%; min-width: 260px; font: 14px/1.4 var(--body); background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; margin-top: 6px; }

/* Big screens (designer, Sep 30: a 3440x1440 monitor). The page column grows with the window instead of staying
   1100px wide in the middle; the grids then fit more cards side by side. Running text keeps a readable line length. */
@media (min-width: 1600px) { .wrap { max-width: 1440px; } }
@media (min-width: 2200px) { .wrap { max-width: 1840px; } }
main.wrap > p, main.wrap > ul > li, main.wrap > ol > li, .explain p { max-width: 110ch; }

/* The ticker is independent of the selected theme; its backend can enable it for other themes later. */
.leader-ticker { background:var(--ticker-bg, var(--panel)); color:var(--ticker-ink, var(--ink));
  border-block:1px solid var(--ticker-line, var(--line)); position:relative; overflow:hidden; }
.leader-ticker::after { content:""; position:absolute; inset:auto 0 0; height:8px; pointer-events:none;
  border-block:1px solid var(--ticker-line, var(--line));
  background:repeating-linear-gradient(90deg, transparent 0 24px, var(--ticker-line, var(--line)) 24px 27px); }
.ticker-shell.wrap { padding-block:8px 16px; display:flex; align-items:center; gap:12px; }
.ticker-link { display:flex; flex:1; min-width:0; gap:20px; align-items:center; color:inherit; text-decoration:none; }
.ticker-train { position:relative; flex:none; width:clamp(140px, 17vw, 210px);
  aspect-ratio:2172 / 724; pointer-events:none; }
/* Preserve the full approved image, including its transparent canvas, at its original aspect ratio. */
.ticker-train img { display:block; width:100%; height:auto; }   /* smooth: shown ~10x smaller than drawn (no pixelated) */
.ticker-window { position:relative; min-width:0; flex:1; overflow-x:auto; scrollbar-width:thin; }
.ticker-track { display:flex; width:max-content; }
.ticker-sequence { display:flex; flex:none; align-items:center; gap:40px; padding-right:40px; }
.ticker-copy { display:none; }
.ticker-category { display:flex; flex:none; align-items:center; gap:24px;
  white-space:nowrap; font-size:14px; font-variant-numeric:tabular-nums; }
.ticker-placing { display:inline-flex; align-items:center; gap:10px; }
.ticker-placing .initials { font-family:"Press Start 2P", ui-monospace, monospace;
  font-weight:400;
  font-size:16px; letter-spacing:0; line-height:1.4; }
.ticker-rank { font-size:16px; line-height:1.2; letter-spacing:.02em;
  color:var(--ticker-ink, var(--ink)); }
.ticker-value { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.ticker-icon { display:inline-grid; flex:none; place-items:center; width:40px; height:40px; line-height:1; }
.ticker-icon .gm-icon { color:var(--ticker-accent, var(--accent)); width:40px; height:40px; margin:0; }
.ticker-icon .gm-icon-overall { width:36px; height:36px; color:var(--ticker-trophy, var(--accent)); }
.ticker-icon .gm-icon-time { color:var(--ticker-clock, var(--accent)); }
.ticker-icon .gm-icon-cash { color:var(--ticker-money, var(--accent)); }
.ticker-icon .gm-icon-crew { color:var(--ticker-crew, var(--accent)); }
/* Center the visible artwork, whose original SVG canvases have different top and bottom margins. */
.ticker-icon .gm-icon-overall svg { transform:translateY(-1px); }
.ticker-icon .gm-icon-cash svg { transform:translateY(-1px); }
.ticker-icon .gm-icon-crew svg { transform:translate(1px, -5px); }
.ticker-icon .gm-icon-crew svg > g > g > g:last-child { fill:var(--ticker-crew-secondary, var(--accent)); }
.ticker-ready:not(.ticker-paused) .ticker-window { overflow:hidden; }
.ticker-ready:not(.ticker-paused) .ticker-track { animation:ticker-roll var(--ticker-duration, 65s) linear infinite; }
@media (hover:hover) {
  .leader-ticker:hover .ticker-track { animation-play-state:paused; }
}
.leader-ticker:has(.ticker-link:focus-visible) .ticker-track { animation-play-state:paused; }
.ticker-link:focus-visible { outline:2px solid var(--ticker-accent, var(--accent)); outline-offset:3px; }
@keyframes ticker-roll {
  from { transform:translateX(var(--ticker-start, 100vw)); }
  to { transform:translateX(-100%); }
}

/* Slant and Carbon / Chrome share the compact dashboard frame; their material finishes stay separate. */
.office-layout, .office-tours-panel, .office-season-panel, .office-recent-panel { display:contents; }
.office-train-icon, .office-condition progress { display:none; }
.office-condition b { font-weight:inherit; }
:is([data-theme="slant"], [data-theme="carbon"]) body { background:linear-gradient(120deg, var(--panel2), var(--bg) 45%); }
:is([data-theme="slant"], [data-theme="carbon"]) header.top { background:linear-gradient(180deg, var(--panel), var(--panel2));
  border-bottom:3px solid var(--steel-shadow); }
:is([data-theme="slant"], [data-theme="carbon"]) .brand b { color:var(--ink); font-weight:700; letter-spacing:-.025em; }
:is([data-theme="slant"], [data-theme="carbon"]) nav.main { text-transform:none; letter-spacing:0; }
:is([data-theme="slant"], [data-theme="carbon"]) .cash { color:var(--ink); font-variant-numeric:tabular-nums; font-weight:700; }
:is([data-theme="slant"], [data-theme="carbon"]) .strip { background:var(--panel); }
:is([data-theme="slant"], [data-theme="carbon"]) h1 { font-weight:700; letter-spacing:-.025em; color:var(--ink); }
:is([data-theme="slant"], [data-theme="carbon"]) h2, :is([data-theme="slant"], [data-theme="carbon"]) h3 { text-transform:none; letter-spacing:0; font-weight:600; }
:is([data-theme="slant"], [data-theme="carbon"]) .card { box-shadow:0 2px 0 var(--panel2); border-top-color:var(--steel-light); }
:is([data-theme="slant"], [data-theme="carbon"]) .card h3 { border-bottom:1px solid var(--line); }
:is([data-theme="slant"], [data-theme="carbon"]) .btn, :is([data-theme="slant"], [data-theme="carbon"]) button { text-transform:none; letter-spacing:0; }
:is([data-theme="slant"], [data-theme="carbon"]) .btn:not(.ghost):not(.social), :is([data-theme="slant"], [data-theme="carbon"]) button:not(.ghost) {
  background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 85%, var(--ink)));
  color:var(--panel); }
:is([data-theme="slant"], [data-theme="carbon"]) .tile, :is([data-theme="slant"], [data-theme="carbon"]) .chip, :is([data-theme="slant"], [data-theme="carbon"]) .emp-badge {
  background:var(--panel2); }
:is([data-theme="slant"], [data-theme="carbon"]) .board { background:var(--panel); }
:is([data-theme="slant"], [data-theme="carbon"]) .board-table tr.me td, :is([data-theme="slant"], [data-theme="carbon"]) .ov-phone tr.me td {
  background:color-mix(in srgb, var(--accent) 12%, var(--panel)); }
:is([data-theme="slant"], [data-theme="carbon"]) .past-menu-list { box-shadow:0 8px 24px color-mix(in srgb, var(--ink) 20%, transparent); }
:is([data-theme="slant"], [data-theme="carbon"]) .office-season .card { background:var(--ticker-bg); color:var(--ticker-ink); }
:is([data-theme="slant"], [data-theme="carbon"]) .office-season h3, :is([data-theme="slant"], [data-theme="carbon"]) .office-season .stat small { color:var(--ticker-ink); }
:is([data-theme="slant"], [data-theme="carbon"]) .office-season h3 { border-color:var(--ticker-line); }
:is([data-theme="slant"], [data-theme="carbon"]) .overall-icon { color:var(--ticker-accent); }
:is([data-theme="slant"], [data-theme="carbon"]) .office-season .gm-icon { color:var(--ticker-accent); }
:is([data-theme="slant"], [data-theme="carbon"]) .office-stockline { border-bottom:1px solid var(--line); }
:is([data-theme="slant"], [data-theme="carbon"]) .office-section a { font:600 14px var(--body); text-transform:none; letter-spacing:0; }
@media (min-width:1000px) {
  html:is([data-theme="slant"], [data-theme="carbon"]) { background:var(--panel2); }
:is([data-theme="slant"], [data-theme="carbon"]) body { border:1px solid var(--line); border-radius:16px 16px 5px 5px; box-shadow:0 12px 36px color-mix(in srgb, var(--ink) 14%, transparent); }
  :is([data-theme="slant"], [data-theme="carbon"]) header.top { border-radius:16px 16px 0 0; }
:is([data-theme="slant"], [data-theme="carbon"]) .brand b { font-style:italic; }
:is([data-theme="slant"], [data-theme="carbon"]) .office-tours-panel, :is([data-theme="slant"], [data-theme="carbon"]) .office-season-panel,
  :is([data-theme="slant"], [data-theme="carbon"]) .office-recent-panel { background:var(--panel); border:1px solid var(--line); border-top-color:var(--steel-light); border-radius:var(--radius); box-shadow:0 2px 0 var(--panel2); }
:is([data-theme="slant"], [data-theme="carbon"]) .office-layout .office-section a { color:var(--muted); }
:is([data-theme="slant"], [data-theme="carbon"]) .office-tours .card { background:var(--panel2); }
:is([data-theme="slant"], [data-theme="carbon"]) .office-tours h3 { border:0; }
:is([data-theme="slant"], [data-theme="carbon"]) .office-season h3 { border:0; }
:is([data-theme="slant"], [data-theme="carbon"]) .office-season .stat small { z-index:2; background:var(--ticker-bg); border:1px solid var(--ticker-line); border-radius:var(--radius); }
  :is([data-theme="slant"], [data-theme="carbon"]) .office-season .card:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
:is([data-theme="slant"], [data-theme="carbon"]) .office-train-icon { color:var(--accent); }
:is([data-theme="slant"], [data-theme="carbon"]) .office-train-name { font-weight:600; }
:is([data-theme="slant"], [data-theme="carbon"]) .office-reliability { color:var(--muted); font-weight:400; }
:is([data-theme="slant"], [data-theme="carbon"]) .office-condition { color:var(--muted); }
:is([data-theme="slant"], [data-theme="carbon"]) .office-condition b { color:var(--ink); font-weight:600; }
:is([data-theme="slant"], [data-theme="carbon"]) .office-condition progress { border:0; border-radius:3px; appearance:none; background:var(--line); accent-color:var(--accent); }
  :is([data-theme="slant"], [data-theme="carbon"]) .office-condition progress::-webkit-progress-bar { background:var(--line); border-radius:3px; }
  :is([data-theme="slant"], [data-theme="carbon"]) .office-condition progress::-webkit-progress-value { background:var(--accent); border-radius:3px; }
  :is([data-theme="slant"], [data-theme="carbon"]) .office-condition progress::-moz-progress-bar { background:var(--accent); border-radius:3px; }
:is([data-theme="slant"], [data-theme="carbon"]) .office-train-status { background:var(--panel2); border-radius:var(--radius); }
:is([data-theme="slant"], [data-theme="carbon"]) .office-layout .crewrow:not(.office-crew-tile) { border:0; }
}
@media (max-width:799px) {
  body:has(nav.main) { padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }
  nav.main, :is([data-theme="slant"], [data-theme="carbon"]) nav.main {
    position:fixed; inset:auto 0 0; z-index:100; width:100%; display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr)); align-items:stretch; gap:0;
    padding:0 4px env(safe-area-inset-bottom, 0px); background:var(--panel);
    border-top:2px solid var(--accent); font-size:12px; text-transform:none; letter-spacing:0;
  }
  nav.main > a, .nav-more > summary {
    display:flex; align-items:center; justify-content:center; min-height:64px; padding:8px 3px;
    text-align:center; line-height:1.2; overflow-wrap:anywhere; border-bottom:0;
  }
  nav.main > a.on { background:var(--panel2); box-shadow:inset 0 3px var(--accent); }
  .nav-more { display:block; position:relative; }
  .nav-more > summary { cursor:pointer; color:var(--ink); list-style:none; }
  .nav-more > summary::-webkit-details-marker { display:none; }
  .nav-more[open] > summary { background:var(--panel2); }
  .nav-more-links {
    position:absolute; right:0; bottom:calc(100% + 8px); display:flex; flex-direction:column;
    width:min(280px, calc(100vw - 16px)); max-height:60dvh; overflow-y:auto;
    padding:8px; gap:4px; background:var(--panel); border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:0 4px 20px color-mix(in srgb, var(--ink) 20%, transparent);
  }
  .nav-more-links a, .nav-more-links button { display:block; width:100%; min-height:44px;
    padding:10px 12px; text-align:left; font-size:16px; }
  .nav-more-links form { width:100%; }
  .nav-more-links a.on { background:var(--panel2); }
  header.top .hdr-right { margin-left:auto; width:auto; }
  .ticker-shell.wrap { gap:8px; }
  .ticker-link { gap:10px; }
  .ticker-category { gap:20px; }
}

/* Current operating conditions: consistent labels and values above the moving standings. */
.strip .wrap:has(.strip-stat) { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; padding-block:8px; }
.strip-stat { display:grid; align-content:start; gap:4px; padding:6px 12px; min-width:0; border-left:1px solid var(--line); }
.strip-stat small { color:var(--muted); font:600 10px var(--label); letter-spacing:.06em; text-transform:uppercase; }
.strip-stat b { color:var(--ink); font:600 13px/1.45 var(--body); overflow-wrap:anywhere; }
.strip-stat .strip-link { text-decoration-thickness:1px; }
@media (min-width:1200px) {
  .strip .wrap:has(.strip-stat) { grid-template-columns:1.15fr .8fr .85fr 1fr 1.4fr 1fr; }
  .strip-stat:first-child { border-left:0; }
}
@media (min-width:800px) and (max-width:1199px) {
  .strip-stat:nth-child(3n + 1) { border-left:0; }
  .strip-stat:nth-child(n + 4) { border-top:1px solid var(--line); padding-top:10px; margin-top:4px; }
}
@media (max-width:799px) {
  .strip .wrap:has(.strip-stat) { grid-template-columns:repeat(2, minmax(0, 1fr)); padding-block:6px; }
  .strip-stat { padding:8px 10px; }
  .strip-stat:nth-child(2n + 1) { border-left:0; padding-left:0; }
  .strip-stat:nth-child(n + 3) { border-top:1px solid var(--line); }
  .strip-stat b { font-size:12px; }
}

/* Carbon / Chrome material finishes. Plain panels keep the weave clear of reading surfaces. */
[data-theme="carbon"] body { background:var(--carbon-weave), var(--bg); }
[data-theme="carbon"] header.top { background:var(--carbon-weave), var(--bg);
  border-top:5px solid var(--steel-light); border-bottom:3px solid var(--chrome-mid);
  box-shadow:inset 0 1px var(--chrome-low), inset 0 -1px var(--steel-light); }
[data-theme="carbon"] .brand b { font-style:italic; text-shadow:0 2px 3px var(--shadow); }
[data-theme="carbon"] .strip { background:var(--ticker-bg); border-bottom:2px solid var(--chrome-mid); }
[data-theme="carbon"] .card, [data-theme="carbon"] .office-tours-panel,
[data-theme="carbon"] .office-season-panel, [data-theme="carbon"] .office-recent-panel {
  background:linear-gradient(135deg, var(--panel2), var(--panel));
  border:1px solid var(--steel-shadow); border-top-color:var(--steel-light);
  box-shadow:inset 0 1px color-mix(in srgb, var(--steel-light) 18%, transparent), 0 3px 10px var(--shadow); }
[data-theme="carbon"] .office-tours-panel, [data-theme="carbon"] .office-season-panel,
[data-theme="carbon"] .office-recent-panel { border-radius:var(--radius); }
[data-theme="carbon"] h2, [data-theme="carbon"] h3 { text-transform:uppercase; letter-spacing:.055em; color:var(--ink); }
[data-theme="carbon"] .card h3 { border-bottom-color:var(--steel-shadow); }
[data-theme="carbon"] .btn:not(.social), [data-theme="carbon"] button,
[data-theme="carbon"] select { border:1px solid var(--steel-shadow);
  background:linear-gradient(var(--chrome-low), var(--panel)); color:var(--ink);
  box-shadow:inset 0 1px color-mix(in srgb, var(--steel-light) 30%, transparent), 0 2px 4px var(--shadow); }
[data-theme="carbon"] .btn:not(.ghost):not(.social), [data-theme="carbon"] button:not(.ghost) {
  background:linear-gradient(var(--button-top), var(--button-bottom)); color:var(--button-ink);
  border-color:var(--accent); }
/* The open list is drawn by the browser (white on Windows Chromium); give it its own colors, not the select's light ink. */
[data-theme="carbon"] select { color-scheme:dark; }
[data-theme="carbon"] select option, [data-theme="carbon"] select optgroup { background:var(--panel); color:var(--ink); }
[data-theme="carbon"] select option:checked, [data-theme="carbon"] select option:hover { background:var(--accent); color:var(--button-ink); }
[data-theme="carbon"] .btn:hover, [data-theme="carbon"] button:hover { filter:brightness(1.1); }
[data-theme="carbon"] :is(a, button, select, input, summary):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
[data-theme="carbon"] .office-season .card { background:var(--ticker-bg); }
[data-theme="carbon"] .office-tours .card:has(a[href^="/shift/"]) {
  border-color:var(--accent); box-shadow:inset 3px 0 var(--button-top), 0 2px 5px var(--shadow);
  background:linear-gradient(135deg, color-mix(in srgb, var(--button-bottom) 25%, var(--panel)), var(--panel)); }
[data-theme="carbon"] .office-crew-tile { background:var(--ticker-bg); }
[data-theme="carbon"] .crew-portrait { border-top-color:var(--chrome-mid); }
[data-theme="carbon"] .leader-ticker { border-block-color:var(--chrome-mid); }
@media (min-width:1000px) {
  html[data-theme="carbon"] { background:var(--bg); }
  [data-theme="carbon"] body { box-shadow:0 12px 40px var(--shadow); }
}
@media (max-width:799px) {
[data-theme="carbon"] .office-tours h3 { border:0; }
  [data-theme="carbon"] nav.main { background:linear-gradient(var(--chrome-low), var(--ticker-bg)); border-top-color:var(--chrome-mid); }
  [data-theme="carbon"] nav.main > a.on { color:var(--accent); background:var(--panel); }
}


[data-theme="carbon"] .office-tours .btn[href^="/jobs/"] { background:linear-gradient(var(--chrome-low), var(--panel)); border-color:var(--steel-shadow); color:var(--ink); }
@media (max-width:799px) {
}

[data-theme="carbon"] .role-icon.role-operator { color:var(--accent); }

/* Match the reference's opposing rounded corners. */
[data-theme="carbon"] .card,
[data-theme="carbon"] .office-tours-panel,
[data-theme="carbon"] .office-season-panel,
[data-theme="carbon"] .office-recent-panel { border-radius:14px 0 14px 0; }
[data-theme="carbon"] .office-tours .card,
[data-theme="carbon"] .office-season .card,
[data-theme="carbon"] .office-crew-tile { border-radius:10px 0 10px 0; }
[data-theme="carbon"] .office-crew-panel .crewrow.office-crew-tile { border-radius:10px 0 10px 0; }


/* Pale Slant cards need the same visible top edge as their sides on phones. */
@media (max-width:799px) {
  [data-theme="slant"] .card { border-top-color:var(--line); }
}

/* Shared frame and Office component geometry. */
:where(html) {
.wrap { max-width:1440px; padding-inline:24px; }
header.top .wrap { padding-block:16px; }
nav.main { font-size:14px; gap:8px 18px; }
.hdr-right { flex-wrap:wrap; gap:8px 14px; }
.strip .wrap { font-size:13px; padding-block:10px; }
.card h3 { padding-bottom:10px; }
.office-season h3 { display:flex; align-items:center; gap:8px; }
.office-season .gm-icon, .overall-icon { width:22px; height:22px; flex:none; margin:0; }
.office-season .stat small { display:block; font-size:12px; line-height:1.5; margin-top:4px; }
.office-tours .card { display:flex; flex-direction:column; }
.office-tours .btn { display:inline-flex; align-items:center; justify-content:center; align-self:center;
  inline-size:min(100%, 10rem); block-size:44px; padding-inline:4px; margin-top:auto; text-align:center; white-space:nowrap; }
.office-stockline { padding-block:10px; }
.office-section { display:flex; align-items:center; justify-content:space-between; gap:16px; }
@media (min-width:1000px) {
body { width:calc(100% - 64px); max-width:1480px; margin:28px auto; }
header.top .wrap { padding-block:14px; gap:12px 16px; }
.brand b { font-size:20px; }
.brand .mark { width:72px; height:auto; }
nav.main { font-size:12px; gap:6px 14px; }
.hdr-right { font-size:12px; gap:8px 10px; }
.cash { font-size:16px; }
.strip .wrap { font-size:11px; gap:4px 16px; padding-block:8px; }
.ticker-shell.wrap { min-height:62px; padding-block:2px 8px; }
.ticker-train { width:156px; }
.ticker-category { gap:24px; }
main.wrap { padding-top:22px; }
.company-head h1 { font-size:28px; margin:0; }
.company-initials { font-size:15px; }
.company-sub { font-size:12px; margin:4px 0 18px; }
.company-sub .bullet { width:20px; height:20px; font-size:12px; }
.office-layout { display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas:"tours season" "fleet crew" "recent recent" "records records"; gap:16px; align-items:start; }
.office-support { display:contents; }
.office-tours-panel { grid-area:tours; }
.office-season-panel { grid-area:season; }
.office-fleet-panel { grid-area:fleet; }
.office-crew-panel { grid-area:crew; }
.office-recent-panel { grid-area:recent; }
.office-support > .records { grid-area:records; }
.office-tours-panel, .office-season-panel,
  .office-recent-panel { display:block; padding:16px; min-width:0; }
.office-layout > *, .office-support > * { min-width:0; }
.office-layout h2, .office-layout h3 { font-size:15px; margin:0 0 14px; }
.office-layout .office-section a { font-size:11px; }
.office-tours { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.office-tours .card { padding:12px; min-width:0; }
.office-tours h3 { font-size:13px; padding:0; margin-bottom:8px; }
.office-tours p { font-size:12px; margin:0 0 14px; overflow-wrap:anywhere; }
.office-tours .small { font-size:11px; }
.office-tour-route { display:none; }
.office-tours .btn { font-size:12px; padding:8px 6px; }
.office-season { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.office-season .card { padding:12px; position:relative; padding-left:44px; }
.office-season h3 { font-size:11px; padding:0; margin:0 0 4px; }
.office-season .gm-icon, .office-season .overall-icon { position:absolute; left:12px; top:28px; width:22px; height:22px; }
.office-season .stat { font-size:24px; line-height:1.2; overflow-wrap:anywhere; }
.office-season .stat small { display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; padding:8px 12px; font-size:11px; margin:0; }
.office-season .card:hover .stat small,
  .office-season .card:focus-within .stat small { display:block; }
.office-fleet-panel, .office-crew-panel { padding:16px; position:relative; }
.office-stockline { font-size:13px; padding-block:14px; display:grid; grid-template-columns:32px minmax(0, 1fr) 100px auto; align-items:center; gap:14px; }
.office-stockline:has(.train-display) { grid-template-columns:112px minmax(0, 1fr) 100px; }
.office-stockline:has(.train-display) .office-train-art { grid-row:1 / span 2; }
.office-stockline:has(.train-display) .office-condition { grid-column:3; }
.office-stockline .office-maint { grid-column:2 / -1; }
.office-train-icon { display:block; width:32px; height:32px; }
.office-train-name { overflow-wrap:anywhere; }
.office-reliability { display:block; font-size:10px; }
.office-separator { display:none; }
.office-condition { font-size:10px; }
.office-condition b { font-size:13px; }
.office-condition progress { display:block; width:100%; height:5px; margin-top:5px; }
.office-train-status { font-size:10px; padding:5px 7px; }
.office-fleet-panel > p, .office-crew-panel > p:not(.office-rdo-legend) { position:absolute; top:17px; right:16px; margin:0; font-size:11px; }
.office-crew-panel > .office-rdo-legend { margin:8px 0 0; }   /* the strip's legend stays under the tiles (v0.32) */
.office-layout .crewrow:not(.office-crew-tile) { font-size:12px; padding-block:7px; }
.office-layout .fmeter { min-width:130px; gap:8px; }
.office-layout .fmeter-label { font-size:11px; }
.office-layout .fmeter-track { max-width:70px; height:5px; }
.office-recent-panel table { font-size:12px; }
.office-recent-panel .badge { font-size:11px; }
.records { font-size:12px; }
}
@media (max-width:799px) {
.wrap { padding-inline:16px; }
header.top .wrap { gap:12px; }
header.top .wrap { position:relative; }
.brand { max-width:calc(100% - 110px); }
.brand .mark { width:60px; height:auto; }
.brand b { font-size:20px; }
.hdr-right { gap:8px 12px; }
.hdr-right .cash { position:absolute; right:16px; top:20px; font-size:17px; }
.office-season { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.office-season .card { padding:12px; }
.office-season h3 { font-size:15px; }
.office-season .stat { font-size:24px; overflow-wrap:anywhere; }
.office-section { flex-wrap:wrap; }
}
@media (min-width:1200px) {
header.top .wrap { min-height:61px; padding-block:6px; }
.strip .wrap:has(.strip-stat) { min-height:63px; padding-block:4px; align-content:center; }
}
.office-layout { display:grid; gap:16px; }
.office-support { display:contents; }
.office-tours-panel, .office-season-panel,
.office-recent-panel { display:block; padding:16px; min-width:0; }
.office-layout h2, .office-layout h3 { margin-top:0; }
.office-section { font-size:18px; margin-bottom:14px; }
.office-season { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.office-season .stat { font-size:24px; }
.ticker-shell.wrap { min-height:62px; padding-block:2px 8px; }
.ticker-train { width:156px; }
@media (min-width:1000px) {
header.top .wrap { min-height:58px; padding-block:6px; }
}
@media (max-width:799px) {
.wrap { padding-inline:16px; }
header.top .wrap { padding-block:8px; }
.brand b { font-size:19px; }
.cash { font-size:17px; }
.office-tours { grid-template-columns:minmax(0, 1fr); gap:8px; }
.office-tours .card { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 10px; padding:12px; }
.office-tours h3 { font-size:14px; margin:0; padding:0; }
.office-tours p { font-size:12px; margin:0; }
.office-tours .btn { grid-column:2; grid-row:1 / 3; align-self:center; margin:0; font-size:12px; padding:10px; }
.office-tour-route { display:none; }
.office-season .card { padding:10px; }
.office-season h3 { font-size:12px; padding-bottom:6px; gap:5px; }
.office-season .stat { font-size:21px; }
.office-season .stat small { font-size:11px; }
}
@media (max-width:799px) {
.hdr-right { margin-left:auto; width:auto; }
header.top .wrap { gap:8px 12px; }
.brand .mark { width:48px; }
.brand b { font-size:17px; }
.cash { font-size:15px; }
}
}

/* ---- Orientation and Rules guide (Oct 14, 2026): steps, tour bar, on-time chart, morale ladder, folded rules.
   Theme colors only (--accent, --ok, --late, --bad, --line, --panel, --ink, --muted), so every theme draws them. */
.guide-lede { font-size: 17px; }
.guide-steps { list-style: none; counter-reset: step; padding: 0; margin: 10px 0 14px; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.guide-steps li { counter-increment: step; position: relative; padding: 10px 12px 10px 48px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); }
.guide-steps li::before { content: counter(step); position: absolute; left: 10px; top: 10px; width: 28px; height: 28px;
  border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--bg);
  font: 700 15px var(--label); }
.guide-steps li > b { display: block; margin-bottom: 2px; }
.guide-steps li > span { font-size: 14px; }
.guide-day { display: grid; grid-template-columns: 8fr 8fr 8fr; gap: 3px; margin: 8px 0 10px; }
.guide-tour { padding: 6px 8px; font-size: 13px; border-radius: 4px; border: 1px solid var(--line);
  border-top: 4px solid var(--accent); background: var(--panel); }
.guide-tour b { display: block; }
.guide-tour-pm { border-top-color: var(--late); }
.guide-tour-mid { border-top-color: var(--muted); }
.guide-later li, .guide .rule-sum { color: var(--ink); }
.guide-words { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 14px; }
.guide-words dt { font-weight: 700; }
.guide-words dd { margin: 0; }
.guide-score { margin: 8px 0 10px; max-width: 460px; grid-template-columns: 44px minmax(0, 1fr); }
.guide-score .score-legend { display: grid; gap: 4px; }
.guide-short ul { margin: 6px 0; }
.guide-short li { margin: 4px 0; }
.guide-toc { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 4px 0 14px; }
.guide-toc a { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  font-size: 14px; text-decoration: none; }
.guide-toc .guide-openall { font-size: 13px; padding: 4px 12px; margin-left: auto; }
.guide-sec { scroll-margin-top: 12px; }
.guide-sec h2 { margin-top: 0; }
/* Folded rules (Oct 20): each summary is a tappable row with a round + button on the right, - when open, so it
   reads as something to open on a phone, where there's no hover. */
details.rule { border-top: 1px solid var(--line); padding: 2px 0; scroll-margin-top: 12px; }
details.rule > summary { cursor: pointer; padding: 10px 48px 10px 8px; position: relative; list-style: none;
  border-radius: var(--radius); }
details.rule > summary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
details.rule > summary::-webkit-details-marker { display: none; }
details.rule > summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; box-sizing: border-box; border: 2px solid var(--accent); border-radius: 50%;
  color: var(--accent); font: 700 22px/26px var(--body); text-align: center; }
details.rule[open] > summary::after { content: "\2212"; background: var(--accent); color: var(--bg); }
details.rule[open] > summary .rule-sum { display: none; }   /* open: the full text replaces the one-line summary */
details.rule > summary .rule-sum { display: block; font-size: 14px; color: var(--muted); }
details.rule > p { margin: 0 0 10px 8px; }
/* The Handbook's links to the Orientation and the patch notes: two big buttons under the title. */
.guide-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0 0 14px; }
.guide-link { display: block; padding: 10px 40px 10px 14px; position: relative; border: 2px solid var(--accent);
  border-radius: var(--radius); background: var(--panel); text-decoration: none; color: var(--ink); }
.guide-link:hover { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.guide-link::after { content: "\203A"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--accent); font: 700 28px var(--body); }
.guide-link b { display: block; color: var(--accent); font: 600 18px var(--label); text-transform: uppercase;
  letter-spacing: .04em; }
.guide-link span { font-size: 14px; color: var(--muted); }
.guide-new { font-style: normal; font-size: 12px; padding: 1px 6px; margin-left: 4px; border-radius: 999px;
  background: var(--accent); color: var(--bg); vertical-align: 2px; }
/* the on-time chart: two bars on one scale of minutes from schedule */
.guide-ontime { margin: 6px 0 12px; }
.ot-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: center; margin: 4px 0; }
.ot-label { font: 600 13px var(--label); text-transform: uppercase; letter-spacing: .04em; }
.ot-bar, .ot-axis { position: relative; height: 26px; }
.ot-axis { height: 18px; }
.ot-seg { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; overflow: hidden; white-space: nowrap;
  font: 700 12px var(--label); border-right: 2px solid var(--bg); color: var(--bg); }
.ot-none { background: var(--line); color: var(--muted); }
.ot-part { background: var(--late); }
.ot-full, .ot-ok { background: var(--ok); }
.ot-bad { background: var(--bad); }
.ot-axis span { position: absolute; top: 0; font-size: 11px; color: var(--muted); white-space: nowrap; border-left: 1px solid var(--muted);
  padding-left: 3px; }
.ot-axis span:first-child { border-left: 0; padding-left: 0; }
.ot-axis i { font-style: normal; }
.ot-short { display: none; }
/* the morale ladder: best step at the top, each in its crew-page color */
.guide-ladder { list-style: none; padding: 0; margin: 8px 0 10px; display: grid; gap: 3px; max-width: 520px; }
.guide-ladder li { padding: 5px 10px; border-left: 6px solid var(--line); background: var(--panel); border-radius: 0 4px 4px 0;
  font-size: 14px; }
.guide-ladder li.ok { border-left-color: var(--ok); }
.guide-ladder li.late { border-left-color: var(--late); }
.guide-ladder li.bad { border-left-color: var(--bad); }
.guide-ladder li span { color: var(--muted); }
.guide-maint td { vertical-align: middle; }
.guide-maint td:last-child { white-space: nowrap; }
.guide-meter { display: inline-block; width: 90px; height: 10px; border: 1px solid var(--line); border-radius: 5px;
  vertical-align: middle; overflow: hidden; }
.guide-meter > span { display: block; height: 100%; background: var(--ok); }
.guide-meter.falling { border-color: var(--bad); }
@media (max-width:799px) {
  .guide-day { grid-template-columns: 1fr; }
  .ot-row { grid-template-columns: 58px minmax(0, 1fr); gap: 6px; }
  .ot-label { font-size: 11px; }
  .ot-seg { font-size: 10px; }
  .ot-axis span { font-size: 10px; }
  .ot-long { display: none; }
  .guide-meter { width: 56px; }
  .ot-short { display: inline; }
  .guide-toc .guide-openall { margin-left: 0; }
}
.ot-axis span:last-child { transform: translateX(-100%); border-left: 0; padding-left: 0; border-right: 1px solid var(--muted);
  padding-right: 3px; }
/* Admin page: the invite messages, one row of Copy buttons per app */
.invite-copy { display: grid; grid-template-columns: max-content repeat(3, max-content); gap: 6px 6px; align-items: center; }
.invite-copy > div { display: contents; }          /* each app's name and its three buttons line up as columns */
.invite-copy p { grid-column: 1 / -1; margin: 2px 0 6px; }
@media (max-width: 1100px) {      /* phones and a tablet: the buttons wrap, the table doesn't scroll (Oct 17) */
  .invite-copy { display: block; }
  .invite-copy > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 2px 0 6px; }
}
/* Rules: the GSTA bonus by minute, one column a minute from 5 ahead to 5 behind */
.guide-bonus { margin: 14px 0 12px; max-width: 640px; }
.gb-cols { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; height: 120px; align-items: end; }
.gb-col { position: relative; height: var(--h); border-radius: 3px 3px 0 0; }
.gb-col b { position: absolute; bottom: 100%; left: 0; right: 0; text-align: center; font: 700 11px var(--label);
  color: var(--ink); padding-bottom: 2px; white-space: nowrap; }
.gb-axis, .gb-sides { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; text-align: center;
  font-size: 12px; color: var(--muted); margin-top: 3px; }
.gb-sides { grid-template-columns: 1fr 1fr; }
.gb-sides span:last-child { text-align: right; }
.gb-sides span:first-child { text-align: left; }
@media (max-width:799px) { .gb-col b { font-size: 9px; } .gb-cols { height: 100px; } }

/* ---- Accounting (Oct 14, 2026): period tabs, four totals, the cash chart, where the money goes, a register by day.
   Ledger feel in each theme's own colors: tabular figures, right-aligned, a double rule under the total. */
.books-periods, .books-filters { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 4px 0 14px; }
.books-periods a, .books-filters a { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  font-size: 14px; text-decoration: none; }
.books-periods a.on, .books-filters a.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.books-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.books-tile { display: grid; gap: 2px; margin: 0; min-width: 0; container-type: inline-size; }
.books-tile small { font: 600 13px var(--label); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
/* A figure never breaks between its digits (a tablet in portrait, Carbon, Oct 15: "$3,540,22" with the 1 below):
   it stays on one line and shrinks with its own tile (cqi = 1% of the tile's width). The vw sizes are for browsers
   without container units. */
.books-tile b { font-size: clamp(18px, 5.5vw, 24px); font-size: clamp(14px, 12cqi, 24px); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.books-tile:first-child b { font-size: clamp(20px, 6.5vw, 28px); font-size: clamp(16px, 12cqi, 28px); }
.books-charts { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; margin-bottom: 8px; }
.books-chart { margin: 0; min-width: 0; }
.books-chart h2 { margin-top: 0; font-size: 18px; }
.books-cash { position: relative; margin: 0; outline-offset: 4px; }
.books-cash svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.bc-grid { stroke: var(--line); stroke-width: 1; }
.bc-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.bc-area { fill: var(--accent); opacity: .1; }
.bc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bc-end, .bc-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.bc-cross { stroke: var(--muted); stroke-width: 1; }
.bc-tip { position: absolute; top: -6px; transform: translateX(-50%); padding: 3px 8px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--bg); color: var(--muted); font-size: 12px; white-space: nowrap; pointer-events: none; }
.bc-tip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.books-bars { display: grid; gap: 8px; }
.bb-row { display: grid; gap: 2px; }
.bb-label { font-size: 13px; }
.bb-track { display: flex; align-items: center; gap: 8px; }
.bb-bar { display: block; height: 16px; min-width: 2px; background: var(--accent); border-radius: 0 4px 4px 0; }
.bb-bar.bb-invest { opacity: .45; }
.bb-row:hover .bb-bar, .bb-row:focus .bb-bar { filter: brightness(1.15); }
.bb-track b { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.books-cats td.num, .reg .num, .bd-fig b { font-variant-numeric: tabular-nums; }
.books-cats .bk-group td { font-weight: 700; padding-top: 10px; }
.books-cats .bk-sub td:first-child { padding-left: 22px; color: var(--muted); }
.books-cats .bk-total td { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.books-day { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin: 0 0 6px; }
.books-day > summary { cursor: pointer; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.books-day[open] > summary { border-bottom: 1px solid var(--line); }
.bd-fig { font-size: 14px; color: var(--muted); }
.bd-fig b { color: var(--ink); }
.bd-fig b.late { color: var(--late); }
.reg { padding: 2px 12px 8px; }
.reg-row { display: grid; grid-template-columns: minmax(0, 1fr) 9.5ch 11ch; gap: 10px; padding: 5px 0; align-items: baseline;
  border-bottom: 1px solid var(--line); font-size: 14px; }
.reg-row .num { text-align: right; }
.reg-head { font: 600 12px var(--label); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.reg > .reg-row:nth-child(even), .reg-run:nth-child(even) > summary { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.reg-run > summary { cursor: pointer; list-style: none; }
.reg-run > summary::-webkit-details-marker { display: none; }
.reg-run > summary > span:first-child::before { content: "▸ "; color: var(--accent); }
.reg-run[open] > summary > span:first-child::before { content: "▾ "; }
.reg-parts { display: block; margin-left: 1.2em; }
.reg-line { padding-left: 1.6em; font-size: 13px; }
@media (max-width: 760px) {
  .books-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* minmax(0): a big figure can't widen the page on a phone */
  .books-tile:first-child, .books-tile:last-child { grid-column: 1 / -1; }   /* cash on hand and net full width, income and spending side by side */
  .books-charts { grid-template-columns: 1fr; }
  .reg-row { grid-template-columns: minmax(0, 1fr) 9ch; }
  .reg-row > :nth-child(3) { display: none; }
}

/* Private Planner: a separate opt-in page. Every selector is scoped; the Office,
   game header, themes, and existing animated ticker keep their current behavior. */
.planner-preview { margin:0; background:var(--bg); color:var(--ink); font:14px/1.45 var(--body); }
.planner-preview * { box-sizing:border-box; }
.planner-preview .pl-symbols { position:absolute; width:0; height:0; overflow:hidden; }
.planner-preview .pl-icon { width:23px; height:23px; flex:none; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.planner-preview .pl-am { color:var(--bad); }
.planner-preview .pl-pm { color:var(--late); }
.planner-preview .pl-mid { color:var(--score-crew); }
.planner-preview .pl-header { display:flex; align-items:center; gap:22px; padding:14px 24px 10px; max-width:1900px; margin:auto; background:linear-gradient(180deg,color-mix(in srgb,var(--steel-light,var(--ink)) 6%,var(--panel)),var(--bg)); border-bottom:1px solid var(--line); }
.planner-preview .pl-plaque { width:clamp(270px,34vw,520px); flex-shrink:0; line-height:0; }
.planner-preview .pl-plaque svg { width:100%; height:auto; filter:drop-shadow(0 2px 1px color-mix(in srgb,var(--ticker-bg) 20%,transparent)); }
.planner-preview .pl-nav { display:flex; gap:8px 18px; align-items:center; flex-wrap:wrap; flex:1; font:600 15px var(--label); }
/* Keep page links out of the ticker: its dark strip has its own light ink. */
.planner-preview .pl-header a, .planner-preview .pl-shell a { color:var(--ink); text-decoration:none; }
.planner-preview .pl-header a:hover, .planner-preview .pl-shell a:hover { color:var(--accent); text-decoration:underline; }
.planner-preview .pl-private { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.12em; border:1px solid var(--line); border-radius:4px; padding:6px 10px; white-space:nowrap; }
.planner-preview .pl-no-ticker { padding:10px 24px; border-block:1px solid var(--line); color:var(--muted); font-size:12px; text-align:center; }
.planner-preview .pl-shell { width:100%; max-width:1900px; margin:auto; padding:16px 24px 24px; }
.planner-preview .pl-context { display:flex; gap:18px; justify-content:space-between; border:1px solid var(--line); background:var(--panel); border-radius:var(--radius); padding:12px 18px; box-shadow:0 2px 4px color-mix(in srgb,var(--ticker-bg) 5%,transparent); }
.planner-preview .pl-context > div { display:flex; align-items:center; gap:12px; min-width:0; }
.planner-preview .pl-context > div:first-child, .planner-preview .pl-context > div:last-child { flex-direction:column; align-items:flex-start; gap:0; }
.planner-preview .pl-context small { display:block; color:var(--muted); font-size:11px; }
.planner-preview .pl-context b { font-size:15px; }
.planner-preview .pl-weather-icon { font-size:29px; }
.planner-preview .pl-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:18px 0 6px; }
.planner-preview h1 { margin:0 14px 0 0; font:700 24px/1.2 var(--label); letter-spacing:0; text-transform:none; }
.planner-preview h2 { display:flex; align-items:center; flex-wrap:wrap; gap:9px; font:700 19px/1.3 var(--label); margin:0; padding:13px 16px; border-bottom:1px solid var(--line); text-transform:none; letter-spacing:0; }
.planner-preview h2 > .pl-icon { color:var(--accent); width:30px; height:30px; padding:5px; border:1px solid var(--line); border-radius:6px; background:linear-gradient(145deg,var(--panel),var(--panel2)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--steel-light,var(--ink)) 45%,transparent); }
.planner-preview h2 small { margin-left:auto; color:var(--muted); font:400 11px var(--body); }
.planner-preview h3 { display:flex; align-items:center; gap:8px; margin:15px 0 8px; font:700 16px/1.3 var(--label); text-transform:none; letter-spacing:0; }
.planner-preview button { font:600 13px var(--body); border:1px solid var(--line); color:var(--ink); background:var(--panel); border-radius:4px; padding:8px 12px; cursor:pointer; box-shadow:none; transform:none; text-transform:none; letter-spacing:normal; }
.planner-preview button:hover:not(:disabled) { background:color-mix(in srgb,var(--accent) 12%,var(--panel)); border-color:var(--accent); transform:none; }
.planner-preview button:disabled { opacity:.35; cursor:default; }
.planner-preview :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.planner-preview .pl-tabs { display:flex; gap:0; }
.planner-preview .pl-tabs button { border-radius:0; min-width:68px; background:var(--panel); color:var(--ink); border-color:var(--line); }
.planner-preview .pl-tabs button:first-child { border-radius:5px 0 0 5px; }
.planner-preview .pl-tabs button:last-child { border-radius:0 5px 5px 0; }
.planner-preview .pl-tabs button[aria-pressed="true"] { background:var(--accent); color:var(--bg); border-color:var(--accent); }
/* These are content surfaces implemented as buttons, not filled action buttons.
   Match the specificity of Slant/Carbon's global button:not(.ghost) rule. */
.planner-preview button.pl-recent-row, .planner-preview button.pl-month-day,
.planner-preview button.pl-week-day, .planner-preview button.pl-week-result { background:var(--panel); color:var(--ink); border-color:var(--line); }
.planner-preview .pl-date-nav { display:flex; align-items:center; gap:10px; margin-left:auto; }
.planner-preview .pl-date-nav strong { font-size:14px; text-align:center; min-width:130px; }
.planner-preview .pl-date-nav button[data-step] { font-size:22px; line-height:1; padding:4px 12px; }
.planner-preview .pl-status { min-height:18px; margin:0 0 6px; color:var(--muted); font-size:12px; }
.planner-preview .pl-day-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:18px; align-items:start; }
.planner-preview .pl-calendar-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(380px,1fr); gap:18px; align-items:start; }
.planner-preview .pl-day-layout > *, .planner-preview .pl-calendar-layout > *, .planner-preview .pl-company-panels > * { min-width:0; }
.planner-preview .pl-company-panels { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px; margin-top:18px; align-items:start; }
.planner-preview .pl-panel { background:var(--panel); border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line)); border-radius:8px; overflow:hidden; margin-bottom:16px; box-shadow:0 2px 6px color-mix(in srgb,var(--ticker-bg) 7%,transparent),inset 0 1px 0 color-mix(in srgb,var(--ink) 5%,transparent); min-width:0; }
.planner-preview .pl-panel > h2 { background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel2) 28%,var(--panel))); }
.planner-preview .pl-panel > .pl-note { padding:10px 14px; margin:0; }
.planner-preview .pl-tours { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px; }
.planner-preview .pl-tour { display:flex; gap:12px; padding:16px; border:1px solid var(--line); border-radius:6px; min-width:0; }
.planner-preview .pl-tour-art { position:relative; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; flex:none; border:1px solid var(--ticker-line); border-radius:8px; background:linear-gradient(145deg,var(--ticker-line),var(--ticker-bg) 80%); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ticker-ink) 30%,transparent),0 2px 3px color-mix(in srgb,var(--ticker-bg) 12%,transparent); }
.planner-preview .pl-tour-art > .pl-icon { width:32px; height:32px; margin:0; stroke-width:1.8; }
.planner-preview .pl-art-am > .pl-icon { color:var(--planner-am-ink); }
.planner-preview .pl-art-pm > .pl-icon { color:var(--planner-pm-ink); }
.planner-preview .pl-art-mid > .pl-icon { color:var(--planner-mid-ink); }
.planner-preview .pl-complete-badge { position:absolute; right:-7px; bottom:-5px; display:flex; width:23px; height:23px; padding:1px; border:2px solid var(--panel); border-radius:50%; background:var(--ok); color:var(--bg); }
.planner-preview .pl-complete-badge .pl-icon { width:100%; height:100%; stroke-width:2; }
.planner-preview .pl-tour h3 { margin:0 0 6px; font-size:17px; }
.planner-preview .pl-tour small { display:block; color:var(--muted); }
.planner-preview .pl-tour .pl-text-link { display:inline-block; margin-top:8px; font-size:12px; color:color-mix(in srgb,var(--accent) 65%,var(--ink)); }
.planner-preview .pl-tour.pl-current { grid-column:1/-1; border-color:var(--accent); background:color-mix(in srgb,var(--accent) 5%,var(--panel)); padding:22px 18px; }
.planner-preview .pl-tour.pl-current h3 { font-size:23px; }
.planner-preview .pl-tour .btn { display:inline-block; margin-top:12px; background:var(--accent); color:var(--bg); border:0; font-size:14px; padding:10px 18px; }
.planner-preview .pl-tour .pl-bonus { color:var(--late); }
.planner-preview .pl-recent-row { display:grid; grid-template-columns:1fr 1fr; width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0; text-align:left; padding:14px 16px; gap:10px; }
.planner-preview .pl-recent-row > span > small { display:block; font-size:11px; color:var(--muted); font-weight:400; margin-top:5px; }
.planner-preview .pl-recent-row .pl-totals { font-size:12px; }
.planner-preview .pl-totals { display:flex; flex-direction:column; gap:2px; font-size:12px; font-weight:400; min-width:0; }
.planner-preview .pl-riders { display:flex; align-items:center; flex-wrap:wrap; gap:4px; color:var(--ink); }
.planner-preview .pl-riders .pl-icon { width:17px; height:17px; }
.planner-preview .pl-received, .planner-preview .pl-spent { display:flex; justify-content:space-between; gap:4px; white-space:nowrap; }
.planner-preview .pl-received { color:color-mix(in srgb,var(--ok) 80%,var(--ink)); }
.planner-preview .pl-spent { color:color-mix(in srgb,var(--bad) 65%,var(--ink)); }
.planner-preview .pl-received > span, .planner-preview .pl-spent > span { font-size:.9em; }
.planner-preview .pl-crew-head, .planner-preview .pl-crew-row { display:grid; grid-template-columns:minmax(145px,1.7fr) minmax(65px,.7fr) minmax(65px,.7fr) minmax(85px,1fr); gap:10px; align-items:center; padding:8px 14px; }
.planner-preview .pl-crew-head { color:var(--muted); font-size:10px; background:color-mix(in srgb,var(--bg) 45%,var(--panel)); }
.planner-preview .pl-crew-row { min-height:52px; border-top:1px solid var(--line); font-size:12px; }
.planner-preview .pl-hr.pl-paged .pl-crew-list { min-height:416px; }
.planner-preview .pl-person { display:flex; gap:8px; align-items:center; min-width:0; }
.planner-preview .pl-person > span:last-child { min-width:0; }
.planner-preview .pl-person b { display:block; font-size:12px; overflow-wrap:anywhere; }
.planner-preview small { line-height:1.4; }
.planner-preview .pl-person small, .planner-preview .pl-consist small, .planner-preview .pl-usage-name small { display:block; font-size:10px; color:var(--muted); }
.planner-preview .pl-face { display:inline-flex; width:29px; height:35px; border:1px solid var(--line); border-radius:4px; flex:none; align-items:center; justify-content:center; background:linear-gradient(145deg,color-mix(in srgb,var(--ok) 6%,var(--panel)),var(--panel2)); color:var(--muted); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--steel-light,var(--ink)) 40%,transparent); }
.planner-preview .pl-face .pl-icon { width:27px; height:33px; }
.planner-preview .pl-crew-status { font-size:11px; overflow-wrap:anywhere; max-height:44px; overflow:auto; width:fit-content; max-width:100%; border:1px solid color-mix(in srgb,currentColor 40%,transparent); border-radius:4px; padding:3px 5px; line-height:1.3; }
.planner-preview .pl-mini-meter { display:block; font-size:11px; }
.planner-preview progress { display:block; appearance:none; width:100%; height:6px; border:0; border-radius:3px; overflow:hidden; background:var(--line); color:var(--ok); }
.planner-preview progress::-webkit-progress-bar { background:var(--line); border-radius:3px; }
.planner-preview progress::-webkit-progress-value { background:var(--ok); border-radius:3px; }
.planner-preview progress::-moz-progress-bar { background:var(--ok); border-radius:3px; }
.planner-preview .pl-panel-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-top:1px solid var(--line); font-size:11px; }
.planner-preview .pl-panel-foot a { color:var(--muted); }
.planner-preview .pl-pager { display:flex; align-items:center; gap:10px; font-size:12px; }
.planner-preview .pl-pager button { padding:1px 10px; font-size:20px; line-height:1.4; }
.planner-preview .pl-page-count { color:var(--muted); }
.planner-preview .pl-train-row { display:grid; grid-template-columns:64px minmax(125px,1fr) minmax(100px,1fr); gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
.planner-preview .pl-sprite { width:60px; height:63px; object-fit:contain; filter:drop-shadow(0 2px 1px color-mix(in srgb,var(--ticker-bg) 20%,transparent)); }
.planner-preview .pl-consist b { white-space:nowrap; font-size:17px; font-family:var(--label); }
.planner-preview .pl-train-metrics { font-size:11px; }
.planner-preview .pl-train-metrics > span { display:flex; justify-content:space-between; }
.planner-preview .pl-train-metrics small { color:var(--muted); }
.planner-preview .pl-calendar-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
.planner-preview .pl-month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); min-width:690px; }
.planner-preview .pl-weekday { padding:9px 4px; background:color-mix(in srgb,var(--bg) 50%,var(--panel)); text-align:center; color:var(--muted); font:600 12px var(--label); }
.planner-preview .pl-month-day { display:flex; flex-direction:column; gap:7px; min-height:150px; padding:9px 7px; background:transparent; border:0; border-top:1px solid var(--line); border-right:1px solid var(--line); border-radius:0; text-align:left; position:relative; min-width:0; font-weight:400; }
.planner-preview .pl-month-day .pl-totals { font-size:11px; }
.planner-preview .pl-month-day .pl-riders { gap:3px; font-size:11px; }
.planner-preview .pl-month-day .pl-riders .pl-icon { display:none; }
.planner-preview .pl-cell-top { display:flex; justify-content:space-between; align-items:center; gap:3px; }
.planner-preview .pl-cell-top > b { font-size:15px; }
.planner-preview .pl-day-weather { display:inline-flex; align-items:center; gap:3px; font-size:10px; white-space:nowrap; color:var(--muted); }
.planner-preview .pl-day-weather > span { font-size:16px; }
.planner-preview .pl-weather-missing { color:var(--muted); font-size:10px; }
.planner-preview .pl-other-month { opacity:.48; }
.planner-preview .pl-panel .pl-today { background:color-mix(in srgb,var(--ok) 7%,var(--panel)); box-shadow:inset 0 0 0 2px var(--ok); }
.planner-preview .pl-panel .pl-selected { box-shadow:inset 0 0 0 2px var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--panel)); }
.planner-preview .pl-cell-events { display:flex; gap:3px; flex-wrap:wrap; margin-top:auto; min-width:0; width:100%; }
.planner-preview .pl-event { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:4px; padding:3px 5px; color:var(--ok); background:color-mix(in srgb,var(--ok) 8%,var(--panel)); font-size:10px; min-width:0; }
.planner-preview .pl-event .pl-icon { width:15px; height:15px; }
.planner-preview .pl-event-comp { color:color-mix(in srgb,var(--score-crew) 60%,var(--ink)); background:color-mix(in srgb,var(--score-crew) 9%,var(--panel)); }
.planner-preview .pl-event-sick, .planner-preview .pl-event-injury { color:var(--late); }
.planner-preview .pl-event-rdo { color:var(--muted); }
/* A chip can be narrower than "Workers’ comp · 1" on a tablet. Use normal inline
   text flow, so its icon, label and count wrap inside the cell without clipping. */
.planner-preview .pl-cell-events .pl-event { display:block; max-width:100%; padding:2px 3px; font-size:10px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; text-align:left; }
.planner-preview .pl-cell-events .pl-event .pl-icon { display:inline-block; vertical-align:-3px; margin-right:3px; }
.planner-preview .pl-upcoming { font-size:10px; color:var(--muted); }
.planner-preview .pl-details { padding:0 14px 14px; }
.planner-preview .pl-details h2 { margin:0 -14px 12px; font-size:20px; }
.planner-preview .pl-detail-weather { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-bottom:12px; }
.planner-preview .pl-details > .pl-totals { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.planner-preview .pl-details > .pl-totals > span { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.planner-preview .pl-details > .pl-totals b { font-size:20px; }
.planner-preview .pl-details > .pl-totals .pl-riders > .pl-icon { display:none; }
.planner-preview .pl-detail-tours { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid var(--line); padding:12px 0; gap:8px; }
.planner-preview .pl-detail-tours > div { display:flex; flex-direction:column; gap:3px; font-size:11px; }
.planner-preview .pl-detail-tours .pl-icon { width:23px; height:23px; }
.planner-preview .pl-detail-tours small { font-size:10px; color:var(--muted); }
.planner-preview .pl-detail-tours a { color:color-mix(in srgb,var(--accent) 65%,var(--ink)); font-size:11px; }
.planner-preview .pl-usage-caption { font-size:11px; color:var(--muted); margin:12px 0; }
.planner-preview .pl-usage-row { display:grid; grid-template-columns:30px minmax(100px,1fr) minmax(50px,1fr) 68px; gap:7px; align-items:center; margin:7px 0; min-width:0; }
.planner-preview .pl-usage-row .pl-sprite { width:29px; height:36px; }
.planner-preview .pl-usage-row progress { height:12px; }
.planner-preview .pl-usage-name { min-width:0; font-size:11px; overflow-wrap:anywhere; }
.planner-preview .pl-usage-train .pl-usage-name b { white-space:nowrap; }
.planner-preview .pl-usage-number { font-size:10px; white-space:nowrap; text-align:right; }
.planner-preview .pl-usage-number b { display:block; font-size:12px; }
.planner-preview .pl-note { color:var(--muted); font-size:11px; display:block; }
.planner-preview .pl-events { margin:16px 0 10px; border-top:1px solid var(--line); padding-top:10px; }
.planner-preview .pl-events summary { cursor:pointer; font-size:12px; }
.planner-preview .pl-event-detail { display:flex; flex-wrap:wrap; gap:5px 8px; padding:9px 0; border-bottom:1px solid var(--line); font-size:12px; }
.planner-preview .pl-event-detail small { display:block; flex-basis:100%; color:var(--muted); font-size:11px; }
.planner-preview .pl-account-link { display:inline-block; margin-top:8px; font-size:12px; }
.planner-preview .pl-empty { margin:12px 0; padding:0 14px; color:var(--muted); font-size:12px; }
.planner-preview .pl-week-grid { display:grid; grid-template-columns:105px repeat(7,minmax(100px,1fr)); min-width:840px; }
.planner-preview .pl-week-day { padding:10px 6px; border-radius:0; border:0; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:7px; }
.planner-preview .pl-week-day .pl-totals { font-size:11px; }
.planner-preview .pl-week-day > b { font-size:12px; }
.planner-preview .pl-week-tour { display:flex; align-items:center; gap:8px; padding:14px; border-top:1px solid var(--line); }
.planner-preview .pl-week-result { display:flex; flex-direction:column; align-items:flex-start; padding:10px 7px; border-radius:0; border:0; border-top:1px solid var(--line); border-left:1px solid var(--line); font-size:11px; min-height:66px; gap:3px; }
.planner-preview .pl-panel .pl-state-late { color:var(--late); }
.planner-preview .pl-panel .pl-state-bad { color:var(--bad); }
.planner-preview .pl-lanes-heading { padding:10px 14px 0; }
.planner-preview .pl-lane-head, .planner-preview .pl-lane { display:grid; grid-template-columns:150px repeat(7,minmax(90px,1fr)); min-width:840px; gap:3px; padding:5px 10px; border-top:1px solid var(--line); }
.planner-preview .pl-lane-head { font-size:10px; color:var(--muted); text-align:center; }
.planner-preview .pl-lane-name { font-size:11px; padding:5px 0; }
.planner-preview .pl-lane-name small { display:block; font-size:10px; color:var(--muted); }
.planner-preview .pl-lane .pl-event { font-size:10px; padding:5px; justify-content:flex-start; grid-row:1; white-space:normal; }
.planner-preview .pl-footer { display:flex; justify-content:space-between; gap:15px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line); margin-top:18px; color:var(--muted); font-size:11px; background:none; }
.planner-preview .pl-finish-pick { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:11px; color:var(--muted); }
.planner-preview .pl-finish-pick select { width:auto; margin:0; padding:5px 8px; font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:4px; }
/* An opt-in finish for this private page only. Carbon supplies the existing dark
   palette; no account preference or other game page is changed. */
[data-theme="carbon"] .planner-preview[data-planner-finish="stainless-dark"] { --accent:var(--ticker-money); --button-top:color-mix(in srgb,var(--ticker-money) 45%,var(--ticker-bg)); --button-bottom:color-mix(in srgb,var(--ticker-money) 35%,var(--ticker-bg)); --button-ink:var(--ticker-ink); background:var(--bg); background-image:none; }
@media (min-width:1600px) {
  .planner-preview .pl-month-day { min-height:167px; padding:10px; }
  .planner-preview .pl-month-day .pl-totals { font-size:12px; }
  .planner-preview .pl-crew-row { min-height:56px; }
  .planner-preview .pl-hr.pl-paged .pl-crew-list { min-height:448px; }
}
@media (max-width:1150px) {
  .planner-preview .pl-header { flex-wrap:wrap; gap:10px; }
  .planner-preview .pl-nav { order:3; width:100%; flex-basis:100%; }
  .planner-preview .pl-private { margin-left:auto; }
  .planner-preview .pl-calendar-layout { grid-template-columns:1fr; }
  .planner-preview .pl-calendar-layout > aside { max-width:none; }
  .planner-preview .pl-day-layout { grid-template-columns:1fr; }
  .planner-preview .pl-day-layout > aside { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
  .planner-preview .pl-crew-head, .planner-preview .pl-crew-row { grid-template-columns:minmax(110px,1.5fr) 55px 55px minmax(55px,.8fr); gap:6px; padding-inline:10px; }
  .planner-preview .pl-train-row { grid-template-columns:40px minmax(100px,1fr) 100px; gap:8px; }
  .planner-preview .pl-train-row .pl-sprite { width:38px; }
  .planner-preview .pl-details .pl-usage-row { grid-template-columns:30px minmax(110px,1fr) minmax(100px,2fr) 85px; }
}
@media (max-width:760px) {
  .planner-preview .pl-header { padding:10px 12px; }
  .planner-preview .pl-plaque { width:270px; max-width:100%; }
  .planner-preview .pl-nav { font-size:12px; gap:8px 14px; }
  .planner-preview .pl-private { font-size:9px; }
  .planner-preview .pl-shell { padding:12px; }
  .planner-preview .pl-context { display:grid; grid-template-columns:1fr 1fr; padding:10px; gap:12px; }
  .planner-preview .pl-context b { font-size:12px; }
  .planner-preview .pl-context .pl-icon { width:20px; }
  .planner-preview .pl-context > div { gap:6px; }
  .planner-preview .pl-toolbar { gap:9px; }
  .planner-preview h1 { font-size:21px; margin-right:auto; }
  .planner-preview .pl-date-nav { order:3; width:100%; margin:0; justify-content:space-between; gap:6px; }
  .planner-preview .pl-date-nav strong { min-width:0; font-size:12px; }
  .planner-preview .pl-date-nav button { padding-inline:9px; }
  .planner-preview #pl-refresh { padding:8px; }
  .planner-preview .pl-tabs button { min-width:52px; padding:8px; }
  .planner-preview .pl-day-layout > aside, .planner-preview .pl-company-panels { display:block; }
  .planner-preview .pl-tours { grid-template-columns:1fr; }
  .planner-preview .pl-tour { padding:13px; }
  .planner-preview .pl-tour.pl-current h3 { font-size:21px; }
  .planner-preview .pl-crew-head, .planner-preview .pl-crew-row { grid-template-columns:minmax(105px,1.4fr) 48px 48px minmax(55px,.8fr); gap:5px; padding-inline:8px; }
  .planner-preview .pl-person { gap:5px; }
  .planner-preview .pl-person b { font-size:11px; }
  .planner-preview .pl-person .pl-face { width:24px; height:30px; }
  .planner-preview .pl-crew-status { font-size:10px; }
  .planner-preview .pl-details { padding-inline:10px; }
  .planner-preview .pl-details h2 { margin-inline:-10px; font-size:18px; }
  .planner-preview .pl-details > .pl-totals { gap:8px; }
  .planner-preview .pl-details > .pl-totals b { font-size:17px; }
  .planner-preview .pl-details .pl-usage-row { grid-template-columns:25px minmax(85px,1fr) minmax(35px,1fr) 54px; gap:5px; }
  .planner-preview .pl-usage-name { font-size:10px; }
  .planner-preview .pl-usage-number { font-size:9px; }
  .planner-preview .pl-panel-foot { padding-inline:8px; gap:6px; font-size:10px; }
  .planner-preview .pl-pager { gap:6px; font-size:11px; }
  .planner-preview h2 { font-size:18px; padding:12px; }
  .planner-preview h2 small { font-size:10px; }
  .planner-preview .pl-train-row { grid-template-columns:35px minmax(100px,1fr) 100px; padding-inline:10px; }
  .planner-preview .pl-consist b { font-size:16px; }
  .planner-preview .pl-recent-row { padding:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .planner-preview * { scroll-behavior:auto; }
}

/* Shared Carbon geometry. The exclusion boundary preserves the five retiring
   styles until their separate removal; component rules inside it are shared. */
:where(html) {
  min-height:100%;
  body { min-height:100vh; }
  .wrap { max-width:1440px; }
  .office-layout { display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; }
  .office-support { display:contents; }
  .office-tours-panel, .office-season-panel, .office-recent-panel {
    display:block; padding:16px; min-width:0; border:1px solid var(--line);
    border-top-color:var(--accent); border-radius:var(--radius); background:var(--panel);
  }
  .office-layout > *, .office-support > * { min-width:0; }
  .office-tours { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .office-season { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .office-season .card { border-top:3px solid var(--accent); }
  .office-season .card:nth-child(1) { border-top-color:var(--score-riders); }
  .office-season .card:nth-child(2) { border-top-color:var(--score-profit); }
  .office-season .card:nth-child(3) { border-top-color:var(--score-crew); }
  .office-stockline:has(.train-display) { grid-template-columns:112px minmax(0, 1fr) 100px; }
  .office-stockline:has(.train-display) .office-maint { grid-column:1 / -1; }
  .office-maint fieldset { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .office-maint-opt span { padding-inline:4px; overflow-wrap:anywhere; }
  .office-stockline:has(.train-display) .office-condition { grid-column:3; }
  .office-stockline:has(.train-display) .office-train-art { grid-row:1 / span 2; }
  .shift-layout, .shift-prepare { min-width:0; }
  #setup .row { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:stretch; gap:10px; }
  #setup .row > div { min-width:0; display:flex; flex-direction:column; }
  #setup .row label { flex:1; }
  #setup select { width:100%; min-width:0; }
  td.num { white-space:nowrap; }
  @media (min-width:1000px) {
    body { width:calc(100% - 32px); max-width:1480px; margin:12px auto; }
    header.top .wrap { padding-block:6px; min-height:58px; }
    main.wrap { padding-top:12px; }
    main.wrap > h1 { margin-top:0; margin-bottom:8px; }
    main.wrap > h1 + p { margin-top:0; }
    .office-layout { grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
      grid-template-areas:"tours season" "fleet crew" "recent recent" "records records"; }
    .shift-layout { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:18px; align-items:start; }
    .shift-prepare { position:sticky; top:12px; }
    .shift-prepare h2 { margin:0 0 8px; }
    #setup .card { padding:10px 12px; }
    #setup label { margin-top:4px; font-size:13px; line-height:1.3; }
    #setup select { font-size:14px; }
    #setup .btn.big { font-size:18px; padding:9px 14px; }
    #forecast .forecast { font-size:22px; }
    .shift-trips table { font-size:13px; }
    .shift-trips th, .shift-trips td { padding:6px; }
    .jobs-page { display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:16px; }
    .jobs-page .title-row { margin:0 0 8px; }
    .jobs-page .pill-tabs { grid-column:2; grid-row:1; margin:0 0 8px; position:sticky; top:0; z-index:3; background:var(--bg); }
    .jobs-day, .jobs-strip, .jobs-table, .jobs-page > .msg { grid-column:1 / -1; }
    .jobs-day { margin:0 0 4px; }
    .jobs-strip { margin:0 0 6px; }
    .jobs-table { overflow:visible; }
    .jobs-table th { position:sticky; top:42px; z-index:2; background:var(--panel); }
    .jobs-table td { padding-block:5px; }
    .jobs-table td:last-child { white-space:nowrap; }
    .jobs-table td:last-child > a { margin-right:8px; }
    .jobs-table .wide { white-space:nowrap; }
    .jobs-table .jobtags { display:inline-flex; }
  }
  @media (min-width:1000px) and (max-width:1359px) {
    /* Side by side, the run table can't fit its eight columns here (v0.31.1): the form first, the table under it. */
    .shift-layout { display:flex; flex-direction:column; gap:12px; }
    .shift-layout > * { width:100%; }
    .shift-prepare { order:-1; position:static; }
    /* Firefox sizes a child of the display:contents Run History box short: make it a plain block here. */
    .shift-layout > .shift-history { display:block; }
    .shift-layout .shift-trips, .shift-layout .shift-trips table { width:100%; }
  }
  @media (min-width:1360px) and (max-width:1599px) {
    /* Side by side again, the run table needs about 760px (Art Deco, the widest): at 1.25fr it got about 700 at 1366
       and scrolled inside its box. From 1600px the usual split has room. */
    .shift-layout { grid-template-columns:minmax(0, 1.65fr) minmax(0, 1fr); }
  }
  @media (min-width:1600px) and (max-width:2399px) {
    /* The form keeps about 500px and the run table takes the rest, so routes and the Then column stop wrapping
       (Pete, Oct 27: "jammed up" on a 1920 screen, where the even split gave the table 760px and the form 610). */
    .shift-layout { grid-template-columns:minmax(0, 1fr) minmax(440px, 500px); }
  }
  @media (min-width:1360px) {
    /* A finished job has no form beside the runs: the closing note on top, the table across the whole width. */
    .shift-layout:not(:has(.shift-prepare)) { display:flex; flex-direction:column; gap:12px; }
    .shift-layout:not(:has(.shift-prepare)) > * { width:100%; }
    .shift-layout:not(:has(.shift-prepare)) > .msg { order:-1; }
  }
  @media (min-width:1000px) and (max-width:2399px) {
    /* Shrink the grid to the laptop, rather than to the table's minimum width. */
    .jobs-page { grid-template-columns:minmax(0, 1fr) auto; }
    .jobs-page > * { min-width:0; }
    .jobs-table { max-width:100%; }
    .jobs-table table { width:100%; font-size:14px; line-height:1.25; }
    .jobs-table th, .jobs-table td { padding:4px 6px; }
    .jobs-table .wide { white-space:normal; }
    .jobs-table .badge { font-size:12px; line-height:1.15; }
    .jobs-table .jobtags { gap:2px; }
  }
  @media (min-width:2400px) {
    body { max-width:2248px; font-size:18px; }
    .wrap { max-width:2200px; }
    .office-layout { grid-template-columns:repeat(3, minmax(0, 1fr));
      grid-template-areas:"tours season crew" "fleet recent crew" "records records records"; }
    .office-layout .office-section, .office-layout h2, .office-layout h3 { font-size:18px; }
    .office-layout .stat { font-size:30px; }
    .office-tours p, .office-stockline, .office-recent-panel table, .records { font-size:16px; }
    .office-layout .office-crew-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .shift-layout { grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); }
    .shift-trips table, .jobs-table table { font-size:17px; }
  }
  @media (min-width:800px) and (max-width:999px) {
    header.top .wrap { padding-block:8px; gap:8px 12px; }
    .brand .mark { width:48px; height:auto; }
    .brand b { font-size:19px; }
    nav.main { flex:0 0 100%; order:3; flex-wrap:nowrap; justify-content:space-between;
      font-size:15px; gap:6px 10px; letter-spacing:0; text-transform:none; }
    nav.main > a { white-space:nowrap; }
    .hdr-right { font-size:12px; gap:8px; }
    .office-crew-panel .office-crew-tiles { grid-template-columns:repeat(4, minmax(0, 1fr)); }
    .jobs-table table { font-size:14px; line-height:1.25; }
    .jobs-table th, .jobs-table td { padding:5px 5px; }
    .jobs-table .wide { min-width:8.5em; }
    .shift-trips table { font-size:14px; }
    .shift-trips th, .shift-trips td { padding:6px 5px; }
  }
  @media (max-width:799px) {
    .wrap { padding-inline:16px; }
    nav.main { font-size:12px; }
    nav.main > a, .nav-more > summary { overflow-wrap:normal; word-break:normal; hyphens:none; }
    header.top .wrap { padding-block:8px; gap:8px 12px; }
    .brand { max-width:calc(100% - 90px); }
    .brand .mark { width:48px; height:auto; }
    .brand b { font-size:17px; }
    .hdr-right .cash { font-size:15px; top:16px; }
    .office-tours { grid-template-columns:minmax(0, 1fr); gap:8px; }
    .office-tours .card { display:grid; grid-template-columns:minmax(0, 1fr) 9rem; gap:4px 10px; padding:12px; }
    .office-tours h3 { font-size:14px; margin:0; padding:0; border:0; }
    .office-tours p { font-size:12px; margin:0; }
    .office-tours .btn { grid-column:2; grid-row:1 / 3; align-self:center; margin:0; font-size:12px; padding:10px; }
    .office-tour-route { display:none; }
    .office-season .card { padding:10px; }
    .office-season h3 { font-size:12px; }
    .office-season .stat { font-size:21px; }
    .office-season .stat small { font-size:11px; }
    .office-stockline:has(.train-display) { grid-template-columns:80px minmax(0, 1fr); }
    .office-stockline:has(.train-display) .office-condition { grid-column:2; }
    .office-train-art .train-display { width:80px; }
    .strip .wrap:has(.strip-stat) { grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); padding-block:4px; }
    .strip-stat { padding:3px 5px; gap:2px; border-left:1px solid var(--line); }
    .strip-stat:nth-child(2n + 1) { border-left:1px solid var(--line); padding-left:5px; }
    .strip-stat:nth-child(3n + 1) { border-left:0; padding-left:0; }
    .strip-stat:nth-child(3) { border-top:0; }
    .strip-stat small { font-size:9px; line-height:1.2; letter-spacing:0; white-space:nowrap; }
    .strip-stat b { font-size:11px; line-height:1.25; }
    .shift-layout { display:flex; flex-direction:column; gap:12px; }
    .shift-layout > * { width:100%; }
    .shift-prepare { order:-1; }
    .shift-prepare h2 { margin:0 0 8px; }
    #setup .row { grid-template-columns:minmax(0, 1fr); gap:0; }
    #setup .card { padding:10px 12px; }
    #setup label { margin-top:6px; font-size:12px; }
    #setup select { font-size:14px; padding:6px; }
    #setup .btn.big { font-size:18px; padding:10px; }
    .shift-layout .shift-trips { min-width:0; max-width:100%; }
    .shift-trips table.stacked tr { grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:8px 12px; padding:12px; font-size:12px; }
    .shift-trips table.stacked td:nth-child(7) { grid-column:1; }
    .shift-trips table.stacked td:nth-child(8) { grid-column:2; }
    .shift-trips table.stacked td:nth-child(3), .shift-trips table.stacked td:nth-child(4),
    .shift-trips table.stacked td:nth-child(6) { display:none; }
    .shift-trips table.stacked td::before { display:none; }
  }
}
/* Individual finishes use the shared dimensions above. */
[data-theme="neon"] .brand b { font-family:"Monoton", cursive; }
[data-theme="neon"] h1 { font-weight:700; }
[data-theme="neon"] .office-section { text-shadow:0 0 12px color-mix(in srgb,var(--accent) 40%,transparent); }
[data-theme="carbon"] .rdo-week span:not(.off) { background:var(--ok); }
[data-theme="deco"] .brand b, [data-theme="deco"] :is(h1, h2, h3) { font-family:var(--display); font-weight:400; }
[data-theme="deco"] .office-layout :is(.office-tours-panel, .office-season-panel, .office-fleet-panel,
  .office-crew-panel, .office-recent-panel, .records) {
  border-color:var(--accent); box-shadow:inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--line);
}
[data-theme="deco"] .office-season .card {
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel));
}
@media (max-width:799px) {
  :is([data-theme="neon"], [data-theme="deco"], [data-theme="hyperline"]) nav.main > a[href="/crew/"] {
    font-size:11px; letter-spacing:0;
  }
}

:where(html) {
  .shift-history { display:contents; }
  .shift-history > summary { display:none; }
  @media (max-width:799px) {
    .shift-next { order:-2; }
    .shift-history { display:block; }
    .shift-history > summary { display:list-item; cursor:pointer; padding:12px; background:var(--panel); border:1px solid var(--line); }
    .shift-next table.stacked tr { margin:0; grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .shift-next table.stacked td:nth-child(3), .shift-next table.stacked td:nth-child(4) { display:block; }
    .shift-next table.stacked td[data-label]::before { display:block; }
    .shift-next table.stacked td[hidden] { display:none; }
    .shift-history[open] .shift-trips table.stacked tr { grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:8px 12px; padding:12px; }
    .shift-history[open] .shift-trips table.stacked td:not(:nth-child(2)) { display:block; }
    .shift-history[open] .shift-trips table.stacked td[data-label]:not([data-label=""]):not(.run-identity):not(.run-arrival)::before { display:block; }
  }
}

/* Run cards: the radio callsign leads; terminal arrival comes from the stored timeline. */
.run-card-meta, .run-card-title { display:block; }
.run-progress { white-space:nowrap; }
.run-number-label, .run-line-marker, .run-arrival-heading, .run-arrival-label, .run-actual { display:none; }
@media (max-width:799px) {
  .shift-trips table.stacked td.run-identity { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .shift-history[open] .shift-trips table.stacked td.run-identity { display:flex; }
  .run-card-title { order:-1; min-width:0; flex:1; }
  .shift-trips .run-card-title .callsign { display:flex; align-items:center; gap:6px; white-space:normal;
    font:700 16px/1.25 var(--label); letter-spacing:.015em; color:var(--ink); }
  .run-call-time { flex:none; font-variant-numeric:tabular-nums; }
  .run-call-route { min-width:0; overflow-wrap:anywhere; }
  .run-line-plain { display:none; }
  .run-line-marker { display:inline-grid; place-items:center; flex:none; width:28px; height:28px; }
  .run-line-marker > * { grid-area:1 / 1; }
  .run-line-marker svg { width:28px; height:28px; fill:var(--run-marker-bg); }
  .run-line-marker.is-local svg { transform:translateY(-1.5px); }
  .run-line-marker.is-express { position:relative; width:34px; }
  .run-line-marker.is-express svg { position:absolute; left:50%; top:50%; width:34px; height:34px; transform:translate(-50%, -50%); }
  .run-line-letter { position:relative; font:inherit; letter-spacing:inherit; color:var(--run-marker-ink); }
  .run-card-meta { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:3px;
    flex:0 0 48px; max-width:48px; font:600 11px/1.3 var(--label); color:var(--muted); }
  .run-card-meta .code.trip { min-width:0; }
  .run-card-meta:has(.run-progress) { flex-basis:76px; max-width:76px; }
  .run-number-label { display:inline; }
  .run-card-meta .badge { font-size:10px; }
  .run-card-meta .run-kind { display:inline-flex; align-items:center; justify-content:center;
    min-width:3.6em; border-radius:2px; padding:2px 6px; line-height:1.2; }
  .shift-trips table.stacked td:nth-child(2) { display:none; }
  .shift-trips table.stacked td:nth-child(6) { grid-column:1 / -1; }
  .shift-trips table.stacked td.run-arrival { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px; padding-bottom:8px; border-bottom:1px solid var(--line); }
  .shift-history[open] .shift-trips table.stacked td.run-arrival { display:grid; }
  .run-scheduled, .run-actual { display:flex; flex-direction:column; gap:3px;
    font:600 18px/1.2 var(--body); font-variant-numeric:tabular-nums; }
  .run-actual { text-align:right; }
  .run-arrival-label { display:block; font:600 10px/1.3 var(--label); letter-spacing:.035em;
    text-transform:uppercase; color:var(--muted); }
  .shift-trips table.stacked td.run-identity::before, .shift-trips table.stacked td.run-arrival::before { display:none; }
  .shift-trips table.stacked td:nth-child(7)::before, .shift-trips table.stacked td:nth-child(8)::before {
    display:block; margin-bottom:3px; font-size:10px; letter-spacing:.035em; }
  .shift-trips table.stacked td:nth-child(7) .badge { letter-spacing:0; font-size:13px; }
  .shift-trips table.stacked td:nth-child(8) { text-align:right; font-size:16px; font-weight:600; }
}

/* From 800px the run list keeps its table, and the line sign sits in the callsign too (Pete, Oct 27: no square or
   parallelogram in Run History while sending trains on his 800px tablet), a little smaller to fit the row. */
@media (min-width:800px) {
  .shift-trips .run-card-title .callsign { display:inline-flex; align-items:center; gap:5px; }
  .shift-trips .run-line-plain { display:none; }
  .shift-trips .run-line-marker { display:inline-grid; place-items:center; flex:none; width:22px; height:22px;
    font:700 13px/1 var(--label); }
  .shift-trips .run-line-marker > * { grid-area:1 / 1; }
  .shift-trips .run-line-marker svg { width:22px; height:22px; fill:var(--run-marker-bg); }
  .shift-trips .run-line-marker.is-express { position:relative; width:27px; }
  .shift-trips .run-line-marker.is-express svg { position:absolute; left:50%; top:50%; width:27px; height:27px;
    transform:translate(-50%, -50%); }
  .shift-trips .run-line-letter { position:relative; color:var(--run-marker-ink); }
}

/* Job details share the run identity, with scheduled times above the route. */
@media (max-width:799px) {
  .job-detail-trips table.stacked tr { gap:12px 10px; }
  .job-detail-trips table.stacked td:nth-child(2) { display:block; grid-column:1; grid-row:2; }
  .job-detail-trips table.stacked td:nth-child(5) { grid-column:2; grid-row:2; }
  .job-detail-trips table.stacked td:nth-child(3) { display:block; grid-column:1; grid-row:3; }
  .job-detail-trips table.stacked td:nth-child(4) { display:block; grid-column:2; grid-row:3; }
  .job-detail-trips table.stacked td:nth-child(6) { display:block; padding-top:10px; border-top:1px solid var(--line); }
  .job-detail-trips table.stacked td[data-label]:not(.run-identity)::before {
    display:block; margin-bottom:4px; font:700 10px/1.3 var(--label);
    letter-spacing:.035em; text-transform:uppercase; color:var(--muted);
  }
}

/* Chemistry keeps its text label beside a bubbling flask and test tube. */
.chemistry-badge { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; }
.chemistry-icon { display:block; width:30px; height:21px; flex:none; overflow:visible; }

/* Report pictograms follow each badge's theme color; their text stays readable. */
.report-badge-icon { display:inline-block; width:19px; height:19px; vertical-align:-4px; margin-right:5px; flex:none; }
.report-lunch { display:inline-flex; align-items:center; vertical-align:middle; }

/* Category colors supersede the legacy severity color on these badges. */
.badge[data-incident-category="passenger"] { color:var(--event-passenger); border-color:currentColor; }
.badge[data-incident-kind="police_activity"] { color:var(--event-police); border-color:currentColor; }
.badge[data-incident-kind="big_game"] { color:var(--event-sports); border-color:currentColor; }
.badge[data-incident-kind="parade"] { color:var(--event-parade); border-color:currentColor; }
.badge[data-incident-kind="building_emergency"] { color:var(--event-fire-dept); border-color:currentColor; }
.badge[data-incident-kind="protest"] { color:var(--event-protest); border-color:currentColor; }
.badge.chemistry-badge { color:var(--event-chemistry); border-color:currentColor; }

.badge[data-report-kind="track"] { color:var(--event-track); border-color:currentColor; }
.badge[data-incident-category="structural"] { color:var(--event-structural); border-color:currentColor; }

.lunch-rarity { --lunch-color:var(--lunch-common); color:var(--lunch-color); }
.lunch-rarity[data-lunch-grade="poor"] { --lunch-color:var(--lunch-poor); }
.lunch-rarity[data-lunch-grade="uncommon"] { --lunch-color:var(--lunch-uncommon); }
.lunch-rarity[data-lunch-grade="rare"] { --lunch-color:var(--lunch-rare); }
.lunch-rarity[data-lunch-grade="epic"] { --lunch-color:var(--lunch-epic); }
.lunch-rarity[data-lunch-grade="legendary"] { --lunch-color:var(--lunch-legendary); }
.lunch-rarity > .badge { color:inherit; border-color:currentColor; }

/* The existing server multiplier is displayed as one signed fare percentage. */
.job-overview { margin:1em 0; }
.fare-adjustment { display:inline-block; position:relative; font-variant-numeric:tabular-nums; text-align:left; }
.fare-adjustment > summary { display:flex; align-items:center; gap:5px; list-style:none; cursor:pointer; white-space:nowrap; }
.fare-adjustment > summary::-webkit-details-marker { display:none; }
.fare-info-icon { font-size:13px; line-height:1; color:var(--muted); font-weight:400; }
.fare-breakdown { position:absolute; right:0; top:100%; width:min(260px, calc(100vw - 24px)); max-height:min(280px, 50vh);
  overflow:auto; z-index:30; padding:12px; border:1px solid var(--line); border-radius:5px; background:var(--panel); color:var(--ink);
  box-shadow:0 4px 16px color-mix(in srgb, var(--ink) 12%, transparent); font:13px/1.45 var(--body); white-space:normal; text-align:left; }
.fare-enhanced > .fare-breakdown { position:fixed; }
.fare-note { margin:7px 0; }
.fare-note ul { margin:0; padding-left:18px; }
.fare-note li + li { margin-top:5px; }
.job-line-marker { display:none; }

@media (max-width:799px) {
  .jobs-table { overflow:visible; max-width:100%; }
  .jobs-table table.stacked { width:100%; }
  .jobs-table table.stacked tr { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px 8px; padding:12px 13px; align-items:start; }
  .jobs-table table.stacked td[data-label]::before { display:block; margin-bottom:4px;
    font:700 10px/1.3 var(--label); letter-spacing:.055em; text-transform:uppercase; color:var(--muted); }
  .jobs-table table.stacked td.job-code-cell { grid-column:1 / 3; grid-row:1; }
  .jobs-table table.stacked td.job-line-cell { display:none; }
  .jobs-table table.stacked td:is(.job-code-cell, .job-fare) { display:flex; flex-direction:column; align-self:stretch; }
  .job-identity { display:flex; align-items:center; gap:7px; min-height:32px; flex:1; }
  .job-identity > .code { min-width:0; flex:none; font:700 18px/1.2 var(--label); }
  .job-identity .jobtags { display:inline-flex; flex-direction:column; gap:3px; min-width:0; }
  .job-identity .tagrow { flex-wrap:wrap; gap:3px; }
  .job-identity .badge { padding:2px 5px; border-radius:2px; font-size:10px; letter-spacing:.02em; }
  .job-line-marker { display:inline-grid; place-items:center; position:relative; width:28px; height:28px; flex:none;
    font:700 18px/1.2 var(--label); color:var(--run-marker-ink); }
  .job-line-marker > svg { position:absolute; width:28px; height:28px; fill:var(--run-marker-bg); }
  .job-line-marker.is-local > svg { transform:translateY(-1.5px); }
  .job-line-marker.is-express { width:32px; }
  .job-line-marker.is-express > svg { width:32px; height:32px; }
  .job-line-marker > span { position:relative; }
  .jobs-table table.stacked td.job-fare { grid-column:3 / -1; grid-row:1; text-align:right; }
  .jobs-table table.stacked td.job-fare[data-label]::before { content:"Fare adjustment"; }
  .job-fare .fare-adjustment { display:flex; align-items:center; align-self:flex-end; flex:1; }
  .job-fare .fare-adjustment > summary { justify-content:flex-end; min-height:32px; font:700 18px/1.2 var(--body); }
  .jobs-table table.stacked td.job-route { grid-column:1 / -1; grid-row:2; padding-bottom:12px; border-bottom:1px solid var(--line);
    font:14px/1.4 var(--body); white-space:normal; overflow:visible; overflow-wrap:anywhere; }
  .jobs-table table.stacked td:is(.job-report, .job-clear, .job-runs, .job-hours) {
    display:block; grid-row:3; text-align:left; font:500 16px/1.25 var(--body); font-variant-numeric:tabular-nums; }
  .jobs-table table.stacked td.job-report { grid-column:1; }
  .jobs-table table.stacked td.job-clear { grid-column:2; }
  .jobs-table table.stacked td.job-runs { grid-column:3; }
  .jobs-table table.stacked td.job-hours { grid-column:4; }
  .jobs-table table.stacked td.job-actions { grid-column:1 / -1; grid-row:4; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .jobs-table table.stacked td.job-actions::before { display:none; }
  .job-actions > a, .job-actions > .muted { display:flex; align-items:center; justify-content:center; min-height:40px; padding:4px; }
  .job-actions > a { border:1px solid var(--line); border-radius:5px; font-size:13px; }
  .jobs-table table.stacked td.job-actions > .muted { min-width:0; white-space:normal; overflow-wrap:anywhere; font-size:12px; text-align:center; }
  .job-actions > form { display:block; min-width:0; margin:0; }
  .jobs-table table.stacked .job-actions button { width:100%; min-height:40px; padding:7px 12px; text-align:center; }
  .job-actions:not(:has(> form)):not(:has(> .muted)) > a { grid-column:1 / -1; }
}

/* Taken uses company initials (up to four letters), kept beside Details. */
@media (min-width:800px) {
  .jobs-table .job-fare-heading, .jobs-table td.job-actions, .jobs-table td.job-actions > .muted { white-space:nowrap; }
}
@media (min-width:800px) and (max-width:999px) {
  .jobs-table table { width:100%; }
  .jobs-table th, .jobs-table td { padding:5px 4px; }
  .jobs-table td.job-route { min-width:0; }
  .jobs-table .job-identity > .jobtags { display:flex; width:max-content; margin-top:3px; }
  .jobs-table .jobtags .badge { font-size:10px; padding:1px 5px; }
}

/* Compact choices stay in one row; only very narrow cards need two rows. */
/* Here, after the 4-across rule in the phone media query above, so very narrow cards (and phones) still get 2 x 2. */
.office-maint-opt span { white-space:nowrap; overflow-wrap:normal; padding-inline:2px; letter-spacing:0; min-height:44px;
  font-size:clamp(10px, 3.4cqi, 12px); }
@container (max-width:280px) { .office-maint fieldset { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* Recent runs use the same local square and express parallelogram as Pick Jobs. */
.recent-line-marker { display:inline-grid; place-items:center; position:relative; width:32px; height:32px;
  vertical-align:middle; font:700 18px/1.2 var(--label); color:var(--run-marker-ink); }
.recent-line-marker svg { position:absolute; width:32px; height:32px; fill:var(--run-marker-bg); }
.recent-line-marker > span { position:relative; }
@media (max-width:799px) {
  .office-recent-table { overflow:visible; }
  .office-recent-table table.stacked tr { grid-template-columns:32px minmax(0, 1fr) auto;
    align-items:center; gap:4px 8px; padding:8px; }
  .office-recent-table table.stacked td.recent-line { grid-column:1; grid-row:1; align-self:start; }
  .office-recent-table table.stacked td.recent-trip { grid-column:2; grid-row:1;
    font:700 14px/1.3 var(--label); overflow-wrap:anywhere; }
  .office-recent-table table.stacked td.recent-date { grid-column:3; grid-row:1; text-align:right; font-size:12px; color:var(--muted); }
  .office-recent-table table.stacked td.recent-report { grid-column:3; grid-row:3; text-align:right; }
  .recent-report a { display:inline-flex; align-items:center; min-height:44px; }
  .office-recent-table table.stacked td.recent-result { grid-column:1 / 3; grid-row:2; }
  .office-recent-table table.stacked td.recent-performance { grid-column:1 / 3; grid-row:3; white-space:normal; }
  .office-recent-table table.stacked td.recent-income { grid-column:3; grid-row:2; text-align:right; }
  .office-recent-table table.stacked td:is(.recent-date, .recent-line, .recent-trip, .recent-result, .recent-income, .recent-report)::before { display:none; }
  .office-recent-table table.stacked td.recent-performance::before { display:inline; font-size:10px; margin-right:5px; }
  .office-recent-table .badge { white-space:normal; }
}

/* Plain 4:5 crew photos, shared with the Chief Inspector on reports, Fleet and train pages.
   Smooth shrinking preserves Pete's supplied faces. A neutral silhouette stays behind missing photos. */
.crew-photo, .gsta-face img { display:block; flex:none; width:44px; height:55px; object-fit:cover;
  border:1px solid var(--line); border-radius:3px; background:var(--panel2); image-rendering:auto; }
.crew-photo { position:relative; overflow:hidden; color:var(--muted); }
.crew-photo::before { content:""; position:absolute; top:14%; left:30%; width:40%; height:34%; background:currentColor;
  clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%); }
.crew-photo::after { content:""; position:absolute; left:13%; bottom:8%; width:74%; height:40%; background:currentColor;
  clip-path:polygon(25% 0,75% 0,75% 15%,90% 15%,90% 30%,100% 30%,100% 100%,0 100%,0 30%,10% 30%,10% 15%,25% 15%); }
.crew-photo img { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; background:var(--panel); }
.crew-photo img[hidden], .crew-picker > select[hidden], .crew-picker-list[hidden] { display:none; }
.run-form-grid > .run-crew { display:flex; align-items:center; gap:9px; padding-block:6px; }
.run-crew > div { min-width:0; }
.run-crew .v { overflow-wrap:anywhere; }
.has-face { display: flow-root; }
span.has-face { display: block; }
.gsta-face { display: block; float: left; width: 64px; margin: 2px 12px 4px 0; text-align: center; }
.gsta-face img { margin:0 auto; }
.gsta-face-name { display: block; font-size: 10px; line-height: 1.2; color: var(--muted); margin-top: 3px; }
/* On a wide screen the faces get more pixels (Pete, Oct 27: grainy at 44x55 on a 1920x1080 screen at 100%, where the
   box has only 44x55 real pixels; phones and tablets draw 2-3 per point and look sharp already). */
@media (min-width: 1200px) {
  .gsta-face { width: 72px; }
  .gsta-face img { width: 64px; height: 80px; }
  .run-crew .crew-photo { width: 52px; height: 65px; }
}

/* Progressive portrait pickers. The native select still posts and triggers the forecast. */
.crew-picker { width:100%; min-width:0; }
[data-theme] button.crew-picker-button, .crew-picker-list { font:14px/1.35 var(--body); text-transform:none; letter-spacing:normal;
  color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:none; }
.crew-picker-button { display:flex; align-items:center; gap:9px; width:100%; min-height:46px; padding:7px 10px;
  white-space:normal; text-align:left; }
.crew-picker-button::after { content:""; flex:none; width:7px; height:7px; margin-left:auto; border:solid var(--muted);
  border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-2px); }
.crew-picker-text { min-width:0; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; overflow:hidden; }
.crew-picker .crew-photo { width:24px; height:30px; border-radius:2px; }
.crew-picker-button:focus-visible, .crew-picker-list:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.crew-picker-list { position:fixed; z-index:100; overflow-y:auto; overscroll-behavior:contain; padding:4px;
  box-shadow:0 5px 16px color-mix(in srgb,var(--bg) 75%,transparent); }
.crew-picker-option { display:flex; align-items:center; gap:9px; min-height:44px; padding:7px 9px;
  border:2px solid transparent; border-radius:var(--radius); cursor:pointer; }
.crew-picker-option > span:last-child { min-width:0; overflow-wrap:anywhere; }
.crew-picker-option[aria-selected="true"] { background:color-mix(in srgb,var(--accent) 12%,var(--panel)); }
.crew-picker-option.is-active { border-color:var(--accent); }
.crew-picker-option[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }
@media(max-width:799px) {
  .run-crew .crew-photo { width:36px; height:45px; }
  .run-form-grid > .run-crew { gap:7px; }
}

/* The GSTA Chief Inspector's "Inspected" on a run report: a red rubber stamp, slightly askew (Pete, Oct 24; Claude,
   v0.35.6). Ink-red outline lettering on no fill, the ink a little uneven. Codex may restyle. */
.badge.stamp { color: #ff5a4f; background: none; border: 2px solid currentColor; border-radius: 3px; padding: 0 6px;
  margin: 2px 6px; font-weight: 800; letter-spacing: .14em; transform: rotate(-6deg); opacity: .9;
  -webkit-mask-image: linear-gradient(97deg, #000 0 38%, #000b 46%, #000 54%, #000 78%, #000c 86%, #000);
  mask-image: linear-gradient(97deg, #000 0 38%, #000b 46%, #000 54%, #000 78%, #000c 86%, #000); }
/* Slant is light: a darker ink to read on it. */
[data-theme="slant"] .badge.stamp { color: #b3261e; }

/* Crew readiness: compact records, comparable skills and shared contributing factors. */
.crew-member-heading { max-width:1000px; margin:0 auto; padding:18px; border:1px solid var(--line); border-bottom:0; border-radius:6px 6px 0 0; background:var(--panel); align-items:center; gap:16px; }
.crew-member-heading .crew-portrait { width:60px; height:75px; flex:0 0 60px; }
.crew-member-heading h1 { font:700 clamp(21px,3vw,30px)/1.2 var(--body); margin:0 0 8px; }
.crew-member-heading .id-chips { margin:0; gap:8px; }
.crew-member-heading .chip, .crew-member-heading .emp-badge { font-size:12px; padding:2px 5px; border:0; background:none; }
.crew-record { max-width:1000px; margin:0 auto 20px; border:1px solid var(--line); border-radius:0 0 6px 6px; background:var(--panel); overflow:hidden; }
.crew-record :is(h2,h3), .crew-roster-card h2 { font-family:var(--body); letter-spacing:0; text-transform:none; }
.crew-tabs { display:flex; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--ink) 3%,var(--panel)); }
.crew-tabs a { flex:1; text-align:center; padding:16px 8px; color:var(--muted); font:600 14px/1.25 var(--body); text-decoration:none; border-bottom:3px solid transparent; }
.crew-tabs a[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--accent); background:color-mix(in srgb,var(--ink) 4%,var(--panel)); }
.crew-record [data-crew-panel] { padding:0 20px 18px; }
.crew-enhanced .crew-fallback-heading { display:none; }
.crew-readiness-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.crew-readiness-value { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px 14px; text-align:right; }
.crew-readiness-note { margin:6px 0 0; }
.crew-section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.crew-section-heading h2 { font-size:17px; margin:0; }
.crew-section-heading p { margin:4px 0 0; }
.crew-section-heading a { color:var(--muted); }
.crew-factors { padding:14px 0 10px; border-bottom:1px solid var(--line); }
.crew-factor-strip { display:flex; justify-content:space-between; gap:5px; padding-top:10px; max-width:420px; }
.crew-factor-icon { position:relative; display:flex; align-items:center; justify-content:center; width:46px; height:46px; flex:0 0 46px; color:var(--ink); text-decoration:none; }
.crew-factor-ring { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:color-mix(in srgb,var(--ink) 4%,var(--panel)); color:var(--ink); font:500 13px var(--body); flex:0 0 36px; }
.crew-factor-sign { position:absolute; bottom:0; right:0; display:flex; align-items:center; justify-content:center; border:2px solid var(--panel); border-radius:50%; width:17px; height:17px; background:var(--panel); font:700 13px var(--body); }
.crew-factor-icon:hover .crew-factor-ring { border-color:var(--accent); }
.crew-factor-list-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.crew-factor-list-row > span:nth-child(2) { flex:1; min-width:0; }
.crew-factor-list-row small { display:block; color:var(--muted); margin-top:4px; }
.crew-enhanced .crew-inspect-source { display:none; }
.crew-skills { padding-top:18px; }
.crew-points { color:var(--accent); padding:8px; border:1px solid var(--line); border-radius:3px; text-align:center; }
.crew-skill-head, .crew-skill > summary { display:grid; grid-template-columns:minmax(0,1fr) 58px 58px; gap:10px; align-items:center; }
.crew-skill-head { font-size:11px; text-align:right; margin-top:16px; padding-bottom:7px; border-bottom:1px solid var(--line); }
.crew-skill-head > :first-child { text-align:left; }
.crew-skill { border-bottom:1px solid var(--line); }
.crew-skill > summary { padding:12px 0; cursor:pointer; list-style:none; min-height:64px; }
.crew-skill > summary::-webkit-details-marker { display:none; }
.crew-skill-copy { min-width:0; display:block; }
.crew-skill-copy .attribute-name { display:block; font:500 15px/1.3 var(--body); }
.crew-skill-copy .crew-main-skill { font-weight:750; }
.crew-skill-effect { display:block; color:var(--muted); font:400 12px/1.5 var(--body); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crew-current { text-align:right; font:700 24px/1.2 var(--body); }
.crew-delta { font-size:12px; display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.crew-help { margin-top:16px; font-size:13px; color:var(--muted); }
.crew-help > summary, .crew-personal > summary { cursor:pointer; padding:12px 0; min-height:44px; }
.crew-inspect-content { padding:4px 0 16px; }
.crew-inspect-content h3 { font:600 15px var(--body); margin:24px 0 8px; }
.crew-inspect-content .card { border:0; box-shadow:none; padding:12px 0; background:none; }
.crew-inspect-content .kv { grid-template-columns:minmax(0,1fr) auto; gap:10px 18px; font-size:14px; }
.crew-inspect-content .kv dd { text-align:right; }
.crew-employment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; }
.crew-employment-grid .card, .crew-compensation.card { border:0; box-shadow:none; border-radius:0; border-bottom:1px solid var(--line); padding:20px 0; background:none; margin:0; min-width:0; }
.crew-compensation h2 { font-size:17px; margin:0 0 14px; }
.crew-employment-grid .card h3 { font:600 15px var(--body); }
.crew-employment-grid .kv { font-size:14px; gap:10px 16px; }
.crew-employment-grid .kv dd { text-align:right; overflow-wrap:anywhere; }
.crew-pay-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; align-items:center; }
.crew-pay-grid b { display:block; margin-top:5px; font:700 20px var(--body); }
.crew-pay-grid form { margin:0; }
.crew-pay-grid button { width:100%; }
.crew-personal { grid-column:1/-1; }
.crew-record .crew-rdo { border:0; padding:0; background:none; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.crew-record .crew-history { margin-top:16px; }
.crew-interval { display:inline-flex; align-items:center; gap:8px; }
.crew-line-marker { position:relative; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:0 0 28px; color:var(--accent); }
.crew-line-marker svg { position:absolute; width:28px; height:28px; fill:var(--accent); }
.crew-line-marker > span { position:relative; color:var(--panel); font:700 17px var(--body); }
.crew-dialog { width:min(540px,calc(100% - 24px)); max-height:calc(100dvh - 40px); box-sizing:border-box; border:1px solid var(--line); border-radius:8px; padding:20px; color:var(--ink); background:var(--panel); box-shadow:0 12px 60px color-mix(in srgb,var(--bg) 70%,transparent); }
.crew-dialog::backdrop { background:color-mix(in srgb,var(--bg) 75%,transparent); }
.crew-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; position:static; padding:0 0 14px; border:0; background:none; box-shadow:none; }
.crew-dialog-heading [data-crew-dialog-close] { margin-left:auto; }
.crew-dialog h2 { font:700 22px/1.3 var(--body); margin:4px 0 16px; }
.crew-dialog :is(a,button,summary):focus-visible, .crew-record :is(a,button,summary):focus-visible, .crew-roster :is(a,button,summary):focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.crew-roster { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:18px 0; }
.crew-roster-card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:6px; background:var(--panel); }
.crew-roster-card[hidden], .crew-record [data-crew-panel][hidden] { display:none; }
.crew-roster-identity { display:flex; gap:12px; align-items:center; padding:0 0 14px; border:0; border-bottom:1px solid var(--line); box-shadow:none; background:none; position:static; }
.crew-roster-identity .crew-portrait { width:48px; height:60px; flex:0 0 48px; }
.crew-roster-identity > div { min-width:0; }
.crew-roster-identity h2 { font:700 19px/1.3 var(--body); margin:0 0 6px; }
.crew-roster-identity h2 a { color:var(--ink); text-decoration:none; }
.crew-roster-identity p { margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.crew-roster-identity .emp-badge { font-size:11px; border:0; padding:0; }
.crew-roster-identity .role-icon { width:28px; height:28px; }
.crew-roster-card .crew-readiness-row { font-size:12px; padding:10px 0; gap:8px; }
.crew-roster-card .crew-readiness-value { gap:4px 8px; }
.crew-roster-skills { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); padding-top:14px; gap:4px; }
.crew-roster-skills a { text-align:center; color:var(--muted); text-decoration:none; font-size:11px; padding:4px 0; min-height:48px; }
.crew-roster-skills b { display:block; font:700 21px var(--body); margin-top:5px; color:var(--ink); }
.crew-roster-skills .crew-main-skill { color:var(--ink); border-bottom:2px solid var(--accent); }
.crew-roster-card .crew-factors { border-bottom:0; }
.crew-roster-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--line); padding:12px 0 0; font-size:13px; background:none; }
.crew-sort { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.crew-sort select { width:auto; max-width:100%; }
.crew-sort-options { margin-top:14px; font-size:12px; color:var(--muted); }
.crew-sort-options summary { cursor:pointer; min-height:44px; padding:12px 0; }
@media (max-width:799px) {
  .crew-member-heading { padding:14px; gap:12px; }
  .crew-member-heading h1 { font-size:21px; }
  .crew-member-heading .crew-portrait { width:48px; height:60px; flex-basis:48px; }
  .crew-record [data-crew-panel] { padding:0 12px 16px; }
  .crew-tabs a { font-size:12px; padding:15px 5px; }
  .crew-readiness-row { font-size:12px; gap:8px; }
  .crew-readiness-value { gap:5px 9px; }
  .crew-readiness-value .small { font-size:10px; }
  .crew-section-heading h2 { font-size:14px; }
  .crew-skill-head, .crew-skill > summary { grid-template-columns:minmax(0,1fr) 42px 48px; gap:8px; }
  .crew-skill-copy .attribute-name { font-size:13px; }
  .crew-skill-effect { font-size:11px; }
  .crew-current { font-size:22px; }
  .crew-skill-head { font-size:10px; }
  .crew-skill > summary { padding:10px 0; min-height:60px; }
  .crew-employment-grid { grid-template-columns:minmax(0,1fr); }
  .crew-pay-grid { grid-template-columns:1fr 1fr; }
  .crew-pay-grid form { grid-column:1/-1; }
  .crew-roster { grid-template-columns:minmax(0,1fr); gap:14px; }
  .crew-roster-card { padding:14px; }
  .crew-roster-identity h2 { font-size:18px; }
  .crew-dialog { padding:16px; }
  .crew-dialog-heading button { font-size:12px; }
  .crew-record .crew-history table.stacked tr { margin-bottom:12px; padding:12px; box-shadow:none; }
}
.crew-roster { border:0; width:100%; }
.crew-roster > tbody { display:contents; }
.crew-roster .crew-roster-card { display:block; }
.crew-roster .crew-roster-card[hidden] { display:none; }
.crew-roster .crew-roster-body { display:block; position:static; border:0; padding:0; background:none; white-space:normal; }
.crew-roster-card .crew-readiness-value > a { display:flex; align-items:center; gap:8px; }
.crew-roster-card .rdo-week { gap:2px; }
.crew-roster-card .rdo-week span { width:12px; height:16px; font-size:9px; }
.crew-roster-card .crew-readiness-value .crew-rdo-label { display:none; }
.crew-release { grid-column:1/-1; border-top:1px solid var(--line); padding-top:16px; margin-top:12px; }
@media (max-width:799px) {
  .crew-roster .crew-roster-body { padding:0; background:none; position:static; }
}
.crew-factor-strip { justify-content:flex-start; }
.crew-tabs a:first-child { flex:1.4; white-space:nowrap; }
.crew-roster-card .crew-readiness-row:first-child { min-height:72px; }
.crew-roster-card .crew-readiness-row { min-height:45px; }
.crew-roster-card .crew-readiness-value b { white-space:nowrap; }
.crew-readiness-value .late { color:var(--late); }
.crew-readiness-value .bad { color:var(--bad); }
.crew-sort :is([data-crew-filter], label[for="crew-role"], label[for="crew-availability"]) { display:none; }
.crew-enhanced .crew-sort :is([data-crew-filter], label[for="crew-role"], label[for="crew-availability"]) { display:inline-block; }
.crew-record button, .crew-dialog button { min-height:44px; }
.crew-dialog [hidden] { display:none !important; }
.crew-dialog :is(h2,h3) { text-transform:none; letter-spacing:0; }
.crew-secondary { margin-top:18px; border:1px solid var(--line); border-radius:6px; padding:0 16px; background:var(--panel); }
.crew-secondary > summary { cursor:pointer; padding:16px 0; min-height:48px; font-weight:600; }
.crew-secondary[open] { padding-bottom:16px; }

.crew-member-heading .crew-member-role .role-icon svg { width:22px; height:22px; }
.crew-member-heading .emp-badge .n { font-size:14px; }
@media (max-width:799px) {
  .crew-skill > summary { min-height:56px; padding:9px 0; }
}

.crew-sort :is([data-crew-filter], label[for="crew-role"], label[for="crew-availability"]) { display:inline-block; }

/* Bigger T/O and C/R icons on the Human Resources cards and the crew page (Pete, Oct 27: "plenty of space for it");
   they were 16px and 22px. */
.crew-roster-identity .role-icon { margin:0 2px 0 0; vertical-align:middle; }
.crew-roster-identity .role-icon svg { width:28px; height:28px; }
.id-chips .crew-member-role .chip .role-icon svg { width:32px; height:32px; }

/* The crew page's tabs, drawn as tabs so it's plain they can be clicked (Pete, Oct 27): each one a raised box with
   rounded top corners; the open one joins the panel below under a bar of the style's accent. The page's own tab
   (data-tab) marks it only until the script takes over (aria-selected), else it stayed lit after a switch. */
.crew-tabs { gap:6px; padding:10px 10px 0; background:none; border-bottom:1px solid var(--accent); }
.crew-tabs a { position:relative; top:1px; border:1px solid var(--line); border-bottom:0; border-radius:8px 8px 0 0;
  background:color-mix(in srgb,var(--ink) 9%,var(--panel)); color:var(--ink); cursor:pointer; padding:12px 8px; }
.crew-tabs a:hover, .crew-tabs a:focus-visible { background:color-mix(in srgb,var(--accent) 20%,var(--panel)); }
.crew-tabs a[aria-selected="true"],
[data-tab="readiness"] > .crew-tabs:not(:has([aria-selected])) a[data-crew-tab="readiness"],
[data-tab="employment"] > .crew-tabs:not(:has([aria-selected])) a[data-crew-tab="employment"],
[data-tab="history"] > .crew-tabs:not(:has([aria-selected])) a[data-crew-tab="history"] {
  background:var(--panel); border-color:var(--accent); border-top:4px solid var(--accent);
  border-bottom:1px solid var(--panel); color:var(--ink); cursor:default; }

/* The job page's two columns line up (Pete, Oct 27: "it's uneven"): side by side, the runs get a Run History
   heading level with Prepare Run, and sit in a box like the form's whose top lines up with it and which runs at least
   to the bottom of the form. The form still slides along beside a long list of runs. */
.shift-runs-title { display:none; }
@media (min-width:1360px) {
  .shift-layout:has(.shift-prepare) { grid-template-areas:"runs-title prep-title" "runs form"; align-items:stretch; row-gap:0; }
  .shift-layout:has(.shift-prepare) > .shift-prepare { display:contents; }
  .shift-layout:has(.shift-prepare) .shift-runs-title { display:block; grid-area:runs-title; margin:0 0 8px; }
  .shift-layout:has(.shift-prepare) .shift-prepare > h2 { grid-area:prep-title; }
  /* The box goes on the Run History disclosure when the script made one (Firefox won't stretch a child of a
     display:contents details), else on the table's own wrapper. */
  .shift-layout:has(.shift-prepare) > .shift-history { display:block; }
  .shift-layout:has(.shift-prepare) > .shift-history,
  .shift-layout:has(.shift-prepare) > .shift-trips { grid-area:runs; align-self:stretch; background:var(--panel);
    border:1px solid var(--line); border-radius:var(--radius); padding:4px 10px; }
  .shift-layout:has(.shift-prepare) > .shift-history > .shift-trips { background:none; border:0; padding:0; }
  .shift-layout:has(.shift-prepare) #setup { grid-area:form; align-self:start; position:sticky; top:12px; }
  .shift-layout:has(.shift-prepare) #setup > .card:first-child { margin-top:0; }
}

/* The Office's certificates (Pete, Nov 2): a signal per line, a lamp per tour, lit if held; tap a dark lamp to buy. */
.cert-signals { margin-bottom:14px; }
.cert-signals h2 { margin:0 0 2px; }
.cert-signal-row { display:grid; grid-template-columns:repeat(5, minmax(0, 76px)); gap:14px clamp(6px, 2vw, 18px); margin-top:10px; }
.cert-signal { display:flex; flex-direction:column; align-items:center; gap:6px; }
.cert-signal-letter { display:grid; place-items:center; width:28px; height:28px; background:var(--run-marker-bg);
  color:var(--run-marker-ink); font:700 18px/1 var(--label); }
.cert-signal-head { display:flex; flex-direction:column; gap:4px; width:100%; padding:8px 4px 6px 6px; background:#10141B;
  border:2px solid #3A4352; border-radius:14px 14px 10px 10px; }
.cert-signal-head .cert-signal-letter { order:-2; align-self:center; width:32px; height:32px; margin:2px 2px 4px 0; font-size:19px; }
.cert-signal-head::before { content:""; order:-1; flex:none; height:1px; margin-bottom:2px; background:#3A4352; }
.cert-signal-head form { margin:0; }
.cert-lamp { display:flex; align-items:center; gap:7px; width:100%; min-height:30px; padding:2px 4px; margin:0; color:#8C95A3;
  background:none; border:0; border-radius:8px; font:600 12px/1 var(--label); letter-spacing:0; text-transform:none; text-align:left; }
.cert-lamp span { font-family:"Share Tech Mono", ui-monospace, monospace; }
.cert-signal-head button.cert-lamp { cursor:pointer; background:none; border:0; box-shadow:none; color:#8C95A3; }
button.cert-lamp:hover, button.cert-lamp:focus-visible { background:#232B37; color:#E8ECF2; }
.cert-lamp i { flex:none; width:16px; height:16px; border-radius:50%; background:#242A34; box-shadow:inset 0 1px 2px #000; }
button.cert-lamp.is-caution i { background:#F6BC26; }
button.cert-lamp.is-stop i { background:#D82233; }
.cert-lamp.is-lit { color:#E8ECF2; }
.cert-lamp.is-lit i { background:#009952; box-shadow:0 0 8px #009952; }
@media (max-width:480px) {   /* all five signals on one row on a phone */
  .cert-signal-row { column-gap:4px; }
  .cert-signal-head { padding:5px 1px 5px 6px; }
  .cert-signal-head .cert-signal-letter { margin-right:5px; }   /* centre over the housing despite the glow clearance */
  .cert-lamp { gap:3px; padding:2px 1px; font-size:.72rem; }
  .cert-lamp i { width:13px; height:13px; }
}

/* Whole Car — NYC full-colour pieces. All effects stay inside this opt-in theme.
   Real text carries the lettering; numbers, status colours and forms keep their ordinary faces. */
[data-theme="whole-car"] {
  body {
    background:linear-gradient(120deg, var(--panel2), var(--bg) 65%);
    box-shadow:0 12px 36px var(--paint-shadow);
  }
  header.top {
    background:linear-gradient(var(--panel2), var(--bg));
    border-bottom:2px solid var(--line);
  }
  header.top .wrap { gap:12px 20px; padding-block:12px; }
  nav.main { flex:1 0 100%; order:3; gap:6px 12px; justify-content:space-between; }
  nav.main a, .nav-more > summary {
    --paint:var(--paint-cyan);
    font-family:var(--display); font-weight:400; font-size:19px; line-height:1.5;
    letter-spacing:0; color:var(--paint); text-transform:uppercase;
    padding:7px 9px; min-height:44px; white-space:normal; overflow-wrap:normal;
    -webkit-text-stroke:1.3px var(--paint-shadow); paint-order:stroke fill;
    text-shadow:1px 1px 0 var(--paint-outline), -1px -1px 0 var(--paint-outline),
      2px 3px 0 var(--paint-shadow);
    border:1px solid transparent; border-radius:3px;
  }
  nav.main a[href^="/jobs/"] { --paint:var(--paint-orange); }
  nav.main a[href^="/fleet/"] { --paint:var(--paint-purple); }
  nav.main a[href^="/crew/"] { --paint:var(--paint-pink); }
  nav.main a[href^="/certificates/"] { --paint:var(--paint-yellow); }
  nav.main a[href^="/books/"] { --paint:var(--paint-orange); }
  nav.main a[href^="/leaderboard/"] { --paint:var(--paint-lime); }
  nav.main a[href^="/rules/"] { --paint:var(--paint-purple); }
  nav.main a.on { background:var(--panel2); border-color:var(--paint); box-shadow:inset 0 -3px var(--paint); }
  nav.main a:hover { background:var(--panel2); border-color:var(--paint); }
  .hdr-right { margin-left:auto; }
  .strip { background:var(--bg); }
  .strip-stat { border-color:var(--line); }
  main.wrap { padding-top:20px; }
  /* The mural is decorative. No duplicated accessible text or image-based controls. */
  main.wrap:has(.company-head)::before {
    content:""; display:block; width:100%; aspect-ratio:3 / 1; margin:0 0 20px;
    background:var(--panel) url("whole-car/gotham-mural.webp") center / cover no-repeat;
    border:1px solid var(--line); border-radius:5px;
    box-shadow:0 4px 0 var(--paint-shadow);
  }
  h1, h2, .card > h3, .office-tours h3 {
    font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:0;
    line-height:1.45; color:var(--paint); overflow-wrap:anywhere;
    -webkit-text-stroke:2px var(--paint-shadow); paint-order:stroke fill;
    text-shadow:1.5px 1.5px 0 var(--paint-outline), -1.5px -1.5px 0 var(--paint-outline),
      3px 4px 0 var(--paint-shadow);
  }
  :is(h1, h2, h3) :is(.bullet, .badge) { -webkit-text-stroke:0; text-shadow:none; }
  h1 { font-size:clamp(26px, 3vw, 40px); }
  h2 { font-size:27px; margin-block:20px 14px; }
  .card > h3 { font-size:23px; padding-bottom:10px; }
  h2 a, h3 a {
    font-family:var(--body); font-size:14px; color:var(--accent); text-transform:none;
    -webkit-text-stroke:0; text-shadow:none;
  }
  .company-head { padding:6px 0; gap:12px; }
  .company-head h1 { font-size:clamp(25px, 3vw, 38px); }
  .company-sub { margin:4px 0 24px; font-size:14px; }
  .company-initials { flex:none; }
  .card, .office-tours-panel, .office-season-panel, .office-recent-panel {
    --paint:var(--paint-cyan);
    background:linear-gradient(135deg, color-mix(in srgb, var(--paint) 5%, var(--panel)), var(--panel) 60%);
    border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:inset 3px 0 var(--paint), 0 3px 0 var(--paint-shadow);
  }
  .card { min-width:0; }
  .office-layout { display:grid; gap:20px; align-items:start; }
  .office-layout > *, .office-support > * { min-width:0; }
  .office-tours-panel, .office-season-panel, .office-recent-panel { display:block; padding:18px; }
  .office-tours-panel, .office-season-panel, .office-recent-panel, .office-support > .card { position:relative; }
  .office-tours-panel::after, .office-season-panel::after, .office-recent-panel::after, .office-support > .card::after {
    content:""; position:absolute; bottom:0; left:0; width:150px; height:24px;
    background:var(--paint); opacity:.6; pointer-events:none;
    mask:url("whole-car/paint-edge.svg") left bottom / contain no-repeat;
  }
  .office-layout h2 { margin:0 0 16px; font-size:27px; }
  .office-tours-panel > h2 { --paint:var(--paint-pink); }
  .office-season-panel > h2 { --paint:var(--paint-lime); }
  .office-tours { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
  .office-tours .card {
    display:flex; flex-direction:column; gap:10px; padding:14px;
    --paint:var(--paint-lime); min-height:175px;
  }
  .office-tours .card:nth-child(2) { --paint:var(--paint-orange); }
  .office-tours .card:nth-child(3) { --paint:var(--paint-purple); }
  .office-tours h3 { color:var(--paint); font-size:24px; margin:0; padding:0; border:0; }
  .office-tours p { font-size:14px; margin:0 0 8px; }
  .office-tours .small { font-size:13px; }
  .office-tour-route { display:none; }
  .office-season { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .office-season .card { padding:14px; }
  .office-season .card:nth-child(2) { --paint:var(--paint-yellow); }
  .office-season .card:nth-child(3) { --paint:var(--paint-pink); }
  .office-season .card:nth-child(4) { --paint:var(--paint-lime); }
  /* Metric labels stay in a clear face, especially the longer labels. */
  .office-season h3 {
    font:700 15px/1.4 var(--label); color:var(--ink); text-transform:uppercase;
    -webkit-text-stroke:0; text-shadow:none; margin:0 0 8px; padding:0; border:0;
  }
  .office-season .stat { font:700 32px/1.2 var(--label); color:var(--paint); overflow-wrap:anywhere; }
  .office-season .stat small {
    display:block; position:static; font:400 12px/1.5 var(--body); color:var(--muted);
    margin-top:8px; padding:0; background:none; border:0;
  }
  .office-support { display:contents; }
  .office-fleet-panel { --paint:var(--paint-purple); }
  .office-crew-panel { --paint:var(--paint-pink); }
  .office-recent-panel { --paint:var(--paint-yellow); }
  .office-support > .records { --paint:var(--paint-orange); }
  .office-fleet-panel > h3 { --paint:var(--paint-purple); }
  .office-crew-panel > h3 { --paint:var(--paint-pink); }
  .office-recent-panel > h2 { --paint:var(--paint-yellow); }
  .records > h3 { --paint:var(--paint-orange); }
  .office-fleet-panel > p, .office-crew-panel > p:not(.office-rdo-legend) { position:static; margin-top:16px; font-size:14px; }
  .office-stockline { font-size:14px; }
  .office-stockline:has(.train-display) { grid-template-columns:112px minmax(0, 1fr); }
  .office-stockline:has(.train-display) > :not(.office-train-art) { grid-column:2; }
  .office-stockline:has(.train-display) .office-train-art { grid-column:1; grid-row:1 / span 3; }
  .office-stockline:has(.train-display) .office-maint { grid-column:1 / -1; }
  .office-stockline .office-reliability, .office-condition { font-size:12px; }
  .office-recent-panel table { font-size:14px; }
  .office-recent-panel .badge { font-size:12px; }
  /* Painted plate plus live lettering. Nothing is rotated or clipped outside the click target. */
  .btn:not(.social), button:not(.cert-lamp, .ticker-pause, .crew-picker-button) {
    --button-paint:var(--paint-cyan); --button-edge:var(--paint-lime);
    position:relative; max-width:100%; min-height:46px; height:auto;
    padding:10px 16px; border:2px solid var(--paint-shadow); border-radius:7px 2px 7px 2px;
    outline-offset:5px;
    box-shadow:0 0 0 1px var(--paint-outline), 3px 4px 0 var(--paint-shadow);
    background:
      linear-gradient(170deg, transparent 75%, color-mix(in srgb, var(--button-edge) 65%, transparent) 76%),
      linear-gradient(105deg, var(--button-paint), var(--button-edge));
    color:var(--paint-shadow); font:400 21px/1.4 var(--display);
    letter-spacing:0; text-transform:uppercase; white-space:normal; overflow-wrap:anywhere;
    text-align:center; text-decoration:none;
  }
  .btn.ghost:not(.social), button.ghost:not(.ticker-pause) {
    background:var(--panel2); color:var(--button-paint); border-color:var(--button-paint);
    box-shadow:2px 3px 0 var(--paint-shadow);
  }
  .btn:not(.social):hover, button:not(.cert-lamp, .ticker-pause, .crew-picker-button):enabled:hover { filter:brightness(1.12); }
  .btn:not(.social):active, button:not(.cert-lamp, .ticker-pause, .crew-picker-button):enabled:active { box-shadow:0 0 0 1px var(--paint-outline); }
  button.small { font-size:16px; }
  .btn.big { font-size:26px; }
  .office-tours .btn {
    align-self:stretch; inline-size:100%; block-size:auto; min-height:48px; padding:8px;
    margin-top:auto; font-size:21px; white-space:normal;
  }
  .office-tours .btn[href^="/jobs/"] { --button-paint:var(--paint-orange); --button-edge:var(--paint-yellow); }
  .btn:not(.ghost):not(.social), button:not(.ghost):not(.cert-lamp, .ticker-pause, .crew-picker-button) {
    isolation:isolate; border-color:transparent; background:transparent; box-shadow:none;
  }
  .btn:not(.ghost):not(.social)::before, button:not(.ghost):not(.cert-lamp, .ticker-pause, .crew-picker-button)::before,
  .btn:not(.ghost):not(.social)::after, button:not(.ghost):not(.cert-lamp, .ticker-pause, .crew-picker-button)::after {
    content:""; position:absolute; z-index:-2; inset:0; pointer-events:none;
    background:var(--paint-outline);
    clip-path:polygon(0 24%, 7% 15%, 5% 0, 32% 5%, 40% 0, 64% 5%, 72% 0,
      96% 5%, 95% 24%, 100% 35%, 96% 75%, 98% 90%, 73% 93%, 68% 100%,
      39% 95%, 30% 100%, 4% 95%, 5% 76%, 0 85%);
  }
  .btn:not(.ghost):not(.social)::after, button:not(.ghost):not(.cert-lamp, .ticker-pause, .crew-picker-button)::after {
    z-index:-1; inset:3px;
    background:linear-gradient(170deg, transparent 69%, color-mix(in srgb, var(--button-edge) 75%, transparent) 70%),
      linear-gradient(105deg, var(--button-paint), var(--button-edge));
  }
  .buy button { font-size:16px; padding-inline:4px; }  /* Two small columns on each car in the Car Market. */
  .jobs-table table.stacked .job-actions button { min-height:46px; }
  .office-maint-opt span { min-height:44px; }
  select, input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height:44px; }
  :is(a, button, summary, select, input):focus-visible { outline:3px solid var(--paint-yellow); outline-offset:4px; }
  .hdr-right button { min-height:44px; }
  @media (min-width:1000px) {
    body { max-width:1640px; }
    .wrap { max-width:1600px; }
    .office-layout {
      grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
      grid-template-areas:"tours season" "fleet crew" "recent recent" "records records";
    }
    .office-tours-panel { grid-area:tours; }
    .office-season-panel { grid-area:season; }
    .office-fleet-panel { grid-area:fleet; }
    .office-crew-panel { grid-area:crew; }
    .office-recent-panel { grid-area:recent; }
    .office-support > .records { grid-area:records; }
    .office-layout .office-crew-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }
  /* Too narrow beside This Season for the tour names and buttons to keep their words whole. */
  @media (min-width:1000px) and (max-width:1279px) {
    .office-layout { grid-template-areas:"tours tours" "season season" "fleet crew" "recent recent" "records records"; }
    .office-season { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  }
  @media (min-width:800px) and (max-width:1199px) {
    nav.main { flex-wrap:wrap; justify-content:flex-start; gap:4px 10px; }
    nav.main a { font-size:18px; white-space:normal; }
  }
  @media (max-width:799px) {
    header.top .wrap { padding-block:10px; }
    nav.main {
      gap:0; padding-inline:4px; background:var(--bg); border-top:2px solid var(--line);
    }
    nav.main > a, .nav-more > summary {
      font-size:clamp(12px, 3.1vw, 17px); padding:8px 3px; min-height:64px;
      -webkit-text-stroke:.6px var(--paint-shadow);
      text-shadow:.6px .6px 0 var(--paint-outline), -.6px -.6px 0 var(--paint-outline);
    }
    nav.main > a[href="/crew/"] { font-family:var(--label); font-weight:700; font-size:13px; -webkit-text-stroke:0; text-shadow:none; }
    /* The fourth slot is Human Resources: the widest label, and wider still in a fallback font. */
    @media (max-width:409px) { nav.main { grid-template-columns:repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr) minmax(0, 1fr); } }
    @media (max-width:359px) {
      nav.main > a[href="/crew/"] { font-size:12px; }
      .office-season { grid-template-columns:minmax(0, 1fr); }
    }
    .nav-more-links a { font-size:19px; }
    .nav-more-links button { font-size:17px; }
    main.wrap { padding-top:14px; }
    main.wrap:has(.company-head)::before { aspect-ratio:2.65 / 1; background-size:cover; margin-bottom:14px; }
    .company-head h1 { font-size:26px; }
    h2, .office-layout h2 { font-size:25px; }
    .office-tours-panel, .office-season-panel, .office-recent-panel { padding:14px; }
    .office-tours { grid-template-columns:minmax(0, 1fr); }
    .office-tours .card { display:flex; min-height:0; padding:14px; }
    .office-tours h3 { font-size:25px; }
    .office-tours p { font-size:14px; }
    .office-tours .btn { margin-top:4px; min-height:48px; font-size:23px; }
    .office-season { gap:10px; }
    .office-season .card { padding:12px; }
    .office-season h3 { font-size:14px; }
    .office-season .stat { font-size:29px; }
    .office-season .stat small { font-size:12px; }
    .office-stockline:has(.train-display) { grid-template-columns:90px minmax(0, 1fr); gap:8px 10px; }
    .office-train-art .train-display { width:90px; }
    .office-recent-panel .stacked td { font-size:14px; }
  }
  @media (forced-colors:active) {
    h1, h2, h3, nav.main a, .nav-more > summary { -webkit-text-stroke:0; text-shadow:none; }
    .btn, button { border:2px solid ButtonText; box-shadow:none; }
  }
  @media print {
    main.wrap:has(.company-head)::before { display:none; }
    h1, h2, h3 { -webkit-text-stroke:0; text-shadow:none; }
  }
}