/* boas.dev — Component Kit (v3.4.0 — Warp Discipline + OTP) * The build substrate for the meeting / booking / calendar / email web pipeline. * Requires: boas-vars-dark.css + boas-vars-light.css + boas-filters.svg inlined. * * v3.3 added the transactional families the display kit lacked (forms, notice, * narrow auth layout, slot-grid). v3.4 codifies WARP DISCIPLINE + adds the OTP * field. Edgewarp is a sparingly-used attention HIGHLIGHT, applied once — to a * primary container OR a deliberate callout. Controls (inputs, slots, OTP) are * CRISP; a warped container does NOT warp its nested edges (no double-warp); the * only in-container warp is a callout (.danger notice, .inp.err field). Auth is * Supabase email-OTP (passwordless) — see .otp. All families reuse the SAME * --c-*/--edge* tokens — nothing literal, mode-flip stays paint-only. (Email is a * separate inline-only tier: boas-dev/reference/email-hybrid-partial.html.) * * v3.1 contrast rule: EDGE one pole, FILL the opposite — blue↔red. The dots ride * the edge pole; the ground rides the opposite. Plain fills are BANNED on screen * (every card carries halftone, baked into .edge::after). Red is SOFT — danger * reads by an energized warp (#edgeDanger) + a red/orange double-stroke, not a * louder hue. Hover energizes the edge (swap to #edgeHot — the interaction grammar). * * Everything consumes the --c-* role cascade ONLY → a mode flip * () is paint-only. The procedural edge lives on a * scoped ::before (z-index:-2) carrying ground+border; an unfiltered halftone * layer sits at ::after (z-index:-1); content rides z-index:1 — so TEXT and DOTS * stay razor-sharp while only the FRAME warps. Never filter a content element. */ /* ── TYPE SCALE — named reading tiers (mode-invariant). Bread text rides --fs-read; the detail tier (fine print / info details, not read at a glance) is the floor; chrome (eyebrows/chips/status caps) is smallest. Reference these, never hardcode. */ :root{ --fs-body: 14px; /* base reading — paragraphs, lede */ --fs-read: 13.5px; /* dense reading inside cards / lists / action items */ --fs-detail: 11px; /* info details, captions, timestamps — the readable floor */ --fs-meta: 10.5px; /* secondary meta / sub-labels */ --fs-label: 10px; /* chrome: eyebrows, chips, status caps, units */ } /* ── base ───────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;background:var(--c-bg);color:var(--c-text-primary); font-family:var(--font-mono);font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} .wrap{max-width:1080px;margin:0 auto;padding:30px 24px 90px} .disp{font-family:var(--font-disp);font-weight:600;letter-spacing:var(--tracking-disp)} .mono{font-family:var(--font-mono)} .tnum{font-variant-numeric:tabular-nums} /* ── EDGE PRIMITIVE — the scoped procedural surface + contrast poles ───── ::before = warped frame (ground + border) [z-2, filtered] ::after = always-on halftone, sharp dots [z-1, unfiltered] content = razor sharp [z 1] Default = QUIET blue-structure surface: cool ground, SOFT-RED dots (the red pole enters every card via the halftone), cool hairline. Modifiers flip the pole. The contrast lives in three vars set per element: ground/border/--ht-dot. */ .edge{position:relative;isolation:isolate;border-radius:var(--radius); --edge-ground:var(--c-bg-raised); --edge-stroke:var(--c-border-2); --ht-dot:var(--ht-red)} .edge>*{position:relative;z-index:1} .edge::before{content:"";position:absolute;inset:0;z-index:-2; background:var(--edge-ground);border:1px solid var(--edge-stroke); border-radius:var(--radius);filter:var(--edge)} /* baked halftone — every .edge ALWAYS carries it; corner luminance mask for depth */ .edge::after{content:"";position:absolute;inset:1px;z-index:-1;pointer-events:none;border-radius:var(--radius); background:radial-gradient(circle at 50% 50%,var(--ht-dot) 0 var(--ht-fill),transparent calc(var(--ht-fill) + 1%)); background-size:var(--ht-size) var(--ht-size);opacity:.6; -webkit-mask-image:radial-gradient(150% 160% at 100% 0,#000 0 48%,transparent 92%); mask-image:radial-gradient(150% 160% at 100% 0,#000 0 48%,transparent 92%)} /* ── pole modifiers — edge ↔ fill are opposites; dots match the edge ──────── */ /* BLUE-pole emphasis: blue frame · RED ground · blue dots (the headline contrast) */ .edge--frame{--edge-ground:var(--c-fill-red); --edge-stroke:var(--c-primary-deep); --ht-dot:var(--ht-blue)} .edge--frame::before{border-width:1.5px;border-radius:var(--radius-max)} /* RED-pole emphasis (inverse): red frame · BLUE ground · red dots */ .edge--inv{--edge-ground:var(--c-fill-blue); --edge-stroke:var(--c-red-deep); --ht-dot:var(--ht-red)} .edge--inv::before{border-width:1.5px;border-radius:var(--radius-max)} /* quiet / nested context — softer ground, hairline */ .edge--quiet{--edge-ground:var(--c-bg-raised-2); --edge-stroke:var(--c-border)} /* upcoming / active — blue ground accent on the frame */ .edge--next{--edge-stroke:var(--c-primary-deep)} /* de-emphasised — transparent ground, recessed warp, dots dimmed */ .edge--past{--edge-ground:transparent; --edge-stroke:var(--c-border)} .edge--past::before{filter:var(--edge-past)} .edge--past::after{opacity:.32} /* avatar / small element — blue abyss ground, tighter warp */ .edge--avatar{--edge-ground:var(--c-primary-abyss); --edge-stroke:var(--c-primary-deep)} .edge--avatar::before{border-radius:var(--radius-max);filter:var(--edge-avatar)} .edge--avatar::after{display:none} /* opt out of warp where a crisp rule is wanted */ .edge--flat::before{filter:none} .edge--noht::after{display:none} /* ── HOVER / FOCUS energize — ramp the warp (the research interaction grammar). Opt-in via .edge--live (interactive surfaces only; rows/quiet stay calm). ──── */ .edge--live{cursor:pointer} .edge--live::before{transition:filter var(--t-med)} .edge--live:hover::before,.edge--live:focus-visible::before{filter:var(--edge-hot)} .edge--live:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)} /* ── standalone HALFTONE (for non-.edge surfaces that still need a textured fill) ─ */ .ht{position:absolute;inset:1px;z-index:-1;pointer-events:none; background:radial-gradient(circle at 50% 50%,var(--ht-dot) 0 var(--ht-fill),transparent calc(var(--ht-fill) + 1%)); background-size:var(--ht-size) var(--ht-size); -webkit-mask-image:radial-gradient(140% 150% at 100% 0,#000 0 52%,transparent 90%); mask-image:radial-gradient(140% 150% at 100% 0,#000 0 52%,transparent 90%)} /* ── DITHER — stepped tone where a transition is unavoidable ────────────── */ .dither{filter:var(--dither)} /* ── DANGER — soft red, energized by MOTION (not a louder hue) + red/orange double-stroke. The warped red outline (::before, #edgeDanger) is the red line; the crisp inset orange ring is the second line. ────────────────────────── */ .danger{--edge-ground:var(--c-fill-red); --edge-stroke:var(--c-red-deep); --ht-dot:var(--ht-red); box-shadow:inset 0 0 0 1.5px var(--c-danger-double)} .danger::before{border-width:1.5px;filter:var(--edge-danger)} .danger .lab,.danger .ttl{color:var(--c-red-bright)} /* ── BUTTON — "Corner-Bracket Console": NO full border. Blue corner ticks frame a red halftone fill block; mono label. Hover → brackets push OUT + the fill-block edge warps harder. The contrast rule made literal: blue ticks ↔ red fill. ──── */ .btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px; font-family:var(--font-mono);font-weight:700;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase; color:var(--c-text-bright);background:transparent;border:0;cursor:pointer;line-height:1; padding:13px 22px;--tick:11px;--tickw:1.6px;--tickc:var(--c-primary);--fillc:var(--c-fill-red-2);--dotc:var(--ht-blue); transition:transform var(--t-fast)} /* fill block — red halftone, warped edges (living block) */ .btn::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--fillc); background-image:radial-gradient(circle at 50% 50%,var(--dotc) 0 var(--ht-fill),transparent calc(var(--ht-fill) + 1%)); background-size:var(--ht-size) var(--ht-size);border-radius:1px;filter:var(--edge);transition:filter var(--t-med)} /* four blue corner ticks (L-shapes), no full border */ .btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:inset var(--t-fast); background: linear-gradient(var(--tickc),var(--tickc)) 0 0/var(--tick) var(--tickw), linear-gradient(var(--tickc),var(--tickc)) 0 0/var(--tickw) var(--tick), linear-gradient(var(--tickc),var(--tickc)) 100% 0/var(--tick) var(--tickw), linear-gradient(var(--tickc),var(--tickc)) 100% 0/var(--tickw) var(--tick), linear-gradient(var(--tickc),var(--tickc)) 0 100%/var(--tick) var(--tickw), linear-gradient(var(--tickc),var(--tickc)) 0 100%/var(--tickw) var(--tick), linear-gradient(var(--tickc),var(--tickc)) 100% 100%/var(--tick) var(--tickw), linear-gradient(var(--tickc),var(--tickc)) 100% 100%/var(--tickw) var(--tick); background-repeat:no-repeat} .btn:hover{transform:translateY(-1px)} .btn:hover::before,.btn:focus-visible::before{filter:var(--edge-hot)} /* fill edge energizes */ .btn:hover::after,.btn:focus-visible::after{inset:-5px} /* brackets push out */ .btn:focus-visible{outline:none} .btn:focus-visible::after{filter:drop-shadow(0 0 2px var(--c-primary-glow))} /* inverse-pole button: red ticks ↔ blue fill (secondary emphasis) */ .btn--inv{--tickc:var(--c-red);--fillc:var(--c-fill-blue);--dotc:var(--ht-red)} /* SECONDARY (operator-ruled 2026-07-09): ghost = corner ticks, NO fill block; the console reduced to its brackets. Use for the soft secondary action beside a primary .btn. */ .btn--ghost{--fillc:transparent;--dotc:transparent;color:var(--c-primary-bright)} /* DESTRUCTIVE: red ticks, no fill — the console in the attention pole. Pairs with a confirm step; never the lone primary. */ .btn--danger{--tickc:var(--c-red-deep);--fillc:transparent;--dotc:transparent;color:var(--c-red-bright)} .btn[disabled]{opacity:var(--disabled-opacity);pointer-events:none} /* ── BANNED button antipatterns (operator ruling 2026-07-09 — "WE NEVER DO THOSE"). The Corner-Bracket Console (.btn + --inv/--ghost/--danger) is the ONLY button. These generic treatments are forbidden on every surface, every tier: ✗ solid single-fill button (flat azure/brand block, dark text) — the RETIRED plain button ✗ outline / bordered pill (border + transparent fill, rounded) ✗ bracketed flat pill ("[ LABEL ]" text-brackets over a plain fill) — incl. email EMAIL TIER: feTurbulence can't run in mail, so the console is delivered as a PRE-RENDERED RASTER of .btn (RULE 1 "render, don't fake"), never a flat pill echo. ──────────────────── */ /* ── eyebrows / labels / chrome ─────────────────────────────────────────── */ .eyebrow{font-size:10.5px;letter-spacing:var(--tracking-caps);text-transform:uppercase; color:var(--c-primary);display:flex;align-items:center;gap:9px} .verified{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-primary-bright); border:1px solid var(--c-primary-abyss);border-radius:2px;padding:3px 8px} .live{display:inline-flex;align-items:center;gap:6px;color:var(--c-primary-bright)} .live i{width:7px;height:7px;border-radius:50%;background:var(--c-primary-bright);animation:boas-pulse 2.4s ease-out infinite} @keyframes boas-pulse{0%{box-shadow:0 0 0 0 var(--c-primary-glow)}70%,100%{box-shadow:0 0 0 9px transparent}} .caret{display:inline-block;width:7px;height:13px;background:var(--c-primary);vertical-align:-2px;margin-left:3px;animation:boas-blink 1.15s steps(1) infinite} @keyframes boas-blink{50%{opacity:.25}} /* ── section headers ───────────────────────────────────────────────────── */ .sec{margin-bottom:26px} .sec>h2{font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--c-primary);margin:0 0 14px;display:flex;align-items:center;gap:11px} .sec>h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--c-border-2),transparent)} /* structural linework — permitted gradient */ .sec>h2 .ct{flex:none;color:var(--c-text-muted);font-weight:400;letter-spacing:.1em} /* ── hero / countdown ──────────────────────────────────────────────────── */ .hero{padding:30px;margin-bottom:18px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center} .hero h1{font-family:var(--font-disp);font-weight:600;font-size:31px;line-height:1.08;letter-spacing:-.02em;margin:12px 0;color:var(--c-text-bright)} .when{font-size:var(--fs-read);color:var(--c-text-secondary);display:flex;flex-wrap:wrap;gap:6px 18px} .when b{color:var(--c-primary-bright);font-weight:500}.when .z{color:var(--c-text-muted)} .count{text-align:right} .count .digits{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:52px;letter-spacing:.01em;color:var(--c-text-bright);line-height:1} .count .units{display:flex;justify-content:flex-end;gap:28px;margin-top:8px;font-size:var(--fs-label);letter-spacing:.22em;color:var(--c-text-muted);text-transform:uppercase} .count .units span{width:52px;text-align:center} /* ── prep / topics box ─────────────────────────────────────────────────── */ .box{padding:18px 20px;overflow:hidden} .box h3{font-family:var(--font-disp);font-weight:600;font-size:13px;color:var(--c-primary-bright);margin:0 0 9px} .box .stmt{font-size:var(--fs-body);color:var(--c-text-primary);line-height:1.6;margin:0 0 14px} .topics{list-style:none;margin:0;padding:0;display:grid;gap:8px} .topics li{font-size:var(--fs-read);color:var(--c-text-secondary);padding-left:18px;position:relative;line-height:1.5} .topics li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border:1.5px solid var(--c-red-deep);border-radius:1px} /* red tick — attention pole on a blue-frame box */ .topics li b{color:var(--c-text-primary);font-weight:500} /* ── attendees ─────────────────────────────────────────────────────────── */ .att{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--c-border)} .att:last-child{border-bottom:0} .av{position:relative;isolation:isolate;flex:none;width:38px;height:38px;display:flex;align-items:center;justify-content:center; font-family:var(--font-disp);font-weight:700;font-size:13px;color:var(--c-primary-bright)} .att .nm{font-family:var(--font-disp);font-weight:600;font-size:13.5px;color:var(--c-text-bright)} .att .ro{font-size:11px;color:var(--c-text-muted)} .att .lk{margin-left:auto;font-size:11px;color:var(--c-primary-bright);white-space:nowrap;border:1px solid var(--c-primary-abyss);border-radius:2px;padding:4px 9px} .att .you{margin-left:auto;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-text-muted)} /* ── rows (meetings / timeline) ────────────────────────────────────────── */ .row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:13px 15px;margin-bottom:9px} .row .d{font-size:11px;color:var(--c-primary-bright);line-height:1.3}.row .d .yr{color:var(--c-text-muted)} .row .t{font-family:var(--font-disp);font-weight:600;font-size:14.5px;color:var(--c-text-bright)} .row .t .sub{display:block;font-family:var(--font-mono);font-weight:400;font-size:11px;color:var(--c-text-muted);margin-top:2px} .row .s{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-primary)} .row.past .t{color:var(--c-text-secondary)}.row.past .d,.row.past .s{color:var(--c-text-muted)} /* ── cards (artifacts / projects) ──────────────────────────────────────── */ .card{padding:15px 16px;margin-bottom:11px;overflow:hidden} .card .ttl{font-family:var(--font-disp);font-weight:600;font-size:14px;color:var(--c-text-bright)} .card .ml{font-size:11px;color:var(--c-text-muted);margin-top:2px} .card .go{font-size:11px;color:var(--c-primary-bright);margin-top:11px;display:inline-flex;gap:5px} .cardhead{display:flex;justify-content:space-between;align-items:start} .chip{font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:2px;border:1px solid var(--c-border-2);color:var(--c-text-secondary)} .chip.go-c{color:var(--c-primary-bright);border-color:var(--c-primary-abyss)} .chip.warn{color:var(--c-warning);border-color:#3a2f1c} .chip.dgr{color:var(--c-red-bright);border-color:var(--c-red-abyss)} .chip.done{color:var(--c-text-muted)} /* ── action items ──────────────────────────────────────────────────────── */ .act{display:flex;align-items:flex-start;gap:11px;padding:10px 2px;border-bottom:1px solid var(--c-border)} .act:last-child{border-bottom:0} .abox{flex:none;width:15px;height:15px;border:1.5px solid var(--c-border-2);border-radius:3px;margin-top:1px} .act.done .abox{background:var(--c-primary-abyss);border-color:var(--c-primary-deep);position:relative} .act.done .abox::after{content:"✓";position:absolute;inset:0;font-size:11px;color:var(--c-primary-bright);text-align:center;line-height:13px} .act .lab{font-size:var(--fs-read);color:var(--c-text-primary);line-height:1.45} .act.done .lab{color:var(--c-text-muted);text-decoration:line-through} .act .due{font-size:10.5px;color:var(--c-text-muted);margin-left:auto;white-space:nowrap} .act .due.warn{color:var(--c-warning)} .act .due.dgr{color:var(--c-red-bright)} /* ── layout helpers / footer ───────────────────────────────────────────── */ .band{display:grid;grid-template-columns:1fr 320px;gap:18px;margin-bottom:24px} .cols{display:grid;grid-template-columns:1fr 320px;gap:22px} .foot{margin-top:34px;font-size:11px;color:var(--c-text-muted);border-top:1px solid var(--c-border);padding-top:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px} /* ── responsive ────────────────────────────────────────────────────────── */ @media(max-width:860px){.band,.cols{grid-template-columns:1fr}.hero{grid-template-columns:1fr;gap:18px} .count{text-align:left}.count .units{justify-content:flex-start}.count .digits{font-size:44px}} @media(max-width:480px){.wrap{padding:22px 16px 70px}.hero h1{font-size:25px}.count .digits{font-size:36px} .count .units span{width:36px}.count .units{gap:16px}.row{grid-template-columns:54px 1fr;gap:10px} .row .s{grid-column:2;justify-self:start;margin-top:2px}} /* ── reduced motion → static edge, no energize, no pulse/blink ─────────── */ @media(prefers-reduced-motion:reduce){ .edge::before,.edge--live:hover::before,.btn::before,.btn:hover::before,.danger::before{filter:var(--edge-static)} .btn:hover::after,.btn:focus-visible::after{inset:0} .live i,.caret{animation:none}} /* ── print → flatten warp + halftone, WHITE ground (the white-fill ban is SCREEN-only; PDF is print material — operator standing rule) ──────────── */ @media print{ .edge::before,.edge--past::before,.edge--avatar::before,.danger::before,.btn::before,.av::before{filter:none} .edge::before,.btn::before{background:#fff;background-image:none;border-color:#c6d3da} .edge::after,.ht{display:none} .danger{box-shadow:inset 0 0 0 1.5px #b45309} html,body{background:#fff;color:#0c1d26}} /* ═══════════════════════════════════════════════════════════════════════════ v3.3.0 — PIPELINE COMPONENTS (forms · notice · narrow-auth · slots) The transactional families. Same edge/halftone/contrast grammar, same tokens. ═══════════════════════════════════════════════════════════════════════════ */ /* ── NARROW — centered single-column surface (login / callback / check-email / 404 / 503). Caps narrow + vertically centers; pairs with .authcard. ───────── */ .wrap--narrow{max-width:460px;min-height:100vh;display:flex;flex-direction:column; justify-content:center;margin:0 auto;padding:40px 22px} .authcard{padding:32px 30px} .authcard h1{font-family:var(--font-disp);font-weight:600;font-size:24px;line-height:1.1; letter-spacing:var(--tracking-disp);color:var(--c-text-bright);margin:14px 0 6px} .authcard .sub{font-size:var(--fs-read);color:var(--c-text-secondary);margin:0 0 24px;line-height:1.55} .authcard .alt{margin-top:22px;padding-top:18px;border-top:1px solid var(--c-border); font-size:var(--fs-detail);color:var(--c-text-muted);text-align:center;line-height:1.6} .authcard .alt a{color:var(--c-primary-bright)} /* ── FORMS — every field is a procedural-edge container; the rides transparent ABOVE the warped frame (replaced elements can't host ::before). focus-within energizes the edge (#edgeHot) — same grammar as .edge--live. ─── */ .field{display:block;margin-bottom:16px} .field>.flab{display:block;font-family:var(--font-mono);font-size:var(--fs-label); letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--c-primary);margin:0 0 7px} .inp{display:block;position:relative;isolation:isolate;border-radius:var(--radius)} .inp>input,.inp>textarea,.inp>select{position:relative;z-index:1;width:100%;display:block; background:transparent;border:0;outline:none;color:var(--c-text-bright); font-family:var(--font-mono);font-size:var(--fs-body);line-height:1.4;padding:12px 14px;border-radius:var(--radius)} .inp>textarea{resize:vertical;min-height:84px} .inp>input::placeholder,.inp>textarea::placeholder{color:var(--c-text-muted)} /* controls do NOT warp (warp discipline) — crisp border; focus tints + rings (no warp). The ONLY in-field warp is .err — a deliberate CALLOUT, the sanctioned exception. */ .inp::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--c-bg-raised-2); border:1px solid var(--c-border-2);border-radius:var(--radius);transition:border-color var(--t-fast)} .inp:focus-within{outline:var(--focus-ring);outline-offset:1px;border-radius:var(--radius)} .inp:focus-within::before{border-color:var(--c-primary)} .inp.err::before{border-color:var(--c-red-deep);filter:var(--edge-danger)} /* callout warp */ .field .hint{font-size:var(--fs-detail);color:var(--c-text-muted);margin:6px 0 0;line-height:1.5} .field .hint.err{color:var(--c-red-bright)} /* ── NOTICE — inline state banner (check-email / error / expiry). Composes .edge; pole by intent — ok = default blue-structure .edge, err = add .danger, info = add .edge--inv. The dot carries the semantic color. ───────────────── */ .notice{padding:14px 16px;display:flex;gap:12px;align-items:flex-start;margin-bottom:18px} .notice .ni{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c-primary-bright);margin-top:7px} .notice.danger .ni{background:var(--c-red-bright)} .notice.edge--inv .ni{background:var(--c-accent)} .notice .nt{font-size:var(--fs-read);color:var(--c-text-primary);line-height:1.5} .notice .nt b{font-family:var(--font-disp);font-weight:600;color:var(--c-text-bright);display:block;margin-bottom:2px} /* ── SLOTS — selectable time-slot grid (reschedule picker). Each slot is a quiet edge; selected rides the blue-structure pole (red ground / blue dots) + a bracket weight bump. Toggle via [aria-pressed]. ──────────────────────────── */ .daygroup{margin-bottom:18px} .daygroup>.dh{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tracking-caps); text-transform:uppercase;color:var(--c-text-muted);margin:0 0 9px} .slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin:0 0 4px} .slot{padding:11px 13px;cursor:pointer;text-align:left;border:0;background:transparent;width:100%;font:inherit} .slot .sd{display:block;font-family:var(--font-mono);font-size:11px;color:var(--c-primary-bright);letter-spacing:.04em} .slot .st{display:block;font-family:var(--font-disp);font-weight:600;font-size:15px;color:var(--c-text-bright); margin-top:3px;font-variant-numeric:tabular-nums} .slot{ /* slots are controls — crisp, never warp (selection shows by pole + weight) */ } .slot::before{filter:none} .slot[aria-pressed="true"]{--edge-ground:var(--c-fill-red);--edge-stroke:var(--c-primary-deep);--ht-dot:var(--ht-blue)} .slot[aria-pressed="true"]::before{border-width:1.5px;border-radius:var(--radius-max)} /* ── v3.4 OTP — segmented one-time-code entry (Supabase email OTP for clients / event attendees — passwordless). Crisp boxes (controls don't warp); focus tints to primary; .err tints red. The flow is: email → emailed 6-digit code → verify. */ .otp{display:flex;gap:8px;margin:2px 0 18px;flex-wrap:wrap} .otp input{width:46px;height:54px;padding:0;text-align:center;font-family:var(--font-mono);font-size:22px;font-weight:500; color:var(--c-text-bright);background:var(--c-bg-raised-2);border:1px solid var(--c-border-2);border-radius:var(--radius); outline:none;font-variant-numeric:tabular-nums;transition:border-color var(--t-fast);-webkit-appearance:none;appearance:none} .otp input:focus{border-color:var(--c-primary)} .otp.err input{border-color:var(--c-red-deep)} @media(max-width:420px){.otp input{width:40px;height:48px;font-size:19px}} /* ── v3.4 WARP DISCIPLINE — edgewarp is a sparingly-used attention HIGHLIGHT, applied once: to a primary container, OR to a deliberate callout. A warped container does NOT warp its nested edges (no double-warp) — they go crisp. The sanctioned in- container warps are CALLOUTS (.danger notice, .inp.err field). Opt back in for a deliberate featured nested surface with .edge--callout. ──────────────────────── */ .edge .edge::before{filter:none} /* nested = crisp (no double-warp) */ .edge .edge--callout::before{filter:var(--edge)} /* explicit opt-in: a featured nested highlight */ .edge .danger::before{filter:var(--edge-danger)} /* danger callout re-warps even nested */ .edge .inp.err::before{filter:var(--edge-danger)} /* error field callout re-warps even nested */ /* ── v3.3/3.4 reduced-motion → flatten the callout warps (match specificity of the nested re-warp rules so they win) ──────────────────────────────────────────── */ @media(prefers-reduced-motion:reduce){ .inp.err::before,.edge .danger::before,.edge .inp.err::before{filter:var(--edge-static)}} /* ── v3.3/3.4 print → flatten input + callout edges, white ground (PDF is print) ── */ @media print{ .inp::before{filter:none;background:#fff;background-image:none;border-color:#c6d3da} .edge .danger::before,.edge .inp.err::before,.otp input{filter:none} .otp input{background:#fff;border-color:#c6d3da} .wrap--narrow{min-height:auto}}