/* rp-profile — RP Account UI on the DarkSpark ui-kit.
 *
 * Rides the vendored kit in /public/ui (source of truth: Supportal
 * packages/ui-kit/css @ 0319b72 — the /support half of this same host).
 * Everything in this file uses --ds-* tokens; the styles test enforces it.
 *
 * THE FIRST RULE IS LOAD-BEARING: tokens.css defaults --ds-accent-hue to 187;
 * the estate accent for account.rogueproductions.net is 262, shared with
 * /support so the two apps read as one product. This app's CSP forbids inline
 * <style>, so the override lives here — app.css loads after tokens.css with
 * equal specificity, and last wins. */
:root { --ds-accent-hue: 262; }

/* ------------------------------------------------------------------ layout */
.page--narrow { max-width: 860px; }
.muted { color: var(--ds-text-dim); } /* kit's is faint; match Supportal's brighter register */
.flashbar { padding: 18px 22px 0; }

/* The kit's .page-head is `space-between` because its pages put actions on the
   right. Ours never do — the second child is always the subtitle or (on the
   overview) the text block beside the avatar, and space-between flung them to
   opposite edges. Views wrap title+sub in one div; this keeps them together. */
.page-head { justify-content: flex-start; }
.page-head--avatar { align-items: center; }

/* .panel__title carries no margin reset, so an <h2> inside a panel head
   inherited the browser's 0.83em margins and inflated every header band. */
.panel__title { margin: 0; }
.purchase-panel h2 { margin: 0 0 6px; font-size: var(--ds-fs-lg); font-weight: 600; }

/* The kit's .kv is a two-column grid expecting bare dt/dd children. Our rows
   are <div><dt><dd></div> wrappers (each its own grid, below), so the outer
   list must stack them instead of packing two rows per line. */
.kv { display: block; }

/* Inputs the kit doesn't cover (it styles text/password/untyped/select/textarea
   only) — mirror its rules so email/tel/number/search fields match. */
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='search'] {
  width: 100%;
  padding: 6px 9px;
  background: var(--ds-void);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  color: var(--ds-text);
  font-family: var(--ds-font);
  font-size: var(--ds-fs-md);
  transition: border-color var(--ds-t-fast) var(--ds-ease), box-shadow var(--ds-t-fast) var(--ds-ease);
}

/* -------------------------------------------------------------------- gate */
/* Chrome-less documents (signed-out + error pages). Transplanted from the
   Supportal landing page's inline <style>; inline styles are illegal here, so
   the gate lives in this file. The gate is its own scroll container because
   the kit sets body{overflow:hidden} for the shell. */
.gate {
  height: 100vh; overflow-y: auto;
  display: grid; place-items: center; position: relative; z-index: 2;
  padding: 24px 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, hsl(var(--ds-accent-hue) 100% 62% / .10), transparent 60%),
    var(--ds-bg);
}
.gate__stack { display: flex; flex-direction: column; gap: 14px; width: min(460px, calc(100vw - 40px)); margin: auto; }
.gate__card {
  width: 100%; padding: 40px 36px 32px;
  border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  box-shadow: 0 30px 90px rgb(0 0 0 / .55), 0 0 0 1px hsl(var(--ds-accent-hue) 100% 62% / .08);
  text-align: center;
}
.gate__card--form { text-align: left; }
.gate__card--form .gate__mark, .gate__card--form .gate__sub, .gate__card--form > h1 { text-align: center; }
.gate__card h1 { font-size: var(--ds-fs-2xl); font-weight: 650; margin: 0 0 10px; }
.gate__mark { font: 700 30px/1 var(--ds-font); letter-spacing: -.02em; }
.gate__mark span { color: var(--ds-accent); }
.gate__sub { color: var(--ds-text-dim); margin: 12px 0 26px; font-size: var(--ds-fs-lg); }
.gate__btn {
  display: block; width: 100%; padding: 13px 18px; border-radius: var(--ds-radius);
  border: 1px solid hsl(var(--ds-accent-hue) 100% 62% / .45);
  background: hsl(var(--ds-accent-hue) 100% 62% / .12);
  color: var(--ds-text); font-family: inherit; font-size: var(--ds-fs-lg);
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.gate__btn:hover {
  background: hsl(var(--ds-accent-hue) 100% 62% / .2);
  border-color: hsl(var(--ds-accent-hue) 100% 62% / .75);
  box-shadow: 0 0 24px hsl(var(--ds-accent-hue) 100% 62% / .25);
}
.gate__note { color: var(--ds-text-faint); font-size: var(--ds-fs-sm); margin-top: 22px; line-height: 1.6; }
.gate__aux { display: flex; justify-content: flex-end; margin-top: 8px; font-size: var(--ds-fs-sm); }
.gate__points { text-align: left; margin: 0 0 26px; padding: 0; list-style: none; color: var(--ds-text-dim); font-size: var(--ds-fs-md); }
.gate__points li { padding: 6px 0 6px 22px; position: relative; }
.gate__points li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ds-accent); box-shadow: 0 0 6px var(--ds-accent-glow); }
.gate .banner { text-align: left; }

/* ------------------------------------------------------------------ topbar */
/* Classes in place of the style= attributes Supportal's topbar carries — this
   app's CSP has no 'unsafe-inline' for styles. Same declarations. */
.topbar__user { display: flex; align-items: center; gap: 8px; padding-left: 10px;
  border-left: 1px solid var(--ds-line); }
.topbar__user-name { font-size: var(--ds-fs-xs); color: var(--ds-text-dim); }
.topbar__signout { margin: 0; display: flex; }

/* -------------------------------------------------------------------- rail */
/* The orb's slot (38x38 + 10px), held by a static brand tile so the rail
   geometry matches Supportal's pixel-for-pixel. */
.rail__brand { width: 38px; height: 38px; margin-bottom: 10px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--ds-line-bright);
  background: radial-gradient(circle at 35% 30%, var(--ds-surface-3), var(--ds-void) 75%);
  color: var(--ds-accent); font: 700 16px/1 var(--ds-font); text-decoration: none;
  box-shadow: 0 0 10px var(--ds-accent-glow); }
.rail__brand:hover { text-decoration: none; border-color: var(--ds-accent-dim); box-shadow: var(--ds-glow-sm); }

/* ---------------------------------------------------------------- toasts */
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column;
  gap: 8px; z-index: var(--ds-z-pop); }
.toast { padding: 10px 14px; border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-accent-dim); background: var(--ds-surface-2);
  color: var(--ds-text); box-shadow: var(--ds-glow-sm), 0 10px 30px rgb(0 0 0 / .4);
  animation: toast-in var(--ds-t-slow) var(--ds-ease); }
.toast a { color: var(--ds-accent); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.banner--info { --bn-c: var(--ds-accent); }

/* ------------------------------------------------------------------ meters */
/* CSP forbids style="width:x%" — stepped width utilities for .meter__fill.
   Account health has 4 items -> 5 states. */
.w-0 { width: 0; } .w-25 { width: 25%; } .w-50 { width: 50%; } .w-75 { width: 75%; } .w-100 { width: 100%; }
/* .meter__fill is a <span> and the kit never gives it a display, so it stays
   inline and drops width entirely — the bar rendered as an empty track. */
.meter__fill { display: block; }
/* The kit's 4px meter is a sparkline next to dense data; here it is the one
   progress signal on the overview, so give it enough body to read as a bar. */
.panel__body > .meter { height: 8px; border-radius: 4px; margin: 12px 0 4px; }
.panel__body > .meter .meter__fill { border-radius: 4px; }

/* ---------------------------------------------------------------- overview */
.page-head--avatar { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: var(--ds-fs-lg); color: var(--ds-accent);
  background: var(--ds-accent-wash); border: 1px solid var(--ds-accent-dim);
  box-shadow: var(--ds-glow-sm); flex: 0 0 auto; }

.quick-actions { display: grid; gap: var(--ds-gap); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.action-card { display: block; padding: 14px 16px; border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg); background: var(--ds-surface); color: var(--ds-text);
  text-decoration: none;
  transition: border-color var(--ds-t-fast) var(--ds-ease), background var(--ds-t-fast) var(--ds-ease),
    transform var(--ds-t-fast) var(--ds-ease); }
.action-card:hover { border-color: var(--ds-line-hot); background: var(--ds-surface-2);
  transform: translateY(-1px); text-decoration: none; }
.action-title { font-weight: 600; font-size: var(--ds-fs-lg); }
.action-card:hover .action-title { color: var(--ds-accent); }
.action-desc { color: var(--ds-text-dim); font-size: var(--ds-fs-sm); margin-top: 3px; }

.health-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.health-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); background: var(--ds-surface); }
.health-item.is-done { border-color: color-mix(in srgb, var(--ds-ok) 35%, var(--ds-line)); }
.health-mark { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--ds-mono); font-size: var(--ds-fs-xs); }
.health-item.is-done .health-mark { color: var(--ds-ok);
  background: color-mix(in srgb, var(--ds-ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-ok) 45%, transparent); }
.health-item.is-todo .health-mark { color: var(--ds-text-faint); background: var(--ds-surface-2);
  border: 1px solid var(--ds-line-bright); }
.health-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.health-label { font-weight: 600; }
.health-hint { font-size: var(--ds-fs-sm); color: var(--ds-text-dim); }
.health-cta { flex: 0 0 auto; }

/* ---------------------------------------------------------------- security */
.sub { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ds-line); }
.sub h3 { font-size: var(--ds-fs-md); font-weight: 600; margin: 0 0 4px; }
.reauth { margin-top: 8px; }
form.inline { display: inline; margin: 0; }
.inline-verify { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.inline-verify input { max-width: 200px; letter-spacing: .3em; text-align: center; }
.steps { margin: 0 0 14px 18px; padding: 0; color: var(--ds-text-dim); }
.steps li { margin: 3px 0; }
/* White on purpose: QR codes need a light quiet zone to scan reliably on a
   dark page. The one intentional non-token color in this file. */
.qr-wrap { display: flex; justify-content: center; margin: 14px 0; }
.qr { background: #fff; padding: 16px; border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-line-bright); width: 280px; height: 280px; max-width: 100%; }
.qr svg, .qr img { width: 100%; height: 100%; display: block; }
.secret-block { background: var(--ds-surface-2); border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg); padding: 12px 14px; margin: 0 0 14px; }
.secret-label { font-family: var(--ds-mono); font-size: var(--ds-fs-xs); letter-spacing: .13em;
  text-transform: uppercase; color: var(--ds-text-faint); margin: 0 0 4px; }
.secret-value { font-family: var(--ds-mono); font-size: var(--ds-fs-xl); letter-spacing: .12em;
  margin: 0 0 12px; word-break: break-all; color: var(--ds-accent); }
.uri-value { display: block; font-family: var(--ds-mono); font-size: var(--ds-fs-xs);
  background: var(--ds-void); border: 1px solid var(--ds-line); border-radius: var(--ds-radius);
  padding: 8px 10px; overflow-wrap: anywhere; color: var(--ds-text-dim); }
.backup-grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  padding: 0; margin: 0 0 14px; }
.backup-grid li { background: var(--ds-void); border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius); padding: 8px; text-align: center; }
.backup-grid code { font-family: var(--ds-mono); font-size: var(--ds-fs-md); letter-spacing: .06em;
  color: var(--ds-text); }
.backup-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }

.method-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px; margin: 0 0 14px; }
.method-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px;
  border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); background: var(--ds-surface);
  cursor: pointer;
  transition: border-color var(--ds-t-fast) var(--ds-ease), background var(--ds-t-fast) var(--ds-ease); }
.method-opt:hover { border-color: var(--ds-line-hot); }
.method-opt input { accent-color: var(--ds-accent); margin-top: 2px; width: auto; }
.method-opt:has(input:checked) { border-color: var(--ds-accent-dim); background: var(--ds-accent-wash);
  box-shadow: var(--ds-glow-sm); }
.m-title { font-weight: 600; }
.m-desc { color: var(--ds-text-dim); font-size: var(--ds-fs-sm); }

.danger-zone { border-color: color-mix(in srgb, var(--ds-err) 40%, var(--ds-line)); }
.danger-zone .panel__title { color: var(--ds-err); }

.table-wrap { overflow-x: auto; }
tr.is-current { background: color-mix(in srgb, var(--ds-ok) 8%, transparent); }
.dev { font-weight: 600; color: var(--ds-text); }
.fp { font-family: var(--ds-mono); font-size: var(--ds-fs-xs); color: var(--ds-text-faint); }
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--ds-line); }
.activity li:last-child { border-bottom: 0; }
.act-type { color: var(--ds-text); }
.act-meta { font-family: var(--ds-mono); font-size: var(--ds-fs-sm); color: var(--ds-text-faint);
  white-space: nowrap; }

/* ------------------------------------------------------------- preferences */
.toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--ds-line); }
.toggle-row:last-of-type { border-bottom: 0; }
.toggle-label { font-weight: 600; }
.toggle-desc { color: var(--ds-text-dim); font-size: var(--ds-fs-sm); margin: 2px 0 0; }
.switch { position: relative; flex: 0 0 auto; width: 40px; height: 22px; }
.switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: var(--ds-surface-3);
  border: 1px solid var(--ds-line-bright); border-radius: 999px;
  transition: background var(--ds-t-fast) var(--ds-ease), border-color var(--ds-t-fast) var(--ds-ease); }
.switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--ds-text-dim);
  transition: transform var(--ds-t-fast) var(--ds-ease), background var(--ds-t-fast) var(--ds-ease); }
.switch input:checked + .track { background: var(--ds-accent-wash); border-color: var(--ds-accent);
  box-shadow: var(--ds-glow-sm); }
.switch input:checked + .track::after { transform: translateX(18px); background: var(--ds-accent); }
.switch input:focus-visible + .track { outline: 1px solid var(--ds-accent); outline-offset: 1px; }

/* ------------------------------------------------- billing + bookings rows */
.pm-list, .sub-list, .booking-list { list-style: none; margin: 0 0 12px; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.pm-item, .sub-item, .booking-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg);
  background: var(--ds-surface); font-size: var(--ds-fs-md); color: var(--ds-text-dim); }
.pm-brand, .sub-name, .booking-name { font-weight: 600; color: var(--ds-text); text-transform: capitalize; }
.pm-empty { color: var(--ds-text-faint); }
.booking-when { min-width: 15rem; font-family: var(--ds-mono); font-size: var(--ds-fs-sm); }
.booking-item.is-past { opacity: .6; }

/* ---------------------------------------------------------------- products */
.product-grid { display: grid; gap: var(--ds-gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.product-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); background: var(--ds-surface); }
.product-card.is-warn { border-color: color-mix(in srgb, var(--ds-warn) 40%, var(--ds-line)); }
.product-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.product-head h3 { margin: 0; font-size: var(--ds-fs-lg); font-weight: 600; }
.product-desc { margin: 0; font-size: var(--ds-fs-sm); color: var(--ds-text-dim); }
.product-meta { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.product-price { font-family: var(--ds-mono); font-weight: 600; color: var(--ds-accent); white-space: nowrap; }
.product-includes { margin: 0; padding-left: 16px; font-size: var(--ds-fs-sm); color: var(--ds-text-faint); }
.product-actions { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.seat-picker { display: flex; align-items: center; gap: 6px; font-size: var(--ds-fs-sm); color: var(--ds-text-dim); }
.seat-input { width: 64px; }
.purchase-panel { border-color: var(--ds-accent-dim); box-shadow: var(--ds-glow-sm); }
.purchase-panel.is-done { border-color: color-mix(in srgb, var(--ds-ok) 50%, var(--ds-line));
  box-shadow: 0 0 8px color-mix(in srgb, var(--ds-ok) 35%, transparent); }

/* --------------------------------------------------------- roguequeen wizard */
.step { margin: 22px 0; opacity: 0.35; pointer-events: none; transition: opacity var(--ds-t-base) var(--ds-ease); }
.step.is-open { opacity: 1; pointer-events: auto; }
.step__head { display: flex; align-items: center; gap: 10px; font-size: var(--ds-fs-lg);
  font-weight: 600; margin-bottom: 12px; }
.step__num { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-family: var(--ds-mono); font-size: var(--ds-fs-xs);
  border: 1px solid var(--ds-accent-dim); color: var(--ds-accent); background: var(--ds-accent-wash); }
.panel-sub { margin: 0 0 14px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-2); padding: 10px 14px; }
.panel-sub summary { cursor: pointer; font-weight: 600; color: var(--ds-text-dim); }
.panel-sub[open] summary { margin-bottom: 8px; }
.hint code, .panel-sub code { font-family: var(--ds-mono); font-size: var(--ds-fs-xs);
  background: var(--ds-void); border: 1px solid var(--ds-line); border-radius: 3px; padding: 1px 5px; }

/* -------------------------------------------------------------- status/misc */
.status-icon { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center;
  border-radius: 50%; font-size: var(--ds-fs-2xl); font-weight: 700;
  background: var(--ds-surface-2); color: var(--ds-text-dim); }
.status-ok { background: color-mix(in srgb, var(--ds-ok) 12%, transparent); color: var(--ds-ok);
  box-shadow: 0 0 12px color-mix(in srgb, var(--ds-ok) 35%, transparent); }
.status-bad { background: color-mix(in srgb, var(--ds-err) 12%, transparent); color: var(--ds-err); }
.stub-notice { border: 1px dashed var(--ds-line-bright); border-radius: var(--ds-radius-lg);
  background: var(--ds-surface); color: var(--ds-text-dim); padding: 12px 14px; margin-bottom: 14px; }
.stub-notice p { margin: 0 0 6px; }
.stub-notice p:last-child { margin: 0; }
.kv > div { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 4px 0; }

/* --------------------------------------------------------------- utilities */
.btn--block { width: 100%; justify-content: center; }
.mt { margin-top: 12px; } .mt-lg { margin-top: 22px; } .ml-sm { margin-left: 8px; }
.right { text-align: right; } .center { text-align: center; } .capitalize { text-transform: capitalize; }
.link-sm { font-size: var(--ds-fs-sm); }
.hint { font-size: var(--ds-fs-xs); color: var(--ds-text-faint); margin: 4px 0 0; line-height: 1.45; }
.is-hidden { display: none !important; }
.form-row-between { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ------------------------------------------------------------ accessibility */
.skip-link { position: absolute; left: -999px; top: 0; z-index: var(--ds-z-pop);
  background: var(--ds-accent); color: var(--ds-void); padding: 8px 12px;
  border-radius: 0 0 var(--ds-radius) 0; }
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Coupon entry on a product card: collapsed by default, native <details> so no JS is involved. */
.coupon-toggle { margin: 6px 0; }
.coupon-toggle summary { cursor: pointer; font-size: var(--ds-fs-sm); }
.coupon-toggle .field { margin-top: 6px; }