/* ===========================================================================
   Shunya (maths) — components that only maths pages use.
   Loaded after site.css on every /shunya/ page. Shared pieces (hero, cards, tags, lab layout) stay in
   site.css / lab.css; maths-lab components (plane readouts, formula panels, …) are added here as labs land.
   ===========================================================================*/

/* a lab that isn't live yet: same card, dashed and quiet, not a link */
.ui-labcard.is-soon{ border-style:dashed; background:transparent; }
.ui-labcard.is-soon .lc-ico{ opacity:.7; }
.ui-labcard.is-soon:hover{ transform:none; border-color:var(--edge); background:transparent; }

/* syllabus map (learn.html) */
.sy-grid{ display:grid; gap:32px; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
.sy-group h2{ font-size:var(--fs-h3); margin:0 0 14px; }
.sy-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--edge); }
.sy-list li{ display:flex; flex-direction:column; gap:6px; padding:12px 2px; border-bottom:1px solid var(--edge); }
.sy-list li b{ font-weight:600; }
.sy-labs{ display:flex; flex-wrap:wrap; gap:6px; }
.sy-chip{ font-size:var(--fs-small); padding:.2em .7em; border-radius:999px; border:1px dashed var(--edge-hi); color:var(--chrome-3); }
.sy-chip.live{ border-style:solid; border-color:color-mix(in srgb,var(--maths) 40%,transparent); color:var(--maths);
  background:color-mix(in srgb,var(--maths) 10%,transparent); font-weight:500; }
.sy-chip.live:hover{ text-decoration:none; background:color-mix(in srgb,var(--maths) 18%,transparent); }
@media (max-width:980px){ .sy-grid{ grid-template-columns:1fr; gap:26px; } }

/* typeset formulas (KaTeX output, prerendered at build time): sit a touch smaller than KaTeX's default so they match body text */
.tex-r .katex{ font-size:1.08em; }
.tex-r.tex-block{ display:block; margin:14px 0; overflow-x:auto; overflow-y:hidden; text-align:center; }

/* ---------- maths lab components (Function & Graph Explorer and the labs that follow) ---------- */
.seg{ display:flex; gap:6px; flex-wrap:wrap; }
.seg button{ font:inherit; font-size:.9375rem; padding:.5em 1em; min-height:40px; border-radius:999px; border:1px solid var(--edge);
  background:var(--surface); color:var(--chrome-2); cursor:pointer; transition:background .15s,border-color .15s,color .15s; }
.seg button:hover{ border-color:var(--edge-hi); color:var(--chrome); }
.seg button.on{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
.presets{ display:flex; flex-wrap:wrap; gap:6px; }
.pill-btn{ font:inherit; font-size:var(--fs-small); padding:.4em .85em; min-height:36px; border-radius:999px; border:1px solid var(--edge);
  background:var(--surface); color:var(--chrome-2); cursor:pointer; }
.pill-btn:hover{ border-color:var(--accent); color:var(--chrome); }
.ctrl-note{ font-size:var(--fs-small); color:var(--chrome-3); margin:14px 0 0; line-height:1.55; }
.ctrl-note.warn{ color:var(--accent-2); margin-top:10px; }
.ctrl-note.warn:empty{ display:none; }
.fx{ width:100%; font-family:"IBM Plex Mono",monospace; font-size:1rem; color:var(--chrome); background:var(--field); border:1px solid var(--edge-hi);
  border-radius:var(--r-sm); padding:.6em .8em; min-height:44px; }
.fx:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.fx[aria-invalid="true"]{ border-color:#e5674f; }
.fx-msg{ min-height:1.5em; margin:6px 0 0; font-size:var(--fs-small); color:var(--chrome-3); }
.fx-msg.err{ color:#e5674f; }
.grp{ border-left:3px solid var(--accent); padding-left:12px; margin:16px 0 0; }
.grp.g2{ border-left-color:var(--accent-2); }
.grp-h{ margin:0 0 10px; font-size:var(--fs-small); font-weight:600; color:var(--chrome); font-family:"IBM Plex Mono",monospace; }
.stat .v{ overflow-wrap:anywhere; line-height:1.35; }
.stat.tag .v{ font-family:"IBM Plex Mono",monospace; }
.stage-toolbar .btn-sm{ min-width:40px; }
#shareMsg{ color:var(--accent); }

/* "The maths behind it": the working, with the live numbers substituted in */
.worked-wrap{ margin:8px 0 18px; border:1px solid var(--edge); border-radius:var(--r-lg); background:var(--panel-2); }
.worked-wrap > summary{ cursor:pointer; padding:16px 20px; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; min-height:52px; }
.worked-wrap > summary::-webkit-details-marker{ display:none; }
.worked-wrap > summary::after{ content:"+"; color:var(--accent); font-size:1.4rem; line-height:1; }
.worked-wrap[open] > summary::after{ content:"\2212"; }
#worked{ padding:0 20px 18px; }
#worked p{ margin:10px 0 0; color:var(--chrome-2); line-height:1.65; }
#worked .wl{ margin:10px 0 0; padding:10px 14px; border-radius:var(--r-sm); background:var(--bg-2); border:1px solid var(--edge);
  font-family:"IBM Plex Mono",monospace; font-size:.9375rem; line-height:1.75; color:var(--chrome); overflow-x:auto; }
#worked .wl b{ color:var(--accent); }
@media (max-width:700px){ #worked{ padding:0 14px 14px; } .worked-wrap > summary{ padding:14px 16px; } }

/* ---------- trigonometry lab: drag-to-match challenge + word problems ---------- */
.chal{ margin-top:14px; }
.chal-msg{ margin:10px 0 0; font-size:var(--fs-small); line-height:1.55; color:var(--chrome-2); }
.chal-msg:empty{ display:none; }
.chal-msg.ok, .wp-fb.ok{ color:#3fae7a; }
.wp{ margin-top:16px; }
.wp-text{ margin:0 0 14px; padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--edge); background:var(--bg-2); line-height:1.6; }
.wp-l{ display:block; font-size:var(--fs-small); color:var(--chrome-2); margin-bottom:8px; }
.wp-unit{ color:var(--chrome-3); }
.wp-row{ display:flex; gap:8px; align-items:stretch; }
.wp-row .fx{ flex:1; min-width:0; }
.wp-row .btn{ min-height:44px; }
.wp-fb{ min-height:1.5em; margin:10px 0 0; font-size:var(--fs-small); line-height:1.5; color:var(--chrome-2); }
.wp-fb.bad{ color:#e5674f; }
.wp-fb.near{ color:#c9a227; }
.wp-tools{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.wp-extra .wl{ margin-top:12px; padding:10px 14px; border-radius:var(--r-sm); background:var(--bg-2); border:1px solid var(--edge); font-family:"IBM Plex Mono",monospace; font-size:.875rem; line-height:1.75; }
.wp-hint{ margin:12px 0 0; font-size:var(--fs-small); color:var(--chrome-2); line-height:1.55; }
.wp-score{ margin:12px 0 0; font-size:var(--fs-small); color:var(--accent); font-weight:600; }
.wp-score:empty{ display:none; }

/* "Formulas used in this lab" section at the bottom of each lab page (there is no separate formulas page) */
.formulas-grid{ column-count:1; column-gap:12px; }
@media (min-width:900px){ .formulas-grid{ column-count:2; } }
.notes .formulas-group{ margin:0 0 12px; padding:16px 18px 8px; min-width:0; break-inside:avoid; }
.formulas-group h3{ margin:0 0 12px; font-size:1.0625rem; font-weight:600; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.fg-class{ font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); border:1px solid var(--edge-hi); border-radius:999px; padding:.15em .7em; }
.formulas-group dl{ margin:0; }
.formulas-group dl > div{ padding:10px 0; border-top:1px solid var(--edge); }
.formulas-group dl > div:first-child{ border-top:0; padding-top:0; }
.formulas-group dt{ margin:0 0 3px; font-size:.8125rem; color:var(--chrome-3); line-height:1.4; }
.formulas-group dd{ margin:0; color:var(--chrome); font-size:1rem; line-height:1.5; overflow-x:auto; overflow-y:hidden; max-width:100%; }
.formulas-group dd .tex-r .katex{ font-size:1.02em; }

/* Matrices lab: editable matrix grids (entries are text so fractions like 3/4 can be typed) */
.mgrid{ display:grid; gap:6px; max-width:300px; }
.mgrid input{ width:100%; min-width:0; box-sizing:border-box; font-family:"IBM Plex Mono",monospace; font-size:1rem; text-align:center; color:var(--chrome); background:var(--field); border:1px solid var(--edge-hi); border-radius:8px; padding:.55em .3em; min-height:44px; }
.mgrid input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.mgrid input.bad{ border-color:#e5674f; }