/* free_mode.css — extracted from free_mode.html. Blue-teal Free Mode surface. */

/* Self-hosted faces — CSP font-src 'self', font-display:swap (no FOIT) */
@font-face{font-family:'Space Grotesk';font-weight:500 700;font-display:swap;src:url('./fonts/space-grotesk-latin.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:400 700;font-display:swap;src:url('./fonts/jetbrains-mono-latin.woff2') format('woff2');}
:root { --bg:#0d0e12; --cy:#2563eb; --cy-deep:#1d4ed8; --ink:#60a5fa; --tl:#2dd4bf; --text:#eef2f8; --dim:#9aa6b8; --border:#1c2230;
  --font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace; }
/* generated brand-glow wallpaper — action-blue top, teal floor (static, motion-safe) */
body { margin:0; color:var(--text); font-family:var(--font-mono); padding:24px;
  display:flex; flex-direction:column; min-height:100svh; justify-content:center; align-items:center;
  background:
    radial-gradient(58% 38% at 50% 38%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(80% 60% at 50% 122%, rgba(45,212,191,.06), transparent 55%),
    linear-gradient(180deg,#0b0d12,var(--bg) 60%,#090a0e); }
.brand { font:800 clamp(2rem,6vw,3.2rem) var(--font-display); letter-spacing:-.03em; color:var(--text); margin:0 0 6px; }
.brand .y { color:var(--ink); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.free-line { margin:0 0 18px; color:var(--dim); font:600 .8rem var(--font-mono); letter-spacing:.04em; }
.free-line::first-line { color:var(--text); }
.eyebrow { color:var(--ink); opacity:.85; font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; margin-bottom:26px; font-weight:700; }
.input-row { display:flex; gap:12px; margin-bottom:24px; }
input { background:rgba(255,255,255,.03); border:1px solid var(--border); color:var(--text); font:2rem var(--font-mono); padding:12px; width:120px; text-align:center; border-radius:0; outline:none; }
input:focus { border-color:var(--cy); box-shadow: 0 0 0 1px var(--cy); }
/* keep type=number (mobile numeric keypad) but hide desktop spin buttons — cleaner focused input */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input[type="number"] { -moz-appearance:textfield; appearance:textfield; }
.actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.log-btn, .undo-btn { border:none; padding:16px 32px; font:800 1.5rem var(--font-display); border-radius:0; cursor:pointer; text-transform:uppercase; letter-spacing:.02em; transition: transform 0.1s; }
.log-btn { background:var(--cy); color:#fff; }
.log-btn:hover { background:var(--cy-deep); }
.undo-btn { background:transparent; color:var(--text); border:1px solid var(--border); }
.undo-btn:disabled { opacity:.35; cursor:not-allowed; }
.log-btn:active, .undo-btn:not(:disabled):active { transform: scale(0.95); }
.log-btn:focus-visible, .undo-btn:focus-visible { outline:2px solid var(--cy); outline-offset:3px; }
/* instrument band — same momentum vocabulary as the shipped front-door hero:
   action-blue gradient card wrapping the logging instrument; inputs are the hero.
   (Band overrides sit AFTER the base .log-btn rule: the base rule is the brand
   contract's parse target and stays the canonical white-on-blue declaration.) */
.logpad { background:linear-gradient(135deg,var(--cy-deep) 0%,var(--cy) 58%,#1e40af 100%);
  border-radius:24px; padding:clamp(22px,4.5vw,40px);
  box-shadow:0 32px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
  display:flex; flex-direction:column; align-items:center; margin-bottom:4px; max-width:96vw; }
.logpad .input-row { margin-bottom:20px; }
.logpad input { background:rgba(10,11,14,.35); border:1px solid rgba(255,255,255,.35); color:#fff;
  font:700 clamp(2.4rem,9vw,3.4rem) var(--font-mono); width:clamp(120px,34vw,170px); padding:14px 8px; border-radius:12px; }
.logpad input::placeholder { color:rgba(255,255,255,.55); font-size:.4em; letter-spacing:.2em; }
.logpad input:focus { border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.7); }
.logpad .log-btn { background:#fff; color:#1e3a8a; font-size:clamp(1.3rem,4vw,1.7rem); padding:18px 40px; border-radius:14px;
  box-shadow:0 16px 48px rgba(0,0,0,.35); }
.logpad .log-btn:hover { background:#eff6ff; }
.logpad .undo-btn { color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:14px; }
.logpad .undo-btn:disabled { opacity:.45; }
.logpad .log-btn:focus-visible, .logpad .undo-btn:focus-visible { outline:2px solid #fff; outline-offset:3px; }
#metrics { margin-top:24px; display:flex; gap:24px; align-items:center; opacity:0.6; font-size:0.85rem; font-family:var(--font-mono); color:var(--dim); }
.session-spark { display:flex; align-items:center; gap:10px; margin-top:14px; }
.session-spark .spark-label { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.session-spark svg { display:block; }
.session-spark[hidden] { display:none; }
.clear-btn { margin-left:auto; min-height:44px; background:transparent; border:1px solid var(--border); color:var(--dim); font:600 .78rem var(--font-mono); letter-spacing:.04em; padding:6px 12px; border-radius:6px; cursor:pointer; }
.clear-btn:hover { color:var(--text); border-color:var(--dim); }
.clear-btn:focus-visible { outline:2px solid var(--cy); outline-offset:2px; }
.clear-btn[hidden] { display:none; }
/* your logged sets — visible proof of what you entered (data transparency) */
.set-log { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:180px; overflow-y:auto; }
.set-log li { display:flex; justify-content:space-between; font:600 .82rem var(--font-mono); color:var(--dim); padding:8px 10px; border:1px solid var(--border); border-radius:6px; }
.set-log li .vol { color:var(--tl); }
.set-log:empty { display:none; }
.flow-link { margin-top:22px; min-height:44px; display:inline-flex; align-items:center; color:#60a5fa; text-decoration:none; font-size:.85rem; letter-spacing:.04em; border-bottom:1px solid rgba(96,165,250,.4); font-family:var(--font-mono); }
.flow-link:hover { color:#93c5fd; }
.flow-link:focus-visible { outline:2px solid var(--cy); outline-offset:3px; }
.flow-link[hidden] { display:none; }
/* blanket kill switch (matches home.css) — any future transition/animation on this page
   is auto-gated, so motion can never leak past a narrow selector list under reduced-motion */
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important;} }
/* session readout panel — same depth vocabulary as the shipped hero-A readout
   (gradient shell, teal-top rule, elevation). Real user data, so no SAMPLE label. */
.readout { box-sizing:border-box; width:100%; max-width:340px; margin:24px auto 0; background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(0,0,0,.18)); border:1px solid var(--border); border-top:2px solid var(--tl); border-radius:14px; padding:16px 18px 14px; box-shadow:0 24px 60px rgba(0,0,0,.4), 0 8px 24px rgba(37,99,235,.12); }
.readout-tag { margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--border); font:700 .7rem var(--font-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--tl); }
.readout #metrics { margin-top:0; opacity:1; justify-content:flex-start; gap:20px; }
/* honest empty state — guidance copy, never fabricated data; shows only while no set is logged */
.readout-empty { display:none; margin:12px 0 0; padding-top:10px; border-top:1px solid var(--border); font-size:.8rem; line-height:1.5; color:var(--dim); }
#setLog:empty ~ .readout-empty { display:block; }
.voice-preview{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.voice-preview-btn{border:1px dashed var(--line-2,rgba(255,255,255,.15));background:transparent;color:var(--dim,#94a3b8);padding:10px 16px;font:700 .95rem var(--font-display);border-radius:10px;cursor:not-allowed;opacity:.75;}
.voice-preview-tag{font:700 10px var(--font-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--dim,#94a3b8);}
.voice-preview-info{flex-basis:100%;color:var(--dim,#94a3b8);font-size:.85rem;}
.voice-preview-info summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;}

/* Disclaimer footer */
.fm-footer{text-align:center;color:#7c8696;font-size:.72rem;padding:16px;max-width:760px;margin:0 auto;line-height:1.5;}
.fm-foot-link{color:#60a5fa;text-decoration:underline;text-underline-offset:2px;min-height:44px;display:inline-flex;align-items:center;margin-top:8px;}
.fm-foot-link:hover{color:#93c5fd;}
.fm-foot-link:focus-visible{outline:2px solid #2563eb;outline-offset:3px;}

/* --- UX ratchet 2026-07-22 (additive): raise sub-10px live labels to a legible floor --- */
.session-spark .spark-label{font-size:.7rem;}
.voice-preview-tag{font-size:11px;}