:root {
    --primary: #c60000;
    --primary-dark: #9e0000;
    --bg: #f5f6f8;
    --card: #ffffff;
    --text: #23272f;
    --muted: #6b7280;
    --border: #e2e5ea;
    --radius: 10px;
    --sidebar-w: 232px;
}

* { box-sizing: border-box; }

/* `hidden` means hidden, whatever else the element is.
   The browser's own rule for it is display:none, but any stylesheet rule that
   sets display beats it — so `.filters { display: flex }` quietly kept the
   Claims search form on screen after the script had hidden it, leaving two
   search boxes over one list and no way to tell which one was live. The bug is
   invisible to JavaScript, which sees element.hidden === true and is satisfied,
   so it is fixed once here rather than element by element as each is found. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
}

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

/* --- Sidebar navigation ------------------------------------------------- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: #1d2330;
    color: #cdd3de;
    display: flex;
    flex-direction: column;
    padding: 18px 0 14px;
    overflow-y: auto;
    z-index: 40;
}
.brand {
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    padding: 0 20px 18px;
    display: block;
}
.brand:hover { text-decoration: none; }

.nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 7px;
    color: #cdd3de;
    font-size: 14.5px;
    border-left: 3px solid transparent;
}
.nav-item:hover { background: #262d3d; color: #fff; text-decoration: none; }
.nav-icon { width: 18px; text-align: center; opacity: .75; font-size: 15px; }

/* The page you are on */
.nav-item.is-active {
    background: #2d3547;
    color: #fff;
    font-weight: 600;
    border-left-color: var(--primary);
}
.nav-item.is-active .nav-icon { opacity: 1; color: var(--primary); }

.nav-group {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #7b8598;
    padding: 16px 15px 6px;
}

.sidebar-user {
    margin-top: auto;
    padding: 14px 20px 0;
    border-top: 1px solid #2b3243;
    font-size: 14px;
}
.sidebar-user-name { color: #fff; font-weight: 600; }
.sidebar-user-role { color: #8a93a5; font-size: 12px; margin-bottom: 10px; }
.sidebar-user .btn { margin-top: 0; }

.sidebar-toggle { display: none; }
.sidebar-scrim { display: none; }

.container { max-width: 1100px; margin: 28px auto; padding: 0 20px; }
body.has-sidebar .container { margin-left: var(--sidebar-w); margin-right: 0; max-width: none; padding: 0 28px; }
body.has-sidebar .container > *:first-child { margin-top: 28px; }
body.has-sidebar .footer { margin-left: var(--sidebar-w); }

@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 0 0 30px rgba(0, 0, 0, .3);
    }
    .sidebar.is-open { transform: none; }
    body.has-sidebar .container,
    body.has-sidebar .footer { margin-left: 0; }
    body.has-sidebar .container { padding: 0 16px; }
    body.has-sidebar .container > *:first-child { margin-top: 64px; }

    .sidebar-toggle {
        display: flex;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 50;
        width: 40px;
        height: 40px;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 0 9px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
    }
    .sidebar-toggle span { display: block; height: 2px; background: var(--text); border-radius: 2px; }
    .sidebar-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .sidebar-toggle.is-open span:nth-child(2) { opacity: 0; }
    .sidebar-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .sidebar-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 35;
    }
    .sidebar-scrim[hidden] { display: none; }
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 20px;
}
.card h1, .card h2 { margin-top: 0; }

.auth-card { max-width: 420px; margin: 60px auto; }
.auth-card h1 { font-size: 22px; }

label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 4px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=number], select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
}
input:focus, select:focus { outline: 2px solid #f3b6b6; border-color: var(--primary); }

.password-field { position: relative; }
.password-field input[type=text],
.password-field input[type=password] { padding-right: 40px; }
.pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--muted);
}
.pw-toggle:hover { color: var(--text); }
.pw-toggle .icon-eye-off { display: none; }
.pw-toggle.is-visible .icon-eye { display: none; }
.pw-toggle.is-visible .icon-eye-off { display: block; }

.btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; }
.btn-small { padding: 5px 10px; font-size: 12px; margin: 0; }
.btn-secondary { background: #475069; }
.btn-secondary:hover { background: #333a4e; }

.alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.alert-success { background: #e6f6ea; color: #14652c; border: 1px solid #b8e4c4; }
.alert-error { background: #fdeaea; color: #8f1414; border: 1px solid #f2bcbc; }
.alert-info { background: #e8f0fd; color: #1b4c9c; border: 1px solid #bed3f5; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
tr:hover td { background: #fafbfc; }
.table-wrap { overflow-x: auto; }

.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #eef0f4;
    color: #444c5c;
}
.badge-green { background: #e6f6ea; color: #14652c; }
.badge-red { background: #fdeaea; color: #8f1414; }
a.badge { text-decoration: none; }

/* Claims that could not be traced back to a BD rep — these need a phone call. */
tr.row-danger > td { background: #fdf3f3; }
tr.row-danger > td:first-child { box-shadow: inset 3px 0 0 #c0392b; }

.filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.filters .field { min-width: 150px; flex: 1; }
.filters label { margin-top: 0; }
.filters .btn { margin-top: 0; }

/* Reports filter bar.
   The period stepper sizes to its own content (flex-basis auto, no shrink):
   as a normal flex field it was squeezed below the width of the two arrows
   plus the date, and the "next" arrow overflowed onto the Show dropdown. */
.filters .field-period { max-width: 190px; }
.filters .field-show { max-width: 200px; }
.filters .field-statuses { max-width: 230px; }
.filters .field-nav { flex: 0 0 auto; min-width: 0; }

/* Stands in for the missing <label> so the arrows line up with the dropdowns. */
.field-spacer { display: block; font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.field-spacer::after { content: "\00a0"; }

/* One control rather than two loose buttons: same height, border and radius as
   the dropdowns beside it, so the row reads as a single line of inputs. */
.period-nav {
    display: flex;
    align-items: stretch;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.period-nav .btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--muted);
    font-size: 15px;
}
.period-nav .btn:hover:not(:disabled) { background: #f1f3f6; color: var(--text); }
.period-nav .btn:disabled { opacity: .35; cursor: not-allowed; background: none; }
.period-nav strong {
    align-self: center;    /* centred against the arrows, like the select text */
    flex: 1 1 auto;
    min-width: 158px;      /* fits "Jul 19 – Aug 1, 2026" without wrapping */
    padding: 0 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

/* Narrow screens: one control per row, each full width, so nothing has to be
   squeezed. The period stepper spreads its arrows to the edges. */
@media (max-width: 640px) {
    .filters { gap: 12px; }
    .filters .field,
    .filters .field-period,
    .filters .field-show,
    .filters .field-statuses,
    .filters .field-nav { flex: 1 1 100%; max-width: none; }
    .period-nav strong { min-width: 0; }
    .filters > .btn { width: 100%; }
    .field-nav .field-spacer { display: none; }
    .status-pick-menu { min-width: 0; width: 100%; }
}

/* Access controls: same block on the invite form and inside each user row. */
.perm-fields { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 12px 0; }
.perm-fields .field { min-width: 160px; flex: 1; }
.perm-fields label { margin-top: 0; }
.perm-fields select { width: 100%; }
.perm-fields select:disabled, .perm-fields input:disabled { opacity: .55; cursor: not-allowed; }
.perm-fields select.is-muted { opacity: .55; }
.perm-checks { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 0; }
.perm-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; margin: 0; }
.perm-check input { width: auto; margin: 0; }
.perm-edit > summary { cursor: pointer; font-size: 13px; color: var(--primary); margin-top: 4px; }
.perm-edit[open] { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; margin-top: 6px; }

.pagination { display: flex; gap: 8px; margin-top: 18px; align-items: center; font-size: 14px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.stat .num { font-size: 26px; font-weight: 700; }
.stat .lbl { font-size: 13px; color: var(--muted); }

.kv { display: grid; grid-template-columns: 180px 1fr; row-gap: 8px; font-size: 14px; }
.kv dt { font-weight: 600; color: var(--muted); }
.kv dd { margin: 0; }

.footer { text-align: center; color: var(--muted); font-size: 13px; padding: 30px 0 40px; }

/* JS-driven views */
.busy { opacity: .45; pointer-events: none; transition: opacity .15s; }
.cache-note { font-size: 12px; color: var(--muted); margin-left: 10px; }
.spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { color: var(--muted); padding: 24px 0; text-align: center; }
.filter-hint { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.results-bar { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
input[type=search] { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; background: #fff; }
input[type=search]:focus { outline: 2px solid #f3b6b6; border-color: var(--primary); }
input[type=file] { width: 100%; padding: 7px 9px; border: 1px dashed var(--border); border-radius: 6px; font-size: 13px; background: #fff; }

/* The instant filter above a table (assets/table-filter.js). Injected by
   script, so it is never on the page without something to drive it. The counter
   sits directly under the box because it is the part that has to be believed:
   it says what the box is looking at, not just what it found. */
.table-filter { margin: 0 0 12px; }
.table-filter-label { margin: 0 0 4px; }
.table-filter-row { display: flex; gap: 8px; align-items: center; max-width: 460px; }
.table-filter-input { flex: 1; min-width: 0; }
.table-filter-clear {
    flex: 0 0 auto;
    align-self: stretch;   /* match the input's height rather than its font's */
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.table-filter-clear:hover { color: var(--text); border-color: var(--muted); }
.table-filter-count { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.table-filter-count.is-empty { color: var(--primary); font-weight: 600; }
.table-filter-empty td { color: var(--muted); font-style: italic; }

/* Reports: dropdown for choosing which lead-status columns to show */
.status-pick { position: relative; }
.status-pick summary {
    list-style: none;
    cursor: pointer;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}
.status-pick summary::-webkit-details-marker { display: none; }
.status-pick[open] summary { outline: 2px solid #f3b6b6; border-color: var(--primary); }
.status-pick-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    min-width: 250px;
    max-height: 300px;
    overflow: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
    padding: 6px;
}
.status-pick-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 4px;
    font-weight: 400;
    font-size: 14px;
    color: inherit;
    cursor: pointer;
}
.status-pick-menu label:hover { background: #f6f7f9; }
.status-pick-menu input[type=checkbox] { margin: 0; width: auto; }
.status-pick-menu .status-abbr { color: var(--muted); font-size: 12px; margin-left: auto; padding-left: 12px; }

/* Searchable rep picker (Claims → unmatched inspector names).
   A combobox rather than a <select>: the roster runs to hundreds of people, so
   the list has to be filterable on any part of a name, not just its first
   letters, and the scored suggestions have to sit above it. */
/* Centred, not top-aligned: the Link button is shorter than the search box and
   would otherwise sit against its top edge instead of on its midline. */
.picker-form { display: flex; gap: 8px; align-items: center; }
/* min-width keeps the box usable in a narrow table cell: without it the column
   compresses to ~100px and both the search field and the names in the menu are
   unreadable. The table-wrap scrolls sideways instead, as it does elsewhere. */
.picker { position: relative; flex: 1 1 auto; min-width: 240px; max-width: 320px; }
.picker-search { width: 100%; margin: 0; }
/* A confirmed choice reads as settled rather than as a search box mid-edit. */
.picker.is-picked .picker-search { border-color: #9bbf9b; background: #f6fbf6; font-weight: 600; }

/* Fixed, not absolute, and positioned from JS. The table scrolls horizontally,
   which makes its wrapper a clipping box vertically too, and the menu on the
   last row lost its bottom third to it. */
.picker-menu {
    position: fixed;
    z-index: 30;
    max-height: 320px;
    overflow-y: auto;
    /* Reaching the end of the list must not hand the wheel to the page, which
       scrolls the menu's anchor away and closes it mid-read. */
    overscroll-behavior: contain;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 24, 33, .14);
    padding: 4px;
}
.picker-group {
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}
.picker-option {
    display: block;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 5px;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.picker-option:hover, .picker-option.is-cursor { background: #f1f3f6; }
.picker-title { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.picker-sub { display: block; font-size: 12px; color: var(--muted); }
.picker-score {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: #e8f3e8;
    color: #2f6b34;
    font-size: 11px;
    font-weight: 700;
}
.picker-flag {
    padding: 1px 6px;
    border-radius: 999px;
    background: #eef0f4;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}
.picker-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }
.picker-more {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    border: 0;
    border-top: 1px solid var(--border);
    background: none;
    text-align: left;
    font: inherit;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
}
.picker-more:hover { color: var(--text); background: #f6f7f9; }

@media (max-width: 640px) {
    .picker-form { flex-wrap: wrap; align-items: stretch; }
    .picker { max-width: none; flex-basis: 100%; }
    .picker-form .btn { align-self: flex-start; }
}

/* Provenance line: which workbook, tab and row a claim was read from, so a
   matching decision can be checked against the source before it is made. */
.source-ref {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Claim matching: the picker cell carries two forms — find the lead (normal
   route) and credit a rep directly (escape hatch), the second hidden until
   asked for. */
.assign-form { align-items: flex-start; flex-wrap: wrap; }
.assign-note { margin: 6px 0 0; }
.remember-box { display: flex; align-items: center; gap: 4px; margin: 0; white-space: nowrap; }
.remember-box input[type=checkbox] { width: auto; margin: 0; }
.rep-fallback { margin-top: 8px; }
.linkish {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
}
/* The rep is the decision being made, so it reads as the strongest thing in a
   lead option after the homeowner's own name. */
.picker-rep { color: var(--text); font-weight: 600; }
.lead-picker { max-width: 360px; }
.lead-picker .picker-menu { max-height: 360px; }

/* What the state and lead-source filters will do to a sheet, sat directly under
   the Import button so the count on the button can be read against the reason
   for it rather than discovered afterwards. */
.scan-panel {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent, #2f6b34);
    border-radius: 8px;
    background: #f8f9fb;
}
.scan-panel p { margin: 0 0 6px; }
.scan-panel p:last-child { margin-bottom: 0; }

/* An alert that offers to reverse what it is reporting. The button sits on the
   message's own line so the alert keeps its shape. */
.alert-undo { display: inline; margin-left: 10px; }
.alert-undo .btn { vertical-align: baseline; }

/* Row numbers. The list is checked against a number quoted somewhere else — a
   report total, a count in the matching queue — and counting rows by eye is
   exactly the step that made a wrong number believable for weeks. Narrow,
   tabular and muted, so it stays a ruler rather than a column of data. */
.col-num {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
}

/* The period control on Claims and Claim matching. Same shape as the one on
   Reports, but server-rendered — the arrows are links, so every period has its
   own URL and the page works without JavaScript. */
.period-filter { margin-bottom: 12px; }
.period-nav a.btn { text-decoration: none; }

/* ── Printable views (claims-print.php) ───────────────────────────────────
   A document, not an application screen: no sidebar, no forms, no colour that
   costs toner. The on-screen version keeps the app's typography so it doesn't
   look broken before it is printed. */
.print-page {
    background: #fff;
    color: #111;
    margin: 0;
    padding: 24px 28px 40px;
    max-width: 1100px;
}
.print-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.print-head { margin-bottom: 14px; }
.print-head h1 { margin: 0 0 4px; font-size: 22px; }
.print-head p { margin: 0 0 2px; font-size: 13px; }
.print-summary {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent, #2f6b34);
    border-radius: 6px;
    font-size: 13px;
}
.print-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.print-table th,
.print-table td {
    border: 1px solid #d8dbe0;
    padding: 5px 7px;
    text-align: left;
    vertical-align: top;
}
.print-table thead th { background: #f2f4f7; font-weight: 700; }
.print-table tbody tr:nth-child(even) { background: #fafbfc; }
.print-table .print-total td { font-weight: 700; background: #f2f4f7; }
.print-source { color: var(--muted); font-size: 11.5px; }
.print-foot {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--muted);
}

@media print {
    /* Anything that exists to be clicked has no meaning on paper. */
    .print-bar,
    .sidebar,
    .sidebar-toggle,
    .sidebar-scrim,
    .footer { display: none !important; }
    .print-page { padding: 0; max-width: none; }
    .print-table { font-size: 10.5px; }
    .print-table thead th,
    .print-table .print-total td { background: #eee !important; -webkit-print-color-adjust: exact; }
    .print-table tbody tr:nth-child(even) { background: none; }
    /* Repeat the header on every sheet, and never split a row across two. */
    .print-table thead { display: table-header-group; }
    .print-table tr { page-break-inside: avoid; }
    a { text-decoration: none; color: inherit; }
    @page { margin: 12mm; }
}

/* The match filter on Claims: matched / needs check / unmatched, as counted
   chips you click. They carry their own numbers because a filter whose counts
   come from somewhere else is how a page ends up stating a total it cannot show
   you the rows for. */
.bucket-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 6px;
}
.bucket-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 2px;
    /* A floor, not a width: Claims stacks two of these bars, and chips that
       start at different x-positions read as two unrelated controls rather than
       two filters over the same list. Longer labels elsewhere are unaffected. */
    min-width: 66px;
}
.bucket {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}
.bucket strong { font-variant-numeric: tabular-nums; }
.bucket:hover { background: #f4f6f8; border-color: #c3c8d0; }
/* The chosen one is filled, not merely outlined: on a page with this many
   controls, a border-colour change is not a state anybody notices. */
.bucket.is-on {
    background: var(--text);
    border-color: var(--text);
    color: #fff;
}
.bucket.is-on:hover { background: var(--text); }
.bucket.badge-green { border-color: #b7ddbc; background: #f2faf3; color: #1f6b2a; }
.bucket.badge-green:hover { background: #e6f5e9; }
.bucket.badge-green.is-on { background: #1f6b2a; border-color: #1f6b2a; color: #fff; }
.bucket.badge-red { border-color: #efc0c0; background: #fdf5f5; color: #a33131; }
.bucket.badge-red:hover { background: #fbeaea; }
.bucket.badge-red.is-on { background: #a33131; border-color: #a33131; color: #fff; }

/* While the instant filter is narrowing the table, the chips are counting the
   search rather than the period. Marked, so a number read off the screen and
   quoted elsewhere carries the qualification it was shown with. */
.bucket-bar.is-live { border-left: 3px solid var(--primary); padding-left: 9px; }
.bucket-bar.is-live .bucket strong { color: var(--primary); }
.bucket-bar.is-live .bucket.is-on strong { color: inherit; }

@media (max-width: 640px) {
    .bucket-bar { gap: 6px; }
    .bucket { padding: 5px 9px; font-size: 12.5px; }
}