/* fta-lesson-theme.css — SHARED warm-paper skin for FTA interactive HTML lessons.
 * Canonical source: component_library/lesson-template/theme.css
 * Every catalog lesson links this file; change the skin here once and all lessons inherit it.
 * Palette mirrors the fta-dashboard tokens: paper #FBF7EF, ink #101828, sand #EAE2D0,
 * gold system #F59E0B/#FBBF24/#B45309 (ink text on gold), pastel chips, Poppins/Inter.
 * Dark is reserved ONLY for deliberate chart/video 'night islands' (.video-wrap). */
:root{
    /* warm-paper system — mirrors fta-dashboard tokens */
    --paper:#FBF7EF; --paper-2:#F3EDE1; --card:#FFFFFF;
    --ink:#101828; --soft:#5B6472; --dim:#98A2B3;
    --sand:#EAE2D0; --sand-2:#E4DBC6;
    --gold:#FBBF24; --gold-500:#F59E0B; --gold-600:#D97706; --gold-700:#B45309; --gold-bg:#FEF3C7;
    --green:#16A34A; --green-2:#22C55E; --green-bg:#DCFCE7; --green-border:#BBF7D0;
    --red:#DC2626; --red-2:#B91C1C; --red-bg:#FEE2E2; --red-border:#FECACA;
    --sky-bg:#E0F2FE;
    --font-display:'Poppins',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    --font-body:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    --shadow-soft:0 1px 2px rgba(16,24,40,.05),0 4px 16px rgba(16,24,40,.06);
    --shadow-lift:0 2px 4px rgba(16,24,40,.06),0 12px 32px rgba(16,24,40,.10);
    --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:24px; --r-full:9999px;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--font-body);background:var(--paper);color:var(--ink);line-height:1.65;
    -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden;padding-bottom:76px}
  h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em}
  section{min-height:100vh;position:relative;display:flex;align-items:center;padding:72px 22px 120px}
  .inner{max-width:1040px;margin:0 auto;width:100%}
  .label{font-family:var(--font-display);font-weight:700;letter-spacing:3px;text-transform:uppercase;
    font-size:12.5px;color:var(--gold-700)}
  h2.title{font-size:clamp(28px,4.6vw,46px);font-weight:800;line-height:1.05;margin:10px 0 14px}
  .lead{font-size:clamp(16px,2.1vw,20px);color:var(--soft);max-width:720px}
  .card{background:var(--card);border:1px solid var(--sand);border-radius:var(--r-xl);box-shadow:var(--shadow-soft)}
  .anim{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .anim.vis{opacity:1;transform:none}
  .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

  /* progress bar */
  #progressBar{position:fixed;top:0;left:0;height:3px;width:0%;z-index:10000;
    background:linear-gradient(90deg,var(--gold),var(--green-2));transition:width .35s ease}

  /* HERO */
  #hero{background:
    radial-gradient(1100px 600px at 85% -10%,rgba(251,191,36,.14),transparent 60%),
    radial-gradient(900px 700px at 5% 110%,rgba(22,163,74,.10),transparent 60%),var(--paper)}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
  @media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:28px}}
  .badges{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 26px}
  .badge{font-family:var(--font-display);font-weight:600;font-size:12.5px;padding:7px 13px;border-radius:var(--r-full);
    border:1px solid var(--sand);background:var(--card);color:var(--soft)}
  .badge b{color:var(--gold-600)}
  .hero-art{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--sand);box-shadow:var(--shadow-lift);
    position:relative;aspect-ratio:16/10;background:var(--paper-2)}
  .hero-art img{width:100%;height:100%;object-fit:cover;display:block}
  .hero-art::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 55%,rgba(16,24,40,.28));pointer-events:none}
  .btn{font-family:var(--font-display);font-weight:700;font-size:16px;padding:15px 30px;border:none;cursor:pointer;
    border-radius:var(--r-full);background:var(--gold);color:var(--ink);box-shadow:0 10px 26px rgba(251,191,36,.32);
    transition:transform .18s ease,box-shadow .18s ease}
  .btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(251,191,36,.4)}
  .btn.ghost{background:var(--card);border:1px solid var(--sand);box-shadow:var(--shadow-soft);color:var(--ink)}
  .btn.green{background:var(--green);color:#fff;box-shadow:0 10px 26px rgba(22,163,74,.28)}

  /* two-column compare */
  .two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
  @media(max-width:760px){.two{grid-template-columns:1fr}}
  .cmp{border-radius:var(--r-lg);padding:24px 24px 22px;border:1px solid var(--sand);background:var(--card)}
  .cmp h3{font-size:19px;margin-bottom:6px}
  .cmp.safe{background:linear-gradient(160deg,var(--sky-bg),var(--card))}
  .cmp.grow{background:linear-gradient(160deg,var(--green-bg),var(--card));border-color:var(--green-border)}
  .cmp .tag{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
  .cmp.safe .tag{color:#0369A1}.cmp.grow .tag{color:var(--green)}
  .cmp p{color:var(--soft);font-size:15px;margin-top:8px}
  .define{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:center}
  @media(max-width:860px){.define{grid-template-columns:1fr}}
  .define-art{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--sand);box-shadow:var(--shadow-soft)}
  .define-art img{width:100%;display:block}
  .bigdef{font-size:clamp(22px,3vw,30px);font-weight:800;line-height:1.2}
  .bigdef .hi{color:var(--gold-600)}
  .insight{margin-top:22px;border-left:4px solid var(--gold);background:var(--gold-bg);
    border-radius:0 var(--r-md) var(--r-md) 0;padding:18px 22px;color:#7a4d06;font-size:15px}

  /* compounding video */
  .video-wrap{position:relative;max-width:900px;margin:26px auto 0;border-radius:var(--r-xl);overflow:hidden;
    border:1px solid var(--sand);box-shadow:var(--shadow-lift);background:#0b1220}
  .video-wrap video{width:100%;display:block}
  .video-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(11,18,32,.35);cursor:pointer;transition:opacity .3s}
  .video-ov.hide{opacity:0;pointer-events:none}
  .play-circ{width:78px;height:78px;border-radius:50%;background:rgba(251,191,36,.95);
    display:flex;align-items:center;justify-content:center;box-shadow:0 0 40px rgba(251,191,36,.45)}
  .play-circ svg{width:30px;height:30px;fill:var(--ink);margin-left:4px}
  .disclaim{margin:16px auto 0;max-width:900px;font-size:13.5px;color:var(--soft);text-align:center;
    background:var(--gold-bg);border:1px solid #FDE68A;border-radius:var(--r-md);padding:11px 16px}
  .disclaim b{color:var(--gold-600)}

  /* goals sorter */
  .sorter{max-width:960px;margin:26px auto 0}
  .pool{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;min-height:56px;padding:14px;
    border:1.5px dashed var(--sand-2);border-radius:var(--r-lg);background:var(--paper-2)}
  .pool.empty::after{content:"All sorted — nice work.";color:var(--dim);font-size:14px;font-weight:600}
  .chip{font-family:var(--font-display);font-weight:600;font-size:15px;padding:12px 18px;border-radius:var(--r-full);
    border:1px solid var(--sand);background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-soft);
    transition:transform .15s ease,border-color .15s ease,background .15s ease}
  .chip:hover{transform:translateY(-2px)}
  .chip.sel{border-color:var(--gold);background:var(--gold-bg);box-shadow:0 0 0 3px rgba(251,191,36,.25)}
  .chip.ok{border-color:var(--green-border);background:var(--green-bg);color:var(--green);cursor:default}
  .chip.no{border-color:var(--red-border);background:var(--red-bg);color:var(--red);cursor:default}
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px}
  @media(max-width:700px){.cols{grid-template-columns:1fr}}
  .col{border-radius:var(--r-lg);padding:18px;min-height:180px;border:1.5px solid var(--sand);background:var(--card);
    transition:border-color .2s ease,background .2s ease}
  .col h4{font-size:16px;margin-bottom:4px}
  .col .sub{font-size:12.5px;color:var(--soft);margin-bottom:12px}
  .col.reasonable{background:linear-gradient(170deg,var(--green-bg),var(--card))}
  .col.reasonable h4{color:var(--green)}
  .col.gamble{background:linear-gradient(170deg,var(--red-bg),var(--card))}
  .col.gamble h4{color:var(--red)}
  .col.armed{border-color:var(--gold);box-shadow:0 0 0 3px rgba(251,191,36,.2);cursor:pointer}
  .col .drop{display:flex;flex-direction:column;gap:9px}
  .sorter-fb{min-height:30px;margin-top:16px;text-align:center;font-weight:600;color:var(--soft)}
  .sorter-fb.done{color:var(--green)}

  /* quiz */
  .quiz{max-width:820px;margin:24px auto 0}
  .q{background:var(--card);border:1px solid var(--sand);border-radius:var(--r-lg);padding:22px;margin-bottom:16px;
    box-shadow:var(--shadow-soft)}
  .q h4{font-size:17px;margin-bottom:14px}
  .opt{display:block;width:100%;text-align:left;font-family:var(--font-body);font-size:15px;padding:13px 16px;margin:8px 0;
    border:1px solid var(--sand);border-radius:var(--r-md);background:var(--paper);color:var(--ink);cursor:pointer;
    transition:all .15s ease}
  .opt:hover:not(:disabled){border-color:var(--gold);background:var(--gold-bg)}
  .opt:disabled{cursor:default}
  .opt.sel{border-color:var(--gold);background:var(--gold-bg);font-weight:600}
  .opt.correct{border-color:var(--green-border);background:var(--green-bg);color:var(--green);font-weight:600}
  .opt.wrong{border-color:var(--red-border);background:var(--red-bg);color:var(--red);font-weight:600}
  .exp{display:none;margin-top:10px;padding:14px 16px;background:var(--green-bg);border:1px solid var(--green-border);
    border-radius:var(--r-md);font-size:14px;color:#166534;line-height:1.55}
  .quiz-result{display:none;text-align:center;padding:22px;border-radius:var(--r-lg);background:var(--gold-bg);
    border:1px solid #FDE68A;margin-top:6px}
  .quiz-result .score{font-family:var(--font-display);font-weight:800;font-size:34px;color:var(--gold-600)}
  .quiz-result p{color:var(--soft);margin-top:4px}

  /* summary */
  #bridge{background:radial-gradient(900px 600px at 50% -10%,rgba(251,191,36,.12),transparent 60%),var(--paper)}
  .takeaways{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
  @media(max-width:700px){.takeaways{grid-template-columns:1fr}}
  .take{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--sand);
    border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow-soft)}
  .take .ck{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
  .take p{font-size:15px;color:var(--ink)}
  .nextcard{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
    padding:22px 24px;border-radius:var(--r-lg);border:1px dashed var(--gold);background:var(--gold-bg)}
  .nextcard .up{font-size:12.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold-700)}
  .nextcard h3{font-size:20px;margin-top:3px}
  .finish-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:26px}
  .xp-pill{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--gold-600);
    background:var(--gold-bg);border:1px solid #FDE68A;padding:9px 15px;border-radius:var(--r-full)}
  .done-chip{display:none;align-items:center;gap:8px;color:var(--green);font-weight:700}

  /* audio bar */
  #bar{position:fixed;bottom:0;left:0;right:0;z-index:10000;display:flex;align-items:center;gap:13px;
    padding:10px 18px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid var(--sand)}
  #bar .pbtn{width:40px;height:40px;flex:0 0 40px;border:none;border-radius:50%;background:var(--gold);color:var(--ink);
    font-size:15px;cursor:pointer;box-shadow:0 4px 12px rgba(251,191,36,.3)}
  #bar .t{font-family:var(--font-display);font-size:12.5px;color:var(--soft);min-width:38px;text-align:center}
  #seek{flex:1;height:5px;-webkit-appearance:none;appearance:none;border-radius:99px;background:var(--sand);cursor:pointer}
  #seek::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--gold-600)}
  #seek::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;background:var(--gold-600)}
  #secLabel{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--ink);
    max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  @media(max-width:640px){#secLabel{display:none}}
  #spd{border:1px solid var(--sand);background:var(--card);color:var(--soft);font-family:var(--font-display);
    font-weight:600;font-size:12.5px;padding:7px 11px;border-radius:var(--r-full);cursor:pointer}

  /* nav dots */
  #dots{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:9000;display:flex;flex-direction:column;gap:12px}
  @media(max-width:900px){#dots{display:none}}
  .dot{width:11px;height:11px;border-radius:50%;background:var(--sand-2);border:1px solid #cdbf9f;cursor:pointer;
    position:relative;transition:all .2s ease}
  .dot.active{background:var(--gold);border-color:var(--gold-600);transform:scale(1.25)}
  .dot .dl{position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px;
    font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--sand);border-radius:var(--r-full);
    padding:4px 10px;box-shadow:var(--shadow-soft);opacity:0;pointer-events:none;transition:opacity .18s ease}
  .dot:hover .dl{opacity:1}

  /* continue button */
  #contWrap{display:none;position:fixed;bottom:78px;left:50%;transform:translateX(-50%);z-index:10001}
  #contBtn{font-family:var(--font-display);font-weight:700;font-size:15px;padding:12px 26px;border:none;cursor:pointer;
    border-radius:var(--r-full);background:var(--ink);color:#fff;box-shadow:var(--shadow-lift)}