/* Esha AI — Shared Components */

@layer components {
  /* -- Header & Navigation -- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    background-color: var(--color-bg);
    border-block-end: 1px solid var(--color-border);
  }

  @supports (background-color: color-mix(in srgb, white 85%, transparent)) {
    .site-header {
      background-color: color-mix(in srgb, var(--color-bg) 86%, transparent);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-block-size: 68px;
  }

  .brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    color: var(--color-text);
    text-decoration: none;
    flex-shrink: 0;
  }

  .brand-lockup svg {
    inline-size: 122px;
    block-size: 44px;
  }

  .brand-lockup--footer svg {
    inline-size: 112px;
    block-size: 40px;
  }

  .brand-lockup--footer img {
    inline-size: 38px;
    block-size: 38px;
    flex-shrink: 0;
  }

  .brand-wordmark {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  .primary-nav {
    display: none;
  }

  .primary-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.8vw, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .primary-nav a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
  }

  .primary-nav a:hover,
  .primary-nav a[aria-current="page"] {
    color: var(--color-text);
  }

  .primary-nav a[aria-current="page"] {
    font-weight: 600;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .header-cta {
    display: none;
  }

  @media (min-width: 960px) {
    .primary-nav {
      display: block;
    }

    .header-cta {
      display: inline-flex;
    }

    .nav-toggle,
    .mobile-drawer {
      display: none !important;
    }
  }

  /* -- Icon Buttons & Theme Toggle -- */
  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition:
      border-color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
  }

  .icon-btn:hover {
    border-color: var(--color-muted);
  }

  .icon-btn svg {
    inline-size: 18px;
    block-size: 18px;
  }

  /* Accessible 2-state theme toggle driven cleanly by CSS <meta name="color-scheme"> */
  .theme-toggle [data-theme-state="dark"] {
    display: inline-flex;
  }

  .theme-toggle [data-theme-state="light"] {
    display: none;
  }

  @media (prefers-color-scheme: dark) {
    :root:has(> head > meta[name="color-scheme"][content="light dark"]) .theme-toggle [data-theme-state="dark"] {
      display: none;
    }
    :root:has(> head > meta[name="color-scheme"][content="light dark"]) .theme-toggle [data-theme-state="light"] {
      display: inline-flex;
    }
  }

  :root:has(> head > meta[name="color-scheme"][content="dark"]) .theme-toggle [data-theme-state="dark"] {
    display: none;
  }
  :root:has(> head > meta[name="color-scheme"][content="dark"]) .theme-toggle [data-theme-state="light"] {
    display: inline-flex;
  }

  :root:has(> head > meta[name="color-scheme"][content="light"]) .theme-toggle [data-theme-state="dark"] {
    display: inline-flex;
  }
  :root:has(> head > meta[name="color-scheme"][content="light"]) .theme-toggle [data-theme-state="light"] {
    display: none;
  }

  /* -- Mobile Navigation Drawer -- */
  .mobile-drawer {
    border-block-start: 1px solid var(--color-border);
    background-color: var(--color-bg);
    padding-block: var(--space-4) var(--space-6);
  }

  .mobile-drawer[hidden] {
    display: none;
  }

  .mobile-drawer ul {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-drawer a {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
  }

  .mobile-drawer a[aria-current="page"] {
    color: var(--color-accent);
    font-weight: 600;
  }

  .mobile-drawer-cta {
    margin-block-start: var(--space-4);
  }

  /* -- Shared Buttons -- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 44px;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition:
      transform var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
  }

  .btn--sm {
    min-block-size: 44px;
    padding: 8px 18px;
  }

  .btn-primary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--color-accent-fill);
    color: var(--color-accent-on-fill);
    box-shadow: var(--shadow-sm);
  }

  .btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, var(--color-cta-hover-a) 0%, var(--color-cta-hover-b) 100%);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
  }

  .btn-primary:hover::before {
    opacity: 1;
  }

  .btn-primary:hover {
    box-shadow: var(--shadow-md);
  }

  .btn-secondary {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
  }

  .btn-secondary:hover {
    border-color: var(--color-muted);
  }

  @media (prefers-reduced-motion: no-preference) {
    .btn:active {
      transform: scale(0.985);
    }
  }

  /* -- Subtle Right-Side 1%-100% Scroll Meter -- */
  .scroll-meter {
    position: fixed;
    inset-inline-end: 10px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    user-select: none;
    opacity: 0.42;
    transition: opacity var(--dur-base) var(--ease-out);
  }

  .scroll-meter.is-scrolling {
    opacity: 0.78;
  }

  .scroll-meter-track {
    position: relative;
    inline-size: 2px;
    block-size: 84px;
    border-radius: var(--radius-pill);
    background-color: var(--color-border);
    overflow: hidden;
  }

  .scroll-meter-fill {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    background: var(--brand-gradient);
    transform-origin: top center;
    transform: scaleY(var(--scroll-progress, 0.01));
  }

  .scroll-meter-value {
    display: none;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--color-muted);
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  @media (min-width: 960px) {
    .scroll-meter {
      inset-inline-end: 14px;
    }

    .scroll-meter-value {
      display: block;
    }
  }

  @keyframes scrollMeterScale {
    from {
      transform: scaleY(0.01);
    }
    to {
      transform: scaleY(1);
    }
  }

  /* CSS scroll-driven progress declared after animation shorthand per spec */
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .scroll-meter-fill {
        animation: scrollMeterScale linear forwards;
        animation-timeline: scroll(root block);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .scroll-meter {
      transition: none;
    }
  }

  /* -- Shared Footer -- */
  .site-footer {
    border-block-start: 1px solid var(--color-border);
    padding-block: var(--space-12) var(--space-8);
    background-color: var(--color-bg);
  }

  .footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-block-end: var(--space-8);
  }

  @media (min-width: 768px) {
    .footer-top {
      grid-template-columns: 1.3fr 1fr 1fr;
      align-items: start;
    }
  }

  .footer-brand p {
    margin-block-start: var(--space-3);
    max-inline-size: 30ch;
    font-size: var(--text-sm);
    color: var(--color-muted);
  }

  .footer-col-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .footer-links {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
  }

  .footer-links a:hover {
    color: var(--color-accent);
  }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-muted);
  }

  .footer-bottom p {
    margin: 0;
    font-size: var(--text-xs);
  }

  /* -- Shared Section Heads, Cards & Status Badges (W2.1) -- */
  .section-head {
    max-inline-size: 640px;
    margin-block-end: var(--space-8);
  }

  .section-eyebrow {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .section-head h2 {
    margin: 0 0 var(--space-3);
  }

  .section-head p {
    margin: 0;
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    color: var(--color-muted);
  }

  .card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition:
      border-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
  }

  .card:hover {
    border-color: var(--color-muted);
    box-shadow: var(--shadow-md);
  }

  .card h3 {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.3;
  }

  .card p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-muted);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .badge-marker {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  .badge--live {
    background-color: var(--color-live-bg);
    color: var(--raw-live-light);
  }

  .badge--build {
    background-color: var(--color-build-bg);
    color: var(--raw-build-light);
  }

  .badge--planned {
    background-color: var(--color-planned-bg);
    color: var(--raw-planned-light);
  }

  @supports (color: light-dark(white, black)) {
    .badge--live {
      color: light-dark(var(--raw-live-light), #47C18A);
    }

    .badge--build {
      color: light-dark(var(--raw-build-light), #E89D1A);
    }

    .badge--planned {
      color: light-dark(var(--raw-planned-light), #B5ACA5);
    }
  }

  @supports not (color: light-dark(white, black)) {
    @media (prefers-color-scheme: dark) {
      .badge--live { color: #47C18A; }
      .badge--build { color: #E89D1A; }
      .badge--planned { color: #B5ACA5; }
    }
  }

  /* Non-color shape cue alongside color */
  .badge--build .badge-marker {
    border-radius: 2px;
    transform: rotate(45deg);
  }

  .badge--planned .badge-marker {
    background-color: transparent;
    border: 1.5px solid currentColor;
  }

  @media (prefers-reduced-motion: reduce) {
    .card {
      transition: none;
    }
  }

  /* High Contrast / Forced Colors preservation for interactive & status tokens */
  @media (forced-colors: active) {
    .btn,
    .badge,
    .card,
    .step-card,
    .prose-card,
    .faq-item {
      border: 1px solid CanvasText;
    }

    .badge-marker {
      forced-color-adjust: none;
    }
  }
}