/* Account area. Same palette as the marketing site and the application, so all
   three read as one product, but this is a separate stylesheet because it is a
   separate app.

   THAT CLAIM USED TO BE FALSE. This file said "same palette as the marketing
   site" while carrying indigo #6366f1 on slate #0f172a -- the invented palette
   the site itself has since dropped. Signing in therefore took you from a
   gold-on-black page to a violet-on-navy one, on the same domain, mid-purchase.
   A comment asserting consistency is not consistency.

   Every value below is the application's, from frontend/tailwind.config.js and
   frontend/src/index.css. */

:root {
  --primary: #c8a24a;
  --primary-dark: #a8863a;
  --primary-light: #e3c77a;
  --accent: #dcb968;

  /* State, not brand -- the app's tailwind config is explicit that these
     "are NOT brand colours and do not move". */
  --success: #00ff88;
  --warning: #ffaa00;
  --danger: #ff4757;

  /* Categorical, for rank badges. The app's own chart series
     (AnalyticsTab.tsx), which exists precisely to be told apart at a glance. */
  --cat-blue: #58a6ff;
  --cat-green: #3fb950;
  --cat-purple: #a371f7;

  --dark: #0a0a0f;
  --dark-light: #12121a;
  --dark-lighter: #1a1a24;

  /* White at 100/70/50%, as the app sets it -- not slate. 50% measures about
     4.9:1 on --dark, just clear of the 4.5:1 AA threshold for body text. */
  --border: rgb(255 255 255 / 0.1);
  --text: #ffffff;
  --text-muted: rgb(255 255 255 / 0.5);

  --radius: 12px;
  --radius-sm: 8px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--dark);
  color: var(--text);
  line-height: 1.6;
}

.wrap { width: min(1000px, 100% - 2.5rem); margin-inline: auto; }
main.wrap { padding-block: 2.5rem 4rem; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; letter-spacing: -0.02em; }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
h2 { font-size: 1.35rem; margin-top: 2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1rem; max-width: 68ch; }
a { color: var(--primary-light); text-underline-offset: 2px; }
a:hover { color: #fff; }
.muted { color: var(--text-muted); }
.small { font-size: 0.875rem; }
.warn-text { color: var(--warning); }
code, .mono {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.875em;
  word-break: break-all;
}

/* --- nav --- */
.nav {
  border-bottom: 1px solid var(--border);
  /* --dark at 90%. Was rgb(15 23 42 / 0.9) -- the invented slate. */
  background: rgb(10 10 15 / 0.9);
  position: sticky; top: 0; z-index: 20;
}
.nav .wrap { display: flex; align-items: center; gap: 1rem; padding-block: 0.85rem; }

/* The mark and the wordmark, drawn as the application draws them.
   Geometry: _recovery/build_brand_assets.py draw_mark(simplified=False). */
.brand {
  display: inline-flex; align-items: center; gap: 0.6em;
  color: #fff; text-decoration: none; line-height: 1;
}
.brand svg { width: 28px; height: 28px; flex-shrink: 0; color: #f2efe9; }
/* Weight 500 and +0.04em, matching the app's Logo.tsx. This was 800/-0.02em,
   which is a different wordmark from the one beside it in the product. */
.brand-word { font-weight: 500; font-size: 1.1rem; letter-spacing: 0.04em; }
.nav-links { margin-left: auto; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
/* :not(.btn) is load-bearing, not tidiness.

   `.nav-links a` has specificity 0,1,1 and `.btn-primary` only 0,1,0, so
   without this the nav link rule WINS over the button and paints "Create
   account" in --text-muted -- white at 50% on the gold, which measures 2.41:1
   against a 4.5:1 minimum. Measured in the browser, not guessed. The same
   button in the page body was 8.20:1, so the two rendered differently on one
   screen and the broken one was the call to action. */
.nav-links a:not(.btn) { color: var(--text-muted); text-decoration: none; font-size: 0.92rem; }
.nav-links a:not(.btn):hover { color: #fff; }
.inline { display: inline; margin: 0; }
.link-button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-muted); font: inherit; font-size: 0.92rem;
}
.link-button:hover { color: #fff; }

/* --- cards, tables --- */
.card {
  background: var(--dark-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.card > :last-child { margin-bottom: 0; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: #fff; font-weight: 600; white-space: nowrap; }
td { color: var(--text-muted); }
.table-scroll { overflow-x: auto; }
tr:hover td { color: var(--text); }

/* --- forms --- */
label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.3rem; }
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--dark-lighter);
  background: rgb(0 0 0 / 0.3);
  color: var(--text);
  font: inherit;
}
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
  border-color: var(--border);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary-light); outline-offset: 1px; border-color: transparent; }
.field { margin-bottom: 1rem; }
.form-narrow { max-width: 26rem; }
.row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; }

.btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.1rem; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.9rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
/* Dark text on the gold, NOT white. White on #c8a24a measures 2.4:1, well
   under the 4.5:1 minimum -- and this is the button people press to create an
   account and to pay. Near-black on the same gold is about 8:1. */
.btn-primary { background: var(--primary); color: var(--dark); font-weight: 700; }
.btn-primary:hover { background: var(--primary-light); color: var(--dark); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--primary); }
.btn-danger { background: transparent; color: var(--danger); border-color: rgb(255 71 87 / 0.4); }
.btn-danger:hover { background: rgb(255 71 87 / 0.12); }
.btn-small { padding: 0.35rem 0.7rem; font-size: 0.8rem; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 3px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 0; top: 0; background: var(--primary); color: var(--dark); padding: 0.6rem 1rem; z-index: 50; }

/* --- badges --- */
.badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.badge-guest    { color: var(--text-muted);  border-color: var(--border);        background: rgb(255 255 255 / 0.06); }
.badge-customer { color: var(--cat-blue);    border-color: rgb(88 166 255 / 0.4); background: rgb(88 166 255 / 0.12); }
.badge-friend   { color: var(--cat-green);   border-color: rgb(63 185 80 / 0.4);  background: rgb(63 185 80 / 0.12); }
.badge-admin    { color: var(--primary-light); border-color: rgb(200 162 74 / 0.5); background: rgb(200 162 74 / 0.16); }
.badge-revoked  { color: var(--danger);      border-color: rgb(255 71 87 / 0.4);  background: rgb(255 71 87 / 0.12); }
.badge-ok       { color: var(--success);     border-color: rgb(0 255 136 / 0.4);  background: rgb(0 255 136 / 0.12); }

/* --- flashes and notes --- */
.flash { padding: 0.75rem 1rem; border-radius: var(--radius-sm); border-left: 3px solid; margin-bottom: 1.5rem; max-width: none; }
.flash-ok { border-color: var(--success); background: rgb(0 255 136 / 0.1); color: var(--success); }
.flash-error { border-color: var(--danger); background: rgb(255 71 87 / 0.1); color: #ffb3ba; }
/* Brass wash, the app's primary-muted. Was rgb(99 102 241 / 0.08) -- indigo. */
.note { border-left: 3px solid var(--primary); background: rgb(200 162 74 / 0.1); padding: 0.9rem 1.1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1.25rem 0; }
.note.warn { border-left-color: var(--warning); background: rgb(255 170 0 / 0.08); }
.note > :last-child { margin-bottom: 0; }

.token-box {
  background: rgb(0 0 0 / 0.35);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  word-break: break-all;
  user-select: all;
}

.footer { border-top: 1px solid var(--border); padding-block: 1.5rem; margin-top: 3rem; }
.stat { display: inline-block; margin-right: 1.5rem; }
.stat b { display: block; font-size: 1.5rem; }