/* ============================================================
   Auth — login / register / forgot / reset / logout.
   KDS v1 · Verandah. One calm centred card. Tokens only, 390px first.
   ============================================================ */

.auth { width: min(1180px, 100% - 2 * var(--kds-gutter)); margin-inline: auto; padding-block: clamp(24px, 5vw, 56px) clamp(32px, 6vw, 72px); display: grid; justify-items: center; gap: var(--kds-sp-4); }
.auth__card { width: min(440px, 100%); background: var(--kds-surface); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-xl); box-shadow: var(--kds-shadow-2); overflow: hidden; }

.auth__head { padding: var(--kds-sp-6) var(--kds-sp-5) var(--kds-sp-2); text-align: center; }
.auth__mark { display: grid; place-content: center; width: 48px; height: 48px; margin: 0 auto var(--kds-sp-4); border-radius: var(--kds-radius-md); background: var(--kds-brand-soft); color: var(--kds-brand); }
.auth__mark svg { width: 24px; height: 24px; display: block; }
.auth__head .eyebrow { justify-content: center; margin-bottom: .6rem; }
.auth__head h1 { font-size: var(--kds-text-2xl); margin-bottom: .35em; }
.auth__lede { color: var(--kds-fg-muted); font-size: var(--kds-text-sm); margin: 0 auto; max-width: 34ch; line-height: 1.5; }

.auth__form { padding: var(--kds-sp-4) var(--kds-sp-5) var(--kds-sp-5); display: grid; gap: var(--kds-sp-4); }
.auth__form .kds-input, .auth__form .kds-select { min-height: 48px; font-size: 16px; }
.auth__form > .kds-btn { min-height: 48px; margin-top: var(--kds-sp-1); }
.auth__form > .kds-btn + .kds-btn { margin-top: 0; }
.auth__form p { margin: 0; }
.auth__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--kds-sp-3); }
.auth__link { font-size: var(--kds-text-xs); font-weight: var(--kds-weight-semibold); text-decoration: none; }
.auth__link:hover { text-decoration: underline; text-underline-offset: .18em; }
.auth__error { color: var(--kds-danger); font-size: var(--kds-text-xs); font-weight: var(--kds-weight-medium); margin: 0; }
.auth__alert { margin: var(--kds-sp-3) var(--kds-sp-5) 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--kds-danger) 35%, transparent); background: var(--kds-danger-soft); color: var(--kds-danger); border-radius: var(--kds-radius-md); font-size: var(--kds-text-sm); font-weight: var(--kds-weight-medium); }

.auth__foot { padding: var(--kds-sp-4) var(--kds-sp-5) var(--kds-sp-5); border-top: 1px solid var(--kds-border); text-align: center; color: var(--kds-fg-muted); font-size: var(--kds-text-sm); background: var(--kds-surface-2); }
.auth__foot p { margin: 0 0 6px; }
.auth__foot p:last-child { margin: 0; }
.auth__foot a { font-weight: var(--kds-weight-semibold); }
.auth__foot .tiny { color: var(--kds-fg-faint); }
.auth__aside { max-width: 46ch; text-align: center; font-size: var(--kds-text-xs); color: var(--kds-fg-faint); margin: 0; line-height: 1.5; }

/* password field with show/hide */
.pw { position: relative; }
.pw .kds-input { padding-right: 76px; }
.pw__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 34px; min-width: 58px; padding: 0 10px; border: 1px solid var(--kds-border); border-radius: var(--kds-radius-sm); background: var(--kds-surface-2); color: var(--kds-fg-muted); font: var(--kds-weight-semibold) var(--kds-text-xs) / 1 var(--kds-font-sans); cursor: pointer; }
.pw__toggle:hover { color: var(--kds-fg); border-color: var(--kds-border-strong); }
.pw__toggle[aria-pressed="true"] { color: var(--kds-accent); border-color: var(--kds-accent); background: var(--kds-accent-soft); }
.pw__toggle:focus-visible { outline: 2px solid var(--kds-focus-ring); outline-offset: 2px; }

/* terms checkbox row (≥44px tap target) */
.auth__check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); min-height: 44px; padding-top: 2px; cursor: pointer; line-height: 1.45; }
.auth__check input { margin-top: 2px; flex: none; }
.auth__check a { font-weight: var(--kds-weight-medium); }
.auth__check.is-invalid { color: var(--kds-danger); }

/* role switcher (Subscriber / Community Supporter) */
.role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: var(--kds-sp-3) var(--kds-sp-5) 0; padding: 3px; background: var(--kds-surface-2); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-full); }
.role-switch a { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 6px 8px; border-radius: var(--kds-radius-full); text-decoration: none; font-weight: var(--kds-weight-semibold); font-size: var(--kds-text-sm); color: var(--kds-fg-muted); line-height: 1.15; }
.role-switch a.is-active { background: var(--kds-surface); color: var(--kds-fg); box-shadow: var(--kds-shadow-1); }
.role-switch a:not(.is-active):hover { color: var(--kds-fg); }

/* the pitch (advertiser: Community Supporter benefits; subscriber: quiet three-liner) */
.auth__pitch { margin: var(--kds-sp-4) var(--kds-sp-5) 0; padding: var(--kds-sp-4); background: var(--kds-surface-2); border-radius: var(--kds-radius-md); font-size: var(--kds-text-sm); color: var(--kds-fg-muted); line-height: 1.5; }
.auth__pitch ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.auth__pitch li { position: relative; padding-left: 26px; }
.auth__pitch li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 13px; height: 7px; border-left: 2px solid var(--kds-positive); border-bottom: 2px solid var(--kds-positive); transform: rotate(-45deg); }
.auth__pitch strong { color: var(--kds-fg); font-weight: var(--kds-weight-semibold); }
.auth__pitch--quiet li::before { border-color: var(--kds-border-strong); }

/* signed-out confirmation card */
.auth__form--stack { gap: var(--kds-sp-2); }

@media (min-width: 640px) {
  .auth { padding-block: clamp(40px, 7vw, 76px) clamp(48px, 8vw, 96px); }
  .auth__head { padding: var(--kds-sp-7) var(--kds-sp-6) var(--kds-sp-2); }
  .auth__form { padding: var(--kds-sp-4) var(--kds-sp-6) var(--kds-sp-6); }
  .auth__foot { padding: var(--kds-sp-4) var(--kds-sp-6) var(--kds-sp-5); }
  .role-switch, .auth__pitch, .auth__alert { margin-inline: var(--kds-sp-6); }
}