/* sidebar — kpi_grid/kpi_tile, active_channels, top_narratives,
   sidebar_section. Bespoke bits (AC-3 closed list): share bars, the KPI
   left-accent border, brand-token colours; their sizes resolve through the
   --sp- and --bar-h token families in static/style.css.
   Layout and typography Bootstrap does express lives on the markup. */

.pm-sb-section {
    border-bottom: 1px solid var(--div);
    margin-bottom: var(--sp-4xl);
}

/* `padding-bottom` needs !important to drop the .pb-4 utility the markup
   carries — which section is last is a pseudo-class, not something a class
   on the element can express. */
.pm-sb-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0 !important; }

/* The design reference's bordered card (Channel.html:39) as an opt-in
   modifier — `is-card` is emitted INSTEAD of the markup's `.pb-4`, so this
   padding has no !important utility to fight. */
.pm-sb-section.is-card {
    background: var(--pm-surface);
    border: 1px solid var(--div);
    padding: var(--sp-xl);
}

/* The `:last-child` rule above zeroes padding-bottom and drops border-bottom
   (with !important, to beat the .pb-4 the hairline sections carry). A card
   carries no .pb-4 and must keep all four sides of its frame, so the (0,3,0)
   selector restates both rather than relying on source order. */
.pm-sb-section.is-card:last-child {
    padding-bottom: var(--sp-xl) !important;
    border-bottom: 1px solid var(--div);
}

/* The design reference's card headings sit clear of their body
   (.h-card h3{margin-bottom:14px}, Channel.html:40); --sp-lg is exactly
   14px. The markup's own `.mb-1` utility (0.25rem, !important) is what
   needs beating -- same pattern as the :last-child padding overrides
   above. Scoped to `.pm-sb-section.is-card .pm-sb-head-row` (this page
   only, ISSUE #287 -- is-card appears nowhere on GET /) so
   chart_card/sidebar_section's shared head-row rhythm on GET / is
   untouched. */
.pm-sb-section.is-card .pm-sb-head-row { margin-bottom: var(--sp-lg) !important; }

/* Window sub-label shared by chart_card and sidebar_section; its placement
   lives on the markup (sidebar_section.html). */
.pm-sb-window { font-size: var(--fs-2xs); color: var(--text2); }

.pm-sec-lbl {
    font-size: var(--fs-2xs);
    color: var(--orange-700); /* A11Y: --orange (#F26522) is 3.15:1 on white, fails AA; --orange-700 = #C24B0E, 4.82:1 */
}

/* The design reference's card headings are grey, not orange
   (.cd-chart h3 / .h-card h3 { color: var(--text2) }, Channel.html:33,
   :40), one step larger than the shipped --fs-2xs (11px) -- --fs-xs
   (12px) is the next rung on the three-token scale, not a new literal.
   --text2 (#5A6478) measures 5.95:1 on white/--pm-surface via the same
   _contrast helper as propamon/web/app.py -- clears AA's 4.5:1 normal-
   text floor with margin (these are real informational headings, not
   decorative, so the ratio binds here unlike a purely decorative
   glyph). Scoped to `.pm-sb-section.is-card .pm-sec-lbl` -- `is-card`
   appears nowhere on GET /, so its own sidebar headings keep
   --orange-700 untouched
   (test_pm_sec_lbl_bare_rule_keeps_its_orange_colour_and_no_border's
   sibling guard pins the bare rule's colour too). Three classes across
   the selector give it (0,3,0) specificity, beating the bare
   .pm-sec-lbl rule's (0,1,0) regardless of stylesheet load order. */
.pm-sb-section.is-card .pm-sec-lbl {
    color: var(--text2);
    font-size: var(--fs-xs);
}

/* `text-decoration` stays bespoke: the .text-decoration-none utility is
   !important and would defeat the hover underline. */
.pm-sec-link {
    font-size: var(--fs-xs);
    color: var(--navy);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 24px; /* A11Y: WCAG 2.5.8 minimum target size — text-only line box was ~18px */
}
.pm-sec-link:hover { text-decoration: underline; }

/* KPI tile (the 2x2 grid itself is Bootstrap's `row row-cols-2`, kpi_grid.html) */
.pm-kstat {
    gap: var(--sp-4xs);
    border-left: 2px solid var(--orange);
}

.pm-kstat-val {
    font-family: var(--ff-serif);
    color: var(--navy);
}

.pm-kstat-lbl { font-size: var(--fs-2xs); color: var(--text2); margin-top: var(--sp-5xs); } /* A11Y: was --text3 (#9CA3AF fails AA); --text2 = #5A6478, 5.95:1 */
.pm-kstat-delta { font-size: var(--fs-2xs); margin-top: var(--sp-5xs); }
.pm-kstat-delta.up { color: var(--green-700); } /* A11Y: --green is 3.39:1 on white, fails AA; --green-700 = #15803D, 5.02:1 */
.pm-kstat-delta.dn { color: var(--red); }

/* Active channels */
.pm-ch-list { gap: var(--sp-sm); margin-top: var(--sp-lg); }
.pm-ch-rank { font-size: var(--fs-2xs); color: var(--text2); width: 14px; } /* A11Y: was --text3 (#9CA3AF fails AA); --text2 = #5A6478, 5.95:1 */
.pm-ch-dot { width: 8px; height: 8px; border-radius: var(--radius-sm); }
.pm-ch-name { font-size: var(--fs-xs); color: var(--text); flex: 1; }

/* ISSUE #287: a linked row (element-scoped so the plain-<span> miss
   case is unaffected). */
a.pm-ch-name:hover { text-decoration: underline; }
a.pm-ch-name:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.pm-ch-pct { font-size: var(--fs-xs); color: var(--navy); width: 34px; }
/* `margin-left` aligns the bar with the row's text, so it tracks the rank
   column (14px) plus the row's `gap-2` (8px) — not a free spacing choice. */
.pm-ch-bar-bg { height: var(--bar-h); background: var(--div); margin-left: var(--sp-3xl); }

/* Top narratives */
.pm-nar-list { gap: var(--sp-md); margin-top: var(--sp-lg); }

.pm-nar-row {
    gap: var(--sp-3xs);
    border-top: 1px solid var(--div-2);
    color: inherit;
}

.pm-nar-row:first-child { border-top: none; }
.pm-nar-pct { font-size: var(--fs-xs); color: var(--navy); }
.pm-nar-desc { font-size: var(--fs-xs); color: var(--text2); }
.pm-nar-bar-bg { height: var(--bar-h-sm); background: var(--div); }
.pm-nar-bar { background: var(--orange); }