/* ============================================================================
   BUGgy — theme
   ----------------------------------------------------------------------------
   The Modernist look from the supplied design: white ground, near-mono red,
   Archivo-style grotesque, 2px rules, generous 48px gutters, and a 260px label
   column beside every control group.

   HOW THIS RELATES TO THE HOUSE STYLE. The other pages in this warehouse app
   load palette.css + base.css and get green/blue with soft cards. BUGgy still
   loads those - so every bbs-* component keeps working and no markup had to be
   rewritten - and then this file REDEFINES the tokens those components read.
   Because buggy.css and this file are only linked from BUGgy pages, nothing
   else in the app is touched.

   That is the whole trick: re-skin by token, not by rewriting components.

   LOAD ORDER. This file is linked LAST:

       palette.css -> base.css -> buggy.css -> this file

   It was third for a while, which meant any single-class selector buggy.css
   also styled beat it on an equal-specificity tie. Four pages silently kept
   buggy.css's 300-weight headings while the rule here asked for 800, and the
   1040px shell lost to `.bg-wrap`. A theme that loses to the sheet it is
   theming is not a theme. buggy.css defines none of the --bg-* tokens and
   consumes thirteen of them, so moving this file last changes nothing about
   variable resolution - custom properties resolve where they are used, not
   where they are declared.

   DARK MODE is a real theme here, not an afterthought: [data-theme="dark"] on
   the root, remembered per browser, defaulting to the system preference.
   ============================================================================ */

/* ---------------------------------------------------------------- fonts ---
   The design specifies Archivo. It is not self-hosted here and adding a Google
   Fonts request to a public form is a new external dependency on every page
   load, so the self-hosted League Spartan from palette.css carries the type
   instead - a geometric grotesque, heavy at 800, which is what the look needs.

   To switch to Archivo properly: drop the woff2 into public/fonts/archivo/,
   add an @font-face here, and change --bg-font below. One line changes.
   ------------------------------------------------------------------------- */

:root {
    --bg-font: 'League Spartan', 'Archivo', system-ui, 'Segoe UI', Arial, sans-serif;

    /* ---- the design's light palette ---- */
    --bg-ground: #ffffff;
    --bg-card: #ffffff;
    --bg-ink: #201e1d;
    --bg-body-text: #332f2e;
    --bg-muted: #575353;
    --bg-faint: #6f6b6a;
    --bg-line: rgba(32, 30, 29, 0.2);
    --bg-line-solid: #e7e5e5;
    --bg-panel: #f8f7f7;

    --bg-accent: #ec3013;
    /* Small text and links: the base accent measures 3.78:1 on white, which is
       under AA for anything that is not large. This ramp step is 6.4:1. */
    --bg-accent-ink: #ae1800;
    --bg-accent-wash: #ffefec;
    --bg-accent-edge: #ffc7bd;
    --bg-on-accent: #ffffff;

    --bg-radius: 12px;
    --bg-radius-lg: 16px;
    --bg-pill: 999px;
    --bg-rule: 2px;
    --bg-gutter: 48px;
    --bg-shell: 1040px;
    --bg-labelcol: 260px;
}

/* System preference is the default; an explicit choice overrides it below. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-ground: #141211;
        --bg-card: #1e1b1a;
        --bg-ink: #f2f0ef;
        --bg-body-text: #ded9d7;
        --bg-muted: #b8b1af;
        --bg-faint: #9b9593;
        --bg-line: rgba(242, 240, 239, 0.22);
        --bg-line-solid: #332d2c;
        --bg-panel: #221e1d;

        --bg-accent: #ff4a2b;
        --bg-accent-ink: #ff9078;
        --bg-accent-wash: #2a1713;
        --bg-accent-edge: #52251b;
        /* Dark text on a bright accent, which is the inverse of the light
           theme and measures far better than white on the same fill. */
        --bg-on-accent: #141211;
    }
}

:root[data-theme="dark"] {
    --bg-ground: #141211;
    --bg-card: #1e1b1a;
    --bg-ink: #f2f0ef;
    --bg-body-text: #ded9d7;
    --bg-muted: #b8b1af;
    --bg-faint: #9b9593;
    --bg-line: rgba(242, 240, 239, 0.22);
    --bg-line-solid: #332d2c;
    --bg-panel: #221e1d;

    --bg-accent: #ff4a2b;
    --bg-accent-ink: #ff9078;
    --bg-accent-wash: #2a1713;
    --bg-accent-edge: #52251b;
    --bg-on-accent: #141211;
}

/* ============================================================================
   Remapping the house tokens
   ----------------------------------------------------------------------------
   Everything below points a palette.css variable at a BUGgy one, so every
   bbs-* component in base.css re-skins without a single markup change. This is
   the only place the two systems meet.
   ========================================================================== */

:root {
    --font-family-base: var(--bg-font);

    --background-color: var(--bg-ground);
    --surface: var(--bg-card);
    --surface-2: var(--bg-panel);
    --surface-3: var(--bg-panel);

    --font-color: var(--bg-ink);
    --text-muted: var(--bg-muted);
    --text-faint: var(--bg-faint);

    --hairline: var(--bg-line);
    --hairline-strong: var(--bg-line);

    --primary-color: var(--bg-accent);
    --primary-hover: var(--bg-accent-ink);
    --primary-press: var(--bg-accent-ink);
    --on-primary: var(--bg-on-accent);

    --accent-color: var(--bg-accent);
    --accent-hover: var(--bg-accent-ink);
    --accent-press: var(--bg-accent-ink);
    --on-accent: var(--bg-on-accent);

    --link-color: var(--bg-accent-ink);
    --link-hover-color: var(--bg-ink);

    --brand-wash: var(--bg-accent-wash);
    --accent-wash: var(--bg-accent-wash);
    --row-hover-bg: var(--bg-panel);
    --row-selected-bg: var(--bg-accent-wash);

    --header-bg: var(--bg-card);
    --header-border: var(--bg-line);
    --nav-fg: var(--bg-muted);
    --nav-fg-active: var(--bg-accent-ink);
    --nav-underline: var(--bg-accent);

    --focus-ring-color: var(--bg-accent);

    --info-bg: var(--bg-accent-wash);
    --info-fg: var(--bg-accent-ink);
    --info-color: var(--bg-accent);

    /* Rounded, per the design - not the zero-radius the written guide asks for.
       The supplied file is the authority: 12px on controls, 16px on cards,
       999px on pills. */
    --radius-sm: 8px;
    --radius-md: var(--bg-radius);
    --radius-lg: var(--bg-radius-lg);
    --radius-pill: var(--bg-pill);

    /* Nothing floats. Structure comes from the 2px rules. */
    --elev-1: none;
    --elev-2: none;
    --elev-3: 0 24px 64px rgba(0, 0, 0, 0.28);
}

/* ============================================================================
   Structural overrides on the shared components
   ========================================================================== */

body {
    background: var(--bg-ground);
    color: var(--bg-ink);
    font-family: var(--bg-font);
    font-size: 15px;
    line-height: 1.55;
}

/* Headings are heavy and tight, which is most of the look. */
h1, h2, h3, h4, .bg-title, .bg-block__title, .bg-wordmark {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* 2px everywhere a rule appears, and no shadows anywhere. */
.bbs-card {
    border: var(--bg-rule) solid var(--bg-line);
    box-shadow: none;
    background: var(--bg-card);
}

.bbs-input, .bbs-select, .bbs-textarea {
    border: var(--bg-rule) solid var(--bg-line);
    background: var(--bg-card);
    border-radius: var(--bg-radius);
    padding: 12px 14px;
    font-size: 15px;
}
.bbs-input:hover, .bbs-select:hover, .bbs-textarea:hover { border-color: var(--bg-muted); }
.bbs-input:focus, .bbs-select:focus, .bbs-textarea:focus {
    border-color: var(--bg-accent);
    outline: none;
}
.bbs-input::placeholder, .bbs-textarea::placeholder { color: var(--bg-faint); }

/* Every control is a pill, and a button's label sits flush left - the design is
   explicit about that, and it is what stops a wide button looking centred and
   accidental. */
.bbs-btn {
    border-radius: var(--bg-pill);
    border-width: var(--bg-rule);
    font-weight: 800;
    letter-spacing: 0;
    justify-content: flex-start;
    text-align: left;
    min-height: 42px;
    padding: 0 22px;
}
/* The design's CTA is 17px bold on the signature red, which measures 4.20:1 -
   under AA for anything below the large-text threshold. 19px bold clears that
   threshold (18.66px), so the button keeps the red the whole design is built
   around instead of being darkened to a shade that appears nowhere else. Two
   pixels; the look is indistinguishable. */
.bbs-btn--lg { min-height: 56px; padding: 0 32px; font-size: 19px; }
/* THE PRIMARY BUTTON'S TWO REDS, and why there are two.

   White on the design's #ec3013 measures 4.20:1. That passes AA for large text
   and fails it for everything else - so a 14px "Reply to reporter" in the
   console was failing while the 19px hero CTA passed. Rather than darken every
   button and lose the signature red where it matters most, the DEFAULT fill is
   the deeper ramp step (6.4:1 at any size) and only .bbs-btn--lg - which the
   type scale holds at 19px, above the 18.66px large-text threshold - carries
   #ec3013. Hover brightens to the signature red, which reads as a response.

   In dark the pair inverts by itself: both steps are bright fills with dark
   ink, and both already pass at any size. */
.bbs-btn--primary {
    background: var(--bg-accent-ink);
    color: var(--bg-on-accent);
    border-color: transparent;
}
.bbs-btn--primary:hover { background: var(--bg-accent); color: var(--bg-on-accent); }
.bbs-btn--primary.bbs-btn--lg { background: var(--bg-accent); }
.bbs-btn--primary.bbs-btn--lg:hover { background: var(--bg-accent-ink); }
.bbs-btn--secondary {
    background: transparent;
    color: var(--bg-ink);
    border-color: var(--bg-ink);
}
.bbs-btn--secondary:hover { background: var(--bg-panel); }
.bbs-btn--ghost { background: transparent; color: var(--bg-muted); border-color: transparent; }
.bbs-btn--ghost:hover { background: var(--bg-panel); color: var(--bg-ink); }

/* The uppercase tracked micro-label the design uses above every heading. */
.bbs-eyebrow, .bg-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bg-accent-ink);
}

.bbs-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bg-body-text);
}

/* A pill badge rather than a coloured word.

   Element-qualified from when buggy.css was linked afterwards: it styles the
   bare `.bg-req`/`.bg-opt` as coloured WORDS, which is right for the unthemed
   base and wrong on a filled pill. Kept, because the badges are always spans
   and saying so costs nothing. */
.bbs-badge, span.bg-req, span.bg-opt {
    display: inline-block;
    border-radius: var(--bg-pill);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 10px;
}
/* Element-qualified so these beat buggy.css's `.bg-req { color: danger }`,
   which is right in the unthemed base - red WORD on the page - but is a red
   word on a red fill once this file turns the badge into a filled pill.

   The fill is --bg-accent-ink rather than --bg-accent. At 10-12px this is
   small text, and white on the signature #ec3013 measures 4.20:1 - fine for
   the 19px CTA, under AA here. The deeper ramp step is 6.4:1 and reads as the
   same red. In dark the pair inverts by itself: a bright fill with dark ink. */
span.bg-req {
    background: var(--bg-accent-ink);
    color: var(--bg-on-accent);
    margin-left: 0;
}
span.bg-opt {
    background: transparent;
    color: var(--bg-muted);
    border: var(--bg-rule) solid var(--bg-line);
    margin-left: 0;
}

.bbs-alert {
    border-radius: var(--bg-radius);
    border: var(--bg-rule) solid var(--bg-line);
}
.bbs-alert--danger { border-color: var(--bg-accent); background: var(--bg-accent-wash); color: var(--bg-ink); }
.bbs-alert--success { border-color: var(--bg-line); background: var(--bg-panel); color: var(--bg-ink); }

.bbs-table th {
    color: var(--bg-muted);
    border-bottom: var(--bg-rule) solid var(--bg-line);
    letter-spacing: 0.12em;
}
.bbs-table td { border-bottom: 1px solid var(--bg-line-solid); }

:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 2px; }

/* Links carry a 2px underline rather than a hue shift, per the design. */
.bg-wrap a:not(.bbs-btn):not(.bg-tab),
.bg-console a:not(.bbs-btn):not(.bg-tab),
.bg-admin a:not(.bbs-btn):not(.bg-tab) {
    color: var(--bg-accent-ink);
    text-decoration: none;
    border-bottom: var(--bg-rule) solid currentColor;
}
.bg-wrap a:not(.bbs-btn):hover,
.bg-console a:not(.bbs-btn):hover,
.bg-admin a:not(.bbs-btn):hover { color: var(--bg-ink); }

/* ============================================================================
   THE SHEET — the intake form's layout, straight from the design
   ----------------------------------------------------------------------------
   One 1040px column with 48px gutters, and every question group laid out as a
   260px label column beside a 1fr control column, separated by 2px rules.

   Scoped to .bg-sheet on purpose. The same .bg-block class is used on the
   console, the admin page and the status page, where the two-column split would
   be wrong - those are dense working screens, not a form somebody reads
   top-to-bottom once.
   ========================================================================== */

.bg-head--sheet .bg-head__inner {
    max-width: var(--bg-shell);
    padding: 0 var(--bg-gutter);
    height: 84px;
    gap: 18px;
}
.bg-head--sheet .bg-logo { height: 30px; width: 30px; object-fit: contain; }
.bg-head--sheet .bg-wordmark {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
/* Sits beside the wordmark behind a rule, rather than being pushed to the far
   end - the theme button is what takes the far end now. */
.bg-head--sheet .bg-head__sub {
    margin-left: 0;
    border-left: var(--bg-rule) solid var(--bg-line);
    padding-left: 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bg-muted);
}
/* Out-specifies buggy.css's `.bg-head__sub + .bg-themebtn`, which sets a fixed
   left margin - a real adjacent-sibling selector, so it needs beating on
   specificity and not merely on order. */
.bg-head--sheet .bg-themebtn,
.bg-head--sheet .bg-head__sub + .bg-themebtn { margin-left: auto; }

/* ---- where you are: one joined pill, the current step filled ---- */
.bg-steps {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: var(--bg-rule) solid var(--bg-line);
    border-radius: var(--bg-pill);
    overflow: hidden;
}
.bg-steps__step {
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bg-muted);
    white-space: nowrap;
}
.bg-steps__no { opacity: 0.7; margin-right: 4px; }
/* Same reasoning as the Required pill: 11px is small text, so the fill is the
   deeper ramp step rather than the signature red. */
.bg-steps__step.is-now {
    background: var(--bg-accent-ink);
    color: var(--bg-on-accent);
}
.bg-steps__step.is-now .bg-steps__no { opacity: 1; }

/* ------------------------------------------------------------------ page --- */
/* Both classes are on the same element. This dates from when buggy.css was
   linked afterwards and `.bg-sheet` alone lost the tie; it is kept because it
   also says what it means - the sheet treatment of a wrap. */
.bg-wrap.bg-sheet {
    max-width: var(--bg-shell);
    padding: 0 var(--bg-gutter) 96px;
}

.bg-hero {
    padding: 56px 0 0;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 64px;
    align-items: start;
}
.bg-hero .bg-title {
    font-size: 64px;
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
}
.bg-hero .bg-lede {
    font-size: 17px;
    color: var(--bg-body-text);
    max-width: 52ch;
    margin: 0;
}
.bg-hero__card {
    border: var(--bg-rule) solid var(--bg-line);
    background: var(--bg-card);
    border-radius: var(--bg-radius-lg);
    padding: 20px;
}
.bg-hero__card-head {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bg-muted);
    margin: 0 0 10px;
}
.bg-hero__card-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--bg-body-text);
}

/* A rule as an element, because it separates the hero from the form rather than
   belonging to either one. */
.bg-rule {
    height: var(--bg-rule);
    background: var(--bg-line);
    margin: 56px 0 0;
}

/* ---------------------------------------------------------------- blocks --- */
.bg-sheet .bg-block {
    display: grid;
    grid-template-columns: var(--bg-labelcol) 1fr;
    gap: var(--bg-gutter);
    align-items: start;
    padding: 40px 0;
    margin: 0;
    border-top: 0;
    border-bottom: var(--bg-rule) solid var(--bg-line);
}
.bg-sheet .bg-block__title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}
.bg-sheet .bg-block__side .bg-block__title:only-child { margin-bottom: 0; }
.bg-sheet .bg-block__hint {
    font-size: 14px;
    line-height: 1.5;
    margin: 14px 0 0;
    max-width: none;
}
.bg-sheet .bg-block__body { display: grid; gap: 28px; min-width: 0; }
/* The body is a grid, so the children's own bottom margins would double the
   gap. */
.bg-sheet .bg-block__body > .bbs-field { margin: 0; }

/* ---- applications: two tiles across ---- */
.bg-sheet .bg-groups { grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---- tags: a 120px category column, ruled ---- */
.bg-sheet .bg-tags { gap: 0; }
.bg-sheet .bg-tagcat {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    padding: 16px 0;
    border-top: var(--bg-rule) solid var(--bg-line);
    align-items: start;
}
.bg-sheet .bg-tagcat__name {
    font-size: 11px;
    letter-spacing: 0.16em;
    margin: 4px 0 0;
}
.bg-sheet .bg-field--tight {
    border-top: var(--bg-rule) solid var(--bg-line);
    padding-top: 24px;
    margin-top: 8px;
}
.bg-sheet .bg-field--tight .bbs-input { max-width: 460px; }

/* ---- send ---- */
.bg-sheet .bg-submit {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 40px 0;
    margin: 0;
}
.bg-sheet .bg-submit__note {
    margin: 0;
    text-align: left;
    font-size: 13px;
    max-width: 34ch;
}

/* ---- the receipt ---- */
.bg-sheet #bgDoneStep { padding: 72px 0; max-width: 720px; }
.bg-sheet #bgDoneStep .bg-title {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.03em;
    margin: 0 0 32px;
}

/* ---------------------------------------------------------------- footer --- */
.bg-sheet ~ .bg-foot,
.bg-foot--sheet {
    max-width: none;
    border-top: var(--bg-rule) solid var(--bg-line);
    padding: 0;
    margin: 0;
}
.bg-foot__inner {
    max-width: var(--bg-shell);
    margin: 0 auto;
    padding: 24px var(--bg-gutter);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bg-faint);
}

/* ------------------------------------------------------------ narrower --- */
/* 1040px shell + 2x48px gutters wants 1136px. Below that the gutters shrink
   first, then the label column stops being a column: 260px beside a text area
   is a form nobody can fill in on a laptop split-screen, let alone a phone. */
@media (max-width: 1080px) {
    .bg-head--sheet .bg-head__inner,
    .bg-wrap.bg-sheet,
    .bg-foot__inner { padding-left: 32px; padding-right: 32px; }
    .bg-hero { grid-template-columns: 1fr; gap: 32px; }
    .bg-hero__card { max-width: 460px; }
    .bg-hero .bg-title { font-size: 52px; }
}

@media (max-width: 860px) {
    .bg-sheet .bg-block { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
    .bg-sheet .bg-groups { grid-template-columns: 1fr; }
    .bg-steps { display: none; }
}

@media (max-width: 640px) {
    .bg-head--sheet .bg-head__inner,
    .bg-wrap.bg-sheet,
    .bg-foot__inner { padding-left: 20px; padding-right: 20px; }
    .bg-head--sheet .bg-head__inner { height: auto; padding-top: 14px; padding-bottom: 14px; }
    .bg-hero { padding-top: 36px; }
    .bg-hero .bg-title { font-size: 38px; }
    .bg-sheet .bg-tagcat { grid-template-columns: 1fr; gap: 10px; }
    .bg-sheet #bgDoneStep .bg-title { font-size: 34px; }
    .bg-sheet .bg-submit { padding: 28px 0; }
}

/* ============================================================================
   ONE FAMILY — the chrome and the type scale, on every page
   ----------------------------------------------------------------------------
   Everything above this point either themes a component or lays out the intake
   sheet. That left the other four pages wearing the design's colours over the
   house's proportions: a 17.6px wordmark, a 67-75px header, and no rule at the
   foot of the page. Coherent colour is not the same thing as one design.

   So: the header, the footer and the heading scale are declared once here for
   ALL pages, and the wide pages differ only in how much room they get.
   ========================================================================== */

/* ---------------------------------------------------------------- header --- */
.bg-head {
    background: var(--bg-card);
    border-bottom: var(--bg-rule) solid var(--bg-line);
}
.bg-head__inner {
    max-width: var(--bg-shell);
    padding: 0 var(--bg-gutter);
    min-height: 84px;
    gap: 18px;
}
/* The console and admin are working screens: same chrome, more room. */
.bg-head--wide .bg-head__inner--wide { max-width: 1480px; }

.bg-logo { height: 30px; width: 30px; object-fit: contain; }
.bg-wordmark {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bg-ink);
}
/* The brand is a link on the tool pages. It must not pick up the 2px underline
   every other in-page link gets, and it must sit on the wordmark's baseline. */
.bg-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    border-bottom: 0;
}
.bg-brand:hover .bg-wordmark { color: var(--bg-accent-ink); }

/* Caps, tracked, behind a rule - the design's masthead device. Not pushed to
   the far end any more: the controls take that side. */
.bg-head__sub {
    margin-left: 0;
    border-left: var(--bg-rule) solid var(--bg-line);
    padding-left: 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bg-muted);
}
.bg-head__sub + .bg-themebtn { margin-left: auto; }
/* On a page with a spacer the spacer does the pushing, so the button must not
   also claim the free space - two autos would centre the group. */
.bg-head__spacer ~ .bg-themebtn { margin-left: 0; }
.bg-who {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bg-faint);
}

/* ------------------------------------------------------------------ type --- */
/* One scale, largest where there is one thing to read and smallest where the
   page is a tool. The intake hero keeps its own 64px further up. */
.bg-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 var(--sp-3);
}
.bg-console .bg-title,
.bg-admin .bg-title {
    font-size: 30px;
    letter-spacing: -0.02em;
}
.bg-block__title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.bg-lede {
    font-size: 17px;
    color: var(--bg-body-text);
}

/* Section rules are 2px here as well, not the base sheet's hairline. */
.bg-block {
    border-top: var(--bg-rule) solid var(--bg-line);
}
.bg-block:first-of-type { border-top: 0; }

/* ---------------------------------------------------------------- footer --- */
/* Full-bleed rule, caps inner, same on every page. The tool pages get a
   shallower one - a queue is scrolled, not finished. */
.bg-foot {
    max-width: none;
    border-top: var(--bg-rule) solid var(--bg-line);
    padding: 0;
    margin: 0;
    font-size: 12px;
}
.bg-foot__inner {
    max-width: var(--bg-shell);
    margin: 0 auto;
    padding: 24px var(--bg-gutter);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bg-faint);
}
.bg-foot--wide .bg-foot__inner { max-width: 1480px; padding: 16px var(--bg-gutter); }

/* -------------------------------------------------------- tap targets --- */
/* Both of these measured under 24px, which is a coin flip on a laptop
   trackpad and unusable on a touch screen. */
.bg-rail__label { min-height: 28px; }
.bg-rail__x {
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

@media (max-width: 640px) {
    .bg-head__inner { min-height: 0; padding-top: 14px; padding-bottom: 14px; }
    .bg-title { font-size: 30px; }
    .bg-foot__inner { padding: 18px 20px; }
}

/* --------------------------------------------------- the reading pages --- */
/* The status page and the sign-in page were centring their content in the
   VIEWPORT while the masthead sat in the 1040px shell, so the headline started
   92px to the right of the wordmark above it. Nothing looked broken; it just
   looked like two different pages stacked.

   The shell is the same width as everywhere else, and the measure is a
   max-width INSIDE it, flush left - so the first character of the headline sits
   directly under the first character of the wordmark. */
.bg-wrap:not(.bg-sheet) {
    max-width: var(--bg-shell);
    margin: 0 auto;
    padding: 56px var(--bg-gutter) 96px;
}
.bg-wrap:not(.bg-sheet) > * { max-width: 760px; }
/* A narrow page is narrow in its measure, not in its shell. */
.bg-wrap--narrow { max-width: var(--bg-shell); }
.bg-wrap--narrow > * { max-width: 460px; }

@media (max-width: 1080px) {
    .bg-wrap:not(.bg-sheet) { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 640px) {
    .bg-wrap:not(.bg-sheet) { padding: 32px 20px 64px; }
}

/* A related ticket is a row you click, not a word in a sentence. */
.bg-related__link {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
}

/* ------------------------------------------------- the header on a phone --- */
/* The console header carries seven things: logo, wordmark, section, spacer,
   who you are, the theme switch, Admin, Sign out. A flex row will not shrink an
   item below its min-content width, so at 375px the row stayed 582px wide and
   the whole PAGE scrolled sideways - taking the queue with it.

   It wraps instead. The brand keeps the first line; the controls drop to the
   second and stay reachable. */
@media (max-width: 820px) {
    .bg-head__inner {
        flex-wrap: wrap;
        row-gap: 10px;
        padding-top: 14px;
        padding-bottom: 14px;
        min-height: 0;
    }
    /* Once the row wraps, an auto margin would push the controls onto a line of
       their own and leave a hole. The spacer does the same thing, so both go. */
    .bg-head__sub + .bg-themebtn { margin-left: 0; }
    .bg-head__spacer { display: none; }
    /* The section label is the first thing to go: the page title says it. */
    .bg-head__sub { display: none; }
    .bg-who { width: 100%; order: 9; }
}

/* ------------------------------------------------------- unbreakable text --- */
/* A pasted URL is one word with no break opportunity in it, so it sets the
   minimum width of every box it sits in. One SharePoint link in a ticket's
   link list was enough to push the console's detail column 62px past a phone
   screen and scroll the whole page sideways.

   `anywhere` rather than `break-word`: break-word does not shrink the box's
   intrinsic minimum width, so a grid column sized from content still comes out
   too wide. This is the same fix already applied to table cells; it belongs
   anywhere a person's own text lands. */
/* Enumerating the containers was the wrong shape for this fix: the first list
   missed #bgLinks on the status page, which then scrolled sideways at 375px in
   both themes - 28 of the sweep's findings, all one bug. Every link in the
   sub-app wraps instead. A link short enough to fit is unaffected; only one too
   long to fit is broken, which is the case this exists for. */
.bg-wrap a,
.bg-console a,
.bg-admin a,
.bg-comment,
.bg-comment__body,
.bg-event,
.bg-similar__title,
.bg-att__meta,
.bg-meta dd,
.bg-who {
    overflow-wrap: anywhere;
}

/* ------------------------------------------------- checkboxes and radios ---
   Every other choice on these pages is a designed object: the severity and tag
   options are pills, the applications are tiles. The boxes inside them were
   still the browser's own 13px control, which on the dark ground rendered as a
   grey square that reads as disabled rather than as unchecked - the one thing a
   checkbox must never look like.

   `accent-color` alone is not enough: it recolours the checked fill and leaves
   the unchecked box at the UA's own size and border. So the box is sized and
   ruled here to match the 2px language, and `accent-color` carries the checked
   state for the tick, which cannot be styled directly.

   Only the boxes that are actually SEEN are targeted. The pills hide their
   input behind the label (opacity: 0), and giving those a border would put a
   ghost square under every pill. */
.bg-group input[type="checkbox"],
.bg-table input[type="checkbox"],
.bg-form-grid input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    background: var(--bg-card);
    border: var(--bg-rule) solid var(--bg-line);
    border-radius: 4px;
    cursor: pointer;
}

/* The tick is drawn rather than inherited, because `appearance: none` takes the
   UA's glyph with it. A rotated rectangle is the whole mark - two borders on a
   box - which needs no font and no image and scales with the control. */
.bg-group input[type="checkbox"]::after,
.bg-table input[type="checkbox"]::after,
.bg-form-grid input[type="checkbox"]::after {
    content: '';
    display: block;
    width: 4px;
    height: 9px;
    margin: 1px auto 0;
    border: solid var(--bg-on-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(40deg);
    opacity: 0;
}
.bg-group input[type="checkbox"]:checked,
.bg-table input[type="checkbox"]:checked,
.bg-form-grid input[type="checkbox"]:checked {
    background: var(--bg-accent-ink);
    border-color: var(--bg-accent-ink);
}
.bg-group input[type="checkbox"]:checked::after,
.bg-table input[type="checkbox"]:checked::after,
.bg-form-grid input[type="checkbox"]:checked::after { opacity: 1; }

.bg-group input[type="checkbox"]:hover,
.bg-table input[type="checkbox"]:hover,
.bg-form-grid input[type="checkbox"]:hover { border-color: var(--bg-accent-ink); }

/* The tile draws its own focus ring from the input's focus-visible, so the box
   must not draw a second one inside it. Everywhere else keeps the house ring. */
.bg-group input[type="checkbox"]:focus-visible { outline: 0; }

/* The tile's own padding was cut for a 13px control; an 18px one needs the
   text to start further in or the name sits on top of the box. */
.bg-sheet .bg-group { padding-left: 52px; }
.bg-sheet .bg-group input[type="checkbox"] { left: 20px; top: 18px; }

/* ------------------------------------------------- admin column widths ---
   The guidance sentence is the only field on this page a reporter ever reads,
   and it was the narrowest input on the row: 257px holding up to 740px of text,
   so an admin editing it could see about a third of what they were editing.
   Meanwhile `Order` - never more than three digits - had a wider box than the
   sentence.

   Percentages on the header cells rather than fixed widths, so the table still
   collapses into .bbs-table-wrap on a narrow screen instead of forcing the page
   sideways. */
.bg-table input.bg-inline-input,
.bg-table textarea.bg-inline-input,
.bg-table select.bg-inline-select { width: 100%; min-width: 0; }
/* Two lines of a sentence, not one line of it. Resizable so a longer one can
   be read in full without leaving the page. */
.bg-table textarea.bg-inline-area {
    min-height: 70px;
    line-height: 1.4;
    resize: vertical;
}
/* Applications: name and parent are short, the numeric and toggle columns are
   fixed, and the guidance column takes whatever is left - which is the whole
   point of the rule. */
#panel-groups .bg-table th:nth-child(1) { width: 19%; }
#panel-groups .bg-table th:nth-child(2) { width: 15%; }
#panel-groups .bg-table th:nth-child(3) { width: auto; }
#panel-groups .bg-table th:nth-child(4),
#panel-groups .bg-table th:nth-child(5),
#panel-groups .bg-table th:nth-child(6) { width: 88px; }

/* Tags gained a Division column in position 3, so the fixed narrow columns
   move along one. */
#panel-tags .bg-table th:nth-child(3) { width: 15%; }
#panel-tags .bg-table th:nth-child(4),
#panel-tags .bg-table th:nth-child(5),
#panel-tags .bg-table th:nth-child(6),
#panel-tags .bg-table th:nth-child(7) { width: 88px; }

/* Divisions is the widest table on the page: twelve columns, two of which hold
   prose.

   Fixed widths rather than percentages here, unlike every other panel above.
   Percentages plus a min-width fight each other once the fixed columns alone
   approach that min-width - `width: auto` on the guidance column then gets
   whatever is left, which came out at 99px: a two-sentence field about four
   characters wide. Pinning all twelve and setting min-width to their sum means
   the wrap scrolls and every column keeps the size it needs. */
#panel-divisions .bg-table th:nth-child(1)  { width: 160px; }  /* name */
#panel-divisions .bg-table th:nth-child(2)  { width: 104px; }  /* ?bug= link */
#panel-divisions .bg-table th:nth-child(3)  { width: 120px; }  /* called in email */
#panel-divisions .bg-table th:nth-child(4)  { width: 200px; }  /* sends from */
#panel-divisions .bg-table th:nth-child(5)  { width: 200px; }  /* headline */
#panel-divisions .bg-table th:nth-child(6)  { width: 280px; }  /* guidance */
#panel-divisions .bg-table th:nth-child(7)  { width: 88px; }   /* daily hour */
#panel-divisions .bg-table th:nth-child(8)  { width: 180px; }  /* weekly day + hour */
#panel-divisions .bg-table th:nth-child(9)  { width: 84px; }   /* dictation */
#panel-divisions .bg-table th:nth-child(10),
#panel-divisions .bg-table th:nth-child(11) { width: 64px; }   /* apps, tickets */
#panel-divisions .bg-table th:nth-child(12) { width: 56px; }   /* live */
#panel-divisions .bg-table th:nth-child(13) { width: 170px; }  /* the note */

/* The narrow toggle columns must be allowed to wrap, or table-layout: auto
   sizes them to their unbreakable header text and steals the width from the
   prose columns - the same trap the People panel fell into. */
#panel-divisions .bg-table th:nth-child(9),
#panel-divisions .bg-table th:nth-child(10),
#panel-divisions .bg-table th:nth-child(11),
#panel-divisions .bg-table th:nth-child(12) { white-space: normal; }

/* People: the address is the identity on this page and the longest thing on the
   row, and it was breaking mid-word inside a 14% column while a third of the
   table sat empty. `anywhere` is still the right wrap rule - it just should not
   be doing the work of a column width. */
/* ALL FIXED, no percentages — the same conclusion the Divisions table reached.
   Percentages and a min-width compete: the browser resolves the percentages
   against whatever the table ends up being, so every column comes out slightly
   under what was asked for and the one holding a control is the one that
   suffers. Asking for 260px on Division access got 242px, which clipped
   "Engineer admin" inside its select. Fixed widths plus a floor equal to their
   sum means each column is the size it says. */
#panel-people .bg-table th:nth-child(1) { width: 150px; }  /* Name */
#panel-people .bg-table th:nth-child(2) { width: 260px; }  /* Email */
#panel-people .bg-table th:nth-child(3) { width: 130px; }  /* Global role */
#panel-people .bg-table th:nth-child(4) { width: 270px; }  /* Division access */
#panel-people .bg-table th:nth-child(5) { width: 130px; }  /* Notifications */
#panel-people .bg-table th:nth-child(6),
#panel-people .bg-table th:nth-child(7) { width: 88px; }
#panel-people .bg-table th:nth-child(8) { width: 110px; }  /* Last signed in */
/* The muted-lead note. Wide enough to read without wrapping to four lines. */
#panel-people .bg-table th:nth-child(9) { width: 200px; }

/* These three headers MUST be allowed to wrap.
   .bg-table uses table-layout: auto, where a `width` is a suggestion and the
   widest unbreakable content wins. With nowrap headers that meant "Alerts on
   new" - one checkbox - claimed 141px off the top of a 1000px table while the
   Name input was squeezed to 42, narrow enough to hide the name being edited.
   Letting the header text break onto two lines is what makes the widths above
   achievable rather than aspirational. */
#panel-people .bg-table th:nth-child(4),
#panel-people .bg-table th:nth-child(6),
#panel-people .bg-table th:nth-child(7),
#panel-people .bg-table th:nth-child(8) { white-space: normal; }

/* A floor under each table, so .bbs-table-wrap scrolls instead of the columns
   compressing. Without it the percentage widths above are percentages of
   whatever is left: at 754px the Name column came out 38px wide and clipped
   "Caddy Hub" inside its own input, which is the failure mode the wrap exists
   to prevent. Sideways scrolling inside the table is the intended answer here -
   the page itself still does not scroll sideways. */
#panel-groups .bg-table { min-width: 1020px; }
/* The floor has to clear the SUM of the widths above, or table-layout: auto
   compresses all of them proportionally and the columns with no intrinsic
   content - Name, holding a full-width input - lose the most. At 1000px the
   asks came to 1047 before "Last signed in" got any, so it ended up 35px wide
   holding a date. */
/* The sum of the nine fixed widths above. */
#panel-people .bg-table { min-width: 1426px; }
#panel-tags .bg-table,
#panel-embed .bg-table { min-width: 820px; }
/* The sum of the twelve fixed widths above. This one genuinely needs the room,
   and the wrap is what keeps the page itself from scrolling sideways. */
#panel-divisions .bg-table { min-width: 1770px; }

/* ---------------------------------------------------------- sticky footer ---
   Every page shorter than the window - the sign-in page, a ticket with no
   conversation on it yet, a half-empty admin panel - put its footer rule
   halfway up the screen with a field of ground below it, which reads as content
   that failed to load rather than as the end of the page.

   Not applied to the embedded form: the host page sizes the iframe from the
   document's own height, and a 100dvh floor would report a minimum of the
   frame's own viewport for a form that needs far less. */
body:not(.bg-embedded) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
body:not(.bg-embedded) > .bg-foot { margin-top: auto; }

/* And every direct child fills the line.

   THIS IS LOAD-BEARING, not tidying. A flex item with auto margins on the cross
   axis has its stretch CANCELLED — the auto margins absorb the free space
   instead — so every centred block in this sub-app (`.bg-console`, `.bg-admin`,
   `.bg-wrap`, `.bg-foot__inner`, all of them `max-width: N; margin: 0 auto`)
   stopped stretching and collapsed to its CONTENT width the moment `body`
   became a flex column. Measured in a 1920px window: the console went from
   1480px to 328px. A change that was only meant to move the footer down took
   the queue with it.

   `width: 100%` restores the used width; `max-width` still caps it and the auto
   margins still centre it. Anything added here later gets the same treatment
   for free.

   `min-width: 0` alongside, because a column flex item will not otherwise
   shrink below its content's minimum width — which is how one long URL in the
   console would take the whole page sideways. */
body:not(.bg-embedded) > * { width: 100%; min-width: 0; }

/* ------------------------------------------------ the working screens ---
   The intake form is a 1040px sheet because it is read once, top to bottom, and
   a long measure is harder to read. The console and the admin pages are the
   opposite: a queue, seven-column tables, and a ticket with a control rail
   beside it, all of it scanned rather than read. 1480px was leaving most of a
   2560px monitor empty while the queue's own meta line wrapped.

   `min()` rather than a bigger fixed number, so it uses the screen it is given
   and still keeps a gutter on one that is merely wide. Below 1920px this is
   what it always was. */
.bg-console,
.bg-admin { max-width: min(1800px, 94vw); }
.bg-head--wide .bg-head__inner--wide,
.bg-foot--wide .bg-foot__inner { max-width: min(1800px, 94vw); }

/* The rail can afford to be wider too — several filter labels were wrapping
   onto two lines inside 240px, which is what made the queue feel cramped even
   where there was room to spare. */
@media (min-width: 1500px) {
    .bg-console { grid-template-columns: 280px minmax(0, 1fr); }
    .bg-console--detail { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* ============================================================================
   Dropdowns
   ----------------------------------------------------------------------------
   Every <select> in the sub-app, in one place. They were the last raw native
   control left: no `appearance` reset anywhere, so they rendered with the
   operating system's own chevron and metrics next to inputs that had been
   restyled down to the 2px rule. On the admin pages that put an OS widget in
   the middle of a designed table.

   THE NATIVE ELEMENT IS KEPT ON PURPOSE. A scripted listbox would let the open
   menu be styled too, and it would cost keyboard navigation, type-ahead
   ("e" jumps to Engineer), the platform picker on a phone, correct screen
   reader semantics, and form integration — all of which the native element
   gives for nothing and all of which are easy to reimplement badly. Everything
   somebody actually sees before they click is styled here; the open list stays
   the platform's, which is also the one part users already know how to drive.

   `color-scheme` is what makes that list follow the theme. Without it a dark
   page opens a white menu, because the popup is drawn by the OS and not by the
   page. The pre-paint snippet in each view already stamps it on <html>; this
   inherits it explicitly so a select is never the odd one out.
   ============================================================================ */

.bbs-select {
    appearance: none;
    -webkit-appearance: none;
    color-scheme: inherit;

    /* Room for the chevron, and never let a long option name run under it. */
    padding-right: 40px;
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;

    /* A data URI rather than a pseudo-element: a <select> cannot carry ::after
       in any browser worth supporting. Declared once per theme below, because a
       data URI cannot read currentColor. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23575353' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* Safari puts its own inner border on a select even after appearance:none. */
    background-color: var(--bg-card);
    text-overflow: ellipsis;
}

/* The chevron in dark. Both halves of the theme, guarded the same way the
   colour tokens are (§20) so an explicit light choice on a dark-preference
   machine does not get the pale arrow. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bbs-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b8b1af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
}
:root[data-theme="dark"] .bbs-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b8b1af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.bbs-select:hover { border-color: var(--bg-muted); }
.bbs-select:focus-visible {
    border-color: var(--bg-accent);
    outline: 2px solid var(--bg-accent);
    outline-offset: 2px;
}
.bbs-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* A multi-select is a list box, not a dropdown. It has no chevron to draw and
   the padding reserved for one would just be a gap down its right edge. */
.bbs-select[multiple],
.bbs-select[size]:not([size="1"]) {
    background-image: none;
    padding-right: 14px;
}

/* The inline ones in the admin tables are smaller in every other dimension, so
   the chevron and its gutter shrink with them. */
.bg-inline-select {
    padding-right: 30px;
    background-position: right 10px center;
    background-size: 10px 7px;
}

/* The open list, where a browser lets us near it. Firefox and Chrome both
   honour these; Safari ignores them and shows the platform menu, which is a
   perfectly good outcome and the reason none of this is load-bearing. */
.bbs-select option {
    background: var(--bg-card);
    color: var(--bg-ink);
}
.bbs-select option:checked { font-weight: 600; }

/* A disabled dropdown drops the chevron: there is nothing to open, and an arrow
   inviting a click that does nothing is worse than no arrow.

   LAST, and qualified, because of specificity rather than taste. The two theme
   rules above are `:root[data-theme="dark"] .bbs-select` and
   `:root:not([data-theme="light"]) .bbs-select` — both (0,3,0) — so a plain
   `.bbs-select:disabled` at (0,2,0) loses to them and the chevron came back in
   dark while disappearing correctly in light. Exactly the kind of asymmetry
   that only shows up if you look at both themes. */
:root[data-theme] .bbs-select:disabled,
:root .bbs-select:disabled { background-image: none; }


/* ------------------------------------------------------- the open menu ---
   The list the operating system used to draw, in the shape of the supplied
   design: a card, a filter box on top, and the current value called out in the
   accent colour on a tinted row rather than reversed out of a solid block.

   The accent is BUGgy's red, not the reference's blue. The shape was the ask,
   and a second brand colour turning up inside one control would be its own bug.

   The native <select> is still underneath and still holds the value - see
   public/logic/buggy/select.js. If that script never runs these rules apply to
   nothing, and the native control is what you get, styled as it was. */
.bg-select { position: relative; }

/* The button IS a .bbs-select, so it already has the border, radius, padding
   and chevron. Only what a button does not inherit from an input. */
.bg-select__button {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.bg-select__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* The current value in the accent, as in the design. It is the one piece of
       information the closed control carries. */
    color: var(--bg-accent-ink);
    font-weight: 600;
}
.bg-select__button[aria-expanded="true"] { border-color: var(--bg-accent); }

/* Hidden from sight, from the tab order and from the accessibility tree - but
   NOT display:none'd out of the form. It still submits, and it is still what
   every existing listener is attached to. */
.bg-select__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- the card ---- */
/* FIXED, not absolute, and parented to <body> while it is open.

   Absolute positioning made this a child of the control, which put it inside
   .bbs-table-wrap on every admin table. That wrapper is `overflow-x: auto` so a
   wide table scrolls sideways - and CSS will not let a box scroll on one axis
   and overflow on the other, so overflow-y became `auto` as well and clipped
   the open menu. On the last row of the People table the options were cut off
   mid-list. select.js sets top/left/min-width; see place() there for why the
   percentages that used to be here could not survive the move. */
.bg-select__pop {
    position: fixed;
    z-index: 40;
    top: 0;
    left: 0;
    /* Wider than the button when the options need it, which is most of the
       reason a native select truncates things people are trying to read. */
    width: max-content;
    max-width: min(420px, 88vw);
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--bg-line-solid);
    border-radius: var(--bg-radius-lg);
    /* The one place in this design with a shadow. A menu floats over the page
       and has to read as being in front of it; a 2px rule does not say that
       when the thing behind it is also ruled. */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}
/* Kept as a hook for anything that wants to know which way the menu opened.
   The geometry is no longer here: `bottom: calc(100% + 6px)` measured against
   the control it used to hang off, and there is no such box now that it is
   positioned against the viewport. place() computes the top for both
   directions. */
.bg-select__pop--up { /* direction marker only */ }

/* ---- the filter ---- */
.bg-select__filter {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin: 0 0 8px;
    font-family: inherit;
    font-size: 15px;
    color: var(--bg-ink);
    background: var(--bg-ground);
    border: var(--bg-rule) solid var(--bg-accent-edge);
    border-radius: var(--bg-radius);
}
.bg-select__filter::placeholder { color: var(--bg-faint); }
.bg-select__filter:focus {
    outline: none;
    border-color: var(--bg-accent);
}

/* ---- the options ---- */
.bg-select__list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
}
.bg-select__option {
    padding: 9px 12px;
    border-radius: var(--bg-radius);
    font-size: 15px;
    line-height: 1.35;
    color: var(--bg-body-text);
    cursor: pointer;
    overflow-wrap: anywhere;
}

/* The current value: accent, semibold, tinted row. Not a solid fill - that is
   what the keyboard highlight is for, and one control cannot use the same
   treatment for "this is chosen" and "this is where you are". */
.bg-select__option[aria-selected="true"] {
    color: var(--bg-accent-ink);
    font-weight: 700;
    background: var(--bg-accent-wash);
}

/* Where the keyboard is. Deliberately quieter than the selected row so the two
   can appear at once and still be told apart. */
.bg-select__option.is-active { background: var(--bg-panel); }
.bg-select__option[aria-selected="true"].is-active {
    background: var(--bg-accent-wash);
    box-shadow: inset 0 0 0 var(--bg-rule) var(--bg-accent-edge);
}

.bg-select__option[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    background: none;
}

.bg-select__empty {
    margin: 0;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--bg-faint);
}

/* The inline ones in the admin tables are smaller in every other dimension. */
.bg-inline-select.bg-select__button { font-size: var(--fs-small); }

/* The status colour table. Four columns, all fixed: the preview column holds a
   pill whose width depends on the status name, and letting it size itself
   squeezed the picker into the gutter. */
#panel-colours .bg-table th:nth-child(1) { width: 220px; }
#panel-colours .bg-table th:nth-child(2) { width: 190px; }
#panel-colours .bg-table th:nth-child(3) { width: 230px; }
#panel-colours .bg-table th:nth-child(4) { width: 230px; }
#panel-colours .bg-table th:nth-child(5) { width: 200px; }
#panel-colours .bg-table { min-width: 1070px; }