/* 9th Grade Geometry Detective Lab. Same sticker world as the rest of the site:
   ink outlines, block shadows, Fraunces headings, Nunito body. */
#geo-app{--g-ink:#2E1A6E;--g-soft:#54438F;--g-paper:#FFFDF7;--g-sun:#FFC52E;--g-sunT:#FFF3C4;--g-mint:#D5F4E6;--g-mintD:#0F5C4F;--g-pink:#FFD1E3;--g-pinkD:#A3004F;--g-grape:#6A2BE2;--g-lav:#EEE8FF;--g-sky:#D9E8FF;--g-tomato:#D92D27;
  margin:0 0 48px;color:var(--g-ink);font-family:var(--body)}
#geo-app *{box-sizing:border-box}
#geo-app ::selection{background:var(--g-sun);color:var(--g-ink)}
#geo-app button{font:inherit;color:inherit}
#geo-app :focus-visible{outline:3px solid #2F80ED;outline-offset:3px}

/* top strip: chapter progress + skill checklist */
.g-top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin:0 0 14px}
.g-prog{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-weight:800}
.g-prog b{font-variant-numeric:tabular-nums}
.g-bar{position:relative;height:12px;min-width:120px;flex:1 1 120px;border:2px solid var(--g-ink);border-radius:999px;background:#fff;overflow:hidden}
.g-bar.big{width:min(260px,60vw);flex:0 1 auto;height:16px}
.g-bar>span{position:absolute;inset:0 auto 0 0;background:var(--g-sun);border-right:2px solid var(--g-ink);transition:width .5s cubic-bezier(.16,1,.3,1)}
.g-bar>span[style*="width:0"]{border-right:0}
.g-mode{padding:3px 11px;border:2px solid var(--g-ink);border-radius:999px;background:var(--g-mint);font-size:.82rem;font-weight:900}
.g-skills{border:2px solid var(--g-ink);border-radius:16px 20px 18px 14px;background:#fff;box-shadow:3px 3px 0 var(--g-ink);font-weight:800;max-width:100%}
.g-skills summary{cursor:pointer;padding:7px 14px;list-style:none}
.g-skills summary::-webkit-details-marker{display:none}
.g-skills summary::after{content:"";display:inline-block;width:8px;height:8px;margin-left:10px;border:solid var(--g-ink);border-width:0 3px 3px 0;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.g-skills[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.g-skills ul{list-style:none;margin:0;padding:4px 14px 12px;display:grid;gap:3px;font-weight:700;font-size:.92rem}
.g-skills li.ok{color:var(--g-mintD);font-weight:900}

/* section tabs */
.g-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 4px 12px;margin:0 -4px 10px;scrollbar-width:thin;scrollbar-color:var(--g-grape) transparent;overscroll-behavior-x:contain}
.g-tab{flex:0 0 auto;display:grid;gap:1px;justify-items:start;padding:7px 13px 8px;border:2px solid var(--g-ink);border-radius:14px 18px 15px 12px;background:#fff;box-shadow:3px 3px 0 var(--g-ink);font-weight:800;font-size:.9rem;line-height:1.2;cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s}
.g-tab b{font:900 1rem/1 var(--display)}
.g-tab:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--g-ink)}
.g-tab:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--g-ink)}
.g-tab.on{background:var(--g-sun)}
.g-tab.done:not(.on){background:var(--g-mint)}
.g-tab:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

/* lesson frame */
.g-lesson{background:var(--g-paper);border:2px solid var(--g-ink);border-radius:24px 32px 26px 28px;box-shadow:6px 6px 0 var(--g-ink);padding:clamp(14px,3vw,28px);min-width:0}
.g-lhead{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;justify-content:space-between;padding-bottom:14px;margin-bottom:16px;border-bottom:2px dashed #CFC4EF}
.g-lhead>div:first-child{min-width:0;flex:1 1 280px}
.g-lhead h3{font-size:clamp(1.45rem,3.4vw,2.2rem);line-height:1.08;margin:0 0 6px}
.g-lhead .g-bar{flex:0 1 200px}
.g-kick{margin:0;font-weight:800;font-size:.86rem;color:var(--g-soft)}
.g-screen{display:grid;gap:14px;min-width:0}
.g-screen>p,.g-screen>h4{margin:0}
.g-stitle{font:900 clamp(1.15rem,2.4vw,1.45rem)/1.15 var(--display);margin:0;outline:none}
.g-screen h4{font:900 1.15rem/1.2 var(--display);margin:8px 0 0}
.g-screen h4 small{font:700 .85rem var(--body);color:var(--g-soft)}
.g-lead{font-size:1.06rem;max-width:68ch;margin:0}
.g-goal{margin:0;padding:10px 14px;border-radius:14px;background:var(--g-lav);max-width:68ch}
.g-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;align-items:center;padding:12px;border:2px solid var(--g-ink);border-radius:18px;background:#fff}
.g-story p{margin:0}
.g-tip{margin:0;font-size:.9rem;color:var(--g-soft)}
.g-done{font-weight:900;color:var(--g-mintD)}

/* diagrams */
.gd-svg{display:block;width:100%;height:auto;max-width:520px;margin-inline:auto;font-family:var(--body);overflow:visible}
.g-fig{background:#F4FBF8;border:2px solid #CFE9DF;border-radius:16px;padding:8px 10px;min-width:0;overflow-x:clip}
.g-cap{margin:0 0 4px;font-weight:900;font-size:.95rem;color:var(--g-mintD)}
.gd-in{animation:gdIn .55s cubic-bezier(.16,1,.3,1) both;transform-box:fill-box;transform-origin:center}
@keyframes gdIn{from{opacity:0;transform:scale(.9);filter:blur(2px)}}

/* questions */
.g-q{display:grid;gap:12px;padding:14px;border:2px solid var(--g-ink);border-radius:18px 22px 20px 16px;background:#fff;min-width:0}
.g-q+.g-q{margin-top:4px}
.g-qtext{margin:0;font-weight:800;font-size:1.05rem;line-height:1.45;max-width:70ch}
.g-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px}
.g-opts.one{grid-template-columns:minmax(0,1fr)}
.g-opt{min-height:48px;padding:10px 14px;border:2px solid var(--g-ink);border-radius:14px 18px 15px 12px;background:#fff;box-shadow:3px 3px 0 var(--g-ink);text-align:left;font-weight:800;line-height:1.35;cursor:pointer;transition:transform .12s,box-shadow .12s,background .15s}
.g-opt:hover:not(:disabled){background:var(--g-sunT);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--g-ink)}
.g-opt:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--g-ink)}
.g-opt.no{background:var(--g-pink);color:var(--g-pinkD);box-shadow:none;text-decoration:line-through;text-decoration-thickness:2px;cursor:not-allowed}
.g-opt.yes{background:var(--g-mint);color:var(--g-mintD);animation:gPop .45s cubic-bezier(.16,1,.3,1)}
.g-opt.yes::before{content:"";display:inline-block;width:7px;height:13px;margin:0 10px 0 2px;border:solid currentColor;border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)}
.g-opt:disabled.yes{cursor:default;opacity:1}
@keyframes gPop{40%{transform:scale(1.035)}}
.g-num{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-weight:800}
.g-num label{display:flex;gap:10px;align-items:center}
.g-num input{width:8.5em;min-height:46px;padding:8px 12px;border:2px solid var(--g-ink);border-radius:12px;font:900 1.1rem var(--body);font-variant-numeric:tabular-nums;color:var(--g-ink);background:#fff;caret-color:var(--g-grape)}
.g-num input:disabled{background:var(--g-mint)}
.g-write{display:grid;gap:6px;font-weight:700;font-size:.92rem;color:var(--g-soft)}
.g-write textarea{width:100%;padding:10px 12px;border:2px solid #CFC4EF;border-radius:12px;font:700 1rem/1.4 var(--body);color:var(--g-ink);resize:vertical;caret-color:var(--g-grape)}
.g-write textarea::placeholder{color:#76699F}
.g-tapnote{margin:0;font-weight:800;color:var(--g-soft)}
.g-chips{display:flex;flex-wrap:wrap;gap:8px}
.g-chip{padding:7px 13px;border:2px solid var(--g-ink);border-radius:999px;background:var(--g-lav);font-weight:800;cursor:pointer;box-shadow:2px 2px 0 var(--g-ink);transition:transform .12s}
.g-chip.sel{background:var(--g-sun);transform:translateY(-3px);box-shadow:2px 5px 0 var(--g-ink)}
.g-chip.in{cursor:default;box-shadow:none;background:#fff;padding:4px 10px;font-size:.92rem}
.g-chip.in.no{background:var(--g-pink)}
.g-bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
.g-bin{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;min-height:96px;padding:10px;border:2px dashed var(--g-ink);border-radius:16px;background:#FFFBEA;text-align:left;cursor:pointer}
.g-bin b{flex:1 0 100%;font-weight:900}
.g-bin:hover{background:var(--g-sunT)}
.g-hints{display:grid;gap:8px}
.g-hint{margin:0;padding:9px 13px;border-radius:12px;background:var(--g-sky);animation:gdIn .4s cubic-bezier(.16,1,.3,1)}
.g-hint.h2{background:var(--g-lav)}
.g-hint.h3{background:var(--g-sunT)}
.g-hintbtn{justify-self:start;padding:6px 13px;border:2px dashed var(--g-grape);border-radius:999px;background:#fff;color:var(--g-grape);font-weight:900;cursor:pointer}
.g-hintbtn:hover{background:var(--g-lav)}
.g-why{margin:0;padding:12px 15px;border:2px solid var(--g-mintD);border-radius:14px;background:var(--g-mint);color:#0B3F36;line-height:1.5;animation:gdIn .45s cubic-bezier(.16,1,.3,1)}
.g-why b{color:var(--g-mintD)}
.g-msg{margin:0;padding:9px 13px;border-radius:12px;background:var(--g-pink);color:var(--g-pinkD);font-weight:800}
.g-frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;line-height:1.05;margin:0 .1em;font-size:.86em}
.g-frac b{font-weight:inherit;padding:0 .1em}
.g-frac b:first-child{border-bottom:2px solid currentColor}

/* worked example card */
.g-card{display:grid;gap:12px;padding:16px;border:2px solid var(--g-ink);border-radius:20px 26px 22px 24px;background:#fff;min-width:0}
.g-ex h4{margin:0;font:800 1.1rem/1.4 var(--body)}
.g-src{justify-self:start;margin:0;padding:3px 11px;border:2px solid var(--g-ink);border-radius:999px;background:var(--g-sun);font-weight:900;font-size:.8rem}
.g-ledger{margin:0;padding:10px 14px 10px 34px;border-radius:14px;background:var(--g-lav);display:grid;gap:4px;font-weight:800;font-variant-numeric:tabular-nums}
.g-ledger:empty{display:none}
.g-ledger li{color:var(--g-soft)}
.g-ledger li.now{color:var(--g-ink);animation:gdIn .4s cubic-bezier(.16,1,.3,1)}
.g-ask{margin:0;font-weight:900}
.g-nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.g-lnav{justify-content:space-between;margin-top:18px;padding-top:14px;border-top:2px dashed #CFC4EF}
.g-count{font-weight:800;color:var(--g-soft);font-variant-numeric:tabular-nums}
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border:2px solid var(--g-ink);border-radius:30px 26px 28px 24px;background:var(--g-tomato);color:#fff!important;font:800 1rem/1.2 var(--body);box-shadow:4px 4px 0 var(--g-ink);cursor:pointer;transition:transform .12s,box-shadow .12s}
.g-btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--g-ink)}
.g-btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--g-ink)}
.g-btn.ghost{background:#fff;color:var(--g-ink)!important}
.g-btn:disabled{opacity:.5;cursor:not-allowed}
.g-link{border:0;background:none;padding:0;color:var(--g-grape);font-weight:900;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* retrieval flip cards */
.g-flips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px}
.g-flip{display:grid;gap:6px;align-content:start;min-height:112px;padding:14px;border:2px solid var(--g-ink);border-radius:16px 20px 18px 14px;background:var(--g-sky);box-shadow:3px 3px 0 var(--g-ink);text-align:left;cursor:pointer;transition:transform .12s,background .2s}
.g-flip:hover{transform:translate(-1px,-1px) rotate(-.6deg)}
.g-flip.on{background:#fff;animation:gFlip .4s cubic-bezier(.16,1,.3,1)}
@keyframes gFlip{from{transform:rotateY(70deg)}}
.g-flip .t{font:900 1.12rem/1.15 var(--display)}
.g-flip .d{font-weight:700;line-height:1.4}
.g-flip .d.hint{color:var(--g-soft);font-weight:800;font-size:.92rem}
.g-flip .gd-svg{max-width:220px}

/* explore widgets */
.g-widget{display:grid;gap:10px;padding:14px;border:2px solid var(--g-ink);border-radius:20px;background:#fff;min-width:0}
.g-widget>.gd-svg,.g-widget .g-drag{max-width:520px;width:100%;margin-inline:auto}
.g-drag{touch-action:none;cursor:grab;border-radius:12px}
.g-drag:active{cursor:grabbing}
.g-read{margin:0;font-size:1.05rem;font-variant-numeric:tabular-nums;text-align:center}
.g-read b{font-weight:900}
.g-task{margin:0;padding:9px 13px;border-radius:12px;background:var(--g-sunT);font-weight:800;text-align:center}
.g-netgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px}
.g-netbtn{padding:8px;border:2px solid var(--g-ink);border-radius:14px;background:#fff;box-shadow:3px 3px 0 var(--g-ink);cursor:pointer;transition:transform .12s}
.g-netbtn:hover{transform:translate(-1px,-1px)}
.g-netbtn.yes{background:var(--g-mint)}
.g-netbtn.no{background:var(--g-pink)}

/* compare + error */
.g-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.g-side{padding:12px 14px;border:2px solid var(--g-ink);border-radius:16px;background:#fff}
.g-side:nth-child(2){background:#FFFBEA}
.g-side h5{margin:0 0 6px;font:900 1.05rem var(--display)}
.g-side ol,.g-work{margin:0;padding-left:1.4em;display:grid;gap:3px;font-weight:700}
.g-work{padding:12px 14px 12px 36px;border:2px dashed var(--g-ink);border-radius:16px;background:#fff}

/* quest */
.g-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:12px}
.g-level{display:grid;justify-items:center;gap:4px;padding:14px 10px;border:2px solid var(--g-ink);border-radius:18px 22px 20px 16px;background:var(--g-sun);box-shadow:4px 4px 0 var(--g-ink);cursor:pointer;transition:transform .12s,box-shadow .12s}
.g-level:nth-child(2){background:#FFB86B}.g-level:nth-child(3){background:#FF9CC5}.g-level:nth-child(4){background:#B9A4FF}.g-level:nth-child(5){background:#7FD8C9}
.g-level svg{width:46px;height:46px}
.g-level b{font:900 1.15rem var(--display)}
.g-level small{font-weight:800}
.g-level:hover:not(:disabled){transform:translate(-2px,-2px) rotate(-1deg);box-shadow:6px 6px 0 var(--g-ink)}
.g-level.locked{background:#EEE!important;color:#5E5A70;box-shadow:none;cursor:not-allowed}
.g-level.locked svg{opacity:.4}
.g-track{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px}
.g-track span{display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--g-ink);border-radius:50%;background:#fff;font-weight:900;font-variant-numeric:tabular-nums}
.g-track span.d{background:var(--g-mint)}
.g-track span.c{background:var(--g-sun);transform:scale(1.12)}
.g-track .g-score{width:auto;border-radius:999px;padding:0 12px;margin-left:auto;background:var(--g-lav)}
.g-time{display:flex;align-items:center;gap:8px;font-weight:900;font-variant-numeric:tabular-nums}
.g-clock{width:46px;height:46px}
.g-clock circle{fill:#fff;stroke:var(--g-ink);stroke-width:3}
.g-clock path{stroke:var(--g-ink);stroke-width:2;stroke-linecap:round}
.g-clock .hh{stroke-width:4}.g-clock .mh{stroke-width:3}.g-clock .sh{stroke:var(--g-tomato);stroke-width:1.6}
.g-result{text-align:center;justify-items:center}
.g-result h3{font-size:clamp(1.4rem,3.4vw,2rem)}
.g-result.pass{background:linear-gradient(#FFF6D6,#FFFDF7);border-radius:18px;padding:14px}
.g-stars{margin:0;font-size:2.2rem;letter-spacing:.12em;color:#E0A100}
.g-recap{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-weight:800;text-align:left}
.g-recap li{padding:5px 12px;border-radius:10px;background:var(--g-pink);color:var(--g-pinkD)}
.g-recap li.ok{background:var(--g-mint);color:var(--g-mintD)}

/* grown-ups */
.g-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.g-table th{text-align:left;font-weight:800;padding:6px 10px 6px 0;width:42%}
.g-table td{padding:6px 8px;font-weight:800}
.g-table tr+tr{border-top:1px solid #E6E0F7}
.g-meter{display:block;height:12px;min-width:70px;border:2px solid var(--g-ink);border-radius:999px;background:#fff;overflow:hidden}
.g-meter span{display:block;height:100%;background:var(--g-grape)}
.sm{font-size:.88rem;color:var(--g-soft);font-weight:700}
.g-list{margin:0;padding-left:1.2em;display:grid;gap:8px;font-weight:700}
.g-badge{display:inline-block;margin:2px;padding:3px 11px;border:2px solid var(--g-ink);border-radius:999px;background:var(--g-sun);font-weight:900;font-size:.88rem}

/* Taste pass: every control answers the pointer (step on hover, press on click) */
.g-chip:hover:not(.in){transform:translateY(-2px);box-shadow:2px 4px 0 var(--g-ink)}
.g-chip:active:not(.in){transform:translateY(1px);box-shadow:1px 1px 0 var(--g-ink)}
.g-netbtn:active,.g-flip:active,.g-level:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--g-ink)}
.g-hintbtn{transition:transform .12s,background .12s}
.g-hintbtn:hover{transform:translateY(-1px)}
.g-hintbtn:active{transform:translateY(1px)}
.g-bin{transition:background .12s,transform .12s}
.g-bin:active{transform:scale(.99)}
.g-link{text-decoration-thickness:2px;transition:text-underline-offset .15s}
.g-link:hover{text-underline-offset:5px}

/* phone */
@media (max-width:640px){
  .g-story{grid-template-columns:minmax(0,1fr)}
  .g-lesson{border-radius:18px 22px 20px 18px;box-shadow:4px 4px 0 var(--g-ink)}
  .g-q,.g-card,.g-widget{padding:11px}
  .g-table th{width:auto}
  .g-table td.sm{display:none}
  .g-lnav .g-btn{padding-inline:14px}
}
@media (prefers-reduced-motion:reduce){
  #geo-app *,#geo-app *::before{animation:none!important;transition:none!important}
}