/* C12W-0731: the client pages at /client/ (CX20; CX1 and CX13 for the frame). Global, because the page scripts switch
   screens and write messages at runtime. Colors, spacing, radius and shadows are tokens only. No ambient motion (CX13);
   one column that reflows at 320 px (WCAG 1.4.10), and every control at least 44 px tall. */
.cl-hidden { display: none !important; }
.cl-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--void-950) 72%, transparent); border-bottom: 1px solid var(--glass-hairline); }
.cl-header-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 68px; flex-wrap: wrap; }
.cl-header-end { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; min-width: 0; }
.cl-who { font-size: 0.9375rem; color: var(--snow-300); overflow-wrap: anywhere; }
.cl-header .btn-quiet { min-height: 44px; }
.cl-main { display: grid; gap: var(--space-6); padding: var(--space-7) 0; align-content: start; }
.cl-main:focus { outline: none; }

.cl-intro { display: grid; gap: var(--space-2); }
.cl-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-blue-light); }
.cl-h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: 0.98; text-transform: uppercase; overflow-wrap: anywhere; }
.cl-lead { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--snow-300); max-width: 68ch; }

.cl-card { padding: var(--space-5); display: grid; gap: var(--space-4); align-content: start; min-width: 0; max-width: 640px; }
@media (min-width: 720px) { .cl-card { padding: var(--space-6); } }
.cl-step { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--snow-300); }
.cl-h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 2.5rem); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.cl-h2:focus, .cl-alert:focus { outline: 2px solid var(--brand-blue-light); outline-offset: var(--space-1); }
.cl-text { margin: 0; font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.cl-note { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--snow-300); overflow-wrap: anywhere; }

.cl-form { display: grid; gap: var(--space-4); }
.cl-field { display: grid; gap: var(--space-1); font-size: 0.9375rem; font-weight: 600; min-width: 0; }
.cl-req { color: var(--snow-300); font-weight: 400; }
.cl-hint { font-size: 0.8125rem; font-weight: 400; color: var(--snow-300); }
.cl-input { min-height: 44px; box-sizing: border-box; width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--night-line-strong); border-radius: var(--radius-sm); background: var(--night-900); color: var(--snow-100); font: inherit; font-size: 0.9375rem; font-weight: 400; }
.cl-input:focus { outline: 2px solid var(--brand-blue-light); outline-offset: 1px; }
.cl-code { font-size: 1.5rem; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.cl-actions { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cl-actions .btn { min-height: 44px; }
.cl-alert { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--status-risk-bg); color: var(--status-risk-ink); font-size: 0.9375rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }

.cl-link { color: var(--snow-100); }
.cl-link:hover { color: var(--brand-violet-light); }
.cl-linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--snow-100); font: inherit; text-decoration: underline; cursor: pointer; }
.cl-linkbtn:hover { color: var(--brand-violet-light); }
.cl-linkbtn:focus-visible { outline: 2px solid var(--brand-blue-light); outline-offset: 2px; }

.cl-foot { display: grid; gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--glass-hairline); }
.cl-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.cl-foot .cl-note strong { color: var(--snow-100); font-weight: 600; }

/* C12W-0735 slice 1: CX13's loading blocks (still, no shimmer: heights reserved so nothing jumps), the session dialog. */
.cl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cl-loading { display: grid; gap: var(--space-2); }
.cl-block { display: block; border-radius: var(--radius-sm); background: var(--night-800); }
.cl-block-title { height: 28px; width: 60%; }
.cl-block-line { height: 18px; width: 40%; }
.cl-block-card { height: 120px; width: 100%; }
.cl-block-wide { height: 18px; width: 80%; }
.cl-strong { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.55; }
.cl-dialog { max-width: min(100% - 2 * var(--gutter), 480px); padding: var(--space-5); display: grid; gap: var(--space-3); border: 1px solid var(--night-line); border-radius: var(--radius-md); background: var(--night-800); color: var(--snow-100); box-shadow: var(--shadow-toast); }
.cl-dialog:not([open]) { display: none; }
.cl-dialog::backdrop { background: color-mix(in srgb, var(--void-950) 70%, transparent); }