@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==========================================================================
 * APPLE × X (FORMERLY TWITTER) GLOBAL DESIGN SYSTEM & FOUNDATION
 * ==========================================================================
 * Unified Design Engineering: Apple Inc. Industrial Software Aesthetics 
 * fused with X Real-Time Core Chromosome DNA.
 *
 * System Font Resolution:
 *  1. -apple-system / BlinkMacSystemFont (Hardware-accelerated native SF Pro)
 *  2. "SF Pro Display", "SF Pro Text", "SF Pro", "SF Mono" local mappings
 *  3. Fallback degradation: SF Pro Icons -> Helvetica Neue -> Helvetica -> Arial
 * ========================================================================== */

@font-face {
  font-family: "SF Pro Text";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("SF Pro Text"),
       local("SF Pro Text Regular"),
       local("SFProText-Regular"),
       local("SFProText"),
       local(".SFNS-Regular");
}

@font-face {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("SF Pro Display"),
       local("SF Pro Display Regular"),
       local("SFProDisplay-Regular"),
       local("SFProDisplay"),
       local(".SFNSDisplay-Regular");
}

@font-face {
  font-family: "SF Pro";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("SF Pro"),
       local("SF Pro Regular"),
       local("SFPro-Regular"),
       local("SFPro");
}

@font-face {
  font-family: "SF Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("SF Mono"),
       local("SF Mono Regular"),
       local("SFMono-Regular"),
       local("SFMono");
}

/* ==========================================================================
 * BASE TOKEN SYSTEM & DESIGN VARIABLES
 * ========================================================================== */
@layer base {
  :root {
    /* ---- Font Stacks & Typography Tokens ---- */
    --font-apple-display:              -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro Icons", "SF Arabic", "SF Hebrew", "SF Pro SC", "SF Pro TC", "PingFang SC", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    --font-apple-text:                 -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro Icons", "SF Arabic", "SF Hebrew", "SF Pro SC", "SF Pro TC", "PingFang SC", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    --font-apple-sans:                 -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro Icons", "SF Arabic", "SF Hebrew", "SF Pro SC", "SF Pro TC", "PingFang SC", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    --font-apple-mono:                 "SF Mono", SFMono-Regular, ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;

    /* ---- Color System: Apple Light × X Monolithic Canvas ---- */
    --color-background:                rgb(255, 255, 255);
    --color-background-secondary:      rgb(245, 245, 247);
    --color-background-tertiary:       rgb(250, 250, 252);
    --color-background-elevated:       rgba(255, 255, 255, 0.85);
    --color-surface-hover:             rgb(239, 243, 244);
    --color-surface-active:            rgba(15, 20, 25, 0.05);

    --color-text-primary:              rgb(15, 20, 25);
    --color-text-secondary:            rgb(83, 100, 113);
    --color-text-tertiary:             rgb(134, 134, 139);
    --color-text-quaternary:           rgb(174, 174, 175);

    --color-separator:                 rgba(0, 0, 0, 0.08);
    --color-border:                    rgb(239, 243, 244);
    --color-border-light:              rgba(0, 0, 0, 0.08);

    /* ---- Apple & X Signature Accents ---- */
    --color-apple-blue:                rgb(0, 113, 227);
    --color-apple-blue-hover:          #0076DF;
    --color-apple-blue-active:         #006EDB;
    --color-apple-blue-ios:            rgb(0, 122, 255);
    --color-link:                      rgb(0, 113, 227);
    --color-link-hover:                rgb(0, 102, 204);

    /* ---- X DNA Interaction Token Accents (Hover & Glow states) ---- */
    --color-x-blue:                    rgb(29, 155, 240);
    --color-x-blue-hover:              rgba(29, 155, 240, 0.1);
    --color-x-blue-btn-hover:          rgb(26, 140, 216);
    --color-x-blue-btn-active:         rgb(22, 137, 224);
    --color-x-retweet:                 rgb(0, 186, 124);
    --color-x-retweet-hover:           rgba(0, 186, 124, 0.1);
    --color-x-heart:                   rgb(249, 24, 128);
    --color-x-heart-hover:             rgba(249, 24, 128, 0.1);
    --color-x-bookmark:                rgb(29, 155, 240);
    --color-x-bookmark-hover:          rgba(29, 155, 240, 0.1);
    --color-x-verified:                rgb(29, 155, 240);
    --color-x-gold:                    rgb(255, 212, 0);
    --color-x-grey:                    rgb(130, 154, 171);
    --color-x-red:                     rgb(244, 33, 46);

    /* ---- X Monolithic Chromosome Palette (Light: "Paper") ---- */
    --color-x-ink:                     rgb(15, 20, 25);
    --color-x-graphite:                rgb(83, 100, 113);
    --color-x-fog:                     rgb(130, 154, 171);
    --color-x-hairline:                rgb(207, 217, 222);
    --color-x-mist:                    rgb(239, 243, 244);
    --color-x-widget:                  rgb(247, 249, 249);
    --color-x-hover-canvas:            rgb(239, 243, 244);
    --color-x-active-canvas:           rgba(15, 20, 25, 0.05);

    /* ---- Status System Colors ---- */
    --color-system-red:                #ff3b30;
    --color-system-green:              #34c759;
    --color-system-orange:             #ff9500;
    --color-system-yellow:             #ffcc00;
    --color-system-purple:             #af52de;
    --color-system-pink:               #ff2d55;

    /* ---- Dark Overlay UI / Loading Indicators ---- */
    --color-surface-dark:              rgb(22, 24, 28);
    --color-white-15:                  rgba(255, 255, 255, 0.15);
    --color-white-30:                  rgba(255, 255, 255, 0.3);
    --color-white-85:                  rgba(255, 255, 255, 0.85);

    /* ---- Dark Mode (X "Lights Out" Pure Black × Apple Space Black) ---- */
    --color-background-dark:           #000000;
    --color-background-secondary-dark: rgb(22, 24, 28);
    --color-background-tertiary-dark:  rgb(32, 35, 39);
    --color-text-primary-dark:         rgb(231, 233, 234);
    --color-text-secondary-dark:       rgb(113, 118, 123);
    --color-text-tertiary-dark:        rgb(134, 134, 139);
    --color-separator-dark:            rgb(47, 51, 54);
    --color-border-dark:               rgb(47, 51, 54);

    /* ---- Material & Glassmorphism ---- */
    --material-background:             rgba(255, 255, 255, 0.85);
    --material-background-dark:        rgba(0, 0, 0, 0.75);
    --material-blur:                   saturate(190%) blur(16px);
    --material-border:                 rgba(0, 0, 0, 0.08);
    --material-border-dark:            rgba(255, 255, 255, 0.12);

    /* ---- Elevation & Shadows ---- */
    --shadow-sm:                       0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:                       0 4px 16px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
    --shadow-popover:                  0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-modal:                    0 16px 40px rgba(0, 0, 0, 0.18);

    /* ---- Motion Timing ---- */
    --ease-apple:                      cubic-bezier(0.4, 0, 0.2, 1);
    --ease-apple-snappy:               cubic-bezier(0.16, 1, 0.3, 1);
    --ease-apple-spring:               cubic-bezier(0.175, 0.885, 0.32, 1.15);
    --duration-apple:                  300ms;
    --duration-fast:                   120ms;
    --duration-base:                   200ms;
    --duration-slow:                   400ms;

    /* ---- Wall & Timeline Layout Metrics ---- */
    --nav-height:                      53px;
    --nav-height-mobile:               49px;
    --section-padding-desktop:         128px;
    --section-padding-mobile:          48px;
    --container-max-width:             1260px;
    --container-max-width-narrow:      980px;
    --content-max-width:               680px;
    --feed-max-width:                  600px;
    --sidebar-width:                   275px;
    --sidebar-collapsed-width:         88px;
    --right-rail-width:                350px;
    --gutter:                          16px;

    /* ---- Spacing Scale ---- */
    --spacing-3xs:                     2px;
    --spacing-2xs:                     4px;
    --spacing-xs:                      8px;
    --spacing-sm:                      12px;
    --spacing-md:                      16px;
    --spacing-lg:                      20px;
    --spacing-xl:                      24px;
    --spacing-2xl:                     28px;
    --spacing-3xl:                     32px;
    --spacing-4xl:                     40px;
    --spacing-5xl:                     48px;
    --spacing-6xl:                     56px;
    --spacing-7xl:                     64px;
    --spacing-8xl:                     80px;
    --spacing-9xl:                     96px;
    --spacing-10xl:                    112px;
    --spacing-11xl:                    128px;

    /* ---- Radius Scale ---- */
    --radius-xs:                       4px;
    --radius-sm:                       8px;
    --radius-md:                       12px;
    --radius-lg:                       16px;
    --radius-xl:                       20px;
    --radius-2xl:                      24px;
    --radius-full:                     9999px;
    --radius-pill:                     980px;

    /* ---- Typography Specs (SF Pro Precision Hierarchy) ---- */
    --font-display-size:               56px;
    --font-display-weight:             700;
    --font-display-line-height:        1.0714285714;
    --font-display-tracking:           -0.015em;

    --font-h1-size:                    40px;
    --font-h1-weight:                  700;
    --font-h1-line-height:             1.1;
    --font-h1-tracking:                -0.012em;

    --font-h2-size:                    24px;
    --font-h2-weight:                  700;
    --font-h2-line-height:             1.2;
    --font-h2-tracking:                -0.008em;

    --font-h3-size:                    20px;
    --font-h3-weight:                  700;
    --font-h3-line-height:             1.25;
    --font-h3-tracking:                -0.005em;

    --font-body-size:                  15px;
    --font-body-weight:                400;
    --font-body-line-height:           1.4;
    --font-body-tracking:              -0.012em;

    --font-subbody-size:               14px;
    --font-subbody-weight:             400;
    --font-subbody-line-height:        1.4285914286;
    --font-subbody-tracking:           -0.01em;

    --font-caption-size:               13px;
    --font-caption-weight:             400;
    --font-caption-line-height:        1.35;
    --font-caption-tracking:           -0.008em;

    /* ---- Z-Index Scale ---- */
    --z-base:                          0;
    --z-dropdown:                      1000;
    --z-sticky:                        1100;
    --z-fixed:                         1200;
    --z-modal-backdrop:                9998;
    --z-modal:                         9999;
    --z-popover:                       10002;
    --z-tooltip:                       10003;

    /* ---- Component Aliases (Backward Compatibility) ---- */
    --apple-bg:                        #ffffff;
    --apple-bg-secondary:              #f5f5f7;
    --apple-bg-tertiary:               #fafafc;
    --apple-surface-dark:              #000000;
    --apple-surface-dark-secondary:    #16181c;
    --apple-surface-dark-tertiary:     #202327;
    --apple-blue:                      var(--color-apple-blue);
    --apple-blue-hover:                var(--color-apple-blue-hover);
    --apple-blue-active:               var(--color-apple-blue-active);
    --apple-blue-dark:                 var(--color-link);
    --apple-blue-ios:                  var(--color-apple-blue-ios);
    --apple-signal-blue:               var(--color-apple-blue-ios);
    --apple-link:                      var(--color-link);
    --apple-text:                      var(--color-text-primary);
    --apple-text-secondary:            var(--color-text-secondary);
    --apple-text-tertiary:             var(--color-text-tertiary);
    --apple-border:                    var(--color-border);
    --apple-border-light:              var(--color-border-light);
    --apple-separator:                 var(--color-separator);
    --apple-glass-bg:                  var(--material-background);
    --apple-glass-bg-dark:             var(--material-background-dark);
    --apple-glass-blur:                var(--material-blur);
    --apple-glass-border:              var(--material-border);
    --apple-glass-border-dark:         var(--material-border-dark);
    --apple-glass-border-light:        var(--material-border);
    --apple-liquid-glass-light:        rgba(255, 255, 255, 0.85);
    --apple-liquid-glass-dark:         rgba(0, 0, 0, 0.75);
    --apple-shadow-sm:                 var(--shadow-sm);
    --apple-shadow-md:                 var(--shadow-md);
    --vibrant-label:                   rgba(0, 0, 0, 0.95);
    --vibrant-secondary:               rgba(0, 0, 0, 0.75);
    --vibrant-tertiary:                rgba(0, 0, 0, 0.55);
    --vibrant-quaternary:              rgba(0, 0, 0, 0.38);
    --color-black-40:                  rgba(0, 0, 0, 0.4);
    --color-black-8:                   rgba(0, 0, 0, 0.08);
    --dt-footnote:                     13px;
    --dt-title-3:                      20px;
    --dt-headline:                     17px;
    --dt-caption-1:                    12px;
    --globalnav-height:                var(--nav-height);
    --section-padding:                 var(--section-padding-desktop);
    --section-padding-mobile:          var(--section-padding-mobile);
  }

  /* ==========================================================================
   * Dark Mode Overrides (Theme: "Lights Out" / "Space Black")
   * ========================================================================== */
  .dark {
    /* ---- Core Surface Colors ---- */
    --color-background:                #000000;
    --color-background-secondary:      rgb(22, 24, 28);
    --color-background-tertiary:       rgb(32, 35, 39);
    --color-background-elevated:       rgba(0, 0, 0, 0.75);
    --color-surface-hover:             rgb(24, 24, 24);
    --color-surface-active:            rgb(39, 44, 48);

    /* ---- Text Scale Tokens ---- */
    --color-text-primary:              rgb(231, 233, 234);
    --color-text-secondary:            rgb(113, 118, 123);
    --color-text-tertiary:             rgb(134, 134, 139);
    --color-text-quaternary:           rgb(174, 174, 175);

    /* ---- Structural Elements ---- */
    --color-separator:                 rgb(47, 51, 54);
    --color-border:                    rgb(47, 51, 54);
    --color-border-light:              rgba(255, 255, 255, 0.12);

    /* ---- Material Elements ---- */
    --material-background:             rgba(0, 0, 0, 0.75);
    --material-border:                 rgba(255, 255, 255, 0.12);

    /* ---- X Chromosome Palette (Dark: "Lights Out") ---- */
    --color-x-ink:                     rgb(231, 233, 234);
    --color-x-graphite:                rgb(113, 118, 123);
    --color-x-fog:                     rgb(113, 118, 123);
    --color-x-hairline:                rgb(47, 51, 54);
    --color-x-mist:                    rgb(24, 24, 24);
    --color-x-widget:                  rgb(22, 24, 28);
    --color-x-hover-canvas:            rgb(24, 24, 24);
    --color-x-active-canvas:           rgb(39, 44, 48);

    /* ---- Backward Compatibility Tokens (Dark Mode) ---- */
    --apple-bg:                        #000000;
    --apple-bg-secondary:              rgb(22, 24, 28);
    --apple-bg-tertiary:               rgb(32, 35, 39);
    --apple-text:                      rgb(231, 233, 234);
    --apple-text-secondary:            rgb(113, 118, 123);
    --apple-border:                    rgb(47, 51, 54);
    --apple-border-light:              rgba(255, 255, 255, 0.12);
    --apple-separator:                 rgb(47, 51, 54);
    --apple-glass-bg:                  rgba(0, 0, 0, 0.75);
    --apple-glass-border:              rgba(255, 255, 255, 0.12);
  }

  /* ==========================================================================
   * BASE HTML & BODY STYLES
   * ========================================================================== */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    min-width: 320px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    color: var(--color-text-primary);
    background-color: var(--color-background);
    font-family: var(--font-apple-text);
    font-size: var(--font-body-size);
    font-weight: 400;
    font-style: normal;
    line-height: var(--font-body-line-height);
    letter-spacing: var(--font-body-tracking);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-apple-display);
    font-weight: 700;
  }

  ::selection {
    color: inherit;
    background-color: rgba(0, 113, 227, 0.18);
  }

  :focus-visible {
    outline: 2px solid var(--color-apple-blue);
    outline-offset: 1px;
  }

  /* ---- Minimal Hardware-Engineered Scrollbar ---- */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.25);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 9999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.45);
    background-clip: padding-box;
    border: 2px solid transparent;
  }
}

/* ==========================================================================
 * COMPONENT LAYER — APPLE HIG × X WALL ENGINE
 * ========================================================================== */
@layer components {
  /* ---- Navigation Surfaces ---- */
  .apple-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    height: var(--nav-height);
    background: var(--material-background);
    border-bottom: 0.5px solid var(--color-border-light);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
    transition: background 0.2s var(--ease-apple), border-color 0.2s var(--ease-apple);
  }

  .apple-nav-scrim {
    background: var(--material-background);
    border-bottom: 0.5px solid var(--color-border-light);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
  }

  .apple-curtain {
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .apple-nav-link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    color: var(--color-text-secondary);
    font-family: var(--font-apple-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;
    border-radius: 980px;
    transition: color 0.2s var(--ease-apple), background-color 0.2s var(--ease-apple);
  }
  .apple-nav-link:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-hover);
  }
  .apple-nav-link[aria-current="page"] {
    color: var(--color-text-primary);
    font-weight: 700;
  }

  .apple-nav-link-mobile {
    color: var(--color-text-primary);
    font-family: var(--font-apple-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.005em;
    text-decoration: none;
    transition: opacity 0.2s var(--ease-apple);
  }
  .apple-nav-link-mobile:hover {
    opacity: 0.75;
  }

  /* ---- Buttons: HIG Capsule Pill Specifications ---- */
  .apple-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 36px;
    padding: 0 16px;
    color: inherit;
    font-family: var(--font-apple-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2857742857;
    letter-spacing: -0.01em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 980px;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s var(--ease-apple), background-color 0.2s var(--ease-apple), border-color 0.2s var(--ease-apple), color 0.2s var(--ease-apple);
  }
  .apple-btn:active {
    transform: scale(0.97);
  }

  .apple-btn-lg {
    min-height: 44px;
    padding: 0 24px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  .apple-btn-primary {
    color: #ffffff;
    background: var(--color-apple-blue);
  }
  .apple-btn-primary:hover {
    background: var(--color-apple-blue-hover);
  }
  .apple-btn-primary:active {
    background: var(--color-apple-blue-active);
  }
  .apple-btn-primary:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .apple-btn-secondary {
    color: var(--color-text-primary);
    background: transparent;
    border-color: var(--color-border);
  }
  .apple-btn-secondary:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border-light);
  }
  .apple-btn-secondary:active {
    background: var(--color-surface-active);
  }

  .apple-btn-neutral {
    color: var(--color-background);
    background: var(--color-text-primary);
  }
  .apple-btn-neutral:hover {
    opacity: 0.9;
  }
  .apple-btn-neutral:active {
    opacity: 0.8;
  }
  .apple-btn-neutral:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  /* ---- Pill Button (Legacy + HIG Capsule) ---- */
  .apple-pill-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 20px;
    font-family: var(--font-apple-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.015em;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-full);
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s var(--ease-apple), transform 0.12s var(--ease-apple);
  }
  .apple-pill-button:active {
    transform: scale(0.97);
  }
  .apple-pill-button-primary {
    color: #ffffff;
    background: var(--color-apple-blue);
  }
  .apple-pill-button-primary:hover {
    background: var(--color-apple-blue-hover);
  }
  .apple-pill-button-primary:active {
    background: var(--color-apple-blue-active);
  }
  .apple-pill-button-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .apple-pill-button-secondary {
    color: var(--color-text-primary);
    background: transparent;
    border: 1px solid var(--color-border);
  }
  .apple-pill-button-secondary:hover {
    background: var(--color-surface-hover);
  }

  /* ---- Tile & Panel Surfaces ---- */
  .apple-tile-light {
    background: var(--color-background);
  }
  .apple-tile-parchment {
    background: var(--color-background-secondary);
  }
  .apple-tile-dark {
    background: #000000;
  }

  /* ---- Link Patterns ---- */
  .apple-link-more {
    display: inline-flex;
    align-items: center;
    color: var(--color-apple-blue);
    font-family: var(--font-apple-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s var(--ease-apple);
  }
  .apple-link-more .apple-link-more-icon {
    margin-left: 4px;
    transition: transform 0.2s var(--ease-apple);
  }
  .apple-link-more:hover {
    text-decoration: underline;
  }
  .apple-link-more:hover .apple-link-more-icon {
    transform: translateX(3px);
  }

  /* ---- Segmented Control Tabs ---- */
  .apple-segmented {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-light);
    border-radius: 980px;
  }
  .apple-segmented-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 16px;
    color: var(--color-text-secondary);
    font-family: var(--font-apple-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: 0.5px solid transparent;
    border-radius: 980px;
    transition: color 0.2s var(--ease-apple), background-color 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
  }
  .apple-segmented-item:hover {
    color: var(--color-text-primary);
  }
  .apple-segmented-item[aria-selected="true"] {
    color: var(--color-text-primary);
    background: var(--color-background);
    border-color: rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  /* ---- Footer Elements ---- */
  .apple-footer {
    padding: 24px var(--gutter);
    color: var(--color-text-secondary);
    background: var(--color-background-secondary);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.008em;
  }
  .apple-footer a {
    color: var(--color-text-secondary);
    text-decoration: none;
  }
  .apple-footer a:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
  }
  .apple-footer .apple-footer-title {
    color: var(--color-text-primary);
    font-weight: 600;
  }

  /* ---- Section Headings ---- */
  .apple-section-heading {
    color: var(--color-text-primary);
    font-family: var(--font-apple-display);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  @media (max-width: 1068px) {
    .apple-section-heading {
      font-size: 26px;
      line-height: 1.2;
    }
  }

  /* ---- Category Labels ---- */
  .apple-category-label {
    color: var(--color-apple-blue);
    font-family: var(--font-apple-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-transform: uppercase;
  }

  /* ---- Hairline Separator System ---- */
  .apple-hairline {
    border-width: 0.5px;
    border-style: solid;
    border-color: var(--color-border-light);
  }

  /* ---- Containers & Grids ---- */
  .apple-container {
    max-width: var(--container-max-width);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--gutter);
    padding-left: var(--gutter);
  }

  .apple-section,
  .apple-section-padding {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  @media (min-width: 768px) {
    .apple-section,
    .apple-section-padding {
      padding-top: 64px;
      padding-bottom: 64px;
    }
  }

  /* ---- Hero Elements ---- */
  .apple-hero-title {
    color: var(--color-text-primary);
    font-family: var(--font-apple-display);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
  }
  @media (max-width: 1068px) {
    .apple-hero-title {
      font-size: 38px;
    }
  }
  @media (max-width: 734px) {
    .apple-hero-title {
      font-size: 28px;
    }
  }

  .apple-hero-subtitle {
    color: var(--color-text-secondary);
    font-family: var(--font-apple-text);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.01em;
  }

  /* ---- Card Titles & Surfaces ---- */
  .apple-card-title {
    color: var(--color-text-primary);
    font-family: var(--font-apple-display);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  .apple-card {
    overflow: hidden;
    background: var(--color-background);
    border: 0.5px solid var(--color-border-light);
    border-radius: var(--radius-lg);
  }

  .apple-glass {
    background: var(--material-background);
    border: 0.5px solid var(--material-border);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
  }

  .apple-focus-ring:focus-visible {
    outline: 2px solid var(--color-apple-blue);
    outline-offset: 1px;
  }

  .apple-dotnav-item[aria-current="true"] {
    transform: scale(1.15);
    transition: transform 0.2s var(--ease-apple);
  }

  /* ---- Apple Tile Flat System ---- */
  .apple-tile-flat {
    background: var(--color-background);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .apple-tile-flat-secondary {
    background: var(--color-background-secondary);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* ---- Editorial News Row ---- */
  .apple-news-row {
    border-bottom: 0.5px solid var(--color-border-light);
    transition: background-color 0.15s ease;
  }
  .apple-news-row:hover {
    background: var(--color-surface-hover);
  }
  .apple-news-row:last-child {
    border-bottom: 0;
  }

  /* ---- Filter Pills ---- */
  .apple-pill-filter {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    color: var(--color-text-secondary);
    font-family: var(--font-apple-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: pointer;
    background: var(--color-background);
    border: 0.5px solid var(--color-border-light);
    border-radius: 980px;
    transition: color 0.2s var(--ease-apple), background-color 0.2s var(--ease-apple), border-color 0.2s var(--ease-apple);
  }
  .apple-pill-filter:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-hover);
  }
  .apple-pill-filter[aria-pressed="true"] {
    color: var(--color-background);
    background: var(--color-text-primary);
    border-color: var(--color-text-primary);
  }

  .apple-alert-flat {
    background: transparent;
    border-top: 0.5px solid var(--color-border-light);
    border-bottom: 0.5px solid var(--color-border-light);
    border-radius: 0;
  }

  .apple-back-to-top {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    padding: 16px 0;
    color: var(--color-text-secondary);
    font-family: var(--font-apple-text);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-top: 0.5px solid var(--color-border-light);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s var(--ease-apple);
  }
  .apple-back-to-top:hover {
    color: var(--color-text-primary);
  }

  .apple-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--color-text-secondary);
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 980px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s var(--ease-apple), background-color 0.15s var(--ease-apple), transform 0.1s var(--ease-apple);
  }
  .apple-icon-button:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-hover);
  }
  .apple-icon-button:active {
    transform: scale(0.92);
  }

  /* ---- Gallery & Media Components ---- */
  .apple-gallery {
    background: #000000;
  }

  .apple-gallery-headline {
    color: rgb(245, 245, 247);
    font-family: var(--font-apple-display);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  @media (max-width: 1068px) {
    .apple-gallery-headline {
      font-size: 28px;
    }
  }

  .apple-dotnav {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
  }
  .apple-dotnav-item {
    width: 32px;
    height: 3px;
    padding: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.3);
    border: 0;
    border-radius: 980px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s var(--ease-apple), transform 0.2s var(--ease-apple);
  }
  .apple-dotnav-item:hover {
    background: rgba(255, 255, 255, 0.7);
  }
  .apple-dotnav-item[aria-current="true"] {
    background: #ffffff;
  }

  .apple-btn-neutral-inverse {
    color: #000000;
    background: rgb(245, 245, 247);
  }
  .apple-btn-neutral-inverse:hover {
    color: #000000;
    background: #ffffff;
  }
  .apple-btn-neutral-inverse:active {
    background: #e5e5ea;
  }

  /* ---- Search Flyout & Inputs ---- */
  .apple-search-overlay {
    top: calc(env(safe-area-inset-top, 0px) + var(--nav-height));
    background: var(--material-background);
    border-bottom: 0.5px solid var(--color-border-light);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
  }

  .apple-search-field {
    display: flex;
    gap: 8px;
    align-items: center;
    height: 42px;
    padding: 0 16px;
    background: var(--color-background-secondary);
    border: 1px solid transparent;
    border-radius: 980px;
    transition: background-color 0.2s var(--ease-apple), border-color 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
  }
  .apple-search-field:focus-within {
    background: var(--color-background);
    border-color: var(--color-apple-blue);
    box-shadow: 0 0 0 1px var(--color-apple-blue);
  }
  .apple-search-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    color: var(--color-text-primary);
    font-family: var(--font-apple-text);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.01em;
    background: transparent;
    border: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }
  .apple-search-field input::placeholder {
    color: var(--color-text-secondary);
    opacity: 1;
  }

  .apple-search-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    color: var(--color-text-primary);
    font-family: var(--font-apple-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.12s var(--ease-apple);
  }
  .apple-search-link:hover {
    background: var(--color-surface-hover);
  }

  .apple-hero-scrim {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.05) 30%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0.4) 100%
    );
  }

  /* ---- Apple Global Nav ---- */
  .apple-globalnav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--z-sticky);
    width: 100%;
    height: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--material-background);
    border-bottom: 0.5px solid var(--color-border-light);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
    transition: background-color 0.2s var(--ease-apple), border-color 0.2s var(--ease-apple);
  }

  .apple-globalnav.scrolled {
    background: var(--material-background);
  }

  .apple-globalnav-link {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 12px;
    color: var(--color-text-secondary);
    font-family: var(--font-apple-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color 0.2s var(--ease-apple);
  }
  .apple-globalnav-link:hover {
    color: var(--color-text-primary);
  }
  .apple-globalnav-link[aria-current="page"] {
    color: var(--color-text-primary);
    font-weight: 700;
  }
  .apple-globalnav-link[aria-current="page"]::after {
    position: absolute;
    right: 12px;
    bottom: 0;
    left: 12px;
    height: 3px;
    content: '';
    background: var(--color-apple-blue);
    border-radius: 980px 980px 0 0;
  }

  .apple-globalnav-icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--color-text-secondary);
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 980px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s var(--ease-apple), background-color 0.2s var(--ease-apple);
  }
  .apple-globalnav-icon-button:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-hover);
  }

  /* ---- Apple Global Footer ---- */
  .apple-globalfooter {
    padding: 32px 0 24px;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.008em;
    background: var(--color-background-secondary);
    border-top: 0.5px solid var(--color-border-light);
  }

  .apple-footer-link {
    display: inline-block;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s var(--ease-apple);
  }
  .apple-footer-link:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
  }

  .apple-globalfooter-title {
    margin-bottom: 12px;
    color: var(--color-text-primary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.33;
    letter-spacing: 0.005em;
  }

  /* ---- Apple Card Flat System ---- */
  .apple-card-flat {
    position: relative;
    overflow: hidden;
    background: var(--color-background);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .apple-card-flat-secondary {
    position: relative;
    overflow: hidden;
    background: var(--color-background-secondary);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* ---- Apple Hairline Helpers ---- */
  .apple-hairline-top {
    border-top: 0.5px solid var(--color-border-light);
  }
  .apple-hairline-bottom {
    border-bottom: 0.5px solid var(--color-border-light);
  }
  .apple-hairline-y {
    border-top: 0.5px solid var(--color-border-light);
    border-bottom: 0.5px solid var(--color-border-light);
  }

  /* ---- Apple Button System ---- */
  .apple-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 38px;
    padding: 0 18px;
    font-family: var(--font-apple-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 980px;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s var(--ease-apple), border-color 0.2s var(--ease-apple), color 0.2s var(--ease-apple), transform 0.12s var(--ease-apple);
  }
  .apple-button:active {
    transform: scale(0.97);
  }

  .apple-button-primary {
    color: #ffffff;
    background: var(--color-apple-blue);
  }
  .apple-button-primary:hover {
    background: var(--color-apple-blue-hover);
  }
  .apple-button-primary:active {
    background: var(--color-apple-blue-active);
  }
  .apple-button-primary:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .apple-button-secondary {
    color: var(--color-text-primary);
    background: transparent;
    border-color: var(--color-border);
  }
  .apple-button-secondary:hover {
    background: var(--color-surface-hover);
  }
  .apple-button-secondary:active {
    background: var(--color-surface-active);
  }

  .apple-button-neutral {
    color: var(--color-background);
    background: var(--color-text-primary);
  }
  .apple-button-neutral:hover {
    opacity: 0.9;
  }
  .apple-button-neutral:active {
    opacity: 0.8;
  }

  /* ---- Icon Utility Classes ---- */
  .apple-icon-search {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-text-secondary);
  }

  .apple-icon-menu {
    flex-shrink: 0;
    width: 18px;
    height: 14px;
    color: var(--color-text-secondary);
  }

  /* ---- Apple Skeleton & Empty States ---- */
  .apple-skeleton {
    background: linear-gradient(
      90deg,
      var(--color-background-secondary) 0%,
      var(--color-border-light) 50%,
      var(--color-background-secondary) 100%
    );
    background-size: 200% 100%;
    animation: apple-skeleton-loading 1.5s ease-in-out infinite;
  }

  @keyframes apple-skeleton-loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  .apple-empty-state {
    padding: 64px 24px;
    color: var(--color-text-secondary);
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-align: center;
  }

  .apple-empty-state-title {
    margin-bottom: 8px;
    color: var(--color-text-primary);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
  }
}

/* ==========================================================================
 * X WALL CHROMOSOME DNA & APPLE INC. SYSTEM EXTENSIONS
 * ========================================================================== */
@layer components {
  /* ---- The Main X Layout Grid Engine (Desktop 3-Column / Mobile App) ---- */
  .wall-layout-shell {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    background-color: var(--color-background);
  }

  .wall-sidebar-left {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: space-between;
    width: var(--sidebar-width);
    height: 100vh;
    padding: 12px 16px 20px;
    border-right: 0.5px solid var(--color-border-light);
  }

  @media (max-width: 1280px) and (min-width: 1024px) {
    .wall-sidebar-left {
      align-items: center;
      width: var(--sidebar-collapsed-width);
      padding: 12px 8px 20px;
    }
  }

  @media (max-width: 1023px) {
    .wall-sidebar-left {
      display: none;
    }
  }

  .wall-feed-main {
    position: relative;
    width: 100%;
    max-width: var(--feed-max-width);
    min-height: 100vh;
    border-right: 0.5px solid var(--color-border-light);
    border-left: 0.5px solid var(--color-border-light);
  }

  @media (max-width: 1023px) {
    .wall-feed-main {
      max-width: 600px;
      margin: 0 auto;
      border-right: 0;
      border-left: 0;
    }
  }

  .wall-rail-right {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    width: var(--right-rail-width);
    min-height: 100vh;
    padding: 12px 24px 64px;
  }

  @media (max-width: 1023px) {
    .wall-rail-right {
      display: none;
    }
  }

  /* ---- Feed Sticky Header with Apple Liquid Glass ---- */
  .wall-sticky-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding: 0 16px;
    background: var(--material-background);
    border-bottom: 0.5px solid var(--color-border-light);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
  }

  /* ---- Sticky Tab Bar ("For you" / "Following" / "Human Wall") ---- */
  .wall-feed-tabs {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    width: 100%;
    height: var(--nav-height);
    background: var(--material-background);
    border-bottom: 0.5px solid var(--color-border-light);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
  }

  .wall-feed-tab-item {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-secondary);
    font-family: var(--font-apple-text);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .wall-feed-tab-item:hover {
    color: var(--color-text-primary);
    background-color: var(--color-surface-hover);
  }
  .wall-feed-tab-item[aria-selected="true"] {
    color: var(--color-text-primary);
    font-weight: 700;
  }
  .wall-feed-tab-item[aria-selected="true"]::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    content: '';
    background: var(--color-x-blue);
    border-radius: 9999px;
    transform-origin: center;
    animation: wall-tab-underline-in 0.4s var(--ease-apple-snappy);
  }
  @keyframes wall-tab-underline-in {
    from {
      transform: scaleX(0.45);
      opacity: 0.4;
    }
    to {
      transform: scaleX(1);
      opacity: 1;
    }
  }
  .wall-tab-underline {
    transform-origin: center;
    animation: wall-tab-underline-in 0.4s var(--ease-apple-snappy);
  }

  /* ---- Post / Tweet Cell Engineering ---- */
  .wall-post-cell {
    position: relative;
    display: flex;
    padding: 12px 16px;
    cursor: pointer;
    background-color: var(--color-background);
    border-bottom: 0.5px solid var(--color-border-light);
    transition: background-color 0.15s var(--ease-apple);
  }
  .wall-post-cell:hover {
    background-color: var(--color-x-hover-canvas);
  }
  .wall-post-cell:active {
    background-color: var(--color-x-active-canvas);
  }

  .wall-avatar-container {
    flex-shrink: 0;
    margin-right: 12px;
  }

  .wall-avatar {
    width: 40px;
    height: 40px;
    background-color: var(--color-background-secondary);
    border-radius: 9999px;
    object-fit: cover;
    transition: opacity 0.15s ease;
  }
  .wall-avatar:hover {
    opacity: 0.9;
  }

  .wall-post-content {
    flex: 1;
    min-width: 0;
  }

  .wall-post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
    font-size: 15px;
    line-height: 1.35;
  }

  .wall-author-name {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    color: var(--color-text-primary);
    font-weight: 700;
    text-decoration: none;
  }
  .wall-author-name:hover {
    text-decoration: underline;
  }

  .wall-author-handle {
    margin-left: 4px;
    color: var(--color-text-secondary);
    font-family: var(--font-apple-text);
    font-weight: 400;
  }

  .wall-timestamp {
    color: var(--color-text-secondary);
    font-size: 14px;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
  }
  .wall-timestamp:hover {
    text-decoration: underline;
  }

  .wall-post-text {
    margin-top: 2px;
    margin-bottom: 10px;
    color: var(--color-text-primary);
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: -0.012em;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* ---- Tweet / Post Action Bar (Reply, Repost, Like, Bookmark, Share) ---- */
  .wall-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 440px;
    margin-top: 8px;
    margin-left: -8px;
    color: var(--color-text-secondary);
  }

  .wall-action-btn {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    height: 34px;
    padding: 0 8px;
    color: var(--color-text-secondary);
    font-size: 13px;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 980px;
    font-variant-numeric: tabular-nums;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, background-color 0.15s ease;
  }
  .wall-action-btn svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    transition: transform 0.15s var(--ease-apple);
  }
  .wall-action-btn:active svg {
    transform: scale(0.85);
  }

  /* Specific Action Accents */
  .wall-action-reply:hover {
    color: var(--color-x-blue);
    background-color: var(--color-x-blue-hover);
  }

  .wall-action-repost:hover,
  .wall-action-repost[data-active="true"] {
    color: var(--color-x-retweet);
    background-color: var(--color-x-retweet-hover);
  }

  .wall-action-like:hover {
    color: var(--color-x-heart);
    background-color: var(--color-x-heart-hover);
  }
  .wall-action-like[data-active="true"] {
    color: var(--color-x-heart);
  }
  .wall-action-like[data-active="true"] svg {
    fill: var(--color-x-heart);
    animation: tuwa-heart-pop 0.45s var(--ease-apple-spring);
  }

  .wall-action-bookmark:hover,
  .wall-action-bookmark[data-active="true"] {
    color: var(--color-x-bookmark);
    background-color: var(--color-x-bookmark-hover);
  }

  .wall-action-share:hover {
    color: var(--color-x-bookmark);
    background-color: var(--color-x-bookmark-hover);
  }

  /* ---- X Feed Skeleton (TwitterChirp-density placeholders) ---- */
  .wall-skeleton-line {
    background-color: var(--color-x-mist);
    border-radius: 4px;
    animation: wall-skeleton-pulse 1.6s ease-in-out infinite;
  }
  @keyframes wall-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }

  /* ---- Compose Box (Tweet / Thought Composer) ---- */
  .wall-compose-card {
    display: flex;
    padding: 16px;
    background-color: var(--color-background);
    border-bottom: 0.5px solid var(--color-border-light);
  }

  .wall-compose-input {
    width: 100%;
    min-height: 56px;
    color: var(--color-text-primary);
    font-family: var(--font-apple-text);
    font-size: 18px;
    line-height: 1.4;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
  }
  .wall-compose-input::placeholder {
    color: var(--color-text-secondary);
  }

  .wall-compose-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 0.5px solid var(--color-border-light);
  }

  .wall-compose-tools {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: -6px;
  }

  .wall-compose-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--color-x-blue);
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 9999px;
    transition: background-color 0.15s ease, transform 0.15s var(--ease-apple-snappy);
  }
  .wall-compose-tool-btn:hover {
    background-color: var(--color-x-blue-hover);
  }
  .wall-compose-tool-btn:active {
    transform: scale(0.88);
  }

  /* ---- Thread Connector Hairline ---- */
  .wall-thread-line {
    flex: 1;
    width: 2px;
    min-height: 12px;
    margin: 4px auto 0;
    background-color: var(--color-border);
    border-radius: 1px;
  }

  /* ---- Verified Badges ---- */
  .x-badge-blue {
    display: inline-flex;
    color: var(--color-x-verified);
    vertical-align: middle;
  }
  .x-badge-gold {
    display: inline-flex;
    color: var(--color-x-gold);
    vertical-align: middle;
  }

  /* ---- Mobile Bottom Tab Bar (Apple iOS HIG Navigation) ---- */
  .wall-mobile-bottomnav {
    display: none;
  }

  @media (max-width: 1023px) {
    .wall-mobile-bottomnav {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: var(--z-sticky);
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: calc(var(--nav-height-mobile) + env(safe-area-inset-bottom, 0px));
      padding-bottom: env(safe-area-inset-bottom, 0px);
      background: var(--material-background);
      border-top: 0.5px solid var(--color-border-light);
      -webkit-backdrop-filter: var(--material-blur);
      backdrop-filter: var(--material-blur);
    }

    .wall-mobile-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      color: var(--color-text-secondary);
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
      transition: transform 0.1s var(--ease-apple);
    }
    .wall-mobile-nav-item:active {
      transform: scale(0.88);
    }
    .wall-mobile-nav-item[aria-current="page"] {
      color: var(--color-x-blue);
    }
    .wall-mobile-nav-item[aria-current="page"] .wall-mobile-nav-label {
      font-weight: 700;
    }
  }

  /* ---- Right Rail Widget Surfaces ("What's happening", "Who to follow") ---- */
  .wall-widget-card {
    margin-bottom: 16px;
    overflow: hidden;
    background-color: var(--color-x-widget);
    border-radius: 16px;
  }

  .wall-widget-header {
    padding: 12px 16px;
    color: var(--color-text-primary);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .wall-widget-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .wall-widget-row:hover {
    background-color: var(--color-x-hover-canvas);
  }

  /* ---- X Search Pill (right rail + mobile explore) ---- */
  .wall-search-pill {
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    background-color: var(--color-x-widget);
    border: 1px solid transparent;
    border-radius: 9999px;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  }
  .wall-search-pill:focus-within {
    background-color: var(--color-background);
    border-color: var(--color-x-blue);
    box-shadow: 0 0 0 1px var(--color-x-blue), 0 0 0 4px var(--color-x-blue-hover);
  }

  /* ---- Apple-executed Chrome Glass (sticky headers on wall pages) ---- */
  .wall-chrome-glass {
    background: var(--material-background);
    border-bottom: 0.5px solid var(--color-border-light);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
  }

  /* ---- Primary Pill Action (X Blue, Apple precision states) ---- */
  .wall-pill-x {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    background-color: var(--color-x-blue);
    border: 0;
    border-radius: 9999px;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, transform 0.15s var(--ease-apple-snappy);
  }
  .wall-pill-x:hover {
    background-color: var(--color-x-blue-btn-hover);
  }
  .wall-pill-x:active {
    background-color: var(--color-x-blue-btn-active);
    transform: scale(0.95);
  }
  .wall-pill-x:disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}

/* ==========================================================================
 * REAL-TIME ANIMATIONS & LIVE WALL INTERACTIONS
 * ========================================================================== */
@keyframes tuwa-live-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.tuwa-live-pop {
  display: inline-block;
  transform-origin: 50% 60%;
  animation: tuwa-live-pop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.25);
}

@keyframes tuwa-heart-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@keyframes tuwa-live-glow {
  0% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0); }
  35% { box-shadow: 0 0 0 7px rgba(0, 113, 227, 0.16); }
  100% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0); }
}
.tuwa-live-glow {
  border-radius: 999px;
  animation: tuwa-live-glow 0.7s ease-out;
}

@keyframes tuwa-live-enter {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.tuwa-live-enter {
  animation: tuwa-live-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tuwa-live-new-badge {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
.tuwa-live-new-badge {
  display: inline-flex;
  animation: tuwa-live-new-badge 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tuwa-live-dot {
  0% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.45); }
  100% { box-shadow: 0 0 0 6px rgba(0, 113, 227, 0); }
}
.tuwa-live-new-dot {
  flex-shrink: 0;
  animation: tuwa-live-dot 1.2s ease-out infinite;
}

@keyframes wallBannerSlide {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.wall-banner-anim {
  animation: wallBannerSlide 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

/* ==========================================================================
 * EDITORIAL PULL QUOTE & NATIVE LYRICS SYSTEMS
 * ========================================================================== */
.pullquote {
  margin: 2.5rem 0;
  padding: 0 0 0 1.25rem;
  color: var(--apple-text);
  font-family: var(--font-apple-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  border-left: 2px solid var(--apple-border);
}
@media (max-width: 734px) {
  .pullquote {
    font-size: 22px;
    line-height: 1.25;
  }
}
.pullquote cite {
  display: block;
  margin-top: 8px;
  color: var(--apple-text-secondary);
  font-family: var(--font-apple-text);
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.01em;
}

.lyrics-block-native {
  max-width: 672px;
  margin: 2rem auto;
}

.lyrics-hint {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  color: var(--apple-text);
  font-family: var(--font-apple-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  background: var(--apple-glass-bg);
  border: 0;
  border-radius: 980px;
  -webkit-backdrop-filter: var(--apple-glass-blur);
  backdrop-filter: var(--apple-glass-blur);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s var(--ease-apple), background-color 0.2s var(--ease-apple);
}
.lyrics-hint:hover {
  color: var(--apple-text);
  background: var(--apple-bg-tertiary);
}
.lyrics-hint svg:last-child {
  transition: transform 0.2s var(--ease-apple);
}
.lyrics-hint:hover svg:last-child {
  transform: translateX(3px);
}

.lyrics-panel {
  max-height: 0;
  margin-top: 8px;
  overflow: hidden;
  background: var(--apple-glass-bg);
  border: 0.5px solid var(--apple-glass-border);
  border-radius: 18px;
  opacity: 0;
  -webkit-backdrop-filter: var(--apple-glass-blur);
  backdrop-filter: var(--apple-glass-blur);
  transform: translateY(-8px);
  transition: opacity 0.4s var(--ease-apple), max-height 0.4s var(--ease-apple), transform 0.4s var(--ease-apple);
}
.lyrics-panel--open {
  max-height: 600px;
  opacity: 1;
  transform: translateY(0);
}

.lyrics-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 0.5px solid var(--apple-separator);
}
.lyrics-panel-title {
  color: var(--apple-text-secondary);
  font-family: var(--font-apple-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.lyrics-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--apple-text-secondary);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 980px;
  transition: color 0.2s var(--ease-apple), background-color 0.2s var(--ease-apple);
}
.lyrics-close-btn:hover {
  color: var(--apple-text);
  background: var(--apple-bg-tertiary);
}

.lyrics-panel-body {
  max-height: 440px;
  padding: 16px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lyrics-line {
  margin: 0;
  padding: 4px 0;
  color: var(--apple-text);
  font-family: var(--font-apple-sans);
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.lyrics-mobile-trigger {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  color: var(--apple-text);
  font-family: var(--font-apple-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  background: var(--apple-glass-bg);
  border: 0;
  border-radius: 980px;
  -webkit-backdrop-filter: var(--apple-glass-blur);
  backdrop-filter: var(--apple-glass-blur);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s var(--ease-apple);
}
.lyrics-mobile-trigger:active {
  background: var(--apple-bg-tertiary);
}

.lyrics-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s var(--ease-apple);
}
.lyrics-sheet-overlay--open {
  pointer-events: auto;
  opacity: 1;
}

.lyrics-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  overflow: hidden;
  background: var(--apple-glass-bg);
  border-radius: 20px 20px 0 0;
  -webkit-backdrop-filter: var(--apple-glass-blur);
  backdrop-filter: var(--apple-glass-blur);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease-apple);
}
.lyrics-sheet--open {
  transform: translateY(0);
}
.lyrics-sheet-grabber {
  flex-shrink: 0;
  width: 36px;
  height: 4px;
  margin: 8px auto 0;
  background: var(--apple-separator);
  border-radius: 980px;
}
.lyrics-sheet-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 0.5px solid var(--apple-separator);
}
.lyrics-sheet-title {
  color: var(--apple-text);
  font-family: var(--font-apple-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lyrics-sheet-body {
  flex: 1;
  padding: 12px 20px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ==========================================================================
 * HIG MICRO-DETAILS & UTILITIES
 * ========================================================================== */
:target {
  scroll-margin-top: calc(var(--nav-height) + env(safe-area-inset-top, 0px) + 12px);
}

.apple-hero-fallback {
  background: linear-gradient(160deg, rgb(29, 29, 31) 0%, rgb(22, 22, 23) 100%);
}
.apple-hero-fallback::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(60% 90% at 78% 12%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(50% 70% at 12% 88%, rgba(0, 113, 227, 0.12) 0%, rgba(0, 113, 227, 0) 55%);
}

.apple-rail {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.apple-rail > * {
  scroll-snap-align: start;
}
.apple-rail::-webkit-scrollbar {
  display: none;
}

.apple-eyebrow {
  font-family: var(--font-apple-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.apple-tile-link:active {
  opacity: 0.8;
  transition: opacity 0.08s var(--ease-apple);
}

.apple-gallery .apple-btn-lg {
  min-height: 44px;
}

/* ==========================================================================
 * UTILITY LAYER
 * ========================================================================== */
@layer utilities {
  .tap-highlight-none {
    -webkit-tap-highlight-color: transparent;
  }

  .scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .text-balance {
    text-wrap: balance;
  }

  .page-container {
    padding-top: max(env(safe-area-inset-top), 0px);
    padding-right: max(env(safe-area-inset-right), 0px);
    padding-bottom: max(env(safe-area-inset-bottom), 0px);
    padding-left: max(env(safe-area-inset-left), 0px);
  }

  .apple-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(128, 128, 128, 0.2);
    border-top-color: var(--color-apple-blue);
    border-radius: 50%;
    animation: apple-spinner-rot 0.75s linear infinite;
  }
  @keyframes apple-spinner-rot {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .skeleton-placeholder {
    background: linear-gradient(90deg, var(--color-background-secondary) 25%, var(--color-border-light) 37%, var(--color-background-secondary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-anim 1.4s ease infinite;
  }
  @keyframes skeleton-shimmer-anim {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .apple-glass-light {
    background: rgba(255, 255, 255, 0.85);
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .apple-glass-dark {
    background: rgba(0, 0, 0, 0.75);
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }

  .apple-content-max {
    max-width: var(--content-max-width);
  }
}

/* ==========================================================================
 * TYPOGRAPHY SCALE UTILITY CLASSES
 * ========================================================================== */
.font-display { font-family: var(--font-apple-display); }
.font-text    { font-family: var(--font-apple-text); }
.font-mono    { font-family: var(--font-apple-mono); }

.text-display { 
  font-size: var(--font-display-size); 
  font-weight: var(--font-display-weight); 
  line-height: var(--font-display-line-height); 
  letter-spacing: var(--font-display-tracking); 
}
.text-h1 { 
  font-size: var(--font-h1-size); 
  font-weight: var(--font-h1-weight); 
  line-height: var(--font-h1-line-height); 
  letter-spacing: var(--font-h1-tracking); 
}
.text-h2 { 
  font-size: var(--font-h2-size); 
  font-weight: var(--font-h2-weight); 
  line-height: var(--font-h2-line-height); 
  letter-spacing: var(--font-h2-tracking); 
}
.text-h3 { 
  font-size: var(--font-h3-size); 
  font-weight: var(--font-h3-weight); 
  line-height: var(--font-h3-line-height); 
  letter-spacing: var(--font-h3-tracking); 
}
.text-body { 
  font-size: var(--font-body-size); 
  font-weight: var(--font-body-weight); 
  line-height: var(--font-body-line-height); 
  letter-spacing: var(--font-body-tracking); 
}
.text-body-bold { 
  font-size: var(--font-body-size); 
  font-weight: 700; 
  line-height: var(--font-body-line-height); 
  letter-spacing: var(--font-body-tracking); 
}
.text-subbody { 
  font-size: var(--font-subbody-size); 
  font-weight: var(--font-subbody-weight); 
  line-height: var(--font-subbody-line-height); 
  letter-spacing: var(--font-subbody-tracking); 
}
.text-caption { 
  font-size: var(--font-caption-size); 
  font-weight: var(--font-caption-weight); 
  line-height: var(--font-caption-line-height); 
  letter-spacing: var(--font-caption-tracking); 
}
.text-caption-bold { 
  font-size: var(--font-caption-size); 
  font-weight: 700; 
  line-height: var(--font-caption-line-height); 
  letter-spacing: var(--font-caption-tracking); 
}
.text-caption-small { 
  font-size: 12px; 
  font-weight: 400; 
  line-height: 1.3333733333; 
  letter-spacing: -0.01em; 
}
.text-caption-small-bold { 
  font-size: 12px; 
  font-weight: 700; 
  line-height: 1.3333733333; 
  letter-spacing: -0.01em; 
}

/* ---- Color Utilities ---- */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.bg-primary     { background-color: var(--color-background); }
.bg-secondary   { background-color: var(--color-background-secondary); }
.bg-tertiary    { background-color: var(--color-background-tertiary); }

/* ---- Layout Utilities ---- */
.max-w-apple-container { max-width: var(--container-max-width); }
.max-w-apple-content   { max-width: var(--content-max-width); }

/* ==========================================================================
 * ACCESSIBILITY (A11y) & PRINT ENGINE
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .tuwa-live-pop,
  .tuwa-live-glow,
  .tuwa-live-enter,
  .tuwa-live-new-badge,
  .tuwa-live-new-dot,
  .wall-banner-anim {
    animation: none !important;
  }
  .lyrics-panel,
  .lyrics-sheet,
  .lyrics-sheet-overlay,
  .lyrics-hint,
  .lyrics-close-btn,
  .lyrics-mobile-trigger {
    transition-duration: 0.01ms !important;
  }
  .lyrics-panel {
    max-height: none;
    opacity: 1;
    transform: none;
  }
  .lyrics-sheet {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .apple-nav,
  .apple-globalnav,
  .wall-sticky-header,
  .wall-feed-tabs,
  .wall-mobile-bottomnav,
  .wall-chrome-glass,
  .lyrics-panel,
  .lyrics-sheet,
  .lyrics-hint,
  .lyrics-mobile-trigger,
  .apple-glass {
    background: var(--color-background) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (prefers-contrast: high) {
  :root {
    --color-text-primary:   #000000;
    --color-text-secondary: #000000;
    --color-border:         #000000;
    --color-border-light:   #000000;
    --color-separator:      #000000;
  }
}

@media print {
  .apple-globalnav,
  .apple-globalfooter,
  .apple-button,
  .wall-sidebar-left,
  .wall-rail-right,
  .wall-mobile-bottomnav,
  .wall-actions-bar,
  .wall-compose-card {
    display: none !important;
  }
  
  body {
    color: #000000 !important;
    background: #ffffff !important;
  }
  
  a {
    color: #000000 !important;
    text-decoration: underline !important;
  }
}

/* ==========================================================================
 * WALL ON MOBILE WEB & PWA — SAFE-AREA / NAVIGATION HARDENING
 * Applies to /wall/* only (rules are wall-scoped class names).
 * ========================================================================== */

/* iOS notch / standalone-PWA status bar: keep sticky wall chrome below the
 * sensor housing while still letting the glass extend under it. */
.wall-safe-top {
  padding-top: env(safe-area-inset-top, 0px) !important;
}

/* Mobile home top bar: sticky, full safe-area height, sits above the tabs. */
.wall-mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  box-sizing: border-box;
  height: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}

/* Feed tab bar sticks directly below the mobile top bar (53px) + safe area.
 * Desktop is unaffected (max-width: 639px only). */
@media (max-width: 639px) {
  .wall-feed-tabs {
    top: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
  }
}

/* Live "new thoughts" pill clears the fixed header stack (53 + 53 + gap) and
 * the status-bar inset without floating under the notch. */
.wall-new-banner-top {
  top: calc(116px + env(safe-area-inset-top, 0px));
}
@media (min-width: 640px) {
  .wall-new-banner-top {
    top: 64px;
  }
}

/* Dynamic viewport for mobile wall pages — no jump when the browser
 * address bar collapses. Falls back to 100vh where dvh is unsupported. */
.wall-dvh {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Bottom tab bar: guaranteed tap area above the home indicator and a
 * crisp edge so it reads as app chrome (not wallpaper). */
@media (max-width: 639px) {
  .wall-mobile-bottomnav {
    height: calc(var(--nav-height-mobile) + max(4px, env(safe-area-inset-bottom, 0px)));
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
  }
  .wall-mobile-nav-item {
    height: var(--nav-height-mobile);
  }
}

/* Feed content bottom clearance: covers the floating tab bar (~49px) plus the
 * home indicator plus breathing room, so nothing is ever hidden behind it. */
.wall-main-bottom {
  padding-bottom: max(85px, calc(var(--nav-height-mobile) + env(safe-area-inset-bottom, 0px) + 24px));
}
@media (min-width: 640px) {
  .wall-main-bottom {
    padding-bottom: 48px;
  }
}

/* ==========================================================================
 * WALL BY OPENTUWA — LIGHT-ONLY ENFORCEMENT
 * Wall ignores device/browser dark mode and always renders light. This block
 * ensures that even if a UA evaluates `prefers-color-scheme: dark` or a
 * stale `wall-theme=dark` leaks through, the page stays light and crawlers
 * (Googlebot, Bingbot) see a consistent light snapshot for SEO / social
 * previews.
 * ========================================================================== */
html { color-scheme: only light; }
html.dark { color-scheme: only light !important; }

@media (prefers-color-scheme: dark) {
  html { color-scheme: only light !important; }
  /* Override any stray dark CSS vars that might be sniffed by a crawler
     that parses external stylesheets before JS runs. */
  html:not(.dark) {
    --color-background: #ffffff !important;
    --color-background-secondary: #f5f5f7 !important;
    --apple-bg: #ffffff !important;
    --apple-bg-secondary: #f5f5f7 !important;
  }
}