/*
 * The sign-in page. Data Value identity: Palatinate Blue #0033FA, RISD Blue
 * #0052FA, Electric Blue #009EFF, Charcoal #24282B, Anti-Flash White #E8ECEF,
 * Platinum #D7DEE4, Cadet Grey #92A7BA.
 *
 * One file, no framework, no inline style anywhere on the page (its
 * Content-Security-Policy forbids them). The typeface is the board's Madani
 * Arabic when a licensed copy is installed, and Cairo -- shipped here, SIL OFL
 * -- until then; see frontend/src/styles/dv-identity.css for the reasoning.
 */

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/cairo-arabic.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: 'Cairo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/cairo-latin.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: 'Cairo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/cairo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --brand: #0033fa;
  --brand-2: #0052fa;
  --accent: #009eff;
  --ink: #24282b;
  --muted: #5a6b7a;
  --canvas: #e8ecef;
  --line: #d7dee4;
  --line-strong: #b4c2ce;
  --paper: #ffffff;
  --danger: #c5303d;
  --danger-soft: #fdf0f1;
  --ok: #0f7a4d;
  --ok-soft: #ecf8f2;
  --radius: 34px;
  --ease: 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 28px;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Madani Arabic', 'Cairo', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 10; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #fff; text-decoration: none; transition: top var(--ease); }
.skip:focus { top: 16px; }

.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir='rtl'] .flip { transform: scaleX(-1); }

/* ---- the room behind the card: soft, out-of-focus brand shapes ------------- */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.backdrop i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; }
.backdrop i:nth-child(1) { width: 46vmax; height: 46vmax; inset-inline-end: -14vmax; top: -18vmax; background: radial-gradient(circle, rgba(0, 82, 250, 0.55), rgba(0, 82, 250, 0) 68%); }
.backdrop i:nth-child(2) { width: 38vmax; height: 38vmax; inset-inline-start: -14vmax; bottom: -16vmax; background: radial-gradient(circle, rgba(0, 158, 255, 0.5), rgba(0, 158, 255, 0) 68%); }
.backdrop i:nth-child(3) { width: 26vmax; height: 26vmax; inset-inline-start: 22vw; top: -12vmax; background: radial-gradient(circle, rgba(146, 167, 186, 0.6), rgba(146, 167, 186, 0) 68%); }

/* ---- the card ----------------------------------------------------------- */
.card {
  position: relative;
  z-index: 1;
  width: min(1060px, 100%);
  min-height: min(660px, calc(100vh - 56px));
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 80px -24px rgba(0, 20, 110, 0.32), 0 8px 24px -12px rgba(36, 40, 43, 0.18);
  overflow: hidden;
}

.pane {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 30px 46px 24px;
  min-width: 0;
}

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lockup { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lockup-mark { width: 38px; height: 38px; flex: none; }
.lockup-logo { max-height: 42px; max-width: 190px; object-fit: contain; }
.mark-a { fill: var(--accent); }
.mark-b { fill: var(--brand-2); }
.lockup-text { display: grid; line-height: 1.15; min-width: 0; }
.lockup-text strong { font-size: 16px; font-weight: 800; letter-spacing: 0.02em; }
.lockup-text span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color var(--ease), background var(--ease);
}
.lang:hover { border-color: var(--line-strong); background: #f6f8fa; }
.lang .icon { width: 16px; height: 16px; }

.views { flex: 1; display: flex; align-items: center; }
.view { width: 100%; max-width: 344px; margin: 0 auto; padding: 26px 0 18px; animation: rise 0.36s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.sub { margin: 6px 0 22px; color: var(--muted); font-size: 13.5px; }

/* ---- portal | desk ------------------------------------------------------ */
.modes {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--canvas);
  min-width: 0;
}
.mode { position: relative; z-index: 1; display: block; cursor: pointer; }
.mode input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mode span {
  display: block;
  padding: 9px 10px;
  border-radius: 999px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  transition: color var(--ease);
}
.mode input:checked + span { color: #fff; }
.mode input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 3px; }
/* The pill that slides under the chosen side. Logical: it sits at the
   inline-start half and moves a full width toward the inline-end. */
.mode-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  inset-inline-start: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  box-shadow: 0 6px 16px -6px rgba(0, 51, 250, 0.7);
  transition: transform var(--ease);
}
.modes:has(.mode:nth-of-type(2) input:checked) .mode-thumb { transform: translateX(100%); }
[dir='rtl'] .modes:has(.mode:nth-of-type(2) input:checked) .mode-thumb { transform: translateX(-100%); }
.mode-hint { margin: 9px 4px 20px; min-height: 18px; font-size: 12px; color: var(--muted); }

/* ---- fields ------------------------------------------------------------- */
.field { margin-bottom: 15px; }
.field label { display: block; margin: 0 16px 6px; font-size: 12.5px; font-weight: 600; color: #3d4a57; }
.field input {
  width: 100%;
  height: 50px;
  padding: 0 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  font-size: 15px;
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
[dir='rtl'] .field input[dir='ltr'] { text-align: right; }
.field input:hover { border-color: var(--muted); }
.field input:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0, 51, 250, 0.14); }
.field input[aria-invalid='true'] { border-color: var(--danger); }
.field input.code { text-align: center; letter-spacing: 0.4em; font-weight: 700; font-size: 18px; }
/* Keep the browser's autofill from repainting the pill yellow. */
.field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: var(--ink); }

.with-button { position: relative; }
.with-button input { padding-inline-end: 52px; }
.reveal {
  position: absolute;
  top: 5px;
  inset-inline-end: 5px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  transition: background var(--ease), color var(--ease);
}
.reveal:hover { background: var(--canvas); color: var(--ink); }

:where(button, a):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---- messages ----------------------------------------------------------- */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 2px 0 14px;
  padding: 11px 14px;
  border-radius: 16px;
  background: var(--danger-soft);
  color: #8f1f2a;
  font-size: 13px;
  line-height: 1.45;
}
.notice .icon { margin-top: 1px; color: var(--danger); }
.notice strong { display: block; color: #7a1822; font-size: 13.5px; }
.notice-ok { background: var(--ok-soft); color: #0b5c3a; }
.notice-ok .icon { color: var(--ok); }
.notice-block span { display: block; margin-top: 2px; }
.link-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}
.link-button .icon { width: 15px; height: 15px; color: #fff; margin: 0; }
.link-button span { margin: 0; }

/* ---- actions ------------------------------------------------------------ */
.primary {
  position: relative;
  width: 100%;
  height: 50px;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 14px 28px -14px rgba(0, 51, 250, 0.85);
  transition: transform var(--ease), box-shadow var(--ease), filter var(--ease);
}
.primary:hover { filter: brightness(1.07); box-shadow: 0 18px 32px -14px rgba(0, 51, 250, 0.9); }
.primary:active { transform: translateY(1px); }
.primary[aria-busy='true'] { cursor: progress; filter: saturate(0.8); }
.spinner { display: none; width: 17px; height: 17px; border-radius: 50%; border: 2.2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: spin 0.7s linear infinite; }
.primary[aria-busy='true'] .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.text-link { display: block; margin: 14px auto 0; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--brand); font-size: 13px; font-weight: 600; }
.text-link:hover { text-decoration: underline; }

.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--muted); font-size: 12px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.providers { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.provider { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 14px; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color var(--ease), background var(--ease); }
.provider:hover { border-color: var(--muted); background: #f6f8fa; }

.foot { text-align: center; font-size: 11.5px; color: var(--muted); }

/* ---- the artwork -------------------------------------------------------- */
.art { position: relative; min-height: 100%; background: var(--paper); }
.art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tile-mark { fill: none; stroke: #fff; stroke-width: 3; opacity: 0.13; }
.big-1 { fill: #009eff; opacity: 0.92; }
.big-2 { fill: #ffffff; opacity: 0.16; }
.big-3 { fill: #4d7bff; opacity: 0.85; }
/* The sheets start under the form and are cut away toward the artwork, so the
   white of the form runs straight into the top sheet. In RTL the form is on
   the other side, and the sheets are mirrored to follow it; the marks are in
   their own layer and are never mirrored. */
[dir='rtl'] .art-paper { transform: scaleX(-1); }
/* The marks are composed for a field that opens to the right. Mirrored
   paper opens it to the left, so the group moves over -- moved, not flipped:
   a logo is never mirrored. */
[dir='rtl'] .big-marks { transform: translateX(-215px); }
.paper-1 { fill: #ffffff; }
.paper-2 { fill: #f3f6f8; }
.paper-3 { fill: #e9edf1; }
.paper-4 { fill: #dbe2e9; }

/* ---- narrower: the artwork becomes a banner, the form a sheet over it ----- */
@media (max-width: 860px) {
  body { padding: 0; place-items: stretch; background: var(--paper); }
  .backdrop { display: none; }
  .card { width: 100%; min-height: 100vh; min-height: 100dvh; grid-template-columns: 1fr; grid-template-rows: 210px 1fr; border-radius: 0; box-shadow: none; overflow: visible; }
  .art { grid-row: 1; min-height: 0; overflow: hidden; }
  .pane {
    grid-row: 2;
    margin-top: -34px;
    padding: 22px 22px 18px;
    border-radius: 30px 30px 0 0;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 -18px 40px -22px rgba(0, 12, 74, 0.55);
  }
  .views { align-items: flex-start; }
  .view { padding-top: 20px; }
  h1 { font-size: 26px; }
}
@media (max-width: 860px) and (max-height: 620px) {
  .card { grid-template-rows: 120px 1fr; }
}
@media (max-width: 360px) {
  .lockup-text span { display: none; }
  .pane { padding-inline: 16px; }
}

/* Honour "reduce motion": nothing slides, fades or spins for show. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .spinner { animation-duration: 1.2s !important; }
}

/* Windows high-contrast and forced colours: borders carry the structure. */
@media (forced-colors: active) {
  .mode input:checked + span { outline: 2px solid; }
  .mode-thumb { display: none; }
  .primary, .link-button { border: 1px solid; }
}