/* emaindicator theme: Sana light-theme overrides + UI polish + spacing utilities.
   Extracted from base.html <style> so the browser can cache it. Loaded AFTER
   tailwind.css so it wins on equal specificity. */

:root {
      --color-canvas-white:  #ffffff;
      --color-ghost-fog:     #efefed;
      --color-midnight-ink:  #090909;
      --color-abyssal-black: #000000;
      --color-sterling-gray: #d9d9d9;
      --color-action-blue:   #0057f3;
      --color-warning-orange:#ff5102;

      --font-sana-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

      --radius-cards:          16px;
      --radius-buttons:        32px;
      --radius-navigation:      6px;
      --radius-largefeatures:  24px;
      --radius-specialbuttons: 36px;
    }

    /* ---- Base: light canvas + Sana Sans typography ---- */
    html, body {
      background: var(--color-canvas-white);
      color: var(--color-midnight-ink);
      font-family: var(--font-sana-sans);
      font-feature-settings: "kern" 1;
      letter-spacing: -0.064px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    body { font-weight: 400; }
    h1, h2, h3, h4 { font-family: var(--font-sana-sans); color: var(--color-abyssal-black); font-weight: 500; letter-spacing: -0.02em; }

    /* ---- Backgrounds → Canvas White / Ghost Fog ---- */
    .bg-slate-950, .bg-slate-950\/30, .bg-slate-950\/60, .bg-slate-950\/70 { background-color: var(--color-canvas-white) !important; }
    .bg-slate-900, .bg-slate-900\/30, .bg-slate-900\/40, .bg-slate-900\/50 { background-color: var(--color-ghost-fog) !important; }

    /* Sticky header gets translucent white blur */
    header.bg-slate-950\/70 { background-color: rgba(255,255,255,.85) !important; -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); }

    /* Kill the dark hero gradient overlay + slate card gradients */
    .bg-gradient-to-b, .bg-gradient-to-br, .bg-gradient-to-r, .bg-gradient-to-t, .bg-gradient-to-l, .bg-gradient-to-tr, .bg-gradient-to-bl, .bg-gradient-to-tl { background-image: none !important; }
    /* Logo squares (was amber→orange gradient) → solid Action Blue */
    span.bg-gradient-to-br.from-amber-400.to-orange-600 { background-color: var(--color-action-blue) !important; border-radius: var(--radius-navigation); }
    /* Live cards (were slate-900→slate-950 gradient) → Ghost Fog */
    .bg-gradient-to-br.from-slate-900.to-slate-950 { background-color: var(--color-ghost-fog) !important; }
    /* Pillar callout (was amber→orange tint) → soft blue tint */
    .bg-gradient-to-br.from-amber-500\/10.to-orange-500\/5,
    .bg-gradient-to-r.from-amber-500\/10.to-orange-500\/5,
    .bg-gradient-to-br.from-amber-500\/5,
    .bg-gradient-to-br.from-amber-500\/10 { background-color: rgba(0,87,243,.06) !important; }

    /* Gradient TEXT (`bg-clip-text text-transparent`) → solid Action Blue */
    .bg-clip-text.text-transparent,
    .text-transparent { color: var(--color-action-blue) !important; -webkit-background-clip: initial !important; background-clip: initial !important; }

    /* ---- Borders → Sterling Gray (or Action Blue for emphasized) ---- */
    .border-slate-800, .border-slate-800\/50, .border-slate-800\/60, .border-slate-800\/80,
    .border-slate-700, .border-slate-600\/40 { border-color: var(--color-sterling-gray) !important; }
    .divide-slate-800\/80 > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-sterling-gray) !important; }

    /* ---- Text colors ---- */
    .text-white, .text-slate-100, .text-slate-200 { color: var(--color-midnight-ink) !important; }
    .text-slate-300 { color: var(--color-midnight-ink) !important; }
    .text-slate-400 { color: rgba(9,9,9,.66) !important; }
    .text-slate-500 { color: rgba(9,9,9,.55) !important; }
    /* slate-900 is used as text on amber-bg buttons → flip to white on the new blue button */
    .text-slate-900 { color: var(--color-canvas-white) !important; }

    /* ---- Brand accents (was amber/orange) → Action Blue ---- */
    .text-amber-300, .text-amber-400, .text-amber-500, .text-amber-600 { color: var(--color-action-blue) !important; }
    .bg-amber-400 { background-color: var(--color-action-blue) !important; color: var(--color-canvas-white) !important; border-radius: var(--radius-buttons); }
    .bg-amber-300 { background-color: #003ec0 !important; color: var(--color-canvas-white) !important; }
    .border-amber-400, .border-amber-400\/40, .border-amber-500\/30, .border-amber-500\/40 { border-color: var(--color-action-blue) !important; }
    .hover\:text-amber-300:hover, .hover\:text-amber-400:hover { color: var(--color-action-blue) !important; }
    .hover\:bg-amber-300:hover { background-color: #003ec0 !important; }
    .hover\:border-amber-400:hover { border-color: var(--color-action-blue) !important; }
    .focus\:bg-amber-400:focus { background-color: var(--color-action-blue) !important; color: var(--color-canvas-white) !important; }
    .focus\:text-slate-900:focus { color: var(--color-canvas-white) !important; }

    /* ---- Bull (was emerald) → Action Blue tints ---- */
    .bg-emerald-500\/10, .bg-emerald-500\/15, .bg-emerald-500\/20 { background-color: rgba(0,87,243,.10) !important; }
    .text-emerald-300, .text-emerald-400, .text-emerald-500 { color: var(--color-action-blue) !important; }
    .border-emerald-500\/30, .border-emerald-500\/40 { border-color: var(--color-action-blue) !important; }
    .bg-emerald-400 { background-color: var(--color-action-blue) !important; }

    /* ---- Bear (was rose) → Warning Orange tints ---- */
    .bg-rose-500\/10, .bg-rose-500\/15, .bg-rose-500\/20 { background-color: rgba(255,81,2,.12) !important; }
    .text-rose-300, .text-rose-400, .text-rose-500 { color: var(--color-warning-orange) !important; }
    .border-rose-500\/30, .border-rose-500\/40 { border-color: var(--color-warning-orange) !important; }
    .bg-rose-400 { background-color: var(--color-warning-orange) !important; }

    /* ---- Ranging (was amber pill in macros) → Ghost Fog with midnight ink ---- */
    /* Distinguishable from brand-blue accents because `.bg-amber-500\/15` only exists in the badge context */
    .bg-amber-500\/5, .bg-amber-500\/10, .bg-amber-500\/15, .bg-amber-500\/20 { background-color: var(--color-ghost-fog) !important; }
    .bg-amber-500 { background-color: var(--color-warning-orange) !important; }
    .bg-amber-400.text-slate-900 { background-color: var(--color-action-blue) !important; color: var(--color-canvas-white) !important; }
    .text-slate-400.hover\:text-amber-400:hover { color: var(--color-action-blue) !important; }

    /* ---- Sana radii on common chrome ---- */
    .rounded, .rounded-sm, .rounded-md { border-radius: var(--radius-navigation) !important; }
    .rounded-lg { border-radius: 12px !important; }
    .rounded-xl, .rounded-2xl { border-radius: var(--radius-cards) !important; }
    .rounded-3xl { border-radius: var(--radius-largefeatures) !important; }
    .rounded-full { border-radius: 9999px !important; }
    /* Keep the bb logo square shape but soften it */
    span.w-6.h-6.rounded-sm { border-radius: var(--radius-navigation) !important; }

    /* ---- Buttons: pill shape per Sana spec ---- */
    a.px-4.py-2.bg-amber-400, a.px-4.py-2.rounded.bg-amber-400 { border-radius: var(--radius-buttons) !important; padding: 10px 18px !important; font-weight: 500; box-shadow: none; }
    a.px-4.py-2.rounded.border, a.px-4.py-2.border { border-radius: var(--radius-buttons) !important; padding: 10px 18px !important; font-weight: 500; }

    /* ---- Tables (used inside live block, methodology) ---- */
    table { color: var(--color-midnight-ink); }

    /* ---- Form elements ---- */
    input, textarea, select { background: var(--color-canvas-white) !important; color: var(--color-midnight-ink) !important; border-color: var(--color-sterling-gray) !important; }
    input:focus, textarea:focus, select:focus { border-color: var(--color-action-blue) !important; outline: 2px solid rgba(0,87,243,.20) !important; outline-offset: 0; }

    /* ---- .prose: light-theme blog body ---- */
    .prose, article.prose, .prose-invert { color: var(--color-midnight-ink); font-family: var(--font-sana-sans); font-size: 17px; line-height: 1.6; }
    .prose a, .prose-invert a { color: var(--color-action-blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color .15s; }
    .prose a:hover, .prose-invert a:hover { color: #003ec0; text-decoration-thickness: 2px; }
    .prose strong, .prose b { color: var(--color-abyssal-black); font-weight: 600; }
    .prose em, .prose i { color: var(--color-midnight-ink); }
    .prose code { color: var(--color-abyssal-black); background: var(--color-ghost-fog); padding: .125rem .4rem; border-radius: 4px; font-size: .9em; font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace; }
    .prose pre { background: var(--color-ghost-fog); border: 1px solid var(--color-sterling-gray); border-radius: 12px; padding: 1rem 1.25rem; overflow-x: auto; margin: 1.25rem 0; }
    .prose pre code { background: transparent; padding: 0; color: var(--color-midnight-ink); font-size: .875rem; }
    .prose h1 { font-size: 2.25rem; font-weight: 500; color: var(--color-abyssal-black); margin-top: 2.5rem; margin-bottom: 1rem; line-height: 1.1; letter-spacing: -0.02em; }
    .prose h2 { font-size: 1.75rem; font-weight: 500; color: var(--color-abyssal-black); margin-top: 2.5rem; margin-bottom: 1rem; line-height: 1.15; letter-spacing: -0.02em; }
    .prose h3 { font-size: 1.35rem; font-weight: 500; color: var(--color-abyssal-black); margin-top: 2rem; margin-bottom: .75rem; line-height: 1.25; letter-spacing: -0.015em; }
    .prose h4 { font-size: 1.125rem; font-weight: 600; color: var(--color-abyssal-black); margin-top: 1.5rem; margin-bottom: .5rem; }
    .prose p { color: var(--color-midnight-ink); line-height: 1.65; margin: 1rem 0; }
    .prose ul, .prose ol { padding-left: 1.5rem; margin: 1rem 0; }
    .prose ul { list-style: disc; }
    .prose ol { list-style: decimal; }
    .prose ul li, .prose ol li { color: var(--color-midnight-ink); margin: .5rem 0; line-height: 1.6; }
    .prose ul li::marker, .prose ol li::marker { color: rgba(9,9,9,.45); }
    .prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
    .prose thead { border-bottom: 2px solid var(--color-sterling-gray); }
    .prose th { padding: .625rem .75rem; text-align: left; color: var(--color-abyssal-black); font-weight: 600; background: var(--color-ghost-fog); }
    .prose td { padding: .5rem .75rem; border-top: 1px solid var(--color-sterling-gray); color: var(--color-midnight-ink); }
    .prose blockquote { border-left: 3px solid var(--color-action-blue); padding: .25rem 0 .25rem 1rem; color: var(--color-midnight-ink); margin: 1.25rem 0; font-style: normal; background: var(--color-ghost-fog); border-radius: 0 12px 12px 0; }
    .prose hr { border: 0; border-top: 1px solid var(--color-sterling-gray); margin: 2rem 0; }
    .prose img { max-width: 100%; border-radius: 12px; margin: 1rem 0; }
    .prose .not-prose, .prose .not-prose * { color: inherit; }
    .prose .not-prose a { color: inherit; }

    /* ---- Skip link ---- */
    .focus\:bg-amber-400:focus { background-color: var(--color-action-blue) !important; color: var(--color-canvas-white) !important; border-radius: var(--radius-buttons); }

    /* ---- Selection ---- */
    ::selection { background: rgba(0,87,243,.18); color: var(--color-abyssal-black); }

    /* ============================================================
       RESPONSIVE: restore variants the purged tailwind.css dropped
       ============================================================
       The shipped tailwind.css only contains the @media(min-width:768px)
       block with md:flex / md:grid-cols-2/3 / md:text-3xl/5xl/6xl. The
       lg: and sm: variants were purged out, which means the desktop
       8-link primary nav (`hidden lg:flex`) never showed and the 4-col
       footer (`lg:grid-cols-4`) always stayed at 2 cols. We define the
       variants we need here so the templates work as authored. */

    @media (min-width: 768px) {
      .md\:hidden     { display: none !important; }
      .md\:col-span-2 { grid-column: span 2 / span 2 !important; }
    }
    @media (min-width: 1024px) {
      .lg\:flex          { display: flex !important; }
      .lg\:hidden        { display: none !important; }
      .lg\:grid-cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
      .lg\:grid-cols-4   { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
      .lg\:col-span-2    { grid-column: span 2 / span 2 !important; }
      .lg\:sticky        { position: sticky !important; }
      .lg\:top-24        { top: 6rem !important; }
      .lg\:self-start    { align-self: flex-start !important; }
      .blog-post-grid    { grid-template-columns: minmax(0, 1fr) 280px !important; }
    }

    /* ---- Mobile typography (sm: variants are missing from the purge) ---- */
    @media (max-width: 639px) {
      h1.text-3xl, h1.text-4xl, h1.text-5xl { font-size: 2rem !important; line-height: 1.1 !important; }
      h2.text-2xl, h2.text-3xl              { font-size: 1.5rem !important; line-height: 1.2 !important; }
      .text-lg                              { font-size: 1rem !important; }
      /* Trim oversized vertical paddings on tiny screens */
      .pt-16 { padding-top: 2rem !important; }
      .pt-12 { padding-top: 1.5rem !important; }
      .pb-12 { padding-bottom: 2rem !important; }
      .mt-20 { margin-top: 2.5rem !important; }
      .mt-24 { margin-top: 3rem !important; }
    }

    /* ---- Horizontal overflow guards (surgical — don't break numbers/words) ---- */
    html, body { overflow-x: hidden; max-width: 100%; }
    /* The purged tailwind build dropped .overflow-x-auto, so every table wrapper
       (screener, methodology, EMA/SMA pair pages, timeframe alignment) had no
       scroll container — wide tables overflowed and got clipped by the body
       overflow-x:hidden above, leaving columns cut off and unscrollable on
       mobile. Restore it, with momentum scrolling on iOS. */
    .overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }
    /* Long URLs in links can break anywhere; paragraphs break at word boundaries.
       Headings, table cells, mono numbers (like "56,047.40") are NOT included
       so they keep their intrinsic shape. */
    a { overflow-wrap: anywhere; }
    p { overflow-wrap: break-word; }
    /* Wide blog tables — wrapped server-side in <div class="table-scroll">.
       The scroll container takes the overflow, the table keeps its natural
       layout, and the prose container stays viewport-bound. */
    .prose, article.prose { max-width: 100%; min-width: 0; }
    /* CSS Grid items default to min-width: auto (= min-content), which lets
       wide unbreakable content (long inline code, big tables) blow up the
       column width past the viewport. Force min-width: 0 on every direct
       grid child so they shrink to fit. */
    .grid > * { min-width: 0; }
    .prose .table-scroll {
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 1.5rem 0;
      border-radius: 12px;
    }
    .prose .table-scroll table {
      margin: 0;
      min-width: 100%;
    }

    /* ============================================================
       MOBILE HAMBURGER MENU (<768px)
       Pure CSS via <details> — no JS, no flicker on hydration.
       ============================================================ */
    .mobile-menu              { position: relative; display: block; }
    @media (min-width: 768px) { .mobile-menu { display: none !important; } }
    .mobile-menu summary      { list-style: none; cursor: pointer; padding: 10px; margin-right: -10px; color: var(--color-midnight-ink); border-radius: var(--radius-navigation); }
    .mobile-menu summary:hover{ background: var(--color-ghost-fog); }
    .mobile-menu summary::-webkit-details-marker { display: none; }
    .mobile-menu summary::marker                 { content: ''; }
    .mobile-menu-icon         { width: 24px; height: 24px; display: block; }
    .mobile-menu[open] .mobile-menu-icon-closed   { display: none; }
    .mobile-menu:not([open]) .mobile-menu-icon-open { display: none; }
    .mobile-menu-panel        { position: absolute; right: 0; top: 100%; margin-top: 8px; width: min(90vw, 300px); background: var(--color-canvas-white); border: 1px solid var(--color-sterling-gray); border-radius: var(--radius-cards); padding: 8px 0; z-index: 40; }
    .mobile-menu-link         { display: block; padding: 12px 20px; color: var(--color-midnight-ink); font-size: 15px; font-weight: 450; text-decoration: none; }
    .mobile-menu-link:hover, .mobile-menu-link:focus { background: var(--color-ghost-fog); color: var(--color-action-blue); }
    .mobile-menu-divider      { height: 1px; background: var(--color-sterling-gray); margin: 6px 16px; }

    /* ============================================================
       UI POLISH PASS (light touch, site-wide)
       Purely additive on top of the Sana theme — subtle depth, hover
       feedback, smoother interactions, clearer focus rings. No layout
       or spacing changes, so it can't shift any existing content.
       ============================================================ */

    /* Consistent, smooth transitions on interactive chrome */
    a, button, summary {
      transition: color .15s ease, background-color .15s ease,
                  border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

    /* Cards lift gently off the canvas (Sana flattened them) */
    .rounded-xl.border, .rounded-2xl.border, .rounded-lg.border {
      box-shadow: 0 1px 2px rgba(9, 9, 9, .04);
    }

    /* Clickable (anchor) cards get a clear hover affordance */
    a.rounded-xl, a.rounded-2xl, a.rounded-lg {
      transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    a.rounded-xl:hover, a.rounded-2xl:hover, a.rounded-lg:hover {
      border-color: var(--color-action-blue) !important;
      box-shadow: 0 6px 18px rgba(0, 87, 243, .12);
      transform: translateY(-1px);
    }

    /* Data-table rows highlight on hover for readability
       (screeners, regime history, methodology) */
    tbody tr { transition: background-color .12s ease; }
    tbody tr:hover { background: rgba(0, 87, 243, .045); }

    /* Table header weight + tighter rhythm */
    thead th { font-weight: 600; letter-spacing: .02em; }

    /* On-brand keyboard focus ring (accessibility polish) */
    a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
      outline: 2px solid var(--color-action-blue);
      outline-offset: 2px;
    }

    /* Pill buttons: subtle press feedback */
    a.px-4.py-2:active { transform: translateY(1px); }

    /* Slightly stronger sticky-header separation when scrolled */
    header.bg-slate-950\/70 { box-shadow: 0 1px 0 rgba(9, 9, 9, .06); }

    /* ============================================================
       SPACING UTILITY RESTORATION
       The shipped tailwind.css is a purged build missing many spacing
       utilities (directional gaps, fractional steps), which collapsed
       padding/margin/gap on newer markup. Re-declare the standard
       Tailwind scale (0.25rem base unit) so spacing renders correctly
       site-wide. Redefining classes that already exist is harmless
       (identical values); the !important button overrides still win.
       ============================================================ */
    /* gap */
    .gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}
    .gap-x-0\.5{column-gap:.125rem}.gap-x-1{column-gap:.25rem}.gap-x-1\.5{column-gap:.375rem}.gap-x-2{column-gap:.5rem}.gap-x-2\.5{column-gap:.625rem}.gap-x-3{column-gap:.75rem}.gap-x-4{column-gap:1rem}.gap-x-5{column-gap:1.25rem}.gap-x-6{column-gap:1.5rem}.gap-x-8{column-gap:2rem}
    .gap-y-0\.5{row-gap:.125rem}.gap-y-1{row-gap:.25rem}.gap-y-1\.5{row-gap:.375rem}.gap-y-2{row-gap:.5rem}.gap-y-3{row-gap:.75rem}.gap-y-4{row-gap:1rem}.gap-y-6{row-gap:1.5rem}
    /* padding (all sides) */
    .p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}
    /* padding-x / padding-y */
    .px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}
    .py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}
    /* padding single side */
    .pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.pt-12{padding-top:3rem}.pt-16{padding-top:4rem}
    .pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pb-8{padding-bottom:2rem}.pb-12{padding-bottom:3rem}
    .pl-4{padding-left:1rem}.pr-4{padding-right:1rem}
    /* margin */
    .m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}
    .mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}
    .mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
    .ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}
    /* space-between (vertical / horizontal) */
    .space-y-1>:not([hidden])~:not([hidden]){margin-top:.25rem}.space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem}.space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.space-y-6>:not([hidden])~:not([hidden]){margin-top:1.5rem}
    .space-x-2>:not([hidden])~:not([hidden]){margin-left:.5rem}.space-x-3>:not([hidden])~:not([hidden]){margin-left:.75rem}.space-x-4>:not([hidden])~:not([hidden]){margin-left:1rem}

    /* ============================================================
       DARK FOOTER BAND
       The site is light-themed, but the footer is a dark band (per the
       reference design). These rules are scoped to footer.site-footer and
       use !important + the element-prefixed selector so they outrank the
       Sana light-theme class mappings inside the footer only.
       ============================================================ */
    footer.site-footer            { background: #0c1424 !important; }
    footer.site-footer .footer-brand  { color: #ffffff !important; }
    footer.site-footer .footer-head   { color: #ffffff !important; font-size: .95rem; font-weight: 600; }
    footer.site-footer a          { color: #cbd5e1 !important; text-decoration: none; transition: color .15s ease; }
    footer.site-footer a:hover    { color: #4d8dff !important; }
    footer.site-footer .footer-muted  { color: #93a4bd !important; }
    footer.site-footer .footer-dim    { color: #64748b !important; }
    footer.site-footer .footer-strong { color: #e2e8f0 !important; font-weight: 700; }
    footer.site-footer .footer-rule   { border-top: 1px solid rgba(255,255,255,.09) !important; }