/*
 * insights.css — the public dashboard's visual language.
 *
 * The one deliberate page stylesheet in this project, and the reason it is
 * allowed to exist: this page has an audience the internal application does not
 * have. It is the first thing an anonymous visitor sees, it has no sidebar to
 * sit beside, and it is meant to read as a published document rather than as a
 * tool. app.css's components are sized for dense administrative tables; nothing
 * in them wants to be a full-bleed hero.
 *
 * Every rule below is scoped under `.pub`, which only base_public.html emits, so
 * none of this can reach an internal page. Colours, radii and the ink scale come
 * from app.css's tokens rather than being restated — the brand ramp has one
 * definition, and this file is a consumer of it.
 */

/* ── Shell ──────────────────────────────────────────────────────────────── */

.pub {
    background: var(--surface-1);
    color: var(--ink-900);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.pub-container {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.pub-hero {
    background: linear-gradient(150deg,
                var(--brand-900) 0%, var(--brand-800) 45%, var(--brand-600) 100%);
    color: #fff;
    padding: 3.5rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}

/* The same faint grid the login panel carries, so the two public-facing
   surfaces are recognisably the same institution. */
.pub-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: .05;
    pointer-events: none;
    z-index: 0;
}

/* Painting order, stated rather than left to the default.
   A positioned element paints above a static one whatever the document order,
   so the hero's own container was covering the counter cards that follow it —
   the cards deliberately overlap the hero by a negative margin, and were landing
   underneath. Every layer here is now explicit. */
.pub-hero > * { position: relative; z-index: 1; }

.pub-hero-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.25rem;
}

.pub-hero-seal {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    flex-shrink: 0;
}

.pub-hero-acronym {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.pub-hero-school {
    font-size: .82rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .72);
    line-height: 1.5;
    max-width: 46ch;
}

.pub-hero-title {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 .85rem;
}

.pub-hero-sub {
    font-size: 1rem;
    color: rgba(255, 255, 255, .82);
    line-height: 1.65;
    max-width: 62ch;
    margin: 0;
}

/* ── Headline counters ──────────────────────────────────────────────────── */

.pub-counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: -2.75rem;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 2;
}

.pub-counter {
    background: var(--surface-0);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 10px 30px rgba(0, 61, 51, .10);
    text-align: center;
}

.pub-counter-icon {
    font-size: 1.1rem;
    color: var(--brand-600);
    margin-bottom: .6rem;
    display: block;
}

.pub-counter-value {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--brand-900);
    letter-spacing: -.02em;
}

.pub-counter-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-500);
    margin-top: .5rem;
    font-weight: 600;
}

/* ── Filters ────────────────────────────────────────────────────────────── */

.pub-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    background: var(--surface-0);
    border: 1px solid var(--surface-3);
    border-radius: 14px;
    padding: 1.15rem 1.25rem;
    margin-bottom: 2rem;
}

.pub-filter {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 190px;
    flex: 1 1 190px;
}

.pub-filter label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--ink-500);
}

.pub-filter select {
    appearance: none;
    background: var(--surface-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236C757D'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") no-repeat right .7rem center/12px;
    border: 1px solid var(--ink-200);
    border-radius: 9px;
    padding: .6rem 2rem .6rem .8rem;
    font-size: .85rem;
    color: var(--ink-900);
    width: 100%;
}

.pub-filter select:focus {
    outline: 2px solid var(--brand-600);
    outline-offset: 1px;
    border-color: var(--brand-600);
}

.pub-filter-actions {
    display: flex;
    gap: .5rem;
}

.pub-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--brand-600);
    color: #fff;
    border: 1px solid var(--brand-600);
    border-radius: 9px;
    padding: .62rem 1.15rem;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.pub-btn:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

.pub-btn:focus-visible { outline: 2px solid var(--brand-900); outline-offset: 2px; }

.pub-btn-ghost {
    background: transparent;
    color: var(--ink-700);
    border-color: var(--ink-200);
}

.pub-btn-ghost:hover { background: var(--surface-3); color: var(--ink-900); }

/* ── Sections ───────────────────────────────────────────────────────────── */

.pub-section { margin-bottom: 3rem; }

.pub-section-head { margin-bottom: 1.35rem; }

.pub-section-head h2 {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0 0 .5rem;
    color: var(--ink-900);
}

.pub-section-head p {
    font-size: .85rem;
    color: var(--ink-500);
    line-height: 1.7;
    max-width: 74ch;
    margin: 0;
}

/* ── Panels ─────────────────────────────────────────────────────────────── */

.pub-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.pub-panel {
    background: var(--surface-0);
    border: 1px solid var(--surface-3);
    border-radius: 16px;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
}

/* A panel whose coverage is too thin to stand on its own reads differently on
   purpose — the amber edge is the first thing seen, before any number in it. */
.pub-panel-thin { border-left: 4px solid var(--warn); }

.pub-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.1rem;
}

.pub-panel-head h3 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
    color: var(--ink-900);
    display: flex;
    align-items: center;
    gap: .55rem;
}

.pub-panel-head h3 i { color: var(--brand-600); font-size: .9rem; }

.pub-panel-total {
    font-size: .72rem;
    color: var(--ink-500);
    font-weight: 600;
}

.pub-coverage {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 700;
    color: var(--warn-ink);
    background: var(--warn-tint);
    border-radius: 999px;
    padding: .25rem .6rem;
}

/* ── Charts ─────────────────────────────────────────────────────────────── */

/* Chart.js sizes to its container, so the height set inline on this wrapper —
   computed from the number of rows — is what decides the canvas. Without a
   height here the canvas collapses, because maintainAspectRatio is off. */
.pub-chart {
    position: relative;
    width: 100%;
    margin-bottom: .9rem;
}

.pub-chart canvas { display: block; }

/* ── The map ────────────────────────────────────────────────────────────── */

/* The choropleth takes the full row. The grid is auto-fit at 340px, so without
   this a map of a province would be drawn in a third of the page beside two bar
   charts, and the six municipalities on Ticao and Burias would be a few pixels
   each. */
.pub-panel-wide { grid-column: 1 / -1; }

.pub-map {
    position: relative;
    width: 100%;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem;
}

/* Masbate is a portrait province — taller than it is wide — so a 460-pixel box
   in a full-width panel leaves most of the width empty. On a desktop the map
   takes the height of the viewport instead: 550 barangays at that scale are
   shapes a pointer can find, where at 460 they were a texture. */
@media (min-width: 992px) {
    .pub-map { height: clamp(460px, 88vh, 1000px); }
}

.pub-map-svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* The municipality boundaries, drawn over the barangays so the grouping the
   table has is visible on the map too. Stroke only, and inert: what the
   pointer finds underneath is the barangay. Translucent because the two files
   were simplified independently upstream and their borders do not coincide to
   the pixel — a hard line would make that visible. */
.pub-map-outline {
    fill: none;
    stroke: var(--ink-900);
    stroke-width: 1.1;
    stroke-opacity: .55;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Fitted to one municipality. The way back sits above the map, where the
   reader's eye is when they wonder where the rest of the province went. */
.pub-map-back {
    align-self: flex-start;
    font-size: .74rem;
    font-weight: 600;
    padding: .3rem .7rem;
    border-radius: 8px;
    border: 1px solid var(--surface-3);
    background: var(--surface-0);
    color: var(--ink-700);
    cursor: pointer;
    margin-bottom: .5rem;
}

.pub-map-back i { margin-right: .3rem; }

/* The level toggle is a desktop control — see _map_filters.html. */
@media (max-width: 991.98px) {
    .pub-mapbar-level { display: none; }
}

/* A definite outline rather than a white hairline. White separates dark fills
   well and disappears entirely when there is no data to shade — which made a
   province nobody had answered for look like a panel that had failed to load.
   This reads as a border against the deepest teal and still draws the map when
   every municipality is empty. */
.pub-map-unit {
    stroke: var(--ink-300);
    stroke-width: .6;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill .18s ease, stroke .18s ease;
    outline: none;
}

.pub-map-unit:hover,
.pub-map-unit:focus-visible,
.pub-map-unit.is-hot {
    stroke: var(--ink-900);
    stroke-width: 1.6;
}

/* Focus has to be visible on its own, not only via the stroke above, because
   the stroke is also what hover does and a keyboard reader gets no hover. */
.pub-map-unit:focus-visible { stroke: var(--brand-900); stroke-width: 2.4; }

.pub-map-fallback {
    font-size: .78rem;
    color: var(--ink-500);
    text-align: center;
    max-width: 22rem;
    margin: 0;
}

.pub-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem 1rem;
    margin-bottom: .9rem;
    font-size: .7rem;
    color: var(--ink-500);
    font-variant-numeric: tabular-nums;
}

/* ── The map's own filter bar ───────────────────────────────────────────── */

/* Inside the panel, on its own tinted ground, because these controls narrow the
   map and nothing else on the page. A bar sitting above the section would be
   claiming otherwise. */
.pub-mapbar {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: 12px;
    padding: .85rem .9rem .7rem;
    margin-bottom: 1rem;
}

.pub-mapbar.is-loading { opacity: .6; }

.pub-mapbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem .8rem;
}

.pub-mapfilter { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }

/* Direct children only: the pills inside a radio group are labels too, and
   this uppercase caption style is not for them. */
.pub-mapfilter > label,
.pub-mapfilter-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ink-500);
}

.pub-mapfilter select {
    font-size: .78rem;
    padding: .32rem .5rem;
    border: 1px solid var(--surface-3);
    border-radius: 8px;
    background: var(--surface-0);
    color: var(--ink-900);
    max-width: 15rem;
}

/* Two options, and which population is drawn is the one thing a reader should
   not have to open a menu to learn — so a segmented control, not a select. */
/* Sits under a label like the selects, so it takes the row's bottom edge
   with them rather than centring itself against their full height. */
.pub-mapbar-pop { display: inline-flex; }

.pub-pop {
    font-size: .78rem;
    font-weight: 600;
    padding: .32rem .8rem;
    line-height: normal;
    border: 1px solid var(--surface-3);
    background: var(--surface-0);
    color: var(--ink-500);
    cursor: pointer;
    margin: 0;
}

.pub-pop:first-of-type { border-radius: 8px 0 0 8px; }
.pub-pop:last-of-type { border-radius: 0 8px 8px 0; border-left: 0; }
.pub-pop input { position: absolute; opacity: 0; pointer-events: none; }
.pub-pop.is-on { background: var(--brand-800); border-color: var(--brand-800); color: #fff; }
.pub-pop:focus-within { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.pub-mapbar-go,
.pub-mapbar-clear {
    font-size: .78rem;
    font-weight: 600;
    padding: .34rem .9rem;
    border-radius: 8px;
    align-self: center;
    text-decoration: none;
}

.pub-mapbar-go { border: 0; background: var(--brand-800); color: #fff; cursor: pointer; }
.pub-mapbar-clear { border: 1px solid var(--surface-3); background: var(--surface-0); color: var(--ink-500); }

/* Submit is the no-script path, so it is rendered and only then taken away —
   the class is added by the script that makes it redundant. With every change
   applying itself, a button repeating what already happened is just noise. */
.pub-mapbar.is-live .pub-mapbar-go { display: none; }

.pub-mapmore { margin-top: .6rem; }

.pub-mapmore summary {
    font-size: .74rem;
    font-weight: 600;
    color: var(--ink-700);
    cursor: pointer;
}

.pub-mapmore-hint { font-weight: 400; color: var(--ink-500); }
.pub-mapmore .pub-mapbar-row { margin-top: .6rem; }

.pub-mapbar-status {
    margin: .7rem 0 0;
    font-size: .72rem;
    color: var(--ink-500);
    line-height: 1.5;
}

/* A withheld figure should not read as a small one. */
.pub-figures-map tr.is-suppressed td { color: var(--ink-500); font-style: italic; }
.pub-map-key.is-suppressed { font-style: italic; }

/* What stands in for the legend when there is nothing to key. */
.pub-map-note {
    font-size: .72rem;
    color: var(--ink-500);
    line-height: 1.6;
    margin-bottom: .9rem;
}

.pub-map-key { display: inline-flex; align-items: center; gap: .3rem; }

.pub-map-key i {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid var(--surface-3);
}

/* Twenty-one rows is a long column under a wide map, so the table splits into
   columns of its own rather than running the width of the page one row at a
   time. */
.pub-figures-map {
    column-width: 15rem;
    column-gap: 2.5rem;
    display: block;
}

/* display: block above outranks the attribute's own display: none, and the
   two tables — one per level — are swapped with exactly that attribute. */
.pub-figures-map[hidden] { display: none; }

.pub-figures-map tbody { display: block; }

.pub-figures-map tr {
    display: flex;
    align-items: center;
    gap: .5rem;
    break-inside: avoid;
}

.pub-figures-map th { flex: 1 1 auto; }

/* A municipality nobody lives in is still listed — the map draws it, so the
   table has to account for it — but it should not read as an equal figure. */
.pub-figures-map tr.is-empty th,
.pub-figures-map tr.is-empty td { color: var(--ink-300); }

.pub-figures-map tr.is-hot {
    background: var(--surface-1);
    border-radius: 6px;
    box-shadow: 0 0 0 4px var(--surface-1);
}

/* The barangay table: a heading row per municipality, which is also the
   municipality's own figure so the group reads as a subtotal. Kept with its
   first rows across a column break. */
.pub-figures-barangays tbody { break-inside: auto; padding-bottom: .6rem; }

.pub-figures-barangays tr.pub-figures-group {
    break-after: avoid;
    margin-top: .2rem;
}

.pub-figures-barangays tr.pub-figures-group th {
    font-weight: 700;
    color: var(--ink-900);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .7rem;
}

.pub-figures-barangays tr[data-psgc] th { padding-left: .6rem; font-weight: 500; }

/* ── Figures ────────────────────────────────────────────────────────────── */

/* The numbers, under the shape. Present for every panel: the chart conveys the
   proportion and this conveys the value, and it is the only one of the two a
   screen reader or a reader without JavaScript gets. */
.pub-figures {
    width: 100%;
    border-collapse: collapse;
    font-size: .76rem;
}

.pub-figures th,
.pub-figures td {
    padding: .3rem 0;
    border-bottom: 1px solid var(--surface-1);
    vertical-align: middle;
}

.pub-figures tr:last-child th,
.pub-figures tr:last-child td { border-bottom: 0; }

.pub-figures th {
    font-weight: 500;
    color: var(--ink-700);
    text-align: left;
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.pub-figures tr.is-unset th,
.pub-figures tr.is-tail th { color: var(--ink-500); font-style: italic; }

.pub-swatch {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--ink-300);
}

.pub-figure-n {
    text-align: right;
    font-weight: 700;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-right: .6rem;
}

.pub-figure-pct {
    text-align: right;
    color: var(--ink-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width: 3.4rem;
}

.pub-panel-note {
    font-size: .72rem;
    color: var(--ink-500);
    line-height: 1.6;
    margin: 1rem 0 0;
    padding-top: .85rem;
    border-top: 1px dashed var(--surface-3);
}

.pub-panel-empty {
    font-size: .8rem;
    color: var(--ink-500);
    margin: 0;
}

/* ── Withheld ───────────────────────────────────────────────────────────── */

.pub-withheld {
    display: flex;
    gap: 1.15rem;
    background: var(--surface-0);
    border: 1px solid var(--surface-3);
    border-left: 4px solid var(--brand-600);
    border-radius: 16px;
    padding: 1.75rem;
    margin-bottom: 3rem;
}

.pub-withheld > i { font-size: 1.6rem; color: var(--brand-600); flex-shrink: 0; }

.pub-withheld h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .55rem; }

.pub-withheld p {
    font-size: .85rem;
    color: var(--ink-700);
    line-height: 1.7;
    margin: 0 0 .5rem;
    max-width: 68ch;
}

.pub-withheld-action a { color: var(--brand-700); font-weight: 600; }

/* ── Gaps ───────────────────────────────────────────────────────────────── */

.pub-gaps { padding-bottom: 3.5rem; }

.pub-gaps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.pub-gap-group {
    background: var(--surface-0);
    border: 1px solid var(--surface-3);
    border-radius: 16px;
    padding: 1.35rem;
}

.pub-gap-group h3 {
    font-size: .88rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.pub-gap-count {
    background: var(--brand-100);
    color: var(--brand-800);
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .72rem;
    font-weight: 700;
}

.pub-gap-detail {
    font-size: .75rem;
    color: var(--ink-500);
    line-height: 1.6;
    margin: 0 0 .9rem;
}

.pub-gap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.pub-gap-list li {
    font-size: .72rem;
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: 7px;
    padding: .28rem .55rem;
    color: var(--ink-700);
}

.pub-gap-notes {
    background: var(--surface-0);
    border: 1px solid var(--surface-3);
    border-radius: 16px;
    padding: 1.35rem;
}

.pub-gap-notes h3 { font-size: .88rem; font-weight: 700; margin: 0 0 .9rem; }

.pub-gap-notes dl { margin: 0; }

.pub-gap-notes dt {
    font-size: .78rem;
    font-weight: 700;
    color: var(--brand-800);
    margin-top: .85rem;
}

.pub-gap-notes dt:first-child { margin-top: 0; }

.pub-gap-notes dd {
    font-size: .76rem;
    color: var(--ink-700);
    line-height: 1.65;
    margin: .2rem 0 0;
    max-width: 78ch;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.pub-footer {
    margin-top: auto;
    background: var(--brand-900);
    color: rgba(255, 255, 255, .8);
    padding: 2rem 0;
}

.pub-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.pub-footer-name { font-size: .8rem; font-weight: 600; color: #fff; max-width: 56ch; }

.pub-footer-meta { font-size: .72rem; margin-top: .25rem; }

.pub-footer-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #fff;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 9px;
    padding: .5rem 1rem;
}

.pub-footer-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .pub-hero { padding: 2.5rem 0 3.5rem; }
    .pub-counters { margin-top: -2rem; }
    .pub-figures { font-size: .72rem; }
}