/* ============================================================
   NUCLEAUS — The Data & AI Landscape
   Stylesheet
   ============================================================
   Loaded once per page from <link rel="stylesheet" href="css/landscape.css">.
   All design tokens live in :root; theme overrides scope under body.theme-light.
   The dark theme is the default; the light theme is opt-in via the topbar toggle.
   ============================================================ */

   :root {
    /* Nucleaus palette */
    --ember: #FF5A36;
    --ember-active: #FF784F;
    --ember-soft: #FF9A84;
    --ember-mist: #FFD2C6;
    --ember-deep: #B84A32;
    --nucl-cta: #f2c84a;
    --nucl-deep: #C5A72E;
    --nucl-light: #F2DD7A;
    --nucl-soft: #F6E7A6;
    --black-core: #0A0A0B;
    --charcoal: #16181C;
    --dark-text: #4F636B;
    --gray-lines: #BFC3C8;
    --seal: #DCE0E2;
    --light-text: #FAFAF9;
    --white: #FFFFFF;
    --slate-700: #0B2026;
    --slate-600: #1B3139;
    --slate-500: #143D4A;
  
    /* Region tints — very subtle */
    --tint-data: rgba(245, 200, 74, 0.06);
    --tint-intelligence: rgba(255, 154, 132, 0.06);
    --tint-activation: rgba(255, 211, 198, 0.05);
  
    --tint-data-border: rgba(245, 200, 74, 0.18);
    --tint-intelligence-border: rgba(255, 154, 132, 0.18);
    --tint-activation-border: rgba(255, 211, 198, 0.18);
  }
  
  * { box-sizing: border-box; margin: 0; padding: 0; }
  
  html, body {
    height: 100%;
    overflow: hidden;
    background: var(--charcoal);
    color: var(--light-text);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    user-select: none;
  }
  
  /* ---------- TOP BAR ---------- */
  .topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    min-height: 68px;
    background: rgba(10, 10, 11, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(191, 195, 200, 0.08);
    z-index: 100;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Compact right padding so the Learn More button can sit near the edge.
       Spacing between individual elements is set per-element (margin-left)
       rather than via a global flex gap, so right-side items pack tightly
       while left-side breathing room stays generous. */
    padding: 0 12px 0 20px;
  }
  
  /* Default (wide) desktop visual order: brand, search, stats, theme-toggle, learn-more.
     DOM order is brand → stats → theme-toggle → learn-more → break → search, so we use
     CSS `order` to put search visually between brand and stats. */
  .brand-group     { order: 0; }
  .search-wrap     { order: 1; }
  .topbar-stats    { order: 2; }
  .theme-toggle    { order: 3; }
  .learn-more-btn  { order: 4; }
  .topbar-break    { order: 99; display: none; }
  
  .brand-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-top: -7px;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity 0.15s ease;
  }
  .brand:hover { opacity: 0.82; }
  
  .brand-logo {
    height: 42px;
    width: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
  }
  
  .brand-divider {
    width: 1px;
    height: 32px;
    background: rgba(191, 195, 200, 0.42);
    margin: 0 9px 0 -8px;
  }
  
  .brand-sub {
    font-family: 'Sora', sans-serif;
    font-weight: 500;
    font-size: 19px;
    color: rgba(255, 255, 255, 0.94);
    letter-spacing: -0.005em;
    white-space: nowrap;
    /* Small optical drop below center so the tagline visually aligns with the
       lower portion of the wordmark rather than its top edge. */
    margin-top: 5px;
  }
  /* Nucleaus yellow accent on the data & AI part */
  .brand-sub .accent { color: var(--nucl-cta); font-weight: 600; }
  /* Trailing chunk after the accent — inline on desktop with a leading space */
  .brand-sub .brand-sub-trailing { display: inline; }
  .brand-sub .brand-sub-trailing::before { content: ' '; }
  
  .search-wrap {
    flex: 1;
    /* No max-width on desktop — the search bar absorbs whatever space is left after
       brand-group on the left and stats + Learn More on the right. */
    margin-left: 26px;
    position: relative;
  }
  
  .search {
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(242, 200, 74, 0.30);
    border-radius: 10px;
    padding: 12px 14px 12px 42px;
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.18s ease;
    outline: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  }
  
  .search:hover {
    border-color: rgba(242, 200, 74, 0.55);
    background: rgba(255, 255, 255, 0.09);
  }
  
  .search:focus {
    border-color: var(--nucl-cta);
    background: rgba(242, 200, 74, 0.05);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(242, 200, 74, 0.18);
  }
  
  .search::placeholder { color: rgba(255, 255, 255, 0.52); font-weight: 400; }
  
  /* First-load attention pulse — fades out after first interaction or 10s */
  .search.attention-pulse {
    animation: search-pulse 2.4s ease-in-out infinite;
  }
  @keyframes search-pulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(242, 200, 74, 0); }
    50%      { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 0 8px rgba(242, 200, 74, 0.14); }
  }
  
  .search-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: rgba(242, 200, 74, 0.62);
    pointer-events: none;
    transition: color 0.18s ease;
  }
  /* When the input is focused, the icon goes full primary yellow */
  .search-wrap:focus-within .search-icon { color: var(--nucl-cta); }
  
  /* Search tags container — sits inside .search-wrap on the right side of the input */
  .search-tags {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    gap: 4px;
    align-items: center;
    pointer-events: auto;
  }
  .search-tags.visible { display: flex; }
  
  .search.has-tags { padding-right: 220px; }
  
  .search-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.12s ease;
    background: rgba(255, 255, 255, 0.02);
    white-space: nowrap;
  }
  .search-tag .tag-count {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.25);
  }
  .search-tag:hover { transform: translateY(-1px); }
  
  .search-tag.tag-yellow {
    color: var(--nucl-cta);
    border-color: rgba(242, 200, 74, 0.4);
    background: rgba(242, 200, 74, 0.10);
  }
  .search-tag.tag-yellow:hover { background: rgba(242, 200, 74, 0.18); }
  .search-tag.tag-yellow .tag-count { background: rgba(242, 200, 74, 0.15); color: var(--nucl-light); }
  
  .search-tag.tag-orange {
    color: var(--ember-soft);
    border-color: rgba(255, 90, 54, 0.4);
    background: rgba(255, 90, 54, 0.10);
  }
  .search-tag.tag-orange:hover { background: rgba(255, 90, 54, 0.18); }
  .search-tag.tag-orange .tag-count { background: rgba(255, 90, 54, 0.15); color: var(--ember-soft); }
  
  .search-tag.tag-blue {
    color: #8FCBEC;
    border-color: rgba(91, 180, 232, 0.4);
    background: rgba(91, 180, 232, 0.10);
  }
  .search-tag.tag-blue:hover { background: rgba(91, 180, 232, 0.18); }
  
  .search-tag.tag-gray {
    color: #C8CDD3;
    border-color: rgba(168, 176, 184, 0.35);
    background: rgba(168, 176, 184, 0.07);
  }
  .search-tag.tag-gray:hover { background: rgba(168, 176, 184, 0.15); }
  .search-tag.tag-gray .tag-count { background: rgba(168, 176, 184, 0.18); color: #DCE0E2; }
  
  .search-empty {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    padding: 0 8px;
  }
  
  .topbar-stats {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: 20px;
    margin-top: 3px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'JetBrains Mono', monospace;
    flex-shrink: 0;
  }
  
  .topbar-stats strong {
    color: var(--white);
    font-weight: 500;
  }
  
  /* Theme toggle button — small icon button between stats and Learn More.
     Shows moon in dark theme (suggesting click → light), sun in light theme.
     Subtle treatment so it stays out of the way until needed. */
  .theme-toggle {
    flex-shrink: 0;
    margin-left: 10px;
    margin-top: 3px;
    width: 34px;
    height: 30px;
    background: transparent;
    border: 1.5px solid rgba(191, 195, 200, 0.20);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    padding: 0;
    box-sizing: border-box;
  }
  .theme-toggle:hover {
    border-color: var(--nucl-cta);
    color: var(--nucl-cta);
    background: rgba(242, 200, 74, 0.06);
  }
  .theme-toggle-icon { display: block; }
  /* In dark theme (default), show SUN (click → switch to light). */
  .theme-toggle-icon--moon { display: none; }
  /* In light theme, swap: show MOON (click → switch to dark). */
  body.theme-light .theme-toggle-icon--sun { display: none; }
  body.theme-light .theme-toggle-icon--moon { display: block; }
  
  /* Learn More button — pinned to the right edge of the topbar. Yellow outline +
     yellow text (showing the dark page through), inverts to filled yellow on hover. */
  .learn-more-btn {
    flex-shrink: 0;
    margin-left: 18px;
    margin-right: 3px;
    margin-top: 3px;
    background: transparent;
    color: var(--nucl-cta);
    border: 1.5px solid var(--nucl-cta);
    border-radius: 8px;
    padding: 7px 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease, transform 0.12s ease;
    white-space: nowrap;
    line-height: 1.2;
  }
  .learn-more-btn:hover {
    background: var(--nucl-cta);
    color: var(--black-core);
    box-shadow: 0 4px 14px rgba(242, 200, 74, 0.32);
  }
  .learn-more-btn:active { transform: translateY(1px); }
  
  /* ---------- FILTER BAR ---------- */
  .filterbar {
    position: fixed;
    top: 68px; left: 0; right: 0;
    height: 48px;
    background: rgba(10, 10, 11, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(191, 195, 200, 0.06);
    z-index: 99;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    /* Allow contents to wrap onto a second row when horizontal space is tight,
       so the year slider never gets pushed off-screen. The filterbar grows
       vertically to fit; .canvas-wrap's top offset adjusts at each breakpoint. */
    flex-wrap: wrap;
    overflow: visible;
  }
  
  .filter-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    margin-right: 4px;
  }
  
  /* Flex-line-break sibling between main controls and year-filter.
     Hidden on wide viewports (year-filter sits inline). On narrower viewports it claims
     a full row, forcing the year-filter onto the next line WITHOUT stretching it. */
  .filterbar-break {
    display: none;
    width: 100%;
    height: 0;
    flex-basis: 100%;
  }
  
  /* Spectrum + Matrix dropdowns are grouped so they always wrap together as a pair.
     If Matrix has to drop to the next row, Spectrum drops with it (and stays left). */
  .select-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
  
  /* Filter pills.
     Default ("on") shows a thin Nucleaus-yellow border with light text. When the user
     clicks a pill to hide that core, the pill gets the `.inactive` class and goes to
     a muted light-grey look. No orange-on-select — selection state is implicit. */
  .filter-pill {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(242, 200, 74, 0.45);
    border-radius: 8px;
    padding: 6px 12px;
    color: var(--lightText);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
  }
  
  .filter-pill:hover {
    border-color: var(--nucl-cta);
    background: rgba(242, 200, 74, 0.06);
  }
  
  /* The "off" / hidden state — muted light grey border and text */
  .filter-pill.inactive {
    border-color: rgba(191, 195, 200, 0.22);
    color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.02);
  }
  .filter-pill.inactive:hover {
    border-color: rgba(191, 195, 200, 0.42);
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.04);
  }
  
  .filter-pill .count {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
  }
  
  .filter-pill.inactive .count { color: rgba(255, 255, 255, 0.35); }
  
  /* When search is active, dim cores that have no matches in them */
  .filter-pill.dim-no-match {
    opacity: 0.32;
    cursor: not-allowed;
  }
  .filter-pill.dim-no-match:hover { border-color: rgba(255, 255, 255, 0.12); }
  
  /* Year slider */
  .year-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(191, 195, 200, 0.1);
    border-radius: 8px;
    padding: 4px 12px;
    height: 32px;
  }
  
  .year-filter label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
  }
  
  .year-filter input[type="range"] {
    width: 100px;
    accent-color: var(--ember);
  }
  
  .year-filter .year-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--nucl-cta);
    min-width: 38px;
    text-align: center;
  }
  
  /* Reset — prominent, sits on the far left of the filter bar */
  .reset-btn {
    background: transparent;
    border: 1.5px solid var(--ember);
    color: var(--ember);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
  }
  
  .reset-btn:hover {
    background: var(--ember);
    color: var(--lightText);
    border-color: var(--ember);
  }
  
  /* Custom select dropdown */
  .multi-select {
    position: relative;
  }
  
  .multi-select-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(191, 195, 200, 0.1);
    border-radius: 8px;
    padding: 6px 12px;
    color: var(--light-text);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
  }
  
  .multi-select-btn:hover { border-color: rgba(255, 255, 255, 0.2); }
  
  .multi-select-btn.has-selection {
    background: rgba(255, 90, 54, 0.08);
    border-color: rgba(255, 90, 54, 0.4);
    color: var(--ember-soft);
  }
  
  .multi-select-btn .chevron {
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.15s;
  }
  
  .multi-select.open .chevron { transform: rotate(180deg); }
  
  .multi-select-dropdown {
    position: fixed;        /* escape any parent stacking context */
    min-width: 280px;
    max-height: 380px;
    background: var(--black-core);
    border: 1px solid rgba(191, 195, 200, 0.18);
    border-radius: 10px;
    overflow-y: auto;
    z-index: 500;
    display: none;
    padding: 6px 0;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
  }
  
  .multi-select.open .multi-select-dropdown,
  .multi-select-dropdown.open { display: block; }
  
  .dropdown-search-hint {
    display: none;
    padding: 10px 14px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ember-soft);
    background: rgba(255, 90, 54, 0.06);
    border-bottom: 1px solid rgba(255, 90, 54, 0.18);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
  }
  
  .multi-select-option {
    padding: 8px 14px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--light-text);
    transition: background 0.1s;
  }
  
  .multi-select-option:hover { background: rgba(255, 255, 255, 0.04); }
  
  .multi-select-option .checkbox {
    width: 14px; height: 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
  }
  
  .multi-select-option.checked .checkbox {
    background: var(--ember);
    border-color: var(--ember);
  }
  
  .multi-select-option.checked .checkbox::after {
    content: '';
    width: 6px; height: 3px;
    border-left: 1.5px solid white;
    border-bottom: 1.5px solid white;
    transform: rotate(-45deg) translate(0.5px, -1px);
  }
  
  .multi-select-option .opt-count {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
  }
  
  /* ---------- CANVAS ---------- */
  .canvas-wrap {
    position: fixed;
    inset: 116px 0 0 0;
    overflow: hidden;
    cursor: grab;
    background: var(--charcoal);
    background-image:
      radial-gradient(circle at 20% 20%, rgba(255, 90, 54, 0.025) 0%, transparent 40%),
      radial-gradient(circle at 80% 80%, rgba(242, 200, 74, 0.018) 0%, transparent 40%);
  }
  
  .canvas-wrap.dragging { cursor: grabbing; }
  
  #canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  /* ---------- MINIMAP ---------- */
  .minimap {
    position: fixed;
    right: 16px;
    bottom: 48px;
    width: 220px;
    height: 140px;
    background: rgba(10, 10, 11, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(191, 195, 200, 0.12);
    border-radius: 10px;
    overflow: hidden;
    z-index: 50;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }
  
  .minimap canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  .minimap-label {
    position: absolute;
    top: 6px; left: 8px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'JetBrains Mono', monospace;
    pointer-events: none;
  }
  
  /* ---------- ZOOM CONTROL ---------- */
  .zoom-control {
    position: fixed;
    right: 16px;
    bottom: 204px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(10, 10, 11, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(191, 195, 200, 0.12);
    border-radius: 10px;
    overflow: hidden;
    z-index: 50;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }
  
  .zoom-btn {
    width: 36px; height: 36px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .zoom-btn:hover {
    background: rgba(255, 90, 54, 0.15);
    color: var(--ember);
  }
  
  .zoom-btn:not(:last-child) {
    border-bottom: 1px solid rgba(191, 195, 200, 0.08);
  }
  
  /* ---------- TOOLTIP ---------- */
  .tooltip {
    position: fixed;
    z-index: 90;
    pointer-events: none;
    background: rgba(10, 10, 11, 0.96);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(191, 195, 200, 0.2);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 200px;
    max-width: 280px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.1s;
  }
  
  .tooltip.visible { opacity: 1; }
  
  .tooltip-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }
  
  .tooltip-favicon {
    width: 24px; height: 24px;
    border-radius: 5px;
    background: white;
    padding: 2px;
    flex-shrink: 0;
    object-fit: contain;
  }
  
  .tooltip-fallback {
    width: 24px; height: 24px;
    border-radius: 5px;
    background: var(--ember);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
  }
  
  .tooltip-name {
    font-family: 'Sora', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--white);
    line-height: 1.2;
  }
  
  .tooltip-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'JetBrains Mono', monospace;
    flex-wrap: wrap;
  }
  
  .tooltip-meta .year { color: var(--nucl-cta); }
  .tooltip-meta .tt-parent {
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
  }
  .tooltip-meta .tt-kind {
    color: var(--ember-soft);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .tooltip-meta .tt-sep { color: rgba(255, 255, 255, 0.3); }
  
  /* Category icon used for spectrum/matrix/core tooltips */
  .tooltip-category-icon {
    width: 24px; height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .tt-icon-matrix   { background: rgba(255, 90, 54, 0.15);  color: var(--ember-soft); }
  .tt-icon-spectrum { background: rgba(242, 200, 74, 0.16); color: var(--nucl-cta); }
  .tt-icon-core     { background: rgba(255, 211, 198, 0.16); color: var(--ember-mist); }
  
  .tooltip-crumbs {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(191, 195, 200, 0.08);
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
  }
  .tooltip-crumbs .tt-crumb { color: rgba(255, 255, 255, 0.55); }
  .tooltip-crumbs .tt-crumb-current { color: var(--ember-soft); }
  .tooltip-crumbs .tt-sep { color: rgba(255, 255, 255, 0.3); font-size: 10px; }
  
  /* ---------- BOTTOM STRIP — privacy/terms links + live-data indicator ---------- */
  .bottom-strip {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    height: 36px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 48;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
  }
  .bottom-strip > * { pointer-events: auto; }
  
  .bottom-links {
    display: flex;
    gap: 18px;
    align-items: center;
  }
  .bottom-links a {
    color: rgba(255, 255, 255, 0.42);
    text-decoration: none;
    transition: color 0.15s ease;
    letter-spacing: 0.02em;
  }
  .bottom-links a:hover { color: var(--lightText); }
  
  .live-data {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.42);
    letter-spacing: 0.02em;
  }
  .live-data .live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--nucl-cta);
    box-shadow: 0 0 0 0 rgba(242, 200, 74, 0.6);
    animation: live-pulse 3.2s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes live-pulse {
    0%, 100% { opacity: 0.55; box-shadow: 0 0 0 0 rgba(242, 200, 74, 0); }
    50%      { opacity: 1;    box-shadow: 0 0 0 4px rgba(242, 200, 74, 0.18); }
  }
  .live-data .live-label { color: rgba(255, 255, 255, 0.55); }
  .live-data .live-date  { color: rgba(255, 255, 255, 0.75); }
  
  @media (max-width: 540px) {
    .bottom-strip { height: 32px; padding: 0 12px; font-size: 10px; }
    .bottom-links { gap: 12px; }
  }
  .zoom-indicator {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(1px);
    transition: opacity 0.6s ease, background 0.6s ease, backdrop-filter 0.6s ease;
    opacity: 1;
  }
  .zoom-indicator.gone {
    opacity: 0;
    pointer-events: none !important;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
  }
  .zoom-indicator-inner {
    text-align: center;
    color: var(--lightText);
    font-family: 'Inter', sans-serif;
    animation: zoom-in-fade 0.6s ease;
  }
  @keyframes zoom-in-fade {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
  }
  .zoom-gesture {
    color: var(--nucl-cta);
    margin-bottom: 22px;
    display: inline-block;
    animation: zoom-gesture-pulse 1.8s ease-in-out infinite;
  }
  @keyframes zoom-gesture-pulse {
    0%, 100% { transform: scale(1);   opacity: 0.85; }
    50%      { transform: scale(1.25); opacity: 1;   }
  }
  .zoom-message {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
    color: var(--lightText);
  }
  .zoom-submessage {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.02em;
  }
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 380;
    pointer-events: none;
    transition: background 0.32s ease;
  }
  .panel-backdrop.visible {
    background: rgba(0, 0, 0, 0.35);
    pointer-events: auto;
    cursor: pointer;
  }
  .panel {
    position: fixed;
    right: 0; top: 0;
    height: 100vh;
    width: 420px;
    background: var(--black-core);
    border-left: 1px solid rgba(191, 195, 200, 0.12);
    z-index: 400;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
  }
  
  .panel.open { transform: translateX(0); }
  
  .panel-header {
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(191, 195, 200, 0.08);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-shrink: 0;
  }
  
  .panel-favicon {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: white;
    padding: 4px;
    flex-shrink: 0;
    object-fit: contain;
  }
  
  /* Nucleaus-branded icon for non-solution panel headers (core, spectrum, matrix).
     Uses the favicon SVG from the root. Sized to match .panel-favicon. */
  .panel-nucl-icon {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(242, 200, 74, 0.22);
    padding: 6px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
  }
  
  .panel-fallback {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: var(--ember);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 20px;
    flex-shrink: 0;
    font-family: 'Sora', sans-serif;
  }
  
  .panel-titles {
    flex: 1;
    min-width: 0;
  }
  
  .panel-type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ember);
    margin-bottom: 4px;
    font-weight: 500;
  }
  
  .panel-type-yellow { color: var(--nucl-cta); }
  .panel-type-orange { color: var(--ember-soft); }
  .panel-type-blue   { color: #8FCBEC; }
  .panel-type-gray   { color: #C8CDD3; }
  
  .panel-fallback-yellow { background: rgba(242, 200, 74, 0.18); color: var(--nucl-cta); }
  .panel-fallback-orange { background: rgba(255, 90, 54, 0.18);  color: var(--ember-soft); }
  .panel-fallback-blue   { background: rgba(91, 180, 232, 0.18); color: #8FCBEC; }
  .panel-fallback-gray   { background: rgba(168, 176, 184, 0.16); color: #DCE0E2; }
  .panel-fallback-mist   { background: rgba(255, 211, 198, 0.18); color: var(--ember-mist); }
  
  .panel-sub-text {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
  }
  
  /* Search group panel */
  .search-group-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin-bottom: 14px;
    padding: 11px 13px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  .search-group-note strong {
    color: var(--white);
    font-weight: 500;
  }
  
  .search-group-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .search-group-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s;
  }
  
  .search-group-item:hover {
    background: rgba(255, 90, 54, 0.06);
    border-color: rgba(255, 90, 54, 0.22);
    transform: translateX(2px);
  }
  
  .search-group-item .solution-list-favicon,
  .search-group-item .solution-list-fallback {
    width: 28px; height: 28px;
    border-radius: 6px;
    font-size: 13px;
  }
  
  .search-group-item-info {
    flex: 1;
    min-width: 0;
  }
  
  .search-group-item-name {
    font-size: 13.5px;
    color: var(--white);
    font-weight: 500;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .search-group-item-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .search-group-item-meta .dot-sep { opacity: 0.4; }
  .search-group-item-meta .year-meta {
    font-family: 'JetBrains Mono', monospace;
    color: var(--nucl-cta);
    opacity: 0.7;
  }
  
  .search-group-item .arrow-icon {
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    transition: transform 0.12s;
  }
  
  .search-group-item:hover .arrow-icon {
    color: var(--ember);
    transform: translateX(2px);
  }
  
  .panel-name {
    font-family: 'Sora', sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--white);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    overflow-wrap: break-word;
  }
  
  .panel-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--nucl-cta);
    font-weight: 500;
    background: rgba(242, 200, 74, 0.08);
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
  }
  
  .panel-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.15s ease;
    flex-shrink: 0;
    margin-left: 8px;
  }
  .panel-close svg { width: 22px; height: 22px; }
  
  .panel-close:hover {
    background: var(--ember);
    border-color: var(--ember);
    color: var(--lightText);
    transform: scale(1.05);
  }
  .panel-close:active { transform: scale(0.95); }
  
  .panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px 30px;
  }
  
  .panel-body::-webkit-scrollbar { width: 6px; }
  .panel-body::-webkit-scrollbar-track { background: transparent; }
  .panel-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
  
  .breadcrumb {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 18px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .breadcrumb .crumb {
    color: rgba(255, 255, 255, 0.65);
  }
  
  .breadcrumb .sep {
    color: rgba(255, 255, 255, 0.25);
    font-size: 10px;
  }
  
  .breadcrumb .crumb-current {
    color: var(--ember-soft);
  }
  
  /* Clickable breadcrumb link styling */
  .breadcrumb .crumb-link {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    padding: 2px 5px;
    margin: -2px -5px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s ease;
    line-height: inherit;
  }
  
  .breadcrumb .crumb-link:hover {
    color: var(--ember);
    background: rgba(255, 90, 54, 0.08);
  }
  
  /* Parent card in solution panel */
  .parent-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    background: rgba(91, 180, 232, 0.08);
    border: 1px solid rgba(91, 180, 232, 0.28);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s ease;
    margin-top: 2px;
  }
  
  .parent-card:hover {
    background: rgba(91, 180, 232, 0.14);
    border-color: rgba(91, 180, 232, 0.5);
    transform: translateX(2px);
  }
  
  .parent-favicon,
  .parent-fallback {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    flex-shrink: 0;
    object-fit: contain;
  }
  
  .parent-favicon { background: white; padding: 2px; }
  
  .parent-fallback {
    background: #5BB4E8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 11px;
  }
  
  .parent-name {
    font-size: 13px;
    color: #8FCBEC;
    font-weight: 500;
  }
  
  .parent-arrow {
    color: rgba(143, 203, 236, 0.5);
    transition: transform 0.12s;
  }
  
  .parent-card:hover .parent-arrow {
    color: #8FCBEC;
    transform: translateX(2px);
  }
  
  /* Core panel fallback icon */
  .panel-fallback-core {
    background: linear-gradient(135deg, rgba(255, 154, 132, 0.15) 0%, rgba(242, 200, 74, 0.10) 100%);
    color: var(--ember-soft);
  }
  
  /* Core callout banner */
  .core-callout {
    margin-bottom: 18px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(255, 154, 132, 0.08) 0%, rgba(242, 200, 74, 0.05) 100%);
    border-left: 2px solid var(--ember-soft);
    border-radius: 6px;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.88);
    font-style: italic;
    line-height: 1.5;
  }
  
  .field {
    margin-bottom: 18px;
  }
  
  .field-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 6px;
    font-weight: 500;
  }
  
  .field-value {
    font-size: 14px;
    color: var(--light-text);
    line-height: 1.55;
  }
  
  .description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 24px;
  }
  
  .meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(191, 195, 200, 0.06);
    border-radius: 8px;
  }
  
  .meta-cell .field-label { margin-bottom: 4px; }
  .meta-cell .field-value { font-size: 13px; }
  .meta-cell .field-value.year {
    font-family: 'JetBrains Mono', monospace;
    color: var(--nucl-cta);
  }
  
  .visit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--ember);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
    letter-spacing: 0.01em;
  }
  
  .visit-btn:hover {
    background: var(--ember-active);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(255, 90, 54, 0.3);
  }
  
  /* Locked section */
  /* Clickable locked card — links to the full /map experience */
  a.locked-section,
  .locked-section {
    display: block;
    margin-top: 24px;
    background:
      linear-gradient(135deg, rgba(255, 90, 54, 0.03) 0%, rgba(242, 200, 74, 0.02) 100%);
    border: 1px solid rgba(191, 195, 200, 0.08);
    border-radius: 10px;
    padding: 16px;
    position: relative;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  }
  a.locked-section:hover {
    background:
      linear-gradient(135deg, rgba(255, 90, 54, 0.10) 0%, rgba(242, 200, 74, 0.06) 100%);
    border-color: rgba(255, 154, 132, 0.30);
    transform: translateY(-1px);
  }
  a.locked-section:active { transform: translateY(0); }
  
  .locked-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    position: relative;
  }
  
  .locked-header .arrow-out {
    margin-left: auto;
    width: 14px; height: 14px;
    color: rgba(255, 255, 255, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
  }
  a.locked-section:hover .arrow-out {
    opacity: 1;
    color: var(--lightText);
    transform: translateX(2px);
  }
  
  .locked-icon {
    width: 16px; height: 16px;
    color: var(--nucl-cta);
    transition: color 0.2s ease;
  }
  /* The locked icon has two paths — the shackle (top) and the body (bottom).
     On hover we swap visibility to give an "unlock" feel via two stacked SVGs. */
  .locked-icon-unlocked { display: none; }
  a.locked-section:hover .locked-icon-locked { display: none; }
  a.locked-section:hover .locked-icon-unlocked { display: inline-block; color: var(--lightText); }
  
  .locked-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nucl-cta);
    font-weight: 500;
    transition: color 0.2s ease;
  }
  a.locked-section:hover .locked-title { color: var(--lightText); }
  
  .locked-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .locked-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(191, 195, 200, 0.05);
  }
  
  .locked-row:last-child { border-bottom: none; }
  
  .locked-row-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
  }
  
  .locked-row-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    filter: blur(4.5px);
    user-select: none;
    letter-spacing: -0.02em;
  }
  
  /* Matrix-specific: solution list */
  .solution-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
  }
  
  .solution-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s;
  }
  
  .solution-list-item:hover {
    background: rgba(255, 90, 54, 0.06);
    border-color: rgba(255, 90, 54, 0.2);
  }
  
  .solution-list-favicon {
    width: 18px; height: 18px;
    background: white;
    border-radius: 4px;
    padding: 1px;
    flex-shrink: 0;
    object-fit: contain;
  }
  
  .solution-list-fallback {
    width: 18px; height: 18px;
    background: var(--ember);
    color: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 9px;
    flex-shrink: 0;
  }
  
  .solution-list-name {
    font-size: 12.5px;
    color: var(--light-text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .solution-list-year {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.35);
  }
  
  /* Report request block */
  .report-block {
    margin-top: 8px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, rgba(255, 90, 54, 0.12) 0%, rgba(184, 74, 50, 0.06) 100%);
    border: 1px solid rgba(255, 90, 54, 0.28);
    border-radius: 12px;
    padding: 16px;
    position: relative;
    box-shadow: 0 0 0 1px rgba(255, 90, 54, 0.05) inset;
  }
  
  .report-block-compact { padding: 14px 16px; }
  
  .report-block-headline {
    margin-bottom: 12px;
  }
  
  .report-block-title {
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
  
  .report-block-sub {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.45;
  }
  
  .report-features {
    list-style: none;
    margin: 12px 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .report-features li {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: start;
    gap: 8px;
    line-height: 1.45;
  }
  
  .report-features li::before {
    content: '';
    width: 4px; height: 4px;
    background: var(--ember);
    border-radius: 50%;
    margin-top: 7px;
    flex-shrink: 0;
  }
  
  .report-input-row {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
  }
  
  .report-input-row .email-input {
    margin-bottom: 0;
    flex: 1;
    padding: 9px 11px;
    font-size: 12.5px;
  }
  
  .report-input-row .report-btn {
    width: auto;
    padding: 9px 16px;
    flex-shrink: 0;
    font-size: 12.5px;
  }
  
  .email-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 11px 13px;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    margin-bottom: 8px;
    outline: none;
    transition: border-color 0.15s;
  }
  
  .email-input:focus { border-color: var(--ember); }
  .email-input.error { border-color: #B84A32; }
  .email-input::placeholder { color: rgba(255, 255, 255, 0.32); }
  
  .email-note {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0;
    line-height: 1.4;
  }
  
  .email-error {
    font-size: 11px;
    color: var(--ember);
    margin-top: 4px;
    margin-bottom: 0;
    display: none;
  }
  
  .email-error.visible { display: block; }
  
  .email-success {
    font-size: 12px;
    color: var(--nucl-cta);
    margin-top: 6px;
    display: none;
  }
  
  .email-success.visible { display: block; }
  
  .report-btn {
    width: 100%;
    background: var(--ember);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  
  .report-btn:hover {
    background: var(--ember-active);
    box-shadow: 0 4px 16px rgba(255, 90, 54, 0.3);
  }
  
  .report-btn:disabled {
    background: rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
  }
  
  /* Spectrum panel: matrix list */
  .matrix-mini-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .matrix-mini-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s;
  }
  
  .matrix-mini-item:hover {
    background: rgba(255, 90, 54, 0.05);
    border-color: rgba(255, 90, 54, 0.2);
  }
  
  .matrix-mini-info {
    flex: 1;
    min-width: 0;
  }
  
  .matrix-mini-name {
    font-size: 13px;
    color: var(--white);
    font-weight: 500;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .matrix-mini-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--nucl-cta);
  }
  
  .matrix-mini-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.04);
    padding: 3px 8px;
    border-radius: 5px;
    flex-shrink: 0;
    margin-left: 12px;
  }
  
  /* Help hint */
  .hint {
    position: fixed;
    left: 16px;
    bottom: 48px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.82);
    font-family: 'JetBrains Mono', monospace;
    /* Sit ABOVE the zoom-indicator dimming backdrop (z-200) so the hint is always
       fully visible at its own brightness — never darkened by the overlay. */
    z-index: 210;
    background: rgba(10, 10, 11, 0.88);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(242, 200, 74, 0.22);
    border-radius: 10px;
    padding: 10px 14px;
    pointer-events: auto;
    cursor: default;
    display: flex;
    gap: 16px;
    transition: opacity 0.45s ease, background 0.45s ease, border-color 0.45s ease, color 0.45s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }
  
  /* Settled state — dimmer so the hint recedes nicely once the user has had time
     to read it. Hovering brings it back to full brightness. */
  .hint.faded {
    opacity: 0.55;
    background: rgba(10, 10, 11, 0.65);
    border-color: rgba(191, 195, 200, 0.12);
  }
  
  /* Hover snaps back to full brightness regardless of faded state */
  .hint:hover,
  .hint.faded:hover {
    opacity: 1;
    background: rgba(10, 10, 11, 0.92);
    border-color: rgba(242, 200, 74, 0.35);
    color: rgba(255, 255, 255, 1);
  }
  
  .hint kbd {
    font-family: 'JetBrains Mono', monospace;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(242, 200, 74, 0.28);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 10px;
    /* Muted Nucleaus yellow by default, full primary on hover */
    color: rgba(242, 200, 74, 0.78);
    font-weight: 500;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  }
  
  .hint:hover kbd {
    color: var(--nucl-cta);
    background: rgba(242, 200, 74, 0.12);
    border-color: rgba(242, 200, 74, 0.45);
  }
  
  /* Pulsing attention on initial display, until first interaction */
  .hint.pulse {
    animation: hint-pulse 2s ease-in-out infinite;
  }
  @keyframes hint-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(242, 200, 74, 0); }
    50% {  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(242, 200, 74, 0.14); }
  }
  
  /* Loading */
  .loading {
    position: fixed;
    inset: 0;
    background: var(--charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    flex-direction: column;
    gap: 24px;
  }
  /* Honor the inline <html class="theme-light-preload"> set by the head bootstrap
     so the loading screen and body start in the right color before main JS runs. */
  html.theme-light-preload,
  html.theme-light-preload body { background: #FAFAFA; }
  html.theme-light-preload .loading { background: #FAFAFA; }
  html.theme-light-preload .loading-text { color: #475569; }
  
  .loading.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
  }
  
  .loading-logo {
    width: 56px; height: 56px;
    animation: pulse 1.6s ease-in-out infinite;
  }
  
  @keyframes pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1); }
  }
  
  .loading-text {
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.04em;
  }
  
  /* ---------- MOBILE / TABLET ---------- */
  @media (max-width: 1100px) {
    .panel { width: 380px; }
  }
  
  /* Desktop range where the search bar can't comfortably fit ~95 characters
     on the same row as everything else — drop it to its own line spanning ~60%
     of the topbar width. Only applies above the mobile breakpoint so mobile's
     own column-flex topbar treatment is unaffected. */
  @media (max-width: 1340px) and (min-width: 881px) {
    /* Reorder so row 1 is brand, stats, theme-toggle, learn-more; break + search wrap to row 2.
       The break must come immediately BEFORE search in flex order to force the wrap. */
    .brand-group     { order: 0; }
    .topbar-stats    { order: 1; margin-left: auto; }
    .theme-toggle    { order: 2; }
    .learn-more-btn  { order: 3; }
    .topbar-break    { order: 4; display: block; width: 100%; height: 0; flex-basis: 100%; }
    .search-wrap {
      order: 5;
      flex: 0 0 auto;
      width: 60%;
      max-width: 800px;
      min-width: 320px;
      /* No extra margin-left — the topbar's left padding (20px) already places
         the search-wrap left edge at the same x as the Reset button in the
         filterbar below (filterbar also has 20px left padding). They align. */
      margin-left: 0;
      margin-top: 3px;
      margin-bottom: 3px;
    }
    /* Row 1 stays anchored at its single-row position via min-height on the brand
       group, which forces row 1 to be 68px tall (matching single-row mode).
       The brand-group's desktop margin-top: -7px is overridden — the min-height
       anchor handles vertical placement of row 1 items. */
    .topbar {
      min-height: 68px;
      height: auto;
      padding-top: 0;
      padding-bottom: 0;
    }
    .brand-group { min-height: 68px; margin-top: -4px; }
  }
  
  /* At this width the year filter would otherwise overflow off the right edge.
     Drop it onto its own row beneath the pills/dropdowns so it stays visible
     and usable. Filterbar grows from 48px → ~96px tall; canvas top adjusts. */
  @media (max-width: 1180px) {
    .filterbar {
      height: auto;
      min-height: 48px;
      padding: 8px 20px;
      row-gap: 8px;
    }
    /* Activate the flex-line-break so the year-filter drops to its own row.
       The year-filter keeps its natural content width — no empty space stretching. */
    .filterbar-break { display: block; }
    /* Canvas-wrap shifts down to clear the 2-row filterbar (60 topbar + ~94 filterbar) */
    .canvas-wrap { inset: 158px 0 0 0; }
  }
  
  @media (max-width: 880px) {
    /* Topbar grows taller to fit the doubled-height search + 2-line tagline under logo */
    .topbar {
      padding: 8px 12px 8px 16px;
      gap: 15px;
      height: 92px;
      align-items: center;
    }
    /* Brand group becomes a column: logo on top, "The Data & AI Landscape" below */
    .brand-group {
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      margin-top: 0;
    }
    .brand-logo {
      height: 32px;
    }
    .brand-divider { display: none; }
    .brand-sub {
      display: block;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.005em;
      color: rgba(255, 255, 255, 0.88);
      line-height: 1.25;
      /* Reset the desktop optical bump and shift right so the tagline sits in from
         the logo's left edge — feels more anchored to the brand mark. */
      margin-top: 0;
      margin-left: 10px;
    }
    /* On mobile, break onto two lines: "The Data & AI" / "Landscape" */
    .brand-sub .brand-sub-trailing {
      display: block;
    }
    .brand-sub .brand-sub-trailing::before { content: ''; }
    .topbar-stats { display: none; }
  
    /* Doubled-height search: input row on top, tags row below, inside one frame */
    .search-wrap {
      max-width: none;
      margin-left: 0;  /* reset desktop's 26px; mobile uses topbar gap for spacing */
      display: flex;
      flex-direction: column;
      background: rgba(255, 255, 255, 0.07);
      border: 1.5px solid rgba(242, 200, 74, 0.30);
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
      transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
      overflow: hidden;
    }
    .search-wrap:focus-within {
      border-color: var(--nucl-cta);
      background: rgba(242, 200, 74, 0.05);
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3),
                  0 0 0 3px rgba(242, 200, 74, 0.18);
    }
    /* Pulse moves to the wrap so the whole control glows on first load */
    .search.attention-pulse { animation: none; box-shadow: none; }
    .search-wrap.attention-pulse { animation: search-pulse 2.4s ease-in-out infinite; }
  
    /* Input — strip its own frame; wrap provides the visual frame */
    .search {
      width: 100%;
      background: transparent;
      border: none;
      box-shadow: none;
      border-radius: 0;
      padding: 10px 12px 10px 36px;
      height: 36px;
      font-size: 14px;
      transition: none;
    }
    .search:hover, .search:focus { background: transparent; border: none; box-shadow: none; }
    .search.has-tags { padding-right: 12px; }
    .search-icon { left: 12px; top: 18px; transform: translateY(-50%); }
  
    /* Tags become a second row (flow-positioned, not absolute) */
    .search-tags {
      position: static;
      transform: none;
      display: flex !important;   /* always reserve the bottom row on mobile */
      flex-wrap: nowrap;          /* single row */
      overflow-x: auto;           /* horizontal scroll if many tags */
      gap: 5px;
      padding: 4px 10px 6px 36px;
      min-height: 30px;
      max-height: 30px;
      align-items: center;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      scrollbar-width: none;
    }
    .search-tags::-webkit-scrollbar { display: none; }
    /* Smaller tag scale on mobile to keep one row */
    .search-tag {
      height: 20px;
      padding: 0 7px;
      font-size: 10px;
    }
    .search-tag .tag-count {
      font-size: 9px;
      padding: 0 4px;
    }
    /* When no tags present, show a soft helper hint instead of empty space */
    .search-tags:empty::before {
      content: 'Match results appear here';
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      color: rgba(255, 255, 255, 0.32);
      letter-spacing: 0.01em;
    }
  
    .filterbar {
      top: 92px;
      height: auto;
      min-height: 44px;
      padding: 8px 12px 8px 16px;
      gap: 8px;
      row-gap: 8px;
    }
    /* On mobile the canvas top is calculated by JS to match filterbar's actual rendered
       height; set a safe default that accounts for the 2-row filterbar. */
    .canvas-wrap { inset: 184px 0 0 0; }
    .panel { width: 100%; }
    /* Tablet: keep the desktop-style wide landscape minimap shape, just a bit smaller. */
    .minimap { width: 180px; height: 116px; right: 10px; bottom: 40px; }
    .zoom-control { right: 10px; bottom: 168px; }
    .hint { display: none; }
    .filter-label { display: none; }
    .multi-select-dropdown { min-width: 240px; right: 0; left: auto; }
    .learn-more-btn { padding: 6px 12px; font-size: 11px; margin-top: 0; margin-right: 0; }
    .theme-toggle { margin-top: 0; width: 30px; height: 28px; }
  }
  
  /* When the world re-flows to vertical-stack mode (cores stacked top-to-bottom),
     the minimap should switch to a portrait shape so it matches what the user is
     actually viewing. Zoom controls move up to clear the taller minimap.
     The threshold here matches the JS chooseLayoutMode() threshold (<720px). */
  @media (max-width: 719px) {
    .minimap { width: 100px; height: 180px; right: 10px; bottom: 40px; }
    .zoom-control { right: 10px; bottom: 232px; }
  }
  
  @media (max-width: 540px) {
    .learn-more-btn { display: none; }
  
    /* Compact for very small phones */
    .topbar { height: 90px; }
    .filterbar {
      top: 90px;
      height: auto;
      min-height: 42px;
      padding: 6px 12px 6px 16px;
    }
    .canvas-wrap { inset: 220px 0 0 0; }
    .panel-header { padding: 14px 16px 12px; }
    .panel-body { padding: 14px 16px 24px; }
    .panel-name { font-size: 17px; }
    .search { font-size: 13px; padding: 10px 12px 10px 36px; }
    /* Phone-only: tall portrait minimap matches the vertically-stacked mobile world */
    .minimap { width: 92px; height: 168px; right: 10px; bottom: 40px; }
    .zoom-btn { width: 32px; height: 32px; }
    .zoom-control { right: 10px; bottom: 220px; }
    /* Year filter shrinks to fit narrow viewports without overflowing */
    .year-filter { gap: 6px; padding: 4px 8px; }
    .year-filter input[type="range"] { width: 70px; }
  }
  
  /* No-touch device tweaks */
  @media (hover: none) {
    .filter-pill { padding: 8px 14px; }
    .zoom-btn { width: 42px; height: 42px; }
  }
  
  /* =========================================================================
     LIGHT THEME
     Applied when <body> has class="theme-light". Re-skins every major surface,
     border, and text element. Dark theme is the default and unchanged.
  
     Design principles:
     - Near-white background (#FAFAFA) — softer on the eye than pure white
     - Card surfaces use #FFFFFF with subtle gray borders
     - Brand yellow (#f2c84a) replaced with deeper amber (#B58F1F) where text
       on white is needed; the bright yellow is kept for fills/halos
     - Ember (#FF5A36) deepened to #C13E1F where it serves as text or borders
     - Light gray (#E5E7EB) replaces translucent white-on-dark borders
     ========================================================================= */
  
  /* Page-level */
  body.theme-light {
    background: #FAFAFA;
    color: #1F2937;
  }
  body.theme-light html,
  body.theme-light body { background: #FAFAFA; color: #1F2937; }
  
  /* Brand logo — when the deployed site has only the white variant available
     but the page is in light mode, this filter makes the loaded white logo appear
     dark. The JS in applyTheme() probes for `logo/nucleaus-logo-black.svg`; if it
     loads, it's used directly (no filter needed). If it 404s, the white logo stays
     and gets this filter applied via the `--needs-invert` class. */
  body.theme-light .brand-logo.brand-logo--needs-invert {
    filter: invert(1) hue-rotate(180deg) brightness(0.92);
  }
  
  /* Topbar */
  body.theme-light .topbar {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid #E5E7EB;
  }
  /* Brand-divider: visible gray line on white */
  body.theme-light .brand-divider {
    background: #CBD5E1;
  }
  /* Tagline: dark on white. The yellow accent becomes deep amber for contrast. */
  body.theme-light .brand-sub {
    color: #1F2937;
  }
  body.theme-light .brand-sub .accent {
    color: #B58F1F;
  }
  /* Topbar stats — slate text */
  body.theme-light .topbar-stats {
    color: #475569;
  }
  body.theme-light .topbar-stats strong {
    color: #0F172A;
  }
  /* Theme toggle button — gray border on white */
  body.theme-light .theme-toggle {
    border-color: #D1D5DB;
    color: #475569;
  }
  body.theme-light .theme-toggle:hover {
    border-color: #B58F1F;
    color: #B58F1F;
    background: rgba(181, 143, 31, 0.06);
  }
  /* Learn More — keep brand yellow but use the deeper amber for outline + text on white */
  body.theme-light .learn-more-btn {
    color: #B58F1F;
    border-color: #B58F1F;
  }
  body.theme-light .learn-more-btn:hover {
    background: #B58F1F;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(181, 143, 31, 0.30);
  }
  
  /* Search wrap and input */
  body.theme-light .search {
    background: #FFFFFF;
    border-color: #D1D5DB;
    color: #0F172A;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  body.theme-light .search::placeholder { color: #94A3B8; }
  body.theme-light .search:hover {
    border-color: #B58F1F;
    background: #FFFFFF;
  }
  body.theme-light .search:focus {
    border-color: #B58F1F;
    background: #FFFEF7;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 3px rgba(181, 143, 31, 0.18);
  }
  body.theme-light .search-icon { color: rgba(181, 143, 31, 0.65); }
  body.theme-light .search:focus + .search-icon,
  body.theme-light .search-wrap:focus-within .search-icon { color: #B58F1F; }
  body.theme-light @keyframes search-pulse-light {
    0%, 100% { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 0 rgba(181, 143, 31, 0); }
    50%      { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 8px rgba(181, 143, 31, 0.14); }
  }
  body.theme-light .search.attention-pulse {
    animation: search-pulse-light 2.4s ease-in-out infinite;
  }
  body.theme-light .search-wrap.attention-pulse {
    animation: search-pulse-light 2.4s ease-in-out infinite;
  }
  
  /* Mobile doubled-height search wrap */
  body.theme-light .search-wrap {
    background: transparent;
  }
  @media (max-width: 880px) {
    body.theme-light .search-wrap {
      background: #FFFFFF;
      border-color: #D1D5DB;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    body.theme-light .search-wrap:focus-within {
      border-color: #B58F1F;
      background: #FFFEF7;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 3px rgba(181, 143, 31, 0.18);
    }
    body.theme-light .search-tags { border-top-color: rgba(15, 23, 42, 0.06); }
    body.theme-light .search-tags:empty::before { color: rgba(15, 23, 42, 0.32); }
  }
  
  /* Filterbar */
  body.theme-light .filterbar {
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid #E5E7EB;
  }
  body.theme-light .filter-label {
    color: #6B7280;
  }
  /* Filter pills */
  body.theme-light .filter-pill {
    background: #FFFFFF;
    border-color: #B58F1F;
    color: #1F2937;
  }
  body.theme-light .filter-pill:hover {
    border-color: #8A6B14;
    background: #FFFBEB;
  }
  body.theme-light .filter-pill.inactive {
    background: #FFFFFF;
    border-color: #D1D5DB;
    color: #6B7280;
  }
  body.theme-light .filter-pill.inactive:hover {
    border-color: #94A3B8;
    color: #475569;
    background: #F3F4F6;
  }
  body.theme-light .filter-pill .count { color: #94A3B8; }
  body.theme-light .filter-pill.inactive .count { color: #CBD5E1; }
  /* Reset button — still ember orange, deepened */
  body.theme-light .reset-btn {
    color: #C13E1F;
    border-color: #C13E1F;
    background: #FFFFFF;
  }
  body.theme-light .reset-btn:hover {
    background: #C13E1F;
    color: #FFFFFF;
  }
  /* Multi-select dropdown buttons */
  body.theme-light .multi-select-btn {
    background: #FFFFFF;
    border-color: #D1D5DB;
    color: #1F2937;
  }
  body.theme-light .multi-select-btn:hover { border-color: #B58F1F; background: #FFFBEB; }
  body.theme-light .multi-select-btn .multi-select-count {
    background: #B58F1F;
    color: #FFFFFF;
  }
  /* Dropdown panels */
  body.theme-light .multi-select-dropdown {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    color: #1F2937;
  }
  body.theme-light .multi-select-dropdown .dropdown-search-hint {
    color: #6B7280;
    background: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
  }
  body.theme-light .multi-select-dropdown .multi-select-option {
    color: #1F2937;
  }
  body.theme-light .multi-select-dropdown .multi-select-option:hover {
    background: #F3F4F6;
  }
  body.theme-light .multi-select-dropdown .multi-select-option.checked {
    background: #FFFBEB;
    color: #1F2937;
  }
  body.theme-light .multi-select-option .checkbox {
    border-color: #CBD5E1;
    background: #FFFFFF;
  }
  body.theme-light .multi-select-option.checked .checkbox {
    background: #B58F1F;
    border-color: #B58F1F;
  }
  body.theme-light .multi-select-option .opt-count { color: #94A3B8; }
  
  /* Year filter */
  body.theme-light .year-filter {
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
  }
  body.theme-light .year-filter label { color: #6B7280; }
  body.theme-light .year-filter .year-display { color: #B58F1F; }
  body.theme-light .year-filter input[type="range"] { background: transparent; }
  body.theme-light .year-filter input[type="range"]::-webkit-slider-runnable-track {
    background: #E5E7EB;
  }
  body.theme-light .year-filter input[type="range"]::-moz-range-track {
    background: #E5E7EB;
  }
  body.theme-light .year-filter input[type="range"]::-webkit-slider-thumb { background: #C13E1F; }
  body.theme-light .year-filter input[type="range"]::-moz-range-thumb { background: #C13E1F; }
  
  /* Canvas-wrap (main map area) — light background */
  body.theme-light .canvas-wrap {
    background: #FAFAFA;
    background-image:
      radial-gradient(circle at 20% 20%, rgba(193, 62, 31, 0.025) 0%, transparent 40%),
      radial-gradient(circle at 80% 80%, rgba(181, 143, 31, 0.025) 0%, transparent 40%);
  }
  
  /* Panels (slide from right) */
  body.theme-light .panel {
    background: #FFFFFF;
    border-left: 1px solid #E5E7EB;
    color: #1F2937;
    box-shadow: -10px 0 30px rgba(15, 23, 42, 0.08);
  }
  body.theme-light .panel-header { border-bottom: 1px solid #E5E7EB; }
  body.theme-light .panel-type { color: #C13E1F; }
  body.theme-light .panel-name { color: #0F172A; }
  body.theme-light .panel-id {
    background: #F3F4F6;
    color: #475569;
  }
  body.theme-light .panel-close { color: #475569; }
  body.theme-light .panel-close:hover { color: #C13E1F; background: #FEE7E1; }
  body.theme-light .panel-fallback {
    background: #C13E1F;
    color: #FFFFFF;
  }
  body.theme-light .panel-fallback-yellow { background: rgba(181, 143, 31, 0.12); color: #8A6B14; }
  body.theme-light .panel-fallback-orange { background: rgba(193, 62, 31, 0.12); color: #C13E1F; }
  body.theme-light .panel-fallback-blue   { background: rgba(30, 115, 184, 0.12); color: #1E73B8; }
  body.theme-light .panel-fallback-gray   { background: rgba(71, 85, 105, 0.10); color: #475569; }
  body.theme-light .panel-fallback-mist   { background: rgba(244, 184, 166, 0.30); color: #C13E1F; }
  body.theme-light .panel-fallback-core { background: rgba(193, 62, 31, 0.10); color: #C13E1F; }
  body.theme-light .panel-nucl-icon {
    background: #FFFFFF;
    border-color: rgba(181, 143, 31, 0.30);
  }
  body.theme-light .panel-favicon {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
  }
  body.theme-light .description { color: #475569; }
  body.theme-light .meta-row { border-top: 1px solid #F3F4F6; }
  body.theme-light .meta-label { color: #6B7280; }
  body.theme-light .meta-value { color: #1F2937; }
  body.theme-light .meta-value a { color: #B58F1F; }
  body.theme-light .meta-value a:hover { color: #8A6B14; }
  body.theme-light .breadcrumb { color: #6B7280; }
  body.theme-light .breadcrumb a { color: #475569; }
  body.theme-light .breadcrumb a:hover { color: #C13E1F; }
  body.theme-light .breadcrumb .sep { color: #CBD5E1; }
  body.theme-light .panel-section-title { color: #0F172A; }
  /* Spectrum/matrix mini-list rows inside core/spectrum panels — readable on white */
  body.theme-light .matrix-mini-item {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
  }
  body.theme-light .matrix-mini-item:hover {
    background: #FFFBEB;
    border-color: #B58F1F;
  }
  body.theme-light .matrix-mini-name { color: #0F172A; }
  body.theme-light .matrix-mini-id { color: #8A6B14; }        /* was nucl-cta — deeper amber */
  body.theme-light .matrix-mini-count {
    color: #475569;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
  }
  /* Breadcrumb current — was ember-soft pink in dark; deep ember on white */
  body.theme-light .breadcrumb .crumb { color: #475569; }
  body.theme-light .breadcrumb .crumb-current { color: #C13E1F; font-weight: 600; }
  body.theme-light .breadcrumb .crumb-link { color: #475569; }
  body.theme-light .breadcrumb .crumb-link:hover { color: #C13E1F; background: rgba(193, 62, 31, 0.06); }
  body.theme-light .breadcrumb .sep { color: #CBD5E1; }
  /* Parent organization card (shown in solution panels for subsidiaries) — deeper blue */
  body.theme-light .parent-card {
    background: rgba(30, 115, 184, 0.06);
    border-color: rgba(30, 115, 184, 0.30);
  }
  body.theme-light .parent-card:hover {
    background: rgba(30, 115, 184, 0.10);
    border-color: rgba(30, 115, 184, 0.50);
  }
  body.theme-light .parent-name { color: #1E73B8; }                  /* was #8FCBEC light */
  body.theme-light .parent-arrow { color: rgba(30, 115, 184, 0.45); }
  body.theme-light .parent-card:hover .parent-arrow { color: #1E73B8; }
  body.theme-light .parent-fallback { background: #1E73B8; color: #FFFFFF; }
  body.theme-light .parent-favicon { background: #FFFFFF; border: 1px solid #E5E7EB; }
  /* Search-group panel item rows — year-meta was nucl-cta */
  body.theme-light .search-group-item {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    color: #1F2937;
  }
  body.theme-light .search-group-item:hover {
    background: #FFFBEB;
    border-color: #B58F1F;
  }
  body.theme-light .search-group-item-name { color: #0F172A; }
  body.theme-light .search-group-item-meta { color: #6B7280; }
  body.theme-light .search-group-item-meta .year-meta { color: #8A6B14; }
  body.theme-light .search-group-item .arrow-icon { color: #94A3B8; }
  /* Dropdown helper hint — was ember-soft on dark; deep ember on white */
  body.theme-light .dropdown-search-hint {
    color: #C13E1F;
    background: rgba(193, 62, 31, 0.05);
    border-bottom: 1px solid rgba(193, 62, 31, 0.15);
  }
  /* Email success message (newsletter signup feedback) */
  body.theme-light .email-success { color: #8A6B14; }
  body.theme-light .email-error { color: #C13E1F; }
  
  /* Deep-dive Report block — appears at the bottom of matrix panel. The dark
     version uses ember-tinted gradient with white text. On white, the white text
     becomes invisible. We replace with a clean light card + dark text. */
  body.theme-light .report-block {
    background: linear-gradient(135deg, rgba(193, 62, 31, 0.06) 0%, rgba(184, 134, 11, 0.04) 100%);
    border: 1px solid rgba(193, 62, 31, 0.22);
    box-shadow: 0 0 0 1px rgba(193, 62, 31, 0.04) inset;
  }
  body.theme-light .report-block-title { color: #0F172A; }                  /* was white */
  body.theme-light .report-block-sub   { color: #475569; }                  /* was rgba(255,255,255,0.6) */
  body.theme-light .report-features li { color: #334155; }
  body.theme-light .report-features li::before { background: #C13E1F; }
  body.theme-light .email-input {
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    color: #0F172A;
  }
  body.theme-light .email-input::placeholder { color: #94A3B8; }
  body.theme-light .email-input:focus { border-color: #C13E1F; }
  body.theme-light .email-input.error { border-color: #C13E1F; }
  body.theme-light .email-note { color: #6B7280; }                          /* was rgba(255,255,255,0.4) */
  body.theme-light .report-btn {
    background: #C13E1F;
    color: #FFFFFF;
  }
  body.theme-light .report-btn:hover {
    background: #A8331A;
    box-shadow: 0 4px 16px rgba(193, 62, 31, 0.25);
  }
  body.theme-light .report-btn:disabled {
    background: #E5E7EB;
    color: #94A3B8;
  }
  
  /* Solution list — already partially overridden. Year was missing. */
  body.theme-light .solution-list-item {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
  }
  body.theme-light .solution-list-item:hover {
    background: #FFFBEB;
    border-color: #B58F1F;
  }
  body.theme-light .solution-list-name { color: #0F172A; }
  body.theme-light .solution-list-year { color: #475569; }                  /* was rgba(255,255,255,0.35) */
  body.theme-light .solution-list-domain { color: #6B7280; }
  body.theme-light .solution-list-favicon { background: #FFFFFF; border: 1px solid #E5E7EB; }
  body.theme-light .solution-list-fallback { background: #C13E1F; color: #FFFFFF; }
  /* Multi-select btn with selection — was ember-soft; deep ember on white */
  body.theme-light .multi-select-btn.has-selection {
    background: rgba(193, 62, 31, 0.06);
    border-color: rgba(193, 62, 31, 0.40);
    color: #C13E1F;
  }
  
  /* Funding/Acquisition locked card */
  body.theme-light .locked-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    color: #1F2937;
  }
  body.theme-light .locked-card:hover {
    border-color: #B58F1F;
    background: #FFFBEB;
  }
  body.theme-light .locked-card-title { color: #0F172A; }
  body.theme-light .locked-card-cta { color: #B58F1F; }
  body.theme-light .locked-metric-label { color: #6B7280; }
  body.theme-light .locked-metric-value { color: #94A3B8; }
  
  /* Search-group panel — used when clicking a search tag */
  body.theme-light .search-group-header { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
  
  /* Tooltip — fully readable on white. All the small-text spots that were yellow
     or light-pink in dark mode get deeper, contrast-safe equivalents in light. */
  body.theme-light .tooltip {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    color: #1F2937;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
  }
  body.theme-light .tooltip-name { color: #0F172A; }
  body.theme-light .tooltip-meta { color: #475569; }
  body.theme-light .tooltip-meta .year { color: #8A6B14; }           /* was nucl-cta — deeper amber */
  body.theme-light .tooltip-meta .tt-parent { color: #334155; }
  body.theme-light .tooltip-meta .tt-kind { color: #C13E1F; }        /* was ember-soft — deep ember */
  body.theme-light .tooltip-meta .tt-sep { color: #CBD5E1; }
  body.theme-light .tooltip-crumbs {
    border-top: 1px solid #E5E7EB;
    color: #475569;
  }
  body.theme-light .tooltip-crumbs .tt-crumb { color: #475569; }
  body.theme-light .tooltip-crumbs .tt-crumb-current { color: #C13E1F; font-weight: 600; }
  body.theme-light .tooltip-crumbs .tt-sep { color: #CBD5E1; }
  /* Category icons inside tooltips — switch to deeper fills + text */
  body.theme-light .tt-icon-matrix   { background: rgba(193, 62, 31, 0.10);  color: #C13E1F; }
  body.theme-light .tt-icon-spectrum { background: rgba(181, 143, 31, 0.12); color: #8A6B14; }
  body.theme-light .tt-icon-core     { background: rgba(27, 94, 115, 0.10);  color: #1B5E73; }
  body.theme-light .tooltip-favicon { background: #FFFFFF; border: 1px solid #E5E7EB; }
  body.theme-light .tooltip-fallback { background: #C13E1F; color: #FFFFFF; }
  
  /* Panel type labels (top-left of panel header — "SOLUTION", "MATRIX", etc.) */
  body.theme-light .panel-type-yellow { color: #8A6B14; }    /* was nucl-cta */
  body.theme-light .panel-type-orange { color: #C13E1F; }    /* was ember-soft */
  body.theme-light .panel-type-blue   { color: #1E73B8; }
  body.theme-light .panel-type-gray   { color: #475569; }
  /* Panel ID badge — readable amber text on a light amber bg */
  body.theme-light .panel-id {
    background: #F3F4F6;
    color: #475569;
  }
  
  /* Core callout banner inside core panel */
  body.theme-light .core-callout {
    background: linear-gradient(135deg, rgba(193, 62, 31, 0.06) 0%, rgba(181, 143, 31, 0.04) 100%);
    border-left: 2px solid #C13E1F;
    color: #1F2937;
  }
  /* Field labels and values inside panels */
  body.theme-light .field-label { color: #6B7280; }
  body.theme-light .field-value { color: #1F2937; }
  body.theme-light .field-value.year { color: #8A6B14; }       /* was nucl-cta */
  body.theme-light .meta-cell .field-value.year { color: #8A6B14; }
  /* "Visit" button — kept ember, deepened for white contrast */
  body.theme-light .visit-btn {
    background: #C13E1F;
    color: #FFFFFF;
  }
  body.theme-light .visit-btn:hover {
    background: #A8331A;
    box-shadow: 0 8px 24px rgba(193, 62, 31, 0.25);
  }
  /* Locked card (Funding/Acquisition) — readable amber on white */
  body.theme-light .locked-icon { color: #B58F1F; }
  body.theme-light a.locked-section:hover .locked-icon-unlocked { color: #0F172A; }
  body.theme-light .locked-title { color: #8A6B14; }
  body.theme-light a.locked-section:hover .locked-title { color: #0F172A; }
  body.theme-light .locked-row { color: #475569; }
  body.theme-light .locked-value { color: #6B7280; }
  body.theme-light .arrow-out { color: #94A3B8; }
  body.theme-light a.locked-section:hover .arrow-out { color: #0F172A; }
  /* Solution list rows inside search-group panel */
  body.theme-light .solution-row-meta { color: #6B7280; }
  body.theme-light .solution-row-meta .year { color: #8A6B14; }
  body.theme-light .solution-row-meta .domain { color: #475569; }
  /* Search-group panel header tabs */
  body.theme-light .search-group-tab { color: #475569; border-color: transparent; }
  body.theme-light .search-group-tab.active { color: #0F172A; border-color: #C13E1F; }
  body.theme-light .search-group-tab:hover { color: #1F2937; }
  body.theme-light .search-group-count { color: #6B7280; }
  /* Hint bar pulse glow — used by zoom-indicator */
  body.theme-light .live-data { color: #475569; }
  body.theme-light .live-data .live-label { color: #6B7280; }
  body.theme-light .live-data .live-date { color: #0F172A; }
  body.theme-light .live-data .live-dot {
    background: #B58F1F;
    box-shadow: 0 0 0 0 rgba(181, 143, 31, 0.4);
  }
  body.theme-light @keyframes live-pulse-light {
    0%, 100% { opacity: 0.6; box-shadow: 0 0 0 0 rgba(181, 143, 31, 0); }
    50%      { opacity: 1;   box-shadow: 0 0 0 4px rgba(181, 143, 31, 0.20); }
  }
  body.theme-light .live-data .live-dot {
    animation: live-pulse-light 3.2s ease-in-out infinite;
  }
  /* Bottom-strip link hover */
  body.theme-light .bottom-links a { color: #6B7280; }
  body.theme-light .bottom-links a:hover { color: #0F172A; }
  /* Zoom indicator overlay — light scrim, deep amber gesture icon */
  body.theme-light .zoom-indicator { background: rgba(255, 255, 255, 0.55); }
  body.theme-light .zoom-indicator-inner { color: #0F172A; }
  body.theme-light .zoom-message { color: #0F172A; }
  body.theme-light .zoom-submessage { color: #475569; }
  body.theme-light .zoom-gesture { color: #8A6B14; }
  
  /* Hint bar — light theme mirrors the dark theme behavior exactly:
     default = brand-amber accent + light card surface; faded after a few seconds;
     hover brings it back to full brightness with a slightly stronger amber outline. */
  body.theme-light .hint {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(181, 143, 31, 0.30);
    color: #1F2937;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  }
  body.theme-light .hint.faded {
    opacity: 0.65;
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(15, 23, 42, 0.10);
  }
  body.theme-light .hint:hover,
  body.theme-light .hint.faded:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(181, 143, 31, 0.55);
    color: #0F172A;
  }
  body.theme-light .hint kbd {
    background: rgba(181, 143, 31, 0.08);
    border: 1px solid rgba(181, 143, 31, 0.40);
    color: #8A6B14;
  }
  body.theme-light .hint:hover kbd {
    background: rgba(181, 143, 31, 0.14);
    border-color: rgba(181, 143, 31, 0.65);
    color: #6E5710;
  }
  body.theme-light @keyframes hint-pulse-light {
    0%, 100% { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08), 0 0 0 0 rgba(181, 143, 31, 0); }
    50%      { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08), 0 0 0 6px rgba(181, 143, 31, 0.18); }
  }
  body.theme-light .hint.pulse {
    animation: hint-pulse-light 2s ease-in-out infinite;
  }
  
  /* Bottom strip */
  body.theme-light .bottom-strip {
    background: rgba(255, 255, 255, 0.92);
    border-top: 1px solid #E5E7EB;
    color: #6B7280;
  }
  body.theme-light .bottom-strip a { color: #475569; }
  body.theme-light .bottom-strip a:hover { color: #0F172A; }
  
  /* Minimap */
  body.theme-light .minimap {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  }
  body.theme-light .minimap-label {
    color: #94A3B8;
    background: rgba(255, 255, 255, 0.9);
  }
  
  /* Zoom controls */
  body.theme-light .zoom-control {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #E5E7EB;
  }
  body.theme-light .zoom-btn {
    color: #475569;
  }
  body.theme-light .zoom-btn:hover {
    background: #F3F4F6;
    color: #0F172A;
  }
  body.theme-light .zoom-btn + .zoom-btn { border-top: 1px solid #E5E7EB; }
  
  /* First-load zoom indicator overlay */
  body.theme-light .zoom-indicator {
    background: rgba(250, 250, 250, 0.85);
  }
  body.theme-light .zoom-message { color: #0F172A; }
  body.theme-light .zoom-submessage { color: #475569; }
  body.theme-light .zoom-gesture { color: #B58F1F; }
  
  /* Loading screen */
  body.theme-light .loading {
    background: #FAFAFA;
  }
  body.theme-light .loading-text {
    color: #475569;
  }
  
  /* Search tags (when search active) */
  body.theme-light .search-tag {
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    color: #1F2937;
  }
  body.theme-light .search-tag.tag-yellow { border-color: #B58F1F; color: #8A6B14; }
  body.theme-light .search-tag.tag-orange { border-color: #C13E1F; color: #C13E1F; }
  body.theme-light .search-tag.tag-blue   { border-color: #1E73B8; color: #1E73B8; }
  body.theme-light .search-tag.tag-gray   { border-color: #94A3B8; color: #475569; }
  body.theme-light .search-tag .tag-count {
    background: #F3F4F6;
    color: #1F2937;
  }
  body.theme-light .search-tag.tag-orange .tag-count { background: rgba(193, 62, 31, 0.10); color: #C13E1F; }
  body.theme-light .search-tag.tag-blue .tag-count { background: rgba(30, 115, 184, 0.10); color: #1E73B8; }
  body.theme-light .search-tag.tag-gray .tag-count { background: #E5E7EB; color: #475569; }
  body.theme-light .search-empty { color: #94A3B8; }
/* =====================================================================
   Account avatar menu + embedded Stripe Checkout modal (Phase C, 4c)
   Additive only. All selectors namespaced .nucl-*. Uses existing tokens.
   ===================================================================== */
.nucl-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ember);
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
  /* Sit at the far right of the topbar, where the old .learn-more-btn (order:4) was.
     order:5 places it after the theme-toggle (order:3); margin separates them. */
  order: 5;
  margin-left: 14px;
}
.nucl-avatar:hover { background: var(--ember-active); }
.nucl-avatar:active { transform: translateY(1px); }
.nucl-avatar-mark {
  font-family: 'Sora', sans-serif;
  font-weight: 700; font-size: 16px; color: #fff; line-height: 1;
}

.nucl-menu {
  min-width: 220px;
  background: var(--black-core);
  border: 1px solid rgba(191, 195, 200, 0.14);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  padding: 6px;
  z-index: 600;
  font-family: 'Inter', sans-serif;
}
.nucl-menu-email {
  padding: 8px 12px 6px;
  font-size: 12px; color: var(--gray-lines);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px;
}
.nucl-menu-divider { height: 1px; background: rgba(191, 195, 200, 0.10); margin: 4px 6px; }
.nucl-menu-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  padding: 10px 12px; border-radius: 8px;
  font: 500 13px 'Inter', sans-serif; color: var(--light-text);
  transition: background 0.12s ease;
}
.nucl-menu-item:hover { background: rgba(255, 255, 255, 0.06); }
.nucl-menu-item--primary { color: var(--ember-soft); font-weight: 600; }
.nucl-menu-item--primary:hover { background: rgba(255, 90, 54, 0.12); }

.nucl-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.62);
  display: flex; align-items: center; justify-content: center;
  z-index: 700; padding: 20px;
  animation: nuclFade 0.18s ease;
}
@keyframes nuclFade { from { opacity: 0; } to { opacity: 1; } }
/* White, on-brand checkout module. (The avatar + dropdown stay dark; they sit
   on the dark top bar. Only this modal is light, to blend with the white
   Stripe embedded form and read cleanly against the dark map.) */
.nucl-modal {
  position: relative;
  width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid rgba(10, 10, 11, 0.08);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  padding: 24px 24px 20px;
  font-family: 'Inter', sans-serif;
  color: var(--black-core);
}
.nucl-modal-close {
  position: absolute; top: 14px; right: 16px;
  background: transparent; border: none; cursor: pointer;
  color: #9aa0a6; font-size: 26px; line-height: 1;
  transition: color 0.12s ease;
}
.nucl-modal-close:hover { color: var(--black-core); }
.nucl-modal-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 20px; color: var(--black-core); }
.nucl-modal-sub { margin-top: 6px; font-size: 13px; color: #5b6166; line-height: 1.5; }

.nucl-plan-toggle { display: flex; gap: 10px; margin: 18px 0 4px; }
.nucl-plan {
  flex: 1; cursor: pointer; position: relative;
  background: #F6F6F4;
  border: 1.5px solid #E4E5E7;
  border-radius: 12px; padding: 12px 10px;
  font: 600 16px 'Sora', sans-serif; color: var(--black-core);
  transition: all 0.15s ease;
}
.nucl-plan:hover { border-color: #cfd1d4; }
.nucl-plan--active {
  border-color: var(--ember);
  background: rgba(255, 90, 54, 0.07);
  color: var(--black-core);
}
.nucl-plan-per { font: 400 12px 'Inter', sans-serif; color: #6b7176; }
.nucl-plan-save { display: block; font: 700 11px 'Inter', sans-serif; color: var(--ember); margin-top: 3px; letter-spacing: 0.02em; }

.nucl-checkout-mount { min-height: 360px; margin-top: 12px; }
.nucl-checkout-loading, .nucl-checkout-error, .nucl-checkout-success {
  text-align: center; padding: 48px 12px; font-size: 13px; color: #5b6166;
}
.nucl-checkout-success { color: #16181C; font-weight: 600; }
.nucl-checkout-error { color: #b3261e; font-weight: 600; }

/* ---- account view (signup / sign-in) ---- */
.nucl-modal-body { margin-top: 4px; }
.nucl-auth { display: flex; flex-direction: column; gap: 12px; }
.nucl-field { display: flex; flex-direction: column; gap: 5px; }
.nucl-field-label { font: 600 12px/1 'Inter', sans-serif; color: #16181C; }
.nucl-input {
  width: 100%; box-sizing: border-box; padding: 11px 12px;
  border: 1.5px solid #E4E5E7; border-radius: 10px;
  font: 400 14px/1.2 'Inter', sans-serif; color: #16181C; background: #fff;
}
.nucl-input::placeholder { color: #9aa0a6; }
.nucl-input:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255, 90, 54, 0.12); }
.nucl-btn-primary {
  margin-top: 2px; padding: 12px; border: none; border-radius: 10px;
  background: var(--ember); color: #fff; cursor: pointer;
  font: 600 14px/1 'Inter', sans-serif;
}
.nucl-btn-primary:hover { background: var(--ember-active); }
.nucl-btn-primary:disabled { opacity: 0.6; cursor: default; }
.nucl-or { display: flex; align-items: center; color: #9aa0a6; font-size: 12px; margin: 2px 0; }
.nucl-or::before, .nucl-or::after { content: ''; flex: 1; height: 1px; background: #E4E5E7; }
.nucl-or span { padding: 0 10px; }
.nucl-btn-sso {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px; border: 1.5px solid #E4E5E7; border-radius: 10px;
  background: #fff; color: #16181C; cursor: pointer;
  font: 600 14px/1 'Inter', sans-serif;
}
.nucl-btn-sso:hover { background: #F6F6F4; }
.nucl-sso-g { flex-shrink: 0; }
.nucl-auth-switch { text-align: center; font-size: 13px; color: #5b6166; margin-top: 4px; }
.nucl-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--ember); font: 600 13px/1 'Inter', sans-serif;
}
.nucl-link:hover { text-decoration: underline; }
.nucl-auth-error {
  background: #fdecea; color: #b3261e; border: 1px solid #f5c6c2;
  border-radius: 8px; padding: 9px 11px; font-size: 13px;
}

/* ---- confirmation / "you're in" state ---- */
.nucl-done {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 26px 8px 10px;
}
.nucl-done-check {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 90, 54, 0.12); color: var(--ember);
  font-size: 24px; line-height: 46px; font-weight: 700;
}
.nucl-done-title { font: 600 17px/1.3 'Sora', 'Inter', sans-serif; color: #16181C; }
.nucl-done-sub { font: 400 14px/1.45 'Inter', sans-serif; color: #5b6166; max-width: 320px; }
.nucl-done .nucl-btn-primary { margin-top: 8px; min-width: 210px; }

/* Match the header CTA: hidden on small screens for now (desktop-first). */
@media (max-width: 540px) {
  .nucl-avatar,
  .learn-more-btn { display: none !important; }
}