/* ═══════════════════════════════════════════════════════════════════════════
   BrandForcify — "Security Print" design system
   ───────────────────────────────────────────────────────────────────────────
   Visual language borrowed from the world this product polices: banknote
   intaglio ink, holographic authentication foil, wax seals, and the ruled
   registers of a trademark docket.

     · Ink       deep indigo-black — structure, sidebar, headings
     · Paper     cool security-paper grey — app background
     · Thread    violet — the security thread: primary actions, brand
     · Foil      cyan — authentication highlight, second half of the holo gradient
     · Seal      vermilion — infringement, danger
     · Jade      resolved / taken down          · Amber  pending / review

   Signature: a 2px holographic strip (thread → foil) across the top of the
   app, echoed as a rail on the active nav item and as status rails down the
   left edge of data rows, so verdicts are readable while scanning.
   Evidence (URLs, ids, timestamps, figures) is set in mono with tabular
   numerals so it lines up like a register.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Core palette ─────────────────────────────────────────── */
  --bf-ink:            #333333;   /* charcoal, matching the wordmark */
  --bf-ink-soft:       #3D3D3D;
  --bf-ink-line:       #4A4A4A;

  --bf-paper:          #F6F6F7;
  --bf-surface:        #FFFFFF;
  --bf-surface-soft:   #FAFAFA;
  --bf-border-soft:    #F2F2F3;
  --bf-surface-sunk:   #F0F0F1;

  --bf-thread:         #F59248;   /* brand orange, sampled from the supplied logo */
  --bf-thread-dark:    #D27D3D;   /* hover / pressed */
  --bf-thread-soft:    #FEF4EC;   /* tinted panels */
  --bf-thread-mid:     #FACDAC;   /* borders on tinted panels */

  --bf-foil:           #0FB5CE;
  --bf-foil-soft:      #DFF6FA;

  --bf-seal:           #E24C4C;
  --bf-seal-soft:      #FDECEC;

  --bf-jade:           #0F9A6A;
  --bf-jade-soft:      #E0F5EC;

  --bf-amber:          #D2860B;
  --bf-amber-soft:     #FDF3DF;

  /* ── Semantic aliases (names referenced by markup — keep stable) ── */
  --bf-primary:        var(--bf-thread);
  --bf-primary-dark:   var(--bf-thread-dark);
  --bf-primary-soft:   var(--bf-thread-soft);
  --bf-primary-mid:    var(--bf-thread-mid);

  --bf-bg:             var(--bf-paper);
  --bf-border:         #E5E5E6;
  --bf-border-strong:  #D2D9E8;

  --bf-text:           var(--bf-ink);
  --bf-text-muted:     #6B6B6B;   /* the logo's secondary grey */
  --bf-text-light:     #949494;

  --bf-success:        var(--bf-jade);
  --bf-success-soft:   var(--bf-jade-soft);
  --bf-warning:        var(--bf-amber);
  --bf-warning-soft:   var(--bf-amber-soft);
  --bf-danger:         var(--bf-seal);
  --bf-danger-soft:    var(--bf-seal-soft);
  --bf-info:           var(--bf-foil);
  --bf-info-soft:      var(--bf-foil-soft);

  /* legacy aliases some rules referenced */
  --border:            var(--bf-border);
  --text-muted:        var(--bf-text-muted);
  --primary:           var(--bf-primary);

  /* ── Signature gradient ───────────────────────────────────── */
  --bf-holo: linear-gradient(90deg, var(--bf-thread) 0%, #7B5BF0 45%, var(--bf-foil) 100%);
  --bf-holo-v: linear-gradient(180deg, var(--bf-thread) 0%, var(--bf-foil) 100%);

  /* ── Layout ───────────────────────────────────────────────── */
  --sidebar-width: 244px;
  --navbar-height: 60px;
  --card-radius: 10px;
  --card-shadow: 0 1px 2px rgba(21, 26, 45, .04), 0 8px 24px -12px rgba(21, 26, 45, .10);
  --card-shadow-lift: 0 2px 4px rgba(21, 26, 45, .05), 0 16px 40px -16px rgba(21, 26, 45, .16);
  --card-border: 1px solid var(--bf-border);
  --ring: 0 0 0 3px rgba(91, 70, 229, .18);

  /* ── Spacing scale ────────────────────────────────────────── */
  --gap-page: 26px;
  --gap-section: 18px;
  --pad-card: 20px;

  /* ── Type ─────────────────────────────────────────────────── */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  font-family: var(--font-body);
}

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

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

body {
  background: var(--bf-paper);
  color: var(--bf-text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

/* The security strip: a holographic hairline across the very top of the app. */
body::before {
  content: "";
  position: fixed; inset: 0 0 auto 0;
  height: 2px; z-index: 300;
  background: var(--bf-holo);
}

a { color: var(--bf-primary); text-decoration: none; }
a:hover { color: var(--bf-primary-dark); }

button { cursor: pointer; font-family: inherit; font-size: 14px; color: inherit; }

h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }

code, pre, .settings-code { font-family: var(--font-mono); }

/* Evidence figures line up like a register. */
.data-table, .bf-table, .kpi-value, .kpi-card__value, .match-val,
.token-count, .token-total, .tsm-val, .seats-display { font-variant-numeric: tabular-nums; }

::selection { background: var(--bf-thread-soft); color: var(--bf-ink); }

/* Scrollbars, quietly themed */
* { scrollbar-width: thin; scrollbar-color: var(--bf-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--bf-border-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--bf-text-light); background-clip: content-box; }

/* ═══ LAYOUT ═══════════════════════════════════════════════════ */
.bf-layout { display: flex; flex-direction: column; min-height: 100vh; }

.bf-body {
  display: flex;
  flex: 1;
  margin-top: var(--navbar-height);
  min-height: 0;
}

.bf-main {
  flex: 1;
  padding: var(--gap-page);
  overflow-y: auto;
  min-width: 0;
}

/* One mechanism owns vertical rhythm, so pages can't double-space. */
.bf-main > * { margin-bottom: 0; }
.bf-main > * + * { margin-top: var(--gap-section); }
.bf-main > .page-header { margin-bottom: var(--gap-page); }
.bf-main > .page-header + * { margin-top: 0; }

/* ═══ NAVBAR ═══════════════════════════════════════════════════ */
.bf-navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--navbar-height);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bf-border);
}

.bf-navbar-inner {
  display: flex; align-items: center; gap: 16px;
  height: 100%; padding: 0 20px;
}

.sidebar-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 34px; height: 34px; padding: 8px;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  flex-shrink: 0; transition: background .15s ease, border-color .15s ease;
}
.sidebar-toggle:hover { background: var(--bf-surface-sunk); border-color: var(--bf-border); }
.hamburger { display: block; height: 1.5px; width: 100%; background: var(--bf-ink); border-radius: 2px; }

/* Logo — the mark is set in the display face, with the holo strip beneath. */
.brandforcify-logo { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* Logo mark. The artwork carries its own shield silhouette, so it sits directly on the
   surface instead of inside a coloured tile — the old tile existed only to give the "B↑"
   text placeholder something to sit on. Width/height are set on the element as well as in
   the markup so the layout never shifts while the SVG loads.
   Variants: logo-mark (light surfaces) · logo-mark-knockout (ink surfaces)
             logo-mark-compact (<=32px and the favicon) · logo-mark-mono (one colour, print) */
/* Trademarked BrandForcify lockup. The navbar uses the full lockup (wide, so height-
   constrained with auto width); the square emblem is used where a tile is needed. */
.bf-icon, .bf-icon-lg {
  display: block; flex-shrink: 0;
  width: auto; height: 34px; max-width: 190px;
  object-fit: contain;
  background: none; border: 0;
}
.bf-icon-lg { height: 54px; max-width: 220px; }
.bf-logo-text { min-width: 0; }
.brand-word, .forcify-word {
  font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.02em;
}
.brand-word { color: var(--bf-ink); }
.forcify-word, .brand-accent { color: var(--bf-jade); }
.logo-sub {
  font-size: 10.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bf-text-light); margin-top: -1px;
}

.navbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.token-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--bf-surface-soft); border: 1px solid var(--bf-border);
}
.token-icon { font-size: 12px; color: var(--bf-amber); }
.token-count { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--bf-ink); }
.token-label { font-size: 11px; color: var(--bf-text-muted); }

.user-info { display: flex; align-items: center; gap: 9px; }
.user-avatar {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 700; color: #fff;
  background: var(--bf-holo);
}
.user-details { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; color: var(--bf-ink); }
.user-role { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.role-super { color: var(--bf-thread); }
.role-admin { color: var(--bf-foil); }
.role-user  { color: var(--bf-text-muted); }

/* Sign-out: a labelled button, not a bare glyph — the icon alone gave no clue what it did.
   The label is hidden on narrow screens, where the header has no room for it. */
.btn-logout {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px; border-radius: 8px;
  background: transparent; border: 1px solid var(--bf-border); color: var(--bf-text-muted);
  font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: all .15s ease;
}
.btn-logout__icon { font-size: 14px; line-height: 1; }
.btn-logout:hover { background: var(--bf-seal-soft); border-color: var(--bf-seal); color: var(--bf-seal); }
@media (max-width: 720px) {
  .btn-logout { padding: 0; width: 34px; justify-content: center; }
  .btn-logout__text { display: none; }
}

/* ═══ SIDEBAR ══════════════════════════════════════════════════
   Deep ink panel: it frames the console and lets the holographic
   rail on the active item read clearly. */
.bf-sidebar {
  width: var(--sidebar-width); flex-shrink: 0;
  background: var(--bf-ink);
  border-right: 1px solid var(--bf-ink);
  padding: 18px 0 22px;
  display: flex; flex-direction: column; gap: 22px;
  overflow-y: auto;
  height: calc(100vh - var(--navbar-height));
  position: sticky; top: var(--navbar-height);
}
.bf-sidebar * { scrollbar-color: var(--bf-ink-line) transparent; }

.sidebar-section { padding: 0 12px; }
.sidebar-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #6B7590; padding: 0 10px; margin-bottom: 8px;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 1px; }

.nav-link-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500;
  color: #AEB6CB; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.nav-link-item:hover { background: var(--bf-ink-soft); color: #EEF1F8; }
.nav-link-item.active { background: var(--bf-ink-soft); color: #FFFFFF; font-weight: 600; }
/* The security-thread rail marks the current location. */
.nav-link-item.active::before {
  content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--bf-holo-v);
}
.nav-icon {
  width: 18px; text-align: center; font-size: 14px; flex-shrink: 0;
  color: inherit; opacity: .85;
}
.nav-link-item.active .nav-icon { opacity: 1; color: var(--bf-foil); }

.sidebar-quick { margin-top: auto; padding: 0 22px; }
.btn-primary-sm {
  width: 100%; padding: 9px 14px; border-radius: 8px; border: none;
  font-size: 13px; font-weight: 600; color: #fff;
  background: var(--bf-thread);
  transition: filter .15s ease, transform .15s ease;
}
.btn-primary-sm:hover { filter: brightness(1.1); }
.btn-primary-sm:active { transform: translateY(1px); }

.mobile-nav-backdrop { display: none; }

/* The navbar toggle sets .sidebar-collapsed (+ .nav-open) on the layout root.
   On desktop that collapses the rail to zero width; the mobile query below
   re-expands it as an overlay drawer. */
.sidebar-collapsed .bf-sidebar {
  width: 0; padding-left: 0; padding-right: 0;
  overflow: hidden; border-right: none;
}
/* ═══ PAGE HEADER ══════════════════════════════════════════════ */
/* The top of every page — PageHeader.razor. The title alone, on a band of the theme's own
   colour: a gradient from its dark step to its primary, so every theme gets a matching band
   without a colour of its own. Light rings in the corner give the band depth without adding
   anything to read. Actions sit on the band in white, so a primary button never disappears
   into a band of its own colour. */
.ph, .page-header {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap;
  min-height: 72px; padding: 16px 24px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(115deg, var(--bf-thread-dark) 0%, var(--bf-primary) 58%, color-mix(in srgb, var(--bf-primary) 70%, #fff) 100%);
  box-shadow: 0 10px 28px -16px color-mix(in srgb, var(--bf-primary) 80%, transparent);
}
.ph::before, .page-header::before {
  content: ""; position: absolute; z-index: -1; right: -60px; top: -90px;
  width: 260px; height: 260px; border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, .09);
}
.ph::after, .page-header::after {
  content: ""; position: absolute; z-index: -1; right: 150px; bottom: -70px;
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}
.bf-main > .ph { margin-bottom: var(--gap-page); }
.bf-main > .ph + * { margin-top: 0; }

.ph__main { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 320px; }
.ph__back {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  transition: background-color .15s, transform .15s;
}
.ph__back:hover { background: rgba(255, 255, 255, .28); transform: translateX(-2px); }

.ph__title, .page-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  margin: 0; font-family: var(--font-display);
  font-size: 25px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
  color: #fff;
}
.ph__title > span:first-child { overflow-wrap: anywhere; text-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.page-sub, .page-subtitle { margin: 4px 0 0; font-size: 13px; color: rgba(255, 255, 255, .85); }

.ph__actions, .page-header__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-header__left { flex: 1; min-width: 0; }
.ph__actions .btn-outline-sm, .ph__actions .btn-outline, .ph__actions .btn-xs, .ph__actions .btn-sm {
  background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .45);
}
.ph__actions .btn-outline-sm:hover:not(:disabled), .ph__actions .btn-outline:hover:not(:disabled),
.ph__actions .btn-xs:hover:not(:disabled), .ph__actions .btn-sm:hover:not(:disabled) {
  background: rgba(255, 255, 255, .26); color: #fff; border-color: #fff;
}
.ph__actions .btn-primary, .ph__actions .btn.btn-primary, .ph__actions .btn-primary-sm {
  background: #fff; color: var(--bf-thread-dark); border-color: #fff;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .35);
}
.ph__actions .btn-primary:hover:not(:disabled), .ph__actions .btn-primary-sm:hover:not(:disabled) {
  background: #fff; color: var(--bf-ink);
}
.ph__actions > .text-muted, .ph__actions > .form-label, .ph__actions > span { color: rgba(255, 255, 255, .88); }
.ph__actions select, .ph__actions input { color: var(--bf-ink); }

@media (max-width: 640px) {
  .ph, .page-header { align-items: stretch; flex-direction: column; padding: 14px 16px; border-radius: 14px; }
  .ph__title, .page-title { font-size: 21px; }
  .ph__actions { width: 100%; }
}

/* ═══ CARDS ════════════════════════════════════════════════════ */
.bf-card, .card, .table-card, .settings-card, .recent-card, .results-card {
  background: var(--bf-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.bf-card, .card { overflow: hidden; }
/* THE CARD CLIPS; THE TABLE INSIDE IT SCROLLS.
   I briefly made this card the scroll container itself, which fixed the clipping and broke the
   pagination: the pager sits INSIDE this card on Search history, so it became a child of the scroll
   box — sized to the card's visible width while the table was 1159px, and scrolling out of view
   sideways along with it.

   A pager is not part of the table and must not move with it. The tables are wrapped in
   .table-wrapper instead, which already scrolls correctly and leaves anything after it alone. */
.table-card { overflow: hidden; }

.card-header, .card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 15px var(--pad-card);
  border-bottom: 1px solid var(--bf-border);
}
.card-title {
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
  color: var(--bf-ink); margin: 0;
}
.card-head .page-sub, .card-header .page-sub { margin-top: 0; }
.card-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Free-form content inside a card needs its own inset. */
.card > p, .card > ul, .card > .form-row-inline,
.bf-card > p, .bf-card > ul { padding: 0 var(--pad-card); }
.card > p:last-child, .bf-card > p:last-child { padding-bottom: var(--pad-card); }

/* Tables sit flush but must stay reachable when they overflow. */
.table-scroll, .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ── Table scrolling ───────────────────────────────────────────────────────
   overflow-x IS DECLARED, not left to be inferred. Only overflow-y was set here.
   The spec then computes overflow-x to auto, so it technically scrolled — but it
   is fragile to rely on, and it read as "no horizontal scrolling" the moment a
   table failed to overflow for the other reason below.

   The real fault was that a table is width:100% with no minimum above 768px, so a
   nine-column grid on a tablet or a small laptop SQUASHED its columns to fit
   instead of overflowing. Nothing overflowed, so nothing scrolled, and the columns
   became unreadable. The minimum now applies up to 1200px — see that rule. */
.table-wrapper {
  max-height: 68vh;
  overflow-y: auto;
  overflow-x: auto;

  /* Momentum scrolling on iOS, which otherwise feels stuck on a wide table. */
  -webkit-overflow-scrolling: touch;
}

/* An always-visible track, rather than an overlay bar that appears only once you
   already guessed you could scroll. The affordance has to be there before the
   gesture, which is most of what "it does not show a scroll" means. */
.table-wrapper::-webkit-scrollbar,
.bfd-tablewrap::-webkit-scrollbar { height: 10px; width: 10px; }
.table-wrapper::-webkit-scrollbar-track,
.bfd-tablewrap::-webkit-scrollbar-track { background: var(--bf-surface-sunk); border-radius: 99px; }
.table-wrapper::-webkit-scrollbar-thumb,
.bfd-tablewrap::-webkit-scrollbar-thumb {
  background: var(--bf-border-strong); border-radius: 99px;
  border: 2px solid var(--bf-surface-sunk);
}
.table-wrapper::-webkit-scrollbar-thumb:hover,
.bfd-tablewrap::-webkit-scrollbar-thumb:hover { background: var(--bf-text-light); }

/* Firefox has no pseudo-elements for this; these two properties are the whole API. */
.table-wrapper, .bfd-tablewrap {
  scrollbar-width: thin;
  scrollbar-color: var(--bf-border-strong) var(--bf-surface-sunk);
}

/* ═══ KPI CARDS ════════════════════════════════════════════════ */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi-grid.kpi-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-card {
  position: relative; overflow: hidden;
  background: var(--bf-surface);
  border: var(--card-border); border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 17px 18px;
  display: flex; align-items: flex-start; gap: 13px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.kpi-card:hover { box-shadow: var(--card-shadow-lift); transform: translateY(-1px); }
.kpi-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  background: var(--bf-surface-sunk); color: var(--bf-text-muted);
}
.kpi-blue   { background: var(--bf-thread-soft); color: var(--bf-thread); }
.kpi-green  { background: var(--bf-jade-soft);   color: var(--bf-jade); }
.kpi-red    { background: var(--bf-seal-soft);   color: var(--bf-seal); }
.kpi-purple { background: var(--bf-foil-soft);   color: var(--bf-foil); }
.kpi-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kpi-value, .kpi-card__value {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  color: var(--bf-ink);
}
.kpi-label, .kpi-card__label {
  font-size: 12.5px; font-weight: 500; color: var(--bf-text-muted);
}
.kpi-sub { font-size: 11px; color: var(--bf-text-light); margin-top: 1px; }

/* ═══ TABLES ═══════════════════════════════════════════════════
   Set like a ruled register: quiet hairlines, mono evidence columns. */
.data-table, .bf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th, .bf-table thead th {
  background: var(--bf-surface-soft);
  padding: 11px 14px; text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bf-text-muted);
  border-bottom: 1px solid var(--bf-border);
  position: sticky; top: 0; z-index: 1;
}
.data-table tbody td, .bf-table tbody td {
  padding: 12px 14px; vertical-align: middle;
  border-bottom: 1px solid var(--bf-border);
  color: var(--bf-text);
}
.data-table thead th:first-child, .data-table tbody td:first-child { padding-left: var(--pad-card); }
.data-table thead th:last-child,  .data-table tbody td:last-child  { padding-right: var(--pad-card); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: var(--bf-surface-soft); }

.sortable { cursor: pointer; user-select: none; transition: color .14s ease; }
.sortable:hover { color: var(--bf-thread); }

/* Status rails: the verdict on a row is legible while scanning. */
.data-table tbody tr { position: relative; }
.row-selected { background: var(--bf-thread-soft) !important; }
.row-selected td:first-child { box-shadow: inset 3px 0 0 var(--bf-thread); }
.saarc-row td:first-child { box-shadow: inset 3px 0 0 var(--bf-amber); }
.row-dismissed { opacity: .5; }
.row-dismissed td:first-child { box-shadow: inset 3px 0 0 var(--bf-border-strong); }

.empty-row td { text-align: center; color: var(--bf-text-muted); padding: 34px 16px !important; }
.loading-row td { text-align: center; color: var(--bf-text-muted); padding: 28px 16px !important; }
.col-check { width: 34px; }
.col-actions { width: 1%; white-space: nowrap; }
.row-actions, .action-group { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.table-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px var(--pad-card); border-top: 1px solid var(--bf-border);
  background: var(--bf-surface-soft); font-size: 12.5px; color: var(--bf-text-muted);
}
.table-total { font-weight: 600; color: var(--bf-ink); }

/* Evidence cells */
.url-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.url-cell a { font-family: var(--font-mono); font-size: 12px; color: var(--bf-thread); }
.url-cell a:hover { text-decoration: underline; }

.entity-name { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--bf-ink); }
.entity-avatar {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  color: var(--bf-thread); background: var(--bf-thread-soft);
}

/* ═══ BADGES, CHIPS & TAGS ═════════════════════════════════════ */
.badge, .chip, .tag, .priority-badge, .severity-badge, .badge-category, .badge-currency {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; line-height: 1.5;
}
.badge-success  { background: var(--bf-jade-soft);   color: #0B7A54; }
.badge-danger   { background: var(--bf-seal-soft);   color: #B93636; }
.badge-warning  { background: var(--bf-amber-soft);  color: #96600A; }
.badge-info     { background: var(--bf-foil-soft);   color: #0A7E90; }
.badge-blue     { background: var(--bf-thread-soft); color: var(--bf-thread-dark); }
.badge-neutral, .badge-secondary { background: var(--bf-surface-sunk); color: var(--bf-text-muted); }
.chip-info      { background: var(--bf-foil-soft);   color: #0A7E90; }
.chip-neutral   { background: var(--bf-surface-sunk); color: var(--bf-text-muted); }
.tag-blue       { background: var(--bf-thread-soft); color: var(--bf-thread-dark); }
.tag-purple     { background: var(--bf-foil-soft);   color: #0A7E90; }
.tag-group, .feature-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.feature-tag {
  padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 500;
  background: var(--bf-surface-sunk); color: var(--bf-text-muted);
}
.badge-category { background: var(--bf-surface-sunk); color: var(--bf-text-muted); }
.badge-currency { background: var(--bf-jade-soft); color: #0B7A54; font-family: var(--font-mono); }
/* SAARC priority marker — a wax-seal amber, since it flags priority jurisdictions. */
.badge-saarc { background: var(--bf-amber-soft); color: #96600A; }
.badge-pulse { position: relative; }
.badge-pulse::after {
  content: ""; position: absolute; inset: -3px; border-radius: 8px;
  border: 1px solid currentColor; opacity: .35; animation: bf-pulse 1.8s ease-out infinite;
}
@keyframes bf-pulse { 0% { opacity: .35; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.15); } }

.priority-high   { background: var(--bf-seal-soft);   color: #B93636; }
.priority-medium { background: var(--bf-amber-soft);  color: #96600A; }
.priority-low    { background: var(--bf-surface-sunk); color: var(--bf-text-muted); }

.severity-critical { background: #FBE4E4; color: #9F2B2B; }
.severity-high     { background: var(--bf-seal-soft);  color: #B93636; }
.severity-medium    { background: var(--bf-amber-soft); color: #96600A; }
.severity-low      { background: var(--bf-foil-soft);  color: #0A7E90; }
.severity-none     { background: var(--bf-surface-sunk); color: var(--bf-text-muted); }

.badge-dot, .status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--bf-text-light);
}
.badge-dot.badge-success, .status-online, .badge-dot.status-online { background: var(--bf-jade); }
.badge-dot.badge-danger, .status-offline, .badge-dot.status-offline { background: var(--bf-seal); }
.badge-dot.badge-warning { background: var(--bf-amber); }
.ok, .bar-ok { color: var(--bf-jade); }
.fail { color: var(--bf-seal); }
.error { color: var(--bf-seal); }

/* ═══ BUTTONS ══════════════════════════════════════════════════ */
.btn, .btn-primary, .btn-outline, .btn-danger, .btn-success, .btn-warning,
.btn-sm, .btn-xs, .btn-outline-sm, .btn-run, .btn-login, .quick-action-btn, .page-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-body); font-weight: 600;
  border-radius: 8px; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn, .btn-primary, .btn-outline, .btn-danger, .btn-success, .btn-warning, .btn-login {
  padding: 9px 16px; font-size: 13.5px;
}
.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn-outline-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-xs { padding: 4px 9px; font-size: 12px; border-radius: 6px; }

.btn-primary, .btn-login {
  background: var(--bf-thread); color: #fff; border-color: var(--bf-thread);
}
.btn-primary:hover, .btn-login:hover { background: var(--bf-thread-dark); border-color: var(--bf-thread-dark); }
.btn-primary:active, .btn-login:active { transform: translateY(1px); }

.btn-outline, .btn-outline-sm, .btn-xs, .page-btn {
  background: var(--bf-surface); color: var(--bf-ink); border-color: var(--bf-border-strong);
}
.btn-outline:hover, .btn-outline-sm:hover, .btn-xs:hover, .page-btn:hover {
  background: var(--bf-surface-soft); border-color: var(--bf-text-light); color: var(--bf-ink);
}
.btn-danger  { background: var(--bf-seal); color: #fff; border-color: var(--bf-seal); }
.btn-danger:hover { filter: brightness(.94); }
.btn-success { background: var(--bf-jade); color: #fff; border-color: var(--bf-jade); }
.btn-success:hover { filter: brightness(.94); }
.btn-warning { background: var(--bf-amber); color: #fff; border-color: var(--bf-amber); }
.btn-warning:hover { filter: brightness(.94); }

.btn:disabled, .btn-primary:disabled, .btn-outline:disabled, .btn-run:disabled, .btn-login:disabled {
  opacity: .5; cursor: not-allowed; transform: none;
}

/* `danger` as a standalone modifier (btn-xs danger) */
.danger { color: var(--bf-seal); }
button.danger:hover { background: var(--bf-seal-soft); border-color: var(--bf-seal); color: var(--bf-seal); }

.btn-link {
  background: none; border: none; padding: 0;
  color: var(--bf-thread); font-size: 13px; font-weight: 600;
}
.btn-link:hover { text-decoration: underline; }
.btn-link-block { display: block; width: 100%; text-align: center; padding: 8px 0; }

.btn-run { padding: 10px 20px; font-size: 14px; min-width: 138px; background: var(--bf-thread); color: #fff; border-color: var(--bf-thread); }
.btn-run:hover { background: var(--bf-thread-dark); }
.btn-run.loading { opacity: .75; }

.page-btn { padding: 5px 10px; font-size: 12.5px; min-width: 32px; }
.page-btn.active { background: var(--bf-thread); border-color: var(--bf-thread); color: #fff; }

/* ═══ PAGINATION ═══════════════════════════════════════════════ */
.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px var(--pad-card); border-top: 1px solid var(--bf-border);
  background: var(--bf-surface-soft);
}
.pagination__info { font-size: 12.5px; color: var(--bf-text-muted); }

/* ═══ PROGRESS / METER BARS ════════════════════════════════════ */
/* Only the *track* elements get the fixed 6px height. `.usage-bar-wrap` is a
   block container that also holds a label and/or a percentage figure — giving it
   `height:6px; overflow:hidden` collapsed it onto its own siblings, which is what
   made the Overview and Companies panels look like they overlapped. */
.match-bar-wrap, .seats-bar, .usage-bar, .match-bar {
  position: relative; height: 6px; border-radius: 99px;
  background: var(--bf-surface-sunk); overflow: hidden;
}
.match-bar-wrap { width: 74px; }
.usage-bar-wrap {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; width: 100%;
}
.match-bar__fill, .usage-bar-fill, .usage-bar__fill, .seats-bar-fill {
  display: block; height: 100%; border-radius: 99px;
  background: var(--bf-holo); transition: width .4s cubic-bezier(.4,0,.2,1);
}
.bar-ok      { background: var(--bf-jade) !important; }
.bar-warning { background: var(--bf-amber) !important; }
.bar-danger  { background: var(--bf-seal) !important; }
.match-val { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--bf-ink); }
.usage-bar-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: var(--bf-text-muted);
}
.seats-display { display: flex; align-items: baseline; gap: 3px; font-family: var(--font-mono); }
.seats-used { font-size: 15px; font-weight: 700; color: var(--bf-ink); }
.seats-sep { color: var(--bf-text-light); }
.seats-alloc { font-size: 13px; color: var(--bf-text-muted); }
/* ═══ FORMS ════════════════════════════════════════════════════ */
.form-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.form-row:last-child { margin-bottom: 0; }
.form-col { flex: 1; min-width: 180px; }
.form-col-lg { flex: 2; min-width: 240px; }
.form-col-full { flex: 1 1 100%; }
.form-col-auto { flex: 0 0 auto; }
.form-group { margin-bottom: 14px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-inline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.form-row-inline label { font-size: 12.5px; color: var(--bf-text-muted); }
.form-row-inline .form-input-sm { flex: 1; min-width: 160px; }

.form-label {
  display: block; margin-bottom: 5px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--bf-ink);
}
.form-label.required::after { content: " *"; color: var(--bf-seal); font-weight: 700; }
.required::after { content: ""; }

.form-input, .form-select, .form-textarea, .form-control,
.form-input-sm, .form-select-sm, .filter-search, .filter-bar__search, .filter-bar__select {
  width: 100%;
  font-family: var(--font-body); font-size: 13.5px; color: var(--bf-ink);
  background: var(--bf-surface);
  border: 1px solid var(--bf-border-strong);
  border-radius: 8px;
  padding: 9px 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-input-sm, .form-select-sm { padding: 6px 10px; font-size: 12.5px; border-radius: 7px; }

/* The full-size fields above need width:100% because they stack inside form columns.
   The compact variants do NOT — they live in card headers and toolbars, where a 100%
   width makes every control claim its own row and the whole bar wraps into a stack. */
.form-input-sm, .form-select-sm { width: auto; }
.form-select-sm { min-width: 126px; }
.form-input-sm  { min-width: 158px; }

/* …except where a compact control genuinely fills its container: a table cell being
   edited inline, or a stacked label-over-field filter item. */
td .form-input-sm, td .form-select-sm,
.filter-item .form-input-sm, .filter-item .form-select-sm {
  width: 100%; min-width: 0;
}
.form-textarea { min-height: 68px; resize: vertical; line-height: 1.6; }

.form-input::placeholder, .form-textarea::placeholder { color: var(--bf-text-light); }

.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--bf-text-light); }
.form-input:focus, .form-select:focus, .form-textarea:focus, .form-control:focus,
.form-input-sm:focus, .form-select-sm:focus, .filter-search:focus,
.filter-bar__search:focus, .filter-bar__select:focus {
  outline: none;
  border-color: var(--bf-thread);
  box-shadow: var(--ring);
}
.input-error { border-color: var(--bf-seal) !important; }
.input-error:focus { box-shadow: 0 0 0 3px rgba(226, 76, 76, .16) !important; }
.form-error { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 500; color: var(--bf-seal); }
.form-hint { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: var(--bf-text-muted); }

select.form-input, select.form-select, .form-select, .form-select-sm, .filter-bar__select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23667089' stroke-width='1.6' stroke-linecap='round' d='M3 4.8 6 7.8l3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 30px;
}

/* Checkboxes & radios */
.checkbox-group, .checkbox-row, .check-inline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.checkbox-label {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
}
.checkbox-input, input[type="checkbox"], input[type="radio"] {
  width: 15px; height: 15px; accent-color: var(--bf-thread); cursor: pointer; flex-shrink: 0;
}
.checkbox-text { font-size: 13px; color: var(--bf-text); }
.radio-option {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  border: 1px solid var(--bf-border-strong); border-radius: 8px;
  font-size: 13px; cursor: pointer; transition: all .15s ease;
}
.radio-option:hover { border-color: var(--bf-thread); background: var(--bf-thread-soft); }
.radio-option.selected { border-color: var(--bf-thread); background: var(--bf-thread-soft); color: var(--bf-thread-dark); font-weight: 600; }

/* Filter bars */
.filter-bar, .filter-row, .filter-group {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.filter-item { display: flex; flex-direction: column; gap: 3px; }
.filter-search, .filter-bar__search { max-width: 280px; }
.filter-bar__select, .filter-bar__select { max-width: 190px; }

/* ═══ MODALS ═══════════════════════════════════════════════════ */
.modal-overlay, .bf-modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(21, 26, 45, .5);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: bf-fade .16s ease;
}
@keyframes bf-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes bf-rise { from { transform: translateY(12px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

.modal-panel, .modal, .bf-modal {
  position: relative;
  background: var(--bf-surface);
  border-radius: 14px;
  width: 100%; max-width: 520px; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px -20px rgba(21, 26, 45, .45);
  overflow: hidden;
  animation: bf-rise .2s cubic-bezier(.4,0,.2,1);
}
/* Wider variant for dialogs that hold a table (e.g. bulk-import results). */
.modal--wide { max-width: 880px; }

/* Holographic strip along the top edge of every dialog. */
/* The accent, not the holographic gradient.
   --bf-holo runs orange → purple → foil, which reads as a decorative flourish on a dialog showing
   legal correspondence. A single 2px accent line is enough to anchor the panel. */
.modal-panel::before, .modal::before, .bf-modal::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--bf-thread);
}
.modal-lg { max-width: 720px; }

/* Notice composer: a letter needs width, and the action row has five buttons. */
.bf-modal--notice { max-width: 760px; }
.notice-textarea {
  width: 100%; min-height: 260px; resize: vertical;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  padding: 12px 14px; border: 1px solid var(--bf-border); border-radius: 8px;
  background: var(--bf-surface-soft); color: var(--bf-ink);
}
.notice-textarea:focus { outline: 2px solid var(--bf-thread); outline-offset: -2px; background: #fff; }
.modal-wide { max-width: 880px; }

/* __head was missing from this list, so the file panel's title and its close button stacked
   vertically instead of sitting on one row — which is what the reported screenshot showed. */
.modal-header, .modal__header, .modal__head, .bf-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px var(--pad-card) 14px;
  border-bottom: 1px solid var(--bf-border);
  flex-shrink: 0;                 /* never squeezed to make room for the body */
}
.modal-header h2, .modal-header h3, .modal-header h4,
.modal__header h2, .modal__header h3, .modal__header h4,
.bf-modal-header h3, .bf-modal-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  letter-spacing: -.015em; color: var(--bf-ink); margin: 0;
}
.modal-body, .modal__body, .bf-modal-body {
  padding: var(--pad-card); overflow-y: auto;
  /* min-height:0 is the fix, not decoration. A flex item defaults to min-height:auto, which
     refuses to shrink below its content — so a tall body pushed the panel past its max-height
     and the footer ended up over the content instead of below it. */
  flex: 1 1 auto; min-height: 0;
}
.modal-footer, .modal__footer, .bf-modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap;
  padding: 14px var(--pad-card);
  border-top: 1px solid var(--bf-border);
  background: var(--bf-surface-soft);
  flex-shrink: 0;
}
.modal-close, .modal__close, .bf-modal-close {
  background: none; border: none; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 7px;
  font-size: 17px; line-height: 1; color: var(--bf-text-muted);
  transition: background .14s ease, color .14s ease;
}
.modal-close:hover, .modal__close:hover, .bf-modal-close:hover {
  background: var(--bf-seal-soft); color: var(--bf-seal);
}
.modal-spacer { flex: 1; }

/* ═══ ALERTS ═══════════════════════════════════════════════════ */
.alert {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 14px; border-radius: 9px;
  font-size: 13px; line-height: 1.55;
  border: 1px solid transparent;
}
.alert-success { background: var(--bf-jade-soft);  border-color: #B8E6D2; color: #0B6B4A; }
.alert-danger, .alert-error { background: var(--bf-seal-soft); border-color: #F5C4C4; color: #9F2B2B; }
.alert-info { background: var(--bf-foil-soft); border-color: #B6E6EE; color: #0A6F80; }

/* ═══ EMPTY / LOADING STATES ═══════════════════════════════════ */
.empty-state {
  text-align: center; padding: 46px 24px !important;
  color: var(--bf-text-muted); font-size: 13.5px; line-height: 1.65;
}
.empty-icon { font-size: 30px; margin-bottom: 10px; opacity: .4; display: block; }
/* Recovery actions inside an empty state — an empty result should offer a way forward. */
.empty-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin-top: 14px;
}
.loading-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 56px 20px; color: var(--bf-text-muted); font-size: 13.5px;
}
.spinner, .spinner-lg {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--bf-surface-sunk);
  border-top-color: var(--bf-thread);
  animation: bf-spin .7s linear infinite;
}
.spinner-lg { width: 34px; height: 34px; border-width: 3px; }
@keyframes bf-spin { to { transform: rotate(360deg) } }
.loading { opacity: .7; pointer-events: none; }

.access-denied {
  max-width: 460px; margin: 8vh auto; text-align: center;
  padding: 36px 28px;
  background: var(--bf-surface); border: var(--card-border);
  border-radius: var(--card-radius); box-shadow: var(--card-shadow);
}

/* ═══ UTILITIES ════════════════════════════════════════════════ */
.text-muted { color: var(--bf-text-muted); }
.text-primary { color: var(--bf-thread); }
.text-right { text-align: right; }
.text-sm, .small { font-size: 12.5px; }
.fw-600 { font-weight: 600; }
.p-3 { padding: 16px; }
.more { font-size: 11.5px; color: var(--bf-text-muted); }
.toast-container { position: fixed; z-index: 400; }
/* ═══ LOGIN ════════════════════════════════════════════════════
   The ink field with a holographic seal — the product's one bold moment. */
/* ═══ LOGIN — animated brand-protection scenes ══════════════════
   PERFORMANCE CONTRACT. This is the most decorated screen in the app, so the rules
   are strict and worth keeping to if you edit it:
     1. Animate ONLY transform and opacity. Never width/top/left/box-shadow, and never
        filter/blur on a moving node — blur re-rasterises every frame.
     2. No JS: no timers, no requestAnimationFrame, no IntersectionObserver. Pure CSS
        keyframes are driven by the compositor and are throttled automatically by the
        browser when the tab is backgrounded.
     3. Inline SVG only — zero network requests, no image decode, no layout shift.
     4. Off-screen scenes get visibility:hidden inside the keyframes, so only ONE scene
        is ever being painted. Opacity:0 alone would still cost compositing.
     5. The whole stage is display:none under 900px, so phones do no work at all.
   None of this touches the authenticated app: these selectors exist only under
   .login-page, and the component is disposed the moment the user signs in. */

/* ── Email settings & notice template editor ──────────────────────── */
.dev-banner { border-left: 3px solid var(--bf-amber); }
.test-send { display: flex; gap: 8px; align-items: center; }
.test-send .form-input { flex: 1; }
.test-result {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px; font-size: 12px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 2px;
}
.test-result.ok  { background: #E9F7F1; color: #0B6B4B; }
.test-result.bad { background: #FDECEC; color: #8A2020; }

/* 340px rather than 280. The shipped template names are phrases — "Marketplace —
   counterfeit goods", "Cease & desist — direct to infringer" — and at 280 every one
   of them truncated mid-word, which is the column failing at its only job. The extra
   60px comes off the editor, which has room to spare. */
.template-layout {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--gap-section); align-items: start;
}
@media (max-width: 1100px) { .template-layout { grid-template-columns: minmax(0, 1fr); } }

.template-list { padding: 0; }
.tmpl-items { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow-y: auto; }
.tmpl-item {
  padding: 10px var(--pad-card); border-bottom: 1px solid var(--bf-border);
  cursor: pointer; transition: background .12s ease;
}
.tmpl-item:last-child { border-bottom: none; }
.tmpl-item:hover { background: var(--bf-surface-soft); }
.tmpl-item.is-active { background: var(--bf-thread-soft); box-shadow: inset 3px 0 0 var(--bf-thread); }
/* The name and the all-companies switch on one line, the switch pinned right so the
   column of switches reads straight down however long the names are. */
.tmpl-item__row { display: flex; align-items: center; gap: 10px; }
.tmpl-item__name {
  font-size: 13px; font-weight: 600; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tmpl-item__meta { font-size: 11px; color: var(--bf-text-light); margin-top: 3px; }

/* Tags on their own line rather than trailing the name. Inline, they pushed long
   names into a second row and the list lost its rhythm. */
.tmpl-item__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.tmpl-item__tags:empty { display: none; }
.tmpl-tag {
  font-size: 9.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap;
}
.tmpl-tag--default { color: #0a6b4a; background: var(--bf-jade-soft); border-color: #BFE7D6; }
.tmpl-tag--off { color: var(--bf-text-muted); background: var(--bf-surface-sunk); border-color: var(--bf-border); }

/* A disabled template is dimmed but still legible — it has to stay readable to be
   found and switched back on. */
.tmpl-item.is-off .tmpl-item__name { color: var(--bf-text-muted); }

/* ── The all-companies switch ──
   A switch, not a checkbox: this is a state being turned on and off, not a value being
   ticked, and the travel of the knob says which way it just went. */
.tmpl-switch {
  flex: 0 0 auto; position: relative; width: 30px; height: 17px; padding: 0;
  border: 1px solid var(--bf-border); border-radius: 99px;
  background: var(--bf-surface-sunk); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.tmpl-switch:hover { border-color: var(--bf-border-strong); }
.tmpl-switch:focus-visible { outline: none; box-shadow: var(--ring); }
.tmpl-switch:disabled { opacity: .5; cursor: default; }
.tmpl-switch.is-on { background: var(--bf-jade); border-color: var(--bf-jade); }
.tmpl-switch__dot {
  position: absolute; top: 1px; left: 1px; width: 13px; height: 13px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .15s ease;
}
.tmpl-switch.is-on .tmpl-switch__dot { transform: translateX(13px); }
@media (prefers-reduced-motion: reduce) {
  .tmpl-switch, .tmpl-switch__dot { transition: none; }
}

/* Toolbar + editing surface */
.editor-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 6px 8px; border: 1px solid var(--bf-border); border-bottom: 0;
  border-radius: 8px 8px 0 0; background: var(--bf-surface-soft);
}
.editor-toolbar button {
  min-width: 28px; height: 26px; padding: 0 7px;
  border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer;
  font-size: 12px; color: var(--bf-text-muted);
  transition: background .12s ease, border-color .12s ease;
}
.editor-toolbar button:hover { background: #fff; border-color: var(--bf-border); color: var(--bf-ink); }
.editor-toolbar button.is-on { background: var(--bf-thread); border-color: var(--bf-thread); color: #fff; }
.editor-sep { width: 1px; height: 18px; background: var(--bf-border); margin: 0 3px; }
.editor-select {
  height: 26px; padding: 0 6px; font-size: 11.5px;
  border: 1px solid var(--bf-border); border-radius: 6px; background: #fff; color: var(--bf-text-muted);
}
.editor-color {
  width: 26px; height: 26px; padding: 0; border: 1px solid var(--bf-border);
  border-radius: 6px; background: #fff; cursor: pointer;
}
.editor-source {
  width: 100%; min-height: 320px; max-height: 52vh;
  padding: 12px 14px; border: 1px solid var(--bf-border); border-radius: 0 0 8px 8px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.55; resize: vertical;
}

/* Explicit mode tabs — a single toggle button gave no clear way back from preview.
   Declared with the element qualified (.mode-tabs > button) so a broader page-level button rule
   cannot flatten it, and every visual property is set explicitly rather than inherited. */
.mode-tabs {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--bf-border); border-radius: 8px;
  overflow: hidden; background: var(--bf-surface-soft);
}
.mode-tabs > button {
  appearance: none; -webkit-appearance: none;
  margin: 0; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; cursor: pointer;
  padding: 5px 13px; height: 30px;
  font-family: inherit; font-size: 11.5px; font-weight: 500; line-height: 1;
  color: var(--bf-text-muted); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .12s ease, color .12s ease;
}
.mode-tabs > button + button { border-left: 1px solid var(--bf-border); }
.mode-tabs > button:hover { background: #fff; color: var(--bf-ink); }
.mode-tabs > button.is-on {
  background: var(--bf-thread); color: #fff; font-weight: 650;
}
.mode-tabs > button.is-on:hover { background: var(--bf-thread); color: #fff; }
.mode-tabs > button:focus-visible { outline: 2px solid var(--bf-thread); outline-offset: -2px; }

.token-palette--compact { margin-top: 6px; align-items: center; }
.token-palette__label { font-size: 11px; color: var(--bf-text-light); margin-right: 2px; }

.editor-surface {
  min-height: 300px; max-height: 52vh; overflow-y: auto;
  padding: 14px 16px; border: 1px solid var(--bf-border); border-radius: 0 0 8px 8px;
  background: #fff; font-size: 13px; line-height: 1.6;
}
.editor-surface:focus { outline: 2px solid var(--bf-thread); outline-offset: -2px; }
.editor-surface h3 { font-size: 13px; letter-spacing: .02em; margin: 14px 0 6px; }
.editor-surface p { margin: 0 0 8px; }
.editor-surface ul, .editor-surface ol { margin: 0 0 8px; padding-left: 22px; }
.editor-surface blockquote {
  margin: 0 0 8px; padding: 6px 12px; border-left: 3px solid var(--bf-border);
  color: var(--bf-text-muted);
}
.editor-surface pre { font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; margin: 0 0 8px; }
.editor-surface hr { border: 0; border-top: 1px solid var(--bf-border); margin: 12px 0; }
.editor-surface a { color: var(--bf-thread); }

/* Placeholder palette */
.token-palette { display: flex; gap: 6px; flex-wrap: wrap; }
.token-chip {
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 3px 8px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--bf-border); background: var(--bf-surface-soft); color: var(--bf-thread);
  transition: background .12s ease, border-color .12s ease;
}
.token-chip:hover { background: var(--bf-thread-soft); border-color: var(--bf-thread); }

.tmpl-preview { border: 1px solid var(--bf-border); border-radius: 8px; overflow: hidden; }
.tmpl-preview__subject {
  padding: 9px 14px; background: var(--bf-surface-soft); border-bottom: 1px solid var(--bf-border);
  font-weight: 600; font-size: 12.5px;
}
.tmpl-preview__body { padding: 16px; font-size: 13px; line-height: 1.6; max-height: 56vh; overflow-y: auto; }
.tmpl-preview__body h3 { font-size: 13px; margin: 14px 0 6px; }

/* Shown in the notice composer when no template is configured for that notice type. */
.notice-missing {
  padding: 20px; border: 1px dashed var(--bf-border-strong); border-radius: 10px;
  background: var(--bf-surface-soft); text-align: center;
}
.notice-missing strong { display: block; font-size: 13.5px; margin-bottom: 6px; }
.notice-missing__actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.notice-missing p { font-size: 12.5px; color: var(--bf-text-muted); line-height: 1.6; margin: 0 auto 14px; max-width: 52ch; }
.alert-info {
  padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.55;
  background: var(--bf-thread-soft); color: var(--bf-ink); margin-bottom: 12px;
}

/* Quota warning banner. Only rendered when there is something to act on. */
.quota-alert {
  border-radius: 12px; padding: 14px 16px; margin-bottom: var(--gap-section);
  border: 1px solid var(--bf-border); border-left-width: 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.quota-alert.is-warning { background: #FFF9EF; border-left-color: var(--bf-amber); }
.quota-alert.is-blocked { background: #FDF1F1; border-left-color: var(--bf-seal); }
.quota-alert__head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.quota-alert__icon { font-size: 15px; }
.quota-alert__rows { display: flex; flex-direction: column; gap: 6px; }
.quota-alert__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11.5px; }
.quota-alert__name { min-width: 140px; font-weight: 600; }
.quota-alert__metric { display: flex; align-items: center; gap: 6px; min-width: 190px; color: var(--bf-text-muted); }
.quota-alert__metric .quota__track { width: 70px; }
.quota-alert__foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--bf-text-muted); padding-top: 4px;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Remaining allowance shown beside the Run button, before a refusal rather than after. */
.quota-inline {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--bf-text-muted); margin-right: 10px; white-space: nowrap;
}
.quota-inline.is-low { color: var(--bf-seal); font-weight: 700; }

/* Account reset: what is about to be destroyed, counted before anything happens. */
.reset-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 10px 0 12px; }
.reset-count {
  padding: 9px 11px; border-radius: 8px; border: 1px solid var(--bf-border);
  background: var(--bf-surface-soft);
}
.reset-count.is-doomed { border-color: var(--bf-seal); background: #FDECEC; }
.reset-count__n { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--bf-ink); }
.reset-count.is-doomed .reset-count__n { color: var(--bf-seal); }
.reset-count__l { font-size: 10.5px; line-height: 1.45; color: var(--bf-text-muted); }

.reset-keeps {
  margin: 14px 0; padding: 11px 13px; border-radius: 8px;
  background: #F0FAF5; border-left: 3px solid var(--bf-jade);
  font-size: 12px; line-height: 1.6; color: var(--bf-text-muted);
}
.reset-keeps strong { display: block; margin-bottom: 5px; color: var(--bf-ink); }
.reset-keeps ul { margin: 0; padding-left: 18px; }
.reset-keeps li { margin-bottom: 4px; }
.btn.danger, .btn-primary.danger { background: var(--bf-seal); border-color: var(--bf-seal); }

/* Quota exhaustion dialog. A commercial state with a remedy, not an error. */
.bf-modal--quota { max-width: 560px; }
.quota-block__figure { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.quota-block__n { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--bf-seal); letter-spacing: -.02em; }
.quota-block__of { font-size: 13px; color: var(--bf-text-muted); }
.quota-block__reason {
  margin: 14px 0; padding: 11px 13px; border-radius: 8px; font-size: 12.5px; line-height: 1.6;
  background: #FDECEC; color: #8A2020; border-left: 3px solid var(--bf-seal);
}
.quota-block__what { font-size: 12.5px; line-height: 1.65; color: var(--bf-text-muted); }
.quota-block__what strong { display: block; margin-bottom: 4px; color: var(--bf-ink); }
.quota-block__what p { margin: 0 0 8px; }

/* The plan -> subscription -> searches chain, shown rather than described. */
.chain { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chain__step {
  flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; border-radius: 8px; border: 1px solid var(--bf-border);
  background: var(--bf-surface-soft);
}
.chain__step.is-done { border-color: var(--bf-jade); background: #F0FAF5; }
.chain__step.is-todo { border-style: dashed; }
.chain__k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--bf-text-light); }
.chain__v { font-size: 12.5px; font-weight: 600; color: var(--bf-ink); }
.chain__arrow { align-self: center; color: var(--bf-text-light); }

.nav-group-label {
  padding: 14px 16px 5px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--bf-text-light);
}
.plan-card__users { color: var(--bf-thread); }

/* Which company am I editing? Sticky, because these forms change money and outbound mail and the
   answer had been scrolling off the top of the panel. */
.ctx-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--bf-surface); border-bottom: 1px solid var(--bf-border);
}
.ctx-crumb {
  font-size: 10.5px; color: var(--bf-text-light); margin-bottom: 3px;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.ctx-crumb strong { color: var(--bf-thread); font-weight: 700; }
.ctx-crumb span { opacity: .5; }
.ctx-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctx-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* The row being edited, unmistakably. */
.tmpl-item.is-active { box-shadow: inset 4px 0 0 var(--bf-thread); }

/* Sub-tabs within a selected company. */
/* Company set-up steps: a segmented row of pills, each with its step number in a badge. */
.console-subtabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 0 var(--pad-card) 4px; padding: 4px; border-radius: 11px;
  background: var(--bf-surface-sunk);
}
.console-subtabs button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--bf-text-muted);
  transition: color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.console-subtabs button:hover { color: var(--bf-ink); background: rgba(255, 255, 255, .55); }
.console-subtabs button.is-on {
  color: var(--bf-ink); font-weight: 650; background: var(--bf-surface);
  box-shadow: 0 1px 2px rgba(20, 20, 30, .08), 0 0 0 1px var(--bf-border);
}
.console-subtabs button:focus-visible { outline: 2px solid var(--bf-thread); outline-offset: 1px; }
.console-subtabs__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--bf-border); color: var(--bf-text-muted);
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.console-subtabs button.is-on .console-subtabs__n { background: var(--bf-thread); color: #fff; }

/* Plan Master: three fields per plan reads better as a card than a mostly-empty table row. */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--gap-section); }
.plan-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.plan-card.is-retired { opacity: .6; }
.plan-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-card__name { margin: 0; font-size: 15px; }
.plan-card__figure { display: flex; align-items: baseline; gap: 7px; }
.plan-card__n { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--bf-thread); }
.plan-card__unit { font-size: 11px; color: var(--bf-text-light); }
.plan-card__meta { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--bf-text-muted); }
.plan-card__desc { margin: 0; font-size: 12px; line-height: 1.55; color: var(--bf-text-muted); }
.plan-card__actions { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }
.plan-note { margin-top: 14px; }
.plan-preview {
  margin-top: 14px; padding: 11px 13px; border-radius: 8px;
  background: var(--bf-thread-soft); font-size: 12.5px; line-height: 1.6;
}

/* The lockup is sized by HEIGHT, never width.
   Constraining the width let the stacked artwork grow to whatever height its ratio implied — about
   129px inside a 60px bar, which is what overflowed. Height is the dimension the container actually
   constrains, so binding to it makes overflow impossible. */
.bf-lockup {
  /* Sized by HEIGHT, never width — the artwork's own ratio then decides the width, which is what
     stops a stacked lockup from overflowing a short bar. The supplied horizontal file is 3.07:1, so
     36px tall occupies about 110px.
     object-fit means that even if a future rule sets both dimensions, the artwork letterboxes rather
     than distorting. Cheap insurance against exactly the bug this comment sits above. */
  height: 36px; width: auto; max-width: 100%; display: block; flex-shrink: 0;
  object-fit: contain;
}
.brandforcify-logo {
  display: flex; align-items: center; min-width: 0;
  /* Never taller than the bar it sits in, whatever artwork is dropped in later. */
  max-height: var(--navbar-height); overflow: hidden;
}

/* Login has vertical room, so it keeps the fuller stacked lockup. */
/* LOGIN LOGO — sized fluidly, and never distorted.
   It was squashed on any laptop: the responsive rules below reduce .bf-lockup's HEIGHT for a short
   viewport, and because .bf-lockup--login has the same specificity but appears earlier, that height
   won while the login width of 190px stayed — 190x32 instead of 190x62, half its correct height.
   The media queries now exclude the login variant, and object-fit guards against any future rule
   setting both dimensions: the artwork letterboxes rather than stretching. */
.bf-lockup--login {
  /* Scales with the viewport between sensible bounds instead of one fixed width. */
  width: clamp(150px, 42vw, 210px);
  height: auto;

  /* On a short laptop the logo gives up height before it pushes the sign-in form below the fold. */
  max-height: 20vh;
  object-fit: contain;

  margin: 0 auto 10px;
}

.login-logo { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Height reductions apply to the NAVBAR lockup only — the login one is fluid and manages itself. */
@media (max-height: 820px) { .bf-lockup:not(.bf-lockup--login) { height: 32px; } }
@media (max-width: 640px)  { .bf-lockup:not(.bf-lockup--login) { height: 28px; } }

/* Where mail actually goes — the one question the mail page exists to answer. */
.mail-rule { padding: 12px var(--pad-card); border-bottom: 1px solid var(--bf-border); font-size: 12.5px; }
.mail-rule strong { display: block; margin-bottom: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--bf-text-light); }
.mail-rule__row { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; line-height: 1.6; color: var(--bf-text-muted); }
.mail-rule__row code { font-size: 11.5px; }
.mail-rule__row.is-live { color: var(--bf-ink); }

/* Compact quota bar for use inside a table cell. */
.quota--compact { min-width: 56px; }
.quota--compact .quota__track { height: 5px; }

/* ── Interactive tour: spotlight ──
   The dim is produced by an enormous box-shadow spread on the hole itself, rather than four
   surrounding panels. One element instead of four to keep positioned, and the cutout can never
   develop a seam between panels as they round to different sub-pixels.

   pointer-events: none is essential — the whole point is that the real element underneath stays
   clickable. Without it the spotlight would block the click it is asking for. */
.tour-hole {
  position: fixed; z-index: 188; pointer-events: none;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(18, 18, 18, .62);
  outline: 2px solid var(--bf-thread);
  outline-offset: 0;
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}

/* A quiet pulse on the target, so the eye lands on it before reading the bubble. */
/* z-index 190, BELOW the 200 used by modals.
   The tour lifts an element so the spotlight cut-out reveals it, and 301 did that — but it also put
   the element above every modal, so anything the tour had touched floated over a dialog opened later.
   190 is above the page and below any modal, which is the correct place for it: the tour and a modal
   are never meaningfully on screen together. */
.tour-target { position: relative; z-index: 190; animation: tour-pulse 1.6s ease-in-out infinite; }
@keyframes tour-pulse {
  0%, 100% { filter: none; }
  50%      { filter: brightness(1.18); }
}

.tour-arrow { position: fixed; z-index: 191; width: 0; height: 0; pointer-events: none; }
.tour-arrow--left  { border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-right: 11px solid var(--bf-thread); }
.tour-arrow--right { border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 11px solid var(--bf-thread); }
.tour-arrow--up    { border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 11px solid var(--bf-thread); }

.tour-bubble {
  position: fixed; z-index: 192;
  background: var(--bf-surface); border-radius: 12px;
  border: 2px solid var(--bf-thread);
  padding: 15px 17px 13px;
  box-shadow: 0 20px 50px -14px rgba(0,0,0,.45);
}
.tour-bubble__count {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--bf-thread); margin-bottom: 4px;
}
.tour-bubble__title { font-size: 14.5px; font-weight: 700; color: var(--bf-ink); margin-bottom: 6px; }
.tour-bubble__text { font-size: 12.5px; line-height: 1.6; color: var(--bf-text-muted); }
.tour-bubble__prompt {
  margin-top: 10px; padding: 8px 11px; border-radius: 7px;
  background: var(--bf-thread-soft); color: var(--bf-ink);
  font-size: 12.5px; font-weight: 650;
}
.tour-bubble__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bf-border);
}
.tour-bubble__skip, .tour-bubble__next {
  border: 1px solid var(--bf-border); background: var(--bf-surface);
  border-radius: 7px; padding: 5px 10px; cursor: pointer;
  font-family: inherit; font-size: 11.5px; color: var(--bf-text-muted);
}
.tour-bubble__skip:hover, .tour-bubble__next:hover { border-color: var(--bf-thread); color: var(--bf-ink); }

/* On a type-or-choose step the bubble button IS the way forward, not an escape hatch, so it looks
   like the primary action rather than a secondary one. */
.tour-bubble__next--primary {
  background: var(--bf-thread); border-color: var(--bf-thread);
  color: #fff; font-weight: 650;
}
.tour-bubble__next--primary:hover { background: var(--bf-thread-dark); border-color: var(--bf-thread-dark); color: #fff; }

@media (max-width: 700px) {
  /* On a narrow screen the sidebar is a drawer, so a highlight on a sidebar link would point at a
     hidden element. The bubble sits at the bottom instead of beside the target. */
  .tour-bubble { left: 12px !important; right: 12px; width: auto !important; top: auto !important; bottom: 14px; }
  .tour-arrow { display: none; }
}

/* Guided tour. A dialog, not a spotlight overlay: highlighting elements means tracking their
   positions through scroll and layout changes, and a misplaced highlight is worse than none. */
.tour-backdrop {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(20, 20, 20, .55); backdrop-filter: blur(2px);
}
.tour {
  width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
  background: var(--bf-surface); border-radius: 14px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
}
.tour__head { padding: 20px 22px 0; }
.tour__count {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--bf-thread); margin-bottom: 5px;
}
.tour__title { margin: 0; font-size: 17px; }
.tour__body { padding: 12px 22px 4px; font-size: 13px; line-height: 1.68; color: var(--bf-text-muted); }
.tour__body p { margin: 0 0 10px; }
.tour__body strong { color: var(--bf-ink); }
.tour__where {
  margin-top: 10px; padding: 8px 11px; border-radius: 7px;
  background: var(--bf-thread-soft); font-size: 12px; color: var(--bf-ink);
}
.tour__dots { display: flex; gap: 6px; justify-content: center; padding: 12px 0 2px; }
.tour__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bf-border); }
.tour__dot.is-done { background: var(--bf-thread-mid); }
.tour__dot.is-on { background: var(--bf-thread); transform: scale(1.25); }
.tour__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 22px 18px; border-top: 1px solid var(--bf-border); margin-top: 10px;
}
.tour__nav { display: flex; gap: 8px; flex-wrap: wrap; }

/* Notice docket: the letter as it left. */
.docket { border: 1px solid var(--bf-border); border-radius: 9px; overflow: hidden; margin: 12px 0; }
.docket__row {
  display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: baseline;
  padding: 7px 12px; border-bottom: 1px solid var(--bf-border-soft); font-size: 12.5px;
}
.docket__row:last-child { border-bottom: 0; }
.docket__row > span:first-child {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--bf-text-light);
}
.docket__mono { font-family: var(--font-mono); font-size: 11px; word-break: break-all; }
.docket__bodyhead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 14px 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--bf-text-light);
}
.docket__actions { display: flex; gap: 6px; }
.docket__actions .btn-xs.is-on { background: var(--bf-thread); border-color: var(--bf-thread); color: #fff; }
.docket__letter {
  border: 1px solid var(--bf-border); border-radius: 9px; padding: 14px 16px;
  background: var(--bf-surface-soft); font-size: 12.5px; line-height: 1.68; max-height: 40vh; overflow-y: auto;
}
.docket__letter--plain { white-space: pre-wrap; font-family: inherit; margin: 0; }

/* Per-user usage link on the Users table. */
.quota-cell__link {
  display: inline-block; margin-top: 3px; font-size: 10.5px;
  color: var(--bf-thread); text-decoration: none; border-bottom: 1px dotted var(--bf-thread);
}
.quota-cell__link:hover { color: var(--bf-thread-dark); border-bottom-style: solid; }

/* Source link preview. Built from the URL, so it costs no external request. */
/* No min-width: under table-layout:fixed it is ignored anyway, and relying on it is what hid the
   real problem. The width comes from the nth-child rule above. */
.src-cell { overflow: hidden; }
.src-card {
  display: block; padding: 7px 9px; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--bf-border); background: var(--bf-surface-soft);
  transition: border-color .12s ease, background .12s ease;
}
.src-card:hover { border-color: var(--bf-thread); background: var(--bf-thread-soft); }
.src-card__host {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 650; color: var(--bf-ink);
}

/* NOT break-all. A host truncated with an ellipsis stays readable at any width; break-all in a narrow
   column stacks it one character per line, which is what happened here. The full URL is on the title
   attribute and in every export, so nothing is lost by truncating. */
.src-card__host span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.src-card__initial {
  flex-shrink: 0; width: 17px; height: 17px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bf-thread); color: #fff; font-size: 10px; font-weight: 700;
}
.src-card__path {
  display: block; margin-top: 3px;
  font-family: var(--font-mono); font-size: 10px; color: var(--bf-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.src-card__cite {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 4px; font-size: 10.5px; line-height: 1.4; color: var(--bf-text-light);
}
.src-card__go { display: block; margin-top: 5px; font-size: 10px; font-weight: 600; color: var(--bf-thread); }

/* On-demand link preview, chat-app style. */
.src-preview__btn {
  display: block; width: 100%; margin-top: 5px; padding: 3px 6px;
  border: 1px dashed var(--bf-border); border-radius: 6px; background: transparent;
  font-family: inherit; font-size: 9.5px; color: var(--bf-text-muted); cursor: pointer;
}
.src-preview__btn:hover { border-color: var(--bf-thread); color: var(--bf-thread); border-style: solid; }
/* The inline og:image card is gone — the Preview button now opens a real window instead. The image
   rules went with it rather than being left behind as CSS nobody can trace to any markup. */
.src-preview__none, .src-preview__loading {
  display: block; margin-top: 5px; font-size: 9.5px; line-height: 1.35; color: var(--bf-text-light);
}

/* In-app listing preview. Large, because a product page at modal size is unreadable. */
.preview-modal {
  display: flex; flex-direction: column;
  width: min(1100px, 94vw); height: min(84vh, 860px);
  background: var(--bf-surface); border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
}
.preview-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 14px; border-bottom: 1px solid var(--bf-border); flex-shrink: 0;
}
.preview-modal__where { min-width: 0; }
.preview-modal__url {
  display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--bf-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.preview-modal__acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* The frame takes all the remaining height. A fixed pixel height would leave dead space on a large
   screen and cut the page off on a small one. */
.preview-modal__frame { flex: 1 1 auto; min-height: 0; background: var(--bf-surface-sunk); }
.preview-modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.preview-modal__foot {
  flex-shrink: 0; padding: 9px 14px; border-top: 1px solid var(--bf-border);
  background: var(--bf-surface-soft); font-size: 11.5px; line-height: 1.5; color: var(--bf-text-muted);
}

/* Sender name format editor. */
.fmt-params { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fmt-params__label {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bf-text-light);
}
.fmt-token {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 8px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--bf-border); background: var(--bf-surface-soft); font-family: inherit;
}
.fmt-token:hover { border-color: var(--bf-thread); background: var(--bf-thread-soft); }
.fmt-token code { font-family: var(--font-mono); font-size: 10.5px; color: var(--bf-thread); }
.fmt-token span { font-size: 10px; color: var(--bf-text-muted); }
.fmt-preset {
  padding: 3px 9px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--bf-border); background: var(--bf-surface);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--bf-text-muted);
}
.fmt-preset:hover { border-color: var(--bf-thread); color: var(--bf-ink); }
.fmt-preset.is-on { background: var(--bf-thread); border-color: var(--bf-thread); color: #fff; }


/* ── Mail client ──────────────────────────────────────────────────────────
   Three panes: folders, list, reading. Grid rather than flex, because the middle column must be free
   to scroll independently while the outer height stays fixed — with flex the list grows the page.

   Every colour is a theme token, so the mailbox follows whichever theme is chosen. The one fixed white
   is the message body frame: mail is authored against white and many messages set dark text with no
   background of their own. */
.mail {
  position: relative;
  display: grid;
  grid-template-columns: 208px minmax(300px, 360px) 1fr;

  /* A FIXED VIEWPORT HEIGHT, and flex-shrink:0 to keep it. .bf-main is a scrolling flex column whose
     children keep their natural size, so a calc() height is overridden and the grid grows to fit its
     content — the list then never scrolls and Send falls below the fold. */
  height: 78vh;
  min-height: 540px;
  max-height: 940px;
  flex-shrink: 0;

  border: 1px solid var(--bf-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bf-surface);
  box-shadow: 0 1px 2px rgba(20, 20, 30, .04), 0 8px 24px -12px rgba(20, 20, 30, .10);
}

.mail .mi { flex-shrink: 0; display: block; }

/* Icon button — the one control shape used across the list, the reading bar and dialogs. */
.mail-ibtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--bf-text-muted); font-family: inherit;
  transition: background-color .12s, color .12s;
}
.mail-ibtn:hover:not(:disabled) { background: var(--bf-surface-sunk); color: var(--bf-ink); }
.mail-ibtn:disabled { opacity: .35; cursor: default; }
.mail-ibtn:focus-visible { outline: 2px solid var(--bf-thread); outline-offset: 1px; }
.mail-ibtn--sm { width: 28px; height: 28px; border-radius: 7px; }
.mail-ibtn.is-starred { color: var(--bf-amber); }
.mail-ibtn.is-starred svg { fill: currentColor; }

/* Avatars. Six fixed pairs rather than theme tokens: they identify correspondents, and a sender
   changing colour with the theme would undo the one thing the colour is for. */
.mail-av {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1; user-select: none;
}
.mail-av--sm { width: 24px; height: 24px; font-size: 10px; }
.mail-av--lg { width: 40px; height: 40px; font-size: 14px; }
.mail-av--0 { background: #FDE9D9; color: #9A4B12; }
.mail-av--1 { background: #DDF3F7; color: #0B6B7A; }
.mail-av--2 { background: #DFF3E9; color: #0B6B49; }
.mail-av--3 { background: #EEE8FD; color: #5638C4; }
.mail-av--4 { background: #FCEBDD; color: #8A5A08; }
.mail-av--5 { background: #E8EBF2; color: #3E4A63; }

/* ── Folders ── */
.mail__folders {
  display: flex; flex-direction: column; gap: 14px; min-height: 0;
  padding: 14px 10px 10px;
  background: var(--bf-surface-soft);
  border-right: 1px solid var(--bf-border);
}
.mail__compose {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 14px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--bf-thread); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px -6px var(--bf-thread);
  transition: background-color .12s, transform .12s;
}
.mail__compose:hover { background: var(--bf-thread-dark); }
.mail__compose:active { transform: translateY(1px); }
.mail__compose:focus-visible { outline: 2px solid var(--bf-ink); outline-offset: 2px; }

.mail__folderlist { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.mail__folder {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 8px; cursor: pointer; text-align: left;
  background: transparent; font-family: inherit; font-size: 13px; color: var(--bf-text);
}
.mail__folder .mi { color: var(--bf-text-muted); }
.mail__folder:hover { background: var(--bf-surface-sunk); }
.mail__folder.is-on { background: var(--bf-thread-soft); color: var(--bf-ink); font-weight: 600; }
.mail__folder.is-on .mi { color: var(--bf-thread-dark); }
.mail__folder:focus-visible { outline: 2px solid var(--bf-thread); outline-offset: -2px; }
.mail__folder-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__count {
  flex-shrink: 0; min-width: 20px; padding: 1px 7px; border-radius: 10px;
  background: var(--bf-thread); color: #fff; font-size: 11px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}

.mail__kbd-link {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px;
  border: 0; border-radius: 7px; cursor: pointer; background: transparent;
  font-family: inherit; font-size: 11.5px; color: var(--bf-text-muted); text-align: left;
}
.mail__kbd-link:hover { background: var(--bf-surface-sunk); color: var(--bf-ink); }

/* ── Message list ── */
.mail__list {
  display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
  border-right: 1px solid var(--bf-border);
  background: var(--bf-surface);
}
.mail__listhead {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 14px 10px; border-bottom: 1px solid var(--bf-border); flex-shrink: 0;
}
.mail__listtitle { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mail__listtitle h2 {
  margin: 0; font-size: 16px; font-weight: 700; color: var(--bf-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail__listcount { font-size: 12px; color: var(--bf-text-muted); white-space: nowrap; }
.mail__refresh { margin-left: auto; }
.mail__refresh.is-spinning svg { animation: mail-spin .8s linear infinite; }
@keyframes mail-spin { to { transform: rotate(360deg); } }

.mail__searchbox {
  display: flex; align-items: center; gap: 8px;
  padding: 0 6px 0 11px; height: 36px; border-radius: 9px;
  background: var(--bf-surface-sunk); border: 1px solid transparent; color: var(--bf-text-light);
  transition: border-color .12s, background-color .12s;
}
.mail__searchbox:focus-within { background: var(--bf-surface); border-color: var(--bf-thread); color: var(--bf-text-muted); }
.mail__searchbox input {
  flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--bf-text);
}
.mail__searchbox input::placeholder { color: var(--bf-text-light); }

.mail__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px; }
.mail__chips::-webkit-scrollbar { display: none; }
.mail-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border: 1px solid var(--bf-border); border-radius: 999px; cursor: pointer;
  background: var(--bf-surface); font-family: inherit; font-size: 12px; color: var(--bf-text-muted);
  white-space: nowrap;
}
.mail-chip:hover { border-color: var(--bf-border-strong); color: var(--bf-ink); }
.mail-chip.is-on { background: var(--bf-ink); border-color: var(--bf-ink); color: var(--bf-surface); }
.mail-chip:focus-visible { outline: 2px solid var(--bf-thread); outline-offset: 1px; }
.mail-chip__n { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .8; }

.mail__listerror {
  margin: 10px 14px 0; padding: 8px 11px; border-radius: 8px; flex-shrink: 0;
  background: var(--bf-seal-soft); color: var(--bf-ink); font-size: 12px; line-height: 1.5;
}

/* min-height:0 is what actually permits the scroll. A flex child's default min-height is auto, which
   means "at least as tall as my content" — so overflow-y never engages without it. */
.mail__items { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-bottom: 6px; }

.mail__group {
  position: sticky; top: 0; z-index: 1;
  padding: 10px 16px 5px; background: var(--bf-surface);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bf-text-light);
}

.mail-row {
  position: relative; display: flex; gap: 11px; align-items: flex-start;
  margin: 0 6px; padding: 10px 10px 10px 12px; border-radius: 10px; cursor: pointer;
  outline: none; transition: background-color .1s;
}
.mail-row + .mail-row { margin-top: 1px; }
.mail-row:hover { background: var(--bf-surface-soft); }
.mail-row:focus-visible { box-shadow: inset 0 0 0 2px var(--bf-thread); }
.mail-row.is-on { background: var(--bf-thread-soft); }

/* Unread: a dot at the edge as well as weight. Weight alone is hard to see when half the list is unread. */
.mail-row.is-unread::before {
  content: ""; position: absolute; left: 3px; top: 50%; margin-top: -3.5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--bf-thread);
}
.mail-row__main { flex: 1 1 auto; min-width: 0; }
.mail-row__top { display: flex; align-items: baseline; gap: 8px; }
.mail-row__from {
  flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--bf-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-row__when {
  flex-shrink: 0; font-size: 11.5px; color: var(--bf-text-light); font-variant-numeric: tabular-nums;
}
.mail-row__subject {
  margin-top: 1px; font-size: 13px; color: var(--bf-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-row__preview {
  margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--bf-text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mail-row.is-unread .mail-row__from,
.mail-row.is-unread .mail-row__subject { font-weight: 700; color: var(--bf-ink); }
.mail-row.is-unread .mail-row__when { color: var(--bf-thread-dark); font-weight: 600; }

.mail-row__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.mail-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px;
  background: var(--bf-surface-sunk); color: var(--bf-text-muted); font-size: 10.5px; line-height: 17px;
}
.mail-tag--file { font-family: var(--font-mono); font-weight: 600; background: var(--bf-foil-soft); color: var(--bf-ink); }
.mail-tag--star { color: var(--bf-amber); background: var(--bf-amber-soft); }
.mail-tag--star svg { fill: currentColor; }

/* Quick actions sit over the timestamp on hover, as in Gmail and Outlook. Hidden where there is no
   hover — on touch the same actions are in the reading pane. */
.mail-row__actions {
  position: absolute; top: 6px; right: 6px; display: none; gap: 1px; padding: 2px;
  border-radius: 9px; background: var(--bf-surface); border: 1px solid var(--bf-border);
  box-shadow: 0 2px 8px -2px rgba(20, 20, 30, .14);
}
.mail-row:hover .mail-row__actions,
.mail-row:focus-within .mail-row__actions { display: flex; }
@media (hover: none) { .mail-row:hover .mail-row__actions { display: none; } }

.mail__pager {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 14px; border-top: 1px solid var(--bf-border); flex-shrink: 0;
  font-size: 11.5px; color: var(--bf-text-light);
}

.mail__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  flex: 1 1 auto; padding: 36px 20px; text-align: center; color: var(--bf-text-muted); font-size: 13px;
}
.mail__empty p { margin: 0; }
.mail__empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: 4px;
  background: var(--bf-surface-sunk); color: var(--bf-text-light);
}
.mail__empty--read { margin: auto; }

.mail kbd {
  display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--bf-border-strong); border-bottom-width: 2px;
  background: var(--bf-surface); color: var(--bf-ink);
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; text-align: center;
}

/* ── Reading pane ── */
.mail__read { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--bf-surface); }

.mail__bar {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  min-height: 52px; padding: 8px 12px; border-bottom: 1px solid var(--bf-border);
}
.mail__bar-group { display: flex; gap: 2px; }
.mail__bar-spacer { flex: 1 1 auto; }
.mail__bar-title { margin: 0 0 0 6px; font-size: 15px; font-weight: 700; color: var(--bf-ink); }
.mail__pos { font-size: 12px; color: var(--bf-text-light); font-variant-numeric: tabular-nums; margin-right: 4px; white-space: nowrap; }

/* Back only matters when the panes are stacked; see the narrow layout below. */
.mail__back {
  display: none; align-items: center; gap: 4px; padding: 6px 10px 6px 6px; margin-right: 4px;
  border: 0; border-radius: 8px; cursor: pointer; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--bf-text);
}
.mail__back:hover { background: var(--bf-surface-sunk); }

.mail__head { padding: 16px 22px 14px; border-bottom: 1px solid var(--bf-border-soft); flex-shrink: 0; }
.mail__subject { margin: 0 0 12px; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--bf-ink); word-break: break-word; }

/* The matter file this message is about. The link that makes this mailbox part of the product rather
   than a second Outlook. */
.mail-file {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 0 0 14px; padding: 8px 12px; border-radius: 10px; text-decoration: none;
  border: 1px solid var(--bf-border); background: var(--bf-surface-soft); color: var(--bf-ink);
  font-size: 12.5px; transition: border-color .12s, background-color .12s;
}
.mail-file:hover { border-color: var(--bf-thread); background: var(--bf-thread-soft); }
.mail-file .mi { color: var(--bf-text-muted); }
.mail-file__status {
  padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--bf-thread-soft); color: var(--bf-thread-dark);
}
.mail-file--ok .mail-file__status { background: var(--bf-jade-soft); color: var(--bf-jade); }
.mail-file--warn .mail-file__status { background: var(--bf-amber-soft); color: var(--bf-amber); }
.mail-file--bad .mail-file__status { background: var(--bf-seal-soft); color: var(--bf-seal); }
.mail-file__what { color: var(--bf-text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-file__go { margin-left: auto; font-weight: 600; color: var(--bf-thread-dark); white-space: nowrap; }

.mail__sender { display: flex; align-items: flex-start; gap: 12px; }
.mail__sender-main { flex: 1 1 auto; min-width: 0; }
.mail__sender-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; font-size: 13.5px; color: var(--bf-ink); }
.mail__sender-name span { font-size: 12px; color: var(--bf-text-muted); word-break: break-all; }
.mail__sender-to {
  margin-top: 2px; font-size: 12px; color: var(--bf-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail__sender-when { flex-shrink: 0; font-size: 12px; color: var(--bf-text-light); white-space: nowrap; padding-top: 2px; }

.mail__replybar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mail-pbtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px 6px 11px; border: 1px solid var(--bf-border); border-radius: 999px; cursor: pointer;
  background: var(--bf-surface); font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--bf-text);
  transition: border-color .12s, background-color .12s;
}
.mail-pbtn .mi { color: var(--bf-text-muted); }
.mail-pbtn:hover { border-color: var(--bf-border-strong); background: var(--bf-surface-soft); color: var(--bf-ink); }
.mail-pbtn:focus-visible { outline: 2px solid var(--bf-thread); outline-offset: 1px; }

/* Conversation: collapsed by default, so the message itself keeps the room. */
.mail__thread { flex-shrink: 0; border-bottom: 1px solid var(--bf-border-soft); }
.mail__thread-toggle {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 8px 22px; border: 0; cursor: pointer; background: var(--bf-surface-soft);
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--bf-text-muted); text-align: left;
}
.mail__thread-toggle:hover { color: var(--bf-ink); }
.mail__thread-list { list-style: none; margin: 0; padding: 4px 12px 8px; max-height: 190px; overflow-y: auto; background: var(--bf-surface-soft); }
.mail__thread-item {
  display: grid; grid-template-columns: auto minmax(0, 140px) 1fr auto; align-items: center; gap: 10px;
  width: 100%; padding: 6px 10px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; font-family: inherit; font-size: 12px; color: var(--bf-text); text-align: left;
}
.mail__thread-item:hover:not(:disabled) { background: var(--bf-surface-sunk); }
.mail__thread-item.is-on { background: var(--bf-thread-soft); cursor: default; }
.mail__thread-from { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__thread-preview { color: var(--bf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__thread-item.is-on .mail__thread-preview { color: var(--bf-thread-dark); font-weight: 600; }
.mail__thread-when { color: var(--bf-text-light); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Attachments as cards: type, name and size read at a glance, and the whole card downloads. */
.mail__atts {
  display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0;
  padding: 12px 22px; border-bottom: 1px solid var(--bf-border-soft);
}
/* A card of two buttons: the body previews, the icon downloads. */
.mail-att {
  display: inline-flex; align-items: center; gap: 2px; max-width: 300px;
  padding: 0 4px 0 0; border: 1px solid var(--bf-border); border-radius: 10px;
  background: var(--bf-surface); transition: border-color .12s, background-color .12s;
}
.mail-att:hover, .mail-att.is-on { border-color: var(--bf-thread); background: var(--bf-thread-soft); }
.mail-att__open {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto;
  padding: 7px 6px 7px 7px; border: 0; border-radius: 10px 0 0 10px; cursor: zoom-in;
  background: transparent; font-family: inherit; color: var(--bf-text-muted); text-align: left;
}
.mail-att__open:focus-visible { outline: 2px solid var(--bf-thread); outline-offset: -2px; }
.mail-att__ext {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 7px; background: var(--bf-surface-sunk);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--bf-text-muted);
}
.mail-att__main { display: flex; flex-direction: column; min-width: 0; }
.mail-att__name { font-size: 12.5px; color: var(--bf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-att__size { font-size: 11px; color: var(--bf-text-light); }

.mail__body { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 0; display: flex; flex-direction: column; }
.mail__body iframe { flex: 1 1 auto; width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.mail__body pre {
  margin: 0; padding: 18px 24px; white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; color: var(--bf-text);
}

/* The mailbox and the file panel share this attachment chip (EnforcementFiles.razor). */
.mail__attachment {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 4px 11px; border: 1px solid var(--bf-border); border-radius: 14px;
  font-family: inherit; font-size: 11px; color: var(--bf-text); background: var(--bf-surface-soft);
}
.mail__attachment:hover:not(:disabled) { border-color: var(--bf-thread); background: var(--bf-thread-soft); }
.mail__attachment:disabled { opacity: .6; cursor: default; }

/* ── Composer ── */
.mail__fields { flex-shrink: 0; padding: 0 22px; border-bottom: 1px solid var(--bf-border); }
.mail__field {
  display: flex; align-items: center; gap: 12px; min-height: 42px;
  border-bottom: 1px solid var(--bf-border-soft); font-size: 13px;
}
.mail__field:last-child { border-bottom: 0; }
.mail__field > span:first-child { flex: 0 0 56px; font-size: 12px; color: var(--bf-text-light); }
.mail__field input {
  flex: 1 1 auto; min-width: 0; height: 40px; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 13.5px; color: var(--bf-ink);
}
.mail__field input::placeholder { color: var(--bf-text-light); }
.mail__field-toggle {
  flex-shrink: 0; padding: 3px 8px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; font-family: inherit; font-size: 12px; color: var(--bf-text-muted);
}
.mail__field-toggle:hover { background: var(--bf-surface-sunk); color: var(--bf-ink); }
.mail__field--note { align-items: flex-start; padding: 11px 0; }
.mail__field--note > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--bf-ink); }
.mail__field--note small { flex-basis: 100%; font-size: 11.5px; color: var(--bf-text-muted); }
.mail-pill {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
  background: var(--bf-surface-sunk); font-size: 12.5px; color: var(--bf-ink);
}
.mail-pill--muted { background: transparent; border: 1px dashed var(--bf-border-strong); color: var(--bf-text-muted); }

/* The toolbar wraps rather than scrolls: a hidden formatting button is a button nobody uses. */
.mail__toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px; row-gap: 4px; flex-shrink: 0;
  padding: 6px 18px; border-bottom: 1px solid var(--bf-border-soft); background: var(--bf-surface);
}
.mail-tbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; font-family: inherit; font-size: 13px; color: var(--bf-text-muted);
}
.mail-tbtn:hover { background: var(--bf-surface-sunk); color: var(--bf-ink); }
.mail-tbtn:focus-visible { outline: 2px solid var(--bf-thread); outline-offset: -1px; }

/* flex: 0 0 1px, not width: 1px. A 1px flex item shrinks to zero when the row is tight, which is
   exactly when the toolbar wraps — so the separators vanished when the grouping was most needed. */
.mail__sep {
  flex: 0 0 1px; width: 1px; align-self: stretch; min-height: 18px; margin: 4px 5px;
  background: var(--bf-border);
}
.mail__tool-select {
  height: 28px; padding: 0 6px; border: 1px solid var(--bf-border); border-radius: 6px;
  background: var(--bf-surface); font-family: inherit; font-size: 12px; color: var(--bf-text);
  cursor: pointer; max-width: 124px;
}
/* The swatch is the label; the native colour input sits behind it at full size and zero opacity, which
   keeps the browser's own picker — keyboard accessible for free. */
.mail__tool-colour {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--bf-text);
}
.mail__tool-colour:hover { background: var(--bf-surface-sunk); }
.mail__tool-colour input[type="color"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0;
}
.mail__tool-colour--fill { color: var(--bf-amber); }

.mail__editor {
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
  padding: 18px 22px; font-size: 14px; line-height: 1.65; color: var(--bf-text);
  outline: none;                      /* the pane itself shows focus */
}
.mail__editor:empty::before { content: "Write your message…"; color: var(--bf-text-light); }

/* The composer renders what it produces, so the writer sees what the recipient will get. */
.mail__editor blockquote {
  margin: 8px 0; padding: 2px 0 2px 12px;
  border-left: 2px solid var(--bf-border-strong); color: var(--bf-text-muted);
}
.mail__editor h2 { font-size: 17px; font-weight: 600; margin: 12px 0 6px; }
.mail__editor h3 { font-size: 15px; font-weight: 600; margin: 10px 0 5px; }
.mail__editor pre {
  margin: 8px 0; padding: 9px 11px; border-radius: 6px; background: var(--bf-surface-sunk);
  font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap;
}
.mail__editor hr { border: 0; border-top: 1px solid var(--bf-border); margin: 12px 0; }
.mail__editor ul, .mail__editor ol { padding-left: 22px; margin: 6px 0; }
.mail__editor a { color: var(--bf-thread-dark); }

/* flex-shrink:0 and last in the column, so Send is always on screen however long the message is. */
.mail__composefoot {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 10px 18px; border-top: 1px solid var(--bf-border); background: var(--bf-surface-soft);
  position: relative; z-index: 1;
}
.mail__send { display: inline-flex; align-items: center; gap: 7px; padding-left: 16px; padding-right: 18px; }
.mail__hint { font-size: 11px; color: var(--bf-text-light); white-space: nowrap; }
.mail__sendnote { font-size: 12px; color: var(--bf-seal); }

/* ── Attachment preview ──
   Fixed to the viewport rather than the mail grid: a PDF or a scanned certificate needs the room. */
.mail-preview {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 3vh 3vw;
  background: rgba(20, 20, 30, .45); backdrop-filter: blur(2px);
}
.mail-preview__panel {
  display: flex; flex-direction: column; width: 100%; max-width: 1100px; height: 100%;
  border-radius: 14px; overflow: hidden;
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  box-shadow: 0 24px 60px -20px rgba(20, 20, 30, .45);
}
.mail-preview__head {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--bf-border);
}
.mail-preview__title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mail-preview__title h3 {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--bf-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-preview__title span { font-size: 11.5px; color: var(--bf-text-light); }
.mail-preview__fwd svg { transform: rotate(180deg); }

.mail-preview__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--bf-surface-sunk); }
.mail-preview__frame { flex: 1 1 auto; width: 100%; height: 100%; border: 0; background: #fff; }
.mail-preview__image {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  /* A light checkerboard, so a transparent PNG does not vanish against the panel. */
  background: repeating-conic-gradient(var(--bf-surface-sunk) 0% 25%, var(--bf-surface) 0% 50%) 50% / 20px 20px;
}
.mail-preview__image img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 4px 16px rgba(20,20,30,.15); }
.mail-preview__text {
  flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; padding: 18px 22px;
  background: var(--bf-surface); white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--bf-text);
}
.mail-preview__email { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--bf-surface); }
.mail-preview__emailhead { flex-shrink: 0; padding: 16px 22px 14px; border-bottom: 1px solid var(--bf-border-soft); }
.mail-preview__emailhead h4 { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--bf-ink); }
.mail-preview__email iframe { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
.mail-preview__email pre {
  flex: 1 1 auto; overflow: auto; margin: 0; padding: 18px 22px; white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
}
.mail-preview .mail__empty { background: var(--bf-surface); }

@media (max-width: 900px) {
  .mail-preview { padding: 0; }
  .mail-preview__panel { border-radius: 0; border: 0; }
  .mail-preview__head .mail-pbtn { padding: 6px 10px; }
  .mail-preview__head .mail__pos { display: none; }
}

/* ── Shortcut sheet ── */
.mail__overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(20, 20, 30, .28); backdrop-filter: blur(2px);
}
.mail__shortcuts {
  width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto;
  padding: 18px 20px 20px; border-radius: 14px;
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  box-shadow: 0 20px 48px -16px rgba(20, 20, 30, .35);
}
.mail__shortcuts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mail__shortcuts-head h3 { margin: 0; font-size: 15px; color: var(--bf-ink); }
.mail__shortcuts dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; align-items: center; }
.mail__shortcuts dt { display: flex; gap: 4px; justify-content: flex-end; }
.mail__shortcuts dd { margin: 0; font-size: 13px; color: var(--bf-text); }

/* ── Narrower screens ──
   Below 1200px the folder rail becomes icons only. Below 900px only one pane shows at a time — the list,
   or the message with a Back button — which is the compromise every mail client makes on a phone. */
@media (max-width: 1200px) {
  .mail { grid-template-columns: 64px minmax(280px, 340px) 1fr; }
  .mail__folders { align-items: center; padding: 12px 8px; }
  .mail__compose { width: 44px; height: 44px; padding: 0; border-radius: 12px; }
  .mail__compose span, .mail__folder-name, .mail__kbd-link span { display: none; }
  .mail__folder { position: relative; justify-content: center; width: 44px; height: 40px; padding: 0; }
  .mail__count { position: absolute; top: 2px; right: 0; min-width: 16px; padding: 0 4px; font-size: 9.5px; }
  .mail__kbd-link { justify-content: center; width: 44px; height: 36px; padding: 0; }
}

@media (max-width: 900px) {
  .mail { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: 82vh; min-height: 480px; }
  .mail__folders {
    flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px;
    border-right: 0; border-bottom: 1px solid var(--bf-border); overflow-x: auto;
  }
  .mail__compose { flex-shrink: 0; width: 40px; height: 36px; border-radius: 10px; }
  .mail__folderlist { flex-direction: row; flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; gap: 4px; }
  .mail__folder { flex-shrink: 0; width: auto; height: 36px; padding: 0 12px; gap: 6px; }
  .mail__folder-name { display: inline; }
  .mail__count { position: static; }
  .mail__kbd-link { display: none; }
  .mail__list { border-right: 0; }

  .mail__read { display: none; }
  .mail.is-reading .mail__folders,
  .mail.is-reading .mail__list { display: none; }
  .mail.is-reading { grid-template-rows: minmax(0, 1fr); }
  .mail.is-reading .mail__read { display: flex; }
  .mail__back { display: inline-flex; }
  .mail__hint, .mail__pos { display: none; }
  .mail__head, .mail__atts { padding-left: 16px; padding-right: 16px; }
  .mail__fields { padding: 0 16px; }
  .mail__sender { flex-wrap: wrap; }
  .mail__sender-when { flex-basis: 100%; padding: 0 0 0 52px; }
}

/* Files and correspondence. */
.file-number { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; }

.file-msg {
  margin-bottom: 14px; padding: 12px 14px; border-radius: 9px;
  border: 1px solid var(--bf-border); background: var(--bf-surface);
}
/* Direction shown by the edge rather than only by a label — a file is scanned, not read word by word. */
.file-msg.is-out { border-left: 3px solid var(--bf-thread); }
.file-msg.is-in  { border-left: 3px solid var(--bf-jade); background: var(--bf-surface-soft); }

.file-msg__head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.file-msg__dir { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bf-text-muted); }
.file-msg__atts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* Collapsed by default: a file with twenty messages is unreadable if every body is expanded. */
.file-msg__body { margin-top: 8px; }
.file-msg__body summary { cursor: pointer; }
.file-msg__body iframe { width: 100%; height: 320px; border: 1px solid var(--bf-border); border-radius: 7px; background: #fff; margin-top: 8px; }
.file-msg__body pre {
  margin: 8px 0 0; padding: 11px 13px; border-radius: 7px; background: var(--bf-surface-sunk);
  white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: 11.5px;
}

.modal__close {
  flex-shrink: 0; align-self: flex-start;
  width: 28px; height: 28px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--bf-text-muted); font-size: 19px; line-height: 1;
}
.modal__close:hover { background: var(--bf-surface-soft); color: var(--bf-ink); }

/* Used by the mailbox and the file panel; it was referenced in three places and never defined,
   so those warnings rendered as unstyled text. */
.alert-warning {
  padding: 11px 14px; border-radius: 9px; font-size: 12.5px; line-height: 1.55;
  background: var(--bf-amber-soft); border: 1px solid var(--bf-amber); color: var(--bf-ink);
}

/* Status pill on the enforcement list.
   Used on every row of that page and never defined, so each status rendered as bare text with no
   visual weight at all — which on a table scanned for status is most of what the column is for. */
.badge-status {
  display: inline-block; padding: 2px 9px; border-radius: 11px;
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  background: var(--bf-surface-soft); border: 1px solid var(--bf-border); color: var(--bf-text);
}

/* Actions must not wrap.
   Three small buttons in a narrow column broke onto a second line and doubled the row height — seen
   in the flag preview. */
.bf-table td.actions-cell { white-space: nowrap; }
.bf-table td.actions-cell .btn-xs { margin-right: 3px; }

/* The flag itself: outline when unflagged, filled and accented when flagged, so the state reads at a
   glance down a column of ninety rows rather than needing the title attribute. */
.btn-xs.is-flag { min-width: 26px; }
.btn-xs.is-flag.is-on {
  background: var(--bf-thread); border-color: var(--bf-thread); color: #fff;
}


/* Group structure in the company list. The indent is what makes a hierarchy readable — a badge
   alone still reads as a flat list. */

.tree-branch { color: var(--bf-text-light); margin-right: 4px; font-size: 11px; }

/* The group disclosure control on the company master. */
.tree-toggle {
  border: 0; background: transparent; cursor: pointer; padding: 0 5px 0 0;
  font-size: 11px; color: var(--bf-text-muted); line-height: 1;
}
.tree-toggle:hover { color: var(--bf-ink); }

/* The indent is what makes a hierarchy legible; a badge alone still reads as a flat list. */



/* ── Company tree rows ────────────────────────────────────────────────────
   The indent applies to the WHOLE row, avatar included. Indenting only the text leaves a child's
   avatar in the parent's column, which reads as a misaligned row rather than a nested one. */
.co-row { display: flex; align-items: center; gap: 9px; min-width: 0; }

/* A fixed gutter whether or not the row has a chevron, so every name sits on the same x and the
   column still scans as a column. */
.co-row__gutter {
  flex: 0 0 16px; display: inline-flex; align-items: center; justify-content: center;
}

.co-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--bf-text-light); cursor: pointer;
  transition: transform .15s ease, color .15s ease, background .15s ease;
}
.co-chevron:hover { background: var(--bf-surface-soft); color: var(--bf-ink); }
.co-chevron.is-open { transform: rotate(90deg); color: var(--bf-text); }

/* The child indent, plus a guide line that carries the eye up to the parent. Once the line is there
   the "under <parent>" badge is noise — the position already says it. */
.co-row--child { padding-left: 26px; position: relative; }
.co-row--child::before {
  content: ""; position: absolute; left: 11px; top: -50%; bottom: 50%;
  width: 1px; background: var(--bf-border);
}
.co-row--child::after {
  content: ""; position: absolute; left: 11px; top: 50%;
  width: 9px; height: 1px; background: var(--bf-border);
}

.co-row__text { min-width: 0; }
.co-row__name {
  display: flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 13px; color: var(--bf-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-row__meta {
  font-size: 11px; color: var(--bf-text-muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* A count rather than a "parent" label: the chevron already says it is a parent. */
.co-count {
  flex-shrink: 0; min-width: 17px; padding: 1px 6px; border-radius: 9px;
  background: var(--bf-surface-sunk); border: 1px solid var(--bf-border);
  font-size: 10.5px; font-weight: 700; color: var(--bf-text-muted); text-align: center;
}

/* Amber, because it is a restriction rather than a status. */
.co-private {
  flex-shrink: 0; padding: 1px 7px; border-radius: 9px;
  background: var(--bf-amber-soft); border: 1px solid var(--bf-amber);
  font-size: 10px; font-weight: 600; color: var(--bf-ink); letter-spacing: .02em;
}

/* COLUMN HIDING REVERSED — the results grid now SCROLLS instead.
   Category and Currency used to drop below 1600px, and Country and Match% below 1366px, to keep
   the table inside its container and avoid a sideways scrollbar. The reasoning was sound but the
   trade was the wrong way round: on a 1366px laptop — the most common resolution — four of the
   thirteen columns simply were not there, and nothing on screen said so. A column you can scroll
   to is available; a column that has been removed is not.
   The table now carries a real minimum width (see .results-table) so it overflows and the wrapper
   scrolls, which is what .table-wrapper was already set up to do. */

/* Country and Match% used to drop below 1366px for the same reason, and are kept for the same
   reason they are now kept above: Match% in particular is one of the figures that decides whether
   a listing is worth a notice, and removing it to save 56px was a poor bargain. */

@media (max-width: 1440px) {
  /* The sidebar narrows before the content has to. 244px of navigation on a 1366 screen is 18% of
     the width spent on something read once per visit. */
  :root { --sidebar-width: 208px; }
}

/* The modal footer was never defined, so its buttons sat flush left against the body with no
   separation — which is why the dialog looked unfinished at the bottom. Actions go right, primary
   last: that is where a confirm button is looked for, and putting Cancel there instead is how people
   click the wrong one. */
.modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 13px var(--pad-card);
  border-top: 1px solid var(--bf-border);
  background: var(--bf-surface-soft);
  border-radius: 0 0 12px 12px;
}
.modal__foot .spacer { margin-right: auto; }

/* A long URL in a dialog subtitle should truncate, not wrap to a third line and push the fields
   down. The full value stays in the title attribute. */
.modal__head .modal__sub {
  display: block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}


/* Prompt inspection. */
.prompt-note {
  margin: 0 var(--pad-card) 14px; padding: 11px 13px; border-radius: 8px;
  background: var(--bf-thread-soft); border: 1px solid var(--bf-thread-mid);
  font-size: 12.5px; line-height: 1.6; color: var(--bf-ink);
}
.prompt-block { padding: 0 var(--pad-card) var(--pad-card); }
.prompt-block__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prompt-block__meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.prompt-text {
  margin: 8px 0 0; padding: 13px 15px; border-radius: 9px;
  background: var(--bf-ink); color: #E8E8E8;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.62;
  white-space: pre-wrap; word-break: break-word;
  max-height: 46vh; overflow-y: auto;
}

/* Branded loader.
   The shield pulses and lifts rather than spinning. A spinning logo reads as a broken image or a
   novelty; a steady breathing motion reads as work in progress, and it keeps the mark legible
   throughout instead of blurring it. Deliberately calm — this appears on every slow page, and an
   energetic animation becomes irritating by the tenth time. */
.bl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.bl--inline { flex-direction: row; gap: 10px; text-align: left; }

.bl__mark img { display: block; width: 100%; height: auto; animation: bl-breathe 1.5s ease-in-out infinite; }

.bl--page  { padding: 8vh 20px; }
.bl--page  .bl__mark { width: 62px; }
.bl--card  { padding: 34px 20px; }
.bl--card  .bl__mark { width: 40px; }
/* 26px, not 20. At 20 the BF inside the shield renders as a smudge — checked, not assumed — and an
   unreadable logo is worse branding than no logo. This is the smallest size at which the mark is still
   itself; below it, use the plain spinner. */
.bl--small { padding: 0; }
.bl--small .bl__mark { width: 26px; }

.bl__msg    { font-size: 13px; font-weight: 600; color: var(--bf-ink); }
.bl__detail { font-size: 11.5px; color: var(--bf-text-muted); max-width: 34ch; }
.bl--small .bl__msg { font-size: 12px; font-weight: 500; }

@keyframes bl-breathe {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.09); opacity: 1;   }
}

/* Motion is a preference, not a decision the interface gets to make. Without this the animation runs
   for people who have asked their system for less of it, which for some is a genuine problem rather
   than a taste. The mark still fades so the loader remains visibly active. */
@media (prefers-reduced-motion: reduce) {
  .bl__mark img { animation: bl-fade 2s ease-in-out infinite; }
  @keyframes bl-fade { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
}

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

/* Provider connectivity tests. */
.api-tests { display: flex; flex-direction: column; gap: 10px; padding: 4px var(--pad-card) var(--pad-card); }
.api-test { border: 1px solid var(--bf-border); border-radius: 9px; padding: 11px 13px; }
.api-test.is-ok  { border-color: var(--bf-jade); background: var(--bf-jade-soft); }
.api-test.is-bad { border-color: var(--bf-seal); background: var(--bf-seal-soft); }
.api-test__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.api-test__head .text-muted { margin-left: 10px; font-family: var(--font-mono); font-size: 11px; word-break: break-all; }
.api-test__actions { display: flex; gap: 6px; flex-shrink: 0; }
.api-test__result {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(0,0,0,.07); font-size: 12.5px;
}

/* Schema health. Broken rows are meant to be findable at a glance, so the marks are large and the
   failing rows are tinted rather than relying on a small icon. */
.schema-summary { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px var(--pad-card) 4px; }
.schema-stat {
  flex: 1; min-width: 130px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--bf-border); background: var(--bf-surface-soft);
}
.schema-stat.bad { border-color: var(--bf-seal); background: #FDECEC; }
.schema-stat__n { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--bf-ink); }
.schema-stat.bad .schema-stat__n { color: var(--bf-seal); }
.schema-stat__l { font-size: 10.5px; color: var(--bf-text-muted); }

.schema-mark { text-align: center; }
.schema-tick { color: var(--bf-jade); font-size: 15px; font-weight: 700; }
.schema-cross { color: var(--bf-seal); font-size: 15px; font-weight: 700; }
tr.schema-bad { background: #FDECEC; }
tr.schema-bad td { border-color: #F5C6C6; }
.schema-missing { font-family: var(--font-mono); font-size: 11px; color: var(--bf-seal); word-break: break-word; }

/* Contained page failure. Deliberately calm: the point is that the rest of the application is fine,
   and an alarming full-page error suggests otherwise. */
.page-error {
  max-width: 560px; margin: 8vh auto; padding: 28px 30px; text-align: center;
  background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 14px;
}
.page-error__icon { font-size: 30px; color: var(--bf-seal); }
.page-error__title { margin: 10px 0 6px; font-size: 18px; }
.page-error__lead { margin: 0 0 16px; font-size: 13px; color: var(--bf-text-muted); }
.page-error__detail {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 11px 13px; margin-bottom: 16px; border-radius: 8px;
  background: var(--bf-surface-sunk); font-size: 12px; word-break: break-word;
}
.page-error__detail strong { font-family: var(--font-mono); font-size: 11px; color: var(--bf-seal); }
.page-error__actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.page-error__hint { margin: 14px 0 0; font-size: 11.5px; color: var(--bf-text-light); }

/* Settings scope. The distinction the panel was missing: one company, or all of them.
   Deliberately loud on the global side — the cost of over-signalling is mild annoyance, and the cost
   of under-signalling is changing every client by accident. */
.console-tabs--scoped { display: flex; gap: 26px; align-items: flex-end; flex-wrap: wrap; }
.scope-group { display: flex; align-items: flex-end; gap: 4px; position: relative; padding-top: 16px; }
.scope-group__label {
  position: absolute; top: 0; left: 2px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--bf-text-light);
}
.scope-group--global { padding-left: 20px; border-left: 1px solid var(--bf-border); }
.scope-group--global .scope-group__label { left: 22px; color: var(--bf-seal); }

.scope-banner {
  display: flex; align-items: flex-start; gap: 11px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 9px; margin-bottom: var(--gap-section);
  font-size: 12.5px; line-height: 1.6;
}
.scope-banner__tag {
  flex-shrink: 0; padding: 2px 9px; border-radius: 20px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.scope-banner--company { background: var(--bf-surface-soft); border: 1px solid var(--bf-border); color: var(--bf-text-muted); }
.scope-banner--company .scope-banner__tag { background: var(--bf-thread-soft); color: var(--bf-thread); }
.scope-banner--global { background: #FDECEC; border: 1px solid #F5C6C6; color: #7A2222; }
.scope-banner--global .scope-banner__tag { background: var(--bf-seal); color: #fff; }

/* Repeated on the panel itself: a banner at the top of a scrolling page is out of sight by the time
   someone reaches the button. */
.scope-chip {
  margin-left: 8px; padding: 2px 8px; border-radius: 20px; vertical-align: middle;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--bf-seal); color: #fff;
}
.scope-chip--company { background: var(--bf-thread-soft); color: var(--bf-thread); }

/* Settings console. One company managed in one panel, rather than across four pages. */
.console-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--gap-section);
  border-bottom: 1px solid var(--bf-border); padding-bottom: 0;
}
.console-tabs button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--bf-text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s ease, border-color .12s ease;
}
.console-tabs button:hover { color: var(--bf-ink); }
.console-tabs button.is-on { color: var(--bf-thread); font-weight: 650; border-bottom-color: var(--bf-thread); }

/* ── Settings layout ──────────────────────────────────────────────────────
   A sidebar grouped by scope, and the section on the right — the layout every settings screen people
   already know uses. The two rows of floating-label tabs it replaces read as one crowded bar. */
.settings-shell {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: 28px; align-items: start;
}
.settings-nav {
  position: sticky; top: 16px;
  display: flex; flex-direction: column; gap: 18px;
  padding: 14px 10px; border: 1px solid var(--bf-border); border-radius: 14px;
  background: var(--bf-surface);
  max-height: calc(100vh - 32px); overflow-y: auto;
}
.settings-nav__group { display: flex; flex-direction: column; gap: 2px; }
.settings-nav__group + .settings-nav__group { padding-top: 16px; border-top: 1px solid var(--bf-border-soft); }
.settings-nav__heading {
  display: flex; align-items: center; gap: 7px; padding: 0 10px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bf-text-light);
}
.settings-nav__group--global .settings-nav__heading { color: var(--bf-amber); }

.settings-nav__item {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 9px; cursor: pointer; text-align: left;
  background: transparent; font-family: inherit; color: var(--bf-text); text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.settings-nav__item:hover { background: var(--bf-surface-soft); color: var(--bf-ink); }
.settings-nav__item:focus-visible { outline: 2px solid var(--bf-thread); outline-offset: -2px; }
.settings-nav__item.is-on { background: var(--bf-thread-soft); color: var(--bf-ink); }

.settings-nav__icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bf-surface-sunk); color: var(--bf-text-muted);
  transition: background-color .12s ease, color .12s ease;
}
.settings-nav__item.is-on .settings-nav__icon { background: var(--bf-thread); color: #fff; }
.settings-nav__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; padding-top: 1px; }
.settings-nav__label { font-size: 13px; font-weight: 600; line-height: 1.3; }
.settings-nav__desc { font-size: 11.5px; line-height: 1.4; color: var(--bf-text-muted); }
.settings-nav__item.is-on .settings-nav__label { color: var(--bf-ink); }

/* Pages that leave Settings: lighter, one line, and an arrow that says it goes somewhere. */
.settings-nav__item--link { align-items: center; padding: 6px 10px; }
.settings-nav__item--link .settings-nav__icon { width: 26px; height: 26px; background: transparent; }
.settings-nav__item--link .settings-nav__label { font-weight: 500; }
.settings-nav__go { flex-shrink: 0; color: var(--bf-text-light); opacity: 0; transition: opacity .12s ease; }
.settings-nav__item--link:hover .settings-nav__go { opacity: 1; }

.settings-main { min-width: 0; }
.settings-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--bf-border);
}
.settings-head__text h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--bf-ink); }
.settings-head__text p { margin: 0; font-size: 13px; color: var(--bf-text-muted); }

/* The scope, in one calm pill. Amber for every-company rather than danger red: it is a fact to
   notice, not an error. */
.scope-pill {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.scope-pill--company { background: var(--bf-thread-soft); color: var(--bf-thread-dark); border: 1px solid var(--bf-thread-mid); }
.scope-pill--global { background: var(--bf-amber-soft); color: var(--bf-amber); border: 1px solid color-mix(in srgb, var(--bf-amber) 35%, transparent); }

@media (max-width: 1100px) {
  .settings-shell { grid-template-columns: 1fr; gap: 16px; }
  .settings-nav {
    position: static; max-height: none; flex-direction: row; gap: 6px;
    overflow-x: auto; padding: 8px; scrollbar-width: thin;
  }
  .settings-nav__group { flex-direction: row; gap: 4px; flex-shrink: 0; }
  .settings-nav__group + .settings-nav__group { padding: 0 0 0 8px; border-top: 0; border-left: 1px solid var(--bf-border-soft); }
  .settings-nav__heading { display: none; }
  .settings-nav__item { width: auto; align-items: center; padding: 6px 12px 6px 6px; white-space: nowrap; }
  .settings-nav__desc, .settings-nav__go { display: none; }
  .settings-nav__icon { width: 26px; height: 26px; }
}

.console-split {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--gap-section); align-items: start;
}
@media (max-width: 1100px) { .console-split { grid-template-columns: minmax(0, 1fr); } }
.console-list { padding: 0; }
.console-list .tmpl-items { max-height: 68vh; }
.console-detail { min-width: 0; }
.console-section {
  margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--bf-border);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bf-text-light);
}
.console-section:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }
.console-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* Platform settings: the other admin pages gathered, so they can be found. */
.settings-note {
  padding: 12px var(--pad-card); margin: 0; font-size: 12px; line-height: 1.65;
  color: var(--bf-text-muted); background: var(--bf-surface-soft);
  border-top: 1px solid var(--bf-border); border-bottom: 1px solid var(--bf-border);
}
.settings-links {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px; padding: var(--pad-card);
}
.settings-link {
  display: flex; align-items: flex-start; gap: 11px; text-align: left; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--bf-border); border-radius: 10px;
  background: var(--bf-surface); font-family: inherit;
  transition: border-color .12s ease, background .12s ease;
}
.settings-link:hover { border-color: var(--bf-thread); background: var(--bf-surface-soft); }
.settings-link__icon { display: inline-flex; color: var(--bf-text-muted); line-height: 1.3; }
.settings-link__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.settings-link__name { font-size: 13px; font-weight: 650; color: var(--bf-ink); }
.settings-link__desc { font-size: 11px; line-height: 1.5; color: var(--bf-text-muted); }
.settings-link__go { color: var(--bf-text-light); }

.alias-chip {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 5px;
  background: var(--bf-thread-soft); color: var(--bf-thread);
}
.alias-chip.is-derived { background: var(--bf-surface-sunk); color: var(--bf-text-muted); font-weight: 500; }
.identity-cell { font-family: var(--font-mono); font-size: 10.5px; color: var(--bf-text-muted); word-break: break-all; }
tr.is-editing { background: var(--bf-thread-soft); }
.form-input-sm { padding: 5px 8px; font-size: 12px; }

/* Outbound identity preview: an alias is abstract until you see the address it produces. */
.identity-preview {
  border: 1px solid var(--bf-border); border-radius: 8px; overflow: hidden; margin: 4px 0 12px;
}
.identity-preview__row {
  display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: baseline;
  padding: 8px 12px; border-bottom: 1px solid var(--bf-border-soft);
}
.identity-preview__row:last-child { border-bottom: 0; }
.identity-preview__k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--bf-text-light); }
.identity-preview__v { font-family: var(--font-mono); font-size: 11.5px; color: var(--bf-ink); word-break: break-all; }

.notice-ref {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 10px; border-radius: 8px;
  background: var(--bf-surface-soft); border-left: 3px solid var(--bf-thread);
}
.notice-ref__k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--bf-text-light); }
.notice-ref__v { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--bf-thread); }

/* Company allowance summary in the detail panel. */
.company-allowance {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px; border-radius: 8px;
  background: var(--bf-surface-soft); border: 1px solid var(--bf-border);
}
.company-allowance .quota { min-width: 160px; }
.token-badge.is-low { background: var(--bf-seal-soft); color: var(--bf-seal); }

/* Per-user quota display. */
.quota-cell { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
.quota-line { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 6px; font-size: 10px; }
.quota-line__k { color: var(--bf-text-light); text-transform: uppercase; letter-spacing: .04em; }
.quota-line__v { font-family: var(--font-mono); font-size: 9.5px; color: var(--bf-text-muted); white-space: nowrap; }
.quota-bonus { font-size: 9.5px; color: var(--bf-jade); font-weight: 600; }

.quota-detail { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 12px; }
.quota-detail__row { display: grid; grid-template-columns: 96px 1fr; gap: 8px 10px; align-items: center; }
.quota-detail__k { font-size: 11.5px; font-weight: 600; color: var(--bf-text-muted); }
.quota-detail__v { grid-column: 2; font-size: 11.5px; color: var(--bf-text-muted); }
.quota-detail .quota__track { height: 9px; }

.quota-existing {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 10px 12px; border-radius: 8px; background: var(--bf-surface-soft);
  border-left: 3px solid var(--bf-jade); font-size: 12px; margin-top: 10px;
}

/* Diagnostics: environment name is the headline because it decides which config files load. */
.diag-hero { padding: 18px 20px; margin-bottom: 16px; border-left: 4px solid var(--bf-thread); }
.diag-hero.is-dev  { border-left-color: var(--bf-amber); }
.diag-hero.is-prod { border-left-color: var(--bf-jade); }
.diag-hero__l { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bf-text-light); }
.diag-hero__v { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.diag-hero p { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--bf-text-muted); max-width: 90ch; }

.bulk-password {
  font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: 5px;
  background: var(--bf-surface-sunk); color: var(--bf-ink); user-select: all;
}
.text-warning { color: #8A5300; }

/* Mark monitoring. */
.monitor-card { padding: 0; margin-bottom: var(--gap-section); }
.monitor-card.is-paused { opacity: .72; }
.monitor-card__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px var(--pad-card) 10px;
}
.monitor-card__name { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.monitor-card__meta { margin: 3px 0 0; font-size: 11.5px; color: var(--bf-text-light); }
.monitor-card__actions { display: flex; gap: 5px; flex-wrap: wrap; }

/* ── Collapsible mark card ────────────────────────────────────────────────
   The identity block takes the free space so the actions stay right-aligned and
   the chevron stays hard against the left edge, whatever the mark is called. */
.monitor-card__ident { flex: 1 1 260px; min-width: 0; }

.monitor-card__toggle {
  flex: 0 0 auto; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; cursor: pointer; color: var(--bf-text-muted);
  transition: background .12s, color .12s, border-color .12s;
}
.monitor-card__toggle:hover { background: var(--bf-surface-sunk); color: var(--bf-ink); }
.monitor-card__toggle:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--bf-primary); }

/* Drawn from two borders rather than set as a glyph. ▸ and ▾ are the SMALL
   triangle codepoints and render as near-invisible specks at this size, and the
   larger ► ▼ pair is not reliably present in every UI font. A rotated corner is
   the same mark at any size, in any font, and it can animate between states. */
.monitor-card__chev {
  width: 6px; height: 6px; margin-left: -2px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(-45deg);            /* points right — collapsed */
  transition: transform .15s ease;
}
.monitor-card__toggle[aria-expanded="true"] .monitor-card__chev {
  transform: rotate(45deg);             /* points down — expanded */
  margin-left: 0; margin-top: -3px;
}
@media (prefers-reduced-motion: reduce) { .monitor-card__chev { transition: none; } }

/* Collapsed, the head is the whole card, so its bottom padding has to stand in
   for the padding the body would have provided. */
.monitor-card.is-collapsed .monitor-card__head { padding-bottom: 14px; }

/* The one-line digest shown only while collapsed. Figures are bold, their labels
   are not — the number is what is being scanned for. */
.monitor-card__digest {
  margin: 7px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 11.5px; color: var(--bf-text-muted);
}
.monitor-card__digest strong { color: var(--bf-ink); font-weight: 650; }
.monitor-card__digest .is-alert strong { color: var(--bf-amber); }
.monitor-card__summary {
  margin: 0; padding: 8px var(--pad-card); font-size: 12px; color: var(--bf-text-muted);
  background: var(--bf-surface-soft); border-top: 1px solid var(--bf-border);
}
.monitor-stats {
  display: flex; gap: 26px; flex-wrap: wrap;
  padding: 10px var(--pad-card) 14px; border-bottom: 1px solid var(--bf-border);
}
.monitor-stat { display: flex; flex-direction: column; }
.monitor-stat__n { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--bf-ink); }
.monitor-stat__l { font-size: 10px; color: var(--bf-text-light); text-transform: uppercase; letter-spacing: .05em; }
.monitor-tabs { margin: 12px var(--pad-card); }
.monitor-url { font-size: 11.5px; word-break: break-all; color: var(--bf-thread); }
tr.is-gone { opacity: .55; }
tr.is-gone .monitor-url { text-decoration: line-through; }
.seen-count {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; background: var(--bf-surface-sunk); color: var(--bf-text-muted);
}
/* A listing found on four or more consecutive runs has outlasted whatever was done about it. */
.seen-count.is-persistent { background: var(--bf-seal-soft); color: var(--bf-seal); }

/* Search mode: a single row in the default state so the marks box stays the focus. */
.mode-card { padding: 0; }
.mode-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px var(--pad-card);
}
.mode-bar__text { flex: 1; min-width: 200px; font-size: 12px; color: var(--bf-text-muted); }
.mode-bar__text strong { color: var(--bf-ink); font-family: var(--font-mono); font-size: 11.5px; }
.mode-custom { border-top: 1px solid var(--bf-border); }

/* Bulk search input: parsed marks shown back as chips, so what will actually run is visible
   before the button rather than inferred from a comma-separated string. */
.mark-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; max-height: 140px; overflow-y: auto; }
.mark-chip {
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
  background: var(--bf-thread-soft); color: var(--bf-ink);
}
.mode-note { margin: 0 0 8px; font-size: 12.5px; color: var(--bf-text-muted); }
.mode-list { margin: 0 0 10px; padding-left: 20px; font-size: 12.5px; line-height: 1.7; color: var(--bf-text-muted); }
.mode-list strong { color: var(--bf-ink); }

/* Bulk search: the cost arithmetic shown as arithmetic, because marks x per-search is the one
   thing about this feature that can surprise someone after the fact. */
.bulk-estimate {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 8px;
  border: 1px solid var(--bf-border); border-radius: 10px; background: var(--bf-surface-soft);
}
.bulk-estimate > div { display: flex; flex-direction: column; }
.bulk-estimate__n { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--bf-ink); }
.bulk-estimate__total { color: var(--bf-thread); }
.bulk-estimate__l { font-size: 10.5px; color: var(--bf-text-light); text-transform: uppercase; letter-spacing: .05em; }
.bulk-estimate__x { font-size: 16px; color: var(--bf-text-light); }

.bulk-progress { display: flex; flex-direction: column; gap: 8px; }
.bulk-progress__bar { height: 8px; border-radius: 99px; background: var(--bf-surface-sunk); overflow: hidden; }
.bulk-progress__fill { height: 100%; border-radius: 99px; background: var(--bf-holo); transition: width .3s ease; }
.bulk-progress__text { font-size: 12.5px; color: var(--bf-text-muted); }

/* Read-only configuration display. Key/value rather than form controls, so it reads as a
   report of what is in force rather than something editable. */
.cfg-grid { padding: 4px var(--pad-card) var(--pad-card); display: flex; flex-direction: column; }
.cfg {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--bf-border-soft);
}
.cfg:last-child { border-bottom: 0; }
.cfg__k { font-family: var(--font-mono); font-size: 11px; color: var(--bf-text-muted); }
.cfg__v { font-size: 12.5px; font-weight: 600; text-align: right; word-break: break-all; }

.config-note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 16px; border-left: 3px solid var(--bf-thread);
  font-size: 12.5px; line-height: 1.6;
}
.config-note__icon { font-size: 16px; }
.config-note strong { display: block; margin-bottom: 2px; }

.config-problems {
  padding: 14px 16px; margin-bottom: 16px;
  border-left: 3px solid var(--bf-seal); background: #FDECEC; color: #8A2020;
  font-size: 12.5px; line-height: 1.6;
}
.config-problems ul { margin: 6px 0 0; padding-left: 20px; }

.sample-config { padding: 14px 16px; margin-top: 16px; }
.sample-config summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.sample-config pre {
  margin: 12px 0 8px; padding: 12px 14px; border-radius: 8px; overflow-x: auto;
  background: var(--bf-ink); color: #E8ECF6; font-size: 11.5px; line-height: 1.55;
}

/* Abuse-address verification. */
.verify-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 20px; white-space: nowrap;
}
.verify-badge.ok      { background: #E9F7F1; color: #0B6B4B; }
.verify-badge.warn    { background: #FFF4E5; color: #8A5300; }
.verify-badge.bad     { background: #FDECEC; color: #8A2020; }
.verify-badge.pending { background: var(--bf-surface-sunk); color: var(--bf-text-light); }
.verify-actions { display: flex; gap: 4px; margin-top: 4px; }
.verify-target {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  padding: 10px 12px; border-radius: 8px; background: var(--bf-surface-soft);
  border: 1px solid var(--bf-border); margin-bottom: 12px; word-break: break-all;
}
.verify-block {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; margin-top: 8px; border-radius: 8px;
  background: #FFF4E5; color: #8A5300; font-size: 12px; line-height: 1.5;
  border-left: 3px solid var(--bf-amber);
}

/* ── PLATFORM ANALYTICS (Super Admin) ─────────────────────────────
   Metrics are grouped by the question they answer — estate, activity, cost — rather than
   presented as one undifferentiated row of numbers, which reads as noise past about six tiles. */
.metric-band {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-section); margin-bottom: var(--gap-section);
}
@media (max-width: 1100px) { .metric-band { grid-template-columns: minmax(0, 1fr); } }

.metric-group {
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  border-radius: var(--radius-card, 12px); padding: 14px 16px;
}
.metric-group__title {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bf-text-light); margin-bottom: 10px;
}
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
.metric { display: flex; flex-direction: column; min-width: 0; }
.metric__v {
  font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.1;
  color: var(--bf-ink); letter-spacing: -.02em;
}
.metric__v small { font-size: 12px; font-weight: 500; color: var(--bf-text-light); }
.metric__l { font-size: 11px; color: var(--bf-text-muted); margin-top: 2px; }
.metric--alert .metric__v { color: var(--bf-seal); }

/* Attention strip: only rendered when there is something to act on. */
.health-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: var(--gap-section);
  border-left: 3px solid var(--bf-amber);
}
.health-strip__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bf-text-light); }
.health-strip__hint { font-size: 11px; color: var(--bf-text-light); flex: 1 1 260px; }
.health-pill {
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px; cursor: pointer;
  transition: filter .12s ease;
}
.health-pill:hover { filter: brightness(.96); }
.health-pill.bad  { background: #FDECEC; color: #8A2020; }
.health-pill.warn { background: #FFF4E5; color: #8A5300; }

.chart-row--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1400px) { .chart-row--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .chart-row--four { grid-template-columns: minmax(0, 1fr); } }

/* Enforcement funnel */
.funnel { display: flex; flex-direction: column; gap: 12px; }
.funnel__step { display: grid; grid-template-columns: 1fr; gap: 3px; position: relative; }
.funnel__n { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--bf-ink); }
.funnel__l { font-size: 11px; color: var(--bf-text-muted); }
.funnel__l em { font-style: normal; font-weight: 600; color: var(--bf-thread); margin-left: 4px; }
.funnel__bar { height: 6px; border-radius: 99px; background: var(--bf-holo); min-width: 3px; }
.funnel__step--end .funnel__bar { background: var(--bf-jade); }

/* Quota bar in the tenant table */
.quota { display: flex; align-items: center; gap: 7px; }
.quota__track { flex: 1; min-width: 54px; height: 7px; border-radius: 99px; background: var(--bf-surface-sunk); overflow: hidden; }
.quota__fill { display: block; height: 100%; border-radius: 99px; background: var(--bf-jade); }
.quota__fill.warn { background: var(--bf-amber); }
.quota__fill.bad  { background: var(--bf-seal); }
.quota__txt { font-family: var(--font-mono); font-size: 10px; color: var(--bf-text-muted); white-space: nowrap; }

/* ── DASHBOARD CHARTS ─────────────────────────────────────────────
   Hand-built inline SVG. No charting library is reachable offline, and this way there is no
   script to download or parse, no image decode, and the charts are present in the first paint.
   Interaction is CSS hover plus native <title> tooltips — nothing on the JS critical path. */
.chart-row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-section); margin-bottom: var(--gap-section); align-items: start;
}
@media (max-width: 1280px) { .chart-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 820px)  { .chart-row { grid-template-columns: minmax(0, 1fr); } }

.chart-card { min-width: 0; }
.chart-body { padding: 14px var(--pad-card) var(--pad-card); }
.chart-empty { margin: 0; padding: 24px 0; text-align: center; }
.chart-svg { width: 100%; height: 150px; display: block; overflow: visible; }

.chart-grid { stroke: var(--bf-border); stroke-width: 1; }
.chart-bar { transition: opacity .12s ease; }
.chart-bar--searches { fill: var(--bf-thread); }
.chart-bar--findings { fill: var(--bf-foil); }
.chart-hit { fill: transparent; }
/* Hovering anywhere in the day's column highlights it and dims the rest. */
.chart-svg:hover .chart-bar { opacity: .35; }
.chart-bar-group:hover .chart-bar { opacity: 1; }
.chart-bar-group:hover .chart-hit { fill: rgba(91, 70, 229, .06); }

.chart-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 10px; font-size: 11.5px; color: var(--bf-text-muted);
}
.chart-legend--stack { flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 12px; }
.dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; }
.dot--searches, .dot--med { background: var(--bf-thread); }
.dot--findings { background: var(--bf-foil); }
.dot--high { background: var(--bf-seal); }
.dot--low  { background: var(--bf-border-strong); }

/* Donut */
.chart-body--donut { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.donut { width: 132px; height: 132px; flex-shrink: 0; transform: rotate(-90deg); }
.donut-track { fill: none; stroke: var(--bf-surface-sunk); stroke-width: 16; }
.donut-seg {
  fill: none; stroke-width: 16; stroke-linecap: butt;
  transition: stroke-width .12s ease, opacity .12s ease;
}
.donut:hover .donut-seg { opacity: .45; }
.donut-seg:hover { opacity: 1; stroke-width: 20; }
.seg--high { stroke: var(--bf-seal); }
.seg--med  { stroke: var(--bf-thread); }
.seg--low  { stroke: var(--bf-border-strong); }
/* Counter-rotate the labels so the donut can be rotated for a 12-o'clock start. */
.donut-num, .donut-cap {
  text-anchor: middle; transform: rotate(90deg); transform-origin: 70px 70px;
  font-family: var(--font-display);
}
.donut-num { font-size: 22px; font-weight: 700; fill: var(--bf-ink); }
.donut-cap { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; fill: var(--bf-text-light); }

/* Horizontal bars */
.hbars { display: flex; flex-direction: column; gap: 9px; }
.hbar { display: grid; grid-template-columns: 84px 1fr 30px; align-items: center; gap: 8px; font-size: 11.5px; }
.hbar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bf-text-muted); }
.hbar__track { height: 8px; border-radius: 99px; background: var(--bf-surface-sunk); overflow: hidden; }
.hbar__fill {
  display: block; height: 100%; border-radius: 99px; background: var(--bf-holo);
  transition: filter .12s ease;
}
.hbar:hover .hbar__fill { filter: brightness(1.12); }
.hbar__val { font-family: var(--font-mono); font-size: 10.5px; text-align: right; color: var(--bf-ink); }

/* ── RESULTS GRID ─────────────────────────────────────────────────
   Earlier this forced every cell onto one line and truncated with an ellipsis. That clipped the
   column HEADINGS themselves ("PLATFOR…", "CATE…"), cut the status badge to "PendingRevie" and
   the View button to "iew", and hid the Notes text that is the most useful column on the screen.
   Truncating the label rather than the data is the wrong trade.

   Now: fixed layout still (so columns line up), but the text columns WRAP instead of truncating,
   and every fixed column is sized to fit its own heading. Rows grow taller; nothing is clipped. */
/* min-width IS WHAT MAKES IT SCROLL.
   table-layout:fixed with width:100% and no minimum means the table can never be wider than its
   container — so it always "fits", and there is nothing for .table-wrapper to scroll. That is why
   the grid could not be moved left or right: not a missing overflow rule, but a table that refused
   to exceed the box it was in.
   1308px is the sum of the thirteen fixed column widths plus a readable Misuse description — the
   same figure the old column-hiding rules were computed against. Above that the table still fills
   the container as before; below it, it overflows and the wrapper scrolls. */
.results-table { table-layout: fixed; width: 100%; min-width: 1308px; font-size: 11.5px; }

.results-table th,
.results-table td {
  padding: 7px 8px;
  vertical-align: top;
  white-space: normal;                 /* wrap, never clip */
  overflow: visible; text-overflow: clip;
  word-break: break-word;              /* long URLs and unspaced strings cannot overflow */
}
.results-table th {
  font-size: 9.5px; letter-spacing: .03em; white-space: nowrap; vertical-align: bottom;
}
.results-table td { line-height: 1.35; }

/* Widths sized to the heading text, so no heading is ever cut. */
/* WIDTHS ARE POSITIONAL, so they must be re-listed whenever the column order changes.
   This is what broke the layout after the reorder: the widths still described the old order, so the
   Source link column inherited the 84px meant for Category. At 84px, with table-layout:fixed and
   break-all on the host, "meesho.com" wrapped one character per line and the row grew to 330px tall.
   Comments name the column at each position for exactly that reason. */
.results-table th:nth-child(1)  { width: 28px;  }   /* checkbox           */
.results-table th:nth-child(2)  { width: 100px; }   /* Platform           */
.results-table th:nth-child(3)  { width: 150px; }   /* Relevancy          */
.results-table th:nth-child(4)  { width: auto;  }   /* Misuse description — the ONLY auto column,
                                                       so all the slack lands here rather than being
                                                       split with another one */
.results-table th:nth-child(5)  { width: 200px; }   /* Source link         */
.results-table th:nth-child(6)  { width: 78px;  }   /* Category            */
.results-table th:nth-child(7)  { width: 68px;  }   /* Country             */
.results-table th:nth-child(8)  { width: 78px;  }   /* Currency — 78, not 66: the header word needs
                                                       more than the three-letter code below it */
.results-table th:nth-child(9)  { width: 82px;  }   /* Status              */
.results-table th:nth-child(10) { width: 72px;  }   /* Priority            */
.results-table th:nth-child(11) { width: 56px;  }   /* Match % — was 74. The value is a short bar and
                                                       a number; the width went to the description */
.results-table th:nth-child(12) { width: 56px;  }   /* Notice              */
.results-table th:nth-child(13) { width: 100px; }   /* Actions — View + Notice */

/* Line clamping is applied to an inner <span>, never to the <td> itself: changing `display`
   on a table cell removes it from the table formatting context and column alignment stops
   being guaranteed. `max-height` on a row or cell is ignored by the table algorithm entirely,
   so the clamp is the only thing that actually bounds row height. */
.results-table .clamp {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; word-break: normal;
}
.results-table .clamp-2 { -webkit-line-clamp: 2; }
.results-table .clamp-3 { -webkit-line-clamp: 3; }
.results-table .clamp-4 { -webkit-line-clamp: 4; }

/* Badges must never be cut mid-word. */
.results-table .badge-success,
.results-table .badge-danger,
.results-table .badge-neutral,
.results-table .badge-warning,
.results-table .badge-category,
.results-table .badge-saarc,
.results-table .badge-currency { font-size: 9.5px; padding: 1px 6px; white-space: nowrap; }

/* Actions: keep the two buttons on one line and fully legible. */
.results-table td:nth-child(13) { white-space: nowrap; }
.results-table .btn-xs { padding: 3px 7px; font-size: 10.5px; white-space: nowrap; }

.results-table .match-bar-wrap { width: 100%; min-width: 0; }
.results-table .match-val { font-size: 10.5px; }
.results-table input[type=checkbox] { width: 13px; height: 13px; }

/* Source: the cell holds a host name now, clamped to two lines. `break-all` used to be here
   and was what rendered a long citation one character per line in a 70px column. */
/* Source holds a host name now; `break-all` used to live here and was what rendered a long
   citation one character per line in a 70px column. */
.results-table td:nth-child(11) { word-break: normal; }

/* Taller grid: the results table is the working surface of this screen. */
.results-card .table-wrapper { max-height: 74vh; }

/* Laptops. 13 columns leave little room for prose, so the fixed columns are trimmed to just
   wider than their own headings and Relevancy is capped — in practice it holds short repeated
   phrases ("Search hit (unclassified)"), whereas Notes carries the substance. Notes takes all
   the remaining width. */
@media (max-width: 1440px) {
  .results-table { font-size: 11px; }
  .results-table th, .results-table td { padding: 6px 5px; }
  .results-table th { font-size: 9px; }
  /* Re-listed for the new column order, same as the block above. THIS is the set that applied in the
     reported case — the screenshot was a 1440-wide laptop, so the desktop widths above were never in
     play and fixing only those would have looked like the bug was still there. */
  .results-table th:nth-child(1)  { width: 26px;  }
  .results-table th:nth-child(2)  { width: 88px;  }  /* Platform           */
  .results-table th:nth-child(3)  { width: 130px; }  /* Relevancy          */
  .results-table th:nth-child(4)  { width: auto;  }  /* Misuse description — the only auto column */
  .results-table th:nth-child(5)  { width: 176px; }  /* Source link        */
  .results-table th:nth-child(6)  { width: 66px;  }  /* Category           */
  .results-table th:nth-child(7)  { width: 58px;  }  /* Country            */
  .results-table th:nth-child(8)  { width: 72px;  }  /* Currency — wider than its content, because
                                                        the HEADER word is longer than the 3-letter
                                                        code beneath it and was being clipped */
  .results-table th:nth-child(9)  { width: 76px;  }  /* Status             */
  .results-table th:nth-child(10) { width: 66px;  }  /* Priority           */
  .results-table th:nth-child(11) { width: 50px;  }  /* Match % — was 70. A short bar and a number
                                                        need little room; the rest went to the
                                                        description column */
  .results-table th:nth-child(12) { width: 50px;  }  /* Notice             */
  .results-table th:nth-child(13) { width: 92px;  }  /* Actions            */
  .results-table .clamp-4 { -webkit-line-clamp: 5; }
}
@media (max-width: 1366px) {
  /* THE TABLE SCROLLS; NO COLUMN IS REMOVED.
     This block has been round the loop twice — first forcing a 1240px minimum and scrolling, then
     dropping four columns to avoid the scrollbar. Dropping them was the worse of the two: on the
     most common laptop resolution, Category, Currency, Country and Match% were simply absent, and
     nothing on screen said they existed. Match% in particular is one of the figures that decides
     whether a listing is worth a notice.

     table-layout:auto so each column takes the width its content needs; min-width is NOT reset to
     zero here — the 1308px floor on the base rule is what makes the table exceed the container and
     therefore what makes it scrollable at all. */
  .results-table .clamp-4 { -webkit-line-clamp: 3; }
}

/* ═══ SIGN-IN PAGE ═════════════════════════════════════════════
   Left: the product at work (.lx-hero). Right: the sign-in card.
   Every moving part animates transform or opacity only (the typed letters use max-width on
   four tiny inline boxes), and every part of the demo runs on ONE cycle, --lx-cyc, split into
   four equal panes. A part belonging to pane p is delayed by p quarters of the cycle, so
   the window title, the pane and the step rail can never drift apart. */

/* ── Domain motif + optional photograph layer ── */
.login-motif {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .06; overflow: hidden;
}
.login-motif svg { width: 100%; height: 100%; display: block; }
.motif-ico { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.motif-drift { animation: bf-motif 72s ease-in-out infinite alternate; will-change: transform; }
@keyframes bf-motif {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-2.2%, -1.6%, 0); }
}

.login-page { --bf-login-image: none; }
.login-photo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--bf-login-image); background-size: cover; background-position: center;
  opacity: .16; mix-blend-mode: luminosity;
  -webkit-mask-image: radial-gradient(78% 70% at 32% 50%, #000 20%, transparent 76%);
          mask-image: radial-gradient(78% 70% at 32% 50%, #000 20%, transparent 76%);
}

/* ── Page ── */
.login-page {
  --lx-cyc: 24s;
  --lx-q: calc(var(--lx-cyc) / 4);
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 28px 56px;
  background: var(--bf-ink);
}
.login-page::before {                      /* aurora, oversized so it drifts without an edge */
  content: ""; position: absolute; inset: -30%; z-index: 0;
  background:
    radial-gradient(44% 44% at 22% 20%, rgba(91, 70, 229, .50), transparent 62%),
    radial-gradient(40% 40% at 78% 80%, rgba(15, 181, 206, .36), transparent 62%),
    radial-gradient(34% 34% at 60% 24%, color-mix(in srgb, var(--bf-thread) 30%, transparent), transparent 60%);
  animation: bf-aurora 24s ease-in-out infinite alternate;
  will-change: transform;
}
.login-page::after {                       /* grid, masked so it never reads as a tile */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(68% 58% at 50% 45%, #000 30%, transparent 78%);
          mask-image: radial-gradient(68% 58% at 50% 45%, #000 30%, transparent 78%);
  animation: bf-grid-pan 32s linear infinite;
}
@keyframes bf-aurora {
  0%   { transform: translate3d(0, 0, 0)        scale(1);    }
  50%  { transform: translate3d(2.5%, -3%, 0)   scale(1.09); }
  100% { transform: translate3d(-2.5%, 2.5%, 0) scale(1.04); }
}
@keyframes bf-grid-pan {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 48px 48px, 48px 48px; }
}

.login-shell {
  position: relative; z-index: 1;
  width: 100%; max-width: 1120px;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 56px; align-items: center;
}

/* ── Hero copy ── */
.lx-hero { min-width: 0; color: #fff; animation: lx-fade-up .7s cubic-bezier(.22, 1, .36, 1) both; }
.lx-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  padding: 5px 12px 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .86);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
}
.lx-live { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }
.lx-live::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid #22C55E; animation: lx-ping 2s ease-out infinite;
}
@keyframes lx-ping { from { transform: scale(.6); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }

.lx-title {
  margin: 0; font-family: var(--font-body);
  font-size: clamp(30px, 3.3vw, 42px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em;
  color: #fff;
}
.lx-title span {
  background: var(--bf-holo); -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: lx-shine 8s ease-in-out infinite alternate;
}
@keyframes lx-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } }
/* ── The story ──
   Six scenes on one cycle (--st-cyc), each on screen for a sixth of it. A scene's parts carry
   --p from the scene and an optional offset --o, so a box landing on a shelf or a stamp hitting a
   window is timed from its own scene's start. Idle motion (bobbing, twinkling, falling stars)
   loops freely — it only shows while its scene does. Everything is transform or opacity. */
/* 8 seconds a scene: long enough to read the caption and then watch the scene play out. */
.login-page { --st-cyc: 48s; --st-s: calc(var(--st-cyc) / 6); }
.st-stage { position: relative; height: 400px; margin-top: 18px; }
.st-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0;
  animation: st-scene var(--st-cyc) cubic-bezier(.4, 0, .2, 1) infinite both;
  animation-delay: calc(var(--st-s) * var(--p));
}
@keyframes st-scene {
  0%          { opacity: 0; transform: translateY(10px); }
  1.6%, 15.2% { opacity: 1; transform: none; }
  16.6%, 100% { opacity: 0; transform: translateY(-8px); }
}
.st-scene svg { width: 100%; max-width: 560px; height: auto; overflow: visible; }
.st-scene svg * { transform-box: fill-box; }
/* The caption leads its scene, above the picture, so it is read first rather than found underneath.
   Set on its own panel for contrast against the moving backdrop. */
.st-cap {
  order: -1; margin: 0; max-width: 480px; padding: 11px 18px;
  text-align: center; font-size: 16.5px; line-height: 1.45; color: rgba(255, 255, 255, .88);
  background: rgba(15, 18, 32, .55); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.st-cap b { display: block; margin-bottom: 1px; color: #fff; font-size: 17.5px; font-weight: 700; letter-spacing: -.01em; }

/* Scene furniture */
.st-ground { fill: rgba(255, 255, 255, .06); }
.st-shelf  { fill: #8B6B4E; }
.st-sign   { font: 800 15px/1 var(--font-body); letter-spacing: .18em; fill: #fff; }
.st-store  { font: 800 11px/1 var(--font-body); letter-spacing: .16em; fill: #fff; }
.st-tag    { font: 800 7.5px/1 var(--font-body); fill: #fff; }
.st-say    { font: 700 11.5px/1 var(--font-body); fill: #1F2233; }
.st-stamp  { font: 900 15px/1 var(--font-body); letter-spacing: .12em; fill: #E24C4C; }
.st-mouth  { fill: none; stroke: #8A3B2E; stroke-width: 2; stroke-linecap: round; }
.st-mouth--open { fill: #8A3B2E; }
.st-brow   { fill: none; stroke: #2B2140; stroke-width: 2; stroke-linecap: round; }
.st-hit    { fill: none; stroke: #E24C4C; stroke-width: 3; }
.st-q      { font: 800 22px/1 var(--font-body); fill: rgba(255, 255, 255, .8); }

/* Timed parts: arrive after their scene begins, leave before it comes round again. */
.st-pop {
  transform-origin: center;
  animation: st-pop var(--st-cyc) ease-out infinite both;
  animation-delay: calc(var(--st-s) * var(--p) + var(--o, 0s));
}
@keyframes st-pop {
  0%          { opacity: 0; transform: scale(.3); }
  .9%         { opacity: 1; transform: scale(1.12); }
  1.5%, 15.4% { opacity: 1; transform: scale(1); }
  16%, 100%   { opacity: 0; transform: scale(.3); }
}
.st-draw {
  fill: none; stroke: #E24C4C; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 110; stroke-dashoffset: 110;
  animation: st-draw var(--st-cyc) ease-in-out infinite both;
  animation-delay: calc(var(--st-s) * var(--p) + var(--o, 0s));
}
@keyframes st-draw {
  0%          { stroke-dashoffset: 110; }
  5%, 15.4%   { stroke-dashoffset: 0; }
  16%, 100%   { stroke-dashoffset: 110; }
}
/* The notice's flight to the store, then the fake listing leaving the window. */
.st-fly {
  animation: st-fly var(--st-cyc) cubic-bezier(.45, 0, .3, 1) infinite both;
  animation-delay: calc(var(--st-s) * 4 + .4s);
}
@keyframes st-fly {
  0%          { opacity: 0; transform: translate(0, 0) scale(.7); }
  1%          { opacity: 1; transform: translate(0, 0) scale(1); }
  3.6%        { transform: translate(115px, -58px) scale(1); }
  6.4%        { opacity: 1; transform: translate(232px, 26px) scale(.6); }
  7.2%, 100%  { opacity: 0; transform: translate(232px, 26px) scale(.6); }
}
.st-gone {
  animation: st-gone var(--st-cyc) ease-out infinite both;
  animation-delay: calc(var(--st-s) * 4);
}
@keyframes st-gone {
  0%, 9.4%    { opacity: 1; transform: none; }
  11%, 15.4%  { opacity: 0; transform: scale(.85); }
  16%, 100%   { opacity: 1; transform: none; }
}

/* Idle motion */
.st-bob { animation: st-bob 3.2s ease-in-out infinite; }
.st-bob--2 { animation-delay: -1.6s; }
@keyframes st-bob { 50% { transform: translateY(-4px); } }
.st-twinkle { transform-origin: center; animation: st-twinkle 1.8s ease-in-out infinite; }
.st-twinkle--2 { animation-delay: -.6s; }
.st-twinkle--3 { animation-delay: -1.2s; }
@keyframes st-twinkle { 0%, 100% { opacity: .2; transform: scale(.5) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
.st-drip { animation: st-drip 1.6s ease-in infinite; }
@keyframes st-drip { 0% { opacity: 0; transform: translateY(-4px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }
.st-q { animation: st-q 2.2s ease-out infinite; }
.st-q--2 { animation-delay: -1.1s; }
@keyframes st-q { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.st-fall { animation: st-fall 1.9s ease-in infinite; }
.st-fall--2 { animation-delay: -.95s; }
@keyframes st-fall { 0% { opacity: 0; transform: translateY(-10px) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(70px) rotate(90deg); } }
.st-shake { transform-origin: 50% 0; animation: st-shake .5s ease-in-out infinite alternate; }
@keyframes st-shake { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.st-type { transform-origin: 50% 0; animation: st-type .36s ease-in-out infinite alternate; }
.st-type--2 { animation-delay: -.18s; }
@keyframes st-type { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.st-scan { animation: st-scan 3.4s ease-in-out infinite alternate; }
@keyframes st-scan { 0% { transform: translate(-70px, 0); } 33% { transform: translate(0, 68px); } 66% { transform: translate(-70px, 136px); } 100% { transform: translate(0, 136px); } }
.st-wave { transform-origin: 50% 0; animation: st-wave .7s ease-in-out infinite alternate; }
@keyframes st-wave { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.st-ring { fill: none; stroke: rgba(199, 190, 251, .45); stroke-width: 2; transform-origin: center; animation: st-ring 3.2s ease-out infinite; }
.st-ring--2 { animation-delay: -1.6s; }
@keyframes st-ring { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
.st-confetti { animation: st-confetti 3.6s linear infinite; }
@keyframes st-confetti { 0% { transform: translateY(-20px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(150px); opacity: 0; } }

/* Chapter rail, in step with the scenes. */
.st-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.st-steps li {
  position: relative; padding-bottom: 9px; text-align: center;
  font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .42); white-space: nowrap;
  animation: st-step var(--st-cyc) linear infinite;   /* no backwards fill: its first frame is ACTIVE */
  animation-delay: calc(var(--st-s) * var(--p));
}
.st-steps li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.st-steps li i {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2px; border-radius: 2px;
  background: var(--bf-holo); transform-origin: left; transform: scaleX(0);
  animation: st-step-fill var(--st-cyc) linear infinite both;
  animation-delay: calc(var(--st-s) * var(--p));
}
@keyframes st-step { 0%, 16.4% { color: #fff; } 16.67%, 100% { color: rgba(255, 255, 255, .42); } }
@keyframes st-step-fill { 0% { transform: scaleX(0); } 16.4% { transform: scaleX(1); } 16.67%, 100% { transform: scaleX(0); } }

/* ── Sign-in card ── */
/* Line icons in the card: one size and stroke. */
.lx-i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px; justify-self: end;
  background: var(--bf-surface);
  border-radius: 20px;
  padding: 34px 32px 26px;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .6), 0 0 0 8px rgba(255, 255, 255, .04);
  overflow: hidden;
  animation: bf-card-in .6s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes bf-card-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.login-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--bf-holo); }
.login-card::after {
  content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  animation: bf-sheen 4.5s ease-in-out infinite;
}
@keyframes bf-sheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(320%); } }

/* Card contents arrive in sequence, once, on load. */
.lx-rise { animation: lx-fade-up .6s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.12s + var(--d, 0) * .06s); }
@keyframes lx-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lx-reveal { animation: lx-fade-up .35s cubic-bezier(.22, 1, .36, 1) both; }

.login-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.login-heading {
  margin: 0 0 6px; text-align: center;
  font-family: var(--font-body); font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--bf-ink);
}
.login-sub { margin: 0 0 24px; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--bf-text-muted); }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form .form-group { margin: 0; }
.login-form .form-label { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }

.lx-input { position: relative; }
.lx-input > .lx-i {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--bf-text-muted); pointer-events: none; transition: color .2s;
}
.lx-input .form-input {
  height: 46px; padding-left: 40px; border-radius: 11px; font-size: 14px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.lx-input .form-input:hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--bf-primary) 45%, var(--bf-border-strong)); }
.lx-input .form-input:focus {
  outline: none; border-color: var(--bf-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bf-primary) 16%, transparent);
}
.lx-input:focus-within > .lx-i { color: var(--bf-primary); }
.lx-input--pw { padding-right: 44px; }
.lx-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  border: 0; background: transparent; color: var(--bf-text-muted);
  transition: background-color .15s, color .15s;
}
.lx-eye:hover { background: var(--bf-surface-soft, #F4F4F5); color: var(--bf-ink); }
.lx-eye:focus-visible { outline: 2px solid var(--bf-primary); outline-offset: 1px; }

.login-card .btn-login {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 46px; margin-top: 4px; border-radius: 11px;
  font-size: 14.5px; font-weight: 600;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--bf-primary) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .15s, box-shadow .2s, background-color .2s;
}
.login-card .btn-login::after {             /* light sweep on hover */
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28), transparent 70%);
  transition: transform .6s;
}
.login-card .btn-login:hover:not(:disabled)::after { transform: translateX(120%); }
.login-card .btn-login:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--bf-primary) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
.lx-btn__arrow { transition: transform .2s; }
.login-card .btn-login:hover .lx-btn__arrow { transform: translateX(3px); }
.login-card .btn-login .spinner { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
.login-card .btn-login.is-done { background: #10B981; border-color: #10B981; opacity: 1; }
.lx-btn__ok { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .25); animation: lx-pop-once .4s ease-out both; }
@keyframes lx-pop-once { 0% { transform: scale(.3); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

.lx-alert {
  display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; padding: 10px 12px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.45; color: #B42318; background: #FEF3F2; border: 1px solid #FECDCA;
  animation: lx-fade-up .3s ease-out both;
}
.lx-alert .lx-i { margin-top: 1px; }

/* A failed attempt shakes the form. Two identical keyframes, alternated, so each failure restarts it. */
.lx-shake-a { animation: lx-shake-a .42s cubic-bezier(.36, .07, .19, .97) both; }
.lx-shake-b { animation: lx-shake-b .42s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes lx-shake-a { 20%, 80% { transform: translateX(-2px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes lx-shake-b { 20%, 80% { transform: translateX(-2px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }

.lx-secure {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bf-border);
  font-size: 11.5px; color: var(--bf-text-muted);
}
.lx-secure .lx-i { width: 13px; height: 13px; color: #10B981; }

/* ── Screen sizes ── */
@media (max-width: 1100px) {
  .login-shell { gap: 36px; }
}
/* Short laptops (1366x768): a smaller headline and a shorter stage, so the story and its
   caption stay above the fold. */
@media (max-height: 780px) and (min-width: 901px) {
  .lx-title { font-size: clamp(26px, 2.8vw, 34px); }
  .st-stage { height: 360px; margin-top: 10px; }
  .st-cap { font-size: 15px; padding: 9px 16px; }
  .st-cap b { font-size: 16px; }
  .st-scene svg { max-width: 490px; }
  .st-steps { margin-top: 10px; }
}
/* Phones and small tablets: the card alone, no story and no animation work behind it. */
@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; max-width: 420px; gap: 0; }
  .lx-hero { display: none; }
  .login-card { justify-self: center; }
  .login-motif, .login-photo { display: none; }
}
@media (max-width: 480px) {
  .login-page { padding: 20px 14px 56px; }
  .login-card { padding: 28px 20px 22px; border-radius: 16px; }
}

/* Motion is decoration here, so a reduced-motion preference removes it outright: the story
   shows its last scene — the resolution — as a still, and the card simply appears. */
@media (prefers-reduced-motion: reduce) {
  .login-page::before, .login-page::after, .motif-drift, .lx-title span, .lx-live::after,
  .login-card, .login-card::after, .lx-rise, .lx-reveal, .lx-hero,
  .lx-shake-a, .lx-shake-b, .lx-alert { animation: none !important; }
  .login-card::after { display: none; }
  .st-stage *, .st-steps li, .st-steps li i { animation: none !important; }
  .st-scene { opacity: 0; }
  .st-scene[style*="--p:5"] { opacity: 1; transform: none; }
  .st-scene[style*="--p:5"] .st-pop { opacity: 1; transform: none; }
  .st-ring, .st-confetti { opacity: 0; }
  .st-steps li[style*="--p:5"] { color: #fff; }
  .st-steps li[style*="--p:5"] i { transform: scaleX(1); }
}


/* ═══ SEARCH PAGE ══════════════════════════════════════════════ */
.search-layout { display: flex; flex-direction: column; gap: var(--gap-section); }
.search-form-card { padding: 0; }
.search-form { padding: 18px var(--pad-card); }
.search-body { padding: 0; }
.search-options { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.search-progress {
  margin: 0 var(--pad-card) 16px;
  padding: 13px 15px;
  background: var(--bf-thread-soft);
  border: 1px solid var(--bf-thread-mid);
  border-radius: 9px;
}
.progress-text { font-size: 12.5px; font-weight: 500; color: var(--bf-thread-dark); margin-bottom: 8px; }
.progress-bar-animated {
  height: 4px; border-radius: 99px; overflow: hidden;
  background: rgba(91, 70, 229, .18); position: relative;
}
/* A scanning sweep — apt for a detection run, and the only motion flourish. */
.progress-bar-animated::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: var(--bf-holo); border-radius: 99px;
  animation: bf-sweep 1.25s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes bf-sweep { 0% { left: -40% } 100% { left: 100% } }

/* Platforms strip — a direct child of the card, so it owns its inset. */
.platforms-panel {
  padding: 14px var(--pad-card) 16px;
  border-top: 1px solid var(--bf-border);
  background: var(--bf-surface-soft);
}
.platforms-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.platforms-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bf-text-muted);
}
.platforms-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--bf-text-muted);
  background: var(--bf-surface); border: 1px solid var(--bf-border-strong);
  border-radius: 999px;
}
.platforms-manage { margin-left: 2px; font-size: 12px; font-weight: 600; color: var(--bf-thread); }
.platforms-manage::before {
  content: ""; display: inline-block; width: 1px; height: 11px;
  margin-right: 10px; background: var(--bf-border-strong); vertical-align: -1px;
}
.platforms-manage:hover { text-decoration: underline; }
.platforms-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.platform-chip {
  display: inline-flex; align-items: center;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap;
  color: var(--bf-text); background: var(--bf-surface);
  border: 1px solid var(--bf-border-strong);
}
.platform-chip-more {
  cursor: pointer; font-family: inherit; font-weight: 600;
  color: var(--bf-thread-dark); background: var(--bf-thread-soft);
  border-color: var(--bf-thread-mid);
  transition: background .15s ease, border-color .15s ease;
}
.platform-chip-more:hover { background: var(--bf-thread-mid); border-color: var(--bf-thread); }
.platforms-hint {
  margin: 10px 0 0; max-width: 78ch;
  font-size: 12px; line-height: 1.55; color: var(--bf-text-muted);
}
.platforms-hint code {
  padding: 1px 5px; font-size: 11px;
  background: var(--bf-surface); border: 1px solid var(--bf-border-strong); border-radius: 4px;
}

.results-card { overflow: hidden; }
.results-card .card-header { flex-wrap: wrap; gap: 10px; }
.results-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* Bulk action bar — sits above the table when rows are selected. */
.bulk-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px var(--pad-card);
  background: var(--bf-ink); color: #E6EAF4;
  font-size: 12.5px; font-weight: 500;
}
.bulk-bar .btn-outline-sm {
  background: transparent; color: #E6EAF4; border-color: var(--bf-ink-line);
}
.bulk-bar .btn-outline-sm:hover { background: var(--bf-ink-soft); border-color: #4A5470; color: #fff; }
.bulk-bar .btn-xs.danger { background: transparent; border-color: var(--bf-ink-line); color: #FF9A9A; }
.bulk-bar .btn-xs.danger:hover { background: rgba(226, 76, 76, .16); border-color: var(--bf-seal); }

/* Recent searches */
.recent-card { padding: 0; }
.recent-list { display: flex; flex-direction: column; }
/* Left-aligned, not space-between: with three children a space-between row strands the
   timestamp in the middle of the card. The status badge is pushed right on its own. */
.recent-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 11px var(--pad-card); border-bottom: 1px solid var(--bf-border);
  cursor: pointer; transition: background .14s ease;
}
.recent-item:last-child { border-bottom: none; }
.recent-item:hover { background: var(--bf-surface-soft); }
.recent-active { background: var(--bf-thread-soft); box-shadow: inset 3px 0 0 var(--bf-thread); }
.recent-brand {
  font-size: 13px; font-weight: 600; color: var(--bf-ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recent-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-right: auto;
  font-size: 11.5px; color: var(--bf-text-muted);
}

/* Notice composer */
.notice-toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 11px; }
.notice-type {
  padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  background: var(--bf-surface); border: 1px solid var(--bf-border-strong); color: var(--bf-text-muted);
  cursor: pointer; transition: all .15s ease;
}
.notice-type.active, .notice-type.selected {
  background: var(--bf-thread-soft); border-color: var(--bf-thread); color: var(--bf-thread-dark);
}
.notice-textarea {
  width: 100%; min-height: 300px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
  color: var(--bf-ink); background: var(--bf-surface-soft);
  border: 1px solid var(--bf-border-strong); border-radius: 9px;
  padding: 14px; resize: vertical;
}
.notice-textarea:focus { outline: none; border-color: var(--bf-thread); box-shadow: var(--ring); }

/* ═══ WEBSITE SCAN ═════════════════════════════════════════════ */
.pages-panel { padding: 0; }
.pages-panel-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bf-text-muted); padding: 14px var(--pad-card) 8px;
}
.pages-list { display: flex; flex-direction: column; }
.page-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px var(--pad-card); border-bottom: 1px solid var(--bf-border);
  font-size: 12.5px;
}
.page-row:last-child { border-bottom: none; }
.page-status { font-family: var(--font-mono); font-size: 11.5px; color: var(--bf-text-muted); }
.finding-context {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
  color: var(--bf-text-muted); background: var(--bf-surface-soft);
  border-left: 2px solid var(--bf-border-strong);
  padding: 7px 10px; border-radius: 0 6px 6px 0; margin-top: 5px;
}
.finding-reco { font-size: 12px; color: var(--bf-jade); font-weight: 500; margin-top: 5px; }
.applied-links { display: flex; flex-wrap: wrap; gap: 5px; }

/* ═══ ENFORCEMENT TIMELINE ═════════════════════════════════════ */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; display: flex; gap: 11px; padding: 6px 0 6px 2px; }
.timeline li::before {
  content: ""; position: absolute; left: 4px; top: 19px; bottom: -6px;
  width: 1px; background: var(--bf-border-strong);
}
.timeline li:last-child::before { display: none; }
.timeline-dot {
  flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px;
  border-radius: 50%; background: var(--bf-thread);
  box-shadow: 0 0 0 3px var(--bf-thread-soft);
  position: relative; z-index: 1;
}
.timeline-desc { font-size: 13px; color: var(--bf-ink); }
.timeline-meta { font-family: var(--font-mono); font-size: 11px; color: var(--bf-text-light); }

/* ═══ SETTINGS / MODEL ═════════════════════════════════════════ */
.settings-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--gap-section); align-items: start; }
.settings-card { padding: 0; }
.settings-body { padding: 18px var(--pad-card); }
.settings-actions {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 14px var(--pad-card); border-top: 1px solid var(--bf-border);
  background: var(--bf-surface-soft);
}
.settings-meta { display: flex; flex-direction: column; gap: 11px; }
.settings-meta-item { display: flex; flex-direction: column; gap: 2px; }
.settings-meta-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bf-text-light);
}
.settings-code {
  font-family: var(--font-mono); font-size: 12px; color: var(--bf-ink);
  background: var(--bf-surface-soft); border: 1px solid var(--bf-border);
  border-radius: 6px; padding: 5px 9px; display: inline-block; word-break: break-all;
}

/* ═══ TOKEN USAGE ══════════════════════════════════════════════ */
.token-summary {
  display: flex; flex-wrap: wrap; gap: 22px;
  padding: 16px var(--pad-card);
}
.token-stat { display: flex; flex-direction: column; gap: 1px; }
.token-stat-label { font-size: 11.5px; color: var(--bf-text-muted); }
.token-stat-value {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  letter-spacing: -.02em; color: var(--bf-ink);
}
.token-total { font-family: var(--font-mono); font-weight: 600; color: var(--bf-ink); }
.token-summary-mini { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px var(--pad-card); }
.tsm-item { display: flex; align-items: baseline; gap: 5px; font-size: 12.5px; color: var(--bf-text-muted); }
.tsm-val { font-family: var(--font-mono); font-weight: 600; color: var(--bf-ink); }

/* Shown while a persisted session is being restored after a refresh. */
.session-restoring {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 45vh;
}

.login-help { text-align: center; margin-top: 14px; font-size: 12.5px; }
.login-help a { color: var(--bf-thread); }
.login-reset { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bf-border); }
.reset-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.reset-done { font-size: 13px; color: var(--bf-jade); line-height: 1.55; margin: 0 0 8px; }

/* The search form is dense by design — every row is a parameter, so generous document-style
   spacing just pushes the Run button below the fold. */
.search-form .form-row { margin-bottom: 14px; }
.search-form .form-row:last-child { margin-bottom: 0; }
.search-form .form-label { margin-bottom: 4px; }
.search-form .form-hint { margin-top: 3px; display: block; line-height: 1.35; }
.search-form .form-textarea { min-height: 0; }

/* ── Nice classification picker ────────────────────────────────
   A filterable checkbox list rather than a <select multiple>: 45 options is too many to
   scan, and multi-select boxes are hostile on touch. Selected classes surface as chips so
   the choice stays visible once the list is scrolled. */
.nice-picker { border: 1px solid var(--bf-border); border-radius: 10px; overflow: hidden; }
.nice-selected {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 8px; background: var(--bf-surface-soft);
  border-bottom: 1px solid var(--bf-border); min-height: 32px;
}
.nice-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bf-thread); color: #fff;
  font-size: 12px; font-weight: 600; padding: 3px 4px 3px 9px; border-radius: 20px;
}
.nice-chip button {
  border: 0; background: rgba(255,255,255,.22); color: #fff; cursor: pointer;
  width: 16px; height: 16px; border-radius: 50%; line-height: 1; font-size: 12px; padding: 0;
}
.nice-chip button:hover { background: rgba(255,255,255,.4); }
.nice-filter { width: 100%; border: 0; border-bottom: 1px solid var(--bf-border); border-radius: 0; }
.nice-list { max-height: 168px; overflow-y: auto; overscroll-behavior: contain; }
.nice-option {
  display: grid; grid-template-columns: 18px 30px 1fr auto; align-items: center; gap: 8px;
  padding: 4px 9px; cursor: pointer; font-size: 12.5px;
  border-bottom: 1px solid var(--bf-border-soft);
}
.nice-option:hover { background: var(--bf-surface-soft); }
.nice-option.is-on { background: var(--bf-thread-soft); }
.nice-num { font-family: var(--font-mono); font-weight: 700; color: var(--bf-ink); }
.nice-title { color: var(--bf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nice-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--bf-text-light); }

.export-group { display: inline-flex; gap: 6px; }

/* Sortable result headers */
/* Results headers may WRAP rather than clip. "Currency" at 9px in a 58px column was cut to
   "CURRENC" - a wrapped header costs a few pixels of height once; a clipped one is wrong on every
   screen. */
.results-table th.sortable { white-space: normal; line-height: 1.2; }
.bf-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.bf-table th.sortable:hover { color: var(--bf-thread); }
.sort-caret {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
  margin-left: 4px; border-radius: 4px; font-size: 11px; opacity: .45; vertical-align: middle;
}
.bf-table th.sortable:hover .sort-caret { opacity: .9; background: var(--bf-surface-sunk); }
.sort-caret.on { opacity: 1; color: #fff; background: var(--bf-thread); font-weight: 700; }

/* Footer. Inside .bf-main so it scrolls with content rather than pinning over a table. */
/* Pinned to the bottom of the viewport rather than trailing the content. It was appearing
   mid-screen on short pages and needing a scroll on long ones — a footer that moves is not
   really a footer. Fixed positioning also keeps it visible while a long results grid scrolls. */
/* STICKY, NOT FIXED.
   The footer lives inside <main class="bf-main">. Fixed positioning took it out of that container
   and spanned the whole viewport, so it ran underneath the sidebar — which is what "overlapping the
   sidebar" was. Sticky pins it to the bottom of the main column's own scroll area instead: it stays
   visible while a long results grid scrolls, and it cannot reach past the column it belongs to.
   No left offset is needed, and nothing has to be adjusted when the sidebar collapses or becomes a
   mobile drawer. */
/* STATIC, not sticky.
   Sticky kept it visible while scrolling, but an opaque bar pinned to the bottom of a scroll
   container sits ON TOP of whatever is beneath it — so it covered table rows mid-list. A footer
   credit does not need to be permanently visible, and covering data to keep it so is the wrong
   trade. It now flows after the content and is pushed to the bottom of the column on short pages. */
.bf-footer {
  position: static; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  min-height: var(--footer-h, 30px);
  /* Negative side margins let the strip meet the column edges despite the main padding, so it reads
     as a bar rather than a floating box. */
  margin: var(--gap-page) calc(var(--gap-page) * -1) calc(var(--gap-page) * -1);
  padding: 7px 16px;
  border-top: 1px solid var(--bf-border);
  background: var(--bf-surface);
  font-size: 11.5px; color: var(--bf-text-light);
}

/* Pushes the footer to the bottom of the column when a page is shorter than the viewport, rather
   than leaving it floating directly under short content. */
.bf-main { display: flex; flex-direction: column; }

/* Children keep their natural size. Turning the column into a flex container is only a means of
   pushing the footer down; without this, page content would grow or shrink to fill the column and
   tables and grids would size differently from every other layout in the application. */
.bf-main > *:not(.bf-footer) { flex: 0 0 auto; }

.bf-main > .bf-footer { margin-top: auto; }
.bf-footer strong { color: var(--bf-text-muted); font-weight: 650; }
.bf-footer__sep { opacity: .5; }
/* The login screen keeps its own treatment: transparent over the animated backdrop. */
.bf-footer--login {
  position: absolute; bottom: 14px; left: 0; right: 0; z-index: 2;
  min-height: 0; height: auto; margin: 0; padding: 0; border: 0; background: none;
  color: rgba(255,255,255,.55);
}
.bf-footer--login strong { color: rgba(255,255,255,.8); }
@media (max-height: 820px) { :root { --footer-h: 26px; } }

/* Exports: one card per thing you might export, format buttons inside. */
/* auto-FILL, not auto-fit: the page is four groups of cards and auto-fit would let a group of two
   stretch its cards to the full width, so the same card is a different size in each band. auto-fill
   keeps the empty tracks and the column width with them.
   Stretch rather than start, so cards in a row share a height and their format buttons — pushed
   down by margin-top:auto — land on one line instead of a stagger. */
.export-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap-section);
  align-items: stretch;
}
.export-card { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.export-card__icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bf-thread-soft); color: var(--bf-thread); font-size: 17px; margin-bottom: 2px;
}
.export-card h3 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.export-card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--bf-text-muted); }
.export-card__meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--bf-text-light);
  padding: 5px 0; border-top: 1px solid var(--bf-border); margin-top: 4px;
}
.export-card__actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; }

/* The meta line now carries two facts — period and scope — so it is allowed to wrap onto a second
   line rather than truncating the client name, which is the half that identifies the download. */
.export-card__meta { line-height: 1.5; }

/* ── Reports & exports: the scope bar ─────────────────────────────────────
   Matched to .bfd-slicers in dashboard.css rather than built from .bf-card, because the date
   picker sitting directly below supplies that chrome and two different bars stacked on one another
   read as two unrelated controls. */
.rpt-scope { margin-bottom: 4px; }
.rpt-scope__row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: var(--d-gap, 14px);
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  border-radius: 8px; box-shadow: 0 1px 2px rgba(23, 28, 43, .05);
}
.rpt-scope__label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--bf-text-light); margin-right: 2px;
}
.rpt-scope__fixed { font-size: 12.5px; font-weight: 600; color: var(--bf-text); }
.rpt-scope__spacer { flex: 1 1 auto; }
.rpt-scope__count { font-size: 11.5px; color: var(--bf-text-light); }
.rpt-scope__note {
  font-size: 12px; line-height: 1.6; color: var(--bf-text-muted);
  margin: 0 0 var(--gap-section);
}

/* Group headings between the bands of cards. Quieter than a page title and louder than a card
   heading, so the eye reads the page as four short lists rather than one long grid. */
.rpt-group {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--bf-text-light); margin: var(--gap-section) 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--bf-border);
}
.rpt-group:first-of-type { margin-top: 0; }

/* Company settings: two columns of cards on desktop, stacking on narrow screens. */
.settings-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-section);
  align-items: start;
}
@media (max-width: 1100px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } }

/* Probe groups: the queries the platform picker does not control. */
.probe-toggles { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; }
.probe-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; padding: 4px 10px; cursor: pointer; user-select: none;
  border: 1px solid var(--bf-border); border-radius: 20px; background: var(--bf-surface);
  transition: background .12s ease, border-color .12s ease;
}
.probe-toggle:hover { border-color: var(--bf-thread-mid); }
.probe-toggle.is-on {
  background: var(--bf-thread-soft); border-color: var(--bf-thread);
  color: var(--bf-ink); font-weight: 600;
}
.probe-toggle input[type=checkbox] { width: 13px; height: 13px; margin: 0; accent-color: var(--bf-thread); }

/* ── Per-search platform picker ────────────────────────────────────
   Selection state is carried by the whole chip, not just a 13px checkbox: the entire row is the
   hit target, and the selected state is legible at a glance across 80+ options. */
.platform-pick__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.platform-pick__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.platform-pick__cost {
  margin-left: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--bf-text-muted); background: var(--bf-surface-sunk);
  padding: 2px 7px; border-radius: 20px;
}
.btn-xs.is-preset { background: var(--bf-thread); color: #fff; border-color: var(--bf-thread); }

.platform-pick {
  border: 1px solid var(--bf-border); border-radius: 10px;
  padding: 12px; max-height: 210px; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 12px 16px;
  background: var(--bf-surface-soft);
}
.platform-pick__group { min-width: 0; }
.platform-pick__cat {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bf-text-light); padding-bottom: 4px; margin-bottom: 5px;
  border-bottom: 1px solid var(--bf-border);
}
.platform-pick__cat button {
  border: 0; background: none; cursor: pointer; padding: 0;
  font: inherit; color: var(--bf-thread); text-transform: none; letter-spacing: 0;
}
.platform-pick__cat button:hover { text-decoration: underline; }

/* The chip is the control. */
.platform-pick__item {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; padding: 4px 8px; margin-bottom: 3px;
  cursor: pointer; min-width: 0;
  border: 1px solid transparent; border-radius: 7px;
  background: var(--bf-surface);
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
  user-select: none;
}
.platform-pick__item:hover {
  border-color: var(--bf-thread-mid);
  background: #fff;
}
.platform-pick__item:active { transform: scale(.98); }
.platform-pick__item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.platform-pick__item.is-on {
  background: var(--bf-thread-soft);
  border-color: var(--bf-thread);
  color: var(--bf-ink); font-weight: 600;
}
/* Custom tick: a 13px native checkbox is a poor target and looks inconsistent across browsers. */
.platform-pick__item input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex-shrink: 0; margin: 0;
  border: 1.5px solid var(--bf-border-strong, #C6CDDC); border-radius: 4px;
  background: #fff; cursor: pointer; position: relative;
  transition: background .12s ease, border-color .12s ease;
}
.platform-pick__item input[type=checkbox]:hover { border-color: var(--bf-thread); }
.platform-pick__item input[type=checkbox]:checked {
  background: var(--bf-thread); border-color: var(--bf-thread);
}
.platform-pick__item input[type=checkbox]:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.platform-pick__item input[type=checkbox]:focus-visible {
  outline: 2px solid var(--bf-thread); outline-offset: 2px;
}
.platform-pick__warn {
  flex-shrink: 0; margin-left: auto;
  color: var(--bf-amber); font-weight: 700; font-size: 11px;
}

/* ── SHORT-VIEWPORT LAYOUT ──────────────────────────────────────────
   A 1366x768 laptop has roughly 600px of usable height after browser chrome.
   Several containers were sized against the viewport on the assumption of a
   desktop monitor, so content ran past the fold. These reclaim the height by
   trimming chrome rather than by shrinking text. */
@media (max-height: 820px) {
  .bf-main { padding-top: 16px; padding-bottom: 16px; }
  .page-header, .ph { margin-bottom: 14px; min-height: 60px; padding-top: 12px; padding-bottom: 12px; }
  /* Includes the dashboard subtitle: it is the same kind of line and the same
     trade. Without it listed here the dashboard kept its subtitle on a short
     laptop while every other page dropped theirs. */
  .page-sub, .page-subtitle, .bfd__sub { display: none; }  /* decorative once you know the screen */
  .table-wrapper { max-height: 56vh; }
  .results-card .table-wrapper { max-height: 62vh; }
  .nice-list { max-height: 132px; }
  .platform-pick { max-height: 140px; }
  .kpi-card { padding: 12px 14px; }
}
@media (max-height: 680px) {
  .bf-main { padding-top: 10px; padding-bottom: 10px; }
  .table-wrapper { max-height: 48vh; }
  .results-card .table-wrapper { max-height: 56vh; }
  .nice-list { max-height: 108px; }
  .platform-pick { max-height: 112px; }
  .kpi-grid { display: none; }                        /* the table is the point on a short screen */
}

/* ── NARROW LAPTOP WIDTHS ───────────────────────────────────────────
   1280-1440px is the common laptop range and fell between the existing
   breakpoints, so the sidebar plus a wide table overflowed. */
@media (max-width: 1440px) {
  :root { --sidebar-width: 208px; }
  .bf-main { padding-left: 20px; padding-right: 20px; }
  .platform-pick { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
}
@media (max-width: 1280px) {
  :root { --sidebar-width: 188px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ DASHBOARD ════════════════════════════════════════════════ */
/* Two explicit tracks: a wide main column and a narrow side rail.
   `minmax(0, …)` + `min-width: 0` are load-bearing — a grid item defaults to
   `min-width: auto`, so the wide Recent-Searches table used to force its own
   track past the available width and ride over the panels beside it. */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--gap-section);
  align-items: start;
}
.dashboard-grid > * { min-width: 0; }
.dashboard-main { min-width: 0; }
.dashboard-side {
  display: flex; flex-direction: column; gap: var(--gap-section);
  min-width: 0;
}
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: var(--pad-card); }
.quick-action-btn {
  flex-direction: column; gap: 7px; padding: 16px 12px;
  background: var(--bf-surface-soft); border: 1px solid var(--bf-border);
  border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--bf-ink);
  text-align: center;
}
.quick-action-btn:hover {
  background: var(--bf-thread-soft); border-color: var(--bf-thread-mid);
  color: var(--bf-thread-dark); transform: translateY(-1px);
}
.qa-icon { font-size: 19px; color: var(--bf-thread); }

/* ═══ DETAIL GRIDS ═════════════════════════════════════════════ */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.detail-field { display: flex; flex-direction: column; gap: 2px; }
.detail-field > span:first-child, .detail-field label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bf-text-light);
}

/* Login / Register wordmark */
.brand-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -.025em;
  color: var(--bf-ink); line-height: 1.2;
}
.brand-sub {
  font-size: 10.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bf-text-light); margin-top: 1px;
}

/* Dashboard agent list */
/* ═══ ACCESSIBILITY FLOOR ══════════════════════════════════════ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--bf-thread);
  outline-offset: 2px;
}
.nav-link-item:focus-visible { outline-color: var(--bf-foil); }
/* FocusOnNavigate moves focus to each page's <h1> (tabindex="-1") so a screen reader announces the new
   page. That heading is not interactive, and the floor rule above drew an orange ring round every
   page title after navigation. Focus still lands there; only the ring is dropped. */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .settings-layout, .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
  :root { --gap-page: 20px; --pad-card: 18px; --sidebar-width: 224px; }
  .kpi-grid, .kpi-grid.kpi-3 { grid-template-columns: repeat(2, 1fr); }
  .form-grid-2 { grid-template-columns: 1fr; }
  .logo-sub { display: none; }
}

@media (max-width: 860px) {
  /* Sidebar becomes an overlay drawer, toggled by the existing nav-open class. */
  .bf-sidebar {
    position: fixed; top: var(--navbar-height); left: 0;
    height: calc(100vh - var(--navbar-height));
    z-index: 150;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow: 24px 0 60px -20px rgba(0,0,0,.5);
  }
  .bf-layout.nav-open .bf-sidebar { transform: translateX(0); }
  /* The toggle also adds .sidebar-collapsed; on mobile the drawer keeps its width. */
  .sidebar-collapsed .bf-sidebar {
    width: min(82vw, 288px); padding: 18px 0 22px;
    overflow-y: auto; border-right: none;
  }
  .mobile-nav-backdrop {
    display: block; position: fixed; inset: var(--navbar-height) 0 0 0;
    background: rgba(21,26,45,.45); z-index: 140;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .bf-layout.nav-open .mobile-nav-backdrop { opacity: 1; pointer-events: auto; }
  .user-details { display: none; }
  .token-label { display: none; }
}

@media (max-width: 768px) {
  :root { --gap-page: 15px; --gap-section: 15px; --pad-card: 16px; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header__actions .btn, .page-header__actions .btn-primary { flex: 1; }
  .page-title, .ph__title { font-size: 22px; }
  .kpi-grid, .kpi-grid.kpi-3 { grid-template-columns: 1fr 1fr; gap: 11px; }
  .kpi-card { padding: 14px; gap: 11px; }
  .kpi-icon { width: 32px; height: 32px; font-size: 14px; }
  .kpi-value, .kpi-card__value { font-size: 20px; }
  .data-table, .bf-table { min-width: 700px; }
  .data-table thead th, .data-table tbody td { padding: 10px 12px; }
  .form-row { flex-direction: column; gap: 12px; }
  .form-col, .form-col-lg { min-width: 0; }
  .platforms-panel { padding: 12px 16px 14px; }
  .platforms-hint { max-width: none; }
  .search-progress { margin: 0 16px 14px; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .modal-panel, .modal, .bf-modal { max-width: 100%; max-height: 92vh; }
  .modal-overlay, .bf-modal-backdrop { padding: 12px; }
  .filter-search, .filter-bar__search, .filter-bar__select { max-width: none; width: 100%; }
  .filter-bar, .filter-row { gap: 8px; }
  .bulk-bar { padding: 10px 16px; }
  .token-summary { gap: 16px; }
}

@media (max-width: 520px) {
  :root { --gap-page: 12px; --pad-card: 14px; }
  .kpi-grid, .kpi-grid.kpi-3 { grid-template-columns: 1fr; }
  .navbar-right { gap: 8px; }
  .token-badge { display: none; }
  .bf-navbar-inner { padding: 0 14px; }
  .login-card { padding: 26px 20px; }
  .quick-actions { grid-template-columns: 1fr; }
  .page-title { font-size: 18px; }
}

/* ═══ PRINT — evidence exports should look like documents ══════ */
@media print {
  body { background: #fff; }
  body::before, .bf-navbar, .bf-sidebar, .bulk-bar,
  .page-header__actions, .pagination, .mobile-nav-backdrop { display: none !important; }
  .bf-body { margin-top: 0; }
  .bf-main { padding: 0; overflow: visible; }
  .bf-card, .card, .table-card, .kpi-card { box-shadow: none; border-color: #ccc; }
  .data-table thead th { position: static; }
}

/* ── AI remark on a filed message ──────────────────────────────────────────
   Set apart from the correspondence it sits under. The mail is the record; the
   reading is commentary on it, and the two must never be mistaken for each other
   when a file is read back as evidence. Hence the tag, the tint and the inset
   rule rather than another paragraph in the same voice. */
.ai-remark {
  margin: 8px 0 0; padding: 8px 11px;
  background: var(--bf-foil-soft); border-left: 3px solid var(--bf-foil);
  border-radius: 0 6px 6px 0;
}
.ai-remark.is-review { background: var(--bf-amber-soft); border-left-color: var(--bf-amber); }
.ai-remark.is-failed { background: var(--bf-seal-soft); border-left-color: var(--bf-seal); }

.ai-remark__head {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--bf-text);
}
.ai-remark__tag {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 5px; border-radius: 3px;
  background: var(--bf-ink); color: #fff;
}
.ai-remark__text {
  margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--bf-text-muted);
}

/* ── Theme picker ──────────────────────────────────────────────────────────
   Each card previews ITSELF using inline styles from its own token values, not
   the live custom properties — otherwise all five cards would render in whatever
   theme is currently applied and the picker would show one colour scheme five
   times, which is the one thing it must not do. */
/* ── Theme picker ──
   Each card is a miniature of the application as it now looks, drawn in that theme's own colours. */
.theme-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.theme-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(23, 28, 43, .04), 0 4px 16px -10px rgba(23, 28, 43, .14);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.theme-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(23, 28, 43, .05), 0 14px 28px -16px rgba(23, 28, 43, .24); }
.theme-card.is-on { border-color: var(--bf-thread); box-shadow: 0 0 0 3px var(--bf-thread-soft), 0 4px 16px -10px rgba(23, 28, 43, .14); }

.theme-prev { display: flex; height: 150px; border-bottom: 1px solid; overflow: hidden; }
.theme-prev__side { flex: 0 0 34px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 0; }
.theme-prev__logo { width: 16px; height: 16px; border-radius: 5px; margin-bottom: 4px; }
.theme-prev__nav { width: 18px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
.theme-prev__nav.is-on { width: 20px; }
.theme-prev__main { flex: 1 1 auto; min-width: 0; padding: 11px 12px; display: flex; flex-direction: column; gap: 9px; }
.theme-prev__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.theme-prev__btn {
  flex-shrink: 0; padding: 4px 9px; border-radius: 6px;
  color: #fff; font-size: 9px; font-weight: 600; white-space: nowrap;
}
.theme-prev__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.theme-prev__card {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-width: 0;
  padding: 8px 9px; border: 1px solid; border-radius: 8px;
  box-shadow: 0 1px 2px rgba(23, 28, 43, .05);
}
.theme-prev__row { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; }
.theme-prev__chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 5px; font-size: 9px; font-weight: 700;
}
.theme-prev__pill { margin-top: 1px; padding: 1px 6px; border: 1px solid; border-radius: 999px; font-size: 7.5px; font-weight: 600; }

.theme-swatches { display: flex; height: 8px; }
.theme-swatches span { flex: 1 1 0; }

.theme-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.theme-card__name { font-size: 15px; font-weight: 650; color: var(--bf-ink); display: flex; align-items: center; gap: 8px; }
.theme-card__on {
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--bf-jade-soft); color: var(--bf-jade);
}
.theme-card__desc { margin: 0; font-size: 12.5px; color: var(--bf-text-muted); line-height: 1.5; flex: 1; }

/* Measured contrast, each marked against AA. */
.theme-card__contrast { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 4px; padding: 0; list-style: none; }
.theme-card__contrast li {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 6px; font-size: 10.5px;
  background: var(--bf-surface-sunk); color: var(--bf-text-muted);
}
.theme-card__contrast li strong { font-weight: 650; color: var(--bf-ink); font-variant-numeric: tabular-nums; }
.theme-card__contrast li.is-pass::before { content: "✓"; color: var(--bf-jade); font-weight: 700; }
.theme-card__contrast li.is-warn { background: var(--bf-amber-soft); }
.theme-card__contrast li.is-warn::before { content: "!"; color: var(--bf-amber); font-weight: 800; }
.theme-card .btn-primary, .theme-card .btn-outline-sm { align-self: flex-start; }

/* ── Certificate picker on the notice composer ─────────────────────────────
   A distinct block above the footer, so choosing to send a client's registration
   is a deliberate act rather than one more control in a row of buttons. */
.notice-attach {
  margin: 12px var(--pad-card) 0; padding: 10px 12px;
  background: var(--bf-surface-soft); border: 1px solid var(--bf-border);
  border-radius: 8px; display: flex; flex-direction: column; gap: 7px;
}
.notice-attach__head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.notice-attach__row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; cursor: pointer; line-height: 1.5;
}
.notice-attach__row input { margin-top: 2px; flex: 0 0 auto; }

/* ── Wide grids must overflow before they can scroll ───────────────────────
   The minimum used to exist only below 768px, which left the gap this fixes:
   between 768px and roughly 1200px — a tablet, or a laptop with the sidebar open
   — a nine- or ten-column grid still had width:100% and no floor, so it shrank to
   fit rather than overflowing. A container that is never overflowed never
   scrolls, whatever its overflow property says.

   840px rather than a larger figure: it is wide enough that the dashboard's
   nine-column tenant grid and the ten-column search grid overflow and scroll,
   and narrow enough that a three- or four-column table still fits inside the
   content area at these widths and does NOT gain a scrollbar it does not need. */
@media (max-width: 1200px) {
  .table-wrapper > .data-table,
  .table-wrapper > .bf-table,
  .bfd-tablewrap > .bfd-table { min-width: 840px; }
}

/* Below 768px the content area is narrow enough that even a modest table needs
   the floor, and the existing 700px rule above is raised to match so the two do
   not disagree about the same table at two widths. */
@media (max-width: 768px) {
  .table-wrapper > .data-table,
  .table-wrapper > .bf-table,
  .bfd-tablewrap > .bfd-table { min-width: 760px; }
}

/* The results grid keeps its own, larger floor at every width.
   The generic .table-wrapper > .bf-table rules above are MORE specific than .results-table, so
   without this they would cap the search results at 840px — narrower than its own columns need —
   and the grid would squash again below 1200px. Stated last and at equal specificity so it wins. */
.table-wrapper > .results-table { min-width: 1308px; }

/* ══ Website scan ═══════════════════════════════════════════════════════════
   A form, the scan in progress or its result, and recent scans beside them. */
.scan-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px; align-items: start;
}
@media (max-width: 1100px) { .scan-layout { grid-template-columns: minmax(0, 1fr); } }
.scan-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.scan-card__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 18px 20px 0;
}
.scan-card__head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--bf-ink); letter-spacing: -.01em; }
.scan-card__head h2 a { color: var(--bf-thread-dark); text-decoration: none; }
.scan-card__head h2 a:hover { text-decoration: underline; }
.scan-card__head p { margin: 4px 0 0; font-size: 12.5px; color: var(--bf-text-muted); }

/* Form */
.scan-form__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 16px; padding: 16px 20px 0;
}
@media (max-width: 760px) { .scan-form__grid { grid-template-columns: minmax(0, 1fr); } }
.scan-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.scan-field__label { font-size: 12.5px; font-weight: 600; color: var(--bf-ink); }
.scan-field__label em { font-style: normal; color: var(--bf-seal); }

.scan-url {
  display: flex; align-items: stretch; min-width: 0;
  border: 1px solid var(--bf-border); border-radius: 9px; overflow: hidden; background: var(--bf-surface);
  transition: border-color .12s, box-shadow .12s;
}
.scan-url:focus-within { border-color: var(--bf-thread); box-shadow: 0 0 0 3px var(--bf-thread-soft); }
.scan-url.is-error { border-color: var(--bf-seal); }
.scan-url__prefix {
  display: inline-flex; align-items: center; padding: 0 10px;
  background: var(--bf-surface-sunk); border-right: 1px solid var(--bf-border);
  font-family: var(--font-mono); font-size: 12px; color: var(--bf-text-light);
}
.scan-url input {
  flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 12px; border: 0; outline: none;
  background: transparent; font-family: var(--font-mono); font-size: 13px; color: var(--bf-ink);
}

.scan-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 10px; background: var(--bf-surface-sunk); align-self: flex-start; }
.scan-seg button {
  padding: 6px 12px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--bf-text-muted);
}
.scan-seg button:hover:not(:disabled) { color: var(--bf-ink); }
.scan-seg button.is-on { background: var(--bf-surface); color: var(--bf-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 28, 43, .08), 0 0 0 1px var(--bf-border); }
.scan-seg button:disabled { opacity: .4; cursor: default; }
.scan-seg button:focus-visible { outline: 2px solid var(--bf-thread); outline-offset: 1px; }

.scan-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 20px 0; font-size: 12.5px; }
.scan-links__label { color: var(--bf-text-muted); margin-right: 2px; }
.scan-links__chip { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; border: 1px solid; }
.scan-links__chip.is-ref { background: var(--bf-foil-soft); border-color: color-mix(in srgb, var(--bf-foil) 35%, transparent); color: var(--bf-ink); }
.scan-links__chip.is-ign { background: var(--bf-surface-sunk); border-color: var(--bf-border); color: var(--bf-text-muted); }
.scan-links--none { color: var(--bf-text-muted); }
.scan-links--none a { color: var(--bf-thread-dark); }

.scan-form__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding: 14px 20px; border-top: 1px solid var(--bf-border-soft);
  background: var(--bf-surface-soft); border-radius: 0 0 var(--card-radius) var(--card-radius);
}
.scan-form__note { font-size: 12px; color: var(--bf-text-light); }
.scan-run { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; }

/* Progress */
.scan-progress { padding-bottom: 18px; }
.scan-steps { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 20px 14px; padding: 0; list-style: none; }
.scan-steps li { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--bf-text-light); }
.scan-steps__dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bf-border);
  font-size: 11px; font-weight: 700; color: #fff;
}
.scan-steps li.is-on { color: var(--bf-ink); font-weight: 600; }
.scan-steps li.is-on .scan-steps__dot { border-color: var(--bf-thread); box-shadow: 0 0 0 3px var(--bf-thread-soft); }
.scan-steps li.is-done { color: var(--bf-text-muted); }
.scan-steps li.is-done .scan-steps__dot { background: var(--bf-jade); border-color: var(--bf-jade); }

.scan-bar { height: 8px; margin: 0 20px; border-radius: 4px; background: var(--bf-surface-sunk); overflow: hidden; }
.scan-bar span { display: block; height: 100%; border-radius: 4px; background: var(--bf-thread); transition: width .6s ease; }
.scan-progress__msg { margin: 10px 20px 0; font-size: 13px; color: var(--bf-ink); }
.scan-progress__hint { margin: 4px 20px 0; font-size: 12px; color: var(--bf-text-light); }

.scan-state { padding: 18px 20px; }
.scan-state h3 { margin: 0 0 6px; font-size: 15px; }
.scan-state p { margin: 0 0 12px; font-size: 13px; color: var(--bf-text-muted); line-height: 1.55; }
.scan-state--bad { border-left: 3px solid var(--bf-seal); }

/* Pills */
.scan-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid;
}
.scan-pill .spinner { width: 12px; height: 12px; }
.scan-pill--running { background: var(--bf-thread-soft); color: var(--bf-thread-dark); border-color: var(--bf-thread-mid); }
.scan-pill--ok { background: var(--bf-jade-soft); color: var(--bf-jade); border-color: color-mix(in srgb, var(--bf-jade) 30%, transparent); }
.scan-pill--warn { background: var(--bf-amber-soft); color: var(--bf-amber); border-color: color-mix(in srgb, var(--bf-amber) 30%, transparent); }
.scan-pill--bad { background: var(--bf-seal-soft); color: var(--bf-seal); border-color: color-mix(in srgb, var(--bf-seal) 30%, transparent); }

/* Result */
.scan-result { padding-bottom: 6px; }
.scan-result__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.scan-notice {
  display: flex; flex-direction: column; gap: 3px; margin: 16px 20px 0; padding: 11px 14px;
  border-radius: 10px; font-size: 13px; line-height: 1.55; border-left: 3px solid;
}
.scan-notice strong { color: var(--bf-ink); }
.scan-notice span { color: var(--bf-text-muted); }
.scan-notice.is-warn { background: var(--bf-amber-soft); border-left-color: var(--bf-amber); }
.scan-notice.is-bad { background: var(--bf-seal-soft); border-left-color: var(--bf-seal); }

.scan-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 16px 20px 0; }
.scan-stat {
  display: flex; flex-direction: column; gap: 1px; padding: 11px 14px;
  border: 1px solid var(--bf-border); border-radius: 10px; background: var(--bf-surface);
}
.scan-stat span { font-size: 12px; color: var(--bf-text-muted); }
.scan-stat strong { font-size: 22px; font-weight: 700; color: var(--bf-ink); letter-spacing: -.02em; }
.scan-stat em { font-style: normal; font-size: 11.5px; color: var(--bf-text-light); }
.scan-stat.is-warn strong { color: var(--bf-amber); }
.scan-stat.is-bad strong { color: var(--bf-seal); }

.scan-tabs { display: flex; gap: 4px; margin: 18px 20px 0; border-bottom: 1px solid var(--bf-border); }
.scan-tabs button {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--bf-text-muted);
}
.scan-tabs button span {
  min-width: 20px; padding: 0 6px; border-radius: 9px; background: var(--bf-surface-sunk);
  font-size: 11px; font-weight: 700; text-align: center; color: var(--bf-text-muted);
}
.scan-tabs button:hover { color: var(--bf-ink); }
.scan-tabs button.is-on { color: var(--bf-ink); font-weight: 650; border-bottom-color: var(--bf-thread); }
.scan-tabs button.is-on span { background: var(--bf-thread); color: #fff; }

.scan-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px 0; }
.scan-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.scan-chips button {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px;
  border: 1px solid var(--bf-border); border-radius: 999px; background: var(--bf-surface); cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--bf-text-muted);
}
.scan-chips button span { font-weight: 700; }
.scan-chips button:hover { color: var(--bf-ink); border-color: var(--bf-border-strong); }
.scan-chips button.is-on { background: var(--bf-ink); border-color: var(--bf-ink); color: var(--bf-surface); }
.scan-search { max-width: 220px; margin-left: auto; height: 32px; font-size: 12.5px; }

.scan-empty { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 34px 20px; font-size: 13px; }
.scan-empty strong { color: var(--bf-ink); }
.scan-empty span { color: var(--bf-text-muted); max-width: 440px; }

.scan-findings { list-style: none; margin: 0; padding: 14px 20px 14px; display: flex; flex-direction: column; gap: 10px; }
.scan-finding {
  padding: 13px 15px; border: 1px solid var(--bf-border); border-left: 3px solid var(--bf-border-strong);
  border-radius: 10px; background: var(--bf-surface);
}
.scan-finding.sev-critical { border-left-color: var(--bf-seal); }
.scan-finding.sev-high { border-left-color: #eb6834; }
.scan-finding.sev-medium { border-left-color: var(--bf-amber); }
.scan-finding.sev-low { border-left-color: var(--bf-foil); }
.scan-finding.is-dismissed { opacity: .6; }
.scan-finding__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.scan-finding__term { font-size: 14px; color: var(--bf-ink); }
.scan-finding__cat { padding: 2px 8px; border-radius: 6px; background: var(--bf-surface-sunk); font-size: 11.5px; color: var(--bf-text-muted); }
.scan-finding__conf { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11.5px; color: var(--bf-text-muted); font-variant-numeric: tabular-nums; }
.scan-finding__meter { width: 46px; height: 5px; border-radius: 3px; background: var(--bf-surface-sunk); overflow: hidden; }
.scan-finding__meter span { display: block; height: 100%; background: var(--bf-text-light); }
.scan-finding__status { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--bf-surface-sunk); color: var(--bf-text-muted); }
.scan-finding__status.is-potential { background: var(--bf-amber-soft); color: var(--bf-amber); }
.scan-finding__status.is-confirmed { background: var(--bf-seal-soft); color: var(--bf-seal); }
.scan-finding__url { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--bf-thread-dark); text-decoration: none; word-break: break-all; }
.scan-finding__url:hover { text-decoration: underline; }
.scan-finding__quote {
  margin: 9px 0 0; padding: 7px 11px; border-left: 2px solid var(--bf-border-strong); border-radius: 0 6px 6px 0;
  background: var(--bf-surface-soft); font-size: 12.5px; color: var(--bf-text); line-height: 1.55;
}
.scan-finding__why { margin: 8px 0 0; font-size: 12.5px; color: var(--bf-text-muted); line-height: 1.55; }
.scan-finding__next { margin: 5px 0 0; font-size: 12.5px; color: var(--bf-ink); }
.scan-finding__next span { font-weight: 600; }
.scan-finding__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; }
.scan-finding__sent { font-size: 12px; font-weight: 600; color: var(--bf-jade); }

.scan-pages { margin-top: 12px; }
.scan-page-title { font-size: 12.5px; color: var(--bf-ink); font-weight: 500; }
.scan-page-url { font-family: var(--font-mono); font-size: 11.5px; color: var(--bf-text-light); text-decoration: none; word-break: break-all; }
.scan-page-url:hover { color: var(--bf-thread-dark); }
.scan-page-state { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.scan-page-state.is-ok { background: var(--bf-jade-soft); color: var(--bf-jade); }
.scan-page-state.is-blocked { background: var(--bf-amber-soft); color: var(--bf-amber); }
.scan-page-state.is-gone, .scan-page-state.is-failed { background: var(--bf-seal-soft); color: var(--bf-seal); }
.scan-page-state.is-official { background: var(--bf-surface-sunk); color: var(--bf-text-muted); }

/* Recent scans */
.scan-recent { position: sticky; top: 16px; padding-bottom: 8px; }
.scan-recent ul { list-style: none; margin: 10px 0 0; padding: 0 8px; max-height: 70vh; overflow-y: auto; }
.scan-recent__empty { margin: 12px 20px 14px; font-size: 12.5px; color: var(--bf-text-light); }
.scan-recent__item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
  text-decoration: none; color: inherit; transition: background-color .12s;
}
.scan-recent__item:hover { background: var(--bf-surface-soft); }
.scan-recent__item.is-on { background: var(--bf-thread-soft); }
.scan-recent__dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bf-border-strong); }
.scan-recent__dot.is-running { background: var(--bf-thread); box-shadow: 0 0 0 3px var(--bf-thread-soft); }
.scan-recent__dot.is-failed { background: var(--bf-text-light); }
.scan-recent__dot.is-risk { background: var(--bf-seal); }
.scan-recent__dot.is-found { background: var(--bf-amber); }
.scan-recent__dot.is-clean { background: var(--bf-jade); }
.scan-recent__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.scan-recent__brand { font-size: 13px; font-weight: 600; color: var(--bf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-recent__host { font-size: 11.5px; color: var(--bf-text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-recent__meta { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; font-size: 11px; color: var(--bf-text-light); }
.scan-recent__meta .has-findings { color: var(--bf-amber); font-weight: 600; }

/* ══ Search prompt versions ═════════════════════════════════════════════════ */
.prompt-versions { margin: 14px var(--pad-card) 18px; }
.prompt-versions__head h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--bf-ink); }
.prompt-versions__head p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--bf-text-muted); max-width: 760px; }
.prompt-versions__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.prompt-version {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
  border: 1px solid var(--bf-border); border-radius: 12px; background: var(--bf-surface);
}
.prompt-version.is-on { border-color: var(--bf-thread); box-shadow: 0 0 0 3px var(--bf-thread-soft); }
.prompt-version__top { display: flex; align-items: center; gap: 8px; }
.prompt-version__top strong { font-size: 14px; color: var(--bf-ink); }
.prompt-version__badge {
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--bf-thread-soft); color: var(--bf-thread-dark);
}
.prompt-version__desc { margin: 0; font-size: 12.5px; color: var(--bf-text-muted); line-height: 1.5; }
.prompt-version__list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--bf-text); line-height: 1.6; flex: 1; }
.prompt-version button { align-self: flex-start; }
.prompt-versions__note { margin: 10px 0 0; font-size: 12.5px; color: var(--bf-jade); font-weight: 600; }

/* The version that judged a search — on its results and in history. */
.prompt-chip {
  display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; vertical-align: middle; white-space: nowrap; border: 1px solid;
}
.prompt-chip--classic { background: var(--bf-surface-sunk); color: var(--bf-text-muted); border-color: var(--bf-border); }
.prompt-chip--revised { background: var(--bf-foil-soft); color: var(--bf-ink); border-color: color-mix(in srgb, var(--bf-foil) 40%, transparent); }

/* The Super Admin's per-search picker, beside the run button. */
.prompt-pick { width: auto; max-width: 230px; height: 38px; margin-right: 8px; font-size: 12.5px; }

/* ── Search results: one filter per column ──
   A second header row, quieter than the column names, so the filters read as part of the table. */
.results-table thead tr.results-filter-row th {
  padding: 4px 6px 8px; background: var(--bf-surface-soft); border-bottom: 1px solid var(--bf-border);
  cursor: default; font-weight: 400; text-transform: none; letter-spacing: 0;
}
.col-filter {
  display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 28px; padding: 0 7px;
  border: 1px solid var(--bf-border); border-radius: 6px; background: var(--bf-surface);
  font-family: inherit; font-size: 11.5px; color: var(--bf-ink);
}
.col-filter:focus { outline: none; border-color: var(--bf-thread); box-shadow: 0 0 0 2px var(--bf-thread-soft); }
.col-filter::placeholder { color: var(--bf-text-light); }
select.col-filter { cursor: pointer; padding: 0 2px 0 6px; }

/* COLUMN WIDTHS, RESIZED FOR THE SORT ARROW AND THE FILTER ROW.
   The widths above were cut to fit each heading's word alone. With a sort arrow beside the word and a
   filter under it, Country, Currency, Match and Notice were squeezed until the headings clipped, the
   arrows vanished and the dropdowns ran into the next column. Each narrow column is now wide enough for
   its heading, arrow and a readable filter; Misuse description still takes all the remaining width,
   and the table scrolls sideways rather than squeezing. Positional, like the blocks above. */
.results-table { min-width: 1580px; }
.results-table th:nth-child(6)  { width: 104px; }   /* Category */
.results-table th:nth-child(7)  { width: 100px; }   /* Country  */
.results-table th:nth-child(8)  { width: 104px; }   /* Currency */
.results-table th:nth-child(9)  { width: 112px; }   /* Status   */
.results-table th:nth-child(10) { width: 100px; }   /* Priority */
.results-table th:nth-child(11) { width: 92px;  }   /* Match %  */
.results-table th:nth-child(12) { width: 96px;  }   /* Notice   */
.results-table th:nth-child(13) { width: 104px; }   /* Actions  */

@media (max-width: 1440px) {
  .results-table { min-width: 1540px; }
  .results-table th:nth-child(6)  { width: 96px;  }
  .results-table th:nth-child(7)  { width: 92px;  }
  .results-table th:nth-child(8)  { width: 96px;  }
  .results-table th:nth-child(9)  { width: 104px; }
  .results-table th:nth-child(10) { width: 92px;  }
  .results-table th:nth-child(11) { width: 86px;  }
  .results-table th:nth-child(12) { width: 90px;  }
  .results-table th:nth-child(13) { width: 96px;  }
}

/* Heading and arrow on one line, the arrow tight to the word. */
.results-table thead tr:first-child th { white-space: nowrap; vertical-align: middle; }
.results-table thead tr.results-filter-row th { padding: 6px 6px 8px; vertical-align: middle; }
.results-table thead tr.results-filter-row th.col-check,
.results-table thead tr.results-filter-row th.col-actions { padding: 0; }

/* ── Listing preview: live page or summary card ── */
.preview-modal__open { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.preview-modal__open:hover { color: #fff; }
.preview-modal__modes { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--bf-surface-sunk); }
.preview-modal__modes button {
  padding: 5px 11px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--bf-text-muted);
}
.preview-modal__modes button.is-on { background: var(--bf-surface); color: var(--bf-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 28, 43, .1); }

.preview-modal__state {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 13px; color: var(--bf-text-muted); background: var(--bf-surface-soft);
}

.preview-card {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px;
  padding: 24px; background: var(--bf-surface-soft);
}
.preview-card__media {
  align-self: start; display: flex; align-items: center; justify-content: center;
  min-height: 220px; border: 1px solid var(--bf-border); border-radius: 12px; overflow: hidden; background: var(--bf-surface);
}
.preview-card__media img { display: block; max-width: 100%; max-height: 440px; object-fit: contain; }
.preview-card__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.preview-card__host { font-family: var(--font-mono); font-size: 12px; color: var(--bf-text-light); }
.preview-card__body h3 { margin: 0; font-size: 18px; line-height: 1.35; color: var(--bf-ink); word-break: break-word; }
.preview-card__body p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--bf-text-muted); }
.preview-card__facts {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 6px 0 0; padding: 12px 14px;
  border: 1px solid var(--bf-border); border-radius: 10px; background: var(--bf-surface); font-size: 12.5px;
}
.preview-card__facts dt { color: var(--bf-text-light); }
.preview-card__facts dd { margin: 0; color: var(--bf-ink); }
.preview-card__why {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px;
  padding: 12px 14px; border-left: 3px solid var(--bf-amber); border-radius: 0 10px 10px 0;
  background: var(--bf-amber-soft); font-size: 12.5px; line-height: 1.5; color: var(--bf-ink);
}
.preview-card__why .btn-primary { text-decoration: none; margin-top: 2px; }
.preview-card__muted { color: var(--bf-text-muted); }
@media (max-width: 760px) { .preview-card { grid-template-columns: minmax(0, 1fr); padding: 16px; } }

/* ══ Flag dialog ════════════════════════════════════════════════════════════ */
.flag-dlg { display: flex; flex-direction: column; gap: 8px; }
.flag-dlg__existing {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 9px;
  background: var(--bf-surface-sunk); font-size: 12.5px; color: var(--bf-text-muted);
}
.flag-dlg__existing strong { color: var(--bf-ink); }
.flag-dlg__existing q { color: var(--bf-ink); font-style: italic; }
.flag-dlg__scope {
  display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-radius: 9px;
  border-left: 3px solid var(--bf-foil); background: var(--bf-foil-soft); font-size: 12.5px; line-height: 1.5;
}
.flag-dlg__scope.is-site { border-left-color: var(--bf-thread); background: var(--bf-thread-soft); }
.flag-dlg__history { color: var(--bf-seal); font-weight: 600; }
.flag-dlg__cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.flag-cat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px;
  border: 1px solid var(--bf-border); border-radius: 9px; background: var(--bf-surface); cursor: pointer;
  font-family: inherit; text-align: left;
}
.flag-cat strong { font-size: 12.5px; color: var(--bf-ink); }
.flag-cat span { font-size: 11px; color: var(--bf-text-muted); line-height: 1.35; }
.flag-cat:hover { border-color: var(--bf-border-strong); }
.flag-cat.is-on.flag-cat--bad { border-color: var(--bf-seal); background: var(--bf-seal-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bf-seal) 18%, transparent); }
.flag-cat.is-on.flag-cat--ok { border-color: var(--bf-jade); background: var(--bf-jade-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bf-jade) 18%, transparent); }
.flag-cat.is-on.flag-cat--watch { border-color: var(--bf-amber); background: var(--bf-amber-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bf-amber) 18%, transparent); }
.flag-cat:focus-visible { outline: 2px solid var(--bf-thread); outline-offset: 1px; }
.flag-dlg__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.flag-dlg__chips button {
  max-width: 100%; padding: 3px 10px; border: 1px dashed var(--bf-border-strong); border-radius: 999px;
  background: var(--bf-surface); cursor: pointer; font-family: inherit; font-size: 11.5px; color: var(--bf-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flag-dlg__chips button:hover { border-style: solid; color: var(--bf-ink); }
.flag-dlg__chips button.is-ai { border-style: solid; background: var(--bf-surface-sunk); }
.flag-dlg__withdraw { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 10px 12px; border-radius: 9px; background: var(--bf-seal-soft); }
.flag-dlg__foot { display: flex; align-items: center; gap: 8px; }
.flag-dlg__spacer { flex: 1 1 auto; }
.flag-dlg__danger { color: var(--bf-seal); border-color: color-mix(in srgb, var(--bf-seal) 40%, transparent); }

/* The row's flag, coloured by what it says. */
.btn-xs.is-flag { display: inline-flex; align-items: center; justify-content: center; }
.btn-xs.is-flag.is-on.flag-tone--bad { background: var(--bf-seal); border-color: var(--bf-seal); color: #fff; }
.btn-xs.is-flag.is-on.flag-tone--ok { background: var(--bf-jade); border-color: var(--bf-jade); color: #fff; }
.btn-xs.is-flag.is-on.flag-tone--watch { background: var(--bf-amber); border-color: var(--bf-amber); color: #fff; }
.btn-outline-sm.is-on { background: var(--bf-ink); border-color: var(--bf-ink); color: var(--bf-surface); }

/* ══ Enforcement pipeline stages on the Enforcement page ══════════════════ */
.stage-chip {
  display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; white-space: nowrap; border: 1px solid;
  background: var(--bf-surface-sunk); color: var(--bf-text-muted); border-color: var(--bf-border);
}
.stage-chip--awaiting  { background: var(--bf-foil-soft);  color: var(--bf-ink);   border-color: color-mix(in srgb, var(--bf-foil) 35%, transparent); }
.stage-chip--followup,
.stage-chip--review    { background: var(--bf-amber-soft); color: var(--bf-amber); border-color: color-mix(in srgb, var(--bf-amber) 35%, transparent); }
.stage-chip--action    { background: var(--bf-seal-soft);  color: var(--bf-seal);  border-color: color-mix(in srgb, var(--bf-seal) 35%, transparent); }
.stage-chip--escalated { background: #EFEAFD; color: #4a3aa7; border-color: #D6CCF7; }
.stage-chip--resolved  { background: var(--bf-jade-soft);  color: var(--bf-jade);  border-color: color-mix(in srgb, var(--bf-jade) 35%, transparent); }

.next-step-line { margin-top: 3px; font-size: 11.5px; font-weight: 500; color: var(--bf-seal); line-height: 1.4; }

.next-step-box {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--bf-border); border-left: 3px solid var(--bf-border-strong);
  background: var(--bf-surface-soft);
}
.stage-box--action    { border-left-color: var(--bf-seal); }
.stage-box--review,
.stage-box--followup  { border-left-color: var(--bf-amber); }
.stage-box--resolved  { border-left-color: var(--bf-jade); }
.stage-box--awaiting  { border-left-color: var(--bf-foil); }
.stage-box--escalated { border-left-color: #4a3aa7; }
.next-step-box__stage { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.next-step-box__stage .stage-chip { margin-top: 0; }
.next-step-box__what { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--bf-ink); line-height: 1.5; }

.ai-remark__next { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--bf-ink); }

/* ── Guided tour: the workflow diagram on the welcome step ── */
.tour__body ul { margin: 0 0 10px; padding-left: 18px; }
.tour__body li { margin-bottom: 4px; }
.tour-flow {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
  margin: 4px 0 14px; padding: 0; list-style: none; counter-reset: flow;
}
.tour-flow li {
  position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0;
  padding: 10px 8px 9px; border-radius: 10px; text-align: center;
  background: var(--bf-surface-sunk); counter-increment: flow;
}
.tour-flow li::before {
  content: counter(flow); display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin: 0 auto 4px; border-radius: 50%;
  background: var(--bf-thread); color: #fff; font-size: 11px; font-weight: 700;
}
.tour-flow li:not(:last-child)::after {
  content: "→"; position: absolute; right: -8px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--bf-text-light); z-index: 1;
}
.tour-flow b { font-size: 12.5px; color: var(--bf-ink); }
.tour-flow span { font-size: 10.5px; line-height: 1.35; color: var(--bf-text-muted); }
@media (max-width: 560px) {
  .tour-flow { grid-template-columns: minmax(0, 1fr); }
  .tour-flow li:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -11px; transform: translateX(-50%); }
}

/* Room for the five-step workflow diagram. */
.tour { max-width: 580px; }

/* ══════════════════════════════════════════════════════════════════════════
   FILE ACTIVITY LOG  (/files/{id}/activity)  and  AI COST PER FILE  (/admin/file-costs)
   ══════════════════════════════════════════════════════════════════════════ */
.fa-head { margin-bottom: 18px; }
.fa-back { font-size: 12px; color: var(--bf-text-muted); text-decoration: none; }
.fa-back:hover { color: var(--bf-thread); }
.fa-head__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.fa-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 22px; }
.fa-sub { margin: 6px 0 0; font-size: 13px; color: var(--bf-text-muted); overflow-wrap: anywhere; }
.fa-paused {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 12px;
  background: color-mix(in srgb, var(--bf-seal) 12%, transparent); color: var(--bf-seal);
  border: 1px solid color-mix(in srgb, var(--bf-seal) 35%, transparent);
}

.fa-stats, .fc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.fa-stat, .fc-stat {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 16px;
  background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 10px;
}
.fa-stat--wide { grid-column: span 2; }
.fa-stat span, .fc-stat span { font-size: 11px; color: var(--bf-text-muted); font-weight: 600; }
.fa-stat strong, .fc-stat strong { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--bf-text); }
.fa-stat em, .fc-stat em { font-style: normal; font-size: 12px; color: var(--bf-text-muted); }
.fc-stat.is-warn { border-color: color-mix(in srgb, var(--bf-seal) 40%, var(--bf-border)); }
.fc-stat.is-warn strong { color: var(--bf-seal); }

.fa-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .fa-layout { grid-template-columns: 1fr; } .fa-stat--wide { grid-column: auto; } }

.fa-log { padding: 0; overflow: hidden; }
.fa-log__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--bf-border);
}
.fa-log__head h2 { margin: 0; font-size: 15px; }
.fa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fa-chips button {
  font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--bf-border); background: var(--bf-surface); color: var(--bf-text);
}
.fa-chips button span { margin-left: 4px; color: var(--bf-text-muted); font-variant-numeric: tabular-nums; }
.fa-chips button.is-on { background: var(--bf-thread); border-color: var(--bf-thread); color: #fff; }
.fa-chips button.is-on span { color: rgba(255,255,255,.8); }
.fa-empty { padding: 28px 18px; margin: 0; color: var(--bf-text-muted); text-align: center; }

.fa-timeline { list-style: none; margin: 0; padding: 8px 18px 16px; position: relative; }
.fa-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 12px 0; position: relative; }
.fa-item + .fa-item { border-top: 1px solid var(--bf-border); }
.fa-item__who {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: var(--bf-surface-soft); color: var(--bf-text);
  border: 1px solid var(--bf-border);
}
.fa-item.is-person .fa-item__who { background: var(--bf-thread-soft); color: var(--bf-thread); border-color: color-mix(in srgb, var(--bf-thread) 30%, transparent); }
.fa-item.is-ai .fa-item__who { background: var(--bf-foil-soft); color: var(--bf-ink); border-color: color-mix(in srgb, var(--bf-foil) 40%, transparent); }
.fa-item__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.fa-item__top strong { font-size: 13px; }
.fa-item__top time { font-size: 11px; color: var(--bf-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fa-item__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 3px; font-size: 12px; color: var(--bf-text-muted); }
.fa-item__detail { margin: 6px 0 0; font-size: 13px; color: var(--bf-text); white-space: pre-line; overflow-wrap: anywhere; }
.fa-actor { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 8px; }
.fa-actor--person { background: var(--bf-thread-soft); color: var(--bf-thread); }
.fa-actor--ai { background: var(--bf-foil-soft); color: var(--bf-ink); }
.fa-actor--system { background: var(--bf-surface-soft); color: var(--bf-text-muted); border: 1px solid var(--bf-border); }
.fa-cost { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--bf-text); padding: 1px 7px; border-radius: 8px; border: 1px dashed var(--bf-border); }
.fa-toggle { margin-top: 8px; font: inherit; font-size: 12px; background: none; border: 0; padding: 0; color: var(--bf-thread); cursor: pointer; }
.fa-toggle:hover { text-decoration: underline; }
.fa-msg { margin-top: 8px; border: 1px solid var(--bf-border); border-radius: 8px; overflow: hidden; background: #fff; }
.fa-msg iframe { display: block; width: 100%; height: 320px; border: 0; background: #fff; }
.fa-msg pre { margin: 0; padding: 12px; max-height: 320px; overflow: auto; white-space: pre-wrap; font-size: 12px; color: #1f2328; }
.fa-msg__atts { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--bf-border); background: var(--bf-surface-soft); }

.fa-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
@media (max-width: 1000px) { .fa-side { position: static; } }
.fa-note { padding: 10px 12px; border-radius: 8px; font-size: 13px; background: var(--bf-thread-soft); color: var(--bf-thread); border: 1px solid color-mix(in srgb, var(--bf-thread) 30%, transparent); }
.fa-panel { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.fa-panel h3 { margin: 0; font-size: 13px; }
.fa-panel .form-input { width: 100%; box-sizing: border-box; }
.fa-panel button { align-self: flex-start; }
.fa-panel__hint { margin: 0; font-size: 12px; color: var(--bf-text-muted); }
.fa-panel__link { font-size: 12px; color: var(--bf-thread); text-decoration: none; margin-top: 4px; }
.fa-panel__link:hover { text-decoration: underline; }
.fa-panel--ai.is-paused { border-color: color-mix(in srgb, var(--bf-seal) 40%, var(--bf-border)); }
.fa-ai { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.fa-ai dt { color: var(--bf-text-muted); }
.fa-ai dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.fa-danger { color: var(--bf-seal) !important; border-color: color-mix(in srgb, var(--bf-seal) 45%, transparent) !important; }

.fc-table th.num, .fc-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fc-table tr.is-paused td { background: color-mix(in srgb, var(--bf-seal) 5%, transparent); }

/* PageHeader details. An Actions fragment whose only content is an @if that rendered nothing
   still produces the wrapper, which as a flex item added a stray gap beside the title. */
.ph__actions:empty { display: none; }
/* A file's page is titled by its number, which reads as an identifier everywhere else in the
   application — monospaced — so it keeps that face as a page title. */
.ph--file .ph__title > span:first-child { font-family: var(--font-mono); font-size: 23px; letter-spacing: 0; }

/* Hovering the story pauses it — every part together, so it resumes in step — for anyone who
   wants longer on a scene. The hint says so. */
.lx-hero:hover .st-scene, .lx-hero:hover .st-scene *,
.lx-hero:hover .st-steps li, .lx-hero:hover .st-steps li i { animation-play-state: paused; }
.st-hint { margin: 10px 0 0; text-align: center; font-size: 11.5px; color: rgba(255, 255, 255, .42); }
.lx-hero:hover .st-hint { color: rgba(255, 255, 255, .7); }

/* The matter line on a file's activity page — moved out of the header, which carries the title only. */
.fa-matter { margin: -6px 0 16px; font-size: 13.5px; color: var(--bf-text-muted); overflow-wrap: anywhere; }
.fa-matter strong { color: var(--bf-ink); }

/* ═══ FONT PICKER (/admin/theme) ═══ Each card is set in its own face; only the chosen one is
   loaded everywhere else. */
.font-head { margin: calc(var(--gap-section) + 6px) 0 12px; }
.font-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--bf-ink); }
.font-head p { margin: 4px 0 0; font-size: 13px; color: var(--bf-text-muted); }
.font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.font-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 14px;
  box-shadow: var(--card-shadow); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.font-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .3); }
.font-card.is-on { border-color: var(--bf-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-primary) 18%, transparent); }
.font-card__sample {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--bf-surface-soft, #FAFAFA); border-bottom: 1px solid var(--bf-border); color: var(--bf-ink);
}
.font-card__aa {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px;
  font-size: 28px; font-weight: 700; color: var(--bf-primary);
  background: color-mix(in srgb, var(--bf-primary) 9%, var(--bf-surface));
}
.font-card__lines { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.font-card__lines strong { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.font-card__lines span { font-size: 12px; color: var(--bf-text-muted); }
.font-card__nums { font-variant-numeric: tabular-nums; }
.font-card__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 16px; flex: 1; }
.font-card__name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--bf-ink); }
.font-card__desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--bf-text-muted); flex: 1; }
.font-card__body button { align-self: flex-start; }

/* ═══ USERS, BY COMPANY (/admin/users) ═══ */
.uc-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; align-items: start; }
.uc-rail {
  position: sticky; top: 12px;
  display: flex; flex-direction: column; max-height: calc(100vh - 140px);
  background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 14px;
  box-shadow: var(--card-shadow); overflow: hidden;
}
.uc-rail__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.uc-rail__head span { font-size: 13px; font-weight: 700; color: var(--bf-ink); }
.uc-rail__head em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--bf-text-muted); }
.uc-rail__search {
  margin: 0 12px 8px; padding: 8px 11px; border-radius: 9px; font: inherit; font-size: 13px;
  border: 1px solid var(--bf-border-strong); background: var(--bf-surface-soft, #FAFAFA); color: var(--bf-ink);
}
.uc-rail__search:focus { outline: none; border-color: var(--bf-primary); background: var(--bf-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-primary) 15%, transparent); }
.uc-rail__list { overflow-y: auto; padding: 0 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.uc-rail__sep { height: 1px; margin: 6px 8px; background: var(--bf-border); }
.uc-rail__empty { margin: 8px; font-size: 12.5px; color: var(--bf-text-muted); }
.uc-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 9px;
  border: 0; background: transparent; text-align: left; font: inherit; font-size: 13px; color: var(--bf-ink); cursor: pointer;
  transition: background-color .12s;
}
.uc-item:hover { background: var(--bf-surface-soft, #F4F4F5); }
.uc-item.is-on { background: color-mix(in srgb, var(--bf-primary) 11%, var(--bf-surface)); color: var(--bf-ink); font-weight: 600; }
.uc-item.is-on .uc-item__n { background: var(--bf-primary); color: #fff; }
.uc-item.is-suspended .uc-item__name { color: var(--bf-text-muted); }
.uc-item__avatar {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  font-size: 11.5px; font-weight: 700; color: var(--bf-primary);
  background: color-mix(in srgb, var(--bf-primary) 11%, var(--bf-surface));
}
.uc-item__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-item__name small { margin-left: 5px; font-size: 10.5px; font-weight: 500; color: var(--bf-text-muted); }
.uc-item__n {
  flex: none; min-width: 24px; padding: 1px 7px; border-radius: 999px; text-align: center;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--bf-text-muted); background: var(--bf-surface-sunk, #EFEFF1);
}

.uc-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.uc-main__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 14px;
}
.uc-main__head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--bf-ink); }
.uc-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-size: 12.5px; color: var(--bf-text-muted); }
.uc-stats b { color: var(--bf-ink); font-variant-numeric: tabular-nums; }
.uc-stats .is-warn b { color: #B54708; }
.uc-main .filter-bar { margin: 0; }

.uc-person { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.uc-person__email { font-size: 12px; color: var(--bf-text-muted); overflow-wrap: anywhere; }
.data-table tr.is-inactive td { opacity: .62; }
.data-table tr.is-inactive td.col-actions { opacity: 1; }
.uc-group td {
  padding: 10px 14px !important; background: var(--bf-surface-soft, #FAFAFA);
  border-top: 1px solid var(--bf-border); border-bottom: 1px solid var(--bf-border);
}
.uc-group__name { font-size: 13px; font-weight: 700; color: var(--bf-ink); }
.uc-group__n { margin-left: 8px; font-size: 12px; color: var(--bf-text-muted); }
.uc-group__open {
  float: right; border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--bf-primary); cursor: pointer;
}
.uc-group__open:hover { text-decoration: underline; }

@media (max-width: 960px) {
  .uc-layout { grid-template-columns: 1fr; }
  .uc-rail { position: static; max-height: 260px; }
}

/* ═══ BULK SEARCH (/admin/bulk-search) ═══
   Numbered steps on the left, a sticky batch summary on the right holding the estimate and the
   Run button, then the batch itself — live while running, the results once finished. */
.bk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.bk-steps { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.bk-step {
  background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 16px;
  box-shadow: var(--card-shadow); overflow: hidden;
}
.bk-step__head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 0; }
.bk-step__head h3 { margin: 1px 0 2px; font-size: 16px; font-weight: 700; color: var(--bf-ink); }
.bk-step__head h3 em { margin-left: 6px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--bf-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.bk-step__head p { margin: 0; font-size: 13px; color: var(--bf-text-muted); }
.bk-step__n {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  font-size: 14px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--bf-thread-dark), var(--bf-primary));
  box-shadow: 0 6px 14px -8px var(--bf-primary);
}
.bk-count {
  margin-left: auto; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: #067647; background: #ECFDF3; border: 1px solid #ABEFC6;
}
.bk-step__body { padding: 16px 20px 20px 66px; }

.bk-input-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.bk-paste .form-textarea { min-height: 128px; resize: vertical; border-radius: 12px; }
.bk-upload { display: flex; flex-direction: column; }
.bk-drop {
  position: relative; flex: 1; min-height: 128px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  padding: 14px; border-radius: 12px; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--bf-primary) 45%, var(--bf-border));
  background: color-mix(in srgb, var(--bf-primary) 4%, var(--bf-surface));
  transition: background-color .15s, border-color .15s;
}
.bk-drop:hover { background: color-mix(in srgb, var(--bf-primary) 9%, var(--bf-surface)); border-color: var(--bf-primary); }
.bk-drop.is-disabled { opacity: .55; cursor: not-allowed; }
.bk-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bk-drop__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--bf-primary); background: color-mix(in srgb, var(--bf-primary) 12%, var(--bf-surface)); margin-bottom: 4px; }
.bk-drop__ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bk-drop strong { font-size: 13px; color: var(--bf-ink); }
.bk-drop span { font-size: 12px; color: var(--bf-text-muted); }
.bk-link { align-self: flex-start; margin-top: 8px; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--bf-primary); cursor: pointer; }
.bk-link:hover { text-decoration: underline; }

.bk-chips-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 8px; font-size: 12px; font-weight: 700; color: var(--bf-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.bk-chips-head .bk-link { margin: 0; text-transform: none; letter-spacing: 0; }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 164px; overflow-y: auto; }
.bk-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--bf-ink);
  background: var(--bf-surface-soft, #F4F4F5); border: 1px solid var(--bf-border);
}
.bk-chip button {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  border: 0; background: transparent; color: var(--bf-text-muted); font-size: 14px; line-height: 1; cursor: pointer;
}
.bk-chip button:hover { background: #FEE4E2; color: #B42318; }

.bk-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-mode {
  position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 2px 10px; align-items: start;
  padding: 14px 16px; border-radius: 13px; text-align: left; font: inherit; cursor: pointer;
  background: var(--bf-surface); border: 1.5px solid var(--bf-border);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.bk-mode:hover:not(:disabled) { border-color: color-mix(in srgb, var(--bf-primary) 50%, var(--bf-border)); }
.bk-mode.is-on { border-color: var(--bf-primary); background: color-mix(in srgb, var(--bf-primary) 5%, var(--bf-surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-primary) 15%, transparent); }
.bk-mode:disabled { cursor: not-allowed; opacity: .7; }
.bk-mode__radio { grid-row: 1 / span 2; margin-top: 2px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bf-border-strong); box-sizing: border-box; }
.bk-mode.is-on .bk-mode__radio { border: 5px solid var(--bf-primary); }
.bk-mode__t { font-size: 14px; font-weight: 700; color: var(--bf-ink); }
.bk-mode__d { font-size: 12.5px; line-height: 1.45; color: var(--bf-text-muted); }
.bk-mode__tag {
  position: absolute; top: 12px; right: 12px; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; color: var(--bf-thread-dark); background: color-mix(in srgb, var(--bf-primary) 13%, var(--bf-surface));
}
.bk-custom { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--bf-border); display: flex; flex-direction: column; gap: 10px; }
.bk-plat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--bf-text-muted); }
.bk-plat-head b { color: var(--bf-ink); }
.bk-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bf-surface-sunk, #EFEFF1); }
.bk-seg button { border: 0; background: transparent; padding: 5px 11px; border-radius: 8px; font: inherit; font-size: 12px; font-weight: 600; color: var(--bf-text-muted); cursor: pointer; }
.bk-seg button:hover { background: var(--bf-surface); color: var(--bf-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.bk-toggles { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 4px; }
.bk-switch { position: relative; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--bf-ink); cursor: pointer; }
.bk-switch input { position: absolute; opacity: 0; pointer-events: none; }
.bk-switch span { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--bf-border-strong); transition: background-color .15s; }
.bk-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.bk-switch input:checked + span { background: var(--bf-primary); }
.bk-switch input:checked + span::after { transform: translateX(14px); }
.bk-switch input:focus-visible + span { outline: 2px solid var(--bf-primary); outline-offset: 2px; }

/* Summary */
.bk-summary { position: sticky; top: 14px; }
.bk-summary__card {
  display: flex; flex-direction: column; gap: 14px; padding: 20px;
  background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 18px;
  box-shadow: 0 18px 40px -26px rgba(16, 24, 40, .35);
}
.bk-summary__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--bf-ink); }
.bk-facts { margin: 0; display: flex; flex-direction: column; }
.bk-facts div { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--bf-border); font-size: 13px; }
.bk-facts div:last-child { border-bottom: 0; }
.bk-facts dt { color: var(--bf-text-muted); }
.bk-facts dd { margin: 0; font-weight: 700; color: var(--bf-ink); font-variant-numeric: tabular-nums; }
.bk-facts .is-strong dd { font-size: 16px; color: var(--bf-thread-dark); }
.bk-facts dd.is-bad { color: #B42318; }
.bk-warn { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 11px; font-size: 12.5px; color: #B42318; background: #FEF3F2; border: 1px solid #FECDCA; }
.bk-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--bf-text); cursor: pointer; }
.bk-run, .bk-stop {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 48px;
  border-radius: 13px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .2s, filter .2s;
}
.bk-run {
  border: 0; color: #fff; background: linear-gradient(120deg, var(--bf-thread-dark), var(--bf-primary));
  box-shadow: 0 12px 24px -12px var(--bf-primary);
}
.bk-run svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.bk-run:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.bk-run:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.bk-stop { color: #B42318; background: #FEF3F2; border: 1.5px solid #FECDCA; }
.bk-stop:hover:not(:disabled) { background: #FEE4E2; }
.bk-summary__note { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--bf-text-muted); }

.bk-ring { position: relative; width: 132px; height: 132px; margin: 0 auto; }
.bk-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bk-ring circle { fill: none; stroke-width: 10; }
.bk-ring__track { stroke: var(--bf-surface-sunk, #EFEFF1); }
.bk-ring__fill {
  stroke: var(--bf-primary); stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: calc(326.7 - 326.7 * var(--pct) / 100);
  transition: stroke-dashoffset .5s ease;
}
.bk-ring__text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bk-ring__text strong { font-size: 26px; font-weight: 800; color: var(--bf-ink); font-variant-numeric: tabular-nums; }
.bk-ring__text strong span { font-size: 15px; font-weight: 600; color: var(--bf-text-muted); }
.bk-ring__text em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--bf-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.bk-now { margin: -4px 0 0; text-align: center; font-size: 13px; color: var(--bf-text-muted); }
.bk-now b { color: var(--bf-ink); }

/* The batch */
.bk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
.bk-kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--bf-surface); border: 1px solid var(--bf-border); box-shadow: var(--card-shadow); }
.bk-kpi span { font-size: 12px; font-weight: 600; color: var(--bf-text-muted); }
.bk-kpi strong { font-size: 24px; font-weight: 800; color: var(--bf-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bk-kpi.is-high strong { color: #B42318; }
.bk-kpi.is-bad { border-color: #FECDCA; }
.bk-batch { margin-top: 16px; background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 16px; box-shadow: var(--card-shadow); overflow: hidden; }
.bk-batch__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--bf-border); }
.bk-batch__head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--bf-ink); }
.bk-batch__head > span { flex: 1; font-size: 12.5px; color: var(--bf-text-muted); }
.bk-batch__head em { font-style: normal; color: #067647; }
.bk-table td.num, .bk-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.bk-row--running td { background: color-mix(in srgb, var(--bf-primary) 5%, var(--bf-surface)); }
.bk-row--queued td, .bk-row--skipped td { color: var(--bf-text-muted); }
.bk-state { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.bk-state.is-queued  { color: var(--bf-text-muted); background: var(--bf-surface-sunk, #EFEFF1); }
.bk-state.is-running { color: var(--bf-thread-dark); background: color-mix(in srgb, var(--bf-primary) 13%, var(--bf-surface)); }
.bk-state.is-running i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: bf-spin .7s linear infinite; }
.bk-state.is-done    { color: #067647; background: #ECFDF3; }
.bk-state.is-failed  { color: #B42318; background: #FEF3F2; }
.bk-state.is-skipped { color: var(--bf-text-muted); background: transparent; border: 1px dashed var(--bf-border-strong); }
.bk-high { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; color: #B42318; }
.bk-high__bar { width: 70px; height: 6px; border-radius: 99px; background: var(--bf-surface-sunk, #EFEFF1); overflow: hidden; }
.bk-high__bar span { display: block; height: 100%; border-radius: inherit; background: #E24C4C; }

@media (max-width: 1100px) {
  .bk-layout { grid-template-columns: 1fr; }
  .bk-summary { position: static; }
}
@media (max-width: 700px) {
  .bk-step__body { padding-left: 20px; }
  .bk-input-grid, .bk-modes { grid-template-columns: 1fr; }
  .bk-kpis { grid-template-columns: 1fr 1fr; }
}

/* ═══ PLANS (/admin/plans) ═══ Pricing-style cards: price, allowance, what is included, who is on it. */
.pl-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.pl-kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--bf-surface); border: 1px solid var(--bf-border); box-shadow: var(--card-shadow); }
.pl-kpi span { font-size: 12px; font-weight: 600; color: var(--bf-text-muted); }
.pl-kpi strong { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--bf-ink); font-variant-numeric: tabular-nums; }
.pl-kpi strong.pl-kpi__text { font-size: 17px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pl-tabs { display: flex; width: fit-content; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 12px; background: var(--bf-surface-sunk, #EFEFF1); }
.pl-tabs button {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 0; border-radius: 9px;
  background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--bf-text-muted); cursor: pointer;
}
.pl-tabs button span { min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 18px; background: rgba(0, 0, 0, .06); }
.pl-tabs button.is-on { background: var(--bf-surface); color: var(--bf-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.pl-tabs button.is-on span { background: var(--bf-primary); color: #fff; }
.pl-none { padding: 30px; text-align: center; color: var(--bf-text-muted); background: var(--bf-surface); border: 1px dashed var(--bf-border-strong); border-radius: 14px; }

.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: stretch; }
.pl-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 22px 22px 18px; border-radius: 18px;
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  box-shadow: 0 10px 28px -22px rgba(16, 24, 40, .45);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.pl-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(16, 24, 40, .5); }
.pl-card.is-popular { border: 1.5px solid var(--bf-primary); box-shadow: 0 18px 40px -22px var(--bf-primary); }
.pl-card.is-retired { background: var(--bf-surface-soft, #FAFAFA); }
.pl-card.is-retired > :not(.pl-card__actions) { opacity: .6; }
.pl-ribbon {
  position: absolute; top: -11px; left: 22px; padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; color: #fff;
  background: linear-gradient(120deg, var(--bf-thread-dark), var(--bf-primary));
  box-shadow: 0 6px 14px -8px var(--bf-primary);
}
.pl-card__head { display: flex; align-items: center; gap: 8px; }
.pl-card__head h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--bf-ink); }
.pl-status { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--bf-text-muted); background: var(--bf-surface-sunk, #EFEFF1); }
.pl-card__desc { margin: -8px 0 0; font-size: 13px; line-height: 1.5; color: var(--bf-text-muted); }

.pl-price { display: flex; align-items: baseline; gap: 6px; }
.pl-price strong { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--bf-ink); font-variant-numeric: tabular-nums; }
.pl-price strong.is-unset { font-size: 15px; font-weight: 600; color: var(--bf-text-muted); letter-spacing: 0; }
.pl-price span { font-size: 13px; color: var(--bf-text-muted); }

.pl-allow {
  display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--bf-primary) 8%, var(--bf-surface));
  border: 1px solid color-mix(in srgb, var(--bf-primary) 18%, transparent);
}
.pl-allow strong { font-size: 22px; font-weight: 800; color: var(--bf-thread-dark); font-variant-numeric: tabular-nums; }
.pl-allow span { font-size: 12.5px; color: var(--bf-text-muted); }

.pl-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pl-feats li { position: relative; padding-left: 26px; font-size: 13px; color: var(--bf-text); }
.pl-feats li::before {
  content: "✓"; position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 800;
  color: #067647; background: #DCFAE6;
}
.pl-feats li.is-no { color: var(--bf-text-muted); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.pl-feats li.is-no::before { content: "✕"; color: var(--bf-text-muted); background: var(--bf-surface-sunk, #EFEFF1); }

.pl-subs { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--bf-border); font-size: 12.5px; color: var(--bf-text-muted); }
.pl-subs b { color: var(--bf-ink); }
.pl-subs__none { font-style: italic; }
.pl-avatars { display: inline-flex; }
.pl-avatars i {
  display: grid; place-items: center; width: 26px; height: 26px; margin-left: -7px; border-radius: 50%;
  font-style: normal; font-size: 11px; font-weight: 700; color: var(--bf-thread-dark);
  background: color-mix(in srgb, var(--bf-primary) 14%, var(--bf-surface)); border: 2px solid var(--bf-surface);
}
.pl-avatars i:first-child { margin-left: 0; }
.pl-avatars i.is-more { color: var(--bf-text-muted); background: var(--bf-surface-sunk, #EFEFF1); }

.pl-card__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-danger { color: #B42318 !important; border-color: #FECDCA !important; }
.pl-danger:hover { background: #FEF3F2 !important; }
.pl-note { margin: 18px 0 0; font-size: 12.5px; color: var(--bf-text-muted); }

.pl-empty { max-width: 520px; margin: 30px auto; padding: 36px 28px; text-align: center; background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 18px; box-shadow: var(--card-shadow); }
.pl-empty__ic { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; font-size: 24px; color: var(--bf-primary); background: color-mix(in srgb, var(--bf-primary) 11%, var(--bf-surface)); }
.pl-empty h3 { margin: 0 0 6px; font-size: 18px; color: var(--bf-ink); }
.pl-empty p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--bf-text-muted); }

.pl-modal { max-width: 560px; }
.pl-form-sec { padding: 14px 0; border-bottom: 1px solid var(--bf-border); }
.pl-form-sec:first-of-type { padding-top: 0; }
.pl-form-sec h4 { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bf-text-muted); }
.pl-switches { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.pl-switches em { margin-left: 4px; font-style: normal; font-weight: 500; font-size: 12px; color: var(--bf-text-muted); }
.pl-modal .plan-preview { margin-top: 14px; }

@media (max-width: 900px) { .pl-kpis { grid-template-columns: 1fr 1fr; } }

/* "core" tag: a platform in the default Core set (PlatformDefaults.CoreDomains). */
.platform-pick__core {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px; vertical-align: 1px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bf-thread-dark); background: color-mix(in srgb, var(--bf-primary) 13%, var(--bf-surface));
}

/* ClampText: clamped text with a Read more / Show less toggle (results table). */
.results-table .clamp.is-open { display: block; overflow: visible; -webkit-line-clamp: unset; }
.clamp-text__more {
  display: inline-block; margin-top: 3px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--bf-primary); cursor: pointer;
}
.clamp-text__more:hover { text-decoration: underline; }
.clamp-text__more:focus-visible { outline: 2px solid var(--bf-primary); outline-offset: 2px; border-radius: 3px; }

/* ═══ MAILBOX — docket status ═══ One mail, one docket: a green tag once it is on a file, amber while
   a reply that quotes a file number waits to be filed, grey for mail about no file. */
.mail-tag--docketed { color: #067647; background: #ECFDF3; border-color: #ABEFC6; font-weight: 600; }
.mail-tag--undocketed { color: #B54708; background: #FFFAEB; border-color: #FEDF89; font-weight: 600; }
.mail-tag--plain { color: var(--bf-text-muted); background: transparent; border-style: dashed; }

.mail-docket {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 4px; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45;
}
.mail-docket > span:nth-child(2) { flex: 1; min-width: 220px; }
.mail-docket__ic {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; font-weight: 800; color: #fff;
}
.mail-docket a { font-family: var(--font-mono); font-weight: 600; }
.mail-docket.is-done { color: #067647; background: #ECFDF3; border: 1px solid #ABEFC6; }
.mail-docket.is-done .mail-docket__ic { background: #12B76A; }
.mail-docket.is-done a { color: #067647; }
.mail-docket.is-pending { color: #93370D; background: #FFFAEB; border: 1px solid #FEDF89; }
.mail-docket.is-pending .mail-docket__ic { background: #F79009; }
.mail-docket.is-none { color: var(--bf-text-muted); background: var(--bf-surface-soft, #FAFAFA); border: 1px dashed var(--bf-border-strong); }
.mail-docket.is-none .mail-docket__ic { background: var(--bf-border-strong); }

/* ═══ MAILBOX — docket to a chosen file ═══ */
.mail-picker {
  margin: 8px 0 6px; padding: 12px; border-radius: 12px;
  background: var(--bf-surface); border: 1px solid var(--bf-border-strong);
  box-shadow: 0 10px 24px -16px rgba(16, 24, 40, .35);
  display: flex; flex-direction: column; gap: 10px;
}
.mail-picker__head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--bf-ink); }
.mail-picker__list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.mail-picker__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; border-radius: 9px; text-align: left; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--bf-ink);
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  transition: border-color .12s, background-color .12s;
}
.mail-picker__item:hover { border-color: color-mix(in srgb, var(--bf-primary) 50%, var(--bf-border)); }
.mail-picker__item.is-on { border-color: var(--bf-primary); background: color-mix(in srgb, var(--bf-primary) 8%, var(--bf-surface)); }
.mail-picker__what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bf-text-muted); }
.mail-picker__status { font-size: 11px; font-weight: 600; color: var(--bf-text-muted); }
.mail-picker__none { margin: 0; font-size: 12.5px; color: var(--bf-text-muted); }
.mail-picker__confirm {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--bf-border); font-size: 13px;
}
.mail-picker__confirm em { font-style: normal; color: #B54708; }

/* ═══ SETTINGS → COMPANY → MAIL switches ═══ */
.mail-switch {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin: 0;
  border: 1px solid var(--bf-border); border-radius: 10px; background: var(--bf-surface); cursor: pointer;
}
.mail-switch + .mail-switch { margin-top: 8px; }
.mail-switch input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--bf-primary); flex: none; }
.mail-switch span { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--bf-ink); }
.mail-switch em { font-style: normal; font-size: 12.5px; color: var(--bf-text-muted); line-height: 1.45; }
.mail-switch--master { border-color: var(--bf-primary-mid); background: var(--bf-primary-soft); margin-top: 6px; }
.mail-switch__group { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--bf-text-muted); }
.mail-switch__list.is-off .mail-switch { opacity: .5; cursor: not-allowed; }
.mail-off-note { margin: 8px 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45;
  color: #93370D; background: #FFFAEB; border: 1px solid #FEDF89; }

/* Platforms: a platform's note belongs to its row, not a row of its own. */
.bf-table tr.has-note > td { border-bottom: 0; }
.bf-table td.platform-note { padding-top: 0; font-size: 12.5px; color: var(--bf-text-muted); }

/* ═══ RESPONSIVE POLISH ═══════════════════════════════════════════════════════
   Found by viewing every page at 390px (phone) and 1366px (laptop). Kept together
   at the end so each fix wins over the rule it corrects, and so they can be read
   as one list. */

/* Title band on phones. The band stacks in a column there, and the title block's
   flex-basis of 320px then applied to its HEIGHT: every page opened on a 400px
   orange block with the content pushed below the fold. */
@media (max-width: 640px) {
  .ph, .page-header { min-height: 0; gap: 12px; padding: 16px; }
  .ph__main { flex: 0 0 auto; }
  .ph__actions { gap: 8px; }
  .ph__actions > * { flex: 1 1 auto; justify-content: center; text-align: center; }
  .ph::before, .page-header::before { width: 160px; height: 160px; top: -70px; right: -50px; border-width: 24px; }
  .ph::after, .page-header::after { display: none; }
  .ph__title > span:first-child { overflow-wrap: break-word; }
}

/* The off-canvas menu cast its shadow onto the page while closed: a dark band
   down the left edge of every screen on a phone. The shadow belongs to the open
   drawer only. */
@media (max-width: 860px) {
  .bf-sidebar { box-shadow: none; }
  .bf-layout.nav-open .bf-sidebar { box-shadow: 24px 0 60px -20px rgba(0, 0, 0, .5); }
}

/* Header buttons: icons only on a phone, where the labels crowded out the logo. */
@media (max-width: 520px) {
  .nav-btn__label { display: none; }
  .navbar-right .btn-outline-sm { padding: 6px 10px; }
}

/* Cards that pad themselves. A global rule gives a paragraph directly inside a
   card the card's padding, for cards that have none of their own; inside these it
   doubled up and indented the text away from its heading. */
.export-card > p, .fa-panel > p, .diag-hero > p { padding-left: 0; padding-right: 0; padding-bottom: 0; }

/* A filter strip in a card of its own had no padding: labels and fields sat on the
   card's edge (Subscriptions, Audit trail). */
.bf-card.filter-bar { padding: 14px var(--pad-card); margin-bottom: var(--gap-section, 16px); }
.bf-card.filter-bar .filter-row { align-items: flex-end; gap: 12px; }
@media (max-width: 768px) {
  .bf-card.filter-bar .filter-item { flex: 1 1 150px; min-width: 0; }
  .bf-card.filter-bar .filter-item > * { width: 100%; }
}

/* Search results: the table fills the screen once it is reached, rather than a
   box a third of a laptop screen tall showing three findings at a time. */
.results-card .table-wrapper { max-height: calc(100vh - var(--navbar-height) - 150px); min-height: 360px; }

/* Website scan: the depth choice wrapped one option onto a second line. Equal
   columns across the field, with the label allowed to wrap inside its button. */
.scan-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; align-self: stretch; }
.scan-seg button { white-space: normal; line-height: 1.25; text-align: center; }

/* Row actions in wide admin tables (Users, Companies) were cut off at laptop
   width. Compact buttons that wrap onto a second row instead of off the table. */
.row-actions--wrap { display: grid; grid-template-columns: repeat(4, 30px); gap: 4px; justify-content: start; }
.row-actions--wrap .btn.btn-sm { width: 30px; height: 28px; padding: 0; display: inline-grid; place-items: center; line-height: 1; font-size: 13px; }
.uc-person { min-width: 150px; }
.uc-person__email { overflow-wrap: anywhere; }

/* Diagnostics: a long setting name ran over its value. */
.cfg { grid-template-columns: minmax(140px, 1fr) minmax(0, max-content); }
.cfg__k { min-width: 0; overflow-wrap: anywhere; }
.cfg__v { overflow-wrap: anywhere; word-break: normal; }

/* Enforcement: the clickable KPI tile is a button, and centred its text unlike the
   tiles beside it. */
button.kpi-card { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }

/* Small stat tiles two to a row on a phone rather than one enormous card each. */
@media (max-width: 640px) {
  .fa-stats, .fc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .fa-stat--wide { grid-column: span 2; }
}

/* Summary tiles two to a row on a phone (History, Companies); one per row made a
   screen of four tiles before the list. */
@media (max-width: 520px) {
  .kpi-grid, .kpi-grid.kpi-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Users on a laptop: a narrower company rail gives the table the room its action
   buttons need. */
@media (min-width: 961px) and (max-width: 1440px) {
  .uc-layout { grid-template-columns: 220px minmax(0, 1fr); }
}

/* Compact summary strips (a number and a label: History, Companies) stay four across
   on a laptop; the two-column rule is for the tall dashboard tiles. */
.kpi-grid.kpi-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .kpi-grid.kpi-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Users and Companies tables on a laptop: tighter cells so the action buttons fit
   inside the card instead of past its edge. */
@media (max-width: 1440px) {
  .uc-layout .data-table th, .uc-layout .data-table td,
  .table-wrapper .co-table thead th, .table-wrapper .co-table tbody td { padding-left: 10px; padding-right: 10px; }
  .uc-layout .entity-avatar { display: none; }
  .co-table th { white-space: nowrap; }
}
@media (max-width: 1440px) {
  .co-table .row-actions--wrap { grid-template-columns: repeat(2, 30px); }
  .co-table .usage-bar-wrap, .co-table .usage-bar { min-width: 0; width: 72px; }
}

/* Users → Bulk register: the template download sits on the same line as the upload label. */
.bulk-upload__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.bulk-upload__head .form-label { margin: 0; }

/* ═══ EVIDENCE captures ═══ */
.ev-empty { margin: 4px 0; font-size: 13px; color: var(--bf-text-muted); }
.ev-list { display: flex; flex-direction: column; gap: 10px; }
.ev-item {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 12px;
  border: 1px solid var(--bf-border); border-radius: 12px; background: var(--bf-surface);
}
.ev-item.is-captured { border-left: 3px solid #12B76A; }
.ev-item.is-blocked { border-left: 3px solid #F79009; }
.ev-item.is-failed { border-left: 3px solid #F04438; }
.ev-thumb {
  width: 150px; height: 100px; border-radius: 8px; overflow: hidden; background: var(--bf-surface-sunk, #F0F0F1);
  display: grid; place-items: center; font-size: 12px; color: var(--bf-text-muted); border: 1px solid var(--bf-border);
}
.ev-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ev-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--bf-text-muted); }
.ev-badge { font-weight: 700; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; }
.ev-badge--captured { color: #067647; background: #ECFDF3; }
.ev-badge--blocked { color: #93370D; background: #FFFAEB; }
.ev-badge--failed { color: #B42318; background: #FEF3F2; }
.ev-badge--pending { color: var(--bf-text-muted); background: var(--bf-surface-sunk, #F0F0F1); }
.ev-title { font-size: 13.5px; font-weight: 600; color: var(--bf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-url { font-family: var(--font-mono); font-size: 11.5px; color: var(--bf-text-muted); overflow-wrap: anywhere; }
.ev-note { font-size: 12.5px; color: #93370D; }
.ev-item.is-failed .ev-note { color: #B42318; }
.ev-hash { font-family: var(--font-mono); font-size: 11px; color: var(--bf-text-light, #8A8F98); }
.ev-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ev-btn { display: inline-flex; align-items: center; gap: 4px; }
.ev-btn.has-evidence { color: #067647; border-color: #ABEFC6; background: #ECFDF3; }
.ev-count { font-size: 10.5px; font-weight: 700; }
.ev-section { margin: 16px 0 6px; }
.ev-section__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ev-section__head h4 { margin: 0; font-size: 13px; }
@media (max-width: 560px) {
  .ev-item { grid-template-columns: minmax(0, 1fr); }
  .ev-thumb { width: 100%; height: 150px; }
}

/* ── AI REVIEW OF A NOTICE ─────────────────────────────────────────
   Shown under the draft it reviews, in the single composer and the bulk dialog. The verdict sets the
   tone of the left rule; the issues are listed most-severe first as the model returned them. */
.ai-review {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--bf-surface-soft); border: 1px solid var(--bf-border-soft);
  border-left: 3px solid var(--bf-border-strong); font-size: 12.5px; line-height: 1.5;
}
.ai-review--busy { flex-direction: row; align-items: center; color: var(--bf-text-muted); }
.ai-review--ready   { border-left-color: var(--bf-success); }
.ai-review--changes { border-left-color: var(--bf-warning); }
.ai-review--stop    { border-left-color: var(--bf-danger); }
.ai-review--failed  { border-left-color: var(--bf-border-strong); }
.ai-review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.ai-review__verdict { font-size: 13px; }
.ai-review--ready   .ai-review__verdict { color: var(--bf-success); }
.ai-review--changes .ai-review__verdict { color: var(--bf-warning); }
.ai-review--stop    .ai-review__verdict { color: var(--bf-danger); }
.ai-review__cost { margin-left: auto; }
.ai-review__summary { margin: 0; color: var(--bf-text); }
.ai-review__fit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--bf-text-muted); }
.ai-review__issues { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ai-review__issue { display: flex; flex-wrap: wrap; gap: 4px 8px; padding-left: 8px; border-left: 2px solid var(--bf-border-soft); }
.ai-review__issue--critical { border-left-color: var(--bf-danger); }
.ai-review__issue--major    { border-left-color: var(--bf-warning); }
.ai-review__sev {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bf-text-muted);
}
.ai-review__issue--critical .ai-review__sev { color: var(--bf-danger); }
.ai-review__issue--major    .ai-review__sev { color: var(--bf-warning); }
.ai-review__fix { flex-basis: 100%; color: var(--bf-text-muted); }
.ai-review__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-review__actions:empty { display: none; }