/* ============================================================
   LISTICLE VARIANTS — "Legal Broadsheet Ledger" expression layer
   Loads AFTER listicle.css and deepens the per-page variant
   system keyed off data-* attributes on .listicle-content
   (data-color / data-hero / data-type / data-card /
   data-section-accent / data-score).

   Same identity everywhere: paper field, ink rules, serif
   display, mono ledger labels, square geometry, one disciplined
   accent per page. System font stacks only — no external fonts,
   no bright palettes, no soft shadows, no rounded corners.
   Each variant stays visibly distinct while reading as one
   publication.
   ============================================================ */

/* ---- COLOR SCHEMES (data-color) ----
   Ink-discipline accent ledgers. Values mirror listicle.css so this
   layer can stand alone; 'bronze' (default) = the base oxblood. */
.listicle-content[data-color="navy"]    { --accent: #1F3A5F; --accent-light: rgba(31,58,95,.07);   --accent-medium: rgba(31,58,95,.18);   --accent-hover: #16293F; --accent-glow: rgba(31,58,95,.22); }
.listicle-content[data-color="forest"]  { --accent: #1F4733; --accent-light: rgba(31,71,51,.07);   --accent-medium: rgba(31,71,51,.18);   --accent-hover: #15301F; --accent-glow: rgba(31,71,51,.22); }
.listicle-content[data-color="crimson"] { --accent: #8C2F23; --accent-light: rgba(140,47,35,.07);  --accent-medium: rgba(140,47,35,.18);  --accent-hover: #6E2118; --accent-glow: rgba(140,47,35,.22); }
.listicle-content[data-color="purple"]  { --accent: #4A3260; --accent-light: rgba(74,50,96,.07);   --accent-medium: rgba(74,50,96,.18);   --accent-hover: #352243; --accent-glow: rgba(74,50,96,.22); }
.listicle-content[data-color="teal"]    { --accent: #1F4E4A; --accent-light: rgba(31,78,74,.07);   --accent-medium: rgba(31,78,74,.18);   --accent-hover: #143733; --accent-glow: rgba(31,78,74,.22); }
.listicle-content[data-color="slate"]   { --accent: #3E4450; --accent-light: rgba(62,68,80,.07);   --accent-medium: rgba(62,68,80,.18);   --accent-hover: #2B2F38; --accent-glow: rgba(62,68,80,.22); }
.listicle-content[data-color="amber"]   { --accent: #8A5A19; --accent-light: rgba(138,90,25,.07);  --accent-medium: rgba(138,90,25,.18);  --accent-hover: #6B4413; --accent-glow: rgba(138,90,25,.22); }
.listicle-content[data-color="rose"]    { --accent: #7A2940; --accent-light: rgba(122,41,64,.07);  --accent-medium: rgba(122,41,64,.18);  --accent-hover: #5C1D2F; --accent-glow: rgba(122,41,64,.22); }
.listicle-content[data-color="indigo"]  { --accent: #33395F; --accent-light: rgba(51,57,95,.07);   --accent-medium: rgba(51,57,95,.18);   --accent-hover: #242842; --accent-glow: rgba(51,57,95,.22); }
.listicle-content[data-color="emerald"] { --accent: #1F5C40; --accent-light: rgba(31,92,64,.07);   --accent-medium: rgba(31,92,64,.18);   --accent-hover: #15412C; --accent-glow: rgba(31,92,64,.22); }
.listicle-content[data-color="copper"]  { --accent: #7A4A21; --accent-light: rgba(122,74,33,.07);  --accent-medium: rgba(122,74,33,.18);  --accent-hover: #5C3717; --accent-glow: rgba(122,74,33,.22); }

/* ---- HERO STAGINGS (data-hero) — extra staging on top of the
   base treatments in listicle.css (spine / ruled columns / paper
   nameplate), so each hero reads unmistakably different ---- */

/* left: the kicker docks onto the accent spine */
.listicle-content[data-hero="left"] .hero-badge {
    border-left: 3px solid var(--accent);
    padding-left: 12px;
}

/* split: the meta ledger line takes the accent strike */
.listicle-content[data-hero="split"] .hero-meta {
    border-top: 2px solid var(--accent);
}

/* minimal: classic double base rule under the paper nameplate —
   hairline floated just above the 2px ink base from listicle.css */
.listicle-content[data-hero="minimal"] .hero::after {
    content: '';
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 7px;
    border-top: 1px solid var(--ledger-rule, #C9C4B6);
}

/* ---- TYPOGRAPHY SCALES (data-type) — measure + head detailing ---- */

/* Large & Light: roomier measure for the bigger body size */
.listicle-content[data-type="large"] .section-prose {
    font-size: 1.06rem;
    max-width: 760px;
}

/* Compact & Bold: tighter ink slab above department heads */
.listicle-content[data-type="compact"] .section h2::before {
    width: 30px;
}

/* Editorial: italic serif department heads over a finer slab */
.listicle-content[data-type="editorial"] .section h2 {
    font-style: italic;
}
.listicle-content[data-type="editorial"] .section h2::before {
    border-top-width: 1px;
}

/* ---- CARD FRAMINGS (data-card) — extend each framing to the
   chart plates and the Delancey editorial asides so the whole
   page composes under one system ---- */

/* Flat: rules only — plates dissolve into the column */
.listicle-content[data-card="flat"] .fl-chart-card {
    background: transparent;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding-left: 0;
    padding-right: 0;
}
.listicle-content[data-card="flat"] .ds-top-pick .ds-aside {
    background: transparent;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding-left: 0;
    padding-right: 0;
}
.listicle-content[data-card="flat"] .ds-faq-followup .ds-box {
    background: transparent;
    border-top: none;
    border-right: none;
    border-bottom: none;
    padding-right: 0;
}

/* Elevated: letterpress double-strike offset plates (matches the
   verdict/sidebar treatment in listicle.css — no soft shadows) */
.listicle-content[data-card="elevated"] .fl-chart-card,
.listicle-content[data-card="elevated"] .ds-top-pick .ds-aside,
.listicle-content[data-card="elevated"] .ds-faq-followup .ds-box {
    box-shadow: 5px 5px 0 -1px var(--ledger-paper, #F6F4EE), 5px 5px 0 0 var(--ledger-rule, #C9C4B6);
    margin-right: 6px;
}

/* Bordered (default): base ruled boxes from listicle.css — no override. */

/* ---- SECTION ACCENT (data-section-accent) — the Delancey aside
   kickers follow the same labeling convention as section labels,
   so the asides read as part of the same issue ---- */
.listicle-content[data-section-accent="border"] .ds-kicker {
    padding-left: 11px;
    border-left: 2px solid var(--accent, #7A2017);
}
.listicle-content[data-section-accent="underline"] .ds-kicker {
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--accent, #7A2017);
}
.listicle-content[data-section-accent="badge"] .ds-kicker {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--ledger-rule, #C9C4B6);
    border-radius: 0;
}
/* On the reversed ink plate, frame the badge with the dark-panel rule */
.listicle-content[data-section-accent="badge"] .ds-bottom-line .ds-kicker {
    border-color: var(--paper-rule-on-dark, rgba(247, 245, 239, 0.16));
}

/* ---- SCORE DISPLAY (data-score) ----
   bar (ruled ledger rows) and grid (numeric ledger cells) are fully
   staged in listicle.css; no further override needed here. */

/* ---- COMMUNITY FORUM ACCENT INHERITANCE ----
   Custom properties cascade into .community-forum automatically, so
   each page's accent reaches the forum submit buttons without any
   bright-palette re-mapping. (Forum styling: community-forum.css +
   the letters-to-the-editor overrides in listicle.css.) */

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .listicle-content[data-hero="minimal"] .hero::after { left: 20px; right: 20px; }
    .listicle-content[data-hero="left"] .hero-badge { padding-left: 10px; }
    .listicle-content[data-card="elevated"] .fl-chart-card,
    .listicle-content[data-card="elevated"] .ds-top-pick .ds-aside,
    .listicle-content[data-card="elevated"] .ds-faq-followup .ds-box {
        box-shadow: 4px 4px 0 -1px var(--ledger-paper, #F6F4EE), 4px 4px 0 0 var(--ledger-rule, #C9C4B6);
    }
}

@media (max-width: 640px) {
    .listicle-content[data-hero="minimal"] .hero::after { left: 16px; right: 16px; }
}

@media (max-width: 320px) {
    .listicle-content[data-hero="minimal"] .hero::after { left: 12px; right: 12px; }
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
    /* This layer introduces no animation; keep the elevated plates
       static and guard against inherited transitions all the same. */
    .listicle-content[data-card="elevated"] .verdict-card,
    .listicle-content[data-card="elevated"] .verdict-card.featured {
        transition: none;
        transform: none;
    }
}