/* Social design system — «موجة الناس» (People's current). The ONE shared stylesheet of the UI rebuild. Contract, markup samples and contrast table: docs/ui-rebuild/UI_SYSTEM.md. Specimen: docs/ui-rebuild/system-sheet.html. Load order on every page: /assets/fonts/fonts.css, /assets/fonts/host-fonts.css, /social.css, then tv.css or phone.css. This file imports nothing. Preference hooks on (web/prefs.js): data-text=large, data-contrast=high, data-motion=reduce, data-effects=reduce; plus @media (forced-colors: active). Rail/range/timer variables are UNITLESS numbers: --v guess, --lo/--hi band bounds, --t truth (0..100), --p timer remaining (0..100). */ @property --v { syntax: ''; inherits: true; initial-value: 50; } @property --lo { syntax: ''; inherits: true; initial-value: 35; } @property --hi { syntax: ''; inherits: true; initial-value: 65; } @property --t { syntax: ''; inherits: true; initial-value: 50; } @property --p { syntax: ''; inherits: true; initial-value: 100; } /* ================= 1. tokens ================= */ :root { /* colour (BRAND_MAP.md §b) */ --canvas: #55B9A4; /* jade: TV + audience ground */ --sheet: #F2D465; /* ochre: question sheet, phone ground, floor */ --seal: #B9DAB5; /* mint: percentage seal, info plates */ --accent: #F28369; /* coral: guess pin, scoring band, gain sticker. Fill only, never text on light grounds */ --ink: #123D36; /* all text, outlines, offset shadows, focus */ --action: #174B3B; /* primary button fill, truth diamond, saved glyph */ --on-action: #FFF1E7; /* text on action / ink */ --paper: #FFF1E7; /* JAM3H cream-100: bodies, sticker border, chips, plates */ --error: #9E1B2A; /* error on paper / ochre / mint */ --error-deep: #6B0F1A; /* error directly on jade; error bar ground */ --focus: var(--ink); /* ink surfaces reset it to var(--sheet) (see .on-ink) */ --ground: var(--canvas); /* page ground: phones set `:root { --ground: var(--sheet); }` (an `html` selector loses to this :root rule) */ /* before the generics: local faces with Arabic (Windows Segoe UI/Tahoma/Arial, Apple Geeza Pro/Tahoma, Android Noto). system-ui at w800 is Segoe UI Black, which has no Arabic, so while the web font loads or fails the heading dropped to Times New Roman (G10). */ /* type (FONT.md; Thmanyah is the target, Noto is the shipped OFL fallback) */ --font-ui: "Thmanyah Sans", "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic UI", Arial, system-ui, sans-serif; --font-display: "Thmanyah Serif Display", "Noto Kufi Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic UI", Arial, sans-serif; --scale: 1; --t-sm: calc(.875rem * var(--scale)); --t-md: calc(1rem * var(--scale)); --t-lg: calc(1.1875rem * var(--scale)); --t-xl: calc(1.5rem * var(--scale)); --t-2xl: calc(2rem * var(--scale)); --t-3xl: calc(3rem * var(--scale)); --t-4xl: calc(4.5rem * var(--scale)); --tracking-code: .24em; /* JAM3H spacing, radius, motion (names and values kept) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-11: 44px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-22: 88px; --sp-24: 96px; --r-chip: 6px; --r-control: 12px; --r-field: 12px; --r-card: 16px; --r-panel: 20px; --r-game-card: 24px; --r-pill: 999px; --dur-feedback: 150ms; --dur-transition: 250ms; --dur-panel: 400ms; --dur-celebration: 700ms; --dur-reveal: 600ms; --dur-stagger: 70ms; --ease-standard: cubic-bezier(.2, .6, .2, 1); --ease-inout: cubic-bezier(.4, 0, .2, 1); --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --reveal-shift: 12px; --target-min: 48px; /* material */ --edge: 3px; /* ink outline width */ --fx: 1; /* 1 = firm offset shadows on; 0 in reduced effects / high contrast / forced colours */ --lift-x: calc(.35rem * var(--fx)); --lift-y: calc(.4rem * var(--fx)); --lift: var(--lift-x) var(--lift-y) 0 var(--ink); --lift-sm: calc(.15rem * var(--fx)) calc(.2rem * var(--fx)) 0 var(--ink); --band-c: var(--accent); /* band fill; high contrast/forced colours swap it for --hatch */ --hatch: none; --seal-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%23123D36' stroke-width='1.1' stroke-dasharray='.1 3.3' stroke-linecap='round'/%3E%3C/svg%3E"); /* avatar module (web/avatars.js) reads these */ --av-body: var(--paper); --av-ink: var(--ink); --av-outline: var(--ink); /* mask shapes (black = kept). Glyphs are drawn, never font characters, so no OFFCHAIN fallback face */ --m-scallop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 4.8A6.61 6.61 0 0 1 61.7 6.34A6.61 6.61 0 0 1 72.6 10.86A6.61 6.61 0 0 1 81.96 18.04A6.61 6.61 0 0 1 89.14 27.4A6.61 6.61 0 0 1 93.66 38.3A6.61 6.61 0 0 1 95.2 50A6.61 6.61 0 0 1 93.66 61.7A6.61 6.61 0 0 1 89.14 72.6A6.61 6.61 0 0 1 81.96 81.96A6.61 6.61 0 0 1 72.6 89.14A6.61 6.61 0 0 1 61.7 93.66A6.61 6.61 0 0 1 50 95.2A6.61 6.61 0 0 1 38.3 93.66A6.61 6.61 0 0 1 27.4 89.14A6.61 6.61 0 0 1 18.04 81.96A6.61 6.61 0 0 1 10.86 72.6A6.61 6.61 0 0 1 6.34 61.7A6.61 6.61 0 0 1 4.8 50A6.61 6.61 0 0 1 6.34 38.3A6.61 6.61 0 0 1 10.86 27.4A6.61 6.61 0 0 1 18.04 18.04A6.61 6.61 0 0 1 27.4 10.86A6.61 6.61 0 0 1 38.3 6.34A6.61 6.61 0 0 1 50 4.8Z'/%3E%3C/svg%3E"); --m-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 62' preserveAspectRatio='none'%3E%3Cpath d='M5 0h40a5 5 0 0 1 5 5v27L25 62 0 32V5a5 5 0 0 1 5-5Z'/%3E%3C/svg%3E"); --m-dia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 50' preserveAspectRatio='none'%3E%3Cpath d='M23 0 46 25 23 50 0 25Z'/%3E%3C/svg%3E"); --g-idle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Ccircle cx='10' cy='10' r='8' stroke-dasharray='3.3 2.98'/%3E%3C/svg%3E"); --g-draft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M10 4a6 6 0 0 0 0 12Z'/%3E%3C/svg%3E"); --g-pending: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7.6' stroke-dasharray='.1 5.87'/%3E%3C/svg%3E"); --g-saved: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 1 0 20a10 10 0 1 1 0-20Zm-4.9 10.3 3.3 3.3 6.6-6.6-1.7-1.7-4.9 4.9-1.6-1.6Z'/%3E%3C/svg%3E"); --g-confirmed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.1' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath fill-rule='evenodd' d='M10 3a7 7 0 1 1 0 14a7 7 0 1 1 0-14Zm-3.5 7.2 2.4 2.4 4.7-4.7-1.3-1.3-3.4 3.4-1.1-1.1Z'/%3E%3C/svg%3E"); --g-offline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Ccircle cx='10' cy='10' r='8'/%3E%3Cpath d='M4.4 15.6 15.6 4.4'/%3E%3C/svg%3E"); --g-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 1 0 20a10 10 0 1 1 0-20ZM8.7 4h2.6l-.4 8h-1.8Zm1.3 9.4a1.6 1.6 0 1 1 0 3.2a1.6 1.6 0 1 1 0-3.2Z'/%3E%3C/svg%3E"); --g-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 1 0 20a10 10 0 1 1 0-20ZM8.7 8h2.6v8H8.7Zm1.3-4.6a1.6 1.6 0 1 1 0 3.2a1.6 1.6 0 1 1 0-3.2Z'/%3E%3C/svg%3E"); --g-prefs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 5h16M2 10h16M2 15h16' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='5' r='2.7'/%3E%3Ccircle cx='7' cy='10' r='2.7'/%3E%3Ccircle cx='12' cy='15' r='2.7'/%3E%3C/svg%3E"); } /* ================= 2. preference modes ================= */ html[data-text="large"] { --scale: 1.25; } /* high contrast: ink text on paper grounds, 3px ink edges, no offset shadows, band hatched + labelled (all text ≥ 7:1) */ html[data-contrast="high"] { --canvas: #FFF1E7; --sheet: #FFF1E7; --seal: #FFF1E7; --accent: #FFF1E7; --error: #6B0F1A; --edge: 3px; --fx: 0; --band-c: #FFF1E7; --seal-ring: none; --hatch: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 7px); --av-coral: #FFF1E7; --av-peach: #FFF1E7; --av-sky: #FFF1E7; --av-mint: #FFF1E7; /* props become ink line art (avatars.js outlines every prop) */ --av-h0: #FFF1E7; --av-h1: #FFF1E7; --av-h2: #FFF1E7; --av-h3: #FFF1E7; --av-h4: #FFF1E7; --av-h5: #FFF1E7; --av-h6: #FFF1E7; --av-h7: #FFF1E7; --av-blush: transparent; --av-sweat: #FFF1E7; --av-tongue: #FFF1E7; /* stickers (avatars.js stickerSVG): paper field, ink ribbon, paper words; the tone is in the words, never the colour */ --stk-paper: #FFF1E7; --stk-field-gain: #FFF1E7; --stk-field-zero: #FFF1E7; --stk-field-win: #FFF1E7; --stk-field-info: #FFF1E7; --stk-ribbon-gain: #123D36; --stk-ribbon-zero: #123D36; --stk-ribbon-win: #123D36; --stk-ribbon-info: #123D36; --stk-text-gain: #FFF1E7; --stk-text-zero: #FFF1E7; --stk-text-win: #FFF1E7; --stk-text-info: #FFF1E7; --range-band: transparent; /* the range band is two ink edges over the hatch */ } html[data-effects="reduce"] { --fx: 0; --seal-ring: none; } html[data-effects="reduce"] .decor { display: none !important; } html[data-motion="reduce"] { --dur-feedback: 0ms; --dur-transition: 0ms; --dur-panel: 0ms; --dur-celebration: 0ms; --dur-reveal: 0ms; --dur-stagger: 0ms; --reveal-shift: 0px; } html[data-motion="reduce"] *, html[data-motion="reduce"] ::before, html[data-motion="reduce"] ::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { /* same result when prefs.js is absent */ :root { --dur-feedback: 0ms; --dur-transition: 0ms; --dur-panel: 0ms; --dur-celebration: 0ms; --dur-reveal: 0ms; --dur-stagger: 0ms; --reveal-shift: 0px; } *, ::before, ::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ================= 3. base ================= */ *, ::before, ::after { box-sizing: border-box; } html { background: var(--ground); color: var(--ink); font-family: var(--font-ui); font-synthesis: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-block-size: 100svh; background: var(--ground); color: var(--ink); font: 400 var(--t-md)/1.6 var(--font-ui); } :where(h1, h2, h3, h4, p, figure, fieldset, dl, dd, ul, ol, blockquote) { margin: 0; } :where(h1, h2, h3, h4) { line-height: 1.35; text-wrap: balance; } :where(fieldset) { padding: 0; border: 0; min-inline-size: 0; } :where(img, svg) { max-inline-size: 100%; } :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: normal; } :where(input, select, textarea) { font-size: max(1rem, 1em); } /* ≥ 16px: no iOS focus zoom */ :where(button, summary, label:has(input)) { cursor: pointer; } .display { font-family: var(--font-display); font-weight: 700; line-height: 1.35; } .hint { font-size: .875em; line-height: 1.55; } :focus { outline: none; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .on-ink { --focus: var(--sheet); color: var(--paper); } /* buttons on ink surfaces: action on ink is 1.2:1, so primary turns ochre and outlines turn paper */ :is(.on-ink, .qr-card, .bar) .btn { color: var(--paper); border-color: var(--paper); } :is(.on-ink, .qr-card, .bar) .btn.primary { background: var(--sheet); color: var(--ink); border-color: var(--sheet); box-shadow: none; } :is(.on-ink, .qr-card, .bar) .btn:not(:disabled, [aria-disabled="true"]):hover { background-color: color-mix(in srgb, var(--paper) 20%, transparent); } /* paper on the mix: 6.17 */ :is(.on-ink, .qr-card, .bar) .btn.primary:not(:disabled, [aria-disabled="true"]):hover { background-color: color-mix(in srgb, var(--sheet) 80%, var(--paper)); } /* ink on the mix: 8.71 */ bdi { unicode-bidi: isolate; font-variant-numeric: tabular-nums; } .num, bdi[dir="ltr"] { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums lining-nums; } .sr { position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } [hidden] { display: none !important; } ::selection { background: var(--ink); color: var(--paper); } /* ================= 4. primitives ================= */ /* ---- .sheet: ochre question sheet; the backing is angled, the text stays level ---- */ .sheet { --sheet-tilt: -1.2deg; position: relative; isolation: isolate; padding: 1.4em 1.8em 1.5em; color: var(--ink); } .sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sheet); border: var(--edge) solid var(--ink); border-radius: 4px; box-shadow: calc(var(--lift-x) * 2) calc(var(--lift-y) * 2) 0 var(--ink); transform: rotate(var(--sheet-tilt)) skewX(calc(var(--sheet-tilt) * -.6)); } .sheet.level { --sheet-tilt: 0deg; } .sheet.mirror { --sheet-tilt: 1.2deg; } /* phones: the tilted backing reaches ≈ 0.017 × the sheet's height past each side (a 1,200px sheet at 200 % text: 20px). The sheet clips its paint 16px outside its box (the page gutter), so a tall sheet never scrolls the page sideways. Both axes: Chromium ignores overflow-clip-margin when only overflow-x is clip. Plain shadows (≤ 13px) are untouched; at 200 % text the 26px shadow is cut to 16px. Not on the TV (never under 40em): stickers overhang the sheet's end edge there. */ @media (max-width: 40em) { .sheet { overflow: clip; overflow-clip-margin: var(--sp-4); } } .sheet-actor { display: flex; align-items: center; gap: .5em; font-weight: 700; line-height: 1.3; } .sheet-q { font-weight: 800; font-size: 2.1em; line-height: 1.45; text-wrap: balance; overflow-wrap: anywhere; } .sheet-src { font-weight: 600; line-height: 1.4; } /* ---- shared cut-shape technique: ::before = ink rim + firm offset copy, ::after = face inset by the rim ---- */ .seal, .pin-guess, .pin-truth { isolation: isolate; } :is(.seal, .pin-guess, .pin-truth)::before, :is(.seal, .pin-guess, .pin-truth)::after { content: ""; position: absolute; z-index: -1; pointer-events: none; } :is(.seal, .pin-guess, .pin-truth)::before { inset: 0 calc(-1 * var(--sh)) calc(-1 * var(--sh)) 0; background: var(--ink); -webkit-mask: var(--shape) 0 0 / var(--w) var(--h) no-repeat, var(--shape) var(--sh) var(--sh) / var(--w) var(--h) no-repeat; mask: var(--shape) 0 0 / var(--w) var(--h) no-repeat, var(--shape) var(--sh) var(--sh) / var(--w) var(--h) no-repeat; } :is(.seal, .pin-guess, .pin-truth)::after { inset: var(--rim); background: var(--face); -webkit-mask: var(--shape) center / 100% 100% no-repeat; mask: var(--shape) center / 100% 100% no-repeat; } /* ---- .seal: mint scalloped percentage seal (Kufi numerals) ---- */ .seal { --seal-size: 13rem; --shape: var(--m-scallop); --w: var(--seal-size); --h: var(--seal-size); --sh: calc(var(--seal-size) * .03 * var(--fx)); --rim: max(var(--edge), calc(var(--seal-size) * .012)); --face: var(--seal-ring) center / 84% 84% no-repeat, var(--seal); position: relative; display: grid; place-content: center; justify-items: center; flex: none; inline-size: var(--seal-size); block-size: var(--seal-size); padding: calc(var(--seal-size) * .15); /* not %: that resolves against the container width */ text-align: center; color: var(--ink); font-size: calc(var(--seal-size) * .065 * var(--scale)); line-height: 1.35; } .seal-num { display: flex; align-items: baseline; justify-content: center; direction: ltr; font: 700 calc(var(--seal-size) * .38)/1.08 var(--font-display); letter-spacing: -.02em; } .seal-num small { font-size: .42em; letter-spacing: 0; } .seal-num.tri { font-size: calc(var(--seal-size) * .3); } /* «100%»: pages add .tri for 3 digits so it stays inside the ring */ .seal-num.none { letter-spacing: 0; } /* «؟» before the first saved value */ .seal-kicker { display: flex; align-items: center; gap: .4em; font-weight: 700; } .seal-note { max-inline-size: 11em; font-weight: 600; text-wrap: balance; } .seal-input { inline-size: 3ch; padding: 0; border: 0; border-radius: var(--r-chip); background: transparent; font: inherit; font-size: 1em; text-align: center; letter-spacing: inherit; -moz-appearance: textfield; appearance: textfield; } @supports (field-sizing: content) { .seal-input { inline-size: auto; min-inline-size: 1ch; field-sizing: content; } } .seal-input::-webkit-inner-spin-button, .seal-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .seal.flip { animation: seal-flip var(--dur-reveal) var(--ease-out-expo) both; } @keyframes seal-flip { from { transform: perspective(60em) rotateY(-70deg) scale(.92); } } /* ---- .rail: the 0–100 instrument. dir=ltr always: 0 left, 100 right, also under RTL ---- */ .rail { --rail-size: calc(1rem * var(--scale)); --u: var(--rail-size); --pad: calc(var(--u) * 3.1); --ty: calc(var(--u) * 4.2); --span: calc(100% - 2 * var(--pad)); --x-v: calc(var(--pad) + var(--span) * clamp(0, var(--v), 100) / 100); --x-t: calc(var(--pad) + var(--span) * clamp(0, var(--t), 100) / 100); --x-lo: calc(var(--pad) + var(--span) * clamp(0, var(--lo), 100) / 100); --w-band: calc(var(--span) * (clamp(0, var(--hi), 100) - clamp(0, var(--lo), 100)) / 100); position: relative; display: flow-root; direction: ltr; font: 700 var(--u)/1.2 var(--font-ui); color: var(--ink); container: rail / inline-size; transition: --v var(--dur-transition) var(--ease-standard), --lo var(--dur-transition) var(--ease-standard), --hi var(--dur-transition) var(--ease-standard), --t var(--dur-transition) var(--ease-standard); } .rail.static { transition: none; } .rail > :not(.rail-track) { position: absolute; } /* the track is the one in-flow child: its margins give the rail its height (--rail-h: 8.2 units; 9.9 on a narrow rail with a truth pin) */ .rail-track { --rail-h: calc(var(--u) * 8.2); position: relative; display: block; block-size: calc(var(--u) * .46); margin: calc(var(--ty) - var(--u) * .23) var(--pad) calc(var(--rail-h) - var(--ty) - var(--u) * .23); border-radius: var(--r-pill); background: var(--ink); } .rail-track::after { content: ""; position: absolute; left: -1px; right: -1px; top: 100%; block-size: calc(var(--u) * .55); /* ticks every 10 */ background: linear-gradient(90deg, var(--ink) 0 2px, transparent 2px) 0 0 / calc((100% - 2px) / 10) 100% repeat-x; } .rail-end { top: var(--ty); translate: 0 -50%; font-size: 1.3em; line-height: 1; } .rail-end.e0 { right: calc(100% - var(--pad) + var(--u) * .45); } .rail-end.e100 { left: calc(100% - var(--pad) + var(--u) * .45); } .band { left: var(--x-lo); inline-size: var(--w-band); top: calc(var(--ty) - var(--u)); block-size: calc(var(--u) * 2); z-index: 2; /* over the truth stem */ display: flex; align-items: center; justify-content: space-between; padding-inline: calc(var(--u) * .35); background: var(--hatch), var(--band-c); border: max(2px, calc(var(--u) * .1)) solid var(--ink); border-radius: calc(var(--u) * .4); box-shadow: calc(var(--u) * .16 * var(--fx)) calc(var(--u) * .2 * var(--fx)) 0 var(--ink); font-size: .92em; white-space: nowrap; } .band > bdi { padding-inline: .15em; border-radius: var(--r-chip); line-height: 1.15; } .band.emph { animation: band-emph var(--dur-transition) var(--ease-inout) var(--dur-reveal) both; } @keyframes band-emph { 50% { scale: 1 1.22; } } .pin-guess { --w: calc(var(--u) * 2.7); --h: calc(var(--u) * 3.35); --shape: var(--m-pin); --sh: calc(var(--u) * .12 * var(--fx)); --rim: max(2px, calc(var(--u) * .1)); --face: var(--accent); --flip: clamp(0, (28 - var(--v)) * 1000, 1); /* label moves to the right of the pin when v < 28 */ left: var(--x-v); top: calc(var(--ty) - var(--u) * 4.05); inline-size: var(--w); block-size: var(--h); translate: -50% 0; z-index: 3; display: flex; justify-content: center; padding-block-start: calc(var(--u) * .42); font-size: 1.05em; line-height: 1; } /* truth: an ink stem from the track down to a fixed-size action diamond with a mint centre */ .pin-truth { --w: calc(var(--u) * 2.3); --dh: calc(var(--u) * 2.5); --drop: calc(var(--u) * 1.2); --stem: max(3px, calc(var(--u) * .2)); --shape: var(--m-dia); --sh: calc(var(--u) * .12 * var(--fx)); --rim: max(2px, calc(var(--u) * .1)); --face: radial-gradient(circle, var(--seal) 0 calc(var(--u) * .24), var(--action) calc(var(--u) * .24 + 1px)); --flip: clamp(0, (var(--t) - 72) * 1000, 1); /* label moves to the left of the diamond when t > 72 */ left: var(--x-t); top: var(--ty); inline-size: var(--w); block-size: calc(var(--drop) + var(--dh)); translate: -50% 0; } .pin-truth::before { -webkit-mask: var(--m-dia) 0 calc(100% - var(--sh)) / var(--w) var(--dh) no-repeat, var(--m-dia) var(--sh) 100% / var(--w) var(--dh) no-repeat, linear-gradient(#000 0 0) calc((var(--w) - var(--stem)) / 2) 0 / var(--stem) calc(var(--drop) + var(--dh) / 2) no-repeat; mask: var(--m-dia) 0 calc(100% - var(--sh)) / var(--w) var(--dh) no-repeat, var(--m-dia) var(--sh) 100% / var(--w) var(--dh) no-repeat, linear-gradient(#000 0 0) calc((var(--w) - var(--stem)) / 2) 0 / var(--stem) calc(var(--drop) + var(--dh) / 2) no-repeat; } .pin-truth::after { inset: auto var(--rim) var(--rim); block-size: calc(var(--dh) - 2 * var(--rim)); } .pin-truth.drop { animation: truth-drop var(--dur-reveal) var(--ease-out-expo) both; } @keyframes truth-drop { from { transform: translate(var(--drop-x, 0), var(--drop-y, calc(var(--u) * -6))); } } .pin-label { position: absolute; top: 50%; direction: rtl; unicode-bidi: isolate; white-space: nowrap; font-size: .95em; line-height: 1.3; } .pin-guess .pin-label { top: 40%; left: calc((1 - var(--flip)) * (var(--u) * -.35) + var(--flip) * (100% + var(--u) * .35)); translate: calc((1 - var(--flip)) * -100%) -50%; } .pin-truth .pin-label { top: calc(100% - var(--dh) / 2); left: calc((1 - var(--flip)) * (100% + var(--u) * .3) + var(--flip) * (var(--u) * -.3)); translate: calc(var(--flip) * -100%) -50%; } .rail.empty .band, .rail.empty .pin-guess, .rail.empty .pin-truth { display: none; } .rail.empty .rail-track { background: repeating-linear-gradient(90deg, var(--ink) 0 calc(var(--u) * .7), transparent 0 calc(var(--u) * 1.2)); } /* narrow rails (every rail under 46 units wide: phone, TV side rails): bound labels become tags under the band edges, pointing outward; the truth stem passes behind them */ @container rail (max-width: 46em) { .band { justify-content: center; } .band > bdi { position: absolute; top: calc(100% + var(--u) * .3); translate: -50% 0; padding: .05em .4em .12em; background: var(--paper); border: 2px solid var(--ink); font-size: .92em; } .band > .lo { left: 0; translate: -100% 0; } .band > .hi { left: 100%; translate: 0 0; } /* tags point outward from the band edges */ .pin-truth { --drop: calc(var(--u) * 2.9); } .rail:has(> .pin-truth) > .rail-track { --rail-h: calc(var(--u) * 9.9); } } /* ---- .sticker: die-cut collectible. Paper border, ink outline, firm offset shadow, SVG figure + caption ribbon ---- */ .sticker { --sticker-size: 10rem; --tilt: -6deg; --field: var(--accent); --ss: calc(var(--sticker-size) * .04 * var(--fx)); position: relative; display: inline-grid; place-items: center; flex: none; inline-size: var(--sticker-size); aspect-ratio: 1; margin: 0; rotate: var(--tilt); border: calc(var(--sticker-size) * .065) solid var(--paper); border-radius: 47% 53% 50% 50% / 52% 46% 54% 48%; background: var(--field); box-shadow: 0 0 0 var(--edge) var(--ink), var(--ss) calc(var(--ss) * 1.15) 0 var(--edge) var(--ink); } .sticker[data-tone="zero"] { --field: var(--seal); } .sticker[data-tone="win"] { --field: var(--sheet); } .sticker-art { display: block; inline-size: 78%; aspect-ratio: 1; margin-block-end: 14%; } .sticker-art > img, .sticker-art > svg { display: block; inline-size: 100%; block-size: 100%; } .sticker-cap { position: absolute; left: 50%; bottom: 3%; translate: -50% 0; rotate: 3deg; max-inline-size: 118%; padding: .14em 1.1em .26em; background: var(--ink); color: var(--paper); font: 700 calc(var(--sticker-size) * .1 * var(--scale))/1.3 var(--font-ui); white-space: nowrap; clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%); } .sticker.slap { animation: slap var(--dur-reveal) var(--ease-out-expo) var(--delay, 0ms) both; } /* starts visible: transform only */ @keyframes slap { from { scale: 1.28; rotate: calc(var(--tilt) + 9deg); } } /* ---- .hidden-card: a cast member not revealed yet (FINAL_REVEAL). Same box and tilt as a .sticker of the same --sticker-size, so the sticker takes its slot without a layout shift. Dashed = nothing here yet; the «؟» is text (aria-hidden; the page labels the figure) ---- */ .hidden-card { --sticker-size: 10rem; --tilt: -6deg; position: relative; isolation: isolate; display: inline-grid; place-items: center; flex: none; inline-size: var(--sticker-size); aspect-ratio: 1; margin: 0; rotate: var(--tilt); border: max(3px, calc(var(--sticker-size) * .025)) dashed var(--ink); border-radius: 47% 53% 50% 50% / 52% 46% 54% 48%; background: transparent; color: var(--ink); font: 700 calc(var(--sticker-size) * .42)/1 var(--font-display); } .hidden-card::before { content: ""; position: absolute; inset: 14%; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--paper) 55%, transparent); } /* faint paper silhouette so the ؟ reads on any ground */ .hidden-card-mark { translate: 0 -.04em; } /* ---- .reveal-pop: the moment a hidden member turns into their sticker. Transform only, starts visible (scale .6), overshoots, settles; reduced motion removes it (the settled pose shows at the same step time). Replaces .slap on that element; late screens omit it ---- */ .reveal-pop { animation: reveal-pop var(--dur-reveal) var(--ease-out-expo) var(--delay, 0ms) both; } @keyframes reveal-pop { 0% { scale: .6; } 55% { scale: 1.12; } 100% { scale: 1; } } /* ---- .member: one cast member. figure + name + score + tag, stacked; order in the row never changes ---- */ .member { --member-size: 9rem; --m: var(--member-size); position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; inline-size: max(calc(var(--m) * 1.08), calc(var(--member-size) * 1.2)); margin: 0; text-align: center; font-size: max(var(--t-sm), calc(var(--member-size) * .16 * var(--scale))); line-height: 1.3; } .member.active { --m: calc(var(--member-size) * 1.3); } .member-fig { position: relative; display: block; inline-size: var(--m); aspect-ratio: 1; } .member-fig > img, .member-fig > svg { display: block; inline-size: 100%; block-size: 100%; } .member figcaption { display: flex; flex-direction: column; align-items: center; gap: .15em; max-inline-size: 100%; } .member-name { font-weight: 700; text-wrap: balance; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .member-score { font-weight: 600; } .member .tag { margin-block-start: .15em; font-size: .86em; } .member.active::before, .member.away::before { content: ""; position: absolute; z-index: -1; top: calc(var(--m) * .76); inline-size: calc(var(--m) * 1.02); block-size: calc(var(--m) * .2); border-radius: 50%; } .member.active::before { background: var(--accent); border: var(--edge) solid var(--ink); box-shadow: var(--lift-sm); } .member.away::before { border: var(--edge) dashed var(--ink); } .member.away .member-fig { opacity: .5; filter: grayscale(1); } .member:is(.ready, .locked) .member-fig::after { content: ""; position: absolute; top: 2%; inset-inline-end: 4%; inline-size: 27%; aspect-ratio: 1; background: var(--action); -webkit-mask: var(--g-saved) center / contain no-repeat; mask: var(--g-saved) center / contain no-repeat; } .member.locked .member-fig { animation: hop var(--dur-transition) var(--ease-standard); } .member.gain .member-fig { animation: cheer var(--dur-celebration) var(--ease-out-expo); } .member.gain .member-score { font-weight: 800; } .member.zero .member-fig { translate: 0 3%; } @keyframes hop { 40% { translate: 0 -8%; } } @keyframes cheer { 30% { translate: 0 -12%; scale: 1.04; } } /* ---- .qr-card: the audience invitation, an ink ticket ---- */ .qr-card { --qr-size: 12rem; --focus: var(--sheet); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1em; padding: 1em; border-radius: var(--r-panel); background: var(--ink); color: var(--sheet); box-shadow: var(--lift); } .qr-text { display: grid; gap: .35em; min-inline-size: 0; } .qr-title { font-weight: 700; font-size: 1.15em; line-height: 1.35; text-wrap: balance; } .qr-code { color: var(--paper); font-weight: 700; font-size: 1.6em; line-height: 1.2; letter-spacing: var(--tracking-code); white-space: nowrap; } .qr-note { font-size: .85em; line-height: 1.4; text-wrap: balance; } .qr-frame { display: block; inline-size: var(--qr-size); aspect-ratio: 1; padding: calc(var(--qr-size) * .05); border-radius: var(--r-control); background: var(--paper); } .qr-frame > img, .qr-frame > svg { display: block; inline-size: 100%; block-size: 100%; } .qr-card.masked .qr-frame { background: repeating-linear-gradient(135deg, var(--paper) 0 .5em, color-mix(in srgb, var(--ink) 22%, var(--paper)) 0 1em); } .qr-card.masked .qr-frame > * { visibility: hidden; } /* ---- .mark-plate: the JAM3H mark (web/assets/brand/mark-96.png) on a solid ink plate. Logo colours never adjust ---- */ .mark-plate { display: inline-grid; place-items: center; padding: max(8px, .3em); border-radius: var(--r-card); background: #123D36; forced-color-adjust: none; } .mark-plate > img { display: block; block-size: var(--mark-h, 26px); inline-size: auto; } /* ---- .btn ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-block-size: var(--target-min); min-inline-size: var(--target-min); padding: .5em 1.25em; border: var(--edge) solid var(--ink); border-radius: var(--r-card); background: transparent; color: var(--ink); font-weight: 700; font-size: 1.0625em; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; transition: translate var(--dur-feedback) var(--ease-standard), box-shadow var(--dur-feedback) var(--ease-standard), background-color var(--dur-feedback); } .btn.primary { min-block-size: max(var(--target-min), 3.1em); background: var(--action); color: var(--on-action); box-shadow: 0 calc(.3em * var(--fx)) 0 var(--ink); } .btn.secondary { background: transparent; } .btn.quiet { border-color: transparent; padding-inline: .6em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; } .btn.block { display: flex; inline-size: 100%; } .btn:not(:disabled, [aria-disabled="true"]):hover { background-color: color-mix(in srgb, var(--paper) 35%, transparent); } .btn.primary:not(:disabled, [aria-disabled="true"]):hover { background-color: color-mix(in srgb, var(--action) 88%, var(--paper)); } .btn:not(:disabled, [aria-disabled="true"]):active { translate: 0 calc(.2em * var(--fx)); box-shadow: 0 calc(.1em * var(--fx)) 0 var(--ink); } .btn:is(:disabled, [aria-disabled="true"]) { background: transparent; color: var(--ink); border-style: dashed; box-shadow: none; cursor: not-allowed; } /* ---- .stepper: − value +, 56px targets. Glyphs are drawn bars; the buttons carry aria-label ---- */ .stepper { direction: ltr; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); } .step { --s: calc(3.5rem * var(--scale)); position: relative; flex: none; inline-size: var(--s); block-size: var(--s); padding: 0; border: var(--edge) solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: var(--lift-sm); font-size: 0; cursor: pointer; transition: translate var(--dur-feedback) var(--ease-standard), box-shadow var(--dur-feedback); } .step::before, .step.plus::after { content: ""; position: absolute; left: 50%; top: 50%; inline-size: 38%; block-size: 4px; translate: -50% -50%; border-radius: 2px; background: currentColor; } .step.plus::after { rotate: 90deg; } .step:not(:disabled):active { translate: .1rem .15rem; box-shadow: none; } .step:disabled { border-style: dashed; box-shadow: none; cursor: not-allowed; background: transparent; } .stepper-value { min-inline-size: 3ch; font: 700 var(--t-2xl)/1.1 var(--font-display); text-align: center; } /* ---- field: text input for the entry surface ---- */ .field { inline-size: 100%; min-block-size: var(--target-min); padding: .45em .8em; border: var(--edge) solid var(--ink); border-radius: var(--r-field); background: var(--paper); color: var(--ink); line-height: 1.4; } .field[aria-invalid="true"] { border-color: var(--error); } .field::placeholder { color: var(--ink); opacity: .72; } /* 5.3:1 on paper */ /* ---- input[type=range].range: native slider, band drawn in the track at the thumb-centre positions ---- */ .range { --thumb: calc(2.25rem * var(--scale)); --thumb-c: var(--accent); --e: 2px; --bx0: calc(var(--thumb) / 2 + (100% - var(--thumb)) * clamp(0, var(--lo), 100) / 100); --bx1: calc(var(--thumb) / 2 + (100% - var(--thumb)) * clamp(0, var(--hi), 100) / 100); --track: linear-gradient(90deg, var(--paper) var(--bx0), var(--ink) var(--bx0) calc(var(--bx0) + var(--e)), var(--range-band, var(--band-c)) calc(var(--bx0) + var(--e)) calc(var(--bx1) - var(--e)), var(--ink) calc(var(--bx1) - var(--e)) var(--bx1), var(--paper) var(--bx1)), var(--hatch), var(--paper); display: block; inline-size: 100%; block-size: var(--target-min); margin: 0; padding: 0; direction: ltr; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; border-radius: var(--r-control); } .range::-webkit-slider-runnable-track { block-size: 1.1rem; border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--track); } .range::-moz-range-track { block-size: 1.1rem; border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--track); } .range::-webkit-slider-thumb { -webkit-appearance: none; inline-size: var(--thumb); block-size: var(--thumb); margin-block-start: calc((1.1rem - 4px - var(--thumb)) / 2); border: 3px solid var(--ink); border-radius: 50%; background: var(--thumb-c); box-shadow: var(--lift-sm); } .range::-moz-range-thumb { inline-size: var(--thumb); block-size: var(--thumb); border: 3px solid var(--ink); border-radius: 50%; background: var(--thumb-c); box-shadow: var(--lift-sm); } .range:disabled { cursor: not-allowed; } .range:disabled::-webkit-slider-thumb { background: var(--paper); box-shadow: none; } /* ---- .status: save/sync state. Glyph + words, never colour only. Dashed = nothing saved yet, solid = saved/confirmed ---- */ .status { --glyph: var(--g-idle); display: inline-flex; align-items: center; gap: .45em; min-block-size: 2.1em; padding: .2em .95em .25em .8em; border: max(2px, .14em) dashed var(--ink); border-radius: var(--r-pill); background: transparent; color: var(--ink); font-weight: 700; line-height: 1.3; } .status::before { content: ""; flex: none; inline-size: 1.25em; block-size: 1.25em; background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; } .status[data-state="draft"] { --glyph: var(--g-draft); } .status[data-state="pending"] { --glyph: var(--g-pending); } .status[data-state="pending"]::before { animation: spin 1.2s linear infinite; } .status[data-state="saved"] { --glyph: var(--g-saved); border-style: solid; } .status[data-state="saved"]::before { background: var(--action); } .status[data-state="confirmed"] { --glyph: var(--g-confirmed); border-style: solid; background: var(--action); color: var(--on-action); box-shadow: var(--lift-sm); } .status[data-state="offline"] { --glyph: var(--g-offline); background: var(--paper); } .status[data-state="error"] { --glyph: var(--g-error); border-style: solid; border-color: var(--error); background: var(--paper); color: var(--error); } @keyframes spin { to { rotate: 1turn; } } /* ---- .chip / .tag ---- */ .chip { display: inline-flex; align-items: center; gap: .4em; min-block-size: 2em; padding: .15em .8em .2em; border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-weight: 600; line-height: 1.3; white-space: nowrap; max-inline-size: 100%; } .chip.code { flex-wrap: wrap; justify-content: center; white-space: normal; } /* 200 % text: the code drops under its label instead of widening the page */ .chip.ink { --focus: var(--sheet); background: var(--ink); color: var(--paper); } .chip.code bdi { white-space: nowrap; letter-spacing: var(--tracking-code); font-weight: 700; } .tag { display: inline-flex; align-items: center; justify-content: center; gap: .35em; padding: .1em .6em .18em; border: var(--edge) solid var(--ink); border-radius: var(--r-control); background: var(--paper); color: var(--ink); font-weight: 700; line-height: 1.3; white-space: nowrap; overflow-wrap: normal; } /* a tag never breaks inside a word */ .tag.stack { flex-direction: column; gap: 0; line-height: 1.2; padding-block: .2em .25em; } /* text large for the screen (200 % text or page zoom on a phone: the viewport is under 15 browser em; plain and «نص أكبر»: never): a tag is ONE inline run, so where a page lets it wrap its words and numbers wrap together. In the flex row each text run and each is its own item and they cannot share a line break. Spaces stand in for the gap (plain size keeps the row and its .35em gap). */ @media (max-width: 15em) { .tag:not(.stack) { display: inline-block; text-align: center; } } .tag[data-tone="gain"] { box-shadow: var(--lift-sm); rotate: -3deg; } .tag[data-tone="zero"] { background: transparent; border-style: dashed; } .tag[data-tone="win"] { background: var(--action); color: var(--on-action); box-shadow: var(--lift-sm); rotate: -3deg; } .tag[data-tone="info"] { background: var(--seal); } /* ---- .timer: disc, --p = remaining 0..100 (ink arc = time left) ---- */ .timer { --timer-size: calc(3rem * var(--scale)); --ring: calc(var(--timer-size) * .13); --face: var(--sheet); position: relative; display: inline-grid; place-items: center; flex: none; inline-size: var(--timer-size); aspect-ratio: 1; padding-block-start: .08em; border: var(--edge) solid var(--ink); border-radius: 50%; color: var(--ink); box-shadow: var(--lift-sm); background: radial-gradient(closest-side, var(--face) calc(100% - var(--ring)), transparent calc(100% - var(--ring) + .5px)), conic-gradient(var(--paper) calc((100 - clamp(0, var(--p), 100)) * 1%), var(--ink) 0) /* clockwise: the elapsed part grows from 12 o'clock like a clock hand; the ink arc (time left) ends at 12 */; font: 700 calc(var(--timer-size) * .38)/1 var(--font-display); transition: --p 1s linear; } .timer.urgent { --face: var(--accent); } .timer.static { transition: none; } /* ---- .prefs: SocialPrefs.panel() markup (details > summary + fieldset of checkbox labels + .hint) ---- */ .prefs { max-inline-size: 30rem; } .prefs > summary { display: flex; align-items: center; gap: .6em; min-block-size: var(--target-min); padding-inline: .3em; border-radius: var(--r-control); font-weight: 700; list-style: none; } .prefs > summary::-webkit-details-marker { display: none; } .prefs > summary::before { content: ""; flex: none; inline-size: 1.3em; block-size: 1.3em; background: currentColor; -webkit-mask: var(--g-prefs) center / contain no-repeat; mask: var(--g-prefs) center / contain no-repeat; } .prefs > summary::after { content: ""; margin-inline-start: auto; inline-size: .6em; block-size: .6em; border: solid currentColor; border-width: 0 3px 3px 0; rotate: 45deg; translate: 0 -.15em; transition: rotate var(--dur-feedback) var(--ease-standard); } .prefs[open] > summary::after { rotate: -135deg; translate: 0 .15em; } .prefs fieldset { margin-block-start: .3em; padding: .35em 1em; border: var(--edge) solid var(--ink); border-radius: var(--r-card); background: var(--paper); color: var(--ink); } .prefs label { display: flex; align-items: center; gap: .75em; min-block-size: var(--target-min); } .prefs input[type="checkbox"] { flex: none; inline-size: 1.5rem; block-size: 1.5rem; margin: 0; accent-color: var(--action); } .prefs input[type="checkbox"]:disabled { cursor: not-allowed; } .prefs small.hint { display: block; margin: -.45em 0 .4em; padding-inline-start: 2.25rem; } .prefs > .hint { margin-block-start: .5em; } /* ---- .notice / .bar: inline plate / full-width banner. data-tone = info (default) | ok | offline | error ---- */ .notice { --glyph: var(--g-info); --glyph-c: var(--ink); display: flex; align-items: flex-start; gap: .6em; padding: .7em 1em; border: var(--edge) solid var(--ink); border-radius: var(--r-card); background: var(--paper); color: var(--ink); line-height: 1.5; } .notice::before { content: ""; flex: none; inline-size: 1.3em; block-size: 1.3em; margin-block-start: .1em; background: var(--glyph-c); -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; } /* inline children beside bare text («… 12 ثانية», «… …»): the flex row would make every text run and every element its own item, and they could not wrap together (200 % text overflow). Such a notice is ONE inline run instead: the glyph rides inline at its start and later lines run under it. Text alone, or one around all of it, keeps the row with the hanging glyph. */ .notice:where(:has(> :is(bdi, b, strong, em, i, a, small, code, span:not(:only-child)))) { display: block; } .notice:where(:has(> :is(bdi, b, strong, em, i, a, small, code, span:not(:only-child))))::before { display: inline-block; vertical-align: top; margin-inline-end: .6em; } .notice[data-tone="ok"] { --glyph: var(--g-saved); --glyph-c: var(--action); } .notice[data-tone="offline"] { --glyph: var(--g-offline); border-style: dashed; } .notice[data-tone="error"] { --glyph: var(--g-error); --glyph-c: var(--error); border-color: var(--error); } .notice > :is(b, strong):first-child { font-weight: 700; } .bar { --focus: var(--sheet); --glyph-c: currentColor; position: sticky; inset-block-start: 0; z-index: 20; justify-content: center; align-items: center; border-width: 0 0 var(--edge); border-radius: 0; background: var(--ink); color: var(--paper); } .bar:where(:has(> :is(bdi, b, strong, em, i, a, small, code, span:not(:only-child)))) { text-align: center; } /* the inline run keeps the bar's centring */ .bar[data-tone="error"] { background: var(--error-deep); --glyph-c: currentColor; border-color: var(--ink); } /* ================= 5. high contrast extras (tokens do most of the work) ================= */ html[data-contrast="high"] .band > bdi { background: var(--paper); box-shadow: 0 0 0 2px var(--paper); } html[data-contrast="high"] .timer.urgent { border-width: calc(var(--edge) * 2); } html[data-contrast="high"] :is(.qr-card, .notice, .status, .chip) { border: var(--edge) solid var(--ink); } html[data-contrast="high"] .status[data-state="error"], html[data-contrast="high"] .notice[data-tone="error"] { border-color: var(--error); } html[data-contrast="high"] .status:is([data-state="idle"], [data-state="draft"], [data-state="pending"], [data-state="offline"]), html[data-contrast="high"] .notice[data-tone="offline"] { border-style: dashed; } html[data-contrast="high"] .qr-card { border-color: var(--paper); } html[data-contrast="high"] .member.away .member-fig { opacity: .7; } html[data-contrast="high"] .field::placeholder { opacity: 1; } /* ================= 6. forced colours: system colours, an edge on every shape, pins told apart by shape and fill ================= */ @media (forced-colors: active) { /* The drawn primitives opt out of forcing and take system-colour tokens, so their shapes keep an edge and their text gets no backplate (a forced backplate under large Kufi numerals or a 1.2 line box paints over neighbouring Arabic dots). Everything else keeps its tokens and is forced by the browser. */ :root { --fx: 0; --seal-ring: none; --range-band: transparent; /* art (avatars.js): ink line art on Canvas; set on :root because the figures also sit outside the opted-out primitives */ --av-outline: CanvasText; --av-ink: CanvasText; --av-body: Canvas; --av-blush: transparent; --av-shine: Canvas; --av-sweat: Canvas; --av-tongue: Canvas; --av-coral: Canvas; --av-peach: Canvas; --av-sky: Canvas; --av-mint: Canvas; --av-h0: Canvas; --av-h1: Canvas; --av-h2: Canvas; --av-h3: Canvas; --av-h4: Canvas; --av-h5: Canvas; --av-h6: Canvas; --av-h7: Canvas; --stk-paper: Canvas; --stk-field-gain: Canvas; --stk-field-zero: Canvas; --stk-field-win: Canvas; --stk-field-info: Canvas; --stk-ribbon-gain: CanvasText; --stk-ribbon-zero: CanvasText; --stk-ribbon-win: CanvasText; --stk-ribbon-info: CanvasText; --stk-text-gain: Canvas; --stk-text-zero: Canvas; --stk-text-win: Canvas; --stk-text-info: Canvas; } .rail, .seal, .sheet, .sticker, .timer, .range, .member, .qr-card, .tag, .chip, .status, .notice { forced-color-adjust: none; --ink: CanvasText; --paper: Canvas; --sheet: Canvas; --seal: Canvas; --accent: Canvas; --action: CanvasText; --on-action: Canvas; --error: CanvasText; --error-deep: CanvasText; --band-c: Canvas; --hatch: repeating-linear-gradient(135deg, CanvasText 0 2px, transparent 2px 7px); } :where(.rail, .seal, .sheet, .sticker, .timer, .range, .member, .qr-card, .tag, .chip, .status, .notice) { color: var(--ink); } /* inherited text keeps the author colour otherwise */ .prefs > summary::before, .member:is(.ready, .locked) .member-fig::after { forced-color-adjust: none; background: CanvasText; } :focus-visible { outline: 3px solid Highlight; } .band > bdi { background: Canvas; } .range { --thumb-c: Highlight; } .timer.urgent { border-width: calc(var(--edge) * 2); } :is(.qr-card, .notice, .chip) { border: 2px solid CanvasText; } .status[data-state="confirmed"], .tag[data-tone="win"] { outline: 2px solid CanvasText; outline-offset: 2px; } .sticker, .btn { border-color: CanvasText; } .btn.quiet { border: 2px solid ButtonText; } .step::before, .step.plus::after { forced-color-adjust: none; background: ButtonText; } .step:disabled::before, .step.plus:disabled::after { background: GrayText; } .member.away .member-fig { opacity: 1; } }