/* * Unveal — warm-paper theme layer over Pico CSS v2. * * Palette + type are single-sourced from the iOS app's design tokens, vendored as * tokens.css (generated from ../the-randomizer-app/design/tokens.json) and loaded * BEFORE this file. The --tr-* names below alias those --color-* / --font-* vars where * a true equivalent exists; component classes and the Pico remap keep referring to * --tr-*, so the rest of the file is untouched. This file (a) re-points Pico's CSS * variables at those tokens and (b) adds a small set of component classes the * templates use. Pico still owns resets, form controls, focus rings, accessibility. * * A few tokens stay LITERAL on purpose (no app equivalent, or a different value that * would change the rendered design): --tr-slate, --tr-mono, and the --tr-radius-* * ramp (the app's --radius-* values differ). See docs/ui-module.md for the refresh * step and the drift guard (scripts/check-tokens-css.sh). * * Pages render so Pico's automatic dark scheme never * fights these overrides. */ /* ── Design tokens ────────────────────────────────────────────────────────── */ :root { /* Colors alias 1:1 onto the vendored app tokens (verified byte-identical). */ --tr-bg: var(--color-bg); /* warm off-white, app background */ --tr-bg-alt: var(--color-bg-alt); /* slightly darker band */ --tr-surface: var(--color-surface); /* cards / list rows */ --tr-surface-alt: var(--color-surface-alt); --tr-ink: var(--color-ink); /* primary text */ --tr-ink-2: var(--color-ink2); /* secondary text */ --tr-ink-3: var(--color-ink3); /* tertiary / muted */ --tr-ink-4: var(--color-ink4); /* borders / dividers */ --tr-accent: var(--color-accent); /* deep wine */ --tr-accent-soft: var(--color-accent-soft); /* accent backgrounds / focus ring */ --tr-accent-ink: var(--color-accent-ink); --tr-good: var(--color-good); /* live / success */ --tr-warn: var(--color-warn); /* upcoming / warning */ --tr-slate: #5A5648; /* completed / neutral — no --color-* equivalent */ --tr-sans: var(--font-sans); /* Keep Fraunces (Google Fonts) as the web stand-in for iOS "New York"; source the fallback family list from the app tokens. See docs/ui-module.md. */ --tr-serif: "Fraunces", var(--font-serif); /* Mono kept literal: the app's --font-mono order differs (SF Mono first). */ --tr-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; --tr-radius-card: 18px; --tr-radius-lg: 22px; --tr-radius-sm: 12px; --tr-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(0, 0, 0, 0.04); --tr-shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.06); } /* ── Pico variable remap (light-forced) ────────────────────────────────────── * Selector mirrors Pico's own `:root:not([data-theme=dark])` (specificity 0,2,0) * so that, loading after pico.min.css, source order makes these win. A plain * `:root` would lose to Pico's light-scheme block. */ :root:not([data-theme="dark"]) { --pico-background-color: var(--tr-bg); --pico-color: var(--tr-ink); --pico-h1-color: var(--tr-ink); --pico-h2-color: var(--tr-ink); --pico-h3-color: var(--tr-ink); --pico-h4-color: var(--tr-ink); --pico-h5-color: var(--tr-ink); --pico-h6-color: var(--tr-ink); --pico-muted-color: var(--tr-ink-3); --pico-muted-border-color: var(--tr-ink-4); --pico-primary: var(--tr-accent); --pico-primary-background: var(--tr-accent); --pico-primary-hover: var(--tr-accent-ink); --pico-primary-hover-background: var(--tr-accent-ink); --pico-primary-focus: var(--tr-accent-soft); --pico-primary-inverse: #FBF9F3; --pico-primary-underline: rgba(110, 27, 46, 0.5); --pico-card-background-color: var(--tr-surface); --pico-card-border-color: var(--tr-ink-4); --pico-card-sectioning-background-color: var(--tr-surface-alt); --pico-card-box-shadow: var(--tr-shadow-card); --pico-form-element-background-color: var(--tr-surface); --pico-form-element-border-color: var(--tr-ink-4); --pico-form-element-active-border-color: var(--tr-accent); --pico-form-element-focus-color: var(--tr-accent); --pico-secondary: var(--tr-ink-2); --pico-secondary-hover: var(--tr-ink); --pico-secondary-background: var(--tr-ink-2); --pico-secondary-inverse: #FBF9F3; --pico-font-family-sans-serif: var(--tr-sans); --pico-font-family: var(--tr-sans); --pico-border-radius: var(--tr-radius-sm); --pico-spacing: 1rem; } /* Disable Pico's auto dark scheme — we are an intentionally light, warm app. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="dark"]) { --pico-background-color: var(--tr-bg); --pico-color: var(--tr-ink); --pico-card-background-color: var(--tr-surface); --pico-form-element-background-color: var(--tr-surface); --pico-muted-color: var(--tr-ink-3); --pico-muted-border-color: var(--tr-ink-4); --pico-primary: var(--tr-accent); --pico-primary-background: var(--tr-accent); } } /* ── Base ─────────────────────────────────────────────────────────────────── */ html, body { background: var(--tr-bg); } body, body * { font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, hgroup > h1, hgroup > h2 { font-family: var(--tr-serif); font-weight: 500; letter-spacing: -0.4px; } /* Mobile-first content column: comfortable phone padding, capped on desktop. */ main.container { max-width: 640px; padding-inline: 1rem; padding-bottom: 4rem; } @media (min-width: 768px) { main.container { padding-inline: 1.5rem; } } /* ── Component classes ────────────────────────────────────────────────────── */ /* Top nav: allow links to wrap onto a second line on narrow phones. */ .tr-nav { flex-wrap: wrap; row-gap: 0.25rem; margin-bottom: 1.25rem; } .tr-nav ul { flex-wrap: wrap; align-items: center; } .tr-brand { text-decoration: none; } .tr-brand:hover { text-decoration: none; } /* Big serif page title + supporting line (HomeScreen / SessionHeader pattern). */ .tr-page-title { font-family: var(--tr-serif); font-size: clamp(1.9rem, 7vw, 2.25rem); font-weight: 500; letter-spacing: -0.8px; line-height: 1.1; color: var(--tr-ink); margin: 0.25rem 0 0.25rem; } .tr-subtitle { color: var(--tr-ink-2); font-size: 0.95rem; margin: 0 0 1rem; } /* Uppercase mono "eyebrow" label. */ .tr-eyebrow { font-family: var(--tr-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tr-ink-3); font-weight: 500; } /* Rounded surface card with soft shadow. */ .tr-card { background: var(--tr-surface); border-radius: var(--tr-radius-card); box-shadow: var(--tr-shadow-card); padding: 1.1rem 1.15rem; margin: 0 0 0.85rem; } .tr-card--lg { border-radius: var(--tr-radius-lg); padding: 1.25rem; } /* Accent (wine) hero card — light text on accent. */ .tr-card--accent { background: var(--tr-accent); color: var(--pico-primary-inverse); box-shadow: 0 8px 28px rgba(110, 27, 46, 0.28), 0 1px 2px rgba(0, 0, 0, 0.04); } .tr-card--accent .tr-eyebrow, .tr-card--accent .tr-subtitle { color: rgba(255, 255, 255, 0.78); } /* List-of-rows card: hairline dividers, no per-row margin. */ .tr-list { background: var(--tr-surface); border-radius: var(--tr-radius-card); box-shadow: var(--tr-shadow-card); overflow: hidden; margin: 0 0 0.85rem; } .tr-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; min-height: 56px; border-bottom: 0.5px solid var(--tr-ink-4); } .tr-row:last-child { border-bottom: none; } a.tr-row { color: inherit; text-decoration: none; } a.tr-row:hover { background: var(--tr-surface-alt); } .tr-row__body { flex: 1; min-width: 0; } .tr-row__title { font-size: 1rem; font-weight: 500; letter-spacing: -0.2px; color: var(--tr-ink); } .tr-row__meta { font-size: 0.8rem; color: var(--tr-ink-3); margin-top: 2px; } .tr-row__chev { color: var(--tr-ink-3); flex-shrink: 0; } /* Status badge (session lifecycle). */ .tr-badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 0.5rem; font-family: var(--tr-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: #fff; background: var(--tr-slate); } .tr-badge--live { background: var(--tr-good); } .tr-badge--upcoming { background: var(--tr-warn); } .tr-badge--completed { background: var(--tr-slate); } /* Avatar circle (initial). */ .tr-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--tr-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.9rem; flex-shrink: 0; } /* "Who's here" presence stack (lobby screen 12): horizontal, overlapping avatar row. * live-session.js repaints #tr-presence-stack with one .tr-avatar.tr-presence__avatar per * connected participant; the caller's own chip gets --me. Wraps to a second row rather than * overflowing the 375px column when a large table is connected. */ .tr-presence__stack { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0; min-height: 36px; margin-top: 0.35rem; } /* Overlap the discs slightly (app's clustered look); reset the pull-in at row starts so a * wrapped row's first avatar isn't clipped against the edge. */ .tr-presence__avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--tr-bg); } .tr-presence__stack > .tr-presence__avatar:first-child { margin-left: 0; } /* The caller's own chip: a soft accent ring so "you" reads at a glance. */ .tr-presence__avatar--me { box-shadow: 0 0 0 2px var(--tr-bg), 0 0 0 4px var(--tr-accent-soft); } /* Quiet "Connecting…" / empty placeholder before the socket paints presence. */ .tr-presence__empty { font-size: 0.85rem; } /* Brand mark: wine rounded square + serif wordmark. */ .tr-brand { display: flex; align-items: center; gap: 0.625rem; } .tr-brand__mark { width: 36px; height: 36px; border-radius: 10px; background: var(--tr-accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(110, 27, 46, 0.22); } .tr-brand__word { font-family: var(--tr-serif); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.3px; color: var(--tr-ink); } /* Row of stat tiles (Profile screen 16, Spread screen 15). */ .tr-statrow { display: flex; gap: 0.75rem; margin: 0 0 0.85rem; } /* Stat tile (Profile / Spread). */ .tr-stat { flex: 1; background: var(--tr-surface); border-radius: var(--tr-radius-card); box-shadow: var(--tr-shadow-soft); padding: 0.9rem 0.6rem; text-align: center; } /* Spread variant: larger serif numeral, left-aligned label like the receipt screen. */ .tr-stat--spread { text-align: left; padding: 1rem 1rem 0.85rem; } .tr-stat--spread .tr-stat__value { font-size: 1.9rem; line-height: 1; } .tr-stat__value { font-family: var(--tr-serif); font-size: 1.4rem; font-weight: 500; letter-spacing: -0.3px; color: var(--tr-ink); } .tr-stat__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tr-ink-3); margin-top: 2px; } /* Receipt-style chit (spread / reveal). */ .tr-chit { background: #FBF9F3; border-radius: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 16px 36px rgba(0, 0, 0, 0.08); padding: 1.25rem 1.4rem; position: relative; margin: 0 0 1rem; } /* Side notches, like a torn receipt. */ .tr-chit::before, .tr-chit::after { content: ""; position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--tr-bg); transform: translateY(-50%); } .tr-chit::before { left: -8px; } .tr-chit::after { right: -8px; } .tr-chit__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .tr-chit__pick { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 0.5px dashed var(--tr-ink-4); } .tr-chit__pick:last-child { border-bottom: none; } .tr-chit__cat { font-family: var(--tr-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tr-ink-3); width: 6.5rem; flex-shrink: 0; } .tr-chit__val { flex: 1; font-family: var(--tr-serif); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.4px; color: var(--tr-ink); } /* Section eyebrow heading above a card group. */ .tr-section-label { font-family: var(--tr-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tr-ink-3); padding: 0 0.5rem 0.5rem; margin-top: 1.5rem; } /* Pill button row (e.g. category value chips). */ .tr-chip { display: inline-block; margin: 0.15rem; padding: 0.15rem 0.6rem; border-radius: 0.6rem; font-size: 0.85rem; background: var(--tr-bg); border: 1px solid var(--tr-ink-4); color: var(--tr-ink-2); } .tr-chip--selected { background: var(--tr-accent-soft); border-color: transparent; color: var(--tr-accent-ink); font-weight: 500; } /* Centered auth shell (login, password reset, verify). */ .tr-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; box-sizing: border-box; } .tr-auth__card { width: 100%; max-width: 420px; margin: 0; background: var(--tr-surface); border-radius: var(--tr-radius-lg); box-shadow: var(--tr-shadow-card); padding: 1.75rem 1.6rem; } .tr-auth__brand { justify-content: center; margin-bottom: 1.4rem; } .tr-auth__card hgroup h1 { font-size: 1.6rem; } /* Key/value definition grid (profile). */ .tr-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1.5rem; align-items: baseline; margin: 0; } .tr-dl dt { margin: 0; color: var(--tr-ink-3); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .tr-dl dd { margin: 0; color: var(--tr-ink); } /* Feature availability rows (✓ / ✗). */ .tr-feature { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem 1.5rem; align-items: center; margin: 0; } .tr-feature dt { margin: 0; color: var(--tr-ink); } .tr-feature dd { margin: 0; font-weight: 600; } .tr-feature dd.is-on { color: var(--tr-good); } .tr-feature dd.is-off { color: var(--tr-ink-3); } /* Muted helper / empty-state text. */ .tr-muted { color: var(--tr-ink-3); } /* Back link above a page title. */ .tr-back { display: inline-block; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--tr-ink-2); } /* ── Home ritual hero (screen 04 — default/live/empty) ──────────────────── */ .tr-home { text-align: center; padding-top: 1.5rem; } /* Fanned-chit illustration: three receipt-style cards, the centre one upright. */ .tr-home__chits { position: relative; height: 150px; margin: 0 auto 2rem; width: 220px; } .tr-home__chit { position: absolute; top: 0; left: 50%; width: 88px; height: 132px; margin-left: -44px; background: var(--tr-surface); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); border: 0.5px solid var(--tr-ink-4); } .tr-home__chit--l { transform: translateX(-46px) rotate(-12deg); } .tr-home__chit--r { transform: translateX(46px) rotate(12deg); } .tr-home__chit--c { transform: translateY(-6px); z-index: 1; } .tr-home__hero { max-width: 30rem; margin: 0 auto; } .tr-home__title { font-size: 2.1rem; margin: 0.25rem 0 0.5rem; } .tr-home__actions { margin-top: 1.75rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } /* Primary pill CTA. */ .tr-home__cta { display: inline-block; background: var(--tr-accent); color: #fff; font-weight: 600; padding: 0.85rem 2.5rem; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 18px rgba(110, 27, 46, 0.25); } .tr-home__cta:hover { background: var(--tr-accent-ink); color: #fff; } /* "or open a past one" secondary action. */ .tr-home__alt { font-size: 0.95rem; color: var(--tr-ink-3); text-decoration: none; } .tr-home__alt span { color: var(--tr-accent); font-weight: 600; } .tr-home__alt:hover span { text-decoration: underline; } /* Teams strip. */ .tr-home__teams { margin-top: 3rem; } .tr-home__teamstrip { margin-top: 0.75rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; } .tr-home__team { text-decoration: none; } .tr-home__teamavatar { width: 44px; height: 44px; border-radius: 50%; background: var(--tr-surface); box-shadow: var(--tr-shadow-soft); border: 0.5px solid var(--tr-ink-4); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1; } /* Recent strip (HomeRecentSessionsView) — left-aligned within the centred hero. */ .tr-home__recent { margin-top: 3rem; text-align: left; max-width: 30rem; margin-left: auto; margin-right: auto; } .tr-home__recent-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0.25rem 0.5rem; } .tr-home__recent-all { font-size: 0.85rem; color: var(--tr-accent); font-weight: 600; text-decoration: none; } .tr-home__recent-all:hover { text-decoration: underline; } .tr-home__recent-titlerow { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .tr-home__recent-titlerow .tr-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Paper date-stamp tile: month abbrev (mono caps) over the day (serif). */ .tr-stamp { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--tr-radius-card); background: var(--tr-bg-alt); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .tr-stamp__mon { font-family: var(--tr-mono); font-size: 0.6rem; letter-spacing: 0.04em; color: var(--tr-ink-3); margin-bottom: 2px; } .tr-stamp__day { font-family: var(--tr-serif); font-size: 1.05rem; color: var(--tr-ink); } /* Muted "Ended" chip beside a completed-session title. */ .tr-endchip { flex-shrink: 0; font-family: var(--tr-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tr-ink-3); background: var(--tr-bg-alt); padding: 0.15rem 0.4rem; border-radius: var(--tr-radius-sm); } /* ── Profile hero (screen 16 — centered avatar + name + email) ──────────── */ .tr-profile-hero { text-align: center; padding: 1rem 0 0.5rem; } /* Soft accent-tinted avatar disc with serif initials. */ .tr-profile-hero__avatar { width: 96px; height: 96px; border-radius: 50%; background: var(--tr-accent-soft); color: var(--tr-accent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--tr-serif); font-weight: 500; font-size: 2rem; letter-spacing: -0.5px; margin-bottom: 1rem; } .tr-profile-hero__name { font-family: var(--tr-serif); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.4px; color: var(--tr-ink); margin: 0; } .tr-profile-hero__email { color: var(--tr-ink-3); font-size: 0.95rem; margin: 0.15rem 0 0; } /* "END OF RECEIPT · UNVEAL" footer under a spread's chits (screen 15). */ .tr-receipt-end { text-align: center; color: var(--tr-ink-3); margin: 0.5rem 0 1.5rem; } /* Receipt signature footer (spread / reveal chits). */ .tr-chit__sig { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 0.5px dashed var(--tr-ink-4); display: flex; justify-content: space-between; } /* ── Spread "Compare" view (screen 15 — ComparisonTable) ────────────────── */ /* CSS-only Spread/Compare switch: the two hidden radios at the top of .tr-spreadview drive * which body (.tr-spread / .tr-compare) is visible and which segmented label reads "active". * Defaults to Spread (the #tr-view-spread radio is `checked` in the template). */ .tr-spreadview__radio { position: absolute; opacity: 0; pointer-events: none; } /* "The chits" eyebrow on the left, the Spread/Compare segmented toggle on the right. */ .tr-spreadview__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: 1.5rem 0 0.5rem; } /* Pill-shaped segmented control (iOS prototype view switcher). */ .tr-segmented { display: inline-flex; background: var(--tr-surface-alt, var(--color-surface-alt)); border: 0.5px solid var(--tr-ink-4); border-radius: var(--radius-pill); padding: 2px; } .tr-segmented__opt { font-family: var(--tr-sans, var(--font-sans)); font-size: 0.8rem; font-weight: 500; color: var(--tr-ink-2, var(--color-ink2)); padding: 0.35rem 0.9rem; border-radius: var(--radius-pill); cursor: pointer; user-select: none; } /* Active segment: surface chip with a soft lift, the inactive one stays flat (prototype). */ #tr-view-spread:checked ~ .tr-spreadview__bar label[for="tr-view-spread"], #tr-view-compare:checked ~ .tr-spreadview__bar label[for="tr-view-compare"] { background: var(--tr-surface); color: var(--tr-ink); box-shadow: var(--tr-shadow-soft); } /* Show exactly one body based on the checked radio. */ .tr-spread, .tr-compare { display: none; } #tr-view-spread:checked ~ .tr-spread, #tr-view-compare:checked ~ .tr-compare { display: block; } /* Comparison card: one panel, a divider between category rows (prototype ComparisonTable). */ .tr-compare { background: var(--tr-surface); border-radius: var(--radius-sheet); box-shadow: var(--tr-shadow-soft); overflow: hidden; } .tr-compare__row { padding: 0.9rem 1.1rem 1rem; } .tr-compare__row + .tr-compare__row { border-top: 0.5px solid var(--tr-ink-4); } .tr-compare__cat { font-family: var(--tr-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tr-ink-3); margin-bottom: 0.6rem; } .tr-compare__cells { display: flex; flex-direction: column; gap: 0.5rem; } .tr-compare__cell { display: flex; align-items: center; gap: 0.65rem; } .tr-compare__val { flex: 1; font-family: var(--tr-serif); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.3px; color: var(--tr-ink); } /* Collision flag: a soft accent ×N chip when a value was drawn by more than one member. */ .tr-compare__match { font-family: var(--tr-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tr-accent); background: var(--tr-accent-soft); border-radius: var(--radius-pill); padding: 0.15rem 0.5rem; flex-shrink: 0; } /* Small avatar variant for the comparison cells. */ .tr-avatar--sm { width: 24px; height: 24px; font-size: 0.7rem; } /* ── Live session lobby (screen 12 — "the table") ───────────────────────── */ /* The #tr-lobby section is the lobby's receipt-style card: same surface/shadow motif as the * drawing/reveal panels below, so the lobby, draw, and reveal read as one printed strip. */ .tr-lobby { margin-top: 1.5rem; padding: 1.25rem 1.1rem; background: var(--tr-surface); border-radius: var(--tr-radius-lg); box-shadow: var(--tr-shadow-card); } /* Live drawn-count line (mono, like .tr-drawing__progress); given a quiet pulse each time * live-session.js repaints it so the count change registers. */ #tr-lobby-progress { margin: 0.75rem 0 0; font-family: var(--tr-mono); font-size: 0.85rem; animation: tr-lobby-progress-pulse 0.4s ease; } @keyframes tr-lobby-progress-pulse { 0% { opacity: 0.5; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #tr-lobby-progress { animation: none; } } /* ── Live drawing / "printing" state (screen 13) ────────────────────────── */ .tr-drawing { margin-top: 1.5rem; } .tr-drawing__press { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; padding: 1.5rem 1rem; background: var(--tr-surface); border-radius: var(--tr-radius-lg); box-shadow: var(--tr-shadow-card); } /* Spinning "press roller" that signals the draw is printing. */ .tr-drawing__roller { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--tr-ink-4); border-top-color: var(--tr-accent); animation: tr-spin 0.9s linear infinite; } @keyframes tr-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .tr-drawing__roller { animation: none; } } .tr-drawing__status { font-family: var(--tr-serif); font-size: 1.2rem; margin: 0; color: var(--tr-ink); } .tr-drawing__progress { margin: 0; font-family: var(--tr-mono); font-size: 0.85rem; } /* Per-category draw form. */ .tr-draw-form { margin-top: 1.25rem; } .tr-draw-form__cat { margin-bottom: 0.9rem; } .tr-draw-form__label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--tr-ink); margin-bottom: 0.3rem; } .tr-draw-form__pick { width: 100%; } /* ── Live reveal (screen 14 — Yours vs Everyone else) ───────────────────── */ .tr-reveal { margin-top: 1.5rem; } .tr-reveal__minebody .tr-chit--mine { border: 1px solid var(--tr-accent-soft); box-shadow: 0 2px 4px rgba(110, 27, 46, 0.12), 0 16px 36px rgba(110, 27, 46, 0.14); } .tr-reveal--done .tr-chit { animation: tr-reveal-pop 0.5s ease; } @keyframes tr-reveal-pop { 0% { transform: scale(0.98); } 50% { transform: scale(1.015); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .tr-reveal--done .tr-chit { animation: none; } } /* ── New-session category builder (preset / build / review) ─────────────── */ /* Wrapping row of chips (preset picks, list-value toggles). */ .tr-chip-row { display: flex; flex-wrap: wrap; gap: 0.15rem; margin: 0.25rem 0 0.75rem; } .tr-chip-row .tr-chip { cursor: pointer; } /* Mode/privacy settings block — label + segmented control per row. */ .tr-builder__settings { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.5rem 0 1rem; border: none; padding: 0; } .tr-builder__setting { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .tr-builder__setting-label { font-weight: 500; color: var(--tr-ink); } /* Segmented control: hide the native radio, the label is the pill. */ .tr-segmented__opt input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .tr-segmented__opt:has(input:checked) { background: var(--tr-surface); color: var(--tr-ink); box-shadow: var(--tr-shadow-soft); } /* Guest checkbox rows. */ .tr-builder__guest { display: flex; align-items: center; gap: 0.5rem; } /* A single added category card. */ .tr-builder__cat { background: var(--tr-surface); border: 0.5px solid var(--tr-ink-4); border-radius: var(--tr-radius-sm); box-shadow: var(--tr-shadow-soft); padding: 0.85rem 1rem; margin-bottom: 0.75rem; } .tr-builder__cathead { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; } .tr-builder__catname { flex: 1; margin: 0; } .tr-builder__remove { background: transparent; border: none; color: var(--tr-ink-3); font-size: 0.8rem; padding: 0.2rem 0.4rem; cursor: pointer; width: auto; } .tr-builder__catbody { margin-top: 0.25rem; } /* Inline "add an option" input + button. */ .tr-builder__inline { display: flex; gap: 0.5rem; align-items: flex-start; } .tr-builder__inline input { margin: 0; } .tr-builder__inline button { width: auto; flex-shrink: 0; } /* Range editor min/max/step/unit grid. */ .tr-builder__rangegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 0.75rem; } /* Add-custom-category buttons. */ .tr-builder__addrow { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .tr-builder__addrow button { width: auto; }