/*
 * Page-level layout for MaLuce.Web screens (AB#315 onward): the auth pages' centered card, form rhythm, the plan
 * picker, and the link-styled button. Loaded after the shell layer and before app.css, so it may only USE tokens;
 * no color literal belongs here (a test enforces it). The guide's own component styles are never edited: anything
 * the guide leaves to the app lives in this file instead, each with a note on what it adds.
 */

/* ---- Auth layout: one centered Card on the dark page surface ---- */
.ml-auth {
  display: flex;
  height: 100%;
  overflow-y: auto;
  padding: var(--space-8) var(--space-4);
}

/* margin:auto centers a short card on a tall screen and lets a long one scroll instead of clipping its top. */
.ml-auth__card {
  width: 100%;
  max-width: 26rem;
  margin: auto;
}

.ml-auth__card--wide {
  max-width: 36rem;
}

.ml-auth__title {
  margin: 0 0 var(--space-2);
  color: var(--ink);
}

.ml-auth__lead {
  margin: 0 0 var(--space-6);
  color: var(--ink-secondary);
}

/* ---- Forms: a vertical rhythm, and fields that fill the card (the guide caps a field at 360px) ---- */
.ml-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ml-form .ml-field,
.ml-auth .ml-field {
  max-width: none;
}

.ml-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ml-form__group-title {
  padding: 0;
  margin-bottom: var(--space-1);
  color: var(--ink);
}

.ml-form__row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-3);
}

/* A field in a row fills its column: the field's own 360px cap and a text input's intrinsic width would otherwise push the
   last column out past the card's edge. */
/* Two equal columns (the base row is sized for an address line, a state and a ZIP). */
.ml-form__row--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ml-form__row .ml-field {
  min-width: 0;
  max-width: none;
}

.ml-form__row .ml-input {
  width: 100%;
  min-width: 0;
}

.ml-form__note {
  margin: 0;
  color: var(--ink-secondary);
}

.ml-form__submit {
  width: 100%;
}

.ml-form__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-6) 0 0;
}

.ml-form__footer--centered {
  justify-content: center;
}

/* ---- Plan picker: one Card per plan, each a real radio the whole card selects (guide: "one plan" per Card) ---- */
.ml-plans {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ml-plans__legend {
  padding: 0;
  margin-bottom: var(--space-1);
  color: var(--ink);
}

.ml-plans__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.ml-plan {
  padding: 0;
  transition: border-color 0.15s, background 0.15s;
}

.ml-plan:hover {
  background: var(--surface-hover);
}

/* The chosen plan is marked by a brand-fill border AND the native radio's own dot, never color alone. */
.ml-plan.is-selected {
  border-color: var(--brand-fill);
  box-shadow: inset 0 0 0 1px var(--brand-fill);
  background: var(--brand-surface);
}

.ml-plan:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.ml-plan__label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-4);
  cursor: pointer;
}

.ml-plan__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
}

.ml-plan__header input {
  accent-color: var(--brand-fill);
  margin: 0;
}

.ml-plan__price {
  color: var(--ink);
}

.ml-plan__price-unit {
  margin-left: var(--space-1);
  color: var(--ink-secondary);
}

.ml-plan__detail {
  color: var(--ink-secondary);
}

/* ---- A link that looks like a Button (the guide's Button is always a native <button>) ----
 * Global link colors (maluce-base.css) would otherwise turn a primary link-button's label gold on gold on hover. */
a.ml-btn {
  text-decoration: none;
}

a.ml-btn--primary,
a.ml-btn--primary:hover {
  color: var(--on-brand);
}

a.ml-btn--secondary,
a.ml-btn--secondary:hover {
  color: var(--ink);
}

a.ml-btn--ghost {
  color: var(--brand);
}

a.ml-btn--ghost:hover {
  color: var(--brand-light);
}

.ml-btn--block {
  width: 100%;
}

@media (max-width: 575px) {
  .ml-plans__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ml-form__row,
  .ml-form__row--pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .ml-auth {
    padding: var(--space-4);
  }
}

/* ---- Design gallery (/dev/design, development only): plain layout for the review page ---- */
.ml-gallery {
  height: 100%;
  padding: var(--space-6);
  overflow-y: auto;
}

.ml-gallery > section {
  margin-bottom: var(--space-12);
}

.ml-gallery h2 {
  margin: 0 0 var(--space-4);
}

.ml-gallery__title {
  margin: 0 0 var(--space-1);
  font-size: 32px;
}

.ml-gallery__panel {
  padding: var(--space-4);
}

.ml-gallery__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.ml-gallery__row--nowrap {
  flex-wrap: nowrap;
}

.ml-gallery__row--loose {
  gap: var(--space-6);
}

.ml-gallery__row--start {
  align-items: flex-start;
}

.ml-gallery__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ml-gallery__column--loose {
  gap: var(--space-4);
}

.ml-gallery__after {
  margin-bottom: var(--space-4);
}

.ml-gallery__after--lg {
  margin-bottom: var(--space-6);
}

/* AB#292: the numbered steps on the number status page. Tokens only. */
.ml-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ml-steps__item {
  padding-left: var(--space-3);
  border-left: 2px solid var(--border-strong);
}

.ml-steps__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* AB#344: the notification list and the per-event channel choices on the profile. */
.ml-notification-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ml-notification { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ml-notification[data-read="true"] .ml-notification__text > span:not(.caption) { color: var(--ink-secondary); }
.ml-notification__text { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.ml-notification-prefs { display: flex; flex-direction: column; gap: var(--space-4); }
.ml-notification-pref { border: 0; margin: 0; padding: 0; min-width: 0; }
.ml-notification-pref__channels { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }

/* AB#359: the "Most popular" flag sits under the plan name, left aligned, so the cards keep one baseline for name and price. */
.ml-plan__flag { align-self: flex-start; }

/* AB#294: the optional "draft it with AI" panel at the top of the campaign form. A plain bordered group: it is a helper, not a second form. */
.ml-wizard {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.ml-wizard > legend { padding: 0 var(--space-2); }

/* AB#151: the authenticator setup QR code. White tile on purpose (a scanner needs dark on light whatever the theme); sized to scan comfortably on a phone held at arm's length. */
.ml-qr {
  width: min(14rem, 100%);
  line-height: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ml-qr svg {
  width: 100%;
  height: auto;
  display: block;
}