:root {
    --bg: #0f1216;
    --panel: #171b21;
    --border: #262b33;
    --text: #e7e9ec;
    --text-dim: #8a919c;
    --accent: #5b8cff;
    --chart-line: #4ade80;
    color-scheme: dark;
}

* { box-sizing: border-box; }

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

a { color: var(--accent); text-decoration: none; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 18px; margin: 0; letter-spacing: 0.02em; }
.topbar .back, .topbar .logout { color: var(--text-dim); font-size: 14px; }
.topbar .back:hover, .topbar .logout:hover { color: var(--text); }
.topbar-links { display: flex; align-items: center; gap: 18px; }
.topbar-links a { color: var(--text-dim); font-size: 14px; }
.topbar-links a:hover { color: var(--text); }

.dashboard-main { max-width: 1200px; margin: 0 auto; padding: 28px; }

/* Dashboard widgets */
.widgets-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 900px) { .widgets-row { grid-template-columns: 1fr; } }
.widget-panel { min-height: 0; }

.action-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.action-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 6px;
    border-radius: 6px; color: var(--text);
}
.action-item:hover { background: #1d222a; }
.urgency-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.urgency-dot.urgency-high { background: #ff8a8a; }
.urgency-dot.urgency-med { background: #ffcc66; }
.urgency-dot.urgency-low { background: #8fb3ff; }
.urgency-dot.instructions-pending-dot { background: #ffcc66; }
.status-badge.urgency-high { background: #5c1f1f; color: #ff8a8a; }
.status-badge.urgency-med { background: #5c4a1f; color: #ffcc66; }
.status-badge.urgency-low { background: #2a3a5c; color: #8fb3ff; }
/* The row is a container, not a link, so the resolve button can sit outside the anchor —
   a button nested inside an <a> is invalid and swallows the click. */
.action-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; color: var(--text); text-decoration: none; }
.action-resolve, .timeline-resolve { display: flex; margin: 0; }
.timeline-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.resolve-btn {
    background: transparent; border: 1px solid var(--border); color: var(--text-dim);
    font-size: 11px; line-height: 1.4; padding: 3px 9px; border-radius: 5px;
    cursor: pointer; white-space: nowrap; font-family: inherit;
}
.resolve-btn:hover { background: #1f5c33; border-color: #2c7a46; color: #6fdb95; }
/* Deliberately always visible rather than revealed on hover — this control exists to be
   used routinely, and a hidden affordance doesn't get used. Kept low-contrast so ten of
   them don't compete with the item text. */
.action-client { font-size: 12px; color: var(--text-dim); }
/* Wraps to two lines rather than truncating on one. A single nowrap line lost most of the
   text on the long items (Search Console subjects, the Instructions entries), which is the
   part you actually need to read to decide whether to click. Still clamped, so one very long
   entry can't push the rest of the list out of view. */
.action-label {
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Primary call to action. Green rather than the blue --accent so it reads as the one thing
   to do on the panel instead of blending into the link colour used everywhere else, and it
   matches the favicon. Not used for anything destructive; those get the two-click confirm.
   #15803d, not the brighter #16a34a: white on that is only 3.30:1, which passes WCAG AA for
   large text but this is 15px, so it needs the full 4.5:1. #15803d gives 5.02:1, hover 7.13:1. */
.btn-primary-lg {
    display: inline-block;
    background: #15803d;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    margin-bottom: 16px;
    transition: background 120ms ease;
}
.btn-primary-lg:hover { background: #166534; color: #fff; }
.btn-primary-lg:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Full-width revenue chart at the foot of the dashboard.
   SCOPED ON PURPOSE: .chart-panel is not ours alone — reports.php uses it for the Revenue by
   month chart and styles it further down (margin-bottom, around line 342). An unscoped rule
   here silently gave that chart a top margin too. reports.php sits under <main class="reports">
   and the dashboard under <main class="dashboard-main">, so this keeps the two apart. */
.dashboard-main .chart-panel { margin-top: 24px; }

/* Client grid */
.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.client-card {
    display: block;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
    transition: border-color 0.15s;
}
.client-card:hover { border-color: var(--accent); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-head h2 { font-size: 17px; margin: 0; color: var(--text); }
.card-url { color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.card-stats { display: flex; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }
.card-stats strong { color: var(--text); display: block; font-size: 14px; }
.outstanding strong { color: #ffb454; }
.card-next {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-dim);
}

/* Status badges */
.status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.status-lead { background: #2a3a5c; color: #8fb3ff; }
.status-in-progress { background: #5c4a1f; color: #ffcc66; }
.status-live { background: #1f5c33; color: #6fdb95; }
.status-maintenance { background: #1f4d5c; color: #6fd0e0; }
.status-paused { background: #3a3a3a; color: #aaa; }
.status-archived { background: #262626; color: #777; }
.status-none { background: #333; color: #999; }
.invoice-draft { background: #3a3a3a; color: #aaa; }
.invoice-sent { background: #5c4a1f; color: #ffcc66; }
.invoice-paid { background: #1f5c33; color: #6fdb95; }
.invoice-overdue { background: #5c1f1f; color: #ff8a8a; }
.form-error { color: #ff8a8a; }

.sub-pending { background: #3a3a3a; color: #aaa; }
.sub-active { background: #1f5c33; color: #6fdb95; }
.sub-past-due { background: #5c1f1f; color: #ff8a8a; }
.sub-canceled { background: #262626; color: #777; }

.comm-action-needed { background: #5c1f1f; color: #ff8a8a; }
.comm-waiting-on-client { background: #5c4a1f; color: #ffcc66; }
.comm-resolved { background: #1f5c33; color: #6fdb95; }

.pay-paid { background: #1f5c33; color: #6fdb95; margin-left: 6px; }
.pay-outstanding { background: #5c1f1f; color: #ff8a8a; margin-left: 6px; }
.pay-unknown { background: #333; color: #999; margin-left: 6px; }
.pay-not-invoiced { background: #2a2a45; color: #a8a8e0; margin-left: 6px; }
.instructions-pending { background: #5c4a1f; color: #ffcc66; margin-left: 6px; }
.instructions-done { background: #1f5c33; color: #6fdb95; margin-left: 6px; }
.mark-done-form { margin-top: 8px; }
.mark-done-btn {
    background: none; border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer;
}
.mark-done-btn:hover { color: var(--text); border-color: var(--accent); }

/* Client detail */
.client-detail { max-width: 1300px; margin: 0 auto; padding: 28px; }
.detail-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.detail-head h1 { margin: 0; font-size: 26px; }
.detail-url { font-size: 14px; color: var(--text-dim); }
.refresh-form { margin: 0 0 0 auto; }
.refresh-btn {
    background: var(--panel); border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.refresh-btn:hover { color: var(--text); border-color: var(--accent); }
.refresh-note { font-size: 12px; color: var(--chart-line); width: 100%; }

.detail-columns {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1000px) { .detail-columns { grid-template-columns: 1fr; } }
.detail-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* The one checkbox that arms a real send, so it reads as a statement rather than a field label. */
.auto-toggle { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text); margin-bottom: 14px; line-height: 1.4; }
.auto-toggle input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; }
.send-now-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.send-now-status { font-size: 12px; color: var(--text-dim); }

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
}
.panel h3 { margin: 0 0 14px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }

form label {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 12px;
}
form input, form select, form textarea {
    width: 100%;
    margin-top: 4px;
    background: #0f1216;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 14px;
}
form textarea { resize: vertical; }
form button {
    margin-top: 16px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 9px 18px;
    font-size: 14px;
    cursor: pointer;
}
form button:hover { opacity: 0.9; }
.meta-row { margin-top: 12px; font-size: 12px; color: var(--text-dim); }

.add-note-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.add-note-form input, .add-note-form textarea {
    background: #0f1216; border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 13px;
}
.add-note-form button {
    align-self: flex-start; background: var(--accent); color: white; border: none;
    border-radius: 6px; padding: 6px 14px; font-size: 13px; cursor: pointer;
}

/* Revenue History add-entry row */
.add-revenue-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.add-revenue-form input, .add-revenue-form select {
    background: #0f1216; border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 7px 10px; font-family: inherit; font-size: 13px;
}
.add-revenue-form input[type="number"] { width: 108px; }
.add-revenue-form input[type="text"] { flex: 1; min-width: 150px; }
.add-revenue-form button {
    background: var(--accent); color: white; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; cursor: pointer;
}

/* Pipeline */
.add-lead-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.add-lead-form input, .add-lead-form select, .add-lead-form textarea {
    background: #0f1216; border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 7px 10px; font-family: inherit; font-size: 13px;
}
.add-lead-form input[type="text"], .add-lead-form input[type="email"] { flex: 1; min-width: 140px; }
.add-lead-form textarea { flex: 1; min-width: 160px; resize: vertical; }
.add-lead-form button {
    background: var(--accent); color: white; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; cursor: pointer;
}

.pipeline-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .pipeline-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pipeline-board { grid-template-columns: 1fr; } }

.pipeline-column {
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px; min-height: 100px;
}
.pipeline-column-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim);
    margin: 0 0 12px;
}
.pipeline-count {
    background: #0f1216; border-radius: 10px; padding: 1px 8px; font-size: 11px;
    color: var(--text-dim);
}

.lead-card {
    background: #0f1216; border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 12px; margin-bottom: 10px;
}
.lead-card:last-child { margin-bottom: 0; }
.lead-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13px; }
.lead-value { color: var(--chart-line); font-weight: 600; font-size: 12px; white-space: nowrap; }
.lead-meta { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.lead-next { font-size: 12px; color: var(--text); margin-top: 6px; }
.lead-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.lead-btn {
    background: none; border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 5px; padding: 4px 8px; font-size: 11px; cursor: pointer;
}
.lead-btn:hover { color: var(--text); border-color: var(--accent); }
a.lead-btn { display: inline-block; text-decoration: none; white-space: nowrap; }
.lead-stage-select {
    background: #171b21; border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 5px; padding: 4px 6px; font-size: 11px; flex: 1;
}

.timeline { display: flex; flex-direction: column; gap: 14px; max-height: 640px; overflow-y: auto; }
.timeline-item { border-top: 1px solid var(--border); padding-top: 12px; }
.timeline-item:first-child { border-top: none; padding-top: 0; }
.timeline-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.source-tag { font-size: 10px; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; }
.timeline-date { color: var(--text-dim); font-size: 12px; margin-left: auto; }
.timeline-summary { font-size: 13px; color: var(--text-dim); margin: 6px 0 0; white-space: pre-wrap; }
.thread-link { font-size: 12px; display: inline-block; margin-top: 6px; }

.invoice-row { border-top: 1px solid var(--border); padding: 12px 0; }
.invoice-row:first-child { border-top: none; padding-top: 0; }
.invoice-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.invoice-meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

/* Invoice row actions. Opening the invoice was a 12px text link, which read as a footnote on
   a row whose whole point is "open this". .btn-sm sits between .resolve-btn and
   .btn-primary-lg: clearly a control, without competing with the green Create New Invoice
   above the list. */
/* nowrap, not wrap: the two controls belong together and must never split across lines,
   however narrow the Billing panel gets. They are short enough that they always fit. */
/* align-items:center, NOT stretch. Stretch was tried and is wrong here: it grew the anchor to
   the container's height while the button, one level down inside its form, kept its own, which
   made the mismatch worse rather than better. */
.invoice-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-top: 10px; }
.invoice-actions .thread-link { margin-top: 0; }
/* The form exists only to carry the CSRF token and the POST. Making it a flex item that
   stretches means the button inside it is exactly as tall as the anchor beside it, rather than
   sitting on a text baseline the anchor does not share. */
.invoice-actions form { margin: 0; display: flex; }
/* Outlined, and coloured to say what each one does: the accent blue used for every other link
   on the dashboard for the safe action, red for the destructive one. Both colours are checked
   against the --panel background rather than picked by eye — #5b8cff gives 5.50:1 and #f87171
   6.27:1, so both clear WCAG AA at this 12px size. */
/* inline-flex, not inline-block, and on BOTH: one of these is an <a> and the other a <button>,
   and the two lay their text out differently. An anchor puts it on a text baseline while a
   button centres it in an anonymous box, so identical padding still produced labels sitting a
   pixel or two apart. Centring both explicitly makes the element type stop mattering. */
.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
/* Hover tints the fill rather than flooding it, so the outline stays the shape of the control
   and the label does not have to change colour to stay legible. */
.btn-sm:hover { background: rgba(91, 140, 255, 0.14); border-color: #8fb3ff; color: #8fb3ff; }
.btn-sm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-danger { border-color: #f87171; color: #f87171; }
.btn-danger:hover { background: rgba(248, 113, 113, 0.14); border-color: #fca5a5; color: #fca5a5; }
.btn-danger:focus-visible { outline-color: #f87171; }
/* Armed is the one state that fills solid. A second click deletes, so it should stop looking
   like the outlined button it was a moment ago. */
.btn-danger.is-armed { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-danger.is-armed:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
/* Same hex pair as the invoice-sent / invoice-paid status badges, so a button reads as the
   same action as the badge it produces. */
.btn-yellow { border-color: #ffcc66; color: #ffcc66; }
.btn-yellow:hover { background: rgba(255, 204, 102, 0.14); border-color: #ffd980; color: #ffd980; }
.btn-yellow:focus-visible { outline-color: #ffcc66; }
.btn-green { border-color: #6fdb95; color: #6fdb95; }
.btn-green:hover { background: rgba(111, 219, 149, 0.14); border-color: #8ce6ab; color: #8ce6ab; }
.btn-green:focus-visible { outline-color: #6fdb95; }
/* Delete is the one control on the row that isn't a normal workflow step, so it sits apart:
   smaller than its siblings and pushed to the far right of the row rather than grouped with them. */
.btn-xs { font-size: 11px; padding: 3px 8px; margin-left: auto; }

.empty { color: var(--text-dim); font-size: 13px; }

.activity-panel { margin-top: 20px; }
.revenue-total { float: right; color: var(--accent); font-weight: 600; text-transform: none; letter-spacing: normal; font-size: 13px; }
.commit-row {
    display: flex; align-items: center; gap: 12px; padding: 8px 0;
    border-top: 1px solid var(--border); font-size: 13px;
}
.commit-row:first-of-type { border-top: none; }
.commit-sha { font-family: monospace; color: var(--text-dim); font-size: 12px; }
.commit-message { flex: 1; }
.commit-date { color: var(--text-dim); font-size: 12px; }

/* Reports */
.reports { max-width: 1300px; margin: 0 auto; padding: 28px; }
.reports h1 { margin: 0 0 20px; font-size: 24px; }

.filter-bar {
    display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 20px; margin-bottom: 20px;
}
.filter-bar label { font-size: 12px; color: var(--text-dim); display: flex; flex-direction: column; gap: 4px; }
.filter-bar input, .filter-bar select {
    background: #0f1216; border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 7px 10px; font-size: 13px; font-family: inherit;
}
.filter-bar button {
    background: var(--accent); color: white; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; cursor: pointer; height: 34px;
}
.reset-link { font-size: 13px; color: var(--text-dim); align-self: center; }
.reset-link:hover { color: var(--text); }

.summary-row { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.summary-tile {
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 18px 24px; min-width: 160px;
}
.summary-value { font-size: 26px; font-weight: 600; color: var(--accent); }
.summary-label { font-size: 12px; color: var(--text-dim); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }

.chart-panel { margin-bottom: 20px; }
/* Tiles are --panel by default, which is the same colour as a panel, so inside one they vanish.
   On client.php they sit in a panel, so they drop to the page background to keep an edge. */
.client-revenue .summary-tile { background: var(--bg); }
.client-revenue .summary-row { margin-bottom: 4px; }
.client-revenue .summary-value.not-invoiced { color: var(--text-dim); }
.line-chart { overflow: visible; }
.grid-line { stroke: var(--border); stroke-width: 1; }
.axis-label { fill: var(--text-dim); font-size: 11px; }
.chart-area { fill: var(--chart-line); opacity: 0.12; }
.chart-line { fill: none; stroke: var(--chart-line); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-point { fill: var(--chart-line); stroke: none; }
.point-hit { fill: transparent; cursor: pointer; }
.point-group .chart-tooltip { opacity: 0; transition: opacity 0.05s ease; pointer-events: none; }
.point-group:hover .chart-tooltip { opacity: 1; }
.chart-tooltip-bg { fill: #000; opacity: 0.85; }
.chart-tooltip-text { fill: #fff; font-size: 11px; }

.outstanding-tile .summary-value { color: #ffb454; }
.not-invoiced-tile .summary-value { color: #a8a8e0; }

/* Login */
.login-page { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-box {
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 36px; width: 280px; text-align: center;
}
.login-box h1 { font-size: 18px; margin: 0 0 18px; }
.login-box input {
    width: 100%; background: #0f1216; border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 10px 12px; font-size: 14px; margin-bottom: 12px;
}
.login-box button {
    width: 100%; background: var(--accent); color: white; border: none;
    border-radius: 6px; padding: 10px; font-size: 14px; cursor: pointer;
}
.login-box .error { color: #ff8a8a; font-size: 13px; margin-bottom: 10px; }

/* Search & Ask */
.page-title { font-size: 20px; margin: 0 0 18px; }
.topbar h1 .plain-link { color: var(--text); }
.search-panel { margin-bottom: 18px; }
.search-form { display: flex; gap: 8px; align-items: stretch; }
.search-form input[name="q"] {
    flex: 1; background: #0f1216; border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 10px 12px; font-size: 14px; min-width: 0;
}
.search-btn {
    background: #212832; border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 10px 16px; font-size: 14px; cursor: pointer;
    white-space: nowrap; font-family: inherit;
}
.search-btn:hover { background: #2b3441; }
.ask-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.ask-btn:hover { background: #4a7bef; }
.ask-btn.is-loading, .ask-btn:disabled { background: #37527f; border-color: #37527f; cursor: progress; }
/* Holds the Ask button's POST fields; the button itself sits in the visible form. */
.hidden-form { display: none; }
.search-hint { color: var(--text-dim); font-size: 12px; margin: 10px 0 0; line-height: 1.5; }
.asked-question { color: var(--text-dim); font-size: 13px; font-style: italic; margin: 0 0 12px; }
.ask-answer { font-size: 14px; line-height: 1.6; }
.search-group {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-dim); margin: 18px 0 8px; font-weight: 600;
}
.search-group:first-of-type { margin-top: 6px; }
.search-results { display: flex; flex-direction: column; }
.search-row {
    display: flex; flex-direction: column; gap: 3px;
    /* Without this, children stretch across the full row on the cross axis and a status
       badge renders as a full-width bar. */
    align-items: flex-start;
    padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px;
}
.search-row:first-child { border-top: none; }
.search-title { font-weight: 600; }
a.search-title { color: var(--accent); }
.search-meta { color: var(--text-dim); font-size: 12px; }
.search-dim { color: var(--text-dim); font-size: 12px; line-height: 1.5; }
@media (max-width: 640px) {
    .search-form { flex-wrap: wrap; }
    .search-form input[name="q"] { flex-basis: 100%; }
}