/* ============================================================================
   RATE LAB · "TRUCK ART" THEME
   Pakistani truck art: painted signboards, the two rear doors, hanging jhalar
   fringe, chevron borders, milestone stones on the GT Road. The colour is
   spent on FRAMES only; every reading surface stays white with a thick ink
   outline so it survives a classroom projector.
   Loaded after lab.css and overrides it.
   ========================================================================== */

:root {
  --ink: #1B1036;          /* aubergine-black: outlines and text */
  --ink-2: #3E3460;
  --ink-3: #7A7196;
  --line: #1B1036;
  --paper: #FFFFFF;

  --tk-magenta: #E4007C;   /* truck pink */
  --tk-emerald: #00A86B;
  --tk-yellow:  #FFC21A;   /* chrome yellow */
  --tk-blue:    #1D3FD9;   /* royal blue */
  --tk-orange:  #FF5A1F;
  --tk-sky:     #E8F0FF;

  --f-display: "Bungee", "Arial Black", Impact, sans-serif;
  --f-sign: "Bungee Shade", "Bungee", "Arial Black", sans-serif;
  --f-body: "Lexend", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", Consolas, monospace;

  --r-lg: 14px; --r-md: 10px; --r-sm: 8px;
  --edge: 3px solid var(--ink);
  --pop: 5px 5px 0 var(--ink);            /* painted, flat shadow */
  --pop-sm: 3px 3px 0 var(--ink);
  --shadow-1: var(--pop-sm);
  --shadow-2: var(--pop);

  /* chevron band: the border every truck has */
  --chevron: repeating-linear-gradient(135deg,
      var(--tk-magenta) 0 12px, var(--tk-yellow) 12px 24px,
      var(--tk-emerald) 24px 36px, var(--tk-blue) 36px 48px);
  /* hanging jhalar fringe (triangles + beads) */
  --jhalar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16'%3E%3Cpath d='M0 0h16L8 11z' fill='%23E4007C'/%3E%3Cpath d='M16 0h16l-8 11z' fill='%23FFC21A'/%3E%3Cpath d='M32 0h16l-8 11z' fill='%2300A86B'/%3E%3Cpath d='M48 0h16l-8 11z' fill='%231D3FD9'/%3E%3Ccircle cx='8' cy='13.5' r='2.2' fill='%23FFC21A'/%3E%3Ccircle cx='24' cy='13.5' r='2.2' fill='%23E4007C'/%3E%3Ccircle cx='40' cy='13.5' r='2.2' fill='%231D3FD9'/%3E%3Ccircle cx='56' cy='13.5' r='2.2' fill='%2300A86B'/%3E%3C/svg%3E");
}

body {
  background: #FFFFFF;
  background-image: none;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
}
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; letter-spacing: .01em; }
:focus-visible { outline: 3px solid var(--tk-magenta); outline-offset: 2px; }

/* ---------------------------------------------------------------- top bar */
.topbar {
  background: var(--tk-blue);
  color: #fff;
  border-bottom: 0;
  backdrop-filter: none;
  padding: 10px 18px 10px;
  margin-bottom: 18px;
  position: sticky;
}
.topbar::after {               /* the jhalar hanging under the bar */
  content: ""; position: absolute; left: 0; right: 0; bottom: -15px; height: 16px;
  background: var(--jhalar) repeat-x; background-size: 64px 16px; pointer-events: none;
}
.brand-name { font-family: var(--f-display); font-size: 21px; color: var(--tk-yellow); letter-spacing: .04em; }
.brand-sub { color: #C9D4FF; }
.brand-mark { filter: drop-shadow(2px 2px 0 rgba(0,0,0,.35)); }
.st-title .eyebrow { color: var(--tk-yellow); }
.st-title h1 { font-family: var(--f-display); color: #fff; font-size: 22px; letter-spacing: .02em; }
.back-btn { background: var(--tk-yellow); color: var(--ink); border: var(--edge); box-shadow: var(--pop-sm); }
.back-btn:hover { border-color: var(--ink); transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.star-pill { background: #fff; border: var(--edge); color: var(--ink); box-shadow: var(--pop-sm); font-family: var(--f-mono); }
.icon-btn { background: #fff; border: var(--edge); box-shadow: var(--pop-sm); color: var(--ink); }

/* ---------------------------------------------------------------- station shell */
.station { padding-top: 8px; }
.stage {
  background: #FFFFFF;
  background-image: none;
  border: var(--edge);
  border-radius: var(--r-lg);
  box-shadow: var(--pop);
}
.card {
  border: var(--edge);
  border-radius: var(--r-lg);
  box-shadow: var(--pop-sm);
}
.card h3 { font-family: var(--f-display); font-weight: 400; color: var(--tk-blue); letter-spacing: .05em; font-size: 14px; }
.eli-card { background: #FFF5D1; border-color: var(--ink); }
.eli-card .bubble { font-weight: 500; }
.missions li { background: #F4F2FA; border: 2px solid transparent; font-weight: 600; }
.missions li .tick { border-color: var(--ink-3); }
.missions li.done { background: #DFF7EC; border-color: var(--tk-emerald); color: #05563A; }
.mustknow li::marker { color: var(--tk-magenta); }
.eq { font-family: var(--f-display); font-weight: 400; }
.eq-num { font-family: var(--f-mono); background: #F4F2FA; border: 2px solid var(--ink); }

/* controls */
.seg { background: #fff; border: var(--edge); padding: 4px; box-shadow: var(--pop-sm); }
.seg button { font-family: var(--f-body); font-weight: 700; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--tk-yellow); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.modebar .seg { background: #fff; box-shadow: var(--pop-sm); }
.btn {
  background: var(--tk-blue); color: #fff; border: var(--edge); box-shadow: var(--pop-sm);
  font-family: var(--f-body); font-weight: 800; letter-spacing: .01em;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.alt { background: #fff; color: var(--ink); border: var(--edge); box-shadow: var(--pop-sm); }
.btn.spark { background: var(--tk-yellow); color: var(--ink); box-shadow: var(--pop-sm); }
.btn.blue { background: var(--tk-blue); box-shadow: var(--pop-sm); }
.btn.red { background: var(--tk-magenta); box-shadow: var(--pop-sm); }
.slider .top { font-weight: 700; }
.slider .val { font-family: var(--f-mono); font-weight: 600; }
.slider input[type=range] { --acc: var(--tk-magenta); }
.slider input[type=range]::-webkit-slider-runnable-track { border: 2px solid var(--ink); height: 12px; }
.slider input[type=range]::-webkit-slider-thumb { border: 3px solid var(--ink); background: var(--tk-yellow); margin-top: -9px; }
.toggle[aria-checked="true"] .sw { background: var(--tk-emerald); }
.toggle .sw { box-shadow: inset 0 0 0 2px var(--ink); }
.lcd { background: var(--ink); box-shadow: var(--pop-sm); }
.lcd .scr { font-family: var(--f-mono); }
.dock { border: var(--edge); box-shadow: var(--pop-sm); background: rgba(255,255,255,.96); backdrop-filter: none; }
.chip { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.toast { background: var(--ink); border: 3px solid var(--tk-yellow); font-family: var(--f-body); }
svg.plot { border: 2px solid var(--ink); }

/* ================================================================= HOME */
.home { max-width: 1240px; padding-top: 26px; }

/* --- the signboard (hero) --- */
.fx-hero {
  position: relative;
  background: var(--paper);
  border: 0;
  border-radius: 22px;
  padding: 14px;                       /* chevron band thickness */
  background-image: var(--chevron);
  box-shadow: 8px 8px 0 var(--ink);
  outline: 3px solid var(--ink);
}
.fx-hero::before { display: none; }
.fx-hero > * { position: relative; }
.fx-hero .fx-head, .fx-hero .fx-tabs, .fx-hero .hero-key, .fx-hero .fx-pair, .fx-hero .fx-say, .fx-hero .fx-verdict { background: #fff; }
.fx-hero .fx-head {
  border: var(--edge); border-bottom: 0; border-radius: 12px 12px 0 0;
  padding: 22px 26px 10px; text-align: center;
}
.fx-hero .kicker { font-family: var(--f-body); font-weight: 800; color: var(--tk-magenta); letter-spacing: .14em; font-size: 12.5px; }
.fx-hero h1 {
  font-family: var(--f-sign); font-weight: 400;
  font-size: clamp(34px, 5.6vw, 74px); line-height: 1.02; margin: 8px 0 12px;
  color: var(--tk-blue); text-shadow: none; letter-spacing: .01em;
}
.fx-hero h1 .gold { color: var(--tk-magenta); text-shadow: none; }
.fx-hero .fx-lead { margin: 0 auto 6px !important; max-width: 62ch !important; text-align: center; font-size: 17.5px; color: var(--ink-2); }
.fx-hero .fx-lead b { color: var(--ink); }

/* factor tabs = painted number plates */
.fx-hero .fx-tabs { border-left: var(--edge); border-right: var(--edge); margin: 0; padding: 6px 22px 12px; justify-content: center; gap: 10px; }
.fx-tab {
  font-family: var(--f-display); font-weight: 400; font-size: 15px; letter-spacing: .03em;
  background: #fff; color: var(--ink); border: var(--edge); border-radius: 8px;
  box-shadow: var(--pop-sm); padding: 9px 16px;
}
.fx-tab:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.fx-tab[aria-selected="true"] { background: var(--tab); color: #fff; border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: translate(1px,1px); text-shadow: 1px 1px 0 rgba(0,0,0,.35); }
.fx-hero .hero-key { border-left: var(--edge); border-right: var(--edge); margin: 0; padding: 0 22px 14px; justify-content: center; font-family: var(--f-body); }

/* --- the two rear doors (box A and box B) --- */
.fx-hero .fx-pair { border-left: var(--edge); border-right: var(--edge); padding: 6px 22px 14px; gap: 22px; }
.fx-side {
  position: relative;
  background: var(--tk-sky);
  border: var(--edge);
  border-radius: 46px 46px 12px 12px;       /* arched door top */
  padding: 34px 16px 14px;
  box-shadow: var(--pop-sm);
}
.fx-side.right { background: #FFEFF7; }
.fx-side::before {                           /* painted medallion with the door letter */
  content: "A"; position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 22px; color: #fff;
  background: var(--tk-blue); border: var(--edge); box-shadow: 0 0 0 4px var(--tk-yellow), 0 0 0 7px var(--ink);
}
.fx-side.right::before { content: "B"; background: var(--tk-magenta); }
.fx-side::after {                            /* mirror-work studs along the arch */
  content: ""; position: absolute; top: 10px; left: 26px; right: 26px; height: 10px; pointer-events: none;
  background: radial-gradient(circle, #fff 0 2.4px, var(--ink) 2.5px 3.6px, transparent 3.7px) 0 0/22px 10px repeat-x;
}
.fx-name { font-family: var(--f-display); font-weight: 400; font-size: 18px; text-align: center; color: var(--tk-blue); letter-spacing: .02em; }
.fx-side.right .fx-name { color: var(--tk-magenta); }
.fx-box.hero-box { background: #fff; border: var(--edge); border-radius: 10px; box-shadow: none; }
.fx-sb svg { margin-left: auto; margin-right: auto; }
.fx-read { text-align: left; }
.hero-read { color: var(--ink-2); font-weight: 600; }
.hero-read b { font-family: var(--f-mono); }
.hero-read .rate-line { color: var(--ink); }

.fx-hero .fx-say {
  border-left: var(--edge); border-right: var(--edge); margin: 0; border-radius: 0;
  padding: 4px 22px 12px; border-top: 0; border-bottom: 0;
}
.fx-say.hero-say { background: #fff; box-shadow: none; font-size: 17px; }
.fx-say.hero-say::before { content: none; }
.fx-hero .fx-say { border-left: var(--edge); }
.fx-say b:first-child { background: var(--tk-yellow); padding: 1px 6px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.fx-hero .fx-verdict {
  border: var(--edge); border-top: 0; border-radius: 0 0 12px 12px;
  padding: 4px 22px 20px; justify-content: center;
}
.fx-verdict .pill { border-width: 3px; font-weight: 700; box-shadow: var(--pop-sm); }
.fx-verdict .pill.yes { border-color: var(--ink); color: #fff; background: var(--tk-blue); }
.fx-verdict .pill.hardp.yes { border-color: var(--ink); color: var(--ink); background: var(--tk-yellow); }
.fx-verdict .pill.no { border-color: var(--ink-3); color: var(--ink-3); background: #fff; box-shadow: none; }
.fx-verdict .remember { font-family: var(--f-body); font-weight: 800; font-size: 16.5px; }

/* golden rule strip under the signboard */
.home .legend { justify-content: center; margin-top: 26px; }
.home .legend .cc { font-size: 16px; font-weight: 600; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; box-shadow: 4px 4px 0 var(--tk-magenta); }
.home .legend .cc b { color: var(--tk-yellow); }

/* --- the road: groups are stretches of road, stations are milestone stones --- */
.home .grp { margin-top: 44px; position: relative; }
.home .grp-head { justify-content: flex-start; align-items: center; gap: 14px; margin-bottom: 26px; }
.home .grp-head h2 {
  font-family: var(--f-display); font-size: 22px; letter-spacing: .04em; color: #fff;
  background: var(--tk-emerald); border: var(--edge); border-radius: 8px; padding: 6px 14px 4px;
  box-shadow: var(--pop-sm);
}
.home .grp:nth-of-type(3) .grp-head h2 { background: var(--tk-orange); }
.home .grp:nth-of-type(4) .grp-head h2 { background: var(--tk-magenta); }
.home .grp-head p { color: var(--ink-2); font-weight: 600; }
.home .st-grid { position: relative; z-index: 0; gap: 74px 22px; padding: 10px 0 52px; }
.home .st-card {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: 6px; align-content: start;
  background: #fff; border: var(--edge);
  border-radius: 64px 64px 12px 12px;       /* milestone stone */
  padding: 0 18px 16px;
  box-shadow: var(--pop);
  transition: transform .15s, box-shadow .15s;
}
.home .st-card::before {                    /* each row of stones stands beside its own stretch of road */
  content: ""; position: absolute; z-index: -1; left: -26px; right: -26px; bottom: -44px; height: 30px;
  background: linear-gradient(90deg, var(--tk-yellow) 0 30px, transparent 30px 56px) 0 50%/56px 4px repeat-x, #4A4560;
  border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink);
}
.home .st-card:hover { transform: translate(-2px,-3px); box-shadow: 8px 9px 0 var(--ink); border-color: var(--ink); }
.home .st-card .st-ico {                     /* yellow cap with the stone number */
  margin: 0 -18px 4px; border-radius: 61px 61px 0 0; height: 66px; background: var(--tk-yellow); border-bottom: var(--edge);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.home .st-card .st-ico .bulb-ico { width: 40px; height: 40px; order: 2; }
.home .st-card .st-ico .st-n {
  position: static; width: auto; height: auto; background: none; color: var(--ink);
  font-family: var(--f-display); font-size: 34px; line-height: 1; border-radius: 0;
}
.home .st-card .st-ico .st-n::after { content: " km"; font-size: 13px; font-family: var(--f-body); font-weight: 800; letter-spacing: .04em; }
.home .st-card .code { font-family: var(--f-body); font-weight: 800; color: var(--tk-magenta); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.home .st-card h2 { font-family: var(--f-display); font-size: 19px; text-align: center; margin: 0; letter-spacing: .02em; }
.home .st-card p { text-align: center; color: var(--ink-2); font-size: 14.5px; }
.home .st-card .stars { justify-content: center; }
.home .st-card.flag { background: #fff; border-color: var(--ink); }
.home .st-card.flag .st-ico { background: var(--tk-magenta); }
.home .st-card.flag .st-ico .st-n { color: #fff; }
.home .st-card .tag { display: block; width: max-content; margin: 6px auto 0; background: var(--tk-blue); color: #fff; border: 2px solid var(--ink); font-family: var(--f-body); }
.home .st-card.soon { opacity: .5; }

.home-foot { margin-top: 42px; padding-top: 22px; position: relative; }
.home-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--chevron); border: 2px solid var(--ink); border-radius: 4px; }
.credit { color: var(--ink); font-family: var(--f-body); }

@media (max-width: 900px) {
  .fx-hero { padding: 9px; box-shadow: 5px 5px 0 var(--ink); }
  .fx-hero .fx-head { padding: 18px 14px 8px; }
  .fx-hero .fx-tabs, .fx-hero .hero-key, .fx-hero .fx-pair, .fx-hero .fx-say, .fx-hero .fx-verdict { padding-left: 12px; padding-right: 12px; }
  .fx-hero .fx-pair { gap: 34px; }
  .home .st-card::before { left: -14px; right: -14px; }
}
@media (max-width: 620px) {
  .fx-tab { font-size: 13px; padding: 8px 11px; }
  .topbar::after { bottom: -13px; height: 13px; background-size: 52px 13px; }
}
.site-back { color: #fff; font-weight: 800; font-size: 13.5px; text-decoration: none; border: 2px solid #fff; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.site-back:hover { background: var(--tk-yellow); color: var(--ink); border-color: var(--ink); }
@media (max-width: 620px) { .site-back { display: none; } }

/* ============================================================================
   STATION INSIDES · the truck art carried INTO the stations
   Applies to stations whose stage carries .tk-in (rate, often, lab, graphs,
   answers, defs, practice, test). Station-specific looks live in each
   station's own <style>; this section holds the shared vocabulary:
   number-plate mode tabs, painted F.A.Q / Ans badges, ink graph axes,
   contrast-safe text inks. Colour goes on frames, edges, badges, accents;
   everything students read or watch stays white with ink text.
   Text inks on white (WCAG AA): royal blue #1D3FD9 7.6:1 · magenta #E4007C 5.7:1
   · deep emerald #00754A 5.8:1 · deep orange #C2410C 5.1:1 · deep amber #9A6200 5.1:1
   ========================================================================== */
#stage.tk-in, .station:has(#stage.tk-in) .side {
  --often: #1D3FD9;            /* HOW OFTEN = royal blue */
  --hard: #9A6200;             /* HOW HARD as TEXT = deep amber (bars use chrome yellow) */
  --q-rate: #C2410C;           /* rate as TEXT = deep orange */
  --tk-ok: #00754A;  --tk-ok-bg: #E3F6EC;
  --tk-no: #B0005F;  --tk-no-bg: #FFEAF4;
  --mint: #00A86B;   --mint-bg: #E3F6EC;
  --electron-dk: #1D3FD9;
}

/* --- mode tabs = painted number plates (same as the home factor tabs) --- */
#stage.tk-in :is(.modebar, .df-tabs) .seg { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0 4px 4px 0; gap: 8px; }
#stage.tk-in :is(.modebar, .df-tabs) .seg button {
  font-family: var(--f-display); font-weight: 400; font-size: 13.5px; letter-spacing: .03em; line-height: 1.15;
  color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 8px;
  padding: 6px 12px 5px; box-shadow: 3px 3px 0 var(--ink); white-space: nowrap;
  transition: transform .12s, box-shadow .12s, background .12s;
}
#stage.tk-in :is(.modebar, .df-tabs) .seg button:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
#stage.tk-in :is(.modebar, .df-tabs) .seg button[aria-pressed="true"] {
  background: var(--tk-blue); color: var(--tk-yellow); transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink);
}
@media (max-width: 620px) {
  #stage.tk-in :is(.modebar, .df-tabs) .seg { gap: 6px; }
  #stage.tk-in :is(.modebar, .df-tabs) .seg button { font-size: 12px; padding: 6px 8px 5px; box-shadow: 2px 2px 0 var(--ink); }
}

/* --- small in-station segmented pickers become plate strips --- */
#stage.tk-in :where(.seg:not(.modebar .seg, .df-tabs .seg)) { border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); }
#stage.tk-in :where(.seg:not(.modebar .seg, .df-tabs .seg)) button { border-radius: 6px; }
#stage.tk-in :where(.seg:not(.modebar .seg, .df-tabs .seg)) button[aria-pressed="true"] { background: var(--tk-yellow); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }

/* --- buttons inside stations: chunky painted, a touch squarer than pills --- */
#stage.tk-in .btn { border-radius: 10px; }
#stage.tk-in .btn.small { padding: 7px 12px; }

/* --- graphs: ink axes, quiet grid, Plex Mono ticks --- */
#stage.tk-in svg.plot { border: 2.5px solid var(--ink); border-radius: 10px; }
#stage.tk-in svg.plot line[stroke="#E3E9F2"] { stroke: #ECE8F4; }
#stage.tk-in svg.plot path[stroke="#13203B"] { stroke: var(--ink); stroke-width: 2.6px; }
#stage.tk-in svg.plot text.svg-mono { fill: var(--ink-2); }
#stage.tk-in svg.plot text.svg-label { fill: var(--ink); }

/* --- painted F.A.Q / Ans badges (side rule card + stage) --- */
.station:has(#stage.tk-in) .side :is(.faq .q, .rlx-rule .faq, .formula .q, .eq-words b.faqb),
#stage.tk-in :is(.an-faq .q, .tk-faq) {
  display: inline-block; font-family: var(--f-display); font-weight: 400; font-size: 11px; letter-spacing: .05em; line-height: 1.25;
  color: #fff; background: var(--tk-magenta); border: 2px solid var(--ink); border-radius: 5px; padding: 2px 6px 1px; margin-right: 4px; vertical-align: 1px;
}
.station:has(#stage.tk-in) .side :is(.faq .a, .rlx-rule .ans, .formula .a),
#stage.tk-in :is(.an-faq .a, .tk-ans) {
  display: inline-block; font-family: var(--f-display); font-weight: 400; font-size: 11px; letter-spacing: .05em; line-height: 1.25;
  color: #fff; background: var(--tk-blue); border: 2px solid var(--ink); border-radius: 5px; padding: 2px 6px 1px; margin-right: 4px; vertical-align: 1px;
}
.station:has(#stage.tk-in) .side .rlx-rule .ans { margin-bottom: 7px; }
/* the F.A.Q list in the rule card: a chevron edge down the left */
.station:has(#stage.tk-in) .side .formula .faq { border-top: 0; padding-top: 4px; gap: 9px; }
.station:has(#stage.tk-in) .side .formula .faq > div { padding: 2px 0 2px 12px; border-left: 4px solid transparent; border-image: linear-gradient(180deg, var(--tk-magenta) 0 50%, var(--tk-blue) 50% 100%) 1; }
.station:has(#stage.tk-in) .side .rlx-rule ol.ms li { background: #fff; border: 2px solid var(--ink); border-radius: 8px; }
.station:has(#stage.tk-in) .side .rlx-rule .mk { border: 2px solid var(--ink); width: 26px; height: 26px; }
.station:has(#stage.tk-in) .side .rlx-rule li.h .mk { background: var(--tk-yellow); color: var(--ink); }
.station:has(#stage.tk-in) .side .rlx-rule li.o .mk { background: var(--tk-blue); }
.station:has(#stage.tk-in) .side .rlx-rule li.s .mk { background: var(--tk-emerald); color: var(--ink); }
.station:has(#stage.tk-in) .side .rlx-rule .trap { background: var(--tk-no-bg); border: 2px solid var(--tk-magenta); color: var(--tk-no); border-radius: 8px; }
.station:has(#stage.tk-in) .side .rlx-rule .trap b { color: var(--tk-no); }
.station:has(#stage.tk-in) .side .formula .stl-num,
.station:has(#stage.tk-in) .side .eq-num { background: #fff; border: 2px solid var(--ink); border-radius: 8px; }

/* --- often (and any .tk-in station using the shared rlx kit): readout cards, panels, checks --- */
#stage.tk-in .rlx-m {
  position: relative; border: 3px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink);
  padding: 13px 10px 8px; overflow: hidden; background: #fff;
}
#stage.tk-in .rlx-m::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--ink-3); border-bottom: 2px solid var(--ink); }
#stage.tk-in .rlx-m.often::before { background: var(--tk-blue); }
#stage.tk-in .rlx-m.hard::before { background: var(--tk-yellow); }
#stage.tk-in .rlx-m.rate::before { background: var(--tk-orange); }
#stage.tk-in .rlx-m .k { font-family: var(--f-display); font-weight: 400; font-size: 12px; letter-spacing: .05em; }
#stage.tk-in .rlx-m .v { font-family: var(--f-mono); font-weight: 600; }
#stage.tk-in .rlx-m .u { font-weight: 600; color: var(--ink-2); }
#stage.tk-in .rlx-m .sub { font-weight: 600; color: var(--ink-2); }
#stage.tk-in .rlx-m .bar { background: #fff; border: 2px solid var(--ink); height: 10px; border-radius: 3px; }
#stage.tk-in .rlx-m .bar i { border-radius: 0; }
#stage.tk-in .rlx-m.often .bar i { background: var(--tk-blue); }
#stage.tk-in .rlx-m.hard .bar i { background: var(--tk-yellow); }
#stage.tk-in .rlx-m.rate .bar i { background: var(--tk-orange); }
#stage.tk-in :is(.rlx-graph, .rlx-panel, .rlx-dock) { border: 3px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
#stage.tk-in .rlx-graph .gh, #stage.tk-in .rlx-panel h4 { font-family: var(--f-display); font-weight: 400; font-size: 12.5px; letter-spacing: .05em; color: var(--tk-blue); }
#stage.tk-in .rlx-graph .gh .lg { font-family: var(--f-body); font-weight: 700; color: var(--ink); }
#stage.tk-in .rlx-graph svg.plot { border: 0; }
#stage.tk-in .rlx-graph .gcap, #stage.tk-in .rlx-cap, #stage.tk-in .rlx-note { color: var(--ink-2); font-weight: 600; }
#stage.tk-in .rlx-cap .ring { border-color: var(--ink-3); }
/* check-yourself cards */
#stage.tk-in .rlx-checks .ck-head h2 { font-weight: 400; }
#stage.tk-in .rlx-checks .ck-score { font-family: var(--f-mono); font-weight: 700; background: var(--tk-yellow); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 6px; box-shadow: 2px 2px 0 var(--ink); }
#stage.tk-in .rlx-checks .ck-card { border: 3px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); }
#stage.tk-in .rlx-checks .ck-q { font-weight: 700; }
#stage.tk-in .rlx-checks .ck-q .n { background: var(--tk-blue); color: var(--tk-yellow); border: 2px solid var(--ink); font-family: var(--f-display); font-weight: 400; width: 28px; height: 28px; }
#stage.tk-in .rlx-checks .ck-opt { background: #fff; border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); font-weight: 700; transition: transform .12s, box-shadow .12s; }
#stage.tk-in .rlx-checks .ck-opt:hover:not(:disabled) { background: #fff; border-color: var(--ink); transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
#stage.tk-in .rlx-checks .ck-opt.ok { background: var(--tk-emerald); border-color: var(--ink); color: var(--ink); transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
#stage.tk-in .rlx-checks .ck-opt.ok svg { background: #fff; border-radius: 6px; }
#stage.tk-in .rlx-checks .ck-opt.no { background: var(--tk-no-bg); border-color: var(--tk-magenta); color: var(--tk-no); box-shadow: none; opacity: 1; }
#stage.tk-in .rlx-checks .ck-fb { font-weight: 600; }
#stage.tk-in .rlx-checks .ck-fb.ok { color: var(--tk-ok); border-left: 6px solid var(--tk-emerald); padding-left: 8px; }
#stage.tk-in .rlx-checks .ck-fb.no { color: var(--tk-no); border-left: 6px solid var(--tk-magenta); padding-left: 8px; }
#stage.tk-in .rlx-checks .ck-links { background: #fff; border: 3px solid var(--ink); border-left: 12px solid var(--tk-magenta); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); }
#stage.tk-in .rlx-checks .ck-links .lk-t { font-family: var(--f-display); font-weight: 400; letter-spacing: .03em; }
#stage.tk-in .rlx-checks .ck-credit { color: var(--ink-2); }

/* ============================================================================
   QA PASS (phone · projector · keyboard). Minimum sizes that every station
   inherits: text that matters >= 12 px on a phone, touch targets >= 40 px,
   a station title that fits the bar, calm motion when the user asks for it.
   ========================================================================== */
@media (max-width: 620px) {
  .st-title .eyebrow { display: none; }
  .st-title h1 { font-size: 16px; line-height: 1.1; white-space: normal; overflow: hidden; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: normal; }
  .star-pill { padding: 6px 9px; font-size: 13px; gap: 4px; }
  /* readable small print */
  .home .st-card .code, .home .st-card .tag, .home h2 .tag { font-size: 12px !important; }
  .rt-slot .ph, .cl-read .k, .cl-read .d, .rlx-m .u, .rlx-m .sub, .rlx-rule .faq, .rlx-rule .ans, .formula .faqb,
  .zh-therm .tk, .zh-cmp .hd, .zh-frac small, .lab-elg, .lab-elg span, .zc-def .t, .rlx-checks .ck-credit,
  .tray .gt, .tray .gt b, .act .speed small, .faq .q, .faq .a, .pills .pill small, .scn .lbl,
  .an-tile .tq .o, .an-tile .tq .hd, .an-task .lbl, .an-faq .q, .an-faq .a, .df-dbtn .tier, .stage table th { font-size: 12px !important; }
}
/* touch targets: phones and any coarse pointer */
@media (max-width: 620px), (pointer: coarse) {
  .icon-btn { width: 42px; height: 42px; }
  .brand { min-height: 42px; }
  .modebar .seg button, #stage.tk-in :is(.modebar, .df-tabs) .seg button { min-height: 40px; }
  #stage .seg button, #stage .btn, #stage button.toggle, #stage .pill, #stage .opt { min-height: 40px; }
  #stage a.link { display: inline-block; padding: 10px 0; }
}
/* keyboard: a focus ring that shows on the white stage AND on the blue bar */
.topbar :focus-visible { outline-color: var(--tk-yellow); }
#stage svg [tabindex]:focus-visible, #stage svg [role="slider"]:focus-visible, #stage svg [role="button"]:focus-visible { outline: 3px solid var(--tk-magenta); outline-offset: 3px; }
/* calm motion on request: particles still move (canvas), decoration stays still */
@media (prefers-reduced-motion: reduce) {
  .hint-pulse { animation: none !important; opacity: 1 !important; }
  .eli .bob, .eli .eye-l, .eli .eye-r, .bubble.pop { animation: none !important; }
}
/* keyboard control of the drag-only parts (Lab.keys): yellow + ink ring, readable on white and on blue */
.kb-focus:not(svg *):focus-visible { outline: 3px solid #1B1036; outline-offset: 3px; box-shadow: 0 0 0 3px #FFC21A; }
#stage svg .kb-focus:focus, #stage svg .kb-focus:focus-visible { outline: none; }
.kb-picked { outline: 4px dashed var(--tk-magenta) !important; outline-offset: 3px; }