/*
    Marquee's design system, carried over from the Apps Script app it replaces.

    Two deliberate registers, because the two audiences are not the same person:

    PUBLIC — navy masthead band over a single floating white card, and TWO type registers on
    purpose: Inter for headings, input values and buttons; the browser's own sans for every
    label, hint and counter. That pairing is what the live app does, and it is why the form
    reads as a document with annotations rather than as a UI.

    STAFF — all sans, denser, closer to the tools people already have open. A scheduler works
    this list for an hour at a time, so the type is smaller, the rows are tighter, and status
    is carried by colour rather than by reading.

    The palette is one block. The campaign's brand colour lives in --brand and everything
    else is derived from it, so a rebrand is two lines rather than a search-and-replace.
*/

:root {
    /* brand */
    --brand:        #1C3C73;
    --brand-dark:   #15306b;
    --brand-tint:   #E8EEF7;
    --brand-soft:   #F4F6FB;
    --brand-border: #b5c5de;
    --accent:       #D4A843;   /* muted gold — the only saturated colour, and it means "forward" */
    --on-brand:     #ffffff;

    /* surfaces */
    --surface:      #ffffff;
    --surface-bg:   #f8f9fa;
    --surface-alt:  #fafafa;
    --surface-hover:#f1f3f4;
    --row-hover:    #f8f9ff;

    /* ink */
    --ink:          #202124;
    --ink-soft:     #5f6368;
    --ink-faint:    #999;

    /* lines */
    --border:       #dadce0;
    --border-light: #ececec;
    --border-strong:#D6DBE8;

    /* state */
    --ok:           #137333;
    --ok-bg:        #E6F4EA;
    --warn:         #A37200;
    --warn-bg:      #FEF7E0;
    --error:        #C5221F;
    --error-bg:     #FCE8E6;

    /* form */
    --radius:       6px;
    --radius-card:  12px;
    --shadow:       0 1px 3px rgba(0,0,0,.12);
    --shadow-card:  0 2px 16px rgba(28,60,115,.10);

    /* type — two registers on the public form, one on the console */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-ui:      sans-serif;                /* the browser's own, deliberately */
    --sans:         var(--font-display);

    /* status pills — background / ink pairs, one per lifecycle status */
    --pill-new-bg:       #fff3e0;  --pill-new-txt:       #e65100;
    --pill-reviewed-bg:  #e8eaf6;  --pill-reviewed-txt:  #283593;
    --pill-awaiting-bg:  #fce4ec;  --pill-awaiting-txt:  #c62828;
    --pill-tentative-bg: #fff3cd;  --pill-tentative-txt: #856404;
    --pill-accepted-bg:  #d4edda;  --pill-accepted-txt:  #155724;
    --pill-cancelled-bg: #f8d7da;  --pill-cancelled-txt: #721c24;
    --pill-archived-bg:  #f5f5f5;  --pill-archived-txt:  #757575;
    --pill-hold-bg:      #ffe0c2;  --pill-hold-txt:      #b84900;

    /* row tints — the list is scannable by colour before it is read */
    --row-held:      #fff4ec;
    --row-accepted:  #f0faf4;
    --row-cancelled: #fff5f5;
    --row-tentative: #fffdf0;
}

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

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--surface-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); }

/* ─────────────────────────────────────────────────────── public: masthead */

.pub { font-family: var(--font-display); background: #F7F8FB; min-height: 100vh; }

.pub-header { background: var(--brand); display: flex; justify-content: center; }
.pub-header-inner {
    width: 100%; max-width: 800px; display: flex; align-items: center; gap: 24px;
    padding: 18px 24px 14px;
}
.pub-mark { color: #fff; }
.pub-mark h1 { font-size: 18px; font-weight: normal; letter-spacing: .01em; line-height: 1.25; margin: 0; }
.pub-mark p { font-family: var(--font-ui); font-size: 11px; opacity: .65; margin: 3px 0 0; }

/* progress rail — dots joined by a line that fills as the wizard advances */
.pub-progress { background: var(--brand); display: flex; justify-content: center; }
.pub-progress-inner { width: 100%; max-width: 800px; padding: 0 24px 18px; }
.steps { display: flex; align-items: flex-start; position: relative; }
.steps::before {
    content: ''; position: absolute; top: 14px; left: 14px; right: 14px; height: 2px;
    background: rgba(255,255,255,.2);
}
.steps-fill {
    position: absolute; top: 14px; left: 14px; height: 2px; background: var(--accent);
    z-index: 1; transition: width .4s cubic-bezier(.25,1,.5,1);
}
.step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.step .dot {
    width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.2);
    border: 2px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center;
    font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6);
    transition: background .25s, border-color .25s, color .25s;
}
.step.done .dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.step.active .dot { background: #fff; border-color: #fff; color: var(--brand); }
.step .label {
    margin-top: 6px; font-family: var(--font-ui); font-size: 10px; color: rgba(255,255,255,.5);
    text-align: center; white-space: nowrap;
}
.step.active .label, .step.done .label { color: rgba(255,255,255,.8); }

@media (prefers-reduced-motion: reduce) { .steps-fill, .step .dot { transition: none; } }

/* ───────────────────────────────────────────────────────── public: card */

.pub-body { display: flex; justify-content: center; padding: 32px 16px 64px; }
.card {
    background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    width: 100%; max-width: 800px; overflow: hidden;
}
.card-hdr { padding: 24px 36px 18px; border-bottom: 1px solid var(--border-strong); }
.card-hdr h2 { font-size: 22px; color: var(--brand); font-weight: normal; margin: 0; }
.card-hdr p { font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; }

.fields { padding: 24px 36px; display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-family: var(--font-ui); font-size: 13px; display: flex; align-items: center; gap: 4px; }
.field .req { color: var(--error); }
.field .hint { font-family: var(--font-ui); font-size: 11px; color: var(--ink-soft); }

input[type=text], input[type=email], input[type=tel], input[type=url], input[type=search],
input[type=date], input[type=time], input[type=number], select, textarea {
    border: 1.5px solid var(--border-strong); border-radius: var(--radius);
    padding: 10px 14px; font-size: 14px; font-family: var(--sans);
    color: var(--ink); background: #fff; outline: none; width: 100%;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--brand); box-shadow: 0 0 0 3px rgba(28,60,115,.08);
}
textarea { resize: vertical; min-height: 88px; }
select {
    appearance: none; padding-right: 36px; background-repeat: no-repeat;
    background-position: right 14px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6368' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

.section-hdr {
    font-family: var(--font-ui); font-size: 12px; color: var(--ink-soft); letter-spacing: .08em;
    text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid var(--border-strong);
}

.card-nav {
    padding: 18px 36px 24px; border-top: 1px solid var(--border-strong);
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.step-count { font-family: var(--font-ui); font-size: 12px; color: var(--ink-soft); }

/* ────────────────────────────────────────────────────────────── buttons */

.btn {
    padding: 11px 28px; border-radius: var(--radius); font-size: 14px; font-family: var(--sans);
    cursor: pointer; border: 1.5px solid transparent; transition: filter .15s, border-color .15s, color .15s, background .15s;
    text-decoration: none; display: inline-flex; align-items: center; gap: 8px; line-height: 1;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(28,60,115,.2); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.12); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); padding: 12px 36px; font-size: 15px; }
.btn-accent:hover:not(:disabled) { filter: brightness(1.1); }
.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--ink-soft); }
.btn-ghost:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.btn-danger { background: #fff; border-color: #f6aea9; color: var(--error); }
.btn-danger:hover:not(:disabled) { background: var(--error-bg); }
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* ─────────────────────────────────────────────────────────────── notices */

.notice {
    font-family: var(--font-ui); font-size: 13px; border-radius: var(--radius);
    padding: 12px 16px; border-left: 4px solid var(--ink-soft); background: var(--surface-hover);
    display: flex; gap: 10px; align-items: flex-start;
}
.notice-ok    { border-left-color: var(--ok);    background: var(--ok-bg);    color: var(--ok); }
.notice-warn  { border-left-color: var(--warn);  background: var(--warn-bg);  color: var(--warn); }
.notice-error { border-left-color: var(--error); background: var(--error-bg); color: var(--error); }
.notice ul { margin: 0; padding-left: 18px; }

.success-view { text-align: center; padding: 64px 36px; }
.success-ico {
    width: 64px; height: 64px; background: var(--ok-bg); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 24px;
}
.success-view h2 { font-size: 24px; color: var(--brand); margin: 0 0 12px; font-weight: normal; }
.success-view p { font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); max-width: 440px; margin: 0 auto; line-height: 1.6; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ────────────────────────────────────────────────────────── staff: shell */

.topbar {
    background: var(--brand); color: var(--on-brand); height: 52px; padding: 0 20px;
    display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.topbar .wordmark { font-size: 17px; font-weight: 700; letter-spacing: .4px; }
.topbar .role-badge {
    background: rgba(255,255,255,.18); border-radius: 10px; padding: 2px 10px;
    font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
}
.topbar nav { display: flex; gap: 4px; margin-left: 12px; }
.topbar nav a {
    color: rgba(255,255,255,.85); text-decoration: none; font-size: 13px; padding: 6px 12px;
    border-radius: var(--radius); transition: background .15s, color .15s;
}
.topbar nav a:hover { background: #162e58; color: #fff; }
.topbar nav a.active { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.topbar .spacer { flex: 1; }
.topbar .user-email { font-size: 13px; opacity: .85; }
.topbar form { margin: 0; }
.topbar .signout {
    background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: var(--radius);
    padding: 5px 12px; font-size: 12px; font-family: var(--sans); cursor: pointer;
}
.topbar .signout:hover { background: rgba(255,255,255,.12); }

.staff { max-width: 1280px; margin: 0 auto; padding: 20px; }
.staff h1 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.staff h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.staff .sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 16px; }

.panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px;
}
.panel > h2 { padding-bottom: 10px; border-bottom: 1px solid var(--border-light); }

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.toolbar .field { flex: 0 0 auto; min-width: 170px; gap: 4px; }
.toolbar .field > label { font-size: 12px; color: var(--ink-soft); }
.toolbar input, .toolbar select { padding: 7px 12px; font-size: 13px; }
.toolbar .check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; padding-bottom: 8px; }
.toolbar .check input { width: auto; accent-color: var(--brand); }

/* ────────────────────────────────────────────────────────── staff: table */

.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th {
    text-align: left; font-weight: 700; color: var(--brand); font-size: 11px;
    text-transform: uppercase; letter-spacing: .6px; padding: 10px 12px;
    border-bottom: 1px solid var(--border); position: sticky; top: 52px; background: var(--brand-soft);
}
.grid td { padding: 11px 10px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
/* Zebra first, status wash second, hover last — in that order, so a scheduler can follow a
   row across six columns without a ruler, and a status tint still reads over the stripe.
   The stripe is applied from the loop rather than :nth-child because the expand row is a <tr>
   too, and nth-child would flip the parity of everything below an open one. */
.grid tbody tr { transition: background .1s; border-bottom: 1px solid var(--border); }
.grid tbody tr.alt { background: #f6f8fc; }
.grid tr.is-accepted  { background: var(--row-accepted); }
.grid tr.is-cancelled { background: var(--row-cancelled); }
.grid tr.is-tentative { background: var(--row-tentative); }
.grid tr.is-held      { background: var(--row-held); }
.grid tr.is-accepted.alt  { background: #e9f6ee; }
.grid tr.is-cancelled.alt { background: #ffeeee; }
.grid tr.is-tentative.alt { background: #fffbe4; }
.grid tr.is-held.alt      { background: #ffece0; }
.grid tbody tr:hover, .grid tbody tr.alt:hover { background: var(--brand-tint); }
.grid td.num, .grid th.num { text-align: right; white-space: nowrap; }
.grid a { font-weight: 600; text-decoration: none; }
.grid a:hover { text-decoration: underline; }
.grid .empty { padding: 32px; text-align: center; color: var(--ink-soft); }

/* ────────────────────────────────────────────────────────── staff: pills */

.pill {
    display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px;
    font-weight: 700; letter-spacing: .3px; white-space: nowrap; text-transform: uppercase;
    background: var(--surface-hover); color: var(--ink-soft);
}
.pill-new       { background: var(--pill-new-bg);       color: var(--pill-new-txt); }
.pill-staff_reviewed { background: var(--pill-reviewed-bg); color: var(--pill-reviewed-txt); }
.pill-awaiting_klb   { background: var(--pill-awaiting-bg); color: var(--pill-awaiting-txt); }
.pill-tentative { background: var(--pill-tentative-bg); color: var(--pill-tentative-txt); }
.pill-accepted  { background: var(--pill-accepted-bg);  color: var(--pill-accepted-txt); }
.pill-cancelled { background: var(--pill-cancelled-bg); color: var(--pill-cancelled-txt); }
.pill-archived  { background: var(--pill-archived-bg);  color: var(--pill-archived-txt); }
.pill-hold      { background: var(--pill-hold-bg);      color: var(--pill-hold-txt); }
.pill-nodate    { background: var(--error-bg);          color: var(--error); }
.pill-conflict  { background: var(--error-bg);          color: var(--error); }

/* ───────────────────────────────────────────────────── staff: detail view */

.detail-grid { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr; gap: 8px 16px; font-size: 13px; }
.detail-grid dt { color: var(--ink-soft); }
.detail-grid dd { margin: 0; }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.field-grid .field > label { font-size: 12px; color: var(--ink-soft); }
.field-grid input, .field-grid select, .field-grid textarea { padding: 8px 12px; font-size: 13px; }

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

.thread { display: flex; flex-direction: column; gap: 10px; }
.comment { border-left: 3px solid var(--brand-tint); padding: 8px 12px; background: var(--surface-alt); border-radius: 0 var(--radius) var(--radius) 0; }
.comment .meta { font-size: 11px; color: var(--ink-soft); margin-bottom: 4px; }
.comment .body { white-space: pre-wrap; font-size: 13px; }

.history { font-size: 12px; color: var(--ink-soft); }
.history td { padding: 6px 12px; border-bottom: 1px solid var(--border-comment, var(--border-light)); }

/* ──────────────────────────────────────────────────────── staff: calendar */

.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.calendar-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
                 color: var(--ink-soft); text-align: center; padding: 6px 0; }
.calendar-cell { border: 1px solid var(--border); border-radius: 4px; min-height: 92px; padding: 4px; background: var(--surface); }
.calendar-empty { border-color: transparent; background: transparent; }
.calendar-today { border-color: #4285f4; background: #e8f0fe; }
.calendar-day { font-size: 11px; color: var(--ink-soft); margin-bottom: 2px; }
.calendar-today .calendar-day { color: #1a73e8; font-weight: 700; }
.calendar-event {
    background: var(--brand-tint); color: var(--brand-dark); border-radius: 3px; padding: 2px 5px;
    margin-top: 2px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calendar-hold { background: var(--pill-hold-bg); color: var(--pill-hold-txt); }

/* ────────────────────────────────────────────────────────────── the report */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
       box-shadow: var(--shadow); padding: 14px 16px; }
.kpi .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.kpi .v { font-size: 24px; font-weight: 600; margin-top: 4px; letter-spacing: -.02em; }
.kpi-accent .v { color: var(--brand); }

.bar-row { display: grid; grid-template-columns: 12rem 1fr auto auto; gap: 12px; align-items: center;
           padding: 6px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; }
.bar-track { background: var(--surface-hover); border-radius: 3px; overflow: hidden; }
.bar { height: 10px; background: var(--brand); border-radius: 3px; min-width: 2px;
       transition: width .4s cubic-bezier(.25,1,.5,1); }
.bar-row .num { text-align: right; white-space: nowrap; color: var(--ink-soft); }

/* ───────────────────────────────────────────────────────────────── mobile */

@media (max-width: 720px) {
    .pub-header-inner, .pub-progress-inner { padding-left: 16px; padding-right: 16px; }
    .card-hdr, .fields, .card-nav { padding-left: 20px; padding-right: 20px; }
    .step .label { display: none; }
    .staff { padding: 12px; }
    .grid th { position: static; }
    .detail-grid { grid-template-columns: 1fr; gap: 2px 0; }
    .detail-grid dd { margin-bottom: 8px; }
    .bar-row { grid-template-columns: 1fr auto; }
    .bar-row .bar-track { display: none; }
}

#blazor-error-ui {
    color-scheme: light only; background: lightyellow; bottom: 0; box-sizing: border-box;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0;
    padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Checkbox rows outside the toolbar (the schema-driven checkbox fields in the request
   detail's .field-grid) need the same inline treatment the toolbar gives them. */
.field-grid .check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.field-grid .check input { width: auto; accent-color: var(--brand); }

/* ─────────────────────────────────────────────── staff: quick-filter chips */

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 12.5px;
    font-family: var(--sans); border: 1px solid var(--border); border-radius: 16px;
    background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap;
    text-decoration: none; transition: border-color .12s, background .12s, color .12s;
}
.chip:hover { border-color: var(--brand-border); background: var(--brand-soft); }
.chip.active { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; }
.chip-warn.active { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.chip-ok.active { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }

.toolbar-end { margin-left: auto; display: flex; align-items: center; gap: 12px; padding-bottom: 8px; }
.count { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }

/* second line in a table cell: the address under an event, the time under a date */
.cell-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.dash { color: var(--ink-faint); }

.grid tbody tr.clickable { cursor: pointer; }
.grid .caret { color: var(--ink-soft); font-size: 11px; }
.grid tbody tr.clickable:hover .caret { color: var(--brand); }

.linkish {
    background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
    color: var(--brand); cursor: pointer; white-space: nowrap;
}
.linkish:hover { text-decoration: underline; }

/* the row that opens inside the row — triage without losing your place in the list */
.expand-row > td { background: var(--brand-soft); border-top: 2px solid var(--brand); padding: 18px 20px; }
.expand { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: start; }
.expand-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.expand-actions .muted-line { font-size: 12.5px; color: var(--ink-soft); }

@media (max-width: 900px) {
    .expand { grid-template-columns: 1fr; gap: 16px; }
    .toolbar-end { margin-left: 0; }

    /* The bar wraps rather than scrolling off. The nav is how you get anywhere, and an
       overflowing flex row hides it past an edge nobody thinks to drag — which on a tablet
       is most of the console. 900px, not 720: the wordmark, the badge, four nav links, an
       address and three controls need about 920px before anything gives. */
    .topbar { height: auto; flex-wrap: wrap; gap: 8px 10px; }
    .topbar .user-email, .topbar .spacer { display: none; }
    .topbar nav { order: 10; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 2px; }
    .topbar nav a { flex: 0 0 auto; }
    .topbar-cta { margin-left: auto; }
}

.topbar .avatar {
    width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.22);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}

/* The one action the bar carries. Editors only — a viewer is never shown a door they cannot
   open, and the create action refuses them anyway if they find the URL. */
.topbar-cta {
    background: #fff; color: var(--brand); border-radius: var(--radius); padding: 6px 14px;
    font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background .12s;
}
.topbar-cta:hover { background: var(--brand-tint); }

/* ──────────────────────────────────────── staff: money chip, files, mentions */

.chip-money.active { border-color: var(--brand); background: #eef7f0; color: #1F7A4C; }

/* Attachments. A list of links with their weight and provenance underneath — the two
   things somebody checks before opening a file they did not upload. */
.filelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.filelist li {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 13px;
}
.filelist li:last-child { border-bottom: 0; }
.filelist a { font-weight: 600; text-decoration: none; }
.filelist a:hover { text-decoration: underline; }
.filelist .sub { margin: 0; font-size: 11.5px; color: var(--ink-soft); }
.filelist button { margin-left: auto; }

/* The @ sits inside the field rather than in the label, so the row reads as the mention
   it will become instead of as a name with a rule attached to it. */
.mention-input { display: flex; align-items: center; gap: 0; }
.mention-input .at {
    display: inline-flex; align-items: center; align-self: stretch; padding: 0 9px;
    background: var(--surface-hover); border: 1px solid var(--border); border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius); color: var(--ink-soft); font-weight: 600;
}
.mention-input input { border-radius: 0 var(--radius) var(--radius) 0; }

/* ─────────────────────────────────────────────────────────── mobile, staff */

@media (max-width: 720px) {
    .topbar { padding: 10px 14px; }
    .topbar .wordmark { font-size: 15px; }

    /* Filters stack full width. A 170px minimum makes two ragged columns on a phone. */
    .toolbar { gap: 10px; }
    .toolbar .field { flex: 1 1 100%; min-width: 0; }
    .toolbar-end { width: 100%; }

    .panel { padding: 14px; }
    .actions { flex-wrap: wrap; }

    /* The queue keeps event, date, flags and status — the four things a triage decision
       needs. Host and estimated goal are one tap away in the expanded row, which is where
       somebody goes to act on the request anyway. */
    .grid-requests th:nth-child(2), .grid-requests td:nth-child(2),
    .grid-requests th:nth-child(4), .grid-requests td:nth-child(4) { display: none; }
    .grid-requests td:first-child { max-width: 42vw; }
    /* superseded by marquee.css's column classes; see the note there */
    .grid { font-size: 12.5px; }
    .grid th, .grid td { padding: 9px 7px; }

    /* Settings. The display name goes first, then the access pill — "Revoke access" and
       "Restore access" already say which state the row is in, so the pill beside the button
       was saying it twice. What is left is who, what they can do, and the way to change it. */
    .grid-staff th:nth-child(2), .grid-staff td:nth-child(2),
    .grid-staff th:nth-child(4), .grid-staff td:nth-child(4) { display: none; }
    .grid-staff td:first-child { word-break: break-word; }

    /* Two text inputs in one row only fit if they are allowed to be narrower than their
       content wants — inputs default to a size attribute's worth of width. */
    .panel .grid input { min-width: 0; width: 100%; }
    .panel .grid { table-layout: fixed; }

    .filelist button { margin-left: 0; }
}
.grid td.is-fail { color: var(--danger, #B4232B); font-weight: 600; }

/* Below 420px something has to give. Flags goes, because the expanded row now repeats the
   clash and the hold — and the event's own name is what somebody is scanning for. */
@media (max-width: 420px) {
    .grid-requests th:nth-child(5), .grid-requests td:nth-child(5) { display: none; }
    .grid-requests td:first-child { max-width: 48vw; }
    .grid-requests td:nth-child(3) { white-space: nowrap; font-size: 11.5px; }
}