/* Tokens = the legendhaven.com Onepage kit (read off the live site 2026-09-07): charcoal #202125, Instrument Sans body, Revalia display, white pill buttons, glass chips with a 1px inset ring. Layout geometry (sidebar 320, dock 64, bubble sizes) is still the spatial.chat measure. v115: accent was #E84548 (red); Munk called for the brand gold instead — see --gold below. */ :root{ /* v53. The scales this stylesheet was already using, written down. Names say what a value is FOR, never what colour the venue is: when the palette question is answered these do not have to change. Every number here is a value that was already in the file — nothing was converged and nothing moved, which is why the render fingerprint is unchanged. */ /* Space: the 2px ladder under 482 margins, paddings and gaps. */ --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 10px; --s-6: 12px; --s-7: 14px; --s-8: 16px; --s-9: 18px; --s-10: 20px; /* Radius. --r and --pill already existed and still do. */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-2xl: 12px; --r-3xl: 14px; --r-4xl: 18px; /* How long. Three of these are the same idea at .14, .15 and .16 — see the note in PRODUCTION-PLAN §4: converging them is a decision, not a refactor. */ --t-tap: .12s; --t-base: .16s; --t-settle: .18s; --t-ease: .2s; --t-panel: .22s; --t-travel: .3s; --t-scene: .45s; /* How it moves. Six other curves in this file are near-duplicates of these three and were deliberately left alone for the same reason. */ --ease-press: cubic-bezier(.2,.8,.2,1); --ease-move: cubic-bezier(.2,.7,.3,1); --ease-arrive: cubic-bezier(.16,.84,.3,1); /* v54. Not duplicates of the three above: one runs forever and has no arrival, the other is the v33 slam and is a decision. */ --ease-loop: cubic-bezier(.5,0,.5,1); --ease-slam: cubic-bezier(.4,.1,.2,1); /* v146. A slight overshoot — the left floor rail's + growing open "pops" rather than just sliding, distinct from --ease-arrive's own gentler settle (no overshoot at all). Nothing else in the file wants a bounce, which is why this earns its own token rather than reusing one of the six above. */ --ease-pop: cubic-bezier(.34,1.56,.64,1); /* Alpha that is one idea used many times: hairlines over dark, and scrims. */ --on-dark-08: rgba(255,255,255,.08); --on-dark-10: rgba(255,255,255,.1); --on-dark-14: rgba(255,255,255,.14); --on-dark-18: rgba(255,255,255,.18); /* v167. --on-dark-* is white-over-dark by name and by value — the drawer's own rule/rail-divider and its switch/slider tracks used it unconditionally, so in light mode they were white on white paper: a rule you could not see, a slider track that vanished, a switch with no visible off-state. These two flip with the theme (redefined in the light block below); everything else in the --on-dark family stays literal white-over-dark on purpose (rings and scrims meant for the floor itself, not this fix's job). */ --rule-line: var(--on-dark-10); --ctrl-track: var(--on-dark-14); --shade-55: rgba(0,0,0,.55); --shade-60: rgba(0,0,0,.6); --shade-70: rgba(0,0,0,.7); /* white/black/ink primitives (theme-invariant) */ --white: #FFFFFF; --black: #000000; /* on-dark: white at N% over dark chrome -- extends the original --on-dark-08/10/14/18 ladder */ --on-dark-07: rgba(255,255,255,.07); --on-dark-09: rgba(255,255,255,.09); --on-dark-12: rgba(255,255,255,.12); --on-dark-13: rgba(255,255,255,.13); --on-dark-16: rgba(255,255,255,.16); --on-dark-22: rgba(255,255,255,.22); --on-dark-24: rgba(255,255,255,.24); --on-dark-35: rgba(255,255,255,.35); --on-dark-50: rgba(255,255,255,.50); --on-dark-55: rgba(255,255,255,.55); --on-dark-60: rgba(255,255,255,.60); --on-dark-85: rgba(255,255,255,.85); --on-dark-90: rgba(255,255,255,.90); --on-dark-96: rgba(255,255,255,.96); /* shade: black at N% -- extends the original --shade-55/60/70 ladder */ --shade-14: rgba(0,0,0,.14); --shade-22: rgba(0,0,0,.22); --shade-28: rgba(0,0,0,.28); --shade-30: rgba(0,0,0,.30); --shade-35: rgba(0,0,0,.35); --shade-40: rgba(0,0,0,.40); --shade-45: rgba(0,0,0,.45); --shade-50: rgba(0,0,0,.50); --shade-53: rgba(0,0,0,.53); --shade-62: rgba(0,0,0,.62); --shade-72: rgba(0,0,0,.72); --shade-75: rgba(0,0,0,.75); --shade-80: rgba(0,0,0,.80); --shade-85: rgba(0,0,0,.85); /* ink alpha (the charcoal #202125, translucent) */ --ink-a20: rgba(32,33,37,.20); --ink-a35: rgba(32,33,37,.35); --ink-a50: rgba(32,33,37,.50); --ink-a55: rgba(32,33,37,.55); --ink-a82: rgba(32,33,37,.82); /* void: near-black scrim/backdrop base #08090B, translucent */ --void: #08090B; --void-a55: rgba(8,9,11,.55); --void-a66: rgba(8,9,11,.66); --void-a72: rgba(8,9,11,.72); --void-a80: rgba(8,9,11,.8); /* deep: near-black surface base #101114 (matches the reference branch's --deep), and its alpha steps */ --deep: #101114; --deep-a72: rgba(16,17,20,.72); --deep-a82: rgba(16,17,20,.82); --deep-a84: rgba(16,17,20,.84); /* surface, translucent -- reuses the existing --surface:#17181B rather than a parallel value */ --surface-a15: rgba(23,24,27,.15); --surface-a28: rgba(23,24,27,.28); --surface-a62: rgba(23,24,27,.62); --surface-a70: rgba(23,24,27,.70); --surface-a72: rgba(23,24,27,.72); /* named, single-role colours */ --stage-bg: #2A2B30; --select-option-bg: #26272C; --dusk: #1C1A24; --note-ink: #22201A; --note-ink-strong: #151310; --mist: #F4F4F5; --ok-text: #6FCF97; --live: #3FBE6B; --live-soft: rgba(63,190,107,.25); --live-active: #3FB27F; --valid: #46B87A; --info-text: #A7A7FF; --info-a10: rgba(120,170,255,.10); --info-a60: rgba(120,170,255,.6); --alert-text: #FFAAAA; --mote-core: #FFF7D0; --mote-mid: #F1C65A; --mote-fade: rgba(241,198,90,0); --glow-mote-color: rgba(255,214,110,.9); --glow-impact-1: rgba(255,222,130,.85); --glow-impact-2: rgba(255,200,90,.5); --cook-core: #F6D37A; --glow-cook-1: rgba(246,211,122,.85); --glow-cook-2: rgba(246,160,60,.55); --chip-pill-bg: rgba(27,27,32,.9); /* v126. Munk: "solid white for the light, solid dark" — one surface colour per theme, not a stack of lighter greys for a sheet sitting on a panel. --surface is that one colour; every panel/sheet/modal/flyout/popover/ card/pill fill below points at it instead of its own shade. */ --surface:#17181B; --ink:#202125; --panel:var(--surface); --glass:var(--surface); --glass-solid:var(--surface); --ring:inset 0 0 0 1px rgba(255,255,255,.18); --fg:#FFFFFF; --fg-1:var(--fg); --fg-2:rgba(255,255,255,.82); --fg-3:rgba(255,255,255,.56); --fg-4:rgba(255,255,255,.56); --group:var(--surface); --hover:rgba(255,255,255,.08); --host-gold:#9B885B; --knight-green:#2D6A4F; --author-plum:#6D4C9F; /* v57.2: --mod-blue retired with the rank */ /* v115. Munk: "eliminate the use of red in this UI; use the brand gold." Sampled off public/brand/legendhaven-logo.png. --on-gold is near-black because white text on --gold measures ~2:1 — nowhere near readable — so anything solid in gold wears dark text, not white. --err is a new, separate hue: the one place red's JOB (a failed save has to look like failure) still needs a colour, and gold can't do double duty as both "this is the brand" and "this broke". */ /* v136. Munk: "i want to control the venue colors ... it defaults to white in dark mode, and dark in light mode." --gold/--gold-deep/ --gold-soft/--on-gold stay exactly as v115 left them — the Gold swatch's own colours, defined once, here. Everything accent-shaped below is generic now: --accent/--on-accent/--accent-deep/--accent-soft/ --accent-rgb/--accent-icon/--accent-text resolve through a data-accent attribute selector on :root (and one scoped to light theme for the two text variants, below the light block), set from cfg.space.accent at boot and on change (applyAccent, venue.js). What's declared right here is the DEFAULT swatch, "Theme": not its own hue, it just points at --solid/--on-solid/--hi, which already flip between white-on-dark and dark-on-light — so Theme needs no light override of --accent/ --on-accent/--accent-icon/--accent-text, only of --accent-rgb/ --accent-deep/--accent-soft (added to the light block below). */ /* v171. --gold-a40 (the cover editor's own dashed-outline alpha) retired: nothing reads it now — the editor uses rgba(var(--accent-rgb),.4) instead, Munk's own call ("use the selected accent color as the default") — see the cover editor rules below. */ --gold:#E8B04F; --gold-deep:#B8742A; --gold-soft:rgba(232,176,79,.2); --on-gold:#1B1407; --err:#E0894A; --accent:var(--solid); --on-accent:var(--on-solid); --accent-icon:var(--hi); --accent-text:var(--hi); --accent-rgb:255,255,255; --accent-deep:#E6E6E6; --accent-soft:rgba(255,255,255,.14); --coral:var(--accent); --coral-soft:var(--accent-soft); --coral-icon:var(--accent-icon); --coral-dot:var(--accent); --leave:var(--accent-deep); --violet:var(--accent); --plum:#4A4B52; --plum-2:#5A5B63; --pin:var(--accent); --paper:var(--surface); --paper-2:var(--surface); --paper-3:var(--surface); --ink-2:#F2F2F2; --ink-3:#FFFFFF; --ink-4:rgba(255,255,255,.62); --link:#FFFFFF; --ui:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --display:var(--ui); --brand:"Crimson Pro","Big Caslon",Georgia,serif; --r:8px; --pill:100px; --side:320px; /* v35. The whites that meant something: strong text, the solid button and its text, hairlines, a field's fill, the ground, the focus ring. */ --bg:var(--ink); --hi:#FFFFFF; --solid:#FFFFFF; --on-solid:var(--ink); --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.14); --field:var(--surface); --focus:#FFFFFF; --focus-ring:rgba(255,255,255,.7); --halo:rgba(255,255,255,.28); --scroll:rgba(255,255,255,.22); --glass-pill:var(--surface); --coral-text:var(--accent-text); --coral-solid:var(--accent); color-scheme:dark; /* ---- v151. Ruthless design tokens: the discipline the ea7e2ced/d057a95d/ 4e9507b5 pass put on this file (then on a base that has since drifted 32 versions stale) applied fresh here, to everything the venue grew since — the drawer, the rail, the colour picker, 1:1 chat, the privacy square. Nothing above this comment moved. The --s, --r, --fs, --fw, --lh, --ls, --t and --z families are named by rank (continuing --s-1..10 the same way v53 already did), by their literal value (--fs-24, --t-360), or — for z-index — as a named layer (--z-dock, --z-flyout): every one of those is a genuinely distinct measurement powering one rule, not a duplicate of a neighbour, so forcing them into fewer, role-named steps would either invent a shared meaning that isn't there or move something by a pixel/a frame that nobody asked to move. Checked for near-duplicates worth collapsing (spacing, duration, z-index) and found none within 1-2px/a perceptible alpha that weren't already sharing a token — see README v151. Colours and the box-shadow/filter tokens that carry them ARE named by role, not value: --white/--black/--ink are the plain primitives; --on-dark-N/--shade-N/--ink-aN/--void-aN/--deep-aN/--surface-aN are alpha ramps on those and on the existing --surface, each a real percent used somewhere; everything else below (--ok-text, --live, --dusk, --note-ink, --glow-mote, …) is named for the one thing it colours. A small number of near-identical near-black/near-white values were snapped onto the ramp they belong to — every merge and its delta is in README v151. See README v151 for the full literal count and the allowlist of what's still raw. */ /* space (extended past the original 2px ladder, by rank, continuing --s-1..10) */ --s-11: 44px; --s-12: 40px; --s-13: 26px; --s-14: 24px; --s-15: 28px; --s-16: 22px; --s-17: 5px; --s-18: 9px; --s-19: 60px; --s-20: 11px; --s-21: 3px; --s-22: 96px; --s-23: 15px; --s-24: 17px; --s-25: 7px; --s-26: 13px; --s-27: 80px; --s-28: 64px; --s-29: 30px; --s-30: 32px; --s-31: 52px; --s-32: 72px; --s-33: 34px; --s-34: 9.5px; --s-35: 54px; --s-36: 68px; --s-37: 128px; --s-38: 70px; --s-39: 74px; --s-40: 84px; --s-41: 124px; --s-42: 78px; --s-43: 66px; /* v203. The scroll scrim's own fade distance — --s-15 already sits at 28px, so it earns no new rung of its own. */ --scrim-size: var(--s-15); /* radius (extended; xs..5xl match the existing semantic ladder, the rest are named by their pixel value) */ --r-999: 999px; --r-5xl: 24px; --r-16: 16px; --r-23: 23px; --r-7: 7px; --r-99: 99px; --r-9: 9px; /* type scale: size, weight, line-height, tracking (named by value; this version had none before) */ --fw-medium: 500; --fs-16: 16px; --lh-1-4: 1.4; --fw-semibold: 600; --fs-15: 15px; --fw-regular: 400; --fs-13: 13px; --fs-11: 11px; --ls-012em: .12em; --fs-26: 26px; --lh-1-25: 1.25; --ls-06px: .6px; --lh-1-5: 1.5; --lh-1-3: 1.3; --fs-24: 24px; --lh-1-2: 1.2; --fs-14: 14px; --lh-1: 1; --fs-12: 12px; --ls-004em: .04em; --lh-1-45: 1.45; --fs-18: 18px; --ls-02px: .2px; --ls-009em: .09em; --fs-21: 21px; --fs-12-5: 12.5px; --lh-1-1: 1.1; --fw-bold: 700; --fs-10: 10px; --fs-19: 19px; --fs-34: 34px; --fs-23: 23px; --fs-40: 40px; --lh-1-35: 1.35; --lh-1-55: 1.55; --ls-01em: .1em; --ls-008em: .08em; --lh-22px: 22px; --fs-22: 22px; --ls-03px: .3px; --fs-28: 28px; --fs-17: 17px; --lh-1-6: 1.6; --ls-01px: .1px; --fs-30: 30px; --lh-1-15: 1.15; --ls-001em: .01em; --ls-014em: .14em; --ls-006em: .06em; --fs-20: 20px; --fs-hero: clamp(28px,7vw,44px); --mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* motion: duration (named by ms) and easing keywords (aliased so every value is a var()) */ --ease: ease; --t-1150: 1.15s; --ease-out: ease-out; --t-60: .06s; --linear: linear; --t-1600: 1.6s; --t-700: .7s; --t-500: .5s; --t-440: .44s; --t-100: .10s; --t-140: .14s; --t-settle: .18s; --t-panel: .22s; --t-420: .42s; --t-400: .4s; --t-40: .04s; --t-90: .09s; --t-1900: 1.9s; --t-1050: 1.05s; --ease-in-out: ease-in-out; --t-1400: 1.4s; --t-360: .36s; --t-250: .25s; --t-1500: 1.5s; --t-2400: 2.4s; --t-1200: 1.2s; --t-800: .8s; --t-1800: 1.8s; --t-340: .34s; --t-240: .24s; --t-40000: 40s; --t-26000: 26s; --t-3400: 3.4s; --t-1130: 1.13s; --t-2270: 2.27s; --t-280: .28s; --t-ease: .2s; --ease-in: ease-in; --t-380: .38s; --t-35: 35ms; --t-base: .16s; --t-260: .26s; --t-30: 30ms; --t-120: 120ms; --t-150: 150ms; --t-180: 180ms; --t-tap: .12s; /* z-index (the stack as it already stood, named by its literal value) */ --z-gate: 50; --z-gallery: 80; --z-lockdown: 49; --z-crop: 90; --z-floor-ui: 6; --z-5: 5; --z-4: 4; --z-3: 3; --z-2: 2; --z-dock: 8; --z-bar: 9; --z-hud: 7; --z-orient: 28; --z-toast: 12; --z-under: -1; --z-1: 1; --z-modal: 40; --z-admin: 60; --z-drawer: 70; --z-popover: 11; --z-sidebar: 25; --z-sidebar-open: 30; --z-sidebar-tab: 26; --z-countdown: 20; --z-alert: 900; --z-flyout: 75; --z-tip: 76; /* blur() filters, reused across glass chips and dim overlays */ --blur-8: blur(8px); --blur-12: blur(12px); --blur-20-sat: blur(20px) saturate(1.15); --blur-6: blur(6px); --blur-10: blur(10px); --blur-14: blur(14px); /* the accent swatch's alpha tints, for rgba(var(--accent-rgb),N) reads that used to write the alpha raw */ --accent-a75: rgba(var(--accent-rgb),.75); --accent-a85: rgba(var(--accent-rgb),.85); --accent-a50: rgba(var(--accent-rgb),.5); --accent-a55: rgba(var(--accent-rgb),.55); --accent-a0: rgba(var(--accent-rgb),0); --accent-a8: rgba(var(--accent-rgb),.08); --accent-a65: rgba(var(--accent-rgb),.65); --accent-a72: rgba(var(--accent-rgb),.72); --accent-a78: rgba(var(--accent-rgb),.78); --accent-a20: rgba(var(--accent-rgb),.20); --accent-a6: rgba(var(--accent-rgb),.06); --accent-a28: rgba(var(--accent-rgb),.28); /* box-shadow/filter/text-shadow/mask-image combinations, named by role: an "elev" family for card/panel/popover drop shadows, "ring" for outline/ selection/focus rings, "glow"/"drop"/"text-shadow" for one-off effect glows, "scrim"/"mask" for cutouts and fades, "hairline" for 1px dividers. See README v151 for the full list and why a numbered scale didn't fit: none of these 65 values were literal duplicates of each other except elev-modal/elev-modal-shadow (composed, not copied). */ --elev-gate: var(--ring),0 24px 60px -20px var(--shade-60); --ring-avatar: 0 0 0 3px var(--white),0 0 0 4px var(--shade-40); --ring-avatar-hover: 0 0 0 3px var(--hi),0 0 0 7px var(--halo); --elev-gallery: var(--ring),0 30px 70px var(--shade-60); --ring-banner-btn: inset 0 0 0 1px var(--on-dark-50); --scrim-crop: 0 0 0 9999px var(--void-a55); --ring-selected: 0 0 0 3px var(--paper),0 0 0 5px var(--hi); --glow-mote: drop-shadow(0 0 4px var(--glow-mote-color)); --glow-impact: 0 0 0 2px var(--glow-impact-1),0 0 30px var(--glow-impact-2); --elev-glasspill: inset 0 0 0 1px var(--on-dark-13),0 2px 6px var(--shade-30),0 20px 46px -16px var(--shade-72); --ring-subtle: 0 0 0 1px var(--on-dark-22); --elev-hint: var(--ring),0 12px 30px -10px var(--shade-60); --ring-focus-scrim: 0 0 0 3px var(--focus-ring),0 0 0 9999px var(--void-a66); --scrim-orient: 0 0 0 9999px var(--void-a66); --elev-orient: var(--ring),0 26px 60px -20px var(--shade-80); --ring-chip: inset 0 0 0 1px var(--on-dark-35); --elev-toast: 0 0 0 1px var(--ink-a20),0 2px 6px var(--shade-30),0 18px 40px -12px var(--shade-75); --ring-toast-btn: inset 0 0 0 1px var(--ink-a35); --drop-react: drop-shadow(0 2px 6px var(--shade-55)); --ring-range: inset 0 0 0 2px var(--on-dark-50),inset 0 0 0 3px var(--shade-22),0 0 0 1px var(--shade-22); --ring-disc: 0 0 0 6px var(--on-dark-90); --ring-speaking: 0 0 0 4px var(--white),0 0 0 8px var(--accent-a75); --ring-pulse-mid: 0 0 0 4px var(--white),0 0 0 6px var(--accent-a85),0 0 0 6px var(--accent-a50); --ring-pulse-end: 0 0 0 4px var(--white),0 0 0 8px var(--accent-a55),0 0 0 22px var(--accent-a0); --shadow-badge: 0 0 0 2px var(--shade-35),0 2px 6px var(--shade-40); --shadow-shield: 0 0 0 2px var(--ink),0 2px 6px var(--shade-45); --text-shadow-name: 0 1px 3px var(--shade-80); --elev-say: 0 4px 16px var(--shade-35); --elev-tag: 0 2px 8px var(--shade-45); --elev-pin: var(--ring),0 16px 40px -16px var(--shade-60); --elev-note: var(--ring),0 18px 44px -18px var(--shade-70); --elev-pop: var(--ring),0 18px 44px -14px var(--shade-62); --ring-live: 0 0 0 2px var(--live-soft); --elev-menu: var(--ring),0 16px 40px -12px var(--shade-60); --elev-modal: var(--ring),var(--elev-modal-shadow); --text-shadow-strong: 0 2px 14px var(--shade-60); --glow-cook: drop-shadow(0 0 10px var(--glow-cook-1)) drop-shadow(0 0 26px var(--glow-cook-2)); --elev-drawer-left: 1px 0 0 var(--on-dark-14),32px 0 80px -24px var(--shade-75); --elev-modal-shadow: 0 24px 60px -20px var(--shade-70); --elev-drawer-right: -1px 0 0 var(--on-dark-14),-32px 0 80px -24px var(--shade-75); /* v167. Was --on-dark-09 (invisible in light mode, see --rule-line above) — --rule-line already covers this exact "thin hairline that has to read on either theme" job, so the rail|pane divider reuses it rather than growing its own third light-mode override. */ --hairline-rail-v: inset -1px 0 0 var(--rule-line); --hairline-rail-h: inset 0 -1px 0 var(--rule-line); --elev-slider-thumb: 0 1px 4px var(--shade-55); --elev-spawn-dot: 0 2px 8px var(--shade-50); --ring-bgdel: 0 0 0 1px var(--on-dark-24); --ring-selected-accent: 0 0 0 3px var(--paper),0 0 0 6px var(--accent); --drop-logo: drop-shadow(0 6px 18px var(--shade-45)); --ring-ambience-hover: 0 0 0 2px var(--on-dark-60),0 22px 48px -14px var(--shade-85); --ring-valid: inset 0 0 0 1.5px var(--valid); --ring-ambience: 0 0 0 2px var(--accent-a50); --ring-ambience-drag: 0 0 0 2px var(--accent-a78); --elev-amb-btn: 0 6px 18px -6px var(--shade-70); --ring-ambience-ring: 0 0 0 1px var(--on-dark-60); --elev-pin-link: var(--ring),0 14px 34px -14px var(--shade-60); --ring-address-invalid: inset 0 0 0 1px var(--shade-14); --ring-reach: inset 0 0 0 3px var(--on-dark-55); --ring-spawnmark: 0 0 0 3px var(--white),0 0 0 6px var(--shade-35); --text-shadow-spawnmark: 0 1px 3px var(--shade-85); --shadow-side-mobile: -10px 0 40px var(--shade-53); --mask-dock-fade: linear-gradient(90deg,var(--black) calc(100% - 26px),transparent); --elev-closing-modal: 0 12px 40px var(--shade-45); --elev-author-dot: 0 1px 4px var(--shade-50); --ring-access-live: inset 0 0 0 1px var(--live-active); --elev-flyout: var(--ring),0 20px 50px -16px var(--shade-70); --elev-tip: var(--ring),0 10px 26px -10px var(--shade-70); } /* v203 (Munk, "Where something has a scroll, include a soft scrim on top or bottom that fades in and out as needed."). One reusable, tokenized scroll scrim, replacing #gate-scroll's old v173 overlay pair (a background gradient fading to --paper — correct only over a solid fill). This masks the scroller's own content instead, so it reads correctly over an image or a glass panel too, not just a solid surface. --scrim-top/--scrim-bottom (or -left/-right for .scrim-x) are written by scrollScrim() (venue.js) — 0px where nothing hides in that direction, --scrim-size where something does — and @property lets the mask stop itself, not just its opacity, transition smoothly. A browser without @property support can't interpolate an unregistered custom property, so the transition below silently no-ops there: the scrim still shows or hides correctly, just without the animation (Munk's asked-for fallback). Only the hidden band within --scrim-size of the edge is ever masked down — content already fully visible keeps full mask opacity (1), so this never softens contrast on text that isn't inside the fade itself. */ @property --scrim-top{syntax:'';inherits:true;initial-value:0px} @property --scrim-bottom{syntax:'';inherits:true;initial-value:0px} @property --scrim-left{syntax:'';inherits:true;initial-value:0px} @property --scrim-right{syntax:'';inherits:true;initial-value:0px} .scrim-y{ --scrim-top: 0px; --scrim-bottom: 0px; transition: --scrim-top var(--t-250) var(--ease), --scrim-bottom var(--t-250) var(--ease); -webkit-mask-image: linear-gradient(to bottom,transparent 0,black var(--scrim-top),black calc(100% - var(--scrim-bottom)),transparent 100%); mask-image: linear-gradient(to bottom,transparent 0,black var(--scrim-top),black calc(100% - var(--scrim-bottom)),transparent 100%); } .scrim-x{ --scrim-left: 0px; --scrim-right: 0px; transition: --scrim-left var(--t-250) var(--ease), --scrim-right var(--t-250) var(--ease); -webkit-mask-image: linear-gradient(to right,transparent 0,black var(--scrim-left),black calc(100% - var(--scrim-right)),transparent 100%); mask-image: linear-gradient(to right,transparent 0,black var(--scrim-left),black calc(100% - var(--scrim-right)),transparent 100%); } @media (prefers-reduced-motion: reduce){.scrim-y,.scrim-x{transition:none}} /* v35. Light: warm paper under white panels, charcoal text, the same gold. Only the chrome changes — the floor is a painting and keeps its own light. */ :root[data-theme=light]{ /* v126. Same one-surface move as dark, above: white, everywhere a panel used to shade itself relative to what it sat on. */ --surface:#FFFFFF; --ink:#202125; --bg:#ECEAE4; --panel:var(--surface); --glass:var(--surface); --glass-solid:var(--surface); --ring:inset 0 0 0 1px rgba(32,33,37,.14); /* Secondary text at .72, not .6: measured 2026-09-10, .6 on a frosted pill was 3.7:1 and on paper 4.2:1; .72 clears 4.5 on both. */ --fg:#202125; --fg-1:var(--fg); --fg-2:rgba(32,33,37,.84); --fg-3:rgba(32,33,37,.72); --fg-4:rgba(32,33,37,.72); --group:var(--surface); --hover:rgba(32,33,37,.07); --paper:var(--surface); --paper-2:var(--surface); --paper-3:var(--surface); --ink-2:#202125; --ink-3:#202125; --ink-4:rgba(32,33,37,.72); --link:#202125; --hi:#202125; --solid:#202125; --on-solid:#FFFFFF; --line:rgba(32,33,37,.1); --line-2:rgba(32,33,37,.16); --field:var(--surface); --focus:#202125; --focus-ring:rgba(32,33,37,.7); --halo:rgba(32,33,37,.22); --scroll:rgba(32,33,37,.25); --glass-pill:var(--surface); /* v167. Dark-over-paper instead of the dark theme's white-over-dark — see the --rule-line/--ctrl-track comment in :root, above. */ --rule-line: rgba(32,33,37,.16); --ctrl-track: rgba(32,33,37,.18); /* v136. Theme accent, light half: --accent/--on-accent/--accent-icon/ --accent-text already flip for free (they point at --solid/--on-solid/ --hi, redefined above); only the rgb triplet, the hover-deep and the wash need their own light values — near-black rather than white. */ --accent-rgb:32,33,37; --accent-deep:#050505; --accent-soft:rgba(32,33,37,.14); --err:#9A4A12; color-scheme:light; } /* v136 (was v115's --coral-text/--coral-icon here). --gold as TEXT on white paper is ~2:1 — worse than the red it replaced; teal/blue/violet/rose have the same problem, each its own way. Every non-Theme swatch gets a second, darker text/icon colour for light paper, tuned to clear 4.5:1 — the Gold pair keeps its old numbers (measured 4.99:1) unchanged. */ :root[data-theme=light][data-accent="gold"]{ --accent-icon:#9A6412; --accent-text:#9A6412; } :root[data-theme=light][data-accent="teal"]{ --accent-icon:#1F7A6E; --accent-text:#1F7A6E; } :root[data-theme=light][data-accent="blue"]{ --accent-icon:#2A5FB0; --accent-text:#2A5FB0; } :root[data-theme=light][data-accent="violet"]{ --accent-icon:#6650AE; --accent-text:#6650AE; } :root[data-theme=light][data-accent="rose"]{ --accent-icon:#B14A72; --accent-text:#B14A72; } /* v136. The five non-default swatches: solid, hover-deep, translucent wash, the rgb triplet (rgba(var(--accent-rgb),alpha) lets a caller pick its own alpha rather than baking one in), and the dark-theme accent-icon/ accent-text — the solid colour itself, legible enough against #17181B (the light-theme override above is why paper needs a darker one instead). "Theme" needs no block here: it is the :root default, above. */ :root[data-accent="gold"]{ --accent:var(--gold); --on-accent:var(--on-gold); --accent-deep:var(--gold-deep); --accent-soft:var(--gold-soft); --accent-rgb:232,176,79; --accent-icon:var(--gold); --accent-text:var(--gold); --coral-solid:var(--gold); } :root[data-accent="teal"]{ --teal:#3FAE9E; --accent:var(--teal); --on-accent:var(--ink); --accent-deep:#2D7D72; --accent-soft:rgba(63,174,158,.2); --accent-rgb:63,174,158; --accent-icon:var(--teal); --accent-text:var(--teal); --coral-solid:var(--teal); } :root[data-accent="blue"]{ --blue:#4C8DFF; --accent:var(--blue); --on-accent:var(--ink); --accent-deep:#3766B8; --accent-soft:rgba(76,141,255,.2); --accent-rgb:76,141,255; --accent-icon:var(--blue); --accent-text:var(--blue); --coral-solid:var(--blue); } :root[data-accent="violet"]{ --accent-violet:#9585CC; --accent:var(--accent-violet); --on-accent:var(--ink); --accent-deep:#6B6093; --accent-soft:rgba(149,133,204,.2); --accent-rgb:149,133,204; --accent-icon:var(--accent-violet); --accent-text:var(--accent-violet); --coral-solid:var(--accent-violet); } :root[data-accent="rose"]{ --rose:#E0709A; --accent:var(--rose); --on-accent:var(--ink); --accent-deep:#A1516F; --accent-soft:rgba(224,112,154,.2); --accent-rgb:224,112,154; --accent-icon:var(--rose); --accent-text:var(--rose); --coral-solid:var(--rose); } /* v126. Was a translucent wash over the art; the gate card is a card like any other now, solid --paper (== --surface) same as the base rule below. */ :root[data-theme=light] #gate .card{background:var(--paper)} :root[data-theme=light] #stage{background:var(--stage-bg)} /* The gate's bars sit on the dark art either way; only its card goes to paper. */ :root[data-theme=light] #gate{--fg:#FFFFFF;--fg-2:rgba(255,255,255,.82);--fg-3:rgba(255,255,255,.72);--fg-4:rgba(255,255,255,.72);--hi:#FFFFFF;--ink-3:#FFFFFF;--ink-4:rgba(255,255,255,.72); --glass:rgba(255,255,255,.08);--glass-solid:#2A2B30;--ring:inset 0 0 0 1px rgba(255,255,255,.18);--hover:rgba(255,255,255,.08);--group:rgba(255,255,255,.05); --line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.14);--field:rgba(255,255,255,.06);--solid:#FFFFFF;--on-solid:#202125;--focus:#FFFFFF; /* the bars inherit body's resolved colour, so the token alone is not enough */ color:var(--fg)} :root[data-theme=light] #gate .card{--fg:#202125;--fg-2:rgba(32,33,37,.84);--fg-3:rgba(32,33,37,.72);--fg-4:rgba(32,33,37,.72);--hi:#202125;--ink-3:#202125;--ink-4:rgba(32,33,37,.72); --glass:rgba(255,255,255,.66);--glass-solid:#FFFFFF;--ring:inset 0 0 0 1px rgba(32,33,37,.14);--hover:rgba(32,33,37,.07);--group:rgba(32,33,37,.04); --line:rgba(32,33,37,.1);--line-2:rgba(32,33,37,.16);--field:rgba(32,33,37,.05);--solid:#202125;--on-solid:#FFFFFF;--focus:#202125;color:var(--fg)} /* v115. The off-mic pill was coral text on a coral wash; dark text on a translucent gold wash measured too close to on-gold-on-dark-on-dark to read, so it goes solid gold instead, same as the other "this needs your attention" surfaces below. */ :root[data-theme=light] #dock #d-mic.off{background:var(--accent);color:var(--on-accent);box-shadow:none} :root[data-theme=light] #dock #d-mic.off:hover{background:var(--accent-deep);color:var(--on-accent)} ::selection{background:var(--accent);color:var(--on-accent)} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* Firefox reads these two; everything below is for the WebKit/Blink pair. */ #side,.pane,#tool-modal .card,#admin .card,#roommenu{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--on-dark-18);border-radius:var(--r-xl);border:3px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-track{background:transparent} /* A display rule on a class outranks the hidden attribute, which is how the password field stayed on screen with its lock switched off. */ [hidden]{display:none!important} *{box-sizing:border-box} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0} html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font:var(--fw-medium) var(--fs-16)/var(--lh-1-4) var(--ui);overflow:hidden;user-select:none} .hidden{display:none!important} svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none} svg.i.s{width:16px;height:16px} svg.i.l{width:24px;height:24px} /* ================= gate (pre-join) ================= */ #gate{position:fixed;inset:0;z-index:var(--z-gate);background:linear-gradient(180deg,var(--ink-a55),var(--ink-a82)),var(--ink);background-size:cover;background-position:center;display:grid;grid-template-rows:64px 1fr 48px} /* v33. The gate leaves by fading; the floor is already under it. */ #gate{transition:opacity var(--t-scene) var(--ease)} #gate.fading{opacity:0;pointer-events:none} #gate .gtop{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4)} #gate .gtop .spacer{flex:1} /* One column is taller than two: the card must be able to scroll on a short viewport, or Join space sits below the fold with no way to reach it. */ /* v47/v166. v47's own fix centred the card in #gmid with auto margins and let #gmid itself scroll — a centred box whose content overflows a scrolling ancestor still overflows equally on both edges, and the half above the top edge is the half a browser will not scroll back to; on a tall card (the health panel, mic test and all) that took the heading off the top with no way back to it, on exactly the "scrolling crops the top" report this comment used to say was already fixed. #gmid centres the card and never scrolls itself now; the card is capped to the room #gmid actually has (max-height:100%, itself resolved off #gmid's own definite height — the middle grid row of #gate's fixed, full-viewport box) and scrolls INSIDE that cap, so it opens with its own header on screen and never has an unreachable half in either direction. */ #gate .gmid{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--s-10);overflow:hidden;min-height:0} #gate .gmid > *{flex:none} /* One column, one face. The picker grid is retired: the big avatar IS the control — it starts on a random face and each press moves to another. */ /* v126. Was a translucent dark wash (blurred) over the art; solid --paper now, same surface every other card uses — the blur did nothing once the fill is opaque, so it goes too. v166. A little wider (400 -> 440) — Munk's live pass — and its own scroller now (see the #gmid comment above): max-height:100% of #gmid's definite height, overflow-y:auto, so the card's own header is what a scroll starts on rather than whatever the middle of a taller pane happened to centre on. */ /* v166 item 11 (Munk, "minify it, ideally NO scrolling"): padding and the gate-left/gate-right gap both came down from --s-11/--s-12/--s-13 (44/40/26px) — the single biggest source of the card's own overflow at 1280x720/390x844 was its own frame, not the content inside it. v173 (Munk, live screenshots): that read cramped — restored a rung or two, though not all the way back to the pre-166 numbers above. The card itself carries no padding of its own any more: it is a flex column of exactly two children, #gate-scroll-wrap (the scrolling body, padded) and #gate-footer (Join space, pinned — item 5, below), so "restore the card's padding" now means padding each of those consistently instead. */ #gate .card{width:min(440px,94vw);max-height:100%;background:var(--paper);box-shadow:var(--elev-gate);border-radius:var(--r);display:flex;flex-direction:column;color:var(--ink-3);min-width:0} /* v191. Nothing on the door card until the first renderGate() decides between sign-in and the profile step (no flash of the wrong one). */ #gate.booting .card{visibility:hidden} #gate .gate-left,#gate .gate-right{min-width:0} /* v173. The scrolling body: a flex column that shrinks (min-height:0) until #join's max-height is reached, then #gate-scroll scrolls. Not absolutely positioned — that gave the wrapper no intrinsic height and collapsed the card to its footer. */ #gate-scroll-wrap{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column} /* v196 (Munk: more padding in the sign-in/profile modals). Both the gap between pblocks and the padding around them stepped up one rung — the age check getting its own section (item 3, below) is exactly the kind of separation more room here is for. Checked at 390px: still fits with no horizontal scroll. */ #gate-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;display:grid;grid-template-columns:1fr;gap:var(--s-8);padding:var(--s-9) var(--s-15) var(--s-6)} /* v173. Pinned: never part of the scroll, always the card's last thing on screen. flex:none keeps it at its own content height regardless of how much #gate-scroll-wrap above it shrinks. */ #gate-footer{flex:none;padding:var(--s-6) var(--s-15) var(--s-9);overflow:hidden;scrollbar-gutter:stable} #gate-footer .btn{width:100%} /* v203. #gate-scroll carries .scrim-y itself now (scrollScrim(), venue.js) — masked directly rather than an overlay pair on top of it; see the .scrim-y/.scrim-x definition above for why. */ /* Locked = the password has not been accepted, and the faces go with it. The gate's top bar carries one thing at every stage: "Return to website", a way out. Menu and the avatar chip were decoration imitating the app's own chrome — they read as controls that do nothing until a room is open, so they are the app's, not the gate's. */ #gate.locked .gate-left{display:none} #gate .gate-left{display:grid;gap:var(--s-8);justify-items:center} /* The face is the picker: pressing it opens the gallery. The little grid under it is a third way to do the same thing and shows nowhere now. */ /* The whole welcome modal is the one surface; the mode note is chatter. */ #gate #mode-note{display:none} /* avatar library: the 39 Story Quest characters, by URL off the Onepage CDN. --src is the image; the identity travelling between peers is still the index. */ .av{--src:none;background-image:var(--src);background-size:cover;background-position:center top;background-repeat:no-repeat;background-color:var(--plum);border-radius:50%;display:inline-block} .gate-left{display:grid;gap:var(--s-7);align-content:start} .avhead{display:grid;gap:var(--s-6);justify-items:center;text-align:center} /* v166 item 11: tighter at the door only (same #gate-scoping reasoning as #gate .avbig, above — this stops applying once #me-panel moves into the drawer's own Profile pane). */ #gate .avhead{gap:var(--s-4)} .avbig{width:112px;height:112px;flex:none;box-shadow:var(--ring-avatar);cursor:pointer;transition:transform var(--t-base) var(--ease-press),box-shadow var(--t-base)} /* v166 (Munk, "minify it, ideally NO scrolling"): a smaller face preview at the door only — once #me-panel moves into the drawer's own Profile pane (#tool-content, no #gate ancestor any more) this stops applying and the full 112px comes back, where there is room for it. */ #gate .avbig{width:76px;height:76px} .avbig:hover{transform:scale(1.04);box-shadow:var(--ring-avatar-hover)} .avbig:active{transform:scale(.98)} .avttl{font:var(--fw-semibold) var(--fs-15) var(--ui);color:var(--hi)} .avsub{font:var(--fw-regular) var(--fs-13)/var(--lh-1-4) var(--ui);color:var(--ink-4);margin-top:var(--s-1)} /* v42. The small avatar grid is gone: the face IS the picker and it opens the gallery. The grid was drawn at the door (hidden there) and again in the profile panel - two more ways to do the one thing. */ .disc .av{position:absolute;inset:0;width:100%;height:100%} .avatar .av{width:100%;height:100%;border-radius:50%} /* v166 item 11: padding-top only ever applies at the door — the drawer's own #me-panel.as-edit .gate-right (below) already zeroes it there — so shrinking it here is door-only in effect either way. */ .gate-right{display:grid;gap:var(--s-6);align-content:start;padding-top:var(--s-4)} /* v42. One panel, two homes. At the door it is the join step; pressed from your own face it is Your profile, moved node-for-node into the modal so the fields, the face and the microphone test are the same elements and never a second copy with the same ids. */ #me-panel{display:grid;gap:var(--s-13);min-width:0} #me-panel.as-edit{gap:var(--s-10)} #me-panel.as-edit .gate-right{padding-top:0} /* v173. #enter left this list — it left #me-panel entirely (Join space is #gate-footer's now, a sibling the drawer never touches) — and #gate-health left it because #gate-health itself is gone (TRUST-03). */ #me-panel.as-edit #gate-title,#me-panel.as-edit #auth-step, #me-panel.as-edit #who,#me-panel.as-edit #access-msg,#me-panel.as-edit #mode-note, #me-panel.as-edit #gate-trust{display:none} #me-panel.as-edit .gate-left{justify-items:center} /* At the door the picture is a thing to choose; inside, it is your face. */ .as-edit-only{display:none} #me-panel.as-edit .as-edit-only{display:block} #me-panel.as-edit .avhead > div > .avttl:not(.as-edit-only){display:none} .devrows{display:none;gap:var(--s-6)} /* Two ideas, two blocks: who you are, and what you sound like. At the door they read as one flow (no headings, no rules); in the profile each block is named and separated. */ .pblock{display:grid;gap:var(--s-8);min-width:0} /* v166 (Munk, "minify it"): tighter at the door specifically — the drawer's own #me-panel.as-edit .pblock rule (below) is more specific and wins there regardless, so Profile/Sound in the drawer keep their own, more generous gap. */ #gate .pblock{gap:var(--s-5)} .pblock-h{margin:0;font:var(--fw-semibold) var(--fs-11) var(--ui);letter-spacing:var(--ls-012em);text-transform:uppercase;color:var(--fg-3)} #me-panel.as-edit .pblock{gap:var(--s-6);padding-top:var(--s-9);border-top:1px solid var(--line-2)} #me-panel.as-edit .avhead{padding-bottom:var(--s-1)} /* #tool-content has no top padding, so the face's white ring sat flush against the scroll edge and read as a cropped head. */ #me-panel.as-edit{padding-top:var(--s-4)} .amb-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-5)} .amb-row b{font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;color:var(--hi)} .f.amb{display:grid;gap:var(--s-4)} .devrows input[type=range]{accent-color:var(--accent)} /* v134. #gate-mic-test itself carries .as-edit now, not just an ancestor #me-panel — Sound moves it out to its own drawer pane, no longer a descendant of #me-panel, so the reveal has to key off the node itself. */ #me-panel.as-edit .devrows,#gate-mic-test.as-edit .devrows{display:grid} /* v166 (Munk, "minify it"): centred, and tighter letter-spacing — .6px was an outlier against every other --brand heading in this file (#orient h3, .auth-confirm h2, …), which already read at --ls-02px. */ .gate-right h1{font:var(--fw-regular) var(--fs-26)/var(--lh-1-25) var(--brand);letter-spacing:var(--ls-02px);margin:0 0 var(--s-2);color:var(--hi);text-wrap:balance;text-align:center} .gate-right p{margin:0;font:var(--fw-regular) var(--fs-16)/var(--lh-1-5) var(--display);color:var(--ink-4)} .gate-right p a{color:var(--link);text-decoration:underline;text-underline-offset:3px} label.f{display:grid;gap:var(--s-3);font:var(--fw-medium) var(--fs-13) var(--display);color:var(--ink-4)} /* v166 (Munk, "minify it"): "About you" no longer carries its own "optional" span — the placeholder ("A line about you") signals that now — so a single-line field can grow with what is typed instead of starting at the generic textarea's own 2-line min-height. Capped short of runaway growth; #chatin/#dmin's own chatGrow/dmGrow (venue.js) are the same shape, wired to #bio as bioGrow. */ #bio{resize:none;overflow-y:auto;min-height:0;max-height:104px} /* v124. input[type=url] (the Venue flyout's Con calendar link) fell through this list and rendered browser-default — any input this rule doesn't name does, since only text/email/password/textarea/select were ever listed. Added here rather than a one-off rule so every url field, present or future, is styled for free. v135. type=search (Hosting's "Search people") fell through the same way — docs/ui-backlog.md's "One button style, one field style" caught it as a raw browser box. appearance:none below also drops the native cancel/magnifier chrome Chromium/Safari otherwise add to a search box. */ /* v196. input[type=tel] (the age check's guardian-phone field) was missing from this list — every attribute this selector doesn't name renders as a bare, unstyled browser control, which is what tel looked like. */ input[type=text],input[type=email],input[type=password],input[type=url],input[type=search],input[type=tel],textarea,select{font:var(--fw-regular) var(--fs-16) var(--display);color:var(--hi);background:var(--field);border:0;box-shadow:var(--ring);margin:0;height:auto;line-height:var(--lh-1-3);padding:var(--s-6) var(--s-7);outline:0;border-radius:var(--r);width:100%;appearance:none;caret-color:var(--accent);transition:box-shadow var(--t-base)} input::placeholder,textarea::placeholder{color:var(--fg-3)} textarea{resize:vertical;min-height:64px;line-height:var(--lh-1-4)} input:focus,textarea:focus,select:focus{box-shadow:inset 0 0 0 1px var(--focus-ring);outline:0} .btn{font:var(--fw-semibold) var(--fs-15) var(--display);border-radius:var(--pill);height:48px;padding:0 var(--s-14);background:var(--solid);color:var(--on-solid);display:inline-flex;align-items:center;gap:var(--s-4);justify-content:center;transition:transform var(--t-base) var(--ease-press),box-shadow var(--t-base)} .btn:hover{box-shadow:0 0 0 3px var(--halo)} .btn:active{transform:scale(.98)} .btn:disabled{opacity:.55;cursor:default;box-shadow:none} .btn.plain{background:transparent;color:var(--hi);box-shadow:var(--ring)} .btn.violet{background:var(--accent);color:var(--on-accent)} /* ---- the face gallery: press the avatar, pick from all of them ---- */ #av-gal{position:fixed;inset:0;z-index:var(--z-gallery);display:none;place-items:center;padding:var(--s-14);background:var(--void-a72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} #av-gal.open{display:grid} :root[data-theme=light] #av-gal .gal{--hi:#202125;--ink-3:#202125;--ink-4:rgba(32,33,37,.72);--fg:#202125;--fg-2:rgba(32,33,37,.84); --fg-3:rgba(32,33,37,.72);--ring:inset 0 0 0 1px rgba(32,33,37,.14);--paper:#FFFFFF} #av-gal .gal{width:min(680px,94vw);background:var(--paper);border-radius:var(--r-3xl);box-shadow:var(--elev-gallery);padding:var(--s-13) var(--s-15) var(--s-16);display:grid;gap:var(--s-8);min-width:0} #av-gal h3{font:var(--fw-regular) var(--fs-24)/var(--lh-1-2) var(--brand);margin:0;color:var(--hi);text-align:center} /* Fixed tiles, deliberately. Sizing a circle with aspect-ratio off a 1fr column made the row height depend on a width the grid had not resolved yet: rows came out 37px under 110px tiles and every face overlapped the one below. A pixel column and a pixel row have no such circularity. */ #av-gal .gal-tabs{display:flex;gap:var(--s-4);justify-content:center} #av-gal .gal-tabs button{font:var(--fw-medium) var(--fs-14)/var(--lh-1) var(--ui);padding:var(--s-4) var(--s-8);border-radius:var(--r-999);color:var(--fg-2);background:transparent;box-shadow:var(--ring);cursor:pointer} #av-gal .gal-tabs button[aria-selected=true]{color:var(--paper);background:var(--hi);box-shadow:none} #av-gal .gal-grid{display:grid;grid-template-columns:repeat(5,96px);grid-auto-rows:min-content;gap:var(--s-8);justify-content:center;max-height:min(52vh,430px);overflow-y:auto;padding:var(--s-1) var(--s-3)} /* v61b. The framing dialog. It sits above the gallery that opened it, and the ring is drawn over the canvas rather than clipping it, so the person can see what they are cutting off as well as what they are keeping. */ /* v60. Venue › Reports/Flagged/Faces/Words/Codes (was the admin desk, one wide sheet of its own — the desk and its own .desk-tabs are gone since v133). A report is a row you read, not a card you admire: the reasons are chips, the words are quoted, and the buttons sit where the eye already is at the end of the line. */ /* v126. --paper-3 used to be a shade lighter than the row's own surface; collapsed to the same --surface now, so the divider draws with --line-2 instead of a fill nobody would see. */ .desk-row{display:grid;gap:var(--s-4);padding:var(--s-8) 0;border-top:1px solid var(--line-2)} .desk-row:first-of-type{border-top:0} .desk-who{font:var(--fw-semibold) var(--fs-15) var(--ui);color:var(--hi)} .desk-when{font:var(--fw-regular) var(--fs-12) var(--ui);color:var(--ink-4)} .desk-chips{display:flex;flex-wrap:wrap;gap:var(--s-3)} /* v126. Same collapse: a chip on the desk row reads by its ring, not a fill that now matches the row it sits on. */ .desk-chips span{font:var(--fw-medium) var(--fs-11)/var(--lh-1) var(--ui);letter-spacing:var(--ls-004em);text-transform:uppercase;padding:var(--s-17) var(--s-18);border-radius:var(--r-999);background:transparent;box-shadow:var(--ring);color:var(--ink-2)} .desk-note{margin:0;font:var(--fw-regular) var(--fs-14)/var(--lh-1-5) var(--ui);color:var(--ink-2)} .desk-claim{margin:0;font:var(--fw-regular) var(--fs-12)/var(--lh-1-5) var(--ui);color:var(--ink-4)} .desk-acts{display:flex;flex-wrap:wrap;gap:var(--s-4)} /* v66b. The Access panel: one row a link, expanding in place — same idea as .desk-row, but a row is a button (so the whole head is the toggle, not a chevron nobody notices) and the divider only draws under a closed row so an expanded one reads as one continuous block with its own form. */ /* v126. --paper-3 collapsed into --surface (below); a divider drawn in the surface colour is invisible, so it draws in --line-2 instead. */ #tool-modal:not(.sheet) #tool-content .rule{height:1px;background:var(--line-2);margin:var(--s-6) 0} .access-row{border-top:1px solid var(--line-2);padding:var(--s-6) 0} .access-row:first-of-type{border-top:0} .access-row-head{display:grid;gap:var(--s-2);width:100%;text-align:left;cursor:pointer} /* v126. A "lighter layer inside the surface" that is no longer lighter — the fill stays (still correct, just == the surface) and a ring says where the block starts. */ .access-edit{display:grid;gap:var(--s-6);margin-top:var(--s-6);padding:var(--s-6);background:var(--paper-3);box-shadow:var(--ring);border-radius:var(--r-lg)} .scope-pick{border:0;margin:0;padding:0;display:grid;gap:var(--s-3)} .scope-pick legend{font:var(--fw-medium) var(--fs-12) var(--ui);color:var(--ink-4);padding:0 0 var(--s-3)} .chk{display:flex;align-items:center;gap:var(--s-3);font:var(--fw-regular) var(--fs-13) var(--ui);color:var(--ink-2);padding:var(--s-2) 0} .chk input{margin:0} /* v115. Lockdown/emergency reads as urgent because of the layout (fixed, centred, loud), not because it borrows red — solid gold, dark text. */ .access-emergency-banner{margin:0;padding:var(--s-5) var(--s-6);border-radius:var(--r-lg);background:var(--coral-solid);color:var(--on-accent);font:var(--fw-semibold) var(--fs-13) var(--ui)} /* The floor-wide instance (index.html #emergency-banner): fixed to the top edge, above the stage, square corners — a banner, not a card. */ #emergency-banner{position:fixed;top:0;left:0;right:0;z-index:var(--z-gate);text-align:center;border-radius:0;display:flex;gap:var(--s-6);align-items:center;justify-content:center} #emergency-banner .btn{color:var(--white);box-shadow:var(--ring-banner-btn)} /* v113. Same fixed-banner shape as #emergency-banner, one below it so both can show at once without overlapping (an outage and a lockdown are not mutually exclusive). Visible to every visitor, not staff-only — see the comment on venueLockdown (venue.js) for why. */ #lockdown-banner{position:fixed;top:0;left:0;right:0;z-index:var(--z-lockdown);text-align:center;border-radius:0;display:flex;gap:var(--s-6);align-items:center;justify-content:center} #emergency-banner:not(.hidden) + #lockdown-banner{top:var(--s-12)} #lockdown-banner .btn{color:var(--white);box-shadow:var(--ring-banner-btn)} .access-reveal{display:grid;gap:var(--s-4)} /* v62. The code, shown once. Big enough to read off a laptop and type into a phone across a room, and monospaced so the characters are told apart - the same reason the alphabet has no O or l in it. */ /* v126. Ring added: --paper-3 is the card's own surface now, so the code block needs its own boundary to still read as a block. */ .code-given{font:var(--fw-bold) var(--fs-hero)/var(--lh-1-2) var(--mono);letter-spacing:var(--ls-012em);text-align:center;padding:var(--s-8) var(--s-6);margin:var(--s-8) 0;border-radius:var(--r-2xl);background:var(--paper-3);box-shadow:var(--ring);color:var(--hi);user-select:all} .desk-blocked{opacity:.72} .desk-faces{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:var(--s-8)} /* v167. The tile is the button now (faceRowHTML) — Remove/Reset live in a flyout it opens, not a button of their own under every face at once. */ .desk-face{display:grid;gap:var(--s-3);justify-items:center;text-align:center;border:0;background:none;padding:var(--s-3);border-radius:var(--r-lg);cursor:pointer;font:inherit;color:inherit;transition:background var(--t-base) var(--ease)} .desk-face:hover,.desk-face:focus-visible{background:var(--hover)} .desk-face:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* v126. Avatar placeholder: --paper-3 no longer stands apart from the card behind it, so a ring marks the circle even with no photo loaded. */ .desk-face .av{width:72px;height:72px;border-radius:50%;background:var(--paper-3) center/cover no-repeat;background-image:var(--src);box-shadow:var(--ring)} .desk-face small{font:var(--fw-regular) var(--fs-11)/var(--lh-1-3) var(--ui);color:var(--ink-4);word-break:break-all} .desk-face-preview{display:grid;justify-content:center;padding:var(--s-4) 0 var(--s-6)} .desk-face-preview .av{width:96px;height:96px;border-radius:50%;background:var(--paper-3) center/cover no-repeat;background-image:var(--src);box-shadow:var(--ring)} #av-crop{position:fixed;inset:0;z-index:var(--z-crop);display:none;place-items:center;padding:var(--s-14);background:var(--void-a80);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} #av-crop.open{display:grid} #av-crop .crop{width:min(420px,94vw);background:var(--paper);border-radius:var(--r-3xl);box-shadow:var(--elev-gallery);padding:var(--s-13) var(--s-15) var(--s-16);display:grid;gap:var(--s-8);justify-items:center} #av-crop h3{font:var(--fw-regular) var(--fs-24)/var(--lh-1-2) var(--brand);margin:0;color:var(--hi);text-align:center} /* v126. Ring added for the same reason as .desk-face .av above. */ #av-crop .crop-stage{position:relative;width:320px;height:320px;max-width:100%;border-radius:var(--r);overflow:hidden;background:var(--paper-3);box-shadow:var(--ring);touch-action:none;cursor:grab} #av-crop .crop-stage:active{cursor:grabbing} #av-crop canvas{display:block;width:100%;height:100%} /* Everything outside the circle, dimmed in one box-shadow rather than four divs. pointer-events:none or it eats the drag. */ #av-crop .crop-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none; box-shadow:var(--scrim-crop);outline:2px solid var(--on-dark-85);outline-offset:-2px} #av-crop .crop-zoom{display:grid;gap:var(--s-3);width:100%;font:var(--fw-medium) var(--fs-13) var(--display);color:var(--ink-4)} #av-crop .crop-zoom input{width:100%} #av-crop .fine{margin:0;text-align:center;font:var(--fw-regular) var(--fs-12)/var(--lh-1-5) var(--ui);color:var(--ink-4)} #av-crop .crop-actions{display:flex;gap:var(--s-4);width:100%} #av-crop .crop-actions .btn{flex:1} #av-gal .gal-head{grid-column:1/-1;margin:var(--s-3) 0 0;font:var(--fw-medium) var(--fs-12)/var(--lh-1) var(--ui);letter-spacing:var(--ls-012em);text-transform:uppercase;color:var(--fg-2)} #av-gal .gal-head:first-child{margin-top:0} /* v167. A tile press had no feedback at all — only the .av filter below eased. Small-button press per the venue's own convention (.avbig, .btn). */ #av-gal .gal-grid button{display:block;width:96px;height:96px;border-radius:50%;overflow:hidden;position:relative;box-shadow:var(--ring);transition:transform var(--t-base) var(--ease-press)} #av-gal .gal-grid button:active{transform:scale(.97)} #av-gal .gal-grid .av{display:block;width:100%;height:100%;border-radius:50%;filter:saturate(.8) brightness(.85);transition:filter var(--t-base)} #av-gal .gal-grid button:hover .av{filter:none} #av-gal .gal-grid button[aria-pressed=true]{box-shadow:var(--ring-selected)} #av-gal .gal-grid button[aria-pressed=true] .av{filter:none} @media(max-width:560px){#av-gal .gal-grid{grid-template-columns:repeat(3,84px);grid-auto-rows:min-content;gap:var(--s-6)}#av-gal .gal-grid button{width:84px;height:84px}} /* Once the test is running the control stops being an offer and becomes an instruction: no pill, no fill, just the line telling you to talk. */ #g-mic.listening{background:none;color:var(--ink-4);box-shadow:none;height:auto;padding:0;font:var(--fw-medium) var(--fs-14) var(--display);justify-content:flex-start} #g-mic.listening:hover{box-shadow:none} #g-mic.listening:active{transform:none} /* ---- microphone test: the face pulses the way it does in a room ---- */ .avbig.testing{animation:lh-pulse var(--t-1150) var(--ease-out) infinite} #gate-mic-test{display:grid;gap:var(--s-5)} #mic-join-wrap{display:flex;align-items:center;gap:var(--s-4);cursor:pointer} #gate-mic-meter{display:none;align-items:center;gap:var(--s-5)} #gate-mic-meter.on{display:flex} #mic-bar{flex:1;height:8px;border-radius:var(--r-sm);background:var(--line-2);overflow:hidden;min-width:0} /* scaleX, not width: this repaints every animation frame while the mic test runs. */ #mic-bar span{display:block;height:100%;width:100%;border-radius:var(--r-sm);background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform var(--t-60) var(--linear)} #mic-state{display:flex;align-items:center;gap:var(--s-3);font:var(--fw-semibold) var(--fs-12) var(--ui);color:var(--ink-4);white-space:nowrap} #mic-state.ok{color:var(--ok-text)} #mic-state.bad{color:var(--accent)} #mic-state .i{width:16px;height:16px} .devs{display:flex;gap:var(--s-6);margin-top:var(--s-6)} .devs .btn{flex:1;height:44px;font-size:var(--fs-14)} .devs .btn.on{background:var(--white);color:var(--ink)} .devs .btn.off{background:var(--on-dark-08);color:var(--fg-2);box-shadow:var(--ring)} .devs .btn.off:hover{background:var(--on-dark-14)} .fine{font:var(--fw-regular) var(--fs-14)/var(--lh-1-45) var(--display);color:var(--ink-4);border-top:1px solid var(--on-dark-12);padding-top:var(--s-7);text-align:center} .fine b{color:var(--white);font-weight:var(--fw-semibold)} .fine code{font-size:var(--fs-12);background:var(--on-dark-10);padding:1px var(--s-17);border-radius:var(--r-sm)} /* v166 (Munk, "minify it"): one plain line now (the heading and the Help link both left — the heading to the drop below, Help to #gate-help), folded into the Sound pblock right above the control it is about rather than its own separator block between the headline and the form. */ #gate-trust{margin:0 0 var(--s-1);font:var(--fw-regular) var(--fs-12-5)/var(--lh-1-45) var(--display);color:var(--ink-4)} /* v185 / FFL SAFE-07. Pre-entry age check — the same understated weight #gate-trust already sets for the sound-permission hint in this card. v196: its own pblock now (index.html), set apart from Who you are rather than folded under About you, still never shown in the drawer's Profile pane (#me-panel.as-edit #age-block, unchanged below). The old native fieldset/legend/radio group is gone — #age-block's own content is built by ensureAgeBlockHTML (venue.js) as the same segmented control Sign in | Create account already uses (.seg.auth-mode, styled below, near .seg's own base rules) rather than three radios; what is left here styles its heading, the "ages 14 and up" line, and the guardian fields' reveal. */ #me-panel.as-edit #age-block{display:none} /* Its own section: a hairline and room above, the same divider the drawer puts between pblocks (#me-panel.as-edit .pblock). */ #gate #age-block{margin-top:var(--s-6);padding-top:var(--s-9);border-top:1px solid var(--line-2)} #age-block .pblock-h .req{margin-left:var(--s-2);font-weight:var(--fw-regular);color:var(--fg-4)} #age-note,#age-guardian-note,#age-msg{margin:var(--s-3) 0 0;font:var(--fw-regular) var(--fs-12-5)/var(--lh-1-45) var(--display);color:var(--ink-4)} /* v196. Height/opacity reveal, not a jump, when 14–15 is picked — the same grid-rows collapse #add-options already uses above (0fr/1fr, a single .inner child carrying the real content), so this reads as the same house move every other field that opens on this page already makes. */ #age-guardian{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;transition:grid-template-rows var(--t-panel) var(--ease-move),opacity var(--t-base) var(--ease)} #age-guardian.open{grid-template-rows:1fr;opacity:1;margin-top:var(--s-5)} #age-guardian .inner{display:grid;gap:var(--s-5);min-height:0} @media (prefers-reduced-motion: reduce){#age-guardian{transition:none}} /* v173/TRUST-03. #gate-health and its supporting rules (.gate-health-head, .text-action, .health-dot, ...) are gone with the markup — Munk, 2026-09-27: the door no longer shows a service panel, admin or not. */ #gate .gbot{display:flex;align-items:center;padding:0 var(--s-14);background:var(--surface-a70);font:var(--fw-regular) var(--fs-18) var(--brand);letter-spacing:var(--ls-06px)} #gate .gbot .spacer{flex:1} #gate .gbot small{font:var(--fw-semibold) var(--fs-12) var(--ui);color:var(--fg-3);margin-left:var(--s-10)} /* v166. Replaces the "Help" text link that used to sit inside #gate-trust. Bottom-left of #gmid (the middle grid row, position:relative above) — not the viewport, which put it right over .gbot's own "LegendHaven" text at the very bottom of a short window — so it is clear of the header and footer rows at any height, on screen for #auth-step and #profile-step alike since it is #gmid's own child, not either step's. The same round-glass shape #mobile-side already wears elsewhere in the app. */ #gate-help{position:absolute;left:var(--s-8);bottom:var(--s-8);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--hi);background:var(--glass);box-shadow:var(--ring);-webkit-backdrop-filter:var(--blur-12);backdrop-filter:var(--blur-12);font:var(--fw-bold) var(--fs-18) var(--ui);text-decoration:none} #gate-help:hover{background:var(--hover)} #gate-help:focus-visible{outline:2px solid var(--focus);outline-offset:2px} @media(max-width:900px){#gate-help{left:var(--s-6);bottom:var(--s-6);width:40px;height:40px}} /* ================= app frame ================= */ #app{position:fixed;inset:0;display:grid;grid-template-columns:1fr var(--side);grid-template-rows:1fr} /* The floor's chrome sizes itself against the floor, not the window — the sidebar takes a few hundred pixels the viewport knows nothing about. */ #stage{position:relative;overflow:hidden;background:var(--ink);cursor:grab;container:stage / inline-size} #stage.panning{cursor:grabbing} /* The wrapper carries the arrival, so applyView keeps sole ownership of #world's transform and the two never fight over the same property. */ /* An 8 MB background is a real wait on a hotel connection, so the room says it is coming and how far along it is instead of showing an empty floor. */ #loading{position:absolute;inset:0;z-index:var(--z-floor-ui);display:grid;place-items:center;background:var(--deep-a82); -webkit-backdrop-filter:var(--blur-8);backdrop-filter:var(--blur-8);-webkit-backdrop-filter:var(--blur-8);transition:opacity var(--t-travel) var(--ease)} #loading.hidden{display:none} #loading.out{opacity:0;pointer-events:none} #loading .box{display:grid;gap:var(--s-8);justify-items:center;width:min(300px,72vw);text-align:center} #loading .rn{font:var(--fw-regular) var(--fs-24)/var(--lh-1-2) var(--brand);letter-spacing:var(--ls-02px);color:var(--white)} #loading .bar{width:100%;height:4px;border-radius:var(--r-xs);background:var(--on-dark-14);overflow:hidden;position:relative} #loading .bar span{position:absolute;inset:0;border-radius:var(--r-xs);background:var(--accent);transform-origin:left center; transform:scaleX(var(--p,0));transition:transform var(--t-settle) var(--linear)} /* Without a Content-Length there is no percentage to show, so the bar paces itself rather than inventing one. */ #loading.indeterminate .bar span{width:38%;inset:0 auto 0 0;transform:none;animation:lh-slide var(--t-1150) var(--ease-loop) infinite} @keyframes lh-slide{0%{left:-40%}100%{left:100%}} #loading .pct{font:var(--fw-semibold) var(--fs-12) var(--ui);letter-spacing:var(--ls-009em);text-transform:uppercase;color:var(--fg-3);font-variant-numeric:tabular-nums} @media (prefers-reduced-motion: reduce){#loading.indeterminate .bar span{animation:none;width:100%;left:0;opacity:.45}} /* The floor layer, not #stage: a pinch has to reach the gesture handler rather than the browser's own page zoom, but the panels floating over the stage still have to scroll under a finger. */ #worldwrap{position:absolute;inset:0;transform-origin:50% 50%;touch-action:none} #worldwrap.arriving{animation:lh-arrive var(--t-scene) var(--ease-arrive)} @keyframes lh-arrive{from{transform:scale(1.045);opacity:.25;filter:blur(3px)}to{transform:none;opacity:1;filter:none}} /* v33. Your first landing: the face drops in from above at 2x and lands hard, then the motes. The transform is on the bubble itself, which carries none of its own; the speech line and the ring are children. */ .bubble.me.slam{animation:lh-slam var(--t-1600) var(--ease-slam) both;z-index:var(--z-5)} @keyframes lh-slam{0%{transform:translate(var(--sx,0px),var(--sy,0px)) scale(var(--sk,3.8));opacity:0} 16%{transform:translate(var(--sx,0px),var(--sy,0px)) scale(calc(var(--sk,3.8) * .9));opacity:1} 52%{transform:translate(var(--sx,0px),var(--sy,0px)) scale(calc(var(--sk,3.8) * .9));opacity:1} 100%{transform:none;opacity:1}} /* The hearing circle is inside the bubble; scaled with it, it would cover the room. */ .bubble.me.slam .range{opacity:0!important} .mote{position:absolute;z-index:var(--z-4);pointer-events:none;width:9px;height:9px;margin:calc(var(--s-2) * -1) 0 0 calc(var(--s-2) * -1);border-radius:50%; background:radial-gradient(circle,var(--mote-core) 0%,var(--mote-mid) 45%,var(--mote-fade) 72%);filter:var(--glow-mote); animation:lh-mote var(--t,.9s) var(--ease-move) forwards} @keyframes lh-mote{0%{transform:translate(0,0) scale(.6);opacity:0}12%{opacity:1;transform:translate(calc(var(--dx)*.25),calc(var(--dy)*.25)) scale(1.15)}100%{transform:translate(var(--dx),var(--dy)) scale(.15);opacity:0}} .impact{position:absolute;z-index:var(--z-3);pointer-events:none;width:120px;height:120px;margin:calc(var(--s-19) * -1) 0 0 calc(var(--s-19) * -1);border-radius:50%; box-shadow:var(--glow-impact);animation:lh-impact var(--t-700) var(--ease-out) forwards} @keyframes lh-impact{0%{transform:scale(.2);opacity:1}100%{transform:scale(2.2);opacity:0}} @media (prefers-reduced-motion: reduce){.bubble.me.slam{animation:none}.mote{animation-duration:var(--t-500)}.impact{animation:none;display:none}} @media (prefers-reduced-motion: reduce){#worldwrap.arriving{animation:lh-fade var(--t-ease) var(--linear)}@keyframes lh-fade{from{opacity:.4}to{opacity:1}}} /* v49. Arriving: the venue assembles instead of appearing whole. The material is the floor's own — a small scale and a blur clearing, lh-arrive's curve — so the chrome and the floor read as one event rather than four. Every one of these is a BEGINNING added to something already visible, and the fill is `backwards`, never `both`: an animation that does not run leaves the finished venue on screen, not an empty one. That matters here, because the venue is embedded and a hidden tab is not to be trusted with anything that gates what can be seen. Nothing waits on it either — every control is where it lands from the first frame and takes a click there. */ #app.booting #topleft, #app.booting #floorbar, #app.booting #viewdock, #app.booting #adminrail:not(.hidden){animation:lh-settle var(--t-440) var(--ease-arrive) backwards} #app.booting #topleft{animation-delay:var(--t-100)} #app.booting #adminrail:not(.hidden){animation-delay:var(--t-140)} #app.booting #viewdock{animation-delay:var(--t-settle)} #app.booting #floorbar{animation-delay:var(--t-panel)} @keyframes lh-settle{from{opacity:0;transform:translateY(6px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}} /* The rail comes in from the edge it lives on, then writes its rooms down the list. A stagger is honest here and nowhere else in this venue: the rail IS a list, and the order it lands in is the order the rooms are in — which is the whole point of doing it. --i is a row's place from the top of the rail, counted across groups so the cascade does not restart at every heading. The delay is capped, so a venue with forty rooms still finishes arriving. */ #app.booting #side{animation:lh-rail var(--t-420) var(--ease-arrive) backwards} @keyframes lh-rail{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}} #app.booting #side .brandbar, #app.booting #side .head, #app.booting #side .foot{animation:lh-settle var(--t-400) var(--ease-arrive) var(--t-tap) backwards} /* The delay is written onto the row by railTurn(), which reads it off the clock the venue opened on rather than off this repaint. */ .grp.enter,.rm.enter{animation:lh-row var(--t-420) var(--ease-arrive) backwards} @keyframes lh-row{from{opacity:0;transform:translateY(7px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}} /* Reduced motion keeps the ORDER and drops the travel. Where everything is was the reason for the sequence, so muting it to nothing would remove the meaning rather than the movement — it runs on opacity, quicker and tighter. */ @media (prefers-reduced-motion: reduce){ #app.booting #topleft,#app.booting #floorbar,#app.booting #viewdock, #app.booting #adminrail:not(.hidden),#app.booting #side, #app.booting #side .brandbar,#app.booting #side .head, #app.booting #side .foot{animation:lh-appear var(--t-ease) var(--linear) backwards;animation-delay:var(--t-40)} .grp.enter,.rm.enter{animation:lh-appear var(--t-panel) var(--linear) backwards} @keyframes lh-appear{from{opacity:0}to{opacity:1}} } #world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform} /* --inv-z undoes the floor's zoom for the few things that are controls rather than scenery. A pencil is the same pencil at 25% and at 100%; scaling it with the room made it a speck across a big floor. */ /* Weather in front of the camera, above the floor and below the chrome (#loading owns z-index 6). Sized to the pane, so a flake is a flake. */ #atmos-screen{position:absolute;inset:0;z-index:var(--z-2);pointer-events:none} #world img.bg{display:block;pointer-events:none;-webkit-user-drag:none} /* v68 / Phase 3. No image backups — a background the Sweep has since garbage-collected renders as a neutral fill rather than a broken-image icon (venue.js clears the class on the next successful load). */ #world img.bg.missing{background:var(--paper)} #world .bg-dim{position:absolute;left:0;top:0;pointer-events:none;background:var(--deep);opacity:0} /* The atmosphere's own layer, so its position in the stack is a fact of the floor rather than something the engine has to be told twice. */ #world .atmos-layer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none} /* chips (top bar) */ .chip{display:flex;align-items:center;gap:var(--s-5);height:48px;padding:0 var(--s-8);background:var(--glass);box-shadow:var(--ring);-webkit-backdrop-filter:var(--blur-12);backdrop-filter:var(--blur-12);-webkit-backdrop-filter:var(--blur-12);border-radius:var(--r);color:var(--fg-2);font:var(--fw-semibold) var(--fs-14) var(--ui);text-transform:none;letter-spacing:0;white-space:nowrap} .chip.r14{border-radius:var(--r)} .chip.icon{width:48px;padding:0;justify-content:center} .chip .brand{font:var(--fw-medium) var(--fs-16) var(--ui);text-transform:none;letter-spacing:0;color:var(--fg-2)} .chip .pill{font:var(--fw-semibold) var(--fs-16) var(--display);text-transform:none;letter-spacing:0;background:var(--paper-2);color:var(--chip-pill-bg);height:28px;padding:0 var(--s-4);border-radius:var(--r-5xl);display:grid;place-items:center} .chip .vsep{width:1px;height:20px;background:var(--line-2)} .chip .count{display:flex;align-items:center;gap:var(--s-3);text-transform:none;font:var(--fw-regular) var(--fs-16) var(--ui);color:var(--fg-3)} .chip .count svg{width:13px;height:13px;color:var(--fg-3)} .avatar{width:24px;height:24px;border-radius:50%;background:var(--plum);color:var(--white);display:grid;place-items:center;font:var(--fw-semibold) var(--fs-13) var(--ui);overflow:hidden;text-transform:none} .avatar img{width:100%;height:100%;object-fit:cover} #mobile-side{display:none;position:absolute;right:var(--s-6);top:var(--s-6);z-index:var(--z-dock);width:46px;height:46px;place-items:center;border-radius:var(--r);color:var(--hi);background:var(--glass);box-shadow:var(--ring);-webkit-backdrop-filter:var(--blur-12);backdrop-filter:var(--blur-12)} .chip:hover{background:var(--glass-solid)} /* The admin doors stand together on the left, vertical and out of the way of the room. They were scattered across a top-right menu that mostly repeated the dock and the view cluster. */ #adminrail{position:absolute;left:var(--s-10);top:50%;transform:translateY(-50%);z-index:var(--z-dock);display:grid;gap:var(--s-2);padding:var(--s-3);border-radius:var(--pill)} #adminrail.hidden{display:none} #adminrail button{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--fg-3);position:relative; transition:background var(--t-base),color var(--t-base)} #adminrail button:hover{background:var(--hover);color:var(--hi)} #adminrail button.on,#adminrail button.addopen{background:var(--accent);color:var(--on-accent)} #adminrail button.hidden{display:none} #adminrail .i{width:19px;height:19px} /* v110. The label used to be this button's own ::after; it is now the one shared #tip system (wireTooltips, venue.js), which reads data-label the same way. */ /* v138. #add-options replaces #addfly: the rail grows open in place rather than popping a separate panel beside it. `order:-1` puts it above #m-add visually no matter where it sits in the DOM (kept after #m-add there so Tab still reaches it right after the + ). The 0fr->1fr grid-template-rows trick is the same one .ppl .list uses below for an animated height; .inner is the real column so the outer box has something to collapse against, and it also carries the mobile-only overflow cap (media block further down) so a long list on a short screen cannot run past the top of the viewport. */ /* v146. Munk: the spacing between the rail's buttons read as uneven. The cause: #adminrail's own `gap` (below) is inserted around EVERY grid row, #add-options included — and #add-options never goes away, it only collapses its own inner height to 0fr at rest, so the rail carried one full extra `gap` above #m-add that none of its other buttons had. v146's own fix put a negative margin-top on #add-options itself to cancel it — which does pull #add-options's OWN (already empty) box up into the padding, but a grid's row-gap is a property of the TRACKS, not of any one item's margin, so it never actually removed the gap #m-add's own track still opened below it. The audit (docs/ui-backlog.md) is what caught it: the pill's own top padding measured 10px, the bottom 6px — v146's fix looked right and simply didn't reach the actual gap. v167's real fix is the opposite direction: pull #m-add up instead, while there is nothing open above it to make room for (the :has() below), which does move the thing that is actually where the eye reads the gap — #add-options's own explicit height:0 (next rule) is a separate, smaller fix: its own resolved height only rounded to exactly 0 with height set directly; grid-template-rows:0fr alone left a few px of residual on this rail even with overflow:hidden/min-height:0 set. */ #add-options{order:-1;display:grid;grid-template-rows:0fr;opacity:0;margin-top:calc(-1 * var(--s-2));overflow:hidden;min-height:0;height:0; transition:grid-template-rows var(--t-panel) var(--ease-move),opacity var(--t-base) var(--ease),margin-top var(--t-panel) var(--ease-move)} /* v167. The actual fix for the uneven padding: while #add-options is closed, pull #m-add up by exactly one row-gap so the space above it matches #adminrail's own padding, the same as every other button's own spacing (and #r-bg's own bottom padding, unaffected either way). Once #add-options opens, this stops applying — #m-add drops back to its ordinary gap below the now-real list, which is the room it needs. */ #adminrail:not(:has(#add-options.open)) #m-add{margin-top:calc(-1 * var(--s-2))} /* v167. The same closed list was still 52px WIDE, which set the rail's column: every button sat 6px from the left edge and 16px from the right. Closed, it takes no width; open, the column centres it. */ #add-options:not(.open){width:0} #adminrail{justify-items:center} /* v146. The "pop": a slight overshoot on top of the height reveal above, scale+translate rather than height, so it reads as the options springing out of the + rather than just a panel unfolding. */ #add-options .inner{display:grid;gap:var(--s-2);overflow:hidden;min-height:0;max-height:min(50vh,calc(100vh - 160px));overflow-y:auto; transform:scale(.92) translateY(6px);transition:transform var(--t-panel) var(--ease-pop)} #add-options.open{grid-template-rows:1fr;opacity:1;margin-top:0;height:auto} #add-options.open .inner{transform:none} @media (prefers-reduced-motion: reduce){#add-options,#add-options .inner{transition:none;transform:none}} /* ---------- floor chrome ---------------------------------------------- Two clusters, two jobs. The dock is what YOU do (be heard, be seen, leave); the view cluster is what the MAP does (find me, zoom, help). They were one undifferentiated rail of eleven 20px icons in the sidebar, where the microphone — the only control that matters in a voice room — weighed the same as the zoom percentage. */ .glasspill{background:var(--glass-pill);-webkit-backdrop-filter:var(--blur-20-sat);backdrop-filter:var(--blur-20-sat);-webkit-backdrop-filter:var(--blur-20-sat); box-shadow:var(--elev-glasspill)} /* the room you are standing in, named on the floor it belongs to */ /* Top left is who you are and what you can set. The room name sits beside it, in the same row, so the corner reads as one thing rather than three. */ #topleft{position:absolute;left:var(--s-10);top:var(--s-10);z-index:var(--z-bar);display:flex;align-items:center;gap:var(--s-5);max-width:calc(100% - 40px)} #youchip{display:flex;align-items:center;gap:var(--s-1);padding:var(--s-17);border-radius:var(--pill)} #youchip button{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--fg-3); transition:background var(--t-base),color var(--t-base)} #youchip button:hover{background:var(--hover);color:var(--hi)} #youchip .i{width:18px;height:18px} /* v37. The button shows the mode you are in: a moon at night, a sun by day. */ #m-theme .i-sun{display:none} :root[data-theme=light] #m-theme .i-sun{display:block} :root[data-theme=light] #m-theme .i-moon{display:none} #youchip #b-me{padding:0;overflow:hidden;color:var(--hi)} #youchip #b-me .avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;overflow:hidden; background:var(--hover);font:var(--fw-semibold) var(--fs-13) var(--ui);box-shadow:var(--ring-subtle)} #youchip #b-me .avatar .av{width:100%;height:100%} #roomchip{position:relative;z-index:var(--z-hud);display:flex;align-items:center; padding:var(--s-20) var(--s-10);border-radius:var(--pill);max-width:min(40cqi,460px)} #roomchip .rc{flex:none;margin-left:var(--s-5);padding:var(--s-21) var(--s-18);border-radius:var(--r-999);font:var(--fw-semibold) var(--fs-12)/var(--lh-1) var(--ui);color:var(--fg-2);background:var(--line-2);font-variant-numeric:tabular-nums} #roomchip .rc:empty{display:none} #hint{position:absolute;left:50%;bottom:var(--s-22);transform:translateX(-50%);z-index:var(--z-hud);max-width:min(520px,calc(100% - 24px));display:flex;gap:var(--s-6);align-items:center; padding:var(--s-6) var(--s-7) var(--s-6) var(--s-8);border-radius:var(--r-3xl);background:var(--glass-solid);box-shadow:var(--elev-hint);font:var(--fw-medium) var(--fs-14)/var(--lh-1-4) var(--ui);color:var(--hi)} #hint button{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--fg-3)} #hint button:hover{background:var(--hover);color:var(--hi)} /* v47. The orientation. Five steps over the real venue, in the arrivals room, the first time somebody lands. The scrim never takes the pointer — every step is done on the control itself, not on a picture of one, so the ring is a hole in the dark rather than a lid over it. */ #orient{position:fixed;inset:0;z-index:var(--z-orient);pointer-events:none;font:var(--fw-regular) var(--fs-14)/var(--lh-1-5) var(--ui)} #orient .ring{position:absolute;left:50%;top:50%;width:0;height:0;border-radius:var(--r-4xl); box-shadow:var(--ring-focus-scrim); transition:left var(--t-travel) var(--ease-move),top var(--t-travel) var(--ease-move),width var(--t-travel) var(--ease-move),height var(--t-travel) var(--ease-move)} /* A step with nothing to point at still darkens the venue: the same scrim with no hole and no bright edge, drawn off-screen so nothing shows. */ #orient .ring.blank{box-shadow:var(--scrim-orient);left:calc(var(--s-12) * -1);top:calc(var(--s-12) * -1);width:0;height:0} #orient .card{position:absolute;left:50%;top:50%;width:min(360px,calc(100vw - 32px));pointer-events:auto; padding:var(--s-9) var(--s-9) var(--s-8);border-radius:var(--r-16);background:var(--glass-solid);color:var(--hi); box-shadow:var(--elev-orient); transition:left var(--t-travel) var(--ease-move),top var(--t-travel) var(--ease-move)} #orient .o-top{display:flex;align-items:center;gap:var(--s-5);margin-bottom:var(--s-6)} #orient .o-count{font:var(--fw-semibold) var(--fs-11)/var(--lh-1) var(--ui);letter-spacing:var(--ls-009em);text-transform:uppercase;color:var(--fg-3)} #orient .o-dots{display:flex;gap:var(--s-17);margin-left:auto} #orient .o-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2)} #orient .o-dots i.on{background:var(--hi)} #orient .o-dots i.past{background:var(--fg-3)} #orient h3{font:var(--fw-regular) var(--fs-21)/var(--lh-1-2) var(--brand);letter-spacing:var(--ls-02px);color:var(--hi);margin:0 0 var(--s-3)} #orient p{margin:0;color:var(--fg-2)} /* The step that asks for something says so, and says when it has happened. The tick replaces the ask in place, so the card never grows a line. */ #orient .o-ask{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-6);padding:var(--s-18) var(--s-20);border-radius:var(--r-xl); background:var(--field);box-shadow:var(--ring);font:var(--fw-semibold) var(--fs-12-5)/var(--lh-1-3) var(--ui);color:var(--fg-2)} #orient .o-ask.done{color:var(--hi)} #orient .o-ask svg{flex:none;width:15px;height:15px;opacity:.7} #orient .o-ask.done svg{opacity:1} #orient .o-foot{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-8)} /* v126. Rings added on .o-ask/.o-foot button: --field == the card's own surface now. */ #orient .o-foot button{height:36px;padding:0 var(--s-23);border-radius:var(--r-xl);font:var(--fw-semibold) var(--fs-13) var(--ui);color:var(--fg-2);background:var(--field);box-shadow:var(--ring)} #orient .o-foot button:hover{color:var(--hi);background:var(--hover)} #orient .o-foot button.go{margin-left:auto;background:var(--solid);color:var(--on-solid)} #orient .o-foot button.go:hover{background:var(--solid);opacity:.9} /* v129. Skip is plain text: cancel the ring/background .o-foot button sets. */ #orient .o-foot .o-skip{margin-left:auto;font:var(--fw-medium) var(--fs-12-5) var(--ui);color:var(--fg-3);background:none;box-shadow:none;padding:0 var(--s-2);height:auto} #orient .o-foot .o-skip + .go{margin-left:0} #orient .o-foot button:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* v166. The card's placement (placeOrient, venue.js) now keeps clear of whatever a step's own `ask` opens beside its target, but the popover itself still needs to outrank #orient's scrim/card on the z-axis too — #pop (step 3's own status menu) and #side's mobile "mobile-open" sheet (step 4's chat pane on a narrow screen) both normally sit well under --z-orient, so the scrim would dim them and a card that ends up overlapping anyway would still win the click. Scoped to while #orient is actually open, so ordinary (non-tour) stacking — #pop under toast, the mobile sidebar under nothing in particular — is unchanged. */ body:has(#orient:not(.hidden)) #pop{z-index:calc(var(--z-orient) + 1)} /* The mobile chat sheet (#side.mobile-open) is already position:fixed — only its z needs raising. The desktop sidebar has no position of its own at all, so giving it one (relative, no offsets — it does not move) is what lets a z-index apply; media-scoped so it never fights the >=901px rule that resets a stray .mobile-open class back to static/auto (further down) — this still wins there on specificity, but there is no reason to rely on that when the breakpoint already says which #side this is. */ body:has(#orient:not(.hidden)) #side.mobile-open{z-index:calc(var(--z-orient) + 1)} @media(min-width:901px){ body:has(#orient:not(.hidden)) #side{position:relative;z-index:calc(var(--z-orient) + 1)} } @media (prefers-reduced-motion:reduce){#orient .ring,#orient .card{transition:none}} /* Under the sidebar breakpoint the card is a sheet at the bottom: there is no room beside a highlighted control on a phone, and a card that floats over the thing it is describing hides it. */ @media (max-width:900px){ #orient .card{left:var(--s-6)!important;right:var(--s-6);top:auto!important;bottom:var(--s-6);width:auto} } #pop .pop-avail{display:grid;grid-template-columns:1fr;gap:var(--s-3);padding-top:var(--s-6);border-top:1px solid var(--line)} /* v126. Ring added: --field == the popover's own surface now. */ #pop .pop-avail button{height:34px;border-radius:var(--r-xl);font:var(--fw-semibold) var(--fs-12) var(--ui);color:var(--fg-2);background:var(--field);box-shadow:var(--ring)} #pop .pop-avail button.on{background:var(--solid);color:var(--on-solid)} #roomchip .rn{font:var(--fw-regular) var(--fs-21)/var(--lh-1-1) var(--brand);letter-spacing:var(--ls-02px);color:var(--hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} /* The floor's bottom row is one grid, so the tip, the dock and the view cluster cannot land on top of each other at any width — they used to be three absolutely-positioned things hoping to miss. */ #floorbar{position:absolute;left:0;right:0;bottom:0;z-index:var(--z-dock);display:grid; grid-template-columns:1fr auto 1fr;align-items:end;row-gap:var(--s-6);column-gap:var(--s-8); padding:0 var(--s-10) var(--s-14);pointer-events:none} #floorbar > *{pointer-events:auto} #floorbar .dockwrap{grid-area:2/1/3/4;position:relative;display:grid;justify-items:center} #dock{position:relative;z-index:var(--z-dock); display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s-3);padding:var(--s-4);border-radius:var(--pill);max-width:calc(100% - 40px)} /* Wrapping, not overflowing: the buttons do not shrink, so a narrow floor used to push Leave out past the pill's own rounded edge. */ #dock .dsep{flex:none;width:1px;height:26px;margin:0 var(--s-3);background:var(--line-2)} #dock button{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--fg-2);position:relative; transition:background var(--t-base),color var(--t-base),transform var(--t-base) var(--ease-press)} #dock button:hover:not(:disabled){background:var(--hover);color:var(--hi)} #dock button:active:not(:disabled){transform:scale(.94)} #dock button:disabled{opacity:.32;cursor:default} #dock button.on{background:var(--accent);color:var(--on-accent)} /* The microphone is the primary control, so it is the only one wearing a label and the only white surface on the floor. */ #dock #d-mic{width:auto;height:52px;padding:0 var(--s-16) 0 var(--s-24);border-radius:var(--pill);gap:var(--s-20); display:flex;align-items:center;background:var(--solid);color:var(--on-solid);font:var(--fw-semibold) var(--fs-15) var(--ui)} #dock #d-mic .i{width:21px;height:21px;stroke-width:1.9} #dock #d-mic:hover{background:var(--solid);color:var(--on-solid)} /* v115. Solid gold, not a wash: on-gold dark text needs a background it can actually sit on, and the wash (a translucent gold over a video floor) can't guarantee that the way the old red wash's light text could. */ #dock #d-mic.off{background:var(--accent);color:var(--on-accent);box-shadow:none} #dock #d-mic.off:hover{background:var(--accent-deep);color:var(--on-accent)} /* One authored moment: the pill breathes with your own voice while you talk. */ #dock #d-mic .lvl{flex:none;width:3px;height:20px;border-radius:var(--r-xs);background:currentColor;opacity:.22; transform:scaleY(calc(.25 + var(--lvl,0) * .75));transform-origin:center;transition:transform var(--t-90) var(--linear),opacity var(--t-settle)} #dock #d-mic.talking .lvl{opacity:.9} #dock #d-mic.off .lvl{display:none} /* v34. Blocked / no mic / reconnecting: the same pill, dimmed, with the word. */ #dock #d-mic.blocked{background:var(--line-2);color:var(--fg-2);box-shadow:var(--ring)} #dock #d-mic:disabled{opacity:.6;cursor:default} /* Speaker off says so with a crossed-out speaker. A red dot reads as an alert — something you have to deal with — and it is a setting. */ #dock #d-spk.off{color:var(--fg-3)} #dock #d-leave{color:var(--fg-2)} #dock #d-leave:hover{background:var(--hover);color:var(--hi)} /* The view cluster is not one of your controls, so it does not share the dock's row — a centred dock and a right-hand cluster cannot both have the floor's full width. Top right, opposite who you are. */ /* v32. The view cluster lives in the header row, after the room name. */ #viewdock{position:static;margin-left:auto;flex:none;z-index:var(--z-dock);display:flex;align-items:center;gap:var(--s-1);padding:var(--s-3);border-radius:var(--pill)} #viewdock button{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--fg-3);transition:background var(--t-base),color var(--t-base)} #viewdock button:hover{background:var(--hover);color:var(--hi)} #viewdock button.on{background:var(--accent);color:var(--on-accent)} #viewdock .i{width:17px;height:17px} #viewdock #z-pct{width:auto;padding:0 var(--s-4);border-radius:var(--pill);font:var(--fw-semibold) var(--fs-12) var(--ui);color:var(--fg-3);font-variant-numeric:tabular-nums} #viewdock .vsep{flex:none;width:1px;height:20px;margin:0 var(--s-17);background:var(--line-2)} .hcount{position:absolute;right:0;top:0;min-width:16px;height:16px;padding:0 var(--s-21);border-radius:var(--r-lg);background:var(--accent);color:var(--on-accent);font:var(--fw-bold) var(--fs-10) var(--ui);display:grid;place-items:center} /* v42. The preview notice was centred on top of the header row and landed straight on the room chip and the view cluster. It is a member of that row now: it shrinks before the controls do, and its sentence gives way to two words when the row runs out of width. */ #preview-bar{position:static;flex:0 1 auto;min-width:0;z-index:var(--z-bar);display:flex;align-items:center;gap:var(--s-6);padding:var(--s-4) var(--s-5) var(--s-4) var(--s-8);border-radius:var(--pill);font:var(--fw-medium) var(--fs-13) var(--ui);color:var(--white);background:var(--glass);box-shadow:var(--ring);-webkit-backdrop-filter:var(--blur-12);backdrop-filter:var(--blur-12)} #preview-bar > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #preview-bar button{flex:none} #preview-bar .short{display:none} @container stage (max-width:1240px){ #preview-bar .long{display:none} #preview-bar .short{display:block} } /* v113. The switcher — the same four choices as small chips, so trying a different one is a click, never a trip back through the menu. Overrides the ellipsis rule above: this span holds buttons, not text. */ #preview-bar .pv-switch{display:flex;gap:var(--s-3);overflow:visible;flex:none} .pv-chip{padding:var(--s-21) var(--s-5);border-radius:var(--pill);font:var(--fw-semibold) var(--fs-11) var(--ui);color:var(--white);background:var(--on-dark-16);box-shadow:var(--ring-chip)} .pv-chip.on{background:var(--white);color:var(--ink)} @container stage (max-width:1240px){ #preview-bar .pv-switch{display:none} } /* On a phone the row has no width to give: the notice takes a line of its own under the chips rather than pushing the room name off the screen. */ @media(max-width:900px){ #topleft{flex-wrap:wrap;row-gap:var(--s-4)} #preview-bar{order:9;flex:1 0 100%;justify-content:space-between} } #preview-bar button{padding:var(--s-17) var(--s-6);border-radius:var(--pill);font:var(--fw-semibold) var(--fs-12) var(--ui);color:var(--ink);background:var(--white)} .menu button{position:relative} /* One responsive message region. Connection, save, and transient messages stack instead of occupying the same corners or covering the phone header. */ #status-stack{position:absolute;right:var(--s-10);top:var(--s-10);z-index:var(--z-toast);display:grid;justify-items:end;gap:var(--s-3);width:min(calc(100% - 40px),46ch);max-height:calc(100% - 120px);overflow-y:auto;overscroll-behavior:contain;pointer-events:none} #conn{position:static;max-width:100%;font:var(--fw-medium) var(--fs-13) var(--ui);color:var(--hi);background:var(--glass-solid);box-shadow:var(--ring);padding:var(--s-25) var(--s-7);border-radius:var(--r);text-align:left} #conn.removed{background:var(--coral);color:var(--on-accent)} #savestate{position:static;max-width:100%;font:var(--fw-medium) var(--fs-12) var(--ui);color:var(--hi);background:var(--glass-solid);box-shadow:var(--ring);padding:var(--s-17) var(--s-5);border-radius:var(--r);opacity:.9;text-align:left} #savestate.failed{background:var(--coral);color:var(--on-accent)} /* The venue's only way of telling you something, so it is the loudest thing on the floor rather than the quietest. It was a dark chip on a dark painting, low over the dock, where a room full of candles and snow hid it — a full room and a moved arrival both went unread. Now it wears the same white-on-charcoal the primary buttons wear (inverted with the theme by --solid/--on-solid), and sits top right of the FLOOR, clear of the sidebar: the one corner the venue puts nothing else in. `#toast` is a child of #stage, which ends where the sidebar begins, so `right` here is already outside it. */ /* On the floor's grid, not beside it. Everything the venue puts over a room starts at 20 from the edge and the top row runs 20-70: #topleft, #viewdock and the left rail all do. This sat at top:52, lined up with nothing, which is what reads as an element bolted on afterwards. It takes the top row's right end, and #savestate - the only thing that was at 14 - comes onto the same gutter underneath it. */ #toast{position:static;max-width:100%;font:var(--fw-semibold) var(--fs-14)/var(--lh-1-45) var(--ui); /* Not --solid/--on-solid. Those follow the theme, and the theme does not reach the floor: the room's picture is the same painted, mostly dark scene in light mode as in dark, so the light theme turned this into a charcoal chip on a charcoal cathedral — the exact thing being fixed. White always, charcoal text (15.9:1), with a hairline so it still holds an edge over snow. */ color:var(--ink);background:var(--white); box-shadow:var(--elev-toast); /* 13/20 puts a one-line toast at 46px, the height of the room chip it is now level with, on that row's 20px horizontal padding. The radius is half that height: a stadium while it is one line, like every other chip on this row, and a well-rounded card once it wraps. */ padding:var(--s-26) var(--s-10);border-radius:var(--r-23);opacity:0;pointer-events:none; /* 46ch, not 70% of the floor. At 70% the longest of these ran a 643px line across the top of the room; on a phone the same rule squeezed it to 188px and five stacked lines over your own face. */ text-align:left; transform:translateY(-8px);transition:opacity var(--t-panel),transform var(--t-panel) var(--ease-press)} #toast.on{opacity:1;transform:none} /* v142. A toast that carries a choice (card trade Accept/Decline, "Block too?" after a report) must be pressable and readable: the toast itself ignores the pointer so it never blocks the floor, and .btn.plain is white-on-transparent, which vanished on this always-white chip. */ #toast.on button{pointer-events:auto} #toast .btn{margin:var(--s-2) 0 0 var(--s-2)} #toast .btn.plain{color:var(--ink);box-shadow:var(--ring-toast-btn)} /* Wide only. The toast now holds the top row's right end, so the other top-right chip moves onto the same 20px gutter beneath it instead of sharing the corner. Narrow layouts keep their own stacking: there the toast sits below the header band, not in it. */ @media (prefers-reduced-motion:reduce){#toast{transform:none;transition:opacity var(--t-panel)}} /* v135. "How it works" moved off the sidebar header — #floor-help is a child of #stage (same as #toast above), so `right` already sits outside the sidebar; bottom-right, the 20px gutter every floor corner uses, clear of the centred #dock (docs/ui-backlog.md's "Help button"). */ #floor-help{position:absolute;right:var(--s-10);bottom:var(--s-10);z-index:var(--z-dock);display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-7);height:34px;border-radius:var(--pill);color:var(--fg-2);font:var(--fw-semibold) var(--fs-13) var(--ui);white-space:nowrap} #floor-help:hover{color:var(--hi)} #floor-help .i{width:16px;height:16px} #shout{position:absolute;left:50%;top:var(--s-28);transform:translateX(-50%);z-index:var(--z-floor-ui);display:flex;align-items:center;gap:var(--s-5);background:var(--accent);color:var(--on-accent);padding:var(--s-5) var(--s-9);border-radius:var(--pill);font:var(--fw-bold) var(--fs-19) var(--ui)} /* v64. Venue-wide, so it reads differently from #shout (a ROOM's own megaphone, in the accent colour): the glass panel every modal-adjacent banner already uses (#hint), and it carries its own dismiss rather than fading like a toast — a con-wide notice is read, not glanced at. Sits above #shout (higher z-index) on the rare visit both are true at once. */ #annc{position:absolute;left:50%;top:var(--s-28);transform:translateX(-50%);z-index:var(--z-hud);display:flex;align-items:center;gap:var(--s-6); max-width:min(calc(100% - 40px),64ch);padding:var(--s-6) var(--s-6) var(--s-6) var(--s-9); background:var(--glass-solid);box-shadow:var(--elev-hint);border-radius:var(--r-3xl); font:var(--fw-medium) var(--fs-14)/var(--lh-1-4) var(--ui);color:var(--hi)} #annc.hidden{display:none} #annc>.i{flex:none;width:18px;height:18px;color:var(--accent)} #annc span{flex:1;min-width:0} #annc button{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--fg-3)} #annc button:hover{background:var(--hover);color:var(--hi)} /* The tip sits in the row with the name, not down on the floor: it is the first thing anyone reads, and at the bottom it was under the eye and beside the controls it was explaining. It shrinks to fit whatever the room name left behind, and it is the first thing dropped when the row runs out. */ #tip{position:relative;z-index:var(--z-floor-ui);flex:0 1 auto;min-width:0;max-width:330px; background:var(--glass-solid);box-shadow:var(--ring);border-radius:var(--r); padding:var(--s-18) var(--s-29) var(--s-18) var(--s-26);font:var(--fw-regular) var(--fs-12-5)/var(--lh-1-4) var(--ui);color:var(--fg-2)} #tip button{position:absolute;right:var(--s-25);top:var(--s-25);color:var(--fg-3)} @container stage (max-width:900px){ #topleft #tip{display:none} } /* Reactions: they leave from your own face, drift up with a little sway, and are gone. Nothing to dismiss, nothing that stacks up on the floor. */ .react{position:absolute;z-index:var(--z-4);pointer-events:none;font-size:var(--fs-34);line-height:var(--lh-1); filter:var(--drop-react);animation:lh-react var(--t-1900) var(--ease-move) forwards} /* is italic, and an emoji has no italic face — the browser synthesises one by skewing the glyph, which is why every reaction leaned. */ .react i{display:block;font-style:normal;animation:lh-sway var(--t-1050) var(--ease-in-out) infinite alternate} @keyframes lh-react{ 0%{transform:translate(-50%,-50%) scale(.3);opacity:0} 12%{transform:translate(-50%,-60%) scale(1.12);opacity:1} 22%{transform:translate(-50%,-72%) scale(1)} 72%{opacity:1} 100%{transform:translate(-50%,-215%) scale(.86);opacity:0}} @keyframes lh-sway{from{transform:translateX(-11px) rotate(-9deg)}to{transform:translateX(11px) rotate(9deg)}} @media (prefers-reduced-motion: reduce){ .react{animation:lh-react-quiet var(--t-1400) var(--ease-out) forwards}.react i{animation:none} @keyframes lh-react-quiet{0%{transform:translate(-50%,-60%) scale(.8);opacity:0}20%{opacity:1;transform:translate(-50%,-70%) scale(1)}100%{transform:translate(-50%,-130%);opacity:0}}} /* the tray sits above the dock, anchored to the button that opens it */ #reacts{position:absolute;bottom:calc(100% + var(--s-5));left:50%;transform:translateX(-50%);z-index:var(--z-bar);display:flex;gap:var(--s-1);padding:var(--s-25);border-radius:var(--pill)} #reacts.hidden{display:none} #reacts button{width:44px;height:44px;border-radius:50%;font-size:var(--fs-23);line-height:var(--lh-1);display:grid;place-items:center; transition:background var(--t-base),transform var(--t-base) var(--ease-press)} #reacts button:hover{background:var(--hover);transform:translateY(-3px) scale(1.12)} /* On a phone the tray clears the view cluster instead of covering it. */ @media(max-width:900px){#reacts{max-width:calc(100vw - 24px);overflow-x:auto}#reacts button{width:40px;height:40px;flex:none}} /* ---------- bubbles ---------- */ .bubble{position:absolute;width:var(--d,80px);height:var(--d,80px);margin:calc(var(--d,80px)/-2) 0 0 calc(var(--d,80px)/-2);border-radius:50%;cursor:pointer;transition:opacity var(--t-panel),filter var(--t-panel);z-index:var(--z-2)} /* How far your voice carries, shown while you are moving yourself. Everyone inside the circle can hear you; past its edge you are silent to them. */ .bubble .range{position:absolute;left:50%;top:50%;width:var(--range,1400px);height:var(--range,1400px); margin:0;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:var(--z-under); background:var(--on-dark-10); box-shadow:var(--ring-range); opacity:0;transition:opacity var(--t-ease) var(--ease)} .bubble.drag .range{opacity:1} @media (prefers-reduced-motion: reduce){.bubble .range{transition:none}} .bubble .disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--plum);display:grid;place-items:center;font:var(--fw-semibold) var(--fs-40) var(--ui);color:var(--white);box-shadow:var(--ring-disc)} .bubble .disc video{width:100%;height:100%;object-fit:cover} .bubble.me .disc video{transform:scaleX(-1)} /* v115. Speaking ring and pulse: gold, not red. */ .bubble.speaking .disc{box-shadow:var(--ring-speaking);animation:lh-pulse var(--t-1150) var(--ease-out) infinite} @keyframes lh-pulse{0%{box-shadow:var(--ring-pulse-mid)}70%{box-shadow:var(--ring-pulse-end)}100%{box-shadow:var(--ring-pulse-end)}} @media (prefers-reduced-motion: reduce){.bubble.speaking .disc{animation:none}} .bubble.staff{--d:104px} .bubble .ring{position:absolute;inset:calc(var(--s-7) * -1);border-radius:50%;border:3px solid color-mix(in srgb,var(--white) calc(var(--vol,0) * 100%),transparent);pointer-events:none;transition:border-color var(--t-ease)} /* v197. Munk, from a live screenshot: a plain black circle sat between the face and the "You" name label, and its icon read as invisible — the mic badge used --coral-icon for its "off" state, which resolves through --accent-icon to --hi; on the light theme's default Theme swatch --hi is the same near-black as this badge's own --ink background, so a dark icon sat on a dark circle. The badge's circle is fixed --ink in every theme (unlike --panel/--paper, which flip), so its icon needs a fixed-contrast colour too, not one that rides the room's accent: --on-dark-85 (white at 85%, the existing ramp's closest step to the old 70% mark) for the muted/off glyph, full --white for a live mic — always readable over --ink regardless of theme or accent. Moved off the seam between face and name to the lower-right shoulder of the face circle, the same corner video-call apps use, mirroring .shield's own top-left placement below. */ .bubble .badges{position:absolute;right:calc(var(--s-2) * -1);bottom:calc(var(--s-2) * -1);display:flex;gap:var(--s-3);z-index:var(--z-2)} .bubble .badges span{width:28px;height:28px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:var(--on-dark-85); box-shadow:var(--shadow-badge)} .bubble .badges span.on{color:var(--white)} .bubble .badges svg{width:15px;height:15px} /* A rank is readable before you click it: a chip on the shoulder of the face. Gold shield for the host, green sword for a Knight — both staff, both able to act on you. An Author wears a plum pen: a different MARK, not a different colour of the same one, because they are not staff and the chip should not read as a rank of one. White on all three clears 3:1 as a graphical object (measured: 6.39 green, 6.59 plum, 3.46 gold). v57.2 retired the moderator's blue with the rank itself. */ .bubble .shield{position:absolute;left:calc(var(--s-2) * -1);top:calc(var(--s-2) * -1);width:26px;height:26px;border-radius:50%;display:grid;place-items:center; color:var(--white);background:var(--knight-green);box-shadow:var(--shadow-shield);z-index:var(--z-2)} .bubble .shield.host{background:var(--host-gold)} .bubble .shield.author{background:var(--author-plum)} .bubble .shield svg{width:15px;height:15px} /* v33. Availability, a small pill under the name. */ .bubble .avail{position:absolute;left:50%;top:100%;transform:translate(-50%,34px);white-space:nowrap;font:var(--fw-semibold) var(--fs-11)/var(--lh-1) var(--ui); padding:var(--s-17) var(--s-18);border-radius:var(--r-999);background:var(--glass-solid);color:var(--hi);box-shadow:var(--ring);pointer-events:none} .bubble .avail.a3{color:var(--fg-3)} .bubble .name{position:absolute;left:50%;top:100%;transform:translate(-50%,14px);white-space:nowrap;font:var(--fw-semibold) var(--fs-13) var(--ui);color:var(--white);text-shadow:var(--text-shadow-name)} .bubble.me{cursor:grab;z-index:var(--z-3)} .bubble.me.drag{cursor:grabbing} /* What was just said, over the head that said it. Scaled by --inv-z so the words stay 15px whether the floor is at 40% or 200%; the pointer is a rotated square. It never takes the click, the avatar under it does. */ .bubble .say{position:absolute;left:50%;bottom:calc(100% + var(--s-5));transform:translateX(-50%) scale(var(--inv-z,1));transform-origin:50% 100%; max-width:240px;width:max-content;padding:var(--s-4) var(--s-6);border-radius:var(--r-3xl);background:var(--on-dark-96);color:var(--dusk); font:var(--fw-medium) var(--fs-15)/var(--lh-1-35) var(--ui);white-space:normal;overflow-wrap:anywhere;text-align:center;box-shadow:var(--elev-say); pointer-events:none;z-index:var(--z-4);animation:lh-say var(--t-settle) var(--ease-out)} .bubble .say::after{content:'';position:absolute;left:50%;bottom:calc(var(--s-3) * -1);width:12px;height:12px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:var(--r-xs)} .bubble .say.fading{opacity:0;transition:opacity var(--t-400)} @keyframes lh-say{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}} @media (prefers-reduced-motion: reduce){.bubble .say{animation:none}.bubble .say.fading{transition:none}} .bubble .tag{position:absolute;right:calc(var(--s-5) * -1);top:calc(var(--s-5) * -1);display:grid;place-items:center;min-width:34px;height:34px;background:var(--violet);color:var(--white);font:var(--fw-bold) var(--fs-19)/var(--lh-1) var(--ui);padding:0 var(--s-3);border-radius:var(--r-999);border:3px solid var(--ink);box-shadow:var(--elev-tag)} .share{position:absolute;background:var(--black);border:3px solid var(--white);border-radius:var(--r-2xl);overflow:hidden;z-index:var(--z-2);width:480px;aspect-ratio:16/9} .share video{width:100%;height:100%;object-fit:contain} .share .cap{position:absolute;left:var(--s-4);top:var(--s-4);font:var(--fw-semibold) var(--fs-12) var(--ui);background:var(--glass);padding:var(--s-2) var(--s-5);border-radius:var(--r-999)} .youpin{position:absolute;width:64px;height:64px;margin:calc(var(--s-30) * -1) 0 0 calc(var(--s-30) * -1);border-radius:50%;background:var(--pin);opacity:.5;display:grid;place-items:center;color:var(--white);pointer-events:none;z-index:var(--z-1)} /* pins */ .pin{position:absolute;z-index:var(--z-1);border-radius:var(--r);overflow:hidden;background:var(--paper);box-shadow:var(--elev-pin);color:var(--ink-2);font:var(--fw-regular) var(--fs-15)/var(--lh-1-5) var(--display)} /* A note is paper on a dark floor, so it is light whatever the background is. Long notes scroll inside the note rather than growing it - the size an admin set is the size it occupies on the floor. */ .pin.note{background:var(--note-bg,#F3E2AE);color:var(--note-ink);display:grid;grid-template-rows:auto minmax(0,1fr); font:var(--fw-regular) var(--fs-15)/var(--lh-1-55) var(--ui);box-shadow:var(--elev-note)} .pin.note h4{margin:0;padding:var(--s-7) var(--s-9) 0;font:var(--fw-bold) var(--fs-16)/var(--lh-1-3) var(--ui);color:var(--note-ink-strong)} .pin.note h4:empty{padding:0} .editing-pins .pin.note h4:empty{padding:var(--s-7) var(--s-9) 0;min-height:1em} .pin.link .lktxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pin.note .body{min-height:0;padding:var(--s-7) var(--s-9) var(--s-8);margin:0;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere; scrollbar-width:thin;scrollbar-color:var(--shade-30) transparent} .pin.note .body::-webkit-scrollbar{width:8px} .pin.note .body::-webkit-scrollbar-thumb{background:var(--shade-28);border-radius:var(--r-lg);border:2px solid transparent;background-clip:padding-box} .pin.note.has-title .body{padding-top:var(--s-4)} .notepick{display:flex;gap:var(--s-5);flex-wrap:wrap} .notepick button{width:38px;height:38px;border-radius:50%;box-shadow:var(--ring)} .notepick button[aria-pressed=true]{outline:2px solid var(--white);outline-offset:3px} .pin.link{display:flex;align-items:center;gap:var(--s-5);padding:0 var(--s-9);font-weight:var(--fw-semibold);cursor:pointer;text-decoration:none;color:var(--ink-2)} .pin.link:hover{background:var(--paper-2)} .pin.image img{width:100%;height:100%;object-fit:cover;display:block} /* v68 / Phase 3. No image backups — a pin whose src the Sweep has since garbage-collected (venue.js removes the broken itself) shows a neutral fill rather than empty space or a broken-image icon. */ /* v126. Ring added: --paper-2 == the pin surface now, so the missing-image fallback needs its own edge to read as a placeholder. */ .pin.image.missing{background:var(--paper-2);box-shadow:var(--ring)} .pin.image.missing::after{content:'';position:absolute;inset:22%;border-radius:var(--r);background:var(--ink-2);opacity:.14} .pin iframe{width:100%;height:100%;border:0;display:block} /* v68 / Phase 3. Onload animation — a pin fades and scales in once, on room entry only (venue.js's pin-enter class, added only inside enterRoom, never by redrawPins). The delay itself is written onto the element inline (pinStaggerDelayMs); this only supplies the motion. */ .pin.pin-enter{animation:lh-pin-in var(--t-360) var(--ease-arrive) backwards} @keyframes lh-pin-in{from{opacity:0;transform:scale(.92) translateY(6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){.pin.pin-enter{animation:none;opacity:1;transform:none}} /* Anything placed can be opened by the person who may edit it - a pencil on the thing itself, rather than a list three modals away. */ /* Same corner on every kind of thing, so it is one place to look. */ .pin .pedit{position:absolute;right:calc(var(--s-4) * var(--inv-z,1));top:calc(var(--s-4) * var(--inv-z,1));width:30px;height:30px;display:none;place-items:center;border-radius:50%; transform:scale(var(--inv-z,1));transform-origin:100% 0; color:var(--white);background:var(--shade-55);box-shadow:var(--ring);-webkit-backdrop-filter:var(--blur-8);backdrop-filter:var(--blur-8);z-index:var(--z-3)} .pin .pedit svg{width:15px;height:15px} .pin .pedit:hover{background:var(--accent)} /* On hover of the thing itself, on every kind of thing. It used to sit there permanently on four pin types, which read as clutter on a busy floor; and while arranging it stays put, because that is the mode where you are working on the items rather than looking at the room. */ /* v47. Somebody else's, and not open for anyone to edit: no pencil, no move frame, no grip. It is a thing to read. */ .pin.locked .pedit,.pin.locked .mv,.pin.locked .mvtag,.pin.locked .grip{display:none!important} #world.editing-pins .pin.locked{outline:none;cursor:default} body.can-edit-content .pin:hover .pedit, body.can-edit-content .pin:focus-within .pedit, body.can-edit-content #world.editing-pins .pin .pedit{display:grid} /* v112. A privacy square. It carries the shared .pin class (venue.js's huddleAreaEl) so the arrival animation above, the arrange-mode drag band and corner grip further down, and the .locked rule just above all apply unchanged — only the shape it draws and the fact that it holds no words of its own are different. v120: drawn as a rounded square, matching the square membership test currentSquareArea now reads (|dx|<=a.r && |dy|<=a.r) instead of the old Math.hypot(...) <= a.r circle, so what is on screen and what actually gates the door still agree — just as a square now, not a circle. */ .pin.harea{background:none;box-shadow:none;border-radius:var(--r-5xl);overflow:visible; pointer-events:none;display:grid;place-items:center;color:var(--hi)} .pin.harea::before{content:"";position:absolute;inset:0;border-radius:var(--r-5xl); background:var(--info-a10);border:2px dashed var(--info-a60)} /* Closed reads as a different boundary, not merely a locked note: a solid ring instead of a dashed one, and the brand gold every other "closed to you" surface in this venue already uses (v115: was red), rather than inventing a third colour for the same idea. */ .pin.harea.closed::before{background:var(--accent-a8);border-style:solid;border-color:var(--accent-a65)} /* The boundary is real for an attendee too, so the chip and ring stay visible to them — but they cannot drag or resize a square any more than they could before this version, so the element takes no pointer events at all except for whoever paintEditAffordances has already marked as an editor (body.can-edit-content), the same gate a pin's own .pedit uses. */ body.can-edit-content .pin.harea{pointer-events:auto} /* v120: a centered shield (open) or lock (closed) icon, larger than the chip's old inline one, sitting in the square's own grid center — .pin.harea is already display:grid;place-items:center, so a plain grid child needs no positioning of its own. */ .harea-icon{position:relative;z-index:var(--z-1);width:28px;height:28px} .harea-icon svg{width:28px;height:28px} /* v120: the label chip moves off the center (now the icon's spot) and straddles the bottom border instead — the classic label-on-an-edge look. .pin.harea is itself absolutely positioned (inline left/top), so it is already a containing block for this. */ .harea-chip{position:absolute;z-index:var(--z-1);left:50%;bottom:0;transform:translate(-50%, 50%); display:inline-flex;align-items:center;gap:var(--s-3); max-width:calc(100% - 16px);padding:var(--s-2) var(--s-5);border-radius:var(--pill);overflow:hidden; background:var(--glass-solid);color:var(--hi);font:var(--fw-semibold) var(--fs-11) var(--ui);white-space:nowrap; text-overflow:ellipsis;pointer-events:none} /* The heading owns the top-left of a note, so the pencil takes the other corner. Padding could not win it back: .pin.note h4 sets the shorthand later in this sheet and a shorthand resets what padding-left had set. */ .pin .lab{position:absolute;left:var(--s-4);top:var(--s-4);font:var(--fw-semibold) var(--fs-11) var(--ui);background:var(--glass);color:var(--white);padding:var(--s-2) var(--s-4);border-radius:var(--r-999);pointer-events:none} /* Your own volume for a video, on the video. It is the one control a viewer always has, whatever the room's audio rule says. */ .pin.video .vmute{position:absolute;right:var(--s-4);bottom:var(--s-4);width:34px;height:34px;display:grid;place-items:center;border-radius:50%; color:var(--white);background:var(--shade-55);box-shadow:var(--ring);-webkit-backdrop-filter:var(--blur-8);backdrop-filter:var(--blur-8);z-index:var(--z-2)} .pin.video .vmute:hover{background:var(--shade-75)} .pin.video .vmute svg{width:17px;height:17px} .pin.video .vmute.off{color:var(--coral-icon)} .pin.video .far{position:absolute;left:var(--s-4);bottom:var(--s-4);font:var(--fw-semibold) var(--fs-11) var(--ui);background:var(--glass);color:var(--white);padding:var(--s-2) var(--s-4);border-radius:var(--r-999);pointer-events:none} /* profile popover (white, like theirs) */ /* The card leads with the person: their face at a size you can read, their name, and one line saying who they are here. Everything else is a control under a rule. */ #pop{position:absolute;z-index:var(--z-dock);width:264px;background:var(--paper);border-radius:var(--r-3xl);padding:var(--s-7); box-shadow:var(--elev-pop);display:grid;gap:var(--s-6);color:var(--ink-2)} #pop .pop-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-20);padding-right:var(--s-13)} /* v126. Was a fixed light-on-dark hairline that vanished on white in light theme; --ring is themed so it holds on both. */ #pop .pop-face{width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--paper-3); display:grid;place-items:center;box-shadow:var(--ring)} #pop .pop-face .av{width:100%;height:100%} #pop h3{margin:0;font:var(--fw-semibold) var(--fs-15)/var(--lh-1-25) var(--ui);color:var(--ink-3);overflow-wrap:anywhere} #pop .pop-role{font:var(--fw-medium) var(--fs-12) var(--ui);color:var(--ink-4)} #pop p{margin:0;font:var(--fw-regular) var(--fs-13)/var(--lh-1-5) var(--ui);color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere} #pop .pop-vol{display:grid;gap:var(--s-25);padding-top:var(--s-6);border-top:1px solid var(--line)} #pop .lbl{display:flex;justify-content:space-between;font:var(--fw-medium) var(--fs-12) var(--ui);color:var(--ink-4)} #pop .lbl b{font-weight:var(--fw-semibold);color:var(--ink-2);font-variant-numeric:tabular-nums} /* v126. Ring added: --paper-3 == the popover's own surface now. */ #pop .track{height:28px;border-radius:var(--r-3xl);background:var(--paper-3);box-shadow:var(--ring);display:flex;align-items:center;padding:0 var(--s-6)} #pop input[type=range]{width:100%;accent-color:var(--violet)} #pop .pop-actions{display:grid;gap:var(--s-3);padding-top:var(--s-6);border-top:1px solid var(--line)} #pop .pop-actions:empty{display:none} #pop .pop-actions .btn{height:36px;font-size:var(--fs-13);width:100%} /* v60c. Report is not a third thing to do with somebody. It sits under its own rule, with no pill and no fill, in the muted ink — a word you find when you are looking for it rather than an offer sitting level with "Wave". */ #pop .pop-actions .btn.report{height:auto;margin-top:var(--s-4);padding-top:var(--s-8); border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none; font:var(--fw-medium) var(--fs-12) var(--ui);color:var(--ink-4)} #pop .pop-actions .btn.report:hover,#pop .pop-actions .btn.report:focus-visible{background:none;color:var(--hi)} #pop .x{position:absolute;right:var(--s-5);top:var(--s-5);width:26px;height:26px;border-radius:50%;display:grid;place-items:center; color:var(--ink-4);transition:background var(--t-base),color var(--t-base)} #pop .x:hover{background:var(--hover);color:var(--ink-3)} /* ================= sidebar ================= */ /* The sidebar does one job: where the rooms are and who is in them. The personal controls moved to the floor's dock. */ #side{background:var(--panel);display:grid;grid-template-rows:auto auto 1fr auto;min-height:0;min-width:0;overflow:hidden} /* v116. The venue name and the head-count chip are gone — both were a duplicate of what the Venue menu and each room already show. v135. "How it works" left too (floor's own #floor-help) — Reports is the one labelled pill left, plus the close button, one row. Padding is even (s-6 top/bottom) and its sides match .head's own s-8 margin below, so both rows' edges line up instead of drifting — the "3 widths" docs/ui-backlog.md flagged included this row sitting 4px off the tab row under it. */ #side .brandbar{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-6) var(--s-8);min-width:0} #side .brandbar #b-me,#side .brandbar #side-close{flex:none} #side .brandbar #room-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--fw-medium) var(--fs-12) var(--ui);color:var(--fg-3)} #side .brandbar #b-me{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--fg-2)} /* v126. Ring added: --group == the sidebar's own surface now, and a segmented/pill control still has to read as a control. */ #side .brandbar .bb-btn{flex:none;display:flex;align-items:center;gap:var(--s-3);height:34px;padding:0 var(--s-6);border-radius:var(--pill);background:var(--group);box-shadow:var(--ring);color:var(--fg-2);font:var(--fw-semibold) var(--fs-13) var(--ui);white-space:nowrap} #side .brandbar .bb-btn .i{width:16px;height:16px} #side .brandbar .bb-btn:hover{background:var(--hover);color:var(--hi)} /* Reports gets the venue accent — the one button in this row that means "something is waiting," same token family v115 gave every other accent (v136: that token family now follows cfg.space.accent, not always gold). */ #side .brandbar #bb-reports{color:var(--coral-icon)} #side .brandbar #bb-reports:hover{background:var(--coral-soft)} #side .brandbar #bb-reports .tabcount{margin-left:var(--s-1)} #side .brandbar .spacer{flex:1} /* v135. Round now, not a rounded square, for consistency — though `#side #side-close{display:none!important}` (below, v42) means this element is never actually the one on screen; #side-open (also fixed this version, further down) is the collapse icon a viewer sees at every width. */ #side .brandbar #side-close{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--fg-2)} #side .brandbar #side-close:hover{background:var(--hover);color:var(--hi)} #side .brandbar #side-close .i{width:20px;height:20px} /* Two tabs read as one segmented control, not two loose buttons. */ /* v126. Ring added, same reason as .bb-btn above. */ #side .head{display:flex;align-items:center;gap:var(--s-21);margin:0 var(--s-8) var(--s-7);padding:var(--s-21);border-radius:var(--pill);background:var(--group);box-shadow:var(--ring);min-width:0} #side .head .spacer{flex:1} #side .head button{flex:1;height:34px;border-radius:var(--pill);display:flex;align-items:center;justify-content:center;gap:var(--s-4);font:var(--fw-semibold) var(--fs-13) var(--ui);color:var(--fg-3);transition:background var(--t-base),color var(--t-base)} #side .head button .i{width:16px;height:16px} #side .head button:hover{color:var(--hi)} /* The venue's own button language is a white pill; gold at 13px carries only ~2:1 against white (v115: worse than the red it replaced), so the selected tab wears the pill instead. */ #side .head button.on{background:var(--solid);color:var(--on-solid)} /* v64. An open-count. Small enough to sit in a pill next to its label, hidden at zero so a quiet venue's sidebar reads the same as it always has. v116: moved off the (now-deleted) Reports tab onto the header's own Reports button, so the rule is no longer scoped to `.head`. */ .tabcount{padding:1px var(--s-3);border-radius:var(--r-999);background:var(--coral-solid);color:var(--on-accent);font:var(--fw-bold) var(--fs-11)/var(--lh-1-5) var(--ui);min-width:16px;text-align:center} .tabcount.hidden{display:none} /* v167. A count landing (or a fresh unread row mounting one) pops rather than just appearing — this animation plays whenever the element starts matching :not(.hidden), whether that's a class toggle or a brand-new node arriving already unhidden. */ .tabcount:not(.hidden){animation:lh-badge-pop var(--t-panel) var(--ease-pop)} @keyframes lh-badge-pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){.tabcount:not(.hidden){animation:none}} #side .head .qwrap{position:relative;display:flex;align-items:center} #side .head .qwrap input{width:0;opacity:0;transition:opacity var(--t-ease);background:transparent;border:0;color:var(--hi);font:var(--fw-regular) var(--fs-15) var(--ui);padding:0} #side .head .qwrap.open input{width:150px;opacity:1;margin-left:var(--s-4)} .pane{overflow:auto;min-height:0;padding:0 var(--s-5) var(--s-5);scrollbar-gutter:stable} /* A group heading breathes above and sits close to what it names. */ .grpbox{border-radius:var(--r-xl)} .grpbox + .grpbox{margin-top:var(--s-16)} .grp{display:flex;align-items:center;gap:var(--s-4);height:22px;margin:0 0 var(--s-3);padding:0 var(--s-4); font:var(--fw-semibold) var(--fs-11) var(--ui);letter-spacing:var(--ls-01em);text-transform:uppercase;color:var(--fg-3)} .grp svg{width:13px;height:13px;color:var(--fg-3)} .rm{display:flex;align-items:center;gap:var(--s-20);height:46px;padding:0 var(--s-6);border-radius:var(--r-xl);color:var(--fg-2);cursor:pointer;width:100%;text-align:left; transition:background var(--t-base),color var(--t-base)} .rm:hover{background:var(--hover);color:var(--hi)} /* An editor can pick a room up in the list it lives in. The line shows the seat it will take; the row being carried fades. */ .rm[draggable=true]{cursor:grab} .rm[draggable=true]:active{cursor:grabbing} .rm.dragging{opacity:.4} .rm.dropbefore{box-shadow:inset 0 3px 0 var(--accent)} .rm.dropafter{box-shadow:inset 0 -3px 0 var(--accent)} /* v126. Was --group; --group is now the sidebar's own surface (solid), so it could no longer mark which room is selected. --hover is interaction feedback, not a surface — an active row reads the same way a hovered one does. */ .rm.on{background:var(--hover);color:var(--hi)} .rm .chev{display:none} .rm .ico{flex:none;width:22px;text-align:center;font-size:var(--fs-16);line-height:var(--lh-1);filter:saturate(.9)} .rm .nm{flex:1;font:var(--fw-semibold) var(--fs-14) var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} /* Presence, not a form field: the number only appears when someone is there. */ /* How full, always — the number you are and the number it holds, with the ceiling set back so the row still reads as a room and not a form field. */ .rm .ct{flex:none;display:flex;align-items:baseline;gap:var(--s-17);font:var(--fw-semibold) var(--fs-12) var(--ui);color:var(--fg-2);font-variant-numeric:tabular-nums} .rm .ct i{font-style:normal;font-weight:var(--fw-medium);color:var(--fg-3);opacity:.75} .rm .ct::before{content:"";align-self:center;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55} .rm .ct.empty{color:var(--fg-3)} .rm .ct.empty::before{opacity:.28} .rm .ct.full,.rm .ct.full i{color:var(--coral-icon);opacity:1} .rm.on .ct{color:var(--coral-icon)} /* v126. Ring added: --group == the sidebar's own surface now. */ .rm .tagx{flex:none;font:var(--fw-semibold) var(--fs-10) var(--ui);letter-spacing:var(--ls-008em);text-transform:uppercase;color:var(--fg-3); padding:var(--s-21) var(--s-25);border-radius:var(--pill);background:var(--group);box-shadow:var(--ring)} /* v66b. An icon-only tag — the reason is the title/aria-label, on hover or tap, never a second line of text in a rail that is already tight. */ .rm .tagx.lockmark{display:inline-flex;align-items:center;justify-content:center;padding:var(--s-2)} .rm .tagx.lockmark svg{width:10px;height:10px} /* v67b. The host-present light (owner_present, venue.js renderRooms) — a lit dot only, on the sidebar row and on an overview card; there is nothing to show when the host is not there, so the element is only ever drawn on. */ .tagx.hostdot,.ovcard .hostdot{width:8px;height:8px;padding:0;border-radius:50%;background:var(--live);box-shadow:var(--ring-live)} .grp.clickable{cursor:pointer;display:flex;align-items:center;gap:var(--s-3);background:none;border:0;font:inherit;text-align:left;width:100%} .grp.clickable:hover{color:var(--fg-1)} /* The people in the room you are standing in, tucked under it. Closed, they are a row of overlapping faces; the sixth and seventh fade out to say the row is not the whole room, and the count on the room row above gives the number. */ .ppl{margin:var(--s-1) 0 var(--s-1);padding:0 0 0 var(--s-6)} .ppl .stack{display:flex;align-items:center;height:36px;padding:0 var(--s-5) 0 var(--s-4);border-radius:var(--r-lg);width:100%;cursor:pointer} .ppl .stack:hover{background:var(--hover)} .ppl .stack .avatar{width:24px;height:24px;flex:none;font-size:var(--fs-10);box-shadow:0 0 0 2px var(--panel)} .ppl .stack .avatar + .avatar{margin-left:calc(var(--s-18) * -1)} .ppl .stack .avatar:nth-child(6){opacity:.5} .ppl .stack .avatar:nth-child(7){opacity:.22} .ppl .stack .chev{margin-left:auto;width:15px;height:15px;flex:none;color:var(--fg-3);transition:transform var(--t-base)} .ppl.open .stack .chev{transform:rotate(180deg)} /* The list opens rather than appears. A grid row animates from 0fr to 1fr, so the names slide out of the row of faces they belong to instead of the panel jumping by their height. */ .ppl .list{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0; transition:grid-template-rows var(--t-panel) var(--ease-move),opacity var(--t-base) var(--ease),margin-top var(--t-panel)} .ppl .list > *{min-height:0} .ppl .list .inner{display:grid;gap:1px;overflow:hidden;min-height:0} .ppl.open .list{grid-template-rows:1fr;opacity:1;margin-top:var(--s-1)} @media (prefers-reduced-motion: reduce){.ppl .list{transition:none}} .pp{display:flex;align-items:center;gap:var(--s-5);height:34px;padding:0 var(--s-5);border-radius:var(--r-lg);font:var(--fw-medium) var(--fs-13) var(--ui);color:var(--fg-2);width:100%;text-align:left} .pp:hover{background:var(--hover)} .pp .avatar{width:22px;height:22px;flex:none;font-size:var(--fs-10)} .pp .you{color:var(--fg-3);font-weight:var(--fw-regular)} .pp .nm{color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} #side .foot{padding:var(--s-5);display:grid;gap:var(--s-4);box-shadow:inset 0 1px 0 var(--line)} /* v167. The host's list, under the chat: a quiet block, text then one button. */ #list-card{display:grid;gap:var(--s-4);padding:var(--s-6);border-radius:var(--r-xl);background:var(--group);box-shadow:var(--ring);animation:lh-pane-in var(--t-panel) var(--ease-arrive)} #list-card.hidden{display:none} #list-card .lc-text{display:grid;gap:var(--s-1)} #list-card .lc-text b{font:var(--fw-semibold) var(--fs-14)/var(--lh-1-3) var(--ui);color:var(--hi)} #list-card .lc-text small{font-size:var(--fs-12);color:var(--fg-3)} #list-card .btn{width:100%;height:40px;font-size:var(--fs-14)} @media (prefers-reduced-motion: reduce){#list-card{animation:none}} #addroom,#venueadmin{display:flex;gap:var(--s-5);align-items:center;height:42px;padding:0 var(--s-6);border-radius:var(--r-xl);color:var(--fg-2);font:var(--fw-semibold) var(--fs-14) var(--ui);text-transform:none} #addroom:hover,#venueadmin:hover{background:var(--hover)} #venueadmin{color:var(--fg-3)} /* chat */ /* v141. Room/Direct sub-tabs, sticky at the top of #pane-chat so they stay put while either #chatlog or #dmpane scrolls under them — the same "outer chrome fixed, content scrolls" shape the drawer rail already keeps for its own header. */ .chat-subtabs{position:sticky;top:0;z-index:var(--z-1);display:flex;gap:var(--s-4);padding:var(--s-4) 0;background:var(--field)} .chat-subtabs button{display:flex;align-items:center;gap:var(--s-3);height:32px;padding:0 var(--s-6);border-radius:var(--r-3xl);color:var(--fg-3);font:var(--fw-semibold) var(--fs-13) var(--ui);background:transparent} .chat-subtabs button.on{color:var(--fg-1);background:var(--hover)} /* v166. #chatlog carries its own s-4 horizontal padding on top of .pane's (both #pane-rooms and #pane-chat share .pane's own inset); #dmpane had none of its own, so Direct sat s-4 closer to the sidebar edge than Room — the same inset token closes the gap. */ #dmpane{display:grid;gap:var(--s-4);padding:0 var(--s-4)} #dmthreads{display:grid} .dm-thread-row{cursor:pointer} .dm-thread-row:hover{background:var(--hover)} #dmthread-head{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) 0;font:var(--fw-semibold) var(--fs-14) var(--ui);color:var(--fg-1)} #dmthread-head [data-dm-back]{display:flex;color:var(--fg-3)} /* v142. The name grows to push Block/Unblock to the far side of the header, the same "chrome fixed, name fills the middle" shape a conversation's own header keeps everywhere else in the venue. */ #dmthread-head span{flex:1} /* Block is a consequence, not the header's main action: quiet, the same small underlined text Report uses under a message, never a pill that outweighs the person's own name. */ #dmthread-head [data-dm-block]{font:var(--fw-semibold) var(--fs-12) var(--ui);color:var(--fg-3);background:transparent;border:0;box-shadow:none;border-radius:0;padding:0;min-height:0;height:auto;width:auto;text-decoration:underline;text-underline-offset:2px} #dmthread-log{display:grid;gap:var(--s-5);padding:var(--s-4) 0} .dm-msg{padding-right:var(--s-11)} .dm-msg.me{color:var(--hi)} .dm-report-btn{margin-top:var(--s-2);font:var(--fw-semibold) var(--fs-11) var(--ui);color:var(--fg-4);background:transparent;text-decoration:underline;text-underline-offset:2px} .dm-privacy{padding:var(--s-4) 0} #dmblocked-line{padding:var(--s-4) 0} /* You › Blocked people — a face the size of a chat line's own avatar, inline with the name, the same "small round face beside text" shape .desk-face's own .av keeps at a larger size for Faces. */ [data-blocked] .av{width:28px;height:28px;vertical-align:middle;margin-right:var(--s-3)} #chatlog{display:grid;gap:var(--s-5);padding:var(--s-4) var(--s-4);align-content:end;min-height:100%;user-select:text;-webkit-user-select:text} /* v32. A message can be copied: select it, or press Copy. A link in it is a link, and the click goes through the Leaving card first. */ .msg{position:relative;padding-right:var(--s-11)} /* v126. Ring added: --field == the sidebar's own surface now. */ .msg .copy{position:absolute;right:0;top:0;height:24px;padding:0 var(--s-4);border-radius:var(--r-md);font:var(--fw-semibold) var(--fs-11) var(--ui);color:var(--fg-3);background:var(--field);box-shadow:var(--ring);opacity:0;transition:opacity var(--t-base)} .msg:hover .copy,.msg .copy:focus-visible{opacity:1} @media(hover:none){.msg .copy{opacity:.7}} .msg a.chatlink{color:var(--hi);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere} .msg{font:var(--fw-regular) var(--fs-14)/var(--lh-1-45) var(--ui);color:var(--fg-2);display:grid;gap:var(--s-1);min-width:0;overflow-wrap:anywhere} .msg b{font-weight:var(--fw-semibold);color:var(--hi)} .msg.sys{color:var(--fg-4);font-style:italic} /* v105. One field, the whole width. It grows with what is typed (chatGrow, venue.js) up to a few sentences, then scrolls; the send is a small icon inside it, solid only once there is something to send. v166. Munk, live pass: the textarea drew its own rounded, ringed "field" box sitting inside #side-foot, which already carries a divider of its own (.foot's inset box-shadow, above) — two boxes reading as one nested inside the other. The field's own background/ring/radius are gone; the whole lower block (#side-foot) IS the typing area now, and focus brightens that one divider (#side .foot:focus-within, below) instead of drawing a second box around the text. #dmform shares the textarea/send shape (it never had its own rule before this — a bare browser textarea, unstyled) so Direct gets the same treatment. */ #chatform,#dmform{position:relative;display:block;padding:0} #chatform textarea,#dmform textarea{display:block;width:100%;resize:none;overflow-y:auto;background:transparent;border:0;box-shadow:none;color:var(--hi);border-radius:0;font:var(--fw-regular) var(--fs-15)/var(--lh-22px) var(--ui);padding:var(--s-26) var(--s-31) var(--s-26) var(--s-7);min-height:48px;max-height:136px} #chatform textarea:focus-visible,#dmform textarea:focus-visible{outline:none} #side .foot:focus-within{box-shadow:inset 0 1px 0 var(--focus)} /* v126. Ring added: --group == the textarea's own --field surface now. */ #chatform #chatsend,#dmform #dmsend{position:absolute;right:var(--s-4);bottom:var(--s-4);width:32px;height:32px;padding:0;border-radius:50%;display:grid;place-items:center;background:var(--group);box-shadow:var(--ring);color:var(--fg-3);transition:background var(--t-base),color var(--t-base)} #chatform #chatsend .i,#dmform #dmsend .i{width:17px;height:17px} #chatform.has-text #chatsend,#dmform.has-text #dmsend{background:var(--solid);color:var(--on-solid)} #chatform #chatsend:disabled,#dmform #dmsend:disabled{opacity:.4} /* schedule */ .sched .ev:hover{background:var(--hover)} .sched .ev .t{color:var(--fg-3);font-weight:var(--fw-semibold)} .sched .ev .r{color:var(--fg-4);font-size:var(--fs-12)} .sched .ev a{color:var(--info-text);text-decoration:none} /* status bar */ #status .r{margin-left:auto;display:flex;gap:var(--s-8);align-items:center;font-size:var(--fs-13);color:var(--fg-3);font-variant-numeric:tabular-nums} #status .r b{color:var(--white);font-weight:var(--fw-semibold)} #status .up{height:32px;padding:0 var(--s-7);border-radius:var(--pill);background:var(--white);color:var(--ink);font:var(--fw-semibold) var(--fs-13) var(--ui)} /* menus + modals */ .menu{position:absolute;z-index:var(--z-bar);min-width:240px;background:var(--glass-solid);border-radius:var(--r);padding:var(--s-3);display:grid;box-shadow:var(--elev-menu)} .menu button{text-align:left;height:40px;padding:0 var(--s-6);border-radius:var(--r-md);font:var(--fw-medium) var(--fs-14) var(--ui);color:var(--hi);display:flex;gap:var(--s-6);align-items:center} .menu button:hover{background:var(--hover)} .menu .k{margin-left:auto;font-size:var(--fs-11);color:var(--fg-4)} .menu .sep{height:1px;background:var(--line);margin:var(--s-3) var(--s-4)} #addmenu{left:50%;bottom:var(--s-32);transform:translateX(-50%);min-width:200px} /* The room context menu is placed at the pointer, so it is fixed, not absolute. */ #roommenu{position:fixed;min-width:220px;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain} #roommenu .hd{padding:var(--s-4) var(--s-6) var(--s-3);font:var(--fw-semibold) var(--fs-12) var(--ui);letter-spacing:var(--ls-06px);text-transform:uppercase;color:var(--fg-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #roommenu button[disabled]{opacity:.4} #roommenu button[disabled]:hover{background:none} .modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;background:var(--surface-a70);-webkit-backdrop-filter:var(--blur-6);backdrop-filter:var(--blur-6)} .modal .card{width:min(480px,92vw);background:var(--paper);color:var(--ink-3);border-radius:var(--r);box-shadow:var(--elev-modal);padding:var(--s-15);display:grid;gap:var(--s-8)} /* v199 (Munk: "the header kerning is too much"). The serif is spaced by its own design at display sizes; no added tracking. */ .modal h2{margin:0;font:var(--fw-regular) var(--fs-22)/var(--lh-1-25) var(--brand);letter-spacing:0} .modal p{margin:0;font:var(--fw-regular) var(--fs-16)/var(--lh-1-5) var(--display);color:var(--ink-4)} .modal .row{display:flex;gap:var(--s-5);justify-content:flex-end} /* v60. White on --accent was under AA on the one button in every destructive modal whose label you most need to read; --coral-solid was the brand's own darker red, clearing it. v115: --accent and --coral-solid are both gold now, and white-on-gold is worse still (~2:1) — see --on-gold above. */ /* v105. No red buttons: the solid high-contrast button is the only primary. */ .modal .card,#av-gal .gal{position:relative} .modal-x{position:absolute;right:var(--s-7);top:var(--s-7);z-index:var(--z-2);width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;color:var(--fg-2);background:transparent;transition:background var(--t-base),color var(--t-base)} .modal-x:hover,.modal-x:focus-visible{background:var(--hover);color:var(--hi)} .modal-x .i{width:20px;height:20px} .tool-head{padding-right:var(--s-28)!important} #admin .row{padding-right:var(--s-11)} #tool-foot-left:empty{display:none} #tool-foot-left:empty + .tool-foot-right{margin:0 auto;flex:1;justify-content:center} #tool-foot-left:empty + .tool-foot-right .btn{height:52px;min-width:min(320px,100%);font-size:var(--fs-16)} .tool-foot:has(#tool-save.hidden):has(#tool-foot-left:empty){display:none} /* v106. While the snapshot is made: a star, and three more circling it. */ #photo-cooking{position:fixed;inset:0;z-index:var(--z-crop);display:grid;place-content:center;justify-items:center;gap:var(--s-8);background:var(--surface-a62);-webkit-backdrop-filter:var(--blur-8);backdrop-filter:var(--blur-8);opacity:0;transition:opacity var(--t-250) var(--ease);color:var(--white)} #photo-cooking.on{opacity:1} #photo-cooking p{margin:0;font:var(--fw-regular) var(--fs-24)/var(--lh-1-2) var(--brand);letter-spacing:var(--ls-03px);color:var(--white);text-shadow:var(--text-shadow-strong)} .cook{position:relative;width:132px;height:132px} .cook svg{fill:var(--cook-core);filter:var(--glow-cook)} .cook-core{position:absolute;inset:var(--s-33);display:grid;animation:cook-pulse var(--t-1500) var(--ease-in-out) infinite} .cook-core svg{width:100%;height:100%} .cook-orbit{position:absolute;inset:0;animation:cook-spin var(--t-2400) var(--linear) infinite} .cook-orbit svg{position:absolute;width:22px;height:22px;left:50%;top:0;margin-left:calc(var(--s-20) * -1);transform-origin:11px 66px;animation:cook-twinkle var(--t-1200) var(--ease-in-out) infinite} .cook-orbit svg:nth-child(2){transform:rotate(120deg);animation-delay:calc(var(--t-400) * -1);width:16px;height:16px;margin-left:calc(var(--s-4) * -1);transform-origin:8px 66px} .cook-orbit svg:nth-child(3){transform:rotate(240deg);animation-delay:calc(var(--t-800) * -1);width:19px;height:19px;margin-left:calc(var(--s-34) * -1);transform-origin:9.5px 66px} @keyframes cook-spin{to{transform:rotate(360deg)}} @keyframes cook-pulse{0%,100%{transform:scale(.82) rotate(0deg);opacity:.85}50%{transform:scale(1.08) rotate(45deg);opacity:1}} @keyframes cook-twinkle{0%,100%{opacity:.35}50%{opacity:1}} @media (prefers-reduced-motion:reduce){.cook-orbit,.cook-orbit svg{animation:none}.cook-core{animation:cook-twinkle var(--t-1800) var(--ease-in-out) infinite}} /* v105. The snapshot: the picture fits the screen, never scrolls. */ #tool-modal.photo .card{width:min(600px,95vw)} #tool-modal.photo .tool-head h2{font:var(--fw-regular) var(--fs-26)/var(--lh-1-2) var(--brand);color:var(--hi)} #tool-modal.photo #tool-content{overflow:hidden;justify-items:center;gap:var(--s-6);padding-bottom:var(--s-6)} .photo-img{display:block;width:auto;max-width:100%;aspect-ratio:1;height:min(520px,calc(100dvh - 340px));min-height:180px;border-radius:var(--r-xl);box-shadow:var(--ring)} .photo-share{display:flex;flex-wrap:wrap;gap:var(--s-5);justify-content:center} .photo-share button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--fg-2);background:var(--field);box-shadow:var(--ring);transition:background var(--t-base),color var(--t-base)} .photo-share button:hover,.photo-share button:focus-visible{background:var(--solid);color:var(--on-solid)} .photo-share .i{width:20px;height:20px} .i.brand{fill:currentColor;stroke:none} #tool-save .i{width:20px;height:20px} /* v105. A locked room, as itself. */ #tool-modal.locked .card{width:min(480px,95vw)} #tool-modal.locked .tool-head h2{font:var(--fw-regular) var(--fs-28)/var(--lh-1-2) var(--brand);color:var(--hi)} .lock-hero{position:relative;height:190px;border-radius:var(--r-xl);background:var(--group) center/cover no-repeat;box-shadow:var(--ring);overflow:hidden} .lock-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--surface-a15),var(--surface-a70))} .lock-badge{position:absolute;z-index:var(--z-1);left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(12,12,14,.55);color:var(--white);box-shadow:var(--ring);-webkit-backdrop-filter:var(--blur-10);backdrop-filter:var(--blur-10)} /* v167. Always dark glass: it sits on the room's photo, and light mode's --glass-pill is near-white, which left a white lock on a white disc. */ .lock-badge .i{width:26px;height:26px} .lock-say{margin:0;font:var(--fw-medium) var(--fs-17)/var(--lh-1-45) var(--ui);color:var(--hi);text-align:center} .lock-fine{margin:0;text-align:center} /* v122. The "coming soon" cover — same shell as a locked room (.lock-hero, above, reused as-is), its own three lines of text. v139. Plus the host's own intro (face/name), their message, and the inline signup note — coverHostHTML/coverMessageHTML/coverSignupHTML, public/venue.js. v167 design polish. The modal's own title (h2#tool-title) repeated the room name the cover already prints itself, so it is visually hidden here (kept for aria-labelledby — #tool-modal itself carries that, shell/index.html) and the × floats over the card's own top-right corner instead of sharing a header row with it — .modal-x is already position:absolute against .card (the rule above), so shrinking .tool-head to just enough padding to clear it is the whole change. */ /* v169. Larger and wider — Munk's own note reviewing the mockup ("larger and wider to fill the space better") — the exact same size the full-screen editor's own card uses (.ced-card-wrap, below), since coverCardHTML draws them both: min()'s own calc(100% - 32px) already covers a narrow phone, no separate media-query override needed. */ /* Fix round 1. Fixed 560px filled a third of a 1640px window — scales with the viewport now, the same clamp() on both the member-facing modal card and the editor's own .ced-card-wrap (below), so the two stay the exact same size. #tool-modal .card's own generic rule already caps max-height at 92dvh with overflow:hidden and #tool-content scrolls internally (overscroll-behavior:contain), so a taller card at this width never forces the page itself to scroll. */ #tool-modal.coming-soon .card{width:clamp(min(560px,calc(100% - 32px)),44vw,760px)} #tool-modal.coming-soon .tool-head{padding:var(--s-8) var(--s-8) 0} #tool-modal.coming-soon .tool-head h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} #tool-modal.coming-soon #tool-content{padding:0 var(--s-9) var(--s-9)} /* v169. The quiet "Edit cover" button under the read-only card — the real gate for an owner/admin's own room (showComingSoonCover), opens the full-screen editor. */ .cs-edit-cover{display:flex;justify-content:center;margin-top:var(--s-6)} /* v175. openRoomPreview's own banner — the Room pane's "Preview the room" button used to closeTool() and silently walk into the room with nothing on screen saying so (Munk: "looks like the editor just closed"). This reuses the coming-soon card's own shell (#tool-modal.coming-soon) so the preview is exactly the room's own cover, with one persistent line pinned to the top of the scrolling card naming the mode and a prominent way back — sticky, not fixed, since #tool-content is already the one thing here that scrolls. */ .rpv-banner{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--s-6); margin-bottom:var(--s-6);padding:var(--s-6) var(--s-8);border-radius:var(--r);background:var(--accent);color:var(--on-accent); font:var(--fw-semibold) var(--fs-13) var(--ui);box-shadow:var(--ring)} .rpv-end{display:flex;align-items:center;gap:var(--s-4)} .rpv-esc{font:var(--fw-semibold) var(--fs-11) var(--ui);padding:2px 6px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px currentColor;opacity:.8} #rpv-back{height:30px;padding:0 var(--s-7);border-radius:var(--pill);background:var(--on-accent);color:var(--accent);font:var(--fw-semibold) var(--fs-13) var(--ui)} .cs-host{display:flex;align-items:center;justify-content:center;gap:var(--s-4);margin:var(--s-6) 0 0} .cs-face{width:48px;height:48px;flex:none;border-radius:50%;box-shadow:var(--ring)} .cs-face .av{width:100%;height:100%} /* v177. The convention has no face on file — its mark sits in the same circle. */ .cs-face-mark{display:grid;place-items:center;background:var(--group);color:var(--fg-2);font:var(--fw-semibold) var(--fs-15) var(--brand)} .cs-host-name{font:var(--fw-semibold) var(--fs-15) var(--ui);color:var(--hi)} /* v167. "countdown" (and anything unrecognised) also says "Hosted by NAME" now, small and muted — cs-host-countdown, coverHostStyledHTML (venue.js) — rather than the bare name the mockup review flagged as reading like a mistake. */ .cs-host-countdown .cs-host-name{font:var(--fw-medium) var(--fs-13) var(--ui);color:var(--fg-3)} .cs-host-countdown .cs-face{width:28px;height:28px} /* v167. The room name, printed in the card itself now the modal's own title is hidden (above) — roomTitleHTML, venue.js. Absent for "letter", which folds the name into its own one small line instead (cs-when-letter, below). The type rules themselves (#tool-content p/#tool-modal h3 specificity note) moved down beside the rest of v169's larger sizing — see .cs-room-title/.cs-message/.cs-details/.cs-when/.cs-signup-note, below. */ /* v167 design polish. The message/details/RSVP fields print as the card's own read-only text while a host edits in place — no border box, no background, the same font/size/alignment .cs-message/.cs-details already use (the field just adds the class alongside cs-edit-field, venue.js) — a dashed underline and a faint pencil the only hint they're live, and the uppercase "Message"/"Details"/"RSVP link" captions the mockup flagged are gone visually, kept only as an aria-label on the field itself. */ /* Fix round 1. The outline used to wrap the whole full-width block, even empty — a form-box look the mockup never had. The wrap is an inline-flex now, shrink-wrapped to the field's own content width (field-sizing:content, where supported, growing/shrinking as you type; min-width otherwise sensible for either placeholder), and centred with align-self on .cs-zone's own flex column — a per-child property, so the read-only

siblings (no this class) keep stretching full width and centre their own text exactly as before. The pencil hint's own right:0 (below) now lands on the field's real edge, not the zone's. */ .cs-edit-wrap{position:relative;display:inline-flex;align-self:center;margin-top:var(--s-4)} .cs-edit-field{display:block;width:auto;min-width:min(230px,90%);max-width:100%;background:transparent;border:0;border-bottom:1px dashed var(--rule-line);border-radius:0;box-shadow:none;padding:var(--s-2) var(--s-4);text-align:center;resize:none;overflow:hidden;field-sizing:content;transition:border-color var(--t-base)} /* input[type=url] (venue.css, form basics) is an attribute selector — for the RSVP field, (element+attribute) beats a plain class on specificity and would win its box-shadow/background/color/height back. Repeating the reset at (element+class) ties it, and this is later in the file, so it wins instead. Message/details stay textareas, already un-contested, so they never take this — it would outrank the letter style's own italic-quote color for the message field (cs-message-letter, specificity .cs-style-letter .cs-message-letter). */ input.cs-edit-field{background:transparent;box-shadow:none;height:auto;border-radius:0;padding:var(--s-2) 0;font:var(--fw-regular) var(--fs-14)/var(--lh-1-5) var(--ui);color:var(--fg-2)} .cs-edit-field::placeholder{color:var(--fg-4);opacity:1} .cs-edit-field:focus{outline:0;border-bottom-style:solid;border-color:var(--accent);box-shadow:none} .cs-edit-wrap::after{content:"";position:absolute;right:0;top:var(--s-2);width:14px;height:14px;opacity:0;pointer-events:none;color:var(--fg-3); background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4'/%3E%3C/svg%3E") center/contain no-repeat; transition:opacity var(--t-base)} .cs-edit-wrap:hover::after,.cs-edit-wrap:focus-within::after{opacity:.45} /* v200 (Munk, from the approved demo: neither field said what it was for). A small muted label above each of the two editable fields. Fix round 4 (Munk, from the live preview: HEADER sat indented, content-width, while MESSAGE was already full-width — the two never shared a left edge). Both are full-width boxes now, sharing the card's own left/right edge (align-self:stretch overrides .cs-edit-wrap's own plain align-self:center, above — every OTHER edit field, none, still centres/hugs its own text) with the label flush to that same left edge above each. The pencil hint's own top offset (::after, above) shifts down to clear the label instead of sitting on top of it. */ .cs-edit-wrap.cs-edit-message,.cs-edit-wrap.cs-edit-details{flex-direction:column;align-items:stretch;align-self:stretch;gap:var(--s-2)} .cs-edit-wrap.cs-edit-message::after,.cs-edit-wrap.cs-edit-details::after{top:calc(var(--s-2) + 22px)} .cs-edit-wrap.cs-edit-message .cs-edit-field,.cs-edit-wrap.cs-edit-details .cs-edit-field{width:100%;min-width:0} .cs-edit-label{margin:0;font:var(--fw-semibold) var(--fs-11) var(--ui);letter-spacing:var(--ls-004em);text-transform:uppercase;color:var(--fg-3)} /* The details/Message field's own live "n / 250" (wireCoverEditorCard, venue.js) — under the field, right-aligned like a tweet's own counter, warning in --err once the host reaches the cap rather than after. */ .cs-edit-count{align-self:flex-end;margin:0;font:var(--fw-medium) var(--fs-11) var(--ui);color:var(--fg-3)} .cs-edit-count.warn{color:var(--err)} /* v169. Three cover styles (cover_style — coverCardHTML, public/venue.js). The old editing toolbar above the card is gone entirely — Munk rejected it as clunky and off-design; every control it held now lives in the full-screen editor's own controls panel (openCoverEditor, .ced-panel, below). Larger and wider now too, Munk's own note reviewing the mockup ("larger and wider to fill the space better") — card padding 22px, 16px radius. The shared shape — .cs-card/.cs-hero/.cs-panel — is 'countdown' as-is; 'poster' and 'letter' override just enough of it below. Fix round 1. Real zone elements now (.cs-zone — who/what, when, message+details — plus .tool-actions as the fourth), one per style in coverCardHTML, rather than margins guessing at "between" vs "within". .cs-panel's own gap is the 18-20px between zones; .cs-zone's own gap is the 6-8px within one — every .cs-host/.cs-room-title/.cs-tiles/ .cs-when/.cs-message/.cs-details margin that used to carry that spacing is gone, so this only works through a .cs-zone wrapper. coverCardHTML never renders an empty zone (including .tool-actions itself — no host, no second button, not open means no actions zone and no hairline, not a strip with nothing in it). */ /* v172. Munk: "we need more padding in this modal around the text." One inset for the whole card (--cs-pad), top included: the room title used to sit flush under the picture. */ .cs-card{--cs-pad:clamp(28px,2.6vw,40px);display:grid;border-radius:16px;overflow:hidden;background:var(--panel);box-shadow:var(--ring)} .cs-panel{position:relative;padding:var(--cs-pad);display:flex;flex-direction:column;gap:clamp(18px,1.6vw,20px)} .cs-zone{display:flex;flex-direction:column;gap:clamp(6px,0.6vw,8px)} /* v167. Rounded top corners only, flush to the card's own edges — the negative inline margin cancels .cs-panel's own side padding just for the hero, so the image reaches exactly as far as the card does; .lock-hero's own rules (above) still give it the gradient scrim underneath everything here. Fix round 1. Height scales with the card's own clamp()'d width (A). */ .cs-hero{height:clamp(220px,20vw,300px);border-radius:0} /* v167 design polish carried into v169. #tool-content p / #tool-modal h3 (below, both used throughout the drawer for ordinary body copy/section labels) are each one ID selector, which otherwise beats these plain classes on specificity alone regardless of source order — every rule here that sets type for an h3/p the card actually uses is scoped under both #tool-modal.coming-soon (the member-facing card, still a modal) and #cover-editor (the same card, in the full-screen editor) so it wins in either place a shared coverCardHTML output can land. Fix round 1: no more margin here — the zone/gap system above carries the spacing now — and every size is clamp()'d, scaling with the card. */ #tool-modal.coming-soon .cs-room-title,#cover-editor .cs-room-title{margin:0;font:var(--fw-regular) clamp(24px,2vw,30px)/var(--lh-1-2) var(--brand);letter-spacing:0;text-transform:none;color:var(--hi);text-align:center} /* v200. cover_message reads as the card's own Header now (the small "Header" label is editor-only, above — this is what makes it READ as one everywhere, editable or not: coverMessageStyledHTML never took a second, plainer path). Bold and headline-sized in the display serif, under .cs-room-title's own clamp so it never outweighs the room's actual name. The "letter" style's own big italic quote (.cs-style-letter .cs-message, below) already reads as a headline and keeps its own rule, unchanged — this is everything else. */ #tool-modal.coming-soon .cs-message,#cover-editor .cs-message{margin:0;font:var(--fw-bold) clamp(19px,1.6vw,23px)/var(--lh-1-3) var(--brand);color:var(--hi);text-align:center} /* v200. details reads as the card's own Message now — roomier (rows=3, venue.js) and a touch larger (16-17px, was 15-17) than before, tweet- like body text; still the card's own regular weight/colour, unchanged. */ #tool-modal.coming-soon .cs-details,#cover-editor .cs-details{margin:0;font:var(--fw-regular) clamp(16px,1.2vw,17px)/var(--lh-1-5) var(--ui);color:var(--fg-2);text-align:center} #tool-modal.coming-soon .cs-when,#cover-editor .cs-when{margin:0;font:var(--fw-semibold) clamp(13px,1vw,15px) var(--ui);color:var(--fg-3);text-align:center} #tool-modal.coming-soon .cs-signup-note,#cover-editor .cs-signup-note{flex-basis:100%;margin:0;font:var(--fw-regular) var(--fs-12)/var(--lh-1-4) var(--ui);color:var(--fg-3);text-align:center} .cs-tiles{display:flex;justify-content:center;gap:var(--s-5)} .cs-tile{display:grid;justify-items:center;gap:var(--s-1);width:clamp(64px,6vw,80px);padding:var(--s-5) var(--s-3);border-radius:var(--r-md);background:var(--field);box-shadow:var(--ring)} .cs-tile b{font:var(--fw-semibold) clamp(22px,1.8vw,26px) var(--ui);color:var(--accent)} .cs-tile small{font:var(--fw-medium) var(--fs-11) var(--ui);letter-spacing:var(--ls-009em);text-transform:uppercase;color:var(--fg-3)} .cs-cta{margin:0;align-self:center} .cs-host-poster,.cs-host-letter{display:flex;align-items:center;gap:var(--s-4)} .cs-host-info{display:grid;text-align:center} .cs-host-role{font:var(--fw-regular) var(--fs-12) var(--ui);color:var(--fg-3)} /* v167 design polish. The two quiet/primary buttons and the "sign in" note stack in one column, bottom-anchored: the optional second button (RSVP/site — coverCtaHTML, quiet/plain already) sits above "Share my email", its consent line centred and small right under it. v169. A hairline above separates the actions zone from message/details, per the mockup's own four zones — border-top rather than a rule div, so it never shows for a room with nothing above it to separate from (:empty-adjacent isn't a thing, but every style always prints at least the host row, so this never actually stands alone). Fix round 2 (Munk, from a live screenshot: "Share my email" ran full width with a small stray "Share…" clipped at its own right edge). Root cause was two things stacked: this column-direction container still carried the base .tool-actions's own flex-wrap:wrap (only its own direction/alignment were ever overridden here), so once the actions zone had no free vertical room the consent note — "Shares this email with the room's host.", genuinely starting with "Share" — wrapped sideways into a second phantom column instead of just taking more height, and .cs-card{overflow:hidden} clipped everything past the button down to that lone stray word. flex-wrap:nowrap is the actual fix (this column always stacks, never wraps sideways); "Share my email"'s own new auto width, below, was a second, compounding contributor (the wider the forced-full button, the less height was left for its own note before that wrap kicked in). */ .cs-card .tool-actions{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:var(--s-4);margin-top:18px;padding-top:18px;border-top:1px solid var(--line)} /* Fix round 2. "Share my email" was the one item here with no width of its own (unlike .cs-cta's own align-self:center, above) — this container's align-items:stretch was the only thing sizing it, forced to width:100% besides. Content-sized and centred now, like every other action here; #cs-enter (Munk didn't ask for it, and it is the one literal call-to-action a full-width, unmissable button still suits) keeps its own width:100%. */ #cs-join-list{align-self:center;background:var(--solid);color:var(--on-solid);box-shadow:none} #cs-enter{width:100%;background:var(--solid);color:var(--on-solid);box-shadow:none} /* Fix round 3 (Munk, watching the live preview: the buttons here lost .btn's own height/padding once they went auto width). .tool-actions .btn (the generic small-row variant, elsewhere in the file) was always winning on height/padding/font-size — invisible while "Share my email" was forced full width (a wide bar reads fine at 40px), obvious the moment it is content-sized instead. This restores the plain house .btn metrics for every button in the cover card's own actions zone — .cs-cta included, so "Visit …'s site" matches Share/Enter now rather than reading like a smaller, different control — and drops the plain browser underline a bare otherwise keeps (.btn never resets text-decoration itself; nothing else here needed it, since this is the one .btn-shaped anchor in the file with no existing reset). */ /* Fix round 4 (Munk: "Share my email" wrapped onto two lines — auto width should never mean squeezed). white-space:nowrap and the card's own min 560px (.ced-card-wrap, below) do the rest; the card, not the button, is what's free to be wide enough. */ .cs-card .tool-actions .btn{height:48px;padding:0 var(--s-14);font-size:var(--fs-15);white-space:nowrap} .cs-cta{text-decoration:none} /* Fix round 3, the actual root cause of the squashed buttons above (the height/padding override was real too, but not sufficient on its own). .cs-signup-note's own flex-basis:100% is a "force this onto its own row" trick that only means anything in a ROW-direction .tool-actions — every other user of that class. Inside THIS column-direction one it asks the flex column for a note as tall as the column's own (indefinite, content-driven) height; a grid row sizing itself to this card's max-content reads that as a real demand and settles the whole card shorter than its buttons actually need at their real height, so the final layout pass then had to flex-shrink every button below 48px to fit — measurable (getComputedStyle) even though nothing here visibly overflowed or scrolled. flex-basis:auto is what a column item already wants by default; this only ever needs to undo the row-layout trick — in BOTH places .cs-signup-note's own flex-basis:100% rule reaches (#tool-modal.coming-soon, the plain member-facing card, above the editor's own #cover-editor), since both share this exact markup and this exact column .tool-actions. Each #id-prefixed to match (and, on the ID alone, already beat) the specificity of the rule it overrides — three plain classes lose to that ID no matter the source order. */ #tool-modal.coming-soon .cs-card .cs-signup-note,#cover-editor .cs-card .cs-signup-note{flex-basis:auto} /* poster: the room's own picture fills the top of the card at a tall, fixed height (>=320px, per the mockup's "4:5 or at least 320px tall"), flush to its edges, with a bottom-to-top dark scrim that is always dark — --surface-a* are literal dark rgba, not theme tokens, so the text sitting on it (host/room-title/when, cs-overlay below) reads white in both themes, never just in dark mode. Host/title/when are pulled onto the image as ONE group (not three separate nudges), so nothing about the host row is ever drawn twice — coverHostStyledHTML is still called exactly once (venue.js). Message/details flow under the image as normal, in the card's own ink, never white. */ .cs-style-poster .lock-hero{height:clamp(380px,34vw,460px);min-height:320px} .cs-style-poster .lock-hero::after{background:linear-gradient(to top,var(--surface-a70) 0%,var(--surface-a62) 50%,transparent 85%)} /* v167. Absolutely positioned against .cs-panel (position:relative, above), not nudged up with a negative margin — a fixed offset from .cs-panel's own top edge (== the hero's bottom edge) that lands the whole cluster inside the scrim's dark zone regardless of how tall the host/title/when text actually renders, rather than a margin whose correctness depended on that height matching a guess. */ .cs-style-poster .cs-panel{padding-top:0} .cs-style-poster .cs-overlay{position:absolute;left:var(--cs-pad);right:var(--cs-pad);top:-116px;z-index:var(--z-1);display:grid;gap:var(--s-2);justify-items:start;color:var(--white)} .cs-style-poster .cs-host{margin:0;justify-content:flex-start} .cs-style-poster .cs-host-name{color:var(--white)} .cs-style-poster .cs-room-title{margin:0;text-align:left} .cs-style-poster .cs-when{margin:0;text-align:left} /* Fix round 4 (Munk: "Always open" on the poster image is dark text on a dark photo). .cs-room-title/.cs-when's own base rules — far above — are #tool-modal.coming-soon/#cover-editor prefixed (an ID each), which already beats these two plain-class overrides no matter the source order, so the light colour they were meant to set here never actually won; .cs-host-name a few lines up escaped this only because ITS base rule carries no ID. Same fix as .cs-signup-note's own flex-basis, above: match (here, exceed) the specificity of the rule being overridden. */ #tool-modal.coming-soon .cs-style-poster .cs-room-title,#cover-editor .cs-style-poster .cs-room-title{color:var(--white)} #tool-modal.coming-soon .cs-style-poster .cs-when,#cover-editor .cs-style-poster .cs-when{color:var(--on-dark-85)} .cs-style-poster .cs-body{display:flex;flex-direction:column;padding-top:18px} /* letter: no picture — a big centred face, the message set as a serif quote, one small "ROOM · opens…" line above the buttons. */ .cs-style-letter .lock-hero{display:none} .cs-style-letter .cs-host{justify-content:center} .cs-style-letter .cs-host-letter{flex-direction:column;gap:var(--s-3);text-align:center} .cs-style-letter .cs-face{width:72px;height:72px} .cs-style-letter .cs-message,.cs-style-letter .cs-message-letter{font:var(--fw-regular) clamp(20px,1.8vw,24px)/var(--lh-1-4) var(--brand);font-style:italic;color:var(--hi);text-align:center;margin:0} .cs-style-letter .cs-when{text-align:center;text-transform:uppercase;letter-spacing:var(--ls-009em);font-size:var(--fs-11);margin:0} .cs-style-letter .cs-details{margin:0} /* v169. The full-screen cover editor (openCoverEditor, public/venue.js) — its own stage above the floor, not #tool-modal's sheet. Dimmed room behind (the same scrim/blur .modal already uses), back label top-left, the card centred in the space above the dock (the stage itself scrolls vertically if the card is taller than the space, never horizontally), a floating dock of four pills bottom-centre. Reduced motion: no fade/scale, shown or hidden outright — .hidden already does that; the transition rules below are simply skipped since nothing ever adds .cover-editing's own animation class for them to run. */ /* Belt-and-suspenders alongside the editor's own z-index and Tab-trap (venue.js) — nothing on the dimmed floor can be clicked while it's open. */ body.cover-editing #app{pointer-events:none} /* Fix round 1. The floor's own chrome — its dock, the +/eye/image pills, the view cluster (zoom), the corner Help button — used to just sit behind the semi-transparent scrim, peeking through and fighting the editor's own dock for attention. Hidden outright now; the room's own picture and pins stay visible (dimmed), which is the "dimmed room behind" the mockup actually asks for. */ body.cover-editing #floorbar,body.cover-editing #topleft,body.cover-editing #viewdock, body.cover-editing #adminrail,body.cover-editing #floor-help{display:none} /* v177. The cover editor — the room stays dimmed behind (the same scrim/ blur .modal already uses), the settings float over it in a detached glass panel (Munk: "instead of being a full sidebar, make it a detached floating sidebar"), and the card sits centred in the space beside it. Every size, colour and timing here is a venue token; the editor's own component tokens (--ced-*) are set once, on #cover-editor, and read by every rule below. --z-admin, not --z-drawer: the discard-changes confirm (#tool-modal, --z-drawer) has to paint above it. */ #cover-editor{position:fixed;inset:0;z-index:var(--z-admin); background:var(--surface-a70);-webkit-backdrop-filter:var(--blur-6);backdrop-filter:var(--blur-6); --ced-inset:var(--s-10);--ced-panel-w:clamp(280px,26vw,340px);--ced-pad:var(--s-14);--ced-radius:var(--r-4xl); --ced-gap:var(--s-5);--ced-face:var(--s-11);--ced-hot:var(--accent);--ced-hot-wash:rgba(var(--accent-rgb),.07); --ced-ring-w:var(--s-1);--ced-dim:.3} #cover-editor.hidden{display:none} /* v169. showModal/hideModal (venue.js) toggle .hidden/.closing the same way every other modal here does, reusing .modal's own keyframes. */ #cover-editor:not(.hidden){animation:lh-scrim-in var(--t-panel) var(--ease-out)} #cover-editor.closing{animation:lh-scrim-out var(--t-settle) var(--ease-in) forwards;pointer-events:none} #cover-editor:not(.hidden) .ced-card-wrap{animation:lh-card-in var(--t-340) var(--ease-arrive)} #cover-editor:not(.hidden) .ced-panel{animation:lh-card-in var(--t-340) var(--ease-arrive)} @media (prefers-reduced-motion:reduce){#cover-editor:not(.hidden),#cover-editor.closing,#cover-editor:not(.hidden) .ced-card-wrap,#cover-editor:not(.hidden) .ced-panel,#cover-editor .ced-fade,#cover-editor .ced-sec,#cover-editor .ced-sec-h{animation:none;transition:none}} /* The panel — detached from every edge by --ced-inset, frosted glass. */ .ced-panel{position:absolute;top:var(--ced-inset);left:var(--ced-inset);bottom:var(--ced-inset);z-index:var(--z-2);width:var(--ced-panel-w); display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:var(--ced-radius); background:var(--surface-a72);box-shadow:var(--elev-flyout);-webkit-backdrop-filter:var(--blur-20-sat);backdrop-filter:var(--blur-20-sat); /* Fix round 4 (Munk: the Opens/Closes date and time inputs render as solid white boxes with invisible text/icons). The panel's own glass is always the dark surface (Fix round 2, above) regardless of theme — but only its CSS custom properties were ever rescued for that; a native 's own chrome (the calendar/clock icon, its internal text) is drawn by the browser itself, keyed off the color-scheme property, not off --fg/--hi. In light theme this panel inherited color-scheme:light from :root, so Chromium drew those icons (and the field's native parts) for a LIGHT surface no matter what background/color the input rule itself set — color-scheme:dark here matches the glass every native control in this panel actually sits on, in both themes. */ color-scheme:dark} /* Fix round 2. --surface-a72 is always the dark ink colour (v151's note by --surface-a15/28/62/70/72, above — "reuses --surface" (dark theme's own value), never a parallel one, on purpose: every scrim/backdrop in the file reads it so a dimmed room or a dark crop screen never flips light). The panel is the one place that dark glass also HOLDS readable text and controls, not just dims something behind it — so in light theme every token it reads (--hi/--fg-2/--fg-3/--fg-4/--ink-4/--group/--hover/--line/--line-2/ --field/--ring) needs the same rescue #gate's own dark bars already use (:root[data-theme=light] #gate, far above) rather than light theme's dark-on-light values, which read as dark-on-dark here and vanish — title, back label, section headings, hostcard name/note, "fine" notes (--ink-4, the base .fine rule's own colour) and the Save button's own ring/hover were all unreadable before this. */ :root[data-theme=light] #cover-editor .ced-panel{--fg:var(--white);--fg-2:rgba(255,255,255,.82);--fg-3:rgba(255,255,255,.56);--fg-4:rgba(255,255,255,.56); --hi:var(--white);--ink-3:var(--white);--ink-4:rgba(255,255,255,.62);--group:rgba(255,255,255,.05);--hover:rgba(255,255,255,.08); --line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.14);--field:rgba(255,255,255,.06);--glass:rgba(255,255,255,.06); --ring:inset 0 0 0 1px rgba(255,255,255,.18);color:var(--fg)} .ced-head{flex:none;display:grid;justify-items:start;gap:var(--s-2);padding:var(--ced-pad) var(--ced-pad) var(--s-9)} .ced-back{display:inline-flex;align-items:center;gap:var(--s-3);height:var(--s-30);margin-bottom:var(--s-6);padding:0 var(--s-6) 0 var(--s-4);border-radius:var(--pill); background:none;box-shadow:var(--ring);color:var(--fg-2);font:var(--fw-medium) var(--fs-13) var(--ui);transition:background var(--t-base),color var(--t-base)} .ced-back:hover{background:var(--hover);color:var(--hi)} .ced-back-icon{width:var(--s-8);height:var(--s-8);transform:scaleX(-1)} .ced-title{margin:0;font:var(--fw-semibold) var(--fs-30)/var(--lh-1-1) var(--brand);color:var(--hi)} .ced-sub{margin:0;font:var(--fw-regular) var(--fs-13)/var(--lh-1-4) var(--ui);color:var(--fg-3)} /* The one part that scrolls — overscroll contained so a fast swipe never rubber-bands into the floor behind. */ .ced-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y;scrollbar-width:thin} /* A section — heading, then its controls. Lights up (--ced-hot-wash) with its zone on the card. */ .ced-sec{display:grid;gap:var(--ced-gap);padding:var(--s-9) var(--ced-pad);border-top:1px solid var(--line);transition:background var(--t-base) var(--ease-out)} .ced-sec.ced-hot{background:var(--ced-hot-wash)} .ced-sec-h{margin:0;font:var(--fw-semibold) var(--fs-12) var(--ui);letter-spacing:var(--ls-004em);color:var(--fg-3);transition:color var(--t-base) var(--ease-out)} .ced-sec.ced-hot .ced-sec-h{color:var(--ced-hot)} .ced-sec .seg,.ced-sec .f,.ced-sec .idrow{padding:0;margin:0} .ced-sec .fine{margin:0;text-align:left} .ced-sec .tool-actions{margin:0;justify-content:flex-start} /* Fix round 4 (Munk: "None / RSVP / Their site" wrapped its own option labels onto two lines in the panel's own narrow width). Every segHTML picker in the panel (Host, Second button) keeps its option label on one line now, tightened up at this narrow a width with the panel's own --s-4/--s-3 in place of the option's own generic --s-25/--s-5 — "RSVP" (its own label shortened, venue.js) already fit even before this. */ .ced-sec .seg button{white-space:nowrap;padding:var(--s-4) var(--s-3)} /* Host — the face and name the cover shows. */ .ced-hostcard{display:flex;align-items:center;gap:var(--s-6);min-width:0} .ced-face{display:grid;place-items:center;flex:none;width:var(--ced-face);height:var(--ced-face);overflow:hidden;border-radius:50%; box-shadow:0 0 0 var(--ced-ring-w) var(--surface),0 0 0 calc(var(--ced-ring-w) * 2) var(--ced-hot)} .ced-face .av{width:100%;height:100%} .ced-face-mark{background:var(--group);color:var(--fg-2);font:var(--fw-semibold) var(--fs-17) var(--brand)} .ced-hostcard-text{display:grid;gap:var(--s-1);min-width:0} .ced-hostcard-name{font:var(--fw-semibold) var(--fs-15) var(--ui);color:var(--hi)} .ced-hostcard-note{font:var(--fw-regular) var(--fs-12-5)/var(--lh-1-4) var(--ui);color:var(--fg-3)} /* Style — three mini previews (coverStyleThumbInnerHTML, venue.js). */ .ced-stylepick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)} .ced-style-opt{display:grid;justify-items:center;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-xl);background:none;box-shadow:var(--ring);color:var(--fg-2); font:var(--fw-medium) var(--fs-12) var(--ui);transition:background var(--t-base),box-shadow var(--t-base)} .ced-style-opt:hover{background:var(--hover)} .ced-style-opt.on{box-shadow:0 0 0 2px var(--accent);color:var(--hi)} .ced-style-thumb{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-1);width:100%;height:var(--s-31); border-radius:var(--r-sm);background:var(--field);box-shadow:var(--ring);overflow:hidden;padding:var(--s-2)} .ced-thumb-pic{display:block;height:var(--s-13);border-radius:var(--r-xs);background:linear-gradient(135deg,var(--accent),var(--group))} .ced-thumb-pic-full{position:absolute;inset:0;height:auto;border-radius:0} .ced-thumb-tiles{display:flex;gap:var(--s-1);position:relative;z-index:var(--z-1)} .ced-thumb-tiles span{flex:1;height:var(--s-18);border-radius:1px;background:var(--accent);opacity:.55} .ced-thumb-bar{position:relative;z-index:var(--z-1);height:var(--s-6);border-radius:1px;background:var(--shade-55)} .ced-thumb-face{align-self:center;width:var(--s-9);height:var(--s-9);border-radius:50%;background:var(--accent);opacity:.85;margin-top:var(--s-2)} .ced-thumb-lines{display:flex;flex-direction:column;gap:var(--s-1);align-items:center} .ced-thumb-lines span{width:var(--s-13);height:var(--s-21);border-radius:1px;background:var(--fg-3)} .ced-thumb-lines span:last-child{width:var(--s-8)} /* Picture — the venue's pictures, then Upload. */ .ced-pic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)} .ced-pic-tile{padding:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:none;box-shadow:var(--ring)} .ced-pic-tile img{display:block;width:100%;height:100%;object-fit:cover} .ced-pic-tile.on{box-shadow:0 0 0 2px var(--accent)} .ced-pic-add{display:grid;place-items:center;align-content:center;gap:var(--s-1);box-shadow:none;border:1px dashed var(--line-2);color:var(--fg-3);font:var(--fw-medium) var(--fs-11) var(--ui);transition:color var(--t-base),border-color var(--t-base)} .ced-pic-add:hover{color:var(--hi);border-color:var(--fg-3)} .ced-pic-add .i{width:var(--s-8);height:var(--s-8)} /* The foot — the view toggle right above Save; neither ever moves. The toggle's own group label is for screen readers only (aria-label). */ .ced-foot{flex:none;display:grid;gap:var(--ced-gap);padding:var(--s-8) var(--ced-pad) var(--ced-pad);border-top:1px solid var(--line-2)} .ced-foot .seg{padding:0;gap:0;font-size:0} .ced-save{background:var(--accent);color:var(--on-accent)!important;font-weight:var(--fw-bold)} .ced-save:hover{background:var(--accent-deep)!important} .ced-foot .ced-save{width:100%;height:var(--s-11);border-radius:var(--r-2xl);font-size:var(--fs-15)} .ced-foot .ced-save:not(.dirty){background:none!important;box-shadow:var(--ring);color:var(--fg-3)!important;font-weight:var(--fw-medium)} /* Member view — every section fades back in place; the head and foot stay. */ .ced-fade{transition:opacity var(--t-base) var(--ease-out)} #cover-editor.member-view-mode .ced-fade{opacity:var(--ced-dim);pointer-events:none} /* The stage — the card centred in the space between the panel and the room's own sidebar (#side), which stays on screen, dimmed, behind the scrim while the editor is open (v177, above) rather than being hidden outright like the floor's own chrome. Fix round 2. Was centred in (100% minus the panel's own reserved width) alone — a bare var(--s-8) on the right, so the card actually sat past true centre, drifting toward the sidebar the wider that sidebar was. var(--side) is the same token #side's own width already reads (0 under 900px, where #side is display:none — this collapses to the plain var(--s-8) margin the mobile layout below still expects). Fix round 4 (Munk: "on a smaller screen, the modal can be wider to overflow the right sidebar" — below a comfortable width, drop the sidebar as a boundary rather than squeeze the card). Base rule (every width from the phone breakpoint up) is single-sided again — clear of the panel, a plain var(--s-8) gutter on the right, the card free to sit over the dimmed sidebar exactly like a plain scrim would. The media query below restores dual-sidebar centring only once there is room for it: .ced-card-wrap's own comfortable minimum is 560px (below), so the switch-over is wherever this stage's own available width, minus both reservations, would first give that card at least 560px of room — solved once for --ced-panel-w's own worst case (its clamp() caps at 340px past 1307px wide) and --side's own 320px, algebra kept here rather than re-derived by eye: comfortable at w - (340 + var(--ced-inset)*2) - (320 + var(--s-8)) >= 560, i.e. w >= 1276px (checked against 1024/1100/1280, per Munk's own list). */ .ced-stage{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y;display:flex;justify-content:center; padding:var(--s-15) var(--s-8) var(--s-15) calc(var(--ced-panel-w) + var(--ced-inset) * 2)} @media(min-width:1276px){ .ced-stage{padding-right:calc(var(--side) + var(--s-8))} } /* Fix round 1 (A). The exact same clamp() #tool-modal.coming-soon .card uses, so the member-facing card and this one are always the same size. */ .ced-card-wrap{width:clamp(min(560px,calc(100% - 32px)),44vw,760px);align-self:center} /* v169. Typed directly on the card — a faint dashed outline in the room's own accent (v171) is the only difference from the read-only text. */ #cover-editor .cs-edit-field{min-height:0;border-bottom:0;outline:1px dashed rgba(var(--accent-rgb),.4);outline-offset:3px;border-radius:var(--r-sm);transition:background var(--t-base),outline-color var(--t-base)} #cover-editor .cs-edit-field:hover{background:var(--accent-soft)} #cover-editor .cs-edit-field:focus{outline-style:solid;outline-color:var(--accent)} #cover-editor .cs-edit-field::placeholder{font-style:italic} /* v200. The Message field (details) reads as a roomier, multi-line box now, even empty or short — the general min-height:0 above (every other edit field here still wants that, hugging one line of text) overridden back up to about three of this field's own lines. */ #cover-editor .cs-edit-details .cs-edit-field{min-height:4.5em} /* v177. Linked highlighting — the lit zone on the card gets a ring and a tag naming its setting (data-ced-label). Zones are all in-flow elements, so anchoring the tag makes them position:relative and nothing else. */ #cover-editor [data-ced-zone],#cover-editor [data-ced-ring]{position:relative} #cover-editor [data-ced-zone].ced-hot,#cover-editor [data-ced-ring].ced-hot{outline:var(--ced-ring-w) solid var(--ced-hot);outline-offset:var(--s-3);border-radius:var(--r-lg)} #cover-editor .cs-hero.ced-hot{outline-offset:calc(var(--ced-ring-w) * -2);border-radius:0} #cover-editor [data-ced-ring].ced-hot{border-radius:var(--r-16)} #cover-editor .ced-hot[data-ced-label]::after{content:attr(data-ced-label);position:absolute;top:calc(var(--s-5) * -1);left:var(--s-6);z-index:var(--z-3);pointer-events:none; padding:var(--s-1) var(--s-4);border-radius:var(--r-md);background:var(--ced-hot);color:var(--on-accent);font:var(--fw-semibold) var(--fs-11) var(--ui);letter-spacing:var(--ls-004em)} #cover-editor .cs-hero.ced-hot::after,#cover-editor [data-ced-ring].ced-hot::after{top:var(--s-6)} #cover-editor [data-ced-ring].ced-hot::after{left:auto;right:var(--s-6)} /* Phone (<600px): the stage on top, the panel a bottom sheet — still detached from the edges, never a horizontal page scroll. */ @media(max-width:599px){ #cover-editor{--ced-inset:var(--s-4);--ced-pad:var(--s-8)} .ced-panel{top:auto;right:var(--ced-inset);width:auto;max-height:52vh} .ced-stage{padding:var(--s-8) var(--s-4) calc(52vh + var(--ced-inset) * 2)} .ced-card-wrap{width:100%;align-self:flex-start} } /* v167. Member view — a slim bar fixed at the top (enterMemberView/ memberViewGoTo, public/venue.js) and every staff/host control hidden off body.member-view alone: never a role change, so nothing here reads me.role/me.tier, only CSS visibility. */ /* v167. --z-alert, not --z-modal: this bar has to outrank every modal it itself opens ("At the door" is a real formModal), so it is never the thing a card ends up hidden behind. v167 design polish. Was a plain full-width solid strip — now a floating pill, centred, dark glass like the venue's other floating bars (#dock's own .glasspill/--ring, reused rather than a one-off background). */ /* v167 redesign. A mode strip, not a floating pill: full width along the top edge, one row that never wraps, gold so it reads as "you're in a mode" rather than as more floor chrome. The whole page (#app, and any card it opens) moves down by its height while it is on, so it covers nothing a member would see. */ #member-view-bar{--mv-h:44px;position:fixed;top:0;left:0;right:0;height:var(--mv-h);z-index:var(--z-alert); display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--s-6);padding:0 var(--s-7); background:var(--gold);color:var(--on-gold);box-shadow:0 1px 0 rgba(0,0,0,.25);font:var(--fw-medium) var(--fs-13) var(--ui)} #member-view-bar.hidden{display:none} #member-view-bar .mv-say{display:flex;align-items:center;gap:var(--s-3);min-width:0;white-space:nowrap} #member-view-bar .mv-say .i{width:18px;height:18px;flex:none} #member-view-bar .mv-say b{font-weight:var(--fw-semibold)} #member-view-bar .mv-room{overflow:hidden;text-overflow:ellipsis;opacity:.72} #member-view-bar .mv-room::before{content:"·";margin:0 var(--s-3) 0 var(--s-1)} #member-view-bar .mv-seg{display:flex;gap:2px;padding:3px;border-radius:var(--pill);background:rgba(27,20,7,.12)} #member-view-bar .mv-seg button{height:30px;padding:0 var(--s-7);border-radius:var(--pill);background:none;color:var(--on-gold); font:var(--fw-semibold) var(--fs-13) var(--ui);white-space:nowrap;transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease)} #member-view-bar .mv-seg button:hover{background:rgba(27,20,7,.1)} #member-view-bar .mv-seg button[aria-pressed="true"]{background:var(--on-gold);color:var(--gold)} #member-view-bar .mv-end{justify-self:end;display:flex;align-items:center;gap:var(--s-4)} #member-view-bar .mv-esc{font:var(--fw-semibold) var(--fs-11) var(--ui);padding:2px 6px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px rgba(27,20,7,.35);opacity:.8} #member-view-bar #mv-back{height:30px;padding:0 var(--s-7);border-radius:var(--pill);background:var(--on-gold);color:var(--gold); font:var(--fw-semibold) var(--fs-13) var(--ui);white-space:nowrap;transition:transform var(--t-base) var(--ease-press)} #member-view-bar #mv-back:active,#member-view-bar .mv-seg button:active{transform:scale(.97)} #member-view-bar button:focus-visible{outline:2px solid var(--on-gold);outline-offset:2px} #member-view-bar .mv-short{display:none} #member-view-bar:not(.hidden){animation:mv-bar-in var(--t-panel) var(--ease-arrive)} #member-view-bar.closing{animation:mv-bar-out var(--t-settle) var(--ease-in) forwards} @keyframes mv-bar-in{from{transform:translateY(-100%)}} @keyframes mv-bar-out{to{transform:translateY(-100%)}} @media (max-width:640px){ #member-view-bar{grid-template-columns:auto 1fr auto;gap:var(--s-4);padding:0 var(--s-5)} #member-view-bar .mv-room,#member-view-bar .mv-esc{display:none} #member-view-bar .mv-seg{justify-self:center} #member-view-bar .mv-seg button,#member-view-bar #mv-back{padding:0 var(--s-5)} #member-view-bar .mv-full{display:none} #member-view-bar .mv-short{display:inline} } @media (prefers-reduced-motion:reduce){ #member-view-bar:not(.hidden),#member-view-bar.closing{animation:none} } body.member-view #app{top:44px} body.member-view .modal{inset:44px 0 0 0} body.member-view #adminrail,body.member-view #venueadmin,body.member-view #addroom, body.member-view #d-mega,body.member-view #d-door,body.member-view #m-add, body.member-view #m-preview,body.member-view #m-author,body.member-view #r-bg, body.member-view .pedit,body.member-view #bb-reports{display:none!important} .rm.mv-flash{animation:mv-flash 1.6s ease-out} @keyframes mv-flash{0%,35%{box-shadow:0 0 0 2px var(--accent) inset}100%{box-shadow:none}} @media (prefers-reduced-motion:reduce){.rm.mv-flash{animation:none;box-shadow:0 0 0 2px var(--accent) inset}} /* v105. My cards: a drawer from the left, the side the button that opens it is on. */ #tool-modal.drawer-left{place-items:stretch start} #tool-modal.drawer-left .card{width:min(440px,100vw);height:100%;max-height:none;border-radius:0;box-shadow:var(--elev-drawer-left);animation:drawer-in var(--t-panel) var(--ease-arrive)} #tool-modal.drawer-left #tool-form{max-height:none;height:100%} #tool-modal.drawer-left #tool-content{align-content:start} @keyframes drawer-in{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}} /* v167. The generic `.modal.closing .card{animation:lh-card-out}` (below, v109) is a centred-modal fade+scale — wrong direction for an edge drawer. This ID selector outranks that class-only one, so a drawer leaves the same edge it arrived from instead of shrinking toward the middle. */ #tool-modal.drawer-left.closing .card{animation:drawer-out var(--t-settle) var(--ease-in) forwards} @keyframes drawer-out{to{transform:translateX(-24px);opacity:0}} @media (prefers-reduced-motion:reduce){#tool-modal.drawer-left .card,#tool-modal.drawer-left.closing .card{animation:none}} /* v126. Ring added: --group == the drawer's own surface now. */ /* v198. Contact cards are the locked LegendHaven flip card (tradingCardHTML, venue.js) — MyBrain vault, convention/element-cards/_element-card-flip.html. The card is a physical object — the same dark ink and gold in either theme — so its material colours are its own component tokens, named once here. Every size is in em off --tcard-w (1em = a thirtieth of the card's width), so setting --tcard-w alone scales the whole card, from a request row's thumbnail to the card view. No chips, icons, outer border or glow — just full-bleed face art, the name in the venue's own display serif (--brand), a role line, and a thin gold hairline inset (the flip card's own locked material; nothing else on the venue uses gold as an accent — see v171). The role line's colour lifts the venue's existing role colours (--author-plum, --knight-green, --host-gold). */ .tcard-b{--tcard-w:300px;--tcard-ink:#141518;--tcard-gold:#C9A35A;--tcard-gold-dim:rgba(201,163,90,.34);--tcard-cream:#F6F2E9;--tcard-mute:#9a978e;--tcard-flip-t:.66s;--tcard-flip-ease:cubic-bezier(.42,.08,.24,1)} .tcard-b.tcard-static{position:relative;box-sizing:border-box;width:var(--tcard-w);aspect-ratio:300/420;font-size:calc(var(--tcard-w) / 30);font-family:var(--ui);text-align:left} /* The real card: a