/*
 * TaiGHT Global Styles — Nordic Precision
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--mud-typography-default-family, 'Space Grotesk', system-ui, sans-serif);
    font-size: var(--mud-typography-default-size, 1rem);
    line-height: var(--mud-typography-default-lineheight, 1.6);
    background-color: var(--mud-palette-background, var(--brand-bg));
    color: var(--mud-palette-text-primary, var(--brand-text-primary));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1:focus { outline: none; }

/* Blazor error boundary */
.blazor-error-boundary {
    background-color: var(--mud-palette-error);
    padding: 1rem;
    color: #fff;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ============================================
   HERO
   ============================================ */
.hero-section {
    position: relative;
    background: var(--gradient-cosmic-cosmos);
    color: var(--mud-palette-appbar-text);
    overflow: hidden;
}

/* Cosmic starfield wrapper. Fills the hero band, sits behind the content
   (the hero's MudContainer carries position: relative + z-index: 1). The
   two canvases stack on top of each other; Layer 2 (Three.js drifting
   points) paints over Layer 1 (static field with blinkers). Both
   pointer-events: none so they never intercept clicks on the hero. */
.starfield {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.starfield canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Signature wire icosahedron — Three.js scene host. Lives inside the home
   hero, beneath the CTA stack. Background is transparent so the hero's
   cosmic gradient + starfield show through. Hidden on mobile (the JS init
   short-circuits there as well, so no WebGL context is created). */
.icosahedron-band {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: 340px;
    margin: 0 auto;
    background: transparent;
    overflow: visible;
}
.icosahedron-band canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
@media (max-width: 768px) {
    .icosahedron-band { display: none; }
    /* Icosahedron is the hero's bottom spacer on desktop -- hiding it on
       mobile leaves the CTAs hugging the next section, so restore the 64
       px bottom pad that the hero's pt-16 only puts on top. */
    .hero-section .mud-grid {
        padding-bottom: 64px;
    }
}

/* Hero logo above the display title (replaces the old "Earth-based" pill) */
.hero-logo {
    width: clamp(120px, 14vw, 180px);
    height: auto;
    display: block;
}

/* ============================================
   SECTIONS
   ============================================ */
.section-alt {
    background-color: var(--mud-palette-surface);
}

.section-dark {
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-appbar-text);
}

.section-accent {
    background: var(--gradient-cosmic-cosmos);
    color: var(--brand-almost-white);
}

/* ============================================
   SERVICE CARDS
   ============================================ */
.service-card-icon {
    font-size: var(--typo-headline-2-size) !important;
    width: var(--typo-headline-2-size) !important;
    height: var(--typo-headline-2-size) !important;
    color: var(--brand-aqua-pulse) !important;
    align-self: flex-start;
}

/* ============================================
   SUBTLE EFFECTS
   ============================================ */
.glass-card {
    background: color-mix(in srgb, var(--brand-night-violet) 50%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--brand-nebula-violet) 30%, transparent);
}

.hover-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px color-mix(in srgb, var(--brand-nebula-violet) 25%, transparent);
}

/* Brand button variants (per design PDF #5).
   - .btn-primary   = Filled Nebula Violet + Almost White text — the Main CTA
   - .btn-secondary = transparent + Almost White border + Almost White text
   - .btn-tertiary  = text-only, Almost White (defined further down)
   Pair with MudButton Variant="Variant.Filled" / "Variant.Outlined" /
   "Variant.Text" respectively. */
.btn-primary {
    background: var(--brand-nebula-violet) !important;
    color: var(--brand-almost-white) !important;
}
.btn-primary:hover {
    background: var(--brand-galaxy-purple) !important;
}

.btn-secondary {
    border: 1px solid var(--brand-nebula-violet) !important;
    color: var(--brand-almost-white) !important;
    background: transparent !important;
}
.btn-secondary:hover {
    background: color-mix(in srgb, var(--brand-nebula-violet) 15%, transparent) !important;
    border-color: var(--brand-nebula-violet) !important;
}

/* TaiGHT brand — highlight "ai" */
.brand-ai {
    color: var(--brand-aqua-pulse);
    font-style: normal;
}

/* Article body — rendered markdown */
.article-body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    color: var(--mud-palette-text-primary);
}

.article-body h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    color: var(--mud-palette-text-primary);
}

.article-body p {
    color: var(--mud-palette-text-secondary);
    line-height: var(--line-height-article);
    margin-bottom: 1rem;
}

.article-body strong {
    color: var(--brand-aqua-pulse);
    font-weight: 600;
}

/* Long-form paragraph utility — applies the prose line-height
   to brand Body (16px) without changing the font size. Use on
   non-card narrative copy (Privacy paragraphs, About body, etc.)
   where the tight 20px brand line feels cramped.
   Multiple selectors handle plain HTML (<ul>, <p>) and MudText's
   compound class output (.mud-typography.body-prose). */
.body-prose,
.mud-typography.body-prose,
ul.body-prose,
p.body-prose {
    line-height: var(--line-height-prose) !important;
}

.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.article-body ul,
.article-body ol {
    color: var(--mud-palette-text-secondary);
    line-height: var(--line-height-article);
    margin-bottom: 1rem;
    padding-left: 2rem;
}

/* Aqua Pulse bullets / numbers in article lists. */
.article-body li::marker {
    color: var(--brand-aqua-pulse);
}

.article-body th {
    text-align: left;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    padding: 10px 12px;
    border-bottom: 2px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

.article-body td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary);
    line-height: 1.6;
}

.article-body tr:hover td {
    background: var(--mud-palette-primary-hover);
}

.article-body li {
    margin-bottom: 0.4rem;
}

.article-body blockquote {
    border-left: 3px solid var(--mud-palette-primary);
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.article-body code {
    background: var(--mud-palette-surface);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.article-body pre {
    background: var(--mud-palette-surface);
    padding: 1rem;
    border-radius: var(--mud-default-borderradius);
    overflow-x: auto;
    margin-bottom: 1rem;
}

/* Markdown body images */
.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mud-default-borderradius);
    display: block;
    margin: 1em 0;
}

/* Article 3-column layout: TOC | Article | Sidebar */
.article-3col {
    display: grid;
    grid-template-columns: 180px 1fr 240px;
    gap: 2rem;
}

.article-toc-inner {
    position: sticky;
    top: var(--site-sticky-top);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

.article-main {
    min-width: 0;
}

.article-sidebar-sticky {
    position: sticky;
    top: 80px;
}

.toc-item {
    font-size: 0.75rem;
    color: var(--brand-almost-white);
    text-decoration: none;
    padding: 4px 0 4px 12px;
    border-left: 2px solid var(--mud-palette-divider);
    line-height: 1.4;
    transition: color 0.2s, border-color 0.2s;
    cursor: pointer;
}

.toc-item:hover,
.toc-item.toc-active {
    color: var(--brand-neo-turquoise);
    border-left-color: var(--brand-neo-turquoise);
}

.toc-cta {
    margin-top: 8px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    border-left-color: var(--mud-palette-primary);
    border-left-width: 3px;
    opacity: 1;
    animation: toc-glow 3s ease-in-out infinite;
}

@keyframes toc-glow {
    0%, 100% { color: var(--mud-palette-primary); text-shadow: 0 0 4px color-mix(in srgb, var(--brand-nebula-violet) 25%, transparent); }
    50% { color: var(--brand-plasma-pink); text-shadow: 0 0 16px color-mix(in srgb, var(--brand-plasma-pink) 60%, transparent); }
}

/* Medium: 2 columns, TOC moves to right sidebar position */
@media (max-width: 1200px) {
    .article-3col {
        grid-template-columns: 1fr 180px;
    }

    .article-toc {
        order: 2;
        grid-column: 2;
        grid-row: 1 / -1;
    }

    .article-main {
        grid-column: 1;
    }

    .article-sidebar {
        grid-column: 1;
        order: 3;
    }

    .article-sidebar-sticky {
        position: static;
    }
}

/* Mobile: 1 column, sidebar below, desktop TOC hidden in favour of the
   FAB + bottom-sheet drawer. */
@media (max-width: 768px) {
    .article-3col {
        grid-template-columns: 1fr;
    }

    .article-toc {
        display: none;
    }

    .article-main {
        grid-column: 1;
        grid-row: auto;
    }

    .article-sidebar {
        grid-column: 1;
    }
}

/* Site footer. Pinned to the viewport bottom as a semantic <footer>.
   Z-index 100 sits below MudBlazor's reserved layers (drawer 1100,
   popover 1200, appbar 1300, dialog 1400) so floating UI like the
   article-toc FAB can layer cleanly above. */
.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    background-color: var(--brand-cosmic-black);
    color: var(--brand-almost-white);
}
.site-footer-spacer {
    flex: 1 1 auto;
}

/* Article TOC FAB (mobile only). Centred horizontally with its centre on
   the footer's top edge: footer height is 48px, FAB medium is 48px, so
   bottom = 48 - 24 = 24px puts the FAB centre exactly on the footer's top
   edge. Z-index 200 sits above the site footer (100) but well below
   MudBlazor's drawer layer (1100) so the bottom-sheet drawer covers the
   FAB when open. */
.article-toc-fab {
    display: none;
}
@media (max-width: 768px) {
    .article-toc-fab {
        display: inline-flex;
        position: fixed;
        left: 50%;
        bottom: calc(24px + env(safe-area-inset-bottom));
        transform: translateX(-50%);
        z-index: 200;
    }
}

/* Bottom-sheet drawer that hosts the heading list on mobile. Capped at 60vh
   so the article stays partially visible behind the scrim — the user keeps
   their place. Hidden via the FAB media query on desktop / tablet. */
.article-toc-drawer {
    max-height: 60vh;
}
.article-toc-drawer .toc-item {
    padding: 12px 8px;
    font-size: 16px;
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* Showcase dimension descriptions — line-clamp for consistent height */
.dim-desc {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dim-desc-expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* MudBlazor popover z-index is handled by the framework:
   calc(var(--mud-zindex-dialog) + 3) — already above dialogs.
   Do NOT override with a hardcoded value or popovers inside
   dialogs will render behind the dialog overlay. */

/* Select group headers — override disabled grey */
.mud-list-item.select-group-header,
.mud-list-item.select-group-header .mud-list-item-text,
.mud-list-item.select-group-header .mud-list-item-text * {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 1 !important;
    color: var(--mud-palette-primary) !important;
}

.mud-list-item.select-group-header {
    padding-top: 12px;
    padding-bottom: 2px;
    min-height: 28px;
    pointer-events: none;
}

.select-group-item {
    padding-left: 24px;
}

/* === Floating surface contrast ===
   Dialogs, popovers (select/datepicker/autocomplete/menu dropdowns),
   and the cookie consent banner default to Surface (#11041F Midnight
   Violet) which collides with the page background, leaving floating
   elements with no visible edge. Lift them one tier to Deep Cosmos
   and add a Plasma Pink hairline so edges register clearly.

   Snackbars are intentionally excluded — their severity colour
   (success/warning/error) carries the meaning. */
.mud-dialog,
.mud-popover,
.cosmic-floating {
    background-color: var(--brand-deep-cosmos) !important;
    border: 1px solid var(--brand-plasma-pink) !important;
}

/* === Input accent ===
   Focus + hover states use Aqua Pulse instead of Nebula Violet (Nebula
   is reserved for buttons; inputs follow the cosmic accent pattern —
   aqua icons, aqua hover/focus states).

   MudBlazor uses :focus-within (pseudo-class) for focus, NOT a
   .mud-focused class, and the floating label is a sibling of .mud-input
   via ~ — see _input.scss / _inputlabel.scss for the source rules these
   override. */

/* Focused outlined border -> Aqua Pulse */
.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
    border-color: var(--brand-aqua-pulse) !important;
}

/* Hover outlined border (not focused, not disabled) -> Aqua Pulse.
   Default MudBlazor hover uses --mud-palette-action-default which
   resolves to the light alloy / white-ish text colour. */
.mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover > .mud-input-outlined-border {
    border-color: var(--brand-aqua-pulse) !important;
}

/* Floating label sitting on top of the outlined border -> Almost White,
   regardless of focus state. The Aqua Pulse accent lives on the
   outline border itself; the label is a quiet white sticker either way.
   Covers both shrunk (has value) and focused (cursor in field). */
.mud-input.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--brand-almost-white) !important;
}

/* Cookie consent banner */
.cookie-consent {
    position: fixed;
    bottom: 64px;
    left: 0;
    right: 0;
    z-index: 1500;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    pointer-events: none;
}

.cookie-consent > * {
    pointer-events: auto;
}

/* Divider accent */
.section-divider {
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: var(--brand-plasma-pink);
}

/* Compact tag chip — Aqua Pulse outline, Almost White text.
   Used for content categorization (tech tags, etc.). */
.chip-tag {
    height: 22px !important;
    font-size: 0.65rem !important;
    border-color: var(--brand-aqua-pulse) !important;
    color: var(--brand-almost-white) !important;
}


/* MudToggleGroup — active item uses Nebula Violet fill + Almost White
   text, matching the brand button treatment. Inactive items inherit
   the Plasma Pink border from --mud-palette-lines-default. */
.mud-toggle-item.mud-toggle-item-selected {
    background-color: var(--brand-nebula-violet) !important;
    color: var(--brand-almost-white) !important;
}

/* Filter chip — interactive tag selector. Mirrors .chip-tag styling
   so unselected filters read consistently with content tags; the
   selected (Filled) variant inverts to aqua fill + cosmic-black text
   so it pops as the active state. */
.chip-filter {
    height: 28px !important;
    font-size: 0.75rem !important;
    border-color: var(--brand-aqua-pulse) !important;
    color: var(--brand-almost-white) !important;
}
.chip-filter.mud-chip-filled {
    background-color: var(--brand-aqua-pulse) !important;
    color: var(--brand-cosmic-black) !important;
    border-color: var(--brand-aqua-pulse) !important;
}

/* Tighten default MudChip margin inside tag containers */
.tag-chips .mud-chip {
    margin: 4px !important;
}

/* Markdown editor */
.md-editor-panes {
    display: flex;
    align-items: stretch;
}

.md-editor-edit {
    display: flex;
    flex-direction: column;
}

.md-editor-textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    padding: 12px;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    background: transparent;
    color: var(--mud-palette-text-primary);
    flex: 1;
    field-sizing: content;
}

.md-editor-preview {
    overflow-y: auto;
}


/* ============================================
   COSMIC UTILITIES (issue #107)
   ============================================ */

/* Stat row — 5 equal columns with 18px gap. Drops to 3 then 2 cols
   on narrower viewports. Pure CSS Grid so every tile stays the same
   width without nested MudGrid+MudTooltip wrappers. */
.cosmic-stat-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
@media (max-width: 1024px) {
    .cosmic-stat-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .cosmic-stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* Stat tile — small non-clickable card with Aqua Pulse outline.
   Transparent fill so the section gradient shows through. Aspect
   ratio 10:8.5 matches the landing-page mockup. */
.cosmic-stat-tile {
    background: transparent;
    border: 1px solid var(--brand-aqua-pulse);
    border-radius: var(--mud-default-borderradius);
    padding: 0.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    aspect-ratio: 10 / 8.5;
}
.cosmic-stat-tile__value {
    font-family: var(--brand-font);
    font-weight: 700;
    font-size: var(--typo-headline-2-size);
    line-height: var(--typo-headline-2-line);
    letter-spacing: -0.02em;
    color: var(--brand-aqua-pulse);
}
.cosmic-stat-tile__icon {
    font-size: var(--typo-headline-2-size) !important;
    color: var(--brand-aqua-pulse) !important;
    line-height: 1;
}
/* Stat tile label is a small UI-component caption — sized below the
   brand Body spec because the brand has no caption tier defined.
   Documented project-level extension: 12/16/500 uppercase. */
.cosmic-stat-tile__label {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-light-alloy);
}

/* Mobile nav-drawer link override. The TaiGHTTheme sets Button.TextTransform
   to "none" globally so MudButton labels render in proper case. The drawer
   wants the classic uppercase nav look for hierarchy + brand emphasis on
   mobile, so force it back on for these specific links. */
.drawer-nav-link {
    text-transform: uppercase !important;
    letter-spacing: 0.08em;
}

/* Section variant: matches the hero gradient. Use on a SectionContainer
   that needs visual continuity with the hero (e.g. the stats row). */
.section-hero-gradient {
    background: var(--gradient-cosmic-cosmos);
}

/* Service / showcase / poc / insight card — Midnight Violet surface
   with Plasma Pink accent outline. Use anywhere a content tile sits
   on the Cosmic Black page background.
   overflow:hidden makes child <img> respect the rounded corners. */
.cosmic-card {
    background: var(--brand-midnight-violet);
    border: 1px solid var(--brand-plasma-pink);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
    transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}
.cosmic-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand-aqua-pulse);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--brand-plasma-pink) 30%, transparent);
}
/* Opt-out modifier: cards used as static display containers (info
   panels, contact details, sidebars) shouldn't lift on hover.
   Apply with Class="cosmic-card cosmic-card--static" */
.cosmic-card--static {
    transition: none;
}
.cosmic-card--static:hover {
    transform: none;
    border-color: var(--brand-plasma-pink);
    box-shadow: none;
}

/* Card row — 3 equal columns with 18px gap, drops to 2 cols then 1
   on narrower viewports. Use for service / PoC / showcase / insight
   card sections. Replaces MudGrid+MudItem nesting. */
.cosmic-card-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 1024px) {
    .cosmic-card-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .cosmic-card-row { grid-template-columns: 1fr; }
}

/* Brand accent colors — wrap any letter run in a span to highlight it.
   Use case: "Br<span class="accent-plasma">ai</span>npower". The
   wordmark "Taight" uses .brand-ai which is aqua; these are for
   broader copy accents. */
.accent-aqua    { color: var(--brand-aqua-pulse); }
.accent-plasma  { color: var(--brand-plasma-pink); }
.accent-turquoise { color: var(--brand-neo-turquoise); }
.accent-violet  { color: var(--brand-nebula-violet); }

/* Text links — site-wide Almost White text. Hover shifts to Neo
   Turquoise with an underline. Targets MudLink and raw <a> in
   article bodies. Excludes MudButton / MudIconButton / MudNavLink
   (they render <a> with their own classes). */
.mud-link,
.article-body a {
    color: var(--brand-almost-white) !important;
    text-decoration: none !important;
}
.mud-link:hover,
.article-body a:hover {
    color: var(--brand-neo-turquoise) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--brand-neo-turquoise) !important;
    text-underline-offset: 0.2em !important;
    text-decoration-thickness: 2px !important;
}

/* EPPO PPP Showcase isolation — restores the original "Nordic Precision"
   palette inside this single subtree so the data-viz-heavy showcase
   keeps its intended light-theme aesthetic instead of inheriting
   Cosmic. Wrap the showcase content in <div class="eppo-isolate">. */
.eppo-isolate {
    --mud-palette-primary: #1E40AF;
    --mud-palette-secondary: #0F172A;
    --mud-palette-tertiary: #6366F1;
    --mud-palette-info: #1E40AF;
    --mud-palette-success: #059669;
    --mud-palette-warning: #D97706;
    --mud-palette-error: #DC2626;
    --mud-palette-background: #F8F7F4;
    --mud-palette-surface: #FFFFFF;
    --mud-palette-text-primary: #0F172A;
    --mud-palette-text-secondary: #64748B;
    --mud-palette-text-disabled: #94A3B8;
    --mud-palette-divider: #E2E8F0;
    --mud-palette-lines-default: #334155;
    --mud-palette-action-default: #64748B;

    background: #F8F7F4;
    color: #0F172A;
}
/* Hero stays Cosmic-themed even though the body of the showcase is
   isolated to the old light palette. Re-establish the dark text vars
   so MudText inside the hero reads white on the gradient. */
.eppo-isolate .hero-section {
    --mud-palette-text-primary: #F7F7F7;
    --mud-palette-text-secondary: #DBDBDB;
    background: var(--gradient-cosmic-cosmos);
    color: var(--brand-almost-white);
}
.eppo-isolate .mud-link,
.eppo-isolate .article-body a {
    color: #1E40AF !important;
    text-decoration: underline !important;
    text-decoration-color: #1E40AF !important;
}
.eppo-isolate .mud-link:hover,
.eppo-isolate .article-body a:hover {
    color: #1E40AF !important;
    text-decoration-color: #1E40AF !important;
    opacity: 0.8;
}

/* MudTable / MudSimpleTable inside a .cosmic-card use Plasma Pink cell
   borders to match the surrounding card outline. Force all sides via
   border-color so the rule wins regardless of which side MudBlazor
   actually paints (MudTable uses border-bottom on rows; MudSimpleTable
   uses different selectors). */
.cosmic-card .mud-table-cell,
.cosmic-card .mud-table-row .mud-table-cell,
.cosmic-card .mud-simple-table th,
.cosmic-card .mud-simple-table td,
.cosmic-card table th,
.cosmic-card table td {
    border-color: var(--brand-plasma-pink) !important;
}
.cosmic-card .mud-table-head .mud-table-cell,
.cosmic-card .mud-simple-table thead th {
    border-bottom-color: var(--brand-plasma-pink) !important;
}

/* Progress bar variant for "needs improvement" / low-score signals.
   Overrides the rendered MudProgressLinear bar fill so the color is
   driven by --brand-accent-improve (defined in theme.css). Apply
   Class="progress-improve" on the MudProgressLinear. */
.progress-improve .mud-progress-linear-bar,
.progress-improve.mud-progress-linear .mud-progress-linear-bar {
    background-color: var(--brand-accent-improve) !important;
}

/* Tertiary button — text-only, Almost White (PDF #5 Tertiary spec).
   Apply to MudButton Variant="Variant.Text" inside cards / lists. */
.btn-tertiary {
    color: var(--brand-almost-white) !important;
}
.btn-tertiary:hover {
    background: color-mix(in srgb, var(--brand-almost-white) 10%, transparent) !important;
}

/* ROI Calculator brand block — print-only (lives inside .roi-print-header).
   Centred horizontally above the title strip, sized to read as a strong
   masthead element on A4. Logo and wordmark in Almost White on screen
   (unused since the block is print-only), with "ai" letters picking up
   Aqua Pulse via the existing .brand-ai class. */
.roi-hero-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.roi-hero-logo {
    width: 112px;
    height: auto;
}
.roi-hero-wordmark {
    font-family: var(--brand-font);
    font-size: 72px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--brand-almost-white);
    line-height: 1;
}

/* ROI Calculator showcase. Sliders use tabular-nums values, scenario buttons
   highlight the active option in Aqua Pulse, and the "How we calculated this"
   formula list uses tighter typography for legibility on a long methodology
   disclosure. Print stylesheet hides the back-button, scenario toolbar, and
   share/reset/print buttons so a cleanly-printed summary survives. */
.roi-slider-row {
    margin-bottom: 4px;
}
.scenario-active {
    background-color: color-mix(in srgb, var(--brand-aqua-pulse) 12%, transparent) !important;
    border-color: var(--brand-aqua-pulse) !important;
    color: var(--brand-aqua-pulse) !important;
}
.roi-formula-list {
    margin: 0.5rem 0 0 1.25rem;
    padding: 0;
    line-height: 1.6;
    font-size: 0.875rem;
    /* Belt-and-braces: explicit brand font on the list since <li> inherits
       only via the global body rule, not via any MudBlazor typography class. */
    font-family: var(--brand-font);
}
.roi-formula-list li {
    margin-bottom: 0.4rem;
}
/* Sensitivity row: long input labels wrap freely on narrow widths,
   the money value stays on one line and right-aligns. */
.roi-sensitivity-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    line-height: 1.3;
}
.roi-sensitivity-label {
    flex: 1 1 auto;
    min-width: 0;
    word-break: normal;
    overflow-wrap: anywhere;
}
.roi-sensitivity-value {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}
/* Print-only header on the ROI Calculator. Hidden on screen, shown in
   print so the page identifies itself (title, scenario, URL, date). */
.roi-print-header {
    display: none;
}

/* Print stylesheet for the ROI Calculator showcase. The .roi-calculator-page
   wrapper now wraps the entire page (hero + main container + closing CTA),
   so all rules can scope to it. Inside the scope we override the MudBlazor
   palette CSS variables directly — that's the only reliable way to defeat
   the cosmic-theme dark colours that propagate via --mud-palette-* on every
   typography class.

   Goal: clean A4 sheet, black-on-white text + numbers, no charts, no
   interactive controls, no decorative paint, no marketing CTA. */
@media print {
    @page {
        size: A4;
        margin: 18mm 14mm;
    }

    /* Force the document and all chrome to plain white. */
    html, body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    /* Hide global app chrome. */
    .mud-appbar,
    .mud-drawer,
    .site-footer,
    .article-toc-fab,
    .mud-scroll-to-top,
    body > .mud-popover-provider,
    body > .mud-snackbar-provider {
        display: none !important;
    }

    /* Inside the page scope: override the MudBlazor palette variables so
       every descendant that paints from --mud-palette-tertiary / primary /
       text-primary / background / surface inherits print-safe colours,
       not the cosmic-theme dark palette. This is the rule that fixes
       "Aqua-Pulse text on Cosmic-Black background" everywhere. */
    .roi-calculator-page,
    .roi-calculator-page * {
        --mud-palette-background: #ffffff !important;
        --mud-palette-surface: #ffffff !important;
        --mud-palette-text-primary: #000000 !important;
        --mud-palette-text-secondary: #333333 !important;
        --mud-palette-text-disabled: #777777 !important;
        --mud-palette-primary: #000000 !important;
        --mud-palette-secondary: #000000 !important;
        --mud-palette-tertiary: #000000 !important;
        --mud-palette-divider: #cccccc !important;
        --brand-cosmic-black: #ffffff !important;
        --brand-midnight-violet: #ffffff !important;
        --brand-deep-cosmos: #ffffff !important;
        --brand-night-violet: #ffffff !important;
        --brand-galaxy-purple: #ffffff !important;
        --brand-almost-white: #000000 !important;
        --brand-light-alloy: #333333 !important;
        background-color: transparent !important;
        background-image: none !important;
        color: #000000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Hero section is fully hidden on print — the print-header above carries
       the masthead (brand block + title + date), so the on-screen hero with
       its gradient backdrop and h3 title would be redundant. */
    .roi-calculator-page .hero-section {
        display: none !important;
    }

    /* Hide everything interactive or decorative. */
    .roi-calculator-page .roi-toolbar,
    .roi-calculator-page .mud-slider,
    .roi-calculator-page .roi-slider-row .mud-icon,
    .roi-calculator-page .mud-chart,
    .roi-calculator-page .mud-progress-linear,
    .roi-calculator-page .roi-actions,
    .roi-calculator-page .roi-back,
    .roi-calculator-page .roi-cta,
    .roi-calculator-page .mud-button,
    .roi-calculator-page .mud-icon-button,
    .roi-calculator-page .mud-fab,
    .roi-calculator-page .mud-expansion-panel-icon,
    .roi-calculator-page .mud-expand-panel-icon {
        display: none !important;
    }

    /* Print-only brand block at the top of the print header. The wordmark
       reads black on white because the print-scope palette override sets
       --brand-almost-white to #000, and "ai" reads in Aqua Pulse via the
       .brand-ai class which uses --brand-aqua-pulse (NOT remapped).
       Logo prints in its native colours: nebula violet on the left half
       reads on white paper; the white right half blends into the bg, so
       the masthead reads as "half-brain in nebula on white" — same intent
       as the on-screen treatment but without forcing the SVG to a solid
       silhouette. */
    .roi-calculator-page .roi-print-header .roi-hero-brand .brand-ai {
        color: var(--brand-aqua-pulse) !important;
    }

    /* Flatten the cosmic-card and MudPaper containers — no borders, no
       shadows, no full-bleed paint. Lets the layout collapse onto the
       white page background. */
    .roi-calculator-page .cosmic-card,
    .roi-calculator-page .mud-paper,
    .roi-calculator-page .mud-paper-square,
    .roi-calculator-page .mud-card,
    .roi-calculator-page .mud-expand-panel,
    .roi-calculator-page .mud-expand-panels {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 0 0.75rem 0 !important;
    }

    /* Defensive expand-panel content rules. The methodology panel is opened
       programmatically before window.print() (PrintSummary in the razor
       sets _methodologyExpanded = true), but if the user expands it
       manually first we still need the content visible without MudBlazor's
       collapse animation interfering. */
    .roi-calculator-page .mud-expand-panel-text,
    .roi-calculator-page .mud-collapse-container,
    .roi-calculator-page .mud-collapse-wrapper,
    .roi-calculator-page .mud-collapse-wrapper-inner {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        padding: 0 !important;
    }
    .roi-calculator-page .mud-expand-panel-header {
        padding: 0 !important;
        min-height: 0 !important;
        cursor: default !important;
    }

    /* Show the print-only self-identifying header. */
    .roi-calculator-page .roi-print-header {
        display: block !important;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #999 !important;
        margin-bottom: 1rem;
        font-size: 0.875rem;
    }

    /* Page-break management. Keep compact blocks intact across page breaks. */
    .roi-calculator-page .roi-slider-row,
    .roi-calculator-page .roi-formula-list li,
    .roi-calculator-page .roi-sensitivity-row,
    .roi-calculator-page .mud-grid > .mud-grid-item {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Section headings stick to their following content. */
    .roi-calculator-page .mud-typography-h2,
    .roi-calculator-page .mud-typography-h4,
    .roi-calculator-page .mud-typography-h5,
    .roi-calculator-page .mud-typography-h6,
    .roi-calculator-page .mud-typography-subtitle1,
    .roi-calculator-page .mud-typography-subtitle2 {
        page-break-after: avoid;
        break-after: avoid;
    }

    /* Orphan / widow control on long paragraphs. */
    .roi-calculator-page p,
    .roi-calculator-page .mud-typography {
        orphans: 3;
        widows: 3;
    }

    /* Plain text links — URLs are listed in the header anyway. */
    .roi-calculator-page .mud-link {
        color: inherit !important;
        text-decoration: none !important;
    }
}

/* Top-bar nav links rendered uppercase to match landing-page mockup.
   Targets MudButton-based nav in the appbar without editing markup. */
.mud-appbar .mud-button-text {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Share buttons (LinkedIn / X / Copy link). Wraps cleanly on mobile,
   accent-coloured on hover for affordance. */
.share-bar {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}
.share-bar--inline {
    margin: 0;
}
/* Reserved for a future sticky-sidebar caller (e.g. desktop side-rail on
   long-form articles). Not currently rendered by any page — every detail
   page uses the inline variant. Sticks below the global app-bar via the
   shared --site-sticky-top token in theme.css. */
.share-bar--floating {
    position: sticky;
    top: var(--site-sticky-top);
    flex-direction: column;
    align-self: flex-start;
}
.share-bar .mud-icon-button {
    color: var(--brand-aqua-pulse);
    transition: color 160ms ease, background 160ms ease;
}
.share-bar .mud-icon-button:hover {
    color: var(--brand-aqua-pulse);
    background: color-mix(in srgb, var(--brand-aqua-pulse) 12%, transparent);
}