/* TradeCalc — Math for the Building Trades */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f0d09;
  --s1:#1a1610;--s2:#221e16;--s3:#2d2820;--s4:#3a3228;
  --b1:rgba(255,255,255,.07);--b2:rgba(255,255,255,.12);--b3:rgba(255,255,255,.20);
  --t1:#f5f0e8;--t2:#c8bfa8;--t3:#8a7e6a;
  --copper:#A85A2A;--copper2:#c4763e;--copper3:#d9936a;
  --copperd:rgba(168,90,42,.18);--copperg:rgba(168,90,42,.35);
  --on-copper:#fff8f0;
  --gr:#5a9e6f;--grd:rgba(90,158,111,.15);
  --am:#c9932a;--amd:rgba(201,147,42,.15);
  --rd:#c05050;--rdd:rgba(192,80,80,.15);
  --navy:#2E2E2E;
  --sans:-apple-system,BlinkMacSystemFont,'Helvetica Neue',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --r:10px;--rlg:16px;--rxl:22px;--rpill:999px;
  --sh1:0 1px 3px rgba(0,0,0,.4);--sh2:0 6px 24px rgba(0,0,0,.5);--sh3:0 20px 60px rgba(0,0,0,.7);
  --ease:cubic-bezier(.32,.72,0,1);
}
html,body{background:var(--bg);min-height:100vh;min-height:100dvh}
body{font-family:var(--sans);color:var(--t1);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(168,90,42,.12),transparent 60%)}
body>*{position:relative;z-index:1}

/* ── LOGIN ── */
#loginWrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{background:var(--s2);border:.5px solid var(--b2);border-radius:var(--rxl);padding:40px 32px;
  max-width:380px;width:100%;text-align:center;box-shadow:var(--sh3)}
.login-logo{width:64px;height:64px;border-radius:16px;background:var(--copper);color:var(--on-copper);
  font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;box-shadow:0 8px 24px var(--copperg)}
.login-card h1{font-size:26px;font-weight:800;letter-spacing:-.03em;margin-bottom:4px}
.login-sub{font-size:13px;color:var(--t3);margin-bottom:22px}

/* ── BUTTONS ── */
.btn-primary{background:var(--copper);color:var(--on-copper);border:none;border-radius:var(--rpill);
  padding:12px 20px;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s var(--ease);letter-spacing:-.01em}
.btn-primary:hover{background:var(--copper2)}
.btn-ghost{background:var(--s3);color:var(--t1);border:.5px solid var(--b2);border-radius:var(--rpill);
  padding:10px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s}
.btn-ghost:hover{background:var(--s4)}
.btn-sm{padding:7px 13px;font-size:13px}
.btn-block{width:100%;display:block}
.back-btn{display:inline-flex;align-items:center;gap:6px;background:var(--s3);border:.5px solid var(--b2);
  border-radius:var(--rpill);padding:8px 16px;font-size:13px;font-weight:500;color:var(--t2);
  cursor:pointer;margin-bottom:20px;transition:background .15s}
.back-btn:hover{background:var(--s4);color:var(--t1)}

/* ── INPUTS ── */
input[type=password],input[type=text],input[type=number],select,textarea{
  width:100%;padding:12px 14px;font-size:16px;color:var(--t1);font-family:var(--sans);
  background:rgba(0,0,0,.28);border:.5px solid var(--b2);border-radius:var(--r);outline:none;
  transition:border-color .2s,box-shadow .2s;margin-bottom:12px}
input:focus,select:focus,textarea:focus{border-color:var(--copper);box-shadow:0 0 0 3px var(--copperd)}
input::placeholder{color:var(--t3)}
.alert-err{background:var(--rdd);border:.5px solid rgba(192,80,80,.4);color:var(--rd);
  border-radius:var(--r);padding:10px 14px;font-size:13.5px;margin-bottom:12px}

/* ── APP SHELL ── */
#app{display:flex;flex-direction:column;min-height:100vh}
.app-header{display:flex;align-items:center;gap:14px;padding:0 20px;height:56px;
  background:rgba(15,13,9,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:.5px solid var(--b1);position:sticky;top:0;z-index:40;
  padding-top:env(safe-area-inset-top)}
.header-logo{font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--copper2)}
.header-nav{display:flex;gap:2px;margin-left:16px;flex:1;overflow-x:auto;scrollbar-width:none}
.header-nav::-webkit-scrollbar{display:none}
.nav-btn{padding:6px 14px;border-radius:var(--rpill);border:none;background:transparent;
  color:var(--t3);font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:color .2s,background .2s}
.nav-btn:hover{color:var(--t2);background:var(--s3)}
.nav-btn.active{background:var(--s4);color:var(--t1);box-shadow:inset 0 0 0 .5px var(--b2)}

/* ── SECTIONS ── */
.section{display:none;flex:1}
.section.active{display:flex}

/* ── TEACH LAYOUT ── */
#section-teach{flex-direction:row}
.sidebar{width:240px;flex-shrink:0;background:var(--s1);border-right:.5px solid var(--b1);
  overflow-y:auto;padding:14px 0}
.sidebar-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--t3);padding:0 16px 8px}
.unit-btn{display:block;width:100%;text-align:left;padding:10px 16px;border:none;background:transparent;
  color:var(--t2);font-size:13.5px;cursor:pointer;transition:background .15s,color .15s;
  border-left:2px solid transparent;line-height:1.4}
.unit-btn:hover{background:var(--s2);color:var(--t1)}
.unit-btn.active{background:var(--s2);color:var(--copper2);border-left-color:var(--copper)}
.unit-btn small{display:block;font-size:11px;color:var(--t3);margin-top:1px}
.content{flex:1;overflow-y:auto;padding:28px 32px}

/* ── WELCOME ── */
.welcome-title{font-size:28px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
.welcome-sub{font-size:14px;color:var(--t3);margin-bottom:28px}
.course-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px}
.overview-card{background:var(--s2);border:.5px solid var(--b1);border-radius:var(--rlg);
  padding:20px;text-align:center}
.ov-num{font-size:32px;font-weight:800;color:var(--copper2);letter-spacing:-.03em}
.ov-label{font-size:12px;color:var(--t3);margin-top:2px;text-transform:uppercase;letter-spacing:.04em}
.build-rules{background:var(--s2);border:.5px solid var(--b1);border-radius:var(--rlg);padding:20px}
.rule-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--copper2);margin-bottom:12px}
.rule{font-size:13.5px;color:var(--t2);padding:8px 0;border-bottom:.5px solid var(--b1);line-height:1.5}
.rule:last-child{border-bottom:none;padding-bottom:0}

/* ── UNIT TEACH VIEW ── */
.unit-header{margin-bottom:24px}
.unit-tag{display:inline-block;background:var(--copperd);color:var(--copper2);font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;
  border-radius:var(--rpill);margin-bottom:10px}
.unit-title{font-size:26px;font-weight:800;letter-spacing:-.03em;margin-bottom:4px}
.unit-meta{font-size:13px;color:var(--t3)}
.track-tabs{display:flex;gap:4px;background:rgba(0,0,0,.2);padding:3px;border-radius:10px;
  border:.5px solid var(--b1);width:fit-content;margin-bottom:20px}
.track-tab{padding:7px 18px;border-radius:8px;border:none;background:transparent;
  color:var(--t3);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}
.track-tab.active{background:var(--s4);color:var(--t1)}
.teach-block{margin-bottom:24px}
.teach-block-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--copper2);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.teach-block-title::after{content:'';flex:1;height:.5px;background:var(--b1)}
.teach-card{background:var(--s2);border:.5px solid var(--b1);border-radius:var(--rlg);
  padding:16px 18px;margin-bottom:10px;font-size:13.5px;color:var(--t2);line-height:1.6}
.teach-card strong{color:var(--t1);font-weight:600}
.key-box{background:rgba(168,90,42,.08);border:.5px solid rgba(168,90,42,.25);
  border-radius:var(--r);padding:14px 16px;margin-bottom:10px;font-size:13.5px;line-height:1.6}
.key-box .key-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--copper2);margin-bottom:6px}
.mistake-card{background:var(--rdd);border:.5px solid rgba(192,80,80,.25);border-radius:var(--r);
  padding:14px 16px;margin-bottom:8px;font-size:13px;line-height:1.55}
.mistake-card .mistake-label{color:var(--rd);font-weight:700;margin-bottom:4px}
.mistake-card .fix-label{color:var(--gr);font-weight:600;margin-top:6px;margin-bottom:2px}
.wb-item{background:var(--s3);border:.5px solid var(--b1);border-radius:var(--r);
  padding:12px 14px;margin-bottom:6px;font-size:13px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.wb-q{flex:1;color:var(--t1)}
.wb-a{background:var(--grd);border:.5px solid rgba(90,158,111,.3);border-radius:6px;
  padding:3px 10px;font-family:var(--mono);font-size:12px;color:var(--gr);white-space:nowrap;flex-shrink:0}
.wb-note{font-size:11px;color:var(--t3);margin-top:4px}
.seq-item{display:flex;gap:12px;padding:8px 0;border-bottom:.5px solid var(--b1);font-size:13.5px;color:var(--t2)}
.seq-item:last-child{border-bottom:none}
.seq-num{width:22px;height:22px;border-radius:50%;background:var(--copper);color:var(--on-copper);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:12px}
.doc-card{background:var(--s3);border:.5px solid var(--b1);border-radius:var(--r);
  padding:14px;font-size:13px;color:var(--t2);line-height:1.4}
.doc-card .doc-name{font-weight:600;color:var(--t1);margin-bottom:3px}
.doc-card .doc-who{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.04em}
.game-launch-btn{display:inline-flex;align-items:center;gap:8px;background:var(--copper);
  color:var(--on-copper);border:none;border-radius:var(--rpill);padding:11px 20px;
  font-size:14px;font-weight:600;cursor:pointer;margin-top:12px;transition:background .2s}
.game-launch-btn:hover{background:var(--copper2)}

/* ── PRINT HUB ── */
#section-print{display:none;flex-direction:column;padding:28px 32px;overflow-y:auto}
#section-print.active{display:block}
.print-hub .page-title{font-size:26px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
.print-hub .page-sub{font-size:14px;color:var(--t3);margin-bottom:24px}
.print-unit{background:var(--s2);border:.5px solid var(--b1);border-radius:var(--rlg);
  padding:20px;margin-bottom:16px}
.print-unit-name{font-size:16px;font-weight:700;margin-bottom:4px}
.print-unit-days{font-size:12px;color:var(--t3);margin-bottom:14px}
.print-docs{display:flex;flex-wrap:wrap;gap:8px}
.print-doc-btn{background:var(--s3);border:.5px solid var(--b2);border-radius:var(--rpill);
  padding:7px 14px;font-size:13px;color:var(--t1);cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;gap:6px}
.print-doc-btn:hover{background:var(--copper);color:var(--on-copper);border-color:var(--copper)}
.print-doc-btn .track-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  background:rgba(255,255,255,.1);padding:1px 6px;border-radius:var(--rpill)}
.print-doc-btn.foundation .track-badge{background:var(--grd);color:var(--gr)}
.print-doc-btn.advanced .track-badge{background:var(--copperd);color:var(--copper2)}
.print-doc-btn.both .track-badge{background:rgba(90,100,158,.2);color:#8090d0}
.print-doc-btn.instructor .track-badge{background:rgba(192,80,80,.15);color:var(--rd)}

/* ── PRACTICE HUB ── */
#section-practice{display:none;flex-direction:column;padding:28px 32px;overflow-y:auto}
#section-practice.active{display:block}
.practice-hub .page-title{font-size:26px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
.practice-hub .page-sub{font-size:14px;color:var(--t3);margin-bottom:24px}
.game-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.game-card{background:var(--s2);border:.5px solid var(--b1);border-radius:var(--rlg);
  padding:24px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.game-card:hover{background:var(--s3);border-color:var(--copper);transform:translateY(-2px);box-shadow:var(--sh2)}
.game-icon{font-size:36px;margin-bottom:12px}
.game-name{font-size:17px;font-weight:700;margin-bottom:8px}
.game-desc{font-size:13px;color:var(--t3);line-height:1.5;margin-bottom:10px}
.game-tag{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--copper2);background:var(--copperd);padding:3px 10px;border-radius:var(--rpill);
  display:inline-block}

/* ── REFERENCE HUB ── */
#section-reference{display:none;flex-direction:column;padding:28px 32px;overflow-y:auto}
#section-reference.active{display:block}
.ref-hub .page-title{font-size:26px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
.ref-hub .page-sub{font-size:14px;color:var(--t3);margin-bottom:24px}
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.ref-card{background:var(--s2);border:.5px solid var(--b1);border-radius:var(--rlg);
  padding:18px;cursor:pointer;transition:all .2s}
.ref-card:hover{border-color:var(--copper);background:var(--s3)}
.ref-unit{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--copper2);margin-bottom:6px}
.ref-name{font-size:15px;font-weight:600;margin-bottom:4px;color:var(--t1)}
.ref-desc{font-size:12.5px;color:var(--t3);line-height:1.5}

/* ── REF MODAL / READER ── */
.ref-reader{display:none;position:fixed;inset:0;z-index:200;background:var(--bg);
  overflow-y:auto;padding:24px 32px}
.ref-reader.open{display:block}
.ref-reader-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;
  position:sticky;top:0;background:var(--bg);padding:12px 0;border-bottom:.5px solid var(--b1)}
.ref-reader-title{font-size:18px;font-weight:700;flex:1}
.ref-reader-body{max-width:800px;font-size:14px;line-height:1.7;color:var(--t2)}
.ref-reader-body h2{font-size:18px;font-weight:700;color:var(--t1);margin:24px 0 10px;
  padding-top:20px;border-top:.5px solid var(--b1)}
.ref-reader-body h2:first-child{border-top:none;margin-top:0}
.ref-reader-body h3{font-size:15px;font-weight:600;color:var(--copper2);margin:16px 0 8px}
.ref-reader-body p{margin-bottom:12px}
.ref-reader-body ul,.ref-reader-body ol{padding-left:22px;margin-bottom:12px}
.ref-reader-body li{margin-bottom:6px}
.ref-reader-body .key-callout{background:rgba(168,90,42,.1);border-left:3px solid var(--copper);
  padding:12px 16px;border-radius:0 var(--r) var(--r) 0;margin:14px 0;font-size:13.5px}
.ref-reader-body .mistake-callout{background:var(--rdd);border-left:3px solid var(--rd);
  padding:12px 16px;border-radius:0 var(--r) var(--r) 0;margin:10px 0;font-size:13px}
.ref-reader-body .wb-callout{background:var(--s2);border:.5px solid var(--b1);
  border-radius:var(--r);padding:12px 14px;margin:6px 0;font-size:13px;
  display:flex;justify-content:space-between;gap:12px}
.ref-reader-body .answer-badge{background:var(--grd);color:var(--gr);font-family:var(--mono);
  font-size:12px;padding:2px 8px;border-radius:4px;white-space:nowrap;flex-shrink:0}

/* ── TAPE MEASURE GAME ── */
.game-wrap{max-width:700px;margin:0 auto}
.game-title{font-size:22px;font-weight:800;letter-spacing:-.03em;margin-bottom:4px}
.game-sub{font-size:13px;color:var(--t3);margin-bottom:20px}
.stats-bar{display:flex;gap:20px;background:var(--s2);border:.5px solid var(--b1);
  border-radius:var(--r);padding:10px 16px;margin-bottom:20px;font-size:13px}
.stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.stat-num{font-size:20px;font-weight:700;color:var(--copper2);font-family:var(--mono)}
.stat-label{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.04em}
.tape-wrap{background:var(--s2);border:.5px solid var(--b1);border-radius:var(--rlg);
  padding:20px;margin-bottom:16px;overflow-x:auto}
.tape-prompt{font-size:14px;color:var(--t2);margin-bottom:14px;text-align:center}
.tape-svg{display:block;margin:0 auto}
.answer-row{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.answer-row input{flex:1;max-width:200px;margin-bottom:0;font-family:var(--mono);font-size:16px}
.game-btn-row{display:flex;gap:8px;flex-wrap:wrap}
.feedback-ok{background:var(--grd);border:.5px solid rgba(90,158,111,.4);color:var(--gr);
  border-radius:var(--r);padding:10px 14px;font-size:14px;font-weight:500;margin-top:10px}
.feedback-bad{background:var(--rdd);border:.5px solid rgba(192,80,80,.4);color:var(--rd);
  border-radius:var(--r);padding:10px 14px;font-size:14px;margin-top:10px}

/* ── FRACTIONS GAME ── */
.fractions-controls{background:var(--s2);border:.5px solid var(--b1);border-radius:var(--rlg);
  padding:14px 16px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ctrl-group{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--t3)}
.ctrl-group select,.ctrl-group input{width:auto;margin-bottom:0;padding:7px 10px;font-size:13px;min-width:80px}
.ctrl-group label{white-space:nowrap}
.frac-question{background:var(--s2);border:.5px solid var(--b1);border-radius:var(--rlg);
  padding:24px;margin-bottom:14px;text-align:center}
.frac-prompt{font-size:13px;color:var(--t3);margin-bottom:16px}
.frac-expr{font-size:30px;font-weight:700;letter-spacing:.02em;margin-bottom:20px;
  font-family:var(--mono);color:var(--t1)}
.frac-bar-wrap{margin:16px auto;max-width:400px}
.frac-bar{display:flex;height:40px;border-radius:6px;overflow:hidden;border:.5px solid var(--b2)}
.frac-seg{flex:1;border-right:.5px solid var(--b2)}
.frac-seg:last-child{border-right:none}
.frac-seg.filled{background:var(--copper)}
.frac-seg.empty{background:var(--s3)}
.frac-bar-label{font-size:12px;color:var(--t3);margin-top:6px}
.choices-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px;max-width:400px;margin-inline:auto}
.choice-btn{background:var(--s3);border:.5px solid var(--b2);border-radius:var(--r);
  padding:14px;font-size:16px;font-weight:600;font-family:var(--mono);cursor:pointer;
  color:var(--t1);transition:all .15s}
.choice-btn:hover{background:var(--copper);color:var(--on-copper);border-color:var(--copper)}
.compare-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:20px}
.compare-frac{font-size:32px;font-weight:700;font-family:var(--mono);color:var(--t1)}
.compare-btns{display:flex;gap:8px}
.cmp-btn{width:52px;height:52px;border-radius:10px;border:.5px solid var(--b2);
  background:var(--s3);font-size:22px;font-weight:700;cursor:pointer;color:var(--t1);transition:all .15s}
.cmp-btn:hover{background:var(--copper);color:var(--on-copper)}

/* ── TOAST ── */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(12px);background:rgba(26,22,16,.92);
  backdrop-filter:blur(20px);color:var(--t1);font-size:14px;font-weight:500;
  padding:11px 20px;border-radius:var(--rpill);border:.5px solid var(--b2);
  box-shadow:var(--sh2);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
  z-index:999;max-width:90vw;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── MOBILE ── */
@media(max-width:640px){
  .app-header{padding:0 14px;height:52px}
  .sidebar{width:200px}
  .content{padding:16px}
  .course-overview{grid-template-columns:repeat(2,1fr)}
  #section-print,#section-reference,#section-practice{padding:16px}
  .ref-reader{padding:14px}
  .ref-grid,.print-docs{grid-template-columns:1fr}
}
@media(max-width:480px){
  #section-teach{flex-direction:column}
  .sidebar{width:100%;border-right:none;border-bottom:.5px solid var(--b1);padding:8px 0}
  .unit-btn{padding:8px 14px;font-size:13px}
  .content{padding:14px}
}