:root {
  --bg: #f1f4f9;
  --surface: #fff;
  --border: #e4e8f0;
  --text: #14192b;
  --text-secondary: #3d475e;
  /* #6b7488 measured 4.69:1 on --surface but only 4.25:1 on --bg, under the
     4.5 AA floor for normal text -- and it is used on --bg by breadcrumbs on
     every page, .spec-label on ~124k profile pages, .hub-count,
     .pagination-current and .auth-switch. #636c83 is 4.76:1 on --bg and
     5.25:1 on --surface, so both surfaces pass. */
  --text-muted: #636c83;
  --accent: #1a5fd0;
  --accent-hover: #1550b8;   /* was hardcoded in 6 separate rules */
  --navy: #16255a;
  --blue-tint: #e9f0fd;
  --blue-tint-2: #cfe0fb;
  --radius: 12px;
  --radius-sm: 8px;
  --pill: 9999px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-num: "Barlow Condensed", var(--font);
  /* Repointed, not deleted -- pages that don't get a bespoke rework
     (index/about/age-gate) still reference these two tokens directly. */
  --font-serif: var(--font);
  --font-mono: var(--font);

  /* --- Brand layer (added with the All The Babes rebrand) ---------------
     ADDITIVE ONLY. Every token above this comment is load-bearing for the
     ~124k profile/hub pages and must keep its current value -- the dark
     treatment is scoped to the homepage hero and the age gate, so content
     pages stay on the light, ad-friendly canvas they already render in. */
  --ink: #0B0E17;          /* hero band ground */
  --ink-raised: #151A28;   /* raised surface on dark */
  --ink-border: #27304a;
  --ink-text: #EDF0F7;
  --ink-muted: #8E97AD;
  --brand: #E8336D;        /* accent/rules only -- 4.70:1 on --ink, NOT a text colour */
  --brand-soft: #FF6F9C;   /* 7.35:1 on --ink (stat numerals); only 2.62:1 on white */
  /* Text-safe brand steps. --brand behind white text measures 4.10:1, which
     fails AA for the hero and age-gate CTAs, and --brand-soft on hover made it
     WORSE (2.62:1) -- hover was lightening, not darkening. Buttons use these. */
  --brand-ink: #C51F55;       /* 5.67:1 behind #fff */
  --brand-ink-hover: #A81846; /* darkens on hover, as it should */
  /* Rose rather than another directory blue: --accent (#1a5fd0) stays the
     body link colour, so the brand mark and "this is a link" never collide. */
}

* { box-sizing: border-box; }

.brand-mark { display: block; flex: none; }

/* Skip link. The profession strip is a horizontally scrolling nav ahead of
   <main>, so without this a keyboard user tabs every chip on every page. */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--brand-ink);
  color: #fff;
  padding: 10px 20px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { transform: translate(-50%, 0); text-decoration: none; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Shared card -- every content section on a profile/hub page sits in one of
   these. Distinct from .profile-card (the poster tile used in grids). */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 28px;
}
.card + .card,
.card + .hub-related,
* + .card {
  margin-top: 16px;
}

/* Header -- sticky navy top bar, chip strip underneath. */
.topbar {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 9px 20px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }
.header-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-left: auto;
}

.site-search { flex: 1; min-width: 0; }
.site-search input {
  width: 100%;
  height: 34px;
  background: #fff;
  border: 0;
  border-radius: var(--pill);
  padding: 0 16px;
  color: var(--text);
  font: 14px/34px var(--font);
}
.site-search input::placeholder { color: var(--text-muted); }
.site-search input:focus { outline: 2px solid var(--blue-tint-2); outline-offset: 1px; }

.strip {
  background: #fff;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.site-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 9px 20px;
}
.nav-link,
.chip {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--pill);
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}
.nav-link:hover,
.chip:hover {
  border-color: var(--blue-tint-2);
  background: var(--blue-tint);
  color: var(--accent);
  text-decoration: none;
}

/* Breadcrumb */
.crumb-band {
  background: var(--bg);
  padding: 12px 20px;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1140px;
  margin: 0 auto;
  font-size: 12px;
  color: var(--text-muted);
}
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--accent); text-decoration: none; }
.breadcrumb-sep { color: var(--text-muted); }

/* Footer */
.site-footer {
  max-width: 1140px;
  margin: 40px auto 0;
  padding: 32px 20px 40px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 26px;
  background: #fff;
}
.footer-column h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.footer-links { display: flex; flex-direction: column; gap: 3px; }
.footer-column a { font-size: 13px; color: var(--text-secondary); padding: 3px 0; }
.footer-column a:hover { color: var(--accent); text-decoration: none; }
.footer-note {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
}

main { padding: 32px 20px; }

/* ============================================================
   HOMEPAGE
   Everything here is namespaced .home-* and is used by index.astro
   ONLY. The shared rules this page also renders (.profile-grid /
   .profile-card via ProfileGrid, .topbar/.site-header, .site-footer)
   are deliberately NOT touched -- they are on all ~124k profile and
   hub pages, so a change here would ripple sitewide.
   ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --- Dark hero band ---------------------------------------------------
   Full-bleed: it is a direct child of <body>, so it spans the viewport
   while the content below stays in the 1140px column. This is the only
   dark surface on the site -- content pages stay on the light canvas,
   which keeps display-ad rendering unchanged. */
.home-hero {
  position: relative;
  background-color: var(--ink);
  /* The overlay gradient does the real work; the generated texture only
     adds organic falloff. Layered this way the hero still looks correct
     if the image 404s. */
  background-image:
    linear-gradient(105deg, var(--ink) 12%, rgba(11, 14, 23, 0.72) 46%, rgba(11, 14, 23, 0.35) 100%),
    url("/brand/hero-texture.webp");
  background-size: cover, cover;
  background-position: center, center right;
  background-repeat: no-repeat, no-repeat;
  color: var(--ink-text);
  padding: 80px 20px 48px;
  text-align: center;
  /* Terminates the band deliberately instead of butting two alignment
     systems together across a blank gap. */
  border-bottom: 2px solid var(--brand);
}
.home-hero-inner { max-width: 760px; margin: 0 auto; }

.home-wordmark {
  /* Barlow Condensed 700, not Inter 800. Inter 800 centered with a gradient
     rule under it is the default shape of every directory template of the
     last five years; a condensed, tightly-tracked wordmark against Inter body
     copy is the one ownable typographic decision available here, and it puts
     the "reference almanac" idea in the first 200px instead of only on
     section headings far below the fold. */
  font-family: var(--font-num);
  font-size: clamp(46px, 8.2vw, 78px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}
/* Accent rule under the wordmark -- carries the brand colour without
   relying on background-clip:text, which fails to transparent (invisible
   heading) wherever it is unsupported. */
.home-wordmark::after {
  content: "";
  display: block;
  width: 68px;
  height: 4px;
  margin: 20px auto 0;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--brand-soft), var(--brand));
}

/* Descriptive half of the h1. The heading was pure brand, so the page's
   strongest on-page ranking signal carried no query surface at all -- every
   descriptive term lived only in <title>. */
.home-wordmark-sub {
  display: block;
  margin-top: 14px;
  font-family: var(--font);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.home-lede {
  margin: 20px auto 0;
  max-width: 540px;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.6;
}

/* Own class, NOT .site-search -- that one is styled for the navy header
   bar and is rendered on every page of the site. */
.home-search {
  display: flex;
  gap: 8px;
  max-width: 520px;
  margin: 28px auto 0;
}
.home-search input {
  flex: 1;
  min-width: 0;
  height: 50px;
  /* WCAG 1.4.11 wants 3:1 for a control's boundary. The previous
     rgba(255,255,255,.07) fill on --ink-border measured 1.17:1 / 1.48:1 -- the
     field read as empty space next to a floating pink button. #5E6A8A is
     3.58:1 against --ink. */
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid #5E6A8A;
  border-radius: var(--pill);
  padding: 0 22px;
  color: #fff;
  font: 15px var(--font);
}
.home-search input::placeholder { color: var(--ink-muted); }
.home-search input:focus {
  outline: 2px solid var(--brand-soft);
  outline-offset: 2px;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.12);
}
.home-search button {
  height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--pill);
  background: var(--brand-ink);
  color: #fff;
  font: 600 14px var(--font);
  cursor: pointer;
}
.home-search button:hover { background: var(--brand-ink-hover); }
.home-search button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.home-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 48px;
  margin: 40px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--ink-border);
}
/* Markup order is the spec-required dt-then-dd; the number is flipped above
   its label visually. The previous dd-first markup was simply invalid -- the
   dl content model is one or more dt followed by one or more dd, and AT pairs
   term to definition by that order. */
.home-stats div { display: flex; flex-direction: column-reverse; text-align: center; }
.home-stats dd {
  margin: 0;
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--brand-soft);
  font-variant-numeric: tabular-nums;
}
.home-stats dt {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

/* --- Light content area ---------------------------------------------
   Overrides the global bare `main { padding: 32px 20px }`. */
.home-main {
  max-width: 1140px;
  margin: 0 auto;
  padding: 40px 20px 8px;
}
.home-block + .home-block { margin-top: 52px; }
/* Barlow Condensed carries the section headings, the per-type totals and the
   featured card names, not just raw numerals. Condensed display type against
   Inter body copy is the one typographic idea with a point of view here -- it
   reads "reference almanac", which is the positioning. Confined to .home-*. */
.home-h2 {
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.home-sub {
  margin: 6px 0 22px;
  /* --text-muted measures 4.25:1 on --bg (passes only on white --surface), so
     the two section subheads were the one place it failed. */
  color: var(--text-secondary);
  font-size: 14px;
}

.home-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  /* Each card keeps its natural height. Without this the grid stretches every
     card in a row to match the tallest, leaving dead whitespace under the
     facet types that have fewer values. */
  align-items: start;
}
.home-cat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px 8px;
}
.home-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.home-cat-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-ink);
}
/* Total distinct values for the type. Deliberately NOT --font-num at 13px:
   that made "257" (distinct professions) typographically identical to
   "17,545" (profiles in one of them) while being semantically incomparable,
   so the unit is spelled out and the face differs. */
.home-cat-total {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* An index list rather than a chip cloud. Facet values here run from "Red" to
   "Mixed-race (primarily Middle Eastern)", and chips wrap unpredictably at
   that spread -- a row per value takes any label length, right-aligns the
   counts into a scannable column, and reads like a reference index. */
.home-cat-list { list-style: none; margin: 0; padding: 0; }
.home-cat-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 18px;
  margin: 0 -18px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
}
.home-cat-list a:hover {
  background: var(--blue-tint);
  color: var(--accent);
  text-decoration: none;
}
.home-cat-list li + li { border-top: 1px solid var(--border); }
.home-cat-name { font-weight: 500; }
.home-cat-all a {
  color: var(--brand-ink);
  font-weight: 600;
  font-size: 13px;
}
.home-cat-all a:hover { background: rgba(197, 31, 85, 0.07); color: var(--brand-ink-hover); }
.home-cat-count {
  flex: none;
  font-family: var(--font-num);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* A-Z strip. Shared by the homepage block and the /names/[letter] pages, so
   it lives outside .home-* -- but it is new, used by nothing else, and
   therefore carries no ripple risk to the shared profile/hub styles. */
.alpha-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.alpha-strip--page { margin: 4px 0 28px; }
.alpha-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-family: var(--font-num);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-secondary);
}
.alpha-letter:hover {
  border-color: var(--brand-ink);
  color: var(--brand-ink);
  text-decoration: none;
}
/* Letters with no profiles render as inert spans, not links -- the catalog
   currently has nothing under W-Z, and linking them would ship four dead
   ends into the homepage's highest-value internal-link block. */
.alpha-letter.is-empty {
  color: var(--text-muted);
  /* Was 0.45, which flattened to an effective #b5bac6 on --bg = 1.76:1. These
     still read as clearly inert next to a bordered, shadowed live tile. */
  opacity: 0.7;
  box-shadow: none;
  background: transparent;
  cursor: default;
}
.alpha-letter.is-current {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: #fff;
}

/* Onward path out of the featured grid. Without this the page's last element
   is 24 tiles running straight into the footer -- the strongest engagement
   signal on the page (a user who scrolled the whole grid) had nowhere to go. */
.home-onward {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.home-onward-primary {
  background: var(--brand-ink);
  color: #fff;
  border-radius: var(--pill);
  padding: 13px 26px;
  font-weight: 600;
  font-size: 14px;
}
.home-onward-primary:hover { background: var(--brand-ink-hover); text-decoration: none; }
.home-onward-secondary { font-size: 14px; font-weight: 500; padding: 12px 4px; }

/* Reserved display-ad placements. Heights are fixed per breakpoint so that
   filling a slot shifts nothing below it -- see AdSlot.astro, which renders
   nothing at all until an ad client is configured. */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 44px auto 0;
}
.ad-slot--home-mid { min-height: 280px; width: 100%; max-width: 970px; }
@media (max-width: 560px) {
  .ad-slot--home-mid { min-height: 260px; }
}

/* --- Featured grid, homepage-scoped ---------------------------------
   All selectors are prefixed .home-main: .profile-card/.profile-grid are
   also rendered by the hub, search, account and RelatedProfiles surfaces on
   every profile page, so none of this may be edited in place. */

/* The shared scrim fades to fully transparent at 70%, so the top line of a
   two-line name ("Megan Moore (Pornstar)") sat outside the gradient entirely
   and would vanish against a light photo. */
.home-main .profile-card .overlay {
  padding: 34px 12px 12px;
  /* Holds .55 alpha up to 85% of the scrim's height rather than fading to
     zero by 48%. Measured against a worst-case bright photo the previous
     ramp put the TOP line of a two-line name ("Megan Moore (Pornstar)") at
     ~2.34:1 -- under the 3:1 large-text floor. The text-shadow is a second,
     photo-independent guarantee. */
  background: linear-gradient(to top,
    rgba(10, 16, 32, 0.95) 0%,
    rgba(10, 16, 32, 0.78) 60%,
    rgba(10, 16, 32, 0.55) 85%,
    rgba(10, 16, 32, 0) 100%);
}
.home-main .profile-card .name {
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  /* Nothing previously stopped a three-line name escaping the scrim. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-main .profile-card .meta {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 560px) {
  .home-hero { padding: 52px 20px 44px; }
  .home-search { flex-direction: column; }
  /* flex:1 on the input resolves against the HEIGHT axis once the row turns
     into a column, which beat its own height:50px and collapsed the field to
     its 20px content box -- half the height of the button under it. */
  .home-search input, .home-search button { width: 100%; }
  .home-search input { flex: none; }
  .home-stats { gap: 10px 20px; }
  .home-stats dd { font-size: 23px; }
  .home-main { padding-top: 36px; }
  .home-cats { grid-template-columns: 1fr; }

  /* The shared grid is repeat(auto-fill, minmax(170px, 1fr)). At 390px the
     content column is 350px and two tracks need 170+16+170 = 356px, so it
     missed a second column by SIX pixels and collapsed to one. That made each
     card 350x525 and the homepage 19,482px tall, ~13,000px of which was this
     one grid -- burying the footer and every ad slot below it. Pinned to two
     columns here rather than lowering the shared minmax, so no other page's
     grid changes. */
  .home-main .profile-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .home-main .profile-card .name { font-size: 15px; }

  /* 44px minimum touch target -- these rows are the page's primary navigation. */
  .home-cat-list a { padding: 11px 18px; }
}

/* Facet-type index (/profession, /nationality, ...) -- a flat A-to-Z style
   grid of every value for one type. Its own classes; deliberately not
   .home-cat-list, which is tuned for a six-row teaser inside a card. */
.facet-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2px 16px;
  margin-top: 8px;
}
.facet-index-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  margin: 0 -12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
}
.facet-index-item:hover { background: var(--blue-tint); color: var(--accent); text-decoration: none; }
.facet-index-count {
  flex: none;
  font-family: var(--font-num);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
@media (max-width: 560px) {
  .facet-index-item { padding: 12px; }
}

/* Hub (facet) page */
.hub-main { max-width: 1140px; margin: 0 auto; padding: 24px 20px; }
/* Rose, matching .home-cat-title -- these are the same semantic element (a
   section/type kicker) and rendered in two different colours before. Blue
   stays the body-link and utility-control colour so "this is a link" and
   "this is the brand" never collide. */
.hub-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--brand-ink);
  margin: 0 0 6px;
}
.hub-title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
.hub-count { color: var(--text-muted); font-size: 14px; margin: 0 0 28px; }
.related-facets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.related-facets-label { font-size: 13px; color: var(--text-muted); }

.related-section { margin-top: 24px; }
.see-all-link { display: inline-block; margin-top: 16px; }

/* Grid page -- light poster tile, photo still carries the color. */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}

.profile-card {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--border);
  display: block;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
}
.profile-card:hover { transform: scale(1.02); text-decoration: none; }
.profile-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-card .overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 12px;
  background: linear-gradient(to top, rgba(10, 16, 32, 0.82), rgba(10, 16, 32, 0) 70%);
}
.profile-card .name { font-weight: 700; font-size: 14px; color: #fff; }
.profile-card .meta { font-size: 12px; color: rgba(255, 255, 255, 0.75); margin-top: 2px; }

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.pagination-link {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--pill);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: var(--font-num);
}
.pagination-link:hover { color: var(--accent); border-color: var(--blue-tint-2); background: var(--blue-tint); text-decoration: none; }
.pagination-current { font-size: 13px; color: var(--text-muted); font-family: var(--font-num); }
.pagination-disabled { opacity: 0.4; pointer-events: none; }

/* Detail page hero -- card, photo left / identity right. */
.hero-band {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 28px;
}
.hero-photo { display: flex; flex-direction: column; gap: 8px; }
.hero-photo-main {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(150deg, #dde4ef, #c7d2e3);
}
.hero-photo-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(10, 16, 32, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--pill);
}
.hero-photo-badge:hover { background: var(--accent); text-decoration: none; }
.hero-thumb-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.hero-thumb {
  display: block;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
}
.hero-thumb:hover { text-decoration: none; }
.hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The one primary CTA on a profile page, so it carries the brand colour --
   same role .home-onward-primary plays on the homepage. Utility submits
   (.facet-filter-submit, .search-page-submit) stay blue. */
.hero-cta {
  display: block;
  text-align: center;
  margin-top: 10px;
  background: var(--brand-ink);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 10px;
  font-weight: 600;
  font-size: 13.5px;
}
.hero-cta:hover { background: var(--brand-ink-hover); text-decoration: none; }

.hero-info { min-width: 0; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.hero-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  background: #fbfcfe;
  display: block;
}
.hero-stat-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.hero-stat-value {
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}
.hero-stat-link:hover { border-color: var(--blue-tint-2); text-decoration: none; }
.hero-stat-link .hero-stat-value { color: var(--accent); }

.detail-main { max-width: 1140px; margin: 0 auto; padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; }

.name-heading {
  font-size: 31px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

@media (max-width: 760px) {
  .hero-band { grid-template-columns: 1fr; }
  .hero-photo { max-width: 230px; }
  .name-heading { font-size: 26px; }
}

/* Role tags, pinned right under the name. */
.profession-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.profession-pill {
  border: 1px solid var(--blue-tint-2);
  background: var(--blue-tint);
  color: var(--accent);
  border-radius: var(--pill);
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.profession-pill:hover { background: var(--blue-tint-2); text-decoration: none; }

.aliases { color: var(--text-muted); font-size: 13.5px; margin: 0 0 4px; }
.aliases-toggle-checkbox { display: none; }
.aliases-extra { display: none; }
.aliases-toggle-checkbox:checked ~ .aliases-extra { display: inline; }
.aliases-more-label { color: var(--accent); font-weight: 600; cursor: pointer; margin-left: 4px; }
.aliases-more-label .show-less { display: none; }
.aliases-toggle-checkbox:checked ~ .aliases-more-label .show-more { display: none; }
.aliases-toggle-checkbox:checked ~ .aliases-more-label .show-less { display: inline; }

.social-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.social-chip {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--pill);
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
}
.social-chip:hover { color: var(--accent); border-color: var(--blue-tint-2); background: var(--blue-tint); text-decoration: none; }

.hero-save-line { margin: 8px 0 0; }
.save-form { display: inline-block; margin: 0; }
button.social-chip { font-family: inherit; font-size: 12.5px; cursor: pointer; }
.social-chip.is-saved { background: var(--blue-tint); border-color: var(--blue-tint-2); color: var(--accent); }

/* Rating card */
.rating-summary { font-size: 15px; margin: 0 0 14px; }
.rating-count { color: var(--text-muted); font-size: 13px; }

/* Pure-CSS 1-5 star widget, zero JS. Radios are emitted 5,4,3,2,1 (DOM
   order) then visually reversed back to 1..5 via row-reverse -- see the
   comment in RatingSection.astro for why this is what makes the "~"
   general-sibling selector below light up every star from 1 up to the
   hovered/checked one. */
.star-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; border: 0; padding: 0; margin: 0 0 16px; }
.star-rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-rating label { cursor: pointer; font-size: 26px; line-height: 1; color: var(--border); }
.star-rating label::before { content: '★'; }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: var(--accent); }
.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; }
.rating-submit { margin-top: 4px; }
.rated-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* Career timeline */
.timeline-card h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
}
.timeline-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.timeline-text { font-size: 14px; color: var(--text-secondary); margin: 4px 0 0; }
.timeline {
  display: flex;
  gap: 0;
  margin-top: 16px;
}
.timeline-seg { flex: 1; text-align: center; }
.timeline-seg .dot { height: 8px; border-radius: var(--pill); background: var(--border); margin-bottom: 8px; }
.timeline-seg.on .dot { background: var(--accent); }
.timeline-seg .y { font-family: var(--font-num); font-size: 17px; font-weight: 600; }
.timeline-seg .l { font-size: 10.5px; color: var(--text-muted); }
.timeline-seg.on .l { color: var(--accent); font-weight: 600; }

/* Specs */
.specs-section + .specs-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.specs-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.specs-row-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
.spec-row { display: flex; gap: 8px; padding: 8px 10px; font-size: 14px; border-radius: 6px; }
.spec-row:nth-child(4n + 1),
.spec-row:nth-child(4n + 2) { background: var(--bg); }
.spec-row .spec-label { color: var(--text-muted); min-width: 130px; flex-shrink: 0; }
.spec-row .spec-value { color: var(--text); font-weight: 500; }
.spec-value-link { color: var(--accent); }
.spec-value-link:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .specs-row-grid { grid-template-columns: 1fr; }
  .spec-row:nth-child(4n + 1),
  .spec-row:nth-child(4n + 2) { background: transparent; }
  .spec-row:nth-child(even) { background: var(--bg); }
}

.bio { max-width: none; font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin-top: 0; }
.bio p { margin: 0 0 1.1em; }
.bio p:last-child { margin-bottom: 0; }

.bio-toggle-checkbox { display: none; }
.bio-extra { display: none; }
.bio-toggle-checkbox:checked ~ .bio-extra { display: block; }
.bio-toggle-label {
  display: inline-block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  border: 1px solid var(--blue-tint-2);
  background: var(--blue-tint);
  border-radius: var(--pill);
  padding: 7px 16px;
}
.bio-toggle-label:hover { background: var(--blue-tint-2); text-decoration: none; }
.show-less { display: none; }
.bio-toggle-checkbox:checked ~ .bio-toggle-label .show-more { display: none; }
.bio-toggle-checkbox:checked ~ .bio-toggle-label .show-less { display: inline; }

.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin: 0 0 14px;
}

/* FAQ -- accordion, matches the mockup's +/- disclosure pattern. */
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.faq-item:last-of-type { border-bottom: 0; padding-bottom: 0; }
.faq-item:first-of-type { padding-top: 0; }
.faq-question {
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin: 0;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: "+"; color: var(--text-muted); font-weight: 400; font-size: 18px; }
.faq-item[open] .faq-question::after { content: "\2013"; }
.faq-answer { margin: 9px 0 0; font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

.trivia-list { margin: 0; padding-left: 18px; font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.trivia-list li + li { margin-top: 8px; }

.gallery-section { margin-top: 0; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.gallery-thumb { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.gallery-thumb:hover { text-decoration: none; }
.gallery-grid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: linear-gradient(150deg, #dde4ef, #c7d2e3);
}

.gallery-toggle-checkbox { display: none; }
.gallery-grid-limited .gallery-thumb:nth-child(n + 13) { display: none; }
.gallery-toggle-checkbox:checked ~ .gallery-grid-limited .gallery-thumb { display: block; }

/* CSS-only lightbox -- :target shows the overlay, no JS required. */
.lightbox { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
.lightbox:target { display: flex; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(10, 16, 32, 0.92); }
.lightbox-img { position: relative; z-index: 1; max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 4px; }
.lightbox-close { position: absolute; top: 20px; right: 28px; z-index: 2; font-size: 32px; line-height: 1; color: #fff; padding: 8px 12px; }
.lightbox-close:hover { color: var(--blue-tint-2); }
.lightbox-nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); font-size: 40px; line-height: 1; color: #fff; padding: 12px 18px; }
.lightbox-nav:hover { color: var(--blue-tint-2); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.load-more-label {
  display: block;
  width: fit-content;
  margin: 20px auto 0;
  background: var(--accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--pill);
  padding: 10px 24px;
}
.load-more-label:hover { background: var(--accent-hover); text-decoration: none; }
.gallery-toggle-checkbox:checked ~ .load-more-label { display: none; }

/* Age-gate interstitial.
   Styled on the dark brand ground rather than the light content canvas: this
   is the first page every new visitor sees, so it is the brand's front door,
   not a system message. */
.age-gate {
  /* svh, not vh: iOS Safari counts the collapsing URL bar in vh, which pushed
     the legal fine print under the browser chrome on first paint. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: var(--ink);
  background-image:
    linear-gradient(105deg, var(--ink) 20%, rgba(11, 14, 23, 0.7) 60%, rgba(11, 14, 23, 0.3) 100%),
    url("/brand/hero-texture.webp");
  background-size: cover, cover;
  background-position: center, center right;
  color: var(--ink-text);
}
.age-gate-card {
  width: 100%;
  max-width: 460px;
  text-align: center;
}
/* The mark's rounded-square plate is --ink, identical to this page's ground,
   so on the brand's own front door the silhouette disappeared and only the
   chevron showed. A ring restores it. */
.age-gate-brand .brand-mark {
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 30px rgba(232, 51, 109, 0.18);
}
.age-gate-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}
.age-gate h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: #fff;
}
.age-gate-copy {
  color: var(--ink-muted);
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}
.age-gate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.age-gate-actions form { margin: 0; }
.age-gate-confirm {
  display: inline-block;
  background: var(--brand-ink);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--pill);
  padding: 13px 28px;
  /* line-height is spelled out because the `font:` shorthand resets it to
     `normal` (~1.21) while .age-gate-exit inherits body's 1.6. That made the
     PRIMARY action 45px against the secondary's 50.4px on the highest-bounce
     screen on the site. align-items:stretch does not rescue it -- the <form>
     wrapper is the flex item that stretches, not the button. */
  font: 600 14px/1.6 var(--font);
  cursor: pointer;
}
.age-gate-confirm:hover { background: var(--brand-ink-hover); text-decoration: none; }
.age-gate-exit {
  /* --ink-border is 1.48:1 on --ink, under the 3:1 that WCAG 1.4.11 wants for
     a control boundary -- the Leave button had effectively no visible edge. */
  border: 1px solid #5E6A8A;
  background: transparent;
  color: var(--ink-muted);
  border-radius: var(--pill);
  padding: 13px 28px;
  font-weight: 600;
  font-size: 14px;
}
.age-gate-exit:hover { border-color: var(--ink-muted); color: #fff; text-decoration: none; }
.age-gate-links { margin: 16px 0 0; font-size: 12px; }
.age-gate-links a { color: var(--ink-muted); text-decoration: underline; }
.age-gate-links a:hover { color: #fff; }
.age-gate-fine {
  margin: 24px 0 0;
  font-size: 12px;
  line-height: 1.6;
  /* No opacity knockdown: this is legally-consequential text and 0.8 put it
     at ~4.6:1, right on the AA floor. */
  color: var(--ink-muted);
}
.age-gate-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid #2b3450;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--ink-muted);
}
.age-gate-stats b { color: #fff; font-weight: 600; }
.age-gate :focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 3px; }

/* Header extra links (Random / Compare) -- sit next to the search box in
   the navy topbar, chip-styled but on a dark background. */
.header-links { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.header-link {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.header-link:hover { background: rgba(255, 255, 255, 0.12); color: #fff; text-decoration: none; }

@media (max-width: 560px) {
  /* Search must stay usable on a phone-width topbar -- these two are
     already reachable from the footer, so drop them rather than let them
     fight the search box's flex:1 down to an unusable sliver. */
  .header-links { display: none; }
}

/* Search page */
.search-page-form { display: flex; gap: 10px; max-width: 480px; margin: 16px 0 24px; }
.search-page-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  padding: 10px 18px;
  font-size: 14px;
  color: var(--text);
  background: #fff;
}
.search-page-form input:focus { outline: none; border-color: var(--accent); }
.search-page-submit {
  border: 0;
  background: var(--accent);
  color: #fff;
  border-radius: var(--pill);
  padding: 10px 22px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}
.search-page-submit:hover { background: var(--accent-hover); }
.search-empty { color: var(--text-muted); margin-top: 16px; }

/* Combined multi-facet filter bar on hub pages */
.facet-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 20px;
}
.facet-filter-select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  background: #fff;
  max-width: 220px;
}
.facet-filter-select:focus { outline: none; border-color: var(--accent); }
.facet-filter-submit {
  border: 0;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.facet-filter-submit:hover { background: var(--accent-hover); }
.facet-filter-clear { font-size: 13px; color: var(--text-muted); margin-left: 4px; }
.facet-filter-clear:hover { color: var(--accent); }

/* Compare page */
.compare-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 20px; }
.compare-input {
  flex: 1;
  min-width: 160px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  background: #fff;
}
.compare-input:focus { outline: none; border-color: var(--accent); }
.compare-submit {
  border: 0;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 22px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}
.compare-submit:hover { background: var(--accent-hover); }
.compare-not-found { color: var(--text-muted); margin: 4px 0 20px; }
.compare-hint { color: var(--text-muted); margin-top: 20px; }

.compare-table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: 8px;
}
.compare-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.compare-table th {
  text-align: left;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.compare-profile-link { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 14px; }
.compare-profile-link:hover { color: var(--accent); text-decoration: none; }
.compare-thumb { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.compare-section-row td {
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}
.compare-table td { padding: 8px 16px; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--bg); }
.compare-row-label { color: var(--text-muted); font-weight: 500; white-space: nowrap; }

/* Hero compare link */
.hero-compare-link { margin: 4px 0 0; }

/* Auth forms (signup/login/account) */
.auth-form { display: flex; flex-direction: column; gap: 16px; max-width: 360px; margin: 16px 0; }
.auth-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.auth-field input,
.auth-field select,
.auth-field textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  background: #fff;
  font-family: inherit;
}
.auth-field input:focus,
.auth-field select:focus,
.auth-field textarea:focus { outline: none; border-color: var(--accent); }
.auth-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--text-secondary); }
.auth-checkbox input { margin-top: 3px; }
.auth-error { color: #b3261e; font-size: 13.5px; margin: 0; }
/* Primary action on login/signup. */
.auth-submit {
  border: 0;
  background: var(--brand-ink);
  color: #fff;
  border-radius: var(--pill);
  padding: 11px 22px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  align-self: flex-start;
}
.auth-submit:hover { background: var(--brand-ink-hover); }
.auth-switch { font-size: 13.5px; color: var(--text-muted); }

/* Moderation queue (admin/moderation.astro) */
.queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.queue-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.queue-row:first-child { border-top: 0; padding-top: 0; }
.queue-row-content p { margin: 4px 0 0; }
.queue-meta { color: var(--text-muted); font-size: 13px; margin-left: 6px; }
.queue-row-actions { display: flex; gap: 8px; flex-shrink: 0; }
.queue-row-actions .auth-submit { padding: 7px 16px; font-size: 13px; }
.queue-reject { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.queue-reject:hover { background: var(--blue-tint); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}