/* ============================================================================
   LuxScout — sign in, register, verify, and the two password flows
   ============================================================================
   These five pages used to be styled by app/dashboard.css: 37 KB written for a
   member dashboard, a watchlist, a trip planner, a search screen and a results
   rail, none of which still exist. A browser measured the five pages against
   that file and they used 36% of it; the other 24 KB was downloaded and parsed
   on every visit to the login page, for screens retired with the discovery
   product.

   What survives here is what these pages actually render: the page shell, form
   controls, the "sign in required" gate, and the auth card with its error,
   success and pending states. Everything else comes from tokens.css and
   shop.css, the same as the rest of the storefront.

   The legacy variable names below are aliases onto shared tokens, never
   independent colours. They are kept because the markup on these five pages
   still uses the class names that reference them; renaming both at once is a
   change with no way to verify it page by page.
   ========================================================================== */


/* tokens.css arrives via its own <link> on every page that loads this file —
   an @import here duplicated that request and serialised it behind this one. */

:root {
  /* Surfaces — porcelain page, paper cards, ivory quiet fills. */
  --bg: var(--porcelain); --bg-2: var(--ivory); --panel: var(--paper);
  --panel-2: var(--ivory); --panel-3: #EDE8DC;
  --border: var(--line); --border-2: var(--line-strong);
  /* Ink */
  --text: var(--ink); --text-2: var(--ink-2); --muted: var(--ink-3); --faint: var(--ink-4);
  /* Metal — accessible gold for text/icons, champagne for fills. */
  --gold: var(--gold-ink); --gold-soft: var(--champagne); --gold-dim: var(--gold-wash);
  /* Semantic */
  --green: var(--success); --green-bg: var(--success-wash);
  --amber: var(--warning); --amber-bg: var(--warning-wash);
  --red: var(--danger);    --red-bg: var(--danger-wash);
  /* Geometry + type (aliases onto the shared scale) */
  --r: var(--r-lg); --r-sm: var(--r-sm); --r-pill: var(--r-pill);
  --shadow: var(--shadow-card);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text); font-family: var(--sans); font-size: var(--t-body-app);
  line-height: var(--lh-app); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.muted { color: var(--muted); }


/* --- Layout --------------------------------------------------------------- */
.wrap { max-width: 1140px; margin: 0 auto; padding: 26px 26px 90px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 6px; flex-wrap: wrap; }
h1 { font-family: var(--serif); font-weight: 700; font-size: 30px; margin: 2px 0; letter-spacing: .2px; }
h4 { margin: 0; }
.sub { color: var(--muted); margin: 0 0 18px; font-size: 14px; }
.section-label { display: flex; align-items: center; gap: 9px; margin: 30px 0 12px; }
.section-label svg { width: 17px; height: 17px; color: var(--gold); }
.section-label h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-2); margin: 0; font-weight: 700; }
.section-label .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; margin-top: 14px; box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-head h3 { font-family: var(--serif); font-weight: 700; font-size: 18px; margin: 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }


/* --- Controls ------------------------------------------------------------- */
/* THE SAME INPUT AS THE STOREFRONT. These fields were greige-filled 13.5px
   boxes from the retired dashboard while checkout — one page away — set white,
   48px, square fields at reading size. A customer typing their password into a
   control that looks cheaper than the one they typed their address into reads
   it as a seam in the product, at the exact moment trust matters most.
   Geometry and colour below mirror shop.css `.lx-field input`. */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
input, select, textarea, button { font-family: inherit; font-size: var(--t-body-app); color: var(--text);
  background: var(--paper); border: 1px solid var(--border-2); border-radius: var(--r-sm);
  padding: 10px var(--s-3); outline: none; }
input, select { min-height: var(--ctl-h); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); box-shadow: none; }
input::placeholder { color: var(--faint); }
input:disabled, select:disabled { opacity: .5; cursor: not-allowed; }
label.chk { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 13px; cursor: pointer; }
/* ONE control geometry. Buttons had no generic icon rule, so an icon inside a
   button without a bespoke class rendered at its intrinsic size — the image
   drawer's "Take photo" capture control came out as a blocky tile instead of a
   button. Icon size, gap, alignment and minimum height now come from tokens,
   so every button in the product matches without per-screen rules. */
button { cursor: pointer; font-weight: 600; transition: filter .12s, background .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--ctl-h-sm); }
button svg, a.primary svg, a.ghost svg { width: var(--icon); height: var(--icon); flex: none; }
button.sm svg { width: var(--icon-sm); height: var(--icon-sm); }
/* The primary control is the SAME control as the storefront's: ink plate,
   tracked uppercase label. A champagne button here and an ink button on the
   product page is two products wearing one name. */
button.primary, a.primary {
  background: var(--ink); color: var(--on-dark); border-color: var(--ink);
  font-size: var(--t-label); letter-spacing: var(--track-button);
  text-transform: uppercase; font-weight: 500; min-height: var(--ctl-h);
}
button.primary:hover, a.primary:hover { background: var(--obsidian-2); filter: none; }
button.ghost { background: transparent; color: var(--text-2); }
button.ghost:hover { background: var(--panel-3); color: var(--text); }
button.danger { background: transparent; color: var(--red); border-color: rgba(226,112,110,.5); }
button.danger:hover { background: var(--red-bg); }
button.sm { padding: 6px 10px; font-size: 12.5px; }
button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.field label { font-size: 12px; color: var(--text-2); font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; }
.field-hint { font-size: 11.5px; color: var(--faint); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 6px; }


/* --- Auth gate (centered "sign in required" prompt) ----------------------- */
.auth-gate { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none; transition: opacity .18s; }
.auth-gate.show { opacity: 1; pointer-events: auto; }
.auth-gate-card { width: 420px; max-width: 100%; background: var(--panel);
  border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow);
  transform: translateY(8px); transition: transform .18s; }
.auth-gate.show .auth-gate-card { transform: translateY(0); }
.auth-gate-card h3 { font-family: var(--serif); font-size: 21px; margin: 0 0 8px; }
.auth-gate-card p { color: var(--text-2); font-size: 13.5px; line-height: 1.5; margin: 0 0 20px; }
.auth-gate-actions { display: flex; flex-direction: column; gap: 10px; }
.auth-gate-actions a.primary, .auth-gate-actions a.ghost {
  display: flex; align-items: center; justify-content: center; padding: 13px; border-radius: var(--r-sm);
  font-weight: 500; font-size: var(--t-button); letter-spacing: var(--track-button);
  text-transform: uppercase; border: 1px solid transparent; }
/* Ink, not champagne: the same primary control as Add to bag and Checkout. */
.auth-gate-actions a.primary { background: var(--ink); color: var(--on-dark); }
.auth-gate-actions a.primary:hover { background: var(--obsidian-2); }
.auth-gate-actions a.ghost { background: transparent; color: var(--text-2); border-color: var(--border-2); }
.auth-gate-actions a.ghost:hover { background: var(--panel-2); color: var(--text); }
.auth-gate-actions button.link { background: transparent; border: none; color: var(--muted); font-size: 13px;
  padding: 4px; cursor: pointer; }
.auth-gate-actions button.link:hover { color: var(--text-2); text-decoration: underline; }


/* --- Accordion / danger zone --------------------------------------------- */
.accordion { margin-top: 26px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.accordion.danger-zone { border-color: rgba(226,112,110,.32); }
.accordion summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 11px; padding: 16px 18px; font-weight: 600; font-size: 14px; color: var(--text); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { background: var(--panel-2); }
.acc-ic { display: flex; color: var(--red); } .acc-ic svg { width: 18px; height: 18px; }
.acc-caret { margin-left: auto; color: var(--faint); display: flex; transition: transform .2s ease; } .acc-caret svg { width: 16px; height: 16px; }
.accordion[open] .acc-caret { transform: rotate(90deg); }
.acc-body { padding: 14px 18px 18px; border-top: 1px solid var(--border); }
.dz-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dz-row .t { flex: 1; min-width: 220px; } .dz-row .t b { font-size: 14px; } .dz-row .t span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.dz-confirm { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }


/* --- Auth pages / states ---------------------------------------------------
   THE PAGE, NOT A POPUP. These five screens used to float a bordered card in
   the vertical centre of a 100vh void: no footer reachable, a second wordmark
   inside the card under the header's, and dead ivory above and below. It read
   as a bolted-on app at the exact moment a customer types their password.

   Now they are laid out like every other storefront page: top-anchored, the
   form set directly on the porcelain page (the same way checkout sets its
   fields), and the house photograph on the right giving the page the same
   image-led composition as the rest of the shop. The photograph is decorative
   and disappears under 980px, where the form takes the full column. */
.center {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(36px, 5vw, 64px) var(--gutter) clamp(56px, 7vw, 96px);
  min-height: 0;
}

@media (min-width: 980px) {
  .center { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* The photograph panel: pure CSS, so none of the five page scripts change.
     band-selection is LuxScout's own rights-clean still life. */
  .center::after {
    content: '';
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-height: 480px;
    background: var(--ivory) url('/assets/photo/band-selection.jpg') center / cover no-repeat;
    box-shadow: inset 0 0 0 1px var(--line);
  }
}

.auth-card {
  width: min(440px, 100%);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* The header already says whose shop this is; a second wordmark inside the
   form read as a widget branding itself. */
.auth-card .brand { display: none; }
.auth-card h1 {
  text-align: left;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.auth-card .sub { text-align: left; font-size: var(--t-body-app); margin-bottom: 26px; }
.auth-card .field { margin-bottom: 16px; }
.auth-card .field label {
  font-size: var(--t-label); font-weight: 500; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: var(--track-label);
}
.auth-card button.primary { width: 100%; margin-top: 10px; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 13px; flex-wrap: wrap; }
.auth-note { text-align: left; font-size: 13px; color: var(--text-2); margin-top: 16px; }
.err { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 18px; }
.ok-msg { color: var(--green); font-size: 13px; margin-top: 10px; min-height: 18px; }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border-radius: var(--r-sm); font-size: 13px; margin-bottom: 16px; }
.notice svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.notice.warn { background: var(--amber-bg); border: 1px solid rgba(224,173,78,.35); color: var(--amber); }
.notice.ok { background: var(--green-bg); border: 1px solid rgba(87,192,138,.35); color: var(--green); }
.notice.info { background: var(--gold-dim); border: 1px solid var(--champagne); color: var(--gold); }

/* ONE empty state. Matches .lxcat-empty on the editorial side: a restrained
   dashed-hairline block, centred, with a serif line and one sentence — never a
   giant illustrated card or a second icon language. */
.empty { grid-column: 1 / -1; text-align: center; padding: var(--s-8) var(--s-5);
  color: var(--ink-2); border: 1px dashed var(--line-strong); border-radius: var(--r); }
.empty svg { width: 26px; height: 26px; color: var(--ink-3); stroke-width: var(--stroke); margin-bottom: var(--s-3); }
.empty b { display: block; font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: var(--t-h4); line-height: 1.2; margin-bottom: var(--s-1); }
.spinner { width: 26px; height: 26px; border: 3px solid var(--border-2); border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Instant Search: popular-house quick picks, skeleton loading, live-refresh tag */
.chips-label { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin: 14px 0 8px; }
.brand-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 15px; min-height: var(--ctl-h-sm); border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--line);
  color: var(--text-2); font-size: 12.5px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.chip:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.skel { position: relative; overflow: hidden; background: var(--panel-3); border-radius: var(--r-sm); }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(26,22,17,.05), transparent); animation: shimmer 1.3s infinite; }
.skel-line { height: 11px; margin: 4px 0; }
.skel-line.lg { width: 55%; }
.skel-line.sm { width: 32%; }
.thumb.skel { width: 46px; height: 46px; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.updating { color: var(--gold); font-size: 11px; margin-left: 8px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 80;
  background: var(--champagne); color: var(--on-gold); font-weight: 700;
  padding: 12px 20px; border-radius: var(--r-pill); box-shadow: var(--shadow); max-width: 90vw; text-align: center; }
.toast.bad { background: var(--danger); color: var(--paper); }

@media (max-width: 560px) {
  .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dt { margin-top: 8px; }
  .row-2 { grid-template-columns: 1fr; }
  .wrap { padding: 20px 16px 80px; }
}