/* Social entry (web/index.html) and optional operator desk (web/operator.html) — «موجة الناس».
   Layout only: tokens and primitives live in social.css (docs/ui-rebuild/UI_SYSTEM.md). No hex colours here.
   Entry: the jade room with the cast on the ochre floor, then one ochre sheet for join, then create below it.
   Operator: an ochre desk under a sticky ink strip; sections split by ink rules, not cards. Sizes in rem × --scale. */
.hidden { display: none !important; } /* join.js / operator.js / audience.js noticePainter toggle .hidden */
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ================= shared page frame ================= */
.page { --gut: var(--sp-4); inline-size: 100%; max-inline-size: 32rem; margin-inline: auto;
  padding: max(var(--sp-4), env(safe-area-inset-top)) max(var(--gut), env(safe-area-inset-right)) max(var(--sp-6), env(safe-area-inset-bottom)) max(var(--gut), env(safe-area-inset-left)); }
.feedback { font-weight: 700; line-height: 1.5; text-wrap: balance; }
.feedback:empty { display: none; }
.feedback.error { display: flex; align-items: flex-start; gap: .4em; color: var(--error); }
.feedback.error::before, .gate::before { content: ""; flex: none; inline-size: 1.15em; block-size: 1.15em; margin-block-start: .2em; background: currentColor; -webkit-mask: var(--g-error) center / contain no-repeat; mask: var(--g-error) center / contain no-repeat; }
.demo-mark { display: inline-block; padding: .2em .9em .3em; border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--paper); font-weight: 600; font-size: var(--t-sm); line-height: 1.5; text-wrap: balance; }
.foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); margin-block-start: var(--sp-8); }
.foot .prefs { inline-size: 100%; }
.foot-id { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--t-sm); font-weight: 600; }

/* ================= entry ================= */
.entry { display: flex; flex-direction: column; gap: var(--sp-6); }

/* hero: wordmark + seal, the promise, the cast standing on the ochre floor */
.hero { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--sp-3); }
.wordmark, .promise { grid-column: 1; }
.hero .seal, .wordmark { --seal-size: min(5.25rem, 30cqi); }
.wordmark { font: 700 clamp(3.5rem, 17vw, 4.75rem)/1.2 var(--font-display); /* already display size: not × --scale, so it never clips at 320 with larger text */
  font-size: min(clamp(3.5rem, 17vw, 4.75rem), (100cqi - var(--seal-size) - var(--sp-3)) / 3.5); } /* «سوشل» is 3.47 em wide: with 200 % browser text the rem floor (112 px) painted it from x −85 at 320 */
.hero .seal { grid-column: 2; grid-row: 1 / span 2; rotate: 8deg; }
.hero .seal-num { font-size: calc(var(--seal-size) * .42); }
.promise { font-weight: 700; font-size: var(--t-lg); line-height: 1.45; text-wrap: balance; }
.cast { position: relative; isolation: isolate; grid-column: 1 / -1; min-inline-size: 0; display: flex; justify-content: space-around; align-items: flex-end; min-block-size: 8.5rem; margin-block-start: var(--sp-3); padding-inline: var(--sp-1); }
.cast::before { content: ""; position: absolute; inset: auto -.4rem .1rem; block-size: 2.4rem; z-index: -1; background: var(--sheet); border: var(--edge) solid var(--ink); border-radius: 4px;
  box-shadow: var(--lift); transform: skewY(-2.4deg); } /* the slanted floor strip */
.cast > span { display: block; inline-size: min(25%, 7.5rem); margin-block-end: -.2rem; }
.cast > span:nth-child(2) { margin-block-end: .3rem; } /* the row is not a grid: figures stand at slightly different depths */
.cast svg { display: block; inline-size: 100%; block-size: auto; }

/* resume a saved seat */
#resume { flex-wrap: wrap; align-items: center; }
#resume .btn { margin-inline-start: auto; }

/* the join sheet (the question sheet primitive, the form inside it) */
.join { font-size: var(--t-md); padding: var(--sp-6) var(--sp-5) var(--sp-6); }
@media (max-width: 15em) { .join { --sheet-tilt: -.6deg; } } /* text large for the screen (200 % text: em = 32 px, so every phone; plain: none): the tall sheet's tilted backing no longer pokes past the viewport */
.join h2 { font-size: var(--t-xl); font-weight: 800; margin-block-end: var(--sp-4); }
.join form { display: flex; flex-direction: column; gap: var(--sp-5); }
.fld { display: flex; flex-direction: column; gap: var(--sp-1); }
.fld > label, .legend { font-weight: 700; line-height: 1.4; padding: 0; }
.join #code { direction: ltr; text-align: center; font-weight: 800; font-size: min(calc(1.75rem * var(--scale)), 10vw); letter-spacing: var(--tracking-code); text-transform: uppercase; min-block-size: calc(3.5rem * var(--scale)); padding-inline: .3em; }
.join #name::placeholder { font-size: min(1em, 9vw); } /* 250 % text at 320: «اكتب اسمك» is not cut at the field edge */
.join #code::placeholder { letter-spacing: 0; font-size: min(var(--t-md), 9vw); font-weight: 600; text-transform: none; }

/* role: two native radios drawn as one segmented control */
.seg { display: flex; flex-wrap: wrap; gap: var(--edge); border: var(--edge) solid var(--ink); border-radius: var(--r-card); overflow: hidden; background: var(--ink); } /* the ink gap is the divider, across or down: 250 % text at 320 stacks the two labels instead of clipping «جمهور» */
.seg label { flex: 1 1 0; background: var(--paper); display: flex; align-items: center; justify-content: center; min-block-size: var(--target-min); padding: .3em .6em; font-weight: 700; line-height: 1.3; text-align: center; }
.seg label:has(:checked) { background: var(--action); color: var(--on-action); }
.seg label:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: -6px; }
.seg label:has(:checked):has(:focus-visible) { outline-color: var(--sheet); }
.role-hint { font-size: var(--t-sm); font-weight: 600; line-height: 1.5; margin-block-start: var(--sp-2); }

/* avatar picker: four native radios, the real portrait + the prop name */
.avatar-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); min-block-size: calc(6.5rem * var(--scale)); } /* held before join.js fills it */
.av { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--sp-1); min-block-size: var(--target-min); padding: var(--sp-2) 2px var(--sp-2);
  border: 2px solid var(--ink); border-radius: var(--r-card); font-size: var(--t-sm); font-weight: 600; line-height: 1.3; text-align: center; text-wrap: balance;
  transition: translate var(--dur-feedback) var(--ease-standard); }
.av svg { inline-size: calc(3.25rem * var(--scale)); block-size: auto; }
.av:has(:checked) { border-width: var(--edge); background: var(--paper); box-shadow: var(--lift-sm); font-weight: 800; }
.av:has(:checked)::after { content: ""; position: absolute; inset-block-start: -.5rem; inset-inline-end: -.4rem; inline-size: 1.5rem; aspect-ratio: 1; background: var(--action);
  -webkit-mask: var(--g-saved) center / contain no-repeat; mask: var(--g-saved) center / contain no-repeat; }
.av:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.av:active { translate: 0 1px; }
@media (max-width: 22.4375em) { .avatar-row { grid-template-columns: repeat(2, 1fr); } } /* 359 px at 16 px text */
html[data-text="large"] .avatar-row { grid-template-columns: repeat(2, 1fr); }

/* "or" between join and create */
.or { display: flex; align-items: center; gap: var(--sp-3); font-weight: 700; }
.or::before, .or::after { content: ""; flex: 1; block-size: var(--edge); border-radius: 2px; background: var(--ink); }

/* create → the ticket: code (masked first), Show/Hide + Copy, join link, QR */
#createSec { display: flex; flex-direction: column; gap: var(--sp-4); }
#createSec > .btn { align-self: stretch; }
.ticket { --qr-size: min(calc(7.5rem * var(--scale)), 60vw); grid-template-columns: 1fr auto; font-size: var(--t-md); padding: var(--sp-4); }
.ticket .qr-code { font-size: min(calc(1.75rem * var(--scale)), 13vw); } /* nowrap code: large text must not widen the page */
.ticket .qr-code ::selection { background: var(--sheet); color: var(--ink); } /* copy fallback: the selected code must show as selected on the ink ticket */
.ticket .qr-code .dots { letter-spacing: .12em; }
.ticket .acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ticket .acts .btn { font-size: var(--t-md); padding-inline: .6em; }
.ticket .link { grid-column: 1 / -1; font-size: var(--t-sm); line-height: 1.5; }
.ticket .link a { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--paper); text-decoration-thickness: 2px; text-underline-offset: .25em; direction: ltr; word-break: break-all; }
@media (max-width: 22.4375em) { .ticket { grid-template-columns: 1fr; } .ticket .qr-frame { justify-self: center; } .ticket .acts { grid-template-columns: 1fr; } }
html[data-text="large"] .ticket .acts { grid-template-columns: 1fr; }
#copyMsg { align-self: flex-start; max-inline-size: 100%; }
#created > .demo-mark { align-self: flex-start; }

/* v2 doors: a demo round beside «create» (full door), the JAM3H note (demo-only door), the player-pack page */
.demo-door { display: grid; justify-items: start; gap: 0; margin-block-start: calc(-1 * var(--sp-2)); }
.demo-door .btn.quiet { padding-inline: .2em; }
.demo-door .hint { font-weight: 600; }
.jam3h-door { flex-wrap: wrap; }
.jam3h-door > .stack { flex: 1 1 12em; min-inline-size: 0; }
.jam3h-door p { font-weight: 600; line-height: 1.55; text-wrap: pretty; }
.jam3h-door .btn { align-self: flex-start; }
.feedback .door-link { display: block; inline-size: fit-content; max-inline-size: 100%; min-block-size: var(--target-min); padding-block: .5em; color: var(--ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: .25em; word-break: break-all; }
.packs-door { display: grid; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); border: var(--edge) dashed var(--ink); border-radius: var(--r-card); color: var(--ink); text-decoration: none; }
.packs-door-t { display: flex; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: var(--t-lg); line-height: 1.35; }
.packs-door-t::after { content: ""; flex: none; inline-size: .55em; block-size: .55em; border: solid currentColor; border-width: 0 3px 3px 0; rotate: -45deg; } /* points to the reading end (left) */
.packs-door-h { font-weight: 600; font-size: var(--t-sm); line-height: 1.5; text-wrap: pretty; }
.packs-door:hover { border-style: solid; background: color-mix(in srgb, var(--paper) 35%, transparent); }
.packs-door:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ================= JAM3H entry exchange (web/enter.html) ================= */
.enter-page { display: flex; flex-direction: column; min-block-size: 100svh; }
.enter-card { flex: 1; display: grid; align-content: center; gap: var(--sp-5); }
.enter-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.enter-mark { font: 700 min(3.5rem, 16vw)/1.2 var(--font-display); }
.enter-top .seal { --seal-size: min(5rem, 24vw); rotate: 8deg; }
.enter-top .seal-num { font-size: calc(var(--seal-size) * .42); }
.enter-sheet { display: grid; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5); font-size: var(--t-md); }
.enter-sheet h1 { font-size: var(--t-xl); font-weight: 800; line-height: 1.4; text-wrap: balance; }
.enter-sheet .status { justify-self: start; max-inline-size: 100%; }
.enter-err { font-weight: 800; }
.enter-acts { display: grid; gap: var(--sp-2); justify-items: start; }
.enter-acts .btn.block { justify-self: stretch; }
.next { font-weight: 600; line-height: 1.5; text-wrap: balance; }
.op-link { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.op-link .hint { font-weight: 600; }

/* wide screens (the organiser's laptop, 1280×720): the hero is one band, join and create sit side by side, so «أنشئ غرفة جديدة» is in the
   first viewport. em query: with 200 % browser text the page stays one column. */
@media (min-width: 60em) {
  .page.entry { max-inline-size: 68rem; }
  .hero { grid-template-columns: auto auto minmax(0, 1fr); column-gap: var(--sp-6); }
  .hero .cast { grid-column: 3; grid-row: 1 / span 2; margin-block-start: 0; }
  main.entry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; gap: 0 var(--sp-8); align-items: start; }
  main.entry > #resume { grid-column: 1 / -1; grid-row: 1; margin-block-end: var(--sp-6); } /* hidden: row 1 is empty and adds no gap (row gap 0) */
  main.entry > .join { grid-column: 1; grid-row: 2 / span 3; }
  main.entry > .or { grid-column: 2; grid-row: 2; margin-block-end: var(--sp-4); }
  main.entry > #createSec { grid-column: 2; grid-row: 3; }
  main.entry > .packs-door { grid-column: 2; grid-row: 4; margin-block-start: var(--sp-6); }
}

/* ================= operator desk ================= */
:root:has(> body.op-page) { --ground: var(--sheet); } /* the desk is ochre paper, like a controller */
.op { max-inline-size: 46rem; padding-block-start: 0; }
.op, .op main { display: flex; flex-direction: column; }
.op > .op-strip { order: -3; } .op > .op-alert, .op > #notice, .op > .optional, .op > .mode-note { order: -2; }
.op:not([data-stage]) > :not(.op-strip, #fatal) { display: none; } /* operator.js sets data-stage on the first render */
.op[data-stage="match"] section[aria-labelledby="h-o2"], .op[data-stage="match"] section[aria-labelledby="h-o1"] { display: none; } /* start checks + settings: lobby only */
.op-strip { position: sticky; inset-block-start: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-1) var(--sp-4);
  margin-inline: calc(-1 * var(--gut)); padding: var(--sp-3) var(--gut); background: var(--ink); border-block-end: var(--edge) solid var(--ink); box-shadow: 0 calc(.3rem * var(--fx)) 0 color-mix(in srgb, var(--ink) 35%, transparent); }
.op-strip .brand { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--sp-3); font: 700 var(--t-xl)/1.3 var(--font-display); color: var(--sheet); }
.op-strip .who { font: 600 var(--t-sm)/1.4 var(--font-ui); color: var(--paper); }
.op-state { grid-column: 1; display: flex; align-items: baseline; min-block-size: calc(var(--t-xl) * 1.35); }
.op-state #phase { font-weight: 800; font-size: min(var(--t-xl), 17vw); line-height: 1.35; color: var(--paper); }
.op-strip .timer { --timer-size: min(calc(3.75rem * var(--scale)), 18vw); grid-column: 2; grid-row: 1 / span 3; box-shadow: none; border-color: var(--sheet); }
.op-pills { grid-column: 1; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.op-pills:not(:has(> :not(.hidden))) { display: none; }
.op-pills .status { background: var(--paper); font-size: var(--t-sm); } /* on the ink strip every status sits on a paper plate */
.op-pills .status[data-state="confirmed"] { background: var(--action); border-color: var(--paper); }
.op .optional, .op .op-alert, .op > #notice, .op > .mode-note { margin-block-start: var(--sp-4); }
.op-alert { flex-wrap: wrap; } .op-alert > .stack { flex: 1 1 10em; min-inline-size: 0; } .op-alert .btn { padding-inline: .6em; } /* large text on a narrow phone: the text goes under the glyph instead of widening the page */
.op main { margin-block-start: var(--sp-3); }
.op section { display: flex; flex-direction: column; gap: var(--sp-3); padding-block: var(--sp-5); border-block-start: var(--edge) solid var(--ink); }
.op main > section:first-of-type, .op main > .op-alert:not(.hidden) + section { border-block-start: 0; }
.op h2 { font-size: var(--t-lg); font-weight: 800; }
.op h2 .n { font-weight: 600; margin-inline-start: var(--sp-2); }
.op .btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--sp-2); }
.op .btn { font-size: var(--t-md); }
.op .btn.danger { color: var(--error); border-color: var(--error); }
.op .btn.danger-fill { background: var(--error-deep); color: var(--paper); border-color: var(--ink); } /* paper on error-deep 11.11 */
.op .btn.danger-fill:not(:disabled, [aria-disabled="true"]):hover { background-color: color-mix(in srgb, var(--error-deep) 85%, var(--paper)); }
.op .btn:is(:disabled, [aria-disabled="true"]) { color: var(--ink); border-color: var(--ink); background: transparent; }
.op .btn.small { min-block-size: var(--target-min); padding: .3em .8em; font-size: var(--t-sm); }
.gate { display: flex; align-items: flex-start; gap: .5em; font-weight: 600; font-size: var(--t-sm); line-height: 1.55; text-wrap: pretty; }
.gate::before { -webkit-mask-image: var(--g-info); mask-image: var(--g-info); }
.pill { display: inline-flex; align-self: flex-start; align-items: center; gap: .45em; min-block-size: 2.4em; padding: .25em 1em; border: max(2px, .14em) solid var(--ink); border-radius: var(--r-pill);
  background: var(--paper); font-weight: 700; line-height: 1.35; }
.pill.idle { border-style: dashed; background: transparent; } /* nothing is counting yet */
.endbox { display: grid; gap: var(--sp-3); }

/* start checks: drawn glyphs; met = saved disc, unmet = dashed ring */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; align-items: center; gap: var(--sp-3); min-block-size: 2.75rem; border-block-end: 2px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.checks li:last-child { border-block-end: 0; }
.checks .mk { flex: none; inline-size: 1.5rem; aspect-ratio: 1; background: var(--ink); -webkit-mask: var(--g-idle) center / contain no-repeat; mask: var(--g-idle) center / contain no-repeat; }
.checks .mk.ok { background: var(--action); -webkit-mask-image: var(--g-saved); mask-image: var(--g-saved); }
.checks .lbl { flex: 1; font-weight: 600; }
.checks .val { font-weight: 800; }

/* people: one row per participant; name + state tags, then actions */
.people { list-style: none; margin: 0; padding: 0; display: grid; }
.people > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-3); border-block-end: 2px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.people > li:last-child { border-block-end: 0; }
.people .nm { display: flex; align-items: center; gap: var(--sp-2); font-weight: 800; flex: 1 1 10rem; min-inline-size: 0; overflow-wrap: anywhere; }
.people .sub { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); flex-basis: 100%; font-size: var(--t-sm); }
.people .acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.people .tag { font-size: 1em; }
.people .tag[data-tone="gone"] { color: var(--error); border-color: var(--error); }
.avatar-mark { display: inline-block; flex: none; inline-size: 2.25rem; block-size: 2.25rem; }
.avatar-mark > svg { display: block; inline-size: 100%; block-size: 100%; }
.empty { font-weight: 600; }
.aud-box summary { display: flex; align-items: center; gap: var(--sp-2); min-block-size: var(--target-min); font-weight: 800; list-style: none; }
.aud-box summary::-webkit-details-marker { display: none; }
.aud-box summary::after { content: ""; inline-size: .55em; block-size: .55em; margin-inline-start: auto; border: solid currentColor; border-width: 0 3px 3px 0; rotate: 45deg; translate: 0 -.15em; }
.aud-box[open] summary::after { rotate: -135deg; translate: 0 .15em; }

/* v2 pack control: the pack in use (solid paper card) or none yet (dashed); search results as rows */
.pack-card { display: grid; gap: .15em; padding: .8em 1em .9em; border: var(--edge) solid var(--ink); border-radius: var(--r-card); background: var(--paper); box-shadow: var(--lift-sm); font-weight: 600; overflow-wrap: anywhere; }
.pack-t { font-weight: 800; font-size: var(--t-lg); line-height: 1.4; }
.pack-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-block-start: var(--sp-2); }
.pack-acts .chip, .pack-results .chip { min-block-size: var(--target-min); }
.pack-none { padding: .7em 1em; border: var(--edge) dashed var(--ink); border-radius: var(--r-card); font-weight: 600; line-height: 1.5; }
.pack-find { display: grid; gap: var(--sp-1); }
.pack-find > label { font-weight: 700; line-height: 1.4; }
.pack-find .field { flex: 1 1 12em; min-inline-size: 0; }
.pack-results { list-style: none; margin: 0; padding: 0; display: grid; }
.pack-results:empty { display: none; }
.pack-results li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-3); border-block-end: 2px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.pack-results li:last-child { border-block-end: 0; }
.pr-t { display: grid; flex: 1 1 12rem; min-inline-size: 0; overflow-wrap: anywhere; }
.pr-t small { font-size: var(--t-sm); font-weight: 600; }
.pack-browse { align-self: flex-start; }

/* settings */
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.op label.fld { flex: 1 1 12rem; }
.op select.field { appearance: auto; }

/* share */
.share { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: center; }
.share .qr-frame { --qr-size: min(calc(8.5rem * var(--scale)), 60vw); border: var(--edge) solid var(--ink); }
.share .code { display: flex; flex-direction: column; font-weight: 600; }
.share .code bdi { align-self: flex-start; font-weight: 800; font-size: min(var(--t-2xl), 14vw); letter-spacing: var(--tracking-code); line-height: 1.25; }
.share .joinurl { direction: ltr; text-align: start; word-break: break-all; font-size: var(--t-sm); }
.share .joinurl a { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: .25em; }
@media (max-width: 26.25em) { .share { grid-template-columns: 1fr; } } /* 420 px at 16 px text */

/* support */
.support { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; font-size: var(--t-sm); font-weight: 600; }
.support bdi { font-weight: 800; user-select: all; overflow-wrap: anywhere; } /* an ID, not a word: it may break anywhere instead of widening the page */
.log { list-style: none; margin: 0; padding: 0; max-block-size: 12rem; overflow: auto; font-size: var(--t-sm); border-radius: var(--r-control); }
.log:empty { display: none; }
.log li { display: flex; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-1) 0; border-block-end: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.log li.bad { color: var(--error); font-weight: 700; }

/* ================= modes ================= */
html[data-contrast="high"] .cast::before { background: var(--paper); }
html[data-contrast="high"] .seg label:has(:checked) { background: var(--ink); color: var(--paper); }
html[data-contrast="high"] .op-pills .status[data-state="confirmed"] { background: var(--ink); color: var(--paper); }
@media (forced-colors: active) {
  .seg { forced-color-adjust: none; background: CanvasText; border-color: CanvasText; } /* keep the ink-gap divider */
  .seg label { forced-color-adjust: none; background: Canvas; color: CanvasText; }
  .seg label:has(:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .seg label:has(:focus-visible) { outline-color: CanvasText; }
  .seg label:has(:checked):has(:focus-visible) { outline-color: HighlightText; }
  .av:has(:checked) { border-color: Highlight; }
  .av:has(:focus-visible) { outline-color: Highlight; }
  .av:has(:checked)::after, .checks .mk, .feedback.error::before, .gate::before { forced-color-adjust: none; background: CanvasText; }
  .cast::before, .or::before, .or::after { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
  .or::before, .or::after { background: CanvasText; }
  .op-strip { border-block-end-color: CanvasText; }
  .op-strip .brand { line-height: 1.6; } /* at 1.3 the text backplate cut the tops of «سوشل» */
  .share .code bdi { forced-color-adjust: none; color: CanvasText; } /* its text backplate (tall Arabic font metrics) painted over the top of «رمز الغرفة» */
  .packs-door { border-color: CanvasText; }
  .packs-door-t::after { border-color: CanvasText; }
}