/**
 * Modern Black - 2025 Web Standards CSS
 * Lite yet extensive, fully responsive base stylesheet
 * Optimized for smooth degradation, flex, scroll on desktop and mobile
 */

/* ==========================================================================
   CSS Custom Properties (2025 Standards)
   ========================================================================== */

   :root {
    /* Color Palette - Black Theme */
    --color-black: #000000;
    --color-black-soft: #0d0d0d;    /* ≡ --surface-1 */
    --color-black-lighter: #1a1a1a; /* ≡ --surface-2 */
    --color-white: #ffffff;
    --color-white-soft: #f5f5f5;
    --color-gray-light: #e5e5e5;
    --color-gray: #999999;
    --color-gray-dark: #666666;
    --color-accent: #ffffff;
    --color-acid: #a8bf2a;
    --color-acid-hover: #b8cc35;

    /* Status colors */
    --color-success: #4ade80;
    --color-warning: #f59e0b;
    --color-error: #FF4050;

    /* ─── Design contract (surface hierarchy) ─────────────────────────── */
    /* Layer 0  — raw black body background                                */
    --surface-0: #000000;
    /* Layer 1  — structural panels: header, footer, project header        */
    --surface-1: #0d0d0d;
    /* Layer 2  — content cards, widgets, panels                           */
    --surface-2: #1a1a1a;
    /* Layer 3  — inputs, selected states, inner surfaces                  */
    --surface-3: #222222;

    /* ─── Border system ──────────────────────────────────────────────── */
    /* hairline  — section dividers, barely-there separators               */
    --border-hairline: rgba(255, 255, 255, 0.07);
    /* subtle    — card, widget, table borders                             */
    --border-subtle:   rgba(255, 255, 255, 0.11);
    /* strong    — modals, focus rings, active emphasis                    */
    --border-strong:   rgba(255, 255, 255, 0.22);

    /* ─── Radius system ──────────────────────────────────────────────── */
    /* --radius     4px — everything rectangular: cards, buttons, inputs   */
    --radius:    4px;
    /* --radius-sm  2px — tiny inline tags, dots                          */
    --radius-sm: 2px;
    /* --radius-lg  6px — large overlays only: modals, dropdowns           */
    --radius-lg: 6px;
    /* --radius-pill — pill shapes, never on rectangular containers        */
    --radius-pill: 999px;

    /* Focus sticky geometry */
    --focus-sticky-top: 64px; /* Match main header height - sticky relative to .modern-body scroll container */
    --focus-image-size: clamp(160px, 22vw, 280px);
    --focus-image-col: calc(var(--focus-image-size) + var(--space-md));
    
    /* Rating Color System - Warm ↔ Cool Gradient */
    --rating-amber: #FFB84D;
    --rating-cyan: #5DADE2;
    --rating-warm-white: #FFF8E7;
    --rating-cool-white: #E7F8FF;
    --rating-white: #FFFFFF;
    
    /* Spacing System - Modular Scale */
    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */
    --space-4xl: 6rem;      /* 96px */
    
    /* Typography Scale - Fluid */
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --font-size-3xl: clamp(2rem, 1.7rem + 1.5vw, 3rem);
    --font-size-4xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Font Families */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    
    /* Transitions & Animations */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Container Widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    --container-ultra: 1920px;
    
    /* Breakpoints (for JavaScript if needed) */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    --breakpoint-ultra: 1920px;
    
    /* Spacing Scale - Additional Granular Options */
    --space-5xl: 8rem;      /* 128px */
    --space-6xl: 12rem;     /* 192px */
    
    /* Aspect Ratios */
    --aspect-square: 1 / 1;
    --aspect-video: 16 / 9;
    --aspect-ultrawide: 21 / 9;
    --aspect-portrait: 3 / 4;
    --aspect-landscape: 4 / 3;
    
    /* Safe Area Insets (mobile notches/status bars) */
    --safe-area-inset-top: env(safe-area-inset-top, 0);
    --safe-area-inset-right: env(safe-area-inset-right, 0);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
    --safe-area-inset-left: env(safe-area-inset-left, 0);
    
    /* Structural Gutter - Left gutter for star, grid line alignment */
    --gutter-width: clamp(var(--space-2xl), 4vw, var(--space-4xl)); /* Responsive: 48px to 96px */
    
    /* Viewport Units - Advanced */
    --viewport-width: 100vw;
    --viewport-height: 100vh;
    --viewport-small: 100svh;  /* Small viewport height */
    --viewport-large: 100lvh;  /* Large viewport height */
    --viewport-dynamic: 100dvh; /* Dynamic viewport height */
   }
@media (max-width: 1024px) {
   :root { --focus-sticky-top: 56px; }
}
@media (max-width: 640px) {
   :root { --focus-sticky-top: 48px; }
}

/* ==========================================================================
   Reset & Base Styles (2025 Standards)
   ========================================================================== */

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    min-height: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-white);
    background-color: var(--color-black);
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
    min-height: 100svh; /* Small viewport height fallback */
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    /* Safe area insets for mobile devices */
    padding-inline-start: var(--safe-area-inset-left);
    padding-inline-end: var(--safe-area-inset-right);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-white);
    margin-block-end: var(--space-md);
    letter-spacing: -0.02em;
}

h1 {
    font-size: var(--font-size-4xl);
    margin-block-end: var(--space-lg);
}

h2 {
    font-size: var(--font-size-3xl);
    margin-block-end: var(--space-md);
}

h3 {
    font-size: var(--font-size-2xl);
    margin-block-end: var(--space-sm);
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-base);
}

p {
    margin-block-end: var(--space-md);
    color: var(--color-gray-light);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-base), opacity var(--transition-base);
}

a:hover {
    opacity: 0.8;
}

a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.modern-header {
    background-color: var(--surface-1);
    border-block-end: 1px solid var(--border-hairline);
    padding-block: var(--space-sm);
    padding-block-start: calc(var(--space-sm) + var(--safe-area-inset-top));
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

.modern-header__container {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-lg); /* 24px — compact, symmetric */
    container-type: inline-size;
    container-name: header-container;
}

.modern-header__content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.modern-header__left {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    flex: 1 1 auto;
}

.modern-header__title-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.modern-header__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-white);
}

.modern-header__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    align-items: center;
}

.modern-header__link {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-light);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
    transition: color var(--transition-base), background-color var(--transition-base);
}

.modern-header__link:hover {
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.05);
}

.modern-header__link:active {
    opacity: 0.7;
}

/* ==========================================================================
   Authentication UI
   ========================================================================== */

.modern-header__auth {
    flex: 0 0 auto;
    margin-inline-start: auto;
    align-self: center; /* Align with header content baseline/center */
    display: flex;
    align-items: center; /* Vertically center auth content */
    gap: var(--space-sm);
}

/* Auth Buttons (Not Logged In) */
.modern-header__auth-buttons {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.modern-header__auth-btn {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-sm);
    text-decoration: none;
    border-radius: 999px; /* Pill shape */
    transition: all var(--transition-base);
    border: 1px solid var(--color-white);
    background: transparent;
    color: var(--color-white);
    font-weight: 500;
}

.modern-header__auth-btn--signup {
    background: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
}

.modern-header__auth-btn:hover {
    opacity: 0.8;
}

.modern-header__auth-btn--signup:hover {
    opacity: 0.9;
    background: var(--color-white-soft);
}

/* Profile Component (Logged In) - Minimal Dark Integration */
.modern-header__profile {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    padding: var(--space-xs) var(--space-sm);
    background: transparent; /* Integrated with dark header */
    border-radius: 0;
    transition: all var(--transition-base);
    margin: 0; /* No margin to maintain alignment */
}

.modern-header__profile:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Match nav link hover */
}

.modern-header__avatar,
.modern-header__avatar-initials {
    width: 2rem; /* Slightly smaller, less prominent */
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%; /* Round avatar */
    margin: 0; /* No margin to maintain alignment */
}

.modern-header__avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1); /* Subtle background, not solid black */
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--font-size-xs);
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
}

.modern-header__avatar {
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Match initials border */
}

.modern-header__profile-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0; /* Allow text truncation */
    margin: 0; /* No margin to maintain alignment */
    padding: 0; /* No padding to maintain alignment */
    justify-content: center; /* Vertically center text within container */
}

.modern-header__profile-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-white);
    line-height: var(--line-height-normal); /* Match nav link line-height for vertical alignment */
    white-space: nowrap;
    margin: 0; /* No margin to maintain alignment */
    padding: 0; /* No padding to maintain alignment */
}

.modern-header__profile-role {
    font-size: var(--font-size-xs);
    color: var(--color-gray-light);
    line-height: var(--line-height-tight);
    white-space: nowrap;
    opacity: 0.8;
    margin: 0; /* No margin to maintain alignment */
    padding: 0; /* No padding to maintain alignment */
}

/* ==========================================================================
   Body / Main Content
   ========================================================================== */

.modern-body {
    flex: 1 1 auto;   /* fills the space between sticky header and footer */
    padding: var(--space-xl) 0 var(--space-3xl);
    overflow: visible;
    -webkit-overflow-scrolling: touch;
}

.modern-body__container {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-left: var(--gutter-width); /* Align to grid line from "M" */
    padding-right: var(--space-md); /* Standard right padding */
    /* Container query support */
    container-type: inline-size;
    container-name: body-container;
    /* Grid line alignment: matches header "M" vertical alignment */
}

.modern-body__section {
    margin-block-end: var(--space-4xl);
    /* Scroll utilities for anchor links */
    scroll-margin-block-start: var(--space-lg);
    scroll-padding-block-start: var(--space-lg);
}

.modern-body__heading {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-block-end: var(--space-sm);
    color: var(--color-white);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
}

.modern-body__text {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    margin-block-end: var(--space-lg);
    color: var(--color-gray-light);
    max-width: 65ch;
}

.modern-body__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-block-start: var(--space-lg);
}

.modern-body__card {
    background-color: var(--surface-2);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius);
    padding: var(--space-xl);
    transition: border-color var(--transition-fast);
}

.modern-body__card:hover {
    border-color: var(--border-hairline);
}

.modern-body__card-title {
    font-size: var(--font-size-xl);
    margin-block-end: var(--space-md);
    color: var(--color-white);
}

.modern-body__card-text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-gray);
    margin: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.modern-footer {
    background-color: var(--surface-1);
    border-block-start: 1px solid var(--border-hairline);
    padding-block: var(--space-xl);
    padding-block-end: calc(var(--space-xl) + var(--safe-area-inset-bottom));
    margin-block-start: auto;
}

.modern-footer__container {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-left: var(--gutter-width); /* Align to grid line from "M" */
    padding-right: var(--space-md); /* Standard right padding */
    /* Container query support */
    container-type: inline-size;
    container-name: footer-container;
    /* Grid line alignment: matches header "M" vertical alignment */
}

.modern-footer__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
}

.modern-footer__text {
    font-size: var(--font-size-sm);
    color: var(--color-gray);
    margin: 0;
}

.modern-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    align-items: center;
    /* Wraps naturally - no truncation, no horizontal scroll */
}

.modern-footer__link {
    font-size: var(--font-size-sm);
    color: var(--color-gray);
    transition: color var(--transition-base);
    white-space: nowrap;
    /* Links don't break, but container wraps items */
}

.modern-footer__link:hover {
    color: var(--color-white);
}

/* ==========================================================================
   Responsive Design - Mobile First
   ========================================================================== */

/* Small devices (landscape phones, 640px and up) */
@media (min-width: 640px) {
    .modern-header__left {
        flex-direction: row;
        align-items: center;
        gap: var(--space-xl);
    }
    
    .modern-header__nav {
        gap: var(--space-xl);
    }
    
    .modern-footer__content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .modern-body__grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .modern-body__container,
    .modern-project-header__container,
    .modern-footer__container {
        padding-left: var(--gutter-width); /* Maintain gutter alignment for content */
        padding-right: var(--space-xl);
    }

    .modern-header__container {
        padding-inline: var(--space-xl); /* Header stays compact — 32px each side */
    }
    
    .modern-body {
        padding: var(--space-lg) 0;
    }
    
    .modern-body__grid {
        gap: var(--space-xl);
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
    
    .modern-body__card {
        padding: var(--space-2xl);
    }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    .modern-body__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .modern-header__title {
        font-size: var(--font-size-base);
    }
}

/* Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
    .modern-body__text {
        font-size: var(--font-size-xl);
    }
    
    .modern-body__grid {
        gap: var(--space-2xl);
    }
}

/* Ultra-wide devices (1920px and up) */
@media (min-width: 1920px) {
    .modern-body__container,
    .modern-project-header__container,
    .modern-footer__container {
        max-width: var(--container-xl);
        margin-inline: auto;
        padding-left: var(--gutter-width);
        padding-right: max(var(--space-2xl), calc((100vw - var(--container-xl)) / 2 - var(--space-4xl)));
    }
    
    .modern-body__grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: var(--space-3xl);
    }
    
    .modern-body__card {
        padding: var(--space-3xl);
    }
    
    /* Enhanced typography for ultra-wide readability */
    .modern-body__text {
        max-width: 75ch;
    }
}

/* Extra ultra-wide devices (2560px and up) */
@media (min-width: 2560px) {
    .modern-body__container,
    .modern-project-header__container,
    .modern-footer__container {
        padding-left: var(--gutter-width);
        padding-right: max(var(--space-3xl), calc((100vw - var(--container-xl)) / 2 - var(--space-5xl)));
    }
    
    .modern-body__text {
        max-width: 80ch;
    }
}

/* ==========================================================================
   Accessibility & Enhanced Features
   ========================================================================== */

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --color-black: #000000;
        --color-white: #ffffff;
        --color-gray: #cccccc;
    }
    
    .modern-header,
    .modern-footer {
        border-width: 2px;
    }
    
    .modern-body__card {
        border-width: 2px;
    }
}

/* Dark mode preference (already dark, but ensure consistency) */
@media (prefers-color-scheme: dark) {
    :root {
        --color-black: #000000;
        --color-white: #ffffff;
    }
}

/* ==========================================================================
   Print Styles (Enhanced)
   ========================================================================== */

@media print {
    @page {
        margin: 2cm;
        size: A4;
    }
    
    body {
        background-color: white;
        color: black;
        font-size: 12pt;
        line-height: 1.6;
    }
    
    .modern-header,
    .modern-footer {
        border: none;
        background-color: white;
        position: static;
        page-break-after: avoid;
    }
    
    .modern-body {
        padding-block: 0;
    }
    
    .modern-body__card {
        border: 1px solid #ccc;
        page-break-inside: avoid;
        break-inside: avoid;
        margin-block-end: 1rem;
        box-shadow: none;
    }
    
    .modern-body__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
    
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.9em;
        color: #666;
    }
    
    /* Hide navigation in print */
    .modern-header__nav,
    .modern-footer__nav {
        display: none;
    }
}

/* ==========================================================================
   Smooth Scrolling Enhancements
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
    
    .modern-body {
        scroll-padding-block-start: var(--space-lg);
    }
}

/* ==========================================================================
   Focus Visible States (Enhanced 2025)
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
    /* Enhanced focus ring for better visibility */
    outline-width: 3px;
    outline-style: solid;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 1px var(--color-black), 0 0 0 4px var(--color-accent);
}

/* Enhanced focus for interactive elements using :has() */
.modern-body__card:has(:focus-visible) {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent), var(--shadow-lg);
}

/* Focus management for keyboard navigation */
:focus-visible:not(:has(:focus-visible)) {
    scroll-margin-block: var(--space-lg);
}

/* ==========================================================================
   Utility Classes (Extended 2025)
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Aspect Ratio Utilities */
.aspect-square {
    aspect-ratio: var(--aspect-square);
}

.aspect-video {
    aspect-ratio: var(--aspect-video);
}

.aspect-ultrawide {
    aspect-ratio: var(--aspect-ultrawide);
}

.aspect-portrait {
    aspect-ratio: var(--aspect-portrait);
}

.aspect-landscape {
    aspect-ratio: var(--aspect-landscape);
}

/* Line Height Utilities */
.leading-tight {
    line-height: var(--line-height-tight);
}

.leading-normal {
    line-height: var(--line-height-normal);
}

.leading-relaxed {
    line-height: var(--line-height-relaxed);
}

/* Scroll Utilities */
.scroll-smooth {
    scroll-behavior: smooth;
}

.scroll-auto {
    scroll-behavior: auto;
}

/* Content Visibility for Performance */
.content-auto {
    content-visibility: auto;
}

.content-hidden {
    content-visibility: hidden;
}

.content-visible {
    content-visibility: visible;
}

/* Logical Properties Utilities */
.p-inline-start {
    padding-inline-start: var(--space-md);
}

.p-inline-end {
    padding-inline-end: var(--space-md);
}

.p-block-start {
    padding-block-start: var(--space-md);
}

.p-block-end {
    padding-block-end: var(--space-md);
}

.m-inline-start {
    margin-inline-start: var(--space-md);
}

.m-inline-end {
    margin-inline-end: var(--space-md);
}

.m-block-start {
    margin-block-start: var(--space-md);
}

.m-block-end {
    margin-block-end: var(--space-md);
}

/* :has() Selector Utilities */
.has-focus:has(:focus-visible) {
    outline: 2px solid var(--color-accent);
}

.has-hover:has(:hover) {
    transform: translateY(-2px);
}

.has-children:has(> *) {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ==========================================================================
   Mobile Touch Optimizations
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
    .modern-header__link,
    .modern-footer__link {
        min-height: 44px; /* iOS touch target size */
        display: inline-flex;
        align-items: center;
        padding: var(--space-sm) var(--space-md);
    }
    
    .modern-body__card {
        padding: var(--space-lg);
    }
}

/* ==========================================================================
   Container Queries (2025 Standard)
   ========================================================================== */

/* Header container queries */
@container header-container (min-width: 640px) {
    .modern-header__content {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Body container queries */
@container body-container (min-width: 640px) {
    .modern-body__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container body-container (min-width: 1024px) {
    .modern-body__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Footer container queries */
@container footer-container (min-width: 640px) {
    .modern-footer__content {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Fallback for browsers without container query support */
@supports not (container-type: inline-size) {
    .modern-header__container,
    .modern-body__container,
    .modern-footer__container {
        container-type: normal;
    }
}

/* ==========================================================================
   Performance Optimizations (2025)
   ========================================================================== */

/* Content visibility for off-screen content */
.modern-body__section:not(:target) {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* Optimized will-change usage */
.modern-body__card {
    will-change: transform;
    /* GPU acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Only activate will-change on hover/interaction */
}

.modern-body__card:hover,
.modern-body__card:focus-within {
    will-change: auto;
}

.modern-body__card:not(:hover):not(:focus-within) {
    will-change: auto;
}

.modern-header__link,
.modern-footer__link {
    will-change: color, background-color;
}

/* Subgrid Support */
@supports (grid-template-columns: subgrid) {
    .modern-body__grid {
        grid-template-columns: subgrid;
    }
}

/* Progressive Enhancement with @supports */
@supports (backdrop-filter: blur(10px)) {
    .modern-header {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

@supports not (backdrop-filter: blur(10px)) {
    .modern-header {
        background-color: var(--color-black);
    }
}

/* Container Query Support Detection */
@supports (container-type: inline-size) {
    .modern-header__container,
    .modern-body__container,
    .modern-footer__container {
        container-type: inline-size;
    }
}

/* Viewport Unit Support */
@supports (height: 100svh) {
    body {
        min-height: 100svh;
    }
}

@supports not (height: 100svh) {
    body {
        min-height: 100vh;
    }
}

/* :has() Selector Support */
@supports selector(:has(*)) {
    .modern-body__card:has(:focus-visible) {
        outline: 2px solid var(--color-accent);
    }
}

/* ==========================================================================
   Project Workflow Components (Step Navigation & Project Context)
   ========================================================================== */

/* Project Header Section - STRUCTURAL LEVEL (full-width) */
.modern-project-header {
    width: 100%;
    background-color: var(--surface-1);
    border-block-end: 1px solid var(--border-hairline);
    padding-block: var(--space-md);
    margin-block-end: var(--space-xl);
    position: static;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

/* Subtle shadow when sticky header is "stuck" (scrolled) */
@supports (selector(:has(*))) {
    body:not(:has(.modern-project-header:not([style*="top"]))) .modern-project-header {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
}

/* Fallback for browsers without :has() support */
.modern-project-header[data-stuck="true"] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.modern-project-header__container {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-left: var(--gutter-width); /* Align to grid line from "M" */
    padding-right: var(--space-md); /* Standard right padding */
    /* Inner container only for alignment - content can flow naturally */
    /* Grid line alignment: matches header "M" vertical alignment */
}

.modern-project-header__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
    /* Title and nav each get their own line, full width */
}

.modern-project-header__title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin: 0;
    padding: 0;
    color: var(--color-white);
    line-height: 1.2;
    width: 100%;
    cursor: default;
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    transition: opacity var(--transition-base);
    letter-spacing: -0.02em;
}

.modern-project-header__title:hover {
    opacity: 1;
}

.modern-project-header__title-text {
    flex: 0 0 auto;
    line-height: var(--line-height-tight);
    margin: 0;
    padding: 0;
    /* Main title text - takes only needed space */
    /* Perfect baseline alignment with other inline elements */
}

.modern-project-header__title--switchable {
    position: relative;
}

.modern-project-header__switch-icon {
    font-size: var(--font-size-lg); /* Bigger arrow */
    opacity: 0.7;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity var(--transition-base),
                color var(--transition-base);
    margin-inline-start: auto; /* Push to far right */
    margin-inline-end: 0;
    flex-shrink: 0;
    align-self: baseline; /* Align with baseline, not center - for precise alignment */
    display: inline-block;
    border-radius: 0; /* No rounded corners */
    line-height: 1; /* Tight line-height for precise positioning */
    vertical-align: baseline; /* Baseline alignment */
}

.modern-project-header__title:hover .modern-project-header__switch-icon {
    opacity: 1;
    color: var(--color-acid);
}

/* Tuck animation - subtle downward slide + slight scale */
.modern-project-header__title--open .modern-project-header__switch-icon {
    transform: translateY(2px) scale(0.95);
    color: var(--color-acid);
    opacity: 1;
}

/* Inline Metadata - Aligned with title baseline */
.modern-project-header__metadata-inline {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-sm);
    align-self: baseline; /* Start with baseline alignment */
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-gray);
    margin-inline-start: var(--space-sm); /* Small gap after title, keeps it close */
    margin-block-start: 0;
    flex-shrink: 0;
    opacity: 0.85;
    line-height: 1.2;
}

/* User Name - Below date, inline within metadata */
.modern-project-header__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-gray); /* Match date color */
    line-height: 1.1;
    margin-block-end: 0;
}

.modern-project-header__date {
    line-height: 1.1;
    display: inline;
}

.modern-project-header__status-indicator {
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    flex-shrink: 0;
}

/* In Progress - Subtle yellow/green */
.modern-project-header__status--in_progress .modern-project-header__status-indicator {
    background-color: var(--color-acid);
    opacity: 0.8;
}

/* Complete - Subtle green */
.modern-project-header__status--complete .modern-project-header__status-indicator {
    background-color: #4ade80; /* Subtle green */
    opacity: 0.8;
}

.modern-project-header__user-name {
    display: inline;
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-gray);
    opacity: 0.75;
    line-height: 1.1;
    margin-inline-start: var(--space-xs);
}

/* Project Metadata - Hierarchical scale below title */
.modern-project-metadata {
    font-size: var(--font-size-sm);
    color: var(--color-gray);
    margin-block-start: var(--space-xs);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.modern-project-metadata__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.modern-project-metadata__label {
    color: var(--color-gray-dark);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
}

.modern-project-metadata__value {
    color: var(--color-gray);
}

/* Step Navigation - Full width, fills available space, wraps responsively */
.modern-project-nav {
    width: 100%;
    margin: 0;
    padding: 0;
    /* Full width of container - fills entire available width */
    /* Perfect left alignment with title and chips above */
}

.modern-project-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border-block-end: 1px solid var(--border-hairline);
    width: 100%;
}

.modern-project-nav__item {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    min-width: 0;
}

.modern-project-nav__link {
    display: block;
    padding: var(--space-sm) var(--space-md);
    color: var(--color-gray);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-sm);
    letter-spacing: 0;
    border-block-end: 2px solid transparent;
    transition: color var(--transition-base), border-color var(--transition-base);
    white-space: nowrap;
    text-align: left;
}

.modern-project-nav__link:hover {
    color: var(--color-white);
    background-color: transparent;
}

.modern-project-nav__item--active .modern-project-nav__link {
    color: var(--color-white);
    border-block-end-color: var(--color-acid);
    font-weight: 600;
    animation: activeStepUnderline 250ms ease-out 200ms backwards;
}

.modern-project-nav__item--active .modern-project-nav__link:hover {
    background-color: transparent;
}

.modern-project-nav__item--disabled .modern-project-nav__link {
    color: var(--color-gray-dark);
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: none;
}

.modern-project-nav__link--disabled {
    user-select: none;
}

/* Step completion indicator */
.modern-project-nav__item--completed::after {
    content: ' ✓';
    color: var(--color-gray-light);
    font-size: var(--font-size-xs);
    opacity: 0;
    animation: checkmarkAppear 300ms ease-out forwards;
}

/* Active step underline animation (5D-i) */
@keyframes activeStepUnderline {
    from {
        border-block-end-width: 0;
        border-block-end-color: transparent;
    }
    to {
        border-block-end-width: 2px;
        border-block-end-color: var(--color-acid);
    }
}

/* Gentle celebration animation (5D-iii) */
@keyframes gentleCelebration {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.modern-project-nav__item--completed.animate-completion .modern-project-nav__link {
    animation: gentleCelebration 400ms ease-out;
}

/* Checkmark appear animation */
@keyframes checkmarkAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Project Switcher - Compact Chip Bar (Option 4) */
.modern-project-switcher {
    position: relative;
    width: 100%;
}

/* Chip Bar Row - Expands beneath title */
.modern-project-switcher-row {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                margin-block-start 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.2s ease-out;
    opacity: 0;
    margin-block-start: 0;
    padding-inline: 0; /* Remove any padding to align with title */
    margin-inline: 0;
}

.modern-project-switcher--open .modern-project-switcher-row {
    max-height: 80px;
    opacity: 1;
    margin-block-start: var(--space-md);
}

/* Chip Container - Horizontal flex layout, aligned with title */
.modern-project-switcher-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm); /* Slightly larger gap for geometric clarity */
    align-items: baseline; /* Baseline alignment for typographic precision */
    margin: 0;
    padding: 0;
    /* Perfect left alignment with title above */
    /* Visual stability through precise geometry */
}

/* Individual Chips - Basically white with black text, green on hover */
.modern-project-switcher-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px; /* Increased top/bottom padding for embedded feel */
    min-height: auto; /* Natural height from padding */
    background-color: rgba(255, 255, 255, 0.95); /* Basically white background */
    border: none; /* No borders */
    border-radius: 0; /* Sharp corners - precise geometry */
    color: var(--color-black); /* Black text */
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500; /* Normal weight */
    letter-spacing: 0;
    white-space: nowrap;
    transition: background-color var(--transition-base),
                color var(--transition-base),
                opacity 0.3s ease-out;
    cursor: pointer;
    min-width: fit-content;
    opacity: 0;
    transform: translateY(-4px);
    animation: chipFadeIn 0.3s ease-out forwards;
    position: relative;
    vertical-align: baseline; /* Perfect vertical alignment */
    line-height: 1.4; /* Comfortable line-height for embedded feel */
}

/* Staggered fade-in for chips */
.modern-project-switcher-chip:nth-child(1) {
    animation-delay: 0.05s;
}

.modern-project-switcher-chip:nth-child(2) {
    animation-delay: 0.1s;
}

.modern-project-switcher-chip:nth-child(3) {
    animation-delay: 0.15s;
}

.modern-project-switcher-chip:nth-child(4) {
    animation-delay: 0.2s;
}

.modern-project-switcher-chip:nth-child(5) {
    animation-delay: 0.25s;
}

.modern-project-switcher--open .modern-project-switcher-chip {
    opacity: 1;
    transform: translateY(0);
}

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

.modern-project-switcher-chip:hover {
    background-color: var(--color-acid);
    color: var(--color-black); /* Keep black text for readability */
    transform: translateY(0); /* No scale - no enlargement */
}

.modern-project-switcher-chip:active {
    background-color: var(--color-acid);
    color: var(--color-black); /* Keep black text */
    transform: translateY(0); /* No scale - maintain stability */
}

/* View All Chip - Subtly different but related */
.modern-project-switcher-chip--view-all {
    background-color: rgba(255, 255, 255, 0.85); /* Slightly less opaque than regular chips - subtly different */
    color: var(--color-gray-dark); /* Darker gray text - subtly different */
    font-weight: 500; /* Same weight */
}

.modern-project-switcher-chip--view-all:hover {
    background-color: var(--color-acid);
    color: var(--color-black); /* Black text for readability */
    transform: translateY(0); /* No scale */
}

/* Title Click Hint - Enhanced visibility */
.modern-project-header__title--switchable:hover {
    opacity: 0.85;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.modern-project-header__title--switchable:hover .modern-project-header__switch-icon {
    transform: scale(1.1);
    opacity: 1;
}

.modern-project-header__title--open .modern-project-header__switch-icon {
    transform: rotate(180deg) scale(1.1);
}

/* Content Wrapper */
.modern-content-wrapper {
    width: 100%;
    /* Default: contained layout for readability */
    max-width: var(--container-xl);
    margin-inline: auto;
}

/* Layout Modes for Content Wrapper */
.modern-content-wrapper--full-width {
    max-width: none;
    padding-inline: var(--space-md);
}

.modern-content-wrapper--dashboard {
    max-width: none;
    padding-inline: var(--space-md);
}

@media (min-width: 768px) {
    .modern-content-wrapper--full-width,
    .modern-content-wrapper--dashboard {
        padding-inline: var(--space-xl);
    }
}

@media (min-width: 1920px) {
    .modern-content-wrapper--dashboard {
        padding-inline: max(var(--space-2xl), calc((100vw - var(--container-xl)) / 2 - var(--space-4xl)));
    }
}

/* Content Styles - Compatibility with existing pages */
/* These styles adapt existing page classes to modern-black theme */

/* Page Intro Pattern - Replaces redundant headings */
.modern-page-intro {
    margin-block-end: var(--space-lg);
    padding-block-end: var(--space-xl);
    border-block-end: 1px solid var(--border-hairline);
}

.page-intro {
    font-size: var(--font-size-base);
    color: var(--color-gray);
    max-width: 70ch;
    margin: 0 0 var(--space-xl);
    line-height: var(--line-height-relaxed);
}

.modern-page-intro__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

/* Flash/notice messaging */
.notice {
    margin-block-end: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    background: var(--surface-2);
}

.notice p {
    margin: 0;
    color: var(--color-white);
}

.notice.success {
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(74, 222, 128, 0.12);
}

.notice.error {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.12);
}

/* Dashboard Layout Patterns */
.dashboard-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    width: 100%;
}

@media (min-width: 768px) {
    .dashboard-layout {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xl);
    }
}

@media (min-width: 1024px) {
    .dashboard-layout {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2xl);
    }
}

.dashboard-layout--2col {
    grid-template-columns: 1fr;
}

.dashboard-layout--single {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .dashboard-layout--2col {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dashboard-layout--full {
    grid-template-columns: 1fr;
}

/* Dashboard Widget/Card Patterns */
.dashboard-widget {
    background-color: var(--surface-2);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius);
    padding: var(--space-xl);
    transition: border-color var(--transition-base);
}

.dashboard-widget:hover {
    border-color: var(--border-hairline);
}

.dashboard-widget__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-block-end: var(--space-lg);
    color: var(--color-gray);
}

.dashboard-widget__content {
    color: var(--color-gray-light);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.metric-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius);
    background: transparent;
}

.metric-card__label {
    color: var(--color-gray-dark);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.metric-card__value {
    color: var(--color-white);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
}

.page-meta {
    color: var(--color-gray);
    margin: 0;
}

.empty-state {
    padding: var(--space-lg) 0 var(--space-sm);
}

.empty-state p {
    margin: 0;
    color: var(--color-gray);
    font-size: var(--font-size-sm);
}

.readiness-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-sm);
}

.readiness-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-gray-light);
}

.readiness-list__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-gray-dark);
    flex-shrink: 0;
}

.readiness-list__item.is-ready .readiness-list__dot {
    background: var(--color-success);
}

.readiness-list__item.is-pending .readiness-list__dot {
    background: var(--color-warning);
}

.card {
    background-color: var(--surface-2);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius);
    padding: var(--space-xl);
    margin-block-end: var(--space-lg);
    box-shadow: none;
    transition: border-color var(--transition-base);
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.modern-body__card-meta {
    display: inline-block;
    color: var(--color-gray);
    font-size: var(--font-size-sm);
}

.project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-sm);
}

.project-actions .button {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
}

/* Ratings page: flat architectural card */
.ratings-card {
    border-radius: 0;
    border: none;
    padding: 0; /* Remove all padding - progress bar spans full width */
    overflow: visible; /* Ensure no overflow constraint breaks sticky positioning */
}

/* Add padding back to content inside ratings card - more generous spacing */
.ratings-card > *:not(.ratings-progress-line) {
    padding-inline: var(--space-2xl); /* 48px - more generous horizontal breathing room */
}

/* First content element after progress line gets top padding */
.ratings-card > .ratings-progress-line + * {
    padding-block-start: var(--space-lg); /* 24px - aligned to grid rhythm */
}

/* Last content element gets bottom padding */
.ratings-card > *:last-child:not(.ratings-progress-line) {
    padding-block-end: var(--space-2xl); /* 48px - substantial bottom space */
}

.ratings-card > .ratings-progress-line {
    /* Progress bar spans full width, no padding */
    margin-inline: 0;
}

.card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.card h3 {
    font-size: var(--font-size-xl);
    margin-block-end: var(--space-md);
    color: var(--color-white);
}

.card p {
    color: var(--color-gray-light);
    margin-block-end: var(--space-md);
}

.card p:last-child {
    margin-block-end: 0;
}

/* Form Elements - Compatibility with existing pages */
.form-group {
    margin-block-end: var(--space-lg);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
}

.form-group__hint {
    margin-block-start: var(--space-xs);
    margin-block-end: 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray);
}

.form-group label {
    display: block;
    margin-block-end: var(--space-sm);
    font-weight: 600;
    color: var(--color-white);
    font-size: var(--font-size-base);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="file"],
.form-group textarea,
.form-group select,
.bipolar-form__pole input[type="text"] {
    width: 100%;
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background-color: var(--surface-3);
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-family: var(--font-sans);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="file"]:focus,
.form-group textarea:focus,
.form-group select:focus,
.bipolar-form__pole input[type="text"]:focus {
    outline: none;
    border-color: var(--border-strong);
    background-color: var(--surface-3);
}

.form-group input[type="file"] {
    cursor: pointer;
    line-height: 1.3;
}

.form-group input[type="file"]::file-selector-button {
    margin-inline-end: var(--space-md);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    background: var(--color-black-lighter);
    color: var(--color-white);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--transition-base), background-color var(--transition-base);
}

.form-group input[type="file"]::file-selector-button:hover {
    border-color: rgba(255, 255, 255, 0.38);
    background: var(--color-black);
}

.form-group input[type="file"]::-webkit-file-upload-button {
    margin-inline-end: var(--space-md);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    background: var(--color-black-lighter);
    color: var(--color-white);
    font: inherit;
    cursor: pointer;
}

.muted {
    color: var(--color-gray);
}

.modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 300;
    padding: var(--space-lg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal {
    width: min(520px, 100%);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.modal h2 {
    font-size: var(--font-size-lg);
    margin-block-end: var(--space-xl);
}

/* Buttons */
.button {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background-color: transparent;
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-family: var(--font-sans);
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.button:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: var(--border-strong);
}

.button.primary {
    background-color: var(--color-acid) !important;
    color: var(--color-black) !important;
    border-color: var(--color-acid) !important;
    font-weight: 700;
    letter-spacing: 0;
}

.button.primary:hover {
    background-color: var(--color-acid-hover) !important;
    border-color: var(--color-acid-hover) !important;
    box-shadow: 0 4px 16px rgba(168, 191, 42, 0.25);
}

button.button.primary,
input[type="submit"].button.primary {
    background-color: var(--color-acid) !important;
    color: var(--color-black) !important;
    border-color: var(--color-acid) !important;
    font-weight: 700;
}

.button.secondary {
    color: var(--color-gray-light);
    border-color: var(--border-hairline);
}

.button.secondary:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--border-subtle);
}

.button:active {
    opacity: 0.85;
}

/* =========================================================
   UPLOAD CARD — assets page
   ========================================================= */

.page-intro-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-block-end: var(--space-xl);
}

.asset-progress-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-gray);
    letter-spacing: 0.04em;
    background-color: var(--surface-1);
    white-space: nowrap;
    margin-block-start: calc(var(--space-lg) + 2px);
}

.asset-progress-badge--good {
    color: var(--color-success);
    border-color: rgba(74, 222, 128, 0.25);
}

.upload-card {
    background-color: var(--surface-1);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-block-end: var(--space-2xl);
}

.upload-card__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}

@media (max-width: 640px) {
    .upload-card__layout {
        grid-template-columns: 1fr;
    }
}

.upload-card__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.upload-card__fields .button {
    align-self: flex-start;
}

/* Drop zone */
.drop-zone {
    position: relative;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    background-color: var(--surface-2);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.drop-zone:hover,
.drop-zone.drag-over {
    border-color: var(--color-acid);
    background-color: rgba(168, 191, 42, 0.04);
}

.drop-zone.drag-over {
    border-style: solid;
}

.file-input-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.drop-zone__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xl);
    pointer-events: none;
    text-align: center;
}

.drop-zone__icon {
    font-size: 1.75rem;
    opacity: 0.3;
    line-height: 1;
    margin-block-end: var(--space-xs);
}

.drop-zone__text {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-light);
    margin: 0;
}

.drop-zone__sub {
    font-size: var(--font-size-xs);
    color: var(--color-gray);
    margin: 0;
}

.drop-zone__formats {
    font-size: var(--font-size-xs);
    color: var(--color-gray-dark);
    margin: var(--space-sm) 0 0;
    letter-spacing: 0.05em;
}

.drop-zone__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

/* Asset section — list of uploaded assets */
.asset-section {
    margin-block-start: var(--space-2xl);
}

.asset-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block-end: var(--space-md);
    border-bottom: 1px solid var(--border-hairline);
}

.asset-section__count {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.asset-section__hint {
    font-size: var(--font-size-sm);
    color: var(--color-gray);
}

/* Asset Grid - For assets page */
.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-block-start: var(--space-lg);
}

.asset-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--surface-2);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius);
    transition: border-color var(--transition-fast);
}

.asset-item:hover {
    border-color: var(--border-subtle);
}

.asset-item img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    object-fit: cover;
    max-height: 200px;
}

.asset-item p {
    margin: 0;
    color: var(--color-gray-light);
    font-size: var(--font-size-sm);
    text-align: center;
}

.asset-item__manage {
    width: 100%;
    border-top: 1px solid var(--border-hairline);
    padding-top: var(--space-sm);
}

.asset-item__manage > summary {
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: var(--color-gray);
    list-style: none;
}

.asset-item__manage > summary::-webkit-details-marker {
    display: none;
}

.asset-item__manage > summary:hover {
    color: var(--color-white);
}

.asset-item__rename-form,
.asset-item__delete-form {
    display: grid;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.asset-item__rename-form label {
    font-size: var(--font-size-xs);
    color: var(--color-gray);
}

.asset-item__rename-form input[type="text"] {
    width: 100%;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius);
    background: var(--surface-1);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    padding: 8px var(--space-sm);
}

.asset-item__rename-form .button,
.asset-item__delete-form .button {
    justify-self: flex-start;
    font-size: var(--font-size-xs);
    padding: 5px var(--space-sm);
}

.asset-item__delete-btn {
    color: var(--color-error);
    border-color: rgba(255, 64, 80, 0.35);
}

.asset-item__delete-btn:hover {
    background-color: rgba(255, 64, 80, 0.08);
    border-color: rgba(255, 64, 80, 0.55);
}

/* =========================================================
   TRIADS PAGE
   ========================================================= */

.triad-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    margin-block-end: var(--space-xl);
}

.triad-card__question {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-white);
}

.triad-card__header-right {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    flex-shrink: 0;
}

.triad-card__meta {
    font-size: var(--font-size-xs);
    color: var(--color-gray);
    white-space: nowrap;
}

.triad-refresh-link {
    font-size: var(--font-size-xs);
    color: var(--color-gray);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.triad-refresh-link:hover {
    color: var(--color-white);
}

/* Triad Grid */
.triad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

@media (max-width: 640px) {
    .triad-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}

.triad-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: var(--space-md);
    padding: var(--space-md);
    background-color: var(--surface-2);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius);
    transition: border-color var(--transition-fast);
    cursor: pointer;
}

.triad-item:hover {
    border-color: var(--border-subtle);
}

.triad-item.selected {
    border-color: var(--color-acid);
    background-color: rgba(168, 191, 42, 0.06);
}

.triad-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: var(--radius);
    background-color: var(--surface-3);
}

.triad-item p {
    margin: 0;
    color: var(--color-gray-light);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-align: center;
}

/* Pair selection hint — inside triad card (AI mode) */
.triad-pair-hint {
    font-size: var(--font-size-xs);
    color: var(--color-gray);
    text-align: center;
    margin-block-start: var(--space-md);
    margin-block-end: 0;
}

.triad-selection-brief {
    margin-block-start: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid rgba(168, 191, 42, 0.35);
    border-radius: var(--radius);
    background-color: rgba(168, 191, 42, 0.06);
    font-size: var(--font-size-xs);
    color: var(--color-gray-light);
    text-align: center;
}

.triad-form-intro {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--font-size-xs);
    color: var(--color-gray);
}

/* Clickable triad images in AI mode */
.triad-card--selectable .triad-item {
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.triad-card--selectable .triad-item:hover {
    border-color: var(--border-subtle);
    transform: translateY(-1px);
}

/* Dim the unselected (odd) image when a pair is chosen */
.triad-card--pair-chosen .triad-item:not(.selected) {
    opacity: 0.35;
}

.triad-item.contrast::after {
    content: "Contrast";
    position: absolute;
    inset-inline-start: 8px;
    inset-block-start: 8px;
    font-size: 10px;
    line-height: 1;
    color: var(--color-white);
    background: rgba(20, 20, 20, 0.78);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 3px 6px;
}

.triad-item.selected {
    border-color: var(--color-acid);
    border-width: 2px;
    background-color: rgba(168, 191, 42, 0.05);
    box-shadow: 0 0 0 2px rgba(168, 191, 42, 0.18);
}

.triad-item.selected::before {
    content: attr(data-selected-order);
    position: absolute;
    inset-inline-end: 8px;
    inset-block-start: 8px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--color-acid);
    color: #121212;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.6);
}

/* AI panel — lives inside the construct card, shown on demand */
.ai-panel {
    margin-block-end: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-2);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius);
}

.ai-panel__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-sm);
}

.ai-panel__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-white);
}

.ai-panel__count {
    font-size: var(--font-size-xs);
    color: var(--color-gray);
    margin-inline-end: auto;
}

.ai-panel__controls {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-inline-start: auto;
}

.ai-panel__close {
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-gray);
    font-size: var(--font-size-sm);
    cursor: pointer;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.ai-panel__close:hover {
    color: var(--color-white);
    background-color: var(--surface-3);
}

.ai-status {
    min-height: 1.25em;
    margin-block-end: var(--space-sm);
    font-size: var(--font-size-xs);
    color: var(--color-gray);
}

/* Loading dots animation */
.loading-dots span {
    display: inline-block;
    opacity: 0;
    animation: dotFade 1.4s infinite both;
}
.loading-dots span:nth-child(2) { animation-delay: 0.25s; }
.loading-dots span:nth-child(3) { animation-delay: 0.5s; }

@keyframes dotFade {
    0%, 80%, 100% { opacity: 0; }
    40%           { opacity: 1; }
}

/* Star spin while loading */
.ai-panel--loading .ai-star {
    display: inline-block;
    animation: starSpin 2s linear infinite;
    transform-origin: center;
}

@keyframes starSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Bipolar skeleton — generating state */
.bipolar-skeleton-list {
    display: flex;
    flex-direction: column;
    padding-block: var(--space-sm);
}

.bipolar-skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-hairline);
}

.bipolar-skeleton-row:last-child {
    border-bottom: none;
}

.bipolar-skeleton-pole {
    flex: 1;
    height: 12px;
    border-radius: var(--radius-pill);
    background: linear-gradient(
        90deg,
        var(--surface-3) 0%,
        rgba(168, 191, 42, 0.12) 50%,
        var(--surface-3) 100%
    );
    background-size: 300% 100%;
    animation: poleSweep 2s ease-in-out infinite;
    animation-delay: var(--row-delay, 0s);
}

.bipolar-skeleton-pole--b {
    animation-direction: reverse;
}

.bipolar-skeleton-sep {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    color: var(--color-acid);
    opacity: 0.25;
    animation: sepPulse 2s ease-in-out infinite;
    animation-delay: var(--row-delay, 0s);
}

@keyframes poleSweep {
    0%   { background-position:  300% 0; }
    100% { background-position: -300% 0; }
}

@keyframes sepPulse {
    0%, 100% { opacity: 0.15; }
    50%       { opacity: 0.55; }
}

/* Compact suggestion rows — rendered by JS */
.suggestion-list {
    display: flex;
    flex-direction: column;
}

.suggestion-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-hairline);
}

.suggestion-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
}

.suggestion-row__fields {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.suggestion-row__input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius);
    background: var(--surface-1);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    padding: 8px var(--space-sm);
}

.suggestion-row__input:focus {
    outline: none;
    border-color: var(--color-acid);
    box-shadow: 0 0 0 2px rgba(168, 191, 42, 0.15);
}

.suggestion-row__sep {
    color: var(--color-gray-light);
    font-size: var(--font-size-md);
    user-select: none;
}

.suggestion-row__actions {
    display: flex;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.suggestion-row__actions .button {
    padding: 6px var(--space-sm);
    font-size: var(--font-size-xs);
    line-height: 1.5;
}

@media (max-width: 720px) {
    .suggestion-row {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    .suggestion-row__actions {
        justify-content: flex-end;
    }
}

.suggestion-row--active {
    border-left: 2px solid var(--color-acid);
    padding-left: var(--space-sm);
    background: rgba(168, 191, 42, 0.04);
}

/* AI trigger button — subtle distinction from plain secondary */
.ai-trigger-btn {
    color: var(--color-acid);
    border-color: rgba(168, 191, 42, 0.35);
}

.ai-trigger-btn:hover {
    background-color: rgba(168, 191, 42, 0.07);
    border-color: var(--color-acid);
}

/* Bipolar construct entry form */
.bipolar-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-xl);
    margin-block-end: var(--space-xl);
}

.bipolar-form__pole {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.bipolar-form__pole label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-light);
    font-weight: 500;
}

.bipolar-form__sep {
    flex-shrink: 0;
    font-size: var(--font-size-xl);
    color: var(--color-gray);
    padding-block-end: calc(var(--space-md) + 2px);
    line-height: 1;
    user-select: none;
}

@media (max-width: 480px) {
    .bipolar-form {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
    }
    .bipolar-form__sep {
        text-align: center;
        padding: 0;
    }
}

/* Styled Table - For constructs page */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin-block-start: var(--space-lg);
}

.styled-table th {
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-hairline);
    background-color: transparent;
    text-align: left;
}

.styled-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-hairline);
    color: var(--color-gray-light);
    background-color: transparent;
}

.styled-table tbody tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.02);
}

.styled-table tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--color-white);
}

.styled-table thead {
    border-bottom: 1px solid var(--border-subtle);
}

/* ─── Construct list & pair ──────────────────────────────────────── */
.construct-list-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block-end: var(--space-md);
    border-bottom: 1px solid var(--border-hairline);
}

.construct-list-header__count {
    font-size: var(--font-size-sm);
    color: var(--color-white);
    font-weight: 500;
}

.construct-list-header__warn {
    color: var(--color-warning);
    font-weight: 400;
}

.construct-list-header__add {
    font-size: var(--font-size-sm);
    color: var(--color-gray);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-base);
}

.construct-list-header__add:hover {
    color: var(--color-white);
}

.construct-batch {
    margin-top: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-hairline);
}

.construct-batch > summary {
    cursor: pointer;
    list-style: none;
    font-size: var(--font-size-sm);
    color: var(--color-gray);
}

.construct-batch > summary::-webkit-details-marker {
    display: none;
}

.construct-batch > summary:hover {
    color: var(--color-white);
}

.construct-batch__form {
    margin-top: var(--space-sm);
    display: grid;
    gap: var(--space-sm);
}

.construct-batch__label {
    font-size: var(--font-size-xs);
    color: var(--color-gray);
}

.construct-batch__label code {
    color: var(--color-gray-light);
}

.construct-batch__textarea {
    width: 100%;
    min-height: 110px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius);
    background: var(--surface-1);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    padding: 10px var(--space-sm);
    resize: vertical;
}

.construct-batch__textarea:focus {
    outline: none;
    border-color: var(--color-acid);
    box-shadow: 0 0 0 2px rgba(168, 191, 42, 0.15);
}

.construct-batch__actions {
    display: flex;
    justify-content: flex-start;
}

.construct-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.construct-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-hairline);
}

.construct-row:last-child {
    border-bottom: none;
}

.construct-row__num {
    font-size: var(--font-size-xs);
    color: var(--color-gray-dark);
    font-variant-numeric: tabular-nums;
    font-family: monospace;
    min-width: 1.5em;
    flex-shrink: 0;
    user-select: none;
}

/* ─── Construct pair atom (constructs list, AI cleanup, triads) ───── */
.construct-pair {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.construct-pair__pole {
    font-size: var(--font-size-sm);
    color: var(--color-gray-light);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.construct-pair__sep {
    color: var(--color-gray-dark);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
    user-select: none;
}

/* Acid variant — AI-suggested / improved construct pairs */
.construct-pair--acid .construct-pair__pole {
    color: var(--color-acid);
}

.construct-pair--acid .construct-pair__sep {
    color: rgba(168, 191, 42, 0.45);
}

/* ─── AI Cleanup panel (integrated into constructs card) ──────────── */
.cleanup-panel {
    margin-block-start: var(--space-lg);
    padding-block-start: var(--space-lg);
    border-top: 1px solid var(--border-hairline);
}

.cleanup-panel__bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.cleanup-panel__status {
    font-size: var(--font-size-sm);
    color: var(--color-gray);
    flex: 1;
}

.cleanup-results {
    margin-block-start: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cleanup-row {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: var(--space-md);
    display: grid;
    gap: var(--space-xs);
    transition: opacity var(--transition-base);
}

.cleanup-row--saved {
    opacity: 0.4;
    pointer-events: none;
}

.cleanup-row__source {
    opacity: 0.45;
}

.cleanup-row__arrow {
    font-size: var(--font-size-xs);
    color: var(--color-gray-dark);
    line-height: 1;
    padding-block: 2px;
}

.cleanup-row__reason {
    font-size: var(--font-size-xs);
    color: var(--color-gray);
    margin: var(--space-xs) 0 0;
    line-height: 1.5;
}

.cleanup-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-sm);
}

/* Ratings Grid - For ratings page */
.ratings-grid-container {
    overflow-x: auto;
    margin: var(--space-2xl) 0; /* 48px - more generous vertical margins */
}

.ratings-grid {
    border-collapse: separate;
    border-spacing: 0 var(--space-sm); /* Vertical spacing between rows */
    width: 100%;
    min-width: 800px;
}

.ratings-grid th,
.ratings-grid td {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--space-lg); /* 24px - increased from md for more cell breathing room */
    text-align: center;
}

.ratings-grid thead {
    /* Add spacing below header */
    margin-block-end: var(--space-md);
}

.ratings-grid th {
    background-color: var(--color-black-soft);
    color: var(--color-white);
    font-weight: 700;
    font-size: var(--font-size-sm);
    padding-block: var(--space-lg); /* 24px - more vertical padding in headers */
    vertical-align: middle; /* Align with cell content */
    text-align: center; /* Center align header text */
}

.ratings-grid .element-header {
    text-align: left;
    width: 200px;
    min-width: 200px;
    font-weight: 800;
    position: sticky;
    left: 0;
    background: var(--color-black-soft);
    z-index: 5;
    vertical-align: middle; /* Align with other headers */
    padding-inline: var(--space-lg); /* Match cell padding */
}

.ratings-grid .element-cell {
    text-align: left;
    display: flex;
    align-items: center; /* Vertically center thumbnail and text */
    gap: var(--space-md);
    position: sticky;
    left: 0;
    background: var(--color-black-lighter);
    z-index: 4;
    color: var(--color-white);
    vertical-align: middle; /* Table cell alignment */
    padding-inline: var(--space-lg); /* Match header padding */
    min-width: 200px;
}

.ratings-grid tbody tr:nth-child(even) .element-cell {
    background: var(--color-black-soft);
}

.ratings-grid tbody tr:hover .element-cell {
    background: rgba(255, 255, 255, 0.05);
}

.ratings-grid tbody tr.is-incomplete .element-cell {
    background: rgba(255, 255, 255, 0.08);
}

.ratings-grid .element-thumbnail {
    width: 40px;
    height: 40px;
    min-width: 40px;
    object-fit: cover;
    border-radius: 4px;
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.ratings-grid .element-thumbnail:hover {
    transform: scale(1.2);
    z-index: 100;
}

.ratings-grid tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.ratings-grid tbody tr.is-incomplete {
    background: rgba(255, 255, 255, 0.08);
}

.ratings-grid tbody td.is-incomplete {
    background: rgba(255, 255, 255, 0.1);
}

.ratings-grid tbody td:focus-within {
    background: rgba(255, 255, 255, 0.08);
}

.ratings-grid tbody td {
    background-color: var(--color-black-lighter);
    vertical-align: middle;
}

.ratings-grid tbody tr:nth-child(even) td {
    background-color: var(--color-black-soft);
}

.ratings-grid tbody tr:nth-child(even) td:not(.element-cell) {
    background-color: var(--color-black-soft);
}

.ratings-grid tbody tr:nth-child(even) td.is-incomplete {
    background-color: rgba(255, 255, 255, 0.12);
}

/* Construct Header - Sticky columns */
.ratings-grid thead th.construct-header {
    position: relative;
    transition: box-shadow var(--transition-base);
}

.ratings-grid thead th.construct-header.is-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-black-soft);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.construct-header__lock-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--transition-base);
    padding: 0;
}

.construct-header__lock-btn:hover {
    opacity: 1;
}

.construct-header__lock-btn svg {
    stroke: var(--color-gray);
    stroke-width: 1.5px;
    fill: none;
}

.construct-header.is-sticky .construct-header__lock-btn svg {
    stroke: var(--color-accent);
}

.construct-header .pole {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.4;
}

.construct-header .pole.left-pole {
    color: var(--color-gray-light);
}

.construct-header .pole.right-pole {
    color: var(--color-gray-light);
}

/* Segmented Seven - Rating pills */
.segmented-seven {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 32px;
    position: relative;
}

.segmented-seven__pill {
    flex: 1;
    min-width: 28px;
    height: 28px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: var(--color-black-soft);
    color: var(--color-gray-light);
    font-size: var(--font-size-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    position: relative;
}

.segmented-seven__pill:hover {
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

.segmented-seven__pill:focus {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.segmented-seven__pill.is-selected {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-black);
}

.segmented-seven__pill.is-neighbor {
    border-color: rgba(255, 255, 255, 0.3);
    background: transparent;
    opacity: 0.6;
}

.segmented-seven__pill.is-empty {
    opacity: 0.3;
}

.segmented-seven:hover .segmented-seven__slider-track {
    display: block;
}

.segmented-seven__slider-track {
    display: none;
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
}

.segmented-seven__slider-thumb {
    position: absolute;
    bottom: -10px;
    width: 12px;
    height: 12px;
    background: var(--color-accent);
    border-radius: 50%;
    transform: translateX(-50%);
    transition: left 0.1s ease;
    cursor: grab;
}

.segmented-seven__slider-thumb:active {
    cursor: grabbing;
}

.segmented-seven.is-dragging .segmented-seven__pill {
    transition: none;
}

.ratings-grid tbody td:focus-within .segmented-seven__pill.is-selected {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.segmented-seven.is-error .segmented-seven__pill {
    border-color: #e85d75;
}

.segmented-seven.is-error::after {
    content: 'Invalid';
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 10px;
    color: #e85d75;
    font-weight: 700;
}

/* Progress Tri Rail */
.progress-tri-rail {
    position: relative;
    width: 100%;
    height: 8px;
    background: var(--color-black-soft);
    border-radius: 4px;
    margin: var(--space-lg) 0;
    overflow: hidden;
}

.progress-tri-rail__coverage {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color-white);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-tri-rail__stability {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    background: var(--color-gray);
    opacity: 0.4;
    border-radius: 1px;
    transition: width 0.5s ease;
}

.progress-tri-rail__sufficiency {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: #4ade80;
    transform: rotate(45deg);
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.progress-tri-rail__sufficiency.is-active {
    opacity: 1;
}

.progress-tri-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-sm);
    font-size: var(--font-size-xs);
    color: var(--color-gray);
    font-variant-numeric: tabular-nums;
}

.progress-tri-stats strong {
    color: var(--color-white);
    font-weight: 700;
}

/* Draft Restore Banner */
.draft-restore-banner {
    background: rgba(255, 243, 205, 0.1);
    border: 2px solid rgba(255, 193, 7, 0.5);
    border-radius: 8px;
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.draft-restore-banner__message {
    font-size: var(--font-size-sm);
    color: var(--color-white);
    font-weight: 600;
}

.draft-restore-banner__actions {
    display: flex;
    gap: var(--space-sm);
}

.draft-restore-banner__btn {
    padding: 6px var(--space-md);
    border: 2px solid var(--color-white);
    border-radius: 6px;
    background: transparent;
    color: var(--color-white);
    font-weight: 700;
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-base);
}

.draft-restore-banner__btn:hover {
    background: var(--color-white);
    color: var(--color-black);
}

/* Ratings Footer */
.ratings-footer {
    margin-top: var(--space-lg);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.ratings-footer__test-btn {
    font-size: var(--font-size-xs);
    color: var(--color-gray-dark);
    border-color: var(--border-hairline);
    padding: 4px var(--space-sm);
}

.ratings-footer__test-btn:hover {
    color: var(--color-gray);
    border-color: var(--border-subtle);
    background: transparent;
}

/* ─── Ratings persistent action bar ─────────────────────────────── */
.ratings-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    margin-block-start: var(--space-lg);
    border-top: 1px solid var(--border-hairline);
    flex-wrap: wrap;
}

.ratings-action-bar__status {
    font-size: var(--font-size-sm);
    color: var(--color-gray);
    transition: color var(--transition-base);
}

.ratings-action-bar.is-ready .ratings-action-bar__status {
    color: var(--color-acid);
    font-weight: 500;
}

.ratings-action-bar__actions {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .ratings-action-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .ratings-action-bar__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ─── Analysis loading overlay ───────────────────────────────────── */
.analysis-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}

.analysis-loading-overlay[hidden] {
    display: none !important;
}

.analysis-loading-overlay__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.analysis-loading-overlay__star {
    font-size: 2.5rem;
    color: var(--color-acid);
    animation: starSpin 2s linear infinite;
    display: block;
    line-height: 1;
}

.analysis-loading-overlay__text {
    font-size: var(--font-size-md);
    color: var(--color-gray-light);
    margin: 0;
    letter-spacing: 0.02em;
}

.button.secondary {
    background-color: transparent;
    color: var(--color-gray-light);
    border-color: rgba(255, 255, 255, 0.2);
}

.button.secondary:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--color-white);
}

/* Ratings Page Header - Heading + Toggle */
.ratings-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-block-end: var(--space-lg);
    /* Ensure header aligns with card content - account for card's internal padding */
    padding-inline-end: var(--space-2xl); /* Match card content padding (48px) for perfect alignment */
}

/* Ratings View Toggle - Segmented Control */
.ratings-view-toggle {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-inline-end: 0; /* No margin - alignment handled by parent padding */
}

.view-toggle-segment {
    display: inline-flex;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, 0.18); /* Thin 1px outline as per plan */
    border-radius: 6px; /* 6px container radius as per plan */
    padding: 2px; /* 2px internal padding as per plan */
    background: transparent;
}

.segment-btn {
    padding: 6px 12px; /* Reduced padding to match nav links */
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65); /* 65% white for inactive as per plan */
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: 4px;
    transition: color var(--transition-fast), background-color var(--transition-fast);
    min-width: 60px;
    text-align: center;
    line-height: 1.4; /* Match focus-progress-nav link line height for vertical alignment */
    height: 32px; /* Match focus-progress-header min-height */
    display: inline-flex;
    align-items: center; /* Vertically center text */
    justify-content: center;
}

.segment-btn.is-active {
    color: #fff; /* White text for active as per plan */
    background: rgba(255, 255, 255, 0.08); /* 8% white fill for active as per plan */
}

.segment-btn:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.45);
    outline-offset: 2px;
}

.segment-btn:hover:not(.is-active) {
    color: rgba(255, 255, 255, 0.85);
}

/* Responsive header padding to match card content alignment */
@media (min-width: 768px) {
    .ratings-page-header {
        padding-inline-end: var(--space-2xl); /* Maintain 48px alignment on tablet+ */
    }
}

@media (min-width: 1920px) {
    .ratings-page-header {
        padding-inline-end: var(--space-2xl); /* Maintain 48px alignment on desktop */
    }
}

/* Mobile: stack header, full-width segmented control */
@media (max-width: 640px) {
    .ratings-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
        padding-inline-end: 0; /* Remove right padding on mobile - full width */
    }
    
    .ratings-view-toggle {
        width: 100%;
    }
    
    .view-toggle-segment {
        width: 100%;
        justify-content: space-between;
    }
    
    .segment-btn {
        flex: 1 1 0;
    }
}

/* Focus Mode Styles */
.ratings-focus-mode {
    width: 100%;
    overflow: visible; /* Ensure no overflow constraint breaks sticky positioning */
}

/* Ratings Progress Line - Top Edge */
.ratings-progress-line {
    position: relative;
    width: 100%;
    height: 7px; /* ~2/3 larger than 4px (6.67px rounded) - more substantial, satisfying */
    background-color: rgba(255, 255, 255, 0.12); /* Subtle track */
    margin-block-end: 0;
}

.ratings-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.28); /* Slightly brighter for better visibility on thicker bar */
    transition: width 0.6s cubic-bezier(0.4, 0.0, 0.2, 1); /* Smooth, satisfying ease-out curve */
    width: 0%;
    will-change: width; /* Optimize for smooth animation */
}

.focus-progress-header {
    display: flex;
    align-items: center; /* Vertically center all elements */
    justify-content: flex-end; /* Right-align navigation */
    gap: var(--space-md);
    padding-block-start: var(--space-lg); /* 24px - reduced from 48px */
    padding-block-end: var(--space-lg); /* 24px - reduced from 32px */
    padding-inline-end: 0; /* No right padding - align with toggle above */
    flex-wrap: wrap;
    min-height: 32px; /* Consistent height for alignment - match toggle height */
}

.overall-progress-text {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    font-variant-numeric: tabular-nums;
}

.save-status-chip {
    margin-inline-end: var(--space-md); /* Space before navigation */
    font-size: var(--font-size-xs);
    color: rgba(255,255,255,0.6);
    line-height: 1.4; /* Match navigation link line height for vertical alignment */
    display: inline-flex;
    align-items: center; /* Vertically center with navigation */
}

.focus-progress-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    /* No margin-inline-start: auto - header is right-aligned */
}

.focus-progress-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.35); /* Segmented outline */
    border-radius: 6px;
    background: rgba(255,255,255,0.06); /* Calm, visible */
    color: rgba(255,255,255,0.9);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform 120ms ease-out;
}

.focus-progress-nav__link:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.5);
}

.focus-progress-nav__link:disabled {
    color: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.04);
    cursor: default;
}

.focus-progress-nav__link:focus-visible {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 2px;
}

.focus-progress-nav__divider {
    color: rgba(255,255,255,0.25);
    font-size: var(--font-size-xs);
}

/* Progress dots removed - architectural flat design */

/* Focus Strip Layout */
.focus-strip {
    display: grid;
    grid-template-columns: var(--focus-image-col) minmax(0, 1fr);
    gap: var(--space-2xl); /* 48px - more generous gap between image and constructs */
    align-items: stretch; /* Allow full height for sticky to work */
    margin-block-start: var(--space-lg); /* Additional top space */
    /* Ensure both columns align at top */
    grid-template-rows: auto;
}

.focus-strip__image {
    position: -webkit-sticky;
    position: sticky;
    top: var(--space-lg); /* Natural spacing rhythm - matches project header padding, section spacing */
    z-index: 3; /* Above legend rail (z-index: 2) */
    align-self: start; /* Override grid alignment to maintain top alignment */
    display: flex;
    flex-direction: column;
    gap: var(--space-md); /* Increased from sm for better image-title spacing */
    width: var(--focus-image-size);
}

.focus-strip__thumbnail {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.12);
}

.focus-strip__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-white);
    margin: 0;
}

.focus-strip__constructs {
    overflow: visible; /* Critical - no overflow creates containing block that breaks sticky */
    min-height: 0; /* Allow grid to shrink - prevents height constraint */
    border-top: 0; /* Remove faint border above legend rail */
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding-block-start: 0; /* Align with image top - no extra padding */
    margin-block-start: 0; /* No margin offset */
    /* Ensure legend and instrument rails align perfectly - no extra padding/margin */
    padding-inline: 0; /* No horizontal padding - alignment handled by focus-strip */
}

/* Legend Rail (integrated guidance) */
.legend-rail {
    position: static; /* Not sticky - scrolls with content */
    padding-block: var(--space-lg); /* 24px - consistent vertical breathing room */
    padding-inline: 0; /* No horizontal padding - align with instrument rails */
    margin-block-end: var(--space-lg); /* Space before first focus-row to prevent overlap */
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr minmax(260px, 420px) 1fr; /* Match instrument rail grid exactly */
    align-items: center;
    column-gap: var(--space-xl); /* Match instrument rail gap exactly */
    /* No border - clean, minimal */
    background: transparent;
    /* Ensure perfect alignment with instrument rails below */
    width: 100%;
    box-sizing: border-box;
    /* Sticky positioning creates positioning context for absolutely positioned pseudo-elements (serifs) */
}

/* Bold serif system: chunky end caps + connected hairline + center notch */

.legend-rail--serif::before,
.legend-rail--serif::after {
    content: '';
    position: absolute;
    /* Position at center of rail's content area (aligns with track center via align-items: center) */
    top: 50%; /* Center vertically in rail's content box */
    width: 3px; /* Thicker, more visible - increased from 2px */
    height: 16px; /* Taller, more assertive - increased from 12px */
    background: rgba(255,255,255,1); /* Pure white - fully opaque */
    transform: translateY(-50%); /* Center vertically */
    z-index: 3; /* Above all other elements */
}

.legend-rail--serif::before {
    left: 0; /* Left serif at absolute start - full width */
}

.legend-rail--serif::after {
    right: 0; /* Right serif at absolute end - full width */
}
.legend-rail--demo { 
    position: static; /* For stacked demo display, avoid sticky overlap */
    border-block: none;
}
.legend-demo-label {
    font-size: var(--font-size-xs);
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-block: var(--space-sm);
}
.legend-cap {
    color: rgba(255,255,255,0.72);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.legend-cap--left::before { content: "←"; margin-right: 8px; opacity: .45; }
.legend-cap--right { justify-content: flex-end; text-align: right; }
.legend-cap--left { justify-content: flex-start; text-align: left; }
/* Move the right chevron before the text so the label's right edge aligns exactly with rail caps */
.legend-cap--right::after { content: none; }
.legend-cap--right::before { content: "→"; margin-right: 8px; opacity: .45; }
.legend-track { 
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Full width within grid column */
    grid-column: 2; /* Place in center column to align with instrument rails */
}

/* Bold, connected hairline - spans full width of legend rail, connects to serifs */
.legend-rail--serif .legend-track {
    grid-column: 1 / -1; /* Span all columns so hairline connects to serifs at edges */
    width: 100%;
    position: relative; /* For absolute positioning of hairline and notch */
    min-height: 24px; /* Increased for better visibility - from 20px */
    height: 24px; /* Explicit height - more breathing room */
    display: block; /* Ensure it's a block-level grid item */
}

.legend-rail--serif .legend-track .rail-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1.5px; /* Thicker hairline - increased from 1px */
    background: rgba(255,255,255,0.3); /* More visible - increased from 0.22 */
    transform: translateY(-50%);
    z-index: 1; /* Behind serifs and notch */
    width: 100%; /* Ensure full width */
}

/* Bold center notch - part of unified structure, centered in middle column to align with instrument rails */
.legend-rail--serif .legend-center-notch {
    position: absolute;
    top: 50%;
    left: 50%; /* Center of full width = center of middle column (side columns are equal 1fr) */
    width: 3px; /* Matches serif width - increased from 2px */
    height: 16px; /* Matches serif height - increased from 12px */
    background: rgba(255,255,255,0.8); /* More visible - increased from 0.6 */
    transform: translate(-50%, -50%);
    border-radius: 0; /* Sharp, confident - no softening */
    z-index: 2; /* Above hairline, below serifs */
}
.rail-line--gradient {
    background: linear-gradient(90deg, rgba(255,184,77,0.6) 0%, rgba(255,255,255,0.35) 50%, rgba(93,173,226,0.6) 100%);
    height: 2px; /* slightly stronger for gradient */
}
.legend-rail--gradient .legend-center-label {
    position: absolute;
    top: calc(50% + 8px);
    transform: translateY(0);
    font-size: var(--font-size-xs);
    color: rgba(255,255,255,0.65);
}
.legend-rail--minimal .legend-track .rail-line {
    background: rgba(255,255,255,0.16);
}
.legend-tip {
    display: block;
    font-size: var(--font-size-xs);
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.02em;
    margin-block: var(--space-sm);
}
.legend-track .rail-numerals { 
    display: flex; 
    justify-content: space-between; 
    margin-top: 8px; /* Match instrument rail numerals spacing exactly */
    opacity: 0.75; /* Increased from 0.6 - more visible as guide */
    font-variant-numeric: tabular-nums; 
    font-size: var(--font-size-xs); /* Match instrument rail font size */
    font-weight: 500; /* Slightly bolder for better visibility */
}

.focus-row {
    display: flex;
    flex-direction: column;
    min-height: 100px; /* Increased from 80px for more vertical space */
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding-block: var(--space-2xl); /* 48px - much more generous vertical padding */
    padding-inline: 0; /* No horizontal padding - align with legend rail */
    gap: var(--space-md); /* Increased from sm for better element separation */
    width: 100%;
    box-sizing: border-box;
}

.focus-row:last-of-type {
    border-bottom: none;
}

/* Instrument Rail - unified poles + track */
.instrument-rail { 
    display: grid; 
    grid-template-columns: 1fr minmax(260px, 420px) 1fr; 
    align-items: center; /* Vertically center caps with scale */
    column-gap: var(--space-xl); /* 32px - match legend rail exactly */
    width: 100%; /* Full width to align with legend rail */
    box-sizing: border-box;
}
.rail-cap { 
    color: var(--color-white);
    display: flex;
    align-items: center; /* Vertically center with scale line */
    line-height: 1.4; /* Consistent line height for alignment */
}
.rail-cap--left { 
    text-align: left;
    justify-content: flex-start;
}
.rail-cap--right { 
    text-align: right;
    justify-content: flex-end;
}
.rail-track {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 78px;
}
.rail-line { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 50%; 
    height: 1.5px; /* Match legend rail thickness */
    background: rgba(255,255,255,0.3); /* Match legend rail color for visual connection */
    transform: translateY(-50%); /* Precise centering */
}
.rail-ticks { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: absolute; /* Position absolutely to align with line */
    top: 50%; /* Center vertically - same as rail-line */
    left: 0;
    right: 0;
    height: 20px; /* Increased to accommodate larger ticks */
    width: 100%; /* Full width of track */
    transform: translateY(-50%); /* Center vertically - same as rail-line */
    z-index: 1; /* Above line */
}
.rail-tick { 
    width: 20px; /* Increased from 14px for better hit area */
    height: 20px; /* Increased from 14px for better hit area */
    border-radius: 50%; 
    border: none; /* Flat, borderless dots */
    background: var(--color-gray-dark); /* Flat, fully opaque solidity */
    cursor: pointer; 
    padding: 0; 
    transition: transform 150ms ease-out, background-color 200ms ease-out, border-color 150ms ease-out; 
    flex-shrink: 0; /* Prevent ticks from shrinking */
}
.rail-tick:hover { 
    transform: scale(1.4); /* Larger scale - more obvious */
    background-color: var(--color-gray-dark); /* Maintain flat opaque solidity on hover */
 }
.rail-tick:active {
    transform: scale(0.95); /* Press down effect */
    transition: transform 100ms ease-out;
}
.rail-tick.is-selected { 
    border-color: transparent; 
    transition: transform 200ms ease-out, background-color 300ms ease-out;
}
.rail-tick.is-selected:active {
    transform: scale(1.2); /* Slight bounce when clicking selected tick */
}
/* AI suggestion dot — solid cyan fill, clearly different from white user dots */
.rail-tick[data-ai="pending"] {
    background: rgba(93, 173, 226, 0.85) !important;
    border: none !important;
    box-shadow: none;
}
.rail-tick[data-ai="pending"]:hover {
    background: rgba(93, 173, 226, 1) !important;
    transform: scale(1.2);
}
/* Dismiss button — visible on every pending row, very quiet */
.focus-row__ai-hint {
    padding-left: 4px;
}
.ai-dismiss-btn {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border: none;
    background: transparent;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: rgba(140, 140, 140, 0.45);
    cursor: pointer;
    border-radius: 2px;
    transition: color 100ms ease, background 100ms ease;
    line-height: 1;
}
.ai-dismiss-btn:hover {
    color: rgba(200, 200, 200, 0.75);
    background: rgba(255, 255, 255, 0.05);
}
.rail-numerals { 
    display: flex; 
    justify-content: space-between; 
    position: absolute; /* Position absolutely to sit above line/ticks */
    top: calc(50% - 46px); /* Increased spacing between numbers and circles */
    left: 0;
    right: 0;
    opacity: 1; /* Use per-number opacity via color alpha */ 
    font-variant-numeric: tabular-nums; 
    font-size: var(--font-size-sm); /* Slightly larger for legibility */
    letter-spacing: 0.1em; /* A touch more spacing to avoid tight feel */
    -webkit-font-smoothing: antialiased; /* Crisper rendering */
    width: 100%; /* Full width to match ticks */
    padding-inline: 0; /* No extra padding - align with ticks */
    z-index: 0; /* Below ticks, above line */
    pointer-events: none; /* Prevent hover stealing from ticks */
}

/* Per-number intensity (opacity only; no color tint) */
.rail-numerals .rail-numeral { display: inline-block; font-weight: 600; }
.rail-numerals .rail-numeral[data-value="1"] { color: rgba(255,255,255,1.00); }
.rail-numerals .rail-numeral[data-value="2"] { color: rgba(255,255,255,0.85); }
.rail-numerals .rail-numeral[data-value="3"] { color: rgba(255,255,255,0.70); }
.rail-numerals .rail-numeral[data-value="4"] { color: rgba(255,255,255,0.55); }
.rail-numerals .rail-numeral[data-value="5"] { color: rgba(255,255,255,0.70); }
.rail-numerals .rail-numeral[data-value="6"] { color: rgba(255,255,255,0.85); }
.rail-numerals .rail-numeral[data-value="7"] { color: rgba(255,255,255,1.00); }

/* Emphasize hovered or selected choice via :has() (progressive enhancement) */
.instrument-rail .rail-track:has(.rail-tick[data-value="1"].is-selected) .rail-numerals .rail-numeral[data-value="1"],
.instrument-rail .rail-track:has(.rail-tick[data-value="1"]:hover) .rail-numerals .rail-numeral[data-value="1"] { color: rgba(255,255,255,1); font-weight: 700; }
.instrument-rail .rail-track:has(.rail-tick[data-value="2"].is-selected) .rail-numerals .rail-numeral[data-value="2"],
.instrument-rail .rail-track:has(.rail-tick[data-value="2"]:hover) .rail-numerals .rail-numeral[data-value="2"] { color: rgba(255,255,255,0.98); font-weight: 700; }
.instrument-rail .rail-track:has(.rail-tick[data-value="3"].is-selected) .rail-numerals .rail-numeral[data-value="3"],
.instrument-rail .rail-track:has(.rail-tick[data-value="3"]:hover) .rail-numerals .rail-numeral[data-value="3"] { color: rgba(255,255,255,0.95); font-weight: 700; }
.instrument-rail .rail-track:has(.rail-tick[data-value="4"].is-selected) .rail-numerals .rail-numeral[data-value="4"],
.instrument-rail .rail-track:has(.rail-tick[data-value="4"]:hover) .rail-numerals .rail-numeral[data-value="4"] { color: rgba(255,255,255,1); font-weight: 700; }
.instrument-rail .rail-track:has(.rail-tick[data-value="5"].is-selected) .rail-numerals .rail-numeral[data-value="5"],
.instrument-rail .rail-track:has(.rail-tick[data-value="5"]:hover) .rail-numerals .rail-numeral[data-value="5"] { color: rgba(255,255,255,0.95); font-weight: 700; }
.instrument-rail .rail-track:has(.rail-tick[data-value="6"].is-selected) .rail-numerals .rail-numeral[data-value="6"],
.instrument-rail .rail-track:has(.rail-tick[data-value="6"]:hover) .rail-numerals .rail-numeral[data-value="6"] { color: rgba(255,255,255,0.98); font-weight: 700; }
.instrument-rail .rail-track:has(.rail-tick[data-value="7"].is-selected) .rail-numerals .rail-numeral[data-value="7"],
.instrument-rail .rail-track:has(.rail-tick[data-value="7"]:hover) .rail-numerals .rail-numeral[data-value="7"] { color: rgba(255,255,255,1); font-weight: 700; }

.focus-row__pole.is-pulsing {
    animation: pole-pulse 400ms ease-out;
}

@keyframes pole-pulse {
    0%, 100% {
        opacity: 1;
        color: var(--color-white);
    }
    50% {
        opacity: 1.2;
        color: var(--color-white);
        filter: brightness(1.3);
    }
}

.focus-row__scale {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    width: min(400px, 80%);
    margin-inline: auto;
}

.focus-row__spectrum-line {
    position: absolute;
    top: 7px;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0.12) 0%,
        rgba(255,255,255,0.18) 50%,
        rgba(255,255,255,0.12) 100%
    );
    z-index: 0;
}

.focus-row__dots {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    width: 100%;
}

.focus-row__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 200ms ease-out, background-color 200ms ease-out, border-color var(--transition-fast);
    position: relative;
}

.focus-row__dot:hover {
    border-color: rgba(255,255,255,0.5);
    transform: scale(1.2);
}

.focus-row__dot.is-filled {
    border-color: transparent;
}

/* Hover preview ghost dot */
.focus-row__dot.is-hover-preview:not(.is-filled) {
    opacity: 0.5;
    background-color: rgba(255,255,255,0.3);
}

.focus-row__numbers {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    width: 100%;
    font-size: var(--font-size-xs);
    color: rgba(255,255,255,0.6);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.focus-row__number {
    cursor: pointer;
    transition: color var(--transition-fast);
    user-select: none;
    min-width: 1.2em;
    text-align: center;
}

.focus-row__number:hover {
    color: rgba(255,255,255,0.7);
}

.focus-row.is-rated .focus-row__poles {
    color: rgba(255,255,255,0.8);
}

@media (max-width: 1024px) {
    .focus-strip {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    .focus-strip__image {
        flex-direction: row;
        align-items: center;
        gap: var(--space-lg);
    }
    .focus-strip__thumbnail {
        width: 120px;
        height: 120px;
    }
    .focus-row__poles {
        gap: var(--space-md);
    }
    .focus-row__dots {
        gap: var(--space-sm);
    }
    .focus-row__numbers {
        gap: var(--space-sm);
    }
    .focus-row__scale {
        width: min(350px, 85%);
    }
}

/* Hide decorative tri-rail progress if present */
.progress-tri-rail, .progress-tri-stats { display: none !important; }

/* Mobile: hide per-row numerals, legend remains */
@media (max-width: 640px) {
  .rail-numerals { display: none; }
  .legend-cap { display: none; }
  .legend-rail { padding-block: var(--space-md); }
}

/* Help link (global) */
.help-link { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:rgba(255,255,255,.7); text-decoration:none; font-size:12px; line-height:1; }
.help-link:hover { color:#fff; border-color:rgba(255,255,255,.4); }

/* Rating Slider - Refined, Compact, Instrument-Like */
.rating-slider-container {
    position: relative;
}

.rating-slider {
    position: relative;
    width: 100%;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.rating-slider-track {
    position: relative;
    width: 100%;
    height: 32px;
    background-color: var(--color-black-soft);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    transition: border-color var(--transition-base), background-color var(--transition-base);
}

.rating-slider:hover .rating-slider-track {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.02);
}

.rating-slider:active .rating-slider-track,
.rating-slider.is-dragging .rating-slider-track {
    border-color: rgba(255, 255, 255, 0.3);
}

.rating-slider-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.12) 100%);
    border-radius: 6px 0 0 6px;
    transition: width 0.12s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.rating-slider-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-color: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: 50%;
    cursor: grab;
    transition: left 0.12s cubic-bezier(0.4, 0, 0.2, 1), 
                transform var(--transition-base),
                box-shadow var(--transition-base);
    z-index: 3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.rating-slider:hover .rating-slider-thumb {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.rating-slider-thumb:active,
.rating-slider.is-dragging .rating-slider-thumb {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.rating-slider:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

.rating-slider:focus-visible .rating-slider-track {
    border-color: var(--color-accent);
}

.rating-slider-labels {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-xs) 0;
    margin-block-start: var(--space-xs);
}

.slider-label {
    font-size: 10px;
    color: var(--color-gray-dark);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    transition: color var(--transition-base);
}

.rating-slider:hover .slider-label {
    color: var(--color-gray);
}

.rating-value-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-white);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    opacity: 0.9;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.rating-slider:hover .rating-value-display {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.rating-value-display:empty::before {
    content: '—';
    opacity: 0.3;
}

/* Focus Countdown Timer */
.focus-countdown {
    margin-block-start: var(--space-lg);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.countdown-line {
    position: relative;
    width: 100%;
    height: 3px;
    background-color: var(--color-black-soft);
    border-radius: 2px;
    overflow: hidden;
    margin-block-end: var(--space-sm);
}

.countdown-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--color-white);
    border-radius: 2px;
    transition: width 0.1s linear;
}

.countdown-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray);
    text-align: center;
    display: block;
}

/* Responsive Adjustments for Project Pages */
@media (min-width: 768px) {
    .modern-project-header__title {
        font-size: var(--font-size-4xl);
    }
    
    /* Navigation items fill available width on medium screens */
    .modern-project-nav__item {
        flex: 1 1 auto;
        /* Items distribute to fill available width, wrap when needed */
    }
}

@media (min-width: 1024px) {
    /* On desktop, items fill width evenly, but still wrap if needed */
    .modern-project-nav__item {
        flex: 1 1 0;
        /* Equal distribution, minimum 0 allows wrapping */
    }
}

/* Only prevent wrapping on very wide screens where all items definitely fit */
@media (min-width: 1400px) {
    .modern-project-nav__list {
        flex-wrap: nowrap;
        /* Only when there's definitely enough space for all 8 items */
    }
}

/* ==========================================================================
   Star Motor Logo - Alert Burst Animation
   ========================================================================== */

/* Basic Star Motor SVG Styles */
.star-motor {
    width: 32px;
    height: 32px;
    display: block;
    color: var(--color-acid);
    fill: var(--color-acid);
    flex-shrink: 0;
}

.star-motor__group {
    transform-origin: center;
    will-change: transform;
}

.star-motor__arm {
    transform-origin: 16px 16px;
    will-change: transform;
    fill: var(--color-acid);
}

/* Alert Burst: Quick recognition, then scanning - like alert awareness */
/* Extended to 28s cycle - most of the time is normal ALIVE behavior, burst happens occasionally */
@keyframes star-mode-burst-alert-rotate {
    0% { transform: rotate(-12.86deg); }
    6% { transform: rotate(-12.76deg); }
    12% { transform: rotate(-12.96deg); }
    18% { transform: rotate(-12.86deg); }
    30% { transform: rotate(-12.81deg); }
    42% { transform: rotate(-12.91deg); }
    54% { transform: rotate(-12.86deg); }
    66% { transform: rotate(-12.78deg); }
    78% { transform: rotate(-12.94deg); }
    82% { transform: rotate(-12.86deg); }
    83% { transform: rotate(-12.66deg); }
    85% { transform: rotate(-12.86deg) scale(0.1); }
    87% { transform: rotate(-12.86deg) scale(0.05); }
    88% { transform: rotate(32.14deg) scale(1.12); }
    90% { transform: rotate(-12.86deg) scale(1); }
    92% { transform: rotate(-13.86deg); }
    94% { transform: rotate(-11.86deg); }
    96% { transform: rotate(-13.66deg); }
    98% { transform: rotate(-12.06deg); }
    100% { transform: rotate(-12.86deg); }
}

@keyframes star-mode-burst-alert-center {
    0%, 82% { opacity: 1; }
    87% { opacity: 1; }
    88% { opacity: 0.4; }
    90% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes star-mode-burst-alert-arm-1 {
    0% { transform: rotate(0deg) scaleX(0.85) scaleY(1); }
    5% { transform: rotate(0deg) scaleX(1.35) scaleY(0.82); }
    10% { transform: rotate(0deg) scaleX(0.88) scaleY(1); }
    18% { transform: rotate(0deg) scaleX(1.28) scaleY(0.85); }
    22% { transform: rotate(0deg) scaleX(0.90) scaleY(1); }
    32% { transform: rotate(0deg) scaleX(1.32) scaleY(0.83); }
    36% { transform: rotate(0deg) scaleX(0.86) scaleY(1); }
    48% { transform: rotate(0deg) scaleX(1.30) scaleY(0.84); }
    52% { transform: rotate(0deg) scaleX(0.89) scaleY(1); }
    63% { transform: rotate(0deg) scaleX(1.33) scaleY(0.82); }
    67% { transform: rotate(0deg) scaleX(0.87) scaleY(1); }
    74% { transform: rotate(0deg) scaleX(1.25) scaleY(0.86); }
    80% { transform: rotate(0deg) scaleX(1) scaleY(1); }
    82%, 85%, 87% { transform: rotate(0deg) scaleX(1) scaleY(1); }
    88% { transform: rotate(0deg) scaleX(1.42) scaleY(0.78); }
    90% { transform: rotate(0deg) scaleX(1.35) scaleY(0.81); }
    92% { transform: rotate(0deg) scaleX(0.92) scaleY(1); }
    94% { transform: rotate(0deg) scaleX(1.28) scaleY(0.84); }
    96% { transform: rotate(0deg) scaleX(0.90) scaleY(1); }
    98% { transform: rotate(0deg) scaleX(1.22) scaleY(0.86); }
    100% { transform: rotate(0deg) scaleX(1) scaleY(1); }
}

@keyframes star-mode-burst-alert-arm-1-axis {
    0% { transform: rotate(0deg) scaleX(0.80) scaleY(1); }
    4% { transform: rotate(0deg) scaleX(1.42) scaleY(0.80); }
    8% { transform: rotate(0deg) scaleX(0.83) scaleY(1); }
    18% { transform: rotate(0deg) scaleX(1.38) scaleY(0.82); }
    22% { transform: rotate(0deg) scaleX(0.85) scaleY(1); }
    32% { transform: rotate(0deg) scaleX(1.40) scaleY(0.81); }
    36% { transform: rotate(0deg) scaleX(0.82) scaleY(1); }
    48% { transform: rotate(0deg) scaleX(1.36) scaleY(0.82); }
    52% { transform: rotate(0deg) scaleX(0.84) scaleY(1); }
    63% { transform: rotate(0deg) scaleX(1.39) scaleY(0.80); }
    67% { transform: rotate(0deg) scaleX(0.81) scaleY(1); }
    74% { transform: rotate(0deg) scaleX(1.33) scaleY(0.84); }
    80% { transform: rotate(0deg) scaleX(1) scaleY(1); }
    82%, 85%, 87% { transform: rotate(0deg) scaleX(1) scaleY(1); }
    88% { transform: rotate(0deg) scaleX(1.52) scaleY(0.74); }
    90% { transform: rotate(0deg) scaleX(1.42) scaleY(0.78); }
    92% { transform: rotate(0deg) scaleX(0.88) scaleY(1); }
    94% { transform: rotate(0deg) scaleX(1.35) scaleY(0.81); }
    96% { transform: rotate(0deg) scaleX(0.86) scaleY(1); }
    98% { transform: rotate(0deg) scaleX(1.30) scaleY(0.83); }
    100% { transform: rotate(0deg) scaleX(1) scaleY(1); }
}

@keyframes star-mode-burst-alert-arm-2 {
    0% { transform: rotate(51.43deg) scaleX(0.85) scaleY(1); }
    5% { transform: rotate(51.43deg) scaleX(1.35) scaleY(0.82); }
    10% { transform: rotate(51.43deg) scaleX(0.88) scaleY(1); }
    18% { transform: rotate(51.43deg) scaleX(1.28) scaleY(0.85); }
    22% { transform: rotate(51.43deg) scaleX(0.90) scaleY(1); }
    32% { transform: rotate(51.43deg) scaleX(1.32) scaleY(0.83); }
    36% { transform: rotate(51.43deg) scaleX(0.86) scaleY(1); }
    48% { transform: rotate(51.43deg) scaleX(1.30) scaleY(0.84); }
    52% { transform: rotate(51.43deg) scaleX(0.89) scaleY(1); }
    63% { transform: rotate(51.43deg) scaleX(1.33) scaleY(0.82); }
    67% { transform: rotate(51.43deg) scaleX(0.87) scaleY(1); }
    74% { transform: rotate(51.43deg) scaleX(1.25) scaleY(0.86); }
    80% { transform: rotate(51.43deg) scaleX(1) scaleY(1); }
    82%, 85%, 87% { transform: rotate(51.43deg) scaleX(1) scaleY(1); }
    88% { transform: rotate(51.43deg) scaleX(1.42) scaleY(0.78); }
    90% { transform: rotate(51.43deg) scaleX(1.35) scaleY(0.81); }
    92% { transform: rotate(51.43deg) scaleX(0.92) scaleY(1); }
    94% { transform: rotate(51.43deg) scaleX(1.28) scaleY(0.84); }
    96% { transform: rotate(51.43deg) scaleX(0.90) scaleY(1); }
    98% { transform: rotate(51.43deg) scaleX(1.22) scaleY(0.86); }
    100% { transform: rotate(51.43deg) scaleX(1) scaleY(1); }
}

@keyframes star-mode-burst-alert-arm-3-axis {
    0% { transform: rotate(102.86deg) scaleX(0.80) scaleY(1); }
    4% { transform: rotate(102.86deg) scaleX(1.42) scaleY(0.80); }
    8% { transform: rotate(102.86deg) scaleX(0.83) scaleY(1); }
    18% { transform: rotate(102.86deg) scaleX(1.38) scaleY(0.82); }
    22% { transform: rotate(102.86deg) scaleX(0.85) scaleY(1); }
    32% { transform: rotate(102.86deg) scaleX(1.40) scaleY(0.81); }
    36% { transform: rotate(102.86deg) scaleX(0.82) scaleY(1); }
    48% { transform: rotate(102.86deg) scaleX(1.36) scaleY(0.82); }
    52% { transform: rotate(102.86deg) scaleX(0.84) scaleY(1); }
    63% { transform: rotate(102.86deg) scaleX(1.39) scaleY(0.80); }
    67% { transform: rotate(102.86deg) scaleX(0.81) scaleY(1); }
    74% { transform: rotate(102.86deg) scaleX(1.33) scaleY(0.84); }
    80% { transform: rotate(102.86deg) scaleX(1) scaleY(1); }
    82%, 85%, 87% { transform: rotate(102.86deg) scaleX(1) scaleY(1); }
    88% { transform: rotate(102.86deg) scaleX(1.52) scaleY(0.74); }
    90% { transform: rotate(102.86deg) scaleX(1.42) scaleY(0.78); }
    92% { transform: rotate(102.86deg) scaleX(0.88) scaleY(1); }
    94% { transform: rotate(102.86deg) scaleX(1.35) scaleY(0.81); }
    96% { transform: rotate(102.86deg) scaleX(0.86) scaleY(1); }
    98% { transform: rotate(102.86deg) scaleX(1.30) scaleY(0.83); }
    100% { transform: rotate(102.86deg) scaleX(1) scaleY(1); }
}

@keyframes star-mode-burst-alert-arm-4-axis {
    0% { transform: rotate(154.29deg) scaleX(0.80) scaleY(1); }
    4% { transform: rotate(154.29deg) scaleX(1.42) scaleY(0.80); }
    8% { transform: rotate(154.29deg) scaleX(0.83) scaleY(1); }
    18% { transform: rotate(154.29deg) scaleX(1.38) scaleY(0.82); }
    22% { transform: rotate(154.29deg) scaleX(0.85) scaleY(1); }
    32% { transform: rotate(154.29deg) scaleX(1.40) scaleY(0.81); }
    36% { transform: rotate(154.29deg) scaleX(0.82) scaleY(1); }
    48% { transform: rotate(154.29deg) scaleX(1.36) scaleY(0.82); }
    52% { transform: rotate(154.29deg) scaleX(0.84) scaleY(1); }
    63% { transform: rotate(154.29deg) scaleX(1.39) scaleY(0.80); }
    67% { transform: rotate(154.29deg) scaleX(0.81) scaleY(1); }
    74% { transform: rotate(154.29deg) scaleX(1.33) scaleY(0.84); }
    80% { transform: rotate(154.29deg) scaleX(1) scaleY(1); }
    82%, 85%, 87% { transform: rotate(154.29deg) scaleX(1) scaleY(1); }
    88% { transform: rotate(154.29deg) scaleX(1.52) scaleY(0.74); }
    90% { transform: rotate(154.29deg) scaleX(1.42) scaleY(0.78); }
    92% { transform: rotate(154.29deg) scaleX(0.88) scaleY(1); }
    94% { transform: rotate(154.29deg) scaleX(1.35) scaleY(0.81); }
    96% { transform: rotate(154.29deg) scaleX(0.86) scaleY(1); }
    98% { transform: rotate(154.29deg) scaleX(1.30) scaleY(0.83); }
    100% { transform: rotate(154.29deg) scaleX(1) scaleY(1); }
}

@keyframes star-mode-burst-alert-arm-5 {
    0% { transform: rotate(205.71deg) scaleX(0.85) scaleY(1); }
    5% { transform: rotate(205.71deg) scaleX(1.35) scaleY(0.82); }
    10% { transform: rotate(205.71deg) scaleX(0.88) scaleY(1); }
    18% { transform: rotate(205.71deg) scaleX(1.28) scaleY(0.85); }
    22% { transform: rotate(205.71deg) scaleX(0.90) scaleY(1); }
    32% { transform: rotate(205.71deg) scaleX(1.32) scaleY(0.83); }
    36% { transform: rotate(205.71deg) scaleX(0.86) scaleY(1); }
    48% { transform: rotate(205.71deg) scaleX(1.30) scaleY(0.84); }
    52% { transform: rotate(205.71deg) scaleX(0.89) scaleY(1); }
    63% { transform: rotate(205.71deg) scaleX(1.33) scaleY(0.82); }
    67% { transform: rotate(205.71deg) scaleX(0.87) scaleY(1); }
    74% { transform: rotate(205.71deg) scaleX(1.25) scaleY(0.86); }
    80% { transform: rotate(205.71deg) scaleX(1) scaleY(1); }
    82%, 85%, 87% { transform: rotate(205.71deg) scaleX(1) scaleY(1); }
    88% { transform: rotate(205.71deg) scaleX(1.42) scaleY(0.78); }
    90% { transform: rotate(205.71deg) scaleX(1.35) scaleY(0.81); }
    92% { transform: rotate(205.71deg) scaleX(0.92) scaleY(1); }
    94% { transform: rotate(205.71deg) scaleX(1.28) scaleY(0.84); }
    96% { transform: rotate(205.71deg) scaleX(0.90) scaleY(1); }
    98% { transform: rotate(205.71deg) scaleX(1.22) scaleY(0.86); }
    100% { transform: rotate(205.71deg) scaleX(1) scaleY(1); }
}

@keyframes star-mode-burst-alert-arm-6-axis {
    0% { transform: rotate(257.14deg) scaleX(0.80) scaleY(1); }
    4% { transform: rotate(257.14deg) scaleX(1.42) scaleY(0.80); }
    8% { transform: rotate(257.14deg) scaleX(0.83) scaleY(1); }
    18% { transform: rotate(257.14deg) scaleX(1.38) scaleY(0.82); }
    22% { transform: rotate(257.14deg) scaleX(0.85) scaleY(1); }
    32% { transform: rotate(257.14deg) scaleX(1.40) scaleY(0.81); }
    36% { transform: rotate(257.14deg) scaleX(0.82) scaleY(1); }
    48% { transform: rotate(257.14deg) scaleX(1.36) scaleY(0.82); }
    52% { transform: rotate(257.14deg) scaleX(0.84) scaleY(1); }
    63% { transform: rotate(257.14deg) scaleX(1.39) scaleY(0.80); }
    67% { transform: rotate(257.14deg) scaleX(0.81) scaleY(1); }
    74% { transform: rotate(257.14deg) scaleX(1.33) scaleY(0.84); }
    80% { transform: rotate(257.14deg) scaleX(1) scaleY(1); }
    82%, 85%, 87% { transform: rotate(257.14deg) scaleX(1) scaleY(1); }
    88% { transform: rotate(257.14deg) scaleX(1.52) scaleY(0.74); }
    90% { transform: rotate(257.14deg) scaleX(1.42) scaleY(0.78); }
    92% { transform: rotate(257.14deg) scaleX(0.88) scaleY(1); }
    94% { transform: rotate(257.14deg) scaleX(1.35) scaleY(0.81); }
    96% { transform: rotate(257.14deg) scaleX(0.86) scaleY(1); }
    98% { transform: rotate(257.14deg) scaleX(1.30) scaleY(0.83); }
    100% { transform: rotate(257.14deg) scaleX(1) scaleY(1); }
}

@keyframes star-mode-burst-alert-arm-7 {
    0% { transform: rotate(308.57deg) scaleX(0.85) scaleY(1); }
    5% { transform: rotate(308.57deg) scaleX(1.35) scaleY(0.82); }
    10% { transform: rotate(308.57deg) scaleX(0.88) scaleY(1); }
    18% { transform: rotate(308.57deg) scaleX(1.28) scaleY(0.85); }
    22% { transform: rotate(308.57deg) scaleX(0.90) scaleY(1); }
    32% { transform: rotate(308.57deg) scaleX(1.32) scaleY(0.83); }
    36% { transform: rotate(308.57deg) scaleX(0.86) scaleY(1); }
    48% { transform: rotate(308.57deg) scaleX(1.30) scaleY(0.84); }
    52% { transform: rotate(308.57deg) scaleX(0.89) scaleY(1); }
    63% { transform: rotate(308.57deg) scaleX(1.33) scaleY(0.82); }
    67% { transform: rotate(308.57deg) scaleX(0.87) scaleY(1); }
    74% { transform: rotate(308.57deg) scaleX(1.25) scaleY(0.86); }
    80% { transform: rotate(308.57deg) scaleX(1) scaleY(1); }
    82%, 85%, 87% { transform: rotate(308.57deg) scaleX(1) scaleY(1); }
    88% { transform: rotate(308.57deg) scaleX(1.42) scaleY(0.78); }
    90% { transform: rotate(308.57deg) scaleX(1.35) scaleY(0.81); }
    92% { transform: rotate(308.57deg) scaleX(0.92) scaleY(1); }
    94% { transform: rotate(308.57deg) scaleX(1.28) scaleY(0.84); }
    96% { transform: rotate(308.57deg) scaleX(0.90) scaleY(1); }
    98% { transform: rotate(308.57deg) scaleX(1.22) scaleY(0.86); }
    100% { transform: rotate(308.57deg) scaleX(1) scaleY(1); }
}

/* Alert Burst Classes */
.star-mode-burst-alert__group {
    animation: star-mode-burst-alert-rotate 28s ease-in-out infinite;
    transform: rotate(-12.86deg);
    transform-origin: center center;
}

.star-mode-burst-alert__arm {
    animation: star-mode-burst-alert-arm-1 28s ease-in-out infinite;
}

.star-mode-burst-alert__arm.star-motor__arm--1 {
    animation: star-mode-burst-alert-arm-1-axis 28s ease-in-out infinite;
}

.star-mode-burst-alert__arm.star-motor__arm--2 {
    animation: star-mode-burst-alert-arm-2 28s ease-in-out infinite;
    animation-delay: 0.12s;
}

.star-mode-burst-alert__arm.star-motor__arm--3 {
    animation: star-mode-burst-alert-arm-3-axis 28s ease-in-out infinite;
    animation-delay: 0.24s;
}

.star-mode-burst-alert__arm.star-motor__arm--4 {
    animation: star-mode-burst-alert-arm-4-axis 28s ease-in-out infinite;
    animation-delay: 0.36s;
}

.star-mode-burst-alert__arm.star-motor__arm--5 {
    animation: star-mode-burst-alert-arm-5 28s ease-in-out infinite;
    animation-delay: 0.48s;
}

.star-mode-burst-alert__arm.star-motor__arm--6 {
    animation: star-mode-burst-alert-arm-6-axis 28s ease-in-out infinite;
    animation-delay: 0.6s;
}

.star-mode-burst-alert__arm.star-motor__arm--7 {
    animation: star-mode-burst-alert-arm-7 28s ease-in-out infinite;
    animation-delay: 0.72s;
}

.star-mode-burst-alert__center {
    animation: star-mode-burst-alert-center 28s ease-in-out infinite;
}

/* Header Logo Styling */
.modern-header__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.modern-header__logo .star-motor {
    width: 1.5rem;   /* 24px — character, not just a bullet */
    height: 1.5rem;
}

/* Grid line: "M" in "Meaning Engine" - all content below aligns to this point */

/* Mobile Responsive - Gutter collapses */
@media (max-width: 767px) {
    .modern-header__container {
        padding-inline: var(--space-md); /* 16px each side on mobile */
    }

    .modern-body__container,
    .modern-project-header__container,
    .modern-footer__container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
    
    /* Mobile: star + title stack naturally in their flex row */
    .modern-header__title-wrapper {
        gap: var(--space-sm);
    }
    
    .modern-header__title {
        font-size: var(--font-size-sm);
    }
    
    /* Auth UI Mobile: Simplified layout */
    .modern-header__auth {
        margin-inline-start: 0;
        width: 100%;
    }
    
    /* Profile on mobile: simplified, consistent spacing */
    .modern-header__profile {
        padding: var(--space-xs) var(--space-sm);
        margin-top: var(--space-sm);
        border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle top divider when stacked */
    }
    
    /* Simplified profile: avatar/initials + name only */
    .modern-header__profile-info {
        min-width: 0;
    }
    
    .modern-header__profile-role {
        display: none; /* Hide role on mobile */
    }
    
    /* Simplified auth buttons: smaller */
    .modern-header__auth-buttons {
        width: 100%;
        justify-content: flex-end;
    }
    
    .modern-header__auth-btn {
        padding: var(--space-xs) var(--space-md);
        font-size: var(--font-size-xs);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .star-mode-burst-alert__group,
    .star-mode-burst-alert__arm,
    .star-mode-burst-alert__center {
        animation: none;
    }
    .star-mode-burst-alert__group {
        transform: rotate(-12.86deg);
    }
}

/* ==========================================================================
   Projects Page
   ========================================================================== */

/* .projects-page-header removed — replaced by .projects-label */

/* Projects page label (replaces old page-header with big heading) */
.projects-label {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-block-end: 0;
    padding-block: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-hairline);
}

.projects-label__text {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-gray-dark);
}

.projects-label__count {
    font-size: var(--font-size-xs);
    color: var(--color-gray-dark);
    font-weight: 400;
    opacity: 0.6;
}

/* Create row — top of page, visually prominent */
.project-create-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-lg);
    margin-block-end: var(--space-xl);
    cursor: pointer;
    border: 1px dashed rgba(168, 191, 42, 0.35);
    border-radius: var(--radius);
    background: rgba(168, 191, 42, 0.03);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    user-select: none;
    outline: none;
}

.project-create-row:hover,
.project-create-row:focus-visible {
    border-color: var(--color-acid);
    background: rgba(168, 191, 42, 0.06);
}

.project-create-row__left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.project-create-row__icon {
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 300;
    color: var(--color-acid);
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.project-create-row__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.project-create-row__label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: -0.01em;
}

.project-create-row__hint {
    font-size: var(--font-size-xs);
    color: var(--color-gray-dark);
    font-weight: 400;
}

.project-create-row__arrow {
    font-size: var(--font-size-lg);
    color: var(--color-acid);
    opacity: 0.4;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}

.project-create-row:hover .project-create-row__arrow,
.project-create-row:focus-visible .project-create-row__arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Project list — replaces the card grid */
.project-list {
    display: flex;
    flex-direction: column;
}

.project-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--border-hairline);
    transition: border-color var(--transition-fast);
}

.project-row:last-child {
    border-bottom: none;
}

.project-row:hover {
    border-bottom-color: var(--border-hairline);
}

.project-row:hover .project-row__name {
    color: var(--color-white);
}

.project-row__body {
    flex: 1 1 auto;
    min-width: 0;
}

.project-row__name {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-white);
    margin: 0 0 var(--space-xs);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
}

.project-row__desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray);
    margin: 0 0 var(--space-xs);
    line-height: var(--line-height-normal);
}

.project-row__footer {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-block-start: var(--space-xs);
}

.project-row__meta {
    font-size: var(--font-size-xs);
    color: var(--color-gray-dark);
}

.project-row__next {
    font-size: var(--font-size-xs);
    color: var(--color-acid);
    font-weight: 500;
    opacity: 0.8;
}

.project-row__next--done {
    color: var(--color-success);
}

.project-row__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;   /* 11px — deliberately small, label-like */
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-gray-dark);
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    border: 1px solid currentColor;
    opacity: 0.7;
    flex-shrink: 0;
    align-self: center;
}

.project-row__status--active  { color: var(--color-acid); }
.project-row__status--complete { color: var(--color-success); }
.project-row__status--empty   { color: var(--color-gray-dark); }

.project-row__actions {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
    align-items: center;
    min-width: 14rem; /* Holds both buttons without shifting */
    justify-content: flex-end;
}

.project-list-empty {
    padding: var(--space-3xl) 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
}

.project-list-empty p {
    color: var(--color-gray);
    font-size: var(--font-size-base);
    margin: 0;
}

/* ==========================================================================
   Dashboard Hero
   ========================================================================== */

.dashboard-hero {
    padding: var(--space-xl) 0 var(--space-xl);
    margin-block-end: var(--space-xl);
    border-bottom: 1px solid var(--border-hairline);
}

.dashboard-hero__label {
    display: block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-acid);
    margin-block-end: var(--space-sm);
    font-weight: 600;
}

.dashboard-hero__action {
    font-size: var(--font-size-2xl);  /* down from 3xl — directive, not screaming */
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--color-white);
    margin-block-end: var(--space-sm);
    margin: 0 0 var(--space-sm);
}

.dashboard-hero__reason {
    font-size: var(--font-size-sm);
    color: var(--color-gray);
    max-width: 60ch;
    margin-block-end: var(--space-lg);
    line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   Auth / Login
   ========================================================================== */

.auth-form-wrapper {
    max-width: 420px;
    margin: 0 auto;
    padding-block: clamp(var(--space-2xl), 8vh, var(--space-4xl));
    padding-inline: 0;
}

.auth-card {
    padding: var(--space-2xl);
    border-color: var(--border-subtle);
}

.auth-card h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-block-end: var(--space-xs);
}

.auth-card > p {
    color: var(--color-gray);
    font-size: var(--font-size-sm);
    margin-block-end: var(--space-xl);
}

.error-message {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    margin-block-end: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 64, 80, 0.08);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 64, 80, 0.25);
}

/* ==========================================================================
   Utility: full-width
   ========================================================================== */

.full-width {
    width: 100%;
    display: block;
}

/* ==========================================================================
   End of Stylesheet
   ========================================================================== */