/* ══════════════════════════════════════════════════════════════════
   app.css — Happy Light Maths.

   Same warm-ink token set as the rest of the suite, so theme.js's
   [data-theme] switch drives this page the way it drives Sandbox,
   Journal and Pixel Studio. Dark is the bare :root; light overrides
   only what changes. theme.js always stamps an explicit data-theme
   before first paint, so there is no prefers-color-scheme block here.

   The graph is SVG, so its colours are plain CSS on SVG classes — no
   colour table in JavaScript. --c0…--c7 are the curve palette; a curve
   carries class c0…c7 and picks up the right value for the theme.

   The CSP is style-src 'self' with no 'unsafe-inline': nothing in the
   markup or the script sets a style attribute.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0b0a0d; --bg-2:#16131a;
  --panel:rgba(29,25,34,.86); --panel-solid:#1d1922;
  --line:rgba(184,175,164,.20); --line-hot:rgba(245,158,11,.45);
  --ink:#f5f1ea; --ink-dim:#b8afa4; --ink-faint:#6b635a;
  --brand:#f59e0b; --brand-2:#a78bfa;
  --ok:#4ee8a5; --warn:#fbbf24; --bad:#f87171;
  --surf:rgba(43,37,51,.72);
  --shadow:4px 4px 0 rgba(0,0,0,.45);
  --logo-glow:1; --logo-glow-color:#f59e0b; --logo-bulb:#d9a441;
  --logo-glass-hi:#fffdf6; --logo-glass-lo:#f8e3b6; --logo-face:#8a6a3b;
  --font:"Inter Variable","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:12px;

  /* graph */
  --g-bg:#100d16;
  --g-minor:rgba(184,175,164,.07);
  --g-major:rgba(184,175,164,.16);
  --g-axis:rgba(245,241,234,.62);
  --g-label:#b8afa4;

  /* curve palette: seats from the arcade first, then four more, each
     re-checked for contrast on --g-bg */
  --c0:#48c8dd; --c1:#e05b7a; --c2:#9ec95a; --c3:#e39a48;
  --c4:#a78bfa; --c5:#f2d04b; --c6:#6aa0f5; --c7:#f07ccf;
}
:root[data-theme="light"]{
  --bg:#faf8f4; --bg-2:#f1ece2;
  --panel:rgba(255,253,247,.92); --panel-solid:#fffdf7;
  --line:rgba(90,74,54,.22); --line-hot:rgba(180,83,9,.42);
  --ink:#241f18; --ink-dim:#5b5145; --ink-faint:#7d7264;
  --brand:#b45309; --brand-2:#6d28d9;
  --ok:#047857; --warn:#8c6510; --bad:#b91c1c;
  --surf:rgba(241,236,226,.80);
  --shadow:4px 4px 0 rgba(90,74,54,.22);
  --logo-glow:0; --logo-bulb:#a86f18;
  --logo-glass-hi:#fffaec; --logo-glass-lo:#f2d79c; --logo-face:#6b4d22;

  --g-bg:#fcfaf6;
  --g-minor:rgba(90,74,54,.08);
  --g-major:rgba(90,74,54,.18);
  --g-axis:rgba(36,31,24,.70);
  --g-label:#5b5145;

  --c0:#0e7c90; --c1:#c0264f; --c2:#4d7a1a; --c3:#b45309;
  --c4:#6d28d9; --c5:#8a6a00; --c6:#1d5fc4; --c7:#a8288a;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{color-scheme:dark;height:100%}
:root[data-theme="light"]{color-scheme:light}
body{
  margin:0;background:var(--g-bg);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  height:100dvh;overflow:hidden;
  /* the page never scrolls or zooms as a whole; the graph handles gestures */
  overscroll-behavior:none;
}
a{color:var(--brand)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:4px;
}
.skip{position:absolute;left:-9999px;top:0;background:var(--panel-solid);
  color:var(--ink);padding:.6rem .9rem;z-index:80;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* ── graph ── */
.graph{position:fixed;inset:0;width:100%;height:100%;display:block;
  background:var(--g-bg);touch-action:none;cursor:grab;user-select:none;
  -webkit-user-select:none}
.graph.dragging{cursor:grabbing}
.graph:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.grid-minor{stroke:var(--g-minor);stroke-width:1;fill:none;shape-rendering:crispEdges}
.grid-major{stroke:var(--g-major);stroke-width:1;fill:none;shape-rendering:crispEdges}
.no-grid .grid-minor,.no-grid .grid-major{display:none}
.axes{stroke:var(--g-axis);stroke-width:1.5;fill:none;shape-rendering:crispEdges}
.labels text{fill:var(--g-label);font:12px var(--font);font-variant-numeric:tabular-nums;
  paint-order:stroke;stroke:var(--g-bg);stroke-width:4px;stroke-linejoin:round}
.labels .axis-name{font-style:italic;font-weight:600;fill:var(--g-axis)}

.curve{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.pts circle{stroke:var(--g-bg);stroke-width:1.5}
.pts .join{fill:none;stroke-width:2;stroke-linejoin:round}
.c0{stroke:var(--c0);fill:var(--c0)} .c1{stroke:var(--c1);fill:var(--c1)}
.c2{stroke:var(--c2);fill:var(--c2)} .c3{stroke:var(--c3);fill:var(--c3)}
.c4{stroke:var(--c4);fill:var(--c4)} .c5{stroke:var(--c5);fill:var(--c5)}
.c6{stroke:var(--c6);fill:var(--c6)} .c7{stroke:var(--c7);fill:var(--c7)}
.curve.c0,.curve.c1,.curve.c2,.curve.c3,.curve.c4,.curve.c5,.curve.c6,.curve.c7,
.pts .join{fill:none}
.pts circle{stroke:var(--g-bg)}
.hover circle{stroke:var(--g-bg);stroke-width:2.5}

.mx-readout{position:fixed;left:0;top:0;z-index:30;pointer-events:none;
  padding:.2rem .5rem;border-radius:.4rem;border:1px solid var(--line);
  background:var(--panel-solid);box-shadow:var(--shadow);
  font:600 .8rem var(--mono);color:var(--ink);white-space:nowrap}

/* ── floating chrome ── */
.mx-panel{position:fixed;left:.75rem;top:.75rem;z-index:40;
  width:min(23rem,calc(100vw - 1.5rem));max-height:calc(100dvh - 1.5rem);
  display:flex;flex-direction:column;
  background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.mx-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.55rem .6rem .55rem .8rem;border-bottom:1px solid var(--line);flex:none}
.mx-home{text-decoration:none;color:inherit}

.wordmark{font-weight:700;letter-spacing:-.03em;line-height:1;
  display:inline-flex;flex-direction:column;align-items:center;gap:.3rem}
.wordmark.small{font-size:1.1rem}
.wordmark .hl-lockup{height:2em;width:auto;display:inline-block;color:var(--ink);flex:none}
.wm-b{color:var(--ink-dim);font-size:max(.62rem,.16em);font-weight:700;
  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;line-height:1}

.mx-items{list-style:none;margin:0;padding:.35rem;overflow-y:auto;flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;gap:.3rem}
.mx-item{border:1px solid transparent;border-radius:.55rem;padding:.3rem;background:var(--surf)}
.mx-item:focus-within{border-color:var(--line-hot)}
.mx-row{display:flex;align-items:center;gap:.35rem}
.mx-label{flex:1;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}

.mx-swatch{appearance:none;flex:none;width:1.6rem;height:1.6rem;border-radius:50%;cursor:pointer;
  border:3px solid var(--panel-solid);box-shadow:0 0 0 1px var(--line);padding:0}
.mx-swatch.c0,.mx-dot.c0{background:var(--c0)} .mx-swatch.c1,.mx-dot.c1{background:var(--c1)}
.mx-swatch.c2,.mx-dot.c2{background:var(--c2)} .mx-swatch.c3,.mx-dot.c3{background:var(--c3)}
.mx-swatch.c4,.mx-dot.c4{background:var(--c4)} .mx-swatch.c5,.mx-dot.c5{background:var(--c5)}
.mx-swatch.c6,.mx-dot.c6{background:var(--c6)} .mx-swatch.c7,.mx-dot.c7{background:var(--c7)}
/* A y column's colour, in the table header and the fill form. */
.mx-dot{display:inline-block;flex:none;width:.6rem;height:.6rem;border-radius:50%;
  margin-right:.3rem;vertical-align:.05em;border:0}
.is-hidden .mx-swatch{opacity:.3}
.is-hidden .mx-expr{color:var(--ink-faint)}

.mx-expr{flex:1;min-width:0;font:500 1rem var(--mono);color:var(--ink);
  background:transparent;border:0;border-radius:.35rem;padding:.4rem .3rem}
.mx-expr:focus-visible{outline:none}
.mx-expr::placeholder{color:var(--ink-faint)}
.mx-expr[aria-invalid="true"]{text-decoration:wavy underline var(--bad) 1px;text-underline-offset:4px}
.mx-err{margin:.15rem .3rem .1rem 2.3rem;font-size:.78rem;color:var(--bad)}

.mx-icon{appearance:none;flex:none;display:grid;place-items:center;
  width:2rem;height:2rem;padding:0;border-radius:.45rem;cursor:pointer;
  background:none;border:1px solid transparent;color:var(--ink-dim)}
.mx-icon:hover{color:var(--ink);border-color:var(--line)}
.mx-icon svg,.mx-btn svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.mx-icon svg circle{fill:currentColor;stroke:none}
.mx-eye .eye-shut{display:none}
.mx-eye[aria-pressed="true"] .eye-shut{display:inline}
.mx-eye[aria-pressed="true"] .eye-open{opacity:.4}
.mx-eye svg circle.eye-open{fill:none;stroke:currentColor}
.mx-connect[aria-pressed="true"]{color:var(--brand);border-color:var(--line-hot)}
.mx-del:hover{color:var(--bad)}

/* Many y columns scroll sideways inside the card, never the page. */
.mx-tablewrap{margin:.3rem 0 .1rem 2.3rem;overflow-x:auto;overscroll-behavior-x:contain}
.mx-table{width:100%;border-collapse:collapse;font:500 .9rem var(--mono)}
.mx-table th{font:italic 600 .85rem var(--font);color:var(--ink-dim);text-align:left;
  padding:.15rem .4rem;border-bottom:1px solid var(--line);white-space:nowrap}
.mx-table th.mx-addcell{width:1%;padding:.1rem .15rem;border-left:0}
.mx-colx,.mx-addcol{appearance:none;font:600 .85rem var(--font);color:var(--ink-faint);
  background:none;border:1px solid transparent;border-radius:.3rem;cursor:pointer;
  padding:0 .3rem;margin-left:.2rem;line-height:1.3}
.mx-colx:hover{color:var(--bad);border-color:var(--line)}
.mx-addcol{margin:0;color:var(--ink-dim)}
.mx-addcol:hover{color:var(--ink);border-color:var(--line-hot)}
.mx-table td{padding:0;border-bottom:1px solid var(--line)}
.mx-table td+td,.mx-table th+th{border-left:1px solid var(--line)}
.mx-table input{width:100%;min-width:4.4rem;font:inherit;color:var(--ink);background:transparent;
  border:0;padding:.3rem .4rem}
.mx-table input:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:0}
.mx-table input[aria-invalid="true"]{color:var(--bad)}

/* Fill-from-function form, inside a table card. */
.mx-fillbtn[aria-pressed="true"]{color:var(--brand);border-color:var(--line-hot)}
.mx-fill{margin:.3rem 0 .2rem 2.3rem;padding:.45rem .5rem;display:flex;flex-direction:column;gap:.4rem;
  border:1px solid var(--line);border-radius:.5rem;background:var(--surf)}
.mx-fill[hidden]{display:none}
.mx-fill label{display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--ink-dim);min-width:0}
.mx-fill input{min-width:0;width:100%;font:500 .9rem var(--mono);color:var(--ink);
  background:var(--g-bg);border:1px solid var(--line);border-radius:.35rem;padding:.25rem .4rem}
.mx-fill input:focus-visible{outline:2px solid var(--brand);outline-offset:-1px}
.mx-fill-fns{display:flex;flex-direction:column;gap:.3rem}
.mx-fill-fn{display:flex;align-items:center;gap:.2rem}
.mx-fill-fn label{flex:1}
.mx-fill-fn span{font:italic 600 .85rem var(--font);white-space:nowrap;display:inline-flex;align-items:center}
.mx-fill-del{width:1.6rem;height:1.6rem}
.mx-fill-range{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.mx-fill-act{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.mx-fill-msg{font-size:.78rem;color:var(--ink-dim)}
.mx-fill-msg.bad{color:var(--bad)}

.mx-add{display:flex;gap:.4rem;padding:.45rem .6rem;border-top:1px solid var(--line);flex:none}
.mx-btn{appearance:none;font:inherit;font-size:.82rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--ink);background:var(--surf);border:1px solid var(--line);
  border-radius:999px;padding:.35rem .85rem}
.mx-btn:hover{border-color:var(--line-hot)}
/* Autocomplete list: one per page, fixed so the panel's scroll box
   cannot clip it. main.js / complete.js place it under (or over) the field. */
.mx-ac{position:fixed;z-index:70;margin:0;padding:.25rem;list-style:none;
  max-height:min(16rem,40dvh);overflow-y:auto;
  background:var(--panel-solid);border:1px solid var(--line);border-radius:.55rem;box-shadow:var(--shadow)}
.mx-ac li{display:flex;align-items:baseline;gap:.6rem;padding:.35rem .5rem;border-radius:.35rem;cursor:pointer}
.mx-ac li[aria-selected="true"]{background:color-mix(in srgb,var(--brand) 18%,transparent)}
.mx-ac li:hover{background:var(--line)}
.mx-ac code{font:600 .88rem var(--mono);color:var(--ink);white-space:nowrap}
.mx-ac span{font-size:.75rem;color:var(--ink-dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Keypad: docks at the foot of the panel. */
.mx-head-act{display:flex;gap:.15rem}
#btn-keypad[aria-pressed="true"]{color:var(--brand);border-color:var(--line-hot)}
#btn-keypad svg rect{fill:none;stroke:currentColor}
.mx-keypad{flex:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.25rem;
  padding:.45rem .6rem .55rem;border-top:1px solid var(--line)}
.mx-keypad button{appearance:none;min-width:0;height:2.35rem;padding:0;cursor:pointer;
  font:600 .85rem var(--mono);color:var(--ink);background:var(--surf);
  border:1px solid var(--line);border-radius:.45rem;touch-action:manipulation;
  -webkit-user-select:none;user-select:none}
.mx-keypad button:hover{border-color:var(--line-hot)}
.mx-keypad button:active{background:var(--line)}
.mx-keypad .k-num{font-size:1rem;background:var(--g-bg)}
.mx-keypad .k-op,.mx-keypad .k-var{color:var(--brand)}
.mx-keypad .k-act{color:var(--ink-dim)}
.mx-keypad .k-enter{grid-column:span 3;background:var(--brand);color:#1a1206;border-color:transparent;font-size:1rem}
:root[data-theme="light"] .mx-keypad .k-enter{color:#fff}

.mx-hint{margin:0;padding:0 .8rem .6rem;font-size:.75rem;color:var(--ink-faint);flex:none}
.mx-hint code{font-family:var(--mono);color:var(--ink-dim)}

.mx-open{position:fixed;left:.75rem;top:.75rem;z-index:40;
  background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow)}

.mx-top{position:fixed;right:.75rem;top:.75rem;z-index:45;display:flex;align-items:center;gap:.5rem}
.mx-top .hl-menu-summary,.mx-top .hl-me{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.mx-zoom{position:fixed;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));z-index:40;
  display:flex;flex-direction:column;gap:.25rem;padding:.25rem;
  background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.mx-zoom .mx-icon{width:2.25rem;height:2.25rem;color:var(--ink)}

.mx-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;
  overflow:hidden;background:var(--surf)}
.mx-seg button{appearance:none;background:none;border:0;color:var(--ink-dim);
  font:inherit;font-size:.78rem;padding:.3rem .7rem;cursor:pointer;white-space:nowrap}
.mx-seg button.on{background:var(--brand);color:#1a1206;font-weight:700}
:root[data-theme="light"] .mx-seg button.on{color:#fff}

/* ── bar menu ── same <details>/<summary> pattern as the siblings ── */
.hl-menu{position:relative}
.hl-menu-summary{display:flex;align-items:center;gap:.45rem;cursor:pointer;list-style:none;
  padding:.4rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--panel);
  color:var(--ink-dim);font-size:.8rem;user-select:none;box-shadow:var(--shadow)}
.hl-menu-summary::-webkit-details-marker{display:none}
.hl-menu-summary:hover{border-color:var(--line-hot);color:var(--ink)}
.hl-menu-bars{width:.85rem;height:.7rem;flex:none;
  border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.hl-menu-bars::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);
  border-top:2px solid currentColor}
.hl-menu-panel{position:absolute;right:0;top:calc(100% + .35rem);z-index:60;
  min-width:15rem;display:flex;flex-direction:column;padding:.3rem;
  border:1px solid var(--line);border-radius:.6rem;
  background:var(--panel-solid);box-shadow:var(--shadow)}
.hl-menu-head{margin:.45rem .55rem .2rem;font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint)}
.hl-menu-head:first-child{margin-top:.2rem}
.hl-menu-item{appearance:none;background:none;border:0;cursor:pointer;font:inherit;
  font-size:.85rem;color:var(--ink);text-align:left;text-decoration:none;
  padding:.45rem .55rem;border-radius:.4rem}
.hl-menu-item:hover{background:var(--line)}
.hl-menu-item:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.hl-menu-seg{margin:.15rem .55rem .3rem;align-self:flex-start}
.hl-menu-check{display:flex;align-items:center;gap:.5rem;font-size:.85rem;
  padding:.35rem .55rem;cursor:pointer;color:var(--ink)}
input[type=checkbox]{accent-color:var(--brand)}

/* Phones: the panel takes the lower part of the screen as a sheet, so the
   graph keeps the top. The menu button stays top right. */
@media (max-width:640px){
  .mx-panel{left:.5rem;right:.5rem;top:auto;bottom:calc(.5rem + env(safe-area-inset-bottom));
    width:auto;max-height:46dvh}
  /* With the keypad open the sheet grows so a row or two still shows. */
  .mx-panel.kp-open{max-height:66dvh}
  .mx-keypad{padding:.35rem .45rem .45rem;gap:.2rem}
  .mx-keypad button{height:2.4rem}
  .mx-open{left:.5rem;top:auto;bottom:calc(.5rem + env(safe-area-inset-bottom))}
  .mx-top{right:.5rem;top:.5rem}
  .mx-zoom{right:.5rem;bottom:auto;top:3.4rem}
  .hl-menu-word{display:none}
  .mx-hint{display:none}
  .mx-head{padding:.35rem .5rem .35rem .7rem}
  .wordmark.small{font-size:.8rem}
}

/* ── signed-in chip ── same markup and rules in every Happy Light app. ── */
.hl-me{display:inline-flex;align-items:center;gap:.4rem;flex:none;max-width:13rem;
  padding:.15rem .7rem .15rem .15rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ok) 40%,var(--line));
  background:color-mix(in srgb,var(--ok) 9%,var(--surf,transparent));
  color:var(--ink);font-size:.78rem;font-weight:600;line-height:1.2;
  text-decoration:none;white-space:nowrap}
.hl-me:hover{border-color:color-mix(in srgb,var(--ok) 65%,transparent);
  background:color-mix(in srgb,var(--ok) 16%,var(--surf,transparent))}
.hl-me-avatar{position:relative;display:grid;place-items:center;flex:none;
  width:1.45rem;height:1.45rem;border-radius:50%;
  background:color-mix(in srgb,var(--ink) 10%,transparent)}
.hl-me-ghost{width:.8rem;height:.8rem;fill:currentColor;animation:hl-me-bob 2.4s steps(4) infinite}
.hl-me-dot{position:absolute;right:-1px;bottom:-1px;width:.5rem;height:.5rem;
  border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--bg)}
.hl-me-dot::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--ok);animation:hl-me-ping 2.4s cubic-bezier(.22,.61,.36,1) infinite}
.hl-me-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
@keyframes hl-me-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes hl-me-ping{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(2.4);opacity:0}}
@media (max-width:560px){.hl-me{padding:.15rem}.hl-me-name{display:none}}
@media (prefers-reduced-motion:reduce){.hl-me-ghost,.hl-me-dot::after{animation:none}}