/* Register (unit S2-REG). Loads after sm-ar.css. Flat N2 ground (continuum: Register zenith N2), Last year's column, one hud-panel with the form.
   Interactive things carry a full #29b1da frame (--hud-ifc), never the dim rung. Errors are never red: an 8 px C2 square, text, and a dashed C2 underline.
   Logical properties only; nothing here is drawn art, so nothing is mirrored by hand. */

.sm .rg-stage { position: relative; background: var(--hud-n2); padding-block: 72px 112px; scroll-margin-block-start: 64px; }
.sm .rg-stage [hidden] { display: none !important; }
.sm .rg-in { box-sizing: border-box; inline-size: min(1296px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }

/* ── head ─────────────────────────────────────────────────────────────────────────────────────────── */
.sm .rg-head { display: flex; flex-direction: column; align-items: flex-start; min-inline-size: 0; }
.sm .rg-head > * { margin: 0; }
.sm .rg-label { line-height: 25px; letter-spacing: var(--hud-track); }
.sm .rg-title { margin-block-start: 18px; font-size: 50px; line-height: 56px; letter-spacing: 2px; text-wrap: balance; }
.sm .rg-sub { margin-block-start: 18px; max-inline-size: 52ch; }
[dir="rtl"] .sm .rg-title { font-size: 40px; line-height: 52px; font-weight: 400; letter-spacing: 0; }
[dir="rtl"] .sm .rg-title .hud-hl { white-space: normal; }

/* ── composition: the head above, the panel across the full column, at every width ──────────────── */
.sm .rg-grid { display: block; }
.sm .rg-side { min-inline-size: 0; margin-block-start: 40px; }

/* ── panel and field grid ─────────────────────────────────────────────────────────────────────────── */
.sm .rg-panel, .sm .rg-state { box-sizing: border-box; margin: 0; padding: 24px; }
.sm .rg-fields, .sm .rg-members { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; row-gap: 0; }
.sm .rg-fields > *, .sm .rg-members > * { min-inline-size: 0; margin-block-end: 20px; }
.sm .rg-fields > :last-child { margin-block-end: 0; }
.sm .rg-members > :last-child { margin-block-end: 0; }
.sm .rg-field { min-inline-size: 0; }
.sm .rg-notice, .sm .rg-privacy { margin-block-start: 0; }
@media (min-width: 768px) {
  .sm .rg-fields, .sm .rg-members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* a half field is label / control / note, three rows of the shared grid, so controls in one row line up when a label wraps */
  .sm .rg-field { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
  .sm .rg-field > .rg-lab { align-self: end; }
  .sm .rg-fields > .rg-field--full, .sm .rg-field.rg-field--full { grid-column: 1 / -1; grid-row: auto; display: block; }
}
@media (min-width: 1280px) {
  .sm .rg-fields, .sm .rg-members { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sm .rg-field--full { grid-column: 1 / -1; }

/* ── labels, inputs, hints ────────────────────────────────────────────────────────────────────────── */
.sm .rg-lab { display: block; line-height: 25px; letter-spacing: 2px; margin-block-end: 8px; }
.sm .rg-input {
  display: block; box-sizing: border-box; inline-size: 100%; min-block-size: 44px; margin: 0; padding: 8px 12px;
  background: var(--hud-n0); border: 2px solid var(--hud-ifc); color: var(--hud-l3);
  border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: 0; border-end-end-radius: 0;
  -webkit-appearance: none; appearance: none; outline: 0;
  font-family: 'General Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.6; text-align: start;
}
[dir="rtl"] .sm .rg-input { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; font-size: 18px; line-height: 1.8; }
.sm .rg-input::placeholder { color: var(--hud-l0); opacity: 1; }
.sm .rg-input:focus-visible { outline: 2px solid var(--hud-ifc); outline-offset: 3px; }
.sm .rg-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--hud-n0) inset; -webkit-text-fill-color: var(--hud-l3); caret-color: var(--hud-l3); }
.sm .rg-hint { margin: 8px 0 0; color: var(--hud-muted); }
.sm .rg-under { min-inline-size: 0; }

/* ── radio and checkbox: a 24 px square, a 12 px C2 square when set, text in prose ───────────────── */
.sm .rg-group { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 0; }
.sm .rg-choice { position: relative; display: flex; align-items: flex-start; gap: 12px; box-sizing: border-box; min-block-size: 44px; padding-block: 10px; cursor: pointer; min-inline-size: 0; text-wrap: pretty; }
.sm .rg-native { position: absolute; inset-inline-start: 0; inset-block-start: 10px; inline-size: 24px; block-size: 24px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sm .rg-box { position: relative; flex: none; box-sizing: border-box; inline-size: 24px; block-size: 24px; margin-block-start: 2px; background: var(--hud-n0); border: 2px solid var(--hud-ifc); }
.sm .rg-box::after { content: none; position: absolute; inset: 4px; background: var(--hud-c2); }
.sm .rg-native:checked + .rg-box::after { content: ''; }
.sm .rg-native:focus-visible + .rg-box { outline: 2px solid var(--hud-ifc); outline-offset: 3px; }
.sm .rg-consents .rg-consent { margin-block-end: 4px; }
.sm .rg-consents .rg-consent:last-child { margin-block-end: 0; }

/* ── buttons ──────────────────────────────────────────────────────────────────────────────────────── */
.sm .rg-stage .rg-btn { min-block-size: 44px; padding: 8px 16px; background: var(--hud-n1); color: var(--hud-l3); border-color: var(--hud-ifc); }
.sm .rg-stage .rg-btn:hover { border-color: var(--hud-c3); }
.sm .rg-stage .rg-btn:disabled { color: var(--hud-muted); border-color: var(--hud-frame); cursor: default; }
.sm .rg-submit-slot { display: block; min-block-size: 89px; }   /* the larger of the soon slot (chip + line) and the live slot (button, 66), so nothing below jumps when the config flips the mode */
[dir="rtl"] .sm .rg-submit-slot { min-block-size: 97px; }
.sm .rg-soon { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sm .rg-soon > * { margin: 0; }
.sm .rg-chip { display: inline-block; box-sizing: border-box; max-inline-size: 100%; padding: 10px 16px; background: var(--hud-n1); border: 2px dashed var(--hud-c1); text-transform: none; letter-spacing: 1px; line-height: 25px; }
.sm .rg-submit[disabled] { cursor: default; }

/* ── group headings, notes, member blocks ───────────────────────────────────────────────────────── */
.sm .rg-head > .rg-note { margin-block-start: 12px; max-inline-size: 62ch; }
.sm .rg-head > .rg-sub + .rg-note { margin-block-start: 18px; }
.sm .rg-fields > .rg-group-h { grid-column: 1 / -1; margin-block: 28px 16px; padding-block-end: 8px; border-block-end: 2px solid var(--hud-frame); line-height: 25px; letter-spacing: 2px; }
.sm .rg-fields > .rg-group-h:first-child { margin-block-start: 8px; }
.sm .rg-group-h--sub { margin: 0 0 12px; line-height: 25px; letter-spacing: 2px; color: var(--hud-l2); }
.sm .rg-fields > .rg-member { margin-block-end: 28px; }
.sm .rg-fields > .rg-notice { margin-block-end: 12px; }
.sm .rg-fields > .rg-notice + .rg-notice { margin-block-end: 20px; }
.sm .rg-state-ref { margin: 12px 0 0; line-height: 25px; letter-spacing: 2px; }

/* ── notices, errors, honeypot ────────────────────────────────────────────────────────────────────── */
.sm .rg-notice, .sm .rg-privacy { margin-block-end: 20px; }
.sm .rg-err { margin: 8px 0 0; color: var(--hud-l3); }
.sm .rg-err::before { content: ''; display: inline-block; inline-size: 8px; block-size: 8px; margin-inline-end: 10px; background: var(--hud-c2); vertical-align: middle; position: relative; inset-block-start: -2px; }
.sm .rg-input[aria-invalid="true"] { border-block-end: 2px dashed var(--hud-c2); }
.sm .rg-group[aria-invalid="true"] { border-block-end: 2px dashed var(--hud-c2); padding-block-end: 6px; }
.sm .rg-native[aria-invalid="true"] + .rg-box { border-block-end: 2px dashed var(--hud-c2); }
.sm .rg-hp { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sm .rg-ref { unicode-bidi: isolate; white-space: nowrap; color: var(--hud-l3); }

/* ── states: success, error, closed, full (same footprint as the form, set by the script) ─────────── */
.sm .rg-state-title { margin: 0; font-size: 37.5px; line-height: 44px; letter-spacing: 2px; text-wrap: balance; outline: 0; }
.sm .rg-state-text { margin: 16px 0 0; max-inline-size: 52ch; }
.sm .rg-state .rg-btn { margin-block-start: 24px; }
[dir="rtl"] .sm .rg-state-title { font-size: 30px; line-height: 42px; font-weight: 400; letter-spacing: 0; }

/* ── Arabic: Pixel AE roles at 20 px Bold (tashkeel and tracking already handled by sm-ar.css and the guard) ── */
[dir="rtl"] .sm .rg-lab, [dir="rtl"] .sm .rg-group-h, [dir="rtl"] .sm .rg-state-ref { font-size: 20px; line-height: 28px; font-weight: 700; }
[dir="rtl"] .sm .rg-btn, [dir="rtl"] .sm .rg-submit { font-size: 20px; line-height: 28px; font-weight: 700; }
[dir="rtl"] .sm .rg-chip { font-size: 20px; line-height: 28px; font-weight: 700; }

/* ── phone ────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sm .rg-stage { padding-block: 40px 56px; }
  .sm .rg-in { inline-size: calc(100% - 44px); }
  .sm .rg-panel, .sm .rg-state { padding: 16px; }
  .sm .rg-title { font-size: 37.5px; line-height: 44px; letter-spacing: 0; }
  [dir="rtl"] .sm .rg-title { font-size: 30px; line-height: 42px; }
  .sm .rg-state-title { letter-spacing: 0; }
  .sm .rg-group { column-gap: 20px; }
  .sm .rg-submit-slot { min-block-size: 114px; }
  [dir="rtl"] .sm .rg-submit-slot { min-block-size: 125px; }
}
@media (max-width: 383px) {
  .sm .rg-in { inline-size: calc(100% - 32px); }
}
@media (forced-colors: active) { .sm .rg-native:checked + .rg-box::after { background: Highlight; } }