/* The sign-in screen's look (#163).

   Its own file and its own `:root`, the same split welcome.css and
   settings.css argue for: a stylesheet shared between pages drifts the moment one of them
   needs a colour the others do not. The token VALUES are copied from
   welcome.css deliberately -- this is the app's existing palette, not a new one
   for one screen. This is the first thing an invited learner ever sees, and a
   sign-in page that does not look like the product it guards reads as a
   phishing page. */

:root {
  color-scheme: light dark;
  --chalk:#F2F1EC; --surface:#FBFAF7; --ink:#17191E; --muted:#6E6A60;
  --rule:#D9D5CB; --blue:#2A4FC4; --clay:#B44A32; --on-accent:#FFFFFF;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --ui:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --chalk:#15171C; --surface:#1D2027; --ink:#E7E4DD; --muted:#9A9487;
    --rule:#31353E; --blue:#8AA0F0; --clay:#DE8168; --on-accent:#15171C;
  }
}
/* #2617: the in-app theme override. `:root[data-theme="dark"]`/`["light"]`
   carry the SAME tokens as the `@media` block above and the bare `:root`
   above it, byte for byte -- see settings.css's own twin for why an
   unconditional attribute selector outranks both the bare rule and the
   media block on specificity alone (0-2-0 against 0-1-0 either way), so
   whichever one is present always wins regardless of what the OS reports,
   and neither is present for `auto`, which leaves the two rules above to
   decide exactly as they did before this ticket.
   tests/test_contrast_sweep.py::test_data_theme_palettes_are_synonyms_of_the_media_palettes
   pins that these stay byte-identical to their media twins. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --chalk:#15171C; --surface:#1D2027; --ink:#E7E4DD; --muted:#9A9487;
  --rule:#31353E; --blue:#8AA0F0; --clay:#DE8168; --on-accent:#15171C;
}
:root[data-theme="light"] {
  color-scheme: light;
  --chalk:#F2F1EC; --surface:#FBFAF7; --ink:#17191E; --muted:#6E6A60;
  --rule:#D9D5CB; --blue:#2A4FC4; --clay:#B44A32; --on-accent:#FFFFFF;
}

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--ui);
}

.login {
  max-width: 22rem;
  margin: 0 auto;
  /* `env(safe-area-inset-*)` rather than a fixed margin: this is the first
     screen on a notched phone, and a form that starts under the notch is the
     worst available first impression. */
  padding: calc(env(safe-area-inset-top, 0px) + 3rem) 1.25rem
           calc(env(safe-area-inset-bottom, 0px) + 2rem);
}

.login-mark {
  font-family: var(--display);
  font-size: 2.1rem;
  margin: 0 0 .25rem;
  letter-spacing: -0.01em;
}
.login-sub { margin: 0 0 2rem; color: var(--muted); font-size: .95rem; }

.login-form { display: flex; flex-direction: column; gap: .3rem; }
.login-label { font-size: .85rem; color: var(--muted); margin-top: .8rem; }

.login-form input {
  /* 16px minimum, and this is a real iOS behaviour rather than a preference:
     Safari zooms the page when a focused input's text is under 16px, and the
     learner then has to pinch back out to find the button. */
  font-size: 1rem;
  font-family: var(--ui);
  padding: .7rem .75rem;
  border: 1px solid var(--rule);
  border-radius: .5rem;
  background: var(--surface);
  color: var(--ink);
}
.login-form input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* The password field and its reveal button share one box, so the button reads
   as part of the field rather than as a control that happens to sit near it.
   The input keeps its own border; the wrapper adds no second one. */
.login-field { position: relative; display: flex; }
.login-field input {
  flex: 1;
  /* Restated, not inherited. `.login-form input` above already sets it, but
     `tests/js/test_css_contract.mjs` reads each focusable-text-entry rule on
     its own and cannot confirm an inherited value clears iOS Safari's 16px
     zoom-on-focus floor -- and it was right to ask: a later change to the
     selector above would take this field's protection with it silently. */
  font-size: 1rem;
  /* Room for the button, so a long password never runs underneath it. The RTL
     pair matters even on an English-only form: iOS renders a password field's
     dots in the page direction, and this app is one `dir="rtl"` away from
     Hebrew everywhere else. */
  padding-inline-end: 3rem;
}

.login-reveal {
  /* `display: none` is the default here and `:not([hidden])` opts in below.

     Any `display` on this button beats the browser's own
     `[hidden] { display: none }`, so declaring `flex` for the centring -- which
     is what this rule wanted -- leaves the control painting and tappable on a
     page whose JS never ran. That is exactly the degraded state login.js's
     `hidden = false` exists to avoid. Caught here by #866's guard,
     tests/js/test_hidden_display_contract.mjs -- kept on one line because a
     wrapped filename is one nobody can grep for. */
  display: none;
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  /* 44px is Apple's minimum comfortable tap target -- the same number and the
     same reason as `.login-button` below. A reveal control that needs a
     careful thumb is worse than none, because the learner taps it, misses,
     and loses their place in the field. */
  min-width: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
/* The centring the rule above wanted, applied only when the button is actually
   showing. */
.login-reveal:not([hidden]) { display: flex; }
.login-reveal:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: .5rem; }
.login-reveal[aria-pressed="true"] { color: var(--ink); }

/* The eye, drawn in CSS rather than shipped as an SVG or an emoji. An emoji
   renders as a different picture on every platform and cannot take a colour;
   an inline SVG would be the only one on this page. Two elements: the outline
   is the button's own ::before, the pupil is the span. */
.login-reveal-icon {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
}
.login-reveal-icon::before {
  content: "";
  position: absolute;
  inset: 18% 0;
  border: 1.5px solid currentColor;
  /* The lens: a circle at one end of each radius pair gives the pointed-oval
     shape an eye has, which a plain ellipse does not. */
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.login-reveal-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .38rem;
  height: .38rem;
  margin: -.19rem 0 0 -.19rem;
  border-radius: 50%;
  background: currentColor;
}
/* Struck through when the password is showing: the icon states what is true
   now, not what the next tap will do. Both readings are defensible and the
   `aria-label` says which one this is ("Hide password" while revealed), so the
   two cannot disagree. */
.login-reveal[aria-pressed="true"] .login-reveal-icon {
  /* A diagonal cut across the eye, in the icon's own colour. */
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), currentColor calc(50% - 1px),
                    currentColor calc(50% + 1px), transparent calc(50% + 1px));
}

.login-button {
  margin-top: 1.35rem;
  /* 44px is Apple's minimum comfortable tap target. A sign-in button needing a
     careful thumb is the first thing a tester complains about. */
  min-height: 44px;
  font: 1rem var(--ui);
  border: 0;
  border-radius: .5rem;
  background: var(--blue);
  color: var(--on-accent);
  cursor: pointer;
}
/* WCAG 1.4.3 exempt: the success criterion does not apply to a disabled
   control, and the dimming IS the affordance -- a disabled button that meets
   AA contrast does not read as disabled. Cited here because the contrast sweep
   silences this row permanently once it sees `[disabled]`, and a silenced row
   with no reason above it is worse than one that keeps nagging (#723). The
   button is only disabled for the moment a sign-in request is in flight. */
.login-button[disabled] { opacity: .55; cursor: default; }

.login-error {
  margin: .9rem 0 0;
  padding: .6rem .7rem;
  border: 1px solid var(--clay);
  border-radius: .5rem;
  color: var(--clay);
  font-size: .9rem;
}

.login-note { margin-top: 2.75rem; font-size: .95rem; color: var(--muted); }
/* The way in for a stranger (#3041): readable, and in the page's own blue. */
.login-note a { color: var(--blue); font-weight: 600; }