/* ============================================================
   APPEARANCE & LAYOUT — reusable drop-in settings module
   (TutorAI Academy · D3 + 3D practicals)
   -----------------------------------------------------------
   Dependency-free. One CSS + one JS file. Drives the EXISTING
   design.css variables (--paper, --paper-2, --ink, --muted,
   --line, --shadow) on documentElement so the whole UI re-themes
   instantly. Adds: a 🎨 button + popover, a whole-component SIZE
   scale, and a demo-speed slider shown only during the guided demo.

   All of this module's OWN chrome reads the same theme vars, so the
   panel itself re-themes with the page. Sizes use --appr-fs so the
   panel scales sensibly without being dragged by the stage zoom.
   ============================================================ */

:root{
  /* generic aliases the spec asks us to expose (mirror design.css) */
  --bg: var(--paper);
  --surface: var(--paper-2);
  --ink-soft: var(--muted);
  --shadow: 0 18px 40px -28px rgba(40,25,10,.55);
  --appr-fs: 14px;          /* base size for the panel's own chrome */
}

/* ---- the 🎨 trigger (docked into .prac-bar, or floating) ---- */
.appr-btn{
  width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-size:calc(15px*var(--uis,1));
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .12s,transform .12s;flex:none;line-height:1;}
.appr-btn:hover{border-color:var(--accent);transform:translateY(-1px);}
.appr-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* floating fallback when there is no .prac-bar to dock into */
.appr-btn.appr-float{position:fixed;top:14px;right:14px;z-index:130;width:42px;height:42px;
  border-radius:50%;font-size:20px;box-shadow:0 10px 26px -12px rgba(40,25,10,.6);}

/* ---- popover ---- */
/* The popover is a flex column: a fixed header, a SCROLLABLE body holding the
   theme groups + size stepper, and a fixed footer. The body scrolls internally
   (max-height + overflow-y:auto) so even ~22 theme chips never overflow the
   screen — the header/footer stay put while only the gallery region scrolls. */
.appr-pop{
  position:fixed;z-index:140;width:min(330px,92vw);max-height:86vh;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);
  border-left:5px solid var(--accent);border-radius:14px;
  box-shadow:var(--shadow,0 24px 60px -24px rgba(20,12,4,.55)),0 0 0 1px rgba(0,0,0,.02);
  padding:14px 15px 16px;font-family:"Newsreader",Georgia,serif;
  font-size:var(--appr-fs);opacity:0;transform:translateY(6px) scale(.98);
  transition:opacity .16s ease,transform .16s ease;pointer-events:none;}
.appr-pop.open{opacity:1;transform:none;pointer-events:auto;}

/* the scrollable middle: everything between the header and footer */
.appr-pop .ap-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  margin:0 -4px;padding:0 4px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
.appr-pop .ap-body::-webkit-scrollbar{width:8px;}
.appr-pop .ap-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;
  border:2px solid transparent;background-clip:content-box;}
.appr-pop .ap-body::-webkit-scrollbar-track{background:transparent;}

.appr-pop .ap-hd{flex:none;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.appr-pop .ap-title{font-family:"Fraunces",serif;font-weight:600;font-size:calc(var(--appr-fs) + 3px);
  color:var(--ink);}
.appr-pop .ap-x{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);
  background:var(--paper-2);color:var(--ink);font-size:14px;cursor:pointer;flex:none;line-height:1;}
.appr-pop .ap-x:hover{border-color:var(--accent);}

.appr-pop .ap-grp{margin:11px 0 0;}
/* a clearer divider above each theme group so Light / Dark read as distinct
   sections even while the body scrolls */
.appr-pop .ap-grp[data-grp="themes"]{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);}
.appr-pop .ap-grp[data-grp="themes"]:first-of-type{margin-top:4px;padding-top:0;border-top:0;}
.appr-pop .ap-lab{display:flex;align-items:center;justify-content:space-between;
  font-family:"JetBrains Mono",monospace;font-size:calc(var(--appr-fs) - 3px);
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}

/* ============================================================
   THEME GALLERY — clickable preview chips grouped Light / Dark.
   Each chip is a little "page" swatch (background + a surface card
   carrying the two accents) above the theme name. One click applies
   the WHOLE theme combination.
   ============================================================ */
.appr-pop .ap-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.appr-pop .ap-theme{display:flex;flex-direction:column;align-items:stretch;gap:5px;cursor:pointer;
  border:1px solid var(--line);border-radius:11px;background:var(--paper-2);
  padding:6px 6px 7px;font-family:"JetBrains Mono",monospace;
  font-size:calc(var(--appr-fs) - 3px);color:var(--ink);line-height:1;
  transition:border-color .12s,transform .12s,box-shadow .12s;}
.appr-pop .ap-theme:hover{border-color:var(--accent);transform:translateY(-1px);}
.appr-pop .ap-theme:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.appr-pop .ap-theme.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);}
/* the mini preview: page background with a floating surface card + 2 accent dots */
.appr-pop .ap-theme .apt-prev{position:relative;display:block;height:36px;border-radius:7px;
  border:1px solid rgba(0,0,0,.16);overflow:hidden;}
.appr-pop .ap-theme .apt-card{position:absolute;left:5px;right:5px;bottom:4px;top:9px;border-radius:5px;
  border:1px solid rgba(0,0,0,.14);display:flex;align-items:center;gap:4px;padding-left:5px;}
.appr-pop .ap-theme .apt-acc,
.appr-pop .ap-theme .apt-acc2{width:9px;height:9px;border-radius:50%;flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);}
.appr-pop .ap-theme .apt-name{font-weight:700;text-align:center;}

/* size stepper */
.appr-pop .ap-size{display:flex;align-items:center;gap:10px;}
.appr-pop .ap-size button{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:var(--paper-2);color:var(--ink);font-size:18px;font-weight:700;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:border-color .12s,transform .12s;}
.appr-pop .ap-size button:hover{border-color:var(--accent);transform:translateY(-1px);}
.appr-pop .ap-size .ap-sizeval{font-family:"JetBrains Mono",monospace;font-weight:700;
  font-size:calc(var(--appr-fs) + 1px);color:var(--ink);min-width:52px;text-align:center;}

.appr-pop .ap-foot{flex:none;display:flex;align-items:center;justify-content:space-between;margin-top:14px;
  padding-top:11px;border-top:1px solid var(--line);}
.appr-pop .ap-reset{font-family:"JetBrains Mono",monospace;font-size:calc(var(--appr-fs) - 3px);
  border:1px solid var(--line);background:var(--paper-2);color:var(--ink);border-radius:8px;
  padding:6px 12px;cursor:pointer;transition:border-color .12s;}
.appr-pop .ap-reset:hover{border-color:var(--accent);}
.appr-pop .ap-hint{font-family:"JetBrains Mono",monospace;font-size:calc(var(--appr-fs) - 4px);
  color:var(--muted);}

/* ============================================================
   DEMO-SPEED vertical slider — pinned top-right of the stage,
   shown ONLY while the guided demo plays. Never overlaps the
   apparatus/legend/readings (it tucks into the stage's top-right
   corner, above the orbit hint / legend which sit bottom).
   ============================================================ */
.appr-speed{
  position:fixed;z-index:75;top:70px;right:14px;display:none;flex-direction:column;align-items:center;
  gap:7px;padding:9px 7px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;
  box-shadow:var(--shadow,0 12px 30px -16px rgba(40,25,10,.5));pointer-events:auto;}
.appr-speed.show{display:flex;}
.appr-speed .as-ic{font-size:15px;line-height:1;user-select:none;}
.appr-speed .as-val{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:1px 6px;min-width:34px;text-align:center;}
/* vertical range: top = fast (max), bottom = slow (min). We flip the
   value in JS so dragging up = faster. */
.appr-speed input[type=range]{
  -webkit-appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;
  width:8px;height:118px;accent-color:var(--accent);cursor:pointer;}
@media(max-width:980px){ .appr-speed{height:auto;} .appr-speed input[type=range]{height:96px;} }