/* ==========================================================================
   register.css — public registration page ("/"). Page-specific styles only:
   cards, fields, pickers, alerts, buttons, progress… all come from base.css.
   Tokens only, logical properties only (RTL-first), mobile-first.
   ========================================================================== */

/* Keep focused fields clear of the sticky submit bar at the bottom of the screen. */
html { scroll-padding-block-end: 7rem; }

/* --------------------------------------------------------------------------
   Masthead = the official strip + the teal hero (one <header>)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Official strip — the authority behind the platform (logos + orgLines).
   register.js fills #official-strip and sets data-logos="0|1|2"; with neither a logo nor a
   line it stays hidden and the page starts with the teal hero exactly as before.
     wide (≥ 48rem): logo 1 at the inline-start end, logo 2 at the inline-end end, the lines
                     centred between them (the two 1fr side tracks are always equal, so the
                     lines stay centred with one logo or none);
     phones:         the logos share one centred row with the lines centred underneath.
   Each logo gets a fixed SQUARE box with object-fit: contain and no background fill and no
   border: an opaque maroon crest and a transparent circular seal both keep their own shape,
   and neither looks boxed. The strip's own surface follows the theme, so both read in light
   and in dark mode.
   -------------------------------------------------------------------------- */
.official-strip {
  --logo-size: 3rem;             /* 48px on phones (44–52px), bigger from 48rem up */
  background: var(--color-surface);
  color: var(--color-text);
  border-block-end: 1px solid var(--color-border);
}
.official-strip__inner {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "logo-start logo-end"
    "org        org";
  justify-content: center;
  justify-items: center;
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  padding-block: var(--space-3);
  text-align: center;
}
/* One logo (or none): a single centred column — no empty track pulling things off-centre. */
.official-strip[data-logos="1"] .official-strip__inner {
  grid-template-columns: auto;
  grid-template-areas: "logo-start" "org";
}
.official-strip[data-logos="0"] .official-strip__inner {
  grid-template-columns: auto;
  grid-template-areas: "org";
  row-gap: 0;
}

.official-strip__logo {
  grid-area: logo-start;
  display: block;
  inline-size: var(--logo-size);
  block-size: var(--logo-size);
  object-fit: contain;      /* never stretched: both crests keep their own aspect ratio */
  object-position: center;
}
.official-strip__logo--end { grid-area: logo-end; }
/* Placeholder box while the settings load: reserves the height, shows nothing. */
.official-strip__logo--empty { visibility: hidden; }

.official-strip__org {
  grid-area: org;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-inline-size: 0;
}
.official-strip__line {
  margin: 0;
  line-height: 1.3;
  text-wrap: balance;
  overflow-wrap: anywhere;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}
.official-strip__line--lead {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

/* Small phones: the masthead must not eat the screen before the form starts. */
@media (max-width: 30rem) {
  .official-strip { --logo-size: 2.75rem; }
  .official-strip__inner { padding-block: var(--space-2); }
  .official-strip__line { font-size: var(--fs-xs); }
  /* The strip already carries the identity, so the hero can start a little higher. */
  .official-strip:not([hidden]) + .register-hero { padding-block-start: var(--space-5); }
}

@media screen and (min-width: 48rem) {
  .official-strip { --logo-size: 4rem; }
  .official-strip__inner {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "logo-start org logo-end";
    justify-content: stretch;
    column-gap: var(--space-5);
    row-gap: 0;
    padding-block: var(--space-4);
  }
  .official-strip[data-logos="1"] .official-strip__inner {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "logo-start org logo-end";
  }
  .official-strip__logo { justify-self: start; }
  .official-strip__logo--end { justify-self: end; }
  .official-strip__line { font-size: var(--fs-md); }
  .official-strip__line--lead { font-size: var(--fs-lg); }
}
@media screen and (min-width: 64rem) {
  .official-strip { --logo-size: 4.5rem; }
}

/* Printed (a visitor printing the success card): the crests and the authority lines are the
   only thing that says who issued the sheet, so the strip STAYS — as a plain letterhead
   without the surface fill (the large decorative portraits below are hidden instead). */
@media print {
  .official-strip {
    --logo-size: 2.5rem;
    background: none;
    color: #000000;
    border-block-end: 1px solid #777777;
  }
  .official-strip__line { color: #000000; }
}

/* --------------------------------------------------------------------------
   2. Hero (teal band with the platform name)
   -------------------------------------------------------------------------- */
.register-hero {
  padding-block: var(--space-8) calc(var(--space-10) + var(--space-5));
}
.register-hero__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.register-hero__mark {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 2px currentColor, var(--shadow-2);
}
/* Title block as one centred unit: «استمارة تسجيل البيانات» sits under the middle of the name
   instead of hugging the start edge. */
.register-hero__text { min-inline-size: 0; text-align: center; }
.register-hero__title {
  margin-block-end: var(--space-1);
  overflow-wrap: anywhere;
}
.register-hero .hero__subtitle { overflow-wrap: anywhere; }
/* Placeholder bar while the name loads — light on the teal band. */
.register-hero [data-platform-name]:empty::before {
  background: currentColor;
  opacity: 0.3;
}

@media (max-width: 30rem) {
  .register-hero { padding-block: var(--space-6) calc(var(--space-9) + var(--space-5)); }
  .register-hero__inner { gap: var(--space-3); }
  .register-hero__mark { inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius); }
  .register-hero .hero__subtitle { font-size: var(--fs-md); }
}

/* --------------------------------------------------------------------------
   Official portraits in the header (admin → الإعدادات → «الصور الرسمية»)
   register.js adds .has-portraits + data-portraits="1|2|3" to the inner row and fills
   #official-portraits; with none, nothing here applies and the header is unchanged.
   Phones: one centred, compact row under the title (a single portrait sits beside its caption
   to keep the header short; 2–3 share one small frame size). ≥ 48rem: beside the title block on
   the inline-end side (left in RTL) when both fit; otherwise the portraits drop to a centred row
   under the title instead of squeezing it — the title always stays the dominant element.
   -------------------------------------------------------------------------- */
.register-hero__inner.has-portraits {
  flex-wrap: wrap;
  row-gap: var(--space-3);
}
.register-hero__inner.has-portraits .register-hero__text { flex: 1 1 0; }
.register-hero__portraits { flex: 1 0 100%; min-inline-size: 0; }

.portraits {
  --portrait-w: 4.5rem;     /* image width (height follows from 4:5) */
  --portrait-col: 22rem;    /* column width: captions may be wider than the image */
  --portrait-count: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--portrait-count), minmax(0, var(--portrait-col)));
  justify-content: center;
  align-items: start;
  gap: var(--space-3);
}
/* Two or three on a phone: the same small frame (two are never taller than three), one row. */
.portraits[data-count="2"] {
  --portrait-count: 2;
  --portrait-w: 3.5rem;
  --portrait-col: 11rem;
  column-gap: var(--space-6);
}
.portraits[data-count="3"] {
  --portrait-count: 3;
  --portrait-w: 3.5rem;
  --portrait-col: 1fr;
  gap: var(--space-2);
  max-inline-size: 25rem;
  margin-inline: auto;
}

.portrait { min-inline-size: 0; }
.portrait__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
.portrait__img {
  display: block;
  flex-shrink: 0;
  inline-size: var(--portrait-w);
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  border: 2px solid var(--color-gold);   /* thin gold ring — the medal accent */
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.12);   /* while the image loads */
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.18), 0 6px 18px rgb(0 0 0 / 0.28);
}
.portrait__caption {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  line-height: 1.35;
  overflow-wrap: anywhere;   /* long names wrap inside their column, never overflow */
}
.portrait__name,
.portrait__title { text-wrap: balance; }   /* even lines, no one-word last line */
/* Small label above the name (e.g. «إهداء» over the Governor): letter-spaced, gold-tinted white. */
.portrait__kicker {
  color: color-mix(in srgb, var(--color-gold) 65%, #FFFFFF);
  font-size: 0.6875rem;   /* 11px — never competes with the name */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  line-height: 1.4;
  opacity: 0.92;
}
.portrait__name {
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.portrait__title {
  color: rgb(255 255 255 / 0.86);
  font-size: 0.8125rem;   /* 13px on phones: smaller than the name */
  font-weight: var(--fw-semibold);
}
/* Phones, a single portrait: image beside its caption (much shorter than stacked). */
.portraits[data-count="1"] .portrait__figure {
  flex-direction: row;
  justify-content: center;
  text-align: start;
  gap: var(--space-3);
}
.portraits[data-count="1"] .portrait__name { font-size: var(--fs-md); }
.portraits[data-count="1"] .portrait__title { font-size: var(--fs-sm); }

/* Placeholders while the settings load (.portraits--placeholder, built by register.js from the
   captions remembered from the last visit) reuse these exact boxes: an empty span.portrait__img
   frame shows the same gold ring and translucent fill as an image that is still loading. */

@media screen and (min-width: 48rem) {
  .register-hero__inner.has-portraits {
    column-gap: var(--space-5);
    row-gap: var(--space-5);
  }
  /* The title asks for its one-line width; when it and the portraits do not fit side by side,
     the portraits wrap to their own centred row below (never squeezing the title). */
  .register-hero__inner.has-portraits .register-hero__text {
    flex: 1 1 auto;
    max-inline-size: calc(100% - 3.5rem - var(--space-5));
  }
  .register-hero__inner.has-portraits .register-hero__portraits {
    flex: 0 0 auto;
    margin-inline: auto;
  }
  /* 2–3 portraits: their own full-width row under the title, pushed out to the two ends of the
     form column below (the hero inner is the same .container--narrow the form card uses), so the
     portraits line up with the white card's edges instead of huddling in the middle. */
  .register-hero__inner[data-portraits="2"] .register-hero__portraits,
  .register-hero__inner[data-portraits="3"] .register-hero__portraits {
    flex: 1 0 100%;
    margin-inline: 0;
  }
  .portraits[data-count="2"],
  .portraits[data-count="3"] {
    inline-size: 100%;
    max-inline-size: none;
    margin-inline: 0;
    grid-template-columns: repeat(var(--portrait-count), minmax(0, var(--portrait-col)));
    justify-content: space-between;
  }
  /* Each column is exactly one frame wide, so space-between lands the outer photos right on the
     form card's edges. The caption stays centred on its own photo and is allowed to be wider than
     the frame: it spills evenly into the hero's side margins (capped below so the page never
     scrolls sideways). */
  .portraits[data-count="2"],
  .portraits[data-count="3"] { --portrait-col: var(--portrait-w); }
  .portraits[data-count="2"] .portrait__caption,
  .portraits[data-count="3"] .portrait__caption {
    inline-size: 13rem;
    /* Wider than the frame, so it is centred by align-self and overflows evenly on both sides.
       (An auto inline margin would NOT centre it here: with negative free space auto margins
       resolve to 0 and the caption would hang off one side only.) */
    max-inline-size: calc(var(--portrait-w) + 2 * var(--gutter));
    align-self: center;
  }

  .portraits { --portrait-w: 7.5rem; --portrait-col: 14rem; gap: var(--space-4); }
  .portraits[data-count="1"] .portrait__figure { flex-direction: column; text-align: center; gap: var(--space-2); }
  .portraits[data-count="1"] .portrait__name,
  .portrait__name { font-size: var(--fs-sm); }
  .portraits[data-count="1"] .portrait__title,
  .portrait__title { font-size: var(--fs-xs); }
  /* Tablets: smaller frames so three still fit across the row. The column stays exactly one frame
     wide (set above) — the caption is what spills, centred, into the side margins. */
  .portraits[data-count="2"] { --portrait-w: 6.5rem; column-gap: var(--space-4); }
  .portraits[data-count="3"] {
    --portrait-w: 4.75rem;
    gap: var(--space-3);
    max-inline-size: none;
  }
}
@media screen and (min-width: 64rem) {
  .portraits[data-count="3"] { --portrait-w: 5.5rem; }
}
/* Wide screens: room for larger frames. */
@media screen and (min-width: 80rem) {
  .portraits[data-count="3"] { --portrait-w: 6rem; }
}

@media print {
  .register-hero__portraits { display: none !important; }
}

/* --------------------------------------------------------------------------
   Main column: ~760px max, first card overlaps the hero slightly
   -------------------------------------------------------------------------- */
.register-main { padding-block-start: 0; }
.register-container {
  position: relative;
  z-index: 1;
  margin-block-start: calc(-1 * var(--space-9));
}
.register-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
/* Views and the form use flex gaps; drop base's sibling-card margin to avoid double spacing. */
.register-view > .card + .card,
.register-form > .card + .card { margin-block-start: 0; }

/* Small phones: slightly tighter cards so fields get the width. */
@media (max-width: 24rem) {
  .register-container .card { --card-pad: var(--space-4); }
}

/* Icons inserted into static buttons by register.js */
.btn > [data-icon-name] { display: inline-flex; }

/* --------------------------------------------------------------------------
   Loading skeleton (mirrors the intro card + first section)
   -------------------------------------------------------------------------- */
.register-skeleton .card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.register-skeleton__short { inline-size: 70%; }
.register-skeleton__heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block-end: var(--space-4);
}
.register-skeleton__heading .skeleton--title { flex: 1 1 auto; max-inline-size: 45%; }
.register-skeleton__step {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex-shrink: 0;
  border-radius: 50%;
}
.register-skeleton__label { inline-size: 35%; }
.register-skeleton__input {
  block-size: var(--control-h);
  border-radius: var(--radius);
  margin-block-end: var(--space-3);
}

/* --------------------------------------------------------------------------
   State cards: settings failed to load / registration closed
   -------------------------------------------------------------------------- */
.register-state {
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  padding-block: var(--space-8);
}
.register-state__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
}
.register-state__icon .icon { --icon-size: 2.25rem; }
.register-state__icon--error {
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
}
/* Icon fallback when register.js never ran (boot-guard.js shows this view; JS icons are missing). */
.register-state__icon--error:empty::before {
  content: '';
  inline-size: 2.25rem;
  block-size: 2.25rem;
  background: currentColor;
  -webkit-mask: var(--icon-warning) center / contain no-repeat;
  mask: var(--icon-warning) center / contain no-repeat;
}
.register-state__title { margin: 0; font-size: var(--fs-xl); }
.register-state__text {
  margin: 0;
  max-inline-size: 32rem;
  color: var(--color-text-muted);
}
.register-state__alert { inline-size: 100%; text-align: start; }

/* --------------------------------------------------------------------------
   Intro card ("ستحتاج إلى…")
   -------------------------------------------------------------------------- */
.register-intro__title { font-size: var(--fs-xl); margin-block-end: var(--space-2); }
.register-intro__text { color: var(--color-text-muted); margin-block-end: var(--space-4); }
.register-checklist {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.register-checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}
.register-checklist__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
}
.register-checklist__icon .icon { --icon-size: 1.25rem; }
.register-intro__note {
  margin: 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   Form sections
   -------------------------------------------------------------------------- */
.register-form { gap: var(--space-5); }
.register-section { scroll-margin-block-start: var(--space-4); }
.register-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.register-privacy { margin: 0; }

/* Error summary / server feedback (live region; takes no space while empty) */
.register-feedback:not(:empty) { margin-block-end: var(--space-4); }
.register-alert__list {
  margin: var(--space-2) 0 0;
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-1);
}
.register-alert__link {
  display: inline-block;
  padding-block: var(--space-1);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.register-form__note { margin: 0; text-align: center; }

/* Sticky, large submit bar (+ upload progress) */
.register-submit > * { flex: 1 1 100%; }
.register-submit__progress {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}
/* Progress bar + «إلغاء الإرسال» side by side when there is room, stacked otherwise. */
.register-submit__progress:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.register-submit__progress > .progress-block { flex: 1 1 12rem; min-inline-size: 0; }
.register-submit__cancel { flex: 0 0 auto; margin-inline-start: auto; }

/* --------------------------------------------------------------------------
   Success card
   -------------------------------------------------------------------------- */
.register-success {
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  padding-block: var(--space-8);
}
.register-success__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 5.5rem;
  block-size: 5.5rem;
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success);
  box-shadow: 0 0 0 8px var(--color-surface-2);
  animation: register-pop var(--dur-slow) var(--ease) both;
}
.register-success__icon .icon { --icon-size: 3rem; }
.register-success__title {
  margin: 0;
  color: var(--color-success-text);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, var(--fs-2xl));
}
.register-success__message {
  margin: 0;
  max-inline-size: 34rem;
  font-size: var(--fs-lg);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.register-success__ticket {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  max-inline-size: 26rem;
  padding: var(--space-5) var(--space-4);
  border: 2px dashed var(--color-primary-soft-2);
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
}
.register-success__label {
  margin: 0;
  font-weight: var(--fw-bold);
  color: var(--color-primary-text);
}
.register-success__number { margin: 0; overflow-wrap: anywhere; }
.register-success__name {
  margin: 0;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.register-success__name bdi { color: var(--color-text); font-weight: var(--fw-bold); }
.register-success__ticket .btn { margin-block-start: var(--space-2); }
.register-success__actions {
  inline-size: 100%;
  max-inline-size: 26rem;
  margin-block-start: var(--space-2);
}
@keyframes register-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.register-footer p { margin: 0; }
.register-footer .register-footer__name {
  margin-block-end: var(--space-1);
  color: var(--color-text);
  font-weight: var(--fw-bold);
}

/* --------------------------------------------------------------------------
   Print (e.g. printing the success card with the registration number)
   -------------------------------------------------------------------------- */
@media print {
  .register-container { margin-block-start: 0; }
  .register-hero { padding-block: 0 var(--space-4); }
  .register-hero__mark { box-shadow: none; }
  .register-success__icon { box-shadow: none; animation: none; }
}