/*
 * quiet-corners dashboard styles.
 *
 * Loaded only by themes/headlessmode/layouts/_default/quiet-corners-dashboard.html,
 * from a <link> sitting exactly where the <style> block these rules used to live
 * in sat. Two reasons it is a sheet of its own and not an append to style.css:
 *
 *   1. Cascade. These rules restyle Leaflet at equal specificity and without
 *      !important -- .leaflet-container, .leaflet-popup-content-wrapper and
 *      .leaflet-popup-tip all collide with vendor/leaflet.css (a #ddd map and
 *      white popups). head.html loads style.css BEFORE vendor/leaflet.css, so
 *      folding these in there would hand those three rules to Leaflet.
 *   2. Weight. ~600 lines that one page uses would otherwise download on all
 *      53 pages of the site.
 *
 * The sheet is unlayered, as the <style> block was, so it still outranks
 * everything Tailwind emits (@layer base/components/theme/utilities) regardless
 * of specificity. Keep it that way: an @layer wrapper here would silently hand
 * the page back to the utility classes.
 */
/* Remove padding from outer layout context usually set by Hugo theme */
.max-w-6xl.mx-auto.px-6.py-12 {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100vh;
}

/* Document/Body overrides for edge-to-edge feel — no overflow:hidden here:
   the page must still scroll to the footer and reflow at 400% zoom. */
body {
    margin: 0;
}

.themed-prose {
    --tw-prose-body: var(--text-secondary);
    --tw-prose-headings: var(--text-primary);
    --tw-prose-links: var(--accent-500);
    --tw-prose-bold: var(--text-primary);
    --tw-prose-code: var(--accent-500);
    --tw-prose-quotes: var(--text-muted);
}

/* Modal Backdrop */
dialog::backdrop {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

/* Tooltips */
.qc-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    cursor: help;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
}
.qc-tooltip-icon {
    color: #6ee7b7;
    font-size: 0.85em;
}
.qc-tooltip .qc-tooltip-text {
    visibility: hidden;
    width: 260px;
    background-color: var(--bg-elevated, #1e1e2e);
    color: var(--text-primary);
    text-align: left;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 0.75rem;
    font-family: var(--font-sans);
    line-height: 1.4;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-default, #333);
    pointer-events: none;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
}
.qc-tooltip .qc-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--border-default, #333) transparent transparent transparent;
}
.qc-tooltip:hover .qc-tooltip-text,
.qc-tooltip:focus .qc-tooltip-text,
.qc-tooltip:focus-within .qc-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Floating control panel.
   These rules described the horizontal control bar this panel replaced in
   #174 — a wrapping row of `align-items:center` groups. The markup is now a
   vertical stack of two-column grids, so the old `row` direction put every
   label on the same line as its slider and blew past the 207px column: the
   Remoteness readout landed on top of the Stability label, and the Stability
   and Affordability readouts landed outside the panel, on the map.
   The panel owns its own vertical rhythm here rather than via `space-y-3`,
   so there is one spacing mechanism instead of two that add up. */
.qc-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    padding: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 0.375rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
}

.filter-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.filter-select {
    padding: 0.25rem 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: 0.25rem;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    font-family: ui-monospace, monospace;
}

.filter-select:hover {
    border-color: var(--accent-500);
    color: var(--accent-400);
}

/* No fixed width. The markup gives the input `flex-1`, but a range input's
   default `min-width: auto` resolves to its intrinsic size, so a fixed
   100px could not compress into the grid column and overflowed instead. */
.qc-slider {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    accent-color: var(--accent-500);
    cursor: pointer;
}

/* Wide enough for the longest readout the JS writes: "250+" and "<=50". */
.qc-slider-val {
    color: var(--accent-400);
    font-size: 0.75rem;
    min-width: 2.75rem;
}

/* Map */
.qc-map-container {
    position: relative;
    margin-bottom: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 0.375rem;
    overflow: hidden;
}

#qc-map {
    width: 100%;
    height: 400px;
    background: #0d0d1a;
}

/* Override Leaflet for dark theme */
.leaflet-container {
    background: #0d0d1a;
    font-family: ui-monospace, monospace;
}

.leaflet-popup-content-wrapper {
    background: var(--bg-elevated, #1e1e2e);
    color: var(--text-secondary, #a0a0b0);
    border-radius: 0.375rem;
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.leaflet-popup-tip {
    background: var(--bg-elevated, #1e1e2e);
}

.leaflet-popup-content {
    margin: 0.75rem;
    line-height: 1.5;
}

.leaflet-popup-content strong {
    color: var(--accent-500, #10b981);
    font-size: 0.85rem;
}

.leaflet-popup-content .qc-popup-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.15rem 0;
}

.leaflet-popup-content .qc-popup-label {
    color: var(--text-muted, #71717a);
}

.leaflet-popup-content .qc-popup-val {
    color: var(--text-secondary, #a0a0b0);
    font-weight: 600;
}

.leaflet-control-zoom a {
    background: var(--bg-card, #18181b) !important;
    color: var(--text-muted, #71717a) !important;
    border-color: var(--border-default, #333) !important;
}

.leaflet-control-zoom a:hover {
    background: var(--bg-elevated, #1e1e2e) !important;
    color: var(--accent-500, #10b981) !important;
}

.leaflet-control-zoom a {
    background: #14141e !important;
    color: #c9c9d6 !important;
    border-color: rgba(255,255,255,0.15) !important;
}


.leaflet-control-attribution {
    /* Opaque: axe can't composite alpha over the map canvas, so translucent
       backgrounds read as indeterminate contrast in the pa11y gate. */
    background: #101018 !important;
    color: #c9c9d6 !important;
    font-size: 0.6rem !important;
}

.leaflet-control-attribution a {
    color: #c9c9d6 !important;
}

/* Load-failure banner */
.qc-error {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(127, 29, 29, 0.92);
    border: 1px solid #ef4444;
    border-radius: 0.375rem;
    color: #fecaca;
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
}

.qc-error button {
    padding: 0.2rem 0.6rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid #ef4444;
    border-radius: 0.25rem;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

/* Degraded-map notice (TopoJSON unavailable) */
.qc-map-notice {
    max-width: 230px;
    padding: 0.4rem 0.6rem;
    background: rgba(127, 29, 29, 0.85) !important;
    border: 1px solid #ef4444;
    border-radius: 0.375rem;
    color: #fecaca;
    font-family: ui-monospace, monospace;
    font-size: 0.65rem;
    line-height: 1.4;
}

.qc-legend-note {
    margin-top: 0.25rem;
    color: #f87171;
    font-style: italic;
}

/* Map legend */
.qc-legend {
    background: #14141e !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 0.375rem;
    padding: 0.6rem 0.75rem;
    font-family: ui-monospace, monospace;
    font-size: 0.65rem;
    color: #b6b6c4;
    line-height: 1.6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.6) !important;
}

.qc-legend-title {
    color: var(--text-secondary, #a0a0b0);
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.7rem;
}

.qc-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.qc-legend-dot {
    display: inline-block;
    border-radius: 50%;
    flex-shrink: 0;
}

.qc-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Table Area within Panel */
.qc-table-wrapper {
    margin-bottom: 0.5rem;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.qc-log-header {
    display: grid;
    grid-template-columns: 1.2fr 0.3fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
    gap: 0.3rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-weight: 600;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: ui-monospace, monospace;
}

.qc-log-header.sprawl-visible {
    grid-template-columns: 1.2fr 0.3fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
}

.qc-log-header span {
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
}

.qc-log-header span:hover {
    color: var(--accent-400);
}

.qc-log-header span.sort-active,
.qc-candidates-header span.sort-active {
    color: var(--accent-500);
}

.qc-candidates-header span[data-sort] {
    cursor: pointer;
    user-select: none;
}

.qc-candidates-header span[data-sort]:hover {
    color: var(--accent-400);
}

.qc-row {
    display: grid;
    grid-template-columns: 1.2fr 0.3fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
    gap: 0.3rem;
    padding: 0.3rem 0.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    align-items: center;
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 0.25rem;
}

.qc-row.sprawl-visible {
    grid-template-columns: 1.2fr 0.3fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
}

.qc-row:hover {
    background: rgba(255,255,255,0.03);
}

.qc-row:last-child {
    border-bottom: none;
}

.qc-row .qc-name {
    color: var(--text-secondary);
}

.qc-row .qc-state-col {
    color: var(--text-muted);
}

.qc-row .qc-pop {
    color: var(--text-muted);
    text-align: right;
}

.qc-score {
    padding: 0.15rem 0.4rem;
    border-radius: 0.2rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
}

/* Band is conveyed by the prefix glyph, not color alone (WCAG 1.4.1). */
.qc-score.high {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}
.qc-score.high::before {
    content: "\25B2 ";
}

.qc-score.medium {
    background: rgba(234, 179, 8, 0.2);
    color: #fbbf24;
}
.qc-score.medium::before {
    content: "\25CF ";
}

.qc-score.low {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}
.qc-score.low::before {
    content: "\25BC ";
}

.qc-metro {
    color: var(--text-subtle);
    font-size: 0.65rem;
}

/* Zero-result message (renderTable/renderCandidates empty state) */
.qc-empty {
    padding: 1rem 0.5rem;
    color: var(--text-muted);
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
    text-align: center;
}

/* Pagination */
.qc-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.qc-pagination button {
    padding: 0.3rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 0.25rem;
    color: var(--text-muted);
    cursor: pointer;
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
}

.qc-pagination button:hover:not(:disabled) {
    border-color: var(--accent-500);
    color: var(--accent-400);
}

.qc-pagination button:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Candidates Panel */
.qc-candidates-section {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.qc-candidates-header {
    display: grid;
    grid-template-columns: 1.3fr 0.3fr 0.5fr 1.0fr 0.5fr 0.5fr 0.5fr;
    gap: 0.3rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-weight: 600;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: ui-monospace, monospace;
}

.qc-candidate-row {
    display: grid;
    grid-template-columns: 1.3fr 0.3fr 0.5fr 1.0fr 0.5fr 0.5fr 0.5fr;
    gap: 0.3rem;
    padding: 0.3rem 0.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    align-items: center;
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 0.25rem;
}

.qc-candidate-row:hover {
    background: rgba(255,255,255,0.03);
}

.qc-candidate-row .qc-name {
    color: var(--text-secondary);
}

/* Trust Panel (now in modal) */
.qc-trust-panel-inner {
    padding: 1rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.5rem;
}

.qc-trust-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.qc-trust-row:last-child {
    border-bottom: none;
}

/* Mobile Support Override */
@media (max-width: 768px) {
    #qc-controls.glass-panel {
        position: relative;
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    /* The map exists on mobile only if its container has a resolved height.
       In this column the drawer keeps Tailwind's `h-full` + `shrink-0` and
       the controls keep their content height, so the two of them claim the
       whole container; #qc-map-container, left on `flex-1` (basis 0, shrink
       1), loses every remaining pixel and collapses to zero. #qc-map's
       inline `height: 100%` then resolves against nothing and Leaflet sizes
       itself into a 0px box at init. Give the container a definite height
       and let the column scroll rather than clip -- `overflow: hidden` was
       already cutting the bottom of the drawer off by the height of the
       controls, and a fixed map only made that worse.
       Height is viewport-relative so it never exceeds the screen in
       landscape; #qc-map inherits it through its own `height: 100%`. */
    .qc-dashboard-main {
        flex-direction: column !important;
        overflow-y: auto;
    }
    #qc-map-container {
        flex: 0 0 auto;
        height: 60vh;
    }
    .qc-log-header,
    .qc-row {
        grid-template-columns: 1fr 0.5fr 0.6fr 0.6fr 0.6fr;
    }
    /* Hide columns 6+ on mobile (afford, remote, sprawl) — keep Stability, the headline metric */
    .qc-log-header span:nth-child(n+6),
    .qc-row > *:nth-child(n+6) {
        display: none;
    }
    /* Same treatment for the candidates table, which kept all seven columns
       at 360px wide and squeezed the town name to a few characters. Drops
       County, Stability and Remote; Town/St/Pop/Overall stay. */
    .qc-candidates-header,
    .qc-candidate-row {
        grid-template-columns: 1.4fr 0.4fr 0.6fr 0.6fr;
    }
    .qc-candidates-header span:nth-child(4),
    .qc-candidate-row > *:nth-child(4),
    .qc-candidates-header span:nth-child(n+6),
    .qc-candidate-row > *:nth-child(n+6) {
        display: none;
    }
}