/* ============================================================ * TIDE v0.1 — 29Court design system · COMPONENTS (CSS) DRAFT * Needs tokens.css first. Plain CSS, @layer, no build step. * * Original 29Court code, except the parts marked [MIT-PORT], * whose behaviour/geometry is ported from Bencho free blocks * (slide-confirm, toast-stack, time-scrubber, one-time-code, * checklist, dynamic-island, slosh): * MIT License — Copyright (c) 2026 Lorenzo Cabra * Permission is hereby granted, free of charge, to any person * obtaining a copy of this software ... (full text in * THIRD-PARTY.md, which ships with this file). * Pro-licensed patterns (swipe deck, inline confirm, feedback bar, * pay button, access request, activity stack, AI chat input, * copy field, thinking, skeleton morph, shimmer) are clean-room * rebuilds from behaviour specs — no Bencho Pro code. * ============================================================ */ @layer c29.reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; } /* Axis lock (Rev 1, 2026-10-17): the page never scrolls sideways. Gesture components may paint past the viewport mid-flight; that travel must never become page scroll. clip (not hidden), so position:sticky keeps working; hidden is the legacy fallback. */ html, body { overflow-x: hidden; overflow-x: clip; } button, input, textarea, select { font: inherit; color: inherit; } img, svg { display: block; max-width: 100%; } dialog { padding: 0; border: 0; color: inherit; } [hidden] { display: none !important; } } /* Derived tokens are re-declared on every component root so a knob set on the component (or any ancestor) recomputes them there. */ @layer c29.tokens { :root, .tc, [data-tune] { --d1: calc(160ms / var(--speed)); --d2: calc(220ms / var(--speed)); --d3: calc(320ms / var(--speed)); --d4: calc(420ms / var(--speed)); --d5: calc(480ms / var(--speed)); --ease-give: cubic-bezier(.24, calc(1 + .5 * var(--bounce)), .38, 1); --s1:calc(4px * var(--density)); --s2:calc(8px * var(--density)); --s3:calc(12px * var(--density)); --s4:calc(16px * var(--density)); --s5:calc(20px * var(--density)); --s6:calc(24px * var(--density)); --s8:calc(32px * var(--density)); --s12:calc(48px * var(--density)); --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface)); } } @layer c29.base { html { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } body { background: var(--bg); position: relative; min-height: 100dvh; } h1, h2, h3 { font-family: var(--font-display); letter-spacing: var(--track-head); line-height: 1.15; margin: 0; text-wrap: balance; font-weight: 750; } p { margin: 0; text-wrap: pretty; } a { color: var(--accent-text); } :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; } /* FOCUS LAW (2026-10-19, Principal field defect): the ring belongs to INTERACTIVE elements only. Programmatic focus targets — dialogs, sheet/dialog containers, headings, landmarks and other tabindex="-1" waypoints that exist so focus has somewhere accessibility-correct to LAND — never paint a ring: focus there is an announcement, not a selection. (sheet() focuses its

on open; the unscoped rule above drew the sea-green box around the title on iOS. The 2026-10-17 grab-only suppression below is this law's first, too-narrow instance.) Real controls are excluded from the tabindex clause by element/role: a roving-tabindex control (c29-tabs) moves tabindex to 0 before focus lands, so no keyboard user loses a cue. */ :is(dialog, [role="dialog"], [role="alertdialog"]):focus-visible, :is(h1, h2, h3, h4, h5, h6):focus-visible, [tabindex="-1"]:not(button, a, input, select, textarea, summary, [role="button"], [role="tab"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [role="link"], [role="checkbox"], [role="radio"], [role="switch"], [role="slider"], [role="spinbutton"], [role="combobox"], [role="listbox"], [role="textbox"], [contenteditable]):focus-visible { outline: none; box-shadow: none; } /* THEME SWAP LAW (2026-10-19): while wears .c29-swapping (set by theme.set() in tide.js for the swap frames), nothing transitions — a theme change is an instant token change, never 60 staggered colour animations under a view-transition snapshot (the reported toggle jitter). Component-owned deliberate transitions resume untouched the moment the class lifts. */ html.c29-swapping *, html.c29-swapping *::before, html.c29-swapping *::after { transition: none !important; } ::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); } .tnum { font-variant-numeric: tabular-nums; } @view-transition { navigation: auto; } } @layer c29.components { /* ---------- page frame ---------- */ .t-page { max-width: 560px; margin: 0 auto; padding: calc(var(--s4) + var(--safe-t)) var(--s4) calc(var(--s12) + var(--safe-b)); } .t-sky { position: fixed; inset: 0; background: var(--glow); pointer-events: none; z-index: 0; } .t-page > * { position: relative; z-index: 1; } .t-cap { font-size: var(--fs-cap); letter-spacing: var(--track-cap); text-transform: uppercase; font-weight: 650; color: var(--ink-mute); } .t-muted { color: var(--ink-mute); } .t-small { font-size: var(--fs-sm); } .t-stack { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); } .t-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } .t-spacer { flex: 1; } .t-sim { display: inline-flex; align-items: center; gap: 4px; font: 650 11px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--warn-text); background: var(--warn-bg); padding: 4px 7px; border-radius: 99px; white-space: nowrap; } /* ---------- card / pane ---------- */ .t-card { background: var(--surface); border-radius: var(--corner); box-shadow: var(--hair); padding: var(--s5); } .t-pane { background: var(--pane); backdrop-filter: blur(var(--pane-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--pane-blur)) saturate(1.2); border-radius: var(--corner); box-shadow: 0 0 0 1px var(--pane-edge), var(--lift); background-image: var(--sheen); } /* ---------- buttons ---------- */ .t-btn { --b-bg: var(--surface); --b-ink: var(--ink); --b-edge: var(--edge); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); min-width: var(--tap); padding: 0 calc(var(--s4) + 2px); border: 0; border-radius: var(--r-pill); background: var(--b-bg); color: var(--b-ink); box-shadow: 0 0 0 1px var(--b-edge); font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; transition: transform var(--d1) var(--ease), background var(--d2) var(--ease), box-shadow var(--d2) var(--ease); -webkit-tap-highlight-color: transparent; touch-action: manipulation; white-space: nowrap; } .t-btn:hover { background: color-mix(in srgb, var(--b-bg) 92%, var(--ink)); } .t-btn:active { transform: scale(.97); } .t-btn[disabled] { opacity: .45; pointer-events: none; } .t-btn.is-accent { --b-bg: var(--accent); --b-ink: var(--on-accent); --b-edge: transparent; } .t-btn.is-money { --b-bg: var(--money); --b-ink: var(--on-money); --b-edge: transparent; } .t-btn.is-ghost { --b-bg: transparent; --b-edge: transparent; } .t-btn.is-quiet { --b-bg: var(--wash); --b-edge: transparent; } .t-btn.is-sm { min-height: 36px; padding: 0 14px; font-size: 14px; } .t-btn.is-icon { padding: 0; width: var(--tap); } .t-btn svg { width: 18px; height: 18px; flex: none; } .t-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 99px; border: 0; background: var(--wash); color: var(--ink-soft); font-size: 14px; font-weight: 550; cursor: pointer; transition: background var(--d2) var(--ease), color var(--d2) var(--ease), transform var(--d1) var(--ease); } .t-chip[aria-pressed="true"], .t-chip.is-on { background: var(--accent); color: var(--on-accent); } .t-chip:active { transform: scale(.96); } .t-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ---------- inputs ---------- */ .t-field { display: grid; gap: 6px; } .t-field label { font-size: 13px; font-weight: 600; color: var(--ink-soft); } .t-input { width: 100%; min-height: 48px; padding: 0 16px; border-radius: var(--r-md); border: 0; background: var(--raised); box-shadow: 0 0 0 1px var(--edge); font-size: 17px; color: var(--ink); transition: box-shadow var(--d2) var(--ease); } .t-input:focus { outline: none; box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent); } .t-input.is-bad { box-shadow: 0 0 0 1.5px var(--bad); animation: t-shake var(--d4) var(--ease); } /* Rev 5 (2026-10-18): plain .t-input placeholders had no themed colour and fell back to UA grey at 3.10:1 on the dark raised surface. --ink-mute is theme-aware: 5.64:1 on light raised, 4.68:1 on dark raised. opacity:1 stops engines that dim ::placeholder by default from undoing it. */ .t-input::placeholder { color: var(--ink-mute); opacity: 1; } /* Rev 7 (2026-10-18): the dark placeholder was the system's weak spot — 4.68:1 on the dark raised surface cleared the bar but sat under the 4.7 aim every other Rev 5 fix met. Pinned one step lighter in dark only (#9AABB3, ≈6.0:1 on dark raised, measured in the Rev 7 render pass), the .pg-pct pin pattern; opacity:1 rides along so engines that dim ::placeholder cannot undo it on the composer either. Light is untouched: 5.64:1 already clears the aim. */ [data-theme="dark"] .t-input::placeholder, [data-theme="dark"] c29-composer textarea::placeholder { color: #9AABB3; opacity: 1; } @keyframes t-shake { 20%{translate:-6px} 45%{translate:5px} 70%{translate:-3px} 100%{translate:0} } .t-unfold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d4) var(--ease); } .t-unfold > * { overflow: hidden; } .t-unfold.is-open { grid-template-rows: 1fr; } /* ---------- segmented / switch ---------- */ .t-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 99px; background: var(--wash); position: relative; isolation: isolate; } .t-seg button { min-height: 38px; padding: 0 14px; border: 0; background: none; border-radius: 99px; font-size: 14px; font-weight: 600; color: var(--ink-mute); cursor: pointer; transition: color var(--d2) var(--ease); white-space: nowrap; } .t-seg button[aria-pressed="true"] { color: var(--ink); } .t-seg .t-seg-thumb { position: absolute; z-index: -1; top: 3px; bottom: 3px; border-radius: 99px; background: var(--raised); box-shadow: var(--lift); transition: left var(--d3) var(--ease-give), width var(--d3) var(--ease-give); } .t-switch { appearance: none; width: 50px; height: 30px; border-radius: 99px; background: var(--wash-2); position: relative; cursor: pointer; flex: none; margin: 7px 0; transition: background var(--d2) var(--ease); } .t-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: translate var(--d3) var(--ease-give); } .t-switch:checked { background: var(--accent); } .t-switch:checked::after { translate: 20px 0; } /* ---------- theme toggle ---------- */ .t-theme { position: relative; overflow: hidden; } .t-theme .sun, .t-theme .moon { position: absolute; transition: transform var(--d4) var(--ease-give), opacity var(--d2) var(--ease); } [data-theme="dark"] .t-theme .sun { transform: translateY(26px) rotate(60deg); opacity: 0; } :root:not([data-theme="dark"]) .t-theme .moon { transform: translateY(-26px) rotate(-40deg); opacity: 0; } /* ====================================================== SWIPE DECK (clean-room, spec: swipe-deck) ====================================================== */ c29-deck { display: block; position: relative; --deck-h: 360px; --fan: 1; outline: none; --deck-on-sun: #3b2a12; } /* on-sun word colour (deck-pass, measured): light #3b2a12 on sun-300 is 8.85:1; on the dark theme's deeper sun (#C08442) it drops to 4.34:1, so the night beach deepens the word to the same brown family (5.8:1). */ [data-theme="dark"] c29-deck { --deck-on-sun: #1d1406; } c29-deck .deck-stage { position: relative; height: var(--deck-h); touch-action: none; user-select: none; -webkit-user-select: none; } c29-deck .deck-card { position: absolute; inset: 0; border-radius: var(--corner); background: var(--sheen), var(--raised); box-shadow: var(--lift); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); overflow: hidden; will-change: transform; transition: transform var(--d5) var(--ease-give), opacity var(--d3) var(--ease), box-shadow var(--d3) var(--ease); cursor: grab; } c29-deck .deck-card.is-held { transition: none; cursor: grabbing; box-shadow: var(--lift-hi); } /* while a drag runs, the whole stack is JS-posed every move (the anticipation rise) — CSS transitions would lag the hand. */ c29-deck .deck-stage.is-dragging .deck-card { transition: none; } c29-deck .deck-card.is-gone { pointer-events: none; } c29-deck .deck-card:not(.is-top) { pointer-events: none; } c29-deck .deck-card:not(.is-top) > :not(.deck-tint) { opacity: .0; transition: opacity var(--d3) var(--ease); } c29-deck .deck-card.is-top > * { opacity: 1; } c29-deck .deck-tint { position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit; } /* The ONE indicator: a full-stage layer clipped (per move, in JS) to exactly the strip the dragged card has vacated on the trailing edge — it never overlays card content. Its colour is NOT in this stylesheet: the gesture machine paints background-color + the word's colour inline on every move from the drag scalar p (soft suggestion tint → fully saturated at p = 1, melting across hues on a sector change). Any CSS colour or transition here would reintroduce the snap the Slide-Cards campaign exists to kill. */ c29-deck .deck-reveal { position: absolute; inset: 0; z-index: 60; pointer-events: none; opacity: 0; clip-path: inset(0 100% 0 0); } c29-deck .deck-reveal.is-on { opacity: 1; } c29-deck .deck-reveal-in { position: absolute; display: flex; align-items: center; gap: 6px; color: var(--ink); } c29-deck .deck-reveal[data-dir="right"] .deck-reveal-in { left: 16px; top: 50%; translate: 0 -50%; flex-direction: column; text-align: center; } c29-deck .deck-reveal[data-dir="left"] .deck-reveal-in { right: 16px; top: 50%; translate: 0 -50%; flex-direction: column; text-align: center; } c29-deck .deck-reveal[data-dir="down"] .deck-reveal-in { top: 14px; left: 50%; translate: -50% 0; } c29-deck .deck-reveal[data-dir="up"] .deck-reveal-in { bottom: 14px; left: 50%; translate: -50% 0; } c29-deck .deck-reveal-ic { display: grid; place-items: center; will-change: transform; } c29-deck .deck-reveal-ic .t-icon { width: 26px; height: 26px; } c29-deck .deck-reveal-word { font: 800 15px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; } c29-deck .deck-reveal-sub { font-size: 11px; font-weight: 650; letter-spacing: .04em; opacity: .75; white-space: nowrap; } c29-deck .deck-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--s6); border-radius: var(--corner); box-shadow: inset 0 0 0 1.5px var(--edge); border: 0; color: var(--ink-mute); opacity: 0; transition: opacity var(--d4) var(--ease) var(--d2); } c29-deck[data-empty] .deck-empty { opacity: 1; } c29-deck .deck-bar { display: grid; grid-template-columns: repeat(var(--deck-actions, 4), 1fr); gap: var(--s2); margin-top: calc(var(--s4) + 28px); } c29-deck .deck-bar button { min-height: 56px; border: 0; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--hair); cursor: pointer; display: grid; place-items: center; gap: 2px; padding: 6px 2px; font-size: 12px; font-weight: 600; color: var(--ink-soft); transition: transform var(--d1) var(--ease), background var(--d2) var(--ease); } c29-deck .deck-bar button:active { transform: scale(.95); } c29-deck .deck-bar button[data-primary="true"] { background: var(--act-c, var(--accent)); color: var(--act-on, var(--on-accent)); box-shadow: none; } c29-deck .deck-bar .t-icon { width: 20px; height: 20px; } /* the direction chip: a little badge riding the button's icon, tinted with the action's own colour — the button row teaches the gesture. Decorative (aria-hidden in the markup); the direction is named in the button's accessible label. */ c29-deck .deck-btn-ic { position: relative; display: grid; place-items: center; } c29-deck .deck-arrow { position: absolute; top: -7px; right: -12px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 99px; background: color-mix(in srgb, var(--act-c, var(--ink)) 18%, var(--surface)); color: color-mix(in srgb, var(--act-c, var(--ink)) 72%, var(--ink)); font-size: 10px; font-weight: 800; line-height: 15px; text-align: center; box-shadow: var(--hair); pointer-events: none; } c29-deck .deck-bar button[data-primary="true"] .deck-arrow { background: color-mix(in srgb, var(--act-on, var(--on-accent)) 22%, transparent); color: var(--act-on, var(--on-accent)); box-shadow: none; } c29-deck .deck-hint { margin-top: var(--s2); text-align: center; font-size: 12px; color: var(--ink-mute); } c29-deck .deck-count { position: absolute; top: -12px; right: 12px; z-index: 50; } /* item anatomy (used in deck + inbox) */ .t-item-kind { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); } .t-item-kind i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .t-item-kind i.money { background: var(--money); } .t-item-kind i.warn { background: var(--sun-500); } .t-item-title { font: 750 var(--fs-xl)/1.2 var(--font-display); letter-spacing: var(--track-head); } .t-item-body { color: var(--ink-soft); font-size: 15px; } .t-item-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-mute); } .t-amount { font: 750 var(--fs-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .t-tag { white-space: nowrap; display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 99px; background: var(--wash); font-size: 12px; font-weight: 600; color: var(--ink-soft); } .t-tag.is-accent { background: var(--accent-soft); color: var(--accent-text); } .t-tag.is-money { background: color-mix(in srgb, var(--money) 14%, var(--surface)); color: var(--money-text); } /* status tones (2026-10-19, Desk composition rebuild) — the designed ok / warn / bad token pairs; text rides on its paired soft ground */ .t-tag.is-ok { background: var(--ok-bg); color: var(--ok-text); } .t-tag.is-warn { background: var(--warn-bg); color: var(--warn-text); } .t-tag.is-bad { background: var(--bad-bg); color: var(--bad-text); } /* ====================================================== SLIDE TO CONFIRM [MIT-PORT slide-confirm] The handle follows the finger 1:1; only the end of the track commits; on commit the handle unfurls leftward and fills the track (right edge pinned), arrow becomes check. ====================================================== */ c29-slide { --h: 60px; --pad: 4px; display: block; } c29-slide .sl-track { position: relative; height: var(--h); border-radius: min(var(--corner), calc(var(--h) / 2)); background: var(--wash); box-shadow: inset 0 0 0 1px var(--edge-soft); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; transition: scale var(--d3) var(--ease); } c29-slide .sl-wash { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--sl-c, var(--accent)) 22%, transparent), transparent); opacity: 0; } c29-slide .sl-label { position: absolute; inset: 0; display: grid; place-items: center; padding-left: calc(var(--h) + 4px); padding-right: 16px; font-weight: 650; font-size: 15px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } c29-slide .sl-label span { background: linear-gradient(90deg, var(--ink-soft) 0 40%, var(--ink-mute) 50%, var(--ink-soft) 60%) 0 0/250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: t-sweep var(--shimmer-period) linear infinite; } c29-slide .sl-grip { position: absolute; top: var(--pad); left: var(--pad); height: calc(var(--h) - 2 * var(--pad)); width: calc(var(--h) - 2 * var(--pad)); border-radius: max(0px, calc(min(var(--corner), calc(var(--h) / 2)) - var(--pad))); background: var(--sl-c, var(--accent)); color: var(--on-accent); display: flex; align-items: center; justify-content: flex-end; padding-right: calc((var(--h) - 2 * var(--pad) - 22px) / 2); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--sl-c, var(--accent)) 60%, transparent); cursor: grab; border: 0; } c29-slide .sl-grip:focus-visible { box-shadow: var(--focus); } c29-slide .sl-grip svg { width: 22px; height: 22px; transition: opacity var(--d2) var(--ease), transform var(--d3) var(--ease-give); } c29-slide .sl-grip .ok { position: absolute; right: calc((var(--h) - 2 * var(--pad) - 22px) / 2); opacity: 0; transform: scale(.4); } c29-slide .sl-grip .ok path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--d4) var(--ease) var(--d2); } c29-slide .sl-done { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: var(--on-accent); font-weight: 700; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity var(--d3) var(--ease) var(--d3); } c29-slide[data-state="done"] .sl-grip .go { opacity: 0; transform: translateX(8px); } c29-slide[data-state="done"] .sl-grip .ok { opacity: 1; transform: none; } c29-slide[data-state="done"] .sl-grip .ok path { stroke-dashoffset: 0; } c29-slide[data-state="done"] .sl-done { opacity: 1; } c29-slide[data-state="done"] .sl-label { opacity: 0; } c29-slide[tone="money"] { --sl-c: var(--money); } c29-slide[tone="money"] .sl-done, c29-slide[tone="money"] .sl-grip { color: var(--on-money); } @keyframes t-sweep { from { background-position: 100% 0; } to { background-position: -150% 0; } } /* ====================================================== TOASTS [MIT-PORT toast-stack: every place is its depth] ====================================================== */ c29-toasts { position: fixed; z-index: 90; left: 50%; bottom: calc(16px + var(--safe-b)); width: min(420px, calc(100vw - 24px)); translate: -50% 0; height: 0; pointer-events: none; } c29-toasts .toast { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 8px 8px 16px; border-radius: min(var(--corner), 22px); overflow: hidden; background: var(--pane-strong); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 0 0 1px var(--pane-edge), var(--lift-hi); transform-origin: 50% 100%; transition: transform var(--d5) var(--ease-give), opacity var(--d3) var(--ease); } c29-toasts .toast .tx { flex: 1; min-width: 0; font-size: 15px; font-weight: 550; line-height: 1.3; } c29-toasts .toast .tx small { display: block; font-weight: 450; color: var(--ink-mute); font-size: 13px; } c29-toasts .toast .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent); color: var(--on-accent); } c29-toasts .toast .dot svg { width: 15px; height: 15px; } c29-toasts .toast[data-tone="neutral"] .dot { background: var(--ink); color: var(--bg); } c29-toasts .toast[data-tone="sun"] .dot { background: var(--sun-300); color: #3b2a12; } c29-toasts .toast[data-tone="bad"] .dot { background: var(--bad); color: var(--on-bad); } c29-toasts .toast .drain { position: absolute; left: 0; bottom: 0; height: 2.5px; width: 100%; background: var(--accent); transform-origin: 0 50%; opacity: .7; } c29-toasts .toast .t-btn { min-height: 40px; } c29-toasts:hover .toast, c29-toasts:focus-within .toast { transition-duration: var(--d4); } /* ====================================================== BOTTOM SHEET wraps native ====================================================== */ dialog.t-sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: min(560px, 100%); max-width: 100%; max-height: min(88dvh, 760px); border-radius: calc(var(--corner) + 6px) calc(var(--corner) + 6px) 0 0; background: var(--raised); box-shadow: var(--lift-hi); padding: 0 var(--s5) calc(var(--s6) + var(--safe-b)); overflow: auto; overscroll-behavior: contain; transform: translateY(100%); transition: transform var(--d5) var(--ease-sheet), display var(--d5) allow-discrete, overlay var(--d5) allow-discrete; } dialog.t-sheet[open] { transform: translateY(0); } @starting-style { dialog.t-sheet[open] { transform: translateY(100%); } } dialog.t-sheet::backdrop { background: color-mix(in srgb, #0b1622 34%, transparent); backdrop-filter: blur(2px); opacity: 0; transition: opacity var(--d4) var(--ease), display var(--d4) allow-discrete, overlay var(--d4) allow-discrete; } dialog.t-sheet[open]::backdrop { opacity: 1; } @starting-style { dialog.t-sheet[open]::backdrop { opacity: 0; } } dialog.t-sheet.is-held { transition: none; } .t-sheet .grab { display: block; margin: 0 auto; width: 100%; height: 28px; border: 0; background: var(--raised); cursor: grab; touch-action: none; position: sticky; top: 0; z-index: 2; } /* The grab strip is a pointer affordance, not a focus destination. showModal's initial focus lands on it (first focusable element in the sheet) and the global :focus-visible ring painted a sea-green outline around the full-width strip — the "green border" defect (Rev 1, 2026-10-17). Sheet focus lives on the dialog itself (tide.js sheet()). The grab also paints the sheet's own background so content scrolling beneath the sticky strip no longer ghosts through it. */ .t-sheet .grab:focus-visible { box-shadow: none; border-radius: 0; } .t-sheet .grab::before { content: ""; display: block; margin: 10px auto 0; width: 40px; height: 5px; border-radius: 99px; background: var(--grab-pill); } .t-sheet h2 { font-size: var(--fs-xl); margin-bottom: var(--s2); } .t-sheet .sheet-body { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); } /* ====================================================== SNOOZE presets + [MIT-PORT time-scrubber] ruler ====================================================== */ c29-snooze { display: grid; gap: var(--s4); } c29-snooze .sz-presets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); } c29-snooze .sz-presets button { min-height: 64px; border: 0; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--hair); text-align: left; padding: 10px 14px; cursor: pointer; display: grid; gap: 2px; transition: background var(--d2) var(--ease), box-shadow var(--d2) var(--ease), transform var(--d1) var(--ease); } c29-snooze .sz-presets button b { font-size: 15px; font-weight: 650; } c29-snooze .sz-presets button span { font-size: 13px; color: var(--ink-mute); } c29-snooze .sz-presets button[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); } /* Rev 5 (2026-10-18): the selected preset sits on the --accent-soft tint, where the sublabel's --ink-mute fell to 3.99:1 in dark. On the tint the sublabel steps up one ink level: --ink-soft measures 6.71:1 on the dark tint and stays clear on the light tint too. Unselected presets keep --ink-mute on --surface, which passes in both themes. */ c29-snooze .sz-presets button[aria-pressed="true"] span { color: var(--ink-soft); } c29-snooze .sz-presets button:active { transform: scale(.97); } c29-snooze .sz-read { text-align: center; } c29-snooze .sz-time { font: 750 var(--fs-3xl)/1.1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } c29-snooze .sz-day { font-size: 14px; color: var(--ink-mute); } c29-snooze .sz-ruler { position: relative; height: 64px; border-radius: var(--r-md); background: var(--sunken); overflow: hidden; touch-action: none; cursor: ew-resize; -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); } c29-snooze .sz-ruler:focus-visible { box-shadow: var(--focus); } c29-snooze .sz-ticks { position: absolute; inset: 0; } c29-snooze .sz-ticks i { position: absolute; bottom: 14px; width: 2px; border-radius: 2px; background: var(--ink); translate: -1px 0; } c29-snooze .sz-ticks em { position: absolute; bottom: 0; font: 600 10px/1 var(--font-ui); font-style: normal; color: var(--ink-mute); translate: -50% 0; white-space: nowrap; } c29-snooze .sz-mark { position: absolute; left: 50%; top: 6px; bottom: 10px; width: 3px; translate: -1.5px 0; border-radius: 3px; background: var(--accent); } /* ====================================================== COMPOSER (clean-room, spec: ai-chat-input) pill → box on one springy curve; radius never changes ====================================================== */ c29-composer { display: block; --c-h: 52px; --c-open: 120px; } c29-composer .cp-box { position: relative; min-height: var(--c-h); height: var(--c-h); border-radius: 26px; background: var(--raised); box-shadow: 0 0 0 1px var(--edge), var(--lift); transition: height var(--d4) var(--ease-give), box-shadow var(--d3) var(--ease); overflow: hidden; display: flex; flex-direction: column; } c29-composer.is-open textarea { padding-bottom: 48px; } c29-composer.is-open .cp-box { height: var(--c-open); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent), var(--lift-hi); } c29-composer textarea { flex: 1; width: 100%; resize: none; border: 0; background: none; outline: none; padding: 14px 56px 12px 20px; font-size: 16px; line-height: 1.45; color: var(--ink); min-height: 0; } c29-composer:not(.is-open) textarea { white-space: nowrap; overflow: hidden; } c29-composer textarea::placeholder { color: var(--ink-mute); } c29-composer .cp-tools { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 0 12px 10px; opacity: 0; transform: translateY(6px); transition: opacity var(--d2) var(--ease), transform var(--d3) var(--ease); pointer-events: none; overflow-x: auto; scrollbar-width: none; margin-right: 54px; } c29-composer.is-open .cp-tools { opacity: 1; transform: none; pointer-events: auto; transition-delay: var(--d1); } c29-composer .cp-tools .t-chip { min-height: 32px; padding: 0 12px; font-size: 13px; flex: none; } c29-composer .cp-send { position: absolute; right: 6px; bottom: 6px; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: transparent; color: var(--ink-mute); transition: background var(--d3) var(--ease), color var(--d3) var(--ease), transform var(--d1) var(--ease); } c29-composer .cp-send svg { position: absolute; width: 20px; height: 20px; transition: opacity var(--d2) var(--ease), transform var(--d3) var(--ease-give); } c29-composer .cp-send .send { opacity: 0; transform: translateY(8px) scale(.6); } c29-composer.has-text .cp-send { background: var(--ink); color: var(--bg); } c29-composer.has-text .cp-send .mic { opacity: 0; transform: scale(.6); } c29-composer.has-text .cp-send .send { opacity: 1; transform: none; } c29-composer.is-sent .cp-send { transform: translateY(-4px) scale(.92); } c29-composer .cp-ctx { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; color: var(--ink-mute); min-height: 20px; } c29-composer .cp-ctx:empty { display: none; } /* ---------- voice (D3 variant: absorbs c29-voicebar) ---------- The voice strip lives inside the box, above the tools: state word, ONE level meter painted from the single host-set value, and the interim words as plain visible text. Nothing types itself; text appears only when the host's recognizer reports it, and final text lands in the textarea (see tide.js). */ c29-composer .cp-voice { display: flex; align-items: center; gap: 8px; margin: 0 64px 0 12px; padding: 8px 12px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); font-size: 13.5px; position: relative; z-index: 1; } c29-composer .cp-voice[hidden] { display: none; } c29-composer.is-open .cp-voice { margin-bottom: 44px; } c29-composer .cp-voice-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } c29-composer[data-voice="listening"] .cp-voice-dot { animation: cp-pulse 1.2s var(--ease) infinite; } @keyframes cp-pulse { 50% { opacity: .35; } } html[data-motion="reduced"] c29-composer[data-voice="listening"] .cp-voice-dot { animation: none; } c29-composer .cp-voice-lab { font-weight: 650; flex: none; } c29-composer .cp-voice-meter { flex: none; width: 56px; height: 6px; border-radius: 99px; background: var(--wash-2); overflow: hidden; } c29-composer .cp-voice-meter i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width var(--d1) linear; } c29-composer .cp-voice-live { flex: 1; min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } c29-composer .cp-voice-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; } c29-composer .cp-voice-x .t-icon { width: 15px; height: 15px; } c29-composer[data-voice="error"] .cp-voice { background: var(--bad-bg); color: var(--bad-text); } c29-composer[data-voice="error"] .cp-voice-dot { background: var(--bad); animation: none; } c29-composer[data-voice="error"] .cp-voice-lab { font-weight: 600; } c29-composer[data-voice="transcribing"] .cp-voice-dot { background: var(--ink-mute); animation: none; } c29-composer .cp-send .stopic { opacity: 0; transform: scale(.6); } c29-composer[data-voice="listening"] .cp-send, c29-composer[data-voice="transcribing"] .cp-send { background: var(--bad); color: var(--on-bad); } c29-composer[data-voice="listening"] .cp-send .mic, c29-composer[data-voice="transcribing"] .cp-send .mic, c29-composer[data-voice="listening"] .cp-send .send, c29-composer[data-voice="transcribing"] .cp-send .send { opacity: 0; } c29-composer[data-voice="listening"] .cp-send .stopic, c29-composer[data-voice="transcribing"] .cp-send .stopic { opacity: 1; transform: none; } c29-composer .cp-tools .cp-dictate .t-icon { width: 15px; height: 15px; } /* ====================================================== FEEDBACK BAR (clean-room, spec: feedback-bar) one bar changing shape; width eases to measured content ====================================================== */ c29-feedback { display: inline-block; max-width: 100%; } c29-feedback .fb { display: inline-flex; align-items: center; overflow: hidden; border-radius: 26px; background: var(--surface); box-shadow: var(--hair); min-height: 52px; transition: width var(--d4) var(--ease), height var(--d4) var(--ease); max-width: 100%; } c29-feedback .fb-in { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 16px; flex-wrap: wrap; animation: t-in var(--d3) var(--ease) both; } c29-feedback .fb-in > span { font-size: 15px; font-weight: 550; margin-right: 4px; } c29-feedback .fb-thumb { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink-soft); transition: background var(--d2) var(--ease), transform var(--d3) var(--ease-give); } c29-feedback .fb-thumb:hover { background: var(--wash); } c29-feedback .fb-thumb.is-on { background: var(--accent); color: var(--on-accent); animation: t-pop var(--d4) var(--ease-give); } c29-feedback .fb-thumb.is-shake { background: var(--ink); color: var(--bg); animation: t-shake var(--d4) var(--ease); } c29-feedback .fb-reasons { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px; width: 100%; } @keyframes t-in { from { opacity: 0; filter: blur(4px); transform: translateY(4px); } } @keyframes t-pop { 40% { transform: scale(1.18); } } /* ====================================================== DECISION INBOX (clean-room, specs: activity-stack + access-request) stacked by depth; press opens into the list; rows approve/dismiss ====================================================== */ c29-inbox { display: block; --peek: 10px; } c29-inbox .ib-pile { position: relative; display: block; width: 100%; border: 0; padding: 0; background: none; text-align: left; cursor: pointer; color: inherit; height: calc(92px + 2 * var(--peek)); transition: height var(--d4) var(--ease); } c29-inbox .ib-card { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; border-radius: var(--corner); background: var(--raised); box-shadow: var(--lift); padding: 14px 16px; display: flex; gap: 12px; align-items: center; transform-origin: 50% 0; transition: transform var(--d5) var(--ease-give), opacity var(--d4) var(--ease); } c29-inbox .ib-card .ib-av { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); } c29-inbox .ib-card .ib-av.money { background: color-mix(in srgb, var(--money) 14%, var(--surface)); color: var(--money); } c29-inbox .ib-card .ib-t { min-width: 0; flex: 1; } c29-inbox .ib-card .ib-t b { display: block; font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } c29-inbox .ib-card .ib-t span { display: block; font-size: 13px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } c29-inbox .ib-badge { position: absolute; z-index: 9; top: -6px; right: 10px; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 99px; background: var(--money); color: var(--on-money); font: 700 13px/26px var(--font-ui); text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px var(--bg); transition: transform var(--d3) var(--ease-give); } c29-inbox .ib-badge.bump { transform: scale(1.25); } c29-inbox.is-open .ib-pile { height: 64px; } c29-inbox .ib-card.ib-fold { height: 64px; background: var(--accent-soft); box-shadow: var(--hair); } c29-inbox .ib-list { display: grid; gap: 8px; margin-top: var(--s3); } c29-inbox .ib-row { display: grid; grid-template-columns: 40px 1fr; gap: 6px 12px; align-items: center; padding: 12px 12px 12px 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--hair); transition: opacity var(--d3) var(--ease), transform var(--d4) var(--ease), grid-template-rows var(--d4) var(--ease); } c29-inbox .ib-row .ib-av { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } c29-inbox .ib-row .ib-av.money { background: color-mix(in srgb, var(--money) 14%, var(--surface)); color: var(--money); } c29-inbox .ib-row .ib-t b { display: block; font-size: 15px; font-weight: 650; } c29-inbox .ib-row .ib-t span { display: block; font-size: 13px; color: var(--ink-mute); } c29-inbox .ib-row .ib-acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } c29-inbox .ib-row.is-out { opacity: 0; transform: translateX(40px) scale(.98); } c29-inbox .ib-row.is-out-l { opacity: 0; transform: translateX(-40px) scale(.98); } c29-inbox .ib-empty { text-align: center; padding: var(--s6); color: var(--ink-mute); border-radius: var(--corner); box-shadow: inset 0 0 0 1.5px var(--edge); } /* ====================================================== ROW LIST + STAR (2026-10-19, Desk composition rebuild — rows that open; interiors are composed by the host from t-* primitives) ====================================================== */ c29-list { display: grid; gap: var(--s2); list-style: none; } /* Row chrome + bullet suppression are PURE CSS on the
  • itself — never a side effect of the JS-added .ls-row class. Post-mortem 2026-10-19 (Desk iOS render failure): a fresh page paired with a stale cached tide.js (no c29-list definition) left rows un-adopted, and every protection the component had rode on adoption — native bullets rendered and the row interior fell back to inline flow. Canon law from that day: a component's layout must hold with its JS dead. .ls-row stays as the adoption marker for compat. */ c29-list > li { list-style: none; margin: 0; padding: 0; } c29-list > li::marker { content: none; } c29-list > li, c29-list .ls-row { display: flex; align-items: stretch; background: var(--surface); border-radius: var(--corner); box-shadow: var(--hair); overflow: hidden; } c29-list [data-open] { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; align-content: center; text-align: left; padding: var(--s3) var(--s4); font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; } c29-list [data-open]:active { background: var(--wash); } c29-list .ls-row > c29-star { align-self: center; margin-right: var(--s2); } c29-list .ls-empty { text-align: center; padding: var(--s6); color: var(--ink-mute); border-radius: var(--corner); box-shadow: inset 0 0 0 1.5px var(--edge); } c29-star { display: inline-flex; flex: none; } c29-star .st-btn { width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink-mute); cursor: pointer; transition: color var(--d2) var(--ease), background var(--d2) var(--ease), transform var(--d1) var(--ease); } c29-star .st-btn:hover { background: var(--wash); } c29-star .st-btn:active { transform: scale(.92); } c29-star .st-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; } c29-star[pressed] .st-btn { color: var(--29d-amber-600); } c29-star[pressed] .st-btn svg { fill: currentColor; } /* ====================================================== BUY (clean-room, spec: pay-button) — one shape the whole way ====================================================== */ c29-buy { display: block; } c29-buy .by { position: relative; display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 100%; height: 56px; border: 0; border-radius: 28px; background: var(--money); color: var(--on-money); font-weight: 700; font-size: 16px; cursor: pointer; overflow: hidden; transition: width var(--d4) var(--ease-sheet), background var(--d3) var(--ease), transform var(--d1) var(--ease); } c29-buy .by:active { transform: scale(.98); } c29-buy .by-l { display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: opacity var(--d2) var(--ease), filter var(--d2) var(--ease); } c29-buy .by-l svg { width: 16px; height: 16px; } c29-buy .by-price { font-variant-numeric: tabular-nums; padding-left: 8px; margin-left: 2px; border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent); } c29-buy .by-track { position: absolute; left: 22px; right: 22px; top: 50%; height: 3px; translate: 0 -50%; border-radius: 3px; background: color-mix(in srgb, currentColor 25%, transparent); opacity: 0; overflow: hidden; } c29-buy .by-track::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 3px; background: currentColor; translate: -100% 0; } c29-buy .by-ok { position: absolute; display: flex; align-items: center; gap: 8px; opacity: 0; white-space: nowrap; } c29-buy .by-ok path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--d4) var(--ease) var(--d3); } c29-buy[data-state="processing"] .by { width: 128px; } c29-buy[data-state="processing"] .by-l { opacity: 0; filter: blur(3px); } c29-buy[data-state="processing"] .by-track { opacity: 1; transition: opacity var(--d2) var(--ease) var(--d3); } c29-buy[data-state="processing"] .by-track::after { animation: t-run calc(1100ms / var(--speed)) var(--ease) infinite; } c29-buy[data-state="success"] .by { background: var(--ok); color: var(--on-ok); } c29-buy[data-state="success"] .by-l { opacity: 0; } c29-buy[data-state="success"] .by-ok { opacity: 1; transition: opacity var(--d3) var(--ease) var(--d3); } c29-buy[data-state="success"] .by-ok path { stroke-dashoffset: 0; } c29-buy .by-meta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--ink-mute); flex-wrap: wrap; text-align: center; } c29-buy .by-receipt { margin-top: 10px; } @keyframes t-run { to { translate: 260% 0; } } /* ====================================================== UPGRADE / RESET / LAPSED ====================================================== */ c29-upgrade { display: grid; position: relative; border-radius: var(--corner); overflow: hidden; box-shadow: var(--hair); background: var(--surface); } c29-upgrade .up-preview, c29-upgrade .up-gate { grid-area: 1 / 1; } c29-upgrade .up-preview { padding: var(--s5); filter: blur(5px) saturate(.8); opacity: .55; pointer-events: none; user-select: none; } c29-upgrade[data-unlocked] .up-preview { filter: none; opacity: 1; pointer-events: auto; transition: filter var(--d5) var(--ease), opacity var(--d5) var(--ease); } c29-upgrade .up-gate { display: grid; place-items: center; padding: var(--s4); transition: opacity var(--d3) var(--ease); } c29-upgrade[data-unlocked] .up-gate { opacity: 0; pointer-events: none; } c29-upgrade .up-card { max-width: 320px; width: 100%; text-align: center; display: grid; gap: 10px; justify-items: center; padding: var(--s5); } c29-upgrade .up-card .t-pane { padding: 0; } c29-upgrade .up-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--sun-100); color: #8a5a17; } [data-theme="dark"] c29-upgrade .up-ic { background: #3a2a14; color: var(--sun-300); } c29-upgrade h3 { font-size: var(--fs-lg); } c29-upgrade p { font-size: 14px; color: var(--ink-soft); } /* ====================================================== ACCOUNT ====================================================== */ c29-account { display: inline-block; position: relative; flex: none; } c29-account > .t-btn { padding: 0 14px; } c29-account .ac-av { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; padding: 3px; background: conic-gradient(from 200deg, var(--sea-300), var(--sun-300), var(--sea-300)); } c29-account .ac-av span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--raised); font-weight: 750; font-size: 15px; color: var(--ink); } c29-account [popover] { position: fixed; inset: auto; margin: 0; border: 0; padding: 8px; min-width: 240px; border-radius: 18px; background: var(--pane-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 0 0 1px var(--pane-edge), var(--lift-hi); color: var(--ink); opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: 100% 0; transition: opacity var(--d2) var(--ease), transform var(--d3) var(--ease-give), display var(--d3) allow-discrete, overlay var(--d3) allow-discrete; } c29-account [popover]:popover-open { opacity: 1; transform: none; } @starting-style { c29-account [popover]:popover-open { opacity: 0; transform: translateY(-6px) scale(.97); } } c29-account .ac-who { padding: 10px 12px 12px; border-bottom: 1px solid var(--edge-soft); margin-bottom: 6px; } c29-account .ac-who b { display: block; font-size: 15px; } c29-account .ac-who span { font-size: 13px; color: var(--ink-mute); } c29-account .ac-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: none; cursor: pointer; font-size: 15px; text-align: left; color: var(--ink); } c29-account .ac-item:hover { background: var(--wash); } .c29-if-member, .c29-if-anon { display: contents; } html[data-session="anon"] .c29-if-member, html:not([data-session="anon"]) .c29-if-anon { display: none; } /* ====================================================== ONE-TIME CODE [MIT-PORT one-time-code: one real input under six drawn cells] ====================================================== */ c29-otp { display: block; position: relative; max-width: 360px; } c29-otp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 17px; letter-spacing: 2em; caret-color: transparent; border: 0; z-index: 2; } c29-otp .otp-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } c29-otp .otp-cells i { height: 58px; border-radius: 14px; background: var(--raised); box-shadow: 0 0 0 1px var(--edge); display: grid; place-items: center; font: 700 24px/1 var(--font-display); font-style: normal; font-variant-numeric: tabular-nums; transition: box-shadow var(--d2) var(--ease), transform var(--d3) var(--ease-give), border-radius var(--d4) var(--ease), background var(--d3) var(--ease); } c29-otp .otp-cells i.is-cur { box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 15%, transparent); } c29-otp .otp-cells i.is-cur::after { content: ""; width: 2px; height: 24px; background: var(--accent); animation: t-blink 1s steps(1) infinite; } c29-otp .otp-cells i.pop { transform: scale(1.08); } c29-otp[data-state="ok"] .otp-cells { gap: 0; transition: gap var(--d4) var(--ease); } c29-otp[data-state="ok"] .otp-cells i { border-radius: 0; background: var(--accent-soft); box-shadow: none; color: var(--accent-text); } c29-otp[data-state="ok"] .otp-cells i:first-child { border-radius: 14px 0 0 14px; } c29-otp[data-state="ok"] .otp-cells i:last-child { border-radius: 0 14px 14px 0; } c29-otp[data-state="bad"] .otp-cells { animation: t-shake var(--d4) var(--ease); } c29-otp[data-state="bad"] .otp-cells i { box-shadow: 0 0 0 1.5px var(--bad); } @keyframes t-blink { 50% { opacity: 0; } } /* ====================================================== COPY FIELD (clean-room, spec: copy-field) ====================================================== */ c29-copy { min-width: 0; display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 4px 4px 4px 16px; border-radius: var(--r-md); background: var(--sunken); box-shadow: inset 0 0 0 1px var(--edge-soft); max-width: 100%; } c29-copy code { flex: 1; min-width: 0; font: 500 14px/1.3 var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; background: linear-gradient(90deg, var(--ink) 0 40%, var(--accent) 50%, var(--ink) 60%) 100% 0/250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } c29-copy.is-copied code { animation: t-sweep calc(700ms / var(--speed)) var(--ease) 1 both; } c29-copy button { position: relative; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--raised); box-shadow: var(--hair); cursor: pointer; display: grid; place-items: center; flex: none; color: var(--ink-soft); } c29-copy button svg { position: absolute; width: 18px; height: 18px; transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease); } c29-copy button .pg-b { transform: translate(2px, -2px); } c29-copy button .ok { opacity: 0; color: var(--accent); } c29-copy button .ok path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--d3) var(--ease) var(--d2); } c29-copy.is-copied .pg-b { transform: none; opacity: 0; } c29-copy.is-copied .pg-f { opacity: 0; transition-delay: var(--d1); } c29-copy.is-copied .ok { opacity: 1; transition-delay: var(--d1); } c29-copy.is-copied .ok path { stroke-dashoffset: 0; } /* ====================================================== CONNECT ====================================================== */ c29-connect { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--hair); position: relative; overflow: hidden; } c29-connect .cn-logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--sunken); font-weight: 800; font-size: 16px; color: var(--ink-soft); } c29-connect .cn-t b { display: block; font-size: 15px; font-weight: 650; } c29-connect .cn-t span { display: block; font-size: 13px; color: var(--ink-mute); min-height: 18px; } c29-connect .cn-bar { position: absolute; left: 0; bottom: 0; height: 2.5px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d5) var(--ease); } c29-connect[data-state="syncing"] .cn-bar { transform: scaleX(.7); transition-duration: calc(1400ms / var(--speed)); } c29-connect[data-state="on"] .cn-bar { transform: scaleX(1); opacity: 0; transition: transform var(--d3) var(--ease), opacity var(--d4) var(--ease) var(--d3); } c29-connect[data-state="on"] .cn-logo { background: var(--accent-soft); color: var(--accent); } /* ---------- recover / reset prompt ---------- */ c29-recover { display: block; } /* ====================================================== SKELETON / SHIMMER (clean-room, specs: skeleton-morph, shimmer-text) ====================================================== */ .t-skel { position: relative; overflow: hidden; border-radius: 10px; background: var(--sunken); min-height: 14px; } .t-skel::after { content: ""; position: absolute; inset: 0; translate: -100% 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sun-100) 55%, transparent), transparent); animation: t-wave calc(var(--shimmer-period) / var(--speed)) var(--ease) infinite; } [data-theme="dark"] .t-skel::after { background: linear-gradient(90deg, transparent, rgba(220,240,255,.06), transparent); } @keyframes t-wave { 60%, 100% { translate: 100% 0; } } .t-shimmer { background: linear-gradient(90deg, var(--ink-mute) 0 35%, var(--ink) 50%, var(--ink-mute) 65%) 0 0/250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: t-sweep calc(var(--shimmer-period) / var(--speed)) linear infinite; } .t-morph > * { animation: t-rise var(--d5) var(--ease) both; } .t-morph > *:nth-child(2) { animation-delay: calc(80ms / var(--speed)); } .t-morph > *:nth-child(3) { animation-delay: calc(160ms / var(--speed)); } .t-morph > *:nth-child(4) { animation-delay: calc(240ms / var(--speed)); } @keyframes t-rise { from { opacity: 0; transform: translateY(8px); filter: blur(5px); } } /* ====================================================== TRACE / TIMELINE (clean-room, spec: thinking) + [MIT-PORT step-player dots] ====================================================== */ c29-trace { display: block; } c29-trace .tr-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font-size: 15px; font-weight: 650; color: var(--ink); } c29-trace .tr-head svg { transition: transform var(--d3) var(--ease); } c29-trace[data-folded] .tr-head svg.chev { transform: rotate(-90deg); } c29-trace .tr-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--d5) var(--ease); } c29-trace[data-folded] .tr-body { grid-template-rows: 0fr; } c29-trace .tr-body > ol { overflow: hidden; margin: 0; padding: 0; list-style: none; } c29-trace li { position: relative; padding: 0 0 18px 34px; animation: t-rise var(--d4) var(--ease) both; } c29-trace li::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: -2px; width: 2px; border-radius: 2px; background: var(--edge); } c29-trace li:last-child::before { display: none; } c29-trace li .dot { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--raised); box-shadow: inset 0 0 0 2px var(--accent); } c29-trace li[data-s="done"] .dot { background: var(--accent); box-shadow: none; } c29-trace li[data-s="done"] .dot::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid var(--on-accent); border-width: 0 2px 2px 0; rotate: 45deg; } c29-trace li[data-s="run"] .dot { animation: t-breathe 1.6s var(--ease) infinite; } c29-trace li[data-s="wait"] .dot { box-shadow: inset 0 0 0 2px var(--sun-500); background: var(--sun-100); } c29-trace li b { display: block; font-size: 15px; font-weight: 600; } c29-trace li span { display: block; font-size: 13px; color: var(--ink-mute); } c29-trace li .tr-acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } c29-trace li .tr-note { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 14px; color: var(--ink-soft); animation: t-rise var(--d4) var(--ease) both; } @keyframes t-breathe { 50% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); } } /* ---------- checklist [MIT-PORT checklist: box fills, tick draws, words strike] ---------- */ .t-check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 15px; } .t-check input { appearance: none; width: 24px; height: 24px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--edge); margin: 0; flex: none; display: grid; place-items: center; cursor: pointer; transition: background var(--d2) var(--ease), box-shadow var(--d2) var(--ease); } .t-check input::after { content: ""; width: 6px; height: 11px; border: solid var(--on-accent); border-width: 0 2.2px 2.2px 0; rotate: 45deg; translate: 0 -1px; scale: 0; transition: scale var(--d3) var(--ease-give); } .t-check input:checked { background: var(--accent); box-shadow: none; } .t-check input:checked::after { scale: 1; } .t-check span { background: linear-gradient(currentColor, currentColor) 0 55%/0% 1.5px no-repeat; transition: background-size var(--d4) var(--ease), color var(--d3) var(--ease); } .t-check input:checked + span { background-size: 100% 1.5px; color: var(--ink-mute); } /* ---------- tune panel ---------- */ .t-tune { display: grid; gap: var(--s4); } .t-tune .tn-row { display: grid; grid-template-columns: 76px 1fr 46px; align-items: center; gap: 10px; font-size: 14px; } .t-tune .tn-row output { font-variant-numeric: tabular-nums; color: var(--ink-mute); text-align: right; font-size: 13px; } .t-tune input[type=range] { width: 100%; accent-color: var(--accent); height: 44px; margin: 0; } .t-tune .tn-sw { display: flex; gap: 8px; flex-wrap: wrap; } .t-tune .tn-sw button { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); } .t-tune .tn-sw button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); } /* ---------- TASTE WAVE 1 (2026-10-19) ---------- */ /* ============================================================ * LANE A / A1 — c29-showcode + c29-countdown CSS FRAGMENT * Integration: paste inside the @layer c29.components block of * tide.css (the fragment ships wrapped in that layer so it also * loads standalone after tide.css in the lane harness). * Tokens only — no colour literals anywhere in this file. * ============================================================ */ /* ---------- SHOWCODE ---------- */ c29-showcode { display: grid; gap: var(--s2); justify-items: center; text-align: center; min-width: 0; } c29-showcode .sc-label { display: block; } c29-showcode .sc-code { font: 800 clamp(30px, 11vw, 44px)/1.15 var(--font-display); letter-spacing: .14em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; max-width: 100%; padding: 0 var(--s2); } c29-showcode .sc-code:focus-visible { box-shadow: var(--focus); border-radius: 8px; outline: none; } c29-showcode .sc-url, c29-showcode .sc-urltext { font: 500 var(--fs-sm)/1.4 var(--font-mono); color: var(--accent-text); overflow-wrap: anywhere; max-width: 100%; } c29-showcode .sc-urltext { color: var(--ink-mute); } c29-showcode .sc-expiry { display: flex; justify-content: center; } c29-showcode .sc-actions { display: grid; gap: var(--s2); justify-items: center; margin-top: var(--s1); } c29-showcode .sc-copy { min-width: 168px; } c29-showcode .sc-copy[disabled] { opacity: .45; pointer-events: none; } /* The status line is ALWAYS in the layout (min-height) so an answer never shifts the page — and failure is a sentence in --bad-text, not a colour alone. */ c29-showcode .sc-status { min-height: 22px; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); max-width: 34ch; } c29-showcode[data-state="copied"] .sc-status { color: var(--ok-text); } c29-showcode[data-state="copy-failed"] .sc-status { color: var(--bad-text); } c29-showcode[data-state="empty"] .sc-code { color: var(--ink-faint); } c29-showcode[data-state="empty"] .sc-status { color: var(--ink-mute); font-weight: 550; } /* ---------- COUNTDOWN ---------- */ c29-countdown { display: inline-flex; align-items: baseline; gap: var(--s2); font-variant-numeric: tabular-nums; } c29-countdown .cd-label { font-size: var(--fs-sm); color: var(--ink-mute); font-weight: 550; } c29-countdown .cd-num { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); min-width: 5ch; } c29-countdown[data-state="expired"] .cd-num { color: var(--bad-text); } c29-countdown[data-state="expired"] .cd-label { color: var(--bad-text); font-weight: 650; } c29-countdown[data-state="unset"] .cd-num { color: var(--ink-faint); } c29-countdown[data-state="paused"] .cd-num { color: var(--ink-mute); } /* ============================================================ * LANE A / A3 — c29-log CSS FRAGMENT * Integration: paste inside the @layer c29.components block of * tide.css. TOKENS ONLY: this file contains no hex / rgb / hsl * colour literal of any kind — grep it. The sunken pair * (--sunken background, --ink text) resolves per theme from * tokens.css, so a dark-on-light rendering cannot be written. * ============================================================ */ c29-log { display: block; min-width: 0; } c29-log .lg-lines { list-style: none; margin: 0; padding: var(--s3) var(--s4); background: var(--sunken); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge-soft); border-radius: calc(var(--corner) - 6px); font: 500 13px/1.65 var(--font-mono); max-height: 264px; overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; word-break: break-word; } c29-log .lg-line { padding: 1px 0 1px var(--s3); border-left: 2px solid transparent; min-width: 0; } /* Tones are a border + a token text colour — never colour alone: the tone word is the line's own text, written by the host. */ c29-log .lg-line[data-tone="ok"] { border-left-color: var(--ok); } c29-log .lg-line[data-tone="warn"] { border-left-color: var(--warn); } c29-log .lg-line[data-tone="bad"] { border-left-color: var(--bad); color: var(--bad-text); } c29-log .lg-empty { padding: var(--s4); text-align: center; background: var(--sunken); color: var(--ink-mute); box-shadow: inset 0 0 0 1px var(--edge-soft); border-radius: calc(var(--corner) - 6px); font-size: var(--fs-sm); } /* ============================================================ * LANE A / A4 — c29-steps finish-parity CSS FRAGMENT * The variant reuses the canon .wv-steps-* rules UNCHANGED. * The only addition: the latched finished state reads as * settled, not merely done — the status line takes the ok * token and the advance button (disabled by the latch) keeps * its label legible. Tokens only. * Integration: append inside @layer c29.components in tide.css, * after the canon c29-steps block. * ============================================================ */ c29-steps[data-state="finished"] .wv-steps-status { color: var(--ok-text); } c29-steps[data-state="finished"] .wv-steps-ctl .t-btn[data-act="advance"][disabled] { opacity: .75; } /* ============================================================ * FIELD (Taste Fleet Wave 1, Lane B — B1) * Label + control + hint + error composed in place, as ONE * pattern. The host supplies the control (input / textarea / * select) and the words; the component owns the wiring: * label-for, aria-describedby (hint + error), aria-invalid, * and an error that is kind and specific — a soft bad-bg line * with an icon and the host's exact words, never a bare red * shout and never a shake. Tokens only; works Tide-only and * loaded the bridge way (ds-tide-bridge.css order), both themes. * Integration: append inside @layer c29.components in tide.css. * ============================================================ */ c29-field { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); text-align: left; } c29-field .fld-label { font-size: 13px; font-weight: 650; color: var(--ink-soft); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } c29-field .fld-req { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); } c29-field .fld-opt { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); } /* The control: the .t-input picture, owned here so a plain host composes without extra classes. */ c29-field :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { width: 100%; min-height: 48px; padding: 0 16px; border-radius: var(--r-md); border: 0; background: var(--raised); box-shadow: 0 0 0 1px var(--edge); font-size: 17px; color: var(--ink); transition: box-shadow var(--d2) var(--ease); } c29-field textarea { min-height: 96px; padding: 12px 16px; line-height: 1.45; resize: vertical; } c29-field select { appearance: none; } c29-field :is(input, textarea, select):focus { outline: none; box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent); } c29-field :is(input, textarea, select)::placeholder { color: var(--ink-mute); opacity: 1; } [data-theme="dark"] c29-field :is(input, textarea, select)::placeholder { color: #9AABB3; opacity: 1; } c29-field .fld-hint { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-mute); overflow-wrap: anywhere; } c29-field .fld-hint:empty { display: none; } /* Error: specific words on the soft bad ground, bad-text ink (the AA token pair), an icon so colour is never the only signal. No shake, no all-caps, no exclamation styling. */ c29-field .fld-error { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.45; color: var(--bad-text); background: var(--bad-bg); border-radius: var(--r-md); padding: var(--s2) var(--s3); overflow-wrap: anywhere; } c29-field .fld-error[hidden] { display: none; } c29-field .fld-error .t-icon { width: 17px; height: 17px; flex: none; margin-top: 1px; } c29-field[data-state="error"] :is(input, textarea, select) { box-shadow: 0 0 0 1.5px var(--bad); } c29-field[data-state="error"] :is(input, textarea, select):focus { box-shadow: 0 0 0 1.5px var(--bad), 0 0 0 5px color-mix(in srgb, var(--bad) 16%, transparent); } c29-field[data-state="ok"] .fld-ok { display: flex; } c29-field .fld-ok { display: none; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.45; color: var(--ok-text); } c29-field .fld-ok .t-icon { width: 17px; height: 17px; flex: none; margin-top: 1px; } c29-field[data-disabled] { opacity: .55; } c29-field[data-disabled] :is(input, textarea, select) { pointer-events: none; } /* Honeypot: present in the form, absent from every human sense — off-screen and clipped, NOT display:none (the house intake's bot trap; see the showcase composition). */ c29-field[honeypot] { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; } /* ============================================================ * OFFER (Taste Fleet Wave 1, Lane B — B2) * One calm card: what it is, what it costs, what happens * next, one CTA. The component renders price STRUCTURES the * host passes in the price slot (.of-price-row / .of-amount / * .of-per / .of-arrow / .of-note) — pilot→ongoing and * install+monthly are both just two rows — and it never * hardcodes, parses, or restyles a number off-token: figures * ride the display face, tabular, in --ink; the money colour * appears once, on the CTA the host supplies. * Integration: append inside @layer c29.components in tide.css. * ============================================================ */ c29-offer { display: grid; gap: var(--s3); align-content: start; grid-template-columns: minmax(0, 1fr); background: var(--surface); border-radius: var(--corner); box-shadow: var(--hair); padding: var(--s5); text-align: left; } c29-offer .of-head { display: grid; gap: var(--s1); } c29-offer .of-kicker { font-size: var(--fs-cap); letter-spacing: var(--track-cap); text-transform: uppercase; font-weight: 650; color: var(--ink-mute); } c29-offer .of-name { font-family: var(--font-display); font-weight: 750; font-size: var(--fs-xl); letter-spacing: var(--track-head); line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; } c29-offer .of-tagrow { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; } c29-offer .of-what { color: var(--ink-soft); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; } c29-offer .of-what:empty { display: none; } c29-offer .of-price { display: grid; gap: var(--s2); padding: var(--s3) 0; border-top: 1px solid var(--edge-soft); border-bottom: 1px solid var(--edge-soft); } c29-offer .of-price:empty { display: none; } c29-offer .of-price-row { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; } c29-offer .of-amount { font: 750 var(--fs-2xl)/1.05 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; } c29-offer .of-amount.is-small { font-size: var(--fs-xl); } c29-offer .of-per { font-size: var(--fs-sm); color: var(--ink-mute); overflow-wrap: anywhere; } c29-offer .of-arrow { color: var(--ink-mute); font-weight: 650; } c29-offer .of-note { font-size: var(--fs-sm); color: var(--ink-mute); line-height: 1.45; overflow-wrap: anywhere; flex-basis: 100%; } c29-offer .of-next { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; } c29-offer .of-next:empty { display: none; } c29-offer .of-next b { font-weight: 650; color: var(--ink); } c29-offer .of-cta { margin-top: auto; padding-top: var(--s2); display: grid; } c29-offer .of-cta .t-btn { width: 100%; } c29-offer[data-cta-extra] .of-cta-extra-note { font-size: var(--fs-cap); color: var(--warn-text); } /* ============================================================ * FAQ (Taste Fleet Wave 1, Lane B — B3) * Questions open like a drawer, not a performance: the panel * travels its MEASURED height on the house curve (--ease, * --d3 / --speed via JS) and is instant under the motion * gate. The closed state is the considered state — hairline * rows, a quiet chevron, generous tap rows — in both themes. * Real