/* ==========================================================================
   The toolbox player in the "Measured practice" v4 language. Loaded after
   css/wbc-course.css by challenge/toolbox/index.html, and only there.
   Same rules as css/measured.css (read its header):
   - a box only where you touch it or where it is a real object
   - orange only on buttons; sky blue only for progress and "after"
   - no fade-ins; no coloured side bars, no pill tags, no tinted cards
   The course content (assets/wbc/toolbox.en.json) is not changed by this file.
   ========================================================================== */

:root{
  --r:3px;
  --sh1:0 1px 0 rgba(20,48,88,.06);
  --sh2:0 24px 48px -24px rgba(20,48,88,.35);
  --sky:#7CC4FF; --sky-strong:#1F6FD1; --steel:#2A5586; --paper:#F2EDE4;
  --sec:#5F6B7A; --body:#34506E;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
}
body{color:var(--b900)}
h1,h2,h3,h4{color:var(--b900)}

/* Nothing fades in: content is there at rest. */
.rv, .rv.in{opacity:1 !important; transform:none !important; transition:none !important}

/* ---------- chrome ---------- */
.top{background:#fff; backdrop-filter:none}
.logo img{height:22px; width:auto; display:block}
.crumb{border-radius:3px; color:var(--b900)}
.crumb:hover{background:var(--b100); border-color:transparent}

/* The rail stays the progress spine, flat navy. Progress is sky, not orange. */
.rail{background:var(--b900)}
.rail .kicker{font:600 12px/1.3 var(--mono); letter-spacing:.06em; color:#B8C2CF}
.rail h2{font-size:20px}
.ring .dial{background:conic-gradient(var(--sky) calc(var(--pct) * 1%), rgba(255,255,255,.14) 0)}
.ring .dial::after{background:var(--b900)}
.toc .fill{background:var(--sky)}
.toc button{border-radius:3px}
.toc li.on .node, .toc li.done.on .node{background:#fff; color:var(--b900); box-shadow:0 0 0 3px rgba(124,196,255,.45)}
.toc li.done .node{background:var(--sky-strong)}

/* ---------- lesson head: a meta line, not pills ---------- */
.lhead{padding:48px 0 28px; border-bottom:2px solid var(--b900)}
.lhead .eye{gap:6px 16px}
.tag, .tag.plain{background:none; border:0; padding:0; border-radius:0;
  font:600 12.5px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--sec)}
.lhead .eye .tag:first-child{color:var(--sky-strong)}
.lhead h1{color:var(--b900); font-size:clamp(30px, 4.4vw, 46px)}
.lhead .sum{color:var(--body)}

/* ---------- figures: big numbers, no tiles ---------- */
.fig1{background:none; border:0; border-radius:0; padding:14px 0 0; border-top:2px solid var(--b900)}
.fig1 b{color:var(--b900); font-size:clamp(34px, 4vw, 48px)}
.fig1 span{color:var(--sec)}
.figs{gap:24px}

/* ---------- quotes and callouts ---------- */
/* Quote: crop marks instead of an orange side bar (the motif from the landing). */
.impact.quote{border-left:0; padding:22px 26px; position:relative}
.impact.quote::before, .impact.quote::after{content:""; position:absolute; width:16px; height:16px; border:solid var(--b900)}
.impact.quote::before{left:0; top:0; border-width:2px 0 0 2px}
.impact.quote::after{right:0; bottom:0; border-width:0 2px 2px 0}
.impact.quote p{color:var(--b900)}
.impact.solid{border-radius:3px; background:var(--b900)}
.impact.solid::before{display:none}

/* Notes: a mono heading and a rule, no tinted box, no coloured side bar. */
.note-b, .note-b.info, .note-b.warn, .note-b.good, .note-b.bad{
  background:none; border:0; border-radius:0; padding:14px 0 0; border-top:1px solid #D9DEE5; box-shadow:none}
.note-b .nh{font:600 12.5px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--sec); margin-bottom:8px}
.note-b.warn .nh{color:#A5520F}
.note-b.good .nh{color:#1F7A4D}
.note-b.bad .nh{color:#B42318}
.note-b p{color:var(--body)}

/* ---------- media ---------- */
.vframe, .blk img, .split img, .fig img, figure img{border-radius:3px}
.vframe .play{background:#FF8A3D; color:var(--b900)}
.vframe:hover .play{background:#FF9F5E}

/* ---------- funnel: no gold band ---------- */
.fband.lv3{background:linear-gradient(100deg, var(--steel), #1B3F6C)}

/* ---------- interactive pieces keep their boxes, squared ---------- */
.opt, .fcard .face, .scbox, .sortcard, .check, .accrow, .dl, .refl textarea, .gf input, .gf select{border-radius:3px}
.btn{border-radius:3px}
.fcard .fk{color:var(--sky-strong)}
.fcard .back .fk{color:var(--sky)}
.fcprog i.on{background:var(--sky-strong)}
.fcprog i.seen{background:var(--b500)}

/* ---------- lesson navigation ---------- */
.lnav .btn.line{border-radius:3px}
.gatehint{color:var(--sec)}

/* ==========================================================================
   The gate. Only the form is a box (you fill it in). The teaser is the six
   module numerals from the landing: outlined = opens with your email.
   ========================================================================== */
.gatecard{background:none; border:0; box-shadow:none; padding:0}
.gatehead{grid-template-columns:1fr}
.gatehead .gl{display:none}
.gatehead .tag{color:var(--sky-strong)}
.gatehead h2{font-size:clamp(26px, 3.2vw, 36px); margin:8px 0 10px; max-width:20ch}
.gatehead .p{color:var(--body); max-width:58ch}

.gategrid{display:grid; gap:28px; margin-top:26px}
.gateteaser{margin:0; padding:0; border:0}
.gateteaser .k{font:600 12.5px/1.3 var(--mono); letter-spacing:.06em; color:var(--sec); margin-bottom:14px}
.gtlist li{display:grid; grid-template-columns:3.2rem minmax(0,1fr) auto; gap:4px 14px; align-items:start; padding:12px 0; border-top:1px solid #E3E7EC}
.gtlist li:first-child{border-top:0}
.gtlist .n{font:800 44px/.85 "Poppins", system-ui, sans-serif; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.6px var(--b900)}
.gtlist .t b{display:block; font:700 16.5px/1.3 "Poppins", system-ui, sans-serif; color:var(--b900)}
.gtlist .t span{display:block; margin-top:4px; font-size:15px; line-height:1.45; color:var(--body)}
.gtlist .m{font:600 12.5px/1.2 var(--mono); color:var(--sec); white-space:nowrap; padding-top:3px}
.gtfiles{gap:6px 22px; margin-top:14px}
.gtfiles li{background:none; border:0; padding:0; border-radius:0; font-size:15px; color:var(--body)}
.gtfiles li::before{content:"FILE"; font:600 11px/1 var(--mono); letter-spacing:.06em; color:var(--sec); margin-right:.5em}

/* The form is the one box: a white sheet on a paper ground. */
.gateside{display:grid; gap:18px; align-content:start}
.gateform{margin:0; padding:24px 22px; background:#fff; border-radius:3px;
  box-shadow:0 1px 0 rgba(20,48,88,.06), 0 30px 50px -24px rgba(20,48,88,.4); outline:1px solid #E3E7EC}
.gateform .btn{width:100%; justify-content:center}
.gatepts{margin:0; padding:0; border:0; grid-template-columns:1fr; gap:8px}
.gatepts li{font-weight:500; color:var(--body)}
.gatepts li svg{color:var(--sky-strong)}

@media (max-width:760px){
  /* Phones: titles only in the teaser, so the form comes on the next screen. */
  .gtlist .t span{display:none}
  .gtlist li{padding:8px 0; align-items:center}
  .gtlist .n{font-size:34px}
  .gateform{padding:20px 16px}
}
@media (min-width:1000px){
  .gategrid{grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:40px; align-items:start}
  .gateside{position:sticky; top:84px}
}

.gatedone .gl{background:var(--sky-strong)}

/* ---------- films: the title sits under the footage, not on it ---------- */
.vframe{border-radius:3px; box-shadow:0 24px 48px -26px rgba(20,48,88,.45)}
.vframe .veil{display:none}
.vframe:hover img{transform:none; filter:brightness(.92)}
.vframe .vlen{position:absolute; right:10px; bottom:10px; padding:4px 7px; background:rgba(11,28,56,.82); color:#fff;
  font:600 12px/1 var(--mono); border-radius:2px}
.vmeta{margin-top:12px; display:grid; gap:2px}
.vmeta b{font:700 18px/1.3 "Poppins", system-ui, sans-serif; color:var(--b900)}
.vmeta small{font:600 12.5px/1.3 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--sec)}
.vmeta + .vcap{margin-top:6px}

/* ---------- the quiz: a test sheet, not a tinted card. The answers keep
   their boxes because you click them. ---------- */
.quiz{background:none; border:0; border-radius:0; box-shadow:none; padding:18px 0 0; border-top:2px solid var(--b900)}
.quiz .tag{color:var(--sky-strong)}

/* ---------- "next module" panel: flat navy, no glow ---------- */
.ctab{border-radius:3px; background:var(--b900)}
.ctab::before{display:none}

/* ---------- no locks anywhere: everything is free, the sign-up only opens it.
   Modules after the gate look like any other module in the rail. ---------- */
.toc li.locked .node .lk{display:none !important}
.toc li.locked .node .num{display:inline}
.toc li.locked .node{background:#12406A; color:#8FAAC5; box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.toc li.locked.on .node{background:#fff; color:var(--b900); box-shadow:0 0 0 3px rgba(124,196,255,.45)}
.toc li.locked .tx b{color:inherit}