/* ── Constellation app styles ─────────────────────────────────────
   Design system inherited from tenshu.ai (see DESIGN.md).
   tenshu.ai design-system CSS is VENDORED at static/styles/styles.css
   (a 20 Jul copy of the marketing site's sheet) and loaded via base.html.
   This file only contains app-specific overrides and auth page styles.
   ──────────────────────────────────────────────────────────────── */

/* ── The one :root (8 Aug; the whole palette since 25 Aug) ──────────
   EVERY colour the workspace paints is a token defined here — the
   neutrals (DESIGN.md: true black, iron, charcoal — no blue cast), the
   semantic inks (cheaper/dearer, info, warm, verdict gold, purple), the
   greys of text, and the *-rgb triples the alpha washes are mixed from.
   builder.css never writes a literal; a theme is a second definition of
   these names and nothing else. The brand set (--black/--gold/…) rides
   in from the vendored styles.css.

   Dark is the house default. Light follows the OS (prefers-color-scheme)
   unless the user chose — <html data-theme="light|dark"> from
   User.theme, stamped server-side so there is never a flash. Print is
   light. All three light blocks are the SAME values, generated together
   (see the light block below) — never edit one alone. */
:root {
  color-scheme: dark;
  /* THE TWO CONTROL HEIGHTS (Doug, 28 Aug). One row of the main toolbar
     carried five — 20, 24, 30, 32 and 33 — none of them wrong on its
     own and no rule joining them up. There are two now, and the rule
     reads off the page: 32 is something you OPERATE, 20 is something
     that LABELS. Anything new picks one and says which.
     These are sizes, not colours: they do not vary by theme, so unlike
     every value below they live here once and are NOT mirrored into the
     light blocks. */
  --control-h: 32px;
  --chip-h: 20px;
  --bg: #000000;           --bg-rgb: 0,0,0;
  /* THE DRAWER'S LANES (Doug, 5 Sep): four lane colours, carried lightly. */
  /* Opportunities wear teal, not green (8 Sep): green is the market's answer on every stamp and row. */
  --lane-del: #b54a3c;  --lane-add: #3f8ae0;  --lane-irr: #b58500;  --lane-opp: #1f8f82;
  --surface: #181818;      --surface-rgb: 24,24,24;
  --surface-hover: #202020;
  --border: #313131;
  --text: #f5f5f5;
  --text-soft: #c9c9c9;
  --muted: #7d7d7d;
  --muted-2: #a2a2a2;
  --muted-dim: #666666;
  --ink: #ffffff;          --ink-rgb: 255,255,255;   /* the theme's own white: washes, hot strokes, the selection ring */
  --on-accent: #101010;                              /* ink on a filled accent/verdict chip */
  --accent: #ffc000;       --accent-rgb: 255,192,0;
  --accent-dim: rgba(255,192,0,0.12);
  --green: #78c49a;        --green-rgb: 120,196,154; /* cheaper / good */
  --green-bright: #6fcf8f;
  --green-deep: #4a9a6a;
  --mint: #9fdcc0;
  --bad: #e05050;          --bad-rgb: 224,80,80;     /* dearer / bad */
  --bad-soft: #ec8a8a;
  --red: #e57373;
  --amber: #f0b75a;
  --orange: #e0a050;       --orange-rgb: 224,160,80;
  --gold-soft: #e0c06b;    --gold-rgb: 224,180,74;
  --gold-verdict: #e0b44a;
  --info: #3f8ae0;         --info-rgb: 107,159,212;
  --info-soft: #8fb6e0;
  --info-deep: #6b9fd4;
  --warm: #d4916b;         --warm-rgb: 212,145,107;
  --purple: #b48ede;       --purple-rgb: 180,142,222;
  /* YOUR HAND IS THE INK (Doug and Alex, 15 Sep): a question you pushed
     wears the text colour, not a hue of its own — gold is Workflow's
     word, green the market's, ink yours. One token, read through the
     theme's own --text; every surface that says "you" reads it.
     Purple stays the supplier's. */
  --you: var(--text);      --you-rgb: var(--ink-rgb);
  --teal: #6bd4c4;
  --silver: #cfd6e4;
  --gold-deep: #8f6d1d;
  --palette-1: #b48ede; --palette-2: #5fb3a1; --palette-3: #d97fa6; --palette-4: #8fa65f;
  --palette-5: #c78a5b; --palette-6: #7f9fd9; --palette-7: #a6d97f; --palette-8: #d9c47f;
  --nav-plate: #000000; --nav-ink: #ffffff;   /* the masthead lockup: black plate, white letterforms */
  --legible-toward: #b9c6da;   /* retailer brand colours mix toward this to read on the canvas */
  --hero-opacity: 0.10;        /* the app shell's faint hero texture — off on paper */
}

/* ── LIGHT — the paper terminal (values from Doug's #237 v3, 23 Aug:
   "dark is the instrument glowing in a dark room; light is the same
   instrument printed on good paper" — warm paper, a gold that holds on
   white, ink-black rules). One block, three doors: the OS preference,
   the user's override, and print. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* THE DRAWER'S LANES (Doug, 5 Sep): four lane colours, carried lightly. */
    --lane-del: #b54a3c;  --lane-add: #3f8ae0;  --lane-irr: #b58500;  --lane-opp: #1f8f82;
    color-scheme: light;
    --bg: #f3f1eb;           --bg-rgb: 243,241,235;
    --surface: #ffffff;      --surface-rgb: 255,255,255;
    --surface-hover: #f6f4ef;
    --border: #cfccc2;
    --text: #14141a;
    --text-soft: #3a3a40;
    --muted: #5c5c64;
    --muted-2: #6e6e78;
    --muted-dim: #8a8a90;
    --ink: #14141a;          --ink-rgb: 20,20,26;
    --on-accent: #ffffff;
    --accent: #b58500;       --accent-rgb: 181,133,0;
    --accent-dim: rgba(181,133,0,0.14);
    --green: #2f8a5b;        --green-rgb: 47,138,91;
    --green-bright: #2f8a5b;
    --green-deep: #23663f;
    --mint: #2f8a5b;
    --bad: #c73e3e;          --bad-rgb: 199,62,62;
    --bad-soft: #b35959;
    --red: #c94f4f;
    --amber: #9a6b00;
    --orange: #b7731c;       --orange-rgb: 183,115,28;
    --gold-soft: #9a7a1f;    --gold-rgb: 154,122,31;
    --gold-verdict: #9a7a1f;
    --info: #2a6fc4;         --info-rgb: 42,111,196;
    --info-soft: #3d78b8;
    --info-deep: #2f5f9a;
    --warm: #b5683f;         --warm-rgb: 181,104,63;
    --purple: #7d55b8;       --purple-rgb: 125,85,184;
    --teal: #1f8f82;
    --silver: #6b7280;
    --gold-deep: #6b5214;
    --palette-1: #7d55b8; --palette-2: #2f7f70; --palette-3: #b04f7a; --palette-4: #5f7a2a;
    --palette-5: #9a5a2e; --palette-6: #3f63b0; --palette-7: #4f8a2a; --palette-8: #8a7a2a;
    --nav-plate: transparent; --nav-ink: #14141a;
    --legible-toward: #2b2f36;
    --hero-opacity: 0;
  }
}
:root[data-theme="light"] {
  /* THE DRAWER'S LANES (Doug, 5 Sep): four lane colours, carried lightly. */
  --lane-del: #b54a3c;  --lane-add: #3f8ae0;  --lane-irr: #b58500;  --lane-opp: #1f8f82;
    color-scheme: light;
    --bg: #f3f1eb;           --bg-rgb: 243,241,235;
    --surface: #ffffff;      --surface-rgb: 255,255,255;
    --surface-hover: #f6f4ef;
    --border: #cfccc2;
    --text: #14141a;
    --text-soft: #3a3a40;
    --muted: #5c5c64;
    --muted-2: #6e6e78;
    --muted-dim: #8a8a90;
    --ink: #14141a;          --ink-rgb: 20,20,26;
    --on-accent: #ffffff;
    --accent: #b58500;       --accent-rgb: 181,133,0;
    --accent-dim: rgba(181,133,0,0.14);
    --green: #2f8a5b;        --green-rgb: 47,138,91;
    --green-bright: #2f8a5b;
    --green-deep: #23663f;
    --mint: #2f8a5b;
    --bad: #c73e3e;          --bad-rgb: 199,62,62;
    --bad-soft: #b35959;
    --red: #c94f4f;
    --amber: #9a6b00;
    --orange: #b7731c;       --orange-rgb: 183,115,28;
    --gold-soft: #9a7a1f;    --gold-rgb: 154,122,31;
    --gold-verdict: #9a7a1f;
    --info: #2a6fc4;         --info-rgb: 42,111,196;
    --info-soft: #3d78b8;
    --info-deep: #2f5f9a;
    --warm: #b5683f;         --warm-rgb: 181,104,63;
    --purple: #7d55b8;       --purple-rgb: 125,85,184;
    --teal: #1f8f82;
    --silver: #6b7280;
    --gold-deep: #6b5214;
    --palette-1: #7d55b8; --palette-2: #2f7f70; --palette-3: #b04f7a; --palette-4: #5f7a2a;
    --palette-5: #9a5a2e; --palette-6: #3f63b0; --palette-7: #4f8a2a; --palette-8: #8a7a2a;
    --nav-plate: transparent; --nav-ink: #14141a;
    --legible-toward: #2b2f36;
    --hero-opacity: 0;
}

/* THE SHELL WEARS THE TOKENS (25 Aug): the vendored brand sheet paints
   html/body brand-black and floats the hero texture; the workspace pages
   already re-ink body through builder.css, the app-shell pages
   (categories, profile, training) do it here. The nav follows the theme
   too (Alex, 25 Aug: paper header, dark lockup) — see THE MASTHEAD below. */
html, body { background: var(--bg); color: var(--text); }
body::before { opacity: var(--hero-opacity); }

/* ── Auth pages (sign in / sign up) ──────────────────────────────── */

.auth-page {
  min-height: 100vh;
  padding: 6rem 1rem 2rem;
  display: flex;
  justify-content: center;
}

.auth-card {
  width: 100%;
  max-width: 420px;
}

.auth-panel {
  background: var(--surface);
  border: 1px solid rgba(var(--ink-rgb), 0.06);
  padding: 2rem;
}

.auth-panel .lockup-tagline { width: 220px; height: auto; display: block; margin: 0 auto 8px; }

.auth-panel-title {
  font-family: 'Archivo Narrow', 'Archivo', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text);
  margin-bottom: 1.25rem;
}

.auth-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Dark-themed form controls */
.auth-page .form-control,
.auth-panel .form-control,
.auth-page input[type="text"],
.auth-page input[type="email"],
.auth-page input[type="password"],
.auth-panel input[type="text"],
.auth-panel input[type="email"],
.auth-panel input[type="password"] {
  background: var(--bg);
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  color: var(--text);
  padding: 0.6rem 0.85rem;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  width: 100%;
  transition: border-color 0.15s ease;
}

.auth-page .form-control:focus,
.auth-panel .form-control:focus,
.auth-page input:focus,
.auth-panel input:focus {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--text);
  outline: none;
  box-shadow: none;
}

.auth-page .form-control::placeholder,
.auth-panel .form-control::placeholder,
.auth-page input::placeholder,
.auth-panel input::placeholder {
  color: var(--muted);
}

.auth-page label,
.auth-panel label {
  color: var(--muted);
  font-family: 'Archivo Narrow', 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  display: block;
}

.auth-page .form-text,
.auth-panel .form-text {
  color: var(--muted);
  font-size: 12px;
}

.auth-page .form-check-label,
.auth-panel .form-check-label {
  color: var(--muted);
  text-transform: none;
  font-size: 14px;
}

/* Crispy forms overrides */
.auth-page .textinput,
.auth-page .textInput,
.auth-page .passwordinput,
.auth-page .emailinput,
.auth-panel .textinput,
.auth-panel .textInput,
.auth-panel .passwordinput,
.auth-panel .emailinput {
  background: var(--bg) !important;
  border: 1px solid rgba(var(--ink-rgb), 0.1) !important;
  color: var(--text) !important;
}

.auth-page .textinput:focus,
.auth-page .textInput:focus,
.auth-page .passwordinput:focus,
.auth-page .emailinput:focus,
.auth-panel .textinput:focus,
.auth-panel .textInput:focus,
.auth-panel .passwordinput:focus,
.auth-panel .emailinput:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

/* Auth submit button — gold CTA */
.auth-page .btn-primary,
.auth-panel .btn-primary,
.auth-page button[type="submit"],
.auth-panel button[type="submit"] {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 10px 20px;
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
  width: 100%;
}

.auth-page .btn-primary:hover,
.auth-panel .btn-primary:hover,
.auth-page button[type="submit"]:hover,
.auth-panel button[type="submit"]:hover {
  background: #917300;
}

/* ── Google OAuth button ─────────────────────────────────────────── */

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(var(--ink-rgb), 0.15);
  padding: 10px 20px;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
  width: 100%;
}

.btn-google:hover {
  border-color: rgba(var(--ink-rgb), 0.4);
  color: var(--text);
  text-decoration: none;
}

.btn-google .google-logo {
  flex-shrink: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.96px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(var(--ink-rgb), 0.1);
}

/* ── Links ───────────────────────────────────────────────────────── */

.auth-page a,
.auth-panel a {
  color: var(--muted);
  transition: color 0.15s ease;
}

.auth-page a:hover,
.auth-panel a:hover {
  color: var(--text);
}

/* ── Alerts ──────────────────────────────────────────────────────── */

.alert-error {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  padding: 12px 16px;
  font-size: 14px;
}

/* ── Breadcrumb (builder toolbar) ────────────────────────────────── */

/* Toolbar uses align-items:baseline; the breadcrumb is plain inline text
 * that baseline-aligns with every other text child (dropdown value, tab
 * buttons, mode pills) without needing its own height/padding/line-height. */
.breadcrumb {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
}
/* Asymmetric margin: the toolbar's own 16px gap already separates "/"
 * from the dropdown on the right, so we just need breathing room on the
 * left to balance visually. */
.breadcrumb__sep { margin: 0 0 0 12px; color: var(--muted); }
/* (Tom Select alignment override lives in builder.css so it loads after the
 * TS CDN stylesheet and actually wins specificity.) */
.breadcrumb a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s;
  font-weight: 500;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep {
  color: var(--muted);
  opacity: 0.6;
  font-size: 16px;
}
/* The live-text wordmark (24 Jul, navbar went SVG mark + wordmark) is a
 * class only this app knows — the vendored tenshu.ai sheet colors its
 * siblings (nav__logo-text) but not this one, so without a color it fell
 * to the browser's default link blue. */
/* THE MASTHEAD FOLLOWS THE THEME (Alex, 25 Aug): paper header, dark
   lockup; the brand sheet's black-and-white nav is re-inked here. */
.nav { background: var(--bg); border-bottom-color: var(--border); }
.nav__logo-mark, .nav__logo-text, .nav__logo-word { color: var(--text); }
/* The inline lockup's size lives with the shell, not the workspace
   (Alex, 27 Aug: no logo on the categories page — builder.css alone
   sized it, so every app-shell page drew a zero-height svg). */
.nav .nav__logo-lockup { height: 26px; width: auto; display: block; }
.nav__link { color: var(--muted); }
.nav__link:hover { color: var(--text); }

/* The wordmark holds one line — the Categories link (11 Aug) widened
 * the right group and space-between squeezed "PET CIRCLE" into a wrap. */
.nav__logo { flex-shrink: 0; }
.nav__logo-text { white-space: nowrap; }

/* ── Base layout shell ───────────────────────────────────────────── */

.content--with-nav { padding-top: 64px; }

/* ── Appearance — the profile page's System / Light / Dark pick ────── */
.theme-pick-label { font: 500 10px 'DM Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.theme-pick-row { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.theme-pick-btn { background: none; border: 0; color: var(--muted); font: 500 12px 'DM Sans', sans-serif; padding: 5px 14px; cursor: pointer; }
.theme-pick-btn + .theme-pick-btn { border-left: 1px solid var(--border); }
.theme-pick-btn:hover { color: var(--text); }
.theme-pick-btn.on { background: var(--accent); color: var(--on-accent); }

/* ── The categories page (folded in from categories.css, 27 Aug: one
   shell sheet; a page sheet that drifted from the tokens is how the
   nav stayed black here) ─────────────────────────────────────────── */
/* Tokens live in project.css — the one :root for every page (8 Aug). */
body { background: var(--bg) !important; color: var(--text); font-family: 'DM Sans', sans-serif; }
.nav { background: rgba(var(--bg-rgb),0.94) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--border) !important; }
.content { background: var(--bg) !important; padding-top: 64px !important; min-height: 100vh; }

.cat-shell { max-width: 1280px; margin: 0 auto; padding: 32px 40px 64px; }

.cat-header { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.cat-title { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.cat-subtitle { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }

.cat-filter { display: inline-flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.cat-filter button { font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: transparent; border: none; padding: 7px 14px; border-radius: 5px; cursor: pointer; transition: all 0.15s; }
.cat-filter button:hover { color: var(--text); }
.cat-filter button.active { background: var(--accent-dim); color: var(--accent); }
.cat-filter .count { opacity: 0.55; margin-left: 5px; }

.card[hidden] { display: none !important; }

/* Section heading + grouping. Favourites section auto-hides when empty
   (see .cat-section--empty) so a heading never floats alone above zero
   cards. */
.cat-section { margin-bottom: 32px; }
.cat-section--empty { display: none; }
.cat-section__heading {
  font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px;
  font-weight: 600;
}

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
/* THE REEL (Alex, 27 Sep): the favourites one at a time, the category stood
   up large with its bars and up to three insight tiles. */
.cat-reel { margin-bottom: 32px; }
.cat-reel__frame { display: flex; align-items: stretch; gap: 10px; }
.cat-reel__arrow { flex: 0 0 34px; border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  color: var(--muted); cursor: pointer; font-size: 11px; }
.cat-reel__arrow:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.cat-reel__arrow:disabled { opacity: 0.3; cursor: default; }
.cat-reel__track { flex: 1; min-width: 0; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cat-reel__track::-webkit-scrollbar { display: none; }
.cat-reel__card { flex: 0 0 100%; scroll-snap-align: start; position: relative; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 26px;
  display: flex; flex-direction: column; gap: 18px; }
.cat-reel__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-right: 40px; }
.cat-reel__name { font-size: 22px; font-weight: 600; color: var(--text); text-decoration: none; }
.cat-reel__name:hover { color: var(--accent); }
.cat-reel__body { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 28px; align-items: start; }
.cat-reel__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cat-reel__tile { display: flex; flex-direction: column; gap: 6px; padding: 14px; min-height: 120px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: inherit; background: rgba(var(--ink-rgb), 0.02); }
.cat-reel__tile:hover { border-color: var(--accent); }
.cat-reel__tile-k { font: 600 10px 'DM Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cat-reel__tile b { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
.cat-reel__tile-b { font-size: 12px; color: var(--text-soft); line-height: 1.4; }
.cat-reel__tile i { margin-top: auto; font: 500 11px 'DM Mono', monospace; font-style: normal; color: var(--accent); }
.cat-reel__tile--late .cat-reel__tile-k, .cat-reel__tile--off .cat-reel__tile-k { color: var(--bad); }
.cat-reel__tile--missing .cat-reel__tile-k { color: var(--gold-soft); }
.cat-reel__tile--ready .cat-reel__tile-k { color: var(--green); }
.cat-reel__quiet { font-size: 12px; color: var(--muted); padding: 14px 0; }
.cat-reel__dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.cat-reel__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--ink-rgb), 0.15); }
.cat-reel__dots i.on { background: var(--accent); }
@media (max-width: 820px) { .cat-reel__body { grid-template-columns: 1fr; } .cat-reel__tiles { grid-template-columns: 1fr; } }
/* WHERE TO GO (Alex, 27 Sep): the doors in the engine segment's dress, centred
   between the reel and the list. */
.cat-doors { display: flex; justify-content: center; margin: 4px 0 32px; }
/* The switch's own dress, mirrored from builder.css (its .seg-switch rules):
   the workspace stylesheet cannot ride this page — it fixes the content to
   the viewport for the Tree's layout and Home stops scrolling (27 Sep). Keep
   these in step with the originals. */
.cat-doors .seg-switch { display: inline-grid; grid-auto-flow: column; --seg-col: 156px;
  grid-auto-columns: minmax(var(--seg-col), 1fr); align-items: stretch;
  background: rgba(var(--ink-rgb), 0.03); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px; gap: 2px; }
.cat-doors .seg-switch a { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500;
  color: var(--muted); background: transparent; border: none; text-decoration: none;
  padding: 6px 18px; border-radius: 4px; cursor: pointer; text-align: center;
  letter-spacing: 0; text-transform: none; transition: background 0.15s, color 0.15s; }
.cat-doors .seg-switch a:hover { color: var(--text); }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

/* Favourite star — top-right of each card. Stops link navigation via JS
   so clicking the star doesn't open the category. */
.fav-toggle {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; line-height: 1;
  color: rgba(var(--ink-rgb),0.18);
  transition: color 0.15s, transform 0.1s;
  display: flex; align-items: center; justify-content: center;
}
/* Hovering an unfavourited star previews the action with a darker yellow,
   distinct from the bright accent of an actual favourite — so the two
   states never look identical at a glance. */
.fav-toggle:hover { color: var(--gold-deep); transform: scale(1.1); }
.fav-toggle--on { color: var(--accent); }
.fav-toggle--on:hover { color: rgba(var(--gold-rgb),0.7); }
/* Pad the card head so the star doesn't sit on top of the title. */
.card__head { padding-right: 32px; }
.card:hover { border-color: rgba(var(--gold-rgb),0.4); background: var(--surface-hover); transform: translateY(-1px); }
/* Cards are <a> elements; lock the title color across link states so it
   doesn't fall back to the browser's default blue on hover/focus/visited. */
.card, .card:hover, .card:visited, .card:active, .card:focus { color: var(--text); }

.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card__name { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; margin: 0; line-height: 1.3; flex: 1; min-width: 0; color: var(--text); }
/* The category's annual ledger sales — the number the cards rank by. */
.card__sales { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text); white-space: nowrap; }
.card__sales i { font-style: normal; font-size: 9px; color: var(--muted); }
.pill { font-family: 'DM Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.pill--published { background: rgba(var(--green-rgb),0.12); color: var(--green); }
.pill--none { background: rgba(var(--ink-rgb),0.04); color: var(--muted); }

.meta { display: flex; align-items: center; gap: 12px; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.meta__n { color: var(--text); }

.bars { display: flex; flex-direction: column; gap: 6px; }
.bar { display: flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; font-size: 10px; }
.bar__name { color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; min-width: 92px; }
.bar__track { flex: 1; height: 4px; background: rgba(var(--ink-rgb),0.05); border-radius: 2px; overflow: hidden; position: relative; }
.bar__fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(var(--ink-rgb),0.18); border-radius: 2px; }
.bar__n { color: var(--text); min-width: 44px; text-align: right; }
.bar--pin .bar__name { color: var(--accent); font-weight: 500; }
.bar--pin .bar__fill { background: var(--accent); }
.bar--zero .bar__n { color: var(--muted); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-family: 'DM Mono', monospace; font-size: 10px; padding: 3px 8px; border-radius: 5px; display: inline-flex; align-items: center; gap: 5px; }
.chip--insights { background: color-mix(in srgb, var(--amber) 10%, transparent); color: var(--amber); }
.chip--actions { background: rgba(var(--info-rgb),0.12); color: var(--info); }
.chip--clean { background: rgba(var(--green-rgb),0.1); color: var(--green); }
.chip__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.card__foot { display: flex; justify-content: space-between; align-items: center; font-family: 'DM Mono', monospace; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; border-top: 1px solid var(--border); padding-top: 12px; margin-top: auto; }
.card__foot a, .card__foot span { color: var(--muted); }

.empty { padding: 80px 24px; text-align: center; color: var(--muted); }
.empty__icon { font-size: 28px; margin-bottom: 12px; opacity: 0.4; }
.empty__msg { font-family: 'DM Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }

/* In-flight build badge — clicking the card drops into the session. */
.pill--live { background: rgba(var(--gold-rgb),0.12); color: var(--accent); border: 1px solid rgba(var(--gold-rgb),0.35); }

/* THE APP NAV (Doug, 6 Aug: the brand, the retailer, Training, the
   user) AND ITS FOLD (Alex, 10 Sep: the marketing site's black panel
   was leaking into the workspace at phone widths, open and unthemed,
   with white burger lines). This sheet loads on EVERY page, after the
   site's, so the app nav dresses the same on Categories, Training, the
   builder and the account pages. The burger wears the ink; the panel
   wears the page ground; both palettes are tokens. The nav stays FIXED
   (the content's top padding sits under it — a relative nav opened a
   48px gap, Alex 10 Sep); a fixed box anchors the panel's top: 100%. */
.nav--app .nav__links { display: flex; gap: 18px; align-items: center; }
.nav--app .nav__link--quiet { color: var(--muted); }
.nav--app .nav__burger span { background: var(--text); }
@media (max-width: 768px) {
  .nav--app .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px 24px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(var(--ink-rgb), 0.12); z-index: 60; }
  .nav--app .nav__links.is-open { display: flex; }
  .nav--app .nav__burger { display: flex; }
}