/* Rigprobe theme, r75: "riveted aluminum".
   Loaded after site.css. The look comes from the shop floor: brushed aluminum data plates
   with rivets, an LCD meter readout, and a red inspection stamp. Plates are saved for the
   things that carry information (a service call, a system tag, a spec plate); reading
   surfaces stay flat and quiet. Bricolage Grotesque for headings and readings, Work Sans
   for everything else. Red is the only accent and it means "do this". */

/* ------------------------------------------------------------------ fonts (self-hosted, OFL) */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../fonts/bricolage-700.woff") format("woff"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("../fonts/bricolage-400.woff") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("../fonts/work-sans-400.woff") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../fonts/work-sans-700.woff") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 300 500; font-display: swap; src: url("../fonts/work-sans-400-italic.woff") format("woff"); }

/* ------------------------------------------------------------------ tokens */
:root {
  --font: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Bricolage Grotesque", "Work Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg: #e4e7e8;            /* the page: bare aluminum */
  --bg-2: #dadee0;
  --surface: #f5f6f6;       /* flat reading sheets */
  --surface-2: #eceeef;
  --surface-3: #dfe3e5;
  --line: #c3c9cc;
  --line-soft: #d4d9db;
  --line-strong: #959da1;
  --edge: #a9b0b3;          /* plate edge */
  --text: #1f2427;          /* graphite */
  --text-2: #434b50;
  --text-3: #575f64;

  --primary: #b3261e;       /* red: the action color */
  --primary-2: #961d16;
  --primary-ink: #ffffff;
  --primary-tint: #f3dedb;
  --link: #a3221b;
  --accent: var(--primary); --accent-2: var(--primary-2); --accent-ink: var(--primary-ink);

  --green: #2d6a3a; --green-tint: #dceadb;
  --red: #b3261e; --red-tint: #f3dedb;
  --amber: #85580a; --amber-tint: #f1e5c8;
  --blue: #2c5f7a; --purple: #57507c; --teal: #2a6762;
  --star: #b3261e;

  /* brushed aluminum */
  --alu-hi: #f8f9f9; --alu-mid: #e3e6e7; --alu-lo: #d2d6d8;
  --alu-grain: rgba(255,255,255,.28); --alu-grain-2: rgba(0,0,0,.022);
  --brushed: repeating-linear-gradient(90deg, var(--alu-grain) 0 1px, var(--alu-grain-2) 1px 3px), linear-gradient(180deg, var(--alu-hi) 0%, var(--alu-mid) 55%, var(--alu-lo) 100%);
  --engrave: 0 1px 0 rgba(255,255,255,.85);
  --plate-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.12), 0 18px 40px -24px rgba(20,24,26,.5);
  --rivet: radial-gradient(circle at 45% 40%, #ffffff 0 1.3px, #d3d7d9 2.3px, #8d959a 4.4px, rgba(0,0,0,.3) 5px, rgba(0,0,0,0) 5.6px);
  --hole: radial-gradient(circle, rgba(0,0,0,.42) 0 3px, #9aa2a6 3.6px, rgba(255,255,255,.7) 4.4px, rgba(0,0,0,0) 5px);

  /* graphite (dark anodized) */
  --deep: #1f2427; --deep-2: #2a3034; --deep-line: #3a4247; --deep-text: #d9dee0; --deep-text-2: #a9b2b6;
  --anodized: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,.05) 1px 3px), linear-gradient(180deg, #2c3236 0%, #22272a 100%);

  /* meter */
  --bezel: #2a3034; --lcd: #c6d4bd; --lcd-ink: #172216; --lcd-label: #b8c3c8;

  --radius: 12px; --radius-sm: 10px; --radius-lg: 16px; --pill: 999px;
  --shadow-1: 0 1px 2px rgba(20,24,26,.08);
  --shadow-2: 0 1px 2px rgba(20,24,26,.06), 0 12px 28px -16px rgba(20,24,26,.3);
  --shadow-3: 0 2px 6px rgba(20,24,26,.06), 0 28px 56px -26px rgba(20,24,26,.45);
  --focus: #1f2427;
  --ring: 0 0 0 3px rgba(31,36,39,.35);
  --maxw: 1200px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #15191b; --bg-2: #101315;
  --surface: #1d2225; --surface-2: #23292c; --surface-3: #2b3236;
  --line: #353d42; --line-soft: #2b3236; --line-strong: #525c62; --edge: #475055;
  --text: #e6e9ea; --text-2: #bac1c5; --text-3: #959ea3;
  --primary: #c92f25; --primary-2: #e0443a; --primary-ink: #ffffff; --primary-tint: #3a1f1c;
  --link: #f08c82;
  --green: #74c08a; --green-tint: #1b3022; --red: #f08c82; --red-tint: #3a1f1c;
  --amber: #e3b24f; --amber-tint: #362c16; --blue: #84b6d2; --purple: #aba3d4; --teal: #74c1b9;
  --star: #f08c82;
  --alu-hi: #3b4246; --alu-mid: #2f3539; --alu-lo: #262b2e;
  --alu-grain: rgba(255,255,255,.045); --alu-grain-2: rgba(0,0,0,.08);
  --engrave: 0 -1px 0 rgba(0,0,0,.55);
  --plate-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.4), 0 18px 40px -24px rgba(0,0,0,.8);
  --rivet: radial-gradient(circle at 45% 40%, #c8cdd0 0 1.2px, #7d868b 2.3px, #454d52 4.4px, rgba(0,0,0,.5) 5px, rgba(0,0,0,0) 5.6px);
  --hole: radial-gradient(circle, rgba(0,0,0,.7) 0 3px, #555e63 3.6px, rgba(255,255,255,.12) 4.4px, rgba(0,0,0,0) 5px);
  --deep: #0f1214; --deep-2: #1a1f22; --deep-line: #2e353a;
  --anodized: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, rgba(0,0,0,.06) 1px 3px), linear-gradient(180deg, #1c2124 0%, #121517 100%);
  --bezel: #0e1112; --lcd: #b3c3a9; --lcd-ink: #142012; --lcd-label: #99a5ab;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.65);
  --shadow-3: 0 2px 6px rgba(0,0,0,.3), 0 30px 60px -24px rgba(0,0,0,.75);
  --focus: #e6e9ea;
  --ring: 0 0 0 3px rgba(230,233,234,.35);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--text);
  background: var(--bg); background-image: none; font-variant-numeric: lining-nums;
}
::selection { background: var(--primary-tint); color: var(--text); }
h1, h2, h3, h4 { color: var(--text); text-transform: none; text-wrap: balance; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.022em; line-height: 1.04; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); letter-spacing: -.018em; line-height: 1.1; }
h3 { font-family: var(--font); font-weight: 700; font-size: 1.15rem; letter-spacing: 0; line-height: 1.3; }
p { text-wrap: pretty; }
a { color: inherit; }
strong, b { font-weight: 700; }
:focus { outline: none; }
:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: none; border-radius: 8px;
}
.fade-in, .app > * { animation: none; }
.skip-link { top: -80px; background: var(--text); color: var(--bg); border-radius: 8px; }
.skip-link:focus-visible { top: 12px; }

/* forms */
input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="password"], select, textarea {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 11px 13px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: .9; }
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* ------------------------------------------------------------------ materials */
/* brushed aluminum: header, plates, tags */
.alu { background: var(--brushed); color: var(--text); text-shadow: var(--engrave); }
/* a riveted data plate. The four rivets are background layers, no extra markup. */
.plate {
  position: relative; border-radius: 16px; border: 1px solid var(--edge); color: var(--text);
  background:
    var(--rivet) left 9px top 9px / 12px 12px no-repeat,
    var(--rivet) right 9px top 9px / 12px 12px no-repeat,
    var(--rivet) left 9px bottom 9px / 12px 12px no-repeat,
    var(--rivet) right 9px bottom 9px / 12px 12px no-repeat,
    var(--brushed);
  box-shadow: var(--plate-shadow);
  text-shadow: var(--engrave);
}
.plate-dark {
  position: relative; border-radius: 20px; border: 1px solid #0c0f10; color: var(--deep-text);
  background:
    var(--rivet) left 12px top 12px / 12px 12px no-repeat,
    var(--rivet) right 12px top 12px / 12px 12px no-repeat,
    var(--rivet) left 12px bottom 12px / 12px 12px no-repeat,
    var(--rivet) right 12px bottom 12px / 12px 12px no-repeat,
    var(--anodized);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 50px -28px rgba(0,0,0,.6);
}
:root:not([data-theme="dark"]) .plate-dark { --rivet: radial-gradient(circle at 45% 40%, #c8cdd0 0 1.2px, #7d868b 2.3px, #454d52 4.4px, rgba(0,0,0,.5) 5px, rgba(0,0,0,0) 5.6px); }

/* the meter: a dark bezel around a green-grey LCD */
.lcdwrap { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 12px; background: var(--bezel); box-shadow: inset 0 2px 6px rgba(0,0,0,.6); text-shadow: none; }
.lcd {
  flex: none; display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 4px; min-width: 7.2em;
  background: var(--lcd); color: var(--lcd-ink); border-radius: 8px; padding: 6px 14px 4px;
  font: 700 2.1rem/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 2px 0 rgba(0,0,0,.15), inset 0 0 0 1px rgba(0,0,0,.08);
}
.lcd small { font-size: .5em; font-weight: 700; letter-spacing: 0; }
.lcd.blank { color: rgba(23,34,22,.38); }
.lcdlbl { min-width: 0; color: var(--lcd-label); font-size: .9rem; line-height: 1.38; }
.lcdlbl b { display: block; color: #e3e8ea; font-weight: 600; }
@media (max-width: 520px) { .lcd { font-size: 1.7rem; min-width: 5.2em; padding: 6px 10px 4px; } .lcdwrap { gap: 10px; } }

/* inspection stamp */
.stamp {
  display: inline-block; transform: rotate(-8deg); border: 3px solid var(--red); color: var(--red);
  border-radius: 8px; padding: 6px 14px 5px; font: 700 1.2rem/1.1 var(--display); letter-spacing: -.005em;
  text-shadow: none; opacity: .86; background: transparent;
}
:root:not([data-theme="dark"]) .stamp { mix-blend-mode: multiply; }
.stamp.is-grey { border-color: var(--text-3); color: var(--text-3); }
@media (prefers-reduced-motion: no-preference) {
  .stamp.thump { animation: thump .32s cubic-bezier(.2,.9,.3,1.3) both; }
  @keyframes thump { 0% { transform: rotate(-8deg) scale(1.7); opacity: 0; } 100% { transform: rotate(-8deg) scale(1); opacity: .86; } }
}

/* ------------------------------------------------------------------ shell */
.app { max-width: var(--maxw); padding: 38px 24px 100px; }
.app > :not(.home) { padding-top: 0; }
.site-banner { background: var(--deep); color: var(--deep-text); border: 0; font-weight: 500; }
.site-banner a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.topbar {
  position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--edge); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
  background: var(--brushed);
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 8px; pointer-events: none;
  max-width: calc(var(--maxw) - 48px); margin: 0 auto;
  background: radial-gradient(circle at 4px 4px, rgba(255,255,255,.95) 0 1.4px, #8e969b 2.1px, rgba(0,0,0,0) 2.9px) 0 0 / 28px 8px repeat-x;
  opacity: .9;
}
:root[data-theme="dark"] .topbar { box-shadow: none; border-bottom-color: #0c0f10; }
:root[data-theme="dark"] .topbar::after { background: radial-gradient(circle at 4px 4px, #9aa2a6 0 1.3px, #3a4146 2.1px, rgba(0,0,0,0) 2.9px) 0 0 / 28px 8px repeat-x; }
.topbar-inner { max-width: var(--maxw); padding: 14px 24px 22px; gap: 30px; color: var(--text); text-shadow: var(--engrave); }
.brand { gap: 10px; color: var(--text); }
.brand-mark svg { width: 34px; height: 34px; border-radius: 0; background: none; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.brand-text { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1; letter-spacing: -.025em; text-transform: none; }
.brand-text b { color: var(--text); font-weight: 700; }
.brand-text span { color: var(--text-3); font-weight: 400; }
.nav { gap: 4px; margin-left: 0; }
.nav a {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px;
  font-family: var(--font); font-weight: 500; font-size: .98rem; letter-spacing: 0; text-transform: none; color: var(--text-2); background: transparent; box-shadow: none;
}
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: transparent; }
.nav a:hover { background: rgba(0,0,0,.045); color: var(--text); }
:root[data-theme="dark"] .nav a:hover { background: rgba(255,255,255,.05); }
.nav a.active { background: transparent; color: var(--text); font-weight: 700; box-shadow: none; }
.nav a.active::after { background: var(--primary); }
.nav .nav-svg { display: none; }
.search-trigger { background: var(--surface); border: 1px solid var(--edge); border-radius: 10px; color: var(--text-3); padding: 8px 12px; font-family: var(--font); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: .94rem; text-shadow: none; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.search-trigger:hover { border-color: var(--line-strong); color: var(--text); }
.search-trigger kbd { background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; color: var(--text-3); font-family: var(--font); font-size: .75rem; }
.search-trigger .ico, .theme-toggle .ico { width: 18px; height: 18px; }
.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface); border: 1px solid var(--edge); color: var(--text-2); box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.theme-toggle:hover { color: var(--text); border-color: var(--line-strong); }

/* phones: the top bar keeps the brand and tools; the main sections move to a bottom tab bar */
@media (max-width: 760px) {
  .topbar-inner { flex-wrap: nowrap; padding: 10px 14px 18px; gap: 10px; }
  .topbar::after { bottom: 4px; }
  .brand-text { font-size: 1.4rem; }
  .brand-mark svg { width: 30px; height: 30px; }
  .topbar-tools { margin-left: auto; gap: 8px; }
  .search-trigger { padding: 8px 10px; }
  .search-trigger-text, .search-trigger kbd { display: none; }
  .theme-toggle { width: 38px; height: 38px; }
  .nav {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; order: initial; width: auto; margin: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--brushed); border-top: 1px solid var(--edge); box-shadow: 0 -8px 20px -14px rgba(0,0,0,.35);
  }
  .nav a { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 2px 6px; border-radius: 10px; font-size: .74rem; font-weight: 600; min-width: 0; white-space: nowrap; }
  .nav a::after { left: 30%; right: 30%; bottom: auto; top: -6px; height: 3px; }
  .nav a[data-route="wiring"] { display: none; }
  .nav .nav-svg { display: block; width: 22px; height: 22px; }
  .app { padding: 24px 16px calc(104px + env(safe-area-inset-bottom)); }
  .foot { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* footer: graphite, with the rivet line carried across the top */
.foot { position: relative; margin-top: 88px; background: var(--anodized); color: var(--deep-text-2); border: 0; }
.foot::before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 10px; height: 8px; max-width: calc(var(--maxw) - 48px); margin: 0 auto;
  background: radial-gradient(circle at 4px 4px, #9aa2a6 0 1.3px, #3a4146 2.1px, rgba(0,0,0,0) 2.9px) 0 0 / 28px 8px repeat-x; }
.foot-inner { max-width: var(--maxw); padding: 60px 24px 38px; color: var(--deep-text-2); }
.foot-cols { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px 28px; }
.foot-brand { font-family: var(--display); font-size: 1.75rem; font-weight: 700; letter-spacing: -.025em; text-transform: none; color: #f2f4f5; margin: 0 0 8px; line-height: 1.1; }
.foot-brand b { color: #f2f4f5; }
.foot-brand span { color: #8f989d; font-weight: 400; }
.foot-credit { color: #f2f4f5; font-style: normal; font-family: var(--font); font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; margin-top: 10px; }
.foot-col h4 { font-family: var(--font); font-size: .92rem; font-weight: 700; color: #f2f4f5; margin: 4px 0 12px; }
.foot-col a { display: block; padding: 4px 0; color: var(--deep-text-2); font-family: var(--font); font-size: .96rem; letter-spacing: 0; text-transform: none; }
.foot-col a:hover { color: #ffffff; }
.foot-links { display: contents; }
.foot-legal { margin: 38px 0 0; max-width: 92ch; font-size: .85rem; color: #8f989d; }
.foot-legal a { color: var(--deep-text-2); text-decoration: underline; text-underline-offset: 2px; }
.foot-copy { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--deep-line); color: #8f989d; font-family: var(--font); font-size: .85rem; letter-spacing: 0; }
.foot a:focus-visible { outline-color: #f2f4f5; }
@media (max-width: 900px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-cols > :first-child { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ buttons, chips */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px; border: 1.5px solid transparent;
  font-family: var(--font); font-weight: 700; font-size: 1rem; letter-spacing: 0; text-transform: none; line-height: 1.2; text-shadow: none;
  box-shadow: none; transform: none; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, #c5322a, #a3211a); color: #fff; border-color: #8f1d17; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(0,0,0,.18); }
.btn-primary:hover { background: linear-gradient(180deg, #d0392f, #ac241c); border-color: #8f1d17; transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 6px -2px rgba(140,25,20,.5); }
.btn-primary:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.25); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--text); }
.btn-ghost:hover { background: rgba(0,0,0,.05); color: var(--text); border-color: var(--text); }
:root[data-theme="dark"] .btn-ghost { border-color: var(--text-2); }
:root[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.06); border-color: var(--text); }
/* a metal button for dark plates */
.btn-gold, .btn-metal { background: linear-gradient(180deg, #f6f7f7, #d4d8da); color: #1f2427; border-color: #8e969b; box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.3); text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.btn-gold:hover, .btn-metal:hover { background: linear-gradient(180deg, #ffffff, #dde1e2); border-color: #6d757a; }
.btn-on-dark { background: transparent; color: #f2f4f5; border-color: rgba(242,244,245,.5); }
.btn-on-dark:hover { border-color: #f2f4f5; background: rgba(255,255,255,.06); }
.btn-sm { padding: 8px 14px; font-size: .92rem; border-radius: 8px; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn .ico { width: 18px; height: 18px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.chip, .tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 2px 9px; border-radius: 6px; background: var(--surface-3); border: 1px solid var(--line); color: var(--text-2); }
.tag { background: var(--surface); border-color: var(--line-strong); color: var(--text-2); }
.chip.lib, .chip.code, .chip.tree { background: var(--surface-3); border-color: var(--line); color: var(--text-2); }
.chip-btn { border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: .92rem; padding: 7px 13px; }
.chip-btn:hover { border-color: var(--text); color: var(--text); }
.chip-btn.active, .chip-btn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.code-chip { border-radius: 8px !important; }

/* ------------------------------------------------------------------ page furniture */
.crumbs { font-family: var(--font); font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--text-3); margin-bottom: 18px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.crumbs .sep { margin: 0 8px; color: var(--line-strong); }
.crumbs .here { color: var(--text-2); font-weight: 600; }
.page-head { margin-bottom: 8px; }
.page-head h1 { font-size: clamp(2.2rem, 4.6vw, 3.3rem); line-height: 1.02; margin: 2px 0 14px; }
.page-head p { color: var(--text-2); font-size: 1.14rem; max-width: 62ch; }
.page-head::after { display: none; }
.head-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.empty { text-align: center; padding: 72px 16px; color: var(--text-2); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; transition: border-color .15s; }
.card:hover { border-color: var(--line-strong); box-shadow: none; transform: none; background: var(--surface); }
.card h3 { font-family: var(--font); font-size: 1.05rem; text-transform: none; line-height: 1.3; }
.card-kicker { font-family: var(--font); font-size: .82rem; letter-spacing: 0; text-transform: none; color: var(--text-3); font-weight: 600; }
.system-title { font-family: var(--display); font-size: 1.4rem; letter-spacing: -.015em; text-transform: none; color: var(--text); border-bottom: 1px solid var(--line); font-weight: 700; }
.system-title .dot { border-radius: 50%; }
.count-line, .hint { color: var(--text-3); }
.side-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.flag-link { color: var(--text-3); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; }
.flag-link:hover { color: var(--text); }
.flag-box { margin-top: 18px; }
.flag-ta { width: 100%; }
.flag-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.kicker { font-family: var(--font); font-size: .92rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-3); }

/* section header used across pages */
.sec { margin-top: 80px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.sec-head h2 { margin: 0 0 8px; }
.sec-head p { margin: 0; color: var(--text-2); max-width: 60ch; }
.sec-link { color: var(--link); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.sec-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sec-link .ico { width: 18px; height: 18px; }

/* the older meter readout component (labs, wizard) */
.readout { display: flex; align-items: stretch; gap: 0; background: var(--bezel); color: var(--lcd-label); border-radius: 12px; padding: 10px; box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
.readout-lcd { flex: none; display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; min-width: 128px; padding: 8px 14px 6px; border-radius: 8px; background: var(--lcd); color: var(--lcd-ink); box-shadow: inset 0 2px 0 rgba(0,0,0,.14); font-family: var(--display); font-variant-numeric: tabular-nums; }
.readout-lcd b { font-size: 1.95rem; line-height: 1; font-weight: 700; }
.readout-lcd small { font-size: 1rem; font-weight: 700; }
.readout-body { flex: 1; min-width: 0; display: grid; align-content: center; gap: 2px; padding: 4px 6px 4px 14px; }
.readout-label { font-size: .84rem; font-weight: 600; color: var(--lcd-label); }
.readout-text { font-size: .95rem; line-height: 1.45; color: #e3e8ea; }

/* ------------------------------------------------------------------ home */
.home { max-width: var(--maxw); margin: 0 auto; }
.hm-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: end; padding: 40px 0 0; }
.hm-hero h1 { font-size: clamp(2.7rem, 6.4vw, 4.7rem); line-height: .97; letter-spacing: -.038em; margin: 0; }
.hm-hero h1 .hl { display: block; }
.hm-sub { font-size: clamp(1.05rem, 1.5vw, 1.18rem); color: var(--text-2); max-width: 44ch; margin: 0 0 22px; }
.hm-side { padding-bottom: 6px; }
.hm-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hm-actions .btn { padding: 14px 26px; font-size: 1.05rem; }
.hm-trust { margin: 16px 0 0; color: var(--text-3); font-size: .95rem; max-width: 46ch; }

/* the work order plate (live sample case) */
.wo { padding: 30px 30px 26px; }
.wo-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 6px 16px; }
.wo-title { font: 700 1.4rem/1.1 var(--display); letter-spacing: -.015em; margin: 0; }
.wo-no { color: var(--text-3); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.wo-unit { display: grid; grid-template-columns: 7.4em minmax(0, 1fr); gap: 7px 14px; margin: 0 6px 20px; font-size: 1rem; }
.wo-unit dt { color: var(--text-3); }
.wo-unit dd { margin: 0; font-weight: 700; }
.wo-unit dd.say { font-weight: 600; }
.wo-unit dd.say q { font-style: normal; }
.wo-meter { margin: 0 0 14px; }
.wo-tests { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 4px; }
.wo-test {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 10px 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); font: 600 .93rem/1.3 var(--font); text-shadow: none; box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.wo-test small { color: var(--text-3); font-weight: 500; font-size: .82rem; }
.wo-test:hover:not(:disabled) { border-color: var(--text); }
.wo-test[aria-pressed="true"] { background: var(--surface-3); border-color: var(--line); color: var(--text-2); }
.wo-test[aria-pressed="true"] small::after { content: ", done"; }
.wo-call { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.12); }
:root[data-theme="dark"] .wo-call { border-top-color: rgba(255,255,255,.08); }
.wo-call > b { display: block; font: 700 1.1rem var(--display); margin: 0 0 8px; }
.wo-call .choices-list { gap: 8px; }
.wo-call .choice-btn { padding: 10px 14px; font-size: .96rem; }
.wo-out { margin: 10px 0 0; font-size: .96rem; color: var(--text-2); text-shadow: none; }
.wo-stamp { position: absolute; right: 26px; top: 20px; pointer-events: none; }
.wo-more { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 520px) { .wo { padding: 24px 18px 20px; } .wo-tests { grid-template-columns: 1fr; } .wo-unit { grid-template-columns: 6.2em minmax(0, 1fr); font-size: .96rem; } .wo-stamp { right: 14px; top: 12px; } .wo-stamp .stamp { font-size: 1rem; } }

/* bench: describe the symptom, get ranked checks */
.hm-bench { margin-top: 40px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hm-bench label { font-weight: 700; font-size: 1.05rem; }
.hm-bench-row { display: flex; gap: 10px; }
.hm-bench-row input { flex: 1; min-width: 0; min-height: 52px; font-size: 1.05rem; padding: 10px 16px; }
.hm-bench-row .btn { min-height: 52px; }
.hm-quick { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .95rem; }
.hm-quick a, .hm-quick button { background: none; border: 0; padding: 4px 0; color: var(--text-2); font: 600 .95rem var(--font); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; cursor: pointer; }
.hm-quick a:hover, .hm-quick button:hover { color: var(--text); text-decoration-color: var(--text); }
@media (max-width: 520px) { .hm-bench-row { flex-direction: column; } .hm-bench { padding: 18px 16px; } }

/* who it's for: a routing slip, one row per reader */
.hm-route { margin: 0; border-top: 2px solid var(--text); }
.hm-route-row { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) auto; gap: 8px 32px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.hm-route dt { font: 700 1.55rem/1.1 var(--display); letter-spacing: -.02em; }
.hm-route dd { margin: 0; color: var(--text-2); max-width: 58ch; }
.hm-route-row .sec-link { white-space: nowrap; }
@media (max-width: 760px) { .hm-route-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; } .hm-route dt { font-size: 1.35rem; } }

/* every system on the coach: aluminum tags with a rivet hole */
.hm-tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
.syst {
  position: relative; display: block; padding: 15px 18px 14px 44px; border-radius: 10px; border: 1px solid var(--edge);
  background: var(--hole) left 12px center / 14px 14px no-repeat, var(--brushed);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.08);
  text-decoration: none; color: var(--text); text-shadow: var(--engrave); transition: transform .15s, box-shadow .15s;
}
:root[data-theme="dark"] .syst { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.4); }
.syst:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.1), 0 10px 20px -12px rgba(0,0,0,.35); }
.syst b { display: block; font: 700 1.08rem/1.25 var(--font); }
.syst small { display: block; margin-top: 2px; color: var(--text-3); font-size: .88rem; font-weight: 500; }
.syst .ico { position: absolute; right: 14px; top: 14px; width: 20px; height: 20px; color: var(--text-3); }
.hm-also { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 20px; color: var(--text-3); font-size: .97rem; }
.hm-also a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.hm-also a:hover { text-decoration-color: var(--text); }

/* shops: a graphite plate with a sample readiness board */
.hm-shops { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 88px; padding: clamp(30px, 4.5vw, 56px); }
.hm-shops h2 { color: #f4f6f7; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.03; margin: 0 0 16px; max-width: 17ch; }
.hm-shops p { margin: 0 0 24px; max-width: 52ch; color: var(--deep-text-2); }
.hm-shops .hm-actions { gap: 10px; }
.board { background: #12161a; border: 1px solid #0b0d0f; border-radius: 12px; padding: 14px 14px 10px; box-shadow: inset 0 2px 8px rgba(0,0,0,.5); }
.board-head { display: flex; justify-content: space-between; gap: 10px; margin: 0 2px 10px; color: var(--deep-text-2); font-size: .86rem; }
.board-head b { color: #f2f4f5; font-weight: 600; }
.board-grid { --cols: 5; display: grid; grid-template-columns: minmax(84px, 1.4fr) repeat(var(--cols), minmax(30px, 1fr)) minmax(56px, auto); gap: 4px; align-items: center; }
.board-grid .bh { color: #8f989d; font-size: .74rem; font-weight: 600; text-align: center; }
.board-grid .bn { color: #e6e9ea; font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-grid .bc { display: grid; place-items: center; height: 30px; border-radius: 6px; font: 700 .84rem var(--font); color: #10110f; font-variant-numeric: tabular-nums; }
.board-grid .bp { color: #c6d4bd; text-align: right; font: 700 .9rem var(--display); font-variant-numeric: tabular-nums; padding-right: 4px; }
.bc.g { background: #8fc39d; } .bc.m { background: #e7c77a; } .bc.l { background: #e39b91; } .bc.n { background: #2b3236; color: #7d868b; }
.board-foot { margin: 10px 2px 2px; color: #7d868b; font-size: .8rem; }
@media (max-width: 960px) { .hm-hero, .hm-shops { grid-template-columns: minmax(0, 1fr); } .hm-hero { padding-top: 16px; gap: 20px; } .hm-side { padding-bottom: 0; } }
@media (max-width: 560px) {
  .hm-hero h1 { font-size: clamp(2.5rem, 12.5vw, 3.1rem); }
  .hm-tags { grid-template-columns: 1fr 1fr; gap: 10px; }
  .syst { padding: 12px 12px 12px 36px; background-position: left 9px top 15px, 0 0; }
  .syst b { font-size: .98rem; } .syst small { font-size: .82rem; } .syst .ico { display: none; }
  .sec { margin-top: 60px; }
  .hm-shops { margin-top: 64px; padding: 28px 18px; border-radius: 16px; }
  .board-grid { grid-template-columns: minmax(66px, 1.2fr) repeat(var(--cols), minmax(26px, 1fr)) minmax(40px, auto); }
}

/* slide lab teaser (kept small) */
.hm-lab { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 28px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.hm-lab b { display: block; font: 700 1.3rem var(--display); letter-spacing: -.01em; color: var(--text); }
.hm-lab p { margin: 4px 0 0; color: var(--text-2); max-width: 64ch; }
.hm-note { margin-top: 48px; color: var(--text-2); }
.hm-note a { color: var(--link); font-weight: 700; }
.hm-fine { margin: 18px 0 0; color: var(--text-3); font-size: .88rem; max-width: 90ch; }

/* review card (home + learn) */
.review-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0 8px; padding: 14px 16px 14px 20px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-left: 5px solid var(--primary); border-radius: var(--radius); box-shadow: none; }
.review-card .rc-text { display: grid; gap: 2px; min-width: 0; }
.review-card b { font: 700 1.25rem var(--display); letter-spacing: -.012em; text-transform: none; color: var(--text); }
.review-card .rc-line { color: var(--text-2); font-size: .98rem; }
.review-card .btn { flex: none; }
.review-card.compact { margin: 0 0 22px; }
@media (max-width: 520px) { .review-card { flex-direction: column; align-items: stretch; } }

/* ------------------------------------------------------------------ learn + lessons (older markup kept styled) */
.course-shell { max-width: 880px; margin: 0 auto; }
.progress-line { max-width: 460px; font-family: var(--font); font-size: .94rem; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.course-rail, .track-rail, .sh-bar, .wiz-rail { height: 8px; background: var(--surface-3); border: 0; border-radius: 4px; overflow: hidden; position: relative; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
.course-rail::after { display: none; }
.course-rail i, .track-rail i, .wiz-rail i, .wiz-rail > i { display: block; height: 100%; background: var(--text); border-radius: 4px; box-shadow: none; }
.module { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; overflow: hidden; }
.module-title { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--line-soft); padding: 16px 18px; }
.module-title h2 { color: var(--text); font-size: 1.3rem; letter-spacing: -.012em; }
.module-num { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-3); color: var(--text); font-family: var(--display); font-size: 1rem; }
.module-count { color: var(--text-3); font-family: var(--font); font-size: .9rem; }
.lesson-row { padding: 13px 18px; border-bottom: 1px solid var(--line-soft); gap: 14px; transition: background .12s; }
.lesson-row:hover { background: var(--surface-2); padding-left: 18px; }
.lesson-mark { width: 28px; font-family: var(--font); font-size: .88rem; color: var(--text-3); }
.lesson-row.is-done .lesson-mark { color: var(--green); }
.lesson-name { font-weight: 600; font-size: 1rem; }
.lesson-go { color: var(--text-3); font-family: var(--font); }

.lesson h1 { font-size: clamp(2.2rem, 4.8vw, 3.2rem); line-height: 1.02; margin: 6px 0 18px; }
.lesson-count { font-family: var(--font); font-size: .94rem; letter-spacing: 0; text-transform: none; color: var(--text-3); font-weight: 600; }
.lesson-lede { font-size: clamp(1.16rem, 2vw, 1.32rem); line-height: 1.55; max-width: 46ch; color: var(--text); }
.lesson-points { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; max-width: 68ch; }
.lesson-points li { position: relative; padding: 0 0 0 26px; margin: 0; line-height: 1.6; }
.lesson-points li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--text); transform: rotate(45deg); }
.numbers-box { position: relative; margin: 32px 0; padding: 26px 28px 14px; max-width: 640px; }
.numbers-box > b { position: static; display: block; background: none; color: var(--text); font: 700 1.2rem var(--display); letter-spacing: -.01em; text-transform: none; padding: 0; margin: 0 0 6px 4px; }
.numbers-box dl { margin: 0 4px; }
.numbers-box dt, .cheat dt { padding: 11px 0; border-bottom: 1px solid var(--line-soft); color: var(--text-2); font-weight: 500; }
.numbers-box dt { border-bottom-color: rgba(0,0,0,.1); color: var(--text-3); }
.numbers-box dd, .cheat dd { padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-family: var(--font); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.numbers-box dd { border-bottom-color: rgba(0,0,0,.1); }
:root[data-theme="dark"] .numbers-box dt, :root[data-theme="dark"] .numbers-box dd { border-bottom-color: rgba(255,255,255,.07); }
.numbers-box dt:last-of-type, .numbers-box dd:last-of-type, .cheat dt:last-of-type, .cheat dd:last-of-type { border-bottom: 0; }
@media (max-width: 520px) { .numbers-box { padding: 22px 18px 10px; } .numbers-box dt, .cheat dt { border-bottom: 0; padding: 12px 0 0; } .numbers-box dd, .cheat dd { padding: 2px 0 10px; } }
.shop-tip { margin: 28px 0; padding: 16px 18px; max-width: 68ch; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-left: 5px solid var(--text); border-radius: var(--radius); }
.shop-tip b { font-family: var(--font); font-size: .98rem; letter-spacing: 0; text-transform: none; color: var(--text); }
.quick-check { margin-top: 44px; padding: 26px 26px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.quick-check .kicker { position: static; display: inline-block; background: none; color: var(--text-3); font: 600 .95rem var(--font); letter-spacing: 0; text-transform: none; padding: 0; border: 0; }
.quick-check h2 { font-family: var(--font); font-weight: 700; font-size: 1.32rem; line-height: 1.32; letter-spacing: 0; margin: 8px 0 16px; }
.choices-list { display: grid; gap: 10px; }
.choice-btn { text-align: left; padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 1.02rem; font-weight: 500; line-height: 1.4; transition: border-color .12s, background .12s; box-shadow: 0 1px 0 rgba(0,0,0,.05); transform: none; text-shadow: none; }
.choice-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text); transform: none; box-shadow: none; }
.choice-btn.right { background: var(--green-tint); border-color: var(--green); box-shadow: inset 4px 0 0 var(--green); }
.choice-btn.wrong { background: var(--red-tint); border-color: var(--red); box-shadow: inset 4px 0 0 var(--red); }
.choice-btn:disabled { cursor: default; }
.check-fb { margin: 14px 0 0; }
.check-fb.right { color: var(--green); font-weight: 600; }
.check-fb.wrong { color: var(--red); font-weight: 600; }
.lesson-next { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lesson-next .review-note { flex-basis: 100%; }
.review-note { margin: 12px 0 0; font-size: .96rem; color: var(--text-2); }
.review-note a { color: var(--link); font-weight: 600; }
.lesson-review { margin: 20px 0 0; font-size: .92rem; color: var(--text-3); font-family: var(--font); }
@media (hover: none) { .choice-btn:hover:not(:disabled) { background: var(--surface); border-color: var(--line-strong); } }

/* practice labs inside lessons */
.lab { margin: 28px 0; padding: 20px; max-width: 680px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.lab-title { font: 700 1.2rem var(--display); letter-spacing: -.01em; text-transform: none; }
.lab-row { display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: 12px; align-items: center; margin: 10px 0; }
.lab-readout { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.lab-readout p { margin: 0; color: var(--text-2); }
.meter-face { display: inline-grid; gap: 2px; min-width: 9em; background: var(--lcd); color: var(--lcd-ink); border: 8px solid var(--bezel); border-radius: 12px; box-shadow: inset 0 2px 0 rgba(0,0,0,.14); padding: 6px 14px; }
.meter-face small { color: var(--lcd-ink); opacity: .7; font-family: var(--font); letter-spacing: 0; font-size: .74rem; font-weight: 600; }
.meter-face strong { font: 700 1.8rem/1 var(--display); text-shadow: none; font-variant-numeric: tabular-nums; }
.probe-row { display: flex; flex-wrap: wrap; gap: 8px; }
.probe-pt { border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); padding: 8px 12px; font-weight: 600; }
.probe-pt.red { border-color: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
.probe-pt.black { border-color: var(--text); box-shadow: inset 0 0 0 2px var(--text); }
.ah-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 8px; }
.ah-list { display: grid; gap: 6px; }

/* ------------------------------------------------------------------ cases (shared bits) */
.star-total { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-size: .96rem; letter-spacing: 0; text-transform: none; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; }
.case-stars, .result-stars { color: var(--star); letter-spacing: 2px; }
.complaint { margin: 18px 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 1.12rem; line-height: 1.45; }
.note-preview { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }

/* ------------------------------------------------------------------ case list */
.cx-list-page { max-width: 1000px; margin: 0 auto; }
.cx-summary { color: var(--text-2); font-weight: 600; margin: 4px 0 20px; }
.cx-summary .case-stars { letter-spacing: 0; }
.cx-filters { display: grid; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cx-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-filter-row { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.cx-filter-row select { padding: 8px 12px; }
.cx-check { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--text-2); cursor: pointer; }
.cx-check input { width: 18px; height: 18px; }
.cx-group { margin-top: 40px; }
.cx-group-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 1.6rem; margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--text); }
.cx-group-h small { font: 600 .92rem var(--font); color: var(--text-3); letter-spacing: 0; }
.cx-rows { list-style: none; margin: 0; padding: 0; }
.cx-row { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; padding: 16px 8px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); }
.cx-row:hover { background: var(--surface); }
.cx-no { color: var(--text-3); font: 600 .9rem var(--font); font-variant-numeric: tabular-nums; }
.cx-main b { display: block; font-size: 1.12rem; line-height: 1.3; }
.cx-say { display: block; color: var(--text-2); font-size: .98rem; margin-top: 3px; max-width: 64ch; }
.cx-side { display: grid; justify-items: end; gap: 4px; text-align: right; }
.cx-lv { font-size: .88rem; font-weight: 600; color: var(--text-3); }
.cx-stars { color: var(--star); letter-spacing: 2px; font-size: 1.05rem; white-space: nowrap; }
.cx-stars.none { color: var(--text-3); letter-spacing: 0; font-size: .88rem; font-weight: 600; }
.cx-howto { margin-top: 44px; color: var(--text-3); font-size: .95rem; max-width: 72ch; }
@media (max-width: 640px) { .cx-row { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 4px; } .cx-no { grid-column: 1 / -1; } .cx-group-h { font-size: 1.35rem; } }

/* ------------------------------------------------------------------ case page: work order, tests, call, fix, prove */
/* Two columns on a desk: the job on the left, the bench (a graphite instrument panel) on the right.
   On a phone the bench shrinks to a strip pinned under the header so the last reading stays in view. */
.cx-page { max-width: 1180px; margin: 0 auto; }
.cx-head { margin-bottom: 22px; }
.cx-head h1 { margin: 6px 0 0; font-size: clamp(2.1rem, 4.4vw, 3.1rem); max-width: 22ch; }
.cx-meta { display: flex; align-items: center; gap: 8px; margin: 0; }
.cx-no-h { color: var(--text-3); font-weight: 600; font-size: .92rem; margin-left: 4px; }
.cx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
.cx-col { min-width: 0; }
.cx-wo { padding: 26px 30px 14px; }

/* the bench */
.cx-bench { position: sticky; top: 92px; padding: 18px 20px 20px; display: grid; gap: 14px; text-shadow: none; }
.bench-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 2px 6px 0; }
.bench-head > b { font: 700 1.05rem var(--display); color: #fff; letter-spacing: -.01em; padding-top: 2px; }
.bench-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; justify-items: end; }
.bench-steps li { display: flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--deep-text-2); }
.bench-steps li i { width: 9px; height: 9px; border-radius: 50%; background: #3b4348; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.bench-steps li.on { color: #fff; }
.bench-steps li.on i { background: #e05a4f; box-shadow: 0 0 0 2px rgba(224,90,79,.25), 0 0 10px rgba(224,90,79,.8); }
.bench-steps li.done { color: var(--deep-text); }
.bench-steps li.done i { background: #8fcf9d; box-shadow: 0 0 6px rgba(143,207,157,.6); }
.bench-lcd, .bench-clock { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 12px; background: var(--bezel); box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
.bench-lcd { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
.bench-lcd .lcd { font-size: 2.5rem; min-width: 0; width: 100%; justify-content: flex-end; padding: 12px 16px 8px; }
.bench-lcd .lcd.blank { color: rgba(23,34,22,.3); }
.bench-lbl { min-width: 0; color: var(--lcd-label); font-size: .9rem; line-height: 1.4; padding: 0 2px; }
.bench-lbl b { display: block; color: #e8ecee; font-weight: 600; }
.bench-clock .lcd { font-size: 1.45rem; min-width: 5.2em; }
.bench-log { list-style: none; margin: 2px 4px 0; padding: 0; display: grid; gap: 0; max-height: 34vh; overflow: auto; }
.bench-log li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-top: 1px solid rgba(255,255,255,.08); font-size: .9rem; color: var(--deep-text-2); }
.bench-log li span { min-width: 0; }
.bench-log li b { flex: none; color: #e8ecee; font-variant-numeric: tabular-nums; }
.bench-log li.unsafe b { color: #f08c82; }
.bench-log li.key b { color: #8fcf9d; }
.bench-verdict { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 6px 0; }
.bench-verdict .stamp { font-size: 1.1rem; padding: 5px 12px 4px; border-color: #f08c82; color: #f08c82; opacity: 1; }
.bench-verdict .stamp.is-grey { border-color: var(--deep-text-2); color: var(--deep-text-2); }
.bench-verdict .cx-stars-big { font-size: 1.8rem; color: #f08c82; }
@media (prefers-reduced-motion: no-preference) {
  .bench-lcd.flash .lcd { animation: lcdflash .45s ease-out; }
  @keyframes lcdflash { 0% { filter: brightness(1.45); } 100% { filter: brightness(1); } }
}

/* steps in the main column */
.cx-step { margin-top: 40px; max-width: 760px; }
.cx-step-h { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.cx-step-h h2 { margin: 0; font-size: 1.55rem; }
.cx-step-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--text); color: var(--bg); font: 700 .92rem var(--font); }
.cx-hint { color: var(--text-2); margin: 0 0 6px; max-width: 60ch; }
.cx-group-t { margin: 20px 0 0; }
.cx-group-t h3 { font-size: .94rem; color: var(--text-3); font-weight: 600; margin: 0 0 8px; }
.cx-t { margin: 0 0 8px; }
.cx-test { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 14px 10px 10px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 1rem; font-weight: 500; line-height: 1.35; box-shadow: 0 1px 0 rgba(0,0,0,.05); transition: border-color .12s, background .12s; }
.cx-test-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--surface-3); color: var(--text-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.08); }
:root[data-theme="dark"] .cx-test-ico { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.cx-test-lbl { flex: 1; min-width: 0; }
.cx-test small { flex: none; color: var(--text-3); font-weight: 600; white-space: nowrap; font-size: .84rem; font-variant-numeric: tabular-nums; }
.cx-test:hover:not(:disabled) { border-color: var(--text); background: var(--surface-2); }
.cx-test:hover:not(:disabled) .cx-test-ico { color: var(--text); }
.cx-test:disabled { cursor: default; }
.cx-test.ran { background: var(--surface-2); border-color: var(--line); color: var(--text-2); box-shadow: none; }
.cx-test.ran .cx-test-ico { background: var(--green); color: #fff; box-shadow: none; }
.cx-test.ran small::before { content: "Done, "; }
.cx-res { margin: 6px 0 14px 48px; }
.cx-reading p { margin: 0; font-size: .97rem; line-height: 1.5; color: var(--text-2); }
.cx-read-v { color: var(--text); font-variant-numeric: tabular-nums; }
.cx-unsafe { margin: 10px 0 0 !important; padding: 10px 12px; border-radius: 8px; background: var(--red-tint); color: var(--red) !important; border: 1px solid var(--red); font-weight: 600; }
.cx-call, .cx-fix, .cx-prove { padding-top: 26px; border-top: 2px solid var(--text); transition: opacity .25s; }
.cx-call.is-waiting { opacity: .55; }
.cx-call.is-waiting:hover, .cx-call.is-waiting:focus-within { opacity: 1; }
.cx-call .choices-list, .cx-fix .choices-list { margin-top: 14px; }
@media (max-width: 899px) {
  .cx-grid { grid-template-columns: 1fr; gap: 0; }
  .cx-bench { order: -1; position: sticky; top: 60px; z-index: 20; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 10px 12px; border-radius: 14px; margin: 0 0 18px; }
  .bench-head, .bench-log, .bench-verdict { display: none; }
  .bench-lcd { flex-direction: row; align-items: center; padding: 6px; gap: 10px; }
  .bench-lcd .lcd { font-size: 1.5rem; width: auto; min-width: 5.6em; padding: 6px 10px 4px; }
  .bench-lbl { font-size: 0; line-height: 1.3; }
  .bench-lbl b { font-size: .82rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bench-clock { padding: 6px; }
  .bench-clock .lcd { font-size: 1.1rem; min-width: 4.4em; padding: 5px 8px 3px; }
  .bench-clock .bench-lbl { display: none; }
  .cx-res { margin-left: 0; }
}
@media (max-width: 760px) { .cx-bench { top: 56px; } }
.cx-call, .cx-fix, .cx-prove { padding-top: 26px; border-top: 2px solid var(--text); }
.cx-call .choices-list, .cx-fix .choices-list { margin-top: 14px; }
.cx-prove .btn { margin-top: 12px; }
.cx-prove-out { margin-top: 16px; }
.cx-prove-out .cx-reading { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.cx-debrief { margin-top: 48px; max-width: 880px; }
.cx-score { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; padding: 32px 36px; }
.cx-stars-big { margin: 0; font: 700 2.6rem/1 var(--display); color: var(--star); letter-spacing: 4px; text-shadow: none; }
.cx-verdict { margin: 0; font-weight: 600; font-size: 1.1rem; color: var(--text); grid-column: 1; }
.cx-stamp { grid-column: 2; grid-row: 1 / span 2; padding-right: 8px; }
.cx-stamp .stamp { font-size: 1.6rem; padding: 8px 18px 7px; }
.cx-card { display: grid; grid-template-columns: 7em minmax(0, 1fr); margin: 24px 0; border-top: 1px solid var(--line); }
.cx-card dt, .cx-card dd { padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0; }
.cx-card dt { color: var(--text-3); font-weight: 600; }
.cx-card dd.bad { color: var(--red); font-weight: 600; }
.cx-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 28px 0; }
.cx-paths h3 { margin: 0 0 10px; }
.cx-paths ol { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; }
.cx-paths p { margin: 0; color: var(--text-2); }
.cx-paths li.key { font-weight: 700; }
.cx-paths li.key::marker { color: var(--green); }
.cx-paths li.swap, .cx-paths li.unsafe { color: var(--red); }
.cx-why { margin: 28px 0; }
.cx-why p { max-width: 68ch; }
.cx-note { margin: 28px 0; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.cx-note h3 { margin: 0; }
.cx-note dl { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px 14px; margin: 12px 0 4px; }
.cx-note dt { font-weight: 700; }
.cx-note dd { margin: 0; color: var(--text-2); }
@media (max-width: 640px) {
  .cx-wo { padding: 24px 18px 14px; }
  .cx-paths { grid-template-columns: 1fr; }
  .cx-score { grid-template-columns: 1fr; padding: 26px 22px; }
  .cx-stamp { grid-column: 1; grid-row: auto; }
  .cx-card, .cx-note dl { grid-template-columns: 1fr; }
  .cx-card dt { padding-bottom: 0; border-bottom: 0; }
  .cx-clock { width: 100%; }
}

/* ------------------------------------------------------------------ numbers + note builder */
.cheat { margin: 0 0 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; padding: 18px 22px 10px; }
.cheat h2 { font-size: 1.4rem; }
.note-form { display: grid; gap: 12px; margin: 18px 0; }
.note-form label { display: grid; gap: 6px; font-weight: 600; }
.note-form textarea, .note-form input { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.note-out { background: var(--bezel); color: #dfe8d8; border: 0; border-radius: var(--radius); padding: 16px 18px; white-space: pre-wrap; font: 500 .98rem/1.55 var(--font); }

/* ------------------------------------------------------------------ daily review */
.rv-lede { max-width: 640px; }
.rv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0; background: none; border: 0; box-shadow: none; }
.rv-done .rv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; }
.rv-stat { display: grid; gap: 4px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.rv-stat:last-child { border-right: 1px solid var(--line); }
.rv-stat b { font: 700 2.3rem/1 var(--display); font-variant-numeric: tabular-nums; }
.rv-stat span { font: 500 .92rem var(--font); letter-spacing: 0; text-transform: none; color: var(--text-3); }
.rv-progress { display: grid; gap: 8px; max-width: 420px; margin: 4px 0 8px; color: var(--text-3); font: 600 .94rem var(--font); letter-spacing: 0; text-transform: none; }
.rv-card { margin-top: 22px; }
.rv-caught { font-weight: 600; color: var(--green); }
.rv-weak { margin: 18px 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--primary); border-radius: var(--radius); }
.rv-weak a { color: var(--link); font-weight: 700; }
.rv-how { margin-top: 30px; color: var(--text-2); }
.rv-how summary { cursor: pointer; font-weight: 700; color: var(--text); }
.rv-how p { max-width: 640px; }
.rv-running .rv-lede { display: none; }
.rv-card h2:focus { outline: none; }
@media (max-width: 420px) { .rv-stats { gap: 8px; } .rv-stat { padding: 12px; } .rv-stat b { font-size: 1.9rem; } }

/* ------------------------------------------------------------------ shops page */
.shop-page { max-width: 1000px; margin: 0 auto; }
.shop-page h1, .reader h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); max-width: 20ch; }
.shop-lede { font-size: 1.16rem; color: var(--text-2); max-width: 64ch; }
.sh-cta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0; }
.sh-cta-item { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sh-cta-item h3 { margin: 0 0 6px; font: 700 1.3rem var(--display); letter-spacing: -.012em; }
.sh-cta-item p { color: var(--text-2); }
@media (max-width: 820px) { .sh-cta { grid-template-columns: 1fr; } }
.home-what { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; background: none; border: 0; }
.what-item { background: var(--surface); padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); }
.what-item:hover { background: var(--surface); }
.what-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.what-num { display: none; }
.what-num::before { content: none; }
.what-item h3 { font: 700 1.3rem var(--display); letter-spacing: -.012em; text-transform: none; margin: 0 0 6px; }
.what-item p { color: var(--text-2); margin: 0; }
@media (max-width: 640px) { .home-what { grid-template-columns: 1fr; } }
.home-h2 { margin: 64px 0 20px; padding: 0; border: 0; font-size: clamp(1.75rem, 3vw, 2.35rem); }
.home-h2::before { display: none; }
.shop-status-line { margin: 18px 0 0; color: var(--text-3); font-size: .96rem; }
.shop-paid { margin: 56px 0 40px; }
.shop-paid-text { max-width: 70ch; font-size: 1.08rem; color: var(--text-2); }
.shop-cost { margin: 56px 0; padding: clamp(26px, 4vw, 46px); background: var(--anodized); color: var(--deep-text); border-radius: 20px; }
.shop-cost h2 { color: #f4f6f7; }
.shop-cost-text { color: var(--deep-text-2); max-width: 64ch; }
.cost-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 8px; }
.cost-num { padding: 16px; border-radius: 12px; background: #12161a; border: 1px solid #0b0d0f; box-shadow: inset 0 2px 6px rgba(0,0,0,.4); }
.cost-num b { display: block; font: 700 1.7rem/1.1 var(--display); color: var(--lcd); }
.cost-num span { display: block; margin-top: 6px; font-size: .92rem; color: var(--deep-text-2); }
.shop-cost-fine { color: #8f989d; font-size: .86rem; }
.shop-paid .shop-cost-fine { color: var(--text-3); }
@media (max-width: 720px) { .cost-nums { grid-template-columns: 1fr; } }
.cost-calc { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--deep-line); }
.cost-calc h3 { font: 700 1.35rem var(--display); text-transform: none; letter-spacing: -.01em; color: #f4f6f7; margin: 0 0 14px; }
.cc-inputs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.cc-field label { display: block; font: 600 .84rem var(--font); letter-spacing: 0; text-transform: none; color: var(--deep-text-2); margin-bottom: 6px; }
.cc-field input { width: 100%; background: #12161a; color: #f4f6f7; border: 1px solid #3a4247; border-radius: 10px; font: 700 1.02rem var(--font); padding: 10px 12px; }
.cc-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; background: none; border: 0; }
.cc-out > div { background: #12161a; padding: 14px 16px; border-radius: 12px; border: 1px solid #0b0d0f; }
.cc-out b { display: block; font: 700 1.5rem var(--display); color: var(--lcd); }
.cc-out span { display: block; margin-top: 3px; color: var(--deep-text-2); font-size: .86rem; line-height: 1.4; }
.cc-fine { margin: 12px 0 0; color: #8f989d; font-size: .84rem; }
@media (max-width: 720px) { .cc-inputs { grid-template-columns: 1fr 1fr; } .cc-out { grid-template-columns: 1fr; } }
.shop-vets { margin: 40px 0; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.shop-vets h2 { margin-top: 0; }
.shop-dash, .skill-report { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; overflow: hidden; }
.dash-bar { background: var(--surface-2); border-bottom: 1px solid var(--line-soft); color: var(--text); }
.dash-mock { border-radius: 6px; }
.skill-report .dash-mock.live { background: var(--green); color: #fff; }
.skill-name { padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: 600 1rem var(--font); }
.shop-join { margin-top: 48px; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }

/* shop accounts + dashboard */
.sh-page { max-width: 1060px; margin: 0 auto; }
.sh-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; padding: 22px 24px; margin: 18px 0; }
.sh-card h2 { font-size: 1.5rem; }
.sh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sh-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.sh-stat b { font: 700 2rem/1.05 var(--display); color: var(--text); }
.sh-stat span { color: var(--text-3); font-size: .92rem; }
@media (max-width: 640px) { .sh-stats { grid-template-columns: 1fr 1fr; } }
.sh-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sh-tr { border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.sh-tr:hover { background: var(--surface-2); }
.sh-th { background: var(--surface-2); color: var(--text-3); font-weight: 600; font-size: .86rem; letter-spacing: 0; text-transform: none; }
.sh-bar i { background: var(--text) !important; border-radius: 4px; }
.sh-detail { background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.sh-mp { border-radius: 8px; }
.sh-mp.assigned { border-color: var(--primary); }
.sh-fine { color: var(--text-3); }
.sh-bad { color: var(--red); }
.sh-tag { display: inline-block; font: 700 .76rem var(--font); letter-spacing: 0; text-transform: none; padding: 2px 8px; border: 0; border-radius: 6px; background: var(--surface-3); color: var(--text-2); margin-left: 6px; vertical-align: 1px; }
.sh-tag.v-good { background: var(--green-tint); color: var(--green); }
.sh-tag.v-mid { background: var(--amber-tint); color: var(--amber); }
.sh-tag.v-low { background: var(--red-tint); color: var(--red); }
.sh-new { color: var(--link); font-weight: 700; }
.sh-heat-wrap { overflow-x: auto; margin: 10px -4px 0; padding: 0 4px 6px; }
.sh-hn { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: sticky; left: 0; background: var(--surface); z-index: 1; padding-right: 6px; }
.sh-weak { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 14px; padding: 12px 14px; border-left: 4px solid var(--primary); background: var(--surface-2); border-radius: 8px; }
.sh-invite { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.sh-invite-text { flex: 1 1 280px; min-width: 0; }
.sh-qr { flex: none; background: #fff; padding: 8px; border: 1px solid var(--line); border-radius: 10px; width: 186px; height: 186px; line-height: 0; }
.sh-qr svg { width: 100%; height: 100%; display: block; }
.sh-code { font-family: var(--display); letter-spacing: .08em; }
.sh-assigned { border-radius: var(--radius); }
@media screen { #sh-printroot { display: none; } }
@media print {
  body.sh-printing > *:not(#sh-printroot) { display: none !important; }
  body.sh-printing { background: #fff !important; color: #000 !important; }
  body.sh-printing #sh-printroot { display: block; color: #000; background: #fff; font-family: var(--font); padding: 12mm; }
  .sh-rec h1, .sh-sheet h1 { font-size: 26pt; margin: 4pt 0; color: #000; }
  .sh-rec-sub { color: #444; margin: 0 0 10pt; }
  .sh-rec-tbl { width: 100%; border-collapse: collapse; margin: 10pt 0; font-size: 11pt; }
  .sh-rec-tbl th, .sh-rec-tbl td { text-align: left; padding: 5pt 6pt; border-bottom: 1px solid #999; }
  .sh-rec-fine { font-size: 9pt; color: #555; margin-top: 14pt; }
  .sh-rec-sign { display: flex; justify-content: space-between; margin-top: 36pt; font-size: 11pt; }
  .sh-sheet { text-align: center; }
  .sh-sheet h1 { font-size: 34pt; }
  .sh-sheet-lede { font-size: 15pt; margin: 6pt 0 14pt; }
  .sh-sheet .sh-qr { width: 300px; height: 300px; margin: 0 auto; border: 0; padding: 0; }
  .sh-sheet-code { font-size: 20pt; margin: 12pt 0; }
  .sh-sheet-code b { letter-spacing: .15em; }
  .sh-sheet-steps { display: inline-block; text-align: left; font-size: 14pt; line-height: 1.6; }
}
@media (max-width: 700px) {
  .sh-th { display: none !important; }
  .sh-tr { grid-template-columns: 1fr 1fr !important; row-gap: 6px; }
  .sh-tr .sh-name { grid-column: 1 / -1; font-weight: 700; font-size: 1rem; }
}

/* skills test */
.st-page { max-width: 880px; margin: 0 auto; }
.st-complaint { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.st-test { border-radius: 10px !important; }
.st-clock { border-radius: 8px; }

/* ------------------------------------------------------------------ diagnose, codes, topic reader */
.diagnose-start { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 20px 0 10px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--primary); border-radius: var(--radius-lg); box-shadow: none; }
.diagnose-start h2 { font-size: 1.6rem; margin: 6px 0; }
.journey-number { font: 600 .9rem var(--font); letter-spacing: 0; color: var(--text-3); }
.diagnose-code-link a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.diagnose-systems-title { margin: 56px 0 8px; padding: 0; border: 0; font-size: clamp(1.75rem, 3vw, 2.35rem); }
.dx-ref-title { margin-top: 72px; }
.dx-sub { color: var(--text-2); max-width: 62ch; margin: 0 0 24px; font-size: 1.08rem; }
.dx-equip { display: grid; gap: 28px; }
.dx-group { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 34px; padding-top: 18px; border-top: 2px solid var(--text); }
.dx-group-head h3 { margin: 0; font: 700 1.6rem/1.1 var(--display); letter-spacing: -.015em; text-transform: none; }
.dx-group-head span { display: block; margin-top: 8px; font: 500 .92rem var(--font); letter-spacing: 0; text-transform: none; color: var(--text-3); }
.dx-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.dx-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t a" "n a"; align-items: center; gap: 1px 14px; padding: 13px 10px 13px 0; border-bottom: 1px solid var(--line); border-radius: 0; transition: background .12s, padding .12s; }
.dx-item b { grid-area: t; font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.dx-item small { grid-area: n; color: var(--text-2); font-size: .93rem; line-height: 1.35; }
.dx-item i { grid-area: a; font: 600 1.1rem var(--font); font-style: normal; color: var(--text-3); transition: transform .15s; }
.dx-item:hover { background: var(--surface); padding-left: 12px; box-shadow: none; border-radius: 8px; }
.dx-item:hover i { transform: translateX(4px); color: var(--text); }
@media (max-width: 860px) { .dx-group { grid-template-columns: 1fr; gap: 12px; } .dx-group-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .dx-group-head span { margin: 0; } }
@media (max-width: 640px) { .dx-items { grid-template-columns: 1fr; } }
.dx-triage { margin: 26px 0 8px; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.dx-triage-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 6px; }
.dx-triage-head p { color: var(--text-2); max-width: 62ch; margin: 0; }
.dx-triage-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: 18px 0 0; }
.dx-triage-form textarea { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; font: inherit; resize: vertical; min-height: 58px; }
.dx-suspects { display: grid; gap: 10px; margin-top: 20px; }
.dx-suspect { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.dx-suspect.lead { background: var(--surface); border-color: var(--text); box-shadow: inset 4px 0 0 var(--primary); }
.dx-suspect.stop { background: var(--red-tint); border-color: var(--red); }
.dx-rank { font: 700 1.25rem var(--display); color: var(--text-3); text-align: center; border-right: 1px solid var(--line); }
.dx-suspect.lead .dx-rank { color: var(--text); }
.dx-suspect-body b { font: 700 1.25rem/1.15 var(--display); letter-spacing: -.01em; text-transform: none; }
.dx-suspect-body small { display: block; font: 600 .84rem var(--font); letter-spacing: 0; text-transform: none; color: var(--text-3); margin: 4px 0 6px; }
.dx-suspect-body p { margin: 0 0 10px; color: var(--text-2); font-size: .98rem; }
.dx-suspect-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dx-bar { flex: 1 1 90px; height: 8px; background: var(--surface-3); border: 0; border-radius: 4px; overflow: hidden; }
.dx-bar i { display: block; height: 100%; background: var(--text); border-radius: 4px; }
.dx-suspect-meta > b { font: 700 .94rem var(--font); }
.dx-question { margin: 20px 0 0; padding: 22px; background: var(--anodized); color: var(--deep-text); border: 0; border-radius: var(--radius-lg); }
.dx-q-head { font: 700 1.4rem var(--display); letter-spacing: -.01em; text-transform: none; color: #f4f6f7; }
.dx-q-why { margin: 6px 0 0; font-size: .92rem; color: var(--lcd); opacity: 1; }
.dx-q-tool, .dx-q-expect { margin: 6px 0 0; font: 500 .92rem var(--font); color: var(--deep-text-2); }
.dx-q-opts { display: grid; gap: 8px; margin-top: 14px; }
.dx-q-opts .choice-btn { background: #12161a; border-color: #3a4247; color: #f2f4f5; }
.dx-q-opts .choice-btn:hover:not(:disabled) { background: #1d2327; color: #fff; border-color: #6d757a; }
.dx-q-opts .dx-skip { border-style: dashed; color: var(--deep-text-2); background: transparent; }
.dx-why { margin: 4px 0 0; font-size: .9rem; color: var(--text-3); font-style: italic; }
.dx-plan { margin: 8px 0 0; padding: 10px 12px; background: var(--surface-2); border-left: 4px solid var(--text); border-radius: 6px; font-size: .94rem; }
.dx-plan b { font-family: var(--font); font-size: .88rem; letter-spacing: 0; text-transform: none; }
.dx-note-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 16px; }
.dx-note-form input { border: 1px solid #3a4247; background: #12161a; color: #f2f4f5; padding: 10px 12px; border-radius: 10px; font: inherit; }
.dx-trail { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.dx-trail .fact.off { opacity: .55; text-decoration: line-through; }
.dx-guides-h { font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--text-2); font-weight: 700; }
@media (max-width: 640px) { .dx-triage { padding: 18px 16px; } .dx-triage-form, .dx-note-form { grid-template-columns: 1fr; } .dx-suspect { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 12px; } }
.code-card { border-radius: var(--radius); border-left-width: 4px; border-left-color: var(--text); background: var(--surface); }
.code-card .code-tag { font-family: var(--display); background: var(--surface-3); color: var(--text); border-color: transparent; border-radius: 8px; }
.block-h::before { background: var(--primary); }
.block-h { font: 700 1.3rem var(--display); letter-spacing: -.01em; }
.reader-head .kicker, .aside-card h4 { letter-spacing: 0; text-transform: none; font-size: .92rem; }
.toc a:hover, .toc a.active { color: var(--text); border-left-color: var(--primary); }
.block-tip, .block-warn, .tree-cta, .aside-card, .check { border-radius: var(--radius); }
.check.done .box { background: var(--green); border-color: var(--green); color: #fff; }
.meter > i { background: var(--text); }
.search-inline { border-radius: 10px; background: var(--surface); }
.diagnose-codes .code-chip.on, .code-chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }

/* guided fix wizard */
.wizard { max-width: 800px; margin: 0 auto; }
.fact { border-radius: 6px; background: var(--surface-3); color: var(--text); border: 0; font-family: var(--font); font-size: .84rem; letter-spacing: 0; font-weight: 600; }
.wiz-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.wiz-step-kicker { font-family: var(--font); font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--text-3); font-weight: 600; }
.wiz-q { font-family: var(--display); text-transform: none; font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.08; letter-spacing: -.02em; }
.wiz-callout { border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); }
.choice { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); transform: none; box-shadow: none; }
.choice:hover { background: var(--surface-2); border-color: var(--text); transform: none; box-shadow: none; }
.choice .arrow { font-family: var(--font); color: var(--text-3); }
.result-card { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.result-card.ok { background: var(--green-tint); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.result-card.fault { background: var(--amber-tint); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.result-card.stop { background: var(--red-tint); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.result-badge { border-radius: 6px; font-family: var(--font); letter-spacing: 0; text-transform: none; font-size: .86rem; background: var(--surface) !important; color: var(--text) !important; }
.result-card.stop .result-badge { background: var(--red) !important; color: #fff !important; }
.result-card .field .lbl { font-family: var(--font); letter-spacing: 0; text-transform: none; font-size: .86rem; }

/* challenge */
.ch-case, .ch-result { margin: 18px 0; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.ch-complaint { font-size: 1.12rem; border-left: 4px solid var(--text); padding-left: 14px; }
.ch-questions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; align-items: center; }
.ch-questions b { width: 100%; font: 700 1.15rem var(--display); text-transform: none; letter-spacing: -.01em; }
.ch-guess { display: flex; gap: 8px; margin: 14px 0 0; align-items: center; flex-wrap: wrap; }
.ch-guess select { padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font: inherit; min-width: 260px; }
.ch-score { font: 700 2rem var(--display); text-transform: none; }
.ch-score.good { color: var(--green); }
.ch-score.mid { color: var(--amber); }
.ch-score.low { color: var(--red); }
.ch-caution { border: 1px solid var(--red); background: var(--red-tint); border-radius: 8px; padding: 10px 12px; font-weight: 600; }
.ch-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }

/* certificates */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.cert-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; color: var(--text); }
.cert-card.earned { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.cert-badge { font: 700 1.4rem/1 var(--display); color: var(--primary); }
.cert-card:not(.earned) .cert-badge { color: var(--text-3); }
.cert-sub, .cert-locked { color: var(--text-3); font-size: .92rem; }
.cert-doc { max-width: 680px; margin: 24px auto; padding: 52px 44px; border: 1px solid #b8bdc0; outline: 6px solid #eceeef; outline-offset: -18px; border-radius: 6px; text-align: center; background: #fff; color: #1f2427; }
.cert-brand { font: 700 1.1rem/1 var(--display); letter-spacing: -.01em; color: #1f2427; }
.cert-title { font: 700 2.3rem/1.1 var(--display); letter-spacing: -.02em; margin: 18px 0 6px; color: #1f2427; }
.cert-name { font: 700 1.7rem/1.3 var(--display); border-bottom: 1px solid #1f2427; display: inline-block; padding: 0 24px 6px; margin: 12px 0; min-width: 260px; color: #1f2427; }
.cert-mod { font: 700 1.3rem/1.3 var(--display); margin: 10px 0; color: #1f2427; }
.cert-line { color: #434b50; margin: 6px 0; }
.cert-foot { margin-top: 26px; font-size: .8rem; color: #575f64; }
@media print { .cert-sheet .btn, .cert-sheet .crumbs { display: none; } }

/* 3D lab preview */
.pv-badge, .pv-card-tag { font: 700 .8rem/1 var(--font); letter-spacing: 0; text-transform: none; padding: 5px 9px; background: var(--text); color: var(--bg); border-radius: 6px; }
.pv-card-tag { background: rgba(15,18,20,.85); color: #e6e9ea; }
.pv-lede { font-size: 1.1rem; max-width: 60ch; color: var(--text-2); }
.pv-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: center; margin: 18px 0 22px; }
.pv-hero img, .pv-teaser-shots img { width: 100%; height: auto; display: block; background: #15191b; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-2); }
.pv-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pv-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 8px 0 22px; }
.pv-points > div { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pv-points p { margin: 4px 0 0; font-size: .96rem; color: var(--text-2); }
.pv-honest { margin: 0 0 24px; padding: 14px 16px; border-left: 4px solid var(--text); background: var(--surface); border-radius: 8px; }
.pv-testers { margin: 0 0 28px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: none; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 30px; }
.pv-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 0 14px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s; }
.pv-card:hover { transform: none; box-shadow: none; border-color: var(--text); }
.pv-card img { width: 100%; height: auto; display: block; background: #15191b; aspect-ratio: 720 / 459; object-fit: cover; }
.pv-card b, .pv-card-sub { padding: 0 14px; }
.pv-card b { margin-top: 8px; }
.pv-card-sub { font-size: .88rem; color: var(--text-3); }
.pv-teaser { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: center; margin: 26px 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.pv-teaser-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv-banner { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--text); background: var(--surface); border-radius: 8px; }
.pv-banner-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pv-banner-text { flex: 1 1 280px; font-size: .96rem; }
.pv-fb { margin-top: 10px; }
.pv-fb textarea { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-sizing: border-box; }
.pv-fb .pv-row { margin-top: 6px; }
.pv-fb-msg { margin: 6px 0 0; font-size: .92rem; }
@media (max-width: 720px) { .pv-hero, .pv-teaser { grid-template-columns: 1fr; } .pv-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .pv-card b { font-size: .92rem; } .pv-card-sub { display: none; } }

/* 3D lab canvas (keeps its dark stage) */
.lab3d { position: relative; margin: 18px 0; border: 0; border-radius: var(--radius-lg); overflow: hidden; background: #0e1112; box-shadow: var(--shadow-2); }
.lab3d-canvas { display: block; width: 100%; height: 520px; touch-action: none; cursor: grab; }
.lab3d.gl { overflow: hidden; background: #15191b; }
.lab3d-gl { display: block; width: 100%; height: 560px; touch-action: none; cursor: grab; }
.lab3d-tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lab3d-tag { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; white-space: normal; text-align: left; font: 600 11px/1.2 var(--font); color: #f2f4f5; background: rgba(14,17,18,.84); border: 1px solid rgba(242,244,245,.22); padding: 4px 7px; border-radius: 6px; backdrop-filter: blur(3px); }
.lab3d-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.lab3d-lines path { stroke: rgba(242,244,245,.5); stroke-width: 1; fill: none; }
.lab3d-lines circle { fill: #f2f4f5; stroke: rgba(14,17,18,.8); stroke-width: 1.5; }
.lab3d-lines g.sel path { stroke: #e0574c; stroke-width: 1.6; }
.lab3d-lines g.sel circle { fill: #e0574c; }
.lab3d-tag.pin { width: 22px; height: 22px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 11px; line-height: 1; background: #e6e9ea; color: #0e1112; border: 2px solid #0e1112; }
.lab3d-tag:hover, .lab3d-tag.on { background: #c92f25; color: #fff; border-color: #c92f25; }
.lab3d-flowkey { position: absolute; left: 10px; bottom: 10px; z-index: 4; display: flex; gap: 14px; pointer-events: none; font: 600 11px/1 var(--font); color: #cfd5d8; background: rgba(14,17,18,.72); border: 1px solid rgba(242,244,245,.18); padding: 6px 9px; border-radius: 8px; }
.lab3d-flowkey i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.lab3d-flowkey i.live { background: #ffe9a0; box-shadow: 0 0 8px 2px rgba(255,214,102,.8); }
.lab3d-flowkey i.dead { background: #4a524d; }
.lab3d-flowkey i.fluid { background: #cfe9ff; box-shadow: 0 0 8px 2px rgba(150,205,255,.75); }
.lab3d-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.lab3d-legend[hidden] { display: none; }
.lab3d-legend button { font: 600 13px/1.2 var(--font); padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; }
.lab3d-legend button b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--text); color: var(--bg); margin-right: 4px; font-size: 11px; }
.lab3d-legend button.on { border-color: var(--primary); background: var(--primary-tint); }
.lab3d.gl .lab3d-hud { z-index: 2; }
.lab3d-hud { position: absolute; left: 12px; top: 12px; right: 12px; pointer-events: none; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.lab3d-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; pointer-events: auto; }
.lab3d-guess { padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: inherit; max-width: 240px; }
.lab3d-meter { pointer-events: none; background: rgba(14,17,18,.9); border: 1px solid #343c40; border-radius: 10px; padding: 8px 12px; font: 600 13px var(--font); color: #f2f4f5; max-width: 340px; }
.lab3d-meter b { color: var(--lcd); }
.lab3d-msg { pointer-events: none; background: rgba(179,38,30,.92); border-radius: 10px; padding: 8px 12px; font-weight: 700; color: #fff; max-width: 340px; }
.lab3d-msg.good { background: rgba(45,106,58,.94); }
.lab3d-hint { pointer-events: none; align-self: flex-end; font: 600 12px var(--font); color: #959ea3; letter-spacing: 0; text-transform: none; }
.lab3d-cap { border-color: #c92f25; max-width: 400px; }
.lab3d-why { border-color: #74c08a; max-width: 400px; }
.lab3d-why b { color: #74c08a; }

.lab3d-meter-does { margin-top: 6px; font-weight: 500; color: #aeb7bc; font-size: 12px; }
/* meter leads, terminals and the jumper */
.lab3d-leads { pointer-events: auto; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(242,244,245,.14); }
.lab3d-lead { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1.2 var(--font); color: #cfd5d8; background: rgba(242,244,245,.06); border: 1px solid rgba(242,244,245,.18); border-radius: 999px; padding: 4px 9px 4px 6px; cursor: pointer; }
.lab3d-lead i { width: 10px; height: 10px; border-radius: 50%; background: #e0574c; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); flex: none; }
.lab3d-lead.black i { background: #2b2f31; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.lab3d-lead.on { border-color: #f2b50c; color: #fff; background: rgba(242,181,12,.14); }
.lab3d-terms { flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 600 11px/1 var(--font); color: #959ea3; }
.lab3d-term { font: 700 11px/1 var(--font); color: #f2f4f5; background: rgba(242,244,245,.08); border: 1px solid rgba(242,244,245,.22); border-radius: 6px; padding: 5px 8px; cursor: pointer; position: relative; }
.lab3d-term.red { border-color: #e0574c; box-shadow: inset 0 0 0 1px #e0574c; }
.lab3d-term.black { border-color: #9aa3a8; box-shadow: inset 0 0 0 1px #9aa3a8; }
.lab3d-term.red.black { box-shadow: inset 0 0 0 1px #e0574c, 0 0 0 2px #9aa3a8; }
.lab3d-jumper { flex-basis: 100%; align-self: flex-start; width: max-content; font: 700 11px/1 var(--font); color: #1a1500; background: #f2b50c; border: 0; border-radius: 6px; padding: 6px 9px; cursor: pointer; }
.lab3d-jumper.on { background: #2b2f31; color: #f2b50c; box-shadow: inset 0 0 0 1px #f2b50c; }
.lab3d-jmsg { margin-top: 6px; color: #ffe08a; }
.lab3d-lines .lead path { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.lab3d-lines .lead.red path { stroke: #e0574c; }
.lab3d-lines .lead.black path { stroke: #3a3f42; }
.lab3d-lines .lead.red path + path { fill: #e0574c; stroke: none; }
.lab3d-lines .lead.black path + path { fill: #3a3f42; stroke: none; }
.lab3d-lines .lead circle { stroke-width: 2; }
.lab3d-lines .lead.red circle { fill: #e0574c; stroke: #fff; }
.lab3d-lines .lead.black circle { fill: #2b2f31; stroke: #d8dcdf; }
.lab3d-lines .lead.on path { stroke-width: 2.8; }
.lab3d-lines .term { pointer-events: auto; cursor: pointer; }
.lab3d-lines .term circle { fill: rgba(242,181,12,.16); stroke: #f2b50c; stroke-width: 1.5; stroke-dasharray: 3 2; }
.lab3d-lines .term:hover circle { fill: rgba(242,181,12,.4); }
.lab3d-lines .term.red circle { stroke: #e0574c; stroke-dasharray: none; }
.lab3d-lines .term.black circle { stroke: #d8dcdf; stroke-dasharray: none; }
.lab3d-lines .term text { font: 700 10px var(--font); fill: #ffe9a0; paint-order: stroke; stroke: rgba(14,17,18,.9); stroke-width: 3px; }
.lab3d-lines .jumper { fill: none; stroke: #f2b50c; stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(242,181,12,.7)); }
.lab3d-tools { position: absolute; right: 10px; bottom: 10px; z-index: 5; display: flex; gap: 6px; }
.lab3d-tool { font: 700 11px/1 var(--font); padding: 7px 9px; border-radius: 6px; border: 1px solid rgba(244,241,232,.28); background: rgba(12,17,16,.82); color: #f4f1e8; cursor: pointer; }
.lab3d-tool:hover { border-color: #f2b50c; }
/* the print: a ladder with readings written on it */
.lab3d-panel .lp-print { grid-column: 1 / -1; min-width: 0; }
.lab3d-panel > section { min-width: 0; }
.lp-ladder-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.lp-ladder { display: block; width: 100%; height: auto; max-height: 260px; }
.lp-ladder .wire { stroke: var(--text); stroke-width: 2; fill: none; pointer-events: none; }
.lp-ladder .node { fill: var(--text); pointer-events: none; }
.lp-ladder .contact { fill: var(--surface); stroke: var(--text); stroke-width: 2; pointer-events: none; }
.lp-ladder .sym { fill: var(--surface); stroke: var(--text); stroke-width: 2; pointer-events: none; }
.lp-ladder .board { fill: var(--surface); stroke: var(--text); stroke-width: 2; pointer-events: none; }
.lp-ladder .sym-t { font: 700 15px var(--font); fill: var(--text); pointer-events: none; }
.lp-ladder .sym-t.small { font-size: 11px; }
.lp-ladder .lbl { font: 600 11px/1.2 var(--font); fill: var(--text-2, var(--text)); pointer-events: none; }
.lp-ladder .read { font: 700 12px var(--mono); fill: #2f7a3d; pointer-events: none; }
.lp-ladder .cell rect { fill: transparent; cursor: pointer; pointer-events: all; }
.lp-ladder .cell:hover rect { fill: rgba(183,101,36,.08); }
.lp-ladder .cell.on rect { fill: rgba(183,101,36,.14); stroke: var(--accent); stroke-width: 1.5; }
.lp-ladder .cell.ans rect { fill: rgba(201,47,37,.16); stroke: #c92f25; stroke-width: 2; stroke-dasharray: 5 3; }
.lp-ladder .jumper { fill: none; stroke: #e0a800; stroke-width: 3; stroke-linecap: round; pointer-events: none; }
.lp-ladder .lead line { stroke-width: 2.5; stroke-linecap: round; pointer-events: none; }
.lp-ladder .lead circle { stroke: var(--surface); stroke-width: 2; pointer-events: none; }
.lp-ladder .lead.red line, .lp-ladder .lead.red circle { stroke: #e0574c; } .lp-ladder .lead.red circle { fill: #e0574c; stroke: var(--surface); }
.lp-ladder .lead.black line { stroke: #2b2f31; } .lp-ladder .lead.black circle { fill: #2b2f31; }
:root[data-theme="dark"] .lp-ladder .read { fill: #8fd49a; }
:root[data-theme="dark"] .lp-ladder .lead.black line { stroke: #c8ced2; } html[data-theme="dark"] .lp-ladder .lead.black circle { fill: #c8ced2; }
@media (max-width: 640px) { .lab3d-canvas { height: 380px; } .lab3d-gl { height: 460px; } .lab3d-hud { max-width: none; } .lab3d-terms, .lab3d-jumper { flex-basis: auto; } .lp-ladder { max-height: none; height: 220px; width: auto; } .lab3d-hud { position: static; padding: 10px; } .lab3d-meter { max-width: none; } .lab3d-tools { top: 10px; bottom: auto; } .lab3d-flowkey { position: static; width: max-content; margin: 0 10px 10px; } .lab3d-tag { font-size: 10px; padding: 3px 5px; } .lab3d-flowkey { gap: 8px; font-size: 10px; } }

/* slide lab page */
.slab { background: var(--anodized); color: var(--deep-text); border: 0; border-radius: 20px; box-shadow: none; }
.slab h2 { color: #f4f6f7; }
.lab-badge { background: var(--lcd); color: var(--lcd-ink); border-radius: 6px; }
.lab-form input, .lab-form textarea { background: #12161a; color: #f2f4f5; border: 1px solid #3a4247; border-radius: var(--radius-sm); }
.lab-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; margin: 0 0 18px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; clip-path: none; }
.lab-strip::before { display: none; }
.lab-strip-badge { background: var(--text); color: var(--bg); border-radius: 6px; letter-spacing: 0; padding: 2px 9px; font-weight: 700; font-size: .84rem; }

/* related links (bottom of lessons and cases) */
.rel-box { margin-top: 44px; padding: 22px 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); }
.rel-box .kicker { display: block; margin-bottom: 12px; font: 700 1.15rem var(--display); color: var(--text); letter-spacing: -.01em; }
.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.rel-col { display: grid; gap: 6px; align-content: start; }
.rel-col b { font-size: .92rem; color: var(--text-3); font-weight: 600; text-transform: none; letter-spacing: 0; }
.rel-col a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.rel-col a:hover { text-decoration-color: var(--text); }

/* search overlay */
.search-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-3); }
.sr-group { letter-spacing: 0; text-transform: none; font-size: .86rem; }
.sr-item .ico { border-radius: 8px; color: var(--text); background: var(--surface-3); }
.sr-item mark { background: var(--primary-tint); }
.jump-flash { animation: jumpflash 2.2s ease-out; }
@keyframes jumpflash { 0% { box-shadow: 0 0 0 6px var(--primary-tint); } 100% { box-shadow: 0 0 0 6px transparent; } }

/* print */
@media print {
  .topbar, .foot, .search-overlay, .crumbs, .shop-join, .site-banner, .lab3d-hud, .skill-controls button, .nav { display: none !important; }
  body { background: #fff; }
  .plate, .alu, .syst { background: #fff !important; box-shadow: none !important; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ------------------------------------------------------------------ learn: systems grid + system pages */
.course-wide { max-width: 1040px; }
.trk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 26px 0 8px; }
.trk { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 22px 22px 20px 26px; color: var(--text); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.trk:hover { transform: translateY(-2px); }
.trk:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.trk-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: var(--anodized, #2f3539); color: #f1f3f4; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.3); }
.trk-body { display: grid; gap: 6px; min-width: 0; flex: 1; }
.trk-name { font: 700 1.28rem/1.15 var(--display); letter-spacing: -.01em; }
.trk-blurb { color: var(--text-2); font-size: .98rem; line-height: 1.45; }
.trk-meta { color: var(--text-3); font-size: .9rem; font-variant-numeric: tabular-nums; }
.trk .track-rail { display: block; margin-top: 4px; }
.trk-here { position: absolute; top: 14px; right: 16px; font: 700 .8rem var(--font); color: var(--primary); }
.trk.is-complete .trk-meta { color: var(--green); }
.trk-head { display: flex; gap: 20px; align-items: flex-start; }
.trk-head .trk-ico { width: 60px; height: 60px; border-radius: 12px; margin-top: 6px; }
.trk-head h1 { margin-top: 0; }
.trk-head .progress-line { margin: 14px 0 6px; }
.trk-level { margin-top: 30px; }
.trk-level h2 { font: 700 1.35rem var(--display); letter-spacing: -.01em; margin: 0 0 12px; }
.trk-level .module .lesson-row:last-child { border-bottom: 0; }
.tag-ok { color: var(--green); }
@media (max-width: 760px) { .trk-grid { grid-template-columns: minmax(0, 1fr); } .trk-head { flex-direction: column; gap: 6px; } .trk-here { position: static; } }
.trk-level .lesson-mark { width: 52px; flex: none; }
.trk-here { top: 16px; right: 30px; }
.course-rail, .track-rail { background: var(--surface-3); box-shadow: inset 0 1px 3px rgba(0,0,0,.28); }
/* lesson: position pips and the numbers plate */
.pips { display: flex; gap: 6px; margin: 10px 0 4px; flex-wrap: wrap; }
.pip { width: 26px; height: 8px; border-radius: 4px; background: var(--surface-3); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.pip.is-done { background: var(--green); box-shadow: none; }
.pip.is-here { background: var(--primary); box-shadow: none; }
.pip:hover { outline: 2px solid var(--text-3); outline-offset: 2px; }
.numbers-box.plate-dark { border: 0; color: #e8ecee; }
.numbers-box.plate-dark > b { color: #fff; }
.numbers-box.plate-dark dt { color: #aab3b8; border-bottom-color: rgba(255,255,255,.1); }
.numbers-box.plate-dark dd { color: var(--lcd, #c6d4bd); border-bottom-color: rgba(255,255,255,.1); font-family: var(--font); }
/* leftovers from the older stylesheet that still shouted */
.wr-tab, .wr-label, .code-card .code-do .lbl, .price-tag, .hero-eyebrow, .lab-badge, .lab-strip-badge, .circ-tools-label, .lab-modes-label, .dash-table th, .lp-kicker, .lp-kind { text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------------ for shops (shp-) */
.shp { max-width: 1060px; }
.shp-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(24px, 4vw, 52px); align-items: center; padding: clamp(26px, 4vw, 44px); margin-top: 30px; }
.shp-board h2 { color: #f4f6f7; font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.04; margin: 0 0 14px; max-width: 16ch; text-shadow: none; }
.shp-board p { color: var(--deep-text-2); margin: 0 0 22px; max-width: 50ch; text-shadow: none; }
.shp-board .hm-actions { gap: 10px; }
.shp-fine-dark { font-size: .86rem; color: #8f989d !important; margin: 18px 0 0 !important; }
.shp-board .board-grid.is-full .bn { font-size: .86rem; }
.shp-sec { margin-top: 56px; }
.shp-sec .sec-head { margin-bottom: 18px; }
.shp-sec .sec-head p { color: var(--text-2); max-width: 66ch; margin: 8px 0 0; }
.shp-ways .hm-route-row { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); }
.shp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.shp-card { padding: 28px 30px 26px; display: grid; align-content: start; gap: 10px; }
.shp-card h2 { font-size: 1.5rem; margin: 0; }
.shp-card p { color: var(--text-2); margin: 0 0 8px; }
.shp-card .btn { justify-self: start; }
.shp-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.shp-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: start; }
.shp-steps b { display: block; font: 700 1.2rem/1.2 var(--display); letter-spacing: -.01em; margin-bottom: 4px; }
.shp-steps p { margin: 0; color: var(--text-2); max-width: 60ch; }
.shp-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--anodized); color: #f1f3f4; font: 700 1rem var(--display); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.3); }
.cost-calc { margin: 0; padding: clamp(22px, 3vw, 32px); border-top: 0; text-shadow: none; }
.cost-calc h3 { color: #f4f6f7; margin: 0 0 16px; }
.cc-inputs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cc-field label { color: var(--deep-text-2); margin-bottom: 6px; }
.cc-field input { background: #12161a; color: #f4f6f7; border: 1px solid #3a4247; border-radius: 10px; font: 700 1.25rem var(--display); padding: 10px 12px; width: 100%; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
.cc-out { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cc-out .lcdwrap { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 10px; align-items: stretch; }
.cc-out .lcd { font-size: 1.6rem; min-width: 0; justify-content: flex-end; padding: 8px 12px 6px; }
.cc-out .lcdlbl { font-size: .86rem; padding: 0 2px; }
.cc-fine { margin-top: 14px; }
.shop-join { margin-top: 56px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; padding: clamp(24px, 3.5vw, 40px); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; color: var(--text); }
.shop-join h2 { color: var(--text); margin: 0 0 10px; font-size: 1.7rem; }
.shop-join p { color: var(--text-2); }
.skill-report { margin: 0; }
@media (max-width: 899px) { .shp-board { grid-template-columns: 1fr; } .shp-two { grid-template-columns: 1fr; } .cc-inputs { grid-template-columns: 1fr 1fr; } .cc-out { grid-template-columns: 1fr; } .shop-join { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .shp-ways .hm-route-row { grid-template-columns: 1fr; } .shp-board { padding: 22px 16px; } .shp-card { padding: 22px 18px; } }
.cc-out .lcd, .cc-out b.lcd { display: inline-flex; color: var(--lcd-ink); }
.lab-form > b { text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 600; color: var(--text-3); }
/* skill report numbers: a quiet row, not a stats band */
.skill-report .cost-nums { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0 6px; }
.skill-report .cost-num { padding: 0; background: none; border: 0; box-shadow: none; display: flex; align-items: baseline; gap: 8px; }
.skill-report .cost-num b { font-size: 1.4rem; color: var(--text); }
.skill-report .cost-num span { margin: 0; color: var(--text-3); font-size: .92rem; }
.skill-report .hint { color: var(--text-2); }
.skill-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.skill-report-body { padding: 16px 18px 18px; display: grid; gap: 12px; }
.skill-report .cost-nums { background: none; border: 0; padding: 0; margin: 4px 0 0; }
.skill-report .hint, .skill-plan, .skill-report .shop-cost-fine { margin: 0; }
.dash-mock { font: 600 .8rem var(--font); letter-spacing: 0; border-radius: 6px; padding: 3px 9px; }
/* home: system key tags carry the same graphite icon tile as Learn */
.hm-tags { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.syst { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 12px; align-items: center; padding: 16px 16px 16px 46px; border-radius: 12px; }
.syst b { font: 700 1.15rem/1.2 var(--display); letter-spacing: -.01em; }
.syst small { margin-top: 3px; }
.syst .ico { position: static; width: 42px; height: 42px; padding: 10px; box-sizing: border-box; border-radius: 10px; background: var(--anodized); color: #f1f3f4; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.35); }
.syst:hover .ico { color: #fff; }
.syst { grid-template-rows: auto auto; row-gap: 0; column-gap: 12px; align-content: center; }
.syst b, .syst small { grid-column: 1; }
.syst .ico { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
/* cases list: tickets, two across on a desk */
.cx-list-page { max-width: 1060px; }
.cx-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.cx-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 14px; padding: 14px 16px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); align-items: start; height: 100%; box-sizing: border-box; transition: border-color .12s, transform .12s; }
.cx-row:hover { background: var(--surface); border-color: var(--text); transform: translateY(-1px); }
.cx-no { grid-column: 1; grid-row: 1; font-size: .8rem; }
.cx-main { grid-column: 1; grid-row: 2; }
.cx-main b { font-size: 1.05rem; }
.cx-say { font-size: .93rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-side { grid-column: 2; grid-row: 1 / span 2; justify-items: end; gap: 6px; }
.cx-lv { font-size: .8rem; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line-strong); }
.cx-stars { font-size: .95rem; }
.cx-group { margin-top: 34px; }
@media (max-width: 760px) { .cx-rows { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .shp-board .board { overflow-x: auto; -webkit-overflow-scrolling: touch; } .shp-board .board-grid.is-full { min-width: 540px; } .shp-board .board-foot { min-width: 0; } }
/* home demo tests carry the same kind icon as the case page */
.wo-test { flex-direction: row; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; }
.wo-test-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-3); color: var(--text-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.08); }
:root[data-theme="dark"] .wo-test-ico { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.wo-test-txt { display: grid; gap: 1px; min-width: 0; }
.wo-test[aria-pressed="true"] .wo-test-ico { background: var(--green); color: #fff; box-shadow: none; }
.wiz-callout { display: flex; align-items: flex-start; gap: 10px; }
.wiz-callout > .ico { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--text-2); }
.wiz-callout.note > .ico { color: var(--amber); }
.wiz-callout.expect > .ico { color: var(--blue); }

/* ------------------------------------------------------------------ lesson diagrams (lesson-art.js) */
:root { --art-black: #2b2f33; --art-white: #f6f7f7; --art-fill: #f3f4f4; --art-dark: #2a3034; --art-stroke: #1f2427; }
:root[data-theme="dark"] { --art-black: #7d868c; --art-white: #e6e9ea; --art-fill: #23292c; --art-dark: #15191b; --art-stroke: #c9d0d4; }
.lesson-fig { margin: 26px 0 8px; }
.lesson-fig-wrap { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px 12px 8px; overflow: hidden; }
.lesson-art { display: block; width: 100%; height: auto; font-family: var(--font); }
.lesson-fig figcaption { margin: 10px 4px 0; color: var(--text-2); font-size: .95rem; line-height: 1.45; }
.lesson-art text { fill: var(--text); font-size: 13px; }
.lesson-art .art-t { font-weight: 700; font-size: 14px; }
.lesson-art .art-s { font-size: 12.5px; fill: var(--text-2); }
.lesson-art .muted { fill: var(--text-3); font-size: 12px; }
.lesson-art .art-halo { stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; paint-order: stroke; fill: var(--surface); }
.lesson-art .art-tag text { font-size: 12px; font-weight: 600; }
.lesson-art .art-tag.muted text { font-weight: 500; fill: var(--text-3); }
.lesson-art .art-box rect { stroke: var(--art-stroke); stroke-width: 1.4; fill: var(--art-fill); }
.lesson-art .art-box.plate rect { fill: var(--art-fill); }
.lesson-art .art-box.dark rect { fill: var(--art-dark); }
.lesson-art .art-box.dark text { fill: #e8ecee; }
.lesson-art .art-box.dark .art-s { fill: #b4bdc2; }
.lesson-art .art-box.none rect { fill: none; stroke: var(--line-strong); stroke-dasharray: 4 4; }
.lesson-art .art-wire-out { fill: none; stroke: var(--surface); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }
.lesson-art .art-wire-in { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.lesson-art .art-bezel { fill: #2a3034; stroke: #0c0f10; }
.lesson-art .art-lcd { fill: #c6d4bd; }
.lesson-art .art-lcd-t { fill: #172216; font: 700 18px var(--display); }
.lesson-art .art-bezel-t { fill: #b8c3c8; font-size: 10.5px; }
.lesson-art .art-arrow path { fill: none; stroke: var(--text); stroke-width: 2; }
.lesson-art .art-head { fill: var(--text); }
.lesson-art .art-arrow.soft path { stroke: var(--text-3); stroke-dasharray: 5 4; }
.lesson-art .art-arrow.bad path { stroke: var(--red); }
.lesson-art .art-gnd path { fill: none; stroke: var(--text); stroke-width: 2; }
.lesson-art .art-fuse rect { fill: var(--art-fill); stroke: var(--text); stroke-width: 1.4; }
.lesson-art .art-fuse path { stroke: var(--text); }
.lesson-art .art-batt rect { fill: var(--art-dark); stroke: var(--art-stroke); }
.lesson-art .art-batt text { fill: #e8ecee; }
.lesson-art .art-flame .outer { fill: #4b8fd6; opacity: .9; }
.lesson-art .art-flame .inner { fill: #cfe6ff; }
.lesson-art .art-flame.yellow .outer { fill: #e8a53a; }
.lesson-art .art-flame.yellow .inner { fill: #ffe9a8; }
.lesson-art .art-gauge-arc { fill: none; stroke: var(--line-strong); stroke-width: 6; stroke-linecap: round; }
.lesson-art .art-gauge-band { fill: none; stroke: var(--green); stroke-width: 6; }
.lesson-art .art-needle { stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; }
.lesson-art .art-needle-hub { fill: var(--text); }
.lesson-art .art-tl-rail { stroke: var(--line-strong); stroke-width: 3; }
.lesson-art .art-tl-dot { fill: var(--text); }
.lesson-art .art-tl-dot.key { fill: var(--primary); }
.lesson-art .art-tl-n { fill: var(--bg); font-size: 11px; font-weight: 700; }
.lesson-art .art-bar-bg { fill: var(--surface-3); stroke: var(--line-strong); }
.lesson-art .art-bar-fill { fill: var(--green); }
.lesson-art .art-bar-fill.low { fill: var(--primary); }
.lesson-art .art-pin-t { fill: #fff; font-size: 11px; font-weight: 700; }
.lesson-art .art-pin-t.dark { fill: #1f2427; }
.lesson-art .art-mark circle { fill: var(--text); }
.lesson-art .art-mark text { fill: var(--bg); font-size: 11px; font-weight: 700; }
.lesson-art .art-waves path { fill: none; stroke: #4b8fd6; stroke-width: 1.6; opacity: .8; }
.lesson-art .art-drop { fill: #4b8fd6; }
.lesson-art .art-bolt { fill: var(--primary); }
.lesson-art .art-ok circle { fill: var(--green); }
.lesson-art .art-ok.bad circle { fill: var(--red); }
.lesson-art .art-ok path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.lesson-art .art-clamp { fill: none; stroke: var(--text); stroke-width: 3; }
.lesson-art .art-hot { fill: #e07a1f; opacity: .85; }
.lesson-art .art-pt { fill: var(--primary); stroke: var(--surface); stroke-width: 1.5; }
.lesson-art .art-trace { fill: none; stroke: #7fa06f; stroke-width: 2.2; }
.lesson-art .art-crimp { fill: var(--surface-3); stroke: var(--text); stroke-width: 1.4; }
.lesson-art .art-twist { fill: none; stroke: var(--red); stroke-width: 2.5; }
.lesson-art .art-recept { fill: var(--art-fill); stroke: var(--art-stroke); stroke-width: 2; }
.lesson-art .art-break { stroke: var(--red); stroke-width: 3; fill: none; }
.lesson-art .art-fuel { fill: #d9a21b; opacity: .5; }
.lesson-art .art-strainer { fill: var(--surface-3); stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 2 2; }
.lesson-art .art-element { fill: #e07a1f; }
.lesson-art .art-smear { stroke: #8a5a2b; stroke-width: 5; stroke-linecap: round; opacity: .7; }
.lesson-art .art-strip { fill: var(--primary); }
.lesson-art .art-bowl { fill: var(--art-fill); stroke: var(--art-stroke); stroke-width: 1.5; }
.lesson-art .art-blade { fill: var(--art-dark); }
.lesson-art .art-ceramic { fill: #f0e6d2; stroke: var(--text); stroke-width: 1; }
.lesson-art .art-evap { fill: #cfe6ff; stroke: #4b8fd6; }
.lesson-art .art-capcan { fill: var(--surface-3); stroke: var(--text); stroke-width: 1.5; }
.lesson-art .art-compcase { fill: var(--art-dark); stroke: var(--art-stroke); stroke-width: 2; }
.lesson-art .art-rail, .lesson-art .art-tube, .lesson-art .art-spindle { fill: var(--surface-3); stroke: var(--text); stroke-width: 1.4; }
.lesson-art .art-pulley { fill: var(--art-dark); }
.lesson-art .art-coach { fill: var(--art-fill); stroke: var(--art-stroke); stroke-width: 1.6; }
.lesson-art .art-jack { fill: var(--art-dark); }
.lesson-art .art-foot { fill: var(--text); }
.lesson-art .art-roof { fill: var(--surface-3); stroke: var(--text); stroke-width: 1.4; }
.lesson-art .art-wall { fill: var(--art-fill); stroke: var(--line-strong); }
.lesson-art .art-water { stroke: #4b8fd6; stroke-width: 3; stroke-dasharray: 6 4; fill: none; }
.lesson-art .art-sealant { fill: none; stroke: var(--text); stroke-width: 3; }
.lesson-art .art-skin { fill: var(--art-fill); stroke: var(--text); }
.lesson-art .art-glue { fill: #e8a53a; opacity: .6; }
.lesson-art .art-luan { fill: #c9a26b; opacity: .7; }
.lesson-art .art-foam { fill: #e9ecef; stroke: var(--line-strong); }
:root[data-theme="dark"] .lesson-art .art-foam { fill: #3a4247; }
.lesson-art .art-bubble { fill: none; stroke: var(--red); stroke-width: 2.5; }
.lesson-art .art-frame { fill: var(--surface-3); stroke: var(--text); }
.lesson-art .art-glass { fill: #cfe6ff; opacity: .6; }
.lesson-art .art-weep { fill: var(--primary); }
.lesson-art .art-butyl { fill: #8a8a8a; }
.lesson-art .art-lid { fill: var(--art-fill); stroke: var(--text); stroke-width: 1.4; }
.lesson-art .art-fanblade { fill: var(--art-dark); }
.lesson-art .art-drum { fill: var(--art-fill); stroke: var(--art-stroke); stroke-width: 2; }
.lesson-art .art-shoe { fill: none; stroke: #8a5a2b; stroke-width: 10; stroke-linecap: round; }
.lesson-art .art-magnet { fill: var(--art-dark); }
.lesson-art .art-bearing { fill: var(--surface-3); stroke: var(--text); stroke-width: 1.4; }
.lesson-art .art-seal { fill: #8a5a2b; }
.lesson-art .art-nut, .lesson-art .art-cap { fill: var(--art-dark); }
.lesson-art .art-spring { fill: none; stroke: var(--text); stroke-width: 4; }
.lesson-art .art-eq, .lesson-art .art-shackle { fill: var(--art-dark); }
.lesson-art .art-tire { fill: var(--art-dark); stroke: var(--art-stroke); }
.lesson-art .art-arm { fill: none; stroke: var(--text); stroke-width: 4; stroke-linejoin: round; }
.lesson-art .art-photo { fill: var(--surface-3); stroke: var(--text); stroke-width: 1.4; stroke-dasharray: 5 4; }
@media (max-width: 520px) { .lesson-fig-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .lesson-fig-wrap .lesson-art { min-width: 560px; } }
/* lesson: on-the-job procedure */
.lesson-steps { margin: 30px 0 8px; }
.lesson-steps h2 { font: 700 1.35rem var(--display); letter-spacing: -.01em; margin: 0 0 10px; }
.lesson-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 70ch; }
.lesson-steps li { counter-increment: step; position: relative; padding: 12px 0 12px 46px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.lesson-steps li::before { content: counter(step); position: absolute; left: 0; top: 11px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--anodized); color: #f1f3f4; font: 700 .92rem var(--display); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.3); }
.lesson-art .art-wire-out.light { stroke: var(--line-strong); stroke-width: 5; }
.lesson-art .on-dark, .lesson-art .art-s.on-dark, .lesson-art .muted.on-dark { fill: #d9dee0; }
.lesson-art .art-t.on-dark { fill: #ffffff; }
.lesson-art .art-box.dark rect { fill: url(#art-dark-g); }
.lesson-art .art-box.plate rect { fill: url(#art-plate-g); }
.lesson-art .art-plate-top { stop-color: #fbfcfc; } .lesson-art .art-plate-bot { stop-color: #eceff0; }
:root[data-theme="dark"] .lesson-art .art-plate-top { stop-color: #2a3034; } :root[data-theme="dark"] .lesson-art .art-plate-bot { stop-color: #1f2427; }
.lesson-art .art-flame .outer { fill: #3f86d2; opacity: .92; }
.lesson-art .art-flame .inner { fill: #bfe0ff; }
.lesson-art .art-flame .base { stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; }
.lesson-art .art-flame.yellow .outer { fill: #e39a2f; }
.lesson-art .art-flame.yellow .inner { fill: #ffe6a8; }

/* lesson diagrams: illustrated parts (coils, fans, paper, devices) */
.lesson-art .art-coil { fill: none; stroke-width: 3; stroke-linejoin: round; stroke: var(--text-3); }
.lesson-art .art-coil.hot { stroke: #e0652a; } .lesson-art .art-coil.cold { stroke: #3f86d2; } .lesson-art .art-coil.warm { stroke: #d9a21b; }
.lesson-art .art-loop-ring { fill: none; stroke: var(--line); stroke-width: 10; }
.lesson-art .art-fan .ring, .lesson-art .art-blower .ring { fill: var(--surface-3); stroke: var(--text); stroke-width: 1.4; }
.lesson-art .art-fan .blade { fill: var(--art-dark); } .lesson-art .art-fan .hub, .lesson-art .art-blower .hub { fill: var(--text); }
.lesson-art .art-blower .vane { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.lesson-art .art-bubble-c { fill: url(#art-plate-g); stroke: var(--art-stroke); stroke-width: 1.4; } .lesson-art .art-bubble-c.dark { fill: url(#art-dark-g); }
.lesson-art .art-paper { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; } .lesson-art .art-paper-head { fill: var(--art-dark); }
.lesson-art .art-rule { stroke: var(--line); stroke-width: 1.2; } .lesson-art .art-sigline { stroke: var(--text-3); stroke-width: 1.2; }
.lesson-art .art-sig { fill: none; stroke: #2c6fb0; stroke-width: 1.8; stroke-linecap: round; }
.lesson-art .art-cb rect { fill: var(--surface); stroke: var(--text); stroke-width: 1.3; } .lesson-art .art-cb path { fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; }
.lesson-art .art-clipboard { fill: #8a5a2b; stroke: #5e3d1b; stroke-width: 1.2; } .lesson-art .art-clip { fill: #6b7378; stroke: #2a3034; stroke-width: 1.2; }
.lesson-art .art-led { stroke: #0c0f10; stroke-width: .8; } .lesson-art .art-led.green { fill: #38c172; } .lesson-art .art-led.red { fill: #e3342f; } .lesson-art .art-led.off { fill: #4a5257; } .lesson-art .art-led.amber { fill: #e8a53a; }
.lesson-art .art-thermo .tube { fill: var(--surface); stroke: var(--text); stroke-width: 1.3; } .lesson-art .art-thermo .col, .lesson-art .art-thermo .bulb { fill: #e3342f; } .lesson-art .art-thermo .bulb { stroke: var(--text); stroke-width: 1.3; }
.lesson-art .art-thermo.cold .col, .lesson-art .art-thermo.cold .bulb { fill: #3f86d2; }
.lesson-art .art-device, .lesson-art .art-shroud { fill: url(#art-plate-g); stroke: var(--art-stroke); stroke-width: 1.6; }
.lesson-art .art-slot { fill: var(--surface-3); stroke: var(--line-strong); } .lesson-art .art-handle, .lesson-art .art-slotline, .lesson-art .art-btn, .lesson-art .art-divider { fill: var(--art-dark); } .lesson-art .art-btn.red { fill: #e3342f; }
.lesson-art .art-tiny { font-size: 8.5px; font-weight: 700; fill: #fff; }
.lesson-art .art-pcb { fill: #2f7a4a; stroke: #1f5a35; stroke-width: 1.5; } .lesson-art .art-pcb-hole { fill: #d2d6d8; stroke: #1f5a35; }
.lesson-art .art-header { fill: #e9ecef; stroke: #333; stroke-width: 1; } .lesson-art .art-headerpin { fill: #333; }
.lesson-art .art-term { fill: #3a3f44; stroke: #111; } .lesson-art .art-relay { fill: #1f2427; stroke: #0c0f10; } .lesson-art .art-ecap { fill: #2c3e8f; stroke: #111; }
.lesson-art .art-compdome { fill: var(--art-dark); stroke: var(--art-stroke); stroke-width: 1.4; }
.lesson-art .art-ice { fill: #eaf6ff; stroke: #7fb6e8; stroke-width: 1; }
.lesson-art .art-grille { fill: var(--art-dark); } .lesson-art .art-filter { fill: #e8d08a; stroke: #b89a3e; }
.lesson-art .art-boilerbox { fill: var(--art-dark); stroke: var(--art-stroke); } .lesson-art .art-powder { fill: #e9c43a; opacity: .9; }
.lesson-art .art-detector { fill: var(--surface); stroke: var(--text); stroke-width: 1.4; } .lesson-art .art-bed { fill: var(--surface-3); stroke: var(--text); stroke-width: 1.3; }
.lesson-art .art-sail { stroke: var(--primary); stroke-width: 3; stroke-linecap: round; } .lesson-art .art-sail-pivot { fill: var(--text); }
.lesson-art .art-burner { fill: var(--art-dark); stroke: var(--art-stroke); } .lesson-art .art-hx { fill: #6b7378; stroke: #2a3034; stroke-width: 1.4; }
.lesson-art .art-electrode { stroke: var(--text); stroke-width: 2; stroke-linecap: round; } .lesson-art .art-limit { fill: #e3342f; stroke: var(--text); }
.lesson-art .art-sensor { fill: var(--art-dark); stroke: var(--art-stroke); }
.lesson-art .art-person { fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; } .lesson-art .art-head-c { fill: var(--surface-3); stroke: var(--text); stroke-width: 1.6; }
.lesson-art .art-photo { fill: var(--surface); stroke: var(--line-strong); stroke-width: 3; stroke-dasharray: none; }
.lesson-art .art-line { fill: var(--text-3); }
:root[data-theme="dark"] .lesson-art .art-magnet, :root[data-theme="dark"] .lesson-art .art-pulley, :root[data-theme="dark"] .lesson-art .art-divider, :root[data-theme="dark"] .lesson-art .art-handle,
:root[data-theme="dark"] .lesson-art .art-grille, :root[data-theme="dark"] .lesson-art .art-relay, :root[data-theme="dark"] .lesson-art .art-term, :root[data-theme="dark"] .lesson-art .art-sensor,
:root[data-theme="dark"] .lesson-art .art-burner, :root[data-theme="dark"] .lesson-art .art-compdome, :root[data-theme="dark"] .lesson-art .art-jack, :root[data-theme="dark"] .lesson-art .art-fan .blade,
:root[data-theme="dark"] .lesson-art .art-blade, :root[data-theme="dark"] .lesson-art .art-fanblade, :root[data-theme="dark"] .lesson-art .art-boilerbox { stroke: #9aa4aa; stroke-width: 1.2; }

/* ================================================================ Crewline (crewline.js) */
:root { --crew: #1d6a92; --crew-2: #165676; --crew-ink: #fff; --crew-tint: #dbe9f1; --crew-on-dark: #8cc3e2; }
:root[data-theme="dark"] { --crew: #2f84b3; --crew-2: #3b95c6; --crew-tint: #17303d; --crew-on-dark: #8cc3e2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --crew: #2f84b3; --crew-2: #3b95c6; --crew-tint: #17303d; } }
.btn-crew { background: #1f5f86; color: #fff; border-color: #174a69; box-shadow: none; }
.btn-crew:hover { background: #1a5274; border-color: #133e58; color: #fff; }
.btn-crew:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.25); }
.btn-crew[disabled] { opacity: .6; }
.cl-page { max-width: var(--maxw); margin: 0 auto; }
.cl-page a:not(.btn) { color: var(--crew); }
.plate-dark.cl-hero a:not(.btn), .plate-dark.cl-close a:not(.btn), .plate-dark.cl-tech-hero a:not(.btn) { color: var(--crew-on-dark); }
.cl-mark { display: inline-flex; flex: none; }
.cl-word { display: inline-flex; align-items: center; gap: 10px; }
.cl-word-t { display: grid; line-height: 1; }
.cl-word-t b { font: 800 1.55rem/1 var(--display); letter-spacing: -.02em; }
.cl-word-t span { font-size: .78rem; opacity: .75; margin-top: 3px; }
.cl-word.sm .cl-word-t b { font-size: 1.2rem; }
.cl-sub { color: var(--text-3); max-width: 62ch; }
.cl-fine { color: var(--text-3); font-size: .9rem; margin: 12px 0 0; }

/* landing */
.cl-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(24px, 4vw, 52px); align-items: center; padding: clamp(28px, 4.4vw, 52px); margin-top: 22px; }
.cl-hero .cl-word-t b { color: #f4f6f7; }
.cl-hero h1 { color: #f6f8f9; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.02; margin: 22px 0 16px; max-width: 15ch; letter-spacing: -.025em; text-shadow: none; }
.cl-lede { color: var(--deep-text-2); max-width: 52ch; font-size: 1.06rem; margin: 0 0 24px; }
.cl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-hero-fine { color: var(--deep-text-2); font-size: .92rem; margin: 18px 0 0; }
.cl-feats { margin: 64px 0 0; display: grid; gap: 56px; }
.cl-feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.cl-feat.flip .cl-feat-copy { order: 2; }
.cl-feat-copy h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.08; margin: 0 0 12px; letter-spacing: -.015em; }
.cl-feat-copy > p { color: var(--text-2); max-width: 54ch; margin: 0 0 14px; }
.cl-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cl-ticks li { position: relative; padding-left: 26px; color: var(--text-2); }
.cl-ticks li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 12px; height: 7px; border-left: 2.5px solid var(--crew); border-bottom: 2.5px solid var(--crew); transform: rotate(-45deg); }
.cl-vis-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-2); }
.cl-vis-cap { position: absolute; right: 14px; bottom: -11px; font-size: .78rem; color: var(--text-3); background: var(--bg); padding: 2px 10px; border-radius: var(--pill); border: 1px solid var(--line); }
.cl-vis-h { display: block; font: 700 1.05rem var(--display); margin-bottom: 12px; }
.cl-mh { display: grid; grid-template-columns: minmax(70px, 1.2fr) repeat(6, minmax(34px, 1fr)); gap: 6px; align-items: center; }
.cl-mh-h { font-size: .78rem; font-weight: 700; color: var(--text-3); text-align: center; }
.cl-mh-n { font-weight: 600; font-size: .9rem; }
.cl-ma { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin: 0 0 12px; font-size: .95rem; }
.cl-ma .sh-bar { grid-column: 1 / -1; }
.cl-ma-n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.cl-mhire { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cl-mhire-col > b { display: block; font-size: .86rem; color: var(--text-3); margin-bottom: 8px; }
.cl-cand-mini { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 600; font-size: .92rem; }
.cl-cand-mini .sh-score { font: 800 1rem var(--display); }
.cl-mdoc ol { margin: 0; padding-left: 20px; color: var(--text-2); display: grid; gap: 6px; }
.cl-doc-sys { display: inline-block; font-size: .76rem; font-weight: 700; color: var(--crew); background: var(--crew-tint); border-radius: var(--pill); padding: 2px 9px; margin: 0 8px 6px 0; }
.cl-techside { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 300px); gap: clamp(24px, 5vw, 70px); align-items: center; margin: 72px 0 0; padding: clamp(24px, 4vw, 44px); border-radius: 20px; background: var(--brushed); border: 1px solid var(--edge); box-shadow: var(--plate-shadow); }
.cl-phone { width: 270px; max-width: 100%; justify-self: center; padding: 12px; border-radius: 36px; background: #1a1f22; border: 1px solid #0c0f10; box-shadow: 0 30px 50px -28px rgba(0,0,0,.6), inset 0 0 0 2px #2c3337; }
.cl-phone-scr { border-radius: 26px; background: var(--surface); padding: 22px 16px 18px; min-height: 430px; display: grid; align-content: start; gap: 8px; }
.cl-ph-k { font-size: .76rem; color: var(--text-3); }
.cl-ph-h { font: 800 1.5rem/1.05 var(--display); }
.cl-ph-stats { display: flex; gap: 10px; font-size: .78rem; color: var(--text-3); flex-wrap: wrap; margin-bottom: 6px; }
.cl-ph-stats b { color: var(--text); font-size: 1rem; }
.cl-ph-sub { font-size: .8rem; font-weight: 700; color: var(--text-3); margin-top: 8px; }
.cl-ph-item { display: grid; gap: 4px; font-size: .88rem; font-weight: 600; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.cl-ph-doc { font-size: .86rem; padding: 9px 10px; border-left: 3px solid var(--crew); background: var(--surface-2); border-radius: 0 8px 8px 0; }
.cl-pricing { margin: 80px 0 0; }
.cl-pricing h2, .cl-faq h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin: 0 0 8px; letter-spacing: -.015em; }
.cl-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.cl-plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; display: grid; gap: 12px; align-content: start; }
.cl-plan.now { border: 2px solid var(--crew); box-shadow: var(--shadow-2); }
.cl-plan-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cl-plan-n { font: 800 1.25rem var(--display); }
.cl-pill { font-size: .76rem; font-weight: 700; padding: 3px 10px; border-radius: var(--pill); background: var(--crew); color: #fff; white-space: nowrap; }
.cl-pill.muted { background: var(--surface-3); color: var(--text-3); }
.cl-plan-price b { font: 800 2.4rem/1 var(--display); letter-spacing: -.02em; }
.cl-plan-price span { display: block; color: var(--text-3); font-size: .88rem; margin-top: 4px; }
.cl-plan p { margin: 0; color: var(--text-2); }
.cl-plan .btn { justify-self: start; margin-top: 4px; }
.cl-faq { margin: 80px 0 0; }
.cl-faq dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; margin: 20px 0 0; }
.cl-qa { padding: 16px 0; border-top: 1px solid var(--line); }
.cl-qa dt { font-weight: 700; margin-bottom: 6px; }
.cl-qa dd { margin: 0; color: var(--text-2); }
.cl-close { margin: 72px 0 24px; padding: clamp(28px, 4vw, 48px); text-align: left; }
.cl-close h2 { color: #f4f6f7; font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 10px; max-width: 24ch; text-shadow: none; }
.cl-close p { color: var(--deep-text-2); max-width: 56ch; margin: 0 0 22px; text-shadow: none; }

/* sign in / sign up */
.cl-auth { display: grid; place-items: start center; padding: 34px 0 20px; }
.cl-auth-card { width: 100%; max-width: 480px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow-2); }
.cl-auth-card h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 22px 0 6px; letter-spacing: -.015em; }
.cl-form { display: grid; gap: 2px; margin-top: 8px; }
.cl-form .sh-in { max-width: none; border-radius: var(--radius-sm); }
.cl-form .btn { justify-self: start; margin-top: 18px; }
.cl-recovery { margin: 12px 0; }
.cl-recovery code { display: inline-block; font: 700 1.35rem var(--mono); letter-spacing: .06em; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px dashed var(--line-strong); }

/* the app */
.cl-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 0 14px; border-bottom: 1px solid var(--line); margin-top: 8px; }
.cl-top-brand { color: var(--text); text-decoration: none; margin-right: auto; }
.cl-top-brand:hover { text-decoration: none; }
.cl-top-user { color: var(--text-3); font-size: .92rem; }
.cl-switch { font: inherit; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); max-width: 240px; }
.cl-demo-tag { font-size: .88rem; padding: 6px 12px; border-radius: var(--pill); background: var(--amber-tint); color: var(--amber); }
.cl-demo-tag a { color: inherit !important; font-weight: 700; }
.cl-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 30px; align-items: start; }
.cl-side { position: sticky; top: 76px; display: grid; gap: 2px; padding-top: 22px; }
.cl-side a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--text-2) !important; text-decoration: none; font-weight: 600; }
.cl-side a:hover { background: var(--surface-2); text-decoration: none; }
.cl-side a.on { background: var(--surface); color: var(--text) !important; box-shadow: inset 3px 0 0 var(--crew), var(--shadow-1); border: 1px solid var(--line); }
.cl-main { min-width: 0; padding-top: 10px; }
.cl-head h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 12px 0 6px; letter-spacing: -.015em; }
.cl-head .cl-sub { margin: 0 0 8px; }
.cl-alert { border: 2px solid var(--crew); background: var(--crew-tint); border-radius: var(--radius-lg); padding: 20px 22px; margin: 18px 0; }
.cl-alert h2 { margin: 0 0 6px; font-size: 1.3rem; }
.cl-alert p { margin: 0 0 6px; color: var(--text-2); }
.cl-invite-big { border: 2px solid var(--crew); }
.cl-steps { margin: 6px 0 14px; padding-left: 20px; display: grid; gap: 6px; color: var(--text-2); }
.cl-assign-grid { display: grid; gap: 6px 8px; align-items: center; min-width: 520px; }
.cl-ag-cell { display: grid; gap: 4px; font-size: .86rem; font-variant-numeric: tabular-nums; color: var(--text-2); }
.cl-ag-cell.done { color: var(--green); font-weight: 700; }
.cl-testlink { display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.cl-testlink > div:first-child { flex: 1 1 320px; min-width: 0; }
.cl-pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cl-pipe-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-height: 120px; }
.cl-pipe-h { display: flex; justify-content: space-between; margin-bottom: 10px; }
.cl-pipe-h span { color: var(--text-3); font-variant-numeric: tabular-nums; }
.cl-cand-wrap { margin-bottom: 8px; }
.cl-cand { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.cl-cand:hover { border-color: var(--line-strong); }
.cl-cand .sh-score { font: 800 1.15rem var(--display); }
.cl-cand-n { display: grid; min-width: 0; }
.cl-cand-n .sh-fine { font-size: .8rem; }
.cl-cand-note { grid-column: 1 / -1; font-size: .84rem; color: var(--text-2); border-left: 3px solid var(--crew); padding-left: 8px; }
.cl-cand-d { padding: 12px 4px 4px; }
.cl-cand-d h3 { font-size: .95rem; margin: 12px 0 6px; }
.cl-cand-d .sh-in { max-width: none; margin-top: 12px; }
.cl-stage { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-docs-h { font-size: .9rem; color: var(--text-3); margin: 20px 0 6px; }
.cl-doc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 8px; overflow: hidden; }
.cl-doc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cl-doc-row:hover { background: var(--surface-2); }
.cl-doc-row .cl-doc-sys { margin-bottom: 0; }
.cl-doc-body { padding: 0 16px 14px; }
.cl-doc-text p { margin: 0 0 10px; color: var(--text-2); max-width: 70ch; }
.cl-doc-text ol, .cl-doc-text ul { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; color: var(--text-2); max-width: 70ch; }
.cl-doc-text ul { list-style: none; padding-left: 4px; }
.cl-doc-text ul li { position: relative; padding-left: 26px; }
.cl-doc-text ul li::before { content: ""; position: absolute; left: 0; top: .2em; width: 13px; height: 13px; border: 1.8px solid var(--text-3); border-radius: 3px; }
.cl-editor .sh-in { max-width: none; }
.cl-ta { min-height: 240px; resize: vertical; font-family: var(--font); line-height: 1.5; }
.cl-ed-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.cl-doc-prev { margin-top: 10px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); min-height: 240px; background: var(--surface-2); }
.cl-loc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cl-loc .sh-fine { margin-right: auto; }

/* tech home */
.cl-tech-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding: clamp(24px, 4vw, 40px); margin-top: 22px; }
.cl-tech-k { display: inline-flex; align-items: center; gap: 8px; color: var(--deep-text-2); font-size: .92rem; }
.cl-tech-hero h1 { color: #f6f8f9; font-size: clamp(2rem, 4vw, 2.8rem); margin: 10px 0 14px; text-shadow: none; }
.cl-tech-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--deep-text-2); }
.cl-tech-stats b { color: #fff; font: 800 1.4rem var(--display); margin-right: 4px; }
.cl-myheat { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px; margin-top: 10px; }
.cl-myh { display: grid; gap: 4px; text-align: center; font-size: .82rem; font-weight: 600; color: var(--text-3); }
.cl-tech .sh-assigned { margin-top: 18px; }

@media (max-width: 899px) {
  .cl-hero, .cl-feat, .cl-techside { grid-template-columns: 1fr; }
  .cl-feat.flip .cl-feat-copy { order: 0; }
  .cl-plans { grid-template-columns: 1fr; }
  .cl-faq dl { grid-template-columns: 1fr; }
  .cl-body { grid-template-columns: 1fr; gap: 0; }
  .cl-side { position: static; display: flex; gap: 4px; overflow-x: auto; padding: 12px 0 4px; border-bottom: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
  .cl-side a { white-space: nowrap; padding: 8px 12px; }
  .cl-side a.on { box-shadow: inset 0 -3px 0 var(--crew); }
  .cl-pipe { grid-template-columns: 1fr 1fr; }
  .cl-ed-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cl-pipe, .cl-mhire { grid-template-columns: 1fr; }
  .cl-top-user { display: none; }
  .cl-mh { grid-template-columns: minmax(60px, 1fr) repeat(6, minmax(28px, 1fr)); gap: 4px; }
}
@media print { .cl-top, .cl-side { display: none; } .cl-body { display: block; } }
.cl-hero > * { min-width: 0; }
.cl-hero .board { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) { .cl-hero .board-grid.is-full { min-width: 540px; } .cl-hero .board-foot, .cl-hero .board-head { min-width: 0; } }
@media (max-width: 560px) { .cl-hero { padding: 26px 18px; } .cl-hero h1 { font-size: 2rem; } }
.cl-note { margin: 4px 0 14px; color: var(--text-2); }
.cl-danger { color: var(--red); border-color: var(--red); }
.cl-techassign { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.cl-techassign summary { cursor: pointer; font-weight: 700; }
.cl-mods-tight { margin-top: 10px; }
.sh-mod.is-shop { opacity: .6; }
.cl-xfer { margin-top: 18px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.cl-xfer summary { cursor: pointer; font-weight: 700; }
.cl-xcode { font: 800 1.5rem var(--mono); letter-spacing: .12em; color: var(--text); }

/* lesson diagrams: machine parts */
:root { --art-ink: #2b3236; --art-steel-top: #f1f3f4; --art-steel-bot: #b6bfc4; --art-iron-top: #5d676d; --art-iron-bot: #2b3236; --art-iso-top: #f7f8f9; --art-iso-side: #97a1a7; --art-wood: #e7dcc6; --art-panel: #d8c9a6; }
:root[data-theme="dark"] { --art-ink: #b8c1c6; --art-steel-top: #76818a; --art-steel-bot: #454e54; --art-iron-top: #4d575d; --art-iron-bot: #22282b; --art-iso-top: #87929a; --art-iso-side: #303940; --art-wood: #4a4337; --art-panel: #5a4e3a; }
.lesson-art .art-steel-top { stop-color: var(--art-steel-top); } .lesson-art .art-steel-bot { stop-color: var(--art-steel-bot); }
.lesson-art .art-iron-top { stop-color: var(--art-iron-top); } .lesson-art .art-iron-bot { stop-color: var(--art-iron-bot); }
.lesson-art .art-iso .front { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.3; }
.lesson-art .art-iso .top { fill: var(--art-iso-top); stroke: var(--art-stroke); stroke-width: 1; } .lesson-art .art-iso .side { fill: var(--art-iso-side); stroke: var(--art-stroke); stroke-width: 1; }
.lesson-art .art-iso.iron .front { fill: url(#art-iron-g); stroke: #0f1214; } .lesson-art .art-iso.iron .top { fill: #6f7a80; } .lesson-art .art-iso.iron .side { fill: #1f2528; }
.lesson-art .art-iso.plate .front { fill: url(#art-plate-g); }
.lesson-art .art-gear .body { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.2; stroke-linejoin: round; } .lesson-art .art-gear .hub { fill: var(--art-ink); }
.lesson-art .art-rack .body, .lesson-art .art-rack .teeth { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.1; stroke-linejoin: round; }
.lesson-art .art-motor .can { fill: url(#art-iron-g); stroke: #0f1214; stroke-width: 1.2; } .lesson-art .art-motor .fin { stroke: rgba(255,255,255,.18); stroke-width: 1.2; }
.lesson-art .art-motor .bell { fill: #8d969b; stroke: #0f1214; } .lesson-art .art-motor .shaft { fill: #c3cacd; stroke: #0f1214; }
.lesson-art .art-motor .lead { fill: none; stroke-width: 2.2; stroke-linecap: round; } .lesson-art .art-motor .lead.red { stroke: #c5322a; } .lesson-art .art-motor .lead.blk { stroke: var(--text); }
.lesson-art .art-cyl .barrel { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.3; } .lesson-art .art-cyl .cap, .lesson-art .art-cyl .clevis { fill: #6b7378; stroke: #0f1214; }
.lesson-art .art-cyl .rod { fill: #e3e7e9; stroke: #6b7378; } .lesson-art .art-cyl .pin { fill: #111; } .lesson-art .art-cyl .port { fill: #3a4247; stroke: #0f1214; }
.lesson-art .art-rodbar { fill: #e3e7e9; stroke: #6b7378; } .lesson-art .art-hex { fill: #aeb7bc; stroke: #0f1214; } .lesson-art .art-bracket { fill: #6b7378; stroke: #0f1214; } .lesson-art .art-gearbox { fill: #3a4247; stroke: #0f1214; }
.lesson-art .art-hose .line { fill: none; stroke: var(--art-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .lesson-art .art-hose .fit { fill: #9aa4aa; stroke: #0f1214; }
.lesson-art .art-pulleyw .rim { fill: url(#art-iron-g); stroke: #0f1214; } .lesson-art .art-pulleyw .groove { fill: none; stroke: #aeb7bc; stroke-width: 1.5; } .lesson-art .art-pulleyw .hub { fill: #e3e7e9; }
.lesson-art .art-cable .out { fill: none; stroke: var(--art-ink); stroke-width: 2.6; } .lesson-art .art-cable .core { fill: none; stroke: #c3cacd; stroke-width: .9; }
.lesson-art .art-jackw .mount { fill: #3a4247; } .lesson-art .art-jackw .barrel { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.3; }
.lesson-art .art-jackw .rod { fill: #e3e7e9; stroke: #6b7378; } .lesson-art .art-jackw .pad { fill: var(--art-ink); stroke: #0f1214; } .lesson-art .art-jackw .port { fill: #3a4247; }
.lesson-art .art-shaft .out { stroke: #8d969b; stroke-linecap: round; } .lesson-art .art-shaft .hi { stroke: #e9edef; stroke-linecap: round; }
.lesson-art .art-framerail .web { fill: url(#art-iron-g); stroke: #0f1214; } .lesson-art .art-framerail .flange { stroke: rgba(255,255,255,.25); stroke-width: 1.5; } .lesson-art .art-framerail .bolt { fill: #c3cacd; stroke: #0f1214; stroke-width: .8; }
.lesson-art .art-wallsec .core { fill: var(--art-wood); stroke: var(--art-stroke); } .lesson-art .art-wallsec .skin { fill: #c9cfd2; stroke: var(--art-stroke); } .lesson-art .art-wallsec .panel { fill: var(--art-panel); stroke: var(--art-stroke); } .lesson-art .art-wallsec .hatch { stroke: rgba(0,0,0,.18); stroke-width: 1; }
.lesson-art .art-room .shell { fill: url(#art-plate-g); stroke: var(--art-stroke); stroke-width: 1.4; } .lesson-art .art-room .floor { fill: #8a5a2b; opacity: .85; } .lesson-art .art-room .roof { fill: #c9cfd2; opacity: .8; } .lesson-art .art-room .seal { fill: var(--art-ink); }
.lesson-art .art-nut-h path { fill: #aeb7bc; stroke: #0f1214; stroke-width: 1; } .lesson-art .art-nut-h .hole { fill: #3a4247; }
.lesson-art .art-manifold .block { fill: url(#art-iron-g); stroke: #0f1214; } .lesson-art .art-manifold .coil { fill: #3a4247; stroke: #0f1214; } .lesson-art .art-manifold .coilwire { stroke: #c5322a; stroke-width: 1.6; }
.lesson-art .art-hpu .pump { fill: #6b7378; stroke: #0f1214; } .lesson-art .art-hpu .tank { fill: rgba(160,175,185,.3); stroke: var(--art-stroke); } .lesson-art .art-hpu .fluid { fill: #c0392b; opacity: .55; } .lesson-art .art-hpu .cap { fill: #3a4247; }
.lesson-art .art-level .body { fill: #d9a21b; stroke: #8a6a10; } .lesson-art .art-level .vial { fill: #cfe6ff; stroke: #3a4247; } .lesson-art .art-level .bubble { fill: #fff; stroke: #3a4247; stroke-width: .8; } .lesson-art .art-level .mark { stroke: #3a4247; stroke-width: 1; }
.lesson-art .art-callout path { stroke: var(--text-3); stroke-width: 1.2; fill: none; } .lesson-art .art-callout circle { fill: var(--primary); stroke: var(--surface); stroke-width: 1.5; }
.lesson-art .art-callout text { font-size: 12px; font-weight: 600; fill: var(--text); } .lesson-art .art-callout.muted text { font-weight: 500; fill: var(--text-3); }
.lesson-art .art-sparm .link { stroke: #8d969b; stroke-width: 7; stroke-linecap: round; } .lesson-art .art-sparm .spring { fill: none; stroke: var(--art-ink); stroke-width: 1.4; } .lesson-art .art-sparm .knee { fill: #3a4247; stroke: #e3e7e9; stroke-width: 1.2; }
.lesson-art .art-ground { stroke: #8a5a2b; stroke-width: 2; stroke-dasharray: 8 5; } .lesson-art .art-floorline { stroke: var(--art-stroke); stroke-width: 3; }
.lesson-art .art-opening { fill: none; stroke: var(--line-strong); stroke-width: 2; } .lesson-art .art-fabric { fill: #cfe6ff; stroke: #3f86d2; stroke-width: 1; }
.lesson-art .art-roller { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.3; } .lesson-art .art-rollerm { fill: #2b3236; stroke: #0f1214; }
.lesson-art .art-tread { stroke: rgba(255,255,255,.35); stroke-width: 1.4; } .lesson-art .art-tiny.dark { fill: var(--text); }
/* lesson diagrams: water and chassis parts */
.lesson-art .art-tank .shell { fill: rgba(160,175,185,.22); stroke: var(--art-stroke); stroke-width: 1.4; } .lesson-art .art-tank .fluid { fill: #3f86d2; opacity: .45; } .lesson-art .art-tank .surface { fill: none; stroke: #3f86d2; stroke-width: 1.2; }
.lesson-art .art-tank.waste .fluid { fill: #6b4a1f; opacity: .6; } .lesson-art .art-tank.waste .surface { stroke: #6b4a1f; } .lesson-art .art-tank.pink .fluid { fill: #e2679a; }
.lesson-art .art-valve .body { fill: #b08d2b; stroke: #5c4713; } .lesson-art .art-valve .stem { fill: #6b7378; } .lesson-art .art-valve .handle { fill: #2d8a46; stroke: #0f1214; stroke-width: .8; } .lesson-art .art-valve.closed .handle { fill: #c5322a; }
.lesson-art .art-faucet .base { fill: #8d969b; stroke: #0f1214; } .lesson-art .art-faucet .spout { fill: none; stroke: #8d969b; stroke-width: 6; stroke-linecap: round; } .lesson-art .art-faucet .tip, .lesson-art .art-faucet .lever { fill: #6b7378; }
.lesson-art .art-strainerw .bowl { fill: rgba(200,230,255,.5); stroke: var(--art-stroke); } .lesson-art .art-strainerw .mesh { stroke: var(--text-3); stroke-width: .8; stroke-dasharray: 2 2; } .lesson-art .art-strainerw .fit { fill: #6b7378; }
.lesson-art .art-coilspring { fill: none; stroke: var(--art-ink); stroke-width: 1.6; stroke-linejoin: round; }
.lesson-art .art-tirew .rubber { fill: #2b3236; stroke: #0f1214; } .lesson-art .art-tirew .tread { stroke: #4d575d; stroke-width: 2; } .lesson-art .art-tirew .rim { fill: url(#art-steel-g); stroke: #3a4247; } .lesson-art .art-tirew .hub { fill: #3a4247; } .lesson-art .art-tirew .lug { fill: #3a4247; }
.lesson-art .art-leaf .band { fill: none; stroke: #4d575d; stroke-width: 3; } .lesson-art .art-leaf .eye { fill: #8d969b; stroke: #0f1214; } .lesson-art .art-leaf .seat { fill: #3a4247; stroke: #0f1214; }
.lesson-art .art-jug .body { fill: #f4f6f7; stroke: var(--art-stroke); stroke-width: 1.2; } .lesson-art .art-jug .fluid { fill: #e2679a; opacity: .8; } .lesson-art .art-jug .cap { fill: #3a4247; }
.lesson-art .art-pumphead { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.3; } .lesson-art .art-pumpdome { fill: #8d969b; stroke: #0f1214; }
.lesson-art .art-pswitch { fill: #3a4247; stroke: #0f1214; } .lesson-art .art-pswire { stroke: #c5322a; stroke-width: 1.6; }
.lesson-art .art-jacket { fill: #e9dcc2; stroke: var(--art-stroke); } :root[data-theme="dark"] .lesson-art .art-jacket { fill: #4a4337; }
.lesson-art .art-tankwall { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.4; } .lesson-art .art-waterfill { fill: #3f86d2; opacity: .35; }
.lesson-art .art-flue { fill: #5d676d; stroke: #0f1214; } .lesson-art .art-baffle { fill: none; stroke: #c3cacd; stroke-width: 1.2; }
.lesson-art .art-chamber { fill: none; stroke: var(--art-stroke); stroke-dasharray: 4 3; } .lesson-art .art-disc { fill: #c9cfd2; stroke: #0f1214; }
.lesson-art .art-fittingbox { fill: #b08d2b; stroke: #5c4713; } .lesson-art .art-anode { fill: #9aa4aa; stroke: #3a4247; stroke-dasharray: 3 2; }
.lesson-art .art-pex { fill: #cfe6ff; stroke: #3f86d2; stroke-width: 1.3; } .lesson-art .art-brass { fill: #c9a13a; stroke: #6b5313; } .lesson-art .art-barb { fill: none; stroke: #6b5313; stroke-width: 1; } .lesson-art .art-copper { fill: #c86e3a; stroke: #6b3a16; }
.lesson-art .art-plastic { fill: #f1f3f4; stroke: var(--art-stroke); stroke-width: 1.3; } .lesson-art .art-crack { fill: none; stroke: #c5322a; stroke-width: 2; stroke-linejoin: round; }
.lesson-art .art-probe { fill: #8d969b; stroke: #0f1214; stroke-width: .8; } .lesson-art .art-stripseg { stroke: #fff; stroke-width: 1.2; }
.lesson-art .art-pedestal { fill: #f4f6f7; stroke: var(--art-stroke); stroke-width: 1.4; } :root[data-theme="dark"] .lesson-art .art-pedestal { fill: #cfd5d8; }
.lesson-art .art-bowlin { fill: #ffffff; stroke: var(--art-stroke); stroke-width: 1.2; } .lesson-art .art-droptube { fill: #8d969b; stroke: #0f1214; } .lesson-art .art-flange { fill: #3a4247; stroke: #0f1214; }
.lesson-art .art-pedal { fill: #3a4247; } .lesson-art .art-pivot { fill: #e3e7e9; stroke: #0f1214; } .lesson-art .art-vb { fill: #c9a13a; stroke: #6b5313; }
.lesson-art .art-drumring { fill: none; stroke: #4d575d; stroke-width: 16; } .lesson-art .art-backing { fill: url(#art-steel-g); stroke: var(--art-stroke); }
.lesson-art .art-shoeweb { fill: none; stroke: #6b7378; stroke-width: 6; stroke-linecap: round; } .lesson-art .art-lining { fill: none; stroke: #8a5a2b; stroke-width: 9; stroke-linecap: butt; } .lesson-art .art-anchor { fill: #3a4247; stroke: #e3e7e9; }
.lesson-art .art-spindlew { fill: url(#art-steel-g); stroke: var(--art-stroke); } .lesson-art .art-hub { fill: url(#art-iron-g); stroke: #0f1214; } .lesson-art .art-grease { fill: #e9c43a; opacity: .55; }
.lesson-art .art-stud { stroke: #3a4247; stroke-width: 3; } .lesson-art .art-sealw { fill: #2b3236; stroke: #0f1214; } .lesson-art .art-cup { fill: #c3cacd; stroke: #0f1214; } .lesson-art .art-roller { fill: #e9edef; stroke: #0f1214; stroke-width: .8; }
.lesson-art .art-washer { fill: #c3cacd; stroke: #0f1214; } .lesson-art .art-castle { stroke: #0f1214; stroke-width: 1; } .lesson-art .art-cotter { stroke: #c5322a; stroke-width: 2; stroke-linecap: round; } .lesson-art .art-dustcap { fill: url(#art-steel-g); stroke: var(--art-stroke); }
.lesson-art .art-hanger { fill: #3a4247; stroke: #0f1214; } .lesson-art .art-equalizer { fill: #6b7378; stroke: #0f1214; } .lesson-art .art-shackle2 { fill: #8d969b; stroke: #0f1214; }
.lesson-art .art-truck { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.4; } .lesson-art .art-trailerbox { fill: url(#art-plate-g); stroke: var(--art-stroke); stroke-width: 1.4; }
.lesson-art .art-receiver, .lesson-art .art-headw, .lesson-art .art-coupler, .lesson-art .art-bracketw { fill: #3a4247; stroke: #0f1214; } .lesson-art .art-ball { fill: #c3cacd; stroke: #0f1214; }
.lesson-art .art-tongue { stroke: #3a4247; stroke-width: 4; stroke-linecap: round; } .lesson-art .art-springbar { stroke: #6b7378; stroke-width: 5; stroke-linecap: round; } .lesson-art .art-chain { stroke: #3a4247; stroke-width: 2; stroke-dasharray: 3 2; }
.lesson-art .art-dim { stroke: var(--text-3); stroke-width: 1.2; }
/* lesson diagrams: electrical and appliance parts */
.lesson-art .art-batt .case { fill: url(#art-iron-g); stroke: #0f1214; stroke-width: 1.2; } .lesson-art .art-batt .top { fill: #4d575d; stroke: #0f1214; } .lesson-art .art-batt .cap { fill: #3a4247; stroke: #0f1214; stroke-width: .6; }
.lesson-art .art-batt .post { fill: #8d969b; stroke: #0f1214; } .lesson-art .art-batt .post.pos { fill: #c5322a; } .lesson-art .art-batt text { fill: #e8ecee; }
.lesson-art .art-fpanel .face { fill: #3a4247; stroke: #0f1214; } .lesson-art .art-fpanel .blade { stroke: #0f1214; stroke-width: .6; } .lesson-art .art-fpanel .pin { fill: #c3cacd; }
.lesson-art .art-conv .case { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.3; } .lesson-art .art-conv .fin { stroke: rgba(0,0,0,.25); stroke-width: 3; } .lesson-art .art-conv .fan { fill: #2b3236; stroke: #0f1214; } .lesson-art .art-conv .grille { stroke: #8d969b; stroke-width: 1.2; }
.lesson-art .art-conv .fuseblock { fill: #2b3236; } .lesson-art .art-conv .f { fill: #3498db; stroke: #0f1214; stroke-width: .5; } .lesson-art .art-conv .lug { stroke: #0f1214; } .lesson-art .art-conv .lug.pos { fill: #c5322a; } .lesson-art .art-conv .lug.neg { fill: #e3e7e9; } .lesson-art .art-conv .cord { stroke: var(--art-ink); stroke-width: 3; }
.lesson-art .art-pedestal2 .post { fill: #6b7378; stroke: #0f1214; } .lesson-art .art-pedestal2 .door { fill: #8d969b; stroke: #0f1214; } .lesson-art .art-pedestal2 .recept { fill: #e9edef; stroke: #0f1214; } .lesson-art .art-pedestal2 .slot { fill: #1f2427; } .lesson-art .art-pedestal2 .brkbox { fill: #c3cacd; stroke: #0f1214; } .lesson-art .art-pedestal2 .brk { fill: #2b3236; }
.lesson-art .art-solenoid .can { fill: url(#art-iron-g); stroke: #0f1214; } .lesson-art .art-solenoid .stud { fill: #c3cacd; stroke: #0f1214; } .lesson-art .art-solenoid .small { fill: #8d969b; stroke: #0f1214; } .lesson-art .art-solenoid .foot { fill: #3a4247; }
.lesson-art .art-inv .case { fill: url(#art-iron-g); stroke: #0f1214; stroke-width: 1.2; } .lesson-art .art-inv .lug { stroke: #0f1214; } .lesson-art .art-inv .lug.pos { fill: #c5322a; } .lesson-art .art-inv .lug.neg { fill: #e3e7e9; } .lesson-art .art-inv .outlet { fill: #e9edef; stroke: #0f1214; } .lesson-art .art-inv .slot { fill: #1f2427; } .lesson-art .art-inv .acin { fill: #3a4247; stroke: #0f1214; }
.lesson-art .art-gen .housing { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.3; } .lesson-art .art-gen .door { fill: #c9cfd2; stroke: var(--art-stroke); } .lesson-art .art-gen .louver { stroke: rgba(0,0,0,.25); stroke-width: 2; } .lesson-art .art-gen .panel { fill: #2b3236; stroke: #0f1214; } .lesson-art .art-gen .sw { fill: #8d969b; stroke: #0f1214; } .lesson-art .art-gen .exhaust { fill: none; stroke: #3a4247; stroke-width: 5; stroke-linecap: round; }
.lesson-art .art-solar .frame { fill: #8d969b; stroke: #0f1214; } .lesson-art .art-solar .cell { fill: #1d3a63; stroke: #5f8fc7; stroke-width: .6; } .lesson-art .art-solar .jbox { fill: #2b3236; } .lesson-art .art-gland { fill: #2b3236; stroke: #0f1214; }
.lesson-art .art-lpcyl .body { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.3; } .lesson-art .art-lpcyl .collar { fill: none; stroke: #6b7378; stroke-width: 4; } .lesson-art .art-lpcyl .valve { fill: #b08d2b; stroke: #5c4713; } .lesson-art .art-lpcyl .wheel { fill: #2d8a46; stroke: #0f1214; } .lesson-art .art-lpcyl .outlet { fill: #b08d2b; stroke: #5c4713; } .lesson-art .art-lpcyl .footring { fill: #6b7378; }
.lesson-art .art-reg .body { fill: #b08d2b; stroke: #5c4713; } .lesson-art .art-reg .dome { fill: #c9cfd2; stroke: #0f1214; } .lesson-art .art-reg .vent { fill: none; stroke: #3a4247; stroke-width: 2; }
.lesson-art .art-mano .board { fill: var(--surface-2); stroke: var(--art-stroke); } .lesson-art .art-mano .tube { fill: none; stroke: #8d969b; stroke-width: 6; } .lesson-art .art-mano .water { fill: none; stroke: #3f86d2; stroke-width: 3.5; } .lesson-art .art-mano .tick { stroke: var(--text-3); stroke-width: 1; }
.lesson-art .art-rvalve .body { fill: #b08d2b; stroke: #5c4713; } .lesson-art .art-rvalve .stub { fill: #8d969b; stroke: #0f1214; } .lesson-art .art-rvalve .sol { fill: #3a4247; stroke: #0f1214; } .lesson-art .art-rvalve .solwire { stroke: #c5322a; stroke-width: 1.6; }
.lesson-art .art-tstat .face { fill: #f1f3f4; stroke: var(--art-stroke); } .lesson-art .art-tstat .btn { fill: #6b7378; }
.lesson-art .art-plug .term { fill: #8d969b; stroke: #0f1214; } .lesson-art .art-plug .insul { fill: #f1f3f4; stroke: #0f1214; } .lesson-art .art-plug .hex { fill: #8d969b; stroke: #0f1214; } .lesson-art .art-plug .thread { fill: #6b7378; stroke: #0f1214; } .lesson-art .art-plug .elec { fill: none; stroke: #0f1214; stroke-width: 1.5; }
.lesson-art .art-spark { fill: none; stroke: #3f86d2; stroke-width: 2; } .lesson-art .art-carb { fill: #8d969b; stroke: #0f1214; } .lesson-art .art-can { fill: #c5322a; stroke: #0f1214; } .lesson-art .art-cancap { fill: #2b3236; } .lesson-art .art-spray { stroke: #8d969b; stroke-width: 1.5; stroke-dasharray: 2 2; }
.lesson-art .art-socgrad { fill: url(#art-steel-g); } .lesson-art .art-axis { stroke: var(--text-3); stroke-width: 1.2; fill: none; }
.lesson-art .art-lugblock { fill: #c3cacd; stroke: #0f1214; } .lesson-art .art-lughole { fill: #3a4247; } .lesson-art .art-relaycan { fill: #8d969b; stroke: #0f1214; }
.lesson-art .art-hose.fuel .line { stroke: #8a5a2b; stroke-width: 4; } .lesson-art .art-tank.oil .fluid { fill: #d9a21b; opacity: .5; } .lesson-art .art-tank.oil .surface { stroke: #d9a21b; }
.lesson-art .art-licase { fill: url(#art-iron-g); stroke: #0f1214; } .lesson-art .art-liinner { fill: #4d575d; } .lesson-art .art-cell { fill: #2c5f9e; stroke: #0f1214; } .lesson-art .art-celltab { fill: #c3cacd; } .lesson-art .art-busbar { fill: #c3cacd; stroke: #0f1214; stroke-width: .5; }
.lesson-art .art-cooktop { fill: url(#art-steel-g); stroke: var(--art-stroke); } .lesson-art .art-burnerring { fill: #2b3236; stroke: #0f1214; } .lesson-art .art-orifice { fill: #b08d2b; stroke: #5c4713; } .lesson-art .art-burnerhead { fill: #2b3236; stroke: #0f1214; }
.lesson-art .art-ovenbox { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.3; } .lesson-art .art-ovencavity { fill: #2b3236; } .lesson-art .art-tcouple { fill: none; stroke: #c3cacd; stroke-width: 2; } .lesson-art .art-tcbulb { fill: #c3cacd; stroke: #0f1214; }
.lesson-art .art-fridgebox { fill: url(#art-plate-g); stroke: var(--art-stroke); stroke-width: 1.4; } .lesson-art .art-fridgein { fill: var(--surface); stroke: var(--line); } .lesson-art .art-shelf { stroke: var(--line-strong); stroke-width: 2; }
.lesson-art .art-pocket { fill: #3a4247; stroke: #0f1214; } .lesson-art .art-elementhead { fill: #c9cfd2; stroke: #0f1214; } .lesson-art .art-plugbody { fill: #2b3236; stroke: #0f1214; }
/* lesson diagrams: wiring, controls, body */
.lesson-art .art-insul-r { fill: #c5322a; stroke: #7a1f19; } .lesson-art .art-strand { stroke: #c86e3a; stroke-width: 1.4; } .lesson-art .art-shrink { fill: rgba(60,70,80,.35); stroke: var(--art-stroke); } .lesson-art .art-barrel { fill: #c86e3a; stroke: #6b3a16; } .lesson-art .art-crimpmark { stroke: #6b3a16; stroke-width: 2; } .lesson-art .art-gluebead { fill: none; stroke: #e9c43a; stroke-width: 2; }
.lesson-art .art-tape { fill: #1f2427; stroke: #000; } .lesson-art .art-corrosion { fill: #4fb37a; stroke: #2d6a3a; }
.lesson-art .art-puck .body, .lesson-art .art-puckbody { fill: #e9edef; stroke: var(--art-stroke); stroke-width: 1.3; } .lesson-art .art-puck .die { fill: #c3cacd; } .lesson-art .art-puck .die.on { fill: #fff3b0; stroke: #e8a53a; } .lesson-art .art-puck .glow, .lesson-art .art-glow2 { fill: #ffe9a8; opacity: .55; } .lesson-art .art-ghost { fill: none; stroke: #ffe9a8; stroke-width: 6; opacity: .6; }
.lesson-art .art-insul-x { fill: #c5322a; stroke: #7a1f19; } .lesson-art .art-copper-x { fill: #c86e3a; stroke: #6b3a16; } .lesson-art .art-chafe { fill: none; stroke: #c5322a; stroke-width: 1.5; }
.lesson-art .art-wallpad { fill: #f1f3f4; stroke: var(--art-stroke); } .lesson-art .art-padbtn { fill: #c9cfd2; stroke: #6b7378; } .lesson-art .art-twist-b { fill: none; stroke: #2c6fb0; stroke-width: 2.2; } .lesson-art .art-twist-w { fill: none; stroke: var(--art-ink); stroke-width: 2.2; }
.lesson-art .art-term { fill: #3a4247; stroke: #0f1214; } .lesson-art .art-resistor .zig { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
.lesson-art .art-phone { fill: #1f2427; stroke: #0c0f10; } .lesson-art .art-phonescr { fill: var(--surface); } .lesson-art .art-wave { fill: none; stroke: #6c4fa8; stroke-width: 2; stroke-linecap: round; } .lesson-art .art-antenna { stroke: #3a4247; stroke-width: 3; } .lesson-art .art-antenna-tip { fill: #3a4247; }
.lesson-art .art-scorch { fill: none; stroke: #2b2b2b; stroke-width: 4; stroke-linecap: round; opacity: .8; }
.lesson-art .art-gasketline { stroke: #2b3236; stroke-width: 3; } .lesson-art .art-joist { fill: #c9a26b; stroke: #8a5a2b; } .lesson-art .art-ceilpanel { fill: #f1f3f4; stroke: var(--art-stroke); } .lesson-art .art-stain { fill: #c9a26b; opacity: .7; } .lesson-art .art-wetdot { fill: #3f86d2; } .lesson-art .art-drydot { fill: var(--text-3); }
.lesson-art .art-flangew { fill: #c9cfd2; stroke: var(--art-stroke); } .lesson-art .art-sealgood { fill: #e9edef; stroke: var(--art-stroke); stroke-width: 1.2; } .lesson-art .art-sealbad { fill: #e9edef; stroke: #c5322a; stroke-width: 1.2; } .lesson-art .art-gap { stroke: #3f86d2; stroke-width: 2; }
.lesson-art .art-tube2 { fill: #e9edef; stroke: var(--art-stroke); } .lesson-art .art-nozzle { fill: none; stroke: #3a4247; stroke-width: 3; stroke-linecap: round; }
.lesson-art .art-gasketbead { fill: #2b3236; } .lesson-art .art-liftarm { stroke: #6b7378; stroke-width: 3; } .lesson-art .art-sensorpad { fill: #3a4247; stroke: #0f1214; } .lesson-art .art-motorblk { fill: #2b3236; } .lesson-art .art-garnish { fill: #f1f3f4; stroke: var(--art-stroke); } .lesson-art .art-screw { stroke: #3a4247; stroke-width: 2; }

/* lesson art: meters, data plate, capacitor and compressor bench, flame sense, fridge level, body sections, 7-way */
.lesson-art .art-dmm .body { fill: url(#art-iron-g); stroke: var(--art-stroke); stroke-width: 1.4; }
.lesson-art .art-dmm .dial { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.2; }
.lesson-art .art-dmm .pointer { stroke: var(--art-ink); stroke-width: 3; stroke-linecap: round; } .lesson-art .art-dmm .knob { fill: var(--art-ink); }
.lesson-art .art-dmm .tick { stroke: #cfd5d8; stroke-width: 1.4; } .lesson-art .art-dmm .dlabel { font-size: 8px; font-weight: 700; fill: #b8c1c6; } .lesson-art .art-dmm .dlabel.on { fill: #fff; }
.lesson-art .art-dmm .jack { fill: #111; stroke: #9aa4aa; stroke-width: 1.2; } .lesson-art .art-dmm .jack.red { fill: #e3342f; stroke: #7a1a16; }
.lesson-art .art-dmm .jlabel, .lesson-art .art-clampm .jlabel { font-size: 7.5px; font-weight: 700; fill: #cfd5d8; }
.lesson-art .art-dmm .lcd-s { font-size: 8px; font-weight: 700; fill: #2d4a2d; }
.lesson-art .art-lcd-t.small { font-size: 14px; }
.lesson-art .art-clampm .body { fill: url(#art-iron-g); stroke: var(--art-stroke); stroke-width: 1.4; } .lesson-art .art-clampm .jaw { fill: none; stroke: #3a4247; stroke-width: 9; } .lesson-art .art-clampm .split { stroke: var(--surface); stroke-width: 2; }
.lesson-art .art-clampm .dial { fill: url(#art-steel-g); stroke: var(--art-stroke); } .lesson-art .art-clampm .pointer { stroke: var(--art-ink); stroke-width: 2.5; stroke-linecap: round; }
:root[data-theme="dark"] .lesson-art .art-clampm .jaw { stroke: #6b7378; }
.lesson-art .art-jacket { stroke: #6b7378; stroke-width: 9; stroke-linecap: round; fill: none; }
.lesson-art .art-coilbox { fill: var(--art-dark); stroke: var(--art-stroke); } .lesson-art .art-coilwind { stroke: #c47a3a; stroke-width: 2; }
.lesson-art .art-plate-al { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.4; } .lesson-art .art-brush { stroke: rgba(0,0,0,.06); stroke-width: 1; } .lesson-art .art-rivet { fill: #8d969b; stroke: #3a4247; } .lesson-art .art-rivet-hi { fill: #f4f6f7; }
.lesson-art .art-plate-band { fill: var(--art-ink); } .lesson-art .art-plate-h { font-size: 13px; font-weight: 700; fill: var(--surface); letter-spacing: .3px; } .lesson-art .art-plate-t { font-size: 11.5px; font-weight: 600; fill: #1f2427; }
.lesson-art .art-capw .can { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.3; } .lesson-art .art-capw .top { fill: #6b7378; stroke: #0f1214; } .lesson-art .art-capw .top.bulged { fill: #7d868c; } .lesson-art .art-capw .term { fill: #c9cfd2; stroke: #0f1214; stroke-width: .8; }
.lesson-art .art-capw .tlabel { font-size: 7px; font-weight: 700; fill: var(--art-ink); } .lesson-art .art-capw .rating { font-size: 10.5px; font-weight: 600; fill: var(--art-ink); } .lesson-art .art-capw .oil { fill: #6b4f0f; opacity: .7; }
.lesson-art .art-sock .housing { fill: url(#art-iron-g); stroke: var(--art-stroke); stroke-width: 1.4; } .lesson-art .art-sock .face { fill: url(#art-plate-g); stroke: var(--art-stroke); stroke-width: 1.2; } .lesson-art .art-sock .slotb, .lesson-art .art-sock .center { fill: #1b1f22; stroke: #5d676d; stroke-width: 1; }
.lesson-art .art-domec .shell { fill: url(#art-iron-g); stroke: var(--art-stroke); stroke-width: 1.4; } .lesson-art .art-domec .weld { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 1.2; } .lesson-art .art-domec .base, .lesson-art .art-domec .foot { fill: #3a4247; stroke: #0f1214; }
.lesson-art .art-domec .copper { stroke: #c47a3a; stroke-width: 5; stroke-linecap: round; } .lesson-art .art-domec .boss { fill: #3a4247; stroke: #0f1214; } .lesson-art .art-domec .fpin { fill: #c9cfd2; }
.lesson-art .art-zoom { fill: var(--surface); stroke: var(--text-3); stroke-dasharray: 5 4; stroke-width: 1.2; } .lesson-art .art-zoomline { stroke: var(--text-3); stroke-dasharray: 5 4; stroke-width: 1.2; fill: none; }
.lesson-art .art-bossring { fill: #3a4247; stroke: #0f1214; } .lesson-art .art-fpinbig { fill: #2b3236; stroke: #c9cfd2; stroke-width: 1.4; }
.lesson-art .art-burnertube { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.3; } .lesson-art .art-port { fill: #1b1f22; } .lesson-art .art-ebracket { fill: url(#art-iron-g); stroke: var(--art-stroke); } .lesson-art .art-screw { fill: #c9cfd2; stroke: #0f1214; }
.lesson-art .art-ins { fill: #f1ebdc; stroke: #8a7f66; } .lesson-art .art-rod { fill: none; stroke: #5d676d; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .lesson-art .art-uA { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-dasharray: 3 2; }
.lesson-art .art-fridgebox { fill: url(#art-plate-g); stroke: var(--art-stroke); stroke-width: 1.4; } .lesson-art .art-freezer { fill: var(--art-dark); stroke: var(--art-stroke); } .lesson-art .art-fridgedoor { fill: var(--surface-3); stroke: var(--line-strong); }
.lesson-art .art-plumb { stroke: var(--text-3); stroke-dasharray: 4 4; stroke-width: 1.2; } .lesson-art .art-cu-tube { fill: none; stroke: #8d969b; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; } .lesson-art .art-pool { fill: #3f86d2; opacity: .6; }
.lesson-art .art-boiler { fill: url(#art-iron-g); stroke: var(--art-stroke); } .lesson-art .art-boilerhot { fill: #e3342f; opacity: .75; }
.lesson-art .art-dimveil { fill: rgba(0,0,0,.28); }
.lesson-art .art-axis { stroke: var(--line-strong); stroke-width: 1.2; } .lesson-art .art-pulse { fill: none; stroke: #7fa06f; stroke-width: 2; stroke-linejoin: round; } .lesson-art .art-motion { fill: none; stroke: var(--text-3); stroke-width: 1.4; stroke-dasharray: 3 3; }
.lesson-art .art-waterpath { fill: none; stroke: #3f86d2; stroke-width: 2; stroke-dasharray: 4 3; } .lesson-art .art-stud { fill: #9aa4aa; stroke: #3a4247; } .lesson-art .art-studin { stroke: #cfd5d8; stroke-width: 1; }
.lesson-art .art-panelp { fill: var(--art-panel); stroke: var(--art-stroke); stroke-width: .8; } .lesson-art .art-gluedot { fill: #d9a441; } .lesson-art .art-void { fill: rgba(60,70,80,.35); } .lesson-art .art-skinp { fill: #eef1f2; stroke: var(--art-stroke); stroke-width: 1.2; }
.lesson-art .art-wframe { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.2; } .lesson-art .art-glassp { fill: #cfe3f5; stroke: #7fa6c9; } .lesson-art .art-flangeb, .lesson-art .art-clampring { fill: #8d969b; stroke: #0f1214; } .lesson-art .art-weepslot { fill: #1b1f22; }
.lesson-art .art-screwl { stroke: #5d676d; stroke-width: 2; } .lesson-art .art-screwhead { fill: #c9cfd2; stroke: #0f1214; }
.lesson-art .art-jamb { fill: url(#art-iron-g); stroke: var(--art-stroke); } .lesson-art .art-bulb { fill: #2b3236; stroke: #0f1214; } .lesson-art .art-doorslab { fill: url(#art-plate-g); stroke: var(--art-stroke); stroke-width: 1.3; } .lesson-art .art-paperstrip { fill: #fff; stroke: #9aa4aa; stroke-width: .8; }
.lesson-art .art-pinrod { fill: #c9cfd2; stroke: #0f1214; } .lesson-art .art-pinring { fill: none; stroke: #5d676d; stroke-width: 2; }
:root[data-theme="dark"] .lesson-art .art-bulb, :root[data-theme="dark"] .lesson-art .art-port, :root[data-theme="dark"] .lesson-art .art-weepslot { stroke: #8d969b; }
.lesson-art .art-cabinet { fill: url(#art-plate-g); stroke: var(--art-stroke); stroke-width: 1.4; } .lesson-art .art-hxsteel { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.4; } .lesson-art .art-hxin { fill: var(--art-dark); stroke: #0f1214; }
.lesson-art .art-pipe { fill: none; stroke: #8d969b; stroke-width: 4; stroke-linejoin: round; }

/* lesson diagrams: scroll on phones, Enlarge opens a full-screen view */
.lesson-fig-wrap { position: relative; }
.lesson-fig-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.lesson-fig-zoom { position: absolute; right: 10px; top: 10px; z-index: 1; font: 600 .78rem var(--font); color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; cursor: pointer; opacity: .9; }
.lesson-fig-zoom:hover, .lesson-fig-zoom:focus-visible { opacity: 1; color: var(--text); border-color: var(--line-strong); }
@media (max-width: 640px) {
  .lesson-fig-scroll .lesson-art { min-width: 560px; }
  .lesson-fig-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 26px; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0), var(--surface)); border-radius: 0 14px 14px 0; }
}
.art-lightbox { position: fixed; inset: 0; z-index: 1200; background: rgba(10,12,14,.72); display: flex; align-items: center; justify-content: center; padding: 14px; }
.art-lightbox-inner { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; width: min(1120px, 100%); max-height: 94vh; display: flex; flex-direction: column; padding: 14px; }
.art-lightbox-scroll { overflow: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.art-lightbox-scroll .lesson-art { width: max(100%, 880px); height: auto; display: block; }
.art-lightbox-cap { margin: 10px 4px 0; color: var(--text-2); font-size: .95rem; line-height: 1.45; flex: 0 0 auto; }
.art-lightbox-close { position: absolute; top: 8px; right: 8px; z-index: 1; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
body.art-lightbox-open { overflow: hidden; }
.lesson-art .art-roomside { fill: url(#art-plate-g); stroke: var(--art-stroke); stroke-width: 1.4; } .lesson-art .art-roomroof { fill: #c9cfd2; opacity: .8; } .lesson-art .art-roomfloor { fill: #8a5a2b; opacity: .85; } .lesson-art .art-fascia { fill: url(#art-steel-g); stroke: var(--art-stroke); }
.lesson-art .art-rackside .bar { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1; } .lesson-art .art-rackside .tooth { stroke: var(--art-ink); stroke-width: 1; opacity: .7; }
.lesson-art .art-hcolumn { fill: url(#art-iron-g); stroke: var(--art-stroke); stroke-width: 1.2; } .lesson-art .art-bearingblk { fill: #c9cfd2; stroke: #0f1214; }
.lesson-art .art-motorv { fill: url(#art-iron-g); stroke: var(--art-stroke); stroke-width: 1.2; } .lesson-art .art-motorfin { stroke: rgba(255,255,255,.25); stroke-width: 1; } .lesson-art .art-motorlead { fill: none; stroke: #e3342f; stroke-width: 1.6; }
.lesson-art .art-gearflat .disc { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.3; } .lesson-art .art-gearflat .hub { fill: var(--art-ink); }
.lesson-art .art-coachfloor { fill: var(--art-wood); stroke: var(--art-stroke); } .lesson-art .art-floorroller { fill: #3a4247; stroke: #c9cfd2; stroke-width: 1.4; } .lesson-art .art-rollerbase { fill: #6b7378; }

/* lesson art: isometric slide systems */
.lesson-art .art-i3 .top { fill: var(--art-iso-top); stroke: var(--art-stroke); stroke-width: 1; stroke-linejoin: round; } .lesson-art .art-i3 .right { fill: var(--art-iso-side); stroke: var(--art-stroke); stroke-width: 1; stroke-linejoin: round; } .lesson-art .art-i3 .front { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1; stroke-linejoin: round; }
.lesson-art .art-i3.steelhi .top { fill: #fbfcfc; } .lesson-art .art-i3.steelhi .right { fill: #b6bfc4; } .lesson-art .art-i3.steelhi .front { fill: #e3e7e9; }
.lesson-art .art-i3.iron .top { fill: var(--art-iron-top); } .lesson-art .art-i3.iron .right { fill: var(--art-iron-bot); } .lesson-art .art-i3.iron .front { fill: url(#art-iron-g); }
.lesson-art .art-i3.ghost .top, .lesson-art .art-i3.ghost .right, .lesson-art .art-i3.ghost .front { fill: rgba(255,255,255,.5); stroke: var(--art-stroke); stroke-width: 1; stroke-dasharray: 4 3; } .lesson-art .art-i3.ghost .outline { fill: none; stroke: var(--art-stroke); stroke-width: 1.6; stroke-linejoin: round; }
.lesson-art .art-i3.ghostdark .top, .lesson-art .art-i3.ghostdark .right, .lesson-art .art-i3.ghostdark .front { fill: rgba(60,70,80,.42); stroke: var(--art-stroke); stroke-width: 1; }
:root[data-theme="dark"] .lesson-art .art-i3.ghost .top, :root[data-theme="dark"] .lesson-art .art-i3.ghost .right, :root[data-theme="dark"] .lesson-art .art-i3.ghost .front { fill: rgba(255,255,255,.1); }
:root[data-theme="dark"] .lesson-art .art-i3.steelhi .top { fill: #a3adb3; } :root[data-theme="dark"] .lesson-art .art-i3.steelhi .right { fill: #5b656c; } :root[data-theme="dark"] .lesson-art .art-i3.steelhi .front { fill: #8a949a; }
.lesson-art .art-i3disc { stroke: var(--art-stroke); stroke-width: 1.1; } .lesson-art .art-i3disc.gear { fill: url(#art-steel-g); stroke-width: 1.4; stroke-dasharray: 2 1.6; } .lesson-art .art-i3disc.roller { fill: #3a4247; stroke: #c9cfd2; } .lesson-art .art-i3disc.pulley { fill: #c9cfd2; stroke: #0f1214; } .lesson-art .art-i3disc.hex { fill: #e3b23c; stroke: #0f1214; } .lesson-art .art-i3disc.anchor { fill: var(--art-ink); }
.lesson-art .art-i3line { fill: none; stroke-linecap: round; stroke-linejoin: round; } .lesson-art .art-i3line.shaft { stroke: #c9cfd2; stroke-width: 3; } .lesson-art .art-i3line.rodline { stroke: #e3e7e9; stroke-width: 2.6; } .lesson-art .art-i3line.chain { stroke: var(--art-ink); stroke-width: 2.2; stroke-dasharray: 3 2; }
.lesson-art .art-i3line.cable { stroke: var(--art-ink); stroke-width: 1.5; } .lesson-art .art-i3line.cable.slack { stroke-dasharray: 4 3; opacity: .55; } .lesson-art .art-i3line.hose { stroke: var(--art-ink); stroke-width: 3; }
:root[data-theme="dark"] .lesson-art .art-i3line.shaft { stroke: #e3e7e9; } :root[data-theme="dark"] .lesson-art .art-i3line.rodline { stroke: #f4f6f7; }
.lesson-art .art-i3wall .face { fill: url(#art-plate-g); stroke: var(--art-stroke); stroke-width: 1.2; stroke-linejoin: round; } .lesson-art .art-i3wall .cap { fill: var(--art-iso-top); stroke: var(--art-stroke); stroke-width: 1; } .lesson-art .art-i3wall .edge { fill: var(--art-iso-side); stroke: var(--art-stroke); stroke-width: 1; }
.lesson-art .art-i3rack .tooth { stroke: var(--art-ink); stroke-width: 1; opacity: .75; }
.lesson-art .art-i3wall.ghost .face { fill: rgba(255,255,255,.25); stroke-dasharray: 4 3; stroke-width: 1; } .lesson-art .art-i3wall.ghost .cap, .lesson-art .art-i3wall.ghost .edge { fill: rgba(150,160,168,.25); stroke-dasharray: 4 3; }
:root[data-theme="dark"] .lesson-art .art-i3wall.ghost .face { fill: rgba(255,255,255,.05); }
.lesson-art .art-i3.ghost.wire .top, .lesson-art .art-i3.ghost.wire .right, .lesson-art .art-i3.ghost.wire .front { fill: none; stroke-width: 1; }
.lesson-art .art-i3.ghostfloor .top { fill: rgba(138,90,43,.28); stroke: var(--art-stroke); stroke-dasharray: 3 3; } .lesson-art .art-i3.ghostfloor .right, .lesson-art .art-i3.ghostfloor .front { fill: rgba(138,90,43,.4); stroke: var(--art-stroke); }
.lesson-art .art-i3disc.gear { fill: #d9a441; stroke: #6b4f0f; stroke-width: 1.3; stroke-dasharray: 2 1.6; } .lesson-art .art-i3disc.screwdot { fill: #c9cfd2; stroke: #0f1214; }

/* lesson art: slide systems in plan view */
.lesson-art .art-pl-wall { fill: url(#art-plate-g); stroke: var(--art-stroke); stroke-width: 1.2; } .lesson-art .art-pl-room { fill: rgba(255,255,255,.35); stroke: var(--art-stroke); stroke-width: 1.4; stroke-dasharray: 5 4; }
:root[data-theme="dark"] .lesson-art .art-pl-room { fill: rgba(255,255,255,.06); }
.lesson-art .art-pl-arrow { fill: none; stroke: var(--text-3); stroke-width: 1.6; marker-start: url(#art-head); marker-end: url(#art-head); }
.lesson-art .art-pl-frame { fill: url(#art-iron-g); stroke: var(--art-stroke); stroke-width: 1.2; } .lesson-art .art-pl-outer { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.1; } .lesson-art .art-pl-inner { fill: #e3e7e9; stroke: #6b7378; stroke-width: 1; }
.lesson-art .art-pl-tooth { stroke: var(--art-ink); stroke-width: 1; opacity: .75; } .lesson-art .art-pl-bracket { fill: #3a4247; stroke: #0f1214; } .lesson-art .art-pl-gearpack { fill: #5d676d; stroke: #0f1214; }
.lesson-art .art-pl-shaft { fill: none; stroke: #c9cfd2; stroke-linecap: round; } :root[data-theme="dark"] .lesson-art .art-pl-shaft { stroke: #e3e7e9; } .lesson-art .art-pl-rod { fill: none; stroke: #c3cacd; stroke-linecap: round; }
.lesson-art .art-pl-actuator { fill: url(#art-iron-g); stroke: var(--art-stroke); stroke-width: 1.1; } .lesson-art .art-pl-motor { fill: url(#art-iron-g); stroke: var(--art-stroke); stroke-width: 1.2; } .lesson-art .art-pl-hex { fill: #e3b23c; stroke: #0f1214; stroke-width: 1.2; }
.lesson-art .art-pl-stopcan { fill: #8d969b; stroke: #0f1214; } .lesson-art .art-pl-pinion { fill: #d9a441; stroke: #6b4f0f; stroke-width: 1.3; stroke-dasharray: 2 1.6; }
.lesson-art .art-pl-cyl { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.2; } .lesson-art .art-pl-pump { fill: #6b7378; stroke: #0f1214; } .lesson-art .art-pl-reservoir { fill: rgba(192,57,43,.35); stroke: var(--art-stroke); } .lesson-art .art-pl-manifold { fill: url(#art-steel-g); stroke: var(--art-stroke); } .lesson-art .art-pl-coil { fill: #3a4247; stroke: #0f1214; }
.lesson-art .art-pl-hose { fill: none; stroke: var(--art-ink); stroke-linecap: round; stroke-linejoin: round; }
.lesson-art .art-pl-roller { fill: #3a4247; stroke: #c9cfd2; stroke-width: 1.2; } .lesson-art .art-pl-jamb { fill: #3a4247; stroke: #0f1214; } .lesson-art .art-pl-header { fill: none; stroke: #8d969b; stroke-dasharray: 6 4; stroke-linecap: round; }
.lesson-art .art-pl-sprocket { fill: #d9a441; stroke: #6b4f0f; stroke-width: 1.2; stroke-dasharray: 2 1.6; } .lesson-art .art-pl-pulley { fill: #c9cfd2; stroke: #0f1214; } .lesson-art .art-pl-cable { fill: none; stroke: var(--art-ink); } .lesson-art .art-pl-cable.slack { stroke-dasharray: 4 3; opacity: .55; } .lesson-art .art-pl-anchor { fill: var(--art-ink); }
.lesson-art .art-pl-rackline { fill: none; stroke: #8d969b; stroke-linecap: round; } .lesson-art .art-pl-motortop { fill: url(#art-iron-g); stroke: var(--art-stroke); stroke-width: 1.2; }

/* ------------------------------------------------------------------ the coach (home hero) */
.hm-coach { margin-top: 34px; }
.hm-coach-grid { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 22px; align-items: start; }
.coach-wrap { position: relative; }
.coach-wrap .coach { width: 100%; height: auto; display: block; overflow: visible; }
.coach-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.coach-chip { font: 600 .9rem/1 var(--font); padding: 9px 13px; border-radius: var(--pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.coach-chip:hover { border-color: var(--text-3); color: var(--text); }
.coach-chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.coach-plate { padding: 20px 22px 18px; min-height: 330px; display: flex; flex-direction: column; }
.coach-plate .cp-kicker { font: 600 .82rem/1.2 var(--font); color: var(--text-3); margin: 0 0 6px; }
.coach-plate h3 { font: 700 1.5rem/1.1 var(--display); letter-spacing: -.02em; margin: 0 0 8px; }
.coach-plate .cp-blurb { margin: 0 0 14px; color: var(--text-2); font-size: .96rem; line-height: 1.5; }
.cp-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cp-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: .93rem; }
.cp-rows li b { font-weight: 700; color: var(--text); white-space: nowrap; }
.cp-rows li span { color: var(--text-2); text-align: right; min-width: 0; }
.cp-rows li span a { color: var(--link); font-weight: 600; text-decoration: none; }
.cp-rows li span a:hover { text-decoration: underline; }
.cp-rows li span a + a::before { content: ", "; color: var(--text-3); font-weight: 400; }
.cp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
.cp-actions .btn { padding: 10px 14px; font-size: .92rem; }
.coach-plate.is-idle .cp-blurb { font-size: 1rem; }
.cp-idle-list { margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: .94rem; }
.cp-idle-list li { padding: 7px 0; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 10px; }
.cp-idle-list li b { color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .hm-coach-grid { grid-template-columns: minmax(0, 1fr); } .coach-plate { min-height: 0; } }
@media (max-width: 600px) { .coach-chip { padding: 8px 11px; font-size: .84rem; } .coach-plate { padding: 16px 16px 14px; } }

/* materials */
.coach .cs-ground { fill: rgba(20,24,26,.07); }
.coach .cs-wall { fill: none; stroke: var(--line-strong); stroke-width: 1.1; stroke-linejoin: round; }
.coach .cs-wall.far, .coach .cs-wall.rear { stroke: var(--line); }
.coach .cs-wall.near { fill: rgba(255,255,255,.14); stroke: var(--text-3); stroke-width: 1.3; }
.coach .cs-wall.front { fill: rgba(255,255,255,.2); stroke: var(--text-3); stroke-width: 1.3; }
.coach .cs-floor { fill: var(--alu-mid); fill-opacity: .62; stroke: var(--line-strong); stroke-width: 1; }
.coach .cs-roofplane { fill: var(--alu-hi); fill-opacity: .34; stroke: var(--text-3); stroke-width: 1.1; }
.coach .cs-roofseam { fill: none; stroke: transparent; stroke-width: 2; }
.coach .cs-seam { stroke: var(--line); stroke-width: .9; fill: none; }
.coach .cs-window { fill: rgba(44,95,122,.16); stroke: var(--text-3); stroke-width: .9; }
.coach .cs-door { fill: rgba(255,255,255,.12); stroke: var(--text-2); stroke-width: 1.2; }
.coach .cs-mullion, .coach .cs-handle { stroke: var(--text-3); stroke-width: 1; fill: none; }
.coach .cs-outline { fill: none; stroke: var(--text-2); stroke-width: 1.3; stroke-linejoin: round; }
.coach .cs-box path, .coach .cs-cyl path { stroke: #3a4145; stroke-width: .6; stroke-linejoin: round; }
.coach .cs-box .top { fill: var(--alu-hi); } .coach .cs-box .side { fill: var(--alu-mid); } .coach .cs-box .end { fill: var(--alu-lo); }
.coach .steel .top { fill: #7b848a; } .coach .steel .side { fill: #5e676d; } .coach .steel .end { fill: #4b5359; }
.coach .cs-aframe { fill: #6a737a; stroke: #3a4145; stroke-width: .6; } .coach .cs-aframe.side { fill: #4f585e; }
.coach .cs-axle { stroke: #4b5359; stroke-width: 2.6; fill: none; stroke-linecap: round; }
.coach .cs-wheel .tire { fill: #272b2e; stroke: #121415; stroke-width: .6; } .coach .cs-wheel .tread { fill: #1c1f22; } .coach .cs-wheel .treadline { stroke: #1c1f22; stroke-width: 2.2; }
.coach .cs-wheel .rim { fill: #cfd4d7; stroke: #8d959a; stroke-width: .6; } .coach .cs-wheel .hub { fill: #8d959a; }
.coach .cs-wheels.far { opacity: .5; }
.coach .cs-tank.gray .top { fill: #a7b0b5; } .coach .cs-tank.gray .side { fill: #8e979c; } .coach .cs-tank.gray .end { fill: #79838a; }
.coach .cs-tank.black .top { fill: #4d555a; } .coach .cs-tank.black .side { fill: #3d4449; } .coach .cs-tank.black .end { fill: #31373b; }
.coach .cs-tank.fresh .top { fill: #c3d4e0; } .coach .cs-tank.fresh .side { fill: #a9bfcf; } .coach .cs-tank.fresh .end { fill: #93abbd; }
.coach .cs-sewerpipe { stroke: #2a2f33; stroke-width: 3; fill: none; } .coach .cs-sewercap .top, .coach .cs-sewercap .side, .coach .cs-sewercap .end { fill: #2a2f33; }
.coach .cs-furn .cs-counter path, .coach .cs-furn .cs-cabinet path, .coach .cs-bed path { stroke: var(--line-strong); stroke-width: .6; }
.coach .cs-counter .top, .coach .cs-bed .top { fill: var(--surface); fill-opacity: .9; } .coach .cs-counter .side, .coach .cs-bed .side { fill: var(--surface-2); fill-opacity: .9; } .coach .cs-counter .end, .coach .cs-bed .end { fill: var(--surface-3); fill-opacity: .9; }
.coach .cs-cabinet .top { fill: var(--surface); } .coach .cs-cabinet .side { fill: var(--surface-2); } .coach .cs-cabinet .end { fill: var(--surface-3); }
.coach .cs-bathwall { fill: rgba(20,24,26,.05); stroke: none; } .coach .cs-partition { fill: none; stroke: var(--line); stroke-width: .9; stroke-dasharray: 3 3; } .coach .cs-showerpan { fill: rgba(44,95,122,.14); stroke: var(--line-strong); stroke-width: .5; }
.coach .cs-panelbox .top { fill: #3d4549; } .coach .cs-panelbox .side { fill: #2d3337; } .coach .cs-panelbox .end { fill: #23282b; }
.coach .cs-breaker { fill: #dde1e3; stroke: #222; stroke-width: .3; }
.coach .cs-fuse { fill: #c8352b; stroke: none; } .coach .cs-fuse:nth-of-type(2n) { fill: #2c7bb6; } .coach .cs-fuse:nth-of-type(3n) { fill: #e0ae22; }
.coach .cs-inv .top { fill: #4a5256; } .coach .cs-inv .side { fill: #3a4145; } .coach .cs-inv .end { fill: #2e3337; }
.coach .cs-lcd { fill: var(--lcd); stroke: #1a2318; stroke-width: .4; }
.coach .cs-battbox .top { fill: #343a3e; } .coach .cs-battbox .side { fill: #282d31; } .coach .cs-battbox .end { fill: #1f2427; }
.coach .cs-post path { fill: #a8b0b4; } .coach .cs-post.red path { fill: #c8352b; }
.coach .cs-light { fill: #fff6cf; stroke: #c4b57b; stroke-width: .6; }
.coach .cs-solarpanel .top { fill: #1f3a5a; } .coach .cs-solarpanel .side { fill: #16293f; } .coach .cs-solarpanel .end { fill: #122235; } .coach .cs-cell { stroke: #5b7ea3; stroke-width: .6; fill: none; }
.coach .cs-inletplate { fill: #f3f4f4; stroke: #555; stroke-width: .7; } .coach .cs-inletring { fill: #2a2f33; } .coach .cs-inletring.small { fill: #2c7bb6; }
.coach .cs-cord { stroke: #1f2427; stroke-width: 1.8; fill: none; stroke-linecap: round; } .coach .cs-pedestal .top { fill: #9aa2a6; } .coach .cs-pedestal .side { fill: #7d868b; } .coach .cs-pedestal .end { fill: #6a7378; }
.coach .cs-pumpbox .top { fill: #5a6267; } .coach .cs-pumpbox .side { fill: #4a5256; } .coach .cs-pumpbox .end { fill: #3d4449; } .coach .cs-pipe { stroke: #2c7bb6; stroke-width: 1.6; fill: none; }
.coach .cs-whtank .top { fill: #f0f2f3; } .coach .cs-whtank .side { fill: #e0e4e6; } .coach .cs-whtank .end { fill: #d0d5d8; }
.coach .cs-whdoor { fill: var(--alu-mid); stroke: #3a4145; stroke-width: .8; } .coach .cs-louver path { stroke: #4b5359; stroke-width: .7; fill: none; } .coach .cs-whflue { fill: #2a2f33; }
.coach .cs-sinkbowl { fill: #f5f7f8; stroke: #7a8287; stroke-width: .7; } .coach .cs-faucet { stroke: #7a8287; stroke-width: 1.3; fill: none; stroke-linecap: round; }
.coach .cs-toiletbase .top, .coach .cs-toiletbase .side, .coach .cs-toiletbase .end { fill: #eef0f1; } .coach .cs-toiletseat { fill: #fff; stroke: #7a8287; stroke-width: .7; }
.coach .cs-bottle .side { fill: #dfe3e5; } .coach .cs-bottle .top { fill: #f1f3f4; } .coach .cs-bottle path { stroke: #5e676d; }
.coach .cs-valve path { fill: #8d959a; } .coach .cs-regulator .top, .coach .cs-regulator .side, .coach .cs-regulator .end { fill: #7a8287; }
.coach .cs-furnbox .top { fill: #4f585e; } .coach .cs-furnbox .side { fill: #3d4449; } .coach .cs-furnbox .end { fill: #31373b; }
.coach .cs-vent.far { fill: none; stroke: var(--text-3); stroke-width: .8; stroke-dasharray: 2 2; } .coach .cs-duct { stroke: #9aa2a6; stroke-width: 3; fill: none; stroke-linecap: round; opacity: .8; }
.coach .cs-cooktop { fill: #2a2f33; } .coach .cs-burner { fill: none; stroke: #b4bcc0; stroke-width: .9; }
.coach .cs-solarbox { fill: #2c3337; stroke: #15191b; stroke-width: .7; } .coach .cs-solarlcd { fill: #a9d68a; stroke: #15191b; stroke-width: .4; } .coach .cs-solarled { fill: #f2b50c; }
.coach .cs-detectorplate, .coach .cs-tstatplate, .coach .cs-outlet { fill: #fafafa; stroke: #555; stroke-width: .7; }
.coach .cs-fridgebox .top { fill: #eceeef; } .coach .cs-fridgebox .side { fill: #dcdfe1; } .coach .cs-fridgebox .end { fill: #ccd0d3; } .coach .cs-fridgesplit { stroke: #7a8287; stroke-width: .8; fill: none; }
.coach .cs-roofvent .top { fill: #f4f5f6; } .coach .cs-roofvent .side { fill: #e4e7e9; } .coach .cs-roofvent .end { fill: #d4d8db; }
.coach .cs-acshroud .top { fill: #f3f5f6; } .coach .cs-acshroud .side { fill: #e1e5e7; } .coach .cs-acshroud .end { fill: #d0d5d8; } .coach .cs-acgrille { stroke: #7a8287; stroke-width: .6; fill: none; }
.coach .cs-acceiling .top, .coach .cs-acceiling .side, .coach .cs-acceiling .end { fill: #e8ebec; }
.coach .cs-roomend { fill: var(--alu-mid); fill-opacity: .55; stroke: var(--text-2); stroke-width: 1.1; } .coach .cs-roomtop { fill: var(--alu-hi); fill-opacity: .6; stroke: var(--text-2); stroke-width: 1; } .coach .cs-roomside { fill: var(--alu-lo); fill-opacity: .55; stroke: var(--text-2); stroke-width: 1; }
.coach .cs-roomedge { stroke: var(--text-2); stroke-width: 1; fill: none; } .coach .cs-rail { stroke: #5e676d; stroke-width: 1.6; fill: none; stroke-dasharray: 1.6 1.6; }
.coach .cs-ventbase .top, .coach .cs-ventbase .side, .coach .cs-ventbase .end { fill: #e6e9ea; } .coach .cs-ventlid { fill: #f6f7f8; stroke: #7a8287; stroke-width: .6; }
.coach .cs-roller .top { fill: #f3f5f6; } .coach .cs-roller .side { fill: #dfe3e5; } .coach .cs-roller .end { fill: #cfd4d7; } .coach .cs-arm { stroke: #8d959a; stroke-width: 1.8; fill: none; }
.coach .cs-tread .top { fill: #a7b0b5; } .coach .cs-tread .side { fill: #8e979c; } .coach .cs-tread .end { fill: #79838a; } .coach .cs-steprail { stroke: #5e676d; stroke-width: 1.2; fill: none; }
.coach .cs-jack .top { fill: #8d959a; } .coach .cs-jack .side { fill: #6a7378; } .coach .cs-jack .end { fill: #5a6267; }
.coach .cs-jackpost .side { fill: #6a7378; } .coach .cs-jackpost .top { fill: #8d959a; }
.coach .cs-plug .top, .coach .cs-plug .side, .coach .cs-plug .end { fill: #2a2f33; } .coach .cs-cable { stroke: #2a2f33; stroke-width: 1.6; fill: none; stroke-linecap: round; } .coach .cs-cable.thin { stroke-width: 1; }
.coach .cs-breakaway .top, .coach .cs-breakaway .side, .coach .cs-breakaway .end { fill: #c8352b; }
.coach .cs-meterbody .top, .coach .cs-meterbody .side, .coach .cs-meterbody .end { fill: #2a2f33; }
.coach .cs-clipboard .top, .coach .cs-clipboard .side, .coach .cs-clipboard .end { fill: #6b4b2a; } .coach .cs-paper { fill: #fff; stroke: #999; stroke-width: .4; }

/* runs: hidden until a system is selected, then they flow */
.coach .cs-run { display: none; } .coach .cs-run.on { display: block; }
.coach .w-under { fill: none; stroke: var(--text); stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.coach .w { fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 5; animation: cs-flow 1.1s linear infinite; }
.coach .w-red { stroke: #e04a3f; } .coach .w-black { stroke: #9aa2a6; } .coach .w-white { stroke: #ffffff; } .coach .w-yellow { stroke: #f0bd2e; }
.coach .w-blue { stroke: #4da3e0; } .coach .w-gray { stroke: #b4bcc0; } .coach .w-air { stroke: #7fd3c9; } .coach .w-tstat { stroke: #b3a8e6; } .coach .w-trailer { stroke: #6cc986; }
@keyframes cs-flow { to { stroke-dashoffset: -24; } }

/* lit state */
.coach .cs-part { transition: opacity .25s ease; }
.coach.is-lit .cs-part:not(.hot) { opacity: .22; }
.coach.is-lit .cs-furn, .coach.is-lit .cs-l2, .coach.is-lit .cs-nearwall, .coach.is-lit .cs-roof, .coach.is-lit .cs-shell { opacity: .7; }
.coach .cs-part.hot { filter: drop-shadow(0 0 5px rgba(224,74,63,.6)) drop-shadow(0 0 1px rgba(224,74,63,.9)); }
.coach .cs-part.hot .cs-light { fill: #ffe98a; }
.coach .cs-part.hot .cs-lcd { fill: #d7ec84; }
.coach.lit-body .cs-roofseam { stroke: var(--primary); stroke-dasharray: 6 4; animation: cs-flow 1.2s linear infinite; }
.coach.lit-body .cs-window, .coach.lit-body .cs-door { stroke: var(--primary); stroke-width: 1.8; }
.coach.lit-body .cs-nearwall, .coach.lit-body .cs-roof { opacity: 1; }
.coach .cs-tagset { display: none; } .coach .cs-tagset.on { display: block; }
.coach .cs-leader { stroke: var(--text); stroke-width: 1; fill: none; }
.coach .cs-dot { fill: var(--primary); stroke: #fff; stroke-width: 1.3; }
.coach .cs-tag { font: 600 13px/1 var(--font); fill: var(--text); paint-order: stroke fill; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.coach .cs-hit { fill: transparent; cursor: pointer; pointer-events: all; }
@media (hover: none) { .coach .cs-hit { pointer-events: none; } }   /* phones pick with the chips */

/* power-up on first load */
.coach.boot .cs-part { animation: cs-pop .5s ease-out both; animation-delay: calc(var(--b, 11) * 170ms + 700ms); }
.coach.boot .cs-outline { stroke-dasharray: 2700; stroke-dashoffset: 2700; animation: cs-draw 1.2s ease-out forwards; }
.coach.boot .cs-nearwall, .coach.boot .cs-roof, .coach.boot .cs-l2, .coach.boot .cs-shell { animation: cs-fade .7s ease-out both; animation-delay: .5s; }
.coach.boot .cs-furn { animation: cs-fade .6s ease-out both; animation-delay: 1.1s; }
@keyframes cs-pop { 0% { opacity: 0; } 55% { opacity: 1; filter: drop-shadow(0 0 5px rgba(224,74,63,.55)); } 100% { opacity: 1; filter: none; } }
@keyframes cs-draw { to { stroke-dashoffset: 0; } }
@keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .coach .w, .coach.lit-body .cs-roofseam { animation: none; } }

/* dark: the ghost planes brighten, appliances stay as they are */
:root[data-theme="dark"] .coach .cs-ground { fill: rgba(0,0,0,.35); }
:root[data-theme="dark"] .coach .cs-wall.near { fill: rgba(255,255,255,.04); } :root[data-theme="dark"] .coach .cs-wall.front { fill: rgba(255,255,255,.06); }
:root[data-theme="dark"] .coach .cs-floor { fill-opacity: .5; }
:root[data-theme="dark"] .coach .cs-window { fill: rgba(132,182,210,.18); }
:root[data-theme="dark"] .coach .w-under { opacity: .75; stroke: #000; }
:root[data-theme="dark"] .coach .w-black { stroke: #c9cfd2; }
.coach .cs-roomfloor { fill: var(--alu-mid); fill-opacity: .7; stroke: var(--text-2); stroke-width: 1; }
.coach .cs-opening { fill: rgba(20,24,26,.05); stroke: var(--text-3); stroke-width: .8; stroke-dasharray: 3 2; }
.coach .cs-slide.hot, .coach .cs-fresh.hot { filter: drop-shadow(0 0 3px rgba(224,74,63,.45)); }
.coach-wrap { scroll-margin-top: 76px; }
@media (max-width: 600px) {
  .coach-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; scrollbar-width: thin; }
  .coach-wrap .coach { min-width: 540px; }
}

/* module cards carry a drawing from one of their lessons */
.trk.has-art { flex-wrap: wrap; padding-top: 0; overflow: hidden; }
.trk-art { flex: 1 0 100%; display: block; height: 164px; margin: 0 -22px 14px -26px; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--line); position: relative; }
.trk-art .lesson-art { width: 100%; height: auto; display: block; }
.trk-art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 36px; background: linear-gradient(180deg, rgba(245,246,246,0), var(--surface)); pointer-events: none; }
:root[data-theme="dark"] .trk-art::after { background: linear-gradient(180deg, rgba(29,34,37,0), var(--surface)); }
.trk.has-art .trk-ico { margin-top: 2px; }
.trk.has-art:hover .trk-art .lesson-art { transform: translateY(-6px); }
.trk-art .lesson-art { transition: transform .35s ease; }
@media (max-width: 760px) { .trk-art { height: 136px; } }
.trk.has-art .trk-here { top: 12px; right: 12px; background: var(--surface); padding: 4px 9px; border-radius: var(--pill); border: 1px solid var(--line); }

/* wiring list cards show the schematic */
.wr-listcard { padding-top: 0; overflow: hidden; }
.wr-cardart { display: block; height: 190px; margin: 0 -18px 14px; padding: 10px 14px 0; background: var(--surface); border-bottom: 1px solid var(--line); overflow: hidden; position: relative; }
.wr-cardart .wr-thumb { width: 100%; height: 100%; display: block; }
.wr-cardart::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30px; background: linear-gradient(180deg, rgba(245,246,246,0), var(--surface)); pointer-events: none; }
:root[data-theme="dark"] .wr-cardart::after { background: linear-gradient(180deg, rgba(29,34,37,0), var(--surface)); }
.wr-thumb .wr-hit, .wr-thumb .wr-tphit { display: none; }
.wr-thumb .wr-flow { display: none; }

/* route transitions: the page content cross-fades and lifts a touch; the header stays put */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 120ms ease-out both vt-out; }
::view-transition-new(root) { animation: 220ms ease-out both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.topbar { view-transition-name: topbar; }
::view-transition-old(topbar), ::view-transition-new(topbar) { animation: none; }
@media (max-width: 760px) { .nav { view-transition-name: tabbar; } ::view-transition-old(tabbar), ::view-transition-new(tabbar) { animation: none; } }

/* search overlay: quiet rows, one highlighted at a time */
.sr-item { border: 1px solid transparent; background: transparent; cursor: pointer; }
.sr-item:hover, .sr-item.active { background: var(--surface-2); border-color: var(--line); }
.sr-item .tt b { font-weight: 700; }
.search-field { padding: 14px 16px; }
.search-field input { font-size: 1.12rem; }
.search-field input::placeholder { color: var(--text-3); }

/* cases: your own readiness cells */
.cx-boardwrap { margin: 18px 0 22px; }
.cx-boardhead { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 0 0 10px; font-size: .92rem; color: var(--text-3); }
.cx-boardhead b { color: var(--text); font-weight: 700; }
.cx-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.cx-cell { display: grid; gap: 1px; justify-items: start; padding: 10px 12px 9px; border-radius: 10px; border: 1px solid transparent; text-align: left; cursor: pointer; color: #10110f; line-height: 1.15; transition: transform .14s, box-shadow .14s; }
.cx-cell b { font: 700 1.45rem/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cx-cell span { font: 700 .8rem/1.2 var(--font); }
.cx-cell small { font: 500 .74rem/1.2 var(--font); opacity: .8; }
.cx-cell.g { background: #8fc39d; } .cx-cell.m { background: #e7c77a; } .cx-cell.l { background: #e39b91; }
.cx-cell.n { background: var(--surface-2); color: var(--text-3); border-color: var(--line); }
.cx-cell:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.cx-cell[aria-pressed="true"] { outline: 3px solid var(--text); outline-offset: 1px; }
:root[data-theme="dark"] .cx-cell.g { background: #2f6b43; color: #e6e9ea; } :root[data-theme="dark"] .cx-cell.m { background: #7a5e1c; color: #e6e9ea; } :root[data-theme="dark"] .cx-cell.l { background: #7f352c; color: #e6e9ea; }
.cx-cell.all { background: var(--text); color: var(--bg); border-color: var(--text); }
.cx-cell.all[aria-pressed="false"] { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.cx-filters { border-top: 0; padding-top: 0; }

/* 3D labs page */
.pv-how { margin: 14px 0 0; padding: 0 0 0 22px; color: var(--text-2); font-size: .98rem; display: grid; gap: 6px; }
.pv-how b { color: var(--text); font-weight: 700; }
.pv-card-say { padding: 6px 14px 0; font-size: .92rem; line-height: 1.4; color: var(--text-2); font-style: italic; }
.pv-card-meta { padding: 6px 14px 0; font-size: .82rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pv-grid { margin-top: 26px; }
.pv-honest { font-size: .95rem; color: var(--text-2); }
.pv-honest b { color: var(--text); }
@media (max-width: 760px) { .pv-hero { grid-template-columns: 1fr; } }

/* fault codes: appliances first */
.code-topic { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 10px; }
.code-topic > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 18px; cursor: pointer; list-style: none; }
.code-topic > summary::-webkit-details-marker { display: none; }
.code-topic > summary::after { content: "›"; margin-left: auto; color: var(--text-3); font-size: 1.3rem; line-height: 1; transition: transform .15s; }
.code-topic[open] > summary::after { transform: rotate(90deg); }
.code-topic > summary b { font: 700 1.05rem/1.3 var(--font); }
.code-topic-n { color: var(--text-3); font-size: .88rem; font-variant-numeric: tabular-nums; }
.code-topic-eg { flex: 1 1 100%; color: var(--text-3); font-size: .86rem; font-family: var(--mono); }
.code-topic-body { padding: 0 14px 14px; }
@media (max-width: 760px) { .code-topic > summary { padding: 12px 14px; } }
.code-topic > summary { position: relative; padding-right: 40px; }
.code-topic > summary::after { position: absolute; right: 16px; top: 12px; margin: 0; }

/* lesson rows on a module page carry a small copy of the lesson's drawing */
.lesson-row.has-thumb { align-items: center; }
.lesson-thumb { flex: none; width: 96px; height: 54px; border-radius: 6px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-soft); display: grid; place-items: center; }
.lesson-thumb .lesson-art { width: 100%; height: 100%; display: block; }
@media (max-width: 600px) { .lesson-thumb { width: 72px; height: 42px; } }

/* wiring detail: schematic beside its test points on a wide screen */
.wr-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; align-items: start; }
@media (min-width: 980px) {
  .wr-cols { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
  .wr-stage { position: sticky; top: 76px; }
  .wr-side .wr-checks-title:first-child { margin-top: 14px; }
}
.wr-part rect { fill: var(--surface); stroke: var(--text-2); stroke-width: 1.1; rx: 3; }
.wr-pname { font: 700 10.5px/1 var(--display); letter-spacing: .02em; }
.wr-psub { font: 500 7.5px/1 var(--font); fill: var(--text-3); }
.wr-edge { stroke: #4a5156; stroke-width: 4.6; }
.wr-core { stroke-width: 2.8; }
.wr-tp circle { stroke-width: 1.4; }
@media (min-width: 980px) { .wr-practice .wr-cols { grid-template-columns: minmax(0, 620px); justify-content: center; } .wr-practice .wr-stage { position: static; } }
.hm-coach.is-dx { margin: 8px 0 28px; }
.cp-fixes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.cp-fixes .btn { padding: 8px 12px; }
.lesson-thumb .lesson-art, .trk-art .lesson-art { min-width: 0 !important; }
.coach .cs-pedestalbox .top { fill: #9aa2a6; } .coach .cs-pedestalbox .side { fill: #7d868b; } .coach .cs-pedestalbox .end { fill: #6a7378; }

/* lesson rail: the module's lessons beside the lesson on a wide screen */
.lesson-layout { display: grid; grid-template-columns: minmax(0, 880px); justify-content: center; gap: 44px; }
.lesson-rail { display: none; }
@media (min-width: 1240px) {
  .lesson-layout { grid-template-columns: minmax(0, 880px) 240px; }
  .lesson-rail { display: block; position: sticky; top: 88px; align-self: start; padding-top: 58px; }
}
.rail-kicker { margin: 0 0 8px; font: 600 .82rem/1.2 var(--font); }
.rail-kicker a { color: var(--text-3); text-decoration: none; }
.rail-kicker a:hover { color: var(--text); text-decoration: underline; }
.rail-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.rail-list li a { display: flex; gap: 10px; align-items: baseline; padding: 6px 0 6px 12px; margin-left: -2px; border-left: 2px solid transparent; color: var(--text-2); text-decoration: none; font-size: .9rem; line-height: 1.35; }
.rail-list li a:hover { color: var(--text); }
.rail-list li.is-here a { color: var(--text); font-weight: 700; border-left-color: var(--primary); }
.rail-list li.is-done .rail-mark { color: var(--green); }
.rail-mark { flex: none; width: 22px; font: 700 .76rem/1.6 var(--mono); color: var(--text-3); }
.rail-progress { margin: 12px 0 0; font-size: .82rem; color: var(--text-3); display: grid; gap: 6px; }
.rail-progress .course-rail { display: block; }
.rail-case { display: block; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; }
.rail-case b { display: block; font-size: .88rem; } .rail-case span { display: block; font-size: .84rem; color: var(--text-2); margin-top: 2px; }
.rail-case:hover { border-color: var(--text-3); }
@media (min-width: 1240px) { .lesson-rail { max-height: calc(100vh - 100px); overflow: auto; scrollbar-width: thin; } }
.lesson-layout > .lesson { min-width: 0; margin: 0; width: 100%; }   /* auto margins would size the grid item to its content */
.trk-coach { margin: 4px 0 10px; }
.coach-static .cs-hits { display: none; }
.coach-static .cs-run .w { animation-duration: 1.6s; }

/* the half-second before the content arrives: quiet bars where the page is about to be */
.boot-skel { max-width: var(--maxw); margin: 56px auto 0; padding: 0 16px; display: grid; gap: 14px; }
.boot-skel i { display: block; height: 18px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: skel 1.1s linear infinite; }
.boot-skel i:nth-child(1) { height: 52px; width: 46%; } .boot-skel i:nth-child(2) { width: 62%; } .boot-skel i:nth-child(3) { width: 38%; } .boot-skel i:nth-child(4) { height: 320px; margin-top: 18px; border-radius: var(--radius-lg); }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .boot-skel i { animation: none; } }

/* beta feedback form */
.beta-page { max-width: 760px; }
.beta-form { display: grid; gap: 16px; margin-top: 22px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.beta-field { display: grid; gap: 6px; }
.beta-field > span { font: 600 .9rem/1.3 var(--font); color: var(--text); }
.beta-field select, .beta-field textarea { width: 100%; }
.beta-field textarea { resize: vertical; min-height: 84px; }
.beta-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--text-2); line-height: 1.45; }
.beta-consent input { margin-top: 4px; flex: none; }
.beta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.beta-saved { padding: 12px 14px; border-left: 4px solid var(--green); background: var(--green-tint); color: var(--text); border-radius: 8px; }
.beta-page .shop-footnote { font-size: .82rem; color: var(--text-3); margin: 0; }
.beta-page > .btn-sm { margin-top: 18px; }
@media (min-width: 700px) { .beta-form { grid-template-columns: 1fr 1fr; } .beta-form .beta-field:has(textarea), .beta-form .beta-consent, .beta-form .beta-actions, .beta-form .shop-footnote, .beta-form .beta-saved { grid-column: 1 / -1; } }
.about-page { max-width: 760px; }
.about-page .lede { font-size: 1.15rem; color: var(--text-2); max-width: 62ch; }
.about-sec { margin-top: 30px; }
.about-sec h2 { font-size: 1.3rem; margin: 0 0 10px; }
.about-sec p { color: var(--text-2); max-width: 66ch; }
.about-list { margin: 0; padding-left: 20px; color: var(--text-2); display: grid; gap: 8px; max-width: 66ch; }

/* ---- courses inside a system: a jump list, then each course with its lessons ---- */
.course-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; }
.course-jump .chip { font-size: .86rem; padding: 7px 12px; cursor: pointer; background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.course-jump .chip:hover { border-color: var(--text); }
.course-jump .chip small { font: 600 .74rem var(--mono); color: var(--text-3); }
.course-jump .chip.is-done { border-color: var(--green); }
.course-sec { margin-top: 34px; scroll-margin-top: 90px; }
.course-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 12px; }
.course-sec-head h2 { font: 700 clamp(1.4rem, 2.6vw, 1.75rem)/1.1 var(--display); letter-spacing: -.015em; margin: 2px 0 6px; }
.course-sec-head p { margin: 0 0 8px; color: var(--text-2); max-width: 62ch; }
.course-sec-head .progress-line { margin: 0; }
.course-no { font: 600 .86rem var(--font); color: var(--text-3); }
.course-sec.is-complete .course-no { color: var(--green); }
.course-sec .module .lesson-row:last-child { border-bottom: 0; }
.course-sec .lesson-mark { width: 40px; flex: none; }
.lesson-name small.lesson-min { display: block; font: 500 .8rem var(--font); color: var(--text-3); margin-top: 2px; }
@media (max-width: 640px) { .course-sec-head { flex-direction: column; align-items: stretch; } .course-sec-head .btn { align-self: flex-start; } }

/* ---- long lessons: the short version, a contents list, sections with tables, procedures and warnings ---- */
.lesson.is-long .lesson-lede { max-width: 58ch; }
.lesson-short { margin: 26px 0 8px; padding: 18px 22px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-width: 72ch; }
.lesson-short h2 { font: 700 1.05rem var(--font); letter-spacing: 0; margin: 0 0 4px; color: var(--text-2); }
.lesson-short .lesson-points { margin: 10px 0 12px; gap: 9px; }
.lesson-toc { margin: 22px 0 6px; max-width: 72ch; }
.lesson-toc b { display: block; font: 700 .95rem var(--font); color: var(--text-2); margin-bottom: 6px; }
.lesson-toc ol { margin: 0; padding-left: 22px; display: grid; gap: 2px; }
.lesson-toc li::marker { color: var(--text-3); font-weight: 600; }
.lesson-toc button { background: none; border: 0; padding: 3px 0; font: 500 .98rem var(--font); color: var(--text); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.lesson-toc button:hover { text-decoration-color: var(--text); }
.lesson-sec { margin: 38px 0 0; max-width: 72ch; scroll-margin-top: 90px; }
.lesson-sec h2 { font: 700 clamp(1.3rem, 2.4vw, 1.6rem)/1.15 var(--display); letter-spacing: -.012em; margin: 0 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.lesson-sec p { line-height: 1.68; margin: 0 0 14px; }
.lesson-sec .lesson-fig { max-width: none; }
.sec-list { margin: 4px 0 16px; padding-left: 22px; display: grid; gap: 7px; line-height: 1.55; }
.sec-list li::marker { color: var(--text-3); }
.sec-steps { margin: 6px 0 18px; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 10px; }
.sec-steps li { counter-increment: st; position: relative; padding: 12px 14px 12px 52px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); line-height: 1.5; }
.sec-steps li::before { content: counter(st); position: absolute; left: 12px; top: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 .85rem var(--font); background: var(--text); color: var(--bg); }
.sec-table-wrap { overflow-x: auto; margin: 6px 0 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.sec-table { width: 100%; border-collapse: collapse; font-size: .94rem; line-height: 1.42; }
.sec-table th, .sec-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.sec-table thead th { font: 700 .86rem var(--font); color: var(--text-2); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.sec-table tbody th { font-weight: 700; white-space: nowrap; }
.sec-table tbody tr:last-child th, .sec-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) { .sec-table tbody th { white-space: normal; } .sec-table { font-size: .9rem; } }
.sec-warn { margin: 6px 0 18px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--amber-tint); color: var(--text); border-left: 5px solid var(--amber); line-height: 1.5; }
.sec-warn b { color: var(--amber); }
:root[data-theme="dark"] .sec-warn { background: #2e2615; } :root[data-theme="dark"] .sec-warn b { color: #e8b858; }
.quick-check.multi { padding-top: 22px; }
.check-q + .check-q { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.check-no { display: block; font: 600 .86rem var(--font); color: var(--text-3); margin-top: 8px; }
.check-q h2 { font-family: var(--font); font-weight: 700; font-size: 1.18rem; line-height: 1.35; letter-spacing: 0; margin: 4px 0 14px; }
.check-tally { margin: 18px 0 0; font-weight: 700; }
.check-tally:empty { display: none; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--text); text-decoration: underline; cursor: pointer; }
.lesson-sources { margin: 30px 0 0; max-width: 72ch; font-size: .9rem; color: var(--text-2); }
.lesson-sources h2 { font: 700 1rem var(--font); letter-spacing: 0; margin: 0 0 6px; color: var(--text-2); }
.lesson-sources ul { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; }
.lesson-sources p { margin: 0; color: var(--text-3); }
.rail-course { margin: -2px 0 10px; font: 700 .95rem/1.25 var(--display); }
.rail-more { margin: 18px 0 6px; font: 600 .8rem var(--font); color: var(--text-3); }
.rail-courses { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rail-courses a { font-size: .86rem; color: var(--text-2); }
.rail-courses a:hover { color: var(--text); }

/* course drawings (lesson-art-courses.js) */
.lesson-art .ac-pcb { fill: #1f4a33; stroke: var(--art-stroke); stroke-width: 1.4; }
.lesson-art .ac-spade { fill: #c9a24a; stroke: #6b5520; stroke-width: 1; }
.lesson-art .ac-conn { fill: #e9ebec; stroke: #2b2f33; stroke-width: 1.2; }
.lesson-art .ac-pinhole { fill: #2b2f33; }
.lesson-art .ac-button { fill: #d9dcde; stroke: #111; stroke-width: 1.4; }
.lesson-art .ac-scale { stroke: var(--text); stroke-width: 2; fill: none; }
.lesson-art .ac-tick { stroke-width: 2.4; fill: none; } .lesson-art .ac-tick.good { stroke: var(--green); } .lesson-art .ac-tick.warn { stroke: #d9a21b; } .lesson-art .ac-tick.bad { stroke: var(--red); }
.lesson-art .ac-band.good { fill: var(--green); opacity: .35; }
.lesson-art .ac-tap { fill: var(--art-fill); stroke: var(--text); stroke-width: 1.6; }
.lesson-art .ac-hold { fill: var(--text); } .lesson-art .ac-hold + text { fill: var(--bg); font-weight: 700; }
.lesson-art .ac-room { fill: rgba(140,150,156,.18); stroke: var(--art-stroke); stroke-width: 1.6; }
.lesson-art .ac-ghost { stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 5 4; fill: none; }
.lesson-art .ac-column { fill: url(#art-steel-g); stroke: var(--art-stroke); stroke-width: 1.3; }
.lesson-art .ac-roomwall { fill: var(--art-fill); stroke: var(--art-stroke); stroke-width: 1.3; }
.lesson-art .ac-teeth { stroke: var(--art-stroke); stroke-width: 1.4; }
.lesson-art .ac-gear { fill: #9aa3a8; stroke: var(--art-stroke); stroke-width: 1.3; }
.lesson-art .ac-bulb { fill: #2b2f33; stroke: #111; }
.lesson-art .ac-wipe { fill: #4a5257; }
.lesson-art .ac-sealant { fill: none; stroke: #d9a21b; stroke-width: 3; }
:root[data-theme="dark"] .lesson-art .ac-room { fill: rgba(255,255,255,.06); }
.lesson-art .ac-chip.good { fill: var(--green); } .lesson-art .ac-chip.warn { fill: #d9a21b; } .lesson-art .ac-chip.bad { fill: var(--red); }
.lesson-art .ac-room-side { fill: rgba(140,150,156,.18); stroke: var(--art-stroke); stroke-width: 1.5; }
.lesson-art .ac-dim { stroke: var(--primary); stroke-width: 1.4; fill: none; }
:root[data-theme="dark"] .lesson-art .ac-room-side { fill: rgba(255,255,255,.06); }
.lesson-art .ac-roombox { fill: rgba(140,150,156,.16); stroke: var(--art-stroke); stroke-width: 2; }
.lesson-art .ac-flange { stroke: var(--art-stroke); stroke-width: 4; stroke-linecap: round; fill: none; }
.lesson-art .ac-bulbseal { fill: #4a5257; stroke: #111; stroke-width: .8; } .lesson-art .ac-bulbseal.on { fill: var(--green); }
.lesson-art .ac-wiperline { stroke: #2b2f33; stroke-width: 3; fill: none; stroke-linecap: round; }
.lesson-art .ac-opening { fill: var(--bg); stroke: var(--art-stroke); stroke-width: 1.2; }
.lesson-art .ac-diag { stroke: var(--primary); stroke-width: 1.4; stroke-dasharray: 6 4; fill: none; }
:root[data-theme="dark"] .lesson-art .ac-wiperline { stroke: #c9d0d4; } :root[data-theme="dark"] .lesson-art .ac-roombox { fill: rgba(255,255,255,.05); }
.lesson-art .ac-jack { stroke: var(--art-stroke); stroke-width: 1.3; } .lesson-art .ac-jack.front { fill: #2c6fb0; } .lesson-art .ac-jack.mid { fill: #9aa3a8; } .lesson-art .ac-jack.rear { fill: #c5322a; }
.lesson-art .ac-sensor { fill: var(--art-dark); stroke: var(--art-stroke); }
.lesson-art .ac-fabric { fill: none; stroke: #2c6fb0; stroke-width: 3; } .lesson-art .ac-roller { fill: #9aa3a8; stroke: var(--art-stroke); stroke-width: 1.3; }
.lesson-art .ac-arm { stroke: var(--art-stroke); stroke-width: 3; } .lesson-art .ac-pool { fill: #6aa7de; opacity: .7; stroke: #2c6fb0; stroke-width: 1; }
.lesson-art .ac-leaf { fill: #8a6a2a; } .lesson-art .ac-crush { fill: var(--red); opacity: .9; } .lesson-art .ac-crushx { stroke: #fff; stroke-width: 2; fill: none; }
.lesson-art .ac-jackstand { fill: #d9a21b; stroke: var(--art-stroke); stroke-width: 1.2; }

/* shaded cutaway illustrations: one material per kind of part, three tones each */
.lesson-art .is .f-t, .lesson-art .is .f-l, .lesson-art .is .f-r { stroke: rgba(20,24,27,.55); stroke-width: .7; stroke-linejoin: round; }
.lesson-art .is.wall .f-t { fill: #f1eee8; } .lesson-art .is.wall .f-l { fill: #e2ddd3; } .lesson-art .is.wall .f-r { fill: #d2ccc0; }
.lesson-art .is.wall.cut .f-t { fill: #e9c9b3; }
.lesson-art .is.room .f-t { fill: #fbfaf7; fill-opacity: .9; } .lesson-art .is.room .f-l { fill: #ece8e0; fill-opacity: .9; } .lesson-art .is.room .f-r { fill: #ddd7cc; fill-opacity: .9; }
.lesson-art .is.room.front .f-l { fill-opacity: .55; } .lesson-art .is.room.top .f-t { fill-opacity: .55; } .lesson-art .is.room.side .f-r { fill: #e4ded3; fill-opacity: .6; }
.lesson-art .is.alum .f-t { fill: #d9dee1; } .lesson-art .is.alum .f-l { fill: #b9c1c6; } .lesson-art .is.alum .f-r { fill: #9ea8ae; }
.lesson-art .is.steel .f-t { fill: #a9b1b6; } .lesson-art .is.steel .f-l { fill: #8a9399; } .lesson-art .is.steel .f-r { fill: #6f797f; }
.lesson-art .is.frame .f-t { fill: #5d666c; } .lesson-art .is.frame .f-l { fill: #474f54; } .lesson-art .is.frame .f-r { fill: #3a4146; }
.lesson-art .is.blue .f-t { fill: #6fa3dd; } .lesson-art .is.blue .f-l { fill: #3f78bd; } .lesson-art .is.blue .f-r { fill: #2f62a3; }
.lesson-art .is.motor .f-t { fill: #6b7378; } .lesson-art .is.motor .f-l { fill: #474f54; } .lesson-art .is.motor .f-r { fill: #353c41; }
.lesson-art .is.brass .f-t { fill: #f0cf74; } .lesson-art .is.brass .f-l { fill: #d4a93a; } .lesson-art .is.brass .f-r { fill: #b58b25; }
.lesson-art .is.red .f-t { fill: #e36a5f; } .lesson-art .is.red .f-l { fill: #c5322a; } .lesson-art .is.red .f-r { fill: #a1271f; }
.lesson-art .is .f-tooth { fill: #6fa3dd; stroke: #23518a; stroke-width: .7; } .lesson-art .is .f-hub { fill: #23518a; }
.lesson-art .is .tooth { stroke: #8a6a1c; stroke-width: .9; }
.lesson-art .is-move path { stroke: #c5322a; stroke-width: 2.6; fill: none; } .lesson-art .is-move path[marker-end] { marker-end: url(#art-head); }
.lesson-art .is-line { stroke: #2f62a3; stroke-width: 2.4; fill: none; }
:root[data-theme="dark"] .lesson-art .is .f-t, :root[data-theme="dark"] .lesson-art .is .f-l, :root[data-theme="dark"] .lesson-art .is .f-r { stroke: rgba(0,0,0,.6); }
:root[data-theme="dark"] .lesson-art .is.wall .f-t { fill: #4a5156; } :root[data-theme="dark"] .lesson-art .is.wall .f-l { fill: #3e4549; } :root[data-theme="dark"] .lesson-art .is.wall .f-r { fill: #343a3e; }
:root[data-theme="dark"] .lesson-art .is.room .f-t { fill: #59616a; } :root[data-theme="dark"] .lesson-art .is.room .f-l { fill: #4b535b; } :root[data-theme="dark"] .lesson-art .is.room .f-r { fill: #40474e; }
.lesson-art .is.room.solid .f-t, .lesson-art .is.room.solid .f-l, .lesson-art .is.room.solid .f-r { fill-opacity: 1; }
.lesson-art .is.room.flange .f-t { fill: #e8e3d9; fill-opacity: 1; } .lesson-art .is.room.flange .f-l { fill: #d7d1c5; fill-opacity: 1; } .lesson-art .is.room.flange .f-r { fill: #c6bfb1; fill-opacity: 1; }
.lesson-art .is.wall.cut .f-l { fill: #e2ddd3; } .lesson-art .is.wall.cut .f-r { fill: #e9b99a; }
:root[data-theme="dark"] .lesson-art .is.room.flange .f-t { fill: #636b74; } :root[data-theme="dark"] .lesson-art .is.room.flange .f-l { fill: #565e66; } :root[data-theme="dark"] .lesson-art .is.room.flange .f-r { fill: #4b525a; }
.lesson-art .is.wall.cut .f-r { fill: #d2ccc0; }
.lesson-art .ac-rackbar { fill: #d4a93a; stroke: #8a6a1c; stroke-width: 1; } .lesson-art .ac-rackteeth { fill: #d4a93a; stroke: #8a6a1c; stroke-width: 1; }
.lesson-art .ac-gear2 { fill: #3f78bd; stroke: #23518a; stroke-width: 1; } .lesson-art .ac-gearhub { fill: #23518a; }
.lesson-art .ac-turn { fill: none; stroke: #c5322a; stroke-width: 2.4; } .lesson-art .ac-push path { stroke: #c5322a; stroke-width: 2.4; }
.lesson-art .is.room.glass .f-t, .lesson-art .is.room.glass .f-l, .lesson-art .is.room.glass .f-r { fill-opacity: .22; stroke: rgba(20,24,27,.45); }
.lesson-art .is-hose { stroke: #1f2427; stroke-width: 3; fill: none; stroke-linecap: round; }
:root[data-theme="dark"] .lesson-art .is-hose { stroke: #aab3b8; }
.lesson-art .is-wallline { stroke: var(--text-3); stroke-width: 1.6; stroke-dasharray: 8 5; fill: none; }
.lesson-art .is-cable { stroke: #1f2427; stroke-width: 1.8; fill: none; } .lesson-art .is-cable.hidden { stroke-dasharray: 4 3; opacity: .55; }
.lesson-art .is-chain { stroke: #6b7378; stroke-width: 3.2; stroke-dasharray: 2 1.5; fill: none; }
:root[data-theme="dark"] .lesson-art .is-cable { stroke: #d9dee1; }
.lesson-art .ac-frame { fill: #474f54; } .lesson-art .ac-tube { fill: #b9c1c6; stroke: var(--art-stroke); stroke-width: 1.2; } .lesson-art .ac-leg { fill: #dfe3e6; stroke: var(--art-stroke); stroke-width: 1.2; }
.lesson-art .ac-screw { stroke: #8a6a1c; stroke-width: 3; stroke-dasharray: 3 2; fill: none; } .lesson-art .ac-foot { fill: #2b2f33; }
.lesson-art .ac-gearbox { fill: #3f78bd; stroke: #23518a; } .lesson-art .ac-motor { fill: #474f54; stroke: #23292c; } .lesson-art .ac-plug { fill: #c5322a; stroke: #fff; stroke-width: 1.5; }

/* home: the in-the-bay tools as big tiles */
.hm-bay { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.hm-bay-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px 18px; min-height: 84px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .12s, background .12s; }
.hm-bay-tile:hover { border-color: var(--text); background: var(--surface-2); }
.hm-bay-ico { grid-row: 1 / span 2; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--text); color: var(--bg); }
.hm-bay-tile b { font: 700 1.08rem/1.2 var(--font); }
.hm-bay-tile small { color: var(--text-2); font-size: .86rem; line-height: 1.3; }
@media (max-width: 900px) { .hm-bay { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .hm-bay-tile { padding: 14px; min-height: 92px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 6px; } .hm-bay-ico { grid-row: auto; width: 40px; height: 40px; } }
.hm-maker { margin: 48px 0 0; padding: 22px 24px; border-left: 5px solid var(--text); background: var(--surface); border-radius: var(--radius); max-width: 760px; }
.hm-maker h2 { font: 700 1.4rem/1.15 var(--display); margin: 0 0 8px; }
.hm-maker p { margin: 0 0 8px; line-height: 1.6; color: var(--text-2); max-width: 64ch; }
.safety-box { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 18px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--amber-tint); border-left: 5px solid var(--amber); max-width: 860px; }
.safety-box svg { flex: none; color: var(--amber); margin-top: 2px; }
.safety-box p { margin: 0; line-height: 1.5; font-size: .96rem; }
.safety-box b { color: var(--amber); }
:root[data-theme="dark"] .safety-box { background: #2e2615; } :root[data-theme="dark"] .safety-box b, :root[data-theme="dark"] .safety-box svg { color: #e8b858; }
.lab-clip { width: 100%; height: auto; display: block; border-radius: var(--radius); background: #15191b; box-shadow: var(--shadow-2); aspect-ratio: 11 / 7; object-fit: cover; }
.pv-teaser-shots:has(.lab-clip) { grid-template-columns: 1fr; }

/* Server-rendered page text, shown until the app boots (and read by crawlers). */
.prerender { max-width: 760px; margin: 0 auto; padding: 28px 16px 60px; color: var(--text); }
.prerender h1 { font-family: var(--display); font-size: 2rem; letter-spacing: -.02em; margin: 0 0 12px; }
.prerender h2 { font-size: 1.15rem; margin: 26px 0 8px; }
.prerender p, .prerender li { line-height: 1.55; }
.prerender table { border-collapse: collapse; margin: 10px 0; } .prerender td, .prerender th { border: 1px solid var(--line); padding: 5px 9px; text-align: left; }
.prerender nav { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .95rem; }

.st-mgr { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 14px 18px; margin: 18px 0; }
.st-mgr h2 { font-family: var(--font); font-size: 1.1rem; margin: 0 0 6px; } .st-mgr p { margin: 0 0 6px; }

/* ---------- Crewline shop board: ruled and tabular, a service department's sheet, not a game screen ---------- */
.sh-cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; margin-bottom: 12px; }
.sh-cardhead h2 { margin: 0; font-size: 1.22rem; }
.sh-cardhead .sh-fine { margin: 0; font-size: .86rem; }
.cl-main .sh-card { border-radius: var(--radius); padding: 20px 22px; }

/* the four numbers: one strip, hairline dividers */
.cl-stats4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 18px 0 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cl-stats4 .sh-stat { border: 0; border-left: 1px solid var(--line-soft); border-radius: 0; background: none; padding: 14px 18px 16px; display: grid; gap: 4px; align-content: start; }
.cl-stats4 .sh-stat:first-child { border-left: 0; }
.cl-stats4 .sh-stat b { font: 700 1.9rem/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cl-stats4 .sh-stat span { font-size: .84rem; line-height: 1.35; color: var(--text-3); }
@media (max-width: 760px) { .cl-stats4 { grid-template-columns: 1fr 1fr; } .cl-stats4 .sh-stat:nth-child(3) { border-left: 0; } .cl-stats4 .sh-stat:nth-child(n+3) { border-top: 1px solid var(--line-soft); } }

/* needs your attention: a ruled list */
.sh-ins-grid { display: grid; border-top: 1px solid var(--line); }
.sh-ins { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.sh-ins:last-child { border-bottom: 0; padding-bottom: 2px; }
.sh-ins-k { font: 600 .88rem/1.4 var(--font); color: var(--text-3); }
.sh-ins-t { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--text); }
.sh-ins-b .sh-msg { margin: 4px 0 0; font-size: .84rem; }
.sh-ins-a { align-self: center; }
@media (max-width: 640px) { .sh-ins { grid-template-columns: 1fr; } .sh-ins-a { justify-self: start; margin-top: 6px; } }

/* skills by system: a real table */
.sh-heat-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; -webkit-overflow-scrolling: touch; }
.sh-mx { border-collapse: collapse; width: 100%; min-width: 640px; font-variant-numeric: tabular-nums; }
.sh-mx th, .sh-mx td { border: 1px solid var(--line-soft); }
.sh-mx thead th { font: 600 .76rem/1.2 var(--font); color: var(--text-3); padding: 6px 2px 7px; text-align: center; border-top: 0; vertical-align: bottom; }
.sh-mx .sh-mx-name { text-align: left; font: 600 .9rem/1.2 var(--font); color: var(--text); padding: 0 12px 0 0; white-space: nowrap; border-left: 0; position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 128px; }
.sh-mx thead .sh-mx-name { color: var(--text-3); font-size: .76rem; vertical-align: bottom; padding-bottom: 7px; }
.sh-mx tr > :last-child { border-right: 0; }
.sh-mx tbody tr:last-child > * { border-bottom-color: var(--line-strong); }
.sh-mx tfoot th, .sh-mx tfoot td { border-top: 2px solid var(--line-strong); border-bottom: 0; font-weight: 800; }
.sh-mx tfoot td { height: 38px; }
.sh-hc { display: grid; place-items: center; height: 32px; min-width: 40px; font: 600 .86rem var(--font); font-variant-numeric: tabular-nums; color: var(--text); text-align: center; vertical-align: middle; }
td.sh-hc { display: table-cell; }
.sh-hc[data-step="0"] { background: var(--surface); color: var(--text-3); font-weight: 400; }
.sh-hc[data-step="1"], .sh-mx-scale i[data-step="1"] { background: color-mix(in srgb, var(--blue) 7%, var(--surface)); }
.sh-hc[data-step="2"], .sh-mx-scale i[data-step="2"] { background: color-mix(in srgb, var(--blue) 18%, var(--surface)); }
.sh-hc[data-step="3"], .sh-mx-scale i[data-step="3"] { background: color-mix(in srgb, var(--blue) 34%, var(--surface)); }
.sh-hc[data-step="4"], .sh-mx-scale i[data-step="4"] { background: color-mix(in srgb, var(--blue) 56%, var(--surface)); }
.sh-hc[data-step="5"], .sh-mx-scale i[data-step="5"] { background: color-mix(in srgb, var(--blue) 80%, var(--surface)); }
.sh-hc[data-step="4"], .sh-hc[data-step="5"] { color: #fff; }
.sh-hc.gap, .sh-mx-gapk { color: var(--red); font-weight: 800; }
.sh-hc.learned, .sh-mx-key em { font-style: italic; text-decoration: underline dotted; text-underline-offset: 3px; }
.sh-mx-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 12px; font-size: .82rem; color: var(--text-3); }
.sh-mx-key em, .sh-mx-gapk { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.sh-mx-key .sh-mx-gapk { color: var(--red); }
.sh-mx-scale { display: inline-flex; align-items: center; gap: 0; }
.sh-mx-scale i { display: block; width: 22px; height: 12px; border: 1px solid var(--line-soft); border-left: 0; }
.sh-mx-scale i[data-step="1"] { border-left: 1px solid var(--line-soft); }
.sh-mx-scale span { margin: 0 6px; font-variant-numeric: tabular-nums; }

/* new hires: a track with today's expected point marked */
.sh-ramps { display: grid; border-top: 1px solid var(--line); }
.sh-ramp { display: grid; grid-template-columns: 170px minmax(0, 1fr) 150px 100px; gap: 6px 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.sh-ramp:last-child { border-bottom: 0; padding-bottom: 2px; }
.sh-ramp-who { display: grid; gap: 1px; } .sh-ramp-who b { font-size: .95rem; } .sh-ramp-who .sh-fine { font-size: .8rem; }
.sh-ramp-track { position: relative; height: 10px; background: var(--surface-3); border-radius: 2px; }
.sh-ramp-track i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--text); border-radius: 2px; min-width: 2px; }
.sh-ramp-track u { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--red); text-decoration: none; }
.sh-ramp-num { white-space: nowrap; font-size: .86rem; font-variant-numeric: tabular-nums; color: var(--text-2); }
.sh-ramp-pace { font-size: .86rem; font-weight: 600; color: var(--text-3); }
.sh-ramp-pace.low { color: var(--red); } .sh-ramp-pace.good { color: var(--green); }
@media (max-width: 640px) { .sh-ramp { grid-template-columns: 1fr auto; } .sh-ramp-track { grid-column: 1 / -1; grid-row: 2; } .sh-ramp-num { grid-row: 3; } .sh-ramp-pace { grid-row: 3; text-align: right; } }

/* the tech's own scores use the same cells */
.cl-myh .sh-hc { border: 1px solid var(--line-soft); border-radius: 3px; height: 38px; }
.cl-main .btn-primary { background: #1f5f86; border-color: #174a69; box-shadow: none; }
.cl-main .btn-primary:hover { background: #1a5274; border-color: #133e58; }
.cl-main .sh-card, .cl-stats4 { border-radius: 6px; }

/* hiring board: plain columns under a rule, name first, score on the right */
.cl-pipe { gap: 0; border-top: 1px solid var(--line); }
.cl-pipe-col { background: none; border: 0; border-left: 1px solid var(--line-soft); border-radius: 0; padding: 10px 12px 4px; min-height: 0; }
.cl-pipe-col:first-child { border-left: 0; padding-left: 0; }
.cl-pipe-col:last-child { padding-right: 0; }
.cl-pipe-h { padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); font-size: .92rem; }
.cl-cand { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: none; box-shadow: none; }
.cl-cand:hover { border-color: var(--line-soft); background: var(--surface-2); }
.cl-cand-wrap { margin: 0; }
.cl-cand-name { font-size: .95rem; line-height: 1.3; }
.cl-cand .sh-score { font: 700 1rem var(--font); font-variant-numeric: tabular-nums; }
.cl-cand-meta { grid-column: 1 / -1; font-size: .8rem; line-height: 1.4; }
.cl-cand-note { margin-top: 4px; border-left-width: 2px; }
@media (max-width: 1100px) { .cl-pipe-col { border-left: 0; padding-left: 0; padding-right: 0; } }

/* guided fix results: the full job, not a one-liner */
.result-card .wiz-sec { margin-top: 18px; }
.result-card .wiz-list { margin: 6px 0 0; padding-left: 1.3em; display: grid; gap: 7px; line-height: 1.5; }
.result-card .wiz-list li::marker { font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.result-card .wiz-read { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: .92rem; }
.result-card .wiz-read th { text-align: left; font-weight: 600; color: var(--text-3); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); }
.result-card .wiz-read td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-variant-numeric: tabular-nums; }
.result-card .wiz-caution .val { border-left: 3px solid var(--amber); padding-left: 10px; }
@media (max-width: 560px) { .result-card .wiz-read thead { display: none; } .result-card .wiz-read tr { display: grid; padding: 8px 0; border-bottom: 1px solid var(--line-soft); } .result-card .wiz-read td { border: 0; padding: 1px 0; } .result-card .wiz-read td:first-child { font-weight: 600; } }
/* a lesson finished too fast to count */
.effort-stop { display: grid; gap: 8px; justify-items: start; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 6px; background: var(--surface); }
.effort-stop b { font-size: 1rem; }
.effort-stop p { margin: 0; color: var(--text-2); line-height: 1.5; }

/* ---------- Crewline: effort, roster, work log, practice calendar ---------- */
.ef-tag { display: inline-flex; align-items: center; gap: 7px; font: 600 .86rem/1.2 var(--font); white-space: nowrap; color: var(--text-2); }
.ef-tag i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: none; }
.ef-tag.ef-good i { background: var(--green); } .ef-tag.ef-mid i { background: #c48a12; } .ef-tag.ef-low i { background: var(--red); }
.ef-tag.ef-low { color: var(--red); } .ef-tag.ef-none { color: var(--text-3); font-weight: 500; }
.ef-spark { display: block; } .ef-spark rect.on { fill: var(--blue); } .ef-spark rect.off { fill: var(--line); }

.cr-tbl { width: 100%; border-collapse: collapse; min-width: 640px; font-variant-numeric: tabular-nums; }
.cr-tbl thead th { font: 600 .76rem/1.2 var(--font); color: var(--text-3); text-align: left; padding: 0 14px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cr-tbl td, .cr-tbl tbody th { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line-soft); vertical-align: middle; text-align: left; font-weight: 400; }
.cr-tbl tbody tr:last-child > * { border-bottom: 0; }
.cr-row { cursor: pointer; } .cr-row:hover > * { background: var(--surface-2); } .cr-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.cr-row.is-flag > th { box-shadow: inset 3px 0 0 var(--red); padding-left: 10px; }
.cr-name { display: block; font-weight: 700; color: var(--text) !important; text-decoration: none; } .cr-name:hover { text-decoration: underline; }
.cr-sub { display: block; font-size: .8rem; color: var(--text-3); }
.cr-pct { display: inline-block; min-width: 3.2em; font-weight: 600; }
.cr-track { display: inline-block; vertical-align: middle; width: 90px; height: 6px; background: var(--surface-3); border-radius: 2px; overflow: hidden; } .cr-track i { display: block; height: 100%; background: var(--text); }
.cr-num { color: var(--text-2); } .cr-weak { color: var(--text-2); font-size: .88rem; max-width: 190px; }
@media (max-width: 980px) { .cr-hide-m { display: none; } }
@media (max-width: 640px) { .cr-hide-s { display: none; } .cr-tbl { min-width: 0; } .cr-track { width: 54px; } }

.cl-backlink { display: inline-block; margin: 14px 0 0; font-size: .9rem; font-weight: 600; color: var(--text-3) !important; text-decoration: none; }
.cl-backlink::before { content: "\2039\00a0"; }
.cl-techhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cl-techhead .ef-tag { font-size: 1rem; margin-bottom: 8px; }
.cl-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.cl-seg button { font: 600 .84rem var(--font); padding: 6px 12px; background: var(--surface); color: var(--text-2); border: 0; border-left: 1px solid var(--line); cursor: pointer; }
.cl-seg button:first-child { border-left: 0; } .cl-seg button.on { background: var(--text); color: var(--surface); }
.ef-verdict { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--line-strong); background: var(--surface-2); font-size: .95rem; line-height: 1.5; color: var(--text); }
.ef-verdict.ef-low { border-left-color: var(--red); } .ef-verdict.ef-mid { border-left-color: #c48a12; } .ef-verdict.ef-good { border-left-color: var(--green); }
.ef-how { margin: 14px 0 0; font-size: .82rem; line-height: 1.5; max-width: 80ch; }

.wl-tbl { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .9rem; }
.wl-tbl thead th { font: 600 .76rem/1.2 var(--font); color: var(--text-3); text-align: left; padding: 0 14px 8px 0; border-bottom: 1px solid var(--line); }
.wl-tbl td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.wl-when b { display: block; font-variant-numeric: tabular-nums; } .wl-when span { font-size: .8rem; color: var(--text-3); }
.wl-kind { display: block; font-size: .74rem; font-weight: 600; color: var(--text-3); }
.wl-title { display: block; font-weight: 600; color: var(--text); }
.wl-detail { display: block; font-size: .82rem; color: var(--text-3); margin-top: 2px; }
.wl-num { font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.wl-v { font-weight: 700; font-size: .86rem; white-space: nowrap; }
.wl-v-good { color: var(--green); } .wl-v-mid { color: #a8740a; } .wl-v-low { color: var(--red); }
.wl-low > td:first-child { box-shadow: inset 3px 0 0 var(--red); padding-left: 10px; }
:root[data-theme="dark"] .wl-v-mid, :root[data-theme="dark"] .ef-tag.ef-mid { color: #e2ad46; }

.ef-calwrap { overflow-x: auto; } .ef-cal { display: block; width: 100%; max-width: 560px; height: auto; }
.ef-cal .c0, .ef-calkey .c0 { fill: var(--surface-3); background: var(--surface-3); }
.ef-cal .c1, .ef-calkey .c1 { fill: color-mix(in srgb, var(--blue) 30%, var(--surface)); background: color-mix(in srgb, var(--blue) 30%, var(--surface)); }
.ef-cal .c2, .ef-calkey .c2 { fill: color-mix(in srgb, var(--blue) 52%, var(--surface)); background: color-mix(in srgb, var(--blue) 52%, var(--surface)); }
.ef-cal .c3, .ef-calkey .c3 { fill: color-mix(in srgb, var(--blue) 74%, var(--surface)); background: color-mix(in srgb, var(--blue) 74%, var(--surface)); }
.ef-cal .c4, .ef-calkey .c4 { fill: var(--blue); background: var(--blue); }
.ef-calkey { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: .78rem; color: var(--text-3); }
.ef-calkey i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; } .ef-calkey span { margin: 0 4px; }
:root[data-theme="dark"] .sh-hc[data-step="4"], :root[data-theme="dark"] .sh-hc[data-step="5"] { color: #0f1416; }
:root[data-theme="dark"] .sh-hc.gap[data-step="4"], :root[data-theme="dark"] .sh-hc.gap[data-step="5"] { color: #7a130d; }
.cr-last { white-space: nowrap; font-size: .84rem; color: var(--text-3); }
.wl-when { white-space: nowrap; }