/*
 * Fiyobra "Aurora Noir" theme layer (redesign Phase A — docs/redesign-plan.md).
 *
 * Loaded AFTER fiyobra-brand.css and BEFORE fiyobra-a11y.css, and that order is
 * a contract: the brand layer defines the --fi-* names this file redefines, and
 * the accessibility layer must stay last (CLAUDE.md rule 5g).
 *
 * TWO TOKEN SETS, ONE ATTRIBUTE. The Inertia root views render
 * `<html data-theme="dark|light" data-bs-theme="dark|light">` from
 * App\Support\Theme — server-side, so there is no flash and no inline script
 * for the CSP nonce to refuse. `data-theme` selects the Fiyobra tokens below;
 * `data-bs-theme` switches the Toner Bootstrap build's own dark palette for
 * the controls we never restyle (dropdowns, tables, form selects, modals).
 * The product default is dark, so `:root` alone carries the dark set — a
 * missing attribute renders Noir, never a half-white page.
 *
 *   dark   "Aurora Noir"  true black, glass surfaces, crimson as the only chroma
 *   light  "Harbour"      navy chrome, a slate canvas, near-white cards
 *
 * HARBOUR KEEPS THE CHROME DARK. The light theme lightens the READING SURFACE
 * only: the shell, rail, top bar and tab bar stay navy (#16222F), and the
 * canvas steps down to a slate blue rather than paper, so nothing on screen is
 * pure white except a photograph. That is the whole answer to "light mode is
 * too light" — the frame never turns to glare. The four `--fi-chrome-*` tokens
 * below are what make it possible: in Noir they alias the page tokens, so the
 * dark theme is untouched; in Harbour they are the only thing standing between
 * dark ink and a navy background.
 *
 * Every colour is a token. The Toner build was compiled with the `tb` variable
 * prefix (see toner-theme-gotchas), so each Bootstrap override below is set
 * twice, --tb-* live and --bs-* for anything hand-written against the stock
 * names. Contrast: every ink/ink-2 pair clears 4.5:1 on its page AND on its
 * card; the measured pairs are tabled in docs/accessibility.md. Where the
 * design's crimson fails as TEXT (#E8244F is 4.17:1 on the dark card, 3.61:1
 * on the light page) a `--fi-accent-text` tone carries it; the pure crimson is
 * kept for fills, borders and glows, where the 3:1 non-text minimum applies.
 */

/* ── Tokens: dark (default) ─────────────────────────────────────────────── */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --fi-page: #050405;
  --fi-canvas: #0c0c0c;                    /* 3 % white over the page */
  --fi-canvas-border: rgba(255, 255, 255, 0.08);
  --fi-card: #151515;                      /* 3.5 % white over the canvas */
  --fi-card-border: rgba(255, 255, 255, 0.07);
  --fi-elevated: #1c1b1c;                  /* hover / active surfaces */
  --fi-hairline: rgba(255, 255, 255, 0.1);
  --fi-veil: rgba(5, 4, 5, 0.62);          /* over photography */

  --fi-ink: #F6F2F3;                       /* 18.4:1 page, 16.5:1 card */
  --fi-ink-2: #9C9297;                     /*  6.8:1 page,  6.1:1 card */

  --fi-accent: #E8244F;                    /* borders, glows, gradients, tags */
  --fi-accent-rgb: 232, 36, 79;
  --fi-accent-fill: #E01F4A;               /* solid buttons: white text 4.7:1 */
  --fi-accent-fill-hover: #C81A41;
  --fi-accent-fill-active: #A9163A;
  --fi-accent-text: #FF4D73;               /* as text: 6.4:1 page, 5.7:1 card */
  --fi-accent-subtle: #2B0A12;             /* tag background */
  --fi-accent-subtle-text: #FF9AB0;        /* 9.1:1 on the tag background */
  --fi-rose-tint: #FF9AB0;
  --fi-wine: #7A1F33;
  --fi-pill-gradient: linear-gradient(120deg, #E8244F 0%, #FF9AB0 55%, #7A1F33 100%);
  --fi-glow: 0 0 0 1px rgba(232, 36, 79, 0.35), 0 0 28px rgba(232, 36, 79, 0.22);

  --fi-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fi-font-display-weight: 600;
  --fi-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fi-canvas-radius: 28px;
  --fi-card-radius: 18px;
  --fi-btn-radius: 999px;

  /* Read by fiyobra-a11y.css, which owns the focus rule and must stay last. */
  --fi-focus-ring: #F6F2F3;
  --fi-focus-halo: rgba(5, 4, 5, 0.9);

  /* Chrome — the shell, rail, top bar and tab bar, which sit on --fi-page
   * rather than on the canvas. In Noir the chrome IS the page, so every one
   * of these aliases an existing token and nothing changes; Harbour keeps the
   * chrome navy while the canvas lightens, and redefines only these. */
  --fi-chrome-ink: var(--fi-ink);
  --fi-chrome-ink-2: var(--fi-ink-2);
  --fi-chrome-soft: var(--fi-elevated);
  --fi-chrome-hairline: var(--fi-hairline);
  --fi-chrome-pill: var(--fi-canvas);
  --fi-chrome-pill-border: var(--fi-canvas-border);
  --fi-chrome-active: var(--fi-accent-text);
  --fi-chrome-focus-ring: var(--fi-focus-ring);
  --fi-chrome-focus-halo: var(--fi-focus-halo);
}

/* ── Tokens: light ──────────────────────────────────────────────────────── */

:root[data-theme="light"] {
  color-scheme: light;

  /* --fi-page is the CHROME, not a reading surface: the shell, rail, top bar
   * and tab bar are painted with it and stay navy in this theme. */
  --fi-page: #16222F;
  --fi-canvas: #D9E2EC;                    /* slate — two steps down from paper */
  --fi-canvas-border: #C6D2E0;
  --fi-card: #F7FAFD;                      /* near-white, lifted by a shadow */
  --fi-card-border: #D2DCE7;
  --fi-elevated: #EAF0F7;                  /* hover / active surfaces */
  --fi-hairline: rgba(22, 32, 44, 0.12);
  --fi-veil: rgba(11, 22, 34, 0.62);       /* over photography */

  --fi-ink: #16202C;                       /* 12.6:1 canvas, 15.7:1 card */
  --fi-ink-2: #4C5D70;                     /*  5.2:1 canvas,  6.5:1 card */

  --fi-accent: #E8244F;                    /* borders, glows, tags */
  --fi-accent-rgb: 232, 36, 79;
  --fi-accent-fill: #C4183E;               /* solid buttons: white text 5.9:1 */
  --fi-accent-fill-hover: #A8123A;
  --fi-accent-fill-active: #8E0F31;
  --fi-accent-text: #A8123A;               /* as text: 5.7:1 canvas, 7.1:1 card */
  --fi-accent-subtle: #FADDE4;             /* tag background */
  --fi-accent-subtle-text: #98122F;        /* 6.4:1 on the tag background */
  --fi-rose-tint: #FF8DA8;                 /* crimson lightened FOR THE CHROME */
  --fi-wine: #3E5871;                      /* steel — the second colour */
  /* No gradient border in Harbour: the search pill is near-white with a steel
   * hairline, and the shadow below does the lifting the glow does in Noir. */
  --fi-pill-gradient: linear-gradient(120deg, #C6D2E0 0%, #AEBDCD 100%);
  --fi-glow: 0 12px 28px rgba(16, 32, 52, 0.14);
  --fi-card-shadow: 0 10px 26px rgba(16, 32, 52, 0.10);

  --fi-font-display: 'Space Grotesk', system-ui, sans-serif;
  --fi-font-display-weight: 700;
  --fi-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fi-canvas-radius: 22px;
  --fi-card-radius: 16px;
  --fi-btn-radius: 10px;

  --fi-focus-ring: #16202C;
  --fi-focus-halo: rgba(22, 32, 44, 0.45);

  /* On the navy chrome, dark ink is invisible and the crimson fill drops to
   * 2.7:1 — so the chrome carries white text and the lightened rose. */
  --fi-chrome-ink: #FFFFFF;                /* 16.1:1 on the chrome */
  --fi-chrome-ink-2: rgba(255, 255, 255, 0.72);  /* 8.9:1 */
  --fi-chrome-soft: rgba(255, 255, 255, 0.1);
  --fi-chrome-hairline: rgba(255, 255, 255, 0.14);
  --fi-chrome-pill: rgba(255, 255, 255, 0.08);
  --fi-chrome-pill-border: rgba(255, 255, 255, 0.14);
  --fi-chrome-active: #FF8DA8;             /* 7.4:1 — crimson that survives navy */
  --fi-chrome-focus-ring: #FFFFFF;
  --fi-chrome-focus-halo: rgba(11, 22, 34, 0.8);
}

/* ── Bridge: the brand layer's names, and Bootstrap's ───────────────────── */

:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  /* fiyobra-brand.css names, so every rule written against them retones.
   * `--fi-rose` there is the accent FILL (buttons, the active nav item, the
   * skip link), not the pink tint — that is `--fi-rose-tint` above. */
  --fi-rose: var(--fi-accent-fill);
  --fi-rose-hover: var(--fi-accent-fill-hover);
  --fi-rose-active: var(--fi-accent-fill-active);
  --fi-rose-light: var(--fi-accent);
  --fi-dark: var(--fi-ink);
  --fi-heading: var(--fi-ink);
  --fi-text: var(--fi-ink);
  --fi-sub: var(--fi-ink-2);
  --fi-muted: var(--fi-ink-2);
  --fi-border: var(--fi-card-border);
  --fi-off: var(--fi-canvas);

  --bs-body-bg: var(--fi-page);
  --tb-body-bg: var(--fi-page);
  --bs-body-color: var(--fi-ink);
  --tb-body-color: var(--fi-ink);
  --bs-emphasis-color: var(--fi-ink);
  --tb-emphasis-color: var(--fi-ink);
  --bs-heading-color: var(--fi-ink);
  --tb-heading-color: var(--fi-ink);
  --bs-secondary-color: var(--fi-ink-2);
  --tb-secondary-color: var(--fi-ink-2);
  --bs-tertiary-color: var(--fi-ink-2);
  --tb-tertiary-color: var(--fi-ink-2);
  --bs-secondary-bg: var(--fi-canvas);
  --tb-secondary-bg: var(--fi-canvas);
  --bs-tertiary-bg: var(--fi-elevated);
  --tb-tertiary-bg: var(--fi-elevated);
  --bs-border-color: var(--fi-card-border);
  --tb-border-color: var(--fi-card-border);
  --bs-border-color-translucent: var(--fi-hairline);
  --tb-border-color-translucent: var(--fi-hairline);

  --bs-primary: var(--fi-accent-fill);
  --tb-primary: var(--fi-accent-fill);
  --bs-primary-rgb: var(--fi-accent-rgb);
  --tb-primary-rgb: var(--fi-accent-rgb);
  --bs-primary-text-emphasis: var(--fi-accent-text);
  --tb-primary-text-emphasis: var(--fi-accent-text);
  --bs-primary-bg-subtle: var(--fi-accent-subtle);
  --tb-primary-bg-subtle: var(--fi-accent-subtle);
  --bs-primary-border-subtle: var(--fi-accent-subtle);
  --tb-primary-border-subtle: var(--fi-accent-subtle);

  --bs-link-color: var(--fi-accent-text);
  --tb-link-color: var(--fi-accent-text);
  --bs-link-hover-color: var(--fi-ink);
  --tb-link-hover-color: var(--fi-ink);

  --bs-body-font-family: var(--fi-font-body);
  --tb-body-font-family: var(--fi-font-body);
  --bs-body-font-weight: 400;
  --tb-body-font-weight: 400;

  /* The brand layer retoned info → neutral; keep that neutral on the tokens. */
  --bs-info: var(--fi-ink-2);
  --tb-info: var(--fi-ink-2);
  --bs-info-text-emphasis: var(--fi-ink);
  --tb-info-text-emphasis: var(--fi-ink);
  --bs-info-bg-subtle: var(--fi-elevated);
  --tb-info-bg-subtle: var(--fi-elevated);
  --bs-info-border-subtle: var(--fi-hairline);
  --tb-info-border-subtle: var(--fi-hairline);
}

/* The rgb triplets Bootstrap composes rgba() from cannot be derived from a
 * hex token, so they are spelled out per theme. */
:root,
:root[data-theme="dark"] {
  --bs-body-bg-rgb: 5, 4, 5;
  --tb-body-bg-rgb: 5, 4, 5;
  --bs-body-color-rgb: 246, 242, 243;
  --tb-body-color-rgb: 246, 242, 243;
  --bs-emphasis-color-rgb: 246, 242, 243;
  --tb-emphasis-color-rgb: 246, 242, 243;
  --bs-secondary-color-rgb: 156, 146, 151;
  --tb-secondary-color-rgb: 156, 146, 151;
  --bs-link-color-rgb: 255, 77, 115;
  --tb-link-color-rgb: 255, 77, 115;
}

:root[data-theme="light"] {
  --bs-body-bg-rgb: 22, 34, 47;
  --tb-body-bg-rgb: 22, 34, 47;
  --bs-body-color-rgb: 22, 32, 44;
  --tb-body-color-rgb: 22, 32, 44;
  --bs-emphasis-color-rgb: 22, 32, 44;
  --tb-emphasis-color-rgb: 22, 32, 44;
  --bs-secondary-color-rgb: 76, 93, 112;
  --tb-secondary-color-rgb: 76, 93, 112;
  --bs-link-color-rgb: 168, 18, 58;
  --tb-link-color-rgb: 168, 18, 58;
}

/* ── Type ───────────────────────────────────────────────────────────────── */

body {
  font-family: var(--fi-font-body);
  font-weight: 400;
  color: var(--fi-ink);
  background: var(--fi-page);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.fi-display {
  font-family: var(--fi-font-display);
  font-weight: var(--fi-font-display-weight);
  color: var(--fi-ink);
  letter-spacing: -0.015em;
}

/* A brand name set in the display face at body size — cards, rows, headers. */
.fi-brand-name {
  font-family: var(--fi-font-display);
  font-weight: var(--fi-font-display-weight);
  letter-spacing: -0.01em;
  color: var(--fi-ink);
}

/* The uppercase eyebrow, in the accent. Not a heading. */
.fi-eyebrow {
  font-family: var(--fi-font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fi-accent-text);
}

.text-muted,
.form-text {
  color: var(--fi-ink-2) !important;
}

/* Bootstrap's utility uses !important, so this must too, or `.text-primary`
 * renders the fill crimson as text and fails 1.4.3 on the dark card. */
.text-primary {
  color: var(--fi-accent-text) !important;
}

a {
  color: var(--fi-accent-text);
}

a:hover {
  color: var(--fi-ink);
}

hr {
  border-color: var(--fi-hairline);
  opacity: 1;
}

/* ── Surfaces ───────────────────────────────────────────────────────────── */

.card {
  --bs-card-bg: var(--fi-card);
  --tb-card-bg: var(--fi-card);
  --bs-card-border-color: var(--fi-card-border);
  --tb-card-border-color: var(--fi-card-border);
  --bs-card-cap-bg: transparent;
  --tb-card-cap-bg: transparent;
  --bs-card-color: var(--fi-ink);
  --tb-card-color: var(--fi-ink);
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-card-radius);
  color: var(--fi-ink);
  box-shadow: var(--fi-card-shadow, none);
}

.card-img-top,
.card > img:first-child {
  border-top-left-radius: calc(var(--fi-card-radius) - 1px);
  border-top-right-radius: calc(var(--fi-card-radius) - 1px);
}

/* Glass: the card treatment used over photography and the page gradient. */
.fi-glass {
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-card-radius);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.fi-card {
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-card-radius);
  box-shadow: none;
}

.fi-card-hover:hover,
.fi-product-card:hover {
  background: var(--fi-elevated);
  box-shadow: none;
  transform: translateY(-2px);
}

.shadow-sm,
.shadow {
  box-shadow: none !important;
}

.bg-light,
.bg-white,
.bg-body,
.bg-body-tertiary {
  background-color: var(--fi-elevated) !important;
  color: var(--fi-ink);
}

.bg-primary-subtle { background-color: var(--fi-accent-subtle) !important; }
.text-primary.bg-primary-subtle,
.badge.bg-primary-subtle { color: var(--fi-accent-subtle-text) !important; }

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--fi-hairline) !important;
}

.list-group {
  --bs-list-group-bg: transparent;
  --tb-list-group-bg: transparent;
  --bs-list-group-color: var(--fi-ink);
  --tb-list-group-color: var(--fi-ink);
  --bs-list-group-border-color: var(--fi-hairline);
  --tb-list-group-border-color: var(--fi-hairline);
  --bs-list-group-action-hover-bg: var(--fi-elevated);
  --tb-list-group-action-hover-bg: var(--fi-elevated);
  --bs-list-group-action-hover-color: var(--fi-ink);
  --tb-list-group-action-hover-color: var(--fi-ink);
  --bs-list-group-active-bg: var(--fi-accent-fill);
  --tb-list-group-active-bg: var(--fi-accent-fill);
  --bs-list-group-active-border-color: var(--fi-accent-fill);
  --tb-list-group-active-border-color: var(--fi-accent-fill);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--fi-card);
  --tb-dropdown-bg: var(--fi-card);
  --bs-dropdown-border-color: var(--fi-card-border);
  --tb-dropdown-border-color: var(--fi-card-border);
  --bs-dropdown-color: var(--fi-ink);
  --tb-dropdown-color: var(--fi-ink);
  --bs-dropdown-link-color: var(--fi-ink);
  --tb-dropdown-link-color: var(--fi-ink);
  --bs-dropdown-link-hover-bg: var(--fi-elevated);
  --tb-dropdown-link-hover-bg: var(--fi-elevated);
  --bs-dropdown-link-hover-color: var(--fi-ink);
  --tb-dropdown-link-hover-color: var(--fi-ink);
  border-radius: 14px;
}

.table {
  --bs-table-bg: transparent;
  --tb-table-bg: transparent;
  --bs-table-color: var(--fi-ink);
  --tb-table-color: var(--fi-ink);
  --bs-table-border-color: var(--fi-hairline);
  --tb-table-border-color: var(--fi-hairline);
  --bs-table-striped-bg: var(--fi-canvas);
  --tb-table-striped-bg: var(--fi-canvas);
  --bs-table-hover-bg: var(--fi-elevated);
  --tb-table-hover-bg: var(--fi-elevated);
}

.modal-content,
.offcanvas,
.toast {
  background: var(--fi-card);
  border-color: var(--fi-card-border);
  color: var(--fi-ink);
}

/* ── Controls ───────────────────────────────────────────────────────────── */

.form-control,
.form-select,
.input-group-text {
  background-color: var(--fi-canvas);
  border-color: var(--fi-hairline);
  color: var(--fi-ink);
  border-radius: 12px;
}

.form-control::placeholder {
  color: var(--fi-ink-2);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--fi-canvas);
  border-color: var(--fi-accent);
  color: var(--fi-ink);
  box-shadow: 0 0 0 0.2rem rgba(var(--fi-accent-rgb), 0.2);
}

.form-check-input {
  background-color: var(--fi-canvas);
  border-color: var(--fi-hairline);
}

.form-check-input:checked {
  background-color: var(--fi-accent-fill);
  border-color: var(--fi-accent-fill);
}

.btn {
  border-radius: var(--fi-btn-radius);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.btn-lg,
.btn-sm {
  border-radius: var(--fi-btn-radius);
}

/* The filled primary: a crimson pill with a glow. The gradient stays inside
 * the tones white text clears at 4.5:1 (#D61C46 → #E01F4A); the lighter rose
 * lives in the glow behind it, where no text sits. */
.btn-primary {
  --bs-btn-bg: var(--fi-accent-fill);
  --tb-btn-bg: var(--fi-accent-fill);
  --bs-btn-border-color: transparent;
  --tb-btn-border-color: transparent;
  --bs-btn-color: #ffffff;
  --tb-btn-color: #ffffff;
  --bs-btn-hover-bg: var(--fi-accent-fill-hover);
  --tb-btn-hover-bg: var(--fi-accent-fill-hover);
  --bs-btn-hover-border-color: transparent;
  --tb-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--fi-accent-fill-active);
  --tb-btn-active-bg: var(--fi-accent-fill-active);
  --bs-btn-active-border-color: transparent;
  --tb-btn-active-border-color: transparent;
  --bs-btn-disabled-bg: var(--fi-accent-fill);
  --tb-btn-disabled-bg: var(--fi-accent-fill);
  --bs-btn-disabled-border-color: transparent;
  --tb-btn-disabled-border-color: transparent;
  --tb-btn-focus-shadow-rgb: var(--fi-accent-rgb);
  background-image: linear-gradient(135deg, #D61C46 0%, #E01F4A 100%);
  box-shadow: 0 8px 24px rgba(var(--fi-accent-rgb), 0.28);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-image: linear-gradient(135deg, #C81A41 0%, #D61C46 100%);
  box-shadow: 0 10px 28px rgba(var(--fi-accent-rgb), 0.36);
}

.btn-primary:active,
.btn-primary.active {
  background-image: none;
}

/* Ghost: a hairline pill that reads as the secondary action everywhere. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-dark,
.btn-light,
.btn-secondary {
  --bs-btn-bg: transparent;
  --tb-btn-bg: transparent;
  --bs-btn-color: var(--fi-ink);
  --tb-btn-color: var(--fi-ink);
  --bs-btn-border-color: var(--fi-hairline);
  --tb-btn-border-color: var(--fi-hairline);
  --bs-btn-hover-bg: var(--fi-elevated);
  --tb-btn-hover-bg: var(--fi-elevated);
  --bs-btn-hover-color: var(--fi-ink);
  --tb-btn-hover-color: var(--fi-ink);
  --bs-btn-hover-border-color: var(--fi-ink-2);
  --tb-btn-hover-border-color: var(--fi-ink-2);
  --bs-btn-active-bg: var(--fi-elevated);
  --tb-btn-active-bg: var(--fi-elevated);
  --bs-btn-active-color: var(--fi-ink);
  --tb-btn-active-color: var(--fi-ink);
  --bs-btn-active-border-color: var(--fi-ink-2);
  --tb-btn-active-border-color: var(--fi-ink-2);
  --tb-btn-focus-shadow-rgb: var(--fi-accent-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--fi-accent-text);
  --tb-btn-color: var(--fi-accent-text);
  --bs-btn-border-color: rgba(var(--fi-accent-rgb), 0.45);
  --tb-btn-border-color: rgba(var(--fi-accent-rgb), 0.45);
  --bs-btn-hover-bg: var(--fi-accent-fill);
  --tb-btn-hover-bg: var(--fi-accent-fill);
  --bs-btn-hover-color: #ffffff;
  --tb-btn-hover-color: #ffffff;
  --bs-btn-hover-border-color: var(--fi-accent-fill);
  --tb-btn-hover-border-color: var(--fi-accent-fill);
  --bs-btn-active-bg: var(--fi-accent-fill);
  --tb-btn-active-bg: var(--fi-accent-fill);
  --bs-btn-active-color: #ffffff;
  --tb-btn-active-color: #ffffff;
}

/* Soft: the tinted pill (chips, the "Save" button). */
.fi-btn-soft {
  --bs-btn-bg: var(--fi-elevated);
  --tb-btn-bg: var(--fi-elevated);
  --bs-btn-color: var(--fi-ink);
  --tb-btn-color: var(--fi-ink);
  --bs-btn-border-color: transparent;
  --tb-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--fi-accent-subtle);
  --tb-btn-hover-bg: var(--fi-accent-subtle);
  --bs-btn-hover-color: var(--fi-accent-subtle-text);
  --tb-btn-hover-color: var(--fi-accent-subtle-text);
  --bs-btn-hover-border-color: transparent;
  --tb-btn-hover-border-color: transparent;
}

.btn-link {
  --bs-btn-color: var(--fi-accent-text);
  --tb-btn-color: var(--fi-accent-text);
  --bs-btn-hover-color: var(--fi-ink);
  --tb-btn-hover-color: var(--fi-ink);
}

.btn-close {
  filter: var(--fi-btn-close-filter, none);
}

:root[data-theme="dark"] .btn-close,
:root:not([data-theme="light"]) .btn-close {
  --fi-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* Tags: the small uppercase chip on cards and the brand header. */
.badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.62rem;
  padding: 0.35em 0.7em;
}

.fi-tag {
  display: inline-block;
  border-radius: 999px;
  background: var(--fi-accent-subtle);
  color: var(--fi-accent-subtle-text);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.38em 0.75em;
  line-height: 1.2;
}

.fi-tag-neutral {
  background: var(--fi-elevated);
  color: var(--fi-ink-2);
}

/* Chips: the toggle pills under a search field or a filter legend. */
.fi-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--fi-hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--fi-ink);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.35rem 0.85rem;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.fi-chip:hover {
  background: var(--fi-elevated);
  color: var(--fi-ink);
}

.fi-chip.active,
.fi-chip[aria-pressed="true"],
.fi-chip[aria-current="page"] {
  background: var(--fi-accent-fill);
  border-color: var(--fi-accent-fill);
  color: #ffffff;
}

.page-link {
  background: transparent;
  border-color: var(--fi-hairline);
  color: var(--fi-ink);
}

.page-link:hover {
  background: var(--fi-elevated);
  border-color: var(--fi-ink-2);
  color: var(--fi-ink);
}

.page-item.active .page-link {
  background-color: var(--fi-accent-fill);
  border-color: var(--fi-accent-fill);
  color: #ffffff;
}

.page-item.disabled .page-link {
  background: transparent;
  border-color: var(--fi-hairline);
  color: var(--fi-ink-2);
}

/* ── The glowing search pill ────────────────────────────────────────────── */

.fi-search input {
  height: 46px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 52px 0 46px;
  background:
    linear-gradient(var(--fi-card), var(--fi-card)) padding-box,
    var(--fi-pill-gradient) border-box;
  color: var(--fi-ink);
  box-shadow: var(--fi-glow);
  font-size: 0.9rem;
}

.fi-search .fi-search-icon {
  left: 16px;
  color: var(--fi-ink-2);
  font-size: 1.05rem;
}

.fi-search input::placeholder {
  color: var(--fi-ink-2);
}

.fi-search input:focus {
  background:
    linear-gradient(var(--fi-elevated), var(--fi-elevated)) padding-box,
    var(--fi-pill-gradient) border-box;
  box-shadow: var(--fi-glow), 0 0 0 4px rgba(var(--fi-accent-rgb), 0.18);
}

/* The round crimson "go" button that sits inside the pill. */
.fi-search-go {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: var(--fi-accent-fill);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 14px rgba(var(--fi-accent-rgb), 0.35);
}

.fi-search-go:hover {
  background: var(--fi-accent-fill-hover);
  color: #ffffff;
}

/* ── Legacy chrome, retoned until Phase B replaces it ───────────────────── */

.navbar,
.navbar-light {
  --bs-navbar-color: var(--fi-ink-2);
  --tb-navbar-color: var(--fi-ink-2);
  --bs-navbar-hover-color: var(--fi-ink);
  --tb-navbar-hover-color: var(--fi-ink);
  --bs-navbar-active-color: var(--fi-ink);
  --tb-navbar-active-color: var(--fi-ink);
  --bs-navbar-brand-color: var(--fi-ink);
  --tb-navbar-brand-color: var(--fi-ink);
  --bs-navbar-toggler-border-color: var(--fi-hairline);
  --tb-navbar-toggler-border-color: var(--fi-hairline);
}

.navbar .nav-link {
  color: var(--fi-ink-2);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  color: var(--fi-ink);
}

/* An SVG data URI cannot read a CSS variable, so the stroke is per theme. */
:root:not([data-theme="light"]) .navbar-toggler-icon {
  --tb-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28246, 242, 243, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.fi-hero {
  color: var(--fi-ink);
  background: var(--fi-canvas);
  border: 1px solid var(--fi-canvas-border);
  box-shadow: none;
}

.fi-hero::before,
.fi-hero::after {
  background: var(--fi-elevated);
}

.fi-hero h1,
.fi-hero .h1 {
  color: var(--fi-ink);
}

.fi-hero .fi-hero-sub {
  color: var(--fi-ink-2);
}

.fi-hero-eyebrow {
  background: var(--fi-elevated);
  color: var(--fi-ink);
  font-weight: 600;
}

.fi-hero-figure {
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  color: var(--fi-ink);
  backdrop-filter: none;
}

.fi-hero-dot {
  background: var(--fi-ink-2);
}

.fi-hero-dot.active {
  background: var(--fi-ink);
}

.fi-hero-control {
  background: var(--fi-elevated);
  color: var(--fi-ink);
}

.fi-hero-control:hover {
  background: var(--fi-card-border);
}

.fi-hero .btn-light {
  background: var(--fi-accent-fill);
  background-image: linear-gradient(135deg, #D61C46 0%, #E01F4A 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(var(--fi-accent-rgb), 0.28);
}

.fi-hero .btn-light:hover {
  background-image: linear-gradient(135deg, #C81A41 0%, #D61C46 100%);
  color: #ffffff;
}

.fi-cat-circle {
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  color: var(--fi-ink);
}

.fi-cat:hover .fi-cat-circle {
  background: var(--fi-accent-subtle);
  border-color: transparent;
  color: var(--fi-accent-subtle-text);
}

.fi-cat-label {
  color: var(--fi-ink-2);
}

.fi-cat:hover .fi-cat-label {
  color: var(--fi-accent-text);
}

.fi-seller-logo {
  background: var(--fi-card);
  border-color: var(--fi-card-border);
}

/* ── Admin chrome ────────────────────────────────────────────────────────
 * The same frame as the public shell: the sidebar sits on the page like the
 * rail, and the working area is the rounded canvas with the aurora at its
 * top. fiyobra-brand.css still carries the pre-redesign light admin (a
 * #f4f5f9 background, white bars, pastel icon tiles); every one of those
 * literals is overridden here, including the `.rose` / `.dark` tile tones,
 * whose two-class selectors outrank a bare `.fi-stat-icon`. */
.fi-admin {
  background: var(--fi-page);
  color: var(--fi-ink);
}

.fi-admin-sidebar {
  background: var(--fi-page);
  border-right: 0;
  color: var(--fi-ink);
}

.fi-admin-brand {
  border-bottom: 1px solid var(--fi-hairline);
}

.fi-admin-section {
  color: var(--fi-ink-2);
}

.fi-admin-nav-link {
  border-radius: var(--fi-btn-radius);
  color: var(--fi-ink-2);
}

.fi-admin-nav-link:hover {
  background: var(--fi-elevated);
  color: var(--fi-ink);
}

/* The rail's active item: a crimson fill, white ink (4.7:1). The dot that
 * fiyobra-a11y.css adds keeps the state from resting on colour alone. */
.fi-admin-nav-link.active {
  background: var(--fi-accent-fill);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(var(--fi-accent-rgb), 0.28);
}

.fi-admin-nav-link.active:hover {
  background: var(--fi-accent-fill-hover);
  color: #ffffff;
}

/* The canvas. `overflow: clip`, not hidden: hidden would make this the
 * scroll container and the sticky topbar would stop sticking. */
.fi-admin-main {
  position: relative;
  margin: var(--fi-shell-gap) var(--fi-shell-gap) var(--fi-shell-gap) 0;
  min-height: calc(100vh - var(--fi-shell-gap) * 2);
  min-height: calc(100dvh - var(--fi-shell-gap) * 2);
  background: var(--fi-canvas);
  border: 1px solid var(--fi-canvas-border);
  border-radius: var(--fi-canvas-radius);
  overflow: clip;
}

.fi-admin-main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 420px;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 0% 0%, rgba(var(--fi-accent-rgb), 0.22), transparent 70%),
    radial-gradient(45% 55% at 100% 0%, rgba(var(--fi-accent-rgb), 0.16), transparent 70%);
}

:root[data-theme="light"] .fi-admin-main::before {
  background:
    radial-gradient(60% 60% at 0% 0%, rgba(var(--fi-accent-rgb), 0.08), transparent 70%),
    radial-gradient(45% 55% at 100% 0%, rgba(62, 88, 113, 0.1), transparent 70%);
}

.fi-admin-main > * {
  position: relative;
}

/* Sticky over scrolling content, so it needs a surface — translucent, so
 * the aurora still shows through at the top of the page. */
.fi-admin-topbar {
  position: sticky;
  background: color-mix(in srgb, var(--fi-canvas) 72%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fi-hairline);
}

.fi-admin-chip {
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-btn-radius);
  color: var(--fi-ink);
}

.fi-admin-avatar {
  background: var(--fi-accent-fill);
  border-radius: var(--fi-btn-radius);
  color: #ffffff;
}

.fi-eyebrow {
  color: var(--fi-ink-2);
}

/* The TOTP enrolment QR code. White in BOTH themes: the padding is the
 * code's quiet zone (it is rendered with margin 0), and a scanner needs it
 * light. Not `.bg-white`, which this file deliberately turns dark. */
.fi-qr {
  background: #ffffff;
}

.fi-stat-icon,
.fi-stat-icon.rose {
  background: var(--fi-accent-subtle);
  color: var(--fi-accent-subtle-text);
}

.fi-stat-icon.dark {
  background: var(--fi-elevated);
  border: 1px solid var(--fi-hairline);
  color: var(--fi-ink);
}

@media (max-width: 991.98px) {
  /* Off-canvas drawer: it floats over the canvas, so it takes one. */
  .fi-admin-sidebar {
    background: var(--fi-canvas);
    border-right: 1px solid var(--fi-canvas-border);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
  }

  .fi-admin-backdrop {
    background: var(--fi-veil);
  }

  /* Edge to edge, rounded at the top only — the public canvas under lg. */
  .fi-admin-main {
    margin: 0;
    border-radius: var(--fi-canvas-radius) var(--fi-canvas-radius) 0 0;
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* Legal documents keep their measure; only the tones change. */
.fi-legal a {
  color: var(--fi-accent-text);
}

.fi-legal code {
  background: var(--fi-elevated);
  color: var(--fi-ink);
}

.fi-legal th {
  background: var(--fi-elevated);
}

.fi-legal th,
.fi-legal td {
  border-color: var(--fi-hairline);
}

/* ── Motion ─────────────────────────────────────────────────────────────── */

.card,
.fi-card,
.fi-product-card,
.fi-chip,
.btn {
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .fi-card,
  .fi-product-card,
  .fi-chip,
  .btn {
    transition: none;
    transform: none !important;
  }
}

/* ── Status pills (Components/StatusPill) ───────────────────────────────── */

:root,
:root[data-theme="dark"] {
  --fi-status-published-bg: #0b3b28;
  --fi-status-published-color: #7EEBC6;   /* 8.7:1 */
  --fi-status-draft-bg: #232223;
  --fi-status-draft-color: #C2BBBF;       /* 8.4:1 */
  --fi-status-suspended-bg: #3A0D18;
  --fi-status-suspended-color: #FFB3C3;   /* 10.0:1 */
}

:root[data-theme="light"] {
  --fi-status-published-bg: #e7f7ee;
  --fi-status-published-color: #2d7a4e;   /* 4.7:1 */
  --fi-status-draft-bg: #f0f0f0;
  --fi-status-draft-color: #5c5c5c;       /* 5.9:1 */
  --fi-status-suspended-bg: #fde4e9;
  --fi-status-suspended-color: #b0291f;   /* 5.8:1 */
}

/* ══════════════════════════════════════════════════════════════════════════
 * The shell (redesign Phase B): rail + canvas from lg up, top bar + tab bar
 * below. Layouts/SiteLayout.jsx.
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
  --fi-rail-width: 60px;
  --fi-shell-gap: 8px;
  --fi-tabbar-height: 64px;
  --fi-topbar-height: 56px;
}

.fi-shell {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fi-page);
  display: flex;
  flex-direction: column;
}

/* ── Rail ───────────────────────────────────────────────────────────────── */

.fi-rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--fi-rail-width);
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 12px;
  z-index: 1030;
}

.fi-rail-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--fi-chrome-ink);
  border-radius: 12px;
  padding: 4px;
}

.fi-rail-wordmark {
  font-size: 0.72rem;
  line-height: 1;
  color: var(--fi-chrome-ink);
}

.fi-rail-nav ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: var(--fi-chrome-pill);
  border: 1px solid var(--fi-chrome-pill-border);
  border-radius: 999px;
}

.fi-rail-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: var(--fi-chrome-ink-2);
  font-size: 1.15rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.fi-rail-item:hover {
  background: var(--fi-chrome-soft);
  color: var(--fi-chrome-ink);
}

.fi-rail-item.active {
  background: var(--fi-accent-fill);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(var(--fi-accent-rgb), 0.35);
}

/* ── Account menu (rail foot and mobile top bar) ────────────────────────── */

.fi-user-menu {
  position: relative;
}

.fi-user-menu-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 4px;
  border-radius: 12px;
  /* The trigger sits on the chrome (rail foot, mobile top bar); the panel it
   * opens is a card and keeps the theme's own ink. */
  color: var(--fi-chrome-ink-2);
  cursor: pointer;
}

.fi-user-menu-topbar .fi-user-menu-button {
  flex-direction: row;
}

.fi-user-menu-guest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--fi-chrome-soft);
  border: 1px solid var(--fi-chrome-hairline);
  color: var(--fi-chrome-ink);
  font-size: 1rem;
}

.fi-user-menu-name {
  font-size: 0.62rem;
  line-height: 1;
  max-width: var(--fi-rail-width);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fi-user-menu-panel {
  position: absolute;
  z-index: 1040;
  min-width: 240px;
  padding: 8px;
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fi-user-menu-panel[hidden] {
  display: none;
}

.fi-user-menu-rail .fi-user-menu-panel {
  left: calc(100% + 8px);
  bottom: 0;
}

.fi-user-menu-topbar .fi-user-menu-panel {
  right: 0;
  top: calc(100% + 8px);
}

.fi-user-menu-identity {
  display: flex;
  flex-direction: column;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--fi-hairline);
  margin-bottom: 4px;
}

.fi-user-menu-fullname {
  font-weight: 600;
  color: var(--fi-ink);
}

.fi-user-menu-email {
  font-size: 0.78rem;
  color: var(--fi-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
}

.fi-user-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fi-ink);
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.fi-user-menu-item:hover {
  background: var(--fi-elevated);
  color: var(--fi-ink);
}

.fi-user-menu-signout {
  color: var(--fi-accent-text);
  border-top: 1px solid var(--fi-hairline);
  border-radius: 0 0 10px 10px;
  margin-top: 4px;
}

.fi-user-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  font-size: 0.85rem;
  color: var(--fi-ink-2);
}

/* ── Canvas ─────────────────────────────────────────────────────────────── */

.fi-canvas {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--fi-canvas);
  border: 1px solid var(--fi-canvas-border);
  border-radius: var(--fi-canvas-radius) var(--fi-canvas-radius) 0 0;
  padding-bottom: calc(var(--fi-tabbar-height) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

/* The aurora: two soft crimson glows at the top corners. */
.fi-canvas::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 420px;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 0% 0%, rgba(var(--fi-accent-rgb), 0.22), transparent 70%),
    radial-gradient(45% 55% at 100% 0%, rgba(var(--fi-accent-rgb), 0.16), transparent 70%);
}

/* Harbour's canvas is a surface, not a wash: the aurora drops to a hint of
 * crimson at the left and a cool steel fall-off at the right, just enough to
 * keep the top of the canvas from reading as a flat rectangle. */
:root[data-theme="light"] .fi-canvas::before {
  height: 320px;
  background:
    radial-gradient(60% 60% at 0% 0%, rgba(var(--fi-accent-rgb), 0.08), transparent 70%),
    radial-gradient(45% 55% at 100% 0%, rgba(62, 88, 113, 0.1), transparent 70%);
}

.fi-canvas > * {
  position: relative;
}

@media (min-width: 992px) {
  .fi-canvas {
    margin: var(--fi-shell-gap) var(--fi-shell-gap) var(--fi-shell-gap) calc(var(--fi-rail-width) + var(--fi-shell-gap) / 2);
    border-radius: var(--fi-canvas-radius);
    padding-bottom: 0;
    min-height: calc(100vh - var(--fi-shell-gap) * 2);
    min-height: calc(100dvh - var(--fi-shell-gap) * 2);
  }
}

.fi-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--fi-topbar-height);
  padding: 0 16px;
}

.fi-topbar-logo {
  text-decoration: none;
}

/* The mobile top bar is a child of the canvas, not of the shell — so in
 * Harbour it has to be painted with the chrome colour explicitly, or the
 * account control (which reads --fi-chrome-ink-2, white) would sit on slate
 * at 1.3:1. The canvas clips it, so the rounded top corners come for free.
 * Noir needs none of this: there the canvas and the chrome are both black. */
:root[data-theme="light"] .fi-topbar {
  background: var(--fi-page);
  border-bottom: 1px solid var(--fi-chrome-hairline);
  position: relative;
  z-index: 1;
}

/* Components/Logo sets the wordmark in `.fi-display`, which carries its own
 * `color: var(--fi-ink)` — inheriting from the bar is not enough. */
:root[data-theme="light"] .fi-topbar-logo .fi-display {
  color: var(--fi-chrome-ink);
}

/* The admin sign-in, TOTP challenge and TOTP enrolment are full-page screens
 * painted with --fi-page, which in Harbour is the navy chrome — so everything
 * outside their card reads the chrome ink. The card itself is a card and keeps
 * the theme's own. */
:root[data-theme="light"] .fi-admin-auth {
  color: var(--fi-chrome-ink);
}

:root[data-theme="light"] .fi-admin-auth > * > .text-center .fi-display {
  color: var(--fi-chrome-ink);
}

:root[data-theme="light"] .fi-admin-auth > * > .text-center p {
  /* --fi-accent-text is 2.4:1 on navy; the chrome's rose is 7.4:1. */
  color: var(--fi-chrome-active) !important;
}

.fi-canvas-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px 0;
}

.fi-canvas-top-left {
  min-width: 0;
  flex: 1;
}

.fi-canvas-top-left:empty {
  display: none;
}

.fi-canvas-search {
  max-width: 360px;
  width: 100%;
  margin-left: auto;
}

@media (max-width: 991.98px) {
  .fi-canvas-top {
    flex-direction: column;
    align-items: stretch;
  }

  .fi-canvas-search {
    max-width: none;
  }
}

@media (min-width: 992px) {
  .fi-canvas-top {
    padding: 18px 24px 0;
  }
}

.fi-canvas-main {
  flex: 1;
}

.fi-canvas-main > .container {
  max-width: 1180px;
}

.fi-canvas-footer {
  padding: 24px 16px;
  border-top: 1px solid var(--fi-hairline);
  font-size: 0.78rem;
  color: var(--fi-ink-2);
}

@media (min-width: 992px) {
  .fi-canvas-footer {
    padding: 24px;
  }
}

.fi-canvas-footer-strapline {
  letter-spacing: 0.04em;
}

.fi-canvas-footer-link,
.fi-canvas-footer-link.btn-link {
  font-size: 0.78rem;
  color: var(--fi-ink-2);
  text-decoration: none;
}

.fi-canvas-footer-link:hover,
.fi-canvas-footer-link.btn-link:hover {
  color: var(--fi-ink);
  text-decoration: underline;
}

.fi-canvas-footer-legal {
  border-top: 1px solid var(--fi-hairline);
}

/* ── Tab bar ────────────────────────────────────────────────────────────── */

.fi-tabbar {
  position: fixed;
  inset: auto 0 0 0;
  height: calc(var(--fi-tabbar-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--fi-page);
  border-top: 1px solid var(--fi-chrome-hairline);
  z-index: 1030;
}

.fi-tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--fi-tabbar-height);
  color: var(--fi-chrome-ink-2);
  font-size: 1.2rem;
  text-decoration: none;
}

.fi-tabbar-label {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.fi-tabbar-item.active {
  color: var(--fi-chrome-active);
}

/* The chrome is dark in BOTH themes, so the focus ring on a control that sits
 * ON it is the chrome's, not the theme's — a near-black ring on navy is no
 * ring at all. fiyobra-a11y.css reads these two names through var(), so
 * redefining them on the control is enough. Scoped to the controls and NOT to
 * `.fi-rail` / `.fi-topbar`, because the account menu panel opens inside both
 * and is a near-white card: a white ring in there would vanish. */
.fi-rail-logo,
.fi-rail-item,
.fi-tabbar-item,
.fi-topbar-logo,
.fi-user-menu-rail .fi-user-menu-button,
.fi-user-menu-topbar .fi-user-menu-button {
  --fi-focus-ring: var(--fi-chrome-focus-ring);
  --fi-focus-halo: var(--fi-chrome-focus-halo);
}

/* ── Surfaces and the guest card ────────────────────────────────────────── */

.fi-surface {
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-card-radius);
  /* Unset in Noir, where a card is glass and the hairline does the lifting.
   * Harbour defines it: on a slate canvas the hierarchy comes from elevation,
   * which is also why the card is near-white rather than white. */
  box-shadow: var(--fi-card-shadow, none);
}

.fi-surface-padded {
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.fi-guest {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  min-height: 60vh;
}

.fi-guest-card {
  width: 100%;
  max-width: 440px;
}

/* ── The search page ────────────────────────────────────────────────────── */

.fi-search-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(3rem, 12vh, 9rem) 16px 4rem;
}

.fi-search-page-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  box-shadow: 0 0 40px rgba(var(--fi-accent-rgb), 0.3);
  margin-bottom: 1.5rem;
}

.fi-search-page-heading {
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  margin-bottom: 1.25rem;
}

.fi-search-page-pill {
  max-width: 560px;
  width: 100%;
}

.fi-search-lg input {
  height: 54px;
  font-size: 1rem;
}

.fi-search-lg .fi-search-go {
  width: 40px;
  height: 40px;
  right: 7px;
}

.fi-search-page-chips {
  margin-top: 1rem;
}

.fi-search-page-hint {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--fi-ink-2);
}

/* ══════════════════════════════════════════════════════════════════════════
 * Fiyobra pages (redesign Phase C): home, listing, the step form.
 * ══════════════════════════════════════════════════════════════════════════ */

.fi-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.fi-section-title {
  font-size: 1.15rem;
  margin: 0;
}

.fi-section-link {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fi-accent-text);
  text-decoration: none;
  white-space: nowrap;
}

.fi-section-link:hover {
  color: var(--fi-ink);
}

/* ── The featured-brand hero ────────────────────────────────────────────── */

.fi-featured {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--fi-card-border);
  background: var(--fi-card);
  min-height: 300px;
}

/* The cover photograph, desaturated under the veil so the crimson stays the
 * only chroma on the page. */
.fi-featured-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  opacity: 0.35;
}

.fi-featured-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--fi-card) 0%, rgba(21, 21, 21, 0.6) 55%, rgba(21, 21, 21, 0.2) 100%);
}

/* A photograph is a photograph in both themes: Harbour keeps the dark veil
 * and flips the ink tokens white FOR THIS BLOCK, rather than bleaching the
 * image to white and printing dark text on it. Redefining the two tokens here
 * carries every descendant with it — the stat labels and the ghost button
 * included — so no rule inside the hero needs a light-theme twin. */
:root[data-theme="light"] .fi-featured {
  --fi-ink: #FFFFFF;
  --fi-ink-2: rgba(255, 255, 255, 0.78);
  --fi-focus-ring: var(--fi-chrome-focus-ring);
  --fi-focus-halo: var(--fi-chrome-focus-halo);
  /* The tokens alone are not enough: an element with no colour of its own
   * INHERITS the computed colour from <body>, which resolved --fi-ink at the
   * root and is therefore dark. Setting it here gives the whole block a white
   * inherited colour, which the stat labels and dd/dt pick up. */
  color: var(--fi-ink);
}

/* The veil alone cannot carry this one. `.fi-featured-backdrop` is painted at
 * opacity 0.35, and an element's opacity applies to its ::after as well — so
 * the darkest veil this card can produce is 35 % of itself. In Noir that is
 * enough because the card underneath is already black; over a near-white card
 * it leaves white text at 2:1. So in Harbour the PANEL is the dark surface and
 * the photograph is a texture on it, which is what the mockup shows. */
:root[data-theme="light"] .fi-featured {
  background: #16222F;
  border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="light"] .fi-featured-backdrop {
  /* Brightest possible pixel composites to #575F67 → white text at 7.2:1. */
  opacity: 0.28;
  filter: grayscale(0.55);
}

:root[data-theme="light"] .fi-featured-backdrop::after {
  background: linear-gradient(90deg, #16222F 0%, rgba(11, 22, 34, 0.9) 46%, rgba(11, 22, 34, 0.45) 100%);
}

.fi-featured-body {
  position: relative;
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.fi-featured-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(96px, 14vw, 160px);
  height: clamp(96px, 14vw, 160px);
  border-radius: 999px;
  background: #ffffff;
  border: 6px solid var(--fi-elevated);
  overflow: hidden;
  color: var(--fi-ink-2);
  font-size: 2.5rem;
}

.fi-featured-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fi-featured-copy {
  min-width: 0;
}

.fi-featured-name {
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin: 0.35rem 0 0.5rem;
  line-height: 1.05;
}

.fi-featured-text {
  max-width: 560px;
  color: var(--fi-ink-2);
  margin-bottom: 1.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fi-featured-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1.25rem;
}

.fi-featured-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 0;
}

.fi-featured-stats > div {
  display: flex;
  flex-direction: column;
}

.fi-featured-stats dt {
  font-family: var(--fi-font-display);
  font-weight: var(--fi-font-display-weight);
  font-size: 1.2rem;
  color: var(--fi-ink);
}

.fi-featured-stats dd {
  margin: 0;
  font-size: 0.72rem;
  color: var(--fi-ink-2);
}

.fi-featured-dots {
  position: absolute;
  right: 20px;
  bottom: 18px;
  display: flex;
  gap: 6px;
}

@media (max-width: 767.98px) {
  .fi-featured-body {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Brand card ─────────────────────────────────────────────────────────── */

.fi-brand-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-card-radius);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.fi-brand-card:hover {
  background: var(--fi-elevated);
  transform: translateY(-2px);
}

.fi-brand-card-head {
  display: flex;
  gap: 12px;
  align-items: center;
}

.fi-brand-card-logo,
.fi-result-logo,
.fi-recent-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  color: #6F6B73;
  border: 1px solid var(--fi-card-border);
}

.fi-brand-card-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 1.2rem;
}

.fi-brand-card-logo img,
.fi-result-logo img,
.fi-recent-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fi-brand-card-name {
  font-size: 1.05rem;
  margin: 0 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fi-brand-card-tagline {
  flex: 1;
  margin: 0;
  font-size: 0.82rem;
  color: var(--fi-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fi-brand-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fi-brand-card-meta {
  font-size: 0.72rem;
  color: var(--fi-ink-2);
}

.fi-brand-card-actions {
  display: inline-flex;
  gap: 6px;
}

.fi-favorite-compact {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Listing: filters and result rows ───────────────────────────────────── */

.fi-filters .fi-eyebrow {
  margin-bottom: 0.5rem;
}

.fi-filter-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fi-filter-check .form-check-input {
  width: 14px;
  height: 14px;
  margin-top: 0.3em;
  border-radius: 999px;
}

.fi-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.fi-results-count {
  font-family: var(--fi-font-body);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--fi-ink-2);
  margin: 0;
}

.fi-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.fi-result {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-card-radius);
  transition: background-color 0.15s ease;
}

.fi-result:hover {
  background: var(--fi-elevated);
}

.fi-result-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 1.4rem;
}

.fi-result-body {
  flex: 1;
  min-width: 0;
}

.fi-result-name {
  font-size: 1.05rem;
  margin: 0 0 2px;
}

.fi-result-kind {
  font-size: 0.72rem;
  color: var(--fi-ink-2);
  margin: 0 0 6px;
}

.fi-result-text {
  font-size: 0.85rem;
  color: var(--fi-ink);
  margin: 0;
}

.fi-result.expanded .fi-result-text {
  white-space: pre-line;
}

.fi-result-more {
  font-size: 0.78rem;
  margin-top: 6px;
}

.fi-result-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

@media (max-width: 575.98px) {
  .fi-result {
    flex-wrap: wrap;
  }

  .fi-result-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ── Recently viewed ────────────────────────────────────────────────────── */

.fi-recent-item {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.15s ease;
}

.fi-recent-item:hover {
  transform: translateY(-2px);
}

.fi-recent-more {
  background: var(--fi-elevated);
  color: var(--fi-ink);
  font-size: 0.85rem;
}

/* ── The registration step form ─────────────────────────────────────────── */

.fi-stepform {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3.5rem) 0 2rem;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.fi-stepform-number {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--fi-font-display);
  font-weight: var(--fi-font-display-weight);
  font-size: clamp(8rem, 24vw, 18rem);
  line-height: 0.85;
  color: var(--fi-ink);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

.fi-stepform-body {
  position: relative;
  width: 100%;
  max-width: 560px;
  text-align: left;
}

.fi-stepform-progress {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fi-ink-2);
  margin-bottom: 1.25rem;
}

.fi-stepform-rule {
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: var(--fi-accent);
  margin: 0 auto 0.75rem;
}

.fi-stepform-heading {
  text-align: center;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 1.5rem;
}

.fi-stepform-field {
  margin-bottom: 1.5rem;
}

.fi-stepform-input {
  font-family: var(--fi-font-display);
  font-size: 1.25rem;
  padding: 0.6rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fi-ink-2);
  border-radius: 0;
}

.fi-stepform-input:focus {
  background: transparent;
  border-color: var(--fi-accent);
  box-shadow: none;
}

.fi-stepform-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.fi-stepform-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}

.fi-stepform-dots li {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--fi-ink-2);
  opacity: 0.5;
}

.fi-stepform-dots li.active {
  background: var(--fi-accent);
  opacity: 1;
}

.fi-stepform-footnote {
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.72rem;
  color: var(--fi-ink-2);
}

.fi-type-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--fi-hairline);
  border-radius: 14px;
  background: var(--fi-card);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fi-type-card:hover {
  background: var(--fi-elevated);
}

.fi-type-card.active {
  border-color: var(--fi-accent);
  box-shadow: 0 0 0 1px var(--fi-accent);
}

.fi-type-card-icon {
  font-size: 1.4rem;
  color: var(--fi-accent-text);
}

.fi-type-card-title {
  font-weight: 600;
  color: var(--fi-ink);
}

.fi-type-card-body {
  font-size: 0.78rem;
  color: var(--fi-ink-2);
}

/* The radio is visually hidden; the card carries its focus ring. */
input[type="radio"].fi-visually-hidden:focus-visible + .fi-type-card {
  outline: 3px solid var(--fi-focus-ring);
  outline-offset: 2px;
}

/* The dashboard sidebar wraps each item in an <li> around the link, so the
 * <li> itself is the list item and paints a marker. Never a theme rule. */
.list-group > li {
  list-style: none;
}

/* ══════════════════════════════════════════════════════════════════════════
 * The brand site (redesign Phase D): header, sub-nav, six tabs, product.
 * ══════════════════════════════════════════════════════════════════════════ */

.fi-brand-site {
  padding-top: 12px;
  padding-bottom: 2rem;
}

.fi-brand-section {
  margin-top: 1.75rem;
}

.fi-preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--fi-accent-subtle);
  color: var(--fi-accent-subtle-text);
  font-size: 0.85rem;
}

/* ── The canvas' top-left: logo disc + name ─────────────────────────────── */

.fi-brand-mini-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fi-brand-mini {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fi-ink);
  min-width: 0;
}

.fi-brand-mini-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--fi-card-border);
  overflow: hidden;
  color: #6F6B73;
}

.fi-brand-mini-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fi-brand-mini-name {
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Hex seal + the "listed by Fiyobra" strip ─────────────────────────────
   Components/BrandSeal. The outline states use ink-2, which holds 3:1
   against the canvas and cards in both themes (WCAG 1.4.11); the verified
   hex is the accent with a white tick. */

.fi-seal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  vertical-align: middle;
}

.fi-seal svg {
  display: block;
  overflow: visible;
}

.fi-seal-hex {
  fill: none;
  stroke: var(--fi-ink-2);
  stroke-width: 1.5;
}

.fi-seal-listed .fi-seal-hex {
  stroke-dasharray: 2.5 2;
}

.fi-seal-glyph {
  fill: var(--fi-ink-2);
  font-size: 9px;
  font-weight: 600;
  font-family: inherit;
}

.fi-seal-verified .fi-seal-hex {
  fill: var(--fi-accent);
  stroke: var(--fi-accent);
}

.fi-seal-tick {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fi-seal-label {
  font-size: 0.8rem;
  color: var(--fi-muted);
}

/* A name that truncates must not take its seal with it. */
.fi-brand-card-name,
.fi-result-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.fi-brand-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The listed seal as a button (signed-in visitors). Icon-sized in cards
   and results, with a hit area wider than the glyph; a labelled pill
   (`chip`) in the brand site's top-left, where it has room to look like
   the control it is. Focus is the a11y layer's ring. */
.fi-seal-button {
  padding: 4px;
  margin: -4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fi-muted);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fi-seal-button:hover {
  background: var(--fi-accent-subtle);
}

.fi-seal-button:hover .fi-seal-hex {
  stroke: var(--fi-accent-subtle-text);
}

.fi-seal-button:hover .fi-seal-glyph {
  fill: var(--fi-accent-subtle-text);
}

.fi-seal-chip {
  margin: 0;
  gap: 6px;
  padding: 3px 6px 3px 5px;
  border: 1px dashed var(--fi-ink-2);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.fi-seal-chip:hover {
  border-color: var(--fi-accent-subtle-text);
  color: var(--fi-accent-subtle-text);
}

.fi-seal-chip .fi-seal-label {
  font-size: inherit;
  color: inherit;
}

.fi-seal-chip-arrow {
  font-size: 1rem;
  margin-left: -2px;
}

/* Native <dialog> (Components/ClaimBrandDialog). */
.fi-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--fi-card-border);
  border-radius: 24px;
  background: var(--fi-card);
  color: var(--fi-ink);
  box-shadow: 0 24px 64px rgba(8, 12, 20, 0.35);
}

.fi-dialog[open] {
  animation: fi-dialog-in 0.18s ease-out;
}

.fi-dialog::backdrop {
  background: rgba(8, 12, 20, 0.55);
  backdrop-filter: blur(3px);
}

@keyframes fi-dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fi-dialog[open] {
    animation: none;
  }
}

.fi-dialog-body {
  position: relative;
  padding: 28px 28px 24px;
}

.fi-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.fi-dialog-close i {
  font-size: 1.2rem;
}

.fi-dialog-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: var(--fi-accent-subtle);
}

/* Solid at this size: the seal's dashes read as dots once scaled up. */
.fi-dialog-mark .fi-seal-hex {
  stroke: var(--fi-accent-subtle-text);
  stroke-dasharray: none;
}

.fi-dialog-mark .fi-seal-glyph {
  fill: var(--fi-accent-subtle-text);
}

.fi-dialog-title {
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 0 40px 8px 0;
}

.fi-dialog-body > p {
  color: var(--fi-muted);
  margin: 0 0 20px;
}

.fi-dialog-body > p.fi-eyebrow {
  margin-bottom: 8px;
}

.fi-dialog-steps {
  list-style: none;
  counter-reset: fi-step;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.fi-dialog-steps li {
  counter-increment: fi-step;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
}

.fi-dialog-steps li::before {
  content: counter(fi-step);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--fi-elevated);
  font-size: 0.75rem;
  font-weight: 600;
}

.fi-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 479.98px) {
  .fi-dialog-actions .btn {
    flex: 1 1 100%;
  }
}

.fi-listed-strip {
  margin: 0 0 4px;
  padding: 10px 14px;
  border: 1px dashed var(--fi-ink-2);
  border-radius: 14px;
  background: var(--fi-card);
  color: var(--fi-muted);
  font-size: 0.875rem;
}

.fi-listed-strip a {
  color: var(--fi-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Pill sub-nav ───────────────────────────────────────────────────────── */

.fi-subnav {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.fi-subnav ul {
  display: flex;
  gap: 4px;
  padding: 5px;
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  border-radius: 999px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.fi-subnav ul::-webkit-scrollbar {
  display: none;
}

.fi-subnav-item {
  border-color: transparent;
  white-space: nowrap;
  padding: 0.45rem 1rem;
}

.fi-subnav-item[aria-current="page"] {
  box-shadow: 0 6px 18px rgba(var(--fi-accent-rgb), 0.3);
}

@media (max-width: 991.98px) {
  .fi-subnav {
    justify-content: flex-start;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
  }
}

/* More tabs past an edge (BrandSiteLayout's useScrollEdges): fade that edge
   so a phone can see the row scrolls. */
.fi-subnav ul[data-more-right] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}

.fi-subnav ul[data-more-left] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
}

.fi-subnav ul[data-more-left][data-more-right] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

@media (max-width: 575.98px) {
  .fi-subnav-item {
    padding: 0.45rem 0.8rem;
  }
}

/* The dashboard's phone-width menu (DashboardLayout): the same scrolling tab
   row as the brand site, sitting flush in the content column above the
   breadcrumbs instead of centred under a hero. */
.fi-dashboard-tabs {
  margin: 0 0 12px;
  padding: 0;
}

.fi-dashboard-tabs ul {
  width: 100%;
}

.fi-dashboard-tabs .fi-badge-count {
  margin-left: 6px !important;
}

/* ── Brand home ─────────────────────────────────────────────────────────── */

.fi-brand-hero {
  position: relative;
  overflow: hidden;
  margin-top: 1.25rem;
  border-radius: 22px;
  border: 1px solid var(--fi-card-border);
  background: var(--fi-card);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.fi-brand-hero-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.6);
}

.fi-brand-hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 4, 5, 0.15) 0%, rgba(5, 4, 5, 0.85) 100%);
}

/* As with the featured card: the veil stays dark and the ink flips. */
:root[data-theme="light"] .fi-brand-hero-backdrop::after {
  background: linear-gradient(180deg, rgba(11, 22, 34, 0.2) 0%, rgba(11, 22, 34, 0.9) 100%);
}

:root[data-theme="light"] .fi-brand-hero {
  --fi-ink: #FFFFFF;
  --fi-ink-2: rgba(255, 255, 255, 0.78);
  --fi-focus-ring: var(--fi-chrome-focus-ring);
  --fi-focus-halo: var(--fi-chrome-focus-halo);
  color: var(--fi-ink);
}

.fi-brand-hero-body,
.fi-brand-hero-stats {
  position: relative;
}

.fi-brand-hero-body {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0;
  max-width: 640px;
}

.fi-brand-hero-heading {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.05;
  margin: 0.4rem 0 0.75rem;
}

.fi-brand-hero-text {
  color: var(--fi-ink-2);
  max-width: 520px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fi-brand-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fi-brand-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 0;
  padding: 1.25rem clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
  justify-content: flex-end;
}

.fi-brand-hero-stats > div {
  display: flex;
  flex-direction: column;
}

.fi-brand-hero-stats dt {
  font-family: var(--fi-font-display);
  font-weight: var(--fi-font-display-weight);
  font-size: 1.2rem;
}

.fi-brand-hero-stats dd {
  margin: 0;
  font-size: 0.72rem;
  color: var(--fi-ink-2);
}

.fi-info-tile {
  display: flex;
  gap: 12px;
  align-items: center;
  height: 100%;
  padding: 14px 16px;
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  border-radius: 16px;
  color: var(--fi-ink);
  text-decoration: none;
}

.fi-info-tile > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fi-info-tile strong {
  font-size: 0.85rem;
  font-weight: 600;
}

.fi-info-tile span:not(.fi-info-tile-icon) {
  font-size: 0.75rem;
  color: var(--fi-ink-2);
}

.fi-info-tile-link:hover {
  background: var(--fi-elevated);
  color: var(--fi-ink);
}

.fi-info-tile-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--fi-accent-subtle);
  color: var(--fi-accent-subtle-text);
}

/* ── Product card ───────────────────────────────────────────────────────── */

.fi-product-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-card-radius);
  overflow: hidden;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.fi-product-card:hover {
  background: var(--fi-elevated);
  transform: translateY(-2px);
}

.fi-product-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--fi-elevated);
}

.fi-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fi-product-media-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  color: var(--fi-ink-2);
}

.fi-product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

.fi-product-heart {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

.fi-product-body {
  padding: 12px 14px 14px;
}

.fi-product-name {
  font-family: var(--fi-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.fi-product-link {
  color: var(--fi-ink);
  text-decoration: none;
}

/* The whole card is the target: the link's box covers it, the heart stays
 * above it. */
.fi-product-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.fi-product-link:hover {
  color: var(--fi-ink);
}

.fi-product-price {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fi-ink);
}

.fi-product-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 0;
}

.fi-product-options li {
  font-size: 0.62rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--fi-elevated);
  color: var(--fi-ink-2);
  letter-spacing: 0.04em;
}

.fi-no-orders {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--fi-ink-2);
  text-align: center;
}

/* ── Service card ───────────────────────────────────────────────────────── */

.fi-service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-card-radius);
  overflow: hidden;
}

.fi-service-media {
  aspect-ratio: 2 / 1;
  background: var(--fi-elevated);
}

.fi-service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fi-service-media-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  color: var(--fi-ink-2);
}

.fi-service-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.fi-service-title {
  font-size: 1.15rem;
  margin: 0 0 6px;
}

.fi-service-text {
  font-size: 0.85rem;
  color: var(--fi-ink-2);
  flex: 1;
}

.fi-service-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.fi-service-price {
  font-family: var(--fi-font-display);
  font-weight: var(--fi-font-display-weight);
  font-size: 0.95rem;
}

.fi-service-price-ask {
  font-family: var(--fi-font-body);
  font-weight: 500;
  color: var(--fi-ink-2);
}

/* ── About, hours, contact ──────────────────────────────────────────────── */

.fi-about-heading {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0.4rem 0 1rem;
}

.fi-about-text {
  color: var(--fi-ink-2);
  font-size: 0.92rem;
}

.fi-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fi-hairline);
}

.fi-facts dt {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fi-ink-2);
}

.fi-facts dd {
  margin: 2px 0 0;
  font-size: 0.9rem;
}

.fi-hours {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fi-hours-row {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
}

.fi-hours-row dt {
  width: 44px;
  flex: 0 0 auto;
  font-weight: 500;
  color: var(--fi-ink-2);
}

.fi-hours-row dd {
  margin: 0;
}

.fi-hours-row.today dt,
.fi-hours-row.today dd {
  color: var(--fi-ink);
  font-weight: 600;
}

.fi-hours-closed {
  color: var(--fi-accent-text);
}

.fi-hours-today-tag {
  color: var(--fi-ink-2);
  font-weight: 400;
}

.fi-contact-list {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.fi-contact-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--fi-hairline);
}

.fi-contact-row:last-child {
  border-bottom: 0;
}

/* The icon sits inside the dt (a valid <dl> allows nothing else beside a
 * dt/dd pair) and is placed in the first column by the grid; the label and
 * the value share the second. */
.fi-contact-row dt.fi-eyebrow {
  display: contents;
}

.fi-contact-row dt .fi-info-tile-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
}

.fi-contact-row dd {
  grid-column: 2;
  margin: 0;
  font-size: 0.9rem;
}

.fi-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fi-message-note {
  max-width: 320px;
}

/* ── Feedback ───────────────────────────────────────────────────────────── */

.fi-rating-summary {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.fi-rating-summary-score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 140px;
}

.fi-rating-summary-number {
  font-family: var(--fi-font-display);
  font-weight: var(--fi-font-display-weight);
  font-size: 3rem;
  line-height: 1;
}

.fi-rating-summary-meta {
  font-size: 0.75rem;
  color: var(--fi-ink-2);
}

.fi-rating-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fi-rating-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
}

.fi-rating-bar-label {
  width: 28px;
  color: var(--fi-ink-2);
}

.fi-rating-bar-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--fi-elevated);
  overflow: hidden;
}

.fi-rating-bar-fill {
  display: block;
  height: 100%;
  background: var(--fi-accent);
  border-radius: 999px;
}

.fi-rating-bar-count {
  width: 28px;
  text-align: right;
  color: var(--fi-ink-2);
}

@media (max-width: 575.98px) {
  .fi-rating-summary {
    flex-direction: column;
    align-items: stretch;
  }
}

.fi-feedback-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.fi-feedback-entry {
  padding: 16px 18px;
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-card-radius);
}

.fi-feedback-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.fi-feedback-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--fi-elevated);
  color: var(--fi-ink);
  font-weight: 600;
}

.fi-feedback-author {
  display: block;
  font-size: 0.85rem;
}

.fi-feedback-date {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--fi-ink-2);
}

.fi-feedback-text {
  margin: 0;
  font-size: 0.9rem;
}

.fi-feedback-reply {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 2px solid var(--fi-accent);
  background: var(--fi-elevated);
  border-radius: 0 10px 10px 0;
  font-size: 0.82rem;
}

/* ── Product page ───────────────────────────────────────────────────────── */

.fi-product-stage {
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  background: var(--fi-elevated);
  border: 1px solid var(--fi-card-border);
}

.fi-product-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fi-product-stage-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 4rem;
  color: var(--fi-ink-2);
}

.fi-back-link {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
  font-size: 0.8rem;
  color: var(--fi-ink-2);
  text-decoration: none;
}

.fi-back-link:hover {
  color: var(--fi-ink);
}

.fi-product-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0.25rem 0 0.5rem;
}

.fi-product-page-price {
  font-family: var(--fi-font-display);
  font-weight: var(--fi-font-display-weight);
  font-size: 1.4rem;
  color: var(--fi-accent-text);
  margin-bottom: 0.5rem;
}

.fi-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1rem;
}

.fi-product-page .fi-no-orders {
  text-align: left;
}

.fi-product-page .table-light {
  --tb-table-bg: var(--fi-elevated);
  --bs-table-bg: var(--fi-elevated);
  --tb-table-color: var(--fi-ink);
  --bs-table-color: var(--fi-ink);
}

/* ── The opening-hours editor (dashboard, redesign E2) ──────────────────── */

.fi-hours-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fi-hours-editor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--fi-hairline);
}

.fi-hours-editor-row:last-child {
  border-bottom: 0;
}

.fi-hours-editor-day {
  width: 44px;
  font-weight: 500;
}

.fi-hours-editor-switch {
  min-width: 110px;
  margin: 0;
}

.fi-hours-editor-times {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fi-hours-editor-times .form-control {
  width: 120px;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Messages and replies (redesign E3 / E4): badges, the inbox, a thread.
 * ══════════════════════════════════════════════════════════════════════════ */

.fi-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--fi-accent-fill);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
}

.fi-user-menu-avatar,
.fi-tabbar-icon {
  position: relative;
  display: inline-flex;
}

.fi-badge-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--fi-accent);
  border: 2px solid var(--fi-page);
}

.fi-inbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fi-inbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  border-radius: 14px;
  color: var(--fi-ink);
  text-decoration: none;
}

.fi-inbox-row:hover {
  background: var(--fi-elevated);
  color: var(--fi-ink);
}

.fi-inbox-row.unread {
  border-color: rgba(var(--fi-accent-rgb), 0.45);
}

.fi-inbox-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--fi-elevated);
  color: var(--fi-ink);
}

.fi-inbox-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.fi-inbox-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.fi-inbox-row.unread .fi-inbox-name {
  color: var(--fi-ink);
}

.fi-inbox-subject {
  font-size: 0.8rem;
  color: var(--fi-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fi-inbox-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--fi-ink-2);
  white-space: nowrap;
}

.fi-inbox-unread {
  color: var(--fi-accent-text);
  font-weight: 600;
}

.fi-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 1rem;
}

.fi-thread-counterpart {
  font-family: var(--fi-font-display);
  font-weight: var(--fi-font-display-weight);
  font-size: 1.2rem;
}

.fi-thread-subject {
  font-size: 0.8rem;
  color: var(--fi-ink-2);
}

.fi-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 1rem;
}

.fi-thread-item {
  display: flex;
}

.fi-thread-item.mine {
  justify-content: flex-end;
}

.fi-thread-bubble {
  max-width: min(78%, 560px);
  padding: 10px 14px;
  background: var(--fi-card);
  border: 1px solid var(--fi-card-border);
  border-radius: 16px 16px 16px 4px;
}

.fi-thread-item.mine .fi-thread-bubble {
  background: var(--fi-accent-subtle);
  border-color: transparent;
  border-radius: 16px 16px 4px 16px;
}

.fi-thread-text {
  margin: 0;
  font-size: 0.9rem;
  white-space: pre-line;
}

.fi-thread-meta {
  margin-top: 4px;
  font-size: 0.68rem;
  color: var(--fi-ink-2);
}

/* ── Bottom dock: the cookie banner and the install prompt ────────────────
   `fi-dock` pins a prompt to the bottom — above the tab bar where there is
   one (below lg), not under it. `fi-consent` is the cookie banner's compact
   phone layout: the full banner covered half of a 375px screen. */
.fi-dock {
  bottom: 0;
  padding: 16px;
}

/* Toner gives every .card a 24px bottom margin; in the dock it is dead space
   between the prompt and the tab bar. */
.fi-dock .card {
  margin-bottom: 0;
}

@media (max-width: 991.98px) {
  .fi-dock {
    bottom: calc(var(--fi-tabbar-height) + env(safe-area-inset-bottom, 0px));
    padding: 8px 12px;
  }
}

@media (max-width: 575.98px) {
  .fi-consent .card {
    max-height: calc(100dvh - var(--fi-tabbar-height) - var(--fi-topbar-height) - 24px);
    overflow-y: auto;
  }

  .fi-consent-body {
    padding: 12px 14px;
  }

  .fi-consent .h6 {
    font-size: 0.9rem;
  }

  .fi-consent-actions .btn-primary,
  .fi-consent-actions .btn-outline-primary {
    flex: 1 1 0;
  }

  .fi-consent-actions .btn-link {
    flex-basis: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ── Password show/hide (Components/PasswordInput, ticket #7) ────────────────
   Toner's password-addon: the eye sits inside the input's right edge. When
   the field is invalid, Bootstrap draws its warning icon at the same spot, so
   the icon moves left of the eye and the text keeps clear of both. */
.auth-pass-inputgroup .form-control.is-invalid {
  padding-right: 4.75rem !important;
  background-position: right 2.75rem center;
}

.auth-pass-inputgroup .password-addon {
  z-index: 5;
  padding: 0 0.75rem;
  border: 0;
  color: var(--fi-muted) !important;
}

.auth-pass-inputgroup .password-addon:hover,
.auth-pass-inputgroup .password-addon[aria-pressed="true"] {
  color: var(--fi-ink) !important;
}

/* fiyobra-a11y.css dots every pressed toggle so its state is not carried by
   colour alone (WCAG 1.4.1). Here the icon itself changes shape — eye versus
   crossed-out eye — so the dot adds nothing but a stray mark in the field. */
.auth-pass-inputgroup .password-addon[aria-pressed="true"]::before {
  content: none;
}

/* ── Multi-brand (ticket #8) ─────────────────────────────────────────────────
   The Brands page, the brand area's chrome (Layouts/ManageLayout, the
   switcher), its pages, and the public Portfolio gallery. Every colour is a
   token, so both themes follow; nothing here signals state by colour alone —
   each state also has text (a count, a word, a check). */

/* The switcher sits in the canvas' top-left slot, which is chrome in Harbour. */
.fi-switcher {
  position: relative;
}

.fi-switcher-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--fi-chrome-pill-border, var(--fi-hairline));
  background: var(--fi-chrome-pill, var(--fi-elevated));
  color: var(--fi-chrome-ink, var(--fi-ink));
  border-radius: 999px;
  padding: 0.3rem 0.8rem 0.3rem 0.35rem;
  font-weight: 600;
}

.fi-switcher-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fi-card);
  color: var(--fi-ink);
}

.fi-switcher-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fi-switcher-count {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fi-chrome-ink-2, var(--fi-ink-2));
  border: 1px solid var(--fi-chrome-hairline, var(--fi-hairline));
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

.fi-switcher-menu {
  position: absolute;
  z-index: 1050;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 18rem;
  padding: 0.5rem;
  margin: 0;
  background: var(--fi-elevated, var(--fi-card));
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-card-radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.fi-switcher-heading {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fi-muted);
  padding: 0.35rem 0.6rem;
}

.fi-switcher-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  color: var(--fi-ink);
  text-decoration: none;
}

.fi-switcher-item:hover,
.fi-switcher-item:focus-visible {
  background: var(--fi-rose-tint);
  color: var(--fi-ink);
}

.fi-switcher-item.current .fi-switcher-item-name {
  font-weight: 700;
}

.fi-switcher-item-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.fi-switcher-item-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  color: var(--fi-muted);
}

.fi-switcher-action {
  border-top: 1px solid var(--fi-hairline);
  border-radius: 0;
  margin-top: 0.25rem;
}

.fi-switcher-tag {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px dashed var(--fi-hairline);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  color: var(--fi-ink-2);
}

/* The brand area's left nav. */
.fi-manage-nav {
  position: sticky;
  top: 1rem;
}

.fi-manage-back {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--fi-ink-2);
  text-decoration: none;
  font-size: 0.85rem;
}

.fi-manage-group + .fi-manage-group {
  margin-top: 1rem;
}

.fi-manage-group-title {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fi-muted);
  margin: 0 0 0.35rem 0.6rem;
  font-weight: 600;
}

.fi-manage-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  color: var(--fi-ink-2);
  text-decoration: none;
  border-left: 3px solid transparent;
}

.fi-manage-link:hover {
  background: var(--fi-rose-tint);
  color: var(--fi-ink);
}

.fi-manage-link[aria-current="page"] {
  background: var(--fi-rose-tint);
  color: var(--fi-ink);
  font-weight: 600;
  border-left-color: var(--fi-rose);
}

/* Below lg the nav is a bottom sheet (a native <dialog>). */
.fi-manage-sheet {
  margin: auto 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 80vh;
  border: 1px solid var(--fi-card-border);
  border-radius: 22px 22px 0 0;
  background: var(--fi-elevated, var(--fi-card));
  color: var(--fi-ink);
  padding: 1rem 1.25rem 1.5rem;
}

.fi-manage-sheet::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.fi-manage-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.fi-manage-archived,
.fi-limit-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px dashed var(--fi-hairline);
  border-radius: 14px;
  color: var(--fi-ink);
  background: var(--fi-card);
}

/* The Brands page. */
.fi-brands-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.fi-slot-meter {
  min-width: 14rem;
  flex: 0 1 18rem;
}

.fi-meter {
  display: block;
  width: 100%;
  height: 0.5rem;
  margin-top: 0.35rem;
}

.fi-meter::-webkit-meter-bar {
  background: var(--fi-hairline);
  border: 0;
  border-radius: 999px;
}

.fi-meter::-webkit-meter-optimum-value {
  background: var(--fi-rose);
  border-radius: 999px;
}

.fi-meter::-moz-meter-bar {
  background: var(--fi-rose);
  border-radius: 999px;
}

.fi-brand-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
  margin: 0;
}

.fi-brand-tile {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-card-radius);
  background: var(--fi-card);
  box-shadow: var(--fi-card-shadow, none);
  color: var(--fi-ink);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.fi-brand-tile:hover {
  border-color: var(--fi-rose);
  color: var(--fi-ink);
}

.fi-brand-tile.archived {
  border-style: dashed;
}

.fi-brand-tile-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.fi-brand-tile-logo {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fi-elevated, var(--fi-page));
  font-size: 1.25rem;
}

.fi-brand-tile-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fi-brand-tile-title {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.fi-brand-tile-name {
  font-family: var(--fi-font-display);
  font-weight: var(--fi-font-display-weight, 600);
  font-size: 1.25rem;
}

.fi-brand-tile-sub {
  font-size: 0.8rem;
  color: var(--fi-ink-2);
}

.fi-brand-tile-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.fi-chip-static {
  pointer-events: none;
  font-size: 0.72rem;
}

.fi-brand-tile-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  font-size: 0.8rem;
  color: var(--fi-ink-2);
  border-top: 1px solid var(--fi-hairline);
  padding-top: 0.75rem;
}

.fi-brand-tile-attention {
  color: var(--fi-accent-text);
  font-weight: 600;
}

.fi-brand-tile-manage {
  margin-left: auto;
  color: var(--fi-accent-text);
  font-weight: 600;
}

.fi-brand-tile-path {
  font-size: 0.7rem;
  color: var(--fi-muted);
}

.fi-brand-tile-add {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  min-height: 12rem;
}

.fi-brand-tile-add-icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  background: var(--fi-rose-tint);
  color: var(--fi-accent-text);
  font-size: 1.4rem;
}

/* The brand chip on aggregated inbox and feedback rows. */
.fi-brand-chip {
  display: inline-block;
  font-size: 0.7rem;
  border: 1px solid var(--fi-hairline);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  color: var(--fi-ink-2);
  margin-top: 0.2rem;
}

/* The brand overview. */
.fi-status-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-card-radius);
  background: var(--fi-card);
}

.fi-status-strip.live {
  border-color: var(--fi-rose);
}

.fi-status-strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}

.fi-status-strip code {
  color: var(--fi-accent-text);
}

.fi-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.fi-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem;
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-card-radius);
  background: var(--fi-card);
}

.fi-kpi-label,
.fi-kpi-note {
  font-size: 0.78rem;
  color: var(--fi-ink-2);
}

.fi-kpi-value {
  font-family: var(--fi-font-display);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--fi-heading, var(--fi-ink));
}

.fi-kpi-value.accent {
  color: var(--fi-accent-text);
}

.fi-progress {
  display: block;
  width: 100%;
  height: 0.4rem;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--fi-hairline);
  overflow: hidden;
}

.fi-progress::-webkit-progress-bar {
  background: var(--fi-hairline);
}

.fi-progress::-webkit-progress-value {
  background: var(--fi-rose);
}

.fi-progress::-moz-progress-bar {
  background: var(--fi-rose);
}

.fi-checklist li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--fi-hairline);
}

.fi-checklist li.done {
  color: var(--fi-ink-2);
  text-decoration: line-through;
}

.fi-checklist li.done i {
  color: var(--fi-status-published-color);
}

.fi-mini-inbox a {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--fi-hairline);
  color: var(--fi-ink);
  text-decoration: none;
}

.fi-mini-inbox a span,
.fi-mini-inbox a time {
  color: var(--fi-ink-2);
  font-size: 0.85rem;
}

.fi-mini-inbox a.unread strong {
  color: var(--fi-accent-text);
}

.fi-mini-feedback + .fi-mini-feedback {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fi-hairline);
}

/* Settings. */
.fi-settings-rows > li,
.fi-settings-rows > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--fi-hairline);
}

.fi-settings-rows > li > div:first-child,
.fi-settings-rows > div > div:first-child {
  flex: 1 1 18rem;
}

.fi-danger-zone {
  border-color: var(--fi-status-suspended-color);
}

/* Portfolio management: a gallery with move buttons. */
.fi-manage-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
  margin: 0;
}

.fi-manage-gallery-item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-card-radius);
  background: var(--fi-card);
  overflow: hidden;
  cursor: grab;
}

.fi-manage-gallery-item.dragging {
  opacity: 0.5;
  border-style: dashed;
}

.fi-manage-gallery-media {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fi-elevated, var(--fi-page));
}

.fi-manage-gallery-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fi-manage-gallery-body {
  padding: 0.75rem 0.85rem 0.25rem;
  min-width: 0;
}

.fi-manage-gallery-actions {
  display: flex;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem 0.85rem;
}

/* The public Portfolio tab. */
.fi-portfolio-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--fi-card-border);
  border-radius: var(--fi-card-radius);
  background: var(--fi-card);
  box-shadow: var(--fi-card-shadow, none);
  overflow: hidden;
  color: var(--fi-ink);
  text-decoration: none;
}

.fi-portfolio-card:hover {
  border-color: var(--fi-rose);
  color: var(--fi-ink);
}

.fi-portfolio-media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fi-elevated, var(--fi-page));
}

.fi-portfolio-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.fi-portfolio-card:hover .fi-portfolio-media img {
  transform: scale(1.03);
}

.fi-portfolio-media-empty {
  font-size: 2rem;
  color: var(--fi-muted);
}

.fi-portfolio-draft {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--fi-status-draft-bg);
  color: var(--fi-status-draft-color);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}

.fi-portfolio-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem 1rem;
}

.fi-portfolio-title {
  font-family: var(--fi-font-display);
  font-weight: var(--fi-font-display-weight, 600);
  font-size: 1.1rem;
}

.fi-portfolio-meta {
  font-size: 0.8rem;
  color: var(--fi-ink-2);
}

.fi-portfolio-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0.5rem 0 0;
}

.fi-portfolio-facts dt {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fi-muted);
}

.fi-portfolio-facts dd {
  margin: 0;
}

.fi-portfolio-images {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}

.fi-portfolio-images img {
  width: 100%;
  height: auto;
  border-radius: var(--fi-card-radius);
}

.fi-service-duration {
  font-size: 0.8rem;
  color: var(--fi-ink-2);
}

@media (prefers-reduced-motion: reduce) {
  .fi-portfolio-media img,
  .fi-brand-tile {
    transition: none;
  }

  .fi-portfolio-card:hover .fi-portfolio-media img {
    transform: none;
  }
}