/**
 * Matrix theme — Brian's DEVELOPER-only portal-wide skin. One of possibly
 * several themes registered in PortalThemeService::THEMES; each rides on
 * Bootstrap's own light/dark component CSS (data-bs-theme stays light/dark —
 * see public/index.php) and gets its whole look from its own stylesheet
 * keyed off `html[data-portal-theme="<key>"]`, which base.twig stamps
 * unconditionally. Adding a theme = one THEMES entry + one stylesheet like
 * this one + one entry in portal-theme.js's PORTAL_THEMES — nothing else in
 * the toggle/cascade machinery changes.
 *
 * Gate lives server-side (PortalThemeService::isAllowedFor — DEVELOPER only
 * for this theme, fail-closed) and the toggle only offers it to DEVELOPER
 * (footer.twig / navigation.twig read portalEligibleThemes) — this
 * stylesheet has no gate of its own, same as any other CSS: it does nothing
 * unless the attribute is present.
 *
 * Palette matches /RND (public/css/rnd/rnd.css) so the personal dashboard
 * and "the rest of the portal in the same mood" read as one thing.
 */

/* ── Content tokens — redefine --portal-c-* so every .portal-page-themed
   surface (cards, buttons, badges, forms, tables — all of portal-kit) picks
   this up automatically with zero per-component CSS. Mirrors the token SET
   in portal-components.css's dark block; only the values changed. ── */
/* `.portal-theme-scope[data-portal-theme="matrix"]` joins the selector so a
   SCOPED element gets this whole token set, not just the document.
   The Appearance swatch is what needed it, and the bug was not subtlety: the
   matrix swatch renders `data-bs-theme="dark"` (matrix rides dark's Bootstrap
   components, see the header above), and .portal-theme-scope only ever had a
   dark and a light branch — so a swatch asking for matrix was handed DARK'S
   tokens and came out pixel-identical to the dark swatch beside it. Measured
   2026-09-01: both rgb(31,29,42), both the same keyline. The row's own comment
   promises "the real surface and keyline, not an approximation", and for one
   of three themes it was showing another theme's.
   Adding the selector here rather than restating four values in
   portal-theme.css is the whole point — there is one matrix palette, and a
   swatch that samples it cannot drift from the theme it is advertising. */
html[data-portal-theme="matrix"] body,
.portal-theme-scope[data-portal-theme="matrix"] {
    --portal-c-surface: rgba(6, 20, 10, 0.74) !important;
    --portal-c-surface-opaque: #07150a !important;
    /* The see-through twin, and one of the few rungs Matrix cannot let fall
       through to dark: it is what the launcher cards, the home page's floor
       group and the docs tiles paint with, and dark's value is a purple-grey
       that reads as a stain on this canvas rather than as glass. 0.30 rather
       than the 0.20 the dark chrome uses — the rain behind it is moving
       detail, not a smooth gradient, and the text has to win. */
    --portal-c-surface-seethrough: rgba(6, 20, 10, 0.30) !important;
    /* The ladder, mirrored ONCE. Matrix declares with !important on
       html[data-portal-theme], so any token it omits falls through to dark —
       coherent enough for a DEVELOPER-only workbench. That is why this is the
       only mirror v3 pays for: doing it again on every later token commit is a
       recurring tax for a theme no user sees. */
    --portal-c-surface-sunken: rgba(0, 0, 0, 0.36) !important;
    --portal-c-surface-raised: rgba(12, 34, 18, 0.78) !important;
    --portal-c-surface-raised-opaque: #0c2212 !important;
    --portal-c-surface-lift: rgba(57, 255, 106, 0.05) !important;

    --portal-c-specular: rgba(57, 255, 106, 0.16) !important;
    --portal-c-specular-strong: rgba(57, 255, 106, 0.24) !important;
    --portal-c-edge-shade: rgba(0, 0, 0, 0.6) !important;
    --portal-c-edge-bloom: rgba(57, 255, 106, 0.05) !important;
    --portal-c-edge-card: inset 0 1px 0 var(--portal-c-specular),
                          inset 0 -1px 0 var(--portal-c-edge-shade) !important;
    --portal-c-edge-dialog: inset 0 1px 0 var(--portal-c-specular-strong),
                            inset 0 -1px 0 var(--portal-c-edge-shade),
                            inset 0 14px 28px -20px var(--portal-c-edge-bloom) !important;
    --portal-c-edge-hero: inset 0 1px 0 var(--portal-c-specular-strong),
                          inset 0 -1px 0 var(--portal-c-edge-shade),
                          inset 0 22px 44px -26px var(--portal-c-edge-bloom) !important;
    --portal-c-surface-sheen: linear-gradient(180deg, rgba(57, 255, 106, 0.05) 0%, rgba(57, 255, 106, 0) 22%) !important;
    --portal-c-btn-specular: rgba(57, 255, 106, 0.14) !important;
    --portal-c-surface-header: rgba(0, 0, 0, 0.4) !important;

    --portal-c-border: rgba(0, 0, 0, 0.78) !important;
    --portal-c-border-subtle: rgba(0, 0, 0, 0.5) !important;
    --portal-c-edge-control: rgba(57, 255, 106, 0.22) !important;
    --portal-c-edge-control-subtle: rgba(57, 255, 106, 0.1) !important;

    --portal-c-text: #d6ffe0 !important;
    --portal-c-text-muted: #6fae7f !important;

    --portal-c-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    --portal-c-shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.55) !important;
    --portal-c-shadow-pressed: 0 1px 1px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4) !important;

    --portal-c-brand: #0f5c26 !important;
    --portal-c-accent: #39ff6a !important;
    --portal-c-accent-muted: color-mix(in srgb, var(--portal-c-accent) 14%, transparent) !important;
    --portal-c-accent-border: color-mix(in srgb, var(--portal-c-accent) 32%, transparent) !important;
    --portal-c-focus-ring: 0 0 0 1px var(--portal-c-accent-border), 0 0 0 0.25rem var(--portal-c-accent-muted) !important;
    --portal-c-on-accent: #04180a !important;

    --portal-c-tab-track: rgba(0, 0, 0, 0.5) !important;
    --portal-c-tab-track-inset: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    --portal-c-tab-hover: rgba(57, 255, 106, 0.08) !important;
    --portal-c-tab-active-bg: #103a1c !important;
    --portal-c-tab-active-border: rgba(0, 0, 0, 0.55) !important;
    --portal-c-tab-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(57, 255, 106, 0.18) !important;
    --portal-c-tab-active-color: #d6ffe0 !important;
    --portal-c-tab-inactive-color: rgba(57, 255, 106, 0.55) !important;

    --portal-c-btn-primary-bg: #14622c !important;
    --portal-c-btn-primary-bg-hover: #1c7d39 !important;
    --portal-c-btn-primary-border: rgba(57, 255, 106, 0.2) !important;
    --portal-c-btn-primary-border-hover: rgba(57, 255, 106, 0.4) !important;
    --portal-c-btn-primary-shadow: inset 0 1px 0 var(--portal-c-btn-specular), 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    --portal-c-btn-primary-shadow-hover: inset 0 1px 0 var(--portal-c-btn-specular), 0 2px 4px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2) !important;

    --portal-c-btn-danger-bg: #c92a2a !important;
    --portal-c-btn-danger-bg-hover: #e03131 !important;
    --portal-c-btn-danger-border: rgba(57, 255, 106, 0.1) !important;
    --portal-c-btn-danger-border-hover: rgba(57, 255, 106, 0.16) !important;
    --portal-c-btn-danger-shadow: inset 0 1px 0 var(--portal-c-btn-specular), 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(201, 42, 42, 0.2) !important;
    --portal-c-btn-danger-shadow-hover: inset 0 1px 0 var(--portal-c-btn-specular), 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(201, 42, 42, 0.25) !important;
    --portal-c-btn-danger-disabled-bg: rgba(201, 42, 42, 0.35) !important;

    --portal-c-btn-outline-border: rgba(57, 255, 106, 0.28) !important;
    --portal-c-btn-outline-bg: rgba(57, 255, 106, 0.04) !important;
    --portal-c-btn-outline-color: rgba(214, 255, 224, 0.85) !important;
    --portal-c-btn-outline-hover-bg: rgba(57, 255, 106, 0.08) !important;
    --portal-c-btn-outline-hover-color: #d6ffe0 !important;
    --portal-c-btn-outline-hover-border: rgba(57, 255, 106, 0.4) !important;

    --portal-c-badge-inset: inset 0 1px 0 rgba(57, 255, 106, 0.1) !important;
    --portal-c-badge-brand-bg: #0f5c26 !important;
    --portal-c-badge-brand-border: rgba(57, 255, 106, 0.16) !important;
    --portal-c-badge-live-bg: var(--portal-c-accent-muted) !important;
    --portal-c-badge-live-color: var(--portal-c-accent) !important;
    --portal-c-badge-muted-bg: rgba(57, 255, 106, 0.08) !important;
    --portal-c-badge-muted-color: rgba(214, 255, 224, 0.7) !important;
    --portal-c-badge-running-bg: color-mix(in srgb, var(--portal-c-accent) 16%, transparent) !important;
    --portal-c-badge-running-color: var(--portal-c-accent) !important;
    --portal-c-badge-success-bg: rgba(57, 255, 106, 0.16) !important;
    --portal-c-badge-success-color: #6dff92 !important;
    --portal-c-badge-warning-bg: rgba(255, 206, 84, 0.16) !important;
    --portal-c-badge-warning-color: #ffce54 !important;
    --portal-c-badge-danger-bg: rgba(255, 95, 86, 0.16) !important;
    --portal-c-badge-danger-color: #ff8a82 !important;
    --portal-c-badge-info-bg: rgba(57, 255, 106, 0.1) !important;
    --portal-c-badge-info-color: #9dffb8 !important;

    --portal-c-btn-success-bg: #2f9e44 !important;
    --portal-c-btn-success-bg-hover: #37b24c !important;
    --portal-c-btn-success-border: rgba(57, 255, 106, 0.12) !important;
    --portal-c-btn-success-border-hover: rgba(57, 255, 106, 0.2) !important;
    --portal-c-btn-warning-bg: #d9822b !important;
    --portal-c-btn-warning-bg-hover: #ec8f30 !important;
    --portal-c-btn-warning-border: rgba(57, 255, 106, 0.12) !important;
    --portal-c-btn-warning-border-hover: rgba(57, 255, 106, 0.2) !important;

    --portal-c-progress-bg: rgba(57, 255, 106, 0.08) !important;
    --portal-c-progress-bar-bg: var(--portal-c-accent) !important;
    --portal-c-progress-bar-stripe: rgba(0, 0, 0, 0.2) !important;

    --portal-c-skeleton-bg: rgba(57, 255, 106, 0.08) !important;
    --portal-c-skeleton-sheen: rgba(57, 255, 106, 0.06) !important;

    --portal-c-status-idle: var(--portal-c-text-muted) !important;
    --portal-c-row-hover: rgba(57, 255, 106, 0.05) !important;
    --portal-c-row-selected: color-mix(in srgb, var(--portal-c-accent) 14%, transparent) !important;

    --portal-c-elev-overlay: 0 4px 16px rgba(0, 0, 0, 0.55), 0 24px 64px rgba(0, 0, 0, 0.7) !important;
    --portal-c-elev-menu: 0 12px 40px rgba(0, 0, 0, 0.7) !important;
    --portal-c-elev-hero: 0 8px 24px rgba(0, 0, 0, 0.55), 0 32px 88px rgba(0, 0, 0, 0.72) !important;

    --portal-c-input-bg: rgba(0, 0, 0, 0.45) !important;
    --portal-c-input-inset: inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    --portal-c-input-bg-focus: var(--portal-c-input-bg) !important;
    --portal-c-input-placeholder: rgba(214, 255, 224, 0.35) !important;

    --portal-c-chrome-hover: rgba(57, 255, 106, 0.1) !important;
    --portal-c-overlay: rgba(6, 20, 10, 0.78) !important;
    --portal-c-overlay-opaque: #07150a !important;
    --portal-c-scrim: rgba(0, 0, 0, 0.6) !important;
    --portal-c-kbd: rgba(57, 255, 106, 0.4) !important;

    /* Canvas — replace the violet/teal aurora with a quiet green vignette. */
    background-color: #030503 !important;
    background-image: radial-gradient(ellipse 70rem 34rem at 85% -10%, rgba(57, 255, 106, 0.05), transparent 60%) !important;
    background-attachment: fixed !important;
    color: var(--portal-c-text) !important;
}

/* ── Chrome: sidebar/system-bar/tab-bar go black/green, overriding the
   dark chrome rules those elements keep matching (they stay data-bs-theme
   ="dark" for Bootstrap's sake — see index.php). ──

   #site-sidebar left this list when the sidebar died in v3.1.1 and rejoined it
   on 2026-08-28. The comment above never stopped saying "sidebar", which is
   how the gap was found: without the selector the slab kept the DARK chrome
   rule — purple-tinted glass carrying a magenta-and-teal aurora — down the
   left of a green-on-black page. The `background-image` below is what puts
   that aurora out, so the slab needs nothing of its own here. */
html[data-portal-theme="matrix"] #site-sidebar,
html[data-portal-theme="matrix"] #site-footer,
html[data-portal-theme="matrix"] #portal-tab-bar {
    /* TRANSLUCENT, like every other theme's chrome. This was #030503 — fully
       opaque, no alpha — and it got away with it for a long time because on a
       near-black canvas an opaque near-black bar looks exactly like a
       transparent one. It was not free, though: the dark chrome rule's
       backdrop-filter still applied underneath, so the bar paid for a
       per-frame blur of a backdrop it then painted over.
       Same lever as the dark chrome (--portal-chrome-opacity-dark), which
       means the three glass gates at the end of portal-components.css take
       this bar near-opaque along with everything else. */
    background-color: rgba(3, 5, 3, var(--portal-chrome-opacity-dark, 0.2)) !important;
    background-image: linear-gradient(
        180deg,
        rgba(9, 26, 14, var(--portal-chrome-opacity-dark, 0.2)) 0%,
        rgba(3, 5, 3, var(--portal-chrome-opacity-dark, 0.2)) 100%
    ) !important;
    border-color: rgba(57, 255, 106, 0.22) !important;
    /* A slab has four edges, and a translucent one NEEDS them — opaque, the
       bar was its own silhouette and could afford `box-shadow: none`. Green
       specular rather than the dark theme's white: on this canvas the
       theme's line colour is the light source. */
    box-shadow: inset 0 1px 0 rgba(57, 255, 106, 0.16),
                inset 0 -1px 0 rgba(0, 0, 0, 0.6),
                0 0 24px rgba(57, 255, 106, 0.08) !important;
    color: #39ff6a !important;
}

html[data-portal-theme="matrix"] #site-footer { border-top: 1px solid rgba(57, 255, 106, 0.22) !important; }

/* .portal-tab-link, not `a`: the tab bar's Search and Menu slots are
   <button>s, and the anchor-only selector left them wearing the dark-chrome
   colors in a green bar. */
html[data-portal-theme="matrix"] #site-footer .portal-bar-breadcrumb,
html[data-portal-theme="matrix"] #site-footer .portal-launcher-btn,
html[data-portal-theme="matrix"] #site-footer .portal-bar-user-btn,
html[data-portal-theme="matrix"] #site-sidebar .portal-sidebar-link,
html[data-portal-theme="matrix"] #portal-tab-bar .portal-tab-link {
    color: rgba(57, 255, 106, 0.78) !important;
}

/* The current row keeps its accent pill (--portal-c-accent is green here) and
   its weight, but not a colour of its own — the rule above is !important and
   flattens it, exactly as it already flattens the tab bar's [aria-current].
   Two carriers is what the dark theme has too; only the third is lost. */
html[data-portal-theme="matrix"] #site-sidebar .portal-sidebar-link i {
    color: inherit !important;
}

html[data-portal-theme="matrix"] #portal-tab-bar .portal-tab-link:hover {
    color: #39ff6a !important;
    background-color: rgba(57, 255, 106, 0.1) !important;
    text-shadow: 0 0 8px rgba(57, 255, 106, 0.35);
}

html[data-portal-theme="matrix"] .dropdown-menu {
    background-color: #030503 !important;
    border-color: rgba(57, 255, 106, 0.22) !important;
    box-shadow: 0 0 20px rgba(57, 255, 106, 0.12) !important;
}

html[data-portal-theme="matrix"] .dropdown-menu .dropdown-header,
html[data-portal-theme="matrix"] .dropdown-menu .dropdown-item {
    color: rgba(57, 255, 106, 0.78) !important;
}

html[data-portal-theme="matrix"] .dropdown-menu .dropdown-item:hover,
html[data-portal-theme="matrix"] .dropdown-menu .dropdown-item:focus {
    color: #39ff6a !important;
    background-color: rgba(57, 255, 106, 0.1) !important;
}

html[data-portal-theme="matrix"] .dropdown-menu .dropdown-divider {
    border-color: rgba(57, 255, 106, 0.22) !important;
}

/* Bell + search + drawer toggle: green icon/border only — no filled
   background plate. */
html[data-portal-theme="matrix"] .portal-notif-btn,
html[data-portal-theme="matrix"] .portal-launcher-btn,
html[data-portal-theme="matrix"] .portal-bar-user-btn {
    border-color: rgba(57, 255, 106, 0.2) !important;
    color: #39ff6a !important;
}

/* Sparky's white-ink art already reads correctly on this canvas (portal-theme.js
   treats matrix like dark for the art swap) — just drop the usual purple/teal
   glow some chrome surfaces put behind icons/badges, if any survive the token
   pass above, in favor of the flat green line work. */
html[data-portal-theme="matrix"] .portal-icon-badge {
    box-shadow: none !important;
}

/* ── Matrix rain (public/js/site/portal-matrix-rain.js) ─────────────────
   Injected as <body>'s FIRST child — plain DOM-order stacking (no z-index
   needed) puts it behind every other body child, chrome included, the same
   way /RND's canvas sits behind .brian-shell. [hidden] is how the script
   parks it between theme flips instead of destroying/recreating the canvas. */
#portal-matrix-rain {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0.16;
    pointer-events: none;
}

#portal-matrix-rain[hidden] {
    display: none;
}

/* ── Sliders (.form-range) — Bootstrap's stock thumb/track are near-invisible
   on this canvas; recolor to the accent green. Separate rules per engine:
   a browser drops a whole selector list when it doesn't recognize the
   other engine's pseudo. */
html[data-portal-theme="matrix"] .form-range::-webkit-slider-thumb {
    background-color: var(--portal-c-accent);
    box-shadow: 0 0 0 1px var(--portal-c-on-accent);
}

html[data-portal-theme="matrix"] .form-range::-webkit-slider-runnable-track {
    background-color: rgba(57, 255, 106, 0.18);
}

html[data-portal-theme="matrix"] .form-range::-moz-range-thumb {
    background-color: var(--portal-c-accent);
    box-shadow: 0 0 0 1px var(--portal-c-on-accent);
}

html[data-portal-theme="matrix"] .form-range::-moz-range-track {
    background-color: rgba(57, 255, 106, 0.18);
}

html[data-portal-theme="matrix"] .form-range:focus::-webkit-slider-thumb {
    box-shadow: var(--portal-c-focus-ring), 0 0 0 1px var(--portal-c-on-accent);
}

html[data-portal-theme="matrix"] .form-range:focus::-moz-range-thumb {
    box-shadow: var(--portal-c-focus-ring), 0 0 0 1px var(--portal-c-on-accent);
}