/**
 * The story behind a major issue.
 *
 * Colour does exactly one job here: the cost bars carry magnitude in a single
 * brand hue (#007AA3, validated at >=3:1 on the page surface). Speaker
 * attribution is text, never a hue, because a reader who cannot separate two
 * colours must still be able to tell the Water Bureau from a resident at the
 * microphone. Bars are bars and not a line on purpose: the figures measure
 * different things, and a line would assert one quantity rising smoothly.
 */

.issue-story {
    --is-bar: #007AA3;
    --is-bar-actual: #005C7A;
    --is-ink: var(--color-neutral-800, #292623);
    --is-ink-soft: var(--color-neutral-600, #58524B);
    --is-ink-mute: var(--color-neutral-500, #7C736A);
    --is-rule: var(--color-neutral-200, #E8E6E3);
    --is-surface: var(--color-neutral-50, #FAFAF9);
    display: grid;
    gap: 1.5rem;
    margin: 1.5rem 0 1.25rem;
}

/* ---------- narrative blocks ---------- */

.is-block { display: grid; gap: 0.5rem; }

.is-block-label {
    margin: 0;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--is-ink-mute);
}

.is-block-text,
.is-block-lede {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--is-ink);
}

.is-quote {
    margin: 0.25rem 0 0;
    padding: 0.6rem 0 0.6rem 0.9rem;
    border-left: 2px solid var(--is-bar);
    background: none;
}

.is-quote p {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--is-ink-soft);
    /* Transcripts arrive in capitals; we neither hide that nor shout it. */
    text-transform: none;
}

.is-quote cite { font-style: normal; }

/* ---------- who said it ---------- */

.is-said {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--is-ink-mute);
    border: 1px solid var(--is-rule);
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    white-space: nowrap;
}

/* City sources read as the record; testimony reads as a voice in the room.
   The distinction is carried by the words in the chip — this only weights it. */
.is-said-city_staff,
.is-said-official_record { color: var(--is-ink); border-color: var(--color-neutral-400, #ABA39C); }
.is-said-unclear { font-style: italic; }

/* ---------- citations ---------- */
/* The link is the point: a claim a reader cannot go and check is an assertion.
   It sits next to the speaker chip and reads as a source line, not a button. */

.is-cite {
    display: inline-block;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--is-bar);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.is-cite:hover,
.is-cite:focus-visible {
    border-bottom-color: currentColor;
}

.is-cite-date {
    color: var(--is-ink-mute);
    margin-left: 0.35rem;
}

.is-attrib {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.55rem;
}

.is-quote cite {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.55rem;
}

/* ---------- cost trajectory ---------- */

.is-costs { margin: 0; }

.is-costs-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--is-ink-mute);
    margin-bottom: 0.75rem;
}

.is-costs-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
}

.is-key {
    display: inline-block;
    width: 1.1rem;
    height: 0.5rem;
    border-radius: 2px;
    vertical-align: middle;
}

.is-key-est { background: var(--is-bar); }
.is-key-act {
    background: transparent;
    border: 2px solid var(--is-bar-actual);
}

.is-costs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.is-cost { display: grid; gap: 0.2rem; }

.is-cost-when {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--is-ink-mute);
}

/* The bar sits on its own full-width track under its label. Putting the two
   side by side let the widest bar take the whole row and crush its own label
   into an 11-line column — the largest number became the least readable. */
.is-cost-bar-wrap {
    display: block;
    width: 100%;
    min-height: 0.75rem;
}

.is-cost-bar {
    display: block;
    height: 0.75rem;
    /* Rounded only at the data end, anchored flat to the baseline. */
    border-radius: 0 4px 4px 0;
    background: var(--is-bar);
    flex: 0 0 auto;
    min-width: 3px;
}

.is-cost-actual .is-cost-bar {
    background: transparent;
    border: 2px solid var(--is-bar-actual);
    box-sizing: border-box;
}

.is-cost-amount {
    font-family: var(--font-sans, sans-serif);
    font-size: 0.95rem;
    color: var(--is-ink);
    line-height: 1.4;
}

.is-cost-amount strong { font-weight: 700; }

.is-cost-qual {
    font-weight: 400;
    color: var(--is-ink-soft);
}

.is-cost-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--is-ink-soft);
}

.is-cost-covers { flex: 1 1 14rem; min-width: 0; }

/* ---------- alternatives ---------- */

.is-alts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.is-alt {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.75rem;
    align-items: start;
}

.is-alt-status {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.18rem 0.4rem;
    border-radius: 3px;
    text-align: center;
    background: var(--is-surface);
    border: 1px solid var(--is-rule);
    color: var(--is-ink-soft);
}

.is-alt-chosen .is-alt-status { border-color: var(--is-bar); color: var(--is-bar); }
.is-alt-rejected .is-alt-status { text-decoration: line-through; }

.is-alt-body { display: grid; gap: 0.3rem; font-size: 0.92rem; line-height: 1.5; }
.is-alt-body strong { color: var(--is-ink); font-weight: 700; }
.is-alt-why { color: var(--is-ink-soft); }
.is-alt-body .is-said { justify-self: start; }

/* ---------- disputes ---------- */

.is-disputes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.is-disputes li {
    display: grid;
    gap: 0.3rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--is-rule);
}

.is-dispute-claim {
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--is-ink);
}

.is-disputes li .is-said { justify-self: start; }

.is-disputes-note,
.is-costs-note {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--is-ink-mute);
}

/* ---------- compact (front-page slide) ---------- */

.issue-story-compact { gap: 1.15rem; }
.issue-story-compact .is-block-text { font-size: 0.95rem; }
.issue-story-compact .is-quote p { font-size: 0.85rem; }
.issue-story-compact .is-cost-covers { display: none; }

/* ---------- phone ---------- */

@media (max-width: 600px) {
    .issue-story { gap: 1.25rem; }
    .is-alt { grid-template-columns: 1fr; gap: 0.3rem; }
    .is-alt-status { justify-self: start; }
    .is-cost-bar { max-width: 100%; }
    .is-cost-covers { flex: 1 1 100%; }
}

/* ---------- dark mode ---------- */
/* Stepped from the same brand ramp against the dark surface, not flipped:
   #33CCFF validates at >=3:1 on #1a1a19 where #007AA3 does not. */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .issue-story {
        --is-bar: #33CCFF;
        --is-bar-actual: #80D7F5;
        --is-ink: var(--color-neutral-100, #F6F5F4);
        --is-ink-soft: var(--color-neutral-300, #D7D4D0);
        --is-ink-mute: var(--color-neutral-400, #ABA39C);
        --is-rule: var(--color-neutral-700, #45403B);
        --is-surface: var(--color-neutral-800, #292623);
    }
}

:root[data-theme="dark"] .issue-story {
    --is-bar: #33CCFF;
    --is-bar-actual: #80D7F5;
    --is-ink: var(--color-neutral-100, #F6F5F4);
    --is-ink-soft: var(--color-neutral-300, #D7D4D0);
    --is-ink-mute: var(--color-neutral-400, #ABA39C);
    --is-rule: var(--color-neutral-700, #45403B);
    --is-surface: var(--color-neutral-800, #292623);
}

/* ---------- forced colours / print ---------- */

@media (forced-colors: active) {
    .is-cost-bar { border: 2px solid CanvasText; background: CanvasText; }
    .is-cost-actual .is-cost-bar { background: Canvas; }
}

/* ---------- money trail ---------- */
/* A table, not a chart: four columns of different kinds (a name, a count, a
   sum, a presence/absence) have no shared scale to plot against. */

.is-money {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.75rem;
    font-size: 0.88rem;
}

.is-money th,
.is-money td {
    text-align: left;
    padding: 0.55rem 0.7rem 0.55rem 0;
    border-bottom: 1px solid var(--is-rule);
    vertical-align: top;
}

.is-money thead th {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--is-ink-mute);
}

.is-money tbody th { font-weight: 700; color: var(--is-ink); }

.is-money-span {
    display: block;
    font-weight: 400;
    font-size: 0.74rem;
    color: var(--is-ink-mute);
}

.is-money-amt {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--is-ink);
    white-space: nowrap;
}

/* Absence is the finding here, so it is stated in words and not left blank. */
.is-money-none { font-weight: 700; color: var(--is-ink); }

.is-money tfoot th,
.is-money tfoot td {
    border-bottom: none;
    border-top: 2px solid var(--is-ink-mute);
    font-size: 0.82rem;
    color: var(--is-ink-soft);
}

@media (max-width: 600px) {
    .is-money { font-size: 0.8rem; }
    .is-money th, .is-money td { padding-right: 0.4rem; }
}

/* ---------- computed patterns ---------- */
/* Set apart from the quoted narrative on purpose. A quote can be checked by
   watching the meeting; a count can only be checked by reading the method, so
   the method travels with it rather than living in a footnote elsewhere. */

.is-block-pattern { gap: 0.9rem; }

.is-finding {
    display: grid;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    background: var(--is-surface);
    border-left: 3px solid var(--is-bar);
    border-radius: 0 4px 4px 0;
}

.is-finding-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--is-ink);
}

.is-finding-summary {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--is-ink-soft);
}

.is-finding-evidence {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.is-finding-evidence li { display: grid; gap: 0.25rem; }

.is-finding-quote {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--is-ink-soft);
}

.is-method { font-size: 0.78rem; color: var(--is-ink-mute); }

.is-method summary {
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--is-ink-soft);
}

.is-method p { margin: 0.5rem 0 0; line-height: 1.5; }

@media (max-width: 600px) {
    .is-finding { padding: 0.75rem 0.8rem; }
}

/* ---------- measured outcomes ---------- */
/* Two series, two hues, validated against both surfaces:
   light #007AA3 / #8A5CF6, dark #0090C4 / #8A5CF6 — all checks pass.
   Neither is a status colour: the theme's amber reads as a warning, and an
   amber "unsheltered" segment would be editorialising in the palette. */

.is-block-metrics { --m1: #007AA3; --m2: #8A5CF6; gap: 1.25rem; }

.is-metric { margin: 0 0 1.25rem; }

.is-metric-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.9rem;
    margin-bottom: 0.7rem;
}

.is-metric-name {
    font-family: var(--font-sans, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--is-ink-mute);
}

.is-metric-change {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--is-ink);
}

.is-metric-legend {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.8rem;
    font-size: 0.78rem;
    color: var(--is-ink-soft);
}

.is-mkey {
    display: inline-block;
    width: 1rem;
    height: 0.55rem;
    border-radius: 2px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.is-mkey-0 { background: var(--m1); }
.is-mkey-1 { background: var(--m2); }

.is-metric-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }

.is-metric-row {
    display: grid;
    grid-template-columns: 3.2rem 1fr auto;
    align-items: center;
    gap: 0.6rem;
}

.is-metric-year {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--is-ink-mute);
}

.is-metric-bar {
    display: flex;
    height: 0.85rem;
    border-radius: 0 4px 4px 0;
    overflow: hidden;
    min-width: 3px;
    /* 2px of surface between stacked segments, so the boundary is a gap and
       not a colour change a low-vision reader has to find. */
    gap: 2px;
}

.is-mseg-0 { background: var(--m1); }
.is-mseg-1 { background: var(--m2); }
.is-mseg { display: block; height: 100%; }

.is-metric-value {
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--is-ink);
    white-space: nowrap;
}

.is-metric-table { margin-top: 0.7rem; font-size: 0.78rem; color: var(--is-ink-mute); }
.is-metric-table summary { cursor: pointer; font-weight: 700; color: var(--is-ink-soft); }
.is-metric-table table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.is-metric-table th, .is-metric-table td {
    text-align: left; padding: 0.35rem 0.6rem 0.35rem 0;
    border-bottom: 1px solid var(--is-rule); font-variant-numeric: tabular-nums;
}
.is-metric-table thead th { color: var(--is-ink-mute); font-weight: 700; }

.is-metric-source { margin: 0.5rem 0 0; font-size: 0.76rem; color: var(--is-ink-mute); }
.is-metric-source a { color: var(--is-bar); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .is-block-metrics { --m1: #0090C4; --m2: #8A5CF6; }
}
:root[data-theme="dark"] .is-block-metrics { --m1: #0090C4; --m2: #8A5CF6; }

@media (max-width: 600px) {
    .is-metric-row { grid-template-columns: 2.8rem 1fr; }
    .is-metric-value { grid-column: 2; justify-self: end; }
}

@media (forced-colors: active) {
    .is-mseg-0 { background: CanvasText; }
    .is-mseg-1 { background: Canvas; border: 1px solid CanvasText; }
}

.is-metric-unit { font-weight: 400; color: var(--is-ink-mute); font-size: 0.78rem; }

/* ---------- how council voted ---------- */
/* A failed item is marked by colour AND by the word "failed" AND by a heavier
   rule — never colour alone, which is the rule for status. #B45309 clears 3:1
   on the light surface, #F0A868 on the dark one. */

.is-block-votes { --v-fail: #B45309; }

.is-votes-summary {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--is-ink-soft);
}

.is-votes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.is-vote {
    display: grid;
    gap: 0.3rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--is-rule);
}

.is-vote-split { border-left-color: var(--is-bar); }
.is-vote-failed { border-left-width: 4px; border-left-color: var(--v-fail); }

.is-vote-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.7rem;
}

.is-vote-tally {
    font-family: var(--font-sans, sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--is-ink);
}

.is-vote-outcome {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--is-ink-mute);
}

.is-vote-failed .is-vote-outcome { color: var(--v-fail); }

.is-vote-absent,
.is-vote-date { font-size: 0.76rem; color: var(--is-ink-mute); }
.is-vote-date { margin-left: auto; }

.is-vote-title {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--is-ink-soft);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .is-block-votes { --v-fail: #F0A868; }
}
:root[data-theme="dark"] .is-block-votes { --v-fail: #F0A868; }

@media (max-width: 600px) {
    .is-vote-date { margin-left: 0; }
}