/* ============================================================
 * Auth flow — sign-in, family-code entry, user picker, PIN modal,
 * flash messages.
 *
 * Kept separate from application.css so that file stays a verbatim
 * port of legacy/styles.css (the POC had no auth flow). Propshaft's
 * `stylesheet_link_tag :app` auto-includes every .css file here, in
 * alphabetical order — `auth.css` sorts after `application.css`, so
 * these rules win the cascade without needing `!important`.
 *
 * Every selector uses only :root tokens, so all four skins
 * (stage / forest / berry / cosmic) are covered for free.
 * ============================================================ */

/* ------------------------------------------------------------
 * Shared sign-in shell — used by both /signin and /signin/users
 * ------------------------------------------------------------ */
.signin {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 48px 24px calc(48px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  position: relative;
}

/* "Internal testing" badge — pre-deploy honesty banner. Sun-soft
   pill so it reads as a notice without alarming red. Plus Jakarta
   Sans 800 (not Orbitron — that lacks the ę in "wewnętrzne"). */
.testing-badge {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sun-soft);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: var(--shadow-press);
}

/* Brief welcome / TLDR shown above the family-code form. */
.signin-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.signin-brand {
  font-family: var(--font-display);
  font-size: clamp(48px, 16vw, 72px);
  line-height: 0.95;
  font-weight: 800;
  color: var(--hot);
  -webkit-text-stroke: 2px var(--line);
  text-shadow: 4px 4px 0 var(--line);
  letter-spacing: -0.02em;
}
.signin-tldr {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

/* Disclaimer under the CTA — quiet, small print. Sets early-stage
   expectations without alarming; calm, not a warning banner.
   Kept at --ink-soft (the lightest token still ~AA on --cream:
   4.8-6.2:1 across skins) — anything lighter would drop below AA. */
.signin-disclaimer {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

/* Stack of secondary CTAs below the family-code form: "Spróbuj demo"
   and "Załóż rodzinę". Keeps them off the primary action's main visual
   axis — present but quieter than "Dalej →". */
.signin-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 0;
}
.signin-cta-or {
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.signin-cta-stack form { margin: 0; }
.signin-cta-stack .btn-secondary { width: 100%; min-height: 56px; }
/* Plain text-link variant of .btn — no border/box-shadow, sits as a
   quieter tertiary action under the demo button. */
.btn-link {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--ink);
  text-transform: none;
  font-size: 15px;
  padding: 10px 8px;
  min-height: auto;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.btn-link:active { transform: translate(2px, 2px); box-shadow: none; }
/* Override the generic .signin a chip styling for the .btn-link variant
   used inside .signin-cta-stack — we want a plain text link there, not
   a bordered chip. */
.signin-cta-stack a.btn-link,
.signin a.btn-link {
  display: inline-flex;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 10px 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.signin-cta-stack a.btn-link:active,
.signin a.btn-link:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
.signin-cta-register { text-align: center; }

/* Registration form — fieldsets group Family/Rodzic/Dziecko. Calm
   stacked layout, no horizontal compression. */
.registration-form fieldset {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  margin: 0 0 12px;
  background: var(--paper);
  box-shadow: var(--shadow-card-soft);
}
.registration-form legend {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0 8px;
}
.registration-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.registration-form input[type="text"],
.registration-form input[type="password"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}
.registration-form input:focus {
  outline: none;
  border-color: var(--hot);
  box-shadow: var(--shadow-card-soft);
}
.registration-form .field-hint {
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Demo banner on /welcome when family.ephemeral? — calm sun-soft
   pill that nudges towards real signup without nagging. */
.demo-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--sun-soft);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-soft);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.demo-banner-label { font-weight: 800; }
.demo-banner-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 800;
}

/* Page footer on /signin — quiet link to /labs. Visually subordinate
   to the disclaimer above it. */
.page-footer {
  margin-top: 18px;
  text-align: center;
}
.page-footer .footer-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  letter-spacing: 0.02em;
  /* Override the .signin a chip rule for this specific footer link. */
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.page-footer .footer-link:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.signin h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 10vw, 44px);
  line-height: 1.05;
  color: var(--hot);
  -webkit-text-stroke: 1.5px var(--line);
  text-shadow: 3px 3px 0 var(--line);
  letter-spacing: -0.01em;
}

/* On /signin the big pink brand carries the page; the form heading
   ("kod rodziny") steps down to a quiet inky label so it doesn't
   compete. /signin/users keeps the prominent .signin h1 above. */
.signin h1.signin-form-heading {
  font-size: clamp(22px, 6vw, 26px);
  color: var(--ink);
  -webkit-text-stroke: 0;
  text-shadow: none;
  margin-top: 8px;
}

.signin > p {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.signin .muted {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 600;
}
.signin .muted strong {
  color: var(--ink);
  font-weight: 800;
}

/* Back link ("← zmień rodzinę") — a quiet bordered chip, not a
   default underlined link. Sits in a trailing <p>. */
.signin > p:has(> a),
.signin .back-link-row {
  margin: 8px 0 0;
}
.signin a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 18px;
  border: 2.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-card-soft);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.signin a:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-press);
}

/* ------------------------------------------------------------
 * Family-code text field (/signin)
 * ------------------------------------------------------------ */
.signin form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 4px 0 0;
}

.code-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  padding: 16px 20px;
  border: 2.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  box-shadow: var(--shadow-card-soft);
  transition: box-shadow 0.1s ease, border-color 0.1s ease;
}
.code-input::placeholder {
  color: var(--ink-soft);
  font-weight: 600;
}
.code-input:focus {
  outline: none;
  border-color: var(--hot);
  box-shadow: var(--shadow-card);
}

/* The submit button reuses .btn .btn-primary from application.css
   (markup carries those classes) — no extra rule needed here. */

/* ------------------------------------------------------------
 * User picker (/signin/users)
 * ------------------------------------------------------------ */
.user-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.user-list li {
  margin: 0;
}
.user-form {
  margin: 0;
}

/* Large tappable user card — name + role on one row. 72px min
   height keeps it a comfortable target for 8-11 year olds. */
.user-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  border: 2.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.user-btn:active {
  transform: translate(3px, 3px);
  box-shadow: var(--shadow-press);
}

.user-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Role rendered as a pill badge — the system's badge idiom. Uses
   Plus Jakarta Sans 800 (not Orbitron) so it renders Polish glyphs
   correctly if the role copy is ever localised (dziecko / rodzic). */
.user-role {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);            /* --ink (not --ultra) — AA on the soft tint */
  background: var(--ultra-soft);
  border: 1.5px solid var(--ultra);
  border-radius: 999px;
  padding: 5px 11px;
  font-weight: 800;
  white-space: nowrap;
}

/* ------------------------------------------------------------
 * PIN modal — one .pin-overlay per user, toggled by the `pin`
 * Stimulus controller (sets `hidden`, fills `.filled` on dots).
 * ------------------------------------------------------------ */
.pin-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(27, 10, 46, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: pinScrimIn 0.14s ease both;
}
/* The explicit `display:flex` above would override the UA's
   `display:none` for the `hidden` attribute — re-assert it, or the
   modal shows on page load. */
.pin-overlay[hidden] {
  display: none;
}

@keyframes pinScrimIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pin-dialog {
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
  padding: 26px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  border: 2.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: pinDialogIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes pinDialogIn {
  from { transform: translateY(16px) scale(0.94); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.pin-title {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

/* Four PIN dots — empty rings that fill as digits are entered. */
.pin-dots {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.pin-dots span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--line);
  background: var(--paper);
  transition: background 0.12s ease, transform 0.12s ease;
}
.pin-dots span.filled {
  background: var(--hot);
  transform: scale(1.15);
}

/* 3-column keypad: digits 1-9, then × / 0 / ⌫.
   NB: 3 columns — not the 4-column .keypad used for numeric answers. */
.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Clones the .kp-key recipe from application.css. */
.pin-key {
  -webkit-appearance: none;
  appearance: none;
  min-height: 64px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-card-soft);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 0.06s ease, box-shadow 0.06s ease, background 0.12s ease;
}
.pin-key:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-press);
  background: var(--hot-soft);
}
.pin-key-cancel {
  background: var(--sun-soft);
  color: var(--ink);
}
.pin-key-back {
  background: var(--ultra-soft);
  color: var(--ink);            /* --ink, not --ultra — AA on the soft tint */
  font-size: 24px;
}

@media (max-width: 380px) {
  .pin-keypad { gap: 8px; }
  .pin-key { min-height: 56px; font-size: 24px; }
}

/* ------------------------------------------------------------
 * Flash messages — calm soft-fill banners, no harsh red
 * (the no-shame pedagogy stance applies to error styling too).
 * ------------------------------------------------------------ */
.flash {
  border: 2.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  box-shadow: var(--shadow-card-soft);
}
.flash-alert {
  background: var(--hot-soft);
  color: var(--ink);
}
.flash-notice {
  background: var(--mint-soft);
  /* --ink, not --on-mint: --on-mint assumes a *bright* mint surface,
     but cosmic's --mint-soft is a dark surface (--on-mint near-black on
     it = 1.9:1). --ink tracks the skin — dark on light skins, light on
     cosmic — so it stays AA on every skin's --mint-soft. */
  color: var(--ink);
}