/* =============================================================================
   ui.css -- "DAYLIGHT KUFI", THE CONTRIBUTOR AND SIGN-IN LOOK (polish round, 2026-10-19)
   Design spec: D:/tmp/polish-2026-10-19/frontend-onboarding.md §2 (tokens, type,
   spacing, elevation, motion) and §3 (the onboarding).

   LOADED ONLY BY THE CONTRIBUTOR AND AUTH VIEWS, after style.css / auth.css, so
   it wins on equal specificity. No admin, manager or console page links it.

   THE ONE PLACE A HEX VALUE MAY APPEAR is the first :root block below. Every
   other rule reads a token. The :root block only ADDS --ui-* names; it never
   changes a value style.css's :root defines, because admin.css reads those.
   The older names (--paper, --card, --brand, ...) are re-pointed at the new
   palette only INSIDE the contributor and auth bodies (the scoped remap).

   COLOURS AND FONTS ARE THE BRAND BOOK's (owner, 2026-10-20): the warm paper,
   Aqlama blue #1F4EA0, gold; Geist / IBM Plex Sans Arabic for text, Fraunces
   and Noto Kufi Arabic for headings, JetBrains Mono for figures.
   ============================================================================= */
:root {
  /* surfaces */
  --ui-bg: #F5EFE4;
  --ui-surface: #FDFAF2;
  --ui-sunken: #F0E8D8;
  --ui-sunken-2: #EAE3D3;
  --ui-tint: #E3E7F0;
  --ui-line: #E2D9C7;
  --ui-field-line: #CDC3AF;
  /* ink */
  --ui-ink: #1A1A1A;
  --ui-ink-2: #2D2A23;
  --ui-ink-3: #5C5749;
  /* brand (sampled from the logo) */
  --ui-brand: #1F4EA0;
  --ui-brand-press: #163D80;
  --ui-brand-soft: rgba(31, 78, 160, 0.10);
  --ui-brand-glow: rgba(31, 78, 160, 0.25);
  --ui-brand-line: rgba(31, 78, 160, 0.35);
  --ui-gold: #C89414;            /* decoration only: never text on white */
  --ui-gold-soft: rgba(200, 148, 20, 0.16);
  --ui-gold-tint: #F1E3C3;
  --ui-gold-ink: #7A570C;
  /* status: always with an icon or a word */
  --ui-ok: #2F5D3A;
  --ui-ok-soft: rgba(74, 107, 58, 0.10);
  --ui-ok-tint: #E3E8D8;
  --ui-bad: #A93226;
  --ui-bad-deep: #6E1D16;
  --ui-bad-soft: rgba(169, 50, 38, 0.10);
  --ui-bad-tint: #F3DED6;
  --ui-on-brand: #FFFFFF;
  --ui-on-brand-2: rgba(255, 255, 255, 0.84);   /* secondary text on the brand fill */
  --ui-on-brand-3: rgba(255, 255, 255, 0.92);   /* the waveform's diamonds on the brand fill */
  --ui-focus: 0 0 0 3px rgba(31, 78, 160, 0.35);
  /* radius: four values and the pill */
  --ui-r-s: 8px;
  --ui-r-m: 12px;
  --ui-r-l: 20px;
  --ui-r-xl: 28px;
  --ui-r-pill: 999px;
  /* elevation replaces hairlines */
  --ui-e1: 0 1px 2px rgba(45, 42, 35, 0.06), 0 1px 1px rgba(45, 42, 35, 0.04);
  --ui-e2: 0 6px 16px -4px rgba(45, 42, 35, 0.10), 0 2px 4px rgba(45, 42, 35, 0.04);
  --ui-e3: 0 24px 48px -16px rgba(45, 42, 35, 0.22);
  --ui-e-brand: 0 10px 24px -10px rgba(31, 78, 160, 0.60);
  --ui-e-dock: 0 -12px 24px -12px rgba(45, 42, 35, 0.12);
  /* motion */
  --ui-t-press: 120ms;
  --ui-t-state: 200ms;
  --ui-t-screen: 320ms;
  --ui-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ui-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  /* type */
  /* THE BRAND BOOK's FACES (Aqlama brand book v1.0, the same as style.css):
     Geist for Latin text, IBM Plex Sans Arabic for Arabic text, Fraunces for
     Latin display lines, Noto Kufi Arabic for Arabic headings, JetBrains Mono
     for figures. */
  --ui-font: "Geist", "Geist Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-font-ar: "IBM Plex Sans Arabic", "Geist", sans-serif;
  --ui-font-display: "Fraunces", "Source Serif Pro", "Noto Kufi Arabic", Georgia, serif;
  --ui-font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;
  --ui-font-ar-head: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
}

/* -----------------------------------------------------------------------------
   THE SCOPED REMAP. The older rules in style.css and auth.css keep their
   selectors and adopt the new palette and faces through their own variables.
   Scope: the auth board (body.board), every contributor body
   (body[data-user-page], the room included) and the collection-closed page.
   ----------------------------------------------------------------------------- */
body:is(.board, [data-user-page], .contrib-closed) {
  --paper: var(--ui-bg);
  --paper-elev: var(--ui-sunken);
  --card: var(--ui-surface);
  --card-hover: var(--ui-tint);
  --ink: var(--ui-ink);
  --ink-soft: var(--ui-ink);
  --warm-1: var(--ui-ink-2);
  --warm-2: var(--ui-ink-3);
  /* Hairlines go; depth is drawn with --ui-e* below. The room keeps a soft line
     (see the room override), because its controls are not re-skinned yet. */
  --hair: transparent;
  --hair-soft: transparent;
  --hair-strong: var(--ui-line);
  --brand: var(--ui-brand);
  --brand-deep: var(--ui-brand-press);
  --brand-soft: var(--ui-brand-soft);
  --brand-glow: var(--ui-brand-glow);
  --brand-tint: var(--ui-tint);
  --brand-line: var(--ui-brand-line);
  --brand-wash: var(--ui-tint);
  --gold: var(--ui-gold);
  --gold-deep: var(--ui-gold-ink);
  --gold-soft: var(--ui-gold-soft);
  --gold-glow: var(--ui-gold-soft);
  --gold-tint: var(--ui-gold-tint);
  --gold-ink: var(--ui-gold-ink);
  --moss: var(--ui-ok);
  --moss-soft: var(--ui-ok-soft);
  --moss-tint: var(--ui-ok-tint);
  --moss-ink: var(--ui-ok);
  --danger: var(--ui-bad);
  --danger-soft: var(--ui-bad-soft);
  --danger-tint: var(--ui-bad-tint);
  --danger-ink: var(--ui-bad);
  --danger-deep: var(--ui-bad-deep);
  --stage: var(--ui-sunken);
  --fill: var(--ui-sunken);
  --fill-strong: var(--ui-sunken-2);
  --head-fill: var(--ui-bg);
  --row-line: var(--ui-line);
  --row-line-soft: var(--ui-line);
  --input-line: var(--ui-field-line);
  --track: var(--ui-sunken-2);
  --off-fill: var(--ui-sunken-2);
  --off-ink: var(--ui-ink-3);
  --invite-fill: var(--ui-tint);
  --on-fill: var(--ui-on-brand);
  /* The faces: the brand book's (see the header). */
  --font-body: var(--ui-font);
  --font-display: var(--ui-font-display);
  --font-mono: var(--ui-font-mono);
  --font-ar-body: var(--ui-font-ar);
  --font-ar-head: var(--ui-font-ar-head);
  font-family: var(--ui-font);
  /* Digits line up in every timer, count and duration. */
  font-feature-settings: normal;
  font-variant-numeric: tabular-nums;
}
body:is(.board, [data-user-page], .contrib-closed):lang(ar) { font-family: var(--ui-font-ar); }
/* THE GROUND FILLS THE SCREEN on every page in scope, however short. The body's
   background is drawn on the canvas and positioned against the ROOT box, so a
   root shorter than the viewport ended its gradient in a visible seam under a
   short page (the desktop onboarding card). The root takes the viewport's height
   and the body takes it too (border-box, so its bar paddings never add a scroll). */
html:has(> body:is(.board, [data-user-page], .contrib-closed)) { min-height: 100%; }
body:is(.board, [data-user-page], .contrib-closed) { box-sizing: border-box; min-height: 100vh; min-height: 100dvh; }
/* Noto Kufi is for Arabic h1/h2 and display lines only; smaller headings read in IBM Plex Sans Arabic. */
body:is(.board, [data-user-page], .contrib-closed) :is(h3, h4, h5, h6):lang(ar) { font-family: var(--ui-font-ar); }

/* The room (data-user-page="/", not the closing page) is re-skinned through
   tokens only: it keeps a soft line where its controls had one. */
body[data-user-page="/"]:not(.contrib-closed) {
  --hair: var(--ui-line);
  --hair-soft: var(--ui-line);
}

/* THE ROOM'S HINT STACK (polish 3b-ii item 3, spec phase 6): spacing only. The
   room is re-skinned through the tokens above and nothing else; its p.hint lines
   had no rule at all and took the browser's 1em margins, so two hidden-or-shown
   lines opened 32px gaps above the controls. One 8px rhythm instead. */
body[data-user-page="/"]:not(.contrib-closed) p.hint { margin: 8px 0; line-height: 1.55; }
body[data-user-page="/"]:not(.contrib-closed) :is(#speakerCountPicker, #landingPickers) > p.hint:last-child { margin-bottom: 0; }
body[data-user-page="/"]:not(.contrib-closed) .hint-row { margin-bottom: 16px; }

/* THE LOGO. The PNG has an opaque white ground (a transparent, trimmed asset
   waits on the owner or a PNG tool); multiply drops the white into whatever
   light surface it sits on, so it no longer reads as an off-white box. */
body:is(.board, [data-user-page], .contrib-closed) :is(.brand-mark, .board-mark) img { mix-blend-mode: multiply; }

/* -----------------------------------------------------------------------------
   ELEVATION INSTEAD OF HAIRLINES: the surfaces that lost their border.
   ----------------------------------------------------------------------------- */
/* The bars: a shadow under the top bar, a dock shadow above the tab bar. */
body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed) .site-header { box-shadow: var(--ui-e1); }
body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed) #userNav { box-shadow: var(--ui-e-dock); }
@media (min-width: 900px) {
  body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed) #userNav { box-shadow: none; }
}
/* The account screens draw their own bars, docks and dividers (auth.css, the board block). */

/* Pills that sat on a white bar with a hairline: a brand wash instead. */
body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed) #userNav .nav-lang,
body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed) .user-chip a {
  background: var(--ui-tint); border-radius: var(--ui-r-s);
}

/* Cards: each page draws its own (the page sections below). */

/* -----------------------------------------------------------------------------
   THE TAB BAR IS SEEN BEFORE IT IS DRAWN (phase 2). #userNav ships `hidden`
   and /user-chrome.js paints it; until then the bar's surface is already in
   place (mobile) and its row is already reserved (desktop), so nothing pops
   in or pushes the page down. Pages that hold the nav (data-nav-held) skip it.
   ----------------------------------------------------------------------------- */
body:is([data-user-page="/projects"], [data-user-page="/my-recordings"], [data-user-page="/work"], [data-user-page="/settings"], .contrib-closed):not([data-nav-held])::after {
  content: ''; position: fixed; inset-inline: 0; bottom: 0; z-index: 29; pointer-events: none;
  height: calc(66px + env(safe-area-inset-bottom, 0px));
  background: var(--ui-surface); box-shadow: var(--ui-e-dock);
}
@media (min-width: 900px) {
  body:is([data-user-page="/projects"], [data-user-page="/my-recordings"], [data-user-page="/work"], [data-user-page="/settings"], .contrib-closed):not([data-nav-held])::after { content: none; }
  body:is([data-user-page="/projects"], [data-user-page="/my-recordings"], [data-user-page="/work"], [data-user-page="/settings"], .contrib-closed) #userNav { min-height: 44px; }
  body:is([data-user-page="/projects"], [data-user-page="/my-recordings"], [data-user-page="/work"], [data-user-page="/settings"], .contrib-closed):not([data-nav-held]) #userNav[hidden] + * { margin-block-start: 62px; }
}

/* Focus: one ring everywhere in scope. */
body:is(.board, [data-user-page]:not([data-user-page="/"]), .contrib-closed) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ui-brand); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body:is(.board, [data-user-page], .contrib-closed) *, body:is(.board, [data-user-page], .contrib-closed) *::before, body:is(.board, [data-user-page], .contrib-closed) *::after {
    transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important;
  }
}

/* =============================================================================
   THE ONBOARDING (/welcome)
   ============================================================================= */
/* THE BOOT SKELETON (phase 2, spec §3.4): sunken blocks in the first screen's
   shape, with a slow shimmer (none under reduced motion). */
body[data-user-page="/welcome"] .ob-boot { display: flex; flex-direction: column; gap: 12px; padding: 8px 0 24px; }
body[data-user-page="/welcome"] .ob-sk {
  display: block; border-radius: var(--ui-r-m);
  background: linear-gradient(90deg, var(--ui-sunken) 0%, var(--ui-sunken-2) 50%, var(--ui-sunken) 100%) 0 0 / 200% 100%;
  animation: ui-shimmer 1.2s linear infinite;
}
body[data-user-page="/welcome"] .ob-sk-title { width: 72%; height: 34px; border-radius: var(--ui-r-s); }
body[data-user-page="/welcome"] .ob-sk-line { width: 88%; height: 16px; margin-block-end: 12px; border-radius: var(--ui-r-s); }
body[data-user-page="/welcome"] .ob-sk-row { display: flex; gap: 12px; }
body[data-user-page="/welcome"] .ob-sk-tile { flex: 1 1 0; height: 64px; }
body[data-user-page="/welcome"] .ob-sk-field { height: 52px; margin-block-start: 12px; }
@keyframes ui-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { body[data-user-page="/welcome"] .ob-sk { animation: none; } }
body[data-user-page="/welcome"] .ob-retry {
  min-height: 48px; margin: 4px 0 0; padding: 0 20px; border: 0; border-radius: var(--ui-r-m);
  background: var(--ui-surface); box-shadow: var(--ui-e1); color: var(--ui-brand); font: inherit; font-weight: 600; cursor: pointer;
}

/* ---- the page ---------------------------------------------------------------
   Mobile: the conversation sits on a white surface, edge to edge, with the
   dock stuck to the bottom. >= 768: a 560px card (r-xl, e3) on the daylight
   ground, the dock inside it, the sign-out line under it. */
body[data-user-page="/welcome"] { --shell-main: 560px; background: var(--ui-surface); }
body[data-user-page="/welcome"] main { max-width: 560px; padding: 24px 16px 0; }
/* On a phone the dock sits at the bottom of the screen, in thumb reach, however short the screen is. */
@media (max-width: 767.98px) {
  body[data-user-page="/welcome"] main { display: flex; flex-direction: column; min-height: calc(100vh - 58px); min-height: calc(100dvh - 58px); }
  body[data-user-page="/welcome"] .ob-card { flex: 1 0 auto; display: flex; flex-direction: column; }
  body[data-user-page="/welcome"] .ob-form:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; }
  body[data-user-page="/welcome"] .ob-form > .ob-dock { margin-top: auto; }
}
body[data-user-page="/welcome"] .site-footer { display: none; }
body[data-user-page="/welcome"] :is(input, select, button, textarea, a, summary) { font-family: inherit; }
body[data-user-page="/welcome"] .ob-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The top bar: Back (an icon) at the start, the logo, the language at the end. */
body[data-user-page="/welcome"] .site-header { gap: 4px; justify-content: flex-start; }
/* One step above the shell rule that keeps 96px at the bar's end for a tab-bar toggle /welcome does not have. */
body[data-user-page="/welcome"][data-nav-held] .site-header .header-right { margin-inline-start: auto; margin-inline-end: 0; }
body[data-user-page="/welcome"] .ob-back {
  flex: none; width: 44px; height: 44px; margin: 0; margin-inline-start: -10px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--ui-r-m); background: transparent; color: var(--ui-ink); cursor: pointer;
  transition: background-color var(--ui-t-press) var(--ui-ease-out);
}
body[data-user-page="/welcome"] .ob-back:hover:not(:disabled) { background: var(--ui-sunken); }
body[data-user-page="/welcome"] .ob-back:active:not(:disabled) { background: var(--ui-sunken-2); }
body[data-user-page="/welcome"] .ob-back:disabled { color: var(--ui-ink-3); cursor: default; }
/* The one directional icon: it points back, so it flips with the page. */
html[dir="rtl"] body[data-user-page="/welcome"] .ob-back-ic { transform: scaleX(-1); }
body[data-user-page="/welcome"] .ob-lang {
  position: relative; margin: 0; min-height: 0; padding: 6px 12px; border: 0; border-radius: var(--ui-r-s);
  background: var(--ui-tint); color: var(--ui-brand); font-size: 14px; font-weight: 500; line-height: 1.5; cursor: pointer;
}
body[data-user-page="/welcome"] .ob-lang::after { content: ""; position: absolute; inset: -6px -4px; }

/* ---- type ------------------------------------------------------------------- */
body[data-user-page="/welcome"] .ob-step-title {
  margin: 0; font-family: var(--ui-font-display); font-size: 30px; font-weight: 700; line-height: 40px; letter-spacing: -0.01em; color: var(--ui-ink);
  overflow-wrap: anywhere;
}
body[data-user-page="/welcome"] .ob-step-title:lang(ar) { font-family: var(--ui-font-ar-head); line-height: 46px; letter-spacing: 0; }
/* A screen's headline takes the focus on every screen change so a screen reader reads it; it is not a
   control (tabindex=-1, never in the tab order), so it draws no ring. */
body[data-user-page="/welcome"] .ob-step-title:focus { outline: none; }
body[data-user-page="/welcome"] .ob-sub { margin: -8px 0 0; font-size: 16px; line-height: 26px; color: var(--ui-ink-2); }
body[data-user-page="/welcome"] .ob-sub:lang(ar) { line-height: 28px; }
body[data-user-page="/welcome"] .ob-kicker { margin: 0 0 -12px; font-size: 14px; font-weight: 600; line-height: 22px; color: var(--ui-brand); }
body[data-user-page="/welcome"] .ob-badge {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--ui-r-pill);
  background: var(--ui-gold-tint); color: var(--ui-gold-ink); font-size: 12px; font-weight: 600; line-height: 18px;
}
body[data-user-page="/welcome"] .ob-hint { margin: 0; font-size: 14px; line-height: 22px; color: var(--ui-ink-3); }

/* ---- messages ------------------------------------------------------------------ */
body[data-user-page="/welcome"] .ob-msg { margin: 0; font-size: 14px; line-height: 22px; color: var(--ui-ink-2); }
body[data-user-page="/welcome"] .ob-msg:empty { display: none; }
body[data-user-page="/welcome"] .ob-msg.is-error { color: var(--ui-bad); font-weight: 500; }
body[data-user-page="/welcome"] #obFormError:not(:empty) {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 12px 16px; border-radius: var(--ui-r-m);
  background: var(--ui-bad-tint); color: var(--ui-bad-deep);
}
/* An icon with the words, never colour alone. */
body[data-user-page="/welcome"] #obFormError:not(:empty)::before {
  content: "!"; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ui-bad); color: var(--ui-on-brand); font-size: 13px; font-weight: 700; line-height: 1;
}

/* ---- a screen -------------------------------------------------------------------- */
body[data-user-page="/welcome"] .ob-form { margin: 0; padding: 0; border: 0; background: transparent; }
body[data-user-page="/welcome"] .ob-step { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding-bottom: 32px; }
body[data-user-page="/welcome"] .ob-group { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* Screens move VERTICALLY (no RTL mirroring): the new one rises in. */
body[data-user-page="/welcome"] .ob-enter { animation: ob-in 280ms var(--ui-ease-out) both; }
body[data-user-page="/welcome"] .ob-rise { animation: ob-in 240ms var(--ui-ease-out) both; }
@keyframes ob-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ob-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body[data-user-page="/welcome"] :is(.ob-enter, .ob-rise) { animation-name: ob-fade !important; animation-duration: 160ms !important; }
}

/* ---- fields ------------------------------------------------------------------------ */
body[data-user-page="/welcome"] .ob-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body[data-user-page="/welcome"] .ob-field > label,
body[data-user-page="/welcome"] .ob-label-row > label,
body[data-user-page="/welcome"] :is(.ob-choices, .ob-checks) > legend {
  margin: 0; padding: 0; font-size: 14px; font-weight: 500; line-height: 22px; color: var(--ui-ink-2);
}
body[data-user-page="/welcome"] :is(.ob-field, .ob-lang-row) :is(input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), select, textarea) {
  width: 100%; min-height: 52px; padding: 0 16px; font-size: 16px; font-weight: 400; line-height: 24px;
  border: 0; border-radius: var(--ui-r-m); background: var(--ui-sunken); color: var(--ui-ink);
  box-shadow: none; transition: background-color var(--ui-t-state) var(--ui-ease-out), box-shadow var(--ui-t-state) var(--ui-ease-out);
}
body[data-user-page="/welcome"] .ob-field textarea { min-height: 104px; padding: 14px 16px; resize: vertical; }
body[data-user-page="/welcome"] :is(.ob-field, .ob-lang-row) :is(input, select, textarea)::placeholder { color: var(--ui-ink-3); opacity: 1; }
body[data-user-page="/welcome"] :is(.ob-field, .ob-lang-row) :is(input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), select, textarea):focus {
  outline: none; background: var(--ui-surface); box-shadow: inset 0 0 0 2px var(--ui-brand), var(--ui-focus);
}
body[data-user-page="/welcome"] :is(.ob-field, .ob-lang-row) :is(input, select, textarea)[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--ui-bad); }
body[data-user-page="/welcome"] .ob-err { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 14px; line-height: 22px; font-weight: 500; color: var(--ui-bad); }
body[data-user-page="/welcome"] .ob-err:not(:empty)::before {
  content: "!"; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ui-bad); color: var(--ui-on-brand); font-size: 11px; font-weight: 700; line-height: 1;
}
body[data-user-page="/welcome"] .ob-err:empty { display: none; }
/* A LATIN VALUE ON A RIGHT-TO-LEFT PAGE: the + of a phone number and an IBAN's order are not reordered. */
body[data-user-page="/welcome"] input.lat { direction: ltr; unicode-bidi: isolate; text-align: left; }

/* ---- choice tiles (gender, worked-with-us, payment) ---------------------------------- */
body[data-user-page="/welcome"] .ob-choices { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
body[data-user-page="/welcome"] .ob-choices-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-user-page="/welcome"] .ob-choices > legend { margin-bottom: 8px; }
body[data-user-page="/welcome"] .ob-choices .ob-err { grid-column: 1 / -1; }
body[data-user-page="/welcome"] .ob-choice {
  position: relative; min-height: 64px; padding: 0 16px; display: flex; align-items: center; gap: 12px; cursor: pointer;
  border-radius: var(--ui-r-m); background: var(--ui-sunken); color: var(--ui-ink);
  font-size: 16px; font-weight: 500; line-height: 24px;
  transition: background-color var(--ui-t-state) var(--ui-ease-out), box-shadow var(--ui-t-state) var(--ui-ease-out), transform var(--ui-t-press) var(--ui-ease-out);
  -webkit-tap-highlight-color: transparent;
}
body[data-user-page="/welcome"] .ob-choices-2 .ob-choice { justify-content: center; text-align: center; }
body[data-user-page="/welcome"] .ob-choice:hover { background: var(--ui-sunken-2); }
body[data-user-page="/welcome"] .ob-choice:active { transform: scale(0.98); }
/* The radio stays in the DOM and in the tab order, drawn by its tile. */
body[data-user-page="/welcome"] .ob-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
body[data-user-page="/welcome"] .ob-choice:has(input:focus-visible) { outline: 2px solid var(--ui-brand); outline-offset: 2px; }
body[data-user-page="/welcome"] .ob-choice-ic { flex: none; color: var(--ui-ink-2); }
body[data-user-page="/welcome"] .ob-choice:has(input:checked) { background: var(--ui-tint); box-shadow: inset 0 0 0 2px var(--ui-brand); color: var(--ui-ink); }
body[data-user-page="/welcome"] .ob-choice:has(input:checked) .ob-choice-ic { color: var(--ui-brand); }
/* The check badge at the inline end of the chosen tile. */
body[data-user-page="/welcome"] .ob-choice:has(input:checked)::after {
  content: ""; position: absolute; inset-inline-end: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--ui-brand);
}
body[data-user-page="/welcome"] .ob-choice:has(input:checked)::before {
  content: ""; position: absolute; inset-inline-end: 22px; top: 50%; width: 5px; height: 10px; margin-top: -7px; z-index: 1;
  border: solid var(--ui-on-brand); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
body[data-user-page="/welcome"] .ob-choices-stack .ob-choice { padding-inline-end: 48px; }
body[data-user-page="/welcome"] .ob-choices-2 .ob-choice { padding-inline: 40px; }
body[data-user-page="/welcome"] fieldset[aria-invalid="true"] .ob-choice { box-shadow: inset 0 0 0 2px var(--ui-bad); }

/* ---- "Same country" and the collapsed birth country ----------------------------------- */
body[data-user-page="/welcome"] .ob-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; }
body[data-user-page="/welcome"] .ob-chip {
  position: relative; min-height: 32px; margin: 0; padding: 0 14px; border: 0; border-radius: var(--ui-r-pill);
  background: var(--ui-tint); color: var(--ui-brand); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer;
}
body[data-user-page="/welcome"] .ob-chip::after { content: ""; position: absolute; inset: -6px -4px; }
body[data-user-page="/welcome"] .ob-chip:hover { background: var(--ui-brand-soft); }
body[data-user-page="/welcome"] .ob-summary {
  min-height: 52px; padding: 0 8px; padding-inline-start: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-radius: var(--ui-r-m); background: var(--ui-tint); color: var(--ui-ink); font-size: 16px; font-weight: 500;
}
body[data-user-page="/welcome"] .ob-text-btn {
  min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: var(--ui-r-s); background: transparent;
  color: var(--ui-brand); font-size: 15px; font-weight: 600; cursor: pointer;
}
body[data-user-page="/welcome"] .ob-text-btn:hover { background: var(--ui-brand-soft); }

/* ---- languages: one card per language ----------------------------------------------- */
body[data-user-page="/welcome"] .ob-lang-rows { display: flex; flex-direction: column; gap: 12px; }
body[data-user-page="/welcome"] .ob-lang-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: center;
  padding: 12px; border-radius: var(--ui-r-l); background: var(--ui-bg); box-shadow: var(--ui-e1);
}
body[data-user-page="/welcome"] .ob-lang-row select[data-lang="code"] { grid-column: 1 / -1; }
body[data-user-page="/welcome"] .ob-lang-x {
  width: 44px; height: 44px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--ui-r-m); background: transparent; color: var(--ui-ink-3); cursor: pointer;
}
body[data-user-page="/welcome"] .ob-lang-x:hover { background: var(--ui-bad-tint); color: var(--ui-bad); }
body[data-user-page="/welcome"] .ob-add {
  align-self: flex-start; min-height: 44px; margin: -8px 0 0; padding: 0 12px; margin-inline-start: -12px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: var(--ui-r-m); background: transparent; color: var(--ui-brand); font-size: 15px; font-weight: 600; cursor: pointer;
}
body[data-user-page="/welcome"] .ob-add:hover:not(:disabled) { background: var(--ui-brand-soft); }
body[data-user-page="/welcome"] .ob-add:disabled { color: var(--ui-ink-3); cursor: default; }

/* ---- disclosures (the levels, the OneForma id) ---------------------------------------- */
body[data-user-page="/welcome"] .ob-disclose > summary {
  min-height: 44px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  color: var(--ui-brand); font-size: 15px; font-weight: 600; border-radius: var(--ui-r-s);
}
body[data-user-page="/welcome"] .ob-disclose > summary::-webkit-details-marker { display: none; }
body[data-user-page="/welcome"] .ob-disclose > summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform var(--ui-t-state) var(--ui-ease-out);
}
body[data-user-page="/welcome"] .ob-disclose[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
body[data-user-page="/welcome"] .ob-disclose > .ob-field { margin-top: 8px; }
body[data-user-page="/welcome"] .ob-levels {
  margin: 8px 0 0; padding: 16px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px;
  border-radius: var(--ui-r-m); background: var(--ui-bg); font-size: 14px; line-height: 22px;
}
body[data-user-page="/welcome"] .ob-levels dt { font-weight: 600; color: var(--ui-ink); }
body[data-user-page="/welcome"] .ob-levels dd { margin: 0; color: var(--ui-ink-2); }

/* ---- experience: areas as chips, the CV as a card ------------------------------------- */
body[data-user-page="/welcome"] .ob-checks { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
body[data-user-page="/welcome"] .ob-check-list { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-user-page="/welcome"] .ob-check {
  position: relative; min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border-radius: var(--ui-r-pill); background: var(--ui-sunken); color: var(--ui-ink); font-size: 15px; font-weight: 500;
  transition: background-color var(--ui-t-state) var(--ui-ease-out), color var(--ui-t-state) var(--ui-ease-out);
}
body[data-user-page="/welcome"] .ob-check:hover { background: var(--ui-sunken-2); }
body[data-user-page="/welcome"] .ob-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
body[data-user-page="/welcome"] .ob-check:has(input:focus-visible) { outline: 2px solid var(--ui-brand); outline-offset: 2px; }
body[data-user-page="/welcome"] .ob-check:has(input:checked) { background: var(--ui-brand); color: var(--ui-on-brand); }
body[data-user-page="/welcome"] .ob-check:has(input:checked)::before {
  content: ""; width: 5px; height: 10px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
body[data-user-page="/welcome"] .ob-cv { padding: 16px; border-radius: var(--ui-r-l); background: var(--ui-bg); box-shadow: var(--ui-e1); }
body[data-user-page="/welcome"] .ob-cv .ob-cv-label { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: var(--ui-ink); }
body[data-user-page="/welcome"] .ob-cv .ob-cv-label svg { flex: none; color: var(--ui-brand); }
body[data-user-page="/welcome"] .ob-cv input[type="file"] { width: 100%; font-size: 14px; color: var(--ui-ink-2); }
body[data-user-page="/welcome"] .ob-cv input[type="file"]::file-selector-button {
  min-height: 44px; margin-inline-end: 12px; padding: 0 16px; border: 0; border-radius: var(--ui-r-m);
  background: var(--ui-surface); box-shadow: var(--ui-e1); color: var(--ui-ink); font: inherit; font-weight: 600; cursor: pointer;
}
body[data-user-page="/welcome"] .ob-cv .ob-add { margin: 0; margin-inline-start: -12px; }
body[data-user-page="/welcome"] #obCvMsg:not(:empty):not(.is-error) { padding: 10px 14px; border-radius: var(--ui-r-m); background: var(--ui-ok-tint); color: var(--ui-ok); }

/* ---- payment ------------------------------------------------------------------------- */
body[data-user-page="/welcome"] .ob-lock { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 22px; color: var(--ui-ink-3); }
body[data-user-page="/welcome"] .ob-lock svg { flex: none; color: var(--ui-ok); }

/* ---- review: one card per screen; the whole card leads back ---------------------------- */
body[data-user-page="/welcome"] .ob-review { display: flex; flex-direction: column; gap: 12px; }
body[data-user-page="/welcome"] .ob-review-group {
  padding: 16px; border-radius: var(--ui-r-l); background: var(--ui-bg); box-shadow: var(--ui-e1);
  transition: box-shadow var(--ui-t-state) var(--ui-ease-out), background-color var(--ui-t-state) var(--ui-ease-out);
}
body[data-user-page="/welcome"] .ob-review-group.is-tappable { cursor: pointer; }
body[data-user-page="/welcome"] .ob-review-group.is-tappable:hover { background: var(--ui-tint); box-shadow: var(--ui-e2); }
body[data-user-page="/welcome"] .ob-review-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -8px 0 4px; }
body[data-user-page="/welcome"] .ob-review-head h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--ui-ink); }
body[data-user-page="/welcome"] .ob-edit {
  min-height: 44px; margin: 0; margin-inline-end: -8px; padding: 0 10px; border: 0; border-radius: var(--ui-r-s); background: transparent;
  color: var(--ui-brand); font-size: 14px; font-weight: 600; cursor: pointer;
}
body[data-user-page="/welcome"] .ob-edit:hover { background: var(--ui-brand-soft); }
body[data-user-page="/welcome"] .ob-review dl { margin: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 16px; font-size: 14px; line-height: 22px; }
body[data-user-page="/welcome"] .ob-review dt { color: var(--ui-ink-3); }
body[data-user-page="/welcome"] .ob-review dd { margin: 0; color: var(--ui-ink); font-weight: 500; overflow-wrap: anywhere; unicode-bidi: plaintext; }
body[data-user-page="/welcome"] .ob-review dd.is-empty { color: var(--ui-ink-3); font-weight: 400; }

/* ---- the dock: one primary button (Skip beside it on Experience) ----------------------- */
body[data-user-page="/welcome"] .ob-dock {
  position: sticky; bottom: 0; z-index: 20; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 6px; background: var(--ui-surface); box-shadow: var(--ui-e-dock); border: 0;
}
body[data-user-page="/welcome"] .ob-actions { display: flex; align-items: center; gap: 8px; }
body[data-user-page="/welcome"] .ob-next {
  position: relative; flex: 1 1 auto; min-height: 52px; margin: 0; padding: 0 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: var(--ui-r-m); background: var(--ui-brand); color: var(--ui-on-brand); box-shadow: var(--ui-e-brand);
  font-size: 16px; font-weight: 600; line-height: 24px; text-decoration: none; cursor: pointer;
  transition: background-color var(--ui-t-press) var(--ui-ease-out), transform var(--ui-t-press) var(--ui-ease-out);
  -webkit-tap-highlight-color: transparent;
}
body[data-user-page="/welcome"] .ob-next:hover:not(:disabled) { background: var(--ui-brand-press); color: var(--ui-on-brand); text-decoration: none; }
body[data-user-page="/welcome"] .ob-next:active:not(:disabled) { transform: scale(0.98); background: var(--ui-brand-press); }
body[data-user-page="/welcome"] .ob-next:disabled:not(.is-busy) { opacity: 0.5; box-shadow: none; cursor: not-allowed; }
/* IN FLIGHT: darker, a ring turning at the inline start; never faded to look switched off. */
body[data-user-page="/welcome"] .ob-next.is-busy { background: var(--ui-brand-press); cursor: progress; }
body[data-user-page="/welcome"] .ob-next.is-busy::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--ui-brand-line); border-top-color: var(--ui-on-brand); animation: ui-spin 0.8s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }
body[data-user-page="/welcome"] .ob-skip {
  flex: none; min-height: 52px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--ui-r-m); background: transparent;
  color: var(--ui-ink-2); font-size: 16px; font-weight: 500; cursor: pointer;
}
body[data-user-page="/welcome"] .ob-skip:hover:not(:disabled) { background: var(--ui-sunken); color: var(--ui-ink); }

/* ---- the sign-out line ---------------------------------------------------------------- */
body[data-user-page="/welcome"] .ob-account {
  margin: 0; padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px;
  font-size: 14px; line-height: 22px; color: var(--ui-ink-3); text-align: center;
}
body[data-user-page="/welcome"] .ob-account bdi { color: var(--ui-ink-2); overflow-wrap: anywhere; }
body[data-user-page="/welcome"] .ob-account bdi:empty { display: none; }
/* One specificity step above the shell rule that hides #logoutLink on contributor pages. */
body[data-user-page="/welcome"] .ob-account a#logoutLink {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ui-brand); text-decoration: none;
}
body[data-user-page="/welcome"] .ob-account a#logoutLink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- done: the diamond waveform, a greeting, the way to projects ------------------------ */
body[data-user-page="/welcome"] .ob-done {
  padding: 24px 0 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
}
body[data-user-page="/welcome"] .ob-done .ob-sub { margin: 0; }
@media (max-width: 767.98px) { body[data-user-page="/welcome"] .ob-done { margin-block: auto; } }
body[data-user-page="/welcome"] .ob-done .ob-next { align-self: stretch; margin-top: 8px; }
body[data-user-page="/welcome"] .ob-wave { width: 100%; max-width: 260px; height: auto; margin-bottom: 8px; overflow: visible; }
body[data-user-page="/welcome"] .ob-d { fill: var(--ui-brand); transform-box: fill-box; transform-origin: center; }
body[data-user-page="/welcome"] .ob-d.is-gold { fill: var(--ui-gold); }
/* The diamonds rise once, 30 ms apart; static under reduced motion. */
body[data-user-page="/welcome"] .ob-done:not([hidden]) .ob-d { animation: ob-diamond 420ms var(--ui-ease-out) both; }
body[data-user-page="/welcome"] .ob-done .ob-d:nth-child(2) { animation-delay: 30ms; }
body[data-user-page="/welcome"] .ob-done .ob-d:nth-child(3) { animation-delay: 60ms; }
body[data-user-page="/welcome"] .ob-done .ob-d:nth-child(4) { animation-delay: 90ms; }
body[data-user-page="/welcome"] .ob-done .ob-d:nth-child(5) { animation-delay: 120ms; }
body[data-user-page="/welcome"] .ob-done .ob-d:nth-child(6) { animation-delay: 150ms; }
body[data-user-page="/welcome"] .ob-done .ob-d:nth-child(7) { animation-delay: 180ms; }
body[data-user-page="/welcome"] .ob-done .ob-d:nth-child(8) { animation-delay: 210ms; }
body[data-user-page="/welcome"] .ob-done .ob-d:nth-child(9) { animation-delay: 240ms; }
body[data-user-page="/welcome"] .ob-done .ob-d:nth-child(10) { animation-delay: 270ms; }
body[data-user-page="/welcome"] .ob-done .ob-d:nth-child(11) { animation-delay: 300ms; }
body[data-user-page="/welcome"] .ob-done .ob-d:nth-child(12) { animation-delay: 330ms; }
body[data-user-page="/welcome"] .ob-done .ob-d:nth-child(13) { animation-delay: 360ms; }
@keyframes ob-diamond { from { opacity: 0; transform: translateY(10px) scale(0.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body[data-user-page="/welcome"] .ob-done:not([hidden]) .ob-d { animation: none !important; }
}

/* ---- tablet and desktop (>= 768): a designed card, not a stretched phone ------------------ */
@media (min-width: 768px) {
  body[data-user-page="/welcome"] {
    min-height: 100vh; min-height: 100dvh;
    background: radial-gradient(1200px 480px at 50% -120px, var(--ui-tint), transparent 70%) no-repeat, var(--ui-bg);
  }
  body[data-user-page="/welcome"] main { max-width: 608px; padding: 48px 24px 0; }
  /* The bar lines up with the card from tablet width up (the shell does it only from 900). */
  body[data-user-page="/welcome"][data-nav-held] { --shell-gutter: calc((100% - 560px) / 2 + 20px); }
  body[data-user-page="/welcome"] .ob-card {
    padding: 40px 40px 0; border-radius: var(--ui-r-xl); background: var(--ui-surface); box-shadow: var(--ui-e3);
  }
  body[data-user-page="/welcome"] .ob-card:has(> .ob-done:not([hidden])) { padding-bottom: 8px; }
  body[data-user-page="/welcome"] .ob-step-title { font-size: 34px; line-height: 44px; }
  body[data-user-page="/welcome"] .ob-step-title:lang(ar) { line-height: 52px; }
  /* Inside the card the dock is the card's own foot: no band, no shadow. */
  body[data-user-page="/welcome"] .ob-dock {
    margin: 0 -40px; padding: 8px 40px 32px; border-radius: 0 0 var(--ui-r-xl) var(--ui-r-xl); box-shadow: none;
  }
  body[data-user-page="/welcome"] .ob-actions { justify-content: flex-end; }
  body[data-user-page="/welcome"] .ob-next { flex: none; min-width: 200px; min-height: 48px; }
  body[data-user-page="/welcome"] .ob-skip { min-height: 48px; }
  body[data-user-page="/welcome"] .ob-done { padding: 16px 0 40px; }
  body[data-user-page="/welcome"] .ob-done .ob-next { align-self: center; min-width: 240px; }
  body[data-user-page="/welcome"] .ob-account { padding: 20px 0 40px; }
  body[data-user-page="/welcome"] .ob-boot { padding-bottom: 40px; }
}
body[data-user-page="/welcome"] .ob-account-q { display: inline-flex; align-items: center; gap: 6px; }
body[data-user-page="/welcome"] .ob-birth { position: relative; }
body[data-user-page="/welcome"] .ob-summary-val { min-width: 0; overflow-wrap: anywhere; }

/* =============================================================================
   THE CONTRIBUTOR SHELL (polish 3b-ii, spec phase 5): the bottom tab bar on a
   phone, a side rail from 1024px. Written over style.css's CONTRIBUTOR SHELL
   section (its 58px top bar and 66px tab bar stay the base); every rule here
   is one specificity step above it (:not([data-nav-held])), so /welcome,
   which holds its nav, never takes the rail.
   ============================================================================= */
/* THE TAB BAR: icon over label, the current tab in brand with a 32x4 pill above its icon. */
body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) #userNav a {
  position: relative; gap: 4px; font-size: 12px; font-weight: 500; line-height: 18px; color: var(--ui-ink-3);
  transition: color var(--ui-t-state) var(--ui-ease-out);
}
body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) #userNav a.is-current { color: var(--ui-brand); font-weight: 600; }
@media (max-width: 899.98px) {
  body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) #userNav a.is-current::before {
    content: ""; position: absolute; top: 6px; left: 50%; width: 32px; height: 4px; margin-left: -16px;
    border-radius: var(--ui-r-pill); background: var(--ui-brand);
  }
}

/* 900-1023px: the tabs are a row under the bar, as pills (no underline, no hairline). */
@media (min-width: 900px) {
  body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) #userNav { gap: 4px; border-bottom: 0; }
  body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) #userNav a {
    min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--ui-r-m); font-size: 15px;
  }
  body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) #userNav a:hover { background: var(--ui-sunken); color: var(--ui-ink); }
  body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) #userNav a.is-current { border: 0; background: var(--ui-tint); color: var(--ui-brand); }
}

/* >= 1024px: THE SIDE RAIL at the inline start, 248px: the logo at the top, the
   tabs down the rail, the language (and a staff member's console links) pinned
   at the bottom. The content takes the rest of the width. */
@media (min-width: 1024px) {
  body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) {
    --shell-gutter: 24px; padding-top: 0; padding-bottom: 0; padding-inline-start: 248px;
  }
  /* The rail's surface is there before /user-chrome.js paints the tabs. */
  body:is([data-user-page="/projects"], [data-user-page="/my-recordings"], [data-user-page="/work"], [data-user-page="/settings"], .contrib-closed):not([data-nav-held])::after {
    content: ""; position: fixed; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; z-index: 29; pointer-events: none;
    width: 248px; height: auto; background: var(--ui-surface); box-shadow: var(--ui-e1);
  }
  body:is([data-user-page="/projects"], [data-user-page="/my-recordings"], [data-user-page="/work"], [data-user-page="/settings"], .contrib-closed):not([data-nav-held]) #userNav[hidden] + * { margin-block-start: 0; }
  /* The header becomes the rail's top (the logo) and foot (staff links). */
  body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) .site-header {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; inset-inline-end: auto; z-index: 31;
    width: 248px; height: auto; padding: 24px 24px 88px; margin: 0;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
    background: transparent; box-shadow: none; border: 0; pointer-events: none;
  }
  body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) .site-header > * { pointer-events: auto; }
  body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) .brand-mark img { height: 30px; }
  body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) .header-right { margin: 0; }
  body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) #userNav {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; inset-inline-end: auto; z-index: 30;
    width: 248px; height: auto; margin: 0; padding: 96px 16px 24px;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
    background: var(--ui-surface); box-shadow: var(--ui-e1); border: 0;
  }
  body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) #userNav a {
    flex: none; flex-direction: row; justify-content: flex-start; gap: 12px;
    min-height: 48px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--ui-r-m);
    font-size: 15px; font-weight: 500; color: var(--ui-ink-2);
  }
  body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) #userNav a.is-current { font-weight: 600; }
  /* The language toggle leaves the top bar for the foot of the rail. */
  body:is([data-user-page]:not([data-user-page="/"]), .contrib-closed):not([data-nav-held]) #userNav .nav-lang {
    /* RELATIVE, NOT STATIC (hotfix 2026-10-20): style.css gives the pill a
       44px hit area as an absolutely placed ::after. A static pill is no
       containing block, so that ::after spread over the WHOLE RAIL and every
       tab click toggled the language. */
    position: relative; top: auto; inset-inline-end: auto; order: 99; align-self: flex-start; margin: auto 0 0; padding: 8px 14px;
  }
}

/* SKELETONS (projects, my recordings, my details): sunken blocks with a slow shimmer, none
   under reduced motion. They replace every "Loading..." sentence. */
body:is([data-user-page="/projects"], [data-user-page="/my-recordings"], [data-user-page="/settings"]) .sk {
  display: block; border-radius: var(--ui-r-s);
  background: linear-gradient(90deg, var(--ui-sunken) 0%, var(--ui-sunken-2) 50%, var(--ui-sunken) 100%) 0 0 / 200% 100%;
  animation: ui-shimmer 1.2s linear infinite;
}
body:is([data-user-page="/projects"], [data-user-page="/my-recordings"], [data-user-page="/settings"]) .sk-title { width: 52%; height: 20px; }
body:is([data-user-page="/projects"], [data-user-page="/my-recordings"], [data-user-page="/settings"]) .sk-line { width: 88%; height: 14px; }
body:is([data-user-page="/projects"], [data-user-page="/my-recordings"], [data-user-page="/settings"]) .sk-short { width: 56%; }
body:is([data-user-page="/projects"], [data-user-page="/my-recordings"], [data-user-page="/settings"]) .sk-btn { width: 100%; height: 52px; border-radius: var(--ui-r-m); }
body:is([data-user-page="/projects"], [data-user-page="/my-recordings"], [data-user-page="/settings"]) .sk-big { width: 46%; height: 36px; }
body:is([data-user-page="/projects"], [data-user-page="/my-recordings"], [data-user-page="/settings"]) .sk-dot { flex: none; width: 40px; height: 40px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  body:is([data-user-page="/projects"], [data-user-page="/my-recordings"], [data-user-page="/settings"]) .sk { animation: none; }
}
/* The same status chip on both pages: 24px, a pill, an icon and the word. */
body:is([data-user-page="/projects"], [data-user-page="/my-recordings"]) :is(.proj-chip, .mr-chip) {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--ui-r-pill); font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: 0; white-space: nowrap;
  background: var(--ui-sunken-2); color: var(--ui-ink);
}
/* The icon: a check by default (open, a member, accepted). */
body:is([data-user-page="/projects"], [data-user-page="/my-recordings"]) :is(.proj-chip, .mr-chip)::before {
  content: ""; flex: none; width: 4px; height: 8px; margin: -3px 2px 0; border: solid currentColor; border-width: 0 2px 2px 0;
  border-radius: 0; background: none; transform: rotate(45deg);
}
/* Waiting: a clock face. */
body:is([data-user-page="/projects"], [data-user-page="/my-recordings"]) :is(.proj-chip.is-waiting, .mr-chip.qa-pending)::before {
  width: 10px; height: 10px; margin: 0; border: 1.5px solid currentColor; border-radius: 50%; transform: none;
  background: linear-gradient(currentColor, currentColor) 3.25px 1px / 1.5px 3.5px no-repeat, linear-gradient(currentColor, currentColor) 3.25px 3.25px / 3px 1.5px no-repeat;
}
/* Declined / rejected: a cross. */
body:is([data-user-page="/projects"], [data-user-page="/my-recordings"]) :is(.proj-chip.is-declined, .mr-chip.qa-rejected)::before {
  content: "\00D7"; width: auto; height: auto; margin: -1px 0 0; border: 0; transform: none; font-size: 15px; font-weight: 700; line-height: 1;
}

/* =============================================================================
   PROJECTS (/projects; polish 3b-ii, spec phase 5): a greeting line, the
   heading, the active project as a raised hero card first, and the other
   projects as borderless cards (two columns from 640px). Moved here from
   style.css's board-C2 block, on the --ui-* tokens.
   ============================================================================= */
body[data-user-page="/projects"] main { max-width: 820px; padding: 24px 16px 32px; }
body[data-user-page="/projects"] .site-footer { display: none; }
body[data-user-page="/projects"] .proj-card :is(button, textarea) { font-family: inherit; }

body[data-user-page="/projects"] .proj-hello { margin: 0 0 2px; font-size: 16px; font-weight: 500; line-height: 24px; color: var(--ui-brand); overflow-wrap: anywhere; }
body[data-user-page="/projects"] .proj-hello[hidden] { display: none; }
body[data-user-page="/projects"] h1.intro { margin: 0; padding: 0; font-size: 28px; font-weight: 700; line-height: 36px; letter-spacing: -0.01em; }
body[data-user-page="/projects"] h1.intro:lang(ar) { line-height: 44px; letter-spacing: 0; }
body[data-user-page="/projects"] #projIntro { display: block; min-height: 22px; margin: 2px 0 20px; padding: 0; font-size: 14px; line-height: 22px; color: var(--ui-ink-2); }
/* Until the summary is written, a skeleton line holds its place. */
body[data-user-page="/projects"] #projIntro:empty::before {
  content: ""; display: block; width: 55%; max-width: 280px; height: 14px; margin-top: 4px; border-radius: var(--ui-r-s);
  background: linear-gradient(90deg, var(--ui-sunken) 0%, var(--ui-sunken-2) 50%, var(--ui-sunken) 100%) 0 0 / 200% 100%;
  animation: ui-shimmer 1.2s linear infinite;
}
body[data-user-page="/projects"] .proj-msg { margin: -8px 0 16px; font-size: 14px; line-height: 22px; color: var(--ui-bad); font-weight: 500; }
body[data-user-page="/projects"] .proj-msg:empty { display: none; }

body[data-user-page="/projects"] :is(#projectList, .proj-skel) { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
body[data-user-page="/projects"] #projectList:empty { display: none; }
body[data-user-page="/projects"] #projectList[data-loaded] ~ .proj-skel,
body[data-user-page="/projects"] #projectList:not(:empty) ~ .proj-skel { display: none; }
@media (min-width: 640px) {
  body[data-user-page="/projects"] :is(#projectList, .proj-skel) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  body[data-user-page="/projects"] .proj-sk-hero { grid-column: 1 / -1; }
}

/* THE CARD: surface, r-l, resting depth, no border. */
body[data-user-page="/projects"] :is(.proj-card, .proj-sk) {
  min-width: 0; padding: 20px; display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  background: var(--ui-surface); border: 0; border-radius: var(--ui-r-l); box-shadow: var(--ui-e1);
}
/* THE ACTIVE PROJECT: first, the full width, raised, on a brand wash. */
body[data-user-page="/projects"] :is(.proj-card.is-member, .proj-sk-hero) {
  order: -1; grid-column: 1 / -1; padding: 24px; gap: 14px; box-shadow: var(--ui-e2);
  background: linear-gradient(180deg, var(--ui-tint) 0, var(--ui-surface) 120px);
}
body[data-user-page="/projects"] .proj-card.is-member .proj-name { font-size: 22px; line-height: 30px; }

/* Name and chip share a row; a long name takes the row and the chip drops under
   it. Both are data in an unknown language and read from their own first
   strong character. */
body[data-user-page="/projects"] .proj-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
body[data-user-page="/projects"] .proj-name {
  flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--ui-font); font-size: 18px; font-weight: 600; line-height: 26px;
  overflow-wrap: anywhere; unicode-bidi: plaintext; color: var(--ui-ink);
  /* A name reads in its own direction but sits on the PAGE's start side:
     match-parent resolves against the parent, start against the text. */
  text-align: start; text-align: -webkit-match-parent; text-align: match-parent;
}
body[data-user-page="/projects"] .proj-name:lang(ar) { font-family: var(--ui-font-ar); font-weight: 600; }
body[data-user-page="/projects"] .proj-chip.is-open { background: var(--ui-ok-tint); color: var(--ui-ok); }
body[data-user-page="/projects"] .proj-chip.is-in { background: var(--ui-surface); color: var(--ui-brand-press); box-shadow: var(--ui-e1); }
body[data-user-page="/projects"] .proj-chip.is-waiting { background: var(--ui-gold-tint); color: var(--ui-gold-ink); }
body[data-user-page="/projects"] .proj-chip.is-declined { background: var(--ui-bad-tint); color: var(--ui-bad); }

body[data-user-page="/projects"] :is(.proj-desc, .proj-wait) { margin: 0; font-size: 15px; line-height: 24px; color: var(--ui-ink-2); overflow-wrap: break-word; text-align: start; }
body[data-user-page="/projects"] .proj-desc { unicode-bidi: plaintext; text-align: -webkit-match-parent; text-align: match-parent; }
body[data-user-page="/projects"] .proj-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
body[data-user-page="/projects"] .proj-fact { padding: 2px 10px; border-radius: var(--ui-r-pill); background: var(--ui-sunken); font-size: 12px; font-weight: 500; line-height: 20px; color: var(--ui-ink-2); }

/* THE ONE ACTION: the primary (52px, r-m, brand fill, its shadow), the quiet one
   on the brand tint, and the text action (ask to join) with a 44px hit area. */
body[data-user-page="/projects"] .proj-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin-top: 4px; padding: 0 24px;
  border: 0; border-radius: var(--ui-r-m); background: var(--ui-brand); color: var(--ui-on-brand); box-shadow: var(--ui-e-brand);
  font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer;
  transition: background-color var(--ui-t-press) var(--ui-ease-out), transform var(--ui-t-press) var(--ui-ease-out);
  -webkit-tap-highlight-color: transparent;
}
body[data-user-page="/projects"] .proj-go:hover { background: var(--ui-brand-press); color: var(--ui-on-brand); text-decoration: none; }
body[data-user-page="/projects"] .proj-go:active { transform: scale(0.98); }
body[data-user-page="/projects"] .proj-go:disabled { opacity: 0.5; box-shadow: none; cursor: not-allowed; }
body[data-user-page="/projects"] .proj-go-icon { display: inline-flex; line-height: 0; }
body[data-user-page="/projects"] .proj-go-alt { background: var(--ui-tint); color: var(--ui-brand); box-shadow: none; }
body[data-user-page="/projects"] .proj-go-alt:hover { background: var(--ui-brand-soft); color: var(--ui-brand-press); }
body[data-user-page="/projects"] .proj-link {
  align-self: flex-start; min-height: 44px; margin: 0; margin-inline-start: -12px; padding: 0 12px; display: inline-flex; align-items: center;
  border: 0; border-radius: var(--ui-r-m); background: none; color: var(--ui-brand); font-size: 15px; font-weight: 600; line-height: 24px; cursor: pointer;
}
body[data-user-page="/projects"] .proj-link:hover { background: var(--ui-brand-soft); color: var(--ui-brand-press); }

/* THE REASON BOX, opened in place: label, a sunken textarea (16px, the iOS
   floor), the count, then the primary. */
body[data-user-page="/projects"] .proj-actions { display: flex; flex-direction: column; gap: 8px; }
body[data-user-page="/projects"] .proj-why { font-size: 14px; font-weight: 500; line-height: 22px; color: var(--ui-ink-2); }
body[data-user-page="/projects"] .proj-reason {
  width: 100%; height: 96px; resize: none; padding: 12px 16px; font-size: 16px; line-height: 24px; text-align: start;
  border: 0; border-radius: var(--ui-r-m); background: var(--ui-sunken); color: var(--ui-ink);
}
body[data-user-page="/projects"] .proj-reason:focus,
body[data-user-page="/projects"] .proj-reason:focus-visible { outline: none; background: var(--ui-surface); box-shadow: inset 0 0 0 2px var(--ui-brand), var(--ui-focus); }
body[data-user-page="/projects"] .proj-count { margin: 0; font-size: 12px; line-height: 18px; color: var(--ui-ink-3); }

@media (min-width: 1024px) {
  body[data-user-page="/projects"] main { max-width: 1040px; padding: 40px 40px 48px; }
  body[data-user-page="/projects"] h1.intro { font-size: 32px; line-height: 40px; }
  body[data-user-page="/projects"] h1.intro:lang(ar) { line-height: 48px; }
  body[data-user-page="/projects"] :is(#projectList, .proj-skel) { gap: 16px; }
  body[data-user-page="/projects"] .proj-card.is-member { padding: 28px 32px; }
  body[data-user-page="/projects"] .proj-card.is-member .proj-desc { max-width: 60ch; }
  body[data-user-page="/projects"] .proj-card.is-member .proj-go { align-self: flex-start; width: auto; min-width: 240px; min-height: 48px; }
  body[data-user-page="/projects"] .proj-go { min-height: 48px; }
}

/* =============================================================================
   MY RECORDINGS (/my-recordings; polish 3b-ii, spec phase 5): an icon Refresh,
   ONE summary card that leads with the accepted time, borderless cards whose
   duration sits on the sub-line, the open card raised. Moved here from
   style.css's board-C5 block, on the --ui-* tokens. Desktop: the summary at
   the inline start (sticky), the list at the inline end.
   ============================================================================= */
body[data-user-page="/my-recordings"] main { max-width: 820px; padding: 24px 16px 32px; }
body[data-user-page="/my-recordings"] .site-footer { display: none; }
body[data-user-page="/my-recordings"] :is(button, input, select) { font-family: inherit; }

/* The heading row with the icon Refresh at its end. */
body[data-user-page="/my-recordings"] .mr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
body[data-user-page="/my-recordings"] h1.intro { margin: 0; padding: 0; font-size: 28px; font-weight: 700; line-height: 36px; letter-spacing: -0.01em; }
body[data-user-page="/my-recordings"] h1.intro:lang(ar) { line-height: 44px; letter-spacing: 0; }
body[data-user-page="/my-recordings"] .mr-refresh {
  flex: none; width: 44px; height: 44px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--ui-r-m); background: var(--ui-surface); box-shadow: var(--ui-e1); color: var(--ui-brand); cursor: pointer;
  transition: background-color var(--ui-t-press) var(--ui-ease-out);
}
body[data-user-page="/my-recordings"] .mr-refresh:hover:not(:disabled) { background: var(--ui-tint); }
/* A read in flight: the icon turns; the button is never faded to look switched off. */
body[data-user-page="/my-recordings"] .mr-refresh:disabled { opacity: 1; cursor: progress; }
body[data-user-page="/my-recordings"] .mr-refresh-ic { display: block; }
body[data-user-page="/my-recordings"] .mr-refresh:disabled .mr-refresh-ic { animation: ui-spin 0.9s linear infinite; }
body[data-user-page="/my-recordings"] .mr-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
body[data-user-page="/my-recordings"] #status { margin: 0 0 12px; padding: 0; font-size: 14px; line-height: 22px; color: var(--ui-ink-2); }
body[data-user-page="/my-recordings"] #status:empty { display: none; }

/* THE SUMMARY CARD: the accepted time leads (display, tabular, in the ok
   colour); the total and the count share the line under a divider. */
body[data-user-page="/my-recordings"] .totals-card { margin: 0 0 16px; padding: 20px; border: 0; border-radius: var(--ui-r-l); background: var(--ui-surface); box-shadow: var(--ui-e1); overflow: visible; }
body[data-user-page="/my-recordings"] .totals-card[hidden] { display: none; }
body[data-user-page="/my-recordings"] .totals-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "lead lead" "total count"; gap: 0; background: none;
}
body[data-user-page="/my-recordings"] .totals-tile { min-width: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; background: none; border: 0; border-radius: 0; box-shadow: none; }
body[data-user-page="/my-recordings"] .totals-tile--counted { grid-area: lead; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--ui-line); }
body[data-user-page="/my-recordings"] .totals-tile--total { grid-area: total; }
body[data-user-page="/my-recordings"] .totals-tile--count { grid-area: count; padding-inline-start: 16px; border-inline-start: 1px solid var(--ui-line); }
/* Latin digits inside an rtl tile reorder without the isolate (2h 14m would read 14m 2h). */
body[data-user-page="/my-recordings"] .totals-value {
  margin: 0; font-family: var(--ui-font); font-size: 18px; font-weight: 600; line-height: 26px; color: var(--ui-ink);
  font-variant-numeric: tabular-nums; unicode-bidi: isolate; overflow-wrap: anywhere;
}
body[data-user-page="/my-recordings"] .totals-tile--counted .totals-value { font-size: 36px; font-weight: 700; line-height: 44px; letter-spacing: -0.01em; color: var(--ui-ok); }
body[data-user-page="/my-recordings"] .totals-label { margin: 0; font-size: 13px; line-height: 20px; color: var(--ui-ink-2); }
body[data-user-page="/my-recordings"] .totals-tile--counted .totals-label { font-size: 14px; font-weight: 500; }

/* THE LIST, and its skeleton until the first read answers. */
body[data-user-page="/my-recordings"] #recList { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
body[data-user-page="/my-recordings"] .mr-skel { display: flex; flex-direction: column; gap: 10px; }
body[data-user-page="/my-recordings"] #recList[data-loaded] ~ .mr-skel,
body[data-user-page="/my-recordings"] #recList:not(:empty) ~ .mr-skel { display: none; }
body[data-user-page="/my-recordings"] .mr-sk {
  min-height: 72px; padding: 16px; display: flex; align-items: center; gap: 12px;
  border-radius: var(--ui-r-l); background: var(--ui-surface); box-shadow: var(--ui-e1);
}
body[data-user-page="/my-recordings"] .mr-sk-sum { min-height: 0; padding: 20px; flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 6px; }

/* THE CARD: a three-column grid -- play, the title over its sub-line, and the
   chip over the duration -- so the duration sits on the sub-line's row without
   a DOM change (.mr-head and the play button keep their markup). */
body[data-user-page="/my-recordings"] .mr-card {
  min-width: 0; padding: 12px 16px; padding-inline-start: 12px;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; align-items: center;
  background: var(--ui-surface); border: 0; border-radius: var(--ui-r-l); box-shadow: var(--ui-e1);
  transition: box-shadow var(--ui-t-state) var(--ui-ease-out);
}
body[data-user-page="/my-recordings"] .mr-card.is-open { row-gap: 12px; padding: 16px; box-shadow: var(--ui-e2); }
body[data-user-page="/my-recordings"] .mr-head { display: contents; }
body[data-user-page="/my-recordings"] .mr-head > .mr-play { grid-column: 1; grid-row: 1; }
body[data-user-page="/my-recordings"] .mr-toggle { grid-column: 2; grid-row: 1; }
body[data-user-page="/my-recordings"] .mr-card.is-open .mr-toggle { grid-column: 1 / 3; }
body[data-user-page="/my-recordings"] .mr-chip { grid-column: 3; grid-row: 1; align-self: start; justify-self: end; margin-top: 2px; }
body[data-user-page="/my-recordings"] .mr-dur { grid-column: 3; grid-row: 1; align-self: end; justify-self: end; margin-bottom: 3px; display: flex; font-size: 13px; line-height: 20px; color: var(--ui-ink-2); }
body[data-user-page="/my-recordings"] :is(.mr-body, .mr-msg) { grid-column: 1 / -1; }
/* A phone: the title and its sub-line take the whole width; the chip and the
   duration share the line under them (chip at the start, duration at the end). */
@media (max-width: 639.98px) {
  body[data-user-page="/my-recordings"] .mr-card { grid-template-columns: 44px minmax(0, 1fr); row-gap: 6px; }
  body[data-user-page="/my-recordings"] .mr-head > .mr-play { grid-row: 1 / 3; align-self: center; }
  body[data-user-page="/my-recordings"] .mr-chip { grid-column: 2; grid-row: 2; justify-self: start; align-self: center; margin: 0; }
  body[data-user-page="/my-recordings"] .mr-dur { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; margin: 0; }
  body[data-user-page="/my-recordings"] .mr-card.is-open :is(.mr-chip, .mr-dur) { grid-column: 1 / -1; }
}

/* Play: a 40px circle inside a 44px tap target. It points right in both
   languages: media controls are never mirrored. */
body[data-user-page="/my-recordings"] .mr-play {
  flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body[data-user-page="/my-recordings"] .mr-play-dot {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ui-tint); color: var(--ui-brand); transition: background-color var(--ui-t-press) var(--ui-ease-out);
}
body[data-user-page="/my-recordings"] .mr-play:hover .mr-play-dot { background: var(--ui-brand-soft); }
body[data-user-page="/my-recordings"] .mr-play-dot svg { display: block; }
body[data-user-page="/my-recordings"] .mr-play.is-playing .mr-play-dot { background: var(--ui-brand); color: var(--ui-on-brand); }
body[data-user-page="/my-recordings"] .mr-card.is-open .mr-head .mr-play { display: none; }

/* Title and sub-line: the title ellipsizes, the sub-line wraps; both are data
   in an unknown language and read from their own first strong character. */
body[data-user-page="/my-recordings"] .mr-toggle {
  min-width: 0; min-height: 48px; margin: 0; padding: 0; border: 0; background: none;
  display: flex; flex-direction: column; justify-content: center; text-align: start; color: inherit; cursor: pointer;
}
body[data-user-page="/my-recordings"] .mr-title {
  display: block; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--ui-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext;
  text-align: start; text-align: -webkit-match-parent; text-align: match-parent;
}
body[data-user-page="/my-recordings"] .mr-title.is-untitled { color: var(--ui-ink-3); font-weight: 500; }
body[data-user-page="/my-recordings"] .mr-sub { display: block; font-size: 13px; line-height: 20px; color: var(--ui-ink-2); overflow-wrap: anywhere; }
body[data-user-page="/my-recordings"] .mr-chip.qa-accepted { background: var(--ui-ok-tint); color: var(--ui-ok); }
body[data-user-page="/my-recordings"] .mr-chip.qa-pending { background: var(--ui-gold-tint); color: var(--ui-gold-ink); }
body[data-user-page="/my-recordings"] .mr-chip.qa-rejected { background: var(--ui-bad-tint); color: var(--ui-bad); }
body[data-user-page="/my-recordings"] .mr-n { font-family: var(--ui-font); font-variant-numeric: tabular-nums; letter-spacing: 0; unicode-bidi: isolate; }

/* The open part: player, the two fields, the one message line. */
body[data-user-page="/my-recordings"] .mr-body { display: flex; flex-direction: column; gap: 16px; }
body[data-user-page="/my-recordings"] .mr-body[hidden] { display: none; }
body[data-user-page="/my-recordings"] .mr-player { display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; padding-inline: 6px 16px; background: var(--ui-sunken); border-radius: var(--ui-r-pill); }
body[data-user-page="/my-recordings"] .mr-bar { position: relative; flex: 1; height: 4px; border-radius: var(--ui-r-pill); background: var(--ui-sunken-2); }
body[data-user-page="/my-recordings"] .mr-bar i { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 0; border-radius: var(--ui-r-pill); background: var(--ui-brand); }
body[data-user-page="/my-recordings"] .mr-elapsed { flex: none; font-size: 13px; line-height: 20px; color: var(--ui-ink-2); }
body[data-user-page="/my-recordings"] .mr-field { display: flex; flex-direction: column; gap: 8px; }
body[data-user-page="/my-recordings"] .mr-field label { font-size: 14px; font-weight: 500; line-height: 22px; color: var(--ui-ink-2); }
body[data-user-page="/my-recordings"] .mr-input {
  width: 100%; height: 52px; padding: 0 16px; font-size: 16px; text-align: start;
  border: 0; border-radius: var(--ui-r-m); background: var(--ui-sunken); color: var(--ui-ink);
  transition: background-color var(--ui-t-state) var(--ui-ease-out), box-shadow var(--ui-t-state) var(--ui-ease-out);
}
body[data-user-page="/my-recordings"] .mr-input:focus,
body[data-user-page="/my-recordings"] .mr-input:focus-visible { outline: none; background: var(--ui-surface); box-shadow: inset 0 0 0 2px var(--ui-brand), var(--ui-focus); }
body[data-user-page="/my-recordings"] .mr-input::placeholder { color: var(--ui-ink-3); opacity: 1; }
body[data-user-page="/my-recordings"] .mr-input.is-unset { color: var(--ui-ink-3); }
body[data-user-page="/my-recordings"] .mr-input.save-error { box-shadow: inset 0 0 0 2px var(--ui-bad); }
body[data-user-page="/my-recordings"] :is(.mr-note, .mr-msg) { margin: 0; font-size: 14px; line-height: 22px; color: var(--ui-ink-2); }
body[data-user-page="/my-recordings"] .mr-note:empty { display: none; }
body[data-user-page="/my-recordings"] .mr-msg.is-ok { color: var(--ui-ok); font-weight: 500; }
body[data-user-page="/my-recordings"] .mr-msg.is-note { color: var(--ui-ink-2); }
body[data-user-page="/my-recordings"] .mr-msg.is-err { color: var(--ui-bad); font-weight: 500; }
body[data-user-page="/my-recordings"] .mr-msg:empty { display: none; }

body[data-user-page="/my-recordings"] .load-more-row { margin: 16px 0 0; text-align: center; }
body[data-user-page="/my-recordings"] .mr-more {
  min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--ui-r-m);
  background: var(--ui-surface); box-shadow: var(--ui-e1); color: var(--ui-brand); font-size: 15px; font-weight: 600; cursor: pointer;
}
body[data-user-page="/my-recordings"] .mr-more:hover:not(:disabled) { background: var(--ui-tint); }
body[data-user-page="/my-recordings"] .mr-more:disabled { opacity: 0.5; cursor: default; }

/* NOTHING YET: centred, the heading kept, one next step. */
body[data-user-page="/my-recordings"] #listArea[hidden] { display: none; }
body[data-user-page="/my-recordings"] .mr-empty {
  /* The screen minus the shell's 58px bar, 66px tab bar and this page's 56px of main padding. */
  min-height: calc(100vh - 58px - 66px - 56px); min-height: calc(100dvh - 58px - 66px - 56px);
  padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
}
body[data-user-page="/my-recordings"] .mr-empty[hidden] { display: none; }
body[data-user-page="/my-recordings"] .mr-empty-icon {
  width: 72px; height: 72px; margin-bottom: 4px; border-radius: var(--ui-r-l); display: flex; align-items: center; justify-content: center;
  background: var(--ui-tint); color: var(--ui-brand);
}
body[data-user-page="/my-recordings"] .mr-empty-body { max-width: 36ch; margin: 0; font-size: 16px; line-height: 26px; color: var(--ui-ink-2); }
body[data-user-page="/my-recordings"] .mr-empty-cta {
  margin-top: 12px; width: 100%; max-width: 360px; min-height: 52px; padding: 0 24px; border-radius: var(--ui-r-m);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ui-brand); color: var(--ui-on-brand); box-shadow: var(--ui-e-brand); font-size: 16px; font-weight: 600; text-decoration: none;
}
body[data-user-page="/my-recordings"] .mr-empty-cta:hover { background: var(--ui-brand-press); color: var(--ui-on-brand); text-decoration: none; }

@media (min-width: 900px) {
  body[data-user-page="/my-recordings"] .mr-empty { min-height: 60vh; }
}
@media (min-width: 1024px) {
  body[data-user-page="/my-recordings"] main { max-width: 1040px; padding: 40px 40px 48px; }
  body[data-user-page="/my-recordings"] h1.intro { font-size: 32px; line-height: 40px; }
  body[data-user-page="/my-recordings"] h1.intro:lang(ar) { line-height: 48px; }
  body[data-user-page="/my-recordings"] #listArea:not([hidden]) {
    display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 24px; align-items: start;
  }
  body[data-user-page="/my-recordings"] #listArea > :is(.mr-top, #status, .mr-skel) { grid-column: 1 / -1; }
  body[data-user-page="/my-recordings"] .totals-card { grid-column: 1; grid-row: span 2; position: sticky; top: 24px; margin: 0; }
  body[data-user-page="/my-recordings"] #listArea > :is(#recList, .load-more-row) { grid-column: 2; }
  body[data-user-page="/my-recordings"] #listArea:has(> #totalsCard[hidden]) > :is(#recList, .load-more-row) { grid-column: 1 / -1; }
  body[data-user-page="/my-recordings"] .mr-skel { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 10px 24px; }
  body[data-user-page="/my-recordings"] .mr-sk { grid-column: 2; }
  body[data-user-page="/my-recordings"] .mr-sk-sum { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  body[data-user-page="/my-recordings"] .mr-empty { min-height: 70vh; }
}

/* =============================================================================
   MY DETAILS, TRANSCRIPTION WORK AND THE CLOSING PAGE (polish 3b-ii item 4):
   the same cards, fields and buttons as the rest of the contributor UI, drawn
   over style.css's board C6/C7 sections from the --ui-* tokens. No behaviour
   change: every rule here is a look, scoped to its own page.
   ============================================================================= */
/* ---- My details (/settings) ---- */
/* ONE REVEAL (hotfix 2026-10-20). While <body> carries data-loading the skeleton
   stands under the heading and everything else in <main> but the bars is
   invisible, its layout kept; /settings.js drops the attribute once every first
   read has settled, so the page appears in one step. THE FAILSAFE: after 10 s
   the form shows and the skeleton folds away whatever happened, so a script
   that never ran cannot hide the form for good. */
body[data-user-page="/settings"][data-loading] main > :not(.site-header):not(.user-nav):not(h1.intro):not(.set-skel) {
  visibility: hidden; animation: i18n-failsafe 0s linear 10s forwards;
}
body[data-user-page="/settings"]:not([data-loading]) .set-skel { display: none; }
body[data-user-page="/settings"] .set-skel { max-height: 4000px; overflow: hidden; animation: set-skel-failsafe 0s linear 10s forwards; }
@keyframes set-skel-failsafe { to { max-height: 0; visibility: hidden; } }
body[data-user-page="/settings"] .set-sk {
  display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; padding: 20px;
  border-radius: var(--ui-r-l); background: var(--ui-surface); box-shadow: var(--ui-e1);
}
body[data-user-page="/settings"] main { padding: 24px 16px 32px; }
body[data-user-page="/settings"] h1.intro { margin: 0 0 16px; padding: 0; font-size: 28px; font-weight: 700; line-height: 36px; letter-spacing: -0.01em; }
body[data-user-page="/settings"] h1.intro:lang(ar) { line-height: 44px; letter-spacing: 0; }
body[data-user-page="/settings"] .set-note { margin: -8px 0 16px; padding: 0; font-size: 16px; line-height: 26px; color: var(--ui-ink-2); }
body[data-user-page="/settings"] .set-msg { font-size: 14px; line-height: 22px; color: var(--ui-ink-2); }
body[data-user-page="/settings"] .set-msg.is-error { color: var(--ui-bad); }
/* Every group is a card: surface, r-l, resting depth, no border. */
body[data-user-page="/settings"] :is(.set-grp, #cvSection, #passwordSection, #aboutSection, .admin-section.acct-row) {
  margin: 0 0 16px; padding: 20px; gap: 16px; border: 0; border-radius: var(--ui-r-l); background: var(--ui-surface); box-shadow: var(--ui-e1);
}
body[data-user-page="/settings"] #aboutSection:not([hidden]) { display: flex; flex-direction: column; }
body[data-user-page="/settings"] :is(.set-grp-title, .section-head h2) {
  margin: 0; font-family: var(--ui-font); font-size: 18px; font-weight: 600; line-height: 26px; letter-spacing: 0; color: var(--ui-ink);
}
body[data-user-page="/settings"] :is(.set-grp-title, .section-head h2):lang(ar) { font-family: var(--ui-font-ar-head); font-weight: 700; line-height: 30px; }
body[data-user-page="/settings"] :is(#cvSection, #passwordSection, #aboutSection) .section-head { margin: 0; padding: 0; border: 0; }
/* Labels over sunken fields: 14/500 in ink-2, the field 8px below; 52px, no border at rest. */
body[data-user-page="/settings"] .meta-form label { gap: 8px; font-size: 14px; font-weight: 500; line-height: 22px; color: var(--ui-ink-2); }
body[data-user-page="/settings"] .meta-grid { gap: 16px 12px; }
body[data-user-page="/settings"] .meta-form :is(input:not([type="radio"]):not([type="file"]), select, textarea) {
  min-height: 52px; padding: 0 16px; border: 0; border-radius: var(--ui-r-m); background: var(--ui-sunken); color: var(--ui-ink);
  font-size: 16px; box-shadow: none; transition: background-color var(--ui-t-state) var(--ui-ease-out), box-shadow var(--ui-t-state) var(--ui-ease-out);
}
body[data-user-page="/settings"] .meta-form textarea { padding: 14px 16px; }
body[data-user-page="/settings"] .meta-form :is(input:not([type="radio"]):not([type="file"]), select, textarea):focus,
body[data-user-page="/settings"] .meta-form :is(input:not([type="radio"]):not([type="file"]), select, textarea):focus-visible {
  outline: none; background: var(--ui-surface); box-shadow: inset 0 0 0 2px var(--ui-brand), var(--ui-focus);
}
body[data-user-page="/settings"] .meta-form :is(input, select, textarea)[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--ui-bad); }
body[data-user-page="/settings"] .set-lang-row { gap: 8px; margin: 0 0 12px; }
body[data-user-page="/settings"] .set-lang-row select[data-lang="level"] { flex: 0 0 112px; padding-inline: 12px; }
body[data-user-page="/settings"] .set-lang-x { border-radius: var(--ui-r-m); color: var(--ui-ink-3); }
body[data-user-page="/settings"] .set-lang-x:hover { background: var(--ui-bad-tint); color: var(--ui-bad); }
body[data-user-page="/settings"] .set-grp #pfAddLang { min-height: 44px; margin-inline-start: -12px; padding: 0 12px; border-radius: var(--ui-r-m); color: var(--ui-brand); font-size: 15px; }
body[data-user-page="/settings"] .set-grp #pfAddLang:hover:not(:disabled) { background: var(--ui-brand-soft); color: var(--ui-brand-press); text-decoration: none; }
/* The payment pair: tiles, the chosen one on the brand tint with a brand ring. */
body[data-user-page="/settings"] .pay-methods { gap: 12px; }
body[data-user-page="/settings"] .pay-methods legend { margin: 0 0 12px; font-size: 18px; font-weight: 600; line-height: 26px; color: var(--ui-ink); }
body[data-user-page="/settings"] .pay-hint { font-size: 14px; line-height: 22px; color: var(--ui-ink-3); }
body[data-user-page="/settings"] .meta-form label.pay-choice {
  min-height: 64px; padding: 0 16px; gap: 12px; border: 0; border-radius: var(--ui-r-m); background: var(--ui-sunken);
  font-size: 16px; font-weight: 500; color: var(--ui-ink); transition: background-color var(--ui-t-state) var(--ui-ease-out), box-shadow var(--ui-t-state) var(--ui-ease-out);
}
body[data-user-page="/settings"] .meta-form label.pay-choice:hover { background: var(--ui-sunken-2); }
body[data-user-page="/settings"] .meta-form label.pay-choice:has(input:checked) { background: var(--ui-tint); box-shadow: inset 0 0 0 2px var(--ui-brand); }
body[data-user-page="/settings"] .meta-form label.pay-choice:has(input:focus-visible) { outline: 2px solid var(--ui-brand); outline-offset: 2px; }
/* The dock: a shadow, never a line; Save is the primary (52px, r-m, its shadow). */
body[data-user-page="/settings"] .set-dock { margin: 0 -16px 16px; padding: 12px 16px 16px; gap: 8px; background: var(--ui-surface); border: 0; box-shadow: var(--ui-e-dock); }
body[data-user-page="/settings"] #profileSave {
  min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--ui-r-m); background: var(--ui-brand); color: var(--ui-on-brand);
  box-shadow: var(--ui-e-brand); font-size: 16px; font-weight: 600;
}
body[data-user-page="/settings"] #profileSave:hover:not(:disabled) { background: var(--ui-brand-press); }
body[data-user-page="/settings"] #profileSave:disabled { opacity: 0.5; box-shadow: none; }
/* The quiet buttons (upload the CV, the reset link, save About you): the brand tint, no border. */
body[data-user-page="/settings"] :is(#cvUploadBtn, #passwordLinkBtn, #aboutSaveBtn) {
  min-height: 48px; margin: 0; padding: 0 20px; border: 0; border-radius: var(--ui-r-m); background: var(--ui-tint); color: var(--ui-brand);
  font-size: 15px; font-weight: 600; letter-spacing: 0; box-shadow: none;
}
body[data-user-page="/settings"] :is(#cvUploadBtn, #passwordLinkBtn, #aboutSaveBtn):hover:not(:disabled) { background: var(--ui-brand-soft); color: var(--ui-brand-press); }
body[data-user-page="/settings"] #cvFile { padding: 12px 16px; border-radius: var(--ui-r-m); background: var(--ui-sunken); }
body[data-user-page="/settings"] #cvFile::file-selector-button {
  min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--ui-r-s); background: var(--ui-surface); box-shadow: var(--ui-e1); color: var(--ui-ink); font: inherit; font-weight: 600; cursor: pointer;
}
body[data-user-page="/settings"] :is(#passwordLinkMsg, #cvMsg, #aboutMsg):not(:empty):not(.is-error) { padding: 10px 14px; border-radius: var(--ui-r-m); background: var(--ui-ok-tint); color: var(--ui-ok); }
body[data-user-page="/settings"] .acct-who strong { font-size: 16px; line-height: 24px; color: var(--ui-ink); }
body[data-user-page="/settings"] .acct-who bdi { font-size: 14px; line-height: 22px; color: var(--ui-ink-2); }
body[data-user-page="/settings"] .acct-row a#logoutLink { padding: 0 12px; margin-inline-end: -12px; border-radius: var(--ui-r-m); color: var(--ui-bad); }
body[data-user-page="/settings"] .acct-row a#logoutLink:hover { background: var(--ui-bad-tint); text-decoration: none; }
@media (min-width: 1024px) {
  body[data-user-page="/settings"] main { max-width: 720px; padding: 40px 40px 48px; }
  body[data-user-page="/settings"] h1.intro { font-size: 32px; line-height: 40px; }
  body[data-user-page="/settings"] h1.intro:lang(ar) { line-height: 48px; }
  body[data-user-page="/settings"] :is(.set-grp, #cvSection, #passwordSection, #aboutSection, .admin-section.acct-row) { padding: 24px; }
  /* No dock band on a desktop: Save is the form's own foot. */
  body[data-user-page="/settings"] .set-dock { position: static; margin: 8px 0 24px; padding: 0; background: transparent; box-shadow: none; flex-direction: row; align-items: center; }
  body[data-user-page="/settings"] .set-dock .set-msg { order: 2; }
  body[data-user-page="/settings"] #profileSave { min-width: 200px; min-height: 48px; }
  body[data-user-page="/settings"] .set-lang-row select[data-lang="level"] { flex-basis: 140px; }
}

/* ---- Transcription work (/work) ---- */
body[data-user-page="/work"] main { padding: 24px 16px 32px; }
body[data-user-page="/work"] h1.intro { margin: 0 0 4px; padding: 0; font-size: 28px; font-weight: 700; line-height: 36px; letter-spacing: -0.01em; }
body[data-user-page="/work"] h1.intro:lang(ar) { line-height: 44px; letter-spacing: 0; }
body[data-user-page="/work"] #workIntro { margin: 0 0 20px; padding: 0; font-size: 14px; line-height: 22px; color: var(--ui-ink-2); }
body[data-user-page="/work"] .admin-section .section-head { margin: 0 0 12px; padding: 0; border: 0; }
body[data-user-page="/work"] .admin-section .section-head h2 { font-family: var(--ui-font); font-size: 16px; font-weight: 600; line-height: 24px; color: var(--ui-ink-2); }
body[data-user-page="/work"] .admin-section .section-head h2:lang(ar) { font-family: var(--ui-font-ar); font-weight: 600; }
body[data-user-page="/work"] .work-card { padding: 20px; gap: 12px; border: 0; border-radius: var(--ui-r-l); background: var(--ui-surface); box-shadow: var(--ui-e1); }
body[data-user-page="/work"] .work-card.is-mine { box-shadow: var(--ui-e2); background: linear-gradient(180deg, var(--ui-tint) 0, var(--ui-surface) 96px); }
body[data-user-page="/work"] .work-name { font-size: 18px; font-weight: 600; line-height: 26px; color: var(--ui-ink); text-align: -webkit-match-parent; text-align: match-parent; }
body[data-user-page="/work"] .work-chip { height: 24px; padding: 0 10px; font-size: 12px; font-weight: 600; line-height: 18px; background: var(--ui-surface); color: var(--ui-brand-press); box-shadow: var(--ui-e1); }
body[data-user-page="/work"] .work-chip::before {
  width: 4px; height: 8px; margin: -3px 2px 0; border: solid currentColor; border-width: 0 2px 2px 0; border-radius: 0; background: none; transform: rotate(45deg);
}
body[data-user-page="/work"] .work-fact { padding: 2px 10px; border-radius: var(--ui-r-pill); background: var(--ui-sunken); font-size: 12px; font-weight: 500; line-height: 20px; color: var(--ui-ink-2); }
body[data-user-page="/work"] .work-fact.n { font-family: var(--ui-font); }
body[data-user-page="/work"] .work-go {
  min-height: 52px; padding: 0 24px; border-radius: var(--ui-r-m); background: var(--ui-brand); color: var(--ui-on-brand); box-shadow: var(--ui-e-brand); font-size: 16px;
  transition: background-color var(--ui-t-press) var(--ui-ease-out), transform var(--ui-t-press) var(--ui-ease-out);
}
body[data-user-page="/work"] .work-go:hover:not(:disabled) { background: var(--ui-brand-press); color: var(--ui-on-brand); }
body[data-user-page="/work"] .work-go:active:not(:disabled) { transform: scale(0.98); }
body[data-user-page="/work"] .work-go:disabled { background: var(--ui-sunken-2); color: var(--ui-ink-3); box-shadow: none; }
body[data-user-page="/work"] .work-link { padding: 0 12px; border-radius: var(--ui-r-m); color: var(--ui-brand); }
body[data-user-page="/work"] .work-link:hover:not(:disabled) { background: var(--ui-brand-soft); color: var(--ui-brand-press); text-decoration: none; }
body[data-user-page="/work"] .work-empty-art:not([hidden]) { border-radius: var(--ui-r-l); background: var(--ui-tint); color: var(--ui-brand); }
body[data-user-page="/work"]:has(#workEmptyArt:not([hidden])) #workIntro { max-width: 40ch; font-family: var(--ui-font); color: var(--ui-ink); }
body[data-user-page="/work"]:has(#workEmptyArt:not([hidden])) #workIntro:lang(ar) { font-family: var(--ui-font-ar-head); }
body[data-user-page="/work"] .work-empty-body { font-size: 16px; line-height: 26px; color: var(--ui-ink-2); }
@media (min-width: 1024px) {
  body[data-user-page="/work"] main { max-width: 1040px; padding: 40px 40px 48px; }
  body[data-user-page="/work"] h1.intro { font-size: 32px; line-height: 40px; }
  body[data-user-page="/work"] h1.intro:lang(ar) { line-height: 48px; }
  body[data-user-page="/work"] :is(#workMine, #workPool) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
}

/* ---- The closing page (body.contrib-closed) ---- */
body.contrib-closed .closing-card { gap: 12px; }
body.contrib-closed .closing-wave { display: block; align-self: flex-start; width: auto; height: 48px; margin-bottom: 12px; overflow: visible; }
body.contrib-closed .closing-wave path { fill: var(--ui-brand); }
body.contrib-closed .closing-wave .is-gold { fill: var(--ui-gold); }
body.contrib-closed .closing-title { font-family: var(--ui-font-display); font-size: 30px; font-weight: 700; line-height: 40px; letter-spacing: -0.01em; color: var(--ui-ink); }
body.contrib-closed .closing-title:lang(ar) { font-family: var(--ui-font-ar-head); line-height: 46px; letter-spacing: 0; }
body.contrib-closed .closing-body { font-size: 16px; line-height: 26px; color: var(--ui-ink-2); }
body.contrib-closed .closing-payment { font-size: 15px; line-height: 24px; color: var(--ui-ink-3); }
body.contrib-closed .closing-link {
  margin-top: 12px; min-height: 48px; padding: 0 20px; border-radius: var(--ui-r-m); background: var(--ui-tint); color: var(--ui-brand); font-size: 15px;
}
body.contrib-closed .closing-link:hover { background: var(--ui-brand-soft); color: var(--ui-brand-press); text-decoration: none; }