/* ==========================================================================
   DESIGN 3: AURORA BENTO OS / SPATIAL COMMAND PORTAL
   Canadian Northern Lights Glassmorphic Bento + Staggered 3D Era Card-Flip Wave + ⌘K
   ========================================================================== */
@layer tokens {
  :root {
    --in-oklab: ;
    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* Borealis Dark Palette (Default) */
    --aurora-bg-dark: #050811;
    --aurora-glass-dark: rgba(13, 20, 36, 0.95);
    --aurora-glass-back-dark: rgba(33, 21, 10, 0.97);
    --aurora-elevated-dark: rgba(255, 255, 255, 0.06);
    --aurora-fg-dark: #f1f5f9;
    --aurora-sec-dark: #94a3b8;
    --aurora-border-dark: rgba(148, 163, 184, 0.22);
    --aurora-emerald-dark: #34d399;
    --aurora-violet-dark: #c084fc;
    --aurora-cyan-dark: #22d3ee;
    --aurora-gold-dark: #fbbf24;

    /* Architectural Multi-Tone Light Palette (Cool Slate Canvas + Tinted Bento Surfaces) */
    --aurora-bg-light: #e3ebf4;
    --aurora-glass-light: rgba(255, 255, 255, 0.94);
    --aurora-glass-back-light: rgba(255, 249, 232, 0.98);
    --aurora-elevated-light: rgba(15, 23, 42, 0.055);
    --aurora-fg-light: #0f172a;
    --aurora-sec-light: #334155;
    --aurora-border-light: rgba(15, 23, 42, 0.13);
    --aurora-emerald-light: #047857;
    --aurora-violet-light: #6d28d9;
    --aurora-cyan-light: #0369a1;
    --aurora-gold-light: #b45309;

    --card-shadow:
      0 1px 2px rgba(2, 6, 23, 0.35),
      0 10px 26px -6px rgba(2, 6, 23, 0.45);
  }

  @supports (background: linear-gradient(in oklab, white, black)) {
    :root {
      --in-oklab: in oklab;
    }
  }

  :root {

    --bg-canvas: var(--aurora-bg-dark);
    --bg-glass: var(--aurora-glass-dark);
    --bg-glass-back: var(--aurora-glass-back-dark);
    --bg-elevated: var(--aurora-elevated-dark);
    --fg-primary: var(--aurora-fg-dark);
    --fg-secondary: var(--aurora-sec-dark);
    --border-glass: var(--aurora-border-dark);
    --accent-emerald: var(--aurora-emerald-dark);
    --accent-violet: var(--aurora-violet-dark);
    --accent-cyan: var(--aurora-cyan-dark);
    --accent-gold: var(--aurora-gold-dark);
    --focus-ring: #34d399;

    --modal-bg: #0c1222;
    --modal-fg: #f1f5f9;
    --modal-border: rgba(52, 211, 153, 0.32);
    --modal-divider: rgba(148, 163, 184, 0.2);
    --modal-input-border: rgba(148, 163, 184, 0.34);
    --modal-accent: #34d399;
    --modal-accent-fg: #03150e;
    --modal-chip-bg: rgba(255, 255, 255, 0.06);
    --modal-chip-hover: rgba(52, 211, 153, 0.14);
    --modal-input-bg: rgba(5, 8, 17, 0.8);
    --switcher-bg: rgba(15, 22, 39, 0.85);
    --switcher-border: rgba(148, 163, 184, 0.24);
    --switcher-active-bg: #34d399;
    --switcher-active-fg: #03150e;
  }

  :root[data-theme="light"] {
    --bg-canvas: var(--aurora-bg-light);
    --bg-glass: var(--aurora-glass-light);
    --bg-glass-back: var(--aurora-glass-back-light);
    --bg-elevated: var(--aurora-elevated-light);
    --fg-primary: var(--aurora-fg-light);
    --fg-secondary: var(--aurora-sec-light);
    --border-glass: var(--aurora-border-light);
    --accent-emerald: var(--aurora-emerald-light);
    --accent-violet: var(--aurora-violet-light);
    --accent-cyan: var(--aurora-cyan-light);
    --accent-gold: var(--aurora-gold-light);
    --focus-ring: #047857;
    --card-shadow:
      0 1px 2px rgba(15, 23, 42, 0.05),
      0 8px 22px -6px rgba(15, 23, 42, 0.08);

    --modal-bg: #ffffff;
    --modal-fg: #0f172a;
    --modal-border: rgba(4, 120, 87, 0.3);
    --modal-divider: rgba(15, 23, 42, 0.14);
    --modal-input-border: rgba(15, 23, 42, 0.28);
    --modal-accent: #047857;
    --modal-accent-fg: #ffffff;
    --modal-chip-bg: rgba(15, 23, 42, 0.05);
    --modal-chip-hover: rgba(4, 120, 87, 0.1);
    --modal-input-bg: #f8fafc;
    --switcher-bg: rgba(255, 255, 255, 0.92);
    --switcher-border: rgba(15, 23, 42, 0.16);
    --switcher-active-bg: #047857;
    --switcher-active-fg: #ffffff;
  }
}

@layer layout {
  body.aurora-body {
    font-family: var(--font-sans);
    background-color: var(--bg-canvas);
    background-image:
      radial-gradient(ellipse 65% 50% at 18% 8%, rgba(52, 211, 153, 0.14), transparent 65%),
      radial-gradient(ellipse 55% 48% at 84% 14%, rgba(192, 132, 252, 0.14), transparent 65%),
      radial-gradient(ellipse 60% 45% at 52% 96%, rgba(34, 211, 238, 0.1), transparent 65%);
    color: var(--fg-primary);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    padding: 0.6rem 0.75rem;
    transition: background-image 0.5s ease;
  }

  body.aurora-body[data-flipped="true"] {
    background-image:
      radial-gradient(ellipse 65% 50% at 18% 12%, rgba(251, 191, 36, 0.15), transparent 65%),
      radial-gradient(ellipse 55% 48% at 82% 18%, rgba(249, 115, 22, 0.12), transparent 65%),
      radial-gradient(ellipse 60% 45% at 50% 94%, rgba(52, 211, 153, 0.1), transparent 65%);
  }

  /* Spatial OS Top Dock */
  .aurora-dock {
    display: flex;
    flex-wrap: wrap;
    align-items: safe center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.42rem 0.85rem;
    border-radius: 16px;
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass);
  }

  .os-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: safe center;
    gap: 0.6rem;
  }

  .os-orb {
    inline-size: 11px;
    block-size: 11px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-emerald), var(--accent-cyan));
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.55);
  }

  body[data-flipped="true"] .os-orb {
    background: linear-gradient(135deg, var(--accent-gold), #f97316);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.55);
  }

  .os-title-str {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  /* Signature 3D Era Flip Trigger Button */
  .era-flip-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.3rem 0.78rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent-emerald), var(--accent-cyan));
    color: #03150e;
    box-shadow: 0 4px 16px rgba(52, 211, 153, 0.25);
    transition: transform 0.16s ease, filter 0.16s ease;
  }

  body[data-flipped="true"] .era-flip-cta {
    background: linear-gradient(135deg, var(--accent-gold), #fb923c);
    color: #1c1004;
  }

  .era-flip-cta:hover {
    filter: brightness(1.06);
  }

  .lens-pills {
    display: inline-flex;
    flex-wrap: wrap;
    flex-wrap: balance;
    align-items: center;
    gap: 0.2rem;
    padding: 0.18rem;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-glass);

    @media (max-width: 640px) {
      display: none;
    }
  }

  .lens-btn {
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--fg-secondary);
  }

  .lens-btn[aria-pressed="true"] {
    background: var(--fg-primary);
    color: var(--bg-canvas);
    font-weight: 700;
  }

  .dock-right {
    display: flex;
    flex-wrap: wrap;
    align-items: safe center;
    gap: 0.42rem;
  }

  .cmdk-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.26rem 0.62rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--bg-elevated);
    border: 1px solid var(--border-glass);
    color: var(--fg-primary);
  }

  .dock-site-link {
    color: var(--accent-emerald);
    border-color: rgba(52, 211, 153, 0.32);

    @media (max-width: 1120px) {
      display: none;
    }
  }

  /* 12x3 Spatial Bento Grid with Lens Re-Choreography (All 10 named areas mapped in every lens) */
  .aurora-bento {
    display: grid;
    grid-template-columns:
      repeat(5, minmax(0, 0.85fr))
      repeat(3, minmax(0, 0.95fr))
      repeat(4, minmax(0, 1.225fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    min-block-size: 0;
    min-inline-size: 0;
    grid-template-areas:
      "portal  portal  portal  portal  portal  clocks  clocks  clocks  isp     isp     mon     mon"
      "portal  portal  portal  portal  portal  sandbox sandbox sandbox voip    voip    vpn     vpn"
      "chron   chron   chron   chron   reput   reput   reput   reput   desk    desk    desk    desk";
  }

  body[data-lens="services"] .aurora-bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "isp     isp     isp     mon     mon     mon     voip    voip    voip    vpn     vpn     vpn"
      "sandbox sandbox sandbox sandbox portal  portal  portal  portal  desk    desk    desk    desk"
      "chron   chron   chron   chron   clocks  clocks  clocks  clocks  reput   reput   reput   reput";
  }

  body[data-lens="continuity"] .aurora-bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "chron   chron   chron   chron   clocks  clocks  clocks  clocks  desk    desk    desk    desk"
      "portal  portal  portal  portal  reput   reput   reput   reput   sandbox sandbox sandbox sandbox"
      "isp     isp     isp     mon     mon     mon     voip    voip    voip    vpn     vpn     vpn";
  }

  @media (max-width: 1023.98px), (max-height: 679.98px) {
    .aurora-bento {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto;
      grid-template-areas:
        "portal  portal"
        "clocks  sandbox"
        "isp     mon"
        "voip    vpn"
        "chron   reput"
        "desk    desk";
    }

    body[data-lens="services"] .aurora-bento {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto;
      grid-template-areas:
        "isp     mon"
        "voip    vpn"
        "sandbox clocks"
        "portal  portal"
        "chron   reput"
        "desk    desk";
    }

    body[data-lens="continuity"] .aurora-bento {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto;
      grid-template-areas:
        "desk    desk"
        "chron   clocks"
        "reput   sandbox"
        "portal  portal"
        "isp     mon"
        "voip    vpn";
    }
  }

  @media (max-width: 640px) {
    .aurora-bento,
    body[data-lens="services"] .aurora-bento,
    body[data-lens="continuity"] .aurora-bento {
      grid-template-columns: 1fr;
      grid-template-areas:
        "portal"
        "clocks"
        "sandbox"
        "isp"
        "mon"
        "voip"
        "vpn"
        "chron"
        "reput"
        "desk";
    }
  }

  .aurora-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: safe center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.34rem 0.85rem;
    border-radius: 12px;
    background: var(--bg-glass);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border-glass);
    font-size: 0.72rem;
    color: var(--fg-secondary);
  }
}

@layer bento {
  .a-portal  { grid-area: portal;  view-transition-name: a-portal;  --stagger: 0ms; }
  .a-clocks  { grid-area: clocks;  view-transition-name: a-clocks;  --stagger: 45ms; }
  .a-isp     { grid-area: isp;     view-transition-name: a-isp;     --stagger: 90ms; }
  .a-mon     { grid-area: mon;     view-transition-name: a-mon;     --stagger: 125ms; }
  .a-sandbox { grid-area: sandbox; view-transition-name: a-sandbox; --stagger: 80ms; }
  .a-voip    { grid-area: voip;    view-transition-name: a-voip;    --stagger: 150ms; }
  .a-vpn     { grid-area: vpn;     view-transition-name: a-vpn;     --stagger: 185ms; }
  .a-chron   { grid-area: chron;   view-transition-name: a-chron;   --stagger: 110ms; }
  .a-reput   { grid-area: reput;   view-transition-name: a-reput;   --stagger: 155ms; }
  .a-desk    { grid-area: desk;    view-transition-name: a-desk;    --stagger: 200ms; }

  /* 3D Dual-Face Flip Card Architecture (Per-slot perspective + no nested backdrop-filter for GPU-pure preserve-3d) */
  .flip-slot {
    container: aurora-tile / inline-size;
    position: relative;
    min-block-size: 0;
    min-inline-size: 0;
    perspective: 1100px;
    view-transition-class: bento-vt;
  }

  @media (max-width: 1023.98px), (max-height: 679.98px) {
    .flip-slot {
      min-block-size: 185px;
    }
    .a-portal.flip-slot {
      min-block-size: 270px;
    }
  }

  .flip-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "face";
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 0;
    min-block-size: inherit;
    transform-style: preserve-3d;

    @media (max-width: 1023.98px), (max-height: 679.98px) {
      grid-template-rows: auto;
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: transform 580ms cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: var(--stagger, 0ms);
    }
  }

  body[data-flipped="true"] .flip-inner {
    @media (prefers-reduced-motion: no-preference) {
      transform: rotateX(180deg);
    }
  }

  .card-face {
    grid-area: face;
    min-inline-size: 0;
    min-block-size: 0;
    max-inline-size: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 18px;
    overflow: clip;
    padding: clamp(0.68rem, 1.15dvh, 1rem) clamp(0.8rem, 1.1vw, 1.15rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.38rem;
    border: 1px solid var(--border-glass);
    box-shadow: var(--card-shadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .card-face.face-front {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    background: var(--bg-glass);
    transform: rotateX(0deg);
  }

  .card-face.face-back {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    background: linear-gradient(
      150deg var(--in-oklab),
      var(--bg-glass-back) 0%,
      color-mix(in oklab, var(--bg-glass-back) 82%, #f59e0b 18%) 100%
    );
    border-color: rgba(245, 158, 11, 0.42);

    @media (prefers-reduced-motion: no-preference) {
      transform: rotateX(180deg);
    }
  }

  /* Reduced-motion non-spatial crossfade fallback for 3D flip */
  @media (prefers-reduced-motion: reduce) {
    .card-face.face-back {
      opacity: 0;
      pointer-events: none;
    }
    body[data-flipped="true"] .card-face.face-front {
      opacity: 0;
      pointer-events: none;
    }
    body[data-flipped="true"] .card-face.face-back {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .card-face:hover {
    border-color: var(--accent-emerald);
  }

  body[data-flipped="true"] .card-face.face-back:hover {
    border-color: var(--accent-gold);
  }

  /* Static Glass Card (Non-flipping widgets like Live Dual Clocks & Live Sandbox) */
  .bento-card.glass-static {
    container: aurora-tile / inline-size;
    position: relative;
    min-block-size: 0;
    min-inline-size: 0;
    overflow: clip;
    border-radius: 18px;
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass);
    box-shadow: var(--card-shadow);
    padding: clamp(0.68rem, 1.15dvh, 1rem) clamp(0.8rem, 1.1vw, 1.15rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.4rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    view-transition-class: bento-vt;
  }

  .bento-card.glass-static:hover {
    border-color: var(--accent-emerald);
  }

  /* ==========================================================================
     MULTI-TONE ARCHITECTURAL BENTO SURFACE ZONING
     Breaks flat white monotony by pairing Dark-Anchor NOC/Hero focal cards
     (via component-scoped `color-scheme: dark`) with jewel/pastel service zones.
     ========================================================================== */

  /* 1. Flagship Hero Portal — Always Deep Borealis Midnight Anchor (Front) & Espresso Gold (Back) */
  .a-portal .card-face.face-front {
    color-scheme: dark;
    --fg-primary: #f8fafc;
    --fg-secondary: #cbd5e1;
    --bg-elevated: rgba(255, 255, 255, 0.085);
    --border-glass: rgba(52, 211, 153, 0.32);
    --accent-emerald: #34d399;
    --accent-cyan: #22d3ee;
    color: var(--fg-primary);
    accent-color: var(--accent-emerald);
    background:
      radial-gradient(ellipse 80% 65% at 14% 10%, rgba(52, 211, 153, 0.24), transparent 64%),
      radial-gradient(ellipse 68% 58% at 90% 88%, rgba(34, 211, 238, 0.19), transparent 64%),
      linear-gradient(145deg var(--in-oklab), #071923 0%, #0b142c 56%, #131d3a 100%);
    border-color: rgba(52, 211, 153, 0.34);
  }

  .a-portal .card-face.face-back {
    color-scheme: dark;
    --fg-primary: #fef3c7;
    --fg-secondary: #fde68a;
    --bg-elevated: rgba(251, 191, 36, 0.12);
    --border-glass: rgba(251, 191, 36, 0.36);
    --accent-gold: #fbbf24;
    color: var(--fg-primary);
    accent-color: var(--accent-gold);
    background:
      radial-gradient(ellipse 78% 60% at 18% 12%, rgba(251, 191, 36, 0.25), transparent 64%),
      linear-gradient(145deg var(--in-oklab), #241507 0%, #170e06 100%);
    border-color: rgba(251, 191, 36, 0.44);
  }

  /* 2. Live SLA Telemetry Sandbox — Authentic Dark NOC Instrument Console */
  .a-sandbox.bento-card.glass-static {
    color-scheme: dark;
    --fg-primary: #f1f5f9;
    --fg-secondary: #94a3b8;
    --bg-elevated: rgba(255, 255, 255, 0.08);
    --border-glass: rgba(34, 211, 238, 0.26);
    --accent-emerald: #34d399;
    --accent-cyan: #22d3ee;
    color: var(--fg-primary);
    accent-color: var(--accent-cyan);
    background:
      radial-gradient(ellipse 72% 60% at 86% 14%, rgba(34, 211, 238, 0.18), transparent 65%),
      linear-gradient(155deg var(--in-oklab), #0b1628 0%, #101e36 100%);
    border-color: rgba(34, 211, 238, 0.3);
  }

  /* 3. Distinct Borealis Undertones in Dark Mode for Service & Foundation Cards */
  .a-isp .card-face.face-front {
    --accent-emerald: #38bdf8;
    background: linear-gradient(155deg var(--in-oklab), #0b192c 0%, #0e2239 100%);
    border-color: rgba(56, 189, 248, 0.26);
  }

  .a-mon .card-face.face-front {
    background: linear-gradient(155deg var(--in-oklab), #081c19 0%, #0c2621 100%);
    border-color: rgba(52, 211, 153, 0.26);
  }

  .a-voip .card-face.face-front {
    --accent-emerald: #c084fc;
    background: linear-gradient(155deg var(--in-oklab), #16112a 0%, #1e1638 100%);
    border-color: rgba(192, 132, 252, 0.26);
  }

  .a-vpn .card-face.face-front {
    --accent-emerald: #2dd4bf;
    background: linear-gradient(155deg var(--in-oklab), #081c22 0%, #0c272f 100%);
    border-color: rgba(45, 212, 191, 0.26);
  }

  .a-chron.bento-card.glass-static {
    background: linear-gradient(125deg var(--in-oklab), #1e160b 0%, #0f172a 52%, #09201b 100%);
    border-color: rgba(251, 191, 36, 0.24);
  }

  .a-reput.bento-card.glass-static {
    --accent-emerald: #818cf8;
    background: linear-gradient(155deg var(--in-oklab), #10152b 0%, #151d3a 100%);
    border-color: rgba(129, 140, 248, 0.25);
  }

  .a-desk.bento-card.glass-static {
    background: linear-gradient(135deg var(--in-oklab), #08201a 0%, #0b1a29 100%);
    border-color: rgba(52, 211, 153, 0.3);
  }

  /* 4. Rich Multi-Surface Bento Zoning in Light UI (Eliminates Flat-White Monotony) */
  :root[data-theme="light"] {
    .a-isp .card-face.face-front {
      --accent-emerald: #0369a1;
      background: linear-gradient(155deg var(--in-oklab), #f2f9ff 0%, #dff0fe 100%);
      border-color: rgba(2, 132, 199, 0.25);
    }

    .a-mon .card-face.face-front {
      --accent-emerald: #047857;
      background: linear-gradient(155deg var(--in-oklab), #eefdf6 0%, #d4f7e6 100%);
      border-color: rgba(5, 150, 105, 0.25);
    }

    .a-voip .card-face.face-front {
      --accent-emerald: #6d28d9;
      background: linear-gradient(155deg var(--in-oklab), #f6f3ff 0%, #e7dfff 100%);
      border-color: rgba(124, 58, 237, 0.24);
    }

    .a-vpn .card-face.face-front {
      --accent-emerald: #0f766e;
      background: linear-gradient(155deg var(--in-oklab), #effefb 0%, #cff7ee 100%);
      border-color: rgba(13, 148, 136, 0.25);
    }

    .a-clocks.bento-card.glass-static {
      background: linear-gradient(155deg var(--in-oklab), #ffffff 0%, #f3f7fc 100%);
      border-color: rgba(15, 23, 42, 0.14);
    }

    .a-clocks .clock-box:first-child {
      background: rgba(245, 158, 11, 0.1);
      border-color: rgba(217, 119, 6, 0.28);
    }

    .a-clocks .clock-box.active-hq {
      background: rgba(16, 185, 129, 0.11);
      border-color: rgba(5, 150, 105, 0.36);
    }

    .a-chron.bento-card.glass-static {
      background: linear-gradient(125deg var(--in-oklab), #fff9eb 0%, #f8fafc 50%, #e8fbf2 100%);
      border-color: rgba(217, 119, 6, 0.26);
    }

    .a-reput.bento-card.glass-static {
      --accent-emerald: #4338ca;
      background: linear-gradient(155deg var(--in-oklab), #f5f7ff 0%, #e2e8ff 100%);
      border-color: rgba(79, 70, 229, 0.24);
    }

    .a-desk.bento-card.glass-static {
      background: linear-gradient(135deg var(--in-oklab), #e9fcf4 0%, #f2f9ff 100%);
      border-color: rgba(4, 120, 87, 0.28);
    }
  }

  /* Card Typography & Badges */
  .os-eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    min-inline-size: 0;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-emerald);

    > span:first-child {
      min-inline-size: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .face-back .os-eyebrow {
    color: var(--accent-gold);
  }

  .os-pill {
    padding: 0.12rem 0.44rem;
    border-radius: 999px;
    font-size: 0.6rem;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-glass);
    color: var(--fg-secondary);
  }

  .aurora-h1 {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 0.92rem + 1.05vw, 2.05rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
  }

  .aurora-lead {
    font-size: clamp(0.76rem, 0.71rem + 0.2vw, 0.87rem);
    line-height: 1.44;
    color: var(--fg-secondary);

    @media (min-width: 1024px) and (min-height: 680px) {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      line-clamp: 3;
      overflow: clip;
    }
  }

  .aurora-h2 {
    font-family: var(--font-display);
    font-size: clamp(0.88rem, 0.8rem + 0.24vw, 1.02rem);
    font-weight: 700;
    line-height: 1.18;
  }

  .aurora-p {
    font-size: 0.74rem;
    line-height: 1.38;
    color: var(--fg-secondary);

    @media (min-width: 1024px) and (min-height: 680px) {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      overflow: clip;
    }
  }

  .portal-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .aurora-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.55rem;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-glass);
    transition: border-color 0.18s ease, background-color 0.18s ease;
  }

  a.aurora-chip:hover {
    border-color: var(--accent-emerald);
  }

  .portal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
  }

  .aurora-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--accent-emerald);
    color: #03150e;
    transition: filter 0.16s ease;
  }

  .aurora-btn-primary:hover {
    filter: brightness(1.07);
  }

  .face-back .aurora-btn-primary {
    background: var(--accent-gold);
    color: #1c1004;
  }

  :root[data-theme="light"] .aurora-btn-primary {
    color: #ffffff;
  }

  :root[data-theme="light"] .a-portal .face-front .aurora-btn-primary {
    color: #03150e;
  }

  :root[data-theme="light"] .a-portal .face-back .aurora-btn-primary {
    color: #1c1004;
  }

  .aurora-btn-cta-sm {
    padding: 0.28rem 0.72rem;
    font-size: 0.7rem;
  }

  .aurora-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.38rem 0.74rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-glass);
    color: var(--fg-primary);
  }

  .aurora-btn-sm {
    padding: 0.2rem 0.54rem;
    font-size: 0.67rem;
  }

  /* Compact 1-Row Adaptation for Hero Portal in Secondary Lenses & Narrow Containers */
  @media (min-width: 1024px) and (min-height: 680px) {
    body:is([data-lens="services"], [data-lens="continuity"]) .a-portal {
      .portal-badges {
        display: none;
      }
      .aurora-h1 {
        font-size: clamp(0.96rem, 0.86rem + 0.32vw, 1.16rem);
      }
      .aurora-lead {
        font-size: 0.73rem;
        line-height: 1.35;
        -webkit-line-clamp: 2;
        line-clamp: 2;
      }
      .aurora-btn-primary,
      .aurora-btn-ghost {
        padding: 0.28rem 0.65rem;
        font-size: 0.69rem;
      }
      .portal-actions [data-open-detail="corporate-notice"] {
        display: none;
      }
    }
  }

  @container aurora-tile (max-width: 420px) {
    .portal-badges {
      display: none;
    }
    .portal-actions [data-open-detail="corporate-notice"] {
      display: none;
    }
    .portal-actions :is(.aurora-btn-primary, .aurora-btn-ghost) {
      padding: 0.32rem 0.66rem;
      font-size: 0.69rem;
    }
  }

  @container aurora-tile (max-width: 280px) {
    .clock-box {
      padding: 0.36rem 0.42rem;
    }
    .clock-time {
      font-size: 0.68rem;
    }
    .sim-btn {
      padding: 0.15rem 0.36rem;
      font-size: 0.59rem;
    }
    .sim-bar-row {
      grid-template-columns: 64px minmax(30px, 1fr) auto;
      font-size: 0.59rem;
    }
    .aurora-chip {
      padding: 0.18rem 0.44rem;
      font-size: 0.6rem;
    }
    .aurora-btn-cta-sm {
      padding: 0.22rem 0.54rem;
      font-size: 0.64rem;
    }
  }

  /* Dual Singapore vs Toronto Clocks Widget */
  .dual-clock-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.42rem;
  }

  .clock-box {
    padding: 0.45rem 0.55rem;
    border-radius: 11px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-glass);
  }

  .clock-box.active-hq {
    border-color: rgba(52, 211, 153, 0.45);
  }

  .clock-city {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--fg-secondary);
  }

  .clock-time {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(0.76rem, 0.64rem + 0.24vw, 0.92rem);
    font-weight: 700;
    white-space: nowrap;
    margin-block-start: 0.1rem;
  }

  .clock-status {
    display: block;
    font-size: 0.62rem;
    color: var(--fg-secondary);
  }

  /* Live NOC & Codec Telemetry Sandbox */
  .sandbox-toggles {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 0.24rem;
  }

  .sim-btn {
    padding: 0.2rem 0.5rem;
    border-radius: 7px;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--bg-elevated);
    border: 1px solid var(--border-glass);
    color: var(--fg-secondary);
  }

  .sim-btn[aria-pressed="true"] {
    background: var(--accent-cyan);
    color: #04131d;
    border-color: transparent;
    font-weight: 700;
  }

  .sim-bars {
    display: grid;
    gap: 0.32rem;
  }

  .sim-bar-row {
    display: grid;
    grid-template-columns: 76px minmax(40px, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.63rem;
  }

  .sim-track {
    block-size: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    overflow: clip;
  }

  .sim-fill {
    block-size: 100%;
    inline-size: var(--fill, 80%);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-emerald), var(--accent-cyan));
    transition: inline-size 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* 3-Step Horizontal Timeline inside Chronicle Tile */
  .mini-timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.36rem;

    @container aurora-tile (max-width: 265px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .tl-step {
    min-inline-size: 0;
    padding: 0.34rem 0.42rem;
    border-radius: 9px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-glass);
  }

  .tl-step strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--accent-cyan);
  }

  .tl-step span {
    display: block;
    font-size: 0.62rem;
    line-height: 1.25;
    color: var(--fg-secondary);
  }

  .card-foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    min-inline-size: 0;
    margin-block-start: auto;

    @media (max-width: 640px) {
      flex-wrap: wrap;
    }

    > span:first-child {
      min-inline-size: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .metric-tag {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--accent-emerald);
  }

  .face-back .metric-tag {
    color: var(--accent-gold);
  }

  /* Size-aware compact service card tuning so pills & buttons never touch borders */
  @container aurora-tile (max-width: 240px) {
    .card-face {
      padding-inline: 0.72rem;
    }
    .os-eyebrow {
      font-size: 0.6rem;
      letter-spacing: 0.03em;
    }
    .os-pill {
      padding: 0.1rem 0.38rem;
      font-size: 0.57rem;
    }
    .metric-tag {
      font-size: 0.61rem;
    }
    .aurora-btn-sm {
      padding: 0.17rem 0.46rem;
      font-size: 0.63rem;
    }
  }
}

@layer dialogs {
  /* Command Palette List inside ⌘K Modal (flex-column chain without hardcoded height subtraction) */
  #ca-cmdk-dialog .modal-body {
    overflow: hidden;

    @media (max-height: 520px) {
      overflow-y: auto;
    }
  }

  #ca-cmdk-dialog search {
    flex: 0 0 auto;
  }

  .cmdk-list {
    flex: 1 1 auto;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;

    @media (max-width: 640px), (max-height: 760px) {
      padding-inline-end: 0.35rem;
    }

    @media (max-height: 520px) {
      flex: 0 0 auto;
      overflow: visible;
    }
  }

  .cmdk-item {
    flex: 0 0 auto;
    block-size: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.62rem 0.8rem;
    border-radius: 10px;
    background: var(--modal-chip-bg);
    border: 1px solid var(--modal-divider);
    text-align: start;
    font-size: 0.82rem;
    line-height: 1.38;
    transition: border-color 0.15s ease, background-color 0.15s ease;

    > span {
      min-inline-size: 0;
    }

    @media (max-width: 480px) {
      align-items: flex-start;
      padding: 0.65rem 0.75rem;
      gap: 0.5rem;
    }
  }

  .cmdk-item:hover {
    border-color: var(--modal-accent);
    background: var(--modal-chip-hover);
  }

  .cmdk-item:focus-visible {
    border-color: var(--modal-accent);
    outline: 2px solid var(--modal-accent);
    outline-offset: -2px;
  }

  .cmdk-item small {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.72;
  }
}