/* 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); }
/* The page's content had no landmark at all — <footer> was the only one, so a
   screen-reader user navigating by landmark reached the disclaimer and nothing else.
   <main> takes over the body's flex column verbatim (same direction, same centring,
   same 100% width basis for .readout's max-width:340px).
   Measured, not assumed — every visible block's box was compared at 390 and 1440 with
   and without the wrapper: 30 boxes, 28 pixel-identical, zero vertical reflow. The two
   deltas are the same one, #planLink, 0.69px wider and 0.34px left — sub-pixel
   inline-flex measurement through the extra containing block, not a layout move. */
main { display:flex; flex-direction:column; align-items:center; width:100%; }
.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; }
/* Contrast is computed, not eyeballed: the input fill composites rgba(10,11,14,.35)
   over the .logpad gradient, so both the placeholder and the field border must clear
   their floors against the WORST stop of that band (--cy #2563eb). Was .35/.55:
   border 2.42:1 against a 3:1 non-text floor (1.4.11) and placeholder 3.85:1 against
   a 4.5:1 text floor — the placeholder is also the only sighted field label, so it
   was the least legible text on the page.
   The border is measured against BOTH neighbours (fill inside, gradient outside), which
   is what 1.4.11 actually asks: .55 clears the fill at 3.85:1 but only reaches 2.24:1
   against the gradient, so .70 is the true floor and .78 is the shipped value.
   Now .78/.78 => border 6.08:1 inner / 3.55:1 outer, placeholder 6.08:1.
   Pinned by free_mode_a11y_contract_test.js, which recomputes from these alphas. */
.logpad input { background:rgba(10,11,14,.35); border:1px solid rgba(255,255,255,.78); 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,.78); 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; }
/* learn-more layer for the two computed metrics. Was a pair of title= attributes:
   invisible on touch, unreachable by keyboard, and dropped by most screen readers —
   the only explanation of the page's two derived numbers was effectively mouse-only.
   A real <details> is keyboard-reachable, tappable, and stays out of the glance layer
   (and out of the Hick's choice budget, which strips disclosures). */
.metric-info { margin-top:12px; color:var(--dim); font-size:.78rem; line-height:1.5; }
.metric-info summary { cursor:pointer; min-height:44px; display:inline-flex; align-items:center; font:700 .7rem var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--tl); }
.metric-info summary:focus-visible { outline:2px solid var(--cy); outline-offset:3px; }
.metric-info p { margin:8px 0 0; }
.metric-info strong { color:var(--text); }
/* 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;}