/* ============================================================================ TARA — S44 Phase 5 patch · route N/A (cross-view PRESS layer, D4c). SKIN: TERMINAL PRO. Loads after skin-terminal-views.css + all Phase 3b/4 patches. SCOPE DECISION (documented per D4c): the press layer must reach nav links and the burger, which live OUTSIDE #main — so this file's scope oath is html[data-ui="terminal"] plus an explicit allowed-region list: · #main (all views — tokens --tv-* declared here, Phase 3a §0 :34-70) · #modalBg (modals — same token block :34-70) · #sidebar (nav links + theme switch — shell tokens --tsh-* inherit from html[data-ui="terminal"], skin-terminal-shell.css:13-25) · #navToggle (burger, direct child of , app.js:3486-3488 — position:fixed (styles.css:417) so a scale press cannot shift any layout; --tsh-* tokens inherit from html) #gate is NOT touched — Phase-1 owns it (skin-terminal-shell.css:7-8 oath), and this file honors that ownership. #toast is not clickable — untouched. INTENT (owner demand S43-D4c): the Neo-Brutal prototype's tactile key-press FEEL (06-neo-brutal.html .btn/.pop/.chip :hover lift + :active press, :35-46/:71-75) on every clickable — expressed in THIS skin's language: scale-down + brief phosphor glow ring (mirroring the shipped Phase 3a press .btn:active{transform:scale(.96)} — skin-terminal-views.css:203-204 and skin-terminal-shell.css:250). The prototype's hard shadows are NOT copied. W15 RECONCILIATION (non-negotiable): a click target never MOVES ON HOVER. Every rule in this file is :active (post-click) or :focus-visible only — ZERO new :hover declarations of any kind. Shipped transform:none pins are all left standing untouched: · #main .card:hover / .stat:hover (skin-terminal-views.css:126-127) · #modalBg .btn:hover (:199-202) · .btn:disabled (:237-238) · .hm .d:hover/:active/.sel (:762-766 — :active is PINNED here, so heatmap cells get a box-shadow-ONLY press below, no transform) · .theme-swatch:hover (:1960-1962 — hover stays pinned; :active press is allowed and added below) · aurora pins (#thList .trow .btn, .trow[data-mi] .btn:active, #pubDelSel) live in the aurora file — not this skin, nothing here touches those selectors, and no rule below puts transform on any select or on .trow inner buttons. INVENTORY EVIDENCE (my own grep of js/app.js + index.html): · .chips button — #dashRange :500, #hmRange :520, #thRange :1065, #anRange :1242, market tabs #tabOtc/#tabLive :1322, #sgTfChips :1340, #sgEngChips :1343, /generate tf+market chips :2149/:2152. The app has NO .tabs markup (grep "class=\"tabs\"" = 0 hits — tab-like controls are .chips) → no .tabs rule needed. Base already presses chips with transform:scale(.96) (styles.css:135) — motion not restated (same no-restate discipline as .btn); this layer adds the phosphor ring. · .seg button — CALL/PUT :633, WIN/LOSS/DRAW :653. Modal outcome seg :1524 renders .btn green/red — the shipped 3a .btn press owns those, so the rule below carries :not(.btn) and cannot override the verified #modalBg .btn:active scale(.96) (S47 press-verifier caught the first version doing exactly that — fixed). · .pairs button — #pairGrid :1334, /generate slot grid :2145. · .pcheck label — #ownGrid :2164. BOTH pair grids are payout-keyed re-render regions (payout stream re-draws them) → per D4c they get a box-shadow + background press ONLY, no transform, so a mid-repaint press can never smear geometry. · .spin .sb — time spinner :1348 (styled §5 :380-385). · .trow row-tap — #recent .trow[data-id] :543/:553 (openTrade), #thList .trow[data-id] :1097/:1105, .trow[data-mi] :1561/:1580 (openMySignal), #pubBody .trow[data-sid] :1895/:1989 + #sigBody :2023 (openPubSignal). Attribute selectors confine the press to genuinely clickable rows — cursor:default rows (:1651/:2340/:2688/:2781/:2849) carry none of data-id/mi/sid except leaderboard's isMe row… (leaderboard rows :1651 carry NO data-attr → excluded automatically). Rows live in polling live regions (#pubBody) → background + inset-bar press ONLY, no transform (also keeps clear of the aurora [data-mi] pin family). · .hm .d heatmap day cells — emitted :592, click-select :601-603; future .fut cells carry no data-date and are not clickable (:591, :601) → excluded with :not(.fut) (S47 press-verifier). :active transform pinned (:762-766) → box-shadow ring only. · .theme-swatch — :3036 (hover pinned :1960; :active free → press). · .hol-chip ✕ button — :3145. · nav links — #sidebar nav a, renderShell :216-231 (shell styles :97-123; hover translateX(3px) is SHIPPED shell behavior, untouched). · #navToggle burger — app.js:3486, base styles.css:417. · bare links in #main — a.muted "View All →" :517, a.op-fcard :2486. a.btn quick links (:1557/:2558-2562/:2650/:3175/:3196) already press via .btn — excluded from the bare-link rule with :not(.btn) so the momentary phosphor text-snap can never fight .btn.green/.red money semantics. Bare is inline (transform would not apply) → the press is a color + text-shadow snap; a.op-fcard is a block card-link and gets a true scale press. · checkboxes/radios — .sig-chk :16 (views header), #pubSelAll :1951ff, checklist :629, #remindChk/#remindSnd :3053/:3056 — cheap accent press (scale) — accent-color already phosphor (§4 :284-285). · text inputs / selects / textareas — §4 :252-281; #payoutRange :841 (thumb skin :869-903). :focus-visible "pop" = box-shadow ring snap (zero layout shift); slider thumb gets an :active glow, webkit pattern mirrored from the shipped :886-889 rule. EXCLUSIONS (hard, documented): · .btn family — Phase 3a already presses it (:203-204, shell :250); restating is banned. · .pill — NO .pill rules ever (S43 oath); the clickable filter-preset pills (data-fpre :2305) therefore get nothing from this layer. · #nextSigRow / #pubBody countdown-timer TEXT — not clickable, nothing here matches them (row press is on .trow[data-sid] hit-targets only, background/inset-shadow only — repaint-safe). · :disabled — stays motionless: every button/input :active rule below carries :not(:disabled); #pubDelSel:disabled + .btn:disabled pins untouched (no rule here puts transform on any select at all). · .hm .d / .pairs / .pcheck / .trow — no transform (reasons above). · #gate — Phase-1 ownership. · No display rules, no filters, no backdrop-filter, no infinite animations, no @keyframes at all — transform/box-shadow/color only (weak VM GPU). All transitions ≤ .15s or ride existing ones. REDUCED MOTION: base guards do NOT auto-cover new selectors, so every transform-bearing selector added by this file has its OWN guard in the block at the end (glow/ring feedback is static and stays — only motion is switched off). The shell's own reduce rule (skin-terminal-shell.css:272-276) already hard-pins #sidebar nav a with !important; the nav guard below is belt-and-braces on top of it. SELF-CHECK vs the 10 established HARD RULES (adapted): 1 scope oath = the four documented regions, every selector prefixed html[data-ui="terminal"]; 2 evidence line-refs above from my own grep; 3 .on/selected states stay distinct (press states are momentary, never restyle .on semantics); 4 no .pill rule; 5 every new transform has a reduced-motion off-switch; 6 no display rules / no live-region content changes; 7 no hover movement + no shipped pin undone (W15); 8 only tokens already declared in scope are consumed (--tv-* on #main/#modalBg, --tsh-* on html); 9 English header, established patch style; 10 braces balanced, no !important outside the reduce guard. ========================================================================== */ /* ---- 1 · chips (range/tf/engine/market) — ring on press; motion is base's shipped scale(.96) (styles.css:135), not restated ------------------- */ html[data-ui="terminal"] #main .chips button:active:not(:disabled){ color:var(--tv-acc); box-shadow:inset 0 0 0 1px rgba(var(--tv-acc-rgb),.55),0 0 10px rgba(var(--tv-acc-rgb),.4); } /* ---- 2 · CALL/PUT + result segmented keys — scale + phosphor ring -------- */ html[data-ui="terminal"] #main .seg button:not(.btn):active:not(:disabled), html[data-ui="terminal"] #modalBg .seg button:not(.btn):active:not(:disabled){ transform:scale(.97); box-shadow:inset 0 0 12px rgba(var(--tv-acc-rgb),.14),0 0 10px rgba(var(--tv-acc-rgb),.35); } /* ---- 3 · time-spinner keys ------------------------------------------------ */ html[data-ui="terminal"] #main .spin .sb:active:not(:disabled){ transform:scale(.94); box-shadow:inset 0 0 0 1px rgba(var(--tv-acc-rgb),.55),0 0 10px rgba(var(--tv-acc-rgb),.4); } /* ---- 4 · pair grids (payout-keyed re-render regions) — box-shadow-only press, NO transform (mid-repaint safe, W15-safe) --------------------- */ html[data-ui="terminal"] #main .pairs button:active:not(:disabled), html[data-ui="terminal"] #main .pcheck label:active{ background:rgba(var(--tv-acc-rgb),.14); box-shadow:inset 0 0 0 1px rgba(var(--tv-acc-rgb),.5),0 0 12px rgba(var(--tv-acc-rgb),.35); } /* ---- 5 · clickable rows (row-tap opens detail) — prompt-bar press: background wash + inset left caret bar, no transform ---------------- */ html[data-ui="terminal"] #main .trow[data-id]:active, html[data-ui="terminal"] #main .trow[data-mi]:active, html[data-ui="terminal"] #main .trow[data-sid]:active{ background:rgba(var(--tv-acc-rgb),.10); box-shadow:inset 2px 0 0 var(--tv-acc); } /* ---- 6 · heatmap day cells — :active transform is PINNED (:762-766, kept); press = glow ring only ---------------------------------------------- */ html[data-ui="terminal"] #main .hm .d:not(.fut):active{ box-shadow:0 0 0 1px var(--tv-acc),0 0 10px rgba(var(--tv-acc-rgb),.5); } /* ---- 7 · theme swatches — hover stays pinned (:1960); press is free ------ */ html[data-ui="terminal"] #main .theme-swatch:active{ transform:scale(.97); box-shadow:0 0 0 1px rgba(var(--tv-acc-rgb),.6),0 0 12px rgba(var(--tv-acc-rgb),.35); } /* ---- 8 · holiday-chip remove key (✕) ------------------------------------- */ html[data-ui="terminal"] #main .hol-chip button:active{ transform:scale(.88); color:var(--tv-red); text-shadow:0 0 8px rgba(var(--tv-red-rgb),.7); } /* ---- 9 · checkboxes / radios — cheap accent press ------------------------ */ html[data-ui="terminal"] #main input[type="checkbox"]:active:not(:disabled), html[data-ui="terminal"] #main input[type="radio"]:active:not(:disabled), html[data-ui="terminal"] #modalBg input[type="checkbox"]:active:not(:disabled), html[data-ui="terminal"] #modalBg input[type="radio"]:active:not(:disabled){ transform:scale(.85); } /* ---- 10 · bare links in #main (a.btn excluded — .btn press owns those); inline elements: color + glow snap only (transform N/A) ------------- */ html[data-ui="terminal"] #main a:not(.btn):active{ color:var(--tv-acc); text-shadow:0 0 8px rgba(var(--tv-acc-rgb),.55); } /* the owner-panel card-link is a block box — true key press */ html[data-ui="terminal"] #main a.op-fcard:active{ transform:scale(.99); box-shadow:0 0 0 1px rgba(var(--tv-acc-rgb),.5),0 0 12px rgba(var(--tv-acc-rgb),.3); } /* ---- 11 · sidebar nav links — press keeps the shipped hover offset so the key does not snap sideways when pressed while hovered --------------- */ html[data-ui="terminal"] #sidebar nav a:active{ transform:translateX(3px) scale(.98); text-shadow:0 0 8px rgba(var(--tsh-acc-rgb),.5); } /* ---- 12 · burger (fixed-position — scale cannot shift layout) ------------ */ html[data-ui="terminal"] #navToggle:active{ transform:scale(.92); box-shadow:var(--tsh-glow); border-color:var(--tsh-acc); } /* ---- 12b · sidebar theme switch — paint-only ring press (knob travel is app-owned, untouched); cross-skin parity (S47 press-verifier) ------- */ html[data-ui="terminal"] #sidebar .theme-switch:active{ box-shadow:var(--tsh-glow); border-color:var(--tsh-acc); } /* ---- 12c · collapsible guide headers (details.exp summary) — background dip press; cross-skin parity (S47 press-verifier) ------------------- */ html[data-ui="terminal"] #main details.exp summary:active{ background:rgba(var(--tv-acc-rgb),.10); } /* ---- 13 · form controls — :focus-visible "pop": ring snap, zero layout shift (box-shadow only; §4 inset/1px ring restated so the stack composes instead of being overwritten) ------------------------------ */ html[data-ui="terminal"] #main input:focus-visible, html[data-ui="terminal"] #main select:focus-visible, html[data-ui="terminal"] #main textarea:focus-visible, html[data-ui="terminal"] #modalBg input:focus-visible, html[data-ui="terminal"] #modalBg select:focus-visible, html[data-ui="terminal"] #modalBg textarea:focus-visible{ box-shadow:inset 0 0 16px rgba(var(--tv-acc-rgb),.12), 0 0 0 1px rgba(var(--tv-acc-rgb),.32), 0 0 0 3px rgba(var(--tv-acc-rgb),.16), 0 0 14px rgba(var(--tv-acc-rgb),.22); } /* payout slider thumb press — glow only, webkit pattern mirrors the shipped :886-889 rule (no -moz :active variant shipped → none added) */ html[data-ui="terminal"] #main #payoutRange:active::-webkit-slider-thumb{ box-shadow:0 0 0 3px rgba(var(--tv-acc-rgb),.25),0 0 14px rgba(var(--tv-acc-rgb),.75); } /* ---- reduced motion — own guard for every NEW transform above (base/shell guards do not auto-cover new selectors); static glow feedback stays -- */ @media (prefers-reduced-motion:reduce){ html[data-ui="terminal"] #main .seg button:not(.btn):active, html[data-ui="terminal"] #modalBg .seg button:not(.btn):active, html[data-ui="terminal"] #main .spin .sb:active, html[data-ui="terminal"] #main .theme-swatch:active, html[data-ui="terminal"] #main .hol-chip button:active, html[data-ui="terminal"] #main input[type="checkbox"]:active, html[data-ui="terminal"] #main input[type="radio"]:active, html[data-ui="terminal"] #modalBg input[type="checkbox"]:active, html[data-ui="terminal"] #modalBg input[type="radio"]:active, html[data-ui="terminal"] #main a.op-fcard:active, html[data-ui="terminal"] #sidebar nav a:active, html[data-ui="terminal"] #navToggle:active{transform:none!important} }