s. The
page uses real headings and paragraphs so the outline is correct
for screen readers; UA default margins would break the rhythm. */
h1.req-submit-hero-title { margin: 0 0 6px; }
p.req-submit-hero-sub { margin: 0; }
h1.section-title,
h2.section-title { margin: 0; }
p.settings-section-desc { margin: 0; }
p.callout-title { margin-top: 0; }
p.callout-text { margin: 0; }
/* ── PANEL STACKING ─────────────────────────────────────────
.settings-form supplies the 20px gap between panels, but
.req-submit-hero and .callout each carry a 20px bottom margin of
their own for standalone use, which doubles the gap here. */
.settings-form > .req-submit-hero,
.settings-form > .callout { margin-bottom: 0; }
/* Inside a panel the callout is the last child, so its spacing
belongs above it rather than below. */
.settings-section > .callout:last-child { margin: 16px 0 0; }
/* ── STATUS PILL IN A SECTION HEADER ────────────────────────
.section-header is space-between with no gap; once the heading and
the pill are long enough to meet (~320px) they touch. */
.section-header > .status-pill { margin-left: 12px; }
/* ── TIMELINE ───────────────────────────────────────────────
The stages are a real sequence, so the list is an
; the dots
supply the visible marker. .timeline already zeroes side padding. */
ol.timeline { list-style: none; margin: 0; }
/* Sits alongside the existing .done / .active / .warning dots, for a
stage that finished with a negative outcome. Colour is decoration
only here — every stage states its outcome in .timeline-detail. */
.timeline-dot.danger {
background: var(--accent-pink);
border-color: var(--accent-pink);
}
/* ═══════════════════════════════════════════════════════════
VETTING — moderator queue, review, and result pages
Extends the existing .req-row / .req-table-header list pattern
and the .status-pill / .req-detail-grid detail pattern.
═══════════════════════════════════════════════════════════ */
/* ── OUTCOME PILLS ────────────────────────────────────────
Same colours as .status-published / .status-missed, but named for
what they mean here so the markup reads correctly. */
.status-approved {
color: var(--text-accent-green);
border-color: color-mix(in srgb, var(--accent-green) 35%, transparent);
background: color-mix(in srgb, var(--accent-green) 10%, transparent);
}
.status-denied {
color: var(--text-accent-pink);
border-color: color-mix(in srgb, var(--accent-pink) 35%, transparent);
background: color-mix(in srgb, var(--accent-pink) 10%, transparent);
}
/* ── COLUMN TOKENS ────────────────────────────────────────
Mirrors the .rq-* tokens used by the requests list. */
.vt-person { flex: 1; min-width: 0; padding-right: 12px; }
.vt-teams { width: 200px; flex-shrink: 0; padding: 0 12px; }
.vt-vetter { width: 170px; flex-shrink: 0; padding: 0 12px; }
.vt-date { width: 110px; flex-shrink: 0; padding: 0 12px; }
.vt-status { width: 120px; flex-shrink: 0; padding-left: 12px; text-align: right; }
/* ── APPLICANT CELL ───────────────────────────────────────
Avatar + username over full name. */
.vet-person {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.vet-person-text {
flex: 1;
min-width: 0;
}
/* .req-subject-text / .req-subject-preview are block-level in the
requests list; here they sit inside inline spans. */
.vet-person-text .req-subject-text,
.vet-person-text .req-subject-preview { display: block; }
/* ── UNREVIEWED ROWS ──────────────────────────────────────
Three independent cues so this never relies on colour alone:
the accent edge, the tinted row, and the "New" pill inside it.
An inset shadow rather than a border-left keeps the cell text
aligned with the rows in the section below. */
.vet-row-new {
box-shadow: inset 3px 0 0 var(--accent-blue);
background: color-mix(in srgb, var(--accent-blue) 5%, transparent);
}
.vet-row-new:hover {
background: color-mix(in srgb, var(--accent-blue) 11%, transparent);
}
/* Whole-row links had no focus treatment. Same pattern as the
existing .msg-thread-row rule, applied to .req-row so it also
fixes the requests list. Drop this block if you'd rather not
touch that page. */
.req-row:focus-visible {
outline: 2px solid var(--text-accent-blue);
outline-offset: -2px;
}
/* ── SECTION SPACING ──────────────────────────────────────
The queue page stacks two list sections. */
.vet-section + .vet-section { margin-top: 32px; }
/* ── APPLICATION Q&A ──────────────────────────────────────
A : - is the prompt the applicant answered,
- the answer.
Sentence case rather than the tracked caps used for card titles,
because these are real questions, not labels. */
.vet-qa-list {
display: flex;
flex-direction: column;
gap: 20px;
margin: 0;
}
.vet-qa-question {
font-size: 13px;
font-weight: 700;
color: var(--text-secondary);
margin-bottom: 6px;
}
.vet-qa-answer {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: var(--text-primary);
white-space: pre-wrap;
/* Keep long answers inside a comfortable measure. */
max-width: 68ch;
}
.vet-qa-answer.is-blank {
color: var(--text-muted);
font-style: italic;
}
/* ── LISTED SOCIAL ACCOUNTS ───────────────────────────────
Network name in a fixed gutter so the handles line up. */
.vet-social-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.vet-social-row {
display: flex;
align-items: baseline;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--surface-border);
}
.vet-social-row:last-child { border-bottom: none; }
.vet-social-network {
width: 130px;
flex-shrink: 0;
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
}
.vet-social-handle {
flex: 1;
min-width: 0;
font-size: 14px;
color: var(--text-primary);
overflow-wrap: anywhere;
}
/* ── INLINE PILL ROW (requested teams) ────────────────────
Wraps the shared .vol-task-req-pill. */
.vet-pill-row {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* ── DECISION FORM ────────────────────────────────────────
.form-textarea is squared off at the top and 340px tall because
the newsletter editor sits a toolbar above it. Neither applies here. */
.vet-decision-notes {
min-height: 150px;
border-radius: var(--radius-sm);
}
/* ── RESPONSIVE ───────────────────────────────────────────
Below 680px the applicant and the status carry the row; the
supporting columns are still in the row's aria-label. */
@media (max-width: 680px) {
.vt-teams,
.vt-vetter,
.vt-date { display: none; }
.vt-status { width: 104px; }
.vet-social-row {
flex-direction: column;
gap: 2px;
}
.vet-social-network { width: auto; }
}
/* ── INLINE NOTE EDITING ───────────────────────────────── */
/* Pairs a note row with its edit foldout as a single list item. The row
separator moves onto the wrapper; otherwise an open panel would render
below its own row's bottom border. */
.logistical-note-item { border-bottom: 1px solid var(--surface-border); }
.logistical-note-item:last-child { border-bottom: none; }
.logistical-note-item .logistical-note-row { border-bottom: none; }
/* Groups the row's action buttons tightly rather than inheriting the row's
12px content gap, which is sized for body-to-button spacing. */
.note-row-actions {
display: flex;
gap: 6px;
align-self: flex-start;
margin-top: 2px;
flex-shrink: 0;
}
/* .event-edit-panel-inner's 24px/32px padding is sized for the full-width
event form; inside a note row it should align with the row's own padding. */
.note-edit-panel .event-edit-panel-inner { padding: 14px 16px; }
/* ═══════════════════════════════════════════════════════════
ADDITIONS FOR THE POLLS PAGES
Append to site.css. Colours come from existing tokens only,
so light/dark mode needs no extra work.
═══════════════════════════════════════════════════════════ */
/* ── GLOBAL: [hidden] ─────────────────────────────────────
Several components set display via a class, which outranks the
user-agent [hidden] rule and leaves "hidden" elements visible.
The poll list relies on this when filtering rows.
──────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }
/* ── FIELDSET RESET ───────────────────────────────────────
Identical to .affiliate-fieldset / .glyph-fieldset /
.accent-picker-fieldset. Worth collapsing all four into this
one class when you next touch those pages.
──────────────────────────────────────────────────────────── */
.plain-fieldset {
border: 0;
margin: 0;
padding: 0;
min-width: 0;
}
.plain-fieldset legend { padding: 0; }
/* ═══════════════════════════════════════════════════════════
POLL LIST (Polls/Index)
Rows reuse .req-table-header and .req-row; only the column
tokens and the list reset are new.
═══════════════════════════════════════════════════════════ */
.poll-list { overflow: hidden; }
.poll-rows {
list-style: none;
margin: 0;
padding: 0;
}
/* The row is not itself a link, so the highlight follows focus
into the question link and the action button. */
.poll-list .req-row:focus-within { background: var(--surface-hover); }
.pl-question { flex: 1; min-width: 0; padding-right: 12px; display: flex; flex-direction: column; gap: 2px; }
.pl-audience { width: 170px; flex-shrink: 0; padding: 0 12px; display: flex; flex-direction: column; gap: 2px; }
.pl-responses { width: 100px; flex-shrink: 0; padding: 0 12px; text-align: right; }
.pl-status { width: 110px; flex-shrink: 0; padding: 0 12px; }
.pl-actions { width: 64px; flex-shrink: 0; display: flex; gap: 5px; justify-content: flex-end; }
.poll-row-link {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
text-decoration: none;
line-height: 1.3;
}
.poll-row-link:hover { text-decoration: underline; }
.poll-row-link:focus-visible {
outline: 2px solid var(--text-accent-blue);
outline-offset: 2px;
border-radius: 2px;
}
/* ═══════════════════════════════════════════════════════════
POLL FORM (Polls/Create, Polls/Details edit panel)
═══════════════════════════════════════════════════════════ */
/* Sections stacked inside a single .glass card rather than one
card each, so the edit panel and the create page match. */
.poll-form-section + .poll-form-section { margin-top: 28px; }
/* ── ANSWER OPTION EDITOR ─────────────────────────────── */
.poll-option-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.poll-option-row {
display: flex;
align-items: center;
gap: 8px;
}
.poll-option-row .form-input {
flex: 1;
min-width: 0;
}
.poll-option-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
/* Disabled move/remove buttons must still read as present, but
clearly inert — and must not react to hover. */
.btn-row-action:disabled {
opacity: 0.35;
cursor: default;
}
.btn-row-action:disabled:hover {
background: transparent;
color: var(--text-muted);
border-color: var(--surface-border);
}
/* The stock .reveal-row cap of 400px is too short for a long team list. */
.reveal-row.poll-reveal-tall.open { max-height: 900px; }
/* ═══════════════════════════════════════════════════════════
CHOICE LISTS (selection mode, audience, and the ballot)
Built on .nl-send-option; only the container and a square
checkbox counterpart to .nl-send-option-radio are new.
═══════════════════════════════════════════════════════════ */
.poll-choice-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.nl-send-option-check {
width: 18px; height: 18px;
border-radius: 5px;
border: 2px solid var(--surface-border);
flex-shrink: 0;
margin-top: 1px;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.15s, background 0.15s;
}
.nl-send-option:has(input:checked) .nl-send-option-check {
border-color: var(--accent-green);
background: color-mix(in srgb, var(--accent-green) 22%, transparent);
}
/* Checkmark drawn with two borders so it inherits the accent colour */
.nl-send-option:has(input:checked) .nl-send-option-check::after {
content: '';
width: 5px; height: 9px;
margin-top: -2px;
border: solid var(--text-accent-green);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* ═══════════════════════════════════════════════════════════
READ-ONLY OPTION LIST (Polls/Details)
Rows reuse .req-info-row / .req-info-label / .req-info-value.
═══════════════════════════════════════════════════════════ */
.poll-static-list {
list-style: none;
margin: 0;
padding: 0;
}
/* .req-info-card is a title-less, full-bleed row list: it carries no padding
of its own, so a heading dropped straight into it sits at x=0 and gets
clipped by the card's overflow:hidden at the rounded corners. Inset the
heading to match the rows instead of padding the card, which would pull
the row dividers off the edges everywhere .req-info-card is used. */
.req-info-card > .nl-info-card-title {
padding: 16px 16px 0;
margin-bottom: 10px;
}
/* Small form sitting at the foot of a .req-info-card, matching the
padding and divider of the .req-info-row list above it. */
.poll-inline-form {
padding: 14px 16px;
border-top: 1px solid var(--surface-border);
}
/* ═══════════════════════════════════════════════════════════
RESULTS TABLE (Polls/Results)
A real table: the counts and shares are text, and the bars are
decorative, so screen readers get the numbers directly.
═══════════════════════════════════════════════════════════ */
.poll-results {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
}
.poll-results th,
.poll-results td {
text-align: left;
padding: 14px 8px;
border-bottom: 1px solid var(--surface-border);
vertical-align: top;
}
.poll-results thead th {
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
padding-bottom: 8px;
}
.poll-results tbody tr:last-child th,
.poll-results tbody tr:last-child td { border-bottom: none; }
.poll-results tbody th { font-weight: 400; }
.poll-col-num {
width: 90px;
text-align: right;
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
white-space: nowrap;
}
.poll-results thead .poll-col-num { text-align: right; font-weight: 700; }
.poll-result-label {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.poll-result-bar-wrap {
display: block;
height: 8px;
margin-top: 8px;
border-radius: 4px;
background: var(--surface-border);
overflow: hidden;
}
.poll-result-bar {
display: block;
height: 100%;
border-radius: 4px;
background: var(--accent-green);
}
/* ── VOTER CHIPS (non-anonymous results) ──────────────── */
.poll-voter-chips {
list-style: none;
margin: 0 0 4px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* ═══════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
/* Poll list: drop the columns that are least useful on a phone
and let the question own the row. */
.poll-list .req-table-header { display: none; }
.pl-audience,
.pl-responses { display: none; }
.poll-list .req-row { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
.pl-question { flex: 1 1 100%; padding-right: 0; }
.pl-status { width: auto; padding: 0; }
.pl-actions { width: auto; margin-left: auto; }
/* Option editor: the arrows and remove button move under the input. */
.poll-option-row { flex-wrap: wrap; }
.poll-option-row .form-input { flex: 1 1 100%; }
.poll-option-actions { margin-left: auto; }
/* Results: tighten the numeric columns so option text keeps room. */
.poll-results th,
.poll-results td { padding: 12px 4px; }
.poll-col-num { width: 64px; font-size: 13px; }
}
/* ── CHOICE CARD TEXT ─────────────────────────────────────
.nl-send-option-name / -desc are spans inside a