/* ============================================================================
   PsyShift — Sign in & sign up (auth.html)
   ----------------------------------------------------------------------------
   Loaded after elements.css, instead of views.css. Two columns from 1000px:
   a sticky side panel that says what PsyShift is, and the form column whose
   width the router sets per screen (`data-width` on `.auth`).
   ========================================================================== */

/* ── Frame ─────────────────────────────────────────────────────────────── */
.auth {
  position: relative;
  z-index: 1;                     /* above the fixed .aurora */
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.authside {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-4) var(--gutter);
  border-bottom: 1px solid var(--c-line);
}
.authside__pitch, .authside__posters, .authside__trust { display: none; }

.authmain {
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: var(--s-8) var(--gutter) var(--s-16);
}

.authview {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  width: 100%;
  max-width: 440px;
  outline: none;
}
.auth[data-width="medium"] .authview { max-width: 760px; }
.auth[data-width="wide"]   .authview { max-width: 1100px; }

@media (min-width: 1000px) {
  .auth { grid-template-columns: minmax(380px, 5fr) minmax(0, 7fr); }
  .auth[data-width="wide"] { grid-template-columns: minmax(320px, 3fr) minmax(0, 9fr); }

  .authside {
    position: sticky;
    top: 0;
    height: 100dvh;
    gap: var(--s-8);
    padding: var(--s-8) clamp(var(--s-8), 3vw, var(--s-16));
    overflow: hidden;
    border-bottom: none;
    border-right: 1px solid var(--c-line);
    background: linear-gradient(180deg, rgba(20, 24, 38, .6), rgba(10, 12, 19, .15));
  }
  .authside__pitch { display: block; }
  .authside__posters { display: grid; }
  .authside__trust { display: flex; }
  .authmain { padding-block: clamp(var(--s-8), 8vh, var(--s-20)); }
}

/* ── Side panel ────────────────────────────────────────────────────────── */
.authside__pitch h2 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
}
.authside__pitch h2 em {
  display: block;
  font-style: normal;
  background: linear-gradient(95deg, var(--c-accent-bright), var(--c-second));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.authside__pitch p { margin-top: var(--s-3); max-width: 42ch; color: var(--c-text-muted); }

.authside__posters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--s-3) + 22px) var(--s-3);   /* room for the staggered column */
  margin-top: auto;
}
.authside__poster {
  position: relative;               /* poster() is absolute: its wrapper sizes it */
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--e-3);
}
.authside__poster:nth-child(even) { translate: 0 22px; }
.authside__poster figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--s-2) var(--s-2);
  font-size: var(--t-2xs);
  line-height: 1.25;
  background: linear-gradient(180deg, transparent, rgba(6, 7, 12, .88));
}
.authside__poster figcaption strong { font-size: var(--t-xs); }
.authside__poster figcaption span { color: var(--c-text-muted); }
.auth[data-width="wide"] .authside__poster:nth-child(n+4) { display: none; }

.authside__trust {
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--c-text-muted);
}
.authside__trust li { display: flex; align-items: center; gap: var(--s-2); }
.authside__trust svg { width: 15px; height: 15px; color: var(--c-second); }

/* ── Headings, sections, stacks ────────────────────────────────────────── */
.authhead { display: flex; flex-direction: column; gap: var(--s-2); }
.authhead h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
}
.authhead__lede { color: var(--c-text-muted); max-width: 60ch; }
.authhead__lede strong { color: var(--c-text); }
.authhead__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-bottom: var(--s-2);
  font-size: var(--t-xs);
  color: var(--c-text-muted);
}
.authhead__back:hover { color: var(--c-text); }
.authhead__back svg { width: 15px; height: 15px; }

.authsection { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-2); }
.authsection__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  letter-spacing: var(--track-tight);
}
.authstack { display: flex; flex-direction: column; gap: var(--s-2); }
.authform { gap: var(--s-4); }
.authactions { flex-wrap: wrap; gap: var(--s-3); }

.form-feedback:empty { display: none; }
.field__label .optional { text-transform: none; letter-spacing: 0; }

.authfoot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  text-align: center;
}

button.link { font-size: inherit; padding: 0; cursor: pointer; }

.demonote {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--c-text-faint);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
}
.demonote > svg { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; color: var(--c-warn); }
.demonote strong { color: var(--c-text-soft); }
.demonote code { font-family: var(--font-mono); font-size: .95em; color: var(--c-text-soft); overflow-wrap: anywhere; }
.mono { font-family: var(--font-mono); letter-spacing: .12em; color: var(--c-text); }

.resend { font-size: var(--t-sm); color: var(--c-text-muted); text-align: center; }

.bigicon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--r-full);
  color: var(--c-accent-bright);
  background: var(--c-accent-wash);
  box-shadow: 0 0 0 1px var(--c-line-accent);
}
.bigicon svg { width: 28px; height: 28px; }
.bigicon--ok   { color: var(--c-second); background: var(--c-second-wash); box-shadow: 0 0 0 1px rgba(46, 211, 183, .3); }
.bigicon--warn { color: var(--c-warn);   background: var(--c-warn-wash);   box-shadow: 0 0 0 1px rgba(255, 180, 77, .3); }
.bigicon--pulse { animation: keypulse 1.8s var(--ease-in-out) infinite; }
@keyframes keypulse {
  50% { box-shadow: 0 0 0 1px var(--c-line-accent), 0 0 0 14px rgba(124, 92, 255, 0); }
  0%, 100% { box-shadow: 0 0 0 1px var(--c-line-accent), 0 0 0 0 rgba(124, 92, 255, .35); }
}

/* ── Stepper ───────────────────────────────────────────────────────────── */
.stepper { display: flex; align-items: center; gap: var(--s-2); }
.stepper__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 1;
  font-size: var(--t-xs);
  color: var(--c-text-faint);
}
.stepper__item:last-child { flex: none; }
.stepper__item:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 1px;
  min-width: var(--s-3);
  background: var(--c-line-strong);
}
.stepper__dot {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex-shrink: 0;
  font-size: var(--t-2xs);
  font-weight: 700;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-full);
}
.stepper__dot svg { width: 13px; height: 13px; }
.stepper__item.is-current { color: var(--c-text); font-weight: 600; }
.stepper__item.is-current .stepper__dot { color: #fff; background: var(--c-accent); border-color: var(--c-accent); }
.stepper__item.is-done .stepper__dot { color: #04241E; background: var(--c-second); border-color: var(--c-second); }
.stepper__item.is-done::after { background: var(--c-second-dim); }
@media (max-width: 479px) { .stepper__item:not(.is-current) .stepper__label { display: none; } }

/* ── Provider buttons ──────────────────────────────────────────────────── */
.pbtn {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  height: 50px;
  padding-inline: 11px var(--s-5);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-text);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-full);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.pbtn:hover { background: var(--c-surface-3); border-color: var(--c-line-accent); }
.pbtn:active { transform: scale(.985); }
.pbtn__label { flex: 1; text-align: center; margin-right: 28px; }

.picons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}
@media (min-width: 480px) { .picons { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.picon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: var(--s-3) var(--s-1);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.picon:hover { border-color: var(--c-line-accent); background: var(--c-surface-2); }
.picon__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: var(--c-text-muted);
}

.moreproviders summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--t-xs);
  color: var(--c-text-muted);
  cursor: pointer;
  list-style: none;
}
.moreproviders summary::-webkit-details-marker { display: none; }
.moreproviders summary:hover { color: var(--c-text); }
.moreproviders summary svg { width: 14px; height: 14px; transition: rotate var(--dur-2) var(--ease); }
.moreproviders[open] summary svg { rotate: 45deg; }
.moreproviders .picons { margin-top: var(--s-3); }

.altgrid { display: grid; gap: var(--s-2); }
@container (min-width: 430px) { .altgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.altbtn {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  text-align: left;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.altbtn:hover { border-color: var(--c-line-accent); background: var(--c-surface-2); }
.altbtn > svg { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; color: var(--c-accent-bright); }
.altbtn span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.altbtn strong { font-size: var(--t-sm); }
.altbtn em { font-style: normal; font-size: var(--t-2xs); color: var(--c-text-faint); }
@container (min-width: 430px) {
  .altbtn { flex-direction: column; gap: var(--s-2); }
}

/* ── Fields ────────────────────────────────────────────────────────────── */
.pwfield { position: relative; display: block; }
.pwfield .input { padding-right: 52px; }
.pwfield__toggle {
  position: absolute;
  top: 50%; right: 4px;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  color: var(--c-text-faint);
  border-radius: var(--r-sm);
}
.pwfield__toggle:hover { color: var(--c-text); }
.pwfield__toggle[aria-pressed="true"] { color: var(--c-accent-bright); }
.pwfield__toggle svg { width: 18px; height: 18px; }

.pwmeter { display: flex; align-items: center; gap: var(--s-3); }
.pwmeter__label { min-width: 72px; font-size: var(--t-2xs); color: var(--c-text-faint); text-align: right; }

.invite__input { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; }

.otp {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-2);
}
.otp__cell {
  width: 100%;
  height: 58px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  color: var(--c-text);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  caret-color: var(--c-accent-bright);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.otp__cell:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 4px var(--c-accent-wash); }
.otp__cell:nth-child(3) { margin-right: var(--s-2); }

.pickchips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pickchip { position: relative; cursor: pointer; }
.pickchip input { position: absolute; opacity: 0; pointer-events: none; }
.pickchip span {
  display: inline-block;
  padding: 6px 12px;
  font-size: var(--t-xs);
  color: var(--c-text-muted);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-full);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.pickchip:hover span { color: var(--c-text); }
.pickchip input:checked + span { color: var(--c-text); background: var(--c-accent-wash); border-color: var(--c-accent); }
.pickchip input:focus-visible + span { outline: 2px solid var(--c-accent-bright); outline-offset: 2px; }
.genrefield { display: flex; flex-direction: column; gap: var(--s-3); }
.genrefield legend .optional { text-transform: none; letter-spacing: 0; font-weight: 500; }

.checklist { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-sm); color: var(--c-text-muted); }
.checklist li { display: flex; gap: var(--s-2); }
.checklist svg { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: var(--c-second); }

/* ── Signup hub ────────────────────────────────────────────────────────── */
.resume, .invitebar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
}
.resume { background: var(--c-second-wash); border: 1px solid rgba(46, 211, 183, .3); }
.invitebar { background: var(--c-accent-wash); border: 1px solid var(--c-line-accent); }
.resume strong, .invitebar strong { display: block; font-size: var(--t-sm); }
.resume em, .invitebar em { display: block; font-style: normal; font-size: var(--t-xs); color: var(--c-text-muted); }
.resume__marks { display: flex; }
.resume__marks .bmark + .bmark { margin-left: -6px; box-shadow: 0 0 0 2px var(--c-bg); }

.ptoolbar { display: flex; flex-direction: column; gap: var(--s-3); }
.ptiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr));
  gap: var(--s-3);
}
.ptile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-4);
  text-align: left;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), translate var(--dur-2) var(--ease-out);
}
.ptile:hover { translate: 0 -2px; border-color: var(--c-line-accent); background: var(--c-surface-2); }
.ptile__name { max-width: 100%; font-size: var(--t-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptile__gives { display: flex; gap: 7px; color: var(--c-text-faint); }
.ptile__gives svg { width: 13px; height: 13px; }
.ptile__check {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  color: #04241E;
  background: var(--c-second);
  border-radius: var(--r-full);
}
.ptile__check svg { width: 13px; height: 13px; }
.ptile.is-connected { border-color: rgba(46, 211, 183, .45); }
.ptiles__empty { font-size: var(--t-sm); color: var(--c-text-muted); }

.plegend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-2xs); color: var(--c-text-faint); }
.plegend li { display: flex; align-items: center; gap: 5px; }
.plegend svg { width: 13px; height: 13px; }

.methods { display: grid; gap: var(--s-3); }
@container (min-width: 600px) { .methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.method {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.method:hover { border-color: var(--c-line-accent); background: var(--c-surface-2); }
.method__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  color: var(--c-accent-bright);
  background: var(--c-accent-wash);
  border-radius: var(--r-full);
}
.method__icon svg { width: 19px; height: 19px; }
.method__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.method__text strong { font-size: var(--t-sm); }
.method__text strong .chip { margin-left: 4px; vertical-align: 1px; }
.method__text em { font-style: normal; font-size: var(--t-xs); color: var(--c-text-faint); }
.method__go svg { width: 18px; height: 18px; color: var(--c-text-faint); }

.invitecard {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.invitecard > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.invitecard .faint { font-size: var(--t-xs); }
.invitecard p { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--c-text-soft); }

.formats { display: grid; gap: var(--s-2); }
@container (min-width: 420px) { .formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.formats > div { display: flex; flex-direction: column; gap: 4px; padding: var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.formats strong { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); }
.formats strong svg { width: 15px; height: 15px; color: var(--c-accent-bright); }
.formats span { font-size: var(--t-xs); color: var(--c-text-faint); }

.filesum { padding-inline: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); }

/* ── Connect ───────────────────────────────────────────────────────────── */
.handshake { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding-block: var(--s-2); }
.handshake__wire {
  width: 84px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--c-accent-bright) 0 6px, transparent 6px 12px);
  opacity: .6;
}

.whoon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 12px;
  font-size: var(--t-xs);
  color: var(--c-text-muted);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
}
.whoon svg { width: 14px; height: 14px; }
.whoon strong { color: var(--c-text); }

.scopes { display: flex; flex-direction: column; gap: var(--s-2); }
.scope {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: opacity var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.scope:has(input:disabled) { cursor: default; }
.scope input { position: absolute; opacity: 0; pointer-events: none; }
.scope:has(input:not(:checked)) .scope__text { opacity: .55; }
.scope__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  color: var(--c-text-soft);
  background: var(--c-surface-3);
  border-radius: var(--r-full);
}
.scope__icon svg { width: 16px; height: 16px; }
.scope__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; transition: opacity var(--dur-2) var(--ease); }
.scope__text strong { font-size: var(--t-sm); }
.scope__text em { font-style: normal; font-size: var(--t-xs); color: var(--c-text-faint); }
.scope__req { font-size: 10px; font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-text-faint); }
.scope__toggle {
  position: relative;
  width: 40px; height: 23px;
  flex-shrink: 0;
  background: var(--c-surface-3);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-full);
  transition: background var(--dur-2) var(--ease);
}
.scope__toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 17px; height: 17px;
  background: #fff;
  border-radius: 50%;
  transition: translate var(--dur-2) var(--ease-out);
}
.scope input:checked ~ .scope__toggle { background: var(--c-accent); border-color: var(--c-accent); }
.scope input:checked ~ .scope__toggle::after { translate: 17px 0; }
.scope input:focus-visible ~ .scope__toggle { outline: 2px solid var(--c-accent-bright); outline-offset: 2px; }

.nevergets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: var(--t-xs);
  color: var(--c-text-muted);
}
.nevergets strong {
  flex-basis: 100%;
  font-size: var(--t-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.nevergets span { display: inline-flex; align-items: center; gap: 5px; }
.nevergets svg { width: 13px; height: 13px; color: var(--c-hot); }

/* ── Cross-device QR ───────────────────────────────────────────────────── */
.qrpanel { display: grid; gap: var(--s-5); align-items: center; }
@container (min-width: 420px) { .qrpanel { grid-template-columns: 200px minmax(0, 1fr); } }
.qrpanel__code {
  position: relative;
  width: 200px;
  max-width: 100%;
  justify-self: center;
  padding: var(--s-2);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--e-glow);
}
.qr { display: block; width: 100%; height: auto; border-radius: var(--r-sm); transition: opacity var(--dur-3) var(--ease), filter var(--dur-3) var(--ease); }
.qrpanel__code.is-expired .qr,
.qrpanel__code.is-scanned .qr { opacity: .12; filter: blur(2px); }
.qrpanel__veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
}
.qrpanel__veil svg { width: 26px; height: 26px; color: var(--c-second); }
.qrpanel__steps { display: flex; flex-direction: column; gap: var(--s-3); }
.qrpanel__steps h3 { font-family: var(--font-display); font-size: var(--t-h3); }
.qrpanel__match {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--c-second);
}
.numlist { counter-reset: n; display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--t-sm); color: var(--c-text-soft); }
.numlist li { position: relative; padding-left: 34px; counter-increment: n; }
.numlist li::before {
  content: counter(n);
  position: absolute;
  left: 0; top: -2px;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  font-size: var(--t-2xs);
  font-weight: 700;
  color: var(--c-accent-bright);
  background: var(--c-accent-wash);
  border-radius: var(--r-full);
}

/* ── Import review ─────────────────────────────────────────────────────── */
.srctray { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.srcchip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 4px 4px 5px;
  font-size: var(--t-xs);
  font-weight: 500;
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-full);
}
.srcchip button { display: grid; place-items: center; width: 22px; height: 22px; color: var(--c-text-faint); border-radius: var(--r-full); }
.srcchip button:hover { color: var(--c-hot); background: var(--c-hot-wash); }
.srcchip button svg { width: 13px; height: 13px; }
.srcchip--add { padding: 4px 12px; color: var(--c-accent-bright); border-style: dashed; border-color: var(--c-line-accent); }
.srcchip--add svg { width: 14px; height: 14px; }
.srcchip--add:hover { background: var(--c-accent-wash); }

.review { display: grid; gap: var(--s-5); }
.review__main { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.review__side { min-width: 0; }
@container (min-width: 780px) {
  .review { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .review__side { position: sticky; top: var(--s-6); }
}

.rcard {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--c-surface-glass);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.rcard__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-h3);
}
.rcard__title svg { width: 18px; height: 18px; color: var(--c-accent-bright); }
.rcard__count { padding: 1px 8px; font-family: var(--font-body); font-size: var(--t-xs); font-weight: 600; color: var(--c-text-muted); background: var(--c-surface-3); border-radius: var(--r-full); }
.rcard .field { gap: var(--s-2); }

.candidates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--t-2xs); color: var(--c-text-faint); }
.candidate {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  padding: 3px 10px;
  font-size: var(--t-xs);
  color: var(--c-text-soft);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-full);
}
.candidate span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.candidate em { font-style: normal; font-size: var(--t-2xs); color: var(--c-text-faint); white-space: nowrap; }
.candidate:hover { border-color: var(--c-line-accent); color: var(--c-text); }

.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--s-2); }
.pick, .fpick {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.pick input, .fpick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:hover, .fpick:hover { border-color: var(--c-line-strong); }
.pick:has(input:checked), .fpick:has(input:checked) { background: var(--c-accent-wash); border-color: var(--c-line-accent); }
.pick:has(input:not(:checked)) > :not(.pick__check),
.fpick:has(input:not(:checked)) > :not(.pick__check) { opacity: .5; }
.pick:has(input:focus-visible), .fpick:has(input:focus-visible) { outline: 2px solid var(--c-accent-bright); outline-offset: 2px; }

.pick__orb {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 30% 30%, hsl(var(--h1) 60% 60%), hsl(var(--h2) 55% 28%));
}
.pick__text, .fpick__text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.pick__text strong, .fpick__text strong { font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick__text em, .fpick__text em { font-style: normal; font-size: var(--t-2xs); color: var(--c-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick__check {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: #fff;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-full);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.pick__check svg { width: 12px; height: 12px; opacity: 0; }
:has(input:checked) > .pick__check { background: var(--c-accent); border-color: var(--c-accent); }
:has(input:checked) > .pick__check svg { opacity: 1; }

.fpicks { display: flex; flex-direction: column; gap: var(--s-2); }
.fpick__art { position: relative; width: 48px; height: 48px; flex-shrink: 0; overflow: hidden; border-radius: var(--r-sm); }
.fpick.is-onhold .fpick__art { filter: grayscale(.8) brightness(.8); }
@container (max-width: 420px) {  .fpick .chip { display: none; } }

.missing summary { font-size: var(--t-xs); color: var(--c-text-faint); cursor: pointer; }
.missing summary:hover { color: var(--c-text-muted); }
.missing p { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--c-text-muted); }

.suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  font-size: var(--t-xs);
  color: var(--c-text-muted);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
}
.suggest .row { gap: 6px; }

.rsummary {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--e-3);
}
.rsummary__title { font-family: var(--font-display); font-size: var(--t-h3); }
.rsummary__signin, .rsummary__warn { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-xs); color: var(--c-text-muted); }
.rsummary__warn { color: var(--c-text-faint); }
.rsummary__warn > svg { width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0; color: var(--c-warn); }

/* ── Welcome ───────────────────────────────────────────────────────────── */
.welcome__recap { padding-inline: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.nudge {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--c-accent-wash);
  border: 1px solid var(--c-line-accent);
  border-radius: var(--r-lg);
}
.nudge strong { display: block; font-size: var(--t-sm); }
.nudge em { display: block; font-style: normal; font-size: var(--t-xs); color: var(--c-text-muted); }

/* ═════════════════════════════════════════════════════════════════════════
   PRODUCTION ADDITIONS (server-rendered sign-in)
   The reference wrote these as style="…" from JavaScript; a template may not
   (root CLAUDE.md), so each one is a class here. Same declarations.
   ═══════════════════════════════════════════════════════════════════════ */
.authalert__cta { margin-top: var(--s-3); }
.authnote { font-size: var(--t-xs); }
.authstack--top { margin-top: var(--s-6); }
/* A one-control form inline in a sentence ("Resend the link"). */
.resend__form { display: inline; }
.authnote--top { margin-top: var(--s-3); }
.invite__pick { margin-top: var(--s-6); }
.invite__methods { margin-top: var(--s-4); }
/* Artists and friends are shown, not picked: no checkbox, same row. */
.picks--readonly .pick { cursor: default; }
.pick.is-static { pointer-events: none; }

/* Bot protection (Cloudflare Turnstile): the widget is empty unless Cloudflare asks
   the visitor something; only then does it need room above the button. */
.botcheck:not(:empty) { margin-bottom: var(--s-3); }

/* Language picker, under the sign-in screens (docs/features/i18n). */
.localepicker { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
.localepicker__label { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--c-text-faint); }
.localepicker__select { width: auto; min-width: 0; }
.authmain__contact { margin-top: var(--s-3); text-align: center; font-size: var(--t-xs); }