/* Server screens: delegations, career, TEST-MODE store, medals (DEC-110..DEC-112).
   No inline styles anywhere (CSP style-src 'self', DEC-065): every visual state is a class here.
   Logical properties (inline-start/end) so the layout mirrors in RTL locales. */

.screens { place-items: start center; padding-top: 28px; grid-template-columns: minmax(0, 1fr); }
.screens-card { min-width: 0; justify-self: center; width: min(1100px, 100%); max-height: calc(100dvh - 44px); display: flex; flex-direction: column; padding: 18px 22px; background: var(--panel-solid); }
.screens-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.screens-head h2 { margin: 0; font-size: 1.4rem; }
.screens-head h2:focus { outline: none; }
.screens-head h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.screens-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.sc-tab { background: transparent; border-color: var(--line); }
.sc-tab[aria-current="page"] { background: #26384a; border-color: var(--focus); box-shadow: inset 0 -3px 0 var(--focus); }
.sc-tab-test::after { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-inline-start: 6px; border-radius: 2px; background: var(--accent); vertical-align: 0.05em; }
.screens-body { overflow: auto; flex: 1 1 auto; min-width: 0; min-height: 120px; padding-inline-end: 4px; overscroll-behavior: contain; }
.sc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sc-bar .status { margin: 0; }
.sc-bar button { min-height: 36px; padding: 0.35em 0.9em; }
.sc-intro { margin: 4px 0 10px; color: var(--text); line-height: 1.45; }
.sc-panel { margin: 14px 0 0; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #0d151d; }
.sc-panel h3 { margin: 0 0 8px; font-size: 1.02rem; }
.sc-panel h4 { margin: 14px 0 4px; font-size: 0.95rem; }
.sc-panel p { margin: 6px 0; }
.sc-table caption { text-align: start; font-weight: 700; color: var(--muted); padding: 4px 0; caption-side: top; }
.sc-table td { vertical-align: middle; }
.sc-table button { min-height: 36px; padding: 0.3em 0.8em; }
.sc-form { margin: 8px 0 0; }
.sc-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.sc-row .field { flex: 1 1 200px; margin-bottom: 4px; }
.sc-form input[type="number"], .sc-panel input[type="number"] { font: inherit; color: var(--text); background: #0d151d; border: 1px solid #3a4a5a; border-radius: 8px; padding: 0.55em 0.7em; min-height: 42px; }
.sc-form input:invalid { border-color: var(--line); }
.small { font-size: 0.85rem; }
.muted { color: var(--muted); }
.code, code { font-family: var(--mono); font-size: 0.88em; unicode-bidi: isolate; }
code { background: #17222d; border-radius: 5px; padding: 0 4px; word-break: break-all; }
.sc-you code { user-select: all; }
.sc-msg { margin: 10px 0; padding: 8px 12px; border-radius: 10px; font-weight: 600; }
.sc-msg:focus { outline: none; }
.sc-msg:focus-visible { outline: 3px solid var(--focus); }
.sc-msg.ok { background: rgba(55, 208, 192, 0.14); border: 1px solid var(--teal); color: #c9fff7; }
.sc-msg.error { background: rgba(255, 92, 92, 0.14); border: 1px solid var(--danger); color: #ffd6d6; }
.sc-msg.info { background: #17222d; border: 1px solid var(--line); }
.sc-callout { margin: 10px 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); border-inline-start: 4px solid var(--focus); background: #132030; }
.sc-callout h3 { margin: 0 0 4px; font-size: 1rem; }
.sc-callout p { margin: 4px 0; }
.sc-callout.fair { border-inline-start-color: var(--teal); }
.sc-offline { padding: 14px 16px; border: 1px dashed #8a6a20; border-radius: 12px; background: rgba(60, 40, 0, 0.35); }
.sc-offline h3 { margin: 0 0 6px; color: #ffe2a0; }
.sc-chip { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: #17222d; }
.sc-chip.st-approved { border-color: var(--teal); color: #c9fff7; }
.sc-chip.st-draft { border-color: #8a6a20; color: #ffe2a0; }
.sc-detail { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--focus); border-radius: 14px; background: #0f1a24; }
.sc-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc-detail-head h3 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.sc-detail-head button { min-height: 36px; padding: 0.3em 0.9em; }
.sc-roles { margin: 8px 0 0; font-weight: 600; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-owned { font-weight: 700; color: var(--teal); }
.sc-zero { color: var(--teal); font-weight: 700; }
.sc-list { margin: 4px 0; padding-inline-start: 1.2em; }
.pos { color: var(--teal); font-weight: 700; }
.neg { color: #ffb3b3; font-weight: 700; }
.pos, .neg { display: inline-block; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.sc-bar .status { min-width: 0; overflow-wrap: anywhere; }
.you-tag { margin-inline-start: 6px; }

/* Career */
.sc-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.sc-stat { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #17222d; }
.sc-stat .val { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-medals-inline .medal { margin-inline-start: 2px; }
.sc-attrs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; align-items: center; margin: 6px 0; }
.sc-attrs dt { color: var(--muted); }
.sc-attrs dd { margin: 0; display: flex; align-items: center; gap: 8px; }
.sc-attrs .num { font-family: var(--mono); min-width: 3.5em; }
.sc-meter { position: relative; flex: 1 1 auto; max-width: 320px; height: 10px; border-radius: 6px; background: #22303c; overflow: hidden; }
.sc-meter i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 6px; background: linear-gradient(90deg, var(--teal), #7df0a8); }
[dir="rtl"] .sc-meter i { background: linear-gradient(270deg, var(--teal), #7df0a8); }
.sc-meter i.w0 { width: 0%; } .sc-meter i.w5 { width: 5%; } .sc-meter i.w10 { width: 10%; } .sc-meter i.w15 { width: 15%; }
.sc-meter i.w20 { width: 20%; } .sc-meter i.w25 { width: 25%; } .sc-meter i.w30 { width: 30%; } .sc-meter i.w35 { width: 35%; }
.sc-meter i.w40 { width: 40%; } .sc-meter i.w45 { width: 45%; } .sc-meter i.w50 { width: 50%; } .sc-meter i.w55 { width: 55%; }
.sc-meter i.w60 { width: 60%; } .sc-meter i.w65 { width: 65%; } .sc-meter i.w70 { width: 70%; } .sc-meter i.w75 { width: 75%; }
.sc-meter i.w80 { width: 80%; } .sc-meter i.w85 { width: 85%; } .sc-meter i.w90 { width: 90%; } .sc-meter i.w95 { width: 95%; }
.sc-meter i.w100 { width: 100%; }

/* TEST MODE store: the banner is permanent and sticky at the top of the scrolling body. */
.test-banner { position: sticky; top: 0; z-index: 2; margin: 0 0 10px; padding: 10px 14px; border-radius: 10px;
  color: #1a1200; background: var(--accent); border: 3px solid #1a1200;
  box-shadow: 0 0 0 3px var(--accent), 0 8px 18px rgba(0, 0, 0, 0.45); font-size: 0.98rem; line-height: 1.35; }
.test-banner strong { font-size: 1.08rem; letter-spacing: 0.02em; }
.test-mode-btn { border-color: var(--accent); }
.sc-test-label { display: inline-block; margin: 0 0 4px; padding: 2px 8px; border-radius: 6px; font-weight: 800; color: #1a1200; background: var(--accent); }
.sc-test-price { font-family: var(--mono); font-size: 0.86em; white-space: nowrap; unicode-bidi: isolate; }
.sc-order { border-color: var(--accent); }
.sc-ack { margin: 8px 0; padding: 8px 10px; border: 2px solid var(--accent); border-radius: 10px; background: rgba(60, 40, 0, 0.45); font-weight: 600; }
.sc-ack input { width: 22px; height: 22px; flex: none; }
.sc-balance { font-size: 1.3rem; margin: 2px 0; }
.sc-receipt { font-weight: 600; }

/* Medals: a withheld medal is drawn hollow and struck through, never as an award. */
.medal.withheld { background: transparent; color: var(--text); border: 2px dashed currentColor; text-decoration: line-through; }
.medal.gold.withheld { color: #e8c547; }
.medal.silver.withheld { color: #c9ced6; }
.medal.bronze.withheld { color: #d9a070; }
.withheld-note { color: var(--muted); }

@media (max-width: 760px) {
  .screens { padding: 30px 6px 6px; }
  .screens-card { padding: 12px; max-height: calc(100dvh - 36px); }
  .screens-head h2 { font-size: 1.15rem; }
  .sc-tab { flex: 1 1 40%; padding: 0.5em 0.6em; }
  .sc-panel { padding: 10px; }
  .sc-table { font-size: 0.78rem; }
  .sc-table th, .sc-table td { padding: 4px 3px; }
  .sc-attrs { grid-template-columns: 1fr; }
}

/* ---------- Account and OmniAlera ID sign-in (passport P1, DEC-451) ----------
   Same card as the server screens; glass edge light comes from .menu-card in glass.css. Logical properties only. */
.account-card { width: min(980px, 100%); }
.acc-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; margin-block-start: 6px; }
.acc-grid > :first-child { grid-row: span 2; }
.acc-card { position: relative; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.035); min-inline-size: 0; }
.acc-card h3 { margin-block: 0 8px; font-size: 1.08rem; }
.acc-card h4 { margin-block: 14px 4px; font-size: 0.95rem; }
.acc-card p { margin-block: 6px; line-height: 1.45; }
.acc-hero { border-color: rgba(62, 230, 212, 0.45); background: linear-gradient(160deg, rgba(62, 230, 212, 0.10), rgba(124, 200, 255, 0.05) 45%, rgba(255, 255, 255, 0.02)); }
.acc-badge { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; margin-block-end: 8px; border-radius: 14px; font-weight: 800; letter-spacing: 0.04em;
  color: #04131a; background-color: #ffc23d; background-image: linear-gradient(140deg, var(--ws-aqua-300, #8ff5ea), var(--ws-gold-400, #ffc23d)); box-shadow: 0 6px 18px rgba(62, 230, 212, 0.25); }
.acc-hero .actions { margin-block: 12px 4px; }
.acc-test { display: inline-block; padding: 4px 10px; border-radius: 8px; border: 1px dashed #8a6a20; background: rgba(60, 40, 0, 0.35); color: #ffe2a0; }
.acc-provider { margin-block: 0 10px; font-weight: 700; }
.acc-list { margin: 4px 0; padding-inline-start: 1.2em; line-height: 1.5; }
.acc-never { font-weight: 700; color: var(--teal); }
.acc-dl { display: grid; gap: 6px; margin: 10px 0; }
.acc-row { display: grid; grid-template-columns: minmax(7em, 34%) minmax(0, 1fr); gap: 10px; align-items: baseline; padding-block: 4px; border-block-end: 1px solid var(--line); }
.acc-row dt { color: var(--muted); font-size: 0.88rem; }
.acc-row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.acc-chip { display: inline-block; font-size: 0.8rem; font-weight: 800; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line); background: #17222d; unicode-bidi: isolate; }
.acc-share { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.acc-share li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.acc-share li.on .acc-chip { border-color: var(--teal); color: #c9fff7; }
.acc-share li.off .acc-chip { color: var(--muted); }
button.danger { border-color: var(--danger); color: #ffd6d6; background: rgba(255, 92, 92, 0.10); }
button.danger:hover { background: rgba(255, 92, 92, 0.22); }
.acc-danger { border-color: var(--danger); background: rgba(70, 10, 10, 0.35); max-inline-size: 640px; }
.acc-danger input { inline-size: 100%; font: inherit; }
/* No letter-spacing: it breaks cursive joining in Arabic (and other joined scripts). */
.acc-danger .actions { margin-block-start: 12px; }
#account-body .actions { display: flex; flex-wrap: wrap; gap: 8px; }
#account-body .actions button { min-block-size: 44px; }
@media (max-width: 760px) {
  .acc-grid { grid-template-columns: minmax(0, 1fr); }
  .acc-grid > :first-child { grid-row: auto; }
  .acc-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  #account-body .actions button { flex: 1 1 100%; }
}
:root.hc .acc-card, :root.hc .acc-hero, :root.hc .acc-danger { background: #000; border: 2px solid #fff; }
:root.hc .acc-chip, :root.hc .acc-share li { background: #000; border: 1px solid #fff; color: #fff; }
.hc .acc-badge { background: #ffd400; color: #000; box-shadow: none; }
.hc .acc-test { background: #000; border: 2px solid #ffd400; color: #ffd400; }
.hc button.danger { background: #000; color: #ff7a7a; border: 2px solid #ff7a7a; }
:root[data-glass="solid"]:not(.hc) .acc-card { background: var(--ws-ink-850, #0c1624); }
/* Leave room under the last card for the companion dock (bottom of the screen on phones). */
#account-body { padding-block-end: 96px; }
@media (min-width: 761px) { #account-body { padding-block-end: 64px; } }

/* ---------- Athlete creator and cloud saves (passport P2, DEC-511..DEC-514) ----------
   Preview, form and cloud cards in one grid; one column on phones; logical properties only (RTL). Swatch colours are
   classes (CSP: no inline styles) and keep their colour in forced-colours mode, with a number label beside them. */
.athlete-card { width: min(1120px, 100%); }
.ath-grid { display: grid; gap: 14px; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.4fr); grid-template-areas: "preview form" "cloud form"; grid-template-rows: auto 1fr; align-items: start; margin-block-start: 6px; }
.ath-preview { grid-area: preview; text-align: center; }
.ath-form { grid-area: form; }
.ath-cloud { grid-area: cloud; }
.ath-portrait-box { display: grid; place-items: center; margin-block: 4px 8px; }
.ath-portrait { inline-size: min(220px, 60vw); block-size: auto; aspect-ratio: 200 / 280; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35)); }
.ath-name { font-size: 1.15rem; font-weight: 800; overflow-wrap: anywhere; }
.ath-source { display: inline-block; margin-block: 2px 6px; }
.ath-source.on { border-color: var(--teal); color: #c9fff7; }
.ath-dirty { color: var(--ws-gold-400, #ffc23d); font-weight: 700; }
.ath-set { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px 12px; margin: 0 0 12px; display: grid; gap: 10px; min-inline-size: 0; }
.ath-set legend { padding-inline: 6px; font-weight: 800; }
.ath-set .field { display: grid; gap: 4px; }
.ath-set .field small, .ath-set > small { color: var(--muted); }
.ath-set input[type="text"], .ath-set select { font: inherit; min-block-size: 44px; inline-size: 100%; max-inline-size: 28em; }
.ath-nation input { max-inline-size: 7em; text-transform: uppercase; }
.ath-label { font-weight: 600; display: block; margin-block-end: 4px; }
.ath-row { display: grid; gap: 4px; }
.ath-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.ath-choice { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 4px 14px 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.04); cursor: pointer; }
.ath-choice:has(input:checked) { border-color: var(--teal); background: rgba(62, 230, 212, 0.14); }
.ath-choice input { inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--teal); }
.ath-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.ath-sw-label { position: relative; display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; }
.ath-sw-label.on, .ath-sw-label:has(input:checked) { border-color: #fff; box-shadow: 0 0 0 2px var(--teal); }
.ath-sw-label:has(input:focus-visible) { outline: 3px solid var(--focus, #9fd0ff); outline-offset: 2px; }
.ath-sw-input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ath-sw { display: block; inline-size: 30px; block-size: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.55); forced-color-adjust: none; pointer-events: none; }
.ath-sw-n { position: absolute; inset-block-end: -2px; inset-inline-end: 0; font-size: 0.65rem; font-weight: 800; padding-inline: 3px; border-radius: 6px; background: #0b1520; color: #fff; pointer-events: none; }
.ath-skin-c0 { background: #f6dccb; } .ath-skin-c1 { background: #eccab0; } .ath-skin-c2 { background: #e0b48c; } .ath-skin-c3 { background: #d29e72; } .ath-skin-c4 { background: #c68642; }
.ath-skin-c5 { background: #a8693a; } .ath-skin-c6 { background: #8d5524; } .ath-skin-c7 { background: #6f4325; } .ath-skin-c8 { background: #5a3620; } .ath-skin-c9 { background: #3d2416; }
.ath-hairc-c0 { background: #141110; } .ath-hairc-c1 { background: #2f2119; } .ath-hairc-c2 { background: #4e3221; } .ath-hairc-c3 { background: #7b5a3e; } .ath-hairc-c4 { background: #b8955f; } .ath-hairc-c5 { background: #9a9a9a; }
.ath-range { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ath-range input[type="range"] { inline-size: min(260px, 100%); min-block-size: 44px; accent-color: var(--teal); }
.ath-out { font-weight: 700; min-inline-size: 7em; }
.ath-cloud-state { font-weight: 700; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.ath-cloud-state::before { content: "● "; }
.ath-cloud-state.synced::before { color: var(--teal); }
.ath-cloud-state.pending::before, .ath-cloud-state.offline::before, .ath-cloud-state.signed-out::before { color: var(--ws-gold-400, #ffc23d); }
.ath-cloud-state.error::before { color: var(--danger); }
#athlete-body .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
#athlete-body .actions button { min-block-size: 44px; }
#athlete-body { padding-block-end: 96px; }
@media (min-width: 761px) { #athlete-body { padding-block-end: 64px; } }
@media (max-width: 760px) {
  .ath-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "preview" "form" "cloud"; grid-template-rows: auto; }
  .ath-portrait { inline-size: min(160px, 45vw); }
  #athlete-body .actions button { flex: 1 1 100%; }
}
:root.hc .ath-set, :root.hc .ath-choice, :root.hc .ath-cloud-state { background: #000; border: 2px solid #fff; color: #fff; }
:root.hc .ath-sw-label.on, :root.hc .ath-sw-label:has(input:checked) { border-color: #ffd400; box-shadow: 0 0 0 2px #ffd400; }
:root.hc .ath-choice:has(input:checked) { border-color: #ffd400; }
:root.hc .ath-sw { border: 2px solid #fff; }
:root.hc .ath-dirty { color: #ffd400; }
:root.hc .ath-portrait { filter: none; }
:root[data-glass="solid"]:not(.hc) .ath-set { background: var(--ws-ink-850, #0c1624); }
@media (forced-colors: active) { .ath-sw-label.on, .ath-sw-label:has(input:checked) { border-color: Highlight; } }

/* ---------- OmniAlera passport (passport P3, DEC-520..DEC-529) ----------
   Identity card and avatar on top, then consent switches, receipts, memories and data. One column on phones; logical
   properties only (RTL). Switches are native buttons with role="switch"; the state is also written as text. */
.passport-card { width: min(1120px, 100%); }
.pp-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.3fr) minmax(200px, 0.7fr); align-items: start; margin-block-start: 6px; }
.pp-scopes, .pp-receipts, .pp-memories, .pp-data { grid-column: 1 / -1; }
@media (min-width: 1000px) { .pp-receipts { grid-column: 1 / 2; } .pp-memories { grid-column: 2 / 3; grid-row: span 2; } .pp-data { grid-column: 1 / 2; } }
.pp-avatar { text-align: center; }
.pp-avatar .ath-portrait { inline-size: min(170px, 50vw); }
.pp-private { font-weight: 600; }
.pp-scope-list, .pp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-scope { padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.pp-scope p { margin-block: 4px 0; }
.pp-scope-main { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pp-scope-name { font-weight: 700; min-inline-size: 0; overflow-wrap: anywhere; }
.pp-switch { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; min-inline-size: 104px; padding: 4px 14px 4px 6px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); cursor: pointer; font: inherit; font-weight: 700; }
.pp-knob { position: relative; inline-size: 44px; block-size: 26px; border-radius: 999px; background: #33414e; flex: none; }
.pp-knob::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: #dfe7ee; transition: inset-inline-start 0.15s ease; }
.pp-switch.on { border-color: var(--teal); }
.pp-switch.on .pp-knob { background: var(--teal); }
.pp-switch.on .pp-knob::after { inset-inline-start: 21px; background: #04131a; }
.pp-switch[disabled] { cursor: default; border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .pp-knob::after { transition: none; } }
:root[data-motion="reduced"] .pp-knob::after, body.reduced .pp-knob::after { transition: none; }
.pp-receipt, .pp-memory { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.pp-receipt-text, .pp-memory-text { font-weight: 600; flex: 1 1 14em; min-inline-size: 0; overflow-wrap: anywhere; }
.pp-receipt.ok .pp-verify { border-color: var(--teal); color: #c9fff7; }
.pp-receipt.ok .pp-verify::before { content: "✓ "; }
.pp-receipt.bad .pp-verify { border-color: var(--danger); color: #ffd6d6; }
.pp-shared { border-color: var(--teal); color: #c9fff7; }
#passport-body .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
#passport-body .actions button, .pp-memory button { min-block-size: 44px; }
#passport-body { padding-block-end: 96px; }
@media (min-width: 761px) { #passport-body { padding-block-end: 64px; } }
@media (max-width: 760px) {
  .pp-grid { grid-template-columns: minmax(0, 1fr); }
  #passport-body .actions button { flex: 1 1 100%; }
}
:root.hc .pp-scope, :root.hc .pp-receipt, :root.hc .pp-memory, :root.hc .pp-switch { background: #000; border: 2px solid #fff; color: #fff; }
:root.hc .pp-switch.on { border-color: #ffd400; }
:root.hc .pp-knob { background: #000; border: 2px solid #fff; }
:root.hc .pp-switch.on .pp-knob { background: #ffd400; }
:root.hc .pp-knob::after { background: #fff; }
:root.hc .pp-switch.on .pp-knob::after { background: #000; }
:root.hc .pp-receipt.ok .pp-verify, :root.hc .pp-shared { color: #ffd400; border-color: #ffd400; }
:root[data-glass="solid"]:not(.hc) .pp-scope, :root[data-glass="solid"]:not(.hc) .pp-receipt, :root[data-glass="solid"]:not(.hc) .pp-memory { background: var(--ws-ink-850, #0c1624); }
@media (forced-colors: active) { .pp-switch.on { border-color: Highlight; } .pp-knob { forced-color-adjust: none; } }