/* Smart Auditor workspace: what the real screens add to the prototype's design system.
   tokens.css, styles.css and auditor.css are the prototype's files, unchanged; everything new
   lives here and uses their tokens. */

[hidden] { display: none !important; }

/* --- shell --------------------------------------------------------------------------------- */
.sa-brand-name { font-size: var(--fs-md); color: var(--ink-strong); }
.sa-acct { display: flex; align-items: center; gap: var(--sp-2); }
.sa-emp small { display: block; font-size: var(--fs-xs); opacity: .8; }
.sa-logout { background: transparent; color: inherit; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); box-shadow: none; }
.sa-logout:hover { border-color: var(--gold-400); color: var(--gold-200); }

/* --- generic helpers ----------------------------------------------------------------------- */
.sa-plain { list-style: none; margin: 0; padding: 0; }
.sa-gap { margin-block-start: var(--sp-3); }
.sa-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.sa-sub-h { font-size: var(--fs-md); margin: var(--sp-1) 0 var(--sp-3); }
.sa-actions-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-block-start: var(--sp-4); }
.sa-inline { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
.sa-tight { --card-pad: 14px 16px; }
.sa-flush { margin: 0 0 var(--sp-2); }
.sa-calc { margin-block-start: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-2); overflow-x: auto; }
.sa-calc small { display: block; color: var(--ink-500); font-size: var(--fs-xs); margin-block-end: 2px; }
.sa-calc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink-700); white-space: pre-wrap; direction: ltr; unicode-bidi: isolate; }
.sa-check-msg { display: block; margin-block-start: 2px; color: var(--ink-500); font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.sa-check-calc { list-style: none; padding-inline-start: 34px; margin-block: -4px 6px; }
.sa-check-calc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink-500); direction: ltr; unicode-bidi: isolate; }
.sa-check-val .btn { margin-inline-start: var(--sp-2); }
.sa-check-label { display: flex; gap: var(--sp-2); align-items: flex-start; cursor: pointer; }
.sa-check-label input { inline-size: auto; flex: 0 0 auto; margin-block-start: 3px; accent-color: var(--gold-600); }
.sa-check-label em { color: var(--err); font-style: normal; }
.sa-checks li[data-act] { cursor: pointer; }

/* --- login --------------------------------------------------------------------------------- */
.sa-login { display: grid; place-items: center; min-block-size: 60vh; }
.sa-login-card { inline-size: min(440px, 100%); display: flex; flex-direction: column; gap: var(--sp-4); }
.sa-login-head { display: flex; gap: var(--sp-3); align-items: center; }
.sa-login-head > svg { inline-size: 36px; block-size: 36px; color: var(--gold-600); flex: 0 0 auto; }
.sa-login-head h1 { margin: 0; font-size: var(--fs-xl); }
.sa-login-head p { margin: 2px 0 0; }
.sa-login-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.sa-login-form .btn { justify-content: center; }
.sa-login-note { margin: 0; font-size: var(--fs-sm); }

/* --- results: "hold" is new (waiting for a deadline) --------------------------------------- */
.rq-badge.ai-hold { background: var(--st-paused-bg); color: var(--st-paused-fg); }
.rq-badge.ai-hold .sc-dot { background: var(--st-paused); }
.sa-pill--paused { background: var(--st-paused-bg); color: var(--st-paused-fg); border-color: transparent; font-style: normal; }
.sa-hold-count { color: var(--st-paused-fg); font-weight: var(--fw-semibold); }
.sa-hold-count svg { inline-size: 14px; block-size: 14px; }

/* --- pipeline sub-steps -------------------------------------------------------------------- */
.sa-subs { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sa-sub { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--sp-2); align-items: start; font-size: var(--fs-sm); }
.sa-sub .sa-ico { inline-size: 20px; block-size: 20px; }
.sa-sub .sa-ico svg { inline-size: 12px; block-size: 12px; }
.sa-sub b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-700); }
.sa-sub small { display: block; color: var(--ink-500); font-size: var(--fs-xs); margin-block-start: 1px; }
.sa-sub.is-todo b { color: var(--ink-400); font-weight: var(--fw-medium); }
.sa-spin svg { animation: sa-spin 1.2s linear infinite; }
.sa-wait { color: var(--st-paused-fg); }
@keyframes sa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sa-spin svg { animation: none; } }
.sa-done-row { gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin-block-start: var(--sp-3); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--line-2); }

/* --- report -------------------------------------------------------------------------------- */
.sa-brief-reco { display: flex; flex-wrap: wrap; gap: 6px var(--sp-2); align-items: center; margin: var(--sp-2) 0; }
.sa-reco-items { margin: var(--sp-2) 0 0; padding-inline-start: 20px; color: var(--ink-700); font-size: var(--fs-sm); }
/* ours (D-065): for the employee besides the result, under the recommendation: the administration's note
   and the reading model's notes (marked as not counting), each with its document, page and line */
.sa-dec-notes { display: grid; gap: 10px; margin-block-start: 14px; }
.sa-dec-guidance b { font-weight: 800; }
.sa-dec-obs { padding: 12px 14px; border: 1px dashed var(--ai-line, var(--line)); border-radius: var(--r-sm); background: var(--surface); }
.sa-dec-obs h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; font-size: var(--fs-sm); color: var(--ink-strong); }
.sa-dec-obs h4 svg { inline-size: 16px; block-size: 16px; color: var(--ai-primary, currentColor); }
.sa-dec-obs h4 small { font-weight: 600; color: var(--ink-500); font-size: var(--fs-xs); }
.sa-dec-obs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sa-dec-obs li { display: grid; gap: 2px; padding-block-start: 8px; border-block-start: 1px solid var(--line-2); }
.sa-dec-obs li:first-child { padding-block-start: 0; border: 0; }
.sa-dec-obs li > b { font-weight: 600; color: var(--ink-strong); }
.sa-dec-obs q { color: var(--ink-700); font-size: var(--fs-sm); quotes: "«" "»"; }
.sa-dec-obs small { color: var(--ink-500); font-size: var(--fs-xs); }
.sa-dec-obs small .sa-link { font: inherit; padding: 0; border: 0; background: none; cursor: pointer; }
.sa-decision.is-hold { --dec-accent: var(--st-paused); }

.sa-period { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); background: var(--surface); }
.sa-period.is-open { border-color: color-mix(in srgb, var(--st-paused) 45%, transparent); background: var(--st-paused-bg); }
.sa-period-eq { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.sa-period-eq > div { display: flex; flex-direction: column; gap: 2px; min-inline-size: 110px; }
.sa-period-eq small { color: var(--ink-500); font-size: var(--fs-xs); }
.sa-period-eq b { font-size: var(--fs-lg); color: var(--ink-strong); }
.sa-period-eq > span { color: var(--ink-400); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.sa-period-now { margin: var(--sp-3) 0 var(--sp-1); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sa-period-why { margin: 0; font-size: var(--fs-sm); }

.sa-records { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.sa-records li { display: flex; gap: 6px; align-items: center; }
.sa-records li.is-active { color: var(--ai-reject-fg); font-weight: var(--fw-semibold); }
.sa-records .sa-ico { inline-size: 18px; block-size: 18px; }
.sa-records .sa-ico svg { inline-size: 10px; block-size: 10px; }

/* --- evidence: page image with the highlighted line ---------------------------------------- */
.sa-pageimg { margin: var(--sp-3) 0 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.sa-pageimg-h { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--sp-2) var(--sp-3); border-block-end: 1px solid var(--line-2); font-size: var(--fs-sm); color: var(--ink-500); background: var(--surface); }
.sa-pageimg-h b { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-700); min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-pageimg-h svg { inline-size: 16px; block-size: 16px; flex: 0 0 auto; }
.sa-pageimg-frame { direction: ltr; max-block-size: 520px; overflow: auto; }
.sa-pageimg-sheet { position: relative; }
.sa-pageimg.is-big .sa-pageimg-frame { max-block-size: 72vh; }
.sa-pageimg-frame img { display: block; inline-size: 100%; block-size: auto; background: var(--surface); }
.sa-hlbox { position: absolute; border: 2px solid var(--ok); background: color-mix(in srgb, var(--ok) 18%, transparent); border-radius: 3px; pointer-events: none; }
.sa-hlbox.is-bad { border-color: var(--err); background: color-mix(in srgb, var(--err) 16%, transparent); }
.sa-quote { margin-block-start: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-inline-start: 3px solid var(--gold-400); background: var(--gold-50); border-radius: var(--r-sm); }
.sa-quote small { display: block; color: var(--ink-500); font-size: var(--fs-xs); margin-block-end: 2px; }
.sa-quote q { quotes: none; color: var(--ink-strong); font-size: var(--fs-sm); }
.sa-ev-msg { margin: var(--sp-2) 0 0; color: var(--ink-700); font-size: var(--fs-sm); }
.sa-evlinks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sa-evlinks .sa-link { display: flex; gap: var(--sp-2); align-items: center; inline-size: 100%; text-align: start; font-size: var(--fs-sm); padding: 4px 0; }
.sa-evlinks .sa-link small { margin-inline-start: auto; color: var(--ink-500); white-space: nowrap; }
.sa-evlinks .sa-link.is-current { font-weight: var(--fw-bold); }
.sa-evlinks .sa-ico { inline-size: 18px; block-size: 18px; flex: 0 0 auto; }
.sa-evlinks .sa-ico svg { inline-size: 10px; block-size: 10px; }
.sa-ws-side .sa-sources { grid-template-columns: 1fr; }
.sa-ev-pagebar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-2); flex-wrap: wrap; }

@media print {
  .sa-bar, .sa-decision-bar, .sa-ws-side, .sa-hero-actions, .sa-dec-btns { display: none !important; }
  .sa-acc-item { break-inside: avoid; }
}

/* --- demo intake portal (#/apply) ---------------------------------------------------------- */
.sa-apply { display: flex; flex-direction: column; gap: var(--sp-4); }
.sa-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
@media (max-width: 720px) { .sa-grid2 { grid-template-columns: 1fr; } }
.sa-field small { font-size: var(--fs-xs); }
.sa-choice { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-block-end: var(--sp-3); }
.sa-choice label { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); cursor: pointer; font-weight: var(--fw-semibold); color: var(--ink-700); }
.sa-choice label:has(input:checked) { border-color: var(--gold-500); background: var(--gold-50); color: var(--gold-800); }
.sa-choice input { accent-color: var(--gold-600); }
.sa-choice svg { inline-size: 18px; block-size: 18px; }
.sa-uploads { display: flex; flex-direction: column; gap: var(--sp-2); }
.sa-upload { display: grid; grid-template-columns: 32px 1fr minmax(0, 280px); gap: var(--sp-3); align-items: center; padding: var(--sp-3); border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.sa-upload b { display: block; color: var(--ink-strong); }
.sa-upload input[type=file] { font: inherit; font-size: var(--fs-sm); max-inline-size: 100%; }
.sa-upload-n { inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-50); color: var(--gold-700); font-weight: var(--fw-bold); }
.sa-upload-n svg { inline-size: 16px; block-size: 16px; }
@media (max-width: 720px) { .sa-upload { grid-template-columns: 32px 1fr; } .sa-upload input[type=file] { grid-column: 1 / -1; } }
.sa-order { margin: 4px 0 0; padding-inline-start: 20px; font-size: var(--fs-sm); color: var(--ink-700); }
.sa-stepper { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.sa-stepper li { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-500); font-weight: var(--fw-semibold); }
.sa-stepper li i { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; border: 2px solid var(--line); background: var(--surface); }
.sa-stepper li i svg { inline-size: 14px; block-size: 14px; }
.sa-stepper li.is-active { color: var(--ink-strong); }
.sa-stepper li.is-active i { border-color: var(--gold-500); color: var(--gold-700); background: var(--gold-50); }
.sa-stepper li.is-done i { border-color: var(--ok); background: var(--ok); color: var(--surface); }
.sa-app-state.st-done .rd-ac-ico { background: var(--ok-bg); color: var(--st-done-fg); }
.sa-app-state.st-failed .rd-ac-ico { background: var(--err-bg); color: var(--err); }
.sa-app-state.st-progress .rd-ac-ico, .sa-app-state.st-review .rd-ac-ico { background: var(--info-bg); color: var(--info); }

/* --- live queue and the audit animation ---------------------------------------------------- */
.sa-row.is-new { animation: sa-new 2.4s var(--ease) 1; background: var(--gold-50); }
@keyframes sa-new { from { background: var(--gold-100); } to { background: var(--gold-50); } }
@media (prefers-reduced-motion: reduce) { .sa-row.is-new { animation: none; } }
.sa-skip { margin: var(--sp-2) 0 0; text-align: end; font-size: var(--fs-sm); }
.sa-sub.is-active b { color: var(--ink-strong); }

/* --- model document reader (runner) -------------------------------------------------------- */
.sa-runner-chip { border: 0; font: inherit; cursor: pointer; }
.sa-runner-chip em { font-style: normal; }
.sa-runner-chip[data-state="paused"], .sa-runner-chip[data-state="offline"], .sa-runner-chip[data-state="not_logged_in"] { filter: saturate(.35); }
.sa-runner-dialog .sa-dialog-card { max-inline-size: 560px; }
.sa-runner-state { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); margin-block-end: var(--sp-3); }
.sa-runner-state small { color: var(--ink-500); }
.sa-runner-dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--ink-400); flex: 0 0 auto; }
.sa-runner-state.is-on .sa-runner-dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); }
.sa-runner-state.is-off .sa-runner-dot { background: var(--err); }
.sa-runner-state.is-warn .sa-runner-dot { background: var(--warn); }

/* --- queue: the Smart Auditor's result and the employee's decision --------------------------- */
.sa-two-results { gap: 6px; }
.sa-result-line { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sa-result-line small { min-inline-size: 72px; color: var(--ink-500); font-size: var(--fs-xs); }
.sa-result-line em { font-style: normal; font-size: var(--fs-xs); color: var(--ink-500); }
.sa-result-line .rq-badge { font-size: var(--fs-xs); }

/* --- technical view (JSON) ------------------------------------------------------------------- */
.sa-trace { margin-block-start: var(--sp-4); }
.sa-trace > summary { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; list-style: none; flex-wrap: wrap; }
.sa-trace > summary::-webkit-details-marker { display: none; }
.sa-trace > summary svg { inline-size: 18px; block-size: 18px; color: var(--ai-accent); }
.sa-trace > summary > svg:last-child { margin-inline-start: auto; color: var(--ink-400); }
.sa-trace[open] > summary > svg:last-child { transform: rotate(180deg); }
.sa-trace-body { margin-block-start: var(--sp-3); }
.sa-trace-body h4 { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-md); }
.sa-trace-body h4 svg { inline-size: 16px; block-size: 16px; color: var(--ai-accent); }
.sa-trace-item { border: 1px solid var(--line-2); border-radius: var(--r-sm); margin-block-end: 6px; background: var(--surface); }
.sa-trace-item > summary { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 10px; cursor: pointer; flex-wrap: wrap; font-size: var(--fs-sm); }
.sa-trace-item > summary small { margin-inline-start: auto; color: var(--ink-500); }
.sa-trace-item .sa-ico { inline-size: 18px; block-size: 18px; }
.sa-trace-item .sa-ico svg { inline-size: 10px; block-size: 10px; }
.sa-json { margin: 0; padding: var(--sp-3); max-block-size: 360px; overflow: auto; background: var(--char-900); color: var(--gold-100);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55; border-radius: var(--r-sm); text-align: left; white-space: pre; }
.sa-trace-item .sa-json { border-radius: 0 0 var(--r-sm) var(--r-sm); }

/* --- evidence panel: the page image opens the full viewer ----------------------------------- */
.sa-pageimg-frame[data-act="evidence"] { cursor: zoom-in; }
.sa-pageimg-frame[data-act="evidence"]:hover img { opacity: .9; }

/* --- administration (D-047) ---------------------------------------------------------------- */
.sa-adm-tabs { margin-block-end: var(--sp-4); inline-size: fit-content; }
.sa-adm-tabs .sa-tab { text-decoration: none; }
.sa-adm-tabs .sa-tab svg { inline-size: 16px; block-size: 16px; }
.sa-adm-form { display: grid; gap: var(--sp-4); }
.sa-adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3) var(--sp-4); align-items: start; }
.sa-adm-grid > .is-wide, .sa-adm-grid > .sa-field.is-wide { grid-column: 1 / -1; }
.sa-adm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
/* A name in two languages takes the whole row: long Arabic names stay readable. */
.sa-adm-grid > .sa-field:has(> .sa-adm-pair) { grid-column: 1 / -1; }
.sa-adm-search { display: flex; align-items: center; gap: 6px; flex: 1 1 220px; max-inline-size: 420px; min-block-size: 38px; padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-500); }
.sa-adm-search svg { inline-size: 16px; block-size: 16px; flex: none; }
.sa-adm-search input { flex: 1; min-inline-size: 0; border: 0; background: transparent; outline: none; font: inherit; color: var(--ink-strong); padding: 6px 0; }
.sa-adm-search:focus-within { border-color: var(--gold-500); }
.sa-adm-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 400 !important; min-block-size: 42px; }
.sa-adm-check input { inline-size: 18px !important; block-size: 18px; accent-color: var(--char-900); }
.sa-adm-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-adm-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; font-size: var(--fs-sm); font-weight: 400 !important; cursor: pointer; background: var(--surface); }
.sa-adm-chip input { inline-size: 15px !important; block-size: 15px; accent-color: var(--char-900); }
.sa-adm-chip.is-on { border-color: var(--char-900); background: var(--gold-50); }
.sa-adm-item { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); padding-inline-end: 44px; margin-block-end: var(--sp-3); background: var(--surface-2); }
.sa-adm-del { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; inline-size: 28px; block-size: 28px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--err); display: grid; place-items: center; cursor: pointer; }
.sa-adm-del svg { inline-size: 14px; block-size: 14px; }
.sa-adm-subh { margin-block: var(--sp-4) var(--sp-2); }
.sa-adm-subh h3 { margin: 0; font-size: var(--fs-md); }
.sa-adm-list { display: grid; gap: 6px; }
.sa-adm-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); text-decoration: none; color: inherit; background: var(--surface); flex-wrap: wrap; }
.sa-adm-row:hover { border-color: var(--gold-400, var(--line)); background: var(--gold-50); }
.sa-adm-row.is-current { border-color: var(--char-900); box-shadow: inset 3px 0 0 var(--char-900); }
.sa-adm-row-main { display: grid; gap: 2px; min-inline-size: 0; }
.sa-adm-row-main small { color: var(--ink-500); font-size: var(--fs-xs); }
.sa-adm-row-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.sa-adm-row > svg { inline-size: 16px; block-size: 16px; color: var(--ink-400); }
.sa-adm-split { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: var(--sp-4); align-items: start; }
.sa-adm-side { position: sticky; inset-block-start: 12px; max-block-size: calc(100vh - 24px); overflow: auto; }
/* the type's criteria and the library's, side by side (admin.js): each list scrolls under its own search */
.sa-adm-dual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
.sa-adm-pane { display: grid; gap: 10px; min-inline-size: 0; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); }
.sa-adm-pane-h { display: flex; align-items: center; gap: 8px; min-block-size: 36px; }
.sa-adm-pane-h .btn { margin-inline-start: auto; }
.sa-adm-pane .sa-adm-search { max-inline-size: none; background: var(--surface); }
.sa-adm-pane-list { list-style: none; margin: 0; padding: 0 0 0 2px; display: grid; gap: 6px; align-content: start; max-block-size: 560px; overflow: auto; }
.sa-adm-pick { inline-size: 100%; display: grid; grid-template-columns: 1fr 28px; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.sa-adm-pick > span { display: grid; gap: 2px; min-inline-size: 0; }
.sa-adm-pick small { color: var(--ink-500); font-size: var(--fs-xs); }
.sa-adm-pick > i { inline-size: 28px; block-size: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-style: normal; color: var(--ink-500); }
.sa-adm-pick > i svg { inline-size: 14px; block-size: 14px; }
.sa-adm-pick:hover, .sa-adm-pick:focus-visible { border-color: var(--char-900); }
.sa-adm-pick:hover > i, .sa-adm-pick:focus-visible > i { border-color: var(--char-900); color: var(--char-900); }
.sa-adm-pane.is-on .sa-adm-pick { border-color: var(--gold-200); background: var(--gold-50); }
@media (max-width: 900px) { .sa-adm-dual { grid-template-columns: 1fr; } }
.sa-adm-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); position: sticky; inset-block-end: 8px; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md, 12px); box-shadow: 0 6px 24px rgba(26, 23, 18, .12); z-index: 2; }
.sa-adm-status { display: flex; gap: 6px; flex-wrap: wrap; }
.sa-adm-problems { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 2px; }
.sa-adm-table { overflow-x: auto; }
.sa-adm-table table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.sa-adm-table th, .sa-adm-table td { text-align: start; padding: 8px 10px; border-block-start: 1px solid var(--line-2); vertical-align: middle; }
.sa-adm-table th { color: var(--ink-500); font-weight: 600; border-block-start: 0; }
.sa-adm-check-ok { border-color: var(--ok); }
.sa-adm-check-ok ul { margin: 4px 0 0; padding-inline-start: 18px; }
.sa-adm-empty { padding: var(--sp-3) 0; }
.sa-seg-radio { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-end: var(--sp-3); }
.sa-seg-radio label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
@media (max-width: 860px) { .sa-adm-split { grid-template-columns: 1fr; } .sa-adm-side { position: static; max-block-size: none; } .sa-adm-pair { grid-template-columns: 1fr; } }
form[data-submit-form] { display: grid; gap: var(--sp-4); }

/* --- settings assistant (D-048) ------------------------------------------------------------ */
.sa-asst { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(440px, 100vw); z-index: calc(var(--z-modal, 300) + 10); display: flex; flex-direction: column; background: var(--surface); border-inline-start: 1px solid var(--line); box-shadow: -12px 0 36px rgba(26, 23, 18, .16); }
.sa-asst-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--line-2); background: var(--char-900); color: #fff; }
.sa-asst-h b { display: inline-flex; align-items: center; gap: 8px; }
.sa-asst-h svg { inline-size: 18px; block-size: 18px; }
.sa-asst-icon { inline-size: 32px; block-size: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; display: inline-grid; place-items: center; cursor: pointer; margin-inline-start: 6px; }
.sa-asst-icon svg { inline-size: 15px; block-size: 15px; }
.sa-asst-list { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); background: var(--surface-2); }
.sa-asst-intro { color: var(--ink-500); font-size: var(--fs-sm); line-height: 1.7; }
.sa-asst-msg { max-inline-size: 92%; padding: 10px 14px; border-radius: 14px; font-size: var(--fs-sm); line-height: 1.7; }
.sa-asst-msg.is-user { align-self: flex-start; background: var(--char-900); color: #fff; border-end-start-radius: 4px; }
.sa-asst-msg.is-user small { display: flex; align-items: center; gap: 6px; margin-block-start: 6px; opacity: .8; font-size: var(--fs-xs); }
.sa-asst-msg.is-user small svg { inline-size: 14px; block-size: 14px; }
.sa-asst-msg.is-ai { align-self: flex-end; background: var(--surface); border: 1px solid var(--line-2); border-end-end-radius: 4px; }
.sa-asst-msg.is-thinking, .sa-asst-msg.is-failed { display: flex; align-items: center; gap: 8px; color: var(--ink-500); }
.sa-asst-msg.is-failed { color: var(--err); }
.sa-asst-msg.is-failed small { display: block; color: var(--ink-500); font-size: var(--fs-xs); }
.sa-asst-msg svg { inline-size: 16px; block-size: 16px; flex: 0 0 auto; }
.sa-asst-card { align-self: stretch; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 12px 14px; display: grid; gap: 8px; font-size: var(--fs-sm); }
.sa-asst-card.is-pending { border-color: var(--gold-500); box-shadow: inset 3px 0 0 var(--gold-500); }
.sa-asst-card.is-applied { border-color: var(--ok); }
.sa-asst-card.is-invalid { border-color: var(--err); }
.sa-asst-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 700; }
.sa-asst-card p { margin: 0; }
.sa-asst-detail { display: grid; gap: 4px; }
.sa-asst-detail p { color: var(--ink-500); font-size: var(--fs-xs); }
.sa-asst-detail ul, .sa-asst-sub ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 2px; font-size: var(--fs-xs); }
.sa-asst-detail table { font-size: var(--fs-xs); }
.sa-asst-sub { color: var(--err); }
.sa-asst-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-asst-form { display: grid; gap: 8px; padding: var(--sp-3) var(--sp-4); border-block-start: 1px solid var(--line-2); }
.sa-asst-form textarea { inline-size: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; }
.sa-asst-send { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sa-asst-attach { display: inline-flex; align-items: center; gap: 4px; min-inline-size: 0; max-inline-size: 70%; }
.sa-asst-file { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink-700); font-size: var(--fs-sm); min-inline-size: 0; overflow: hidden; }
.sa-asst-unfile { flex: none; inline-size: 26px; block-size: 26px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-500); cursor: pointer; }
.sa-asst-unfile svg { inline-size: 12px; block-size: 12px; }
.sa-asst-unfile:hover, .sa-asst-unfile:focus-visible { border-color: var(--char-900); color: var(--char-900); }
.sa-asst-file span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-asst-file svg { inline-size: 16px; block-size: 16px; flex: 0 0 auto; }
.sa-asst-file input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }

/* --- libraries: list and details (deactivate, delete) ------------------------------------ */
.sa-adm-listh { flex-wrap: wrap; gap: var(--sp-3); }
.sa-adm-listh .sa-tabs { inline-size: fit-content; }
.sa-adm-listh .sa-tab { text-decoration: none; min-block-size: 34px; padding: 5px 12px; }
.sa-adm-row.is-off { opacity: .72; background: var(--surface-2); }
.sa-adm-life { display: grid; gap: var(--sp-3); margin-block-end: var(--sp-4); }
.sa-adm-used { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 2px; }
.sa-adm-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sa-adm-acts .btn[disabled] { opacity: .45; cursor: not-allowed; }
.sa-asst.is-wide { inset: 5vh 6vw; inline-size: auto; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(26, 23, 18, .35); }
.sa-asst.is-wide .sa-asst-msg { max-inline-size: 75%; }
.sa-asst.is-wide .sa-asst-card { max-inline-size: 900px; }
.sa-asst-shade { position: fixed; inset: 0; z-index: calc(var(--z-modal, 300) + 5); background: rgba(26, 23, 18, .45); }
@media (max-width: 720px) { .sa-asst.is-wide { inset: 0; border-radius: 0; } }
.sa-asst-copy { display: inline-flex; align-items: center; gap: 5px; margin-block-start: 8px; padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-500); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.sa-asst-copy:hover { color: var(--ink-900); border-color: var(--gold-500); }
.sa-asst-copy svg { inline-size: 13px; block-size: 13px; }

/* --- justice system simulator (D-051) ---------------------------------------------------- */
.sa-sim { display: grid; gap: var(--sp-4); align-items: start; padding-block: var(--sp-4); }
@media (min-width: 1100px) { .sa-sim { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.sa-sim-col { display: grid; gap: var(--sp-4); min-inline-size: 0; }
.sa-sim-col > .eje-card, .sa-sim-col > .sa-note { margin: 0; }
.sa-sim-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
.sa-sim-docs-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.sa-sim-docs-h h2 { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; font: inherit; }
.sa-sim-pick { display: flex; gap: var(--sp-2); align-items: center; }
.sa-sim-pick input[readonly] { flex: 1; min-inline-size: 0; }
.sa-sim-pick label.btn { cursor: pointer; white-space: nowrap; }
.sa-sim-row-acts { white-space: nowrap; }
.sa-sim-reco { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-block: var(--sp-3); }
.sa-sim-reco .sa-pill svg, .sa-sim .sa-pill svg { inline-size: 13px; block-size: 13px; }
.sa-sim code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; unicode-bidi: isolate; }
.sa-sim .rd-card-h code { margin-inline-start: auto; color: var(--ink-500); font-weight: 400; }
.sa-sim .sa-trace-item .sa-json { max-block-size: 280px; margin-block-start: 2px; }
.sa-sim .sa-note ul { margin: 6px 0 0; padding-inline-start: 18px; }
.sa-sim-party { padding: var(--sp-3); border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); margin-block-end: var(--sp-3); }
.sa-sim-party-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-block-end: var(--sp-2); }

/* --- API log (D-055) ------------------------------------------------------------------------ */
.sa-apilog-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-500); text-decoration: none; font-size: var(--fs-xs); }
.sa-apilog-link:hover { color: var(--gold-700); text-decoration: underline; }
.sa-apilog-link svg { inline-size: 13px; block-size: 13px; }
.sa-apilog { display: grid; gap: var(--sp-3); padding-block: var(--sp-4); }
.sa-apilog-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.sa-apilog-bar .btn { margin-inline-start: auto; }
.sa-apilog-call { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.sa-apilog-call > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: 10px 14px; cursor: pointer; }
.sa-apilog-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; overflow-wrap: anywhere; unicode-bidi: isolate; }
.sa-apilog-method { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sa-apilog-time { margin-inline-start: auto; color: var(--ink-500); font-size: var(--fs-sm); }
.sa-apilog-body { display: grid; gap: var(--sp-2); padding: 0 14px 14px; min-inline-size: 0; }
.sa-apilog-body h4 { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }
.sa-apilog-body .sa-json { max-block-size: 420px; }

/* ==========================================================================
   SMART AUDITOR · DEMO (#/demo, D-062) — from the UI team's design (2026-10-25, Option B)
   Built from the Smart Auditor screens' own components (sa-head, sa-page,
   sa-card, sa-two, sa-pipe/sa-step, sa-node, sa-kv, sa-payload, sa-explain,
   sa-note, sa-tabs, rq-badge, sa-pill, btn). Only what the demo adds is
   defined here, prefixed .sa-demo-, so the dev team can lift it into app.css.
   Type: h1 24 · card h2 16 · body 14 · meta 12. Rhythm: page gap 20, column
   gap 18, card padding 20, card header 14 below.
   ========================================================================== */
.sa-head .sa-hero-sub { max-inline-size: 72ch; }
.sa-hero-title .ai-tag { font-size: 14px; }
.sa-demo-tabs .sa-tab svg { inline-size: 16px; block-size: 16px; }
.sa-demo-tabs .sa-tab.is-active svg { color: var(--gold-400); }

/* --- event landing (#/demo): a full-height hero on the EJE dark band, the figure as the centrepiece --- */
.sa-demo-land { display: flex; flex-direction: column; min-block-size: 100%; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* the demo bar never wraps: a second row would push the landing out of its stage */
.sa-demo-land-top { display: flex; align-items: center; gap: 12px 16px; flex-wrap: nowrap; padding-block: 14px; }
.sa-demo-land-top, .sa-demo-cine-top { max-inline-size: 1520px; }
.sa-demo-land-top > *, .sa-demo-cine-top > * { flex: 0 0 auto; white-space: nowrap; } .sa-demo-land-top .sa-tab, .sa-demo-cine-top .sa-tab, .sa-demo-land-top .sa-pill, .sa-demo-cine-top .sa-pill { white-space: nowrap; }
.sa-demo-land-top .ai-tag { font-size: 15px; }
.sa-demo-land-top .sa-demo-tabs { margin-inline-start: auto; }
.sa-demo-land-hero { position: relative; overflow: hidden; flex: 1 1 auto; display: grid; align-items: center; background: var(--surface); color: var(--ink-900); border-block-end: 1px solid var(--line); }
.sa-demo-land-fig::before { content: ""; position: absolute; inset: 6% 4%; z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, var(--gold-50), rgba(251,246,234,0)); }
.sa-demo-land-hero > .container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 46%); gap: 64px; align-items: center; padding-block: 28.1px; }
.sa-demo-land-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--gold-700); margin-block-end: 15.1px; }
.sa-demo-land h1 { font-size: 72px; line-height: 1.15; margin: 0 0 16.2px; color: var(--ink-900); letter-spacing: -.5px; }
.sa-demo-land h1 em { font-style: normal; color: var(--gold-700); }
.sa-demo-land-lead { font-size: 20px; line-height: 1.65; color: var(--ink-700); max-inline-size: 40ch; margin: 0 0 23.8px; }
/* Cairo's Arabic runs larger than its Latin: the Arabic lead and points step down one size */
[lang="ar"] .sa-demo-land-lead { font-size: 18px; line-height: 1.75; } [lang="ar"] .sa-demo-cine-lead { font-size: 18px; } [lang="ar"] .sa-demo-land-proof { font-size: 15px; }
[lang="ar"] .sa-demo-land-door b, [lang="ar"] .sa-demo-cine-door b { font-size: min(22px, 9cqw); } [lang="ar"] .sa-demo-land-door > div > span, [lang="ar"] .sa-demo-cine-door > div > span { font-size: 16px; }
.sa-demo-land-proofs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; margin-block-end: 25.9px; }
.sa-demo-land-proof { display: flex; align-items: center; gap: 10px; min-block-size: 32px; padding: 0 2px; color: var(--ink-900); font-size: 16px; font-weight: 700; }
.sa-demo-land-proof svg { inline-size: 18px; block-size: 18px; color: var(--gold-700); flex: 0 0 auto; }
.sa-demo-land-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sa-demo-land-cta .btn { min-block-size: 64px; font-size: 18px; padding-inline: 26px; gap: 10px; }
.sa-demo-land-cta .btn svg { inline-size: 20px; block-size: 20px; }
.sa-demo-land-cta .btn:hover { transform: none; }
.sa-demo-pulse { position: relative; }
.sa-demo-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--gold-400); animation: sa-demo-pulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes sa-demo-pulse { 0% { opacity: .7; transform: scale(.98); } 100% { opacity: 0; transform: scale(1.08); } }
.sa-demo-land-side { min-inline-size: 0; }
.sa-demo-land-side .sa-demo-scen { margin-block-start: 10px; }
.sa-demo-land-side .sa-demo-land-fig .sa-loupe-stage { inline-size: min(100%, max(320px, calc((1080px - 620px) * 1.2))); } .sa-demo-land-side .sa-demo-land-fig { padding: 20px 0 40px; }
/* the text block sits centred in the hero's height; the figure column fills it */
.sa-demo-land-hero > .container { align-items: center; }
.sa-demo-land-fig { position: relative; padding: 36px 0 44px; }
.sa-demo-land-fig > * { position: relative; z-index: 1; }
.sa-demo-land-fig .sa-loupe-stage { margin: 0 auto; inline-size: min(100%, max(320px, calc((1080px - 440px) * 1.25))); cursor: default; --hairline-plate: #fff; --hairline-hi: var(--ai-primary); --hairline-edge: #9a9078; --hairline-mid: #d9d2c2; --hairline-lo: #e3ddd0; }
/* colour by part (classes set in _hairline/loupe.js): cream desk pad, white page, indigo header, gold chips, red missing slot, brass loupe */
.sa-demo-land-fig .p-pad > .sil { fill: var(--gold-50); stroke: var(--gold-400); } .sa-demo-land-fig .p-pad > .lo { stroke: var(--gold-200); }
.sa-demo-land-fig .p-head > .sil { fill: var(--ai-surface-2); stroke: var(--ai-primary); } .sa-demo-land-fig .p-head > .lo { stroke: var(--ai-line); }
.sa-demo-land-fig .p-chip > .sil { fill: var(--gold-100); stroke: var(--gold-600); } .sa-demo-land-fig .p-chip > .lo { stroke: var(--gold-200); }
.sa-demo-land-fig .p-word > .sil.hi { fill: var(--ai-surface); }
.sa-demo-land-fig .p-slot { stroke: var(--err); }
.sa-demo-land-fig .p-band { fill: var(--gold-400); } .sa-demo-land-fig .p-lens > .sil { stroke: var(--gold-700); } .sa-demo-land-fig .p-lens > .sil.hi { stroke: var(--ai-primary); }
.sa-demo-land-fig .p-grip > .sil { fill: var(--gold-500); stroke: var(--gold-700); } .sa-demo-land-fig .p-grip > .lo { stroke: var(--gold-600); }
.sa-demo-land-fig .p-glass { stroke: var(--ai-primary); opacity: .55; }
.sa-demo-land-ai { position: absolute; inset-block-start: 0; inset-inline-start: 0; font-size: 15px; }
.sa-demo-land-fig .sa-loupe-read { position: absolute; inset-block-end: 0; inset-inline-start: 0; min-block-size: 40px; padding: 0 16px; font-size: 15px; }
.sa-demo-land-hint { position: absolute; inset-block-start: 34px; inset-inline-start: 0; color: var(--ink-700); font-size: 14px; line-height: 1.5; }
.sa-demo-land-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-block: 28.1px; }
.sa-demo-land-door { display: flex; align-items: center; gap: 20px; min-block-size: 152px; padding: 28.1px 28px; border: 1px solid rgba(255,255,255,.1); border-radius: var(--card-radius); background: linear-gradient(150deg, #4a4030 0%, #2e2820 55%, var(--char-800) 100%); color: #fff; text-decoration: none; box-shadow: var(--sh-1); transition: border-color .15s var(--ease), filter .15s var(--ease); }
.sa-demo-land-door:active, .sa-demo-land-door:focus-visible { border-color: var(--gold-400); filter: brightness(1.15); }
.sa-demo-land-door-ico { inline-size: 72px; block-size: 72px; border-radius: 20px; background: rgba(217,184,95,.14); border: 1px solid rgba(217,184,95,.4); color: var(--gold-hi); display: grid; place-items: center; flex: 0 0 auto; }
.sa-demo-land-door-ico svg { inline-size: 34px; block-size: 34px; }
.sa-demo-land-door > div { flex: 1 1 0; min-inline-size: 0; container-type: inline-size; }
.sa-demo-land-door b { display: block; white-space: nowrap; font-size: min(26px, 9cqw); font-weight: 800; line-height: 1.3; }
.sa-demo-land-door > div > span { display: block; font-size: 19px; color: rgba(255,255,255,.74); line-height: 1.55; margin-block-start: 6px; }
.sa-demo-land-door > svg { margin-inline-start: auto; inline-size: 30px; block-size: 30px; color: var(--gold-hi); flex: 0 0 auto; }
[dir="rtl"] .sa-demo-land-door > svg { transform: scaleX(-1); }
.sa-demo-fs { display: inline-flex; align-items: center; gap: 8px; min-block-size: 48px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-700); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.sa-demo-fs svg { inline-size: 18px; block-size: 18px; color: var(--gold-700); }
.sa-main:has(.sa-demo-land), .sa-main:has(.sa-demo-cine) { padding-block-end: 0; }
/* PDF export (body.sa-demo-pdf, set by the export script): flat shadows, no pulse ring, no sweep */
.sa-demo-pdf .sa-demo-pulse::after, .sa-demo-pdf .sa-demo-hub::after, .sa-demo-pdf .sa-demo-land-fig::before { display: none; }
/* PDF renderers rasterise the pattern's mask as a hard ellipse: in PDF mode the texture is unmasked and faint, and a
   vignette painted over it (alpha-0 ends, which print correctly) fades it out towards the edges like the mask did */
/* the export script can instead hand the stage its on-screen background as one image (body.sa-demo-pdfbg): texture, mask and glow exactly as rendered */
.sa-demo-pdfbg .sa-demo-cine::before, .sa-demo-pdfbg .sa-demo-cine::after { display: none; }
.sa-demo-pdfbg .sa-demo-cine { background-size: 100% 100%; background-repeat: no-repeat; }
.sa-demo-pdf .sa-demo-cine::before { -webkit-mask-image: none; mask-image: none; opacity: .05; }
.sa-demo-pdf .sa-demo-cine::after { background: radial-gradient(70% 70% at 50% 42%, rgba(26,23,18,0) 0%, rgba(26,23,18,0) 38%, rgba(26,23,18,1) 76%), radial-gradient(40% 44% at 50% 50%, rgba(217,184,95,.11), rgba(217,184,95,0) 72%); }
.sa-demo-pdf .sa-demo-var { visibility: hidden; }   /* keeps its place so the tabs stay centred as on screen */
.sa-demo-pdf .sa-demo-fs { order: 1; }              /* …and the full-screen button takes the end of the bar (the left in Arabic) */
.sa-demo-pdf .btn, .sa-demo-pdf .sa-demo-land-door, .sa-demo-pdf .sa-demo-cine-door, .sa-demo-pdf .ai-tag { box-shadow: none; }
/* Any screen: the landing is a fixed 1920×988 design stage (the 1080p design under the 92px header) scaled by --k to
   fit whatever landscape screen it is on, letterboxed on the page ground; fitStage() in the script sets --k on resize
   and full screen. Portrait screens use the stacked layout unscaled. Inner pages stay fluid and get a zoom on very wide screens. */
/* TV safe area (?tv=1 → 3.5 % of each edge, ?tv=5 → 5 %): the whole page is inset so overscan never crops the header or the doors */
body.sa-demo-tv { padding: var(--safe-y, 0px) var(--safe-x, 0px); box-sizing: border-box; }
.sa-demo-stagebox { display: flex; justify-content: center; align-items: flex-start; inline-size: 100%; block-size: calc(var(--stage-h, 988px) * var(--k, 1)); overflow: hidden; }
/* the bands behind the stage continue to the screen edges when the aspect ratio leaves room at the sides (stage bands: demo bar 90, hero 690, doors 208 of 988) */
.sa-demo-stagebox[data-land="a"] { --bar: calc(90px * var(--k, 1)); --dock: calc(208px * var(--k, 1)); background: linear-gradient(to bottom, var(--bg) 0 var(--bar), var(--line) var(--bar) calc(var(--bar) + 1px), var(--surface) calc(var(--bar) + 1px) calc(100% - var(--dock)), var(--line) calc(100% - var(--dock)) calc(100% - var(--dock) + 1px), var(--bg) calc(100% - var(--dock) + 1px)); }
.sa-demo-stagebox[data-land="b"] { background: var(--char-900); }
.sa-demo-stage { inline-size: 1920px; block-size: var(--stage-h, 988px); flex: 0 0 auto; transform: scale(var(--k, 1)); transform-origin: top center; }
@media (orientation: portrait) { .sa-demo-stagebox { display: block; block-size: auto; overflow: visible; background: none; } .sa-demo-stage { inline-size: auto; block-size: auto; transform: none; } }
/* the inner screens (about, simulations, runs, manual request) are fluid pages laid out at 1440px; they zoom with the
   screen width (--kin = innerWidth / 1440, at least 1) so they fill a 1080p kiosk, a 1440p or a 4K wall the way the landing does */
/* on the demo's pages only (body.sa-demo-touch): the app's other screens keep their size */
.sa-demo-touch .sa-main:not(:has([data-stagebox])), .sa-demo-touch dialog.sa-demo-doc-dialog, .sa-demo-keys { zoom: var(--kin, 1); }
@media (orientation: portrait) and (max-width: 699px) { .sa-demo-land-hero > .container { grid-template-columns: 1fr; } .sa-demo-land-doors { grid-template-columns: 1fr; } .sa-demo-land { min-block-size: 0; } }

/* --- landing option B: the reading stage. One dark field, the figure as the centrepiece, an evidence ribbon lit by the lap --- */
.sa-demo-cine { position: relative; overflow: hidden; display: flex; flex-direction: column; min-block-size: 100%; background: var(--char-900); color: #fff; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sa-demo-cine::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("../img/pattern.svg"); background-size: 520px; opacity: .07; -webkit-mask-image: radial-gradient(70% 70% at 50% 42%, #000, transparent 76%); mask-image: radial-gradient(70% 70% at 50% 42%, #000, transparent 76%); }
.sa-demo-cine::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(40% 44% at 50% 50%, rgba(217,184,95,.11), rgba(217,184,95,0) 72%); }
.sa-demo-cine > * { position: relative; z-index: 1; }
.sa-demo-cine-top { display: flex; align-items: center; gap: 12px 16px; flex-wrap: nowrap; padding-block: 14px; }
.sa-demo-cine-top .ai-tag { font-size: 15px; }
.sa-demo-cine-top .sa-pill { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.2); }
.sa-demo-cine-top .sa-tabs { margin-inline-start: auto; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.sa-demo-cine-top .sa-tab { color: rgba(255,255,255,.82); }
.sa-demo-cine-top .sa-tab:hover { background: rgba(255,255,255,.1); color: #fff; }
.sa-demo-cine-top .sa-tab.is-active { background: var(--gold-500); color: var(--char-900); }
.sa-demo-cine-top .sa-tab.is-active svg { color: var(--char-900); }
.sa-demo-cine-top .sa-demo-fs { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.88); }
.sa-demo-cine-top .sa-demo-fs svg { color: var(--gold-hi); }
.sa-demo-cine-stage { flex: 1 1 auto; display: grid; grid-template-columns: minmax(290px, 29%) minmax(0, 1fr) minmax(230px, 20%); gap: 40px; align-items: center; padding-block: 21.6px; }
.sa-demo-cine-text { container-type: inline-size; min-inline-size: 0; }
.sa-demo-cine-text h1 { font-size: clamp(36px, 13.5cqw, 84px); line-height: 1.15; margin: 0 0 14px; color: #fff; letter-spacing: -.5px; white-space: nowrap; }
.sa-demo-cine-text h1 em { font-style: normal; color: var(--gold-hi); }
.sa-demo-cine-lead { font-size: 20px; line-height: 1.7; color: rgba(255,255,255,.84); margin: 0 0 28.1px; max-inline-size: 26ch; }
.sa-demo-cine-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sa-demo-cine-cta .btn { min-block-size: 64px; font-size: 18px; padding-inline: 26px; gap: 10px; }
.sa-demo-cine-cta .btn svg { inline-size: 20px; block-size: 20px; }
.sa-demo-cine-cta .btn--on-dark:hover { transform: none; }
.sa-demo-cine-fig { position: relative; padding: 40px 0 46px; }
.sa-demo-cine-fig .sa-loupe-stage { margin: 0 auto; inline-size: min(100%, max(360px, calc((1080px - 390px) * 1.25))); cursor: default; --hairline-plate: var(--char-900); --hairline-hi: var(--gold-400); --hairline-edge: #bcb196; --hairline-mid: #7a7159; --hairline-lo: #46402f; }
.sa-demo-hub { position: relative; margin: 0 auto; inline-size: min(100%, max(360px, calc((1080px - 350px) * 1.25))); touch-action: pan-y; --hairline-plate: var(--char-900); --hairline-hi: var(--gold-400); --hairline-edge: #bcb196; --hairline-mid: #7a7159; --hairline-lo: #46402f; }
.sa-demo-hub > svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
/* little colour touches on the hub (structure of @lucasmarkes/hairline 0.5.1: the 4th tile group is the centre): the centre tile in the AI indigo, a lit tile with a soft gold face */
.sa-demo-hub svg > g > g > .sil { transition: stroke .26s var(--ease), fill .26s var(--ease); }
.sa-demo-hub svg > g > g > .sil.hi { fill: rgba(217,184,95,.18); }
.sa-demo-hub svg > g > g:nth-of-type(4) > .sil { fill: #2b2750; stroke: #a299ee; }
.sa-demo-hub svg > g > g:nth-of-type(4) > .nf.lo { stroke: #6760b5; }
.sa-demo-hub svg > g > g:nth-of-type(4) > .sil.hi { fill: #2b2750; stroke: var(--gold-400); }
.sa-demo-cine-row.is-link { grid-template-columns: 24px minmax(0, 1fr); align-items: center; padding: 4px 8px; font-size: 13.5px; gap: 8px; }
.sa-demo-cine-row.is-link > svg { inline-size: 24px; block-size: 24px; padding: 5px; border-radius: 7px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.6); box-sizing: border-box; }
.sa-demo-cine-row.is-link.is-lit { background: rgba(217,184,95,.14); }
.sa-demo-cine-row.is-link.is-lit > svg { background: rgba(217,184,95,.2); color: var(--gold-hi); }
.sa-demo-cine-row.is-link b { display: block; font-weight: 700; }
.sa-demo-cine-result p { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.82); }
.sa-demo-cine-fig { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; }
.sa-demo-cine-fig .sa-demo-land-ai { position: static; transform: none; max-inline-size: 100%; white-space: normal; text-align: center; font-size: 13px; }
.sa-demo-cine-fig .sa-loupe-stage, .sa-demo-cine-fig .sa-demo-hub { inline-size: min(100%, max(360px, calc((1080px - 350px) * 1.25))); }
.sa-demo-cine-fig > .sa-loupe-read { position: static; transform: none; }
.sa-demo-cine-fig .sa-loupe-read { position: absolute; inset-block-end: 0; inset-inline-start: 50%; transform: translateX(50%); min-block-size: 32px; padding: 0 12px; font-size: 13px; background: rgba(217,184,95,.14); color: var(--gold-hi); border: 1px solid rgba(217,184,95,.45); white-space: nowrap; }
[dir="ltr"] .sa-demo-cine-fig .sa-loupe-read { transform: translateX(-50%); }
.sa-demo-cine-ribbon { display: flex; flex-direction: column; gap: 3px; }
.sa-demo-cine-ribbon-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .4px; color: var(--gold-hi); margin-block-end: 6px; }
.sa-demo-cine-ribbon-h svg { inline-size: 14px; block-size: 14px; }
.sa-demo-cine-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 10px; border-radius: 10px; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.92); opacity: .3; transition: opacity .5s var(--ease), background .5s var(--ease); }
.sa-demo-cine-row .sa-ico { background: rgba(255,255,255,.08); color: rgba(255,255,255,.45); inline-size: 24px; block-size: 24px; }
.sa-demo-cine-row small { display: block; font-size: 12px; color: rgba(255,255,255,.55); }
.sa-demo-cine-row.is-lit { opacity: 1; }
.sa-demo-cine-row.is-lit .sa-ico.st-pass { background: rgba(76,196,138,.2); color: #4cc48a; }
.sa-demo-cine-row.is-lit.is-fail { background: rgba(214,37,38,.14); } .sa-demo-cine-row.is-lit .sa-ico.st-fail { background: rgba(214,37,38,.24); color: #ff9a92; }
.sa-demo-cine-row.is-lit.is-review { background: rgba(42,111,151,.18); } .sa-demo-cine-row.is-lit .sa-ico.st-review { background: rgba(42,111,151,.3); color: #93c8ea; }
.sa-demo-cine-result { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-block-start: 10px; padding-block-start: 12px; border-block-start: 1px solid rgba(255,255,255,.14); opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.sa-demo-cine-result.is-on { opacity: 1; transform: none; }
.sa-demo-cine-result .rq-badge { font-size: 14px; }
.sa-demo-cine-result small { font-size: 13px; color: rgba(255,255,255,.7); }
.sa-demo-cine-dock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-block: 21.6px; }
.sa-demo-cine-door { display: flex; align-items: center; gap: 20px; min-block-size: 140px; padding: 25.9px 28px; border-radius: var(--card-radius); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; text-decoration: none; transition: background .15s var(--ease), border-color .15s var(--ease); }
.sa-demo-cine-door:active, .sa-demo-cine-door:focus-visible { background: rgba(217,184,95,.16); border-color: var(--gold-400); }
.sa-demo-cine-door .sa-demo-land-door-ico { background: rgba(217,184,95,.14); border-color: rgba(217,184,95,.4); color: var(--gold-hi); inline-size: 72px; block-size: 72px; border-radius: 20px; }
.sa-demo-cine-door .sa-demo-land-door-ico svg { inline-size: 34px; block-size: 34px; }
.sa-demo-cine-door > div { flex: 1 1 0; min-inline-size: 0; container-type: inline-size; }
.sa-demo-cine-door b { display: block; white-space: nowrap; font-size: min(26px, 9cqw); font-weight: 800; line-height: 1.3; }
.sa-demo-cine-door > div > span { display: block; font-size: 18px; color: rgba(255,255,255,.72); line-height: 1.5; margin-block-start: 6px; }
.sa-demo-cine-door > svg { margin-inline-start: auto; inline-size: 30px; block-size: 30px; color: var(--gold-hi); flex: 0 0 auto; }
[dir="rtl"] .sa-demo-cine-door > svg { transform: scaleX(-1); }
.sa-demo-var { margin-inline-start: 0; }
/* ── Intro: one choreographed entrance when a landing appears (both options). Everything is in the DOM and
   laid out from the first frame; the animations run once on mount (fill-mode backwards, so the normal styles
   take over when each one ends), ease-out-expo, ~1.9 s to settle: the figure lands first, the title wipes in
   along the reading direction, the lead, tags and buttons follow, then the three doors; the figure's lap starts
   once it has settled. Removed entirely under reduced motion. */
@keyframes sa-in-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sa-in-rise-soft { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
/* the figure arrives large from the centre of the stage (--fig-dx/--fig-dy are measured at mount) and settles into its place */
@keyframes sa-in-fig { 0% { opacity: 0; transform: translate(var(--fig-dx, 0px), var(--fig-dy, 0px)) scale(1.5); } 26% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes sa-in-wipe { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(10px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
@keyframes sa-in-wipe-rtl { from { opacity: 0; clip-path: inset(0 0 0 100%); transform: translateY(10px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
@keyframes sa-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sa-in-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.sa-demo-land-top, .sa-demo-cine-top { animation: sa-in-fade .6s var(--ease) backwards; }
.sa-demo-land-text > *, .sa-demo-cine-text > * { animation: sa-in-rise .8s var(--ease) backwards; }
.sa-demo-land-text > :nth-child(1), .sa-demo-cine-text > :nth-child(1) { animation-delay: .35s; }
.sa-demo-land-text > h1, .sa-demo-cine-text > h1 { animation-name: sa-in-wipe; animation-duration: .9s; animation-delay: .45s; }
[dir="rtl"] .sa-demo-land-text > h1, [dir="rtl"] .sa-demo-cine-text > h1 { animation-name: sa-in-wipe-rtl; }
.sa-demo-land-text > :nth-child(3), .sa-demo-cine-text > :nth-child(3) { animation-name: sa-in-rise-soft; animation-delay: .62s; }
.sa-demo-land-proofs, .sa-demo-land-cta, .sa-demo-cine-cta { animation: none; }
.sa-demo-land-proof { animation: sa-in-rise .7s var(--ease) backwards; }
.sa-demo-land-proof:nth-child(1) { animation-delay: .74s; } .sa-demo-land-proof:nth-child(2) { animation-delay: .8s; } .sa-demo-land-proof:nth-child(3) { animation-delay: .86s; } .sa-demo-land-proof:nth-child(4) { animation-delay: .92s; }
.sa-demo-land-cta > .btn, .sa-demo-cine-cta > .btn { animation: sa-in-rise .8s var(--ease) backwards; }
.sa-demo-land-cta > .btn:nth-child(1) { animation-delay: 1s; } .sa-demo-land-cta > .btn:nth-child(2) { animation-delay: 1.1s; }
.sa-demo-cine-cta > .btn:nth-child(1) { animation-delay: .8s; } .sa-demo-cine-cta > .btn:nth-child(2) { animation-delay: .9s; }
.sa-demo-land-fig::before { animation: sa-in-fade 1.4s var(--ease) .15s backwards; }
.sa-demo-land-fig .sa-loupe-stage, .sa-demo-cine-fig .sa-demo-hub { animation: sa-in-fig 1.3s cubic-bezier(.25, 1, .5, 1) .05s backwards; transform-origin: center; }
.sa-demo-land-fig .sa-demo-land-ai, .sa-demo-cine-fig .sa-demo-land-ai { animation: sa-in-rise .7s var(--ease) .75s backwards; }
.sa-demo-land-fig .sa-loupe-read, .sa-demo-land-hint, .sa-demo-cine-fig > .sa-loupe-read { animation: sa-in-fade .6s var(--ease) 1.25s backwards; }
.sa-demo-cine-ribbon-h { animation: sa-in-rise .7s var(--ease) .7s backwards; }
.sa-demo-cine-row.is-link { animation: sa-in-rise .6s var(--ease) backwards; animation-delay: calc(.78s + (var(--n, 1) - 1) * 55ms); }
.sa-demo-cine-result { animation: sa-in-fade .6s var(--ease) 1.3s backwards; }
.sa-demo-land-door, .sa-demo-cine-door { animation: sa-in-rise .8s var(--ease) backwards; }
.sa-demo-land-door:nth-child(1), .sa-demo-cine-door:nth-child(1) { animation-delay: 1.1s; } .sa-demo-land-door:nth-child(2), .sa-demo-cine-door:nth-child(2) { animation-delay: 1.2s; } .sa-demo-land-door:nth-child(3), .sa-demo-cine-door:nth-child(3) { animation-delay: 1.3s; }
.sa-demo-land-door-ico { animation: sa-in-pop .6s var(--ease) backwards; }
.sa-demo-land-door:nth-child(1) .sa-demo-land-door-ico, .sa-demo-cine-door:nth-child(1) .sa-demo-land-door-ico { animation-delay: 1.25s; } .sa-demo-land-door:nth-child(2) .sa-demo-land-door-ico, .sa-demo-cine-door:nth-child(2) .sa-demo-land-door-ico { animation-delay: 1.35s; } .sa-demo-land-door:nth-child(3) .sa-demo-land-door-ico, .sa-demo-cine-door:nth-child(3) .sa-demo-land-door-ico { animation-delay: 1.45s; }
/* attract: after a quiet spell on the landing it replays its intro (and swaps language unless locked) until someone touches */
.sa-demo-attract .sa-demo-land-hint, .sa-demo-attract .sa-demo-var { visibility: hidden; }
/* the figure as navigation: a tile or line touched once shows what it links, with a link to open it */
.sa-demo-go { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 8px; min-block-size: 36px; padding: 0 12px; border-radius: var(--r-pill); background: var(--gold-500); color: var(--char-900); font-weight: 800; font-size: 13px; text-decoration: none; vertical-align: middle; }
.sa-demo-go svg { inline-size: 16px; block-size: 16px; } [dir="rtl"] .sa-demo-go svg { transform: scaleX(-1); }
.sa-demo-land-fig .sa-loupe-read:has(.sa-demo-go) { padding-inline-end: 4px; }
/* a result chip inside the read-out pill (attract mode, lens at rest): inset 5px, white body, the status keeps its dot and text colour */
.sa-loupe-read:has(.rq-badge) { display: inline-flex; align-items: center; gap: 10px; padding-inline-end: 5px; }
.sa-loupe-read .rq-badge { min-block-size: 30px; padding: 0 12px 0 10px; background: #fff; border: 1px solid var(--ai-line); border-radius: 15px; font-size: 13px; }
[dir="ltr"] .sa-loupe-read .rq-badge { padding: 0 10px 0 12px; }
/* kiosk switches: ?kiosk=1 hides the demo-bar controls, ?lang=ar|en locks the language */
.sa-demo-kiosk .sa-demo-var, .sa-demo-kiosk [data-fs] { display: none !important; }
.sa-demo-lang-locked .lang-toggle { display: none !important; }
/* presenter keys: the help sheet behind "?" */
.sa-demo-keys { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 50; min-inline-size: 300px; padding: 18px 20px; border-radius: var(--card-radius); background: var(--char-900); color: #fff; box-shadow: var(--sh-2); animation: sa-in-rise .35s var(--ease) backwards; }
.sa-demo-keys h3 { margin: 0 0 10px; font-size: 15px; color: var(--gold-hi); }
.sa-demo-keys dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.sa-demo-keys dt { font-family: inherit; } .sa-demo-keys dt kbd { display: inline-block; min-inline-size: 26px; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); font: inherit; font-weight: 800; text-align: center; }
.sa-demo-keys dd { margin: 0; color: rgba(255,255,255,.8); }
/* the result's reveal on the run screen: the card rises, the badge pops, the confidence bar fills, the criteria cascade */
.sa-demo-reveal > * { animation: sa-in-rise .7s var(--ease) backwards; }
.sa-demo-reveal > :nth-child(1) { animation-delay: .05s; } .sa-demo-reveal > :nth-child(2) { animation-delay: .4s; } .sa-demo-reveal > :nth-child(3) { animation: none; } .sa-demo-reveal > :nth-child(4) { animation-delay: .95s; } .sa-demo-reveal > :nth-child(5) { animation-delay: 1.05s; }
.sa-demo-reveal .sa-demo-result .rq-badge, [data-run-badge] .rq-badge { animation: sa-in-pop .5s var(--ease) .3s backwards; }
.sa-demo-reveal .sa-demo-subs li { animation: sa-in-rise .5s var(--ease) backwards; }
.sa-demo-reveal .sa-demo-subs li:nth-child(1) { animation-delay: .5s; } .sa-demo-reveal .sa-demo-subs li:nth-child(2) { animation-delay: .58s; } .sa-demo-reveal .sa-demo-subs li:nth-child(3) { animation-delay: .66s; } .sa-demo-reveal .sa-demo-subs li:nth-child(4) { animation-delay: .74s; } .sa-demo-reveal .sa-demo-subs li:nth-child(5) { animation-delay: .82s; } .sa-demo-reveal .sa-demo-subs li:nth-child(n+6) { animation-delay: .9s; }
@keyframes sa-in-grow { from { transform: scaleX(0); } to { transform: none; } }
.sa-demo-reveal .sa-demo-conf i::before { animation: sa-in-grow 1s var(--ease) .55s backwards; transform-origin: left; } [dir="rtl"] .sa-demo-reveal .sa-demo-conf i::before { transform-origin: right; }
/* the four ready-made requests on the landing, one touch from a run (only where the height allows) */
.sa-demo-scen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; animation: none; }
.sa-demo-cine-ribbon .sa-demo-scen { grid-template-columns: 1fr; gap: 4px; margin-block-start: 10px; padding-block-start: 8px; border-block-start: 1px solid rgba(255,255,255,.14); }
.sa-demo-scen-card { display: flex; align-items: center; gap: 10px; min-block-size: 42px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink-strong); text-decoration: none; transition: border-color .15s var(--ease), background .15s var(--ease); animation: sa-in-rise .7s var(--ease) backwards; }
.sa-demo-scen-card:nth-child(1) { animation-delay: 1.15s; } .sa-demo-scen-card:nth-child(2) { animation-delay: 1.22s; } .sa-demo-scen-card:nth-child(3) { animation-delay: 1.29s; } .sa-demo-scen-card:nth-child(4) { animation-delay: 1.36s; }
.sa-demo-scen-card:active, .sa-demo-scen-card:focus-visible { border-color: var(--gold-400); background: var(--gold-50); }
.sa-demo-scen-card > .sa-ico { flex: 0 0 auto; display: inline-grid; place-items: center; }
.sa-demo-scen-card > span { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-inline-size: 0; } .sa-demo-scen-card b { flex: 1 1 auto; min-inline-size: 0; font-size: 13.5px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-demo-scen-card .rq-badge { flex: 0 0 auto; }
.sa-demo-scen-card .rq-badge { font-size: 11px; white-space: nowrap; }
.sa-demo-scen-card { gap: 8px; padding-inline: 10px 8px; }
.sa-demo-cine .sa-demo-scen-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; } .sa-demo-cine .sa-demo-scen-card:active, .sa-demo-cine .sa-demo-scen-card:focus-visible { background: rgba(217,184,95,.16); border-color: var(--gold-400); }
.sa-demo-cine-ribbon .sa-demo-scen-card { min-block-size: 40px; padding: 3px 10px; border-color: rgba(255,255,255,.1); }
.sa-demo-cine .sa-demo-scen-card .sa-ico { background: rgba(255,255,255,.1); } .sa-demo-cine .sa-demo-scen-card .rq-badge { background: rgba(255,255,255,.08); color: rgba(255,255,255,.86); border-color: rgba(255,255,255,.16); }
/* the booth counter: real completed runs on this machine today */
.sa-demo-states { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.sa-demo-states li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-700); }
.sa-demo-booth { white-space: nowrap; flex: 0 0 auto; } .sa-demo-booth svg { color: var(--gold-700); } .sa-demo-cine-top .sa-demo-booth svg { color: var(--gold-hi); }
/* ambient light on the reading stage: a slow sweep across the hub while nobody touches */
.sa-demo-hub::after { content: ""; position: absolute; inset: -4%; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(217,184,95,0) 42%, rgba(217,184,95,.1) 50%, rgba(217,184,95,0) 58%); -webkit-mask-image: radial-gradient(60% 55% at 50% 52%, #000 35%, transparent 100%); mask-image: radial-gradient(60% 55% at 50% 52%, #000 35%, transparent 100%); animation: sa-sweep 11s linear 2.4s infinite; }
@keyframes sa-sweep { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
@media (prefers-reduced-motion: reduce) { .sa-demo-keys, .sa-demo-reveal *, .sa-demo-reveal .sa-demo-conf i::before, [data-run-badge] .rq-badge, .sa-demo-scen-card, .sa-demo-hub::after { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .sa-demo-land *, .sa-demo-cine *, .sa-demo-land-top, .sa-demo-cine-top, .sa-demo-land-fig::before { animation: none !important; } .sa-demo-cine-row, .sa-demo-cine-result { transition: none; } .sa-demo-pulse::after { animation: none; } }
@media (orientation: portrait) and (max-width: 699px) { .sa-demo-cine-stage { grid-template-columns: 1fr 1fr; } .sa-demo-cine-ribbon { grid-column: 1 / -1; } }
/* portrait kiosks: stack the landing, figure first, and let the figure take the width */
@media (orientation: portrait) and (min-width: 700px) {
  .sa-demo-land-hero > .container { grid-template-columns: 1fr; gap: 12px; } .sa-demo-land-fig { order: -1; } .sa-demo-land-side .sa-demo-land-fig .sa-loupe-stage { inline-size: min(100%, 66vw); } .sa-demo-land-text { max-inline-size: 760px; } .sa-demo-land-lead { max-inline-size: 40ch; }
  .sa-demo-cine-stage { grid-template-columns: 1fr; gap: 10px; } .sa-demo-cine-fig { order: -1; } .sa-demo-cine-fig .sa-demo-hub { inline-size: min(100%, 58vw); } .sa-demo-cine-text h1 { font-size: clamp(40px, 8vw, 84px); } .sa-demo-cine-ribbon { grid-column: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; } .sa-demo-cine-ribbon-h, .sa-demo-cine-result, .sa-demo-cine-ribbon .sa-demo-scen { grid-column: 1 / -1; } .sa-demo-cine-ribbon .sa-demo-scen { grid-template-columns: repeat(2, 1fr); }
}
@media (orientation: portrait) and (max-width: 699px) { .sa-demo-cine-stage { grid-template-columns: 1fr; } .sa-demo-cine-dock { grid-template-columns: 1fr; } .sa-demo-cine { min-block-size: 0; } }

/* --- touch layer: the demo is presented on a touch screen, so every control gets a large target --- */
/* bigger logos in the header for the event screen (demo page only): 40% over the first event sizes */
.sa-demo-touch .site-header .brand-icon { inline-size: 78px; block-size: 78px; }
.sa-demo-touch .site-header .brand-logotype { block-size: 50px; }
.sa-demo-touch .site-header .moj-logo { block-size: 84px; }
.sa-demo-touch .site-header .brand { gap: 14px; }
.sa-demo-touch .lang-toggle { min-block-size: 48px; font-size: 16px; }
.sa-demo-touch .sa-tab { min-block-size: 52px; padding: 10px 18px; font-size: 16px; }
.sa-demo-touch .sa-tabs { padding: 4px; }
.sa-demo-touch .btn--sm { min-block-size: 48px; padding-inline: 18px; font-size: .95rem; }
.sa-demo-touch .btn:active { transform: translateY(1px); }
.sa-demo-touch .sa-link { min-block-size: 44px; padding-inline: 4px; }
.sa-demo-touch .sa-dd-menu li { min-block-size: 48px; font-size: 15px; }
.sa-demo-touch .sa-demo-flow .sa-node { min-block-size: 140px; }
.sa-demo-touch .up-remove { min-inline-size: 36px; min-block-size: 36px; font-size: 20px; }
.sa-demo-touch .sa-dlg-x { inline-size: 48px; block-size: 48px; }
.sa-demo-touch .sa-demo-docitem .sa-link, .sa-demo-touch .sa-demo-fields .form-subhead .sa-link { min-block-size: 40px; }
.sa-demo-touch .choice { min-block-size: 64px; }

/* home */
.sa-demo-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sa-demo-door { display: flex; flex-direction: column; gap: 10px; color: var(--ink-strong); text-decoration: none; transition: border-color .2s var(--ease); }
.sa-demo-door:hover, .sa-demo-door:focus-visible { border-color: var(--gold-400); }
.sa-demo-door .sa-card-h { margin-block-end: 0; }
.sa-demo-door p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-700); }
.sa-demo-door .sa-link { margin-block-start: auto; padding-block-start: 6px; }
[dir="rtl"] .sa-demo-door .sa-link svg { transform: scaleX(-1); }
.sa-demo-door-k { margin-inline-start: auto; }
.sa-demo-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sa-demo-acts .sa-muted { font-size: 14px; }
/* the two home cards share one height: the row stretches, and each card pins its last row to the bottom */
.sa-demo-hero-row { align-items: stretch; }
.sa-demo-hero-row > .sa-card { display: flex; flex-direction: column; }
.sa-demo-intro .sa-explain { margin-block-end: 14px; }
.sa-demo-intro .sa-note { margin-block-start: auto; margin-block-end: 14px; }
.sa-demo-intro .sa-demo-acts { margin-block-start: 0; }
.sa-demo-hero-row .sa-loupe .sa-loupe-foot { margin-block-start: auto; }

/* about: the journey, as the intake screen's request path */
.sa-demo-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 14px; padding: 4px 0 6px; }
.sa-demo-flow .sa-flow-link { align-self: center; }
.sa-demo-flow .sa-node { font: inherit; cursor: pointer; position: relative; overflow: hidden; min-block-size: 124px; padding: 14px 10px; transition: border-color .2s var(--ease), background .2s var(--ease); }
.sa-demo-flow .sa-node:hover { border-color: var(--gold-400); }
.sa-demo-flow .sa-node.is-past svg { color: var(--ok); }
.sa-demo-flow .sa-node small { font-weight: 700; }
.sa-demo-flow .sa-flow-link::before { inline-size: 28px; }
.sa-demo-node-bar { position: absolute; inset-inline-start: 0; inset-block-end: 0; block-size: 3px; inline-size: 0; background: var(--gold-500); }
.is-playing .sa-node.is-here .sa-demo-node-bar { animation: sa-demo-bar 4s linear forwards; }
@keyframes sa-demo-bar { to { inline-size: 100%; } }
[data-detail].sa-fade { animation-duration: .28s; }
.sa-demo-who { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-700); }
.sa-demo-principles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.sa-demo-principles li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; color: var(--ink-700); line-height: 1.4; }
.sa-demo-principles svg { inline-size: 18px; block-size: 18px; color: var(--gold-700); }
.sa-demo-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; }
.sa-demo-stat { padding-block: 4px; border-inline-end: 1px solid var(--line-2); padding-inline-end: 20px; }
.sa-demo-stat:last-child { border: 0; }
.sa-demo-stat b { display: block; font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--ai-ink); font-variant-numeric: tabular-nums; }
.sa-demo-stat > span { display: block; margin-block-start: 2px; font-size: 14px; font-weight: 700; color: var(--ink-500); }

/* simulations */
.sa-demo-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sa-demo-case { display: flex; flex-direction: column; gap: 14px; }
.sa-demo-case .sa-card-h { margin-block-end: 0; }
.sa-demo-case .sa-card-h h2 { font-size: 18px; }
.sa-demo-case > p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-700); }
.sa-demo-case .sa-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sa-demo-case .sa-payload { grid-template-columns: 1fr; }
.sa-demo-docs { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-demo-docs .sa-pill svg { inline-size: 13px; block-size: 13px; color: var(--gold-700); }
.sa-demo-docs .sa-pill.is-missing { border-style: dashed; color: var(--ink-400); background: transparent; }
.sa-demo-docs .sa-pill.is-missing svg { color: var(--ink-400); }
.sa-demo-case-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-block-start: auto; padding-block-start: 14px; border-block-start: 1px solid var(--line-2); }

/* run: the audit screen's pipeline, with each stage's body under its label */
.sa-demo-body { margin-block-start: 10px; }
.sa-step.is-todo .sa-demo-body { display: none; }
.sa-demo-rows { display: grid; gap: 6px; }
.sa-demo-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 7px 10px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 14px; opacity: 0; animation: sa-demo-row .3s var(--ease) forwards; animation-delay: calc(var(--i) * 90ms); }
@keyframes sa-demo-row { to { opacity: 1; } }
.sa-demo-row span { color: var(--ink-500); }
.sa-demo-row b { color: var(--ink-strong); font-weight: 700; min-inline-size: 0; }
.sa-demo-api { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 14px; color: var(--ink-700); margin: 0; }
.sa-demo-api code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; direction: ltr; unicode-bidi: isolate; }
.sa-demo-subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sa-demo-subs li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 8px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink-700); transition: background .2s var(--ease); }
.sa-demo-subs li.is-todo { color: var(--ink-400); }
.sa-demo-subs li.is-active { background: var(--gold-50); color: var(--ink-strong); }
.sa-demo-subs li.is-fail, .sa-demo-subs li.is-unv, .sa-demo-subs li.is-review { background: var(--surface-2); color: var(--ink-strong); }
.sa-demo-subs li > span:not(.sa-ico) { display: flex; flex-direction: column; gap: 2px; }
.sa-demo-subs li small { font-size: 12px; color: var(--ink-500); }
.sa-demo-subs li code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--ink-500); direction: ltr; unicode-bidi: isolate; margin: 0 6px; }
.sa-demo-dot { inline-size: 22px; block-size: 22px; display: grid; place-items: center; }
.sa-demo-dot::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--line); }
.sa-demo-spin { inline-size: 22px; block-size: 22px; display: grid; place-items: center; }
.sa-demo-spin::before { content: ""; inline-size: 14px; block-size: 14px; border-radius: 50%; border: 2px solid var(--gold-200); border-block-start-color: var(--gold-600); animation: sa-demo-spin .8s linear infinite; }
@keyframes sa-demo-spin { to { transform: rotate(360deg); } }
.sa-demo-sub-h { margin: 14px 0 6px; font-size: 14px; font-weight: 800; color: var(--ink-strong); }
.sa-demo-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); }
.sa-demo-result.is-pass { background: var(--ok-bg); border-color: #bfe3d0; } .sa-demo-result.is-reject { background: var(--err-bg); border-color: #ecc8c3; }
.sa-demo-result.is-info { background: var(--warn-bg); border-color: #ecd9a9; } .sa-demo-result.is-human { background: var(--info-bg); border-color: #bcd5e5; }
.sa-demo-result-b b { display: block; font-size: 16px; font-weight: 800; color: var(--ink-strong); margin-block-start: 6px; }
.sa-demo-conf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-block-start: 8px; font-size: 12px; color: var(--ink-500); }
.sa-demo-conf i { display: block; inline-size: 120px; block-size: 6px; border-radius: 99px; background: rgb(26 23 18 / 8%); overflow: hidden; }
.sa-demo-conf i::before { content: ""; display: block; block-size: 100%; inline-size: var(--p); background: var(--ai-primary); border-radius: 99px; }
.sa-demo-conf .num { font-weight: 700; color: var(--ink-strong); font-size: 14px; }
.sa-demo-right { display: flex; flex-direction: column; gap: 16px; }

/* manual request: the EJE request form's own components (.field, .field-row, .upload, .up-files) inside demo cards */
.sa-demo-fields .field:last-child, .sa-demo-fields .field-row:last-child .field { margin-block-end: 0; }
.sa-demo-fields .field label { display: flex; gap: 4px; }
.sa-demo-fields .field input:not([type="checkbox"]):not([type="file"]), .sa-demo-fields .sa-dd-btn { block-size: 56px; padding-block: 0; line-height: 1.5; }
/* the choice card's hidden checkbox must not inherit the field's full-width input rule */
.sa-demo-fields .choice { position: relative; }
.sa-demo-fields .choice input { inline-size: 1px; block-size: 1px; padding: 0; border: 0; }
/* dropdown: the field's own look, with a designed list instead of the native one */
.sa-dd { position: relative; }
.sa-dd-btn { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font: inherit; font-size: 1rem; color: var(--ink-900); text-align: start; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.sa-dd-btn:hover { border-color: var(--gold-400); }
.sa-dd-btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; border-color: var(--gold-400); background: #fff; }
.sa-dd-btn[disabled] { color: var(--ink-500); cursor: default; background: var(--surface-3); }
.sa-dd-btn[disabled]:hover { border-color: var(--line); }
.sa-dd-btn .sa-dd-val { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-dd-btn .sa-dd-val.is-empty { color: var(--ink-500); }
.sa-dd-btn > svg { inline-size: 18px; block-size: 18px; color: var(--gold-700); flex: 0 0 auto; transition: transform .2s var(--ease); }
.sa-dd.is-open .sa-dd-btn { border-color: var(--gold-400); background: #fff; }
.sa-dd.is-open .sa-dd-btn > svg { transform: rotate(180deg); }
.field.is-error .sa-dd-btn { border-color: var(--err); background: var(--err-bg); }
.sa-dd-menu { position: absolute; inset-block-start: calc(100% + 6px); inset-inline: 0; z-index: 40; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-2); max-block-size: 280px; overflow: auto; }
.sa-dd-menu[hidden] { display: none; }
.sa-dd-menu li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-block-size: 42px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-700); cursor: pointer; }
.sa-dd-menu li:hover, .sa-dd-menu li.is-active { background: var(--gold-50); color: var(--gold-700); }
.sa-dd-menu li[aria-selected="true"] { color: var(--ink-strong); font-weight: 700; }
.sa-dd-menu li svg { inline-size: 16px; block-size: 16px; color: var(--gold-700); margin-inline-start: auto; flex: 0 0 auto; }
.sa-demo-fields .form-subhead { display: flex; align-items: center; gap: 10px; margin-block-start: 0; }
.sa-demo-fields [data-party] + [data-party] { margin-block-start: 26px; padding-block-start: 22px; border-block-start: 1px solid var(--line-2); }
.sa-demo-fields [data-party] .field-row:last-child .field { margin-block-end: 0; }
.sa-demo-fields .form-subhead .sa-pill { font-weight: 700; }
.sa-demo-fields .form-subhead .sa-link { margin-inline-start: auto; font-size: 14px; }
.sa-demo-doclist { display: flex; flex-direction: column; gap: 8px; margin-block-end: 18px; }
.sa-demo-docitem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 14px; }
.sa-demo-docitem > svg { inline-size: 18px; block-size: 18px; color: var(--gold-700); flex: 0 0 auto; }
.sa-demo-docitem > div { min-inline-size: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.sa-demo-docitem b { color: var(--ink-strong); font-weight: 700; }
.sa-demo-docitem small { font-size: 12px; color: var(--ink-500); }
.sa-demo-docitem small code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; direction: ltr; unicode-bidi: isolate; }
.sa-demo-docitem .sa-pill { flex: 0 0 auto; }
.sa-demo-docitem .sa-link { flex: 0 0 auto; font-size: 14px; }
.sa-demo-docs-req { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 18px; }
.sa-demo-docs-req .sa-pill svg { inline-size: 13px; block-size: 13px; }
.sa-demo-docs-req .sa-pill:not(.is-ok) { color: var(--ink-500); background: transparent; border-style: dashed; }
.sa-demo-doc-dialog .sa-dialog-card { inline-size: min(600px, calc(100% - 32px)); }
.sa-demo-doc-dialog .field label { display: flex; gap: 4px; }
.sa-demo-doc-dialog .upload { min-block-size: 120px; }
.sa-demo-doc-dialog .up-file .up-size { font-size: 12px; color: var(--ink-500); white-space: nowrap; }
.sa-demo-doc-dialog .up-sample { align-self: flex-start; font-size: 14px; }
.sa-demo-doc-dialog .sa-dlg-acts { display: flex; justify-content: flex-end; gap: 10px; padding-block-start: 12px; border-block-start: 1px solid var(--line-2); }
.sa-demo-formcol { display: flex; flex-direction: column; gap: 18px; }
.sa-demo-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@media (max-width: 1180px) { .sa-demo-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sa-demo-flow .sa-flow-link { display: none; } }
@media (max-width: 1023px) {
  .sa-demo-grid3 { grid-template-columns: 1fr; }
  .sa-demo-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-demo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
  .sa-demo-stat:nth-child(2) { border: 0; }
  .sa-demo-cases { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sa-demo-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-demo-principles { grid-template-columns: 1fr; }
  .sa-demo-row { grid-template-columns: 1fr; gap: 2px; }
  .sa-demo-case .sa-kv { grid-template-columns: 1fr; }
}

/* ours: the landing's English lead (the client's longer wording, 2026-10-26) takes its column's full width, so the
   doors stay on the stage at every screen size */
[lang="en"] .sa-demo-cine-lead { max-inline-size: none; }

/* ours: the hub on the run page (a light card), its raised tile the stage under way: the landing's palette on white,
   the centre in the AI indigo, the raised tile in gold */
.sa-demo-runhub .sa-demo-hub { inline-size: 100%; margin-block: -6% -8%; cursor: default; --hairline-plate: #fff; --hairline-hi: var(--gold-600); --hairline-edge: #9a9078; --hairline-mid: #d9d2c2; --hairline-lo: #e3ddd0; }
.sa-demo-runhub { overflow: hidden; }  /* the figure's blank margins stay inside the card */
.sa-demo-runhub .sa-demo-hub::after { display: none; }
.sa-demo-runhub .sa-demo-hub svg > g > g > .sil.hi { fill: var(--gold-50); }
.sa-demo-runhub .sa-demo-hub svg > g > g:nth-of-type(4) > .sil { fill: var(--ai-surface-2); stroke: var(--ai-primary); }
.sa-demo-runhub .sa-demo-hub svg > g > g:nth-of-type(4) > .nf.lo { stroke: var(--ai-line); }
.sa-demo-runhub .sa-demo-hub svg > g > g:nth-of-type(4) > .sil.hi { fill: var(--ai-surface-2); stroke: var(--gold-600); }

/* ours: on the run page the figure's column stays in view under the header while the stages scroll (the page
   follows the stage under way, demo.js); not when the columns stack */
@media (min-width: 1024px) { .sa-demo-right { position: sticky; inset-block-start: calc((var(--sa-hdr, 92px) + 16px) / var(--kin, 1)); } }

/* ours: the landing's caption under the hub's list keeps three lines' height, so the requests below it
   stay put while the hub's loop changes the text (a tile's description, or the rest text) */
.sa-demo-cine-result p { min-block-size: calc(3 * 1.9em); min-block-size: 3lh; }  /* three of its own lines (Arabic sets them taller) */

/* ours: the header's logos 40% larger than the design system's (the EJE emblem 42 -> 59px, its wordmark
   27 -> 38px, the ministry's logo 40 -> 56px); the demo's pages have their own (larger), phones the design's */
@media (min-width: 601px) {
  .site-header .brand-icon { inline-size: 59px; block-size: 59px; }
  .site-header .brand-logotype { block-size: 38px; }
  .site-header .moj-logo { block-size: 56px; }
}