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

:root {
    --black: #181818;
    --grey: #939598;
    --grey-light: #E5E5E5;
    --grey-rule: #EBEBEB;
    --white: #FFFFFF;
    --blue: #21409A;
    --blue-dark: #0A162E;
    --bg: #FAFAFA;
    --green: #ACD253;
    --teal: #59B0C4;
    --orange: #FBAB18;
    --pink: #BB1D5E;
    --f-head: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --f-body: 'Helvetica Neue', 'Arial', sans-serif;

    /* ── THE TWO DASHBOARD SERIES ──
       Registrations and claims each carry four shades: the line and bar
       colour, a second stop for the bar's gradient, a darker ink for the
       figure printed beside the bar (amber needs it to stay legible on white)
       and a brighter one for the chart's dark tooltip.

       Swapping which series is blue and which is amber is swapping the two
       blocks below and nothing else - no other rule in this stylesheet names
       these colours. */
    /* Registrations: the house blue. */
    --reg: #21409A;
    --reg-2: #3854A4;
    --reg-ink: #21409A;
    --reg-bright: #8FA6E8;

    /* Claims: amber. */
    --claim: #E08A00;
    --claim-2: #F0A838;
    --claim-ink: #B86E00;
    --claim-bright: #F6C76B;
}

html { font-size: 15px; }

body {
    font-family: var(--f-body);
    color: var(--black);
    background: var(--bg);
    line-height: 1.6;
}

/* ── HEADER ── */
.site-header {
    background: var(--blue-dark);
    padding: 20px 0;
}

.site-header .header-inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── BRAND LOCKUP ──
   Symbol and wordmark share a baseline, matching assets/img/aag-logo-white.png.
   Everything is derived from --logo-size (the symbol's height) using the
   proportions measured from that file, so any new usage stays correct:
     wordmark height   0.591 x symbol
     gap between them  0.303 x symbol
     wordmark lift     0.023 x symbol
   The lift exists because the symbol ends in circles, which overshoot the
   baseline slightly so they read as sitting on it - bottom-aligning the two
   boxes without it would drop the wordmark fractionally too low. */
.brand-lockup {
    --logo-size: 26px;
    display: flex;
    align-items: flex-end;
    gap: calc(var(--logo-size) * 0.303);
}

.brand-lockup .logo-icon {
    height: var(--logo-size);
    width: auto;
}

.brand-lockup .logo-wordmark {
    height: calc(var(--logo-size) * 0.591);
    width: auto;
    margin-bottom: calc(var(--logo-size) * 0.023);
}

.site-header .brand-lockup {
    --logo-size: 30px;
}

.site-header .logo-icon,
.site-header .logo-wordmark {
    filter: brightness(0) invert(1);
}

.site-header .header-user {
    margin-left: auto;
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}

.site-header .header-user a {
    color: #fff;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

.campaign-banner {
    display: block;
    width: calc(100% + 80px);
    max-width: calc(100% + 80px);
    height: auto;
    max-height: 280px;
    object-fit: cover;
    margin: -40px -40px 28px;
}

.campaign-intro {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 16px;
}

/* ── MAINTENANCE ── */
.maintenance-page {
    text-align: center;
    max-width: 520px;
    padding-top: 48px;
    padding-bottom: 48px;
}

.maintenance-mark {
    font-size: 40px;
    line-height: 1;
    color: var(--grey);
    margin-bottom: 18px;
}

.maintenance-page h1 {
    font-size: 24px;
    margin-bottom: 14px;
}

.maintenance-page p {
    color: #444;
    line-height: 1.7;
}

/* Sits in the admin sidebar, so it is on every admin page while the tool is
   off the air and can never be forgotten about. */
.maintenance-band {
    margin: 0 16px 8px;
    padding: 12px 14px;
    background: var(--pink);
    color: #fff;
    font-size: 11px;
    line-height: 1.6;
}

.maintenance-band strong {
    display: block;
    font-family: var(--f-head);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.admin-sidebar .maintenance-band a {
    color: #fff;
    text-decoration: underline;
}

/* ── VIEWING AS ANOTHER ROLE ──
   A super admin looking at the interface through another role's eyes. Sits
   directly under the "View as" picker at the foot of the sidebar rather than
   up at the top with the maintenance band: the two are one control, and that
   corner is where the eye goes to ask which role is in force. Campaign amber
   rather than maintenance pink, because nothing is wrong, and dark text,
   because the band carries a button and amber needs the contrast. */
.view-as-band {
    flex-shrink: 0;
    padding: 12px 24px;
    background: var(--orange);
    color: var(--black);
    font-size: 11px;
    line-height: 1.5;
}

.view-as-band strong {
    display: block;
    font-family: var(--f-head);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.view-as-band form {
    margin-top: 8px;
}

.view-as-band button {
    width: 100%;
    /* Same reset as the picker above: the 8px gap comes from the form, not
       from the button's own margin. */
    margin: 0;
    height: 28px;
    padding: 0 10px;
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--black);
    border: none;
    cursor: pointer;
}

.view-as-band button:hover {
    background: var(--blue);
}

/* The picker itself, above the sidebar footer. Shown to a real super admin on
   every page so the comparison is one step away from whatever they are
   looking at; a select plus a button rather than a link per role, which would
   be four more items in an already long sidebar. */
.admin-sidebar .sb-view-as {
    flex-shrink: 0;
    padding: 12px 24px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.admin-sidebar .sb-view-as label {
    display: block;
    font-family: var(--f-head);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
    margin-bottom: 6px;
}

.sb-view-as-row {
    display: flex;
    gap: 6px;
}

/* appearance:none and an explicit line-height are what keep this the height
   of its text: left to itself a select takes the platform's own control
   height, which next to an 11px label is far taller than it needs to be. The
   arrow is then drawn back on as a background image, since removing the
   appearance removes that too. */
.admin-sidebar .sb-view-as select {
    flex: 1;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    height: 28px;
    padding: 0 22px 0 8px;
    font-family: var(--f-body);
    font-size: 11px;
    line-height: 28px;
    color: #fff;
    background-color: rgba(255, 255, 255, .08);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23ffffff' fill-opacity='.55'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 0;
}

/* The options themselves are drawn by the operating system, which does not
   inherit the dark background - so they are set light explicitly, or the
   white text lands on a white list. */
.admin-sidebar .sb-view-as select option {
    color: var(--black);
    background: #fff;
}

.admin-sidebar .sb-view-as button {
    flex-shrink: 0;
    /* `button, .btn` gives every button a 24px top margin, which is right in a
       form - the button sits below the last field - and wrong here, where it
       stands beside the select. Without this reset the row is 52px tall and
       the button hangs 24px below the select it belongs to. */
    margin: 0;
    /* Matches the select exactly, so the two read as one control. */
    height: 28px;
    padding: 0 10px;
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .14);
    cursor: pointer;
}

.admin-sidebar .sb-view-as button:hover {
    background: var(--blue);
    border-color: var(--blue);
}

/* ── SLIDE IMAGE ──
   The preview scales to whatever width the page gives it; the PNG is built
   from the SVG at a fixed 3200x1800 regardless of what is on screen. */
.slide-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.slide-actions .btn {
    margin-top: 0;
}

/* Each slide gets its own heading, download button and preview. */
.slide-block {
    margin-bottom: 28px;
}

.slide-block .slide-actions {
    margin-bottom: 10px;
}

.slide-preview {
    border: 1px solid var(--grey-rule);
    background: var(--white);
    padding: 10px;
    max-width: 1100px;
}

.slide-preview svg {
    display: block;
    width: 100%;
    height: auto;
}

/* The refusal page when something is posted while viewing as another role. */
.simulation-stop {
    max-width: 560px;
    margin: 0 auto;
    padding: 80px 24px;
    text-align: center;
}

.simulation-stop h1 {
    margin-bottom: 16px;
}

.simulation-stop-form {
    margin-top: 28px;
}

/* The campaign's own note to participants - set per campaign, so it is given
   its own block rather than being mistaken for the tool's standard wording. */
.campaign-note {
    margin: 0 0 20px;
    padding: 14px 16px;
    background: var(--white);
    border: 1px solid var(--grey-rule);
    /* --blue is the campaign's own key colour on its public pages. */
    border-left: 3px solid var(--blue);
    font-size: 14px;
    line-height: 1.7;
    color: var(--black);
}

.landing-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.landing-actions .btn {
    min-width: 140px;
    text-align: center;
}

.btn.btn-outline,
.container a.btn.btn-outline {
    background: transparent;
    color: var(--link, var(--blue));
    border: 1px solid var(--blue);
}

.btn.btn-outline:hover,
.container a.btn.btn-outline:hover {
    background: var(--blue);
    color: var(--btn-text, #FFFFFF);
}

.error-page {
    text-align: left;
}

.error-page h1 {
    font-size: 26px;
}

.participant-note {
    background: #F6F8FC;
    border-left: 3px solid var(--blue);
    padding: 16px 20px;
    margin-bottom: 28px;
}

.participant-note-label {
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 6px;
}

.participant-note p {
    margin: 0;
    color: var(--black);
}

.note-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: #F6F8FC;
    border: 1px solid var(--grey-rule);
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--blue);
    white-space: nowrap;
}

.note-flag svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* ── PARTICIPANT CLAIM LIST ──
   Each claim is one tappable card: date on top, status (and note) below,
   "View" on the right. Tags wrap onto a new line rather than squeezing. */
.claim-list {
    list-style: none;
    margin: 12px 0 0;
    border: 1px solid var(--grey-rule);
}

.claim-list li + li {
    border-top: 1px solid var(--grey-rule);
}

.container a.claim-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    min-height: 64px;
    color: var(--black);
    text-decoration: none;
    transition: background .1s;
}

.container a.claim-row:hover,
.container a.claim-row:focus-visible {
    background: #F6F8FC;
}

.claim-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.claim-row-date {
    font-family: var(--f-head);
    font-size: 14px;
    font-weight: 600;
}

.claim-row-time {
    font-weight: 400;
    color: var(--grey);
    margin-left: 4px;
}

.claim-row-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.claim-row-go {
    flex-shrink: 0;
    font-family: var(--f-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--link, var(--blue));
}

.pt-userbar {
    text-align: right;
    font-size: 12px;
    color: var(--grey);
    margin-bottom: 12px;
}

/* ── PARTICIPANT DASHBOARD ── */
.pt-dash {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.pt-donut-wrap {
    width: 200px;
    flex-shrink: 0;
}

.pt-donut {
    width: 100%;
    height: auto;
    display: block;
}

.pt-donut-total {
    font-family: var(--f-head);
    font-size: 34px;
    font-weight: 700;
    fill: var(--black);
    text-anchor: middle;
}

.pt-donut-caption {
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    fill: var(--grey);
    text-anchor: middle;
}

.pt-donut-empty {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 22px solid #F0F1F4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--f-head);
    font-size: 11px;
    color: var(--grey);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.pt-donut-total-empty {
    font-size: 30px;
    font-weight: 700;
    color: var(--black);
}

.pt-legend {
    flex: 1;
    min-width: 220px;
}

.pt-legend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--grey-rule);
    font-size: 14px;
}

.pt-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.pt-legend-name {
    flex: 1;
}

.pt-legend-count {
    font-family: var(--f-head);
    font-weight: 700;
}

/* ── POWERED-BY FOOTER (public pages) ── */
.powered-footer {
    background: #2E4599;
    color: rgba(255, 255, 255, .85);
    margin-top: 48px;
    font-size: 12px;
    line-height: 1.6;
}

.powered-footer .pf-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pf-terms {
    margin-right: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .45);
}

.powered-footer a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 500;
}

.powered-footer a:hover {
    text-decoration: underline;
}

/* Public pages fill the viewport so the footer sits at the bottom. */
body.public-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.public-page .container {
    width: 100%;
}

body.public-page .powered-footer {
    margin-top: auto;
}

.container a {
    color: var(--link, var(--blue));
}

/* Buttons rendered as <a> must keep their button text colour, not the
   link colour (higher specificity than .container a). */
.container a.btn {
    color: var(--btn-text, #FFFFFF);
}

/* ── PAGE / CARD LAYOUT ── */
.page {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 24px;
}

.container {
    max-width: 640px;
    margin: 40px auto;
    background: var(--white);
    padding: 40px;
    border: 1px solid var(--grey-rule);
}

.eyebrow {
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 10px;
}

h1 {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.15;
    color: var(--black);
    margin: 0 0 16px;
}

h2 {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 18px;
    color: var(--black);
    margin: 0 0 12px;
}

p {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 12px;
}

/* ── FORMS ── */
label {
    display: block;
    font-family: var(--f-head);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--grey);
    margin: 20px 0 6px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
select,
textarea,
input[type="file"] {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--grey-rule);
    border-radius: 0;
    background: var(--white);
    font-family: var(--f-body);
    font-size: 14px;
    color: var(--black);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--blue);
}

button, .btn {
    display: inline-block;
    margin-top: 24px;
    padding: 13px 28px;
    background: var(--blue);
    color: var(--btn-text, #FFFFFF);
    border: none;
    font-family: var(--f-head);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}

button:hover, .btn:hover {
    background: var(--blue-dark);
}

button.btn-reject, .btn-reject {
    background: var(--pink);
}

button.btn-accept, .btn-accept {
    background: var(--green);
    color: var(--black);
}

.errors {
    background: #FBE9EE;
    border-left: 3px solid var(--pink);
    color: #8A1442;
    padding: 14px 18px;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.errors.success {
    background: #F1F8E5;
    border-left-color: var(--green);
    color: #4F6B1C;
}

.errors ul {
    margin: 0;
    padding-left: 20px;
}

.help-text {
    font-size: 12px;
    color: var(--grey);
    margin-top: 6px;
}

/* ── THANK YOU ── */
.thank-you {
    text-align: center;
    padding: 64px 40px;
}

.thank-you h1 {
    font-size: 32px;
}

.thank-you .checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--green);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    margin: 0 auto 24px;
}

/* ── FOOTER ── */
.site-footer {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px;
    text-align: center;
    font-size: 11px;
    color: var(--grey);
}

/* ── TABLES (admin) ── */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    font-size: 13px;
    border: 1px solid var(--grey-rule);
    box-shadow: 0 1px 3px rgba(10, 22, 46, .05);
}

table tbody tr {
    transition: background .1s;
}

table tbody tr:hover {
    background: #F6F8FC;
}

table th, table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--grey-rule);
    text-align: left;
}

table th {
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--grey);
    background: var(--bg);
}

table tr:last-child td {
    border-bottom: none;
}

table a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 500;
}

table a:hover {
    text-decoration: underline;
}

/* ── STATUS BADGES ── */
.status {
    display: inline-block;
    padding: 3px 10px;
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.status-submitted { background: #FFF6E0; color: #9A6A00; }
.status-accepted { background: #F1F8E5; color: #5B7A1F; }
.status-rejected { background: #FBE9EE; color: #8A1442; }
.status-duplicate { background: var(--grey-light); color: #5F6368; }

/* ── ADMIN LAYOUT ── */
.admin-layout {
    display: flex;
    min-height: 100vh;
}

/* Pinned to the viewport rather than stretched down the document. The
   sidebar's foot carries the "View as" picker and, while one is running, the
   band that ends it - and on a long page (the dashboard is some 2,000px) a
   stretched sidebar put both of them below the fold, so switching role meant
   scrolling to the bottom of the page first. At 100vh with position:sticky
   they sit at the bottom of the screen on every page instead. */
.admin-sidebar {
    width: 230px;
    flex-shrink: 0;
    background: var(--black);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    /* Without this the flex row stretches the item and sticky has nothing to
       move within. */
    align-self: flex-start;
    height: 100vh;
}

.admin-sidebar .sb-brand {
    --logo-size: 26px;
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.admin-sidebar .sb-brand .logo-icon,
.admin-sidebar .sb-brand .logo-wordmark {
    filter: brightness(0) invert(1);
}

/* The links are the part that gives way when the window is short: the brand
   stays at the top and the picker, band and footer stay at the bottom, so the
   controls never scroll off. min-height:0 is what allows a flex child to
   shrink below its content height - without it the nav refuses to scroll and
   pushes the foot off screen instead. */
.admin-sidebar nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0 16px;
}

.nav-group {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.nav-group:last-child {
    border-bottom: none;
}

.nav-group-label {
    font-family: var(--f-head);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    /* A lighter tint from the brand bluescale - #21409A is too dark to
       read against the near-black sidebar. Left padding matches the link
       text, which sits 3px in behind its active-state border. */
    color: #798CC2;
    padding: 4px 24px 8px 27px;
}

.admin-sidebar nav a {
    display: block;
    padding: 11px 24px;
    font-family: var(--f-head);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.admin-sidebar nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .04);
}

.admin-sidebar nav a.active {
    color: #fff;
    background: rgba(255, 255, 255, .04);
    border-left-color: var(--blue);
}

.admin-sidebar .sb-footer {
    padding: 18px 24px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 11px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .5);
    overflow-wrap: anywhere;
}

.admin-sidebar .sb-footer a {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
}

.admin-sidebar .sb-footer a:hover,
.admin-sidebar .sb-footer a.active {
    color: #fff;
}

.admin-sidebar .sb-footer a.active {
    font-weight: 600;
}

/* Read-only fields on the account page: still legible, clearly not editable. */
input:disabled {
    background: var(--bg);
    color: var(--grey);
    cursor: not-allowed;
}

.admin-main {
    flex: 1;
    min-width: 0;
}

.admin-wrapper {
    max-width: 1100px;
    padding: 40px 40px;
}

/* Pages whose tables carry a lot of columns - the claims list and a
   participant's claims. These are worked through on a desktop, so they take
   every pixel the window offers rather than wrapping each cell onto three
   lines or pushing the actions column off the side. No cap: on a wide monitor
   the extra width goes to the data, which is the point of the page. */
.admin-wrapper.wide {
    max-width: none;
}

/* In those tables a cell keeps to one line and the table scrolls sideways if
   it must, which reads far better than a column of stacked fragments.
   Anything genuinely long (a note) opts back in with class="wrap". */
.table-tidy th,
.table-tidy td {
    white-space: nowrap;
    /* A little tighter than a normal table: with ten or more columns those
       few pixels per cell are what keeps the actions column on screen. */
    padding-left: 11px;
    padding-right: 11px;
}

.table-tidy td.wrap {
    white-space: normal;
    min-width: 220px;
}

.admin-header {
    margin-bottom: 28px;
}

.admin-header h1 {
    margin-bottom: 0;
}

/* ── PROMO SETTINGS ── */
.settings-card {
    background: var(--white);
    border: 1px solid var(--grey-rule);
    padding: 32px;
    max-width: 640px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(10, 22, 46, .05);
}

.settings-card h2 {
    font-size: 15px;
    margin-bottom: 4px;
}

.danger-zone {
    border-color: var(--pink);
}

.danger-zone h2 {
    color: var(--pink);
}

.danger-zone input[type="text"] {
    max-width: 200px;
}

.color-preview {
    margin-top: 16px;
    padding: 18px;
    border: 1px dashed var(--grey-light);
    background: var(--white);
}

.color-preview-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.color-preview .btn {
    cursor: default;
}

.empty-state {
    text-align: center;
    padding: 44px 32px;
}

.empty-state-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px dashed var(--grey-light);
    color: var(--grey);
    font-size: 26px;
    line-height: 44px;
    margin: 0 auto 14px;
}

.empty-state .settings-desc {
    max-width: 420px;
    margin: 0 auto;
}

/* ── INLINE TABLE EDITING (outlets, reps) ── */
.table-scroll {
    overflow-x: auto;
}

.inline-input {
    width: 100%;
    min-width: 110px;
    padding: 6px 8px;
    font-size: 13px;
    border: 1px solid transparent;
    background: transparent;
}

.inline-input:hover,
.inline-input:focus {
    border-color: var(--grey-rule);
    background: var(--white);
}

.inline-input:focus {
    border-color: var(--blue);
    outline: none;
}

.inline-input-sm {
    min-width: 80px;
}

/* A row's actions read as one set of pills, whether each one posts a form
   (Approve, Save, Delete) or is a link (View, Edit). */
.row-actions {
    white-space: nowrap;
}

.row-actions .btn + .btn,
.row-actions .btn + button,
.row-actions button + .btn,
.row-actions button + button {
    margin-left: 4px;
}

table a.btn:hover {
    text-decoration: none;
}

button.btn-tiny,
.btn.btn-tiny {
    margin-top: 0;
    padding: 6px 12px;
    font-size: 10px;
}

.code-chip {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg);
    border: 1px solid var(--grey-rule);
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--black);
}

/* ── FILTER BAR ── */
.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--white);
    border: 1px solid var(--grey-rule);
    padding: 16px 18px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(10, 22, 46, .05);
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-field-grow {
    flex: 1;
    min-width: 220px;
}

.filter-field label {
    margin: 0;
    font-size: 10px;
}

.filter-field input[type="search"],
.filter-field select {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
}

.filter-field select {
    min-width: 140px;
}

.filter-field-check {
    justify-content: flex-end;
    padding-bottom: 8px;
}

.filter-summary {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    font-size: 12px;
    color: var(--grey);
    white-space: nowrap;
}

.link-button {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    font-family: var(--f-body);
    font-size: 12px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--blue);
    text-decoration: underline;
    cursor: pointer;
}

.link-button:hover {
    background: none;
    color: var(--blue-dark);
}

.campaign-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.campaign-toolbar .btn,
.campaign-toolbar button {
    margin-top: 0;
}

.campaign-toolbar .help-text {
    margin-top: 0;
}

/* ── DATA IMPORT ── */
.import-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.import-stat {
    border: 1px solid var(--grey-rule);
    border-top: 3px solid var(--green);
    padding: 14px 16px;
    background: var(--white);
}

.import-stat.warn { border-top-color: var(--orange); }
.import-stat.bad { border-top-color: var(--pink); }

.import-stat-value {
    font-family: var(--f-head);
    font-size: 26px;
    font-weight: 700;
    color: var(--black);
    line-height: 1.1;
}

.import-stat-label {
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--grey);
    margin-top: 5px;
}

.import-preview {
    font-size: 12.5px;
}

.import-preview .status {
    text-transform: capitalize;
}

.import-row-error {
    background: #FDF3F5;
}

.import-row-skip {
    color: var(--grey);
}

.import-error {
    color: #8A1442;
}

.import-change {
    line-height: 1.7;
}

.import-old {
    color: var(--grey);
    text-decoration: line-through;
}

.import-confirm-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--grey-rule);
}

.import-confirm-actions button {
    margin-top: 0;
}

.template-list {
    display: grid;
    gap: 12px;
}

.template-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 0;
    border-bottom: 1px solid var(--grey-rule);
}

.template-item:last-child {
    border-bottom: none;
}

.template-item .help-text {
    margin-top: 3px;
}

.rules-list {
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.7;
    color: #444;
}

.rules-list li {
    margin-bottom: 8px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--f-body);
    font-size: 13px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    color: var(--black);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
}

/* ── USER MANAGER ── */
.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-row .btn {
    margin-top: 0;
}

table.clickable-rows tbody tr {
    cursor: pointer;
}

.you-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: var(--grey-light);
    color: #5F6368;
    font-family: var(--f-head);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.muted {
    color: var(--grey);
}

.assign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 6px 16px;
}

.assign-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--f-body);
    font-size: 13px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    color: var(--black);
    cursor: pointer;
}

.assign-item input[type="checkbox"] {
    width: auto;
}

.assign-type {
    color: var(--grey);
    font-size: 11px;
}

.settings-card .settings-desc {
    font-size: 13px;
    color: var(--grey);
    margin-bottom: 20px;
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--grey-rule);
}

.toggle-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.toggle-row .toggle-label {
    font-family: var(--f-body);
    font-size: 14px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    color: var(--black);
    margin: 0;
}

.toggle-row .toggle-help {
    font-size: 12px;
    color: var(--grey);
    margin-top: 4px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--grey-light);
    transition: .15s;
}

.switch .slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--white);
    transition: .15s;
}

.switch input:checked + .slider {
    background-color: var(--blue);
}

.switch input:checked + .slider::before {
    transform: translateX(20px);
}

.limit-options {
    margin-top: 8px;
    padding-left: 0;
}

.limit-options[hidden] {
    display: none;
}

.radio-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.radio-row label {
    margin: 0;
    font-family: var(--f-body);
    font-size: 13px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 8px;
}

.radio-row input[type="number"] {
    width: 90px;
    display: inline-block;
}

/* ── DATA EXPORT ── */
.export-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    max-width: 900px;
}

.export-card {
    background: var(--white);
    border: 1px solid var(--grey-rule);
    padding: 24px;
    box-shadow: 0 1px 3px rgba(10, 22, 46, .05);
    transition: box-shadow .15s;
}

.export-card:hover {
    box-shadow: 0 4px 14px rgba(10, 22, 46, .1);
}

.export-card .status {
    margin-bottom: 12px;
}

.export-card .export-count {
    font-family: var(--f-head);
    font-size: 28px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 16px;
}

.export-card .btn {
    width: 100%;
    text-align: center;
    margin-top: 0;
}

.filters {
    margin-bottom: 20px;
    font-family: var(--f-head);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.filters a {
    margin-right: 18px;
    text-decoration: none;
    color: var(--grey);
    font-weight: 500;
}

.filters a:hover {
    color: var(--blue);
}

.filters a.active {
    color: var(--black);
    border-bottom: 2px solid var(--blue);
    padding-bottom: 4px;
}

.till-slip-preview img {
    max-width: 100%;
    border: 1px solid var(--grey-rule);
}

.back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--blue);
    font-family: var(--f-head);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}

.back-link:hover {
    color: var(--blue-dark);
}

.detail-table th {
    width: 160px;
    background: transparent;
    text-align: left;
}

/* ── PAGER ── */
.pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    font-size: 12px;
    color: var(--grey);
}

.pager-links {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: var(--f-head);
}

.pager-links a,
.pager-links strong {
    display: inline-block;
    padding: 5px 10px;
    color: var(--blue);
    text-decoration: none;
}

.pager-links a:hover {
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--grey-rule);
}

.pager-links strong {
    color: var(--black);
    border-bottom: 2px solid var(--blue);
}

.pager-gap {
    padding: 0 4px;
    color: var(--grey);
}

/* ── PARTICIPANT ACTIVITY TIMELINE ── */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--grey-rule);
    box-shadow: 0 1px 3px rgba(10, 22, 46, .05);
}

.timeline-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    padding: 14px 20px 14px 17px;
    border-bottom: 1px solid var(--grey-rule);
    border-left: 3px solid var(--grey-light);
}

.timeline-item:last-child {
    border-bottom: none;
}

.timeline-item.tone-good { border-left-color: var(--green); }
.timeline-item.tone-bad { border-left-color: var(--pink); }
.timeline-item.tone-warn { border-left-color: var(--orange); }

.timeline-time {
    font-family: var(--f-head);
    font-size: 12px;
    color: var(--black);
    line-height: 1.5;
}

.timeline-label {
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 3px;
}

.timeline-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--black);
}

.timeline-text .status {
    margin-left: 6px;
    vertical-align: 1px;
}

.timeline-note {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--bg);
    border-left: 2px solid var(--grey-light);
    font-size: 13px;
    color: #444;
}

.timeline-meta {
    margin-top: 4px;
    font-size: 11px;
    color: var(--grey);
}

.stat-card .stat-value.stat-value-sm {
    font-size: 22px;
    line-height: 1.5;
}

.sb-role {
    color: #798CC2;
}

@media (max-width: 600px) {
    .timeline-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ── CAMPAIGNS ── */
.campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}

.campaign-card {
    background: var(--white);
    border: 1px solid var(--grey-rule);
    padding: 18px;
    box-shadow: 0 1px 3px rgba(10, 22, 46, .05);
    transition: box-shadow .15s;
}

.campaign-card:hover {
    box-shadow: 0 4px 14px rgba(10, 22, 46, .1);
}

.campaign-card.inactive {
    opacity: .65;
}

.campaign-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.campaign-stats {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--grey);
    margin-bottom: 14px;
}

.campaign-stats strong {
    font-family: var(--f-head);
    font-size: 15px;
    color: var(--black);
}

.campaign-share {
    margin-top: 14px;
    border-top: 1px solid var(--grey-rule);
    padding-top: 12px;
}

.campaign-share summary {
    cursor: pointer;
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--blue);
    list-style: none;
}

.campaign-share summary::-webkit-details-marker {
    display: none;
}

.campaign-share summary::before {
    content: "+ ";
}

.campaign-share[open] summary::before {
    content: "\2212 ";
}

.campaign-share-body {
    margin-top: 12px;
}

.campaign-share-body input[type="text"] {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 8px 10px;
}

.rename-form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.rename-form input[type="text"] {
    flex: 1;
    min-width: 0;
    font-family: var(--f-head);
    font-size: 15px;
    font-weight: 700;
    padding: 6px 8px;
    border-color: transparent;
    background: transparent;
}

.rename-form input[type="text"]:hover,
.rename-form input[type="text"]:focus {
    border-color: var(--grey-rule);
    background: var(--white);
}

.rename-form input[type="text"]:focus {
    border-color: var(--blue);
}

.rename-form .rename-save {
    margin-top: 0;
    padding: 8px 14px;
    font-size: 10px;
    opacity: 0;
    transition: opacity .15s;
}

.rename-form:hover .rename-save,
.rename-form:focus-within .rename-save {
    opacity: 1;
}

.campaign-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── ICON BUTTONS ── */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    margin-top: 0;
    background: transparent;
    border: 1px solid var(--grey-rule);
    color: var(--grey);
    cursor: pointer;
    text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
}

.icon-btn:hover,
.icon-btn:focus-visible {
    color: var(--blue);
    border-color: var(--blue);
    background: var(--white);
}

.icon-btn.primary {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

.icon-btn.primary:hover,
.icon-btn.primary:focus-visible {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
    color: var(--white);
}

.icon-btn .icon {
    display: block;
}

.campaign-actions .btn,
.campaign-actions button {
    margin-top: 0;
}

button.btn-secondary,
.btn.btn-secondary {
    background: transparent;
    color: var(--blue);
    border: 1px solid var(--blue);
}

button.btn-secondary:hover,
.btn.btn-secondary:hover {
    background: var(--blue);
    color: var(--white);
}

.color-preview .sub-label {
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 8px;
}

.campaign-qr {
    text-align: center;
    margin-top: 12px;
}

.campaign-qr img {
    display: inline-block;
    border: 1px solid var(--grey-rule);
    padding: 8px;
    background: var(--white);
}

.campaign-qr .qr-download {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue);
    text-decoration: none;
}

/* ── CAMPAIGN PICKER (admin pages) ── */
.campaign-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.campaign-picker label {
    margin: 0;
}

.campaign-picker select {
    width: auto;
    min-width: 240px;
}

/* ── DASHBOARD ── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--white);
    border: 1px solid var(--grey-rule);
    border-top: 3px solid var(--blue);
    padding: 22px 22px 20px;
    box-shadow: 0 1px 3px rgba(10, 22, 46, .05);
    transition: box-shadow .15s, transform .15s;
}

.stat-card:hover {
    box-shadow: 0 4px 14px rgba(10, 22, 46, .1);
    transform: translateY(-1px);
}

.stat-card.accent-submitted { border-top-color: var(--orange); }
.stat-card.accent-accepted { border-top-color: var(--green); }
.stat-card.accent-rejected { border-top-color: var(--pink); }

.stat-card .stat-value {
    font-family: var(--f-head);
    font-size: 36px;
    font-weight: 700;
    color: var(--black);
    line-height: 1.05;
    letter-spacing: -.01em;
}

.stat-card .stat-label {
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--grey);
    margin-top: 8px;
}

.dash-panels {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    align-items: stretch;
}

/* The dashboard's own rows: every panel is either half the width or the whole
   of it, nothing in between, so the columns line up down the page. A modifier
   rather than a change to .dash-panels itself, which four other pages use for
   their own uneven two-column sections. */
.dash-panels-even {
    grid-template-columns: 1fr 1fr;
}

/* A row holding one panel - the product board on a campaign with no
   participants yet - keeps it at half width rather than letting it stretch. */
.dash-panels-even > .panel:only-child {
    grid-column: span 1;
}

.panel {
    background: var(--white);
    border: 1px solid var(--grey-rule);
    padding: 26px 28px 28px;
    box-shadow: 0 1px 3px rgba(10, 22, 46, .05);
}

.panel h2 {
    font-size: 14px;
    margin-bottom: 3px;
    letter-spacing: .01em;
}

.panel .panel-desc {
    font-size: 12px;
    color: var(--grey);
    margin-bottom: 22px;
}

.panel-actions {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.panel-actions .range-toggle {
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: flex;
    border: 1px solid var(--grey-rule);
}

.range-toggle a {
    color: var(--grey);
    text-decoration: none;
    padding: 6px 14px;
    transition: color .15s, background .15s;
}

.range-toggle a:hover {
    color: var(--blue);
}

.range-toggle a.active {
    color: var(--white);
    background: var(--blue);
}

.bar-row {
    display: grid;
    grid-template-columns: 130px 1fr 44px;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 13px;
}

.bar-row:last-child {
    margin-bottom: 0;
}

.bar-row .bar-name {
    color: var(--black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-track {
    background: #F0F1F4;
    height: 10px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.bar-fill {
    background: linear-gradient(90deg, #3854A4, var(--blue));
    height: 100%;
    border-radius: 5px;
    min-width: 2px;
    transition: width .4s ease;
}

/* ── ONE BAR, TWO FIGURES ──
   The region breakdown and the two leaderboards put claims and registrations
   in a single track, in the timeline's own colours so the chart above and the
   panels below say the same thing in the same language. The track is a flex
   row: the two segments sit end to end, and the bar's full length is that
   row's total, which is also what the rows are ordered by. */
.bar-track {
    display: flex;
}

/* Registrations lead, claims follow - the order the two happen in. Square off
   the inner edges so the pair reads as one bar rather than two pills, while
   the outer ends keep the track's rounding. */
.bar-fill-registrations {
    background: linear-gradient(90deg, var(--reg-2), var(--reg));
    border-radius: 5px 0 0 5px;
}

.bar-fill-claims {
    background: linear-gradient(90deg, var(--claim-2), var(--claim));
    border-radius: 0 5px 5px 0;
}

/* When only one of the two is present - a B2C campaign, or a row with claims
   but no registrations yet - it is the track's only child and keeps the fully
   rounded ends the single bar always had. The squared inner edges above only
   apply when there is actually something to butt up against. */
.bar-track .bar-fill:only-child {
    border-radius: 5px;
}

/* Both figures beside the bar, each in its segment's colour. The count column
   is set per panel from the figures it actually holds (see $countColumn in
   admin/dashboard.php); the name column gives up exactly that much, so the
   two fixed columns still add up to the 174px they did before and the bar
   keeps its length. Only applies to the single-line layout - a stacked row
   gives the name its own line and has no name column to trade against. */
.bar-chart-split .bar-row:not(.bar-row-stacked) {
    grid-template-columns: calc(174px - var(--count-col, 62px)) 1fr var(--count-col, 62px);
}

/* ── TWO LINES PER ENTRY ──
   The name across the top, the bar and its figures beneath it, the bar
   starting flush under the name. The leaderboards carry outlet, rep and
   product names that a 130px column cut off to the point of uselessness;
   given the panel's whole width they fit. The count column stays a fixed
   width so the figures line up down the panel - each row is its own grid, so
   anything content-sized would come out ragged. */
.bar-row-stacked {
    grid-template-columns: 1fr var(--count-col, 62px);
    grid-template-areas:
        "name name"
        "bar  count";
    row-gap: 6px;
    column-gap: 10px;
    margin-bottom: 16px;
}

.bar-row-stacked .bar-name {
    grid-area: name;
}

.bar-row-stacked .bar-track {
    grid-area: bar;
}

.bar-row-stacked .bar-count {
    grid-area: count;
}

/* The rank sits in the name line now, so it needs the gap the grid used to
   give it. */
.bar-row-stacked .leader-rank {
    margin-right: 7px;
}

.bar-count-split {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    font-size: 12px;
}

.bar-count-split .count-claims {
    color: var(--claim-ink);
}

.bar-count-split .count-registrations {
    color: var(--reg-ink);
}

/* The chart's legend, reused above a panel. Tighter, because a panel heading
   sits closer to its content than the chart's does. */
.panel-legend {
    margin: 0 0 10px;
}

.bar-fill[style*="width: 0%"] {
    min-width: 0;
}

.bar-row .bar-count {
    text-align: right;
    font-family: var(--f-head);
    font-weight: 600;
    color: var(--black);
}

.bar-row .bar-name a {
    color: var(--black);
    text-decoration: none;
}

.bar-row .bar-name a:hover {
    color: var(--blue);
    text-decoration: underline;
}

.bar-row .bar-name a.region-active {
    font-weight: bold;
    color: var(--blue);
}

.leader-row .bar-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.leader-rank {
    display: inline-block;
    min-width: 18px;
    text-align: center;
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 700;
    color: var(--grey);
}

.filter-note {
    font-size: 13px;
    color: var(--grey);
    margin: -8px 0 20px;
}

.status-bars .bar-fill.status-submitted-fill { background: var(--orange); }
.status-bars .bar-fill.status-accepted-fill { background: var(--green); }
.status-bars .bar-fill.status-rejected-fill { background: var(--pink); }
.status-bars .bar-fill.status-duplicate-fill { background: var(--grey); }

/* ── TIMELINE LINE CHART ── */
.timeline-wrap {
    position: relative;
}

.timeline-chart {
    width: 100%;
    height: 220px;
    display: block;
    overflow: visible;
}

.timeline-chart .tl-grid {
    stroke: var(--grey-rule);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.timeline-chart .tl-area {
    fill: url(#tlGradient);
}

.timeline-chart .tl-line {
    fill: none;
    stroke: var(--claim);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.timeline-chart .tl-dot {
    fill: var(--white);
    stroke: var(--claim);
    stroke-width: 2;
    opacity: 0;
    transition: opacity .1s;
}

.timeline-chart .tl-dot.visible {
    opacity: 1;
}

.timeline-chart .tl-hit {
    fill: transparent;
}

.timeline-chart .tl-label {
    font-family: var(--f-head);
    font-size: 10px;
    fill: var(--grey);
    text-anchor: middle;
}

.timeline-chart .tl-ylabel {
    font-family: var(--f-head);
    font-size: 10px;
    fill: var(--grey);
    text-anchor: end;
}

.tl-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--black);
    color: var(--white);
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    transform: translate(-50%, calc(-100% - 12px));
    opacity: 0;
    transition: opacity .1s;
    z-index: 10;
}

.tl-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--black);
}

.tl-tooltip .tt-date {
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.tl-tooltip .tt-value {
    font-family: var(--f-head);
    font-size: 14px;
    font-weight: 700;
}

.tl-tooltip.visible {
    opacity: 1;
}

@media (max-width: 900px) {
    .admin-layout {
        flex-direction: column;
    }

    /* Stacked above the content, so there is nothing to pin it to and no
       reason to cap its height - everything in it is on screen already. */
    .admin-sidebar {
        width: 100%;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        position: static;
        height: auto;
        align-self: auto;
    }

    .admin-sidebar nav {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        overflow-y: visible;
    }

    .admin-sidebar .sb-footer {
        border-top: none;
        border-left: 1px solid rgba(255, 255, 255, .08);
    }

    .dash-panels {
        grid-template-columns: 1fr;
    }
}

/* ── BUTTONS: DISABLED ── */
button:disabled,
button:disabled:hover {
    opacity: .45;
    cursor: not-allowed;
}

/* ── QUIZ BUILDER (admin) ── */
.stat-card .stat-of {
    font-size: .5em;
    font-weight: 500;
    color: var(--grey);
    margin-left: 2px;
}

.quiz-publish-card {
    border-left: 3px solid var(--orange);
}

.quiz-publish-card.is-live {
    border-left-color: var(--green);
}

.quiz-publish-card form button {
    margin-top: 4px;
}

.quiz-problems {
    margin: 0 0 16px 18px;
    font-size: 13px;
    color: #8A1442;
}

.quiz-questions-head {
    align-items: center;
    margin: 36px 0 12px;
}

.quiz-questions-head h2 {
    margin: 0;
}

.quiz-questions-head .btn {
    margin-top: 0;
}

.quiz-q-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-q {
    background: var(--white);
    border: 1px solid var(--grey-rule);
    box-shadow: 0 1px 3px rgba(10, 22, 46, .05);
    padding: 18px 20px;
    scroll-margin-top: 20px;
}

.quiz-q:target {
    border-color: var(--blue);
}

.quiz-q-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.quiz-q-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-family: var(--f-head);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-q-text {
    flex: 1;
    min-width: 0;
    font-family: var(--f-head);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    padding-top: 3px;
}

.quiz-q-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.quiz-q-actions form {
    margin: 0;
}

.quiz-q-actions .btn {
    margin-top: 0;
    padding: 6px 12px;
    font-size: 10px;
}

.quiz-q-options {
    list-style: none;
    margin: 12px 0 0 42px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.quiz-q-options li {
    padding: 6px 10px;
    background: var(--bg);
    border-left: 3px solid transparent;
}

.quiz-q-options li.is-correct {
    background: #F1F8E5;
    border-left-color: var(--green);
    font-weight: 500;
}

.quiz-q-badge {
    margin-left: 8px;
    font-family: var(--f-head);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #5B7A1F;
}

.quiz-q-feedback {
    margin: 10px 0 0 42px;
    font-size: 12px;
    color: #555;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.quiz-q-feedback > div > span:first-child {
    font-family: var(--f-head);
    font-weight: 600;
    color: var(--black);
}

.quiz-question-form {
    max-width: 720px;
}

.label-optional {
    margin-left: 6px;
    font-size: 9px;
    letter-spacing: .08em;
    color: var(--grey);
    opacity: .8;
}

.quiz-answer-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quiz-answer-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quiz-answer-row input[type="text"] {
    flex: 1;
}

label.quiz-answer-correct {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    width: 92px;
    margin: 0;
    cursor: pointer;
}

label.quiz-answer-correct input {
    width: auto;
    accent-color: var(--green);
}

.quiz-answer-correct input:checked + span {
    color: #5B7A1F;
    font-weight: 700;
}

.quiz-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.quiz-form-actions button {
    margin-top: 0;
}

.quiz-cancel {
    font-size: 13px;
    color: var(--grey);
}

.import-warning {
    color: #9A6A00;
    font-size: 12px;
    line-height: 1.5;
}

/* ── DATABASE UPDATES (admin/migrate.php) ── */
.migrate-name {
    font-size: 13px;
    margin: 16px 0 4px;
}

.migrate-steps {
    list-style: none;
    margin: 0;
    font-size: 13px;
}

.migrate-steps li {
    position: relative;
    padding-left: 20px;
    line-height: 1.8;
}

.migrate-steps li::before {
    position: absolute;
    left: 0;
    font-weight: 700;
}

.migrate-steps li.ok::before {
    content: "\2713";
    color: #5B7A1F;
}

.migrate-steps li.bad {
    color: #8A1442;
}

.migrate-steps li.bad::before {
    content: "\2715";
    color: var(--pink);
}

.migrate-steps li.muted::before {
    content: "\00B7";
    color: var(--grey);
}

/* ── DUPLICATE INVOICE WARNING (admin) ── */
.errors.warning {
    background: #FFF6E0;
    border-left-color: var(--orange);
    color: #7A4E00;
}

.errors.warning a {
    color: #7A4E00;
    text-decoration: underline;
}

.errors.warning .status {
    vertical-align: baseline;
}

.dup-list {
    margin: 10px 0 0;
    padding-left: 18px;
    line-height: 1.9;
}

.dup-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--orange);
    color: var(--black);
    font-family: var(--f-head);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    margin-left: 4px;
    cursor: help;
}

/* ── CLAIM REFERENCE AND VALUE ──
   The reference is quoted on the phone and pasted into emails, so it is set
   in a tabular face where 0 and O cannot be mistaken for each other. */
.claim-ref {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: .92em;
    letter-spacing: .02em;
    white-space: nowrap;
}

h1 .claim-ref {
    font-size: .8em;
    color: var(--grey);
}

td .claim-ref {
    font-weight: 600;
}

/* Money lines up on the right, where the eye compares it. */
td.amount,
th.amount {
    text-align: right;
    white-space: nowrap;
}

.claim-amount {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: #F6F8FC;
    border: 1px solid var(--grey-rule);
    font-family: var(--f-head);
    font-size: 11px;
    font-weight: 600;
    color: var(--blue);
    white-space: nowrap;
}

.claim-row-ref {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--grey);
}

.claim-ref-callout {
    margin: 18px 0 4px;
    font-family: var(--f-head);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--grey);
}

.claim-ref-callout .claim-ref {
    display: inline-block;
    margin-top: 6px;
    font-size: 22px;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--black);
}

/* ── ELIGIBLE PRODUCTS ──
   The editor is one row per product; the capture grid on the claim page is
   one row per product with a numbered box per size. Both are worked through
   quickly, so the boxes are large enough to hit and to read at a glance. */
.product-editor .inline-input {
    min-width: 90px;
}

.product-editor .req {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--grey);
}

.product-editor .remove-label {
    margin: 0;
    font-size: 11px;
    white-space: nowrap;
}

.product-blank .inline-input {
    background: #FCFCFD;
}

.capture-heading {
    font-family: var(--f-head);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grey);
    margin: 4px 0 6px;
}

.capture-grid {
    margin-bottom: 8px;
}

/* The name column is held to a sensible width so the quantity boxes sit
   right beside it rather than across the table. */
.capture-grid th[scope="row"] {
    background: transparent;
    font-family: var(--f-body);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--black);
    vertical-align: middle;
    width: 340px;
    min-width: 200px;
}

/* Tighter than the listings. This grid is ten rows of form controls worked
   down in one pass, not a table being read, so the row rhythm matters less
   than how much of it fits on the screen at once. */
.capture-grid th,
.capture-grid td {
    padding: 7px 10px;
}

.capture-name {
    font-weight: 600;
}

.capture-cell {
    width: 156px;
    vertical-align: middle;
}

/* Quantity and value sit side by side rather than stacked. Stacked, each of
   ten products was three elements tall and the grid ran off the screen; a
   campaign at the full ten products with three sizes was the point it stopped
   being usable. The pair needs this wrapper because a <td> cannot itself be a
   flex container without dropping out of the table's column alignment. */
.capture-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.capture-cell label {
    display: block;
    margin: 0 0 3px;
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grey);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.capture-cell .qty-input {
    width: 58px;
    margin: 0;
    padding: 9px 10px;
    font-family: var(--f-head);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.capture-cell .qty-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(33, 64, 154, .12);
}

/* The money box sits beside its quantity, quieter than it, so the grid still
   reads as one column per size. */
.capture-cell .line-value-input {
    width: 90px;
    margin: 0;
    padding: 6px 8px;
    font-size: 12px;
    text-align: center;
    color: var(--grey);
}

.capture-cell .line-value-input:focus {
    color: var(--black);
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(33, 64, 154, .12);
}

.capture-line-value,
.capture-total-value {
    font-family: var(--f-head);
    font-weight: 600;
    white-space: nowrap;
}

.capture-grid tfoot .capture-total-value {
    background: var(--bg);
    font-size: 15px;
}

.capture-row-on {
    background: #F6F8FC;
}

.capture-row-on th[scope="row"] .capture-name {
    color: var(--blue);
}

.capture-line-total,
.capture-total {
    font-family: var(--f-head);
    font-weight: 600;
}

.capture-grid tfoot th {
    text-align: right;
    background: var(--bg);
}

.capture-grid tfoot .capture-total {
    background: var(--bg);
    font-size: 15px;
}

.value-input {
    max-width: 220px;
}

/* Dashboard: one row per product. Stacked like the other two leaderboards -
   the columns come from .bar-row-stacked, which this rule must not undo, so
   it sets no grid of its own. */
.product-row {
    align-items: center;
}

/* The per-size split now reads as part of the name, in brackets after it,
   rather than as a second line underneath. */
.product-row .product-sizes {
    font-size: 11px;
    color: var(--grey);
}

.product-row .product-approved {
    font-size: 10px;
    font-weight: 400;
}

/* Long product names plus their sizes wrap rather than being cut off - there
   is a whole line for them now. */
.product-row .bar-name {
    white-space: normal;
}

/* ── ENTRIES / CLAIMS FILTERS ──
   Two bars, one under the other: the review status (the white bar every
   admin list uses) and, below it, the reward status. The second is tinted
   and carries a blue edge so the two are never read as one set of tabs. */

/* Status tabs on the left, the reference lookup on the right. Only on the
   claims list - the other filter bars are rows of fields, which must keep
   their own left-aligned layout. */
.filter-bar-split {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.filter-bar-split .filters {
    margin-bottom: 0;
}

.filters-reward {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: -10px 0 20px;
    padding: 13px 18px;
    background: #F4F7FD;
    border: 1px solid #D8E1F4;
    border-left: 3px solid var(--blue);
}

.filters-reward a {
    margin-right: 0;
}

.filters-reward a.active {
    border-bottom-color: var(--blue);
}

.filters-label {
    color: var(--blue);
    font-weight: 700;
    letter-spacing: .1em;
    padding-right: 4px;
}

.ref-lookup {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ref-lookup input[type="search"] {
    width: 150px;
    margin: 0;
    padding: 7px 10px;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
}

.ref-lookup button {
    margin: 0;
    padding: 7px 14px;
    font-size: 11px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.quiz-clone-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.quiz-clone-row select {
    flex: 1;
    min-width: 240px;
    width: auto;
}

.quiz-clone-row button {
    margin-top: 0;
}

@media (max-width: 700px) {
    .quiz-q-head {
        flex-wrap: wrap;
    }

    .quiz-q-actions {
        width: 100%;
        padding-left: 42px;
    }

    .quiz-q-options,
    .quiz-q-feedback {
        margin-left: 0;
    }
}

/* ── QUIZ (participant) ── */
.container a.btn.quiz-cta {
    margin: 0 0 20px;
}

.profile-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 20px;
    background: #F6F8FC;
    border-left: 3px solid var(--blue);
    font-size: 14px;
}

.container .profile-prompt .btn {
    margin-top: 0;
}

.terms-accept {
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0 4px;
    line-height: 1.5;
}

.terms-accept input[type="checkbox"] {
    margin-top: 3px;
}

.quiz-status-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 20px;
    background: #F1F8E5;
    border-left: 3px solid var(--green);
    font-size: 14px;
}

.quiz-status-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--green);
    color: var(--black);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-progress {
    margin: 4px 0 24px;
}

.quiz-progress-head {
    display: flex;
    justify-content: space-between;
    font-family: var(--f-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 8px;
}

.quiz-progress-track {
    height: 8px;
    border-radius: 4px;
    background: #F0F1F4;
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--blue);
    transition: width .4s ease;
}

.quiz-intro {
    font-size: 15px;
}

.quiz-facts {
    list-style: none;
    margin: 16px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: #444;
}

.quiz-facts li {
    padding-left: 22px;
    position: relative;
}

.quiz-facts li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
}

.quiz-form fieldset {
    border: none;
}

.quiz-question {
    font-family: var(--f-head);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--black);
    margin-bottom: 16px;
    padding: 0;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Big, thumb-friendly answer cards. The radio stays in the page (for
   keyboards and screen readers) but is drawn as the letter badge. */
label.quiz-option,
div.quiz-option {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    min-height: 56px;
    border: 2px solid var(--grey-rule);
    background: var(--white);
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--black);
}

label.quiz-option {
    position: relative;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

label.quiz-option:hover {
    border-color: #C9CFE0;
}

.quiz-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.quiz-option-mark {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--grey-light);
    font-family: var(--f-head);
    font-size: 13px;
    font-weight: 700;
    color: var(--grey);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-option-text {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.quiz-option input:checked + .quiz-option-mark {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--btn-text, #fff);
}

.quiz-option input:focus-visible + .quiz-option-mark {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

label.quiz-option:has(input:checked) {
    border-color: var(--blue);
    background: #F6F8FC;
}

.quiz-options.is-answered .quiz-option {
    color: #777;
}

.quiz-option.is-correct {
    border-color: var(--green);
    background: #F1F8E5;
    color: var(--black);
}

.quiz-options.is-answered .quiz-option.is-correct,
.quiz-options.is-answered .quiz-option.is-wrong {
    color: var(--black);
}

.quiz-option.is-correct .quiz-option-mark {
    background: var(--green);
    border-color: var(--green);
    color: var(--black);
}

.quiz-option.is-wrong {
    border-color: var(--pink);
    background: #FBE9EE;
}

.quiz-option.is-wrong .quiz-option-mark {
    background: var(--pink);
    border-color: var(--pink);
    color: #fff;
}

.quiz-option-note {
    display: block;
    margin-top: 2px;
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #666;
}

.quiz-feedback {
    margin-top: 20px;
    padding: 16px 18px;
    border-left: 4px solid;
}

.quiz-feedback.is-correct {
    background: #F1F8E5;
    border-color: var(--green);
}

.quiz-feedback.is-wrong {
    background: #FBE9EE;
    border-color: var(--pink);
}

.quiz-feedback-title {
    font-family: var(--f-head);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.quiz-feedback.is-correct .quiz-feedback-title {
    color: #4F6B1C;
}

.quiz-feedback.is-wrong .quiz-feedback-title {
    color: #8A1442;
}

.quiz-feedback p {
    margin: 0;
    color: var(--black);
}

.quiz-done-panel {
    text-align: center;
    padding: 16px 0 8px;
}

.quiz-done-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--green);
    color: var(--black);
    font-size: 30px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-done-panel h2 {
    font-size: 22px;
}

@media (max-width: 600px) {
    .quiz-question {
        font-size: 17px;
    }
}

/* ── PUBLIC PAGES ON PHONES ──
   Participants mostly arrive from a link or QR code on their phone, so
   every campaign, login, entry and claim page must work at 320-430px. */

/* iOS zooms the whole page into any field set smaller than 16px. */
body.public-page input[type="text"],
body.public-page input[type="email"],
body.public-page input[type="tel"],
body.public-page input[type="password"],
body.public-page input[type="date"],
body.public-page select,
body.public-page textarea {
    font-size: 16px;
}

@media (max-width: 600px) {
    /* Edge-to-edge card: the desktop 40px margin + padding cost a phone
       almost a quarter of its width. */
    body.public-page .container {
        margin: 0 auto;
        padding: 24px 20px 32px;
        border: none;
    }

    body.public-page .campaign-banner {
        width: calc(100% + 40px);
        max-width: calc(100% + 40px);
        max-height: 200px;
        margin: -24px -20px 20px;
    }

    body.public-page h1 {
        font-size: 24px;
    }

    /* Full-width buttons: easy to hit with a thumb. */
    body.public-page button,
    body.public-page .btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 15px 20px;
    }

    .landing-actions {
        flex-direction: column;
        gap: 0;
    }

    .landing-actions .btn {
        min-width: 0;
    }

    .landing-actions .btn + .btn {
        margin-top: 12px;
    }

    .pt-dash {
        gap: 20px;
    }

    .pt-donut-wrap {
        width: 160px;
        margin: 0 auto;
    }

    .pt-donut-empty {
        width: 160px;
        height: 160px;
    }

    .pt-legend {
        flex-basis: 100%;
        min-width: 0;
    }

    .container a.claim-row {
        gap: 12px;
        padding: 12px 14px;
    }

    body.public-page table th,
    body.public-page table td {
        padding: 10px 12px;
    }

    .detail-table th {
        width: 96px;
    }

    /* Long email addresses wrap instead of pushing the table off-screen. */
    .detail-table td {
        overflow-wrap: anywhere;
    }

    .participant-note {
        padding: 14px 16px;
    }

    .thank-you {
        padding: 40px 20px;
    }

    .thank-you h1 {
        font-size: 26px;
    }

    .powered-footer {
        margin-top: 0;
    }

    .powered-footer .pf-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 16px 20px;
    }
}

/* ── Database profile panel ──
   The measured cost of an admin page, shown to super admins only. The
   floating variant is appended at the foot of any admin page by ?profile=1. */
.db-profile {
    margin-top: 28px;
    padding: 14px 16px;
    border: 1px solid var(--grey-rule);
    border-left: 3px solid var(--grey);
    border-radius: 4px;
    background: #FAFAFB;
    font-size: 12px;
    color: #4A4C52;
}

.db-profile-head {
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 10px;
    color: var(--grey);
    margin-bottom: 8px;
}

.db-profile-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.db-profile-totals strong {
    font-weight: 700;
}

.db-profile-hint {
    margin-top: 8px;
    color: var(--grey);
}

.db-profile-hint code,
.db-profile-table code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
}

.db-profile-table {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
}

.db-profile-table th,
.db-profile-table td {
    padding: 5px 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--grey-rule);
    font-size: 11px;
}

.db-profile-table th {
    color: var(--grey);
    font-weight: 500;
    white-space: nowrap;
}

.db-profile-table td:first-child,
.db-profile-table td:nth-child(2) {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.db-profile-table code {
    color: #2A2C31;
    overflow-wrap: anywhere;
}

.db-profile-more {
    color: var(--grey);
}

/* Appended after the page body, so it floats over whatever is there. */
.db-profile-float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 900;
    max-width: 680px;
    max-height: 60vh;
    overflow: auto;
    box-shadow: 0 8px 28px rgba(10, 22, 46, 0.22);
    border-radius: 4px;
}

.db-profile-float .db-profile {
    margin-top: 0;
    background: #fff;
}

/* Heading above a band of stat cards, used when the dashboard shows more than
   one band (claims and registrations) and they need telling apart. */
.band-heading {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey);
    margin: 0 0 10px;
}

.stat-grid + .band-heading {
    margin-top: 4px;
}

/* Campaign ops: a pill of its own, so the role is not mistaken for a manager
   at a glance on the users list. */
.status-ops {
    background: #E8F0FB;
    color: #21409A;
}

/* ── ICON ROW ACTIONS ──
   The participants list carries up to four actions per row (approve or
   reinstate, reject, view, edit). As words they ran off the side of the table;
   as icons they fit in a fixed, narrow column at any window width. Every
   button keeps a title and an aria-label, so the meaning is one hover - or one
   screen reader - away. */
.row-actions-icons {
    width: 1%;
    text-align: right;
    padding-left: 14px !important;
}

/* The actions stay pinned to the right edge. These tables are deliberately
   nowrap - a long email, outlet or rep name makes them wider than the window
   and they scroll sideways - and without this the buttons are the first thing
   to disappear off the side, which is exactly what you cannot afford to lose.
   Backgrounds are repeated here because a sticky cell floats over the rows
   scrolling underneath it. */
.table-tidy th.row-actions-icons,
.table-tidy td.row-actions-icons {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--white);
    box-shadow: -10px 0 10px -10px rgba(10, 22, 46, .28);
}

.table-tidy th.row-actions-icons {
    z-index: 2;
    background: var(--bg);
}

.table-tidy tbody tr:hover td.row-actions-icons {
    background: #F6F8FC;
}

.row-action-form {
    display: inline;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    background: var(--white);
    border: 1px solid var(--grey-rule);
    border-radius: 3px;
    color: #5F6368;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

.row-actions-icons .btn-icon + .btn-icon,
.row-actions-icons .row-action-form + .btn-icon,
.row-actions-icons .row-action-form + .row-action-form .btn-icon,
.row-actions-icons .btn-icon + .row-action-form .btn-icon {
    margin-left: 5px;
}

.btn-icon .icon {
    width: 15px;
    height: 15px;
}

.btn-icon:hover,
.btn-icon:focus-visible {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

/* The two decisions are colour-coded, so approve and reject are never confused
   with the neutral view and edit beside them. */
.btn-icon-approve {
    color: #5B7A1F;
    border-color: #C9DFA0;
}

.btn-icon-approve:hover,
.btn-icon-approve:focus-visible {
    background: #5B7A1F;
    border-color: #5B7A1F;
    color: var(--white);
}

.btn-icon-reject {
    color: var(--pink);
    border-color: #EFC4D3;
}

.btn-icon-reject:hover,
.btn-icon-reject:focus-visible {
    background: var(--pink);
    border-color: var(--pink);
    color: var(--white);
}

.btn-icon:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 1px;
}

/* A cell that keeps to one line and ends in an ellipsis rather than setting
   the width of the whole table. Used on the free-text columns of the
   participants list - email, outlet, rep - where one long value would
   otherwise push the rest of the row sideways. The full text is on the
   cell's title, and on the record's own page. */
.table-tidy td.cell-clip {
    max-width: 165px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-tidy td.cell-clip-email {
    max-width: 170px;
}

.table-tidy td.cell-clip-rep {
    max-width: 130px;
}

/* Date over time, so the column costs the width of a date rather than a date
   and a time side by side. */
.cell-datetime .cell-time {
    display: block;
    font-size: 10px;
    color: var(--grey);
    line-height: 1.3;
}

/* ── SECOND SERIES ON THE DASHBOARD TIMELINE ──
   Registrations alongside claims, on one axis. The claims line keeps its area
   fill; this one is a plain stroke, because two filled shapes over each other
   cannot be read. */
/* Scoped to .timeline-chart to match the specificity of the rules above -
   without it the blue stroke on .timeline-chart .tl-line wins and this line
   comes out dashed but still blue, which is exactly what the legend is not
   saying. The dot keeps the white fill of its sibling and is told apart by
   its ring. */
.timeline-chart .tl-line-registrations {
    stroke: var(--reg);
}

/* The wash under the claims line, set here so the gradient follows the series
   colour instead of repeating it in the SVG. */
.tl-grad-stop {
    stop-color: var(--claim);
}

.timeline-chart .tl-dot-registrations {
    stroke: var(--reg);
}

.tl-legend {
    display: flex;
    gap: 18px;
    margin: -4px 0 10px;
    font-size: 11px;
    color: var(--grey);
}

.tl-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tl-swatch {
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: var(--claim);
}

.tl-swatch-registrations {
    background: var(--reg);
}

.tt-value-registrations {
    color: var(--reg-bright);
}

/* Says when the dashboard was counted. Everything on the page is read live at
   page load - there is no cache and no scheduled build - so this is the moment
   you loaded it, not the age of a stored copy. */
.dash-freshness {
    margin-top: 6px;
    font-size: 11px;
    color: var(--grey);
}

.dash-freshness strong {
    color: #4A4C52;
    font-weight: 500;
}

/* ── PARTICIPANT DEMO (admin/demo-participant.php) ──
   A training mock of the participant's own page. The participant view itself
   borrows the real page's classes, so it follows every change made above and
   only the admin scaffolding around it is styled here. */

/* Sticks to the top of the framed view so a trainee can never scroll past it
   and read the invented claims as real ones. */
.demo-band {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 10px 20px;
    background: var(--orange);
    color: var(--black);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.demo-band strong {
    font-family: var(--f-head);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-right: 8px;
}

/* Shown in place of a page the demo does not open - the claim form, the quiz,
   the profile - saying what would have happened. */
.demo-info {
    margin: 20px 0 4px;
    padding: 12px 16px;
    background: var(--bg);
    border-left: 3px solid var(--teal);
    font-size: 13px;
    line-height: 1.6;
    color: #4A4C52;
}

.demo-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    align-items: center;
    margin: 24px 0 12px;
    padding: 16px 20px;
    background: var(--bg);
    border: 1px solid var(--grey-rule);
}

.demo-control-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.demo-control-label {
    margin-right: 4px;
    font-family: var(--f-head);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--grey);
}

.demo-scenario-note {
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.6;
    color: #4A4C52;
}

/* The frame sits on the page background rather than the white card, so the
   participant page inside it reads as a separate screen. */
.demo-stage {
    padding: 24px;
    background: var(--grey-light);
    overflow-x: auto;
}

.demo-device {
    max-width: 100%;
    margin: 0 auto;
    background: var(--white);
    box-shadow: 0 8px 28px rgba(24, 24, 24, .18);
}

.demo-frame {
    display: block;
    width: 100%;
    border: 0;
}

.demo-points {
    margin: 0 0 8px 20px;
    font-size: 14px;
    line-height: 1.7;
}

.demo-points li {
    margin-bottom: 10px;
}

/* ── DUPLICATE CLAIMS (admin/duplicates.php) ──
   Claims sharing a slip number, shown side by side with a magnifier, so two
   receipts can be compared without opening two review pages in two tabs. */

.dup-group-title {
    margin-bottom: 4px;
}

.dup-warn {
    color: var(--pink);
}

.dup-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* ── the AI pack ── */
.dup-pack {
    margin: 24px 0 28px;
    padding: 18px 20px;
    background: var(--bg);
    border: 1px solid var(--grey-rule);
}

.dup-pack-head {
    margin-bottom: 12px;
}

.dup-pack-head strong {
    font-family: var(--f-head);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-right: 10px;
}

.dup-pack-head .muted {
    font-size: 13px;
}

.dup-pack-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dup-pack-note {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--grey);
}

.dup-prompt-details {
    margin-top: 12px;
}

.dup-prompt-details summary {
    font-size: 12px;
    color: var(--link);
    cursor: pointer;
}

.dup-prompt-text {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--grey-rule);
    background: var(--white);
    font-family: Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.6;
    resize: vertical;
}

/* ── the cards ──
   Auto-fit rather than a fixed column count: two receipts get half the width
   each, five wrap onto a second row, and the page never needs to know how
   many there are. */
.dup-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.dup-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--grey-rule);
}

.dup-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--grey-rule);
}

.dup-card-ref {
    font-family: Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
}

.dup-card-media {
    background: var(--grey-light);
}

.dup-receipt-btn {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.dup-receipt-btn img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: contain;
    object-position: center top;
    background: var(--white);
}

.dup-zoom-hint {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 4px 8px;
    background: rgba(24, 24, 24, .72);
    color: var(--white);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .12s;
}

.dup-receipt-btn:hover .dup-zoom-hint,
.dup-receipt-btn:focus-visible .dup-zoom-hint {
    opacity: 1;
}

.dup-receipt-pdf {
    padding: 40px 16px;
    text-align: center;
    background: var(--white);
}

.dup-receipt-pdf p {
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--grey);
}

.dup-card-facts {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.dup-card-facts th,
.dup-card-facts td {
    padding: 7px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--grey-rule);
}

.dup-card-facts th {
    width: 42%;
    font-family: var(--f-head);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grey);
}

.dup-card-note {
    padding: 12px 14px;
    background: var(--bg);
    font-size: 12px;
    line-height: 1.6;
}

.dup-card-note strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--f-head);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grey);
}

.dup-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding: 14px;
}

/* ── the magnifier ── */
body.dup-modal-open {
    overflow: hidden;
}

.dup-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    background: rgba(10, 22, 46, .92);
}

.dup-modal[hidden] {
    display: none;
}

.dup-modal-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: var(--blue-dark);
    color: var(--white);
}

.dup-modal-title strong {
    font-family: Menlo, Consolas, monospace;
    font-size: 13px;
    margin-right: 10px;
}

.dup-modal-title .muted {
    font-size: 12px;
    color: #AEB4C4;
}

.dup-modal-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}

.dup-modal-tools label {
    margin: 0;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #AEB4C4;
}

.dup-modal-tools input[type="range"] {
    width: 110px;
    margin: 0;
}

.dup-modal-tools button {
    margin: 0;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: transparent;
    color: var(--white);
    font-size: 11px;
    cursor: pointer;
}

.dup-modal-tools button:hover {
    background: rgba(255, 255, 255, .14);
}

.dup-modal-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dup-modal-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: var(--white);
    cursor: crosshair;
}

/* The lens follows the cursor and carries the same picture several times the
   size. Fixed, so the cursor's own viewport coordinates place it directly. */
.dup-lens {
    position: fixed;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 3px solid var(--white);
    box-shadow: 0 6px 28px rgba(0, 0, 0, .45);
    background-repeat: no-repeat;
    background-color: var(--white);
    pointer-events: none;
    z-index: 210;
}

.dup-lens[hidden] {
    display: none;
}

@media (max-width: 700px) {
    .dup-lens {
        width: 170px;
        height: 170px;
    }

    .dup-receipt-btn img {
        height: 240px;
    }
}

/* The duplicates entry point on the claims list. */
.dup-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--bg);
    border-left: 3px solid var(--orange);
}

.dup-entry-text {
    font-size: 13px;
    line-height: 1.6;
}

/* ── CLIENT FEEDBACK (admin/client-report.php) ── */

.cr-form {
    margin-bottom: 8px;
}

.cr-wording {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 20px;
}

.cr-actions {
    margin-top: 4px;
}

.cr-compare {
    margin: 24px 0 8px;
    padding: 16px 20px;
    background: var(--bg);
    border: 1px solid var(--grey-rule);
}

.cr-compare-head {
    margin-bottom: 10px;
}

.cr-compare-head strong {
    font-family: var(--f-head);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-right: 10px;
}

.cr-compare-head .muted {
    font-size: 12px;
}

.cr-compare-table {
    margin: 0;
    background: var(--white);
}

.cr-compare-table th {
    font-weight: 500;
}

.cr-up {
    color: #2E7D32;
    font-weight: 700;
}

.cr-down {
    color: var(--pink);
    font-weight: 700;
}

.cr-draft-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* The save form sits in the button row rather than under it. */
.cr-inline-form {
    display: inline;
    margin: 0;
}

.cr-inline-form button {
    margin: 0;
}

/* Monospaced on purpose: the bullet indentation is part of the message, and
   it is much easier to see that it is right in a fixed-width face. */
.cr-draft {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--grey-rule);
    background: var(--white);
    font-family: Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.7;
    resize: vertical;
}

/* A claim frozen because its reward has been paid. The band replaces the
   review form rather than sitting above a disabled one. */
.claim-locked {
    margin-bottom: 28px;
}

.claim-locked strong {
    display: block;
    margin-bottom: 4px;
}

/* ── THE CLAIM REVIEW PAGE ──
   The page is full width because the capture grid needs it: ten products at
   three sizes each is wider than the standard wrapper and was being squashed
   into a scroll. Everything else on the page is read rather than worked
   across, so it keeps a sensible measure instead of stretching to the window.
   Only the grid gets the extra room. */

.claim-page .detail-table,
.claim-page .errors,
.claim-page .participant-note {
    max-width: 940px;
}

/* Big enough to read a till slip, not so big it fills a wide monitor. */
.claim-page .till-slip-preview img {
    max-width: 620px;
}

/* The status and the note are a short form, not a table. Targeted by id
   because the capture grid's own inputs are inside the same form and must
   keep the widths set above. */
.claim-page #status,
.claim-page #admin_notes {
    max-width: 620px;
}

/* On a narrower screen the grid scrolls sideways, as it did before - but the
   row is now half the height it was, so far more of it is visible at once. */
@media (max-width: 1100px) {
    .claim-page .capture-grid th[scope="row"] {
        width: 240px;
    }
}

/* A campaign with fewer than three sizes pads the row so the header's colspan
   still lines up. Those pad cells take no width, so a two-size campaign does
   not carry a phantom third column of dead space. */
.capture-grid .capture-cell-empty {
    width: 0;
    padding: 0;
}

/* ── PRODUCT DASHBOARD (admin/product-dashboard.php) ── */

.pd-table .pd-rank {
    width: 40px;
    color: var(--grey);
    font-family: var(--f-head);
    font-size: 11px;
}

.pd-spark-cell {
    width: 170px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Each row's trend, scaled to its own peak so a small seller's shape is
   still readable. Heights are not comparable between rows on purpose - the
   columns beside it carry the numbers that are. */
.pd-spark {
    display: block;
    width: 150px;
    height: 30px;
}

.pd-spark-line {
    fill: none;
    stroke: var(--claim);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.pd-spark-empty {
    color: var(--grey-light);
}

.pd-table tfoot th {
    background: var(--bg);
    font-family: var(--f-head);
    font-size: 12px;
    color: var(--black);
}