/*
 * Barbers & Bronzing Tickets and Marketing: the Barbers & Bronzing admin's look (www/css/style.css in
 * the Barbers & Bronzing project, 2 Nov 2026) for the ticket and marketing pages. Dark only, like the
 * admin: near-black panels with a gold edge, Barlow Condensed capitals for headings, Raleway for
 * everything else, square corners, gold for the one action that matters and for what is current.
 *
 * Every class here starts bb-. Ticket-only rules live in tickets.css (pt-), marketing ones in
 * marketing*.css (pm-); they use the colour names at the end of :root, which this file points at the
 * Barbers & Bronzing colours. A hex code inside a component is a bug: add a token.
 *
 * Layout follows the admin: a sidebar beside the page on a computer; below 992px a top bar with the
 * menu button, the logo and the page's own quick action, and the sidebar slides in from the left.
 */

@font-face { font-family: "Raleway"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/raleway-300-400-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/raleway-300-400-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/raleway-300-400-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-700-latin.woff2") format("woff2"); }

:root {
    color-scheme: dark;

    /* The Barbers & Bronzing admin's own colours. */
    --bb-black: #0e0e0e;
    --bb-chrome: #0a0a0a;
    --bb-panel: #161616;
    --bb-panel-hover: #1e1e1e;
    --bb-menu: #101010;
    --bb-gold: #bf925b;
    --bb-gold-light: #e2c55a;
    --bb-cream: #f0ece4;
    --bb-cream-soft: rgb(240 236 228 / 0.78);
    --bb-cream-dim: rgb(240 236 228 / 0.66);
    --bb-edge: rgb(255 255 255 / 0.08);
    --bb-edge-strong: rgb(255 255 255 / 0.14);
    --bb-gold-edge: rgb(226 197 90 / 0.22);
    --bb-gold-edge-strong: rgb(226 197 90 / 0.48);
    --bb-gold-tint: rgb(226 197 90 / 0.08);
    --bb-gold-tint-strong: rgb(226 197 90 / 0.14);
    --bb-on-gold: #111111;
    --bb-scrim: rgb(0 0 0 / 0.64);
    --bb-page-glow:
        radial-gradient(circle at 14% 0%, rgb(191 146 91 / 0.16), transparent 30%),
        radial-gradient(circle at 88% 8%, rgb(226 197 90 / 0.1), transparent 26%),
        var(--bb-black);
    --bb-chrome-fill: linear-gradient(180deg, rgb(191 146 91 / 0.12), rgb(255 255 255 / 0.015)), var(--bb-chrome);
    --bb-panel-fill: linear-gradient(145deg, rgb(191 146 91 / 0.12), rgb(255 255 255 / 0.025) 46%, rgb(226 197 90 / 0.05)), var(--bb-panel);
    --bb-quiet-fill: linear-gradient(145deg, rgb(255 255 255 / 0.04), rgb(226 197 90 / 0.04)), rgb(255 255 255 / 0.02);
    --bb-field-fill: rgb(255 255 255 / 0.03);
    --bb-shadow: 0 24px 70px rgb(0 0 0 / 0.32);
    --bb-menu-shadow: 0 24px 70px rgb(0 0 0 / 0.42);

    --bb-font-body: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bb-font-heading: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
    --bb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --bar-h: 60px;
    --side-w: 17.5rem;
    --shell: 1320px;

    /* Severity, readable on the dark panels. */
    --crit: #ff9a8c;
    --crit-bg: rgb(170 42 32 / 0.2);
    --warn: #f2b25c;
    --warn-bg: rgb(242 178 92 / 0.12);
    --ok: #8fd6a8;
    --ok-bg: rgb(58 130 92 / 0.2);
    --info: #a9c8f2;
    --info-bg: rgb(96 140 210 / 0.16);

    /* The names the ticket and marketing rules use (tickets.css, marketing*.css). */
    --page: var(--bb-black);
    --card: var(--bb-panel);
    --card-soft: #1b1b1b;
    --ink: var(--bb-cream);
    --body: var(--bb-cream-soft);
    --muted: #a49f95;
    --line: var(--bb-edge);
    --line-strong: var(--bb-edge-strong);
    --gold: var(--bb-gold);
    --gold-dark: var(--bb-gold-light);
    --gold-soft: var(--bb-gold-tint-strong);
    --navy: var(--bb-gold);
    --navy-soft: var(--bb-gold-tint);
    --shadow-sm: none;
    --shadow: var(--bb-menu-shadow);
    --radius: 0;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--bar-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--bb-page-glow);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--bb-font-body);
    font-size: 15px;
    line-height: 1.55;
    /* Raleway draws old-style figures (a 0 like an o) unless told otherwise: times and counts read better lining. */
    font-variant-numeric: lining-nums;
    max-width: 100%;
    /* clip, not hidden: hidden would make the body a scroller and stop the sticky top bar. */
    overflow-x: clip;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid rgb(226 197 90 / 0.7); outline-offset: 2px; }
h1, h2, h3 { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.bb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bb-grow { flex: 1; min-width: 0; }
.bb-mono { font-family: var(--bb-font-mono); font-variant-numeric: lining-nums tabular-nums; }

/* ---------- shell: sidebar, top bar, page ---------- */

.bb-shell { min-height: 100vh; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }

.bb-sidebar {
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 1.4rem;
    padding: 1.75rem 1.15rem 1.25rem;
    border-right: 1px solid rgb(226 197 90 / 0.14);
    background: var(--bb-chrome-fill);
}
.bb-sidebar__logo { display: block; width: min(15rem, 100%); margin-bottom: 0.4rem; }
.bb-sidebar__logo img { display: block; width: 100%; height: auto; }

.bb-nav { display: grid; gap: 0.35rem; }
.bb-nav__label {
    display: block; margin: 0.6rem 0 0.15rem; padding: 0 0.95rem;
    color: rgb(226 197 90 / 0.66); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase;
}
.bb-nav a {
    display: flex; align-items: center; gap: 0.8rem; min-height: 3rem; padding: 0.7rem 0.95rem;
    border: 1px solid transparent; color: rgb(240 236 228 / 0.74); text-decoration: none;
}
.bb-nav a svg { flex: none; color: rgb(240 236 228 / 0.54); }
.bb-nav a:hover, .bb-nav a.is-current { border-color: rgb(226 197 90 / 0.2); background: var(--bb-gold-tint); color: var(--ink); }
.bb-nav a:hover svg, .bb-nav a.is-current svg { color: var(--bb-gold-light); }
.bb-nav a .pt-count { margin-left: auto; }
.bb-sidebar__foot { margin-top: auto; display: grid; gap: 0.6rem; padding-top: 0.8rem; border-top: 1px solid var(--bb-edge); }
.bb-sidebar__foot form { margin: 0; }
.bb-sidebar__foot .bb-btn { width: 100%; justify-content: center; }
.bb-sidebar__foot small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

.bb-backdrop { display: none; }
.bb-main { min-width: 0; display: flex; flex-direction: column; }

.bb-topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 0.8rem;
    min-height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
    padding: calc(0.5rem + env(safe-area-inset-top, 0px)) 1rem 0.5rem;
    border-bottom: 1px solid rgb(226 197 90 / 0.14);
    background: var(--bb-chrome-fill);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.bb-topbar__title { display: grid; min-width: 0; }
.bb-topbar__title .bb-eyebrow { margin: 0; font-size: 0.66rem; }
.bb-topbar__title strong {
    font-family: var(--bb-font-heading); font-weight: 700; font-size: 1.45rem; line-height: 1;
    letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink);
}
.bb-topbar__logo { display: none; flex: none; width: 8.25rem; }
.bb-topbar__logo img { display: block; width: 100%; height: auto; }
.bb-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.bb-topbar__plus {
    position: relative; display: none; place-items: center; width: 2.85rem; height: 2.85rem; flex: none;
    color: var(--bb-gold-light); text-decoration: none;
}
.bb-topbar__plus:hover { background: var(--bb-gold-tint); }
/* The admin's "add" mark: a small gold plus on the icon's corner. */
.bb-topbar__plus::after {
    content: "+"; position: absolute; right: 0.4rem; bottom: 0.45rem;
    display: grid; place-items: center; width: 0.9rem; height: 0.9rem; border-radius: 50%;
    background: var(--bb-gold); box-shadow: 0 0 0 2px var(--bb-chrome); color: var(--bb-on-gold);
    font-size: 0.8rem; font-weight: 700; line-height: 1;
}

.bb-menu-toggle {
    appearance: none; cursor: pointer; display: none; align-items: center; justify-content: center; flex: none;
    width: 2.85rem; height: 2.85rem; padding: 0;
    border: 1px solid rgb(226 197 90 / 0.24); background: var(--bb-gold-tint); color: var(--bb-gold-light);
}
.bb-menu-toggle__bars { position: relative; display: inline-flex; flex-direction: column; justify-content: space-between; width: 1.4rem; height: 1rem; }
.bb-menu-toggle__bars span { display: block; height: 2px; border-radius: 999px; background: currentColor; transform-origin: center; transition: opacity 0.25s ease, transform 0.3s ease; }
.bb-menu-toggle[aria-expanded="true"] .bb-menu-toggle__bars span:nth-child(1) { transform: translateY(0.44rem) rotate(45deg); }
.bb-menu-toggle[aria-expanded="true"] .bb-menu-toggle__bars span:nth-child(2) { opacity: 0; }
.bb-menu-toggle[aria-expanded="true"] .bb-menu-toggle__bars span:nth-child(3) { transform: translateY(-0.44rem) rotate(-45deg); }

.bb-iconbtn {
    appearance: none; cursor: pointer; position: relative; flex: none;
    display: inline-grid; place-items: center; width: 2.85rem; height: 2.85rem; padding: 0;
    border: 1px solid transparent; background: transparent; color: var(--ink);
}
.bb-iconbtn:hover, .bb-iconbtn.is-open, .bb-iconbtn[aria-expanded="true"] { background: var(--bb-gold-tint); color: var(--bb-gold-light); }
.bb-iconbtn:disabled { opacity: 0.35; cursor: not-allowed; }
.bb-iconbtn--sm { width: 2.2rem; height: 2.2rem; }
.bb-iconbtn--danger:hover { border-color: rgb(255 132 118 / 0.48); background: var(--crit-bg); color: var(--crit); }
.bb-iconbtn__av {
    display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
    border: 1.5px solid var(--bb-gold-light); color: var(--bb-gold-light);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
}
.bb-iconbtn--me[aria-expanded="true"] .bb-iconbtn__av { background: var(--bb-gold); border-color: var(--bb-gold); color: var(--bb-on-gold); }

.bb-wrap { width: 100%; max-width: var(--shell); padding: 1.25rem 1rem 3rem; }
@media (min-width: 1200px) { .bb-wrap { padding-inline: 1.5rem; } }

@media (max-width: 991px) {
    .bb-shell { grid-template-columns: minmax(0, 1fr); }
    .bb-sidebar {
        position: fixed; z-index: 60; left: 0; bottom: 0;
        top: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); height: auto;
        width: min(21rem, 88vw); padding-top: 1.1rem;
        transform: translateX(-105%); visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
    }
    .bb-shell.is-menu-open .bb-sidebar { transform: translateX(0); visibility: visible; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
    .bb-sidebar__logo { display: none; }
    .bb-backdrop {
        display: block; position: fixed; z-index: 55; left: 0; right: 0; bottom: 0;
        top: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
        border: 0; padding: 0; background: var(--bb-scrim);
        opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
    }
    .bb-shell.is-menu-open .bb-backdrop { opacity: 1; pointer-events: auto; }
    .bb-topbar { gap: 0.55rem; padding-inline: 0.75rem; }
    .bb-menu-toggle, .bb-topbar__logo { display: inline-flex; }
    .bb-topbar__plus { display: inline-grid; }
    .bb-topbar .bb-topbar__title, .bb-topbar .bb-topbar__new { display: none; }
    .bb-wrap { padding: 1rem 1rem 2.5rem; }
}
@media (max-width: 359px) {
    .bb-topbar__logo { width: 6.6rem; }
}

/* ---------- fly-outs: the account menu, the site picker ---------- */

.bb-flyout {
    /* Fixed: the place comes from getBoundingClientRect(), and the trigger lives in a sticky bar. */
    position: fixed; z-index: 70;
    min-width: 17rem; max-height: calc(100dvh - var(--bar-h) - 24px); overflow-y: auto;
    padding: 0.55rem;
    border: 1px solid rgb(226 197 90 / 0.24); background: var(--bb-menu); color: var(--ink);
    box-shadow: var(--bb-menu-shadow);
}
.bb-flyout__title {
    display: block; margin: 0; padding: 0.55rem 0.85rem 0.45rem;
    color: rgb(226 197 90 / 0.66); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.bb-flyout a {
    display: flex; gap: 0.7rem; align-items: center; min-height: 2.9rem; padding: 0.6rem 0.85rem;
    color: var(--bb-cream-soft); text-decoration: none;
}
.bb-flyout a:hover { background: var(--bb-gold-tint); color: var(--ink); }
.bb-flyout a > span:not([class]) { min-width: 0; }
.bb-flyout a strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.bb-flyout a small { display: block; color: var(--muted); font-size: 12.5px; }

.bb-acct { width: min(19rem, calc(100vw - 16px)); }
.bb-acct__who { display: flex; gap: 0.75rem; align-items: center; padding: 0.7rem 0.85rem 0.85rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--bb-edge); }
.bb-acct__av {
    flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    border: 1.5px solid var(--bb-gold-light); color: var(--bb-gold-light); font-size: 0.85rem; font-weight: 700;
}
.bb-acct__who strong { display: block; font-size: 0.92rem; line-height: 1.25; }
.bb-acct__who small { display: block; color: var(--bb-cream-dim); font-size: 0.78rem; overflow-wrap: anywhere; }
.bb-acct__rule { height: 1px; margin: 0.35rem 0; background: var(--bb-edge); }

/* A menu row's icon. */
.bb-mi { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--bb-gold-light); }
.bb-mi svg { width: 16px; height: 16px; }
.bb-mi--gold { color: var(--bb-gold-light); }
.bb-mi--ok { color: var(--ok); }
.bb-mi--warn { color: var(--warn); }
.bb-mi--crit { color: var(--crit); }

/* ---------- page head ---------- */

.bb-pagehead { display: flex; flex-wrap: wrap; gap: 0.75rem 1.1rem; align-items: flex-end; margin-bottom: 1.25rem; }
.bb-pagehead h1 {
    margin: 0; font-family: var(--bb-font-heading); font-weight: 700; font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere;
}
.bb-pagehead p { margin: 0.45rem 0 0; color: var(--bb-cream-dim); max-width: 64ch; }
.bb-pagehead__actions { margin-left: auto; display: flex; gap: 0.55rem; flex-wrap: wrap; }
.bb-eyebrow {
    display: block; margin: 0 0 0.55rem; color: var(--bb-gold-light);
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.bb-crumb { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-bottom: 0.6rem; color: var(--muted); font-size: 13px; }
.bb-crumb a { color: var(--bb-gold-light); font-weight: 700; text-decoration: none; }
.bb-crumb a:hover { text-decoration: underline; }
.bb-subtle { margin: 0 0 4px; color: var(--muted); font-size: 12.5px; }

/* ---------- buttons ---------- */

.bb-btn {
    appearance: none; cursor: pointer; font: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 2.75rem; padding: 0.6rem 1.05rem;
    border: 1px solid transparent; background: transparent; color: var(--ink);
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.bb-btn:hover:not(:disabled) { transform: translateY(-1px); }
.bb-btn svg { flex: none; }
.bb-btn--primary { background: var(--bb-gold); border-color: var(--bb-gold); color: var(--bb-on-gold); }
.bb-btn--primary:hover:not(:disabled) { background: var(--bb-gold-light); border-color: var(--bb-gold-light); color: var(--bb-on-gold); }
.bb-btn--ghost { border-color: var(--bb-edge-strong); color: var(--ink); }
.bb-btn--ghost:hover:not(:disabled) { border-color: var(--bb-gold-edge-strong); color: var(--bb-gold-light); }
.bb-btn--danger { background: rgb(170 42 32 / 0.26); border-color: rgb(255 132 118 / 0.48); color: #ffd9d9; }
.bb-btn--danger:hover:not(:disabled) { background: rgb(170 42 32 / 0.42); border-color: rgb(255 132 118 / 0.74); color: #fff2f2; }
.bb-btn--sm { min-height: 2.35rem; padding: 0.42rem 0.75rem; font-size: 0.7rem; }
.bb-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- panels and cards ---------- */

.bb-panel, .bb-card, .bb-list, .bb-tile {
    min-width: 0; border: 1px solid var(--bb-gold-edge); background: var(--bb-panel-fill); box-shadow: var(--bb-shadow);
}
.bb-panel__head { display: flex; gap: 0.75rem; align-items: center; padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--bb-edge); }
.bb-panel__head h2 {
    margin: 0; font-family: var(--bb-font-heading); font-weight: 700; font-size: 1.3rem; line-height: 1.05;
    letter-spacing: 0.03em; text-transform: uppercase;
}
.bb-panel__head .bb-btn { margin-left: auto; }
.bb-panel__body { padding: 0.95rem 1.1rem; }
.bb-panel__body > textarea {
    width: 100%; padding: 0.75rem 0.9rem; font: inherit; font-size: 14.5px; resize: vertical;
    border: 1px solid var(--bb-edge-strong); background: var(--bb-field-fill); color: var(--ink);
}
.bb-card__ico {
    flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
    border: 1px solid var(--bb-gold-edge); background: var(--bb-gold-tint); color: var(--bb-gold-light);
}
.bb-card__ico svg { width: 16px; height: 16px; }
.bb-card--accent { display: block; padding: 0.95rem 1.1rem; border-color: var(--bb-gold-edge-strong); box-shadow: inset 3px 0 0 var(--bb-gold-light), var(--bb-shadow); text-decoration: none; }
.bb-card--accent .bb-eyebrow { margin-bottom: 0.3rem; }
.bb-card--accent:hover { background: linear-gradient(0deg, var(--bb-gold-tint), var(--bb-gold-tint)), var(--bb-panel-fill); }
.bb-card__sub { margin: 0.2rem 0 0; color: var(--bb-cream-dim); font-size: 13.5px; }

.bb-layout { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1200px) { .bb-layout { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (min-width: 1400px) { .bb-layout { grid-template-columns: minmax(0, 1fr) 380px; } }

/* ---------- desk tabs and filters ---------- */

.bb-states { margin: 0 0 0.6rem; }
.bb-states__strip { display: flex; gap: 0.45rem; overflow-x: auto; padding: 3px 1rem 0.75rem; margin-inline: -1rem; scrollbar-width: none; }
.bb-states__strip::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .bb-states__strip { flex-wrap: wrap; overflow: visible; } }
.bb-state {
    appearance: none; cursor: pointer; font: inherit; white-space: nowrap; text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.6rem; padding: 0.5rem 0.95rem;
    border: 1px solid var(--bb-edge-strong); background: rgb(255 255 255 / 0.02); color: var(--bb-cream-soft);
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.bb-state:hover { border-color: var(--bb-gold-edge-strong); color: var(--ink); }
.bb-state b { font-weight: 700; font-variant-numeric: lining-nums tabular-nums; color: var(--muted); }
.bb-state[aria-selected="true"], .bb-state[aria-current] {
    border-color: rgb(226 197 90 / 0.55); background: var(--bb-gold-tint-strong); color: var(--bb-gold-light);
}
.bb-state[aria-selected="true"] b, .bb-state[aria-current] b { color: var(--bb-gold-light); }

/* ---------- lists ---------- */

.bb-list { overflow: hidden; }
.bb-list__head { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--bb-edge); background: rgb(255 255 255 / 0.02); }
.bb-list__head p { margin: 0; color: var(--bb-cream-dim); font-size: 13px; }
.bb-list__empty { padding: 2.6rem 1.25rem; text-align: center; }
.bb-list__empty .bb-mi { margin: 0 auto 0.7rem; width: 2.75rem; height: 2.75rem; border: 1px solid var(--bb-gold-edge); }
.bb-list__empty h3 { margin: 0 0 0.3rem; font-family: var(--bb-font-heading); font-size: 1.2rem; letter-spacing: 0.03em; text-transform: uppercase; }
.bb-list__empty p { margin: 0 auto; max-width: 44ch; color: var(--bb-cream-dim); font-size: 14px; }

.bb-li {
    position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 3px 0.85rem; align-items: start;
    padding: 0.9rem 2.4rem 0.9rem 1.1rem; border-top: 1px solid var(--bb-edge); color: inherit; text-decoration: none;
}
.bb-list > .bb-li:first-of-type { border-top: 0; }
.bb-li:hover { background: var(--bb-gold-tint); box-shadow: inset 3px 0 0 rgb(226 197 90 / 0.72); }
.bb-li::after {
    content: ""; position: absolute; top: 50%; right: 1.05rem; width: 8px; height: 8px;
    border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: translateY(-50%) rotate(45deg);
}
.bb-li:hover::after { border-color: var(--bb-gold-light); }
.bb-li__thumb {
    grid-row: span 3; display: grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid var(--bb-gold-edge); background: var(--bb-gold-tint); color: var(--bb-gold-light);
}
.bb-li__thumb svg { width: 19px; height: 19px; }
.bb-li__thumb--ok { border-color: rgb(143 214 168 / 0.35); background: var(--ok-bg); color: var(--ok); }
.bb-li__thumb--warn { border-color: rgb(242 178 92 / 0.4); background: var(--warn-bg); color: var(--warn); }
.bb-li__thumb--crit { border-color: rgb(255 154 140 / 0.4); background: var(--crit-bg); color: var(--crit); }
.bb-li__thumb--info { border-color: rgb(169 200 242 / 0.35); background: var(--info-bg); color: var(--info); }
.bb-li__title { margin: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.bb-li__meta { color: var(--muted); font-size: 12.5px; }
.bb-li__tags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.bb-li__right { grid-row: span 2; display: grid; gap: 3px; justify-items: end; text-align: right; }
.bb-li__age { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
@media (max-width: 559px) {
    .bb-li { grid-template-columns: 38px minmax(0, 1fr); padding-left: 0.9rem; }
    .bb-li__thumb { width: 38px; height: 38px; grid-row: span 2; }
    .bb-li__right { grid-row: auto; grid-auto-flow: column; justify-items: start; gap: 9px; align-items: baseline; margin-top: 2px; text-align: left; }
    .bb-li__title, .bb-li__right, .bb-li__meta, .bb-li__tags { grid-column: 2; }
}

/* Rows that lead somewhere are wholly clickable and say so with a chevron. */
.bb-rows { list-style: none; margin: 0; padding: 0; }
.bb-rows > li + li { border-top: 1px solid var(--bb-edge); }
.bb-row {
    display: flex; gap: 0.75rem; align-items: center; width: 100%; padding: 0.8rem 1.1rem;
    border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none;
}
.bb-row strong { display: block; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.bb-row small { display: block; margin-top: 1px; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.bb-row--link { cursor: pointer; }
.bb-row--link:hover { background: var(--bb-gold-tint); box-shadow: inset 3px 0 0 rgb(226 197 90 / 0.72); }
.bb-rows__chev { flex: none; color: var(--muted); }
.bb-row--link:hover .bb-rows__chev { color: var(--bb-gold-light); }
@media (max-width: 559px) {
    .bb-row { flex-wrap: wrap; }
    .bb-row .bb-grow { flex: 1 1 100%; }
}

.bb-checklist { list-style: none; margin: 0; padding: 0; }
.bb-checklist li { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-start; padding: 0.75rem 1.1rem; }
.bb-checklist li + li { border-top: 1px solid var(--bb-edge); }
.bb-checklist strong { display: block; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.bb-checklist small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.bb-checklist .bb-btn { margin-left: auto; align-self: center; }
.bb-checklist .bb-pill { white-space: normal; }

/* ---------- badges ---------- */

.bb-pill {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.24rem 0.55rem;
    border: 1px solid var(--bb-edge-strong); color: var(--bb-cream-soft);
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; white-space: nowrap;
}
.bb-pill--info { border-color: rgb(226 197 90 / 0.3); background: var(--bb-gold-tint); color: var(--bb-gold-light); }
.bb-pill--ok { border-color: rgb(143 214 168 / 0.38); background: var(--ok-bg); color: var(--ok); }
.bb-pill--warn { border-color: rgb(242 178 92 / 0.42); background: var(--warn-bg); color: var(--warn); }
.bb-pill--crit { border-color: rgb(255 132 118 / 0.42); background: var(--crit-bg); color: var(--crit); }

/* ---------- forms ---------- */

.bb-form { display: grid; align-items: start; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); padding: 1rem 1.1rem; }
.bb-field { display: grid; gap: 0.45rem; min-width: 0; }
.bb-field--wide { grid-column: 1 / -1; }
.bb-field label, .bb-field__legend {
    color: rgb(240 236 228 / 0.84); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.bb-field label small, .bb-field__legend small { font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--muted); }
.bb-field input, .bb-field select, .bb-field textarea {
    width: 100%; min-width: 0; min-height: 3rem; padding: 0.7rem 0.9rem;
    border: 1px solid var(--bb-edge-strong); border-radius: 0; background: var(--bb-field-fill); color: var(--ink);
    font: inherit; font-size: 15px;
}
.bb-field input::placeholder, .bb-field textarea::placeholder { color: rgb(240 236 228 / 0.38); }
.bb-field select {
    appearance: none; cursor: pointer; padding-right: 2.6rem;
    border-color: rgb(226 197 90 / 0.28);
    background-image:
        url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.4 1.4L7 7L12.6 1.4' stroke='%23d8c278' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        linear-gradient(145deg, rgb(226 197 90 / 0.08), rgb(255 255 255 / 0.03));
    background-repeat: no-repeat, no-repeat;
    background-position: right 0.95rem center, center;
    background-size: 0.8rem auto, 100% 100%;
}
.bb-field select option { background: var(--bb-menu); color: var(--ink); }
.bb-field textarea { resize: vertical; line-height: 1.5; }
.bb-field input:focus, .bb-field select:focus, .bb-field textarea:focus { outline: none; border-color: rgb(226 197 90 / 0.7); box-shadow: 0 0 0 1px rgb(226 197 90 / 0.35); }
.bb-field input:disabled, .bb-field select:disabled, .bb-field textarea:disabled { opacity: 0.6; }
.bb-field input[aria-invalid="true"], .bb-field select[aria-invalid="true"], .bb-field textarea[aria-invalid="true"] { border-color: var(--crit); }
.bb-field__hint { display: block; color: var(--muted); font-size: 12.5px; }
.bb-field__error { display: block; color: var(--crit); font-size: 12.5px; font-weight: 700; }
.bb-editor__foot { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding: 0.85rem 1.1rem; border-top: 1px solid var(--bb-edge); background: rgb(255 255 255 / 0.02); }

.bb-toggle {
    display: flex; gap: 0.7rem; align-items: center; padding: 0.7rem 0.9rem; cursor: pointer;
    border: 1px solid var(--bb-edge-strong); background: var(--bb-field-fill);
}
.bb-toggle:hover { border-color: var(--bb-gold-edge-strong); }
.bb-toggle input { flex: none; width: 18px; height: 18px; accent-color: var(--bb-gold); }
.bb-toggle strong { display: block; font-size: 14px; font-weight: 700; }
.bb-toggle small { display: block; color: var(--muted); font-size: 12.5px; }

.bb-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.bb-chip {
    appearance: none; cursor: pointer; font: inherit;
    display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.6rem; padding: 0.45rem 0.85rem;
    border: 1px solid var(--bb-edge-strong); background: rgb(255 255 255 / 0.02); color: var(--bb-cream-soft);
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.bb-chip:hover { border-color: var(--bb-gold-edge-strong); color: var(--ink); }
.bb-chip[aria-pressed="true"] { border-color: rgb(226 197 90 / 0.55); background: var(--bb-gold-tint-strong); color: var(--bb-gold-light); }

/* ---------- figures, notices, sections that open ---------- */

.bb-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 0.8rem 1rem; margin: 0; }
.bb-kv div { min-width: 0; }
.bb-kv dt { margin: 0; color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.bb-kv dd { margin: 0.2rem 0 0; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }

/* The admin's figure cards: an upper-case label and a large gold number. */
.bb-tile { padding: 0.8rem 0.95rem; box-shadow: inset 3px 0 0 rgb(191 146 91 / 0.55); }
.bb-tile dt { display: flex; align-items: center; gap: 0.5rem; color: var(--bb-cream-dim); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.bb-tile dd { margin: 0.35rem 0 0; font-variant-numeric: lining-nums tabular-nums; }
.bb-tile dd strong { font-family: var(--bb-font-heading); font-size: 1.85rem; line-height: 1; letter-spacing: 0.02em; color: var(--bb-gold-light); }
.bb-tile small { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 12px; }

.bb-cond { overflow: hidden; }
.bb-cond__head { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.85rem 1rem; border-left: 4px solid var(--bb-edge-strong); }
.bb-cond__head h2 { margin: 0.25rem 0 0; font-size: 15px; font-weight: 700; }
.bb-cond__head p { margin: 0.25rem 0 0; color: var(--bb-cream-dim); font-size: 13.5px; line-height: 1.5; }
.bb-cond__dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--muted); }
.bb-cond--ok .bb-cond__head { border-left-color: var(--ok); background: var(--ok-bg); }
.bb-cond--ok .bb-cond__head h2, .bb-cond--ok .bb-mi { color: var(--ok); }
.bb-cond--ok .bb-cond__dot { background: var(--ok); }
.bb-cond--warn .bb-cond__head { border-left-color: var(--warn); background: var(--warn-bg); }
.bb-cond--warn .bb-cond__head h2, .bb-cond--warn .bb-mi { color: var(--warn); }
.bb-cond--warn .bb-cond__dot { background: var(--warn); }
.bb-cond--crit .bb-cond__head { border-left-color: var(--crit); background: var(--crit-bg); }
.bb-cond--crit .bb-cond__head h2, .bb-cond--crit .bb-mi { color: var(--crit); }
.bb-cond--crit .bb-cond__dot { background: var(--crit); }
.bb-cond--flat .bb-cond__head { border-left-color: var(--bb-gold-edge-strong); }

.bb-quiet { padding: 0; }
.bb-quiet__toggle {
    display: flex; gap: 0.7rem; align-items: center; padding: 0.75rem 1.1rem; cursor: pointer; list-style: none;
    border-top: 1px solid var(--bb-edge); background: rgb(255 255 255 / 0.02);
}
.bb-quiet__toggle::-webkit-details-marker { display: none; }
.bb-quiet__toggle:hover { background: var(--bb-gold-tint); }
.bb-quiet__toggle strong { display: block; font-size: 14px; font-weight: 700; }
.bb-quiet__toggle small { display: block; color: var(--muted); font-size: 12.5px; }
.bb-quiet__toggle:focus-visible { outline-offset: -2px; }
.bb-quiet__chev { flex: none; color: var(--muted); transition: transform 0.15s; }
.bb-quiet[open] .bb-quiet__chev { transform: rotate(180deg); color: var(--bb-gold-light); }

/* ---------- touch screens ---------- */

@media (max-width: 991px) {
    .bb-btn { min-height: 2.9rem; }
    .bb-btn--sm { min-height: 2.6rem; }
    .bb-field input, .bb-field select, .bb-field textarea { min-height: 3rem; font-size: 16px; }
}