/* article_feed — search box, filter link groups, article list,
   pager, empty state. Bespoke bits (AC-3 closed list): share bars,
   -webkit-line-clamp title/lead clamps, brand tokens, and the sizes off
   Bootstrap's spacing scale (those resolve through the --sp-, --radius-
   and --dur- token families in static/style.css). Layout and
   typography Bootstrap does express lives on the markup (article_controls,
   filter_links, date_range, article_item, pager, empty_note). */

.pm-art-controls { margin-bottom: var(--sp-3xl); }

/* Height is pinned rather than derived from the children: the demo's search
   icon is a 13px <svg> (a replaced box), ours is a real submit button whose
   glyph builds a line box from the inherited body font-size/line-height, so
   an auto-height row grows past the adjacent .pm-fil-btn. Pinned to 36px to
   match .pm-fil-btn's py-2 (8px) Bootstrap padding (retry 19). */
.pm-search-box {
    border: 1px solid var(--div);
    height: 36px;
    box-sizing: border-box;
    flex: 1;
    max-width: 360px;
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast);
}

/* A11Y (Scope F, requester): box-shadow, not outline -- an outline would
   draw a second, offset ring, which is exactly what this collapses into
   one. Zero-offset/zero-blur/1px-spread hugs the existing 1px border, so
   the single visible ring reads as a 2px navy outer border. */
.pm-search-box:focus-within {
    border-color: var(--navy);
    box-shadow: 0 0 0 1px var(--navy);
}

/* A11Y (Scope F, requester override of Scope D's original "outline stays"):
   this input deliberately carries no focus outline of its own -- the
   requester's explicit request (KB-0107) -- because the focus indicator
   lives on the wrapper's :focus-within box-shadow above. Do not add a
   :focus-visible outline back here by citing the ticket text. */
.pm-search-box input {
    outline: none;
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--text);
    min-width: 0;
    background: transparent;
}

/* A11Y: WCAG 2.5.8 minimum target size — the 14px glyph alone is under 24px. */
.pm-search-submit {
    background: none;
    color: var(--text2); /* A11Y: WCAG 1.4.11 non-text contrast — was --text3 (2.54:1 < 3:1); --text2 = #5A6478, passes */
    font-size: var(--fs-sm);
    cursor: pointer;
    min-width: 24px;
    min-height: 24px;
}

/* A11Y (Scope F): the wrapper's :focus-within ring only fires while the
   input holds focus, so the button needs its own indicator or tabbing past
   the input into the magnifier would look like focus vanished. 24px target
   + 1px offset + 2px ring = 30px, inside the pinned 36px box -- cannot clip. */
.pm-search-submit:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 1px;
}

/* `margin-left` stays bespoke: the .ms-auto utility is !important and would
   defeat the 620px media query that drops the auto margin. */
.pm-fil-bar { margin-left: auto; }

.pm-date-picker {
    background: var(--pm-surface);
    border: 1px solid var(--div);
}

/* Date-range control. Rendered expanded (a plain inline form) so it works with
   JS off; home.js adds .pm-dp-enhanced, which turns it into the demo's popover. */
.pm-fil-date-wrap.pm-dp-enhanced .pm-date-picker {
    display: none;
    position: absolute;
    top: calc(100% + var(--sp-2xs));
    right: 0;
    z-index: 50;
    min-width: 280px;
    box-shadow: var(--pm-shadow-lg);
}

.pm-fil-date-wrap.pm-dp-enhanced .pm-date-picker.open { display: block; }

.pm-dp-field { flex: 1; }

.pm-dp-lbl {
    font-size: var(--fs-2xs);
    color: var(--text2); /* A11Y: was --text3 (#9CA3AF fails AA); --text2 = #5A6478, 5.95:1 */
}

.pm-dp-sep { font-size: var(--fs-sm); color: var(--text2); } /* A11Y: 1.4.3 — aria-hidden is not a contrast exemption (only "pure decoration" is, and a legible en-dash glyph is not); was --text3 (2.54:1 on the popover's --pm-surface); --text2 = 5.95:1 */
.pm-dp-actions { gap: var(--sp-2xs); margin-top: var(--sp-md); }

/* Marks which bound the grid is editing -- not colour-only either: the
   label is already fw-bold, and the grid's aria-label says it too.
   --navy on --pm-surface = 11.63:1. */
.pm-dp-lbl.is-active { color: var(--navy); }

.pm-dp-cancel {
    font-size: var(--fs-xs);
    color: var(--text2);
    background: var(--pm-surface);
    border: 1px solid var(--div);
}

.pm-dp-apply {
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--pm-surface);
    background: var(--navy);
    border: 1px solid var(--navy);
    cursor: pointer;
}

/* A11Y: 1.4.11 — this rule and .pm-fil-btn:hover / .pm-pager-link:hover below
   (plus .pm-pb:hover in chart_card.css) all carried --text3: 2.54:1 on their
   own --pm-surface fill, 2.35:1 over --pm-bg, under the 3:1 non-text floor.
   --text2 clears it at 5.95:1 / 5.50:1, which makes the hover boundary roughly
   5x the resting --div boundary (1.21:1). The requester accepted that added
   emphasis at the ISSUE #343 requirements gate rather than restyle the resting
   border, so do not soften these back toward --text3 or split the difference
   with a new token. */
.pm-dp-cancel:hover { border-color: var(--text2); color: var(--navy); }

.pm-dp-cancel:focus-visible,
.pm-dp-apply:focus-visible,
.pm-fil-date-btn:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.pm-fil-date-btn { cursor: pointer; font-family: inherit; }

.pm-fil-btn {
    font-size: var(--fs-xs);
    color: var(--text2);
    background: var(--pm-surface);
    border: 1px solid var(--div);
    border-radius: var(--radius-sm);
    transition: all var(--dur-fast);
}

.pm-fil-btn:hover { border-color: var(--text2); color: var(--navy); } /* A11Y: 1.4.11, see .pm-dp-cancel:hover — --text2 = 5.95:1 on the button's own fill, 5.50:1 over --pm-bg */
.pm-fil-btn.on { background: var(--navy); border-color: var(--navy); color: var(--pm-surface); }

.pm-fil-btn:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.pm-art-item {
    gap: var(--sp-xl);
    border-bottom: 1px solid var(--div);
    color: inherit;
    transition: transform var(--dur-fast);
}

.pm-art-item:first-child { border-top: 1px solid var(--div); }
.pm-art-item:hover { transform: translateX(2px); }
/* WCAG 1.4.3/KB-0019: --orange is 3.15:1 on white, fails AA --
   --orange-700 (4.88:1) is the prescribed text token. */
.pm-art-item:hover .pm-art-title { color: var(--orange-700); }

.pm-art-item:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.pm-art-thumb {
    width: 96px;
    height: 96px;
    background: var(--div-2);
}

/* WCAG 1.4.11 pure-decoration exemption: an aria-hidden fa-image standing in
   for a missing thumbnail, conveying nothing the row does not already say — no
   ratio is required of it, and 2.28:1 was not a defect. The value moved only
   because --text3 left the palette: --text2 is 5.35:1 on this box's --div-2
   ground, and --text4 (1.49:1) was rejected because it would erase the glyph
   rather than dim it, leaving an empty grey square. Not a contrast fix. */
.pm-art-thumb-ph { color: var(--text2); }

.pm-art-content { flex: 1; min-width: 0; gap: var(--sp-2xs); }

.pm-art-ch {
    font-size: var(--fs-2xs);
    background: var(--navy);
    color: var(--pm-surface);
    border-radius: var(--radius-sm);
}

.pm-art-date { font-size: var(--fs-2xs); color: var(--text2); } /* A11Y: was --text3 (#9CA3AF fails AA); --text2 = #5A6478, 5.95:1 */

.pm-art-title {
    font-family: var(--ff-serif);
    color: var(--navy);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pm-art-lead {
    font-size: var(--fs-sm);
    color: var(--text2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pm-art-foot { margin-top: var(--sp-5xs); }

/* article_item's "channel" variant (ISSUE #287): the footer is a
   one-line lead rather than a two-line lead + score bar, so the clamp drops
   to one line. */
.pm-art-lead.is-chan { -webkit-line-clamp: 1; }

.pm-empty-note { color: var(--text2); font-size: var(--fs-sm); } /* A11Y: was --text3 (#9CA3AF fails AA); --text2 = #5A6478, 5.95:1 */

/* Pager */
.pm-pager-link {
    font-size: var(--fs-xs);
    color: var(--text2);
    background: var(--pm-surface);
    border: 1px solid var(--div);
    border-radius: var(--radius-sm);
    min-width: 32px;
}

.pm-pager-link:hover { border-color: var(--text2); color: var(--navy); } /* A11Y: 1.4.11, see .pm-dp-cancel:hover — --text2 = 5.95:1 on the button's own fill, 5.50:1 over --pm-bg */
.pm-pager-link.on { background: var(--navy); border-color: var(--navy); color: var(--pm-surface); }
.pm-pager-ellipsis { color: var(--text2); } /* A11Y: 1.4.3 — aria-hidden is not a contrast exemption; was --text3 (2.35:1 on the page's --pm-bg ground, this rule has no fill of its own); --text2 = 5.50:1 */

.pm-pager-link:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

@media (max-width: 620px) {
    .pm-fil-bar { margin-left: 0; }
    .pm-art-thumb { width: 72px; height: 72px; }

    /* The popover is right-anchored to its wrapper; on a wrapped filter bar
       that wrapper sits far left and a 280px panel computes a negative left
       edge. Full-width wrapper => right:0 is the content edge (ISSUE #328,
       RK-6). */
    .pm-fil-date-wrap { width: 100%; }
    .pm-fil-date-wrap.pm-dp-enhanced .pm-date-picker { min-width: 0; width: 100%; }
}