/* ==========================================================================
   MployD Design System
   Outfit + Inter · Bootstrap 5.3 overrides · design tokens
   See doc/modules/12-ui-ux-design-system.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Outfit + Inter — self-hosted

   TWO FAMILIES, ONE JOB EACH (doc s.100). Outfit sets every heading and
   display figure; Inter sets everything a reader actually reads. They are the
   pairing the reference design uses, and the split is the point: Outfit is a
   geometric display face with a wide, even colour that looks deliberate at
   48px and muddy at 14px, while Inter was drawn for UI text at exactly the
   sizes this application spends its life in.

   SELF-HOSTED, NOT LINKED. The Content-Security-Policy sets `font-src 'self'`,
   so the reference's <link> to fonts.googleapis.com would be blocked outright
   and every screen would silently fall back to the system stack. Serving the
   files ourselves is also what makes this work on an install with no internet.

   ONE FILE PER SCRIPT, NOT ONE PER WEIGHT. Both are variable fonts, so the
   whole axis arrives in a single request - Outfit 300-800, Inter 300-700 -
   and any weight between the named stops is available for free.

   LATIN-EXT IS NOT OPTIONAL HERE. The rupee sign is U+20B9, which lives in
   the latin-ext range, and this platform prices everything in rupees. Dropping
   that subset to save a request would have replaced every price on the site
   with a fallback glyph.

   THE FALLBACK METRICS ARE MEASURED, NOT COPIED. Each override below is
   derived from the font's own head/hhea tables and a weighted mean advance
   over lowercase Latin - not from OS/2.xAvgCharWidth, which in a large family
   averages every arrow and box-drawing glyph in the file and comes out ~30%
   too wide. A size-adjust built on that number shifts the layout at the swap
   instead of holding it still, which is the whole reason the override exists.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit/outfit-latin.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit/outfit-latin-ext.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-latin-ext.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The metric-matched stand-ins shown during `swap`. */
@font-face {
  font-family: 'Outfit Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 98.95%;
  ascent-override: 101.06%;
  descent-override: 26.28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 107.55%;
  ascent-override: 90.07%;
  descent-override: 22.43%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
/*
   THE INDIAN FLAG, WHICH IS ALSO THE LOGO.

   Saffron, white and India green, with the chakra's navy - sampled from the
   supplied artwork rather than from the flag's official hexes, so the site and
   the mark are the same colours: the saffron M (#F98F2E), the green D and
   wordmark (#1B790D) and the navy bridge (#081474).

   The three hues are NOT interchangeable, and the palette is built around what
   each one can actually carry:

     - NAVY is the only one that works as text on white (13.6:1). It is also
       unusable on the near-black dark theme (1.3:1).
     - SAFFRON is the reverse: brilliant on dark (8.4:1) and unusable on light
       (2.1:1), where it fails even the 3:1 needed for a border. It is used as
       a FILL with dark text over it, never as a thin line or small label on a
       pale surface.
     - GREEN is the only one that works on both, which is why it carries the
       interactive weight - links, primary buttons, focus.

   White is the third band, and it is the page: the layout's whitespace is
   doing the flag's middle stripe, which is why the surfaces stayed neutral
   rather than being tinted.

   Dark is the default theme (:root); light is opt-in via [data-theme="light"].

   ON THE `br-` PREFIX. It predates the rename and is deliberately kept. It is
   an internal namespace, invisible to users, spanning ~3,100 usages across the
   stylesheet, forty templates and the JavaScript. Renaming it would risk
   silently unstyling an element for every occurrence missed, and no test in
   this project asserts that a given element carries a given class. The cost is
   real and the benefit is nil, so it stays — read it as "brand", not as the
   old product name.
*/
:root {
  /* --- Brand ------------------------------------------------------------ */
  /* Green carries the interactive weight because it is the only one of the
     three legible on both themes. #1B790D is the logo's own green; the accent
     is a step lighter so it clears 3:1 on the near-black background, which the
     solid brand hue only barely does (3.55:1). */
  --br-primary: #2E9E1E;
  --br-primary-dark: #1B790D;     /* the logo green - hover, and light-theme links */
  --br-primary-light: rgba(46,158,30,.16);
  --br-primary-glow: rgba(46,158,30,.25);

  /* The flag, by name, for anything that has to match the mark exactly. */
  --br-brand-saffron: #F98F2E;   /* the M */
  --br-brand-green:   #1B790D;   /* the D, and the wordmark */
  --br-brand-navy:    #081474;   /* the bridge, and the chakra */
  --br-brand-white:   #FFFFFF;   /* the middle band - which is the page itself */

  /* Persona gradients. Candidates read warm (fuchsia -> pink), recruiters
     cool (cyan -> teal), so the two sides of the marketplace are instantly
     distinguishable.

     TWO SETS, deliberately. The bright reference hues are ACCENTS - links,
     borders, icons, glows - which only need 3:1. Solid buttons carry white
     labels and need 4.5:1, which the bright hues miss (white on #F98F2E is
     2.3:1). The -btn gradients are one step darker and clear 4.5:1 at both
     ends. Verified by tools/check-contrast.php. */
  /* The primary gradient IS the flag, and the logo: it runs from the M's
     saffron to the D's green, in the same direction the bridge spans them.

     DECORATIVE ONLY. It is a fill behind icons, rules and borders - never
     behind a label, because white on the saffron end is 2.33:1. Anything
     carrying text uses --br-gradient-btn. */
  --br-gradient:            linear-gradient(135deg, #F98F2E 0%, #2E9E1E 100%);

  /* A SECOND GRADIENT, FOR TEXT, and it is not the same one.

     --br-gradient is a FILL: it sits behind white labels and its job is to
     look like the mark. Clipped to letterforms it becomes ink, and ink has to
     clear contrast at BOTH ends of the ramp against the page behind it. On
     this near-black ground the bright pair does that - saffron 8.4:1, green
     3.55:1, and the text it is used on is display-sized, where 3:1 is the bar.
     The light theme cannot use the same two hues and overrides this below. */
  --br-gradient-text:       linear-gradient(135deg, #F98F2E 0%, #2E9E1E 100%);
  --br-gradient-candidate:  linear-gradient(135deg, #F98F2E 0%, #E2681A 100%);
  --br-gradient-recruiter:  linear-gradient(135deg, #2E9E1E 0%, #1B790D 100%);

  /* Solid buttons carry white labels, and WHITE ON SAFFRON IS 2.3:1 - so the
     candidate button is a deepened saffron rather than the brand hue, and the
     primary button runs green into the bridge's navy. Both ends of all three
     clear 4.5:1, verified by tools/check-contrast.php. */
  --br-gradient-btn:            linear-gradient(135deg, #14670A 0%, #0B1A8A 100%);
  --br-gradient-btn-candidate:  linear-gradient(135deg, #9A5200 0%, #8A4A00 100%);
  --br-gradient-btn-recruiter:  linear-gradient(135deg, #176B0B 0%, #14670A 100%);

  /* Candidates read saffron, recruiters green - the flag's own two bands, so
     the two sides of the marketplace stay instantly distinguishable. Admin is
     the bridge: navy. */
  --br-candidate: #F98F2E;  --br-candidate-dark: #9A5200;
  --br-recruiter: #2E9E1E;  --br-recruiter-dark: #14670A;
  --br-admin:     #7A8CC4;  --br-admin-dark:     #0B1A8A;

  /* Solid button fills - white label safe */
  --br-success-btn: #047857;
  --br-danger-btn:  #DC2626;

  /* --- Semantic --------------------------------------------------------- */
  --br-success: #10B981;  --br-success-bg: rgba(16,185,129,.15);
  --br-warning: #F59E0B;  --br-warning-bg: rgba(245,158,11,.15);
  --br-danger:  #EF4444;  --br-danger-bg:  rgba(239,68,68,.15);
  --br-info:    #3B82F6;  --br-info-bg:    rgba(59,130,246,.15);

  /* --- Neutrals (dark) -------------------------------------------------- */
  --br-ink:   #F8FAFC;  --br-ink-2: #CBD5E1;
  --br-ink-3: #94A3B8;  --br-ink-4: #64748B;
  --br-line:  rgba(255,255,255,.08);
  --br-line-2: rgba(255,255,255,.05);
  --br-bg:      #080B11;
  --br-bg-2:    #0F1626;
  --br-surface:   rgba(22,30,49,.6);
  --br-surface-2: rgba(30,41,67,.45);
  --br-surface-hover: rgba(30,41,67,.75);
  --br-blur: 12px;

  /* --- Auction semantics — meaning, never decoration -------------------- */
  --br-bid-high: #10B981;
  --br-bid-out:  #EF4444;
  --br-reserve:  #94A3B8;
  --br-locked:   #F59E0B;
  --br-gold:     #FBBF24;

  /* --- Elevation -------------------------------------------------------- */
  --br-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --br-shadow:    0 4px 16px rgba(0,0,0,.35);
  --br-shadow-lg: 0 12px 40px rgba(0,0,0,.45);
  --br-shadow-focus: 0 0 0 3px var(--br-primary-glow);

  /* --- Geometry --------------------------------------------------------- */
  --br-radius-sm: 8px; --br-radius: 12px;
  --br-radius-lg: 16px; --br-radius-xl: 20px; --br-radius-pill: 9999px;

  /* --- Motion ----------------------------------------------------------- */
  --br-ease: cubic-bezier(.4,0,.2,1);
  --br-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --br-t-fast: 150ms; --br-t: 250ms; --br-t-slow: 400ms;

  /* --- Type scale — fluid, 1.200 minor third on a 16px base ------------

     FLUID, NOT STEPPED. Each heading interpolates between a phone size and a
     desktop size with clamp(), so there is no breakpoint at which the page
     jumps - the scale is continuous across every width between them.

     A MINOR THIRD (1.200) through the heading levels, with --fs-display
     sitting deliberately outside the ratio. The reference sets its hero at
     text-3xl / text-5xl / text-6xl - 30px, 48px, 60px at three hard
     breakpoints - and 60px is the size the design is actually drawn around,
     so the display token now reaches it.

     WHAT IS NOT COPIED IS THE STEPPING. Three fixed sizes means the headline
     jumps twice as the window is dragged, and worse, a `vw`-free breakpoint
     ignores browser zoom, which fails WCAG 1.4.4. The clamp() below lands on
     the same 60px ceiling on a desktop and the same ~30px floor on a phone,
     and moves continuously in between.

     The middle term of each clamp() is in `vw` plus a `rem` floor, so the text
     still scales when a reader zooms - a pure `vw` size ignores zoom, which
     fails WCAG 1.4.4.

     Body stays at exactly 1rem. It is the one size that must honour whatever
     the reader set in their browser. */
  --fs-display: clamp(1.875rem, 1.05rem + 3.6vw, 3.75rem);
  --fs-h1:      clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --fs-h2:      clamp(1.4rem, 1.2rem + 0.8vw, 1.875rem);
  --fs-h3:      clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
  --fs-h4:      clamp(1.0625rem, 1.02rem + 0.2vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .8125rem;
  --fs-micro:   .75rem;

  /* --- Line height and tracking ----------------------------------------

     Long-form text wants ~1.5 for readability; headings want less, because a
     display size at 1.5 leaves a hole between the lines. Tracking tightens as
     the size grows, which is how both of these faces are designed to be set -
     Outfit in particular is drawn tight and looks slack at 0. */
  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;

  /* --- Families ---------------------------------------------------------

     Two stacks, named by the job rather than by the typeface, so a future
     swap is one line and not a search across 2,000 rules. --br-font-display
     is applied on the heading elements themselves; body text inherits the
     Bootstrap variable. */
  --br-font-display: 'Outfit', 'Outfit Fallback', system-ui, -apple-system,
                     'Segoe UI', Arial, sans-serif;

  /* --- Bootstrap bridge ------------------------------------------------- */
  --bs-body-font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system,
                         'Segoe UI', Arial, sans-serif;
  --bs-body-color: var(--br-ink);
  --bs-body-bg: var(--br-bg);
  --bs-primary: var(--br-primary);
  --bs-border-color: var(--br-line);
  --bs-emphasis-color: var(--br-ink);
  --bs-secondary-color: var(--br-ink-3);
}

/* --- Light theme --------------------------------------------------------- */
[data-theme="light"] {
  --br-primary-light: rgba(99,102,241,.10);
  --br-primary-glow: rgba(99,102,241,.18);

  --br-ink:   #0F172A;  --br-ink-2: #334155;
  --br-ink-3: #475569;  --br-ink-4: #5B6B82;
  --br-line:  rgba(15,23,42,.10);
  --br-line-2: rgba(15,23,42,.05);
  --br-bg:      #EEF1F8;
  --br-bg-2:    #FFFFFF;
  /* On white, saffron is 2.1:1 and fails even the 3:1 a large heading needs,
     so the light theme clips the DARK pair instead - the same two hues the
     solid buttons use, which are already audited at 4.5:1 on this ground. */
  --br-gradient-text: linear-gradient(135deg, #14670A 0%, #0B1A8A 100%);
  --br-surface:   rgba(255,255,255,.72);
  --br-surface-2: rgba(255,255,255,.5);
  --br-surface-hover: rgba(255,255,255,.92);

  --br-success-bg: rgba(16,185,129,.12);
  --br-warning-bg: rgba(245,158,11,.12);
  --br-danger-bg:  rgba(239,68,68,.12);
  --br-info-bg:    rgba(59,130,246,.12);

  --br-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --br-shadow:    0 4px 16px rgba(15,23,42,.08);
  --br-shadow-lg: 0 12px 40px rgba(15,23,42,.12);

  --br-gold: #D97706;
}

/*
   Light-theme accents.

   The bright hues are tuned for a dark backdrop; as link text on #EEF1F8 the
   brand saffron drops to 2.06:1, which is not legible at any size. Each
   persona gets a darker accent here so link and icon text stays at 4.5:1.
   These selectors are more specific than the persona blocks below, so they win.

   THE CANDIDATE ACCENT IS THE ONE THAT MOVES MOST. Saffron cannot be text on
   a pale background at all, so on the light theme it deepens to #9A5200 -
   still recognisably the same warm hue beside the saffron fills, but 5.19:1
   instead of 2.06:1.
*/
[data-theme="light"] { --br-primary: #14670A; }
[data-theme="light"] body[data-persona="recruiter"] { --br-primary: #14670A; }
[data-theme="light"] body[data-persona="candidate"] { --br-primary: #9A5200; }
[data-theme="light"] body[data-persona="admin"]     { --br-primary: #0B1A8A; }

/* Persona theming: one attribute on <body> re-points the accent and gradient */
body[data-persona="candidate"] {
  --br-accent: var(--br-candidate);
  --br-accent-gradient: var(--br-gradient-candidate);
}
body[data-persona="recruiter"] {
  --br-primary: var(--br-recruiter);
  --br-primary-dark: var(--br-recruiter-dark);
  --br-primary-light: rgba(46,158,30,.16);
  --br-primary-glow: rgba(46,158,30,.25);
  --br-gradient: var(--br-gradient-recruiter);
  --br-gradient-btn: var(--br-gradient-btn-recruiter);
  --br-accent: var(--br-recruiter);
  --br-accent-gradient: var(--br-gradient-recruiter);
}
/* Admin reads as the bridge itself: the chakra's navy, lifted. */
body[data-persona="admin"] {
  --br-primary: var(--br-admin);
  --br-primary-dark: var(--br-admin-dark);
  --br-primary-light: rgba(122,140,196,.16);
  --br-primary-glow: rgba(122,140,196,.25);
  --br-gradient: linear-gradient(135deg, #081474 0%, #3B4FC4 100%);
  --br-gradient-btn: linear-gradient(135deg, #081474 0%, #0B1A8A 100%);
  --br-accent: var(--br-admin);
  --br-accent-gradient: linear-gradient(135deg, #081474 0%, #3B4FC4 100%);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { background: var(--br-bg); }

body {
  font-family: var(--bs-body-font-family);
  font-size: var(--fs-body);      /* 16px — never smaller; <16px zooms on iOS */
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-normal);

  /*
   * Inter ships proper typographic figures; ask for them.
   *
   * `tnum` fixes digit width, which matters on a platform where salaries,
   * countdowns and proposal bands sit in columns - proportional digits make
   * a column of money jitter as the numbers change.
   */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'kern' 1;
  color: var(--br-ink);
  background: var(--br-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  transition: background-color var(--br-t) var(--br-ease), color var(--br-t) var(--br-ease);
}

/*
   Ambient aurora. Fixed and behind everything, so the glass surfaces have
   something to refract. Pointer-events none — it is purely decorative.
*/
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(50rem 35rem at 100% 0%, rgba(139,92,246,.14), transparent 55%),
    radial-gradient(45rem 35rem at 50% 110%, rgba(20,184,166,.10), transparent 60%);
}
[data-theme="light"] body::before {
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(50rem 35rem at 100% 0%, rgba(139,92,246,.10), transparent 55%),
    radial-gradient(45rem 35rem at 50% 110%, rgba(20,184,166,.08), transparent 60%);
}

/*
   Headings.

   TRACKING TIGHTENS AS THE SIZE GROWS. Letterforms set large look loose at the
   spacing that suits body copy, and Outfit is drawn on that assumption - the
   larger sizes want negative tracking, the small ones want none.

   Weight 500 rather than 600 for the lower levels: a variable font gives every
   weight on the axis, so the hierarchy no longer has to be carried by the four
   static cuts that happened to be downloaded.

   `text-wrap: balance` evens out the last line of a heading that wraps. It is
   ignored where unsupported, which is the correct fallback.
*/
h1,h2,h3,h4,h5,h6 {
  font-family: var(--br-font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--br-ink);
  margin: 0 0 .5rem;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.01em; }
h4 { font-size: var(--fs-h4); font-weight: 500; }
h5, h6 { font-size: var(--fs-body); font-weight: 500; }

/*
   Measure.

   Long-form prose is capped so a line does not run the width of a desktop
   monitor - past roughly 75 characters the eye loses the start of the next
   line. Applied to the legal and coaching copy that actually runs long, never
   to layout containers.
*/
.br-prose p, .br-legal-body p { max-width: 72ch; line-height: var(--lh-loose); }

/* Currency and countdowns: fixed-width digits so values don't jitter */
.br-num, .br-money, .br-countdown, td.br-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

a { color: var(--br-primary); text-decoration: none; transition: color var(--br-t-fast) var(--br-ease); }
a:hover { color: var(--br-primary-dark); text-decoration: underline; }

.br-muted { color: var(--br-ink-3); }
.br-tiny  { font-size: var(--fs-xs); }
.br-label {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--br-ink-3);
}

/* Skip link — keyboard users land here first */
.br-skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  padding: .75rem 1.25rem; background: var(--br-primary); color: #fff;
  border-radius: 0 0 var(--br-radius) 0;
}
.br-skip:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.br-shell { min-height: 100vh; display: flex; flex-direction: column; }
.br-main  { flex: 1; padding: 1.5rem 0 4rem; }

/* Frosted glass, so the aurora shows through as the page scrolls under it. */
.br-navbar {
  background: var(--br-surface);
  backdrop-filter: blur(var(--br-blur));
  -webkit-backdrop-filter: blur(var(--br-blur));
  border-bottom: 1px solid var(--br-line);
  position: sticky; top: 0; z-index: 1030;
}

.br-brand {
  font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em;
  color: var(--br-ink); display: inline-flex; align-items: center; gap: .5rem;
}
.br-brand:hover { color: var(--br-primary); text-decoration: none; }
.br-brand-mark {
  width: 32px; height: 32px; border-radius: 10px;
  /* -btn, not the decorative gradient: this tile carries a white letter and
     white on the brand saffron is 2.33:1. */
  background: var(--br-gradient-btn);
  color: #fff; display: grid; place-items: center; font-size: 1rem; font-weight: 700;
}

/* --- Logo --------------------------------------------------------------- */
/* THE FULL LOCKUP, STACKED (doc s.126): mark, wordmark, strapline.

   Everything below is sized from one custom property, --br-logo-h, which the
   component sets to the MARK's height. The two text rows derive from it, so a
   caller asking for a bigger logo gets a proportionally bigger lockup rather
   than a bigger icon with the same small words under it. */
.br-logo {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: calc(var(--br-logo-h, 32px) * .12);
  text-decoration: none;

  /* THE CARD HOLDS ALL THREE ROWS NOW, where it used to hold only the tile.

     The wordmark is the brand green and the strapline the brand navy, and
     tools/check-contrast.php records why neither may sit on the dark theme:
     navy on the dark surface is 1.4:1. On this white it is 15.4:1. The card
     is what makes the artwork's own colours usable in both themes - the same
     job the tile did for the bridge at s.90. */
  background: #FFFFFF;
  border-radius: calc(var(--br-logo-h, 32px) * .22);
  padding: calc(var(--br-logo-h, 32px) * .16) calc(var(--br-logo-h, 32px) * .26);

  filter: drop-shadow(0 2px 8px var(--br-primary-glow));
  transition: transform var(--br-t) var(--br-ease-spring),
              filter var(--br-t) var(--br-ease);
}
.br-logo:hover { text-decoration: none; }

.br-logo-mark { display: grid; place-items: center; line-height: 0; }

.br-logo-mark img {
  display: block; height: var(--br-logo-h, 32px); width: auto;
}

/* The persona accent colours everything AROUND the logo, never the logo.
   favicon.svg and the generated PNGs render outside the page and can read no
   custom property, so a mark that changed colour in the navbar could never be
   the same mark in the tab (doc s.90). */

/* THE WHOLE CARD LIFTS, not the icon inside it (doc s.126). An icon rotating
   within a static white card reads as something coming loose. */
.br-logo:hover {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 6px 18px var(--br-primary-glow));
}
.br-logo:active { transform: translateY(0) scale(1.005); }
.br-logo:focus-visible {
  outline: none;
  box-shadow: var(--br-shadow-focus);
}

.br-logo-text {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1.05;
}

.br-logo-name {
  font-family: var(--br-font-display);
  font-weight: 700; letter-spacing: -.01em;

  /* .46 of the mark's height, from the artwork: its wordmark band is 159px
     against a 322px mark. Not a fixed rem - the lockup has to scale as one
     thing, and a fixed wordmark under a scaled mark comes apart at both
     ends. */
  font-size: calc(var(--br-logo-h, 32px) * .46);

  /* The artwork's own green, not the ink colour. It is on white here, where
     it is 5.9:1. */
  color: var(--br-brand-green);
}

.br-logo-tagline {
  font-weight: 600; letter-spacing: .01em;
  color: var(--br-brand-navy);
  white-space: nowrap;

  /* .145 from the artwork - 45px of 322 - but with a FLOOR. That ratio puts
     the strapline at 4px in a navbar, which is the exact failure that made
     this a composed lockup instead of a flat image. Below 9px it stops
     scaling and the mark carries the shrinking instead. */
  font-size: max(9px, calc(var(--br-logo-h, 32px) * .145));
  margin-top: calc(var(--br-logo-h, 32px) * .07);

  /* The flanking rules are in the artwork. Pseudo-elements rather than
     em-dashes, so they stretch with the lockup instead of staying one glyph
     wide while everything around them grows. */
  display: flex; align-items: center; gap: .5em;
}
.br-logo-tagline::before,
.br-logo-tagline::after {
  content: ''; height: 2px; width: 1.4em;
  background: var(--br-brand-navy); border-radius: 1px;
}

/* MARK-ONLY, for a caller that passes :show-text="false" and no tagline.
   The card's padding is tuned for three rows and reads as a frame around
   one. */
.br-logo:not(:has(.br-logo-text)) {
  padding: calc(var(--br-logo-h, 32px) * .14);
}

.br-logo-lg { justify-content: center; }

@media (max-width: 575.98px) {
  /* THE WORDMARK IS NO LONGER HIDDEN HERE (doc s.126).

     This rule used to hide the text outright under 576px, which was right
     when the lockup was a mark with a wordmark beside it and the bar was
     running out of width. The lockup is stacked now, so it costs height
     rather than width - and hiding the two rows would remove exactly what
     this section was asked to add.

     It shrinks instead. The mark carries the reduction; the strapline is
     already at its 9px floor and stays legible. */
  .br-logo-nav { --br-logo-h: 30px !important; }
}

@media (max-width: 400px) {
  /* THE FLANKING RULES GO FIRST on a narrow phone. The strapline cannot
     shrink below its 9px floor and cannot wrap, so something has to give, and
     these are decoration where the words are the content. Dropping them
     reclaims about 34px of a 360px viewport. */
  .br-logo-tagline::before,
  .br-logo-tagline::after { display: none; }
}


/* --- Nav ---------------------------------------------------------------- */
.br-nav-link {
  position: relative;
  color: var(--br-ink-2); font-weight: 500; font-size: var(--fs-sm);
  padding: .5rem .875rem; border-radius: var(--br-radius-sm);
  transition: background var(--br-t-fast) var(--br-ease), color var(--br-t-fast) var(--br-ease);
}
.br-nav-link:hover { background: var(--br-line-2); color: var(--br-ink); text-decoration: none; }
.br-nav-link.active { background: var(--br-primary-light); color: var(--br-primary-dark); font-weight: 600; }

/* Underline grows from the centre on hover - a directional cue, not decoration. */
.br-nav-link::after {
  content: ''; position: absolute; left: 50%; bottom: 2px;
  width: 0; height: 2px; border-radius: 2px;
  background: var(--br-primary);
  transform: translateX(-50%);
  transition: width var(--br-t) var(--br-ease);
}
.br-nav-link:hover::after { width: 40%; }
.br-nav-link.active::after { width: 55%; }

.br-page-head { margin-bottom: 1.5rem; }
.br-page-head h1 { margin-bottom: .25rem; }

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */
.br-card {
  background: var(--br-surface);
  backdrop-filter: blur(var(--br-blur));
  -webkit-backdrop-filter: blur(var(--br-blur));
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-lg);
  box-shadow: var(--br-shadow-sm);
  transition: box-shadow var(--br-t) var(--br-ease),
              transform var(--br-t) var(--br-ease),
              border-color var(--br-t) var(--br-ease),
              background-color var(--br-t) var(--br-ease);
}
.br-card:hover { border-color: rgba(46,158,30,.22); }
.br-card-body { padding: 1.25rem; }
.br-card-head {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--br-line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.br-card-head h2, .br-card-head h3 { margin: 0; font-size: var(--fs-h4); }

.br-card-interactive { cursor: pointer; }
.br-card-interactive:hover { transform: translateY(-2px); box-shadow: var(--br-shadow); }

/* The winning bid earns visual primacy */
.br-card-winning {
  border-left: 4px solid var(--br-gold);
  box-shadow: 0 0 0 1px rgba(212,160,23,.15), var(--br-shadow);
}
.br-card-locked { border-left: 4px solid var(--br-locked); }
.br-card-danger { border-left: 4px solid var(--br-danger); }

/* A closed campaign is still readable, just visibly past. Opacity alone would
   drag the text under the AA contrast floor, so only the chrome recedes. */
.br-card-muted { background: var(--br-surface-2); border-style: dashed; }

/* Someone else's words: a candidate's note to a recruiter, or the reverse.
   Set apart so it never reads as platform copy. */
.br-quote {
  border-left: 3px solid var(--br-line-2);
  padding: .5rem 0 .5rem .75rem;
  margin: 0;
  color: var(--br-ink-2);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   6. Stat tiles
   -------------------------------------------------------------------------- */
/* Flex column so a stretched tile centres its content instead of leaving a
   tall empty gap beneath the figure. */
.br-stat {
  background: var(--br-surface);
  backdrop-filter: blur(var(--br-blur));
  -webkit-backdrop-filter: blur(var(--br-blur));
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-lg); padding: 1.125rem 1.25rem;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  transition: border-color var(--br-t) var(--br-ease);
}
.br-stat-label {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--br-ink-3); margin-bottom: .375rem;
}
.br-stat-value {
  font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--br-ink); font-variant-numeric: tabular-nums;
}
/* A bid is a range, so this tile carries two figures and a dash where the
   others carry one. Sized down and allowed to wrap rather than overflowing the
   tile — clamp() keeps it readable on a phone and generous on a desktop. */
.br-stat-value-range {
  font-size: clamp(1.05rem, 1.5vw + .5rem, 1.5rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.br-stat-meta { font-size: var(--fs-xs); color: var(--br-ink-3); margin-top: .25rem; }
.br-stat-meta a { color: var(--br-primary); text-decoration: none; }
.br-stat-meta a:hover { text-decoration: underline; }
.br-stat-accent .br-stat-value { color: var(--br-primary); }

/* A stat that links to the records behind it. The whole tile is the target,
   so the hit area matches what the eye reads as one object. */
a.br-stat-link { text-decoration: none; color: inherit; }
a.br-stat-link:hover { text-decoration: none; color: inherit; }
a.br-stat-link .br-stat-meta { color: var(--br-primary); }
a.br-stat-link:hover { border-color: var(--br-primary-glow); }
a.br-stat-link:focus-visible { outline: none; box-shadow: var(--br-shadow-focus); }
@media (hover: hover) and (pointer: fine) {
  a.br-stat-link:hover { transform: translateY(-2px); box-shadow: var(--br-shadow); }
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.br-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  padding: .625rem 1.125rem; min-height: 42px;
  border-radius: var(--br-radius); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--br-t-fast) var(--br-ease),
              box-shadow var(--br-t-fast) var(--br-ease),
              background-color var(--br-t-fast) var(--br-ease);
}
.br-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--br-shadow); }
.br-btn:active { transform: translateY(0); box-shadow: var(--br-shadow-sm); }
.br-btn:focus-visible { outline: none; box-shadow: var(--br-shadow-focus); }
.br-btn:disabled, .br-btn.disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Gradient primary, matching the reference. The gradient re-points per
   persona, so a recruiter CTA is cyan-teal with no extra class. */
/* Uses the -btn gradient, not the accent gradient: white labels need 4.5:1. */
.br-btn-primary {
  background: var(--br-gradient-btn); color: #fff;
  box-shadow: 0 4px 14px var(--br-primary-glow);
}
.br-btn-primary:hover { color: #fff; box-shadow: 0 8px 24px var(--br-primary-glow); }

/* Explicit recruiter CTA, for use on candidate-themed pages that link to a
   recruiter action. */
.br-btn-recruiter {
  background: var(--br-gradient-btn-recruiter); color: #fff;
  box-shadow: 0 4px 14px rgba(6,182,212,.25);
}
.br-btn-recruiter:hover { color: #fff; box-shadow: 0 8px 24px rgba(6,182,212,.32); }

.br-btn-secondary {
  background: var(--br-surface);
  backdrop-filter: blur(var(--br-blur));
  -webkit-backdrop-filter: blur(var(--br-blur));
  color: var(--br-ink-2); border-color: var(--br-line);
}
.br-btn-secondary:hover {
  background: var(--br-surface-hover); color: var(--br-ink);
  border-color: rgba(99,102,241,.3);
}

.br-btn-ghost { background: transparent; color: var(--br-ink-3); }
.br-btn-ghost:hover { background: var(--br-line-2); color: var(--br-ink); box-shadow: none; }

.br-btn-success { background: var(--br-success-btn); color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,.25); }
.br-btn-success:hover { background: #065F46; color: #fff; }
.br-btn-danger { background: var(--br-danger-btn); color: #fff; box-shadow: 0 4px 14px rgba(239,68,68,.25); }
.br-btn-danger:hover { background: #B91C1C; color: #fff; }
.br-btn-outline-danger { background: transparent; color: var(--br-danger); border-color: rgba(239,68,68,.5); }
.br-btn-outline-danger:hover { background: var(--br-danger-bg); color: #F87171; border-color: var(--br-danger); }

.br-btn-sm { min-height: 34px; padding: .375rem .75rem; font-size: var(--fs-xs); }
.br-btn-lg { min-height: 50px; padding: .875rem 1.75rem; font-size: var(--fs-body); }
.br-btn-block { width: 100%; }

/* Loading: the label is replaced but the width is held, so nothing reflows */
.br-btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
/*
 * THE SPINNER HAD NO POSITION (doc s.103).
 *
 * `position: absolute` with no offsets leaves the box at its static position -
 * the start of the content area - so a 16px ring with a translucent border sat
 * at the left edge of a button whose label had just been turned transparent.
 * The control read as an empty gradient block rather than as something
 * working, which is exactly how a stuck loading state goes unreported: it does
 * not look like a spinner that stopped, it looks like a button with no name.
 */
.br-btn.is-loading::after {
  content: ''; position: absolute;
  top: 50%; left: 50%; margin: -8px 0 0 -8px;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: br-spin .6s linear infinite;
}
.br-btn-secondary.is-loading::after, .br-btn-ghost.is-loading::after {
  border-color: rgba(100,116,139,.3); border-top-color: var(--br-ink-3);
}

/* --------------------------------------------------------------------------
   8. Status pills — colour is never the only signal
   -------------------------------------------------------------------------- */
.br-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .625rem; border-radius: var(--br-radius-pill);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.br-pill-active   { background: var(--br-success-bg); color: var(--br-success); border: 1px solid rgba(16,185,129,.25); }
.br-pill-locked   { background: var(--br-warning-bg); color: var(--br-warning); border: 1px solid rgba(245,158,11,.25); }
.br-pill-hired    { background: var(--br-info-bg);    color: var(--br-info);    border: 1px solid rgba(59,130,246,.25); }
.br-pill-dormant  { background: var(--br-line-2);     color: var(--br-ink-3);   border: 1px solid var(--br-line); }
.br-pill-danger   { background: var(--br-danger-bg);  color: var(--br-danger);  border: 1px solid rgba(239,68,68,.25); }
.br-pill-neutral  { background: var(--br-line-2);     color: var(--br-ink-2);   border: 1px solid var(--br-line); }
.br-pill-gold     { background: rgba(251,191,36,.15); color: var(--br-gold);    border: 1px solid rgba(251,191,36,.3); }

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
.br-field { margin-bottom: 1rem; }
.br-field label, .br-form-label {
  display: block; font-size: var(--fs-sm); font-weight: 500;
  color: var(--br-ink-2); margin-bottom: .375rem;
}
.br-required { color: var(--br-danger); margin-left: .125rem; }

.br-input, .br-select, .br-textarea {
  width: 100%; min-height: 42px; padding: .5rem .75rem;
  font-family: inherit;
  font-size: var(--fs-body);        /* 16px prevents iOS zoom on focus */
  color: var(--br-ink); background: var(--br-surface-2);
  border: 1px solid var(--br-line); border-radius: var(--br-radius);
  transition: border-color var(--br-t-fast) var(--br-ease),
              box-shadow var(--br-t-fast) var(--br-ease),
              background-color var(--br-t-fast) var(--br-ease);
}
.br-input:hover, .br-select:hover, .br-textarea:hover { border-color: rgba(99,102,241,.3); }
.br-input:focus, .br-select:focus, .br-textarea:focus {
  outline: none; border-color: var(--br-primary);
  box-shadow: var(--br-shadow-focus); background: var(--br-surface-hover);
}
.br-input::placeholder, .br-textarea::placeholder { color: var(--br-ink-4); }
.br-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.br-input[aria-invalid="true"], .br-input.is-invalid { border-color: var(--br-danger); }
.br-input:disabled, .br-select:disabled { background: var(--br-line-2); cursor: not-allowed; opacity: .6; }

/* Native pickers render white-on-white in dark mode without this. */
.br-select option { background: var(--br-bg-2); color: var(--br-ink); }
.br-input[type="date"]::-webkit-calendar-picker-indicator,
.br-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.br-input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.7); }
[data-theme="light"] .br-input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] .br-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="light"] .br-input[type="time"]::-webkit-calendar-picker-indicator { filter: none; }

.br-help { font-size: var(--fs-xs); color: var(--br-ink-3); margin-top: .25rem; }
.br-error {
  font-size: var(--fs-xs); color: var(--br-danger); margin-top: .3rem;
  display: flex; align-items: center; gap: .25rem;
  animation: br-slide-down 200ms var(--br-ease);
}

.br-input-group { display: flex; align-items: stretch; }
.br-input-prefix {
  display: inline-flex; align-items: center; padding: 0 .75rem;
  background: var(--br-line-2); border: 1px solid var(--br-line); border-right: 0;
  border-radius: var(--br-radius) 0 0 var(--br-radius);
  color: var(--br-ink-3); font-weight: 500;
}
.br-input-group .br-input { border-radius: 0 var(--br-radius) var(--br-radius) 0; }

/* Persona / segmented toggle with an animated sliding pill */
.br-segment {
  display: inline-flex; position: relative; padding: 4px;
  background: var(--br-line-2); border-radius: var(--br-radius-pill);
}
.br-segment input { position: absolute; opacity: 0; pointer-events: none; }
.br-segment label {
  position: relative; z-index: 1; margin: 0; cursor: pointer;
  padding: .5rem 1.25rem; border-radius: var(--br-radius-pill);
  font-size: var(--fs-sm); font-weight: 600; color: var(--br-ink-3);
  transition: color var(--br-t) var(--br-ease);
}
.br-segment input:checked + label { color: var(--br-primary-dark); }
.br-segment input:focus-visible + label { box-shadow: var(--br-shadow-focus); }
.br-segment-thumb {
  position: absolute; top: 4px; bottom: 4px; z-index: 0;
  background: var(--br-surface); border-radius: var(--br-radius-pill);
  box-shadow: var(--br-shadow-sm);
  transition: transform var(--br-t) var(--br-ease-spring), width var(--br-t) var(--br-ease);
}

/* Skill tag input */
.br-tags {
  display: flex; flex-wrap: wrap; gap: .375rem; align-items: center;
  min-height: 42px; padding: .35rem .5rem;
  border: 1px solid var(--br-line); border-radius: var(--br-radius);
  background: var(--br-surface);
}
.br-tags:focus-within { border-color: var(--br-primary); box-shadow: var(--br-shadow-focus); }
.br-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .5rem; background: var(--br-primary-light);
  color: var(--br-primary-dark); border-radius: var(--br-radius-sm);
  font-size: var(--fs-xs); font-weight: 500;
  animation: br-pop 200ms var(--br-ease-spring);
}
.br-tag button {
  border: 0; background: none; color: inherit; cursor: pointer;
  padding: 0; line-height: 1; opacity: .6; font-size: 1rem;
}
.br-tag button:hover { opacity: 1; }
.br-tags input { border: 0; outline: none; flex: 1; min-width: 100px; font-size: var(--fs-sm); }

/* Big radio cards — interview slot choice */
.br-choice { position: relative; }
.br-choice input { position: absolute; opacity: 0; }
.br-choice label {
  display: block; margin: 0; cursor: pointer; height: 100%;
  padding: 1rem; border: 2px solid var(--br-line);
  border-radius: var(--br-radius); background: var(--br-surface);
  transition: border-color var(--br-t) var(--br-ease),
              transform var(--br-t) var(--br-ease),
              box-shadow var(--br-t) var(--br-ease);
}
.br-choice label:hover { border-color: var(--br-ink-4); }
.br-choice input:checked + label {
  border-color: var(--br-primary); background: var(--br-primary-light);
  transform: translateY(-2px); box-shadow: var(--br-shadow);
}
.br-choice input:focus-visible + label { box-shadow: var(--br-shadow-focus); }

/* --------------------------------------------------------------------------
   10. Tables — collapse to cards on mobile
   -------------------------------------------------------------------------- */
.br-table-wrap { overflow-x: auto; border-radius: var(--br-radius-lg); }
.br-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: transparent; }
.br-table th {
  text-align: left; padding: .75rem 1rem; background: var(--br-surface-2);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--br-ink-3);
  border-bottom: 1px solid var(--br-line); white-space: nowrap;
}
.br-table td {
  padding: .75rem 1rem; border-bottom: 1px solid var(--br-line-2);
  vertical-align: middle; color: var(--br-ink-2);
}
.br-table tbody tr { transition: background var(--br-t-fast) var(--br-ease); }
.br-table tbody tr:hover { background: var(--br-primary-light); }
.br-table .br-num { text-align: right; }

/* --- Sortable column headers ------------------------------------------- */
/* The whole header is the target, not just the caption, so the click area
   matches what the eye reads as one control. */
.br-sort {
  display: inline-flex; align-items: center; gap: .35rem;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.br-sort:hover { color: var(--br-primary); text-decoration: none; }
.br-sort.is-active { color: var(--br-ink); }

/* Reserved width, so turning the arrow on does not shift the caption and
   nudge every column beside it. */
.br-sort-arrow {
  display: inline-block; min-width: .75em;
  font-size: .75em; color: var(--br-primary);
}

/* --- Talent list -------------------------------------------------------- */
.br-table-talent td { vertical-align: top; }
.br-talent-initials { font-size: var(--fs-body); letter-spacing: .04em; }
.br-rating { color: var(--br-gold); font-weight: 600; white-space: nowrap; }
.br-lead-range { color: var(--br-bid-high); font-weight: 600; }

/* Bootstrap contextual row classes, restated for the dark palette. */
.br-table tbody tr.table-danger { background: var(--br-danger-bg); }
.br-table tbody tr.table-warning { background: var(--br-warning-bg); }

/* --------------------------------------------------------------------------
   11. Countdown ring
   -------------------------------------------------------------------------- */
.br-ring { position: relative; width: 132px; height: 132px; }
.br-ring svg { transform: rotate(-90deg); }
.br-ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.br-ring .br-ring-track { stroke: var(--br-line); }
.br-ring .br-ring-fill { stroke: var(--br-success); transition: stroke-dashoffset var(--br-t-slow) var(--br-ease); }
.br-ring.is-soon   .br-ring-fill { stroke: var(--br-warning); }
.br-ring.is-urgent .br-ring-fill { stroke: var(--br-danger); animation: br-pulse 2s ease-in-out infinite; }
.br-ring-center {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.br-ring-value { font-size: 1.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.br-ring-unit { font-size: var(--fs-xs); color: var(--br-ink-3); text-transform: uppercase; letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   12. Band slider — live ±15% validation feedback
   -------------------------------------------------------------------------- */
.br-band { height: 8px; border-radius: var(--br-radius-pill); background: var(--br-line); overflow: hidden; }
.br-band-fill {
  height: 100%; border-radius: inherit; background: var(--br-success);
  transition: width var(--br-t) var(--br-ease), background var(--br-t) var(--br-ease);
}
.br-band.is-invalid .br-band-fill { background: var(--br-danger); }

/* --------------------------------------------------------------------------
   13. Stepper
   -------------------------------------------------------------------------- */
.br-stepper { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.br-step { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--br-ink-4); }
.br-step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700;
  background: var(--br-line); color: var(--br-ink-3);
  transition: background var(--br-t) var(--br-ease), color var(--br-t) var(--br-ease);
}
.br-step.is-active { color: var(--br-ink); font-weight: 600; }
.br-step.is-active .br-step-dot { background: var(--br-primary); color: #fff; }
.br-step.is-done .br-step-dot { background: var(--br-success); color: #fff; }
.br-step-line { flex: 1; height: 2px; background: var(--br-line); }
.br-step-line.is-done { background: var(--br-success); }

/* --------------------------------------------------------------------------
   14. Timeline
   -------------------------------------------------------------------------- */
.br-timeline { position: relative; padding-left: 1.75rem; }
.br-timeline::before {
  content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--br-line);
}
.br-timeline-item { position: relative; padding-bottom: 1.25rem; }
.br-timeline-item::before {
  content: ''; position: absolute; left: -1.75rem; top: 5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--br-surface); border: 3px solid var(--br-line);
}
.br-timeline-item.is-done::before { border-color: var(--br-success); background: var(--br-success); }
.br-timeline-item.is-active::before { border-color: var(--br-primary); }

/* --------------------------------------------------------------------------
   15. Notifications
   -------------------------------------------------------------------------- */
.br-bell { position: relative; }
.br-bell-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: var(--br-radius-pill);
  background: var(--br-danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
}
.br-bell-badge.is-bumped { animation: br-badge-bump 300ms var(--br-ease-spring); }
.br-bell.is-ringing { animation: br-ring-shake 400ms var(--br-ease); }

.br-notif {
  display: flex; gap: .75rem; padding: .875rem 1rem;
  border-bottom: 1px solid var(--br-line-2);
  border-left: 3px solid transparent;
  transition: background var(--br-t) var(--br-ease), border-color var(--br-t) var(--br-ease);
}
.br-notif.is-unread { background: var(--br-primary-light); border-left-color: var(--br-primary); }
.br-notif:hover { background: var(--br-line-2); }

/* --------------------------------------------------------------------------
   16. Alerts & empty states
   -------------------------------------------------------------------------- */
.br-alert {
  padding: .875rem 1rem; border-radius: var(--br-radius);
  border: 1px solid transparent; font-size: var(--fs-sm);
  display: flex; gap: .625rem; align-items: flex-start;
}
/* Tinted background + matching border and text, so each alert reads clearly
   on both themes without a separate rule set. */
.br-alert-success { background: var(--br-success-bg); border-color: rgba(16,185,129,.35);  color: var(--br-success); }
.br-alert-warning { background: var(--br-warning-bg); border-color: rgba(245,158,11,.35);  color: var(--br-warning); }
.br-alert-danger  { background: var(--br-danger-bg);  border-color: rgba(239,68,68,.35);   color: var(--br-danger); }
.br-alert-info    { background: var(--br-info-bg);    border-color: rgba(59,130,246,.35);  color: var(--br-info); }
/* Body copy inside an alert stays neutral; only the icon and heading carry
   the semantic colour. */
.br-alert div { color: var(--br-ink-2); }
[data-theme="light"] .br-alert-success { color: #047857; }
[data-theme="light"] .br-alert-warning { color: #B45309; }
[data-theme="light"] .br-alert-danger  { color: #B91C1C; }
[data-theme="light"] .br-alert-info    { color: #1D4ED8; }

/* Autopilot outbid banner — one coloured box under the header.
   Amber rather than red: losing the lead is a prompt to act, not a failure,
   and the danger palette is spoken for by blacklists and account holds. */
.br-outbid-banner {
  display: flex; gap: .875rem; align-items: center; flex-wrap: wrap;
  padding: .875rem 1rem; border-radius: var(--br-radius);
  background: var(--br-warning-bg);
  border: 1px solid rgba(245,158,11,.35);
  border-left: 4px solid var(--br-warning);
  color: var(--br-ink-2); font-size: var(--fs-sm);
}
.br-outbid-icon { font-size: 1.5rem; line-height: 1; flex: none; }
/* Grows to absorb the free space so the actions stay hard right, and may
   shrink below its content width so a long auction title wraps instead of
   pushing the buttons onto their own row. */
.br-outbid-body { flex: 1 1 16rem; min-width: 0; }
.br-outbid-body strong { color: var(--br-warning); }
[data-theme="light"] .br-outbid-body strong { color: #B45309; }
.br-outbid-actions { display: flex; gap: .5rem; align-items: center; flex: none; }
/* The dismiss control is a one-button form; without this it introduces a
   block-level line break in the middle of the action row. */
.br-outbid-actions form { margin: 0; }

/* Landing page — the hiring-cycle table and the audience cards.
   The table reuses .br-table for its borders and spacing; only what is
   specific to this one lives here. */
.br-table-cycle th[scope="row"] { color: var(--br-ink); font-weight: 600; white-space: nowrap; }
.br-cycle-days {
  font-family: var(--br-font-mono, inherit);
  font-weight: 700; color: var(--br-primary); white-space: nowrap;
}
/* The total is a summary row, not another phase, and needs to read that way
   without relying on position alone. */
.br-table-cycle .br-cycle-total { background: var(--br-primary-light); }
.br-table-cycle .br-cycle-total th,
.br-table-cycle .br-cycle-total td { border-top: 2px solid var(--br-primary); }

/* Small caps label above a card heading — names the audience without
   spending a heading level on it, which would break the H1/H2/H3 outline. */
.br-eyebrow {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--br-ink-3);
}

/* Legal documents — terms and privacy.
   Real bullets, not the ✓ marks of .br-feature-list: a clause is a clause, and
   ticking each one would read as a list of benefits. */
.br-legal-list {
  margin: 0 0 .5rem; padding-left: 1.15rem;
  color: var(--br-ink-2); font-size: var(--fs-sm);
}
.br-legal-list li { margin-bottom: .55rem; line-height: 1.65; }
.br-legal-list strong { color: var(--br-ink); }
/* The credit-reconciliation clause is the only nested list. It needs to read
   as subordinate to its parent, not as a continuation of it. */
.br-legal-list-nested { margin-top: .5rem; margin-bottom: 0; list-style-type: circle; }
.br-legal-intro { color: var(--br-ink-2); font-size: var(--fs-sm); margin-bottom: .5rem; }
.br-legal-rule { border: 0; border-top: 1px solid var(--br-line); margin: 1.25rem 0 .25rem; }

.br-empty { text-align: center; padding: 3rem 1.5rem; color: var(--br-ink-3); }
.br-empty-icon { font-size: 2.5rem; opacity: .35; margin-bottom: .75rem; }

/* Privacy notice — FR-2.3 */
.br-privacy {
  background: var(--br-warning-bg); border: 1px dashed #FDE68A;
  border-radius: var(--br-radius); padding: .75rem .875rem;
  font-size: var(--fs-xs); color: #92400E;
}

/* Simulation banner — unmistakable, so nobody mistakes it for production */
.br-sim-banner {
  background: repeating-linear-gradient(45deg, #FEF3C7, #FEF3C7 10px, #FDE68A 10px, #FDE68A 20px);
  border: 1px solid #F59E0B; color: #92400E;
  padding: .5rem 1rem; border-radius: var(--br-radius);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; text-align: center;
}

/* --------------------------------------------------------------------------
   17. Skeletons
   -------------------------------------------------------------------------- */
.br-skeleton {
  background: linear-gradient(90deg, var(--br-line-2) 25%, var(--br-line) 50%, var(--br-line-2) 75%);
  background-size: 200% 100%;
  animation: br-shimmer 1.5s infinite;
  border-radius: var(--br-radius-sm);
}

/* --------------------------------------------------------------------------
   16b. Theme toggle
   -------------------------------------------------------------------------- */
.br-theme-toggle {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--br-line); border-radius: var(--br-radius);
  background: var(--br-surface); color: var(--br-ink-3);
  cursor: pointer; font-size: 1rem; line-height: 1;
  transition: background var(--br-t-fast) var(--br-ease),
              color var(--br-t-fast) var(--br-ease),
              border-color var(--br-t-fast) var(--br-ease),
              transform var(--br-t) var(--br-ease-spring);
}
.br-theme-toggle:hover {
  background: var(--br-surface-hover); color: var(--br-ink);
  border-color: rgba(99,102,241,.3); transform: rotate(-15deg) scale(1.06);
}
.br-theme-toggle:focus-visible { outline: none; box-shadow: var(--br-shadow-focus); }

/* One icon per theme; only the relevant one is shown. */
.br-theme-toggle .br-icon-sun  { display: none; }
.br-theme-toggle .br-icon-moon { display: block; }
[data-theme="light"] .br-theme-toggle .br-icon-sun  { display: block; }
[data-theme="light"] .br-theme-toggle .br-icon-moon { display: none; }

/* --------------------------------------------------------------------------
   17a. Bootstrap component overrides
   Bootstrap ships light-only defaults. These re-point its components at our
   tokens so they follow the active theme instead of staying white.
   -------------------------------------------------------------------------- */
.dropdown-menu {
  background: var(--br-bg-2);
  backdrop-filter: blur(var(--br-blur));
  -webkit-backdrop-filter: blur(var(--br-blur));
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius);
  box-shadow: var(--br-shadow-lg);
  padding: .375rem;
}
.dropdown-item {
  color: var(--br-ink-2); border-radius: var(--br-radius-sm);
  padding: .5rem .75rem; font-size: var(--fs-sm);
  transition: background var(--br-t-fast) var(--br-ease), color var(--br-t-fast) var(--br-ease);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--br-primary-light); color: var(--br-ink);
}
.dropdown-header { color: var(--br-ink-4); }
.dropdown-divider { border-color: var(--br-line); }

/*
   Modals must outrank the backdrop even before BR.core.detachModals() runs.

   Our glass surfaces use backdrop-filter, which creates a stacking context and
   a containing block for fixed-position children. A modal authored inside a
   card would otherwise sit UNDER .modal-backdrop and be unclickable. The JS
   relocation is the real fix; these values make the ordering explicit and
   guard against a modal added somewhere the script has not reached.
*/
.modal { z-index: 1085; }
.modal-backdrop { z-index: 1080; }

.modal-content {
  background: var(--br-bg-2);
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-lg);
  box-shadow: var(--br-shadow-lg);
  color: var(--br-ink);
  /* Never taller than the viewport, so the footer buttons stay reachable. */
  max-height: calc(100vh - 3.5rem);
}
.modal-backdrop.show { opacity: .7; }
.modal-header, .modal-footer { border-color: var(--br-line); flex-shrink: 0; }
.modal-title { color: var(--br-ink); }

/*
   The body scrolls, not the dialog.

   Without this a tall modal (the accept-bid confirmation, for instance) is
   simply clipped: the consequences list and the confirm button fall off the
   bottom with no way to reach them.
*/
.modal-content > .modal-body { overflow-y: auto; }
.modal-dialog-centered { min-height: calc(100% - 3.5rem); }

.accordion-item {
  background: var(--br-surface);
  backdrop-filter: blur(var(--br-blur));
  -webkit-backdrop-filter: blur(var(--br-blur));
  border-color: var(--br-line); color: var(--br-ink);
}
.accordion-button {
  background: transparent; color: var(--br-ink);
  font-weight: 600; font-family: inherit;
}
.accordion-button:not(.collapsed) {
  background: var(--br-primary-light); color: var(--br-ink);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: var(--br-shadow-focus); border-color: var(--br-primary); }
/* The chevron is a baked-in dark SVG; invert it so it is visible on dark. */
.accordion-button::after { filter: invert(.75); }
[data-theme="light"] .accordion-button::after { filter: none; }

.toast {
  background: var(--br-bg-2);
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius);
  color: var(--br-ink);
  box-shadow: var(--br-shadow-lg);
}
.toast-body { color: var(--br-ink); }

.btn-close { filter: invert(.8); opacity: .7; }
.btn-close:hover { opacity: 1; }
[data-theme="light"] .btn-close { filter: none; }

.form-check-input {
  background-color: var(--br-surface-2);
  border-color: var(--br-line);
}
.form-check-input:checked {
  background-color: var(--br-primary);
  border-color: var(--br-primary);
}
.form-check-input:focus { box-shadow: var(--br-shadow-focus); border-color: var(--br-primary); }
.form-check-label { color: var(--br-ink-2); }

/* Pagination */
.pagination { --bs-pagination-bg: transparent; }
.page-link {
  background: var(--br-surface); color: var(--br-ink-2);
  border-color: var(--br-line); border-radius: var(--br-radius-sm);
  margin: 0 2px; font-size: var(--fs-sm);
  transition: background var(--br-t-fast) var(--br-ease), color var(--br-t-fast) var(--br-ease);
}
.page-link:hover { background: var(--br-primary-light); color: var(--br-ink); border-color: var(--br-primary); }
/* -btn for the same reason as .br-brand-mark: the active page number is a
   white label on this fill. */
.page-item.active .page-link { background: var(--br-gradient-btn); border-color: transparent; color: #fff; }
.page-item.disabled .page-link { background: transparent; color: var(--br-ink-4); border-color: var(--br-line-2); }

/* Bootstrap utility text colours used in a few views */
.text-danger { color: var(--br-danger) !important; }
.text-warning { color: var(--br-warning) !important; }
.text-break { word-break: break-word; }
.border-bottom { border-color: var(--br-line) !important; }
.border-top { border-color: var(--br-line) !important; }
hr { border-color: var(--br-line); opacity: 1; }

/* --------------------------------------------------------------------------
   17b. Footer
   -------------------------------------------------------------------------- */
.br-footer {
  margin-top: 4rem;
  background: var(--br-surface);
  backdrop-filter: blur(var(--br-blur));
  -webkit-backdrop-filter: blur(var(--br-blur));
  border-top: 1px solid var(--br-line);
}
.br-footer-main { padding: 3rem 0 2rem; }

.br-footer-blurb {
  margin-top: 1rem; color: var(--br-ink-3);
  font-size: var(--fs-sm); line-height: 1.7; max-width: 42ch;
}

.br-footer-badges { list-style: none; padding: 0; margin: 1rem 0 0; }
.br-footer-badges li {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); color: var(--br-ink-2); padding: .2rem 0;
}

.br-footer-heading {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--br-ink); margin-bottom: .875rem;
}

.br-footer-links { list-style: none; padding: 0; margin: 0; }
.br-footer-links li { margin-bottom: .5rem; }
.br-footer-links a {
  position: relative;
  font-size: var(--fs-sm); color: var(--br-ink-3); text-decoration: none;
  transition: color var(--br-t-fast) var(--br-ease), padding-left var(--br-t) var(--br-ease);
}
.br-footer-links a::before {
  content: '→'; position: absolute; left: -14px; opacity: 0;
  transition: opacity var(--br-t) var(--br-ease), transform var(--br-t) var(--br-ease);
  transform: translateX(-4px);
}
.br-footer-links a:hover {
  color: var(--br-primary); text-decoration: none; padding-left: 14px;
}
.br-footer-links a:hover::before { opacity: 1; transform: translateX(0); left: 0; }

.br-footer-bottom {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0; border-top: 1px solid var(--br-line-2);
  font-size: var(--fs-xs); color: var(--br-ink-3);
}
.br-footer-meta { color: var(--br-ink-4); }

.br-footer-compact {
  margin-top: 3rem; padding: 1rem 0;
  background: var(--br-surface);
  backdrop-filter: blur(var(--br-blur));
  -webkit-backdrop-filter: blur(var(--br-blur));
  border-top: 1px solid var(--br-line);
}
.br-footer-compact a { color: var(--br-ink-3); }
.br-footer-compact a:hover { color: var(--br-primary); }

@media (max-width: 767.98px) {
  .br-footer-compact { margin-bottom: 4rem; }   /* clear the tab bar */
  .br-footer { margin-bottom: 4rem; }
}

/* --------------------------------------------------------------------------
   17c. Marketing / landing page
   -------------------------------------------------------------------------- */
.br-hero {
  position: relative; isolation: isolate;
  padding: 3.5rem 0 3rem; text-align: center;
}
.br-hero-inner { position: relative; z-index: 1; }

/* A secondary page's hero.

   IT HAD NO RULE AT ALL. The class shipped with the pricing page at s.105 and
   was added to the FAQ at s.109 in the belief that it did something; both
   pages were carrying the landing page's full-height hero, which on a
   seventy-two answer manual pushes the first question below the fold. These
   pages open on a title, not on a pitch, so the space above the content is
   worth less here than the content is. */
.br-hero-compact { padding: 2.25rem 0 1.5rem; }

/* Ambient light behind the hero.

   CLIPPED BY ITS OWN WRAPPER. The orbs are deliberately wider than the column
   so the light falls off past the edge of the text; un-clipped, that overflow
   puts a horizontal scrollbar on the page at phone width, which s.82 forbids
   outright. `overflow: hidden` here contains them without touching the
   hero's own stacking.

   POINTER-EVENTS: NONE, because a 600px invisible circle sitting over the
   call-to-action buttons would swallow the click that the whole page exists
   to collect. */
.br-hero-glow,
.br-cta-glow {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  z-index: 0; border-radius: inherit;
}
.br-orb {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .5;
}
.br-orb-1 {
  width: 380px; height: 380px; top: -120px; left: 4%;
  background: rgba(249,143,46,.22);
}
.br-orb-2 {
  width: 440px; height: 440px; top: -60px; left: 50%; margin-left: -220px;
  background: rgba(46,158,30,.18);
}
.br-orb-3 {
  width: 320px; height: 320px; top: 40px; right: 2%;
  background: rgba(11,26,138,.28);
}
/* The light theme's ground is pale, so the same opacities read as smudges. */
[data-theme="light"] .br-orb { opacity: .32; filter: blur(80px); }

/* The badge row above the headline. */
.br-hero-badge {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem;
}
/* The chip reuses the audited .br-pill tones rather than inventing three new
   colour pairs - saffron, green and navy already exist there as locked,
   active and hired, and they are the only versions of those hues that have
   been checked on both themes. */
.br-hero-chip { padding: .35rem .75rem; }
.br-hero-chip-dot { color: var(--br-ink-4); }
.br-hero-chip-meta {
  font-size: var(--fs-micro); color: var(--br-ink-4);
  letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}

/* The headline, and the banner lines that stand in for it on slides 2 and 3.

   ONE RULE FOR BOTH. Slide 1 is an <h1> and the others are <p>, for the
   document-outline reason in home.blade.php, and if their type were styled
   separately the carousel would visibly change weight as it rotated. */
.br-hero-title {
  font-family: var(--br-font-display);
  font-size: var(--fs-display); font-weight: 800;
  line-height: 1.15; letter-spacing: -.03em;
  color: var(--br-ink); margin: 0 0 .75rem; text-wrap: balance;
}
/* Painted ink, not a colour. The declaration order matters: ink first, so a
   browser that cannot clip a background to letterforms keeps a readable
   heading instead of rendering it transparent on transparent. */
.br-gradient-text { color: var(--br-ink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .br-gradient-text {
    background: var(--br-gradient-text);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}
.br-hero-lede {
  max-width: 640px; margin: 0 auto;
  font-size: 1.0625rem; color: var(--br-ink-3); line-height: 1.7;
}

.br-hero-actions {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; flex-wrap: wrap; margin: 1.75rem 0 0;
}
.br-hero-actions .br-btn { gap: .5rem; }

/* --- The carousel ------------------------------------------------------- */
.br-carousel { position: relative; }

/* THE VIEWPORT RESERVES ITS HEIGHT. Slides differ in length by a line or two,
   and without a floor the page jumps every 4.5 seconds and drags the buttons
   under the reader's cursor with it. The min-height is the tallest slide at
   each width, which is why it steps DOWN as the viewport widens - the text
   wraps onto fewer lines. */
.br-carousel-viewport {
  position: relative;
  min-height: 300px;
  display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 576px) { .br-carousel-viewport { min-height: 290px; } }
@media (min-width: 768px) { .br-carousel-viewport { min-height: 310px; } }

.br-carousel-slide { display: none; }
.br-carousel-slide.is-active {
  display: block;
  animation: br-slide-in var(--br-t-slow) var(--br-ease) both;
}
@keyframes br-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.br-carousel-controls {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; margin-top: 1.25rem;
}
.br-carousel-arrow {
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--br-line); border-radius: var(--br-radius-pill);
  background: transparent; color: var(--br-ink-3);
  cursor: pointer;
  transition: color var(--br-t-fast) var(--br-ease),
              background var(--br-t-fast) var(--br-ease),
              border-color var(--br-t-fast) var(--br-ease);
}
.br-carousel-arrow:hover {
  color: var(--br-ink); background: var(--br-surface-hover);
  border-color: var(--br-primary);
}
.br-carousel-arrow:focus-visible { outline: none; box-shadow: var(--br-shadow-focus); }

.br-carousel-dots { display: inline-flex; align-items: center; gap: .375rem; }
.br-carousel-dot {
  position: relative;
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: var(--br-radius-pill);
  background: var(--br-ink-4); opacity: .5; cursor: pointer;
  transition: width var(--br-t) var(--br-ease), opacity var(--br-t) var(--br-ease),
              background var(--br-t) var(--br-ease);
}
/* The dot itself is 8px, far under the 24x24 minimum target size, so it
   carries an invisible pad centred on it that takes the tap instead. */
.br-carousel-dot::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 28px; height: 28px; transform: translate(-50%, -50%);
}
.br-carousel-dot:hover { opacity: .9; }
.br-carousel-dot.is-active {
  width: 28px; opacity: 1; background: var(--br-gradient);
}
.br-carousel-dot:focus-visible { outline: none; box-shadow: var(--br-shadow-focus); }

/* --- Section furniture --------------------------------------------------- */
.br-section { padding: 3.5rem 0; }
.br-section-head { text-align: center; margin-bottom: 2rem; }
.br-section-head .br-eyebrow { margin-bottom: .35rem; }
.br-section-lede {
  max-width: 62ch; margin: .5rem auto 0;
  color: var(--br-ink-3); line-height: 1.7;
}

/* --- The cycle, as a sequence -------------------------------------------- */
.br-timeline {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .br-timeline { grid-template-columns: repeat(3, 1fr); }
}
.br-timeline-item { position: relative; }
.br-timeline-step {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--br-ink-4); margin-bottom: .25rem;
}
.br-timeline-days {
  font-family: var(--br-font-display);
  font-size: 1.75rem; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; color: var(--br-ink-3);
  font-variant-numeric: tabular-nums; margin: .25rem 0 .75rem;
}
.br-timeline-days .br-gradient-text { font-size: 2.5rem; }
.br-card-total { border-color: var(--br-primary); }

/* --- Persona-tinted cards ------------------------------------------------ */
.br-card-persona { position: relative; overflow: hidden; }
.br-card-persona::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
}
.br-card-candidate::after { background: var(--br-gradient-candidate); }
.br-card-recruiter::after { background: var(--br-gradient-recruiter); }

/* --- The closing call to action ------------------------------------------ */
.br-cta-card { position: relative; isolation: isolate; overflow: hidden; }

/* --- Inline icons --------------------------------------------------------- */
.br-glyph { flex: 0 0 auto; vertical-align: -.15em; }

/* --- The announcement strip ---------------------------------------------- */
.br-announce {
  background: linear-gradient(90deg,
              var(--br-bg) 0%, var(--br-bg-2) 50%, var(--br-bg) 100%);
  border-bottom: 1px solid var(--br-line);
  font-size: var(--fs-micro);
  padding: .4rem 0;
  overflow: hidden;
}
.br-announce-inner {
  display: flex; align-items: center; justify-content: center;
  gap: .625rem; flex-wrap: wrap;
}
.br-announce-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .1rem .5rem; border-radius: var(--br-radius-pill);
  background: var(--br-warning-bg); color: var(--br-warning);
  border: 1px solid rgba(245,158,11,.3);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
/* A slow pulse, not the reference's ping: this strip is on screen for the
   whole visit, and something flashing at 1Hz beside the navigation is the
   kind of movement that makes a page unusable for anyone sensitive to it.
   It stops entirely under prefers-reduced-motion, with the rest of section 20. */
.br-announce-ping {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: br-announce-pulse 2.4s var(--br-ease) infinite;
}
@keyframes br-announce-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.75); }
}
.br-announce-text { color: var(--br-ink-2); font-weight: 500; letter-spacing: .01em; }
.br-announce-dot { color: var(--br-ink-4); }
.br-announce-sub { color: var(--br-ink-3); }

/* Headline figures that roll up on load */
.br-metric { text-align: center; padding: 1rem .5rem; }
.br-metric-value {
  font-family: var(--br-font-display);
  font-size: 2.25rem; font-weight: 700; line-height: 1.1;
  color: var(--br-primary); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.br-metric-label {
  font-size: var(--fs-xs); font-weight: 500; color: var(--br-ink-3);
  margin-top: .25rem;
}

/* The numbered step cards (.br-step-card, .br-step-num) were removed with the
   "How MployD works" section they styled (doc s.104). Nothing else used them -
   .br-step, which the registration stepper and the interview tracker use, is a
   different class and is untouched. */

/* Feature list with animated ticks */
.br-feature-list { list-style: none; padding: 0; margin: 0; }
.br-feature-list li {
  display: flex; gap: .625rem; align-items: flex-start;
  padding: .45rem 0; color: var(--br-ink-2); font-size: var(--fs-sm);
}
.br-feature-list li::before {
  content: '✓'; flex: 0 0 20px; height: 20px; margin-top: 2px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--br-success-bg); color: var(--br-success);
  font-size: 11px; font-weight: 700;
  transition: transform var(--br-t) var(--br-ease-spring);
}
.br-feature-list li:hover::before { transform: scale(1.2); }

/* Plan cards */
.br-plan-price {
  font-family: var(--br-font-display);
  font-size: 1.5rem; font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em; color: var(--br-primary);
  font-variant-numeric: tabular-nums;
}
.br-plan-card { transition: transform var(--br-t) var(--br-ease), box-shadow var(--br-t) var(--br-ease); }
.br-plan-card:hover { transform: translateY(-4px); box-shadow: var(--br-shadow-lg); }

/* FAQ */
.br-faq-item { border-bottom: 1px solid var(--br-line); }
.br-faq-item summary {
  padding: 1rem 0; cursor: pointer; font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: .75rem;
  transition: color var(--br-t-fast) var(--br-ease);
}
.br-faq-item summary::-webkit-details-marker { display: none; }
.br-faq-item summary::after {
  content: '+'; margin-left: auto; font-size: 1.25rem; font-weight: 400;
  color: var(--br-primary);
  transition: transform var(--br-t) var(--br-ease);
}
.br-faq-item[open] summary::after { transform: rotate(45deg); }
.br-faq-item summary:hover { color: var(--br-primary); }
.br-faq-answer {
  padding: 0 0 1rem; color: var(--br-ink-3); font-size: var(--fs-sm); line-height: 1.7;
  animation: br-slide-down var(--br-t) var(--br-ease);
}

/* --------------------------------------------------------------------------
   17d. Hover & pointer feedback
   -------------------------------------------------------------------------- */

/* Only apply lift effects where a real pointer exists - on touch these fire
   on tap and read as lag. */
@media (hover: hover) and (pointer: fine) {
  .br-card-hover { transition: transform var(--br-t) var(--br-ease), box-shadow var(--br-t) var(--br-ease); }
  .br-card-hover:hover { transform: translateY(-3px); box-shadow: var(--br-shadow-lg); }

  .br-lift { transition: transform var(--br-t) var(--br-ease); }
  .br-lift:hover { transform: translateY(-2px); }

  .br-glow { transition: box-shadow var(--br-t) var(--br-ease); }
  .br-glow:hover { box-shadow: 0 0 0 4px var(--br-primary-light); }

  /* Sheen sweep across primary buttons */
  .br-btn-primary { position: relative; overflow: hidden; }
  .br-btn-primary::after {
    content: ''; position: absolute; top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-20deg);
    transition: left var(--br-t-slow) var(--br-ease);
  }
  .br-btn-primary:hover::after { left: 130%; }

  .br-table tbody tr { transition: background var(--br-t-fast) var(--br-ease), transform var(--br-t-fast) var(--br-ease); }
  .br-table tbody tr:hover { transform: translateX(2px); }

  .br-tag { transition: transform var(--br-t-fast) var(--br-ease), background var(--br-t-fast) var(--br-ease); }
  .br-tag:hover { transform: translateY(-1px); background: var(--br-primary); color: #fff; }

  .br-stat { transition: transform var(--br-t) var(--br-ease), box-shadow var(--br-t) var(--br-ease); }
  .br-stat:hover { transform: translateY(-2px); box-shadow: var(--br-shadow); }

  .br-pill { transition: transform var(--br-t-fast) var(--br-ease); }
  .br-pill:hover { transform: scale(1.05); }
}

/* --------------------------------------------------------------------------
   18. Animations — transform/opacity only, so they stay GPU-composited
   -------------------------------------------------------------------------- */
@keyframes br-spin { to { transform: rotate(360deg); } }
@keyframes br-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes br-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes br-slide-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes br-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes br-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes br-badge-bump { 0% { transform: scale(1);} 50% { transform: scale(1.3);} 100% { transform: scale(1);} }
@keyframes br-ring-shake { 0%,100% { transform: rotate(0);} 25% { transform: rotate(2deg);} 75% { transform: rotate(-2deg);} }
@keyframes br-shake { 0%,100% { transform: translateX(0);} 20%,60% { transform: translateX(-6px);} 40%,80% { transform: translateX(6px);} }
@keyframes br-flash-green { 0% { background: var(--br-success-bg);} 100% { background: transparent;} }

.br-animate-in { animation: br-fade-up var(--br-t-slow) var(--br-ease) both; }
.br-shake { animation: br-shake var(--br-t-slow) var(--br-ease); }
.br-flash { animation: br-flash-green 600ms var(--br-ease); }

/* Reveal on scroll. The hidden state is applied by JS, never in the stylesheet:
   if scripting fails the content must still be visible, not stuck at opacity 0. */
.br-reveal { opacity: 0; transform: translateY(20px); }
.br-reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity 600ms var(--br-ease), transform 600ms var(--br-ease);
}

/* Staggered list entrance — 60ms apart, capped so long lists don't crawl in */
.br-stagger > * { animation: br-fade-up 300ms var(--br-ease) both; }
.br-stagger > *:nth-child(1) { animation-delay: 0ms; }
.br-stagger > *:nth-child(2) { animation-delay: 60ms; }
.br-stagger > *:nth-child(3) { animation-delay: 120ms; }
.br-stagger > *:nth-child(4) { animation-delay: 180ms; }
.br-stagger > *:nth-child(5) { animation-delay: 240ms; }
.br-stagger > *:nth-child(6) { animation-delay: 300ms; }
.br-stagger > *:nth-child(n+7) { animation-delay: 360ms; }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  :root { --fs-display: 1.875rem; --fs-h1: 1.5rem; --fs-h2: 1.25rem; --fs-h3: 1.125rem; }

  .br-main { padding: 1rem 0 5.5rem; }   /* room for the bottom tab bar */
  .br-card-body { padding: 1rem; }

  /* Every touch target clears 44px */
  .br-btn { min-height: 44px; }

  /* Tables become stacked cards, labelled from data-label */
  .br-table-stack thead { display: none; }
  .br-table-stack tbody tr {
    display: block; margin-bottom: .75rem; padding: .75rem;
    background: var(--br-surface); border: 1px solid var(--br-line);
    border-radius: var(--br-radius);
  }
  .br-table-stack td {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .35rem 0; border: 0; text-align: right;
  }
  .br-table-stack td::before {
    content: attr(data-label); font-weight: 600; color: var(--br-ink-3);
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
    text-align: left;
  }

  /* Bid panel becomes a sticky bottom sheet */
  .br-sticky-panel { position: static; }

  .br-tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
    display: flex; background: var(--br-bg-2);
    backdrop-filter: blur(var(--br-blur));
    -webkit-backdrop-filter: blur(var(--br-blur));
    border-top: 1px solid var(--br-line);
    padding: .375rem .25rem calc(.375rem + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(15,23,42,.06);
  }
  .br-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: .375rem; font-size: 10px; font-weight: 600;
    color: var(--br-ink-3); text-decoration: none; min-height: 44px;
  }
  .br-tabbar a.active { color: var(--br-primary); }
  .br-tabbar-icon { font-size: 1.125rem; line-height: 1; }
}

@media (min-width: 992px) {
  .br-sticky-panel { position: sticky; top: 88px; }
}

/* --------------------------------------------------------------------------
   20. Assistant (module 09)
   -------------------------------------------------------------------------- */

/* Deliberately NOT inside .br-shell: that element carries backdrop-filter,
   which creates a containing block for position:fixed descendants and would
   pin this panel inside the page flow — the same defect that once trapped
   every modal underneath its own backdrop. */
.br-chat { position: fixed; right: 1rem; bottom: 1rem; z-index: 1050; }

.br-chat-fab {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  border: 1px solid var(--br-line-2);
  background: var(--br-primary); color: #fff;
  font-size: 1.25rem; line-height: 1;
  box-shadow: var(--br-shadow);
  cursor: pointer;
}

.br-chat-panel {
  position: absolute; right: 0; bottom: 4rem;
  width: min(22rem, calc(100vw - 2rem));
  display: flex; flex-direction: column;
  max-height: min(30rem, calc(100vh - 8rem));
  /* Opaque, not the translucent surface token: text over a blurred dashboard
     is unreadable, and a chat panel is all text. */
  background: var(--br-bg);
  border: 1px solid var(--br-line-2);
  border-radius: var(--br-radius-lg);
  box-shadow: var(--br-shadow-lg);
  overflow: hidden;
}

.br-chat-head {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--br-line);
}
.br-chat-head > div:first-child { flex: 1 1 auto; }

.br-chat-log {
  flex: 1 1 auto; overflow-y: auto;
  padding: .75rem 1rem; display: flex; flex-direction: column; gap: .5rem;
}

.br-chat-msg {
  padding: .5rem .75rem; border-radius: var(--br-radius);
  font-size: var(--fs-sm); line-height: 1.5; max-width: 90%;
}
.br-chat-bot  { background: var(--br-surface-2); color: var(--br-ink); align-self: flex-start; }
.br-chat-user { background: var(--br-primary); color: #fff; align-self: flex-end; }
.br-chat-typing { opacity: .6; letter-spacing: .2em; }

.br-chat-suggestions {
  display: flex; flex-wrap: wrap; gap: .375rem;
  padding: 0 1rem .5rem;
}
.br-chat-suggestions:empty { padding: 0; }

.br-chip {
  border: 1px solid var(--br-line-2); background: transparent;
  color: var(--br-ink-2); border-radius: 999px;
  padding: .25rem .625rem; font-size: var(--fs-xs); cursor: pointer;
}
.br-chip:hover { border-color: var(--br-primary); color: var(--br-primary); }

.br-chat-form { display: flex; gap: .5rem; padding: .5rem 1rem; }
.br-chat-form .br-input { flex: 1 1 auto; }
.br-chat-foot { padding: 0 1rem .75rem; margin: 0; }

/* The bottom tab bar owns the lower edge on mobile; sit above it. */
@media (max-width: 767.98px) {
  .br-chat { bottom: 4.5rem; }
}

@media print { .br-chat { display: none !important; } }

/* --------------------------------------------------------------------------
   21. Accessibility & print
   -------------------------------------------------------------------------- */

/* Non-negotiable: honour the user's motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible { outline: 2px solid var(--br-primary); outline-offset: 2px; }

.br-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;
}

@media print {
  .br-navbar, .br-tabbar, .br-btn, .br-sim-banner { display: none !important; }
  body { background: #fff; }
  .br-card { border: 1px solid #ccc; box-shadow: none; }
}

/* Masked cell — an inactive candidate's commercial detail.
   Deliberately not a blur filter: blurred text can be recovered from the
   markup, and the point is that the value was never sent to the browser. */
.br-masked { color: var(--br-ink-4); letter-spacing: .18em; user-select: none; }

/* Rating badge — the pill, and the score beneath it in an orb.
   Stacked and centred: the labels differ in width by a factor of two, so an
   inline score wrapped only under the long ones and sat left-aligned. */
.br-rating-stack {
  display: inline-flex; flex-direction: column; align-items: center; gap: .35rem;
}

/* The orb reuses each band's own pill pair — the same background tint and the
   same foreground — so it cannot drift out of contrast independently, and a
   band can never read green here and amber there. */
.br-rating-orb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2.35rem; border-radius: 50%;
  font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  border: 2px solid currentColor; line-height: 1;
}

.br-rating-orb-gold    { background: rgba(251,191,36,.15); color: var(--br-gold);
                         box-shadow: 0 0 0 3px rgba(251,191,36,.14); }
.br-rating-orb-active  { background: var(--br-success-bg); color: var(--br-success);
                         box-shadow: 0 0 0 3px rgba(16,185,129,.14); }
.br-rating-orb-locked  { background: var(--br-warning-bg); color: var(--br-warning);
                         box-shadow: 0 0 0 3px rgba(245,158,11,.14); }
.br-rating-orb-danger  { background: var(--br-danger-bg);  color: var(--br-danger);
                         box-shadow: 0 0 0 3px rgba(239,68,68,.14); }
.br-rating-orb-dormant { background: var(--br-line-2);     color: var(--br-ink-3);
                         box-shadow: 0 0 0 3px rgba(148,163,184,.14); }

/* Light theme keeps the pill's darker foregrounds, for the same reason. */
[data-theme="light"] .br-rating-orb-active { color: #047857; }
[data-theme="light"] .br-rating-orb-locked { color: #B45309; }
[data-theme="light"] .br-rating-orb-danger { color: #B91C1C; }

/* The column is narrow; keep the stack from stretching the row. */
.br-table-talent .br-rating-stack { max-width: 100%; }

/* ==========================================================================
   Date + time picker (module 07)

   Replaces datetime-local so the OK can live INSIDE the calendar, and so the
   calendar opens on the platform date rather than the browser's today.
   ========================================================================== */
.br-datepick { position: relative; }

.br-datepick-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.br-datepick-display:focus-visible {
  outline: 2px solid var(--br-primary);
  outline-offset: 2px;
}

.br-datepick-placeholder { color: var(--br-ink-3); }
.br-datepick-icon { flex: 0 0 auto; opacity: .7; }

/* Lifts the whole card while its picker is open. .br-card carries
   backdrop-filter, which creates a stacking context, so nothing INSIDE the
   card can be raised above a later sibling card - the ancestor has to move.
   Added and removed by BR.datepick. */
.br-stack-raise { position: relative; z-index: 60; }

.br-datepick-pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + .35rem);
  left: 0;
  width: min(20rem, calc(100vw - 2rem));
  padding: .75rem;
  /* --br-bg-2, not --br-surface: the surface token is translucent by design
     and a see-through calendar over page text is unreadable. Modals and
     dropdowns use the solid token for the same reason. */
  background: var(--br-bg-2);
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  animation: br-datepick-in .14s ease-out;
}

@keyframes br-datepick-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .br-datepick-pop { animation: none; }
}

.br-datepick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}

.br-datepick-month { font-weight: 600; font-size: .95rem; }

.br-datepick-nav {
  border: 1px solid var(--br-line);
  background: transparent;
  color: inherit;
  border-radius: var(--br-radius-sm);
  width: 1.9rem;
  height: 1.9rem;
  line-height: 1;
  cursor: pointer;
}

.br-datepick-nav:hover { background: var(--br-surface-2); }

.br-datepick-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.br-datepick-dow {
  text-align: center;
  font-size: .7rem;
  color: var(--br-ink-3);
  padding: .25rem 0;
}

.br-datepick-blank { visibility: hidden; }

.br-datepick-day {
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: var(--br-radius-sm);
  padding: .4rem 0;
  font-size: .85rem;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.br-datepick-day:hover:not(:disabled) { background: var(--br-surface-2); }

.br-datepick-day:disabled {
  /* Out of the allowed window - and visibly so, rather than silently
     accepting a value the server would reject. */
  opacity: .3;
  cursor: not-allowed;
}

.br-datepick-day.is-chosen {
  background: var(--br-primary);
  color: #fff;
  font-weight: 600;
}

.br-datepick-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px solid var(--br-line);
}

.br-datepick-time {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: .7rem;
  color: var(--br-ink-3);
}

.br-datepick-time .br-input { padding: .3rem .45rem; font-size: .85rem; }

.br-datepick-actions { display: flex; gap: .4rem; }

/* ==========================================================================
   Market compensation benchmarks (module 09)

   Three published sources side by side. No single salary survey is
   authoritative, so the table shows the spread rather than one number.
   ========================================================================== */
.br-table-compact th,
.br-table-compact td { padding: .45rem .5rem; font-size: .85rem; }

.br-bench-source {
  font-weight: 600;
  color: var(--br-primary);
}

/* The candidate's own figure against the median. Under is a warning, not an
   error: asking below the market is a choice, and often a deliberate one. */
.br-gap-under { color: var(--br-warning); font-weight: 600; }
.br-gap-over  { color: var(--br-ink-3);   font-weight: 600; }

/* Why OK is unavailable — a disabled button with no explanation is the same
   dead end as a form that silently refuses to submit. */
.br-datepick-note {
  margin: .5rem 0 0;
  color: var(--br-warning);
}

/* ==========================================================================
   External certifications (module 17)

   A curated list of links. MployD has no partnership with any of these
   certifiers and verifies nothing — the disclaimer travels with the list.
   ========================================================================== */
.br-subsection {
  padding: .9rem;
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius);
  background: var(--br-surface-2);
}

.br-cert-list summary {
  cursor: pointer;
  color: var(--br-primary);
}

.br-cert-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

.br-cert-items li {
  padding: .5rem .65rem;
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-sm);
}

.br-cert-items a { font-weight: 600; }


/* ===================================================================
   Fitment - the job-description score on the talent search
   =================================================================== */

/* The panel reads as a distinct step above the filters rather than as more
   filters, which is the confusion the whole section has to avoid. */
.br-jd-panel {
    background: var(--br-surface-2, rgba(127, 127, 127, .05));
}

.br-fitment {
    display: inline-block;
    min-width: 5.5rem;

    /* Bounded below, so a long breakdown cannot stretch the column. */
    max-width: 16rem;
}

/* BOUNDED, NOT FLOATED.
   .br-table-wrap is overflow-x: auto, which clips on both axes - an absolutely
   positioned panel hanging below the last row would be cut off, which is the
   date-picker fault from section 73 in a new place. So the breakdown stays in
   flow with a ceiling on its width: the column can never grow past this, and
   the row just gets taller when opened, which is what a disclosure does. */
.br-table .br-fitment-parts { max-width: 15rem; }

.br-fitment > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.br-fitment > summary::-webkit-details-marker { display: none; }

.br-fitment > summary::after {
    content: '\203A';
    transform: rotate(90deg);
    transition: transform .2s ease;
    opacity: .5;
}

.br-fitment[open] > summary::after { transform: rotate(-90deg); }

.br-fitment-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.br-fitment-bar {
    flex: 1 1 auto;
    min-width: 2.5rem;
    height: .35rem;
    border-radius: 999px;
    background: var(--br-surface-3, rgba(127, 127, 127, .18));
    overflow: hidden;
}

.br-fitment-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--br-accent, currentColor);
    transition: width .4s ease;
}

.br-fitment-parts {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    font-size: .75rem;
    line-height: 1.5;
}

.br-fitment-parts li {
    display: flex;
    justify-content: space-between;
    gap: .75rem;

    /* WRAPS. These lines are sentences now - section 78 replaced "1 yr short"
       with "7 yrs, in or above 4-8 years" - and a nowrap line that long makes
       the table cell as wide as its longest sentence. Opening one breakdown
       pushed the whole table sideways and squeezed every other column. */
    white-space: normal;
}

/* The label stays on one line; only the detail beside it wraps, so the two
   columns of the breakdown still read as two columns. */
.br-fitment-parts li > span:first-child {
    flex: 0 0 auto;
    white-space: nowrap;
}

.br-fitment-parts li > span:last-child { text-align: right; }

@media (prefers-reduced-motion: reduce) {
    .br-fitment > summary::after,
    .br-fitment-bar > span { transition: none; }
}

/* ===================================================================
   Verify my links - the candidate's on-demand link check
   =================================================================== */
.br-verify { margin-top: .75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.br-verify-out { flex: 1 0 100%; }

.br-verify-list { list-style: none; margin: 0; padding: 0; font-size: .8rem; line-height: 1.6; }
.br-verify-list li { display: flex; gap: .35rem; align-items: baseline; }
.br-verify-list strong { flex: 0 0 auto; }

/* Three states, three colours - and "unconfirmed" is deliberately NOT the
   danger colour. A site that blocks automated visitors has told us nothing
   about the link, and colouring that red would read as a fault the candidate
   cannot fix. */
.br-verify-ok      { color: var(--br-success); }
.br-verify-unknown { color: var(--br-warning); }
.br-verify-bad     { color: var(--br-danger); }

/* The fitment breakdown on the bid desk sits in a wider column than the
   table cell it was designed for, so it is given room rather than squeezed. */
.br-fitment-desk { min-width: 0; display: block; }
.br-fitment-desk > summary { gap: .75rem; }
.br-fitment-desk .br-fitment-bar { max-width: 12rem; }
.br-fitment-desk .br-fitment-parts li { white-space: normal; }

/* The Recruiter Performance Index panel. Distinct from the stat tiles beside
   it because it is a judgement about the recruiter, not a count of their work. */
.br-rpi-card { border-left: 3px solid var(--br-primary); }

/* --------------------------------------------------------------------------
   23. Consent & privacy controls (doc s.101)
   -------------------------------------------------------------------------- */

/* The end-of-document sentinel. Zero-height and invisible: it marks a
   position, it does not occupy one. `display:block` matters - an inline span
   with no content has no box for IntersectionObserver to observe. */
.br-consent-end { display: block; height: 1px; width: 100%; }

/* The consent card is the one thing on the page that is not the document, so
   it is allowed to look like an action rather than a clause. */
.br-consent-card { border-color: var(--br-primary); }
.br-consent-card.is-locked { border-color: var(--br-line); }

.br-consent-check { padding: .75rem 0; }
.br-consent-check .form-check-label {
  font-size: var(--fs-sm); line-height: 1.6; color: var(--br-ink-2);
}
.br-consent-card.is-locked .form-check-label { color: var(--br-ink-4); }

/* --- Privacy & Data Controls ---------------------------------------------
   Three actions of escalating consequence, and the styling says so: the
   reversible one is plain, the legal one is warned, the irreversible one is
   framed in danger. Colour is never the only signal - each card states its
   consequence in words, because meaning carried by colour alone is not
   carried at all. */
.br-control-card { border-left: 3px solid var(--br-line); }
.br-control-card-pause { border-left-color: var(--br-info); }
.br-control-card-withdraw { border-left-color: var(--br-warning); }
.br-control-card-delete { border-left-color: var(--br-danger); }

.br-control-consequence {
  font-size: var(--fs-sm); color: var(--br-ink-3); line-height: 1.65;
}
.br-control-notice {
  border-left: 3px solid var(--br-warning);
  background: var(--br-warning-bg);
  padding: .75rem 1rem; border-radius: var(--br-radius-sm);
  font-size: var(--fs-sm); color: var(--br-ink-2); line-height: 1.65;
}

/* --- The consent document modal (doc s.106) -----------------------------
   The document scrolls inside the dialog, not the page - `modal-dialog-
   scrollable` does the work; this caps the height so there is always
   something to scroll, and keeps the prose to a readable measure. */
.br-legal-modal-body { max-height: 60vh; }
.br-legal-fragment { max-width: 72ch; }
.br-legal-modal-body:focus-visible { outline: none; box-shadow: var(--br-shadow-focus); }

/* A checkbox whose document has not been opened yet. Never colour alone:
   the label still reads normally and the control is genuinely disabled, so
   the state is carried by behaviour, not by a shade. */
.br-consent-pending { color: var(--br-ink-4); }

/* --- The embedded Master Service Agreement (doc s.108) -------------------
   The contract scrolls inside its own box, not the page: the gate watches
   THIS element reach its end, and a container that grows with the document
   has no bottom to reach. */
.br-msa-card { border-color: var(--br-warning); }
.br-msa-body {
  max-height: 340px; overflow-y: auto; padding: 1rem 1.25rem;
  border-top: 1px solid var(--br-line); border-bottom: 1px solid var(--br-line);
  font-size: var(--fs-sm); line-height: 1.65;
}
.br-msa-body:focus-visible { outline: none; box-shadow: var(--br-shadow-focus); }
.br-msa-body .br-legal-fragment { max-width: none; }

/* --------------------------------------------------------------------------
   FAQ manual (doc s.109)

   The accordion itself is <details>, styled above as .br-faq-item; what
   follows is the page around it - the sticky controls, the audience tabs, and
   the staggered reveal that makes a 72-answer document feel navigable rather
   than endless.
   -------------------------------------------------------------------------- */

/* Sticky, because the search box is useless the moment it scrolls away on a
   page this long. Offset by the header height so it does not hide under it. */
.br-faq-controls {
  position: sticky; top: 88px; z-index: 20;
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  justify-content: space-between;
  padding: .75rem; margin: 0 0 2rem;
  background: var(--br-bg-2); border: 1px solid var(--br-line);
  border-radius: var(--br-radius); box-shadow: var(--br-shadow);
  animation: br-fade-up var(--br-t) var(--br-ease);
}

.br-faq-search { position: relative; flex: 1 1 16rem; min-width: 0; }
.br-faq-search .br-input { padding-left: 2.25rem; width: 100%; }
.br-faq-search-icon {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  font-size: .9rem; opacity: .6; pointer-events: none;
}

.br-faq-tabs { display: flex; gap: .25rem; flex: 0 0 auto; }
.br-faq-tab {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  padding: .45rem .85rem; border-radius: var(--br-radius-sm);
  font-size: var(--fs-sm); font-weight: 600; color: var(--br-ink-3);
  transition: color var(--br-t-fast) var(--br-ease),
              background var(--br-t-fast) var(--br-ease),
              border-color var(--br-t-fast) var(--br-ease);
}
.br-faq-tab:hover { color: var(--br-ink); background: var(--br-line-2); }
.br-faq-tab.is-active {
  color: var(--br-primary); background: var(--br-primary-light);
  border-color: var(--br-primary-glow);
}
.br-faq-tab:focus-visible { outline: none; box-shadow: var(--br-shadow-focus); }

.br-faq-empty { text-align: center; color: var(--br-ink-3); margin: 2rem 0; }

.br-link-button {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--br-primary); font: inherit; text-decoration: underline;
}

.br-faq-section { scroll-margin-top: 6rem; }
.br-faq-group { margin-bottom: 1.5rem; scroll-margin-top: 6rem; }
.br-faq-group-title {
  font-size: var(--fs-h4); margin: 0 0 .65rem; color: var(--br-ink-2);
  letter-spacing: -.01em;
}

/* The answer's own rhythm. The manual's longer answers carry lists, and a
   list with default margins inside a collapsed panel reads as a gap. */
.br-faq-answer p { margin: 0 0 .75rem; }
.br-faq-answer p:last-of-type { margin-bottom: .5rem; }
.br-faq-list { margin: 0 0 .75rem; padding-left: 1.1rem; }
.br-faq-list li { margin-bottom: .35rem; }

.br-faq-permalink {
  display: inline-block; font-size: var(--fs-xs); color: var(--br-ink-4);
  text-decoration: none; opacity: 0;
  transition: opacity var(--br-t-fast) var(--br-ease), color var(--br-t-fast) var(--br-ease);
}
.br-faq-item[open] .br-faq-permalink { opacity: 1; }
.br-faq-permalink:hover { color: var(--br-primary); }

/* A question arrived at by its own link announces itself, then settles - so a
   reader who followed a link to one answer among seventy-two can see which. */
.br-faq-item:target { animation: br-faq-target 1.6s var(--br-ease); }
@keyframes br-faq-target {
  0%, 60% { background: var(--br-primary-light); }
  100% { background: transparent; }
}

/* Filtering hides whole branches, so an empty card never sits behind a
   search that matched nothing inside it. */
[data-faq-item][hidden], [data-faq-group][hidden], [data-faq-section][hidden] { display: none; }

@media (max-width: 575.98px) {
  .br-faq-controls { top: .5rem; }
  .br-faq-tabs { width: 100%; }
  .br-faq-tab { flex: 1 1 0; text-align: center; padding: .45rem .35rem; }
}

/* Email template preview (doc s.118). The body is plain text, so the line
   breaks the operator typed are the ones the recipient sees - rendering it
   into a normal <p> collapses them and shows a preview that is not what will
   be sent. */
.br-email-preview {
  white-space: pre-wrap;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--br-ink-2);
}

/* The six-digit reset code (doc s.118g). Wide tracking and a tabular face so
   a code read off an email can be checked a character at a time against what
   is in the box. */
.br-otp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.35rem;
  letter-spacing: .4em;
  text-align: center;
}