/* ==========================================================================
   Etch.AI Global Stylesheet
   Shared styles for all pages in the application
   ========================================================================== */

/* --------------------------------------------------------------------------
   ICON SELECTORS: target `svg`, never `i`.

   Markup writes an `<i data-lucide="name">` placeholder, but
   `lucide.createIcons()` REPLACES that element with an `<svg>`. A rule written
   as `.thing i { ... }` therefore matches nothing once the icons render, and
   the glyph silently falls back to Lucide's natural 24×24 — or, for a
   non-sizing rule, simply never applies.

   This trap caught 13 rules in this file. Symptoms ranged from icons rendering
   50% oversized to the "working" toast's loader never spinning at all. Inline
   `style="width:14px;height:14px"` on the `<i>` does work, because Lucide
   copies attributes across to the `<svg>` — which is why some icons in the
   codebase are correctly sized and others were not.

   Write `.thing svg { ... }`.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */
:root {
    /* Backgrounds */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #1a1a25;
    --bg-card-hover: #222230;
    --border-color: #2a2a3a;

    /* Text — three-step ramp, all WCAG-AA passing on card/secondary/page surfaces.
       The 2026-06 colorize lifted secondary (4.99 -> 6.24:1) and muted (2.57 -> 4.99:1)
       to fix the muted-token contrast debt flagged in the audit. */
    --text-primary: #ffffff;
    --text-secondary: #9a9aae;
    --text-muted: #8888a0;

    /* Accents — used as solid backgrounds, borders, icons, and on solid fills. */
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-tertiary: #06b6d4;
    --accent-success: #10b981;
    --accent-warning: #f59e0b;
    --accent-danger: #ef4444;

    /* Accent-on-tint — lighter (dark mode) / darker (light mode) variants for use
       as TEXT on the accent's own 10%-wash background. The solid --accent-* values
       fail AA when set on their own tinted pill backgrounds; these variants pass. */
    --accent-primary-on-tint: #8e90f5;
    --accent-warning-on-tint: #f59e0b;
    --accent-danger-on-tint: #f57272;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
    --gradient-secondary: linear-gradient(135deg, #06b6d4, #10b981);
    --gradient-danger: linear-gradient(135deg, #f59e0b, #ef4444);
    --gradient-pink: linear-gradient(135deg, #ec4899, #8b5cf6);
    --gradient-card: linear-gradient(145deg, #1a1a25, #12121a);

    /* Deal-value category colours — the upfront / milestone / equity vocabulary used by
       deal value-breakdown bars, charts and legends (deal-comps, deal-detail,
       asset-profile range analysis). Fixed data-viz hues, theme-independent. */
    --deal-upfront: #6366f1;
    --deal-devreg:  #8b5cf6;
    --deal-sales:   #06b6d4;
    --deal-other:   #10b981;
    --deal-equity:  #f59e0b;
    --deal-lumpsum: #ec4899;

    /* Sidebar */
    --sidebar-bg: rgba(18, 18, 26, 0.8);

    /* Phase 1 prototype context banner (internal id still .mvp-banner) */
    --mvp-banner-height: 36px;
    --mvp-banner-bg: #12121a;
    --mvp-banner-bg-wash: rgba(245, 158, 11, 0.12);
    --mvp-banner-accent: rgba(245, 158, 11, 0.55);
    --mvp-banner-border: #2a2a3a;
    --mvp-banner-pill-bg: rgba(245, 158, 11, 0.18);
    --mvp-banner-pill-color: #fbbf24;

    /* Shadows */
    --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Light Mode Overrides */
:root[data-theme="light"] {
    /* Backgrounds */
    --bg-primary: #f8f9fa;
    --bg-secondary: #f0f1f5;
    --bg-card: #ffffff;
    --bg-card-hover: #f5f5f7;
    --border-color: #e0e0e6;

    /* Text — three-step ramp lifted to all-AA on paper surfaces.
       Secondary moved 5.20 -> 7.28:1, muted 3.38 -> 4.97:1 on card. */
    --text-primary: #1a1a1a;
    --text-secondary: #555568;
    --text-muted: #6b6b80;

    /* Accent-on-tint — darker variants for pill text in light mode.
       The solid --accent-* values fail AA when set on their own 10% washes over paper. */
    --accent-primary-on-tint: #4e4fc8;
    --accent-warning-on-tint: #965e08;
    --accent-danger-on-tint: #c12424;

    /* Gradients */
    --gradient-card: linear-gradient(145deg, #ffffff, #f9f9fb);

    /* Sidebar */
    --sidebar-bg: rgba(255, 255, 255, 0.85);

    /* Phase 1 prototype context banner (internal id still .mvp-banner) */
    --mvp-banner-bg: #f0f1f5;
    --mvp-banner-bg-wash: rgba(245, 158, 11, 0.16);
    --mvp-banner-accent: rgba(184, 119, 10, 0.7);
    --mvp-banner-border: #e0e0e6;
    --mvp-banner-pill-bg: rgba(245, 158, 11, 0.2);
    --mvp-banner-pill-color: #965e08;

    /* Shadows */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    font-size: 14px;
    line-height: 1.5;
    padding-top: var(--mvp-banner-height);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ==========================================================================
   Animated Background
   ========================================================================== */
.bg-animation,
.bg-orbs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: float 20s ease-in-out infinite;
}

.bg-orb-1 {
    width: 600px;
    height: 600px;
    background: var(--accent-primary);
    top: -200px;
    right: -200px;
    animation-delay: 0s;
}

.bg-orb-2 {
    width: 400px;
    height: 400px;
    background: var(--accent-tertiary);
    bottom: -100px;
    left: -100px;
    animation-delay: -7s;
}

.bg-orb-3 {
    width: 300px;
    height: 300px;
    background: var(--accent-secondary);
    top: 50%;
    left: 50%;
    animation-delay: -14s;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.app-container {
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.sidebar {
    width: 280px;
    background: var(--sidebar-bg);
    backdrop-filter: blur(20px);
    border-right: 1px solid var(--border-color);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--mvp-banner-height);
    height: calc(100vh - var(--mvp-banner-height));
    z-index: 100;
    overflow: hidden;
}

.sidebar-nav-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin-bottom: 32px;
    text-decoration: none;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-glow);
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-section {
    margin-bottom: 24px;
}

.nav-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: 8px 12px;
    margin-bottom: 4px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
}

.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.nav-item:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--bg-card);
    color: var(--text-primary);
}

.nav-item.active::before {
    opacity: 1;
}

.nav-item svg {
    width: 20px;
    height: 20px;
}

.nav-item-badge {
    margin-left: auto;
    background: var(--gradient-primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.sidebar-footer {
    flex-shrink: 0;
    padding: 16px 0 0 0;
    border-top: 1px solid var(--border-color);
}

.sidebar-footer-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.footer-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.footer-action-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-card:hover {
    background: var(--bg-card-hover);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--gradient-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
}

.user-info {
    flex: 1;
}

.user-name {
    font-weight: 500;
    font-size: 14px;
}

.user-role {
    font-size: 12px;
    color: var(--text-muted);
}

/* ==========================================================================
   Main Content
   ========================================================================== */
.main-content {
    flex: 1;
    margin-left: 280px;
    padding: 24px 32px;
}

/* Content Area - wrapper for pages with top-nav + main-content */
.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 280px;
    min-height: 100vh;
}

.content-area .main-content {
    margin-left: 0;  /* Remove margin when inside content-area */
}

/* Top Navigation Bar */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: var(--mvp-banner-height);
    z-index: 100;
}

.top-nav .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.top-nav .nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-nav .nav-link {
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.top-nav .nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.top-nav .nav-link.active {
    color: var(--text-primary);
    background: var(--bg-card);
}

/* Breadcrumb Navigation */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    padding: 12px 32px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--accent-primary);
}

.breadcrumb .separator {
    color: var(--text-muted);
}

.breadcrumb .current {
    color: var(--text-primary);
    font-weight: 500;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.header-title h1 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
}

.header-title p {
    color: var(--text-secondary);
    font-size: 14px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ==========================================================================
   Search Bar
   ========================================================================== */
.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 16px;
    width: 280px;
    transition: all 0.2s ease;
}

.search-bar:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-bar input {
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 14px;
    width: 100%;
}

.search-bar input::placeholder {
    color: var(--text-muted);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gradient-primary);
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    color: white;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    text-decoration: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.btn-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 20px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-secondary:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
}

/* Destructive confirm action. Matches .btn-primary's geometry so it can sit in
   a .modal-footer beside .btn-ghost, but flat red rather than the indigo
   gradient — a destructive commit should not look like the happy path. */
.btn-danger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-danger);
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    color: white;
    font-weight: 500;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-danger:hover {
    background: color-mix(in srgb, var(--accent-danger) 85%, black);
}

.btn-danger:focus-visible {
    outline: 2px solid var(--accent-danger);
    outline-offset: 2px;
}

.btn-ghost {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-ghost:hover {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    position: relative;
}

.icon-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.icon-btn .notification-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--accent-danger);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
    background: var(--gradient-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body {
    padding: 24px;
}

/* ==========================================================================
   Stat Cards
   ========================================================================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--gradient-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
    border-color: rgba(99, 102, 241, 0.3);
}

.stat-card:hover::before {
    opacity: 1;
}

/* Stat-card hover top-border downgraded to a single solid accent (Rare Gradient
   Rule); per-channel gradient borders removed 2026-06-08. The icon channel
   washes below still differentiate the four metrics. */

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-primary);
}

.stat-card:nth-child(2) .stat-icon {
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent-tertiary);
}

.stat-card:nth-child(3) .stat-icon {
    background: rgba(245, 158, 11, 0.1);
    color: var(--accent-warning);
}

.stat-card:nth-child(4) .stat-icon {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

.stat-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
}

.stat-trend.up {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-success);
}

.stat-trend.down {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-danger-on-tint);
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 4px;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ==========================================================================
   Section Styles
   ========================================================================== */
.section {
    margin-bottom: 32px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-title {
    font-size: 20px;
    font-weight: 600;
}

.section-actions {
    display: flex;
    gap: 8px;
}

/* ==========================================================================
   Landscape Cards
   ========================================================================== */
.landscapes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.landscape-card {
    background: var(--gradient-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.landscape-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.landscape-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
    border-color: var(--accent-primary);
}

.landscape-card:hover::after {
    opacity: 0.05;
}

.landscape-card > * {
    position: relative;
    z-index: 1;
}

/* The card's single real link: an empty overlay stretched across the whole card,
   so the entire surface stays clickable while the action buttons remain OUTSIDE
   the anchor (interactive content must not nest inside <a href>). Named by
   aria-label, so a screen reader announces exactly one link per card. Must be a
   DIRECT child of .landscape-card — `.landscape-card > *` positions every child,
   so nesting it deeper would shrink the overlay to that child's box. */
.landscape-card > .landscape-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-decoration: none;
}

.landscape-card > .landscape-card-link:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -3px;
    border-radius: 14px;
}

/* A card with nothing to view yet shouldn't invite a click. */
.landscape-card.is-inert { cursor: default; }

.landscape-card-header {
    /* Above the stretched title link, so the action buttons stay clickable. */
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.landscape-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-primary-on-tint);
}

.landscape-badge.active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-success);
}

.landscape-badge.pending {
    background: rgba(245, 158, 11, 0.1);
    color: var(--accent-warning-on-tint);
}

/* ==========================================================================
   Stage / phase badges
   Shared across discover surfaces (assets, profiles, deal records). Base is the
   compact list/card size; add .lg for header / detail contexts. Phase colours
   use the AA-passing on-tint / lightened variants (phase-2 #a78bfa, not the raw
   --accent-secondary which fails AA on its tint).
   ========================================================================== */
.stage-badge {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.stage-badge.lg { padding: 4px 12px; font-size: 13px; }

.stage-badge.approved    { background: rgba(16, 185, 129, 0.15); color: var(--accent-success); }
/* Phase-3 = cyan, Phase-1 = indigo, matching the StageBadge component's tone
   mapping (backport row 8). Hues were previously swapped vs the story; each hue
   keeps the prototype's AA-tuned, theme-aware on-tint text treatment. */
.stage-badge.phase-3     { background: rgba(6, 182, 212, 0.15);  color: var(--accent-tertiary); }
.stage-badge.phase-2     { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
.stage-badge.phase-1     { background: rgba(99, 102, 241, 0.15); color: var(--accent-primary-on-tint); }
.stage-badge.preclinical { background: rgba(245, 158, 11, 0.15); color: var(--accent-warning-on-tint); }
.stage-badge.discovery   { background: rgba(236, 72, 153, 0.15); color: #f472b6; }

/* ==========================================================================
   Shared discover page components
   Lifted from per-page <style> blocks (2026-06-09): the back link, the browse
   page header, and the empty-results state (companies / assets / profiles / deal
   records). The .no-results base includes grid-column:1/-1 so it spans a grid.
   ========================================================================== */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
    cursor: pointer;
}
.back-link:hover { color: var(--text-primary); }

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    animation: fadeInUp 0.5s ease;
}
.page-header h1 { font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px 0; }
.page-header p  { font-size: 15px; color: var(--text-secondary); margin: 0; }

.no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    grid-column: 1 / -1;
}
.no-results i  { color: var(--text-muted); margin-bottom: 16px; }
.no-results h3 { color: var(--text-primary); margin: 0 0 8px 0; }

/* ==========================================================================
   Filter controls
   Shared select / chip / keyword-search styling for the discover filter bars
   (companies, assets, deal-comps) and the Command Centre landscape filters.
   The .filter-keyword WRAPPER (width / offset) and .filter-chips container stay
   page-local (layout); create-landscape keeps its own pill .filter-chip /
   .ls-filter-chip variants. Lifted 2026-06-09.
   ========================================================================== */
.filter-select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 32px 10px 14px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238888a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 130px;
    transition: all 0.2s ease;
}
.filter-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.filter-chip {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.filter-chip:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.filter-chip:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.filter-chip.active,
.filter-chip[aria-pressed="true"] {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary-on-tint);
}

.filter-keyword input {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px 10px 36px;
    color: var(--text-primary);
    font-size: 13px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.filter-keyword input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.filter-keyword input::placeholder { color: var(--text-muted); }
.filter-keyword .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

/* Reset filters — shared affordance across the Discover filter bars. Hidden until
   a filter differs from its default; page JS toggles .visible. Added 2026-06-17. */
.filter-reset {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-reset.visible { display: inline-flex; }

.filter-reset:hover {
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.landscape-menu {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.landscape-menu:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.landscape-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.landscape-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.landscape-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.landscape-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ==========================================================================
   Content Grid
   ========================================================================== */
.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

/* ==========================================================================
   Activity List
   ========================================================================== */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-item {
    display: flex;
    gap: 12px;
}

.activity-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.activity-dot.blue { background: var(--accent-primary); }
.activity-dot.green { background: var(--accent-success); }
.activity-dot.orange { background: var(--accent-warning); }
.activity-dot.red { background: var(--accent-danger); }

.activity-content {
    flex: 1;
}

.activity-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.activity-text strong {
    color: var(--text-primary);
}

.activity-time {
    font-size: 12px;
    color: var(--text-muted);
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-in {
    animation: fadeInUp 0.5s ease forwards;
}

.delay-1 { animation-delay: 0.1s; opacity: 0; }
.delay-2 { animation-delay: 0.2s; opacity: 0; }
.delay-3 { animation-delay: 0.3s; opacity: 0; }
.delay-4 { animation-delay: 0.4s; opacity: 0; }
.delay-5 { animation-delay: 0.5s; opacity: 0; }

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1400px) {
    .stats-grid,
    .landscapes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1200px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .sidebar {
        display: none;
    }
    .main-content {
        margin-left: 0;
    }
    .content-area {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 16px;
    }
    .stats-grid,
    .landscapes-grid {
        grid-template-columns: 1fr;
    }
    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .header-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    .search-bar {
        width: 100%;
    }
}

/* ============================================================
   MVP teardown additions (mvp-phase1-teardown branch)
   .stub-page          – placeholder content for stubbed pages
   .nav-item-phase-badge – text badge for post-MVP sidebar items
   ============================================================ */

.nav-item-phase-badge {
    margin-left: auto;
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.stub-page {
    max-width: 640px;
    margin: 96px auto;
    padding: 48px 32px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
}

.stub-page .stub-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    border-radius: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.stub-page .stub-icon svg {
    width: 28px;
    height: 28px;
}

.stub-page h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.stub-page .stub-phase-badge {
    display: inline-block;
    margin-bottom: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-warning-on-tint);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
}

.stub-page p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 16px;
}

.stub-page .stub-meta {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-muted);
}

.stub-page .stub-meta code {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11px;
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ============================================================
   Generic modal styles (.modal-overlay + .modal)
   Used by stub modals on discover pages. Activated by modal.js.
   Existing prefixed modals (e.g. .comparison-modal-overlay) continue
   to define their own styles inline per page.
   ============================================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.25s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-body {
    padding: 20px 24px;
    overflow-y: auto;
}

.modal-body p.modal-intro {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0 0 16px;
}

.modal-body .form-row {
    margin-bottom: 14px;
}

.modal-body .form-row label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.modal-body .form-row input,
.modal-body .form-row select,
.modal-body .form-row textarea {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}

.modal-body .form-row input:focus,
.modal-body .form-row select:focus,
.modal-body .form-row textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.modal-body .stub-notice {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 8px;
    color: var(--accent-warning-on-tint);
    font-size: 12px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ============================================================
   Feedback widget (US-1.AC.4)
   Loaded by prototype/scripts/feedback.js on every authenticated
   page. Markup is injected into the document body at load.
   ============================================================ */

/* Row-hover action reveal – generic pattern used by watchlist,
   deal comps and any future table-row surface. Icons sit at
   opacity 0 by default and fade in on row hover or focus. */
.row-actions {
    display: inline-flex;
    gap: 4px;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.15s ease;
}
tr:hover .row-actions,
tr:focus-within .row-actions,
.row-host:hover .row-actions,
.row-host:focus-within .row-actions {
    opacity: 1;
}

.row-icon-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    padding: 0;
}
.row-icon-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}
.row-icon-btn.danger:hover {
    color: var(--accent-danger);
    border-color: var(--accent-danger);
}
.row-icon-btn.feedback:hover {
    color: var(--accent-warning);
    border-color: var(--accent-warning);
}
.row-icon-btn svg { width: 15px; height: 15px; }

/* Page-level icon (used in profile headers for entity-wide Report) */
.page-actions-icon {
    width: 36px;
    height: 36px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.page-actions-icon:hover {
    background: var(--bg-card-hover);
    color: var(--accent-warning);
    border-color: var(--accent-warning);
}
.page-actions-icon svg { width: 16px; height: 16px; }

/* Form-modal helpers */
.fb-location-block {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fb-location-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.fb-location-row .fb-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    min-width: 78px;
}
.fb-location-row .fb-value {
    color: var(--text-primary);
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
}
.fb-intro {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0 0 18px;
}
.fb-helper {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}
.fb-req { color: var(--accent-danger); margin-left: 3px; }
.fb-opt {
    color: var(--text-muted);
    margin-left: 6px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-size: 11px;
}

/* Confirmation modal */
.fb-confirmation-icon {
    width: 56px;
    height: 56px;
    margin: 8px auto 18px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    color: var(--accent-success);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fb-confirmation-icon svg { width: 28px; height: 28px; }
.fb-confirmation-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}
.fb-confirmation-text {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 18px;
}
.fb-ticket-ref {
    display: block;
    text-align: center;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: 14px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--accent-primary-on-tint);
    margin-bottom: 8px;
}
.fb-ticket-ref-label {
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* Discard modal */
.fb-discard-icon {
    width: 48px;
    height: 48px;
    margin: 4px auto 14px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.12);
    color: var(--accent-warning);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fb-discard-icon svg { width: 24px; height: 24px; }

/* Inline validation state for required form fields */
.fb-input-invalid { border-color: var(--accent-danger) !important; }

/* ============================================================
   Annotations system (scripts/annotations.js)
   Internal-only design-note layer. Off by default; enabled via
   ?notes=1 URL param or the MVP review banner toggle.
   ============================================================ */

/* Badge */
.annotation-badge {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-warning);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 200;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    font-family: inherit;
    padding: 0;
    line-height: 1;
    transition: transform 0.12s ease;
}
body.notes-on .annotation-badge { display: inline-flex; }
.annotation-badge:hover { transform: scale(1.12); }
.annotation-badge.cat-feature       { background: var(--accent-primary); }
.annotation-badge.cat-decision      { background: var(--accent-warning); }
.annotation-badge.cat-assumption    { background: var(--accent-tertiary); }
.annotation-badge.cat-open-question { background: var(--accent-danger); }

/* Popover */
.annotation-popover {
    position: fixed;
    z-index: 2000;
    width: 320px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.55;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: none;
}
.annotation-popover.active { display: block; }
.annotation-popover h4 {
    font-size: 13px;
    margin: 0 0 6px;
    color: var(--text-primary);
}
.annotation-popover p {
    color: var(--text-secondary);
    font-size: 12px;
    margin: 0;
}
.annotation-popover-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px 6px;
}
.annotation-popover-close:hover { color: var(--text-primary); }
.annotation-popover-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 6px;
    color: white;
}
.annotation-popover-cat.cat-feature       { background: var(--accent-primary); }
.annotation-popover-cat.cat-decision      { background: var(--accent-warning); }
.annotation-popover-cat.cat-assumption    { background: var(--accent-tertiary); }
.annotation-popover-cat.cat-open-question { background: var(--accent-danger); }
.annotation-popover-ref {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* Bottom-of-page panel.
   annotations.js appends the panel inside .main-content where available
   (discover and most landscape pages); on pages without that wrapper
   (create-landscape.html, mindmap-export.html) it falls back to body.
   The default styles below cover the body-fallback case so the panel
   clears the fixed sidebar. The .main-content override resets to no
   horizontal margins, since the parent wrapper already handles the
   sidebar offset and adds its own padding. */
.annotations-panel {
    /* Body-fallback layout: clear the 280px sidebar on the left and
       leave a comfortable gutter on the right. Bottom margin keeps
       the panel above the viewport edge. */
    margin: 32px 32px 80px calc(280px + 32px);
    padding: 20px 24px;
    background: var(--bg-card);
    border: 1px dashed var(--accent-warning);
    border-radius: 14px;
    box-sizing: border-box;
    /* Avoid edge-to-edge stretch on very wide viewports. */
    max-width: 1400px;
    display: none;
}
/* When hosted inside the canonical .main-content wrapper the parent
   already offsets for the sidebar and applies horizontal padding. */
.main-content > .annotations-panel,
.content-area .annotations-panel {
    margin: 32px 0 80px;
    max-width: none;
}
body.notes-on .annotations-panel { display: block; }
.annotations-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.annotations-panel-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-warning-on-tint);
    margin: 0 0 4px;
}
.annotations-panel-header p {
    color: var(--text-secondary);
    font-size: 12px;
    margin: 0;
    max-width: 520px;
}
.annotations-panel-close {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.annotations-panel-close:hover {
    color: var(--text-primary);
    border-color: var(--accent-warning);
}
.annotations-group { margin-bottom: 18px; }
.annotations-group:last-child { margin-bottom: 0; }
.annotations-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.annotations-cat-pill {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 8px;
    color: white;
}
.annotations-cat-pill.cat-feature       { background: var(--accent-primary); }
.annotations-cat-pill.cat-decision      { background: var(--accent-warning); }
.annotations-cat-pill.cat-assumption    { background: var(--accent-tertiary); }
.annotations-cat-pill.cat-open-question { background: var(--accent-danger); }
.annotations-group-count {
    color: var(--text-muted);
    font-size: 11px;
}
.annotations-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.annotation-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    border-left: 3px solid var(--border-color);
}
.annotation-card.cat-feature       { border-left-color: var(--accent-primary); }
.annotation-card.cat-decision      { border-left-color: var(--accent-warning); }
.annotation-card.cat-assumption    { border-left-color: var(--accent-tertiary); }
.annotation-card.cat-open-question { border-left-color: var(--accent-danger); }
.annotation-card h4 {
    font-size: 13px;
    margin: 0 0 4px;
    color: var(--text-primary);
}
.annotation-card p {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}
.annotation-card-meta {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    font-size: 10px;
    color: var(--text-muted);
    align-items: center;
}
.annotation-status {
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.annotation-status.status-open       { background: rgba(245, 158, 11, 0.12); color: var(--accent-warning-on-tint); }
.annotation-status.status-resolved   { background: rgba(16, 185, 129, 0.12); color: var(--accent-success); }
.annotation-status.status-superseded { background: rgba(138, 138, 158, 0.12); color: var(--text-muted); }
.annotation-story-ref {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ---- Local notes (added at runtime via Alt+Shift+N) ---- */
.annotation-local-pill,
.annotation-unanchored-pill {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.annotation-local-pill {
    background: rgba(139, 92, 246, 0.14);
    color: var(--accent-secondary);
}
.annotation-unanchored-pill {
    background: rgba(138, 138, 158, 0.12);
    color: var(--text-muted);
}
/* Local badges get a dashed ring so they read as provisional next to
   curated (data-note-id) badges. */
.annotation-badge.is-local { border-style: dashed; border-color: rgba(255, 255, 255, 0.7); }

/* Not-yet-synced state: a note whose write is queued in the outbox. Amber
   pill + ringed badge so it reads as "on this device, not on the server yet". */
.annotation-pending-pill {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(245, 158, 11, 0.16);
    color: var(--accent-warning-on-tint, var(--accent-warning));
}
.annotation-badge.is-pending {
    box-shadow: 0 0 0 2px var(--accent-warning);
}
/* Panel banner shown while any writes are queued locally. */
.annotations-sync-note {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 16px 4px;
    padding: 9px 12px;
    border: 1px solid var(--accent-warning);
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.08);
    color: var(--text-primary);
    font-size: 12px;
}

/* Small action buttons shared by the popover, panel cards and note form */
.annotation-action-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
}
.annotation-action-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.annotation-action-btn.primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.annotation-action-btn.primary:hover { color: #fff; opacity: 0.9; }
.annotation-action-btn.danger:hover { color: var(--accent-danger); border-color: var(--accent-danger); }
.annotation-popover-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.annotation-card-actions {
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
}
/* Author attribution shown on every note card (who added it). */
.annotation-note-author {
    color: var(--text-muted);
    font-weight: 600;
}
/* Small inline spinner shown next to the "Design notes" title while notes
   load from the backend. */
.annotations-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-left: 9px;
    vertical-align: baseline;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: annotations-spin 0.7s linear infinite;
}
@keyframes annotations-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .annotations-spinner { animation-duration: 1.6s; }
}

/* Panel state messages (loading / empty / error) shown in place of the
   note list. The error variant is deliberately loud — a 401/config failure
   must never read as "no notes". */
.annotations-status {
    padding: 14px 16px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}
.annotations-status kbd {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
}
.annotations-status-error {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 16px;
    padding: 14px 16px;
    border: 1px solid var(--accent-danger);
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.08);
    color: var(--text-primary);
}
.annotations-status-error p { margin: 0; }

/* Annotate mode: crosshair plus a floating highlight box that tracks the
   hovered element (no element styles are touched). */
body.notes-annotating,
body.notes-annotating * { cursor: crosshair !important; }
.annotation-highlight {
    position: fixed;
    z-index: 1900;
    pointer-events: none;
    border: 2px dashed var(--accent-primary);
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.08);
    display: none;
}
.annotation-highlight.active { display: block; }

/* Add/edit note form */
.annotation-form {
    position: fixed;
    z-index: 2100;
    width: 340px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    display: none;
}
.annotation-form.active { display: block; }
.annotation-form-title {
    font-size: 13px;
    margin: 0 0 10px;
    color: var(--text-primary);
}
.annotation-form-row { margin-bottom: 10px; }
.annotation-form-row label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.annotation-form-row input,
.annotation-form-row select,
.annotation-form-row textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 12.5px;
    resize: vertical;
}
.annotation-form-row input:focus,
.annotation-form-row select:focus,
.annotation-form-row textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.annotation-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

/* Toast (annotate-mode hint, export confirmation) */
.annotation-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2200;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    display: none;
}
.annotation-toast.active { display: block; }

/* Inline kbd hint in the panel intro */
.annotations-panel-header kbd {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0 5px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11px;
}

/* Sidebar hides at 900px (see .sidebar / .main-content rules above), so
   the body-fallback panel no longer needs the 280px left clearance. */
@media (max-width: 900px) {
    .annotations-panel { margin: 24px 16px 80px; max-width: none; }
    .main-content > .annotations-panel,
    .content-area .annotations-panel { margin: 24px 0 80px; }
    .annotations-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Evolving prototype context banner
   Persistent, non-dismissible banner pinned above every page that loads the
   prototype chrome. Its first job is to make the framing unmistakable: this is
   an evolving prototype running on sample (not live) data, built to show the
   evolving direction and gather feedback. Its second job is the design-notes toggle
   (annotations.js). Amber wash + underline mark it as a system notice rather
   than chrome. Internal id stays .mvp-banner / --mvp-banner-* to keep the
   layout cascade (body padding, sidebar/top-nav offsets) untouched.
   Markup injected by scripts/mvp-banner.js.
   ========================================================================== */
.mvp-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mvp-banner-height);
    background: linear-gradient(var(--mvp-banner-bg-wash), var(--mvp-banner-bg-wash)), var(--mvp-banner-bg);
    border-bottom: 2px solid var(--mvp-banner-accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    z-index: 200;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-secondary);
    user-select: none;
    /* One-time entrance: the notice drops in from above and fades up. Runs
       once on load to draw the eye; the resting state (no animation) is fully
       visible, so the banner is never hidden if motion is suppressed or the
       animation never fires. */
    animation: mvpBannerSlide 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The message arrives a beat after the bar settles, leading the eye to the
   pill + headline (the committed signals). */
.mvp-banner-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    animation: mvpBannerContentIn 320ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both;
}

@keyframes mvpBannerSlide {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
@keyframes mvpBannerContentIn {
    from { transform: translateY(6px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

.mvp-banner-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mvp-banner-pill-bg);
    color: var(--mvp-banner-pill-color);
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 9999px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
.mvp-banner-pill svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.mvp-banner-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
}

.mvp-banner-headline {
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mvp-banner-sub {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mvp-banner-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    padding: 4px 0;
    flex-shrink: 0;
}
.mvp-banner-toggle:hover { color: var(--text-primary); }
.mvp-banner-toggle:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.mvp-banner-toggle-label { white-space: nowrap; }

.mvp-banner-switch {
    position: relative;
    width: 30px;
    height: 16px;
    background: var(--border-color);
    border-radius: 8px;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.mvp-banner-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: transform 0.15s ease, background 0.15s ease;
}
.mvp-banner-toggle[aria-pressed="true"] .mvp-banner-switch {
    background: var(--accent-primary);
}
.mvp-banner-toggle[aria-pressed="true"] .mvp-banner-switch::after {
    transform: translateX(14px);
    background: #ffffff;
}

/* Drop the purpose line first (priority #4 "should"), then the toggle label.
   The pill (#2) and the headline (#3) — the committed signals — stay at every
   width. */
@media (max-width: 640px) {
    .mvp-banner-sub { display: none; }
}
@media (max-width: 600px) {
    .mvp-banner-toggle-label { display: none; }
    .mvp-banner { padding: 0 12px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .mvp-banner,
    .mvp-banner-left { animation: none; }
    .mvp-banner-switch,
    .mvp-banner-switch::after { transition: none; }
}

/* ==========================================================================
   Touch-target lifts (coarse pointer only)
   Icon buttons stay compact for mouse-precision users. Touch and stylus users
   get larger hit areas via `@media (pointer: coarse)`. Sized close to the
   WCAG 2.5.5 (Target Size) 44px floor without forcing taller rows on mouse
   users who already operate well below that floor with precision.

   .row-actions gap expands too so adjacent hit areas don't overlap after
   the buttons grow.
   ========================================================================== */
@media (pointer: coarse) {
    .row-icon-btn {
        width: 40px;
        height: 40px;
    }
    .row-icon-btn svg {
        width: 18px;
        height: 18px;
    }
    .row-actions {
        gap: 8px;
    }
    .modal-close {
        width: 40px;
        height: 40px;
    }
    .landscape-menu {
        width: 40px;
        height: 40px;
    }
    .icon-btn {
        width: 44px;
        height: 44px;
    }
    .page-actions-icon {
        width: 44px;
        height: 44px;
    }
    .footer-action-btn {
        width: 44px;
        height: 44px;
    }
    .mvp-banner-toggle {
        padding: 6px 4px;
    }
    /* Row-hover affordance: on touch there is no hover. Pin actions to
       always-visible so keyboard / touch users can reach them. */
    .row-actions {
        opacity: 1;
    }
}

/* ==========================================================================
   Reduced Motion
   Honours the user's OS-level `prefers-reduced-motion: reduce` preference.
   Collapses every animation and transition across the prototype to ~instant.

   Why this lives in global.css: the universal selector + !important is the
   highest-leverage place to land reduced-motion coverage. Every page loads
   global.css, so this block covers shared rules AND inline page <style>
   blocks (which the !important specificity-trump handles) including the
   `shake`, `float`, scroll-driven and other animations defined per-page in
   create-landscape.html, new-landscape.html, etc.

   Why animation-delay is collapsed too: the `.delay-1` ... `.delay-5`
   stagger classes set `opacity: 0` as resting state and only become
   visible at the end of fadeInUp. Without collapsing delay, an element
   with `.delay-5` would stay invisible for ~500ms before snapping in.

   Why animation-iteration-count is forced to 1: stops infinite decoratives
   (the `float` orb drift, the `pulse` notification dot) cold instead of
   looping at 0.01ms forever.

   Verified: all keyframes in this file (float, pulse, fadeInUp,
   modalSlideIn) end on a state that matches the element's base styles, so
   collapsed-to-instant ends in the correct visible position.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   App toast (scripts/notify.js)
   Acknowledgements and "landscape ready" notifications. Stacks bottom-right;
   the annotations toast owns bottom-centre. Theme-aware via design variables.
   ========================================================================== */
.app-toast-stack {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 2200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(380px, calc(100vw - 48px));
    pointer-events: none;
}

.app-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
}
.app-toast.active { opacity: 1; transform: translateY(0); }

.app-toast-icon { display: inline-flex; flex-shrink: 0; }
.app-toast-icon svg { width: 18px; height: 18px; }
.app-toast--info .app-toast-icon { color: var(--accent-primary-on-tint); }
.app-toast--success .app-toast-icon { color: var(--accent-success); }
.app-toast--working .app-toast-icon { color: var(--accent-warning-on-tint); }
.app-toast--working .app-toast-icon svg { animation: spin 1s linear infinite; }

.app-toast-msg { flex: 1 1 auto; min-width: 0; }

.app-toast-action {
    flex-shrink: 0;
    font: inherit;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--accent-primary-on-tint);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    padding: 2px 4px;
    border-radius: 6px;
}
.app-toast-action:hover { text-decoration: underline; }
.app-toast-action:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.app-toast-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
}
.app-toast-close:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.app-toast-close svg { width: 15px; height: 15px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Landscape card — request state + favourite / pin affordances
   Extends the base .landscape-card. The card header carries a badge (state)
   and an actions cluster (favourite / pin / menu). Affordance markup is
   rendered by index.html per the ?aff variant.
   ========================================================================== */

/* Requested (in-progress) badge reuses the amber "pending" tint and adds a
   pulsing dot so it reads as live work, not a static label. */
.landscape-badge.requested {
    background: rgba(245, 158, 11, 0.1);
    color: var(--accent-warning-on-tint);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.landscape-badge.requested .ls-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 1.4s ease-in-out infinite;
}

/* A requested card is doing work — hint it with a faint animated top edge. */
.landscape-card.is-requested::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-warning), transparent);
    background-size: 200% 100%;
    animation: ls-progress 1.8s linear infinite;
    z-index: 2;
}
@keyframes ls-progress {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Actions cluster (top-right of the card header). */
.landscape-card-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Geometry matches .row-icon-btn (30px, 7px radius, hairline border on hover)
   so the card action cluster speaks the same dialect as every table row in
   Discover, rather than being a one-off at 28px/6px. */
.ls-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}
.ls-icon-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.ls-icon-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
/* Selector is `svg`, NOT `i`: lucide.createIcons() REPLACES the <i> placeholder
   with an <svg>, so an `i` selector matches nothing and the glyph falls back to
   Lucide's natural 24px. stroke-width 1.5 (vs Lucide's default 2) sets the glyph
   at the weight the rest of the card's type is set at. */
.ls-icon-btn svg { width: 15px; height: 15px; stroke-width: 1.5; }

/* Favourite (bookmark) — "on" fills indigo, the action/current-selection
   channel. Deliberately not amber: per DESIGN.md's Status Channel Rule amber
   means review/pending, which a favourited landscape is not. Amber also
   resolves to a muddy #965e08 in the light theme. */
.ls-fav-btn.is-on { color: var(--accent-primary-on-tint); }
.ls-fav-btn.is-on svg { fill: currentColor; }

/* Pin — "on" reads indigo. */
.ls-pin-btn.is-on { color: var(--accent-primary-on-tint); }
.ls-pin-btn.is-on svg { fill: currentColor; }

/* Delete (trash) — JKNN-161 delete slice. Unlike favourite/pin, this carries no
   state worth showing at rest and is destructive, so it stays hidden until the
   card is hovered or focused, mirroring the .row-actions reveal on table rows
   (the pattern this affordance was chosen to match). It only turns red on
   hover, following .row-icon-btn.danger. */
.ls-del-btn {
    opacity: 0;
    transition: opacity 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.landscape-card:hover .ls-del-btn,
.landscape-card:focus-within .ls-del-btn,
.ls-del-btn:focus-visible {
    opacity: 1;
}
/* Colour + border go danger, matching .row-icon-btn.danger:hover. No red
   background wash — the tint plus a red glyph reads heavier than the rest of
   the hover vocabulary. */
.ls-del-btn:hover {
    border-color: var(--accent-danger);
    color: var(--accent-danger);
}

/* Touch devices never hover, so a hover-only control would be unreachable. */
@media (hover: none) {
    .ls-del-btn { opacity: 1; }
}

/* Variant C only — the delete item in the kebab popover reads destructive. */
.ls-card-menu button.is-danger { color: var(--accent-danger-on-tint); }
.ls-card-menu button.is-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-danger-on-tint);
}
.ls-card-menu-sep {
    height: 1px;
    background: var(--border-color);
    margin: 4px 2px;
}

/* A pinned card gets a subtle left accent so the top-of-grid ordering is
   legible (why is this card first?). */
.landscape-card.is-pinned { border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-color)); }

/* Variant C — the actions live in a small popover off the kebab. */
.ls-card-menu {
    position: absolute;
    top: 44px;
    right: 16px;
    z-index: 5;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    padding: 6px;
    min-width: 150px;
    display: none;
    flex-direction: column;
    gap: 2px;
}
.ls-card-menu.open { display: flex; }
.ls-card-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
}
.ls-card-menu button:hover { background: var(--bg-card-hover); color: var(--text-primary); }
/* `svg`, not `i` — see the note on .ls-icon-btn svg above. */
.ls-card-menu button svg { width: 15px; height: 15px; stroke-width: 1.5; }
/* Indigo, matching .ls-fav-btn.is-on — the menu is variant C's rendering of the
   same two controls, so the "on" colour must agree. */
.ls-card-menu button.is-on { color: var(--accent-primary-on-tint); }

/* ==========================================================================
   Dev-only variant switcher (persona adjudication)
   Present only on pages that render it; lets a reviewer flip ?wait/?aff/?states
   and screenshot each variant. Not shipped design furniture.
   ========================================================================== */
.variant-switcher {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 1500;
    background: var(--bg-card);
    border: 1px dashed var(--accent-primary);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 11px;
    color: var(--text-secondary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    max-width: 240px;
}
.variant-switcher h6 {
    margin: 0 0 8px 0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.variant-switcher-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.variant-switcher-row .vs-label { width: 58px; flex-shrink: 0; }
.variant-switcher-row a {
    display: inline-flex;
    width: 22px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
}
.variant-switcher-row a.on {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary-on-tint);
}
.variant-switcher-reset {
    margin-top: 4px;
    width: 100%;
    padding: 5px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}
.variant-switcher-reset:hover { border-color: var(--accent-danger); color: var(--accent-danger); }

/* ==========================================================================
   Landscape view export (Phase 2 / E1)
   The Export control on the results header, and the sample-data watermark baked
   into the exported image.
   ========================================================================== */
.ls-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.ls-export-watermark {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 50;
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-warning-on-tint);
    border: 1px solid var(--accent-warning);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    pointer-events: none;
}

/* Catalyst "should I meet them?" decision cue (Phase 2 / T-B) — placeholder for the
   materiality/judgement layer inside the catalyst-event modal. */
.cev-cue {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-primary);
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.06);
}
.cev-cue-q {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--accent-primary-on-tint);
    margin-bottom: 6px;
}
.cev-cue-q svg { width: 15px; height: 15px; }
.cev-cue-body { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.cev-cue-tag {
    display: block;
    margin-top: 8px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}