/**
 * WWPosts — Card chrome (site-wide header + border consistency)
 * ============================================================
 * Two non-negotiable rules this file implements:
 *
 *   1. Every card container's border is the SAME colour as its header.
 *   2. Un-themed card containers default to the Ice Blue header + border
 *      (the brand accent cyan, `--cp-accent`).
 *
 * Mechanism: ONE inherited token pair —
 *   --cp-card-accent     the container's identity colour
 *   --cp-card-accent-on  the ink laid over it
 * A container (or any ancestor) sets them; the header fill, the header ink and
 * the border all read them, so header and border can never drift apart.
 *
 * IMPORTANT — do NOT add derived tokens like
 *     :root { --cp-card-accent-fill: var(--cp-card-accent); }
 * A custom property containing var() is substituted at computed-value time on
 * the element that declares it, so such a token freezes to the :root accent and
 * inherits as a constant — descendants that override --cp-card-accent would be
 * ignored. Every derivation below is therefore written inline in a real
 * property (background-color / border-color), which resolves per element.
 *
 * Category tint: add `.cp-card-theme--{slug}` to the container. Slugs match the
 * unified category palette in site.css. Prefer generating the class in PHP with
 * App\Support\CategoryTheme::cardThemeClass() so aliases are handled once.
 *
 * Load order: LAST — after site.css / cp-discovery.css / cp-form-chrome.css,
 * which is where the legacy per-theme card borders live.
 *
 * Opt out with `.cp-card-chrome-exempt` or Bootstrap's `.border-0`.
 */

/* -------------------------------------------------------------------------- */
/* Tokens                                                                     */
/* -------------------------------------------------------------------------- */
:root {
    /* Ice blue — the default identity colour for every card container.
       --bs-primary is bridged to the same electric cyan (cp-buttons.css), so
       either token lands on the brand accent; --cp-accent is the source. */
    --cp-card-accent: var(--cp-accent, var(--bs-primary, #00d4ff));
    --cp-card-accent-on: var(--cp-accent-ink, #031018);

    --cp-card-border-width: 3px;

    /* Dark theme paints both the cap and the frame through this mix, so the
       two can never drift. Referenced inline (never as a derived token). */
    --cp-card-accent-dark-mix: 78%;

    /* Cap geometry — ONE size for every card container (see Rule 3). */
    --cp-card-header-pad-y: 0.5rem;
    --cp-card-header-pad-x: 0.85rem;
    --cp-card-header-font-size: 0.875rem;
    --cp-card-header-icon-size: 0.85rem;
    --cp-card-header-count-size: 1.55rem;

    /* A .card's inner regions claim the full outer radius until the frame is
       applied; the chrome'd selector below subtracts the frame (see Rule 4). */
    --cp-card-inner-radius: 0.75rem;
}

/* -------------------------------------------------------------------------- */
/* Category themes — set the accent, everything else follows                  */
/* -------------------------------------------------------------------------- */
.cp-card-theme--event {
    --cp-card-accent: var(--cp-cat-event, #fd7e14);
    --cp-card-accent-on: var(--cp-cat-event-font, #ffffff);
}

.cp-card-theme--trail {
    --cp-card-accent: var(--cp-cat-trail, #198754);
    --cp-card-accent-on: var(--cp-cat-trail-font, #ffffff);
}

.cp-card-theme--spot {
    --cp-card-accent: var(--cp-cat-spot, #6f42c1);
    --cp-card-accent-on: var(--cp-cat-spot-font, #ffffff);
}

.cp-card-theme--track {
    --cp-card-accent: var(--cp-cat-track, #ffc107);
    --cp-card-accent-on: var(--cp-cat-track-font, #222222);
}

.cp-card-theme--product {
    --cp-card-accent: var(--cp-cat-product, #0d6efd);
    --cp-card-accent-on: var(--cp-cat-product-font, #ffffff);
}

.cp-card-theme--marketplace {
    --cp-card-accent: var(--cp-cat-marketplace, #dc2626);
    --cp-card-accent-on: var(--cp-cat-marketplace-font, #ffffff);
}

.cp-card-theme--compare {
    --cp-card-accent: var(--cp-cat-compare, #3f4650);
    --cp-card-accent-on: var(--cp-cat-compare-font, #ffffff);
}

.cp-card-theme--my-settings {
    --cp-card-accent: var(--cp-cat-my-settings, #6c757d);
    --cp-card-accent-on: var(--cp-cat-my-settings-font, #ffffff);
}

.cp-card-theme--admin {
    --cp-card-accent: var(--cp-cat-admin, #3b71ca);
    --cp-card-accent-on: #ffffff;
}

/* Business/ad shells use the gold accent from cp-discovery.css. */
.cp-card-theme--business {
    --cp-card-accent: var(--cp-cat-business, #c4a574);
    --cp-card-accent-on: #1c1405;
}

/* Uncategorised groups stay on the ice-blue default. */
.cp-card-theme--other,
.cp-card-theme--default {
    --cp-card-accent: var(--cp-accent, var(--bs-primary, #00d4ff));
    --cp-card-accent-on: var(--cp-accent-ink, #031018);
}

/* -------------------------------------------------------------------------- */
/* Section shells that are cards in everything but tag name                    */
/* -------------------------------------------------------------------------- */
/* Role / folder tint groups (Manage Users, Messages) already publish their own
   header colour as --cp-ug-head-bottom; borrow it so the frame equals the cap
   instead of falling back to the ice-blue default. */
.cp-user-group--user,
.cp-user-group--moderator,
.cp-user-group--admin,
.cp-user-group--superuser,
.cp-user-group--inbox,
.cp-user-group--sent,
.cp-user-group--deleted {
    --cp-card-accent: var(--cp-ug-head-bottom, var(--cp-accent, #00d4ff));
    --cp-card-accent-on: #ffffff;
}

/* Accent workflow panels — solid Bootstrap-hued caps (011-collapsible-panels). */
.cp-user-group--market  { --cp-card-accent: var(--bs-success, #198754); --cp-card-accent-on: #ffffff; }
.cp-user-group--danger  { --cp-card-accent: var(--bs-danger,  #dc3545); --cp-card-accent-on: #ffffff; }
.cp-user-group--primary { --cp-card-accent: var(--bs-primary, #00d4ff); --cp-card-accent-on: var(--cp-accent-ink, #031018); }

/* Dashboard workflow cards paint their own cap; sync the frame to it. */
.cp-dashboard-action-card--store { --cp-card-accent: var(--bs-info, #0dcaf0); --cp-card-accent-on: #122d49; }

/* Show pages already carry a category tint as --cp-card-cat (cp-discovery.css).
   Same-element var() reference, so this resolves per card. */
.card.cp-content-card {
    --cp-card-accent: var(--cp-card-cat, var(--cp-accent, #00d4ff));
}

/* -------------------------------------------------------------------------- */
/* Contextual headers → pull the header colour back into the accent token      */
/* so the border matches without editing any page markup.                      */
/* -------------------------------------------------------------------------- */
/* bg-primary IS the ice blue, so it's an alias of the default — including the
   dark ink. (Bootstrap pages pair it with .text-white, ~1.9:1 on cyan.) */
.card:has(> .card-header.bg-primary)   { --cp-card-accent: var(--bs-primary,   #00d4ff); --cp-card-accent-on: var(--cp-accent-ink, #031018); }
.card:has(> .card-header.bg-secondary) { --cp-card-accent: var(--bs-secondary, #6c757d); --cp-card-accent-on: #ffffff; }
.card:has(> .card-header.bg-success)   { --cp-card-accent: var(--bs-success,   #198754); --cp-card-accent-on: #ffffff; }
.card:has(> .card-header.bg-danger)    { --cp-card-accent: var(--bs-danger,    #dc3545); --cp-card-accent-on: #ffffff; }
.card:has(> .card-header.bg-warning)   { --cp-card-accent: var(--bs-warning,   #ffc107); --cp-card-accent-on: #222222; }
.card:has(> .card-header.bg-info)      { --cp-card-accent: var(--bs-info,      #0dcaf0); --cp-card-accent-on: #222222; }
.card:has(> .card-header.bg-light)     { --cp-card-accent: var(--bs-light,     #f8f9fa); --cp-card-accent-on: #222222; }
.card:has(> .card-header.bg-dark)      { --cp-card-accent: var(--bs-dark,      #212529); --cp-card-accent-on: #ffffff; }

.card:has(> .card-header.cp-event-details-header)       { --cp-card-accent: var(--cp-cat-event, #fd7e14); }
.card:has(> .card-header.cp-trail-details-header)       { --cp-card-accent: var(--cp-cat-trail, #198754); }
.card:has(> .card-header.cp-spot-details-header)        { --cp-card-accent: var(--cp-cat-spot, #6f42c1); }
.card:has(> .card-header.cp-track-details-header)       { --cp-card-accent: var(--cp-cat-track, #ffc107); }
.card:has(> .card-header.cp-product-details-header)     { --cp-card-accent: var(--cp-cat-product, #0d6efd); }
.card:has(> .card-header.cp-market-details-header)      { --cp-card-accent: var(--cp-cat-marketplace, #dc2626); }
.card:has(> .card-header.cp-marketplace-details-header) { --cp-card-accent: var(--cp-cat-marketplace, #dc2626); }

/* Legacy data-table callers still pass Bootstrap bg-* as the theme class;
   sync the section shell's border to whatever the cap paints itself. */
.cp-data-table:has(> .cp-data-table__toggle.bg-primary)   { --cp-card-accent: var(--bs-primary,   #00d4ff); }
.cp-data-table:has(> .cp-data-table__toggle.bg-secondary) { --cp-card-accent: var(--bs-secondary, #6c757d); }
.cp-data-table:has(> .cp-data-table__toggle.bg-success)   { --cp-card-accent: var(--bs-success,   #198754); }
.cp-data-table:has(> .cp-data-table__toggle.bg-danger)    { --cp-card-accent: var(--bs-danger,    #dc3545); }
.cp-data-table:has(> .cp-data-table__toggle.bg-warning)   { --cp-card-accent: var(--bs-warning,   #ffc107); }
.cp-data-table:has(> .cp-data-table__toggle.bg-info)      { --cp-card-accent: var(--bs-info,      #0dcaf0); }
.cp-data-table:has(> .cp-data-table__toggle.bg-dark)      { --cp-card-accent: var(--bs-dark,      #212529); }

/* -------------------------------------------------------------------------- */
/* Rule 1 — border always equals the header colour                            */
/* -------------------------------------------------------------------------- */
/* Specificity is deliberately matched to the legacy card-border rules in
   site.css ([data-cp-theme="dark"] .card:not()x4); this file loads later. */
[data-cp-theme] .card:not(.cp-card):not(.cp-bc):not(.cp-business-card__shell):not(.border-0):not(.cp-card-chrome-exempt),
[data-cp-theme] .cp-data-table:not(.cp-card-chrome-exempt),
[data-cp-theme] .cp-collapsible-index-group:not(.cp-card-chrome-exempt),
[data-cp-theme] .cp-posts-category-group:not(.cp-card-chrome-exempt),
/* .cp-user-group / .cp-section-collapsible are explicit "this is a section card"
   opt-ins, so a stray Bootstrap .border-0 utility on them does not opt out —
   only .cp-card-chrome-exempt does. */
[data-cp-theme] .cp-user-group:not(.cp-card-chrome-exempt),
[data-cp-theme] .cp-section-collapsible:not(.cp-card-chrome-exempt),
[data-cp-theme] .cp-dashboard-action-card:not(.cp-card-chrome-exempt) {
    border: var(--cp-card-border-width) solid var(--cp-card-accent) !important;

    /* Declared on the card itself (never :root) so a nested chrome'd card
       re-derives its own value instead of inheriting the parent's. */
    --cp-card-inner-radius: calc(0.75rem - var(--cp-card-border-width));
}

/* The cap is mixed toward the page black in dark mode; the frame takes the
   IDENTICAL mix, otherwise a translucent border reads as a different hue over
   the darker card surface. */
[data-cp-theme="dark"] .card:not(.cp-card):not(.cp-bc):not(.cp-business-card__shell):not(.border-0):not(.cp-card-chrome-exempt),
[data-cp-theme="dark"] .cp-data-table:not(.cp-card-chrome-exempt),
[data-cp-theme="dark"] .cp-collapsible-index-group:not(.cp-card-chrome-exempt),
[data-cp-theme="dark"] .cp-posts-category-group:not(.cp-card-chrome-exempt),
[data-cp-theme="dark"] .cp-user-group:not(.cp-card-chrome-exempt),
[data-cp-theme="dark"] .cp-section-collapsible:not(.cp-card-chrome-exempt),
[data-cp-theme="dark"] .cp-dashboard-action-card:not(.cp-card-chrome-exempt) {
    border-color: color-mix(in srgb, var(--cp-card-accent) var(--cp-card-accent-dark-mix, 78%), #05080e) !important;
}

/* -------------------------------------------------------------------------- */
/* Rule 2 — the cap is painted from the same accent                           */
/* -------------------------------------------------------------------------- */
/* Contextual bg-* and category *-details-header caps keep their own paint
   (AGENTS.md: never override Bootstrap contextual headers) — only their
   border is synced, above. */
[data-cp-theme] .card:not(.cp-card):not(.cp-bc):not(.cp-business-card__shell):not(.border-0):not(.cp-card-chrome-exempt)
    > .card-header:not([class*="bg-"]):not([class*="-details-header"]):not(.cp-card-header-exempt),
[data-cp-theme] .cp-data-table > .cp-data-table__toggle:not([class*="bg-"]),
[data-cp-theme] .cp-collapsible-index-group > .cp-collapsible-index-group__toggle,
[data-cp-theme] .cp-posts-category-group > .cp-posts-category-group__header {
    background-color: var(--cp-card-accent) !important;
    background-image: none !important;
    color: var(--cp-card-accent-on) !important;
    border-bottom-color: var(--cp-card-accent) !important;
}

[data-cp-theme="dark"] .card:not(.cp-card):not(.cp-bc):not(.cp-business-card__shell):not(.border-0):not(.cp-card-chrome-exempt)
    > .card-header:not([class*="bg-"]):not([class*="-details-header"]):not(.cp-card-header-exempt),
[data-cp-theme="dark"] .cp-data-table > .cp-data-table__toggle:not([class*="bg-"]),
[data-cp-theme="dark"] .cp-collapsible-index-group > .cp-collapsible-index-group__toggle,
[data-cp-theme="dark"] .cp-posts-category-group > .cp-posts-category-group__header {
    background-color: color-mix(in srgb, var(--cp-card-accent) var(--cp-card-accent-dark-mix, 78%), #05080e) !important;
    border-bottom-color: color-mix(in srgb, var(--cp-card-accent) var(--cp-card-accent-dark-mix, 78%), #05080e) !important;
}

/* bg-primary caps are the ice-blue default wearing a Bootstrap class name —
   paint them from the token so they match the un-themed caps above exactly.
   Deliberately NOT gated on :not(.border-0): `border-0` asks for no frame, it
   does not opt the cap out of the ink standard. While it was gated, a
   `bg-primary text-white` cap on a border-0 card (settings/_nav, _sidenav,
   profile-information) kept its markup white while the identical cap on a
   framed card (settings/account) went black — two title colours in one page
   family. Ice blue needs the near-black ink for contrast either way. */
[data-cp-theme] .card:not(.cp-card):not(.cp-bc):not(.cp-business-card__shell):not(.cp-card-chrome-exempt)
    > .card-header.bg-primary:not(.cp-card-header-exempt) {
    background-color: var(--cp-card-accent) !important;
    background-image: none !important;
    color: var(--cp-card-accent-on) !important;
    border-bottom-color: var(--cp-card-accent) !important;
    text-shadow: none !important;
}

[data-cp-theme="dark"] .card:not(.cp-card):not(.cp-bc):not(.cp-business-card__shell):not(.cp-card-chrome-exempt)
    > .card-header.bg-primary:not(.cp-card-header-exempt) {
    background-color: color-mix(in srgb, var(--cp-card-accent) var(--cp-card-accent-dark-mix, 78%), #05080e) !important;
    border-bottom-color: color-mix(in srgb, var(--cp-card-accent) var(--cp-card-accent-dark-mix, 78%), #05080e) !important;
}

[data-cp-theme] .card > .card-header.bg-primary:not(.cp-card-header-exempt) :is(h1, h2, h3, h4, h5, h6, p, span, small, label, i, .text-muted, .h5, .h6) {
    color: inherit !important;
}

/* Everything inside an accent cap inherits the cap ink instead of body/muted
   colours (counts, chevrons, icons, headings, links). */
[data-cp-theme] .card > .card-header:not([class*="bg-"]):not([class*="-details-header"]):not(.cp-card-header-exempt) :is(h1, h2, h3, h4, h5, h6, p, span, small, label, i, .text-muted, .h5, .h6),
[data-cp-theme] .cp-data-table > .cp-data-table__toggle:not([class*="bg-"]) :is(span, i, small),
[data-cp-theme] .cp-collapsible-index-group > .cp-collapsible-index-group__toggle :is(span, i, small),
[data-cp-theme] .cp-posts-category-group > .cp-posts-category-group__header :is(span, i, small, button) {
    color: inherit !important;
}

[data-cp-theme] .card > .card-header:not([class*="bg-"]):not([class*="-details-header"]):not(.cp-card-header-exempt) a:not(.btn) {
    color: inherit !important;
    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}

/* Count pills read as a tint of the cap ink, so they work on any accent. */
[data-cp-theme] .cp-data-table > .cp-data-table__toggle:not([class*="bg-"]) .cp-data-table__count,
[data-cp-theme] .cp-collapsible-index-group > .cp-collapsible-index-group__toggle .cp-collapsible-index-group__count,
[data-cp-theme] .cp-posts-category-group > .cp-posts-category-group__header .cp-posts-category-group__count {
    border-color: color-mix(in srgb, var(--cp-card-accent-on) 45%, transparent) !important;
    background: color-mix(in srgb, var(--cp-card-accent-on) 14%, transparent) !important;
    color: inherit !important;
    opacity: 1;
}

/* The themed-toggle drop shadow assumes white ink; drop it for dark-ink
   accents (Live/track yellow, Business gold) where it just reads muddy. */
[data-cp-theme] .cp-data-table__toggle--themed.cp-card-theme--track,
[data-cp-theme] .cp-data-table--track .cp-data-table__toggle--themed,
[data-cp-theme] .cp-data-table.cp-card-theme--track > .cp-data-table__toggle,
[data-cp-theme] .cp-data-table.cp-card-theme--business > .cp-data-table__toggle,
[data-cp-theme] .cp-posts-category-group.cp-card-theme--track > .cp-posts-category-group__header,
[data-cp-theme] .cp-posts-category-group.cp-card-theme--business > .cp-posts-category-group__header {
    text-shadow: none !important;
}

/* Footer hairlines pick up the same hue so the card reads as one unit. */
[data-cp-theme] .card:not(.cp-card):not(.cp-bc):not(.cp-business-card__shell):not(.border-0):not(.cp-card-chrome-exempt)
    > .card-footer:not([class*="bg-"]) {
    border-top-color: color-mix(in srgb, var(--cp-card-accent) 32%, transparent) !important;
}

/* -------------------------------------------------------------------------- */
/* Rule 3 — one cap geometry for every card container                         */
/* -------------------------------------------------------------------------- */
/* The compact cap on My Dashboard's Create panel is the canonical size. It used
   to live behind .cp-dashboard-collapsible-stack, so every other surface kept
   its own taller padding (.9rem 1rem on the group toggles, .85rem 1rem on the
   action card, Bootstrap's cap padding plus an h5 on .card-header). The metrics
   are tokens now and the page-scoped copies are gone.
   !important because page-level @push('styles') blocks render after this file.

   Excluded from the TYPE scale only — they still take the token padding: the
   show-page title band, i.e. `.cp-content-card`'s cap and any
   `*-details-header` (rule 009 Card 2). The h2 inside is the record title, not
   a section title, so it keeps its display size. */
/* Mobile keeps the denser cap the data table used to define for itself. */
@media (max-width: 767.98px) {
    :root {
        --cp-card-header-pad-y: 0.4rem;
        --cp-card-header-pad-x: 0.6rem;
        --cp-card-header-font-size: 0.8rem;
        --cp-card-header-icon-size: 0.78rem;
        --cp-card-header-count-size: 1.35rem;
    }
}

[data-cp-theme] .card {
    --bs-card-cap-padding-y: var(--cp-card-header-pad-y);
    --bs-card-cap-padding-x: var(--cp-card-header-pad-x);
}

[data-cp-theme] .cp-user-group__toggle,
[data-cp-theme] .cp-data-table__toggle,
[data-cp-theme] .cp-collapsible-index-group__toggle,
[data-cp-theme] .cp-post-group__toggle,
[data-cp-theme] .cp-fq-group__toggle,
[data-cp-theme] .cp-posts-category-group__header,
[data-cp-theme] .cp-dashboard-action-card__header {
    padding: var(--cp-card-header-pad-y) var(--cp-card-header-pad-x) !important;
    min-height: 0;
}

[data-cp-theme] .card:not(.cp-content-card) > .card-header:not([class*="-details-header"]):not(.cp-card-header-exempt),
[data-cp-theme] .cp-user-group__title,
[data-cp-theme] .cp-data-table__title,
[data-cp-theme] .cp-collapsible-index-group__title,
[data-cp-theme] .cp-post-group__title,
[data-cp-theme] .cp-fq-group__title,
[data-cp-theme] .cp-posts-category-group__title,
[data-cp-theme] .cp-dashboard-action-card__title {
    font-size: var(--cp-card-header-font-size) !important;
    line-height: 1.35;
}

/* Bootstrap card caps carry the title as an h5/h6, which is what makes them
   read taller than the section caps next to them. */
[data-cp-theme] .card:not(.cp-content-card) > .card-header:not([class*="-details-header"]):not(.cp-card-header-exempt)
    :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-size: var(--cp-card-header-font-size) !important;
    margin-bottom: 0;
}

[data-cp-theme] .card:not(.cp-content-card) > .card-header:not([class*="-details-header"]):not(.cp-card-header-exempt) > .fas,
[data-cp-theme] .card:not(.cp-content-card) > .card-header:not([class*="-details-header"]):not(.cp-card-header-exempt) :is(h1, h2, h3, h4, h5, h6) .fas,
[data-cp-theme] .cp-user-group__title .fas,
[data-cp-theme] .cp-data-table__title .fas,
[data-cp-theme] .cp-collapsible-index-group__title .fas,
[data-cp-theme] .cp-posts-category-group__title .fas,
[data-cp-theme] .cp-dashboard-action-card__title .fas {
    font-size: var(--cp-card-header-icon-size) !important;
}

[data-cp-theme] .cp-user-group__count,
[data-cp-theme] .cp-data-table__count,
[data-cp-theme] .cp-collapsible-index-group__count,
[data-cp-theme] .cp-post-group__count,
[data-cp-theme] .cp-fq-group__count,
[data-cp-theme] .cp-posts-category-group__count {
    min-width: var(--cp-card-header-count-size);
    height: var(--cp-card-header-count-size);
}

/* -------------------------------------------------------------------------- */
/* Rule 4 — the cap corner is the frame corner, minus the frame               */
/* -------------------------------------------------------------------------- */
/* The frame is 3px, so a container's inner (padding-box) corner is
   `radius - 3px`. A cap that claims the FULL outer radius curves tighter than
   that inner corner, and the container surface shows through the difference as
   a dark crescent in the cap's top-left / top-right corners.
   Panel primitives all clip (`overflow: hidden`), so the cheapest correct
   answer there is a square cap: the container's own curve does the rounding and
   nothing can drift. .card does not clip, so it subtracts the frame instead —
   via --cp-card-inner-radius, consumed by the rounding rules in site.css. */
[data-cp-theme] .cp-user-group > .cp-user-group__toggle,
[data-cp-theme] .cp-data-table > .cp-data-table__toggle,
[data-cp-theme] .cp-collapsible-index-group > .cp-collapsible-index-group__toggle,
[data-cp-theme] .cp-posts-category-group > .cp-posts-category-group__header,
[data-cp-theme] .cp-dashboard-action-card > .cp-dashboard-action-card__header {
    border-radius: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Nested groups                                                               */
/* -------------------------------------------------------------------------- */
/* Category tables nested inside a section keep a slightly tighter radius so
   the parent shell still reads as the outer container. */
.cp-dashboard-nested-post-groups > .cp-data-table {
    border-radius: 0.85rem;
}