/*
 * NAWA identity pages. Colours, spacing, radius and type come from tokens.css, which is generated from
 * packages/ui/src/tokens.ts (ADR-0015), so these pages match the portals in light, dark and system themes.
 * Logical properties only, so Arabic (RTL) needs no overrides. No inline styles or scripts (strict CSP).
 */
/* Brand fonts: self-hosted copies of packages/ui/assets/fonts (SIL OFL), Latin + Arabic subsets, font-display: swap. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "El Messiri"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/el-messiri-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/almarai-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/almarai-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--nawa-font-sans);
  font-size: var(--nawa-font-size-md);
  line-height: var(--nawa-line-height-normal);
  color: var(--nawa-color-text);
  background: var(--nawa-color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2 { line-height: var(--nawa-line-height-tight); font-family: var(--nawa-font-display); }
p { margin: 0; }
a { color: var(--nawa-color-accent); text-underline-offset: 0.15em; }
a:hover { color: var(--nawa-color-accent-hover); }
:focus-visible { outline: 2px solid var(--nawa-color-focus); outline-offset: 2px; border-radius: var(--nawa-radius-sm); }
::selection { background: var(--nawa-color-accent-soft); color: var(--nawa-color-accent-soft-text); }
.icon { flex-shrink: 0; inline-size: 1.25rem; block-size: 1.25rem; }
[dir="rtl"] .icon--flip { transform: scaleX(-1); }

/* Skip link */
.skip {
  position: absolute; z-index: 100;
  inset-inline-start: var(--nawa-space-4); inset-block-start: -100px;
  padding-block: var(--nawa-space-2); padding-inline: var(--nawa-space-4);
  background: var(--nawa-color-surface); color: var(--nawa-color-text);
  border: 2px solid var(--nawa-color-accent); border-radius: var(--nawa-radius-md);
  box-shadow: var(--nawa-shadow-md);
}
.skip:focus { inset-block-start: var(--nawa-space-3); }

/* Page frame */
.split { min-block-size: 100dvh; display: flex; flex-direction: column; background: var(--nawa-color-bg); }
.split__panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; min-block-size: 6.5rem;
  padding: var(--nawa-space-5);
  background: var(--nawa-color-brand-navy); color: var(--nawa-color-on-brand);
}
.pattern { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: -1; inline-size: 100%; block-size: 100%; }
.pattern__c { fill: var(--nawa-color-brand); }
.pattern__p { fill: var(--nawa-color-brand-peach); }
.pattern__t { fill: var(--nawa-color-brand-teal); }
.pattern__k { fill: var(--nawa-color-brand-pink); }
.split__panel-content { display: grid; gap: var(--nawa-space-3); max-inline-size: 26rem; padding: var(--nawa-space-4); border-radius: var(--nawa-radius-lg); background: var(--nawa-color-brand-navy); }
.split__title { color: var(--nawa-color-on-brand); font-family: var(--nawa-font-display); font-size: var(--nawa-font-size-xl); font-weight: var(--nawa-font-weight-bold); line-height: var(--nawa-line-height-tight); }
.split__text { display: none; color: var(--nawa-color-on-brand); }
.page { flex: 1; display: flex; flex-direction: column; min-inline-size: 0; }
@media (min-width: 64rem) {
  .split { flex-direction: row; }
  .pattern { block-size: 55%; }
  .split__panel { position: sticky; inset-block-start: 0; flex: 0 0 clamp(22rem, 36vw, 32rem); align-items: flex-end; min-block-size: 100dvh; padding: var(--nawa-space-10); }
  .split__panel-content { padding: var(--nawa-space-6); gap: var(--nawa-space-4); }
  .split__title { font-size: var(--nawa-font-size-3xl); }
  .split__text { display: block; }
}
.top {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--nawa-space-3);
  inline-size: 100%; max-inline-size: 64rem; margin-inline: auto;
  padding-block: var(--nawa-space-3); padding-inline: var(--nawa-space-4);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--nawa-space-3); align-self: flex-start;
  min-block-size: var(--nawa-touch-target); color: var(--nawa-color-text); text-decoration: none; border-radius: var(--nawa-radius-md);
}
.brand:hover { color: var(--nawa-color-text); }
.logo { display: block; block-size: 2rem; inline-size: auto; }
.logo--dark { display: none; }
:root[data-theme="dark"] .logo--light { display: none; }
:root[data-theme="dark"] .logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .logo--light { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .logo--dark { display: block; }
}
.brand__name {
  padding-inline-start: var(--nawa-space-3); border-inline-start: 1px solid var(--nawa-color-border-strong);
  font-family: var(--nawa-font-display); font-size: var(--nawa-font-size-xl); font-weight: var(--nawa-font-weight-bold); line-height: 1; letter-spacing: 0.02em;
}
.brand__suffix { font-size: var(--nawa-font-size-sm); font-weight: var(--nawa-font-weight-medium); color: var(--nawa-color-text-muted); }
.lang { margin: 0; }

.main {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  inline-size: 100%; padding-block: var(--nawa-space-4) var(--nawa-space-10); padding-inline: var(--nawa-space-4);
}
.main:focus { outline: none; }

.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--nawa-space-2) var(--nawa-space-4);
  inline-size: 100%; max-inline-size: 64rem; margin-inline: auto;
  padding-block: var(--nawa-space-4) var(--nawa-space-6); padding-inline: var(--nawa-space-4);
  font-size: var(--nawa-font-size-sm); color: var(--nawa-color-text-muted);
}
.foot__note { display: inline-flex; align-items: center; gap: var(--nawa-space-2); }
.foot__note .icon { inline-size: 1rem; block-size: 1rem; }

/* Card */
.card {
  inline-size: 100%; max-inline-size: 28rem;
  padding-block: var(--nawa-space-8); padding-inline: var(--nawa-space-6);
  background: var(--nawa-color-surface);
  border: 1px solid var(--nawa-color-border); border-radius: var(--nawa-radius-lg);
  box-shadow: var(--nawa-shadow-md);
  display: flex; flex-direction: column; gap: var(--nawa-space-5);
}
.card--wide { max-inline-size: 44rem; }
.card__title { margin: 0; font-size: var(--nawa-font-size-2xl); font-weight: var(--nawa-font-weight-bold); letter-spacing: -0.01em; }
.card__intro { margin-block-start: calc(-1 * var(--nawa-space-3)); color: var(--nawa-color-text-muted); }
.card__text { color: var(--nawa-color-text); }
.card__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nawa-space-4);
  padding-block-start: var(--nawa-space-4); border-block-start: 1px solid var(--nawa-color-border);
  font-size: var(--nawa-font-size-sm);
}
.card__links a { display: inline-flex; align-items: center; min-block-size: var(--nawa-touch-target); font-weight: var(--nawa-font-weight-medium); }
.stack { display: grid; gap: var(--nawa-space-3); }
.actions { display: flex; flex-wrap: wrap; gap: var(--nawa-space-3); }

/* Forms */
.form { display: grid; gap: var(--nawa-space-4); margin: 0; }
.field { display: grid; gap: var(--nawa-space-1); }
.field__label { font-size: var(--nawa-font-size-sm); font-weight: var(--nawa-font-weight-semibold); color: var(--nawa-color-text); }
.field__hint { font-size: var(--nawa-font-size-sm); color: var(--nawa-color-text-muted); }
.input {
  inline-size: 100%; min-block-size: var(--nawa-touch-target);
  padding-block: var(--nawa-space-2); padding-inline: var(--nawa-space-3);
  font: inherit; font-size: 1rem; color: var(--nawa-color-text);
  background: var(--nawa-color-surface);
  border: 1px solid var(--nawa-color-border-strong); border-radius: var(--nawa-radius-md);
  transition: border-color var(--nawa-motion-fast) var(--nawa-motion-easing), box-shadow var(--nawa-motion-fast) var(--nawa-motion-easing);
}
.input:hover { border-color: var(--nawa-color-text-subtle); }
.input:focus-visible { outline: none; border-color: var(--nawa-color-focus); box-shadow: 0 0 0 3px var(--nawa-color-accent-soft), 0 0 0 1px var(--nawa-color-focus); }
.input[aria-invalid="true"], .input:user-invalid { border-color: var(--nawa-color-danger); }
.input[aria-invalid="true"]:focus-visible, .input:user-invalid:focus-visible { box-shadow: 0 0 0 3px var(--nawa-color-danger-soft), 0 0 0 1px var(--nawa-color-danger); }
.input[type="email"], .input--mono { direction: ltr; }
[dir="rtl"] .input[type="email"], [dir="rtl"] .input--mono { text-align: end; }
.input--mono { font-family: var(--nawa-font-mono); letter-spacing: 0.04em; }
/* One-time codes: large, spaced digits, always left-to-right. */
.input--code {
  direction: ltr; text-align: center;
  font-family: var(--nawa-font-mono); font-size: var(--nawa-font-size-2xl); font-weight: var(--nawa-font-weight-semibold);
  letter-spacing: 0.35em; padding-inline-start: calc(var(--nawa-space-3) + 0.35em);
  min-block-size: 3.5rem;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--nawa-space-2);
  min-block-size: var(--nawa-touch-target);
  padding-block: var(--nawa-space-2); padding-inline: var(--nawa-space-5);
  border: 1px solid transparent; border-radius: var(--nawa-radius-md);
  font: inherit; font-size: var(--nawa-font-size-md); font-weight: var(--nawa-font-weight-semibold); line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--nawa-motion-fast) var(--nawa-motion-easing), border-color var(--nawa-motion-fast) var(--nawa-motion-easing);
}
.btn--block { inline-size: 100%; }
.btn--sm { font-size: var(--nawa-font-size-sm); padding-inline: var(--nawa-space-3); }
.btn--primary { background: var(--nawa-color-accent); color: var(--nawa-color-text-on-accent); font-weight: var(--nawa-font-weight-bold); box-shadow: var(--nawa-shadow-sm); }
.btn--primary:hover { background: var(--nawa-color-accent-hover); color: var(--nawa-color-text-on-accent); }
.btn--secondary { background: var(--nawa-color-surface-sunken); color: var(--nawa-color-text); border-color: var(--nawa-color-border); }
.btn--secondary:hover { background: var(--nawa-color-border); color: var(--nawa-color-text); }
.btn--ghost { background: transparent; color: var(--nawa-color-accent); }
.btn--ghost:hover { background: var(--nawa-color-accent-soft); color: var(--nawa-color-accent-soft-text); }
.btn--danger { background: var(--nawa-color-danger); color: var(--nawa-color-text-on-danger); }
.btn--danger:hover { background: var(--nawa-color-danger-hover); color: var(--nawa-color-text-on-danger); }
.btn:focus-visible { outline-offset: 3px; }

/* Alerts */
.alert {
  display: flex; align-items: flex-start; gap: var(--nawa-space-3);
  padding-block: var(--nawa-space-3); padding-inline: var(--nawa-space-4);
  border: 1px solid transparent; border-radius: var(--nawa-radius-md);
  font-size: var(--nawa-font-size-sm);
}
.alert > div { display: grid; gap: var(--nawa-space-1); }
.alert__title { font-weight: var(--nawa-font-weight-semibold); }
.alert--error { background: var(--nawa-color-danger-soft); border-color: var(--nawa-color-danger); color: var(--nawa-color-danger); }
.alert--success { background: var(--nawa-color-success-soft); border-color: var(--nawa-color-success); color: var(--nawa-color-success); }
.alert--warning { background: var(--nawa-color-warning-soft); border-color: var(--nawa-color-warning); color: var(--nawa-color-warning); }
.alert--info { background: var(--nawa-color-info-soft); border-color: var(--nawa-color-border); color: var(--nawa-color-text); }
.alert--info .icon { color: var(--nawa-color-info); }

/* Show/hide password (button enabled by js/password-toggle.js) */
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.password { position: relative; }
.password .input { padding-inline-end: calc(var(--nawa-touch-target) + var(--nawa-space-1)); }
.password__toggle {
  position: absolute; inset-block-start: 0; inset-inline-end: 0;
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--nawa-touch-target); block-size: var(--nawa-touch-target);
  padding: 0; border: 0; border-radius: var(--nawa-radius-md);
  background: transparent; color: var(--nawa-color-text-muted); cursor: pointer;
}
.password__toggle:hover { color: var(--nawa-color-text); }
.password__toggle[aria-pressed="true"] { color: var(--nawa-color-accent); }
.password__toggle[aria-pressed="true"] .password__eye { stroke-dasharray: 2 2; }

/* MFA enrollment */
.steps { display: grid; gap: var(--nawa-space-6); margin: 0; padding: 0; list-style: none; }
.step { display: grid; gap: var(--nawa-space-3); align-content: start; }
.step__title { display: flex; align-items: center; gap: var(--nawa-space-2); margin: 0; font-size: var(--nawa-font-size-lg); font-weight: var(--nawa-font-weight-semibold); }
.step__num {
  display: inline-flex; align-items: center; justify-content: center; inline-size: 1.75rem; block-size: 1.75rem;
  border-radius: var(--nawa-radius-full); background: var(--nawa-color-accent-soft); color: var(--nawa-color-accent-soft-text);
  font-size: var(--nawa-font-size-sm); font-weight: var(--nawa-font-weight-bold);
}
.step__text { color: var(--nawa-color-text-muted); font-size: var(--nawa-font-size-sm); }
/* The code itself stays black on white in both themes: scanners need the contrast. */
.qr {
  justify-self: center; padding: var(--nawa-space-3);
  border: 1px solid var(--nawa-color-border); border-radius: var(--nawa-radius-lg);
  background: var(--nawa-color-surface-subtle);
}
.qr__code { display: block; inline-size: 12.5rem; block-size: 12.5rem; border-radius: var(--nawa-radius-sm); }
.manual { border: 1px solid var(--nawa-color-border); border-radius: var(--nawa-radius-md); background: var(--nawa-color-surface-subtle); }
.manual > summary {
  display: flex; align-items: center; min-block-size: var(--nawa-touch-target);
  padding-inline: var(--nawa-space-4); cursor: pointer;
  font-size: var(--nawa-font-size-sm); font-weight: var(--nawa-font-weight-semibold); color: var(--nawa-color-accent);
}
.manual > summary:focus-visible { outline-offset: -2px; }
.manual__body { display: grid; gap: var(--nawa-space-2); padding-block: 0 var(--nawa-space-4); padding-inline: var(--nawa-space-4); }
.manual__label { font-size: var(--nawa-font-size-xs); font-weight: var(--nawa-font-weight-semibold); color: var(--nawa-color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.manual__link { font-size: var(--nawa-font-size-sm); }
.secret { font-family: var(--nawa-font-mono); direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.secret--key {
  display: block; padding-block: var(--nawa-space-2); padding-inline: var(--nawa-space-3);
  background: var(--nawa-color-surface); border: 1px dashed var(--nawa-color-border-strong); border-radius: var(--nawa-radius-md);
  font-size: var(--nawa-font-size-lg); letter-spacing: 0.06em; text-align: center; user-select: all;
}
@media (min-width: 40rem) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step + .step { padding-inline-start: var(--nawa-space-6); border-inline-start: 1px solid var(--nawa-color-border); }
}

/* Recovery codes */
.codes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nawa-space-2) var(--nawa-space-6);
  margin: 0; padding-block: var(--nawa-space-4); padding-inline: var(--nawa-space-8) var(--nawa-space-4);
  background: var(--nawa-color-surface-subtle); border: 1px dashed var(--nawa-color-border-strong); border-radius: var(--nawa-radius-md);
  font-family: var(--nawa-font-mono); font-size: var(--nawa-font-size-md); direction: ltr;
}
.codes li { padding-inline-start: var(--nawa-space-1); }
.codes li::marker { color: var(--nawa-color-text-subtle); font-size: var(--nawa-font-size-xs); }

/* Account overview */
.identity {
  display: flex; align-items: center; gap: var(--nawa-space-3);
  padding: var(--nawa-space-4); border-radius: var(--nawa-radius-lg);
  background: var(--nawa-color-surface-subtle); border: 1px solid var(--nawa-color-border);
}
.identity__avatar, .setting__icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--nawa-radius-md);
  background: var(--nawa-color-accent-soft); color: var(--nawa-color-accent-soft-text);
}
.identity__avatar { border-radius: var(--nawa-radius-full); }
.identity__label { font-size: var(--nawa-font-size-xs); font-weight: var(--nawa-font-weight-semibold); color: var(--nawa-color-text-muted); }
.identity__email { font-weight: var(--nawa-font-weight-semibold); overflow-wrap: anywhere; }
.section-title { margin: 0; font-size: var(--nawa-font-size-sm); font-weight: var(--nawa-font-weight-semibold); color: var(--nawa-color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.settings { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--nawa-color-border); border-radius: var(--nawa-radius-lg); }
.setting { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--nawa-space-3); padding: var(--nawa-space-4); }
.setting + .setting { border-block-start: 1px solid var(--nawa-color-border); }
.setting__text { flex: 1 1 14rem; display: grid; gap: var(--nawa-space-1); min-inline-size: 0; }
.setting__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nawa-space-2); font-weight: var(--nawa-font-weight-semibold); }
.setting__hint { font-size: var(--nawa-font-size-sm); color: var(--nawa-color-text-muted); }
.setting__links { display: flex; flex-wrap: wrap; gap: var(--nawa-space-1) var(--nawa-space-4); font-size: var(--nawa-font-size-sm); }
.setting__links a { display: inline-flex; align-items: center; min-block-size: var(--nawa-touch-target); }
.setting__action { align-self: center; }
.badge {
  display: inline-flex; align-items: center; padding-block: 1px; padding-inline: var(--nawa-space-2);
  border-radius: var(--nawa-radius-full); border: 1px solid transparent;
  font-size: var(--nawa-font-size-xs); font-weight: var(--nawa-font-weight-semibold);
}
.badge--on { background: var(--nawa-color-success-soft); color: var(--nawa-color-success); border-color: var(--nawa-color-success); }
.badge--off { background: var(--nawa-color-warning-soft); color: var(--nawa-color-warning); border-color: var(--nawa-color-warning); }

@media (min-width: 40rem) {
  .top, .foot { padding-inline: var(--nawa-space-6); }
  .main { padding-block-start: var(--nawa-space-8); }
  .card { padding-inline: var(--nawa-space-8); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
  .card, .alert, .input, .btn, .settings, .manual, .codes { border: 1px solid CanvasText; }
}