/* Sign-in, account settings and passkey help pages ("Caribbean light"). Builds on base.css
   tokens and components; logical properties only (RTL-ready). Written for older readers: one
   clear action per screen, large inputs and targets, strong contrast. */

/* ---- The sign-in frame: a calm card, with a photo beside it on wide screens ------------------- */

.auth-shell {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  justify-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(0.25rem, 2vw, 1.5rem);
}
.auth-card {
  inline-size: 100%;
  max-inline-size: 34rem;
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--shadow-l);
}
.auth-card > * { margin-block: 0; }
.auth-card > * + * { margin-block-start: var(--space-s); }
.auth-card h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem); }
.auth-card .lead { font-size: var(--text-l); }
.auth-card > h1 + * { margin-block-start: var(--space-xs); }
.auth-card form .field { max-inline-size: none; margin-block-end: 0; }
.auth-card :is(input[type="email"], input[type="text"], select) { inline-size: 100%; min-block-size: 3.4rem; font-size: 1.1rem; }
.auth-card label { font-size: 1.05rem; }

/* The round icon above the title (what this step is about). */
.auth-badge {
  display: inline-grid;
  place-items: center;
  inline-size: 4rem;
  block-size: 4rem;
  border-radius: 50%;
  background: var(--coral-tint);
  color: var(--ink);
}
.auth-badge .icon { inline-size: 2.3rem; block-size: 2.3rem; }
.auth-badge img { inline-size: 2.2rem; block-size: 2.2rem; }
.auth-badge-person { background: var(--foam); color: var(--lagoon-deep); }
.auth-badge-notify { background: var(--coral-tint); color: var(--ink); }
.auth-badge-ok { background: var(--ok-tint); color: var(--ok); }
.auth-badge-danger { background: var(--danger-tint); color: var(--danger); }

.auth-aside { display: none; }
@media (min-width: 60rem) {
  .auth-shell { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); justify-items: stretch; }
  .auth-aside { display: block; max-inline-size: 26rem; justify-self: center; }
}
.auth-aside-art { inline-size: 100%; max-inline-size: 22rem; }
.auth-art { display: block; inline-size: 100%; block-size: auto; }
.auth-art-sky { fill: var(--foam); }
.auth-art-sea { fill: var(--lagoon); }
.auth-art-wave { fill: none; stroke: var(--white); stroke-width: 5; stroke-linecap: round; opacity: 0.7; }
.auth-art-phone { fill: var(--ink); }
.auth-art-screen { fill: var(--shell); }
.auth-art-notch { stroke: var(--on-dark-soft); stroke-width: 5; stroke-linecap: round; }
.auth-art-print path { fill: none; stroke: var(--coral-deep); stroke-width: 5; stroke-linecap: round; }
.auth-art-tick { fill: var(--ok); stroke: var(--white); stroke-width: 5; }
.auth-art-tick-mark { fill: none; stroke: var(--white); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons and links inside the card. */
.auth-card .button .icon, .settings-card .button .icon { inline-size: 1.4em; block-size: 1.4em; stroke-width: 2; }
.auth-card .button-wide { padding-inline: 1rem; }
/* A returning visitor whose device can use a passkey: the passkey button is the coral one, so
   "Continue with email" steps back to an outline (the one coral button per screen). */
.auth-card:has(.auth-passkey-first:not([hidden])) .auth-email-submit {
  --button-bg: var(--white);
  --button-bg-hover: var(--foam);
  --button-ink: var(--lagoon-deep);
  --button-border: var(--lagoon-deep);
  --button-shadow: var(--lip-outline);
  --button-shadow-pressed: 0 1px 0 rgb(5 92 98 / 0.22);
}
[data-provider-buttons] .button { min-block-size: 3.4rem; font-size: 1.1rem; background: var(--white); }
[data-provider-buttons] img { flex: none; }

.button-link {
  min-block-size: var(--tap);
  padding-block: 0.5rem;
  padding-inline: 0;
  border: 0;
  background: none;
  color: var(--lagoon-deep);
  font: 700 1rem/1.3 var(--display);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--lagoon-line);
  text-underline-offset: 0.22em;
  cursor: pointer;
}
.button-link:hover { text-decoration-color: currentColor; }

.auth-block { display: block; margin-block-start: 0.15rem; font-family: var(--body); font-weight: 400; }
.checkbox span { font-weight: 700; }
.checkbox .hint { font-weight: 400; }
.auth-shared { padding-block: 0.25rem; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-inline-size: none;
  color: var(--ink-soft);
  font: 700 0.95rem/1.2 var(--display);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-block-start: 2px dotted var(--sand-deep);
}

.auth-help { text-align: center; max-inline-size: none; }
.auth-help-link { display: inline-flex; align-items: center; gap: 0.45rem; min-block-size: var(--tap); font-weight: 600; }
.auth-help-link .icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--ink); }

/* The quieter part of a card (resend, a different address, "no" answers): below a dashed line. */
.auth-card-foot { padding-block-start: var(--space-s); border-block-start: 2px dashed var(--sand-deep); }
.auth-card-foot form { display: grid; gap: var(--space-2xs); justify-items: start; margin: 0; }
.auth-card-foot form:has(.button-wide) { justify-items: stretch; }

.auth-sent { font-size: var(--text-l); }
.auth-safe-hint { display: flex; gap: 0.5rem; align-items: flex-start; }
.auth-safe-hint::before {
  content: "";
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 0.15rem;
  background: var(--lagoon-deep);
  -webkit-mask: var(--icon-info) center / contain no-repeat;
  mask: var(--icon-info) center / contain no-repeat;
}
input.code-input { inline-size: 100%; max-inline-size: 15rem; min-block-size: 4rem; text-align: center; font-variant-numeric: tabular-nums; }

.auth-consents { padding-block: var(--space-xs); padding-inline: var(--space-s); border-radius: var(--radius); background: var(--sand); }
.auth-consents > * + * { margin-block-start: var(--space-xs); }
.auth-legal-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; max-inline-size: none; font-size: 0.95rem; }
.auth-legal-links a { display: inline-flex; align-items: center; min-block-size: var(--tap); }
.auth-optional { padding-inline: var(--space-s); }
/* "Tell me when Ambassador registration opens / voting begins" on Create your account. */
.auth-notify { padding-block: var(--space-xs); padding-inline: var(--space-s); border-radius: var(--radius); background: var(--foam); }
.auth-notify fieldset > * + * { margin-block-start: var(--space-xs); }
.auth-notify legend { font-size: var(--text-m); }

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}
.auth-actions form { margin: 0; }

.auth-benefits { display: grid; gap: var(--space-xs); list-style: none; padding: 0; }
.auth-benefits li { display: flex; gap: 0.85rem; align-items: center; max-inline-size: none; font-size: 1.05rem; line-height: 1.45; }
.auth-point { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 600; }
.auth-point .icon { inline-size: 1.6rem; block-size: 1.6rem; color: var(--ok); }

/* ---- Settings pages (/account/security, notifications, privacy, delete) ----------------------- */

.account-page { max-inline-size: 52rem; }
.settings-head { display: grid; gap: var(--space-2xs); justify-items: start; }
.settings-head > * { margin: 0; }
.settings-head h1 { font-size: var(--h1); }
.settings-head .lead { margin-block-start: var(--space-3xs); }

.settings-card {
  display: grid;
  gap: var(--space-s) var(--space-m);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) {
  .settings-card { grid-template-columns: auto minmax(0, 1fr); }
}
.settings-icon { align-self: start; }
@media (max-width: 39.99rem) {
  .settings-card { gap: var(--space-xs); }
  /* Phones: the settings and help icons take .icon-tile-small's size, so the words come sooner. */
  :is(.settings-icon, .help-card-head .icon-tile) { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 14px; }
  :is(.settings-icon, .help-card-head .icon-tile) .icon { inline-size: 1.7rem; block-size: 1.7rem; }
}
.settings-icon-danger { background: var(--danger-tint); color: var(--danger); }
.settings-body > * { margin-block: 0; }
.settings-body > * + * { margin-block-start: var(--space-s); }
.settings-empty { color: var(--ink-soft); }
.settings-removed { padding-block-start: var(--space-s); border-block-start: 2px dashed var(--sand-deep); }
.settings-removed h3 { margin: 0; }

.stepup-panel { display: grid; gap: var(--space-s); justify-items: start; border: 3px solid var(--coral); box-shadow: var(--shadow-l); }
.stepup-panel form { justify-self: stretch; }
.stepup-panel:focus { outline: var(--focus); outline-offset: 3px; }
.stepup-panel > * { margin-block: 0; }
.stepup-title { display: flex; gap: 0.6rem; align-items: center; }
.stepup-title .icon { inline-size: 1.8rem; block-size: 1.8rem; }

details > summary {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  cursor: pointer;
  color: var(--lagoon-deep);
  font: 800 1.05rem/1.3 var(--display);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--lagoon-line);
  text-underline-offset: 0.22em;
}
details > summary:hover { text-decoration-color: currentColor; }
details[open] > summary { margin-block-end: var(--space-xs); }
.settings-details form { padding: var(--space-s); border-radius: var(--radius); background: var(--sand); }
.settings-details .field { min-inline-size: 0; max-inline-size: none; }
.settings-details :is(input[type="email"], input[type="text"]) { inline-size: 100%; }

.passkey-list,
.session-list,
.event-list,
.plain-list { list-style: none; padding: 0; }
.passkey-list li, .session-list li, .event-list li, .plain-list li { max-inline-size: none; }

.passkey-item,
.session-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-s);
  border-block-start: 2px dashed var(--sand-deep);
}
.passkey-item:first-child,
.session-item:first-child { border-block-start: 0; padding-block-start: 0; }
.passkey-main { flex: 1 1 16rem; display: grid; gap: 0.35rem; }
.passkey-main p { margin: 0; }
.passkey-name { font: 800 1.15rem/1.3 var(--display); }
.passkey-tags { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; }
.passkey-provider { font-weight: 600; }
.passkey-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.rename-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.rename-form input[type="text"] { inline-size: 12rem; min-block-size: var(--tap); }
.session-main { display: flex; gap: 0.85rem; align-items: center; }
.session-mark { flex: none; }
.session-item p { margin: 0; }
.session-device { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; font-weight: 600; }

.event-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  align-items: center;
  padding-block: 0.55rem;
  border-block-start: 1px solid var(--sand-deep);
}
.event-list li:first-child { border-block-start: 0; }
.event-name { font-weight: 700; }
.event-list .hint { flex-basis: 100%; }
.event-failed { min-block-size: 1.9rem; color: var(--danger); }

/* ---- /help/passkeys ------------------------------------------------------------------------- */

.help-hero { padding-block: clamp(2rem, 1rem + 4vw, 4rem) clamp(1rem, 0.5rem + 2vw, 2rem); }
.help-hero .eyebrow { color: var(--lagoon-deep); } /* small words on sand: lagoon keeps AA */
.help-hero h1 { margin-block: 0; }
.help-hero .lead { margin-block-end: 0; }
.help-hero-art { inline-size: 100%; max-inline-size: 21rem; justify-self: center; }
@media (max-width: 47.99rem) {
  .help-hero-art { max-inline-size: 12rem; order: -1; }
}

.help-steps { padding-block: var(--space-l) var(--space-xl); }
.help-steps h2 { margin-block: 0 var(--space-m); text-align: center; }
.help-step-list {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  padding: 0;
  counter-reset: none;
}
@media (min-width: 48rem) {
  .help-step-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.help-step-list li {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  max-inline-size: none;
  padding: var(--space-s);
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: var(--shadow-s);
  font: 700 1.1rem/1.4 var(--display);
}
@media (min-width: 48rem) {
  .help-step-list li { flex-direction: column; text-align: center; padding: var(--space-m); }
}
.help-step-art {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: 50%;
  background: var(--foam);
}
.help-step-art .icon { inline-size: 2.5rem; block-size: 2.5rem; }
.help-step-num {
  position: absolute;
  inset-block-start: -0.3rem;
  inset-inline-end: -0.3rem;
  display: grid;
  place-items: center;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  border-radius: 50%;
  background: var(--coral);
  color: var(--ink);
  font: 900 1rem/1 var(--display);
}

.help-cards { padding-block-end: var(--space-xl); }
.help-card > * { margin-block: 0; }
.help-card > * + * { margin-block-start: var(--space-xs); }
.help-card-head { display: flex; gap: var(--space-s); align-items: center; }
.help-card-head .card-title { margin: 0; }
.help-card-head img { inline-size: 1.9rem; block-size: 1.9rem; }
.help-sync-list { display: grid; gap: 0.4rem; list-style: none; padding: 0; }
.help-sync-list li {
  max-inline-size: none;
  padding-block: 0.4rem;
  padding-inline: 0.8rem;
  border-radius: var(--radius-s);
  background: var(--foam);
  font-weight: 600;
}
.help-safety .grid-2 { align-items: stretch; }
.help-card-safe { border-color: var(--coral); }
.help-cta { margin-block-start: var(--space-xl); text-align: center; max-inline-size: none; }

@media (max-width: 30rem) {
  .rename-form input[type="text"] { inline-size: 100%; }
  .passkey-actions, .rename-form { inline-size: 100%; }
  .rename-form .button { flex: 1; }
}