/* /trace — the tip-trace page, in the-wand.ai's white system (2026-09-18).
 *
 * The apex, /about, the blog and the press page all wear one skin: white paper, near-black ink,
 * warm neutral greys, one flame red used sparingly, Inter with JetBrains Mono for the small
 * uppercase labels. The tokens below are copied from wandy/landing/deploy/public/site.css so the
 * page reads as part of the site rather than a console bolted to it — and because the metaphor is
 * the product's own: a hand writing in the air is ink going onto paper, not a scope trace.
 *
 * Phone first. The square is the button, so it gets the height; everything else is a hairline.
 */
:root{
  --paper:#ffffff;
  --ink:#0f0f0e;
  --body:#454440;
  --muted:#6f6d68;
  --faint:#94918b;
  --line:#e8e6e2;
  --card:#fafaf9;
  --flame:#E5484D;
  --good:#2f855a;
  --warn:#a9700f;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body.trace{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;
  display:flex;flex-direction:column;min-height:100dvh;-webkit-font-smoothing:antialiased;
  overscroll-behavior:none;text-rendering:optimizeLegibility}
body.trace [hidden]{display:none !important}
::selection{background:rgba(229,72,77,.14)}
button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* ── the eyebrow — the site's label voice ── */
.kick{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:0}

/* ── the top bar ── */
.bar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:clamp(14px,2.4vh,22px) clamp(16px,4vw,28px) 10px}
.brand{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
/* the site's own wordmark, and the way back to it — same shape as the apex nav's .mark */
.mark{font-weight:600;font-size:.94rem;letter-spacing:-.01em;color:var(--ink);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .15s}
.mark small{font-weight:400;color:var(--faint);font-size:.74rem;margin-left:7px;letter-spacing:0}
.mark:hover{border-bottom-color:var(--flame)}
h1{font-weight:600;font-size:clamp(1.3rem,5vw,1.6rem);line-height:1.05;letter-spacing:-.025em;color:var(--ink)}
h1 .dot{color:var(--flame)}
.lede{color:var(--muted);font-size:.86rem;line-height:1.5;margin-top:5px;max-width:34ch}
.pill{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.76rem;
  padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper);white-space:nowrap}
.pill .dot{width:7px;height:7px;border-radius:50%;background:#cfccc6}
.pill.live{color:var(--ink)}
.pill.live .dot{background:var(--good)}
.pill.warn .dot{background:var(--warn)}

/* ── the paper: the square you write on ── */
.stage-wrap{position:relative;margin:auto auto 0;flex:none;
  width:min(100vw - 32px, 66dvh, 640px);height:min(100vw - 32px, 66dvh, 640px)}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:14px;
  background:var(--card);border:1px solid var(--line);
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none;cursor:crosshair}
body.trace[data-state="ready"] #stage{border-color:#dcd9d3}
body.trace[data-state="drawing"] #stage{border-color:var(--ink)}

.hint{position:absolute;left:12px;right:12px;bottom:12px;text-align:center;color:var(--muted);
  font-size:.86rem;line-height:1.45;pointer-events:none;padding:7px 14px;transition:opacity .25s;
  background:rgba(250,250,249,.93);border-radius:10px}   /* the ink runs under it — stay readable */
body.trace[data-state="drawing"] .hint,
body.trace[data-state="settling"] .hint,
body.trace[data-state="naming"] .hint{opacity:0}
body.trace[data-state="connect"].want-arm .hint{opacity:0}   /* the Start card already says it */

/* The wand boots as a Bluetooth keyboard and Chromium refuses HID peripherals, so the rhythm that
   puts it in streamer mode has to stand on the page before the chooser will ever list it. */
.how,.arm{background:rgba(250,250,249,.94);border-radius:14px}    /* mask the grid under the copy */
.how{position:absolute;left:10px;right:10px;top:50%;transform:translateY(-50%);text-align:center;
  padding:22px 20px;pointer-events:none;display:none}
body.trace[data-state="connect"].want-wand:not(.no-ble) .how{display:block}
.how p{margin:0}
.how-kick{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-bottom:14px}
.how-rhythm{font-weight:600;font-size:clamp(1.05rem,4.4vw,1.45rem);line-height:1.25;letter-spacing:-.02em;
  color:var(--ink);display:flex;justify-content:center;align-items:baseline;gap:10px;flex-wrap:wrap}
.how-rhythm i{font-style:normal;color:var(--faint)}
.how-rhythm .hold{color:var(--flame)}
.how-tail{margin-top:14px;color:var(--muted);font-size:.85rem;line-height:1.55;max-width:34ch;margin-left:auto;margin-right:auto}
.how-tail b{color:var(--ink);font-weight:600}

/* the tap-to-arm card: iOS will not hand over the motion sensor without a gesture, so on a phone
   the first touch is the permission and the page says so in one line rather than a chooser */
.arm{position:absolute;left:10px;right:10px;top:50%;transform:translateY(-50%);text-align:center;
  padding:24px 20px;display:none}
body.trace[data-state="connect"].want-arm .arm{display:block}
.arm-kick{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.arm h2{font-weight:600;font-size:clamp(1.1rem,4.6vw,1.5rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.arm p{margin-top:12px;color:var(--muted);font-size:.85rem;line-height:1.55;max-width:32ch;margin-left:auto;margin-right:auto}
.arm .go{margin-top:20px;display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);
  font:500 .88rem/1 var(--sans);padding:12px 24px;border-radius:999px;border:1px solid var(--ink);cursor:pointer}
.arm .go:hover{background:#2a2926}

.letter-panel{position:absolute;top:12px;right:16px;display:flex;flex-direction:column;align-items:center;
  gap:1px;pointer-events:none;transition:opacity .3s}
.letter-panel.dim{opacity:.4}
.letter{font-weight:600;font-size:clamp(46px,13vw,68px);line-height:1;letter-spacing:-.03em;
  color:var(--ink);min-width:42px;text-align:center}
.letter-panel.snapped .letter{color:var(--flame)}
.conf{font-family:var(--mono);font-size:.66rem;color:var(--faint);letter-spacing:.1em}

/* ── the tools, in thumb reach ── */
/* The stage's margin-top:auto is the ONLY auto in the column, so all the spare height goes above the
   square and the stage·letters·tools cluster sits low — the square is the button, and a thumb holding
   a phone reaches the bottom third, not the middle (John, 2026-09-18). */
.tools{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  padding:14px clamp(16px,4vw,28px) calc(16px + env(safe-area-inset-bottom))}
.chip{appearance:none;background:var(--paper);color:var(--body);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font:500 .84rem/1 var(--sans);cursor:pointer;transition:border-color .15s,color .15s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip.select{padding-right:30px;color:var(--body);
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}

/* ── the settings drawer: ?dev=1 only ──
   It was a swipe-up handle pinned to the bottom of every visit. On a public phone page that is a
   control nobody asked for sitting exactly where the thumb lives (John, 2026-09-18) — so the whole
   drawer, handle included, is hidden unless the page was opened with ?dev=1. The controls and their
   listeners stay in the DOM, so tuning still works and nothing has to be rebuilt to get them back. */
.sheet{display:none}
body.trace.dev .sheet{display:block;background:var(--paper);border-top:1px solid var(--line);
  padding:0 clamp(16px,4vw,28px) calc(10px + env(safe-area-inset-bottom))}
.handle{display:block;width:100%;background:none;border:0;padding:9px 0 10px;cursor:pointer}
.handle span{display:block;width:34px;height:3px;margin:0 auto;border-radius:2px;background:#d9d6d0}
.handle:hover span{background:var(--faint)}
.sheet-body{display:none;flex-direction:column;gap:12px;max-width:640px;margin:0 auto;padding-bottom:10px}
.sheet.open .sheet-body{display:flex}
.row{display:flex;align-items:center;gap:12px;font-size:.86rem;color:var(--body)}
.row > span:first-child{color:var(--muted);min-width:110px}
.row input[type=range]{flex:1;accent-color:var(--flame)}
.row output{font-family:var(--mono);font-size:.7rem;color:var(--faint);min-width:34px;text-align:right}
.row select{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:7px 10px;font:400 .84rem var(--sans)}
.row.toggles{gap:18px}
.row.toggles label{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.row.toggles input{accent-color:var(--flame)}
.row.actions{gap:10px}
.btn{appearance:none;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font:500 .84rem var(--sans);cursor:pointer;transition:border-color .15s}
.btn:hover:not(:disabled){border-color:var(--ink)}
.btn:disabled{opacity:.4;cursor:default}
.btn.on{border-color:var(--flame);color:var(--flame)}
.dev{margin:0;font:400 .68rem/1.6 var(--mono);color:var(--muted);white-space:pre-wrap;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px}

/* ── the desktop gate: a laptop has no motion sensor, so hand the page to the phone ── */
.gate{position:fixed;inset:0;z-index:50;background:var(--paper);display:none;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(28px,6vh,60px) clamp(20px,6vw,40px);overflow-y:auto}
body.trace.gated .gate{display:flex}
body.trace.gated{overflow:hidden}
.gate .kick{margin-bottom:18px}
.gate h2{font-weight:600;font-size:clamp(1.6rem,6vw,2.4rem);line-height:1.1;letter-spacing:-.025em;color:var(--ink)}
.gate p{color:var(--body);font-size:clamp(.95rem,1.4vw,1.02rem);line-height:1.6;max-width:44ch;margin:.9em auto 0}
.qr-card{width:min(230px,58vw);height:min(230px,58vw);padding:12px;border-radius:14px;background:var(--paper);
  border:1px solid var(--line);margin:clamp(22px,4vh,32px) auto clamp(14px,2.4vh,20px)}
.qr-card:empty{display:none}                   /* nothing until qr.js has drawn it; the typed address stands alone */
.qr-card svg{display:block;width:100%;height:100%}
.gate .addr{font-family:var(--mono);font-size:.82rem;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.gate .anyway{margin-top:clamp(24px,4vh,36px);font-size:.84rem;color:var(--muted)}
.gate .anyway button{appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line);text-decoration-thickness:1px}
.gate .anyway button:hover{color:var(--ink);text-decoration-color:var(--flame)}

@media (max-width:560px){
  .bar{padding:12px 16px 8px}
  .stage-wrap{width:min(100vw - 24px, 60dvh);height:min(100vw - 24px, 60dvh)}
  .chip{padding:8px 13px;font-size:.8rem}
  .row > span:first-child{min-width:92px}
}
@media (prefers-reduced-motion:reduce){
  .hint,.letter-panel,.chip,.btn,.arm .go{transition:none}
}