/* Timiron industrial theme layer (tim-industrial.css) - loads AFTER tim-kit.css and re-skins it.
   NIGHT (default, data-theme="dark") = concept A "diamond plate control panel": blackened steel, riveted bezels, pilot lamps, LCDs.
   SUN (data-theme="light") = concept C "field-hardened": bright galvanised plate, white engraved plates, solid colour bands, heavy keys.
   Rules: text sits only on solid plates, never on texture; status = lamp/colour + icon + word + time; stains stay in gutters.
   Every --tim-* kit token is remapped here, so kit components in other apps pick up the industrial colours.
   Fonts: Barlow, Barlow Condensed, Black Ops One (SIL OFL), subset woff2 under /fonts/. Textures are inline SVG data URIs. */

@font-face { font-family: 'Barlow Condensed'; src: url(/fonts/BarlowCondensed-ExtraBold.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(/fonts/BarlowCondensed-SemiBold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(/fonts/Barlow-SemiBold.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Black Ops One'; src: url(/fonts/BlackOpsOne-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }

/* ---------------- tokens: NIGHT (default) ---------------- */
:root, :root[data-theme="dark"] {
  --ti-cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --ti-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ti-cast: 'Black Ops One', 'Barlow Condensed', Impact, sans-serif;
  --ti-floor: #4b5157; --ti-floor-2: #1d2023;
  --ti-bezel: #41474d; --ti-bezel-hi: #6d757c; --ti-bezel-lo: #15181a;
  --ti-face: #23272b; --ti-face-2: #1b1e21; --ti-field: #121517; --ti-line: #59616a;
  --ti-ink: #eeece4; --ti-ink-2: #c3c7ca; --ti-ink-3: #a2a9ae;
  --ti-plate: #c8ccd0; --ti-plate-ink: #14171a; --ti-plate-ink-2: #3c4247;
  --ti-ok-mark: #3be06a; --ti-ok-ink: #7dff9c; --ti-bad-mark: #ff4a3a; --ti-bad-ink: #ff9a8f; --ti-warn-mark: #ffb21e; --ti-warn-ink: #ffc95c; --ti-idle-mark: #7c848a;
  --ti-band-ok: #15803a; --ti-band-bad: #b21f15; --ti-band-warn: #ffb000; --ti-band-off: #2a2f34;
  --ti-link: #8cc4ff; --ti-yellow: #f2c200;
  --ti-lcd: #0d1410; --ti-lcd-ink: #ffc23d; --ti-lcd-na: #ff9a8f;
  --ti-gauge-face: #121416; --ti-gauge-ink: #f1ede0; --ti-gauge-tick: #cfd3d6;
  --ti-pipe: #7f8890; --ti-pipe-hi: #c3c9ce; --ti-pipe-lo: #3b4146; --ti-equip: #59626a; --ti-equip-hi: #8c959c; --ti-product: #e0a63a;
  --ti-key: linear-gradient(#5c646a, #3c4247); --ti-key-ink: #f3f3ef; --ti-key-edge: #1a1d1f; --ti-key-h: 56px; --ti-key-drop: 3px;
  --ti-dock-h: 82px;
  --ti-shadow: 0 2px 0 rgba(255,255,255,.06) inset, 0 18px 30px -12px rgba(0,0,0,.75), 0 4px 8px rgba(0,0,0,.45);
  --ti-tread: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22rgba(0%2C0%2C0%2C.8)%22%20d%3D%22M3.73%204.12Q4.65%2010.56%2011.09%2011.48Q10.17%205.04%203.73%204.12Z%22%2F%3E%3Cpath%20fill%3D%22rgba(255%2C255%2C255%2C.55)%22%20d%3D%22M2.25%202.04Q3.17%208.48%209.60%209.40Q8.69%202.96%202.25%202.04Z%22%2F%3E%3Cpath%20fill%3D%22rgba(150%2C158%2C166%2C.75)%22%20d%3D%22M2.82%202.82Q3.74%209.26%2010.18%2010.18Q9.26%203.74%202.82%202.82Z%22%2F%3E%3Cpath%20fill%3D%22rgba(0%2C0%2C0%2C.8)%22%20d%3D%22M16.73%2011.48Q23.17%2010.56%2024.09%204.12Q17.65%205.04%2016.73%2011.48Z%22%2F%3E%3Cpath%20fill%3D%22rgba(255%2C255%2C255%2C.55)%22%20d%3D%22M15.25%209.40Q21.69%208.48%2022.60%202.04Q16.17%202.96%2015.25%209.40Z%22%2F%3E%3Cpath%20fill%3D%22rgba(150%2C158%2C166%2C.75)%22%20d%3D%22M15.82%2010.18Q22.26%209.26%2023.18%202.82Q16.74%203.74%2015.82%2010.18Z%22%2F%3E%3Cpath%20fill%3D%22rgba(0%2C0%2C0%2C.8)%22%20d%3D%22M3.73%2024.48Q10.17%2023.56%2011.09%2017.12Q4.65%2018.04%203.73%2024.48Z%22%2F%3E%3Cpath%20fill%3D%22rgba(255%2C255%2C255%2C.55)%22%20d%3D%22M2.25%2022.40Q8.69%2021.48%209.60%2015.04Q3.17%2015.96%202.25%2022.40Z%22%2F%3E%3Cpath%20fill%3D%22rgba(150%2C158%2C166%2C.75)%22%20d%3D%22M2.82%2023.18Q9.26%2022.26%2010.18%2015.82Q3.74%2016.74%202.82%2023.18Z%22%2F%3E%3Cpath%20fill%3D%22rgba(0%2C0%2C0%2C.8)%22%20d%3D%22M16.73%2017.12Q17.65%2023.56%2024.09%2024.48Q23.17%2018.04%2016.73%2017.12Z%22%2F%3E%3Cpath%20fill%3D%22rgba(255%2C255%2C255%2C.55)%22%20d%3D%22M15.25%2015.04Q16.17%2021.48%2022.60%2022.40Q21.69%2015.96%2015.25%2015.04Z%22%2F%3E%3Cpath%20fill%3D%22rgba(150%2C158%2C166%2C.75)%22%20d%3D%22M15.82%2015.82Q16.74%2022.26%2023.18%2023.18Q22.26%2016.74%2015.82%2015.82Z%22%2F%3E%3C%2Fsvg%3E"); --ti-brush: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22360%22%20height%3D%22360%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%220%22%20y%3D%220%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.0025%200.55%22%20numOctaves%3D%222%22%20seed%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%200.48%20-0.192%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23f)%22%2F%3E%3C%2Fsvg%3E"); --ti-brush-plate: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22360%22%20height%3D%22360%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%220%22%20y%3D%220%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.0025%200.55%22%20numOctaves%3D%222%22%20seed%3D%229%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.4%20-0.16000000000000003%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23f)%22%2F%3E%3C%2Fsvg%3E"); --ti-tread-size: 26px;
  /* kit remap */
  --tim-bg: var(--ti-floor-2); --tim-panel: var(--ti-face); --tim-panel2: var(--ti-face-2); --tim-field: var(--ti-field);
  --tim-line: var(--ti-line); --tim-line-strong: #8a929a; --tim-ink: var(--ti-ink); --tim-ink2: var(--ti-ink-2); --tim-muted: var(--ti-ink-3);
  --tim-good: var(--ti-ok-mark); --tim-good-text: var(--ti-ok-ink); --tim-warn: var(--ti-warn-mark); --tim-warn-text: var(--ti-warn-ink);
  --tim-crit: var(--ti-bad-mark); --tim-crit-text: var(--ti-bad-ink); --tim-idle: var(--ti-idle-mark); --tim-idle-text: var(--ti-ink-2);
  --tim-font: var(--ti-sans); --tim-tap: 56px;
  /* Tell ATLAS sheet (tell-atlas.js) */
  --ta-bg: #23272b; --ta-ink: #eeece4; --ta-line: #6d757c; --ta-field: #121517; --ta-muted: #c3c7ca; --ta-accent: #f2c200;
  color-scheme: dark;
}
/* ---------------- tokens: SUN ---------------- */
:root[data-theme="light"] {
  --ti-floor: #bfc5c9; --ti-floor-2: #9aa1a6;
  --ti-bezel: #8a9298; --ti-bezel-hi: #c9ced2; --ti-bezel-lo: #6f777d;
  --ti-face: #f8f8f5; --ti-face-2: #ecedea; --ti-field: #ffffff; --ti-line: #1a1d20;
  --ti-ink: #0d0f11; --ti-ink-2: #2c3238; --ti-ink-3: #454c53;
  --ti-plate: #1c2024; --ti-plate-ink: #f2f3f3; --ti-plate-ink-2: #c3c8cc;
  --ti-ok-mark: #1f9d43; --ti-ok-ink: #0f6b2c; --ti-bad-mark: #d62818; --ti-bad-ink: #a11b0e; --ti-warn-mark: #e89a00; --ti-warn-ink: #6b4500; --ti-idle-mark: #5d656b;
  --ti-band-ok: #0f6b2c; --ti-band-bad: #b21f15; --ti-band-warn: #ffb000; --ti-band-off: #2a2f34;
  --ti-link: #0b4fa8; --ti-yellow: #ffcc00;
  --ti-lcd: #ffffff; --ti-lcd-ink: #0d0f11; --ti-lcd-na: #a11b0e;
  --ti-gauge-face: #f7f5ee; --ti-gauge-ink: #111111; --ti-gauge-tick: #2a2e31;
  --ti-pipe: #87909a; --ti-pipe-hi: #e8ecef; --ti-pipe-lo: #4a5157; --ti-equip: #6b747c; --ti-equip-hi: #a8b0b6;
  --ti-key: linear-gradient(#3a4046, #1d2125); --ti-key-ink: #ffffff; --ti-key-edge: #0b0d0e; --ti-key-h: 60px; --ti-key-drop: 6px;
  --ti-dock-h: 90px;
  --ti-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 0 #4a5156, 0 16px 26px -10px rgba(0,0,0,.55);
  --ti-tread: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22rgba(25%2C29%2C33%2C.55)%22%20d%3D%22M4.31%204.76Q5.37%2012.18%2012.79%2013.24Q11.73%205.82%204.31%204.76Z%22%2F%3E%3Cpath%20fill%3D%22rgba(255%2C255%2C255%2C.95)%22%20d%3D%22M2.60%202.36Q3.66%209.78%2011.08%2010.84Q10.02%203.42%202.60%202.36Z%22%2F%3E%3Cpath%20fill%3D%22rgba(214%2C218%2C222%2C.8)%22%20d%3D%22M3.26%203.26Q4.32%2010.68%2011.74%2011.74Q10.68%204.32%203.26%203.26Z%22%2F%3E%3Cpath%20fill%3D%22rgba(25%2C29%2C33%2C.55)%22%20d%3D%22M19.31%2013.24Q26.73%2012.18%2027.79%204.76Q20.37%205.82%2019.31%2013.24Z%22%2F%3E%3Cpath%20fill%3D%22rgba(255%2C255%2C255%2C.95)%22%20d%3D%22M17.60%2010.84Q25.02%209.78%2026.08%202.36Q18.66%203.42%2017.60%2010.84Z%22%2F%3E%3Cpath%20fill%3D%22rgba(214%2C218%2C222%2C.8)%22%20d%3D%22M18.26%2011.74Q25.68%2010.68%2026.74%203.26Q19.32%204.32%2018.26%2011.74Z%22%2F%3E%3Cpath%20fill%3D%22rgba(25%2C29%2C33%2C.55)%22%20d%3D%22M4.31%2028.24Q11.73%2027.18%2012.79%2019.76Q5.37%2020.82%204.31%2028.24Z%22%2F%3E%3Cpath%20fill%3D%22rgba(255%2C255%2C255%2C.95)%22%20d%3D%22M2.60%2025.84Q10.02%2024.78%2011.08%2017.36Q3.66%2018.42%202.60%2025.84Z%22%2F%3E%3Cpath%20fill%3D%22rgba(214%2C218%2C222%2C.8)%22%20d%3D%22M3.26%2026.74Q10.68%2025.68%2011.74%2018.26Q4.32%2019.32%203.26%2026.74Z%22%2F%3E%3Cpath%20fill%3D%22rgba(25%2C29%2C33%2C.55)%22%20d%3D%22M19.31%2019.76Q20.37%2027.18%2027.79%2028.24Q26.73%2020.82%2019.31%2019.76Z%22%2F%3E%3Cpath%20fill%3D%22rgba(255%2C255%2C255%2C.95)%22%20d%3D%22M17.60%2017.36Q18.66%2024.78%2026.08%2025.84Q25.02%2018.42%2017.60%2017.36Z%22%2F%3E%3Cpath%20fill%3D%22rgba(214%2C218%2C222%2C.8)%22%20d%3D%22M18.26%2018.26Q19.32%2025.68%2026.74%2026.74Q25.68%2019.32%2018.26%2018.26Z%22%2F%3E%3C%2Fsvg%3E"); --ti-brush: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22360%22%20height%3D%22360%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%220%22%20y%3D%220%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.0025%200.55%22%20numOctaves%3D%222%22%20seed%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%200.4%20-0.16000000000000003%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23f)%22%2F%3E%3C%2Fsvg%3E"); --ti-tread-size: 30px;
  --tim-line-strong: #4a5157;
  --ta-bg: #f8f8f5; --ta-ink: #0d0f11; --ta-line: #1a1d20; --ta-field: #ffffff; --ta-muted: #2c3238; --ta-accent: #ffcc00;
  color-scheme: light;
}

/* ---------------- base ---------------- */
html { background: var(--ti-floor-2); }
body.ti {
  margin: 0; min-height: 100vh; font: 600 16px/1.4 var(--ti-sans); color: var(--ti-ink); -webkit-font-smoothing: antialiased;
  background-color: var(--ti-floor);
  background-image: var(--ti-brush), var(--ti-tread), radial-gradient(120% 60% at 20% 0%, rgba(255,255,255,.16), transparent 60%), linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.35));
  background-size: 360px 360px, var(--ti-tread-size) var(--ti-tread-size), 100% 100%, 100% 100%;
}
:root[data-theme="light"] body.ti { background-image: var(--ti-brush), var(--ti-tread), linear-gradient(180deg, #d9dde0, #aab1b6); background-size: 360px 360px, var(--ti-tread-size) var(--ti-tread-size), 100% 100%; }
body.ti.ti-has-dock { padding-bottom: calc(var(--ti-dock-h) + env(safe-area-inset-bottom) + 16px); }
.ti-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ti a { color: var(--ti-link); }
.ti :focus-visible { outline: 3px solid var(--ti-yellow); outline-offset: 3px; }
:root[data-theme="light"] .ti :focus-visible { outline: 4px solid #1d4ed8; }

/* ---------------- header ---------------- */
.ti-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  background-color: #3a4045; background-image: var(--ti-brush), linear-gradient(#545b61, #3a4045 55%, #2c3135); border-bottom: 2px solid #121416; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 18px rgba(0,0,0,.55); }
:root[data-theme="light"] .ti-top { background-color: #101214; background-image: var(--ti-brush), linear-gradient(#22262a, #0c0e10); border-bottom: 4px solid var(--ti-yellow); box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.ti-brand { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; text-decoration: none; }
.ti-brand .wm { font: 800 13px/1 var(--ti-cond); letter-spacing: .3em; color: #e3e6e8; text-shadow: 0 -1px 0 rgba(0,0,0,.9); }
.ti-badge { position: relative; display: inline-flex; align-items: center; padding: 5px 11px 4px; border-radius: 7px; background: radial-gradient(120% 140% at 30% 0%, #2a2d31, #0b0c0d 70%);
  box-shadow: 0 0 0 2px #8e979e, 0 0 0 3px #1a1d20, 0 3px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); }
.ti-badge b { font: 400 20px/1 var(--ti-cast); letter-spacing: .06em; color: #f4f6f7; text-shadow: 0 1px 0 #000; }
.ti-badge::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #ff7a1a, #ffd36b, #ff7a1a, transparent); }
:root[data-theme="light"] .ti-badge { background: none; box-shadow: none; padding: 0; }
:root[data-theme="light"] .ti-badge b { font-size: 26px; color: #fff; text-shadow: 0 2px 0 #000; }
:root[data-theme="light"] .ti-badge::before { display: none; }
.ti-who { font: 800 13px/1.2 var(--ti-cond); letter-spacing: .08em; text-transform: uppercase; color: #e3e6e8; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px 10px; min-width: 0; }
.ti-who a, .ti-who .ti-lk { color: #ffd84a; background: none; border: 0; padding: 0 2px; min-height: 44px; display: inline-flex; align-items: center; box-shadow: none; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ti-who .ti-role { color: #e3e6e8; }

/* rotary NIGHT/SUN selector (21st #5406 circular-fan-speed-knob, as a cast selector switch) */
.ti-rot { position: relative; width: 66px; height: 58px; flex: none; border: 0; background: none; cursor: pointer; padding: 0; min-height: 0; }
.ti-rot .lbl { position: absolute; top: 2px; font: 800 10px/1 var(--ti-cond); letter-spacing: .08em; color: #e6e8ea; }
.ti-rot .l0 { left: 0; } .ti-rot .l1 { right: 0; }
.ti-rot[aria-checked="false"] .l0, .ti-rot[aria-checked="true"] .l1 { color: #ffd84a; }
.ti-rot .knob { position: absolute; left: 50%; top: 15px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #2a2e31 0 6deg, #4d5459 6deg 12deg);
  box-shadow: 0 3px 5px rgba(0,0,0,.7), 0 0 0 2px #15181a; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.ti-rot .knob::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #5d656b, #1e2124 70%); }
.ti-rot .knob::after { content: ""; position: absolute; left: 50%; top: 3px; width: 4px; height: 13px; margin-left: -2px; border-radius: 2px; background: #f2c200; box-shadow: 0 0 0 1px #000; }
.ti-rot[aria-checked="false"] .knob { transform: rotate(-45deg); }
.ti-rot[aria-checked="true"] .knob { transform: rotate(45deg); }

/* ---------------- panels: bezel + face + rivets ---------------- */
.ti-panel { position: relative; border-radius: 14px; padding: 10px; background: var(--ti-bezel);
  background-image: var(--ti-brush), linear-gradient(170deg, var(--ti-bezel-hi), var(--ti-bezel) 30%, var(--ti-bezel-lo) 140%); box-shadow: var(--ti-shadow), 0 0 0 1px #0d0f10; }
.ti-bolted::after { content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 3;
  --b: radial-gradient(circle at 38% 32%, #f4f6f7 0 8%, #a9b0b5 22%, #5b6268 52%, #24282b 70%, transparent 74%);
  background: var(--b) left top/10px 10px no-repeat, var(--b) right top/10px 10px no-repeat, var(--b) left bottom/10px 10px no-repeat, var(--b) right bottom/10px 10px no-repeat; }
.ti-face { position: relative; z-index: 2; border-radius: 8px; background: linear-gradient(var(--ti-face), var(--ti-face-2)); padding: 12px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.12); }
:root[data-theme="light"] .ti-face { background: var(--ti-face); box-shadow: inset 0 0 0 2px #1a1d20; }
.ti-stamp { font: 800 11px/1 var(--ti-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--ti-ink-2); }
.ti-engr { display: inline-block; padding: 3px 8px 2px; border-radius: 3px; background: var(--ti-plate); color: var(--ti-plate-ink); font: 800 12px/1.15 var(--ti-cond); letter-spacing: .14em; text-transform: uppercase; }
.ti-stain { position: absolute; pointer-events: none; z-index: 1; mix-blend-mode: multiply; }
.ti-stain svg { width: 100%; height: 100%; display: block; }
.ti-tag { display: inline-block; font: 800 12px/1.3 var(--ti-cond); letter-spacing: .1em; padding: 1px 6px; border-radius: 3px; vertical-align: 1px; text-transform: uppercase; }
.ti-tag.stale { color: var(--ti-bad-ink); box-shadow: inset 0 0 0 1.5px currentColor; }
.ti-tag.est { color: var(--ti-warn-ink); box-shadow: inset 0 0 0 1.5px currentColor; }
.ti-hz { height: 10px; border-radius: 3px; background: repeating-linear-gradient(-45deg, var(--ti-yellow) 0 10px, #111 10px 20px); }

/* ---------------- pilot lamps ---------------- */
.ti-lamp { --c: #3a4a3e; --hot: #566a5b; position: relative; flex: none; width: var(--s, 30px); height: var(--s, 30px); border-radius: 50%;
  background: conic-gradient(from 210deg, #f2f4f5, #8a9298, #3b4045, #b9c0c5, #f2f4f5); box-shadow: 0 2px 3px rgba(0,0,0,.7); }
.ti-lamp::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--hot), var(--c) 55%, #0b0d0b 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), 0 0 var(--gl, 0) var(--g, transparent); }
.ti-lamp::after { content: ""; position: absolute; left: 30%; top: 24%; width: 24%; height: 16%; border-radius: 50%; background: rgba(255,255,255,.55); }
.ti-lamp.ok { --hot: #d9ffd6; --c: #22c24a; --g: rgba(59,224,106,.85); --gl: 14px; }
.ti-lamp.bad { --hot: #ffd9d2; --c: #e8301f; --g: rgba(255,74,58,.85); --gl: 14px; }
.ti-lamp.warn { --hot: #fff1c9; --c: #f0a000; --g: rgba(255,178,30,.85); --gl: 14px; }
.ti-lamp.off { --hot: #4d544f; --c: #2b302d; }
.ti-lamp.stale::before { opacity: .45; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: no-preference) { .ti-lamp.bad.blink::before { animation: ti-blink 1.6s steps(1) infinite; } }
@keyframes ti-blink { 50% { opacity: .35; } }

/* ---------------- keys (21st #34577 tactile-3d-button + #23547 press-depth) ---------------- */
.ti-key { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ti-key-h); padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer; text-decoration: none;
  font: 800 18px/1 var(--ti-cond); letter-spacing: .08em; text-transform: uppercase; background: var(--ti-key); color: var(--ti-key-ink); touch-action: manipulation;
  box-shadow: 0 1px 1px rgba(0,0,0,.35), 0 var(--ti-key-drop) 0 var(--ti-key-edge), 0 8px 14px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.28), inset 0 -3px 6px rgba(0,0,0,.45);
  transition: transform .1s cubic-bezier(.32,.72,0,1), box-shadow .1s; }
.ti-key:active { transform: translateY(var(--ti-key-drop)); box-shadow: 0 0 0 var(--ti-key-edge), 0 2px 4px rgba(0,0,0,.4), inset 0 2px 6px rgba(0,0,0,.55); }
.ti-key.y { background: linear-gradient(#ffd83a, #f2c200 55%, #d9a900); color: #111111; --ti-key-edge: #7a5d00; }
.ti a.ti-key { color: var(--ti-key-ink); } .ti a.ti-key.y { color: #111111; }
.ti-key.sm { min-height: 56px; font-size: 15px; padding: 0 12px; }
.ti-key svg { width: 22px; height: 22px; flex: none; }
.ti-key[disabled] { opacity: .55; cursor: not-allowed; }
:root[data-theme="light"] .ti-key { box-shadow: 0 0 0 2px #0b0d0e, 0 var(--ti-key-drop) 0 var(--ti-key-edge), 0 12px 16px rgba(0,0,0,.35), inset 0 2px 1px rgba(255,255,255,.22), inset 0 -4px 6px rgba(0,0,0,.45); font-size: 20px; }
:root[data-theme="light"] .ti-key.y { background: linear-gradient(#ffdb3d, #ffcc00 55%, #e0ad00); --ti-key-edge: #111; }
:root[data-theme="light"] .ti-key:active { box-shadow: 0 0 0 2px #0b0d0e, 0 0 0 #0b0d0e, inset 0 3px 8px rgba(0,0,0,.55); }

/* ---------------- bottom dock (kick plate): fixed, safe-area aware, never over content (body.ti-has-dock pads the page) ---------------- */
.ti-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; gap: 12px;
  padding: 12px max(14px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); min-height: var(--ti-dock-h);
  background-color: #3b4146; background-image: var(--ti-tread), linear-gradient(#5a6168, #2e3337); background-size: 22px 22px, 100% 100%; border-top: 2px solid #101214; box-shadow: 0 -8px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25); }
:root[data-theme="light"] .ti-dock { background-color: #9aa1a6; background-image: var(--ti-tread), linear-gradient(#d3d7da, #9aa1a6); background-size: 24px 24px, 100% 100%; border-top: 3px solid #1a1d20; }
.ti-dock[hidden] { display: none; }
.ti-dock .ti-key { flex: 1 1 0; max-width: 340px; min-width: 0; white-space: nowrap; padding: 0 10px; }
.ti-dock .ti-key.y { flex-grow: 1.35; }

/* ---------------- LCD + analog gauge ---------------- */
.ti-lcd { position: relative; padding: 8px 10px 6px; border-radius: 5px; background: var(--ti-lcd); box-shadow: inset 0 2px 6px #000, 0 0 0 2px #2b3034; }
.ti-lcd .v { font: 800 46px/.9 var(--ti-cond); color: var(--ti-lcd-ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; min-height: 41px; }
.ti-lcd .v.na { color: var(--ti-lcd-na); font-size: 30px; line-height: 41px; letter-spacing: .08em; }
:root[data-theme="light"] .ti-lcd .v.na { font-size: 40px; line-height: 62px; }
.ti-lcd .u { position: absolute; right: 9px; bottom: 8px; font: 800 13px/1 var(--ti-cond); letter-spacing: .14em; color: var(--ti-lcd-ink); }
:root[data-theme="light"] .ti-lcd { box-shadow: inset 0 0 0 2px #1a1d20; padding: 6px 10px 4px; }
:root[data-theme="light"] .ti-lcd .v { font-size: 72px; line-height: .86; min-height: 62px; letter-spacing: -.02em; }
.ti-gauge { position: relative; width: 156px; height: 156px; flex: none; }
.ti-gauge svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ti-gn { font: 800 13px var(--ti-cond); fill: var(--ti-gauge-ink); }
.ti-gu { font: 800 12px var(--ti-cond); letter-spacing: .2em; fill: var(--ti-gauge-ink); }
.ti-gs { font: 600 9px var(--ti-cond); letter-spacing: .06em; fill: var(--ti-gauge-ink); }
.ti-gflag { font: 800 11px var(--ti-cond); fill: #000; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
/* SUN: flow bar against the normal band (21st #19524 meter) replaces the dial */
.ti-fbar { display: none; }
:root[data-theme="light"] .ti-gauge { display: none; }
:root[data-theme="light"] .ti-fbar { display: block; margin-top: 10px; }
.ti-fbar .tr { position: relative; height: 22px; border-radius: 5px; background: #dfe2e4; box-shadow: inset 0 2px 3px rgba(0,0,0,.35), inset 0 0 0 2px #1a1d20; overflow: hidden; }
.ti-fbar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, #1a1d20 0 8px, #2c3136 8px 10px); }
.ti-fbar .nb { position: absolute; top: 0; bottom: 0; background: rgba(40,200,90,.35); border-left: 2px dashed #0f6b2c; border-right: 2px dashed #0f6b2c; }
.ti-fbar .sc { display: flex; justify-content: space-between; font: 800 13px/1 var(--ti-cond); letter-spacing: .06em; color: var(--ti-ink-2); margin-top: 5px; }

/* ---------------- flow schematic ---------------- */
.ti-schem { border-radius: 6px; padding: 6px 4px 2px; background: var(--ti-face-2); box-shadow: inset 0 1px 4px rgba(0,0,0,.6); }
:root[data-theme="light"] .ti-schem { background: #e3e6e8; box-shadow: inset 0 0 0 2px #1a1d20; }
.ti-schem svg { display: block; width: 100%; height: auto; }
.ti-sl { font: 800 11px var(--ti-cond); letter-spacing: .05em; fill: var(--ti-ink-2); }
.ti-sm { font: 800 8px var(--ti-cond); }
.ti-sq { font: 800 7px var(--ti-cond); fill: var(--ti-ink-3); }
.ti-stag { font: 800 10px var(--ti-cond); fill: #140f00; letter-spacing: .08em; }
.ti-cap { font: 800 12px var(--ti-cond); letter-spacing: .1em; fill: var(--ti-ink); }
.ti-cap-nodata { fill: var(--ti-bad-ink); } .ti-cap-warn { fill: var(--ti-warn-ink); }
.ti-rtag-ok { fill: var(--ti-band-ok); } .ti-rtag-bad { fill: var(--ti-band-bad); } .ti-rtag-warn { fill: var(--ti-band-warn); } .ti-rtag-idle { fill: var(--ti-band-off); }
.ti-rtagt { font: 800 9px var(--ti-cond); letter-spacing: .06em; fill: #ffffff; } .ti-rtagt-warn { fill: #140f00; }
@media (prefers-reduced-motion: no-preference) {
  .ti-flow { stroke-dasharray: 3 9; animation: ti-flow .6s linear infinite; }
  .ti-glint { stroke-dasharray: 26 420; animation: ti-glint 2.4s linear infinite; filter: blur(1.5px); }
  .ti-spin { transform-box: fill-box; transform-origin: center; animation: ti-spin .7s linear infinite; }
}
@media (prefers-reduced-motion: reduce) { .ti-flow { stroke-dasharray: 3 9; } .ti-glint { display: none; } }
@keyframes ti-flow { to { stroke-dashoffset: -12; } }
@keyframes ti-glint { from { stroke-dashoffset: 446; } to { stroke-dashoffset: 0; } }
@keyframes ti-spin { to { transform: rotate(360deg); } }

/* ---------------- equipment head: nameplate + lamp (NIGHT) / solid colour band (SUN) ---------------- */
.ti-hd { display: grid; grid-template-columns: 1fr 66px; grid-template-areas: "np lamp" "st st"; gap: 10px; align-items: stretch; }
.ti-hd .nameplate { grid-area: np; min-width: 0; position: relative; border-radius: 5px; padding: 8px 12px 7px; color: var(--ti-plate-ink); background: var(--ti-plate);
  background-image: var(--ti-brush-plate), linear-gradient(170deg, rgba(255,255,255,.35), transparent 40%, rgba(0,0,0,.12)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.25), 0 2px 3px rgba(0,0,0,.5); }
.ti-hd .id { font: 800 34px/.9 var(--ti-cond); letter-spacing: .02em; color: inherit; text-decoration: none; display: inline-block; }
.ti-hd .mdl { font: 800 12px/1.25 var(--ti-cond); letter-spacing: .12em; color: var(--ti-plate-ink-2); margin-top: 4px; text-transform: uppercase; overflow-wrap: anywhere; }
.ti-hd .lampcol { grid-area: lamp; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.ti-hd .lampcol .ti-lamp { --s: 44px; }
.ti-hd .lampcol .ti-stamp { font-size: 11px; line-height: 1.1; letter-spacing: .08em; color: var(--ti-ink); text-align: center; }
.ti-hd .state { grid-area: st; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 5px; background: var(--ti-face-2); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); font: 800 18px/1.05 var(--ti-cond); letter-spacing: .05em; text-transform: uppercase; min-width: 0; }
.ti-hd .state svg { width: 22px; height: 22px; flex: none; }
.ti-hd .state .w { min-width: 0; overflow-wrap: anywhere; }
.ti-hd .state .tm { margin-left: auto; font: 600 15px/1.1 var(--ti-cond); letter-spacing: .03em; color: var(--ti-ink-2); text-transform: none; text-align: right; white-space: nowrap; }
.ti-hd.ok .state { color: var(--ti-ok-ink); } .ti-hd.bad .state { color: var(--ti-bad-ink); } .ti-hd.warn .state { color: var(--ti-warn-ink); } .ti-hd.off .state, .ti-hd.none .state { color: var(--ti-ink); }
:root[data-theme="light"] .ti-hd { grid-template-columns: 1fr auto; grid-template-areas: "np st"; gap: 6px 10px; align-items: center; padding: 12px 14px; margin: -12px -12px 0; border-radius: 8px 8px 0 0;
  background: var(--band); color: var(--band-ink); box-shadow: inset 0 0 0 2px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.25); --band: var(--ti-band-off); --band-ink: #ffffff; }
:root[data-theme="light"] .ti-hd.ok { --band: var(--ti-band-ok); } :root[data-theme="light"] .ti-hd.bad { --band: var(--ti-band-bad); }
:root[data-theme="light"] .ti-hd.warn { --band: var(--ti-band-warn); --band-ink: #111111; }
:root[data-theme="light"] .ti-hd .nameplate { background: none; box-shadow: none; padding: 0; color: var(--band-ink); }
:root[data-theme="light"] .ti-hd .id { font-size: 46px; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
:root[data-theme="light"] .ti-hd.warn .id { text-shadow: none; }
:root[data-theme="light"] .ti-hd .mdl { color: var(--band-ink); opacity: 1; }
:root[data-theme="light"] .ti-hd .lampcol { display: none; }
:root[data-theme="light"] .ti-hd .state { background: none; box-shadow: none; padding: 0; color: var(--band-ink) !important; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 22px; text-align: right; }
:root[data-theme="light"] .ti-hd .state svg { width: 40px; height: 40px; }
:root[data-theme="light"] .ti-hd .state .tm { margin: 0; color: var(--band-ink); font: 800 16px/1.1 var(--ti-cond); white-space: normal; }

/* ---------------- annunciator alarm window (21st #1268 border-beam) ---------------- */
.ti-ann .ti-face { background: #101214; display: grid; grid-template-columns: 1fr; gap: 10px; }
.ti-win { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 5px; background: linear-gradient(#ffcc4d, #ffb21e 60%, #f59f00); color: #140f00; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), 0 0 22px rgba(255,178,30,.4); }
.ti-win.crit { background: linear-gradient(#d8331f, #b21f15 60%, #9c1a11); color: #ffffff; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), 0 0 22px rgba(255,74,58,.4); }
.ti-win svg { width: 32px; height: 32px; }
.ti-win .t { font: 800 20px/1.05 var(--ti-cond); letter-spacing: .04em; text-transform: uppercase; }
.ti-win .s { font: 800 14px/1.15 var(--ti-cond); letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }
.ti-ann p { margin: 0; font: 600 15px/1.35 var(--ti-sans); color: #ecebe4; }
.ti-ann .ti-key { justify-self: start; }
.ti-beam { position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box; -webkit-mask-composite: destination-in; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box; }
.ti-beam::after { content: ""; position: absolute; width: 90px; aspect-ratio: 1; background: linear-gradient(to left, #fff, #ff7a1a, transparent); offset-path: rect(0 auto auto 0 round 90px); offset-anchor: 90% 50%; animation: ti-beam 5s linear infinite; }
@keyframes ti-beam { to { offset-distance: 100%; } }
:root[data-theme="light"] .ti-ann { padding: 0; background: none; box-shadow: none; }
:root[data-theme="light"] .ti-ann::after { display: none; }
:root[data-theme="light"] .ti-ann .ti-face { background: var(--ti-band-warn); box-shadow: inset 0 0 0 3px #111, 0 4px 0 #6b4a00; border-top: 14px solid #111; border-image: repeating-linear-gradient(-45deg, #111 0 14px, var(--ti-yellow) 14px 28px) 14 0 0 0; }
:root[data-theme="light"] .ti-ann p { color: #111111; font-size: 16px; }
:root[data-theme="light"] .ti-win { background: #111; color: var(--ti-band-warn); box-shadow: none; }
:root[data-theme="light"] .ti-win.crit { background: #111; color: #ff8a7e; }
:root[data-theme="light"] .ti-beam { display: none; }

/* ---------------- service plate (oil hours) + LED bargraph (21st #24473 energy-meter) ---------------- */
.ti-svc { display: grid; gap: 7px; padding: 10px 12px; border-radius: 6px; background: #0e1012; color: #ecebe4; box-shadow: inset 0 1px 4px #000; }
.ti-svc.due { border: 6px solid transparent; border-image: repeating-linear-gradient(-45deg, var(--ti-yellow) 0 9px, #111 9px 18px) 6; }
.ti-svc .h { display: flex; align-items: center; gap: 8px; font: 800 17px/1.05 var(--ti-cond); letter-spacing: .06em; text-transform: uppercase; color: #ffc95c; }
.ti-svc.ok .h { color: #7dff9c; } .ti-svc.na .h { color: #d4d7d9; }
.ti-svc .h svg { width: 22px; height: 22px; flex: none; }
.ti-svc .h .pc { margin-left: auto; padding: 4px 7px 3px; border-radius: 3px; background: #c0281a; color: #ffffff; font-size: 16px; letter-spacing: .04em; }
.ti-svc .k { font: 600 14px/1.3 var(--ti-sans); color: #d4d7d9; }
.ti-svc .ti-tag.est { color: #ffc95c; }
.ti-svc .k b { font: 800 16px/1 var(--ti-cond); color: #ffffff; letter-spacing: .04em; }
.ti-bar { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; height: 14px; }
.ti-bar i { border-radius: 1.5px; background: #262a2d; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.ti-bar i.on { background: #3be06a; } .ti-bar i.hot { background: #ff4a3a; } .ti-bar i.due { box-shadow: inset 0 0 0 1px #ffc95c; }
.ti-scale { display: flex; justify-content: space-between; font: 600 12px/1 var(--ti-cond); letter-spacing: .06em; color: #c3c7ca; }

/* ---------------- odometer drums ---------------- */
.ti-odo { display: flex; gap: 3px; padding: 5px; border-radius: 6px; background: #0a0b0c; box-shadow: inset 0 2px 4px #000, 0 1px 0 rgba(255,255,255,.15); }
.ti-drum { width: 27px; height: 40px; border-radius: 3px; overflow: hidden; position: relative; background: linear-gradient(#050505, #2b2d2f 30%, #3b3e41 50%, #2b2d2f 70%, #050505); }
.ti-drum span { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; transition: transform 1.4s cubic-bezier(.2,.9,.25,1); }
.ti-drum i { font: 800 31px/40px var(--ti-cond); font-style: normal; text-align: center; color: #f4f1e6; height: 40px; flex: none; }
.ti-drum::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.6), transparent 32%, transparent 68%, rgba(0,0,0,.6)); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .ti *, .ti *::before, .ti *::after { animation: none !important; transition: none !important; }
  .ti-beam { display: none; }
}