/* ============================================================
   FORGED KIT — the design system every FORGED screen and lesson runs on.
   Forked from Reed Academy's lesson kit, rebranded: red, black, white,
   charcoal, and ember. Rules: boys-to-men-digital/DESIGN.md.

   Every class is prefixed fk- so the kit can live inside another site
   (the Boys2Men pages) without colliding with its styles.
   Wrap kit content in .fk ; add data-theme="dark" on it (or an ancestor)
   for dark mode.
   ============================================================ */

.fk{
  --fk-bg:#FFFFFF; --fk-surface:#F4F4F5; --fk-surface-2:#E6E6E8;
  --fk-text:#0B0B0C; --fk-muted:#5F6268; --fk-sep:rgba(11,11,12,.12);
  --fk-accent:#C62828; --fk-accent-soft:rgba(198,40,40,.11);
  --fk-ember:#E8590C; --fk-ember-soft:rgba(232,89,12,.14);
  --fk-green:#1E7B3A; --fk-green-soft:rgba(30,123,58,.13);
  --fk-amber:#9A5B00; --fk-amber-soft:rgba(255,176,32,.20);
  --fk-radius:18px; --fk-ease:cubic-bezier(.16,1,.3,1);
  --fk-font:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  color:var(--fk-text); font:16px/1.5 var(--fk-font); letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
.fk[data-theme=dark],[data-theme=dark] .fk{
  --fk-bg:#0B0B0C; --fk-surface:#1C1D1F; --fk-surface-2:#2A2B2E;
  --fk-text:#F4F4F5; --fk-muted:#9A9DA3; --fk-sep:rgba(255,255,255,.12);
  --fk-accent:#E53935; --fk-accent-soft:rgba(229,57,53,.18);
  --fk-ember:#FF7A1A; --fk-ember-soft:rgba(255,122,26,.18);
  --fk-green:#30D158; --fk-green-soft:rgba(48,209,88,.16);
  --fk-amber:#FFB020; --fk-amber-soft:rgba(255,176,32,.16);
}
.fk *,.fk *::before,.fk *::after{box-sizing:border-box}
.fk p{margin:0 0 12px;max-width:none}
.fk h1,.fk h2,.fk h3{margin:0;letter-spacing:-.02em;line-height:1.12;font-weight:800}

/* ---------- Type ---------- */
.fk-display{font-size:30px;line-height:1.05;font-weight:900;letter-spacing:-.03em;margin:0 0 10px;text-wrap:balance}
.fk-h{font-size:21px;font-weight:800;margin:0 0 8px;text-wrap:balance}
.fk-h3{font-size:16px;font-weight:700;margin:0 0 4px}
.fk-lead{font-size:17px;line-height:1.45;color:var(--fk-muted)}
.fk-small{font-size:13px;line-height:1.4}
.fk-muted{color:var(--fk-muted)}
.fk-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fk-accent);margin:0 0 6px}
.fk-num{font-variant-numeric:tabular-nums}
.fk-center{text-align:center}

/* ---------- The phone ---------- */
.fk-phone{width:300px;max-width:100%;aspect-ratio:9/19.5;border-radius:44px;padding:10px;
  background:#050505;box-shadow:0 0 0 2px #2a2a2a,0 30px 60px -20px rgba(0,0,0,.55);position:relative;flex:none}
.fk-phone::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:84px;height:24px;border-radius:14px;background:#050505;z-index:3}
.fk-screen{height:100%;border-radius:35px;overflow:hidden;background:var(--fk-bg);position:relative;
  display:flex;flex-direction:column}
.fk-status{display:flex;justify-content:space-between;align-items:center;padding:14px 26px 6px;
  font-size:12px;font-weight:700;flex:none}
.fk-body{flex:1;overflow:auto;padding:10px 16px 16px;scrollbar-width:none}
.fk-body::-webkit-scrollbar{display:none}
.fk-tabbar{flex:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--fk-sep);
  padding:8px 6px 18px;background:var(--fk-bg)}
.fk-tab{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:700;color:var(--fk-muted)}
.fk-tab i{font-style:normal;font-size:18px;line-height:1.1;filter:grayscale(1);opacity:.7}
.fk-tab.on{color:var(--fk-accent)}.fk-tab.on i{filter:none;opacity:1}

/* ---------- Surfaces ---------- */
.fk-card{background:var(--fk-surface);border-radius:var(--fk-radius);padding:14px;margin:0 0 10px}
.fk-card>:last-child{margin-bottom:0}
.fk-card.hot{background:linear-gradient(135deg,var(--fk-accent) 0%,#7a1010 100%);color:#fff}
.fk-card.hot .fk-muted{color:rgba(255,255,255,.78)}
.fk-card.ink{background:#0B0B0C;color:#F4F4F5}
.fk-row{display:flex;align-items:center;gap:10px}
.fk-row.between{justify-content:space-between}
.fk-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}
.fk-sep{height:1px;background:var(--fk-sep);margin:12px 0;border:0}
.fk-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 9px;
  border-radius:20px;background:var(--fk-surface-2);color:var(--fk-muted)}
.fk-pill.red{background:var(--fk-accent-soft);color:var(--fk-accent)}
.fk-pill.ember{background:var(--fk-ember-soft);color:var(--fk-ember)}
.fk-pill.green{background:var(--fk-green-soft);color:var(--fk-green)}

/* ---------- Buttons ---------- */
.fk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;
  border-radius:14px;border:0;font:800 15px var(--fk-font);background:var(--fk-accent);color:#fff;cursor:pointer;
  transition:transform .18s var(--fk-ease),background .2s;-webkit-tap-highlight-color:transparent}
.fk-btn:active{transform:scale(.97)}
.fk-btn.ghost{background:var(--fk-surface-2);color:var(--fk-text)}
.fk-btn.block{width:100%}
.fk-btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- Rhythms + fire ---------- */
.fk-rhythm{display:flex;align-items:center;gap:12px;background:var(--fk-surface);border-radius:14px;
  padding:11px 12px;margin:0 0 8px}
.fk-check{width:26px;height:26px;border-radius:50%;border:2px solid var(--fk-sep);flex:none;display:grid;
  place-items:center;font-size:13px;color:#fff;transition:all .25s var(--fk-ease)}
.fk-rhythm.done .fk-check{background:var(--fk-accent);border-color:var(--fk-accent)}
.fk-rhythm.done .fk-rname{color:var(--fk-muted);text-decoration:line-through}
.fk-rname{font-weight:700;font-size:14px;flex:1;line-height:1.25}
.fk-fire{font-weight:800;font-size:13px;color:var(--fk-ember);white-space:nowrap}
.fk-flame{display:inline-block;animation:fkFlicker 1.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes fkFlicker{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.08) rotate(2deg)}}

/* ---------- Progress ---------- */
.fk-prog{height:6px;border-radius:4px;background:var(--fk-surface-2);overflow:hidden}
.fk-prog i{display:block;height:100%;width:var(--v,0%);background:var(--fk-accent);border-radius:4px;
  transition:width .6s var(--fk-ease)}
.fk-prog.ember i{background:linear-gradient(90deg,var(--fk-accent),var(--fk-ember))}

/* ---------- The ladder: Ore → Sharpened ---------- */
.fk-ladder{display:flex;gap:4px;margin:0 0 6px}
.fk-ladder span{flex:1;height:8px;border-radius:3px;background:var(--fk-surface-2)}
.fk-ladder span.on{background:var(--fk-accent)}
.fk-ladder span.now{background:linear-gradient(90deg,var(--fk-accent),var(--fk-ember));
  box-shadow:0 0 12px var(--fk-ember)}
.fk-ladder-names{display:flex;justify-content:space-between;font-size:9px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fk-muted)}

/* ---------- Stats ---------- */
.fk-stat{background:var(--fk-surface);border-radius:14px;padding:10px 12px}
.fk-stat b{display:block;font-size:22px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.fk-stat span{font-size:11px;color:var(--fk-muted);font-weight:600}

/* ---------- Choices: quiz + choose-your-path ----------
   RIGHT is green. WRONG is AMBER, never red: red is the brand. */
.fk-choice{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:600 15px/1.35 var(--fk-font);
  color:var(--fk-text);background:var(--fk-surface);border:2px solid transparent;border-radius:14px;
  padding:13px 14px;margin:0 0 8px;cursor:pointer;transition:border-color .2s,background .2s,transform .15s,opacity .2s;
  -webkit-tap-highlight-color:transparent}
.fk-choice:active{transform:scale(.98)}
.fk-choice.right{border-color:var(--fk-green);background:var(--fk-green-soft)}
.fk-choice.wrong{border-color:var(--fk-amber);background:var(--fk-amber-soft)}
.fk-q.done .fk-choice:not(.right):not(.wrong){opacity:.5}
.fk-fb{font-size:14px;line-height:1.45;margin:4px 0 0;display:none}
.fk-fb.show{display:block;animation:fkIn .4s var(--fk-ease)}
.fk-fb.good{color:var(--fk-green)}.fk-fb.bad{color:var(--fk-amber)}

/* ---------- Lesson stepper ---------- */
.fk-lesson{display:flex;flex-direction:column;height:100%}
.fk-step{display:none;flex-direction:column;flex:1}
.fk-step.on{display:flex;animation:fkIn .45s var(--fk-ease)}
.fk-step .fk-grow{flex:1}
.fk-bigidea{font-size:26px;font-weight:900;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.fk-bigidea em{font-style:normal;color:var(--fk-accent)}

/* ---------- Forge moments ---------- */
.fk-strike{animation:fkStrike .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes fkStrike{0%{transform:scale(1)}25%{transform:scale(.94) translateY(2px)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.fk-spark{position:fixed;width:5px;height:5px;border-radius:50%;pointer-events:none;z-index:9999;
  background:radial-gradient(circle,#fff 0%,#FFC04D 40%,#FF6A00 100%);box-shadow:0 0 8px #FF8A1A}
.fk-xp{position:fixed;pointer-events:none;z-index:9999;font:900 18px var(--fk-font);color:var(--fk-ember);
  text-shadow:0 2px 12px rgba(255,122,26,.5)}

/* ---------- The Furnace ---------- */
.fk-furnace{position:relative;height:170px;border-radius:22px;overflow:hidden;background:#0B0B0C;
  display:grid;place-items:center;margin:0 0 12px;isolation:isolate}
.fk-furnace .door{position:absolute;inset:18px 30px;border-radius:14px 14px 6px 6px;
  border:3px solid #333;background:radial-gradient(ellipse at 50% 110%,#2a0c05 0%,#0e0e0e 70%)}
.fk-furnace .core{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,#fff6d8 0%,#ffb347 35%,#e8590c 65%,rgba(198,40,40,0) 72%);
  opacity:.15;transform:scale(.4);transition:opacity .9s ease,transform 1.2s var(--fk-ease);filter:blur(1px)}
.fk-furnace .label{position:absolute;bottom:10px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.fk-furnace.ignite .core{opacity:.8;transform:scale(1)}
.fk-furnace.smelt .core{opacity:1;transform:scale(1.35);animation:fkSmelt 1.1s ease-in-out infinite}
.fk-furnace.smelt .door{background:radial-gradient(ellipse at 50% 100%,#7a1f06 0%,#2a0c05 45%,#0e0e0e 80%)}
.fk-furnace.pour .core{opacity:1;transform:scale(2.4);filter:blur(4px)}
@keyframes fkSmelt{0%,100%{filter:blur(1px) brightness(1)}50%{filter:blur(2px) brightness(1.35)}}
.fk-result{opacity:0;transform:translateY(10px)}
.fk-result.in{opacity:1;transform:none;transition:opacity .5s var(--fk-ease),transform .5s var(--fk-ease)}

/* ---------- Motion ---------- */
@keyframes fkIn{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){
  .fk *,.fk *::before,.fk *::after{animation:none!important;transition:none!important}
  .fk-result{opacity:1;transform:none}
}

/* ============================================================
   DEMO OVERLAY (forged-demo.js): "Demo the app"
   Desktop: a phone on a dark stage with a guide panel. Phone (<=520px): the demo IS the screen.
   ============================================================ */
html.fd-open{overflow:hidden}
.fd{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 55% 55%,rgba(232,89,12,.28) 0%,rgba(10,10,10,.97) 58%),#0A0A0A;
  font-family:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;animation:fdIn .3s ease}
.fd[hidden]{display:none}
@keyframes fdIn{from{opacity:0}}
.fd-stage{display:flex;align-items:center;gap:56px;padding:24px;max-height:100%}
.fd-side{width:290px;color:#fff}
.fd-kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FF7A1A;margin:0 0 10px}
.fd-h{font-size:34px;font-weight:900;letter-spacing:-.03em;line-height:1.05;margin:0 0 10px;color:#fff}
.fd-p{color:rgba(255,255,255,.8);margin:0 0 18px;font-size:16px;line-height:1.5}
.fd-tips{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.fd-tips li{position:relative;padding-left:22px;color:rgba(255,255,255,.88);font-size:15px;line-height:1.4}
.fd-tips li::before{content:"\2192";position:absolute;left:0;color:#FF7A1A;font-weight:900}
.fd-mode{display:inline-flex;border:2px solid rgba(255,255,255,.3);border-radius:4px;padding:3px;gap:3px;margin-bottom:14px}
.fd-mode button{font:inherit;font-weight:800;font-size:14px;background:none;border:0;color:#fff;padding:8px 14px;border-radius:2px;cursor:pointer;min-height:40px}
.fd-mode button.on{background:#fff;color:#0A0A0A}
.fd-restart{display:block;background:none;border:0;color:rgba(255,255,255,.7);font:700 14px inherit;font-family:inherit;padding:6px 0;cursor:pointer}
.fd-restart:hover{color:#fff}
.fd-fine{font-size:13px;color:rgba(255,255,255,.55);margin:14px 0 0}
.fd-phone{height:min(88vh,800px);width:auto;box-shadow:0 0 0 2px #2a2a2a,0 40px 90px -20px rgba(232,89,12,.35)}
.fd-close{position:absolute;top:18px;right:18px;z-index:5;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:20px;font-weight:700}
.fd-close:hover{background:rgba(255,255,255,.26)}
.fd .fk-screen{position:relative}
.fd .fk-tab{background:none;border:0;cursor:pointer;font-family:inherit}
@media (max-width:900px){.fd-side{display:none}.fd-stage{gap:0}}
@media (max-width:520px),(max-height:560px){
  .fd-stage{padding:0;width:100%;height:100%}
  .fd-phone{width:100%!important;height:100%;border-radius:0;padding:0;box-shadow:none;aspect-ratio:auto}
  .fd-phone::before{display:none}
  .fd-phone .fk-screen{border-radius:0}
  .fd-close{top:8px;right:10px;width:38px;height:38px;font-size:16px;background:rgba(255,255,255,.16)}
  .fd .fk-status{padding:12px 58px 6px 18px}
}
.fd-toast{position:absolute;left:50%;bottom:84px;z-index:6;transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:#F4F4F5;color:#0B0B0C;font:800 13px var(--fk-font);padding:10px 16px;border-radius:20px;white-space:nowrap;
  transition:opacity .25s,transform .25s;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.fd-toast.show{opacity:1;transform:translate(-50%,0)}
.fd-body{position:relative}
.fd-body .fk-lesson{min-height:100%}
.fd-card{display:block;width:100%;text-align:left;border:0;font:inherit;color:inherit;cursor:pointer;transition:transform .15s}
.fd-card:active{transform:scale(.98)}
.fd-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;font-size:14px;color:var(--fk-text);
  background:var(--fk-surface);border:0;border-radius:14px;padding:12px 14px;margin:0 0 8px;cursor:pointer}
.fd-row .go{margin-left:auto;color:var(--fk-muted);font-size:13px;white-space:nowrap}
.fd-row.locked{opacity:.6}
.fd-back{background:none;border:0;color:var(--fk-accent);font:800 14px var(--fk-font);padding:4px 0;margin:0 0 10px;cursor:pointer}
.fd-x{background:var(--fk-surface-2);border:0;color:var(--fk-muted);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:13px;flex:none}
.fd-rh{width:100%;text-align:left;border:0;font:inherit;color:inherit;cursor:pointer}
.fd-pillbtn{border:0;cursor:pointer;font:inherit;font-size:11px;font-weight:800;white-space:nowrap}
.fd-switch{width:48px;height:28px;border-radius:14px;background:var(--fk-surface-2);position:relative;border:0;cursor:pointer;flex:none;transition:background .2s}
.fd-switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  transition:left .2s var(--fk-ease);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.fd-switch[aria-checked=true]{background:var(--fk-green)}
.fd-switch[aria-checked=true]::after{left:23px}
.fd-seg{display:flex;background:var(--fk-surface-2);border-radius:10px;padding:2px;gap:2px}
.fd-seg button{flex:1;border:0;background:none;font:700 12px var(--fk-font);color:var(--fk-text);padding:8px 4px;border-radius:8px;cursor:pointer}
.fd-seg button.on{background:var(--fk-bg);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.fd-bar{height:8px;border-radius:4px;background:var(--fk-surface-2);overflow:hidden;margin:4px 0 10px}
.fd-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--fk-accent),var(--fk-ember));transition:width .8s var(--fk-ease)}
.fd-then i{background:var(--fk-muted);opacity:.55}
.fd-sort-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--fk-surface);
  border-radius:14px;padding:10px 10px 10px 14px;margin:0 0 8px}
.fd-sort-item span{font-size:14px;font-weight:600;line-height:1.3}
.fd-sort-item div{display:flex;gap:6px;flex:none}
.fd-sort-item button{font:800 12px var(--fk-font);border:2px solid transparent;border-radius:10px;padding:8px 10px;
  background:var(--fk-surface-2);color:var(--fk-text);cursor:pointer;min-height:36px}
.fd-sort-item button.right{border-color:var(--fk-green);background:var(--fk-green-soft)}
.fd-sort-item button.wrong{border-color:var(--fk-amber);background:var(--fk-amber-soft)}
.fd-sort-item.done button:not(.right):not(.wrong){opacity:.45}
.fd-welcome{display:flex;flex-direction:column;justify-content:center;min-height:100%;text-align:center;padding:10px 6px}
.fd-ore{width:118px;height:118px;margin:0 auto 20px;border-radius:42% 58% 46% 54%;
  background:radial-gradient(circle at 40% 35%,#FFD08A 0%,#FF8A1A 22%,#C62828 48%,#3a1208 72%,#1c1c1c 100%);
  box-shadow:0 0 44px rgba(255,122,26,.5);animation:fdGlow 2.6s ease-in-out infinite}
@keyframes fdGlow{50%{box-shadow:0 0 78px rgba(255,122,26,.85);transform:scale(1.05) rotate(4deg)}}
.fd-level{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:28px;color:#fff;background:radial-gradient(circle at 50% 42%,rgba(255,122,26,.5) 0%,#0B0B0C 66%);animation:fdIn .4s ease}
.fd-level .from{font-size:22px;font-weight:900;color:#9A9DA3;text-decoration:line-through;margin:0}
.fd-level .to{font-size:54px;font-weight:900;letter-spacing:-.03em;line-height:1;margin:4px 0 6px;color:#FF7A1A;
  text-shadow:0 0 32px rgba(255,122,26,.75);animation:fdForge 1.2s cubic-bezier(.2,1.4,.4,1)}
@keyframes fdForge{0%{transform:scale(.35);opacity:0;filter:blur(8px)}60%{transform:scale(1.14)}100%{transform:scale(1);opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){.fd,.fd-level,.fd-ore,.fd-level .to{animation:none!important}}