index.css

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

/* ============================================================
   Design tokens — ported verbatim from the design reference
   docs/03-blueprint/prototype/index.html. Dark by default;
   light overrides under html.light.
   ============================================================ */
:root {
  /* ---- Aurora Slate palette (ADR-009) — dark is the default theme.
     Values remap the existing --color-* contract to the approved
     prototype-v2/preview-modern.html; components inherit the new look. ---- */
  --color-background-primary: #05060f; /* deepest — prototype --bg */
  --color-background-secondary: #0a0c1a; /* body / panels — prototype --bg-elevated */
  --color-background-tertiary: #141829; /* raised cards */
  --color-text-primary: #edeff7;
  --color-text-secondary: #a7aec4;
  --color-text-tertiary: #8b93ad; /* kept lighter than the prototype --text-3 for AA on the deep bg */
  --color-text-info: #a99bff; /* violet accent (links / active) — AA on the deep bg */
  --color-text-success: #35c28d;
  --color-text-warning: #e0a93b;
  /* "What it costs" label in the Reader — matches warning on dark, darkened on light for AA on cards. */
  --color-text-cost: #e0a93b;
  --color-text-danger: #ec6a60;
  --color-background-info: rgba(139, 124, 255, 0.14);
  --color-background-success: rgba(53, 194, 141, 0.13);
  --color-background-warning: rgba(224, 169, 59, 0.13);
  --color-background-danger: rgba(236, 106, 96, 0.13);
  /* Borderless "Aurora Glass" (Fase 1, DECISIONS.md): hairlines soften toward transparency —
     separation comes from whitespace, translucent fills and shadow, not stroke. Chart grids keep
     their own token (--aa-grid-line) so data lines never fade with the chrome. */
  --color-border-secondary: rgba(255, 255, 255, 0.09);
  --color-border-tertiary: rgba(255, 255, 255, 0.055);
  --aa-grid-line: rgba(255, 255, 255, 0.08);
  --color-border-info: rgba(139, 124, 255, 0.45);
  --color-border-warning: rgba(224, 169, 59, 0.45);
  --color-border-danger: rgba(236, 106, 96, 0.45);
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: 'Space Grotesk', var(--font-sans);
  /* Aurora Slate accents (ADR-009) — the two-signature accent system. */
  --aa-accent: #8b7cff;
  --aa-accent-2: #38e1ff;
  --aa-accent-3: #ff7ac3;
  --aa-grad-accent: linear-gradient(120deg, #8b7cff 0%, #38e1ff 55%, #7cf5c8 100%);
  /* Calm TEXT gradient (Fase 2, owner feedback "terlalu mencolok"): a muted two-stop
     violet→cyan, tuned per theme — decorative fills keep --aa-grad-accent, but gradient
     TEXT must never glare. */
  --aa-grad-text: linear-gradient(120deg, #a89ee9 0%, #6fb6d6 100%);
  --aa-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Radar comparison series — theme-aware so up to 5 overlaid options stay distinct AND legible;
     vibrant aurora hues on dark, deeper versions on light (html.light below). */
  --radar-1: #8b7cff;
  --radar-2: #38e1ff;
  --radar-3: #ff7ac3;
  --radar-4: #5eead4;
  --radar-5: #e0a93b;

  /* ---- aa- redesign tokens (design-spec §6.1) ----------------------------
     Sizing/spacing/elevation for the responsive redesign. View code must
     reference these instead of hardcoding px (DECISIONS.md — redesign).
     Breakpoints (cannot be var() in @media — canonical values, keep in sync
     with design-spec §6.1): phone ≤640px · tablet 641–1024px · laptop ≥1025px. */
  --aa-space-1: 4px;
  --aa-space-2: 8px;
  --aa-space-3: 12px;
  --aa-space-4: 16px;
  --aa-space-5: 20px;
  --aa-space-6: 24px;
  --aa-space-7: 32px;
  /* Fluid paddings: tight on phones, roomy on laptops. */
  --aa-page-pad: clamp(10px, 2.5vw, 24px);
  --aa-panel-pad: clamp(12px, 2.5vw, 20px);
  --aa-card-pad: clamp(12px, 2vw, 16px);
  /* Type scale (fluid where it matters). */
  --aa-fs-2xs: 11px;
  --aa-fs-xs: 12px;
  --aa-fs-sm: 12.5px;
  --aa-fs-base: 13.5px;
  --aa-fs-md: 15px;
  --aa-fs-lg: clamp(15px, 1.6vw, 18px);
  --aa-fs-xl: clamp(17px, 2vw, 20px);
  --aa-fs-2xl: clamp(19px, 2.4vw, 22px);
  --aa-lh: 1.6;
  /* Soft elevation (theme-aware via the overridable shadow color). */
  --aa-shadow-color: rgba(0, 0, 0, 0.28);
  --aa-shadow-sm: 0 1px 2px var(--aa-shadow-color);
  --aa-shadow-md: 0 3px 10px var(--aa-shadow-color);
  --aa-shadow-lg: 0 8px 24px var(--aa-shadow-color);
  /* Minimum touch target (WCAG 2.5.8 / mobile ergonomics). */
  --aa-touch: 44px;
  --aa-focus-ring: 2px solid var(--color-text-info);
}
html.light {
  /* Aurora Slate — light theme (ADR-009). */
  /* Softer light theme — the page is a gentle blue-grey (not stark white); cards sit lighter on it
     so the layering reads without glare. Aurora tint stays subtle. */
  --color-background-primary: #e8ecf4; /* page / body — soft, not pure white */
  --color-background-secondary: #f4f7fc; /* panels & cards — lighter, gently elevated over the page */
  --color-background-tertiary: #dde3ef; /* subtle fills / tracks / hover — a touch deeper for definition */
  --color-text-primary: #0b0d1a;
  --color-text-secondary: #454c66;
  --color-text-tertiary: #63697f;
  --color-text-info: #5733c6; /* deeper violet — AA on the softer light bg AND on accent badges */
  --color-text-success: #0a7048;
  --color-text-warning: #b5790e;
  --color-text-cost: #8a5300; /* darker amber → ≥4.5:1 on the light card background */
  --color-text-danger: #a92c22; /* darkened → ≥4.5:1 for the 11px "DON'T" heading on its own danger tint (axe-verified; #c4392e measured 4.0:1) */
  --color-background-info: rgba(87, 51, 198, 0.09);
  --color-background-success: rgba(15, 138, 95, 0.1);
  --color-background-warning: rgba(181, 121, 14, 0.1);
  --color-background-danger: rgba(196, 57, 46, 0.08);
  --color-border-secondary: rgba(0, 0, 0, 0.1);
  --color-border-tertiary: rgba(0, 0, 0, 0.06);
  --aa-grid-line: rgba(0, 0, 0, 0.09);
  --color-border-info: rgba(87, 51, 198, 0.42);
  --color-border-warning: rgba(181, 121, 14, 0.45);
  --color-border-danger: rgba(196, 57, 46, 0.45);
  --aa-shadow-color: rgba(16, 24, 40, 0.1);
  --aa-grad-text: linear-gradient(120deg, #52439f 0%, #1f6a87 100%);
  --radar-1: #6d4ef0;
  --radar-2: #0e8aa8;
  --radar-3: #c03d86;
  --radar-4: #0a7a63;
  --radar-5: #b5790e;
}

@layer base {
  html,
  body,
  #root {
    height: 100%;
  }
  body {
    margin: 0;
    /* Deepest surface so the aurora signature glows against near-black in the page margins. */
    background: var(--color-background-primary);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }
  /* Aurora Slate: headings use the Space Grotesk display face (ADR-009). */
  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
  }
  .num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  /* Clean numeric inputs (no overlapping native spinner). */
  input.no-spin {
    appearance: textfield;
    -moz-appearance: textfield;
  }
  input.no-spin::-webkit-outer-spin-button,
  input.no-spin::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

/* ============================================================
   Component classes — ported from the prototype so the React
   components render an identical look.
   ============================================================ */
@layer components {
  .f-seg span {
    flex: 1;
    text-align: center;
    font-size: 11px;
    padding: 7px 0;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition:
      background 0.15s,
      color 0.15s;
  }
  .f-seg span.on {
    background: var(--color-background-info);
    color: var(--color-text-info);
    font-weight: 500;
  }
  /* Preset / filter chips: glass pill with an accent-tinted hairline (modern badge language). */
  .f-chip {
    font-size: 12px;
    color: var(--color-text-secondary);
    border: 1px solid color-mix(in srgb, var(--aa-accent) 20%, transparent);
    background: color-mix(in srgb, var(--color-background-tertiary) 45%, transparent);
    border-radius: 99px;
    padding: 6px 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
  }
  @supports not (background: color-mix(in srgb, red, blue)) {
    .f-chip {
      background: none;
      border-color: var(--color-border-secondary);
    }
  }
  .f-chip.on {
    color: var(--color-text-info);
    background: var(--color-background-info);
    border-color: var(--color-border-info);
  }
  .f-chip:hover {
    border-color: var(--color-border-info);
  }
  .f-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-tertiary);
  }
  .f-step .n {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0.5px solid var(--color-border-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
  }
  .f-step.act {
    color: var(--color-text-info);
  }
  .f-step.act .n {
    background: var(--color-text-info);
    color: var(--color-background-primary);
    border-color: var(--color-text-info);
  }
  /* Borderless: sections separate by whitespace rhythm, not a hairline (Fase 1). */
  .f-div {
    height: 0;
    background: transparent;
    margin: var(--aa-space-7) 0;
  }
  .f-gloss {
    font-size: 11px;
    color: var(--color-text-tertiary);
    line-height: 1.45;
  }
  /* Step numbers: gradient coin — MUTED theme-tuned gradient (owner: the vivid coin glared in
     light mode; matches the calm "evidence" text gradient). Text adapts per theme. */
  .f-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--aa-grad-text);
    color: var(--color-background-primary);
    font-weight: 700;
    box-shadow: 0 0 8px -2px rgba(139, 124, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex: none;
  }
  .f-dim {
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-md);
    padding: var(--aa-space-3);
    cursor: pointer;
    box-shadow: var(--aa-shadow-sm);
    transition:
      border-color 0.15s,
      box-shadow 0.15s,
      transform 0.15s;
  }
  .f-dim:hover {
    border-color: var(--color-border-info);
    transform: translateY(-1px);
    box-shadow: var(--aa-shadow-md);
  }
  .f-dim.on {
    border: 1.5px solid var(--color-border-info);
    background: var(--color-background-info);
  }
  .dim-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-background-tertiary);
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
  }
  .f-dim.on .dim-no {
    background: var(--color-text-info);
    color: var(--color-background-primary);
  }
  .r-dimchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 99px;
    padding: 4px 12px 4px 5px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.15s;
  }
  .r-dimchip:hover {
    border-color: var(--color-border-info);
  }
  .r-dimchip.on {
    background: var(--color-background-info);
    border-color: var(--color-border-info);
    color: var(--color-text-info);
  }
  .r-dimchip.on .dim-no {
    background: var(--color-text-info);
    color: var(--color-background-primary);
  }
  .f-mode {
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--color-text-secondary);
  }
  .f-mode.on {
    background: var(--color-text-info);
    color: var(--color-background-primary);
    font-weight: 500;
  }
  .f-mig {
    font-size: 11px;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 99px;
    padding: 5px 11px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.15s;
  }
  .f-mig.on {
    background: var(--color-background-info);
    color: var(--color-text-info);
    border-color: var(--color-border-info);
  }
  .f-act {
    transition: opacity 0.15s;
  }
  .f-act.busy {
    opacity: 0.55;
    pointer-events: none;
  }
  .f-btn {
    font-size: 12px;
    border-radius: var(--border-radius-md);
    padding: 5px 12px;
    cursor: pointer;
    border: 0.5px solid var(--color-border-secondary);
    color: var(--color-text-secondary);
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .f-btn:hover {
    border-color: var(--color-border-info);
  }
  .kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    border: 0.5px solid var(--color-border-secondary);
    border-bottom-width: 1.5px;
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--color-text-tertiary);
    background: var(--color-background-secondary);
  }
  .spin {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--color-border-secondary);
    border-top-color: var(--color-text-info);
    border-radius: 50%;
    animation: fspin 0.6s linear infinite;
    vertical-align: -1px;
  }
  .sk {
    background: linear-gradient(
      90deg,
      var(--color-background-secondary) 25%,
      var(--color-background-tertiary) 37%,
      var(--color-background-secondary) 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
    border-radius: var(--border-radius-md);
  }
  .r-chip {
    font-size: 12px;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 99px;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: all 0.15s;
    color: var(--color-text-secondary);
  }
  .r-chip:hover {
    border-color: var(--color-border-info);
  }
  .r-chip.off {
    opacity: 0.85;
  }
  .r-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
  }
  .f-row {
    transition: transform 0.15s;
  }
  .f-row:hover {
    transform: translateX(2px);
  }
}

@keyframes fspin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* Guided/expert label visibility (ported from the prototype). */
#f-app.expert .guided-only {
  display: none !important;
}
#f-app.guided .expert-only {
  display: none !important;
}
#f-app.expert .f-gloss {
  display: none !important;
}

#f-app details {
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
}
#f-app summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
}
#f-app summary::-webkit-details-marker {
  display: none;
}

#f-grid table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
#f-grid th {
  position: sticky;
  top: 0;
  background: var(--color-background-primary);
  text-align: right;
  padding: 7px 10px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
#f-grid th:first-child,
#f-grid td:first-child {
  text-align: left;
}
#f-grid td {
  padding: 7px 10px;
  text-align: right;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  color: var(--color-text-primary);
}

.f-ov {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 10001;
  padding: 60px 16px;
  /* Ensure backdrop covers entire viewport on mobile, including safe areas */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.f-ov.open {
  display: flex;
}

/* ============================================================
   Guide / Manual ("Panduan") — modern doc shell (2026-07-23).
   Replaces the old inline-styled flat modal: a glass header, a sticky
   jump-to-section table of contents, and numbered section cards.
   ============================================================ */
.aa-manual {
  width: 100%;
  max-width: 820px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--border-radius-xl);
  border: 0.5px solid var(--color-border-secondary);
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.45);
  background: var(--color-background-primary);
}
.aa-manual-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.aa-manual-head .aa-manual-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--color-text-secondary);
  background: var(--color-background-tertiary);
  flex: none;
}
.aa-manual-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.aa-manual-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.aa-manual-sub {
  font-size: 11.5px;
  color: var(--color-text-tertiary);
  line-height: 1.3;
}
.aa-manual-x {
  margin-left: auto;
  flex: none;
}
/* Sticky jump-to-section rail (horizontal scroll on narrow widths). */
.aa-manual-toc {
  flex: none;
  display: flex;
  gap: 6px;
  padding: 10px 18px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.aa-manual-toc::-webkit-scrollbar {
  display: none;
}
.aa-manual-toc button {
  flex: none;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-background-tertiary) 60%, transparent);
  border: 1px solid transparent;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}
.aa-manual-toc button:hover {
  color: var(--color-text-primary);
  border-color: color-mix(in srgb, var(--aa-accent) 40%, transparent);
}
.aa-manual-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 18px 26px;
  scroll-behavior: smooth;
}
.aa-manual-section {
  scroll-margin-top: 8px;
  padding-top: 8px;
}
.aa-manual-section + .aa-manual-section {
  margin-top: 10px;
  border-top: 0.5px solid var(--color-border-tertiary);
}
.aa-manual-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 8px;
}
.aa-manual-num {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--aa-accent);
  background: color-mix(in srgb, var(--aa-accent) 15%, transparent);
}
.aa-manual-h h3 {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 640;
  letter-spacing: -0.01em;
}
.aa-manual-p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 6px 0;
}
.aa-manual-subhead {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 14px 0 2px;
}
.aa-manual-code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  padding: 11px 13px;
  display: block;
  white-space: pre-wrap;
  margin: 9px 0;
  color: var(--color-text-primary);
  overflow-x: auto;
}
.aa-manual-card {
  background: color-mix(in srgb, var(--color-background-secondary) 70%, transparent);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  padding: 12px 14px;
  margin: 9px 0;
}

/* Accessibility: visible focus, reduced motion */
[role='button']:focus-visible,
.f-chip:focus-visible,
.f-mode:focus-visible,
.f-dim:focus-visible,
.f-mig:focus-visible,
.f-btn:focus-visible,
.f-act:focus-visible,
.r-chip:focus-visible,
.r-dimchip:focus-visible,
.f-seg span:focus-visible,
summary:focus-visible,
input:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-text-info);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   aa- redesign layer — responsive shell, cards, focus, touch.
   Only aa- classes + tokens here; no hardcoded colors/sizes.
   ============================================================ */

/* Visible, consistent keyboard focus everywhere (WCAG 2.4.7). */
:focus-visible {
  outline: var(--aa-focus-ring);
  outline-offset: 2px;
  border-radius: var(--border-radius-md);
}

/* Page shell: fluid outer gutter, centered column. */
.aa-page {
  padding: var(--aa-page-pad);
  /* Sits above the fixed aurora background (z-index:0). */
  position: relative;
  z-index: 1;
}
.aa-frame {
  max-width: 1180px;
  margin: 0 auto;
}

/* Aurora Slate signature background (ADR-009): ambient glow behind the app frame.
   Fixed + blurred, transform-only drift; disabled under reduced-motion and on the
   low-core `aurora-static` fallback. Decorative element rendered by AuroraBackground.tsx. */
.aa-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  filter: blur(90px);
  opacity: 0.5;
}
html.light .aa-aurora {
  opacity: 0.2;
}
.aa-aurora i {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.aa-aurora i:nth-child(1) {
  width: 52vw;
  height: 52vw;
  left: -14vw;
  top: -20vw;
  background: radial-gradient(circle, #5b3df5 0%, transparent 65%);
  animation: aa-drift1 26s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}
.aa-aurora i:nth-child(2) {
  width: 44vw;
  height: 44vw;
  right: -16vw;
  top: 4vw;
  background: radial-gradient(circle, #0fb5d8 0%, transparent 65%);
  animation: aa-drift2 32s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}
.aa-aurora i:nth-child(3) {
  width: 38vw;
  height: 38vw;
  left: 28vw;
  top: 40vw;
  background: radial-gradient(circle, #c33da8 0%, transparent 65%);
  animation: aa-drift3 38s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
  opacity: 0.6;
}
@keyframes aa-drift1 {
  to {
    transform: translate(9vw, 7vw) scale(1.12);
  }
}
@keyframes aa-drift2 {
  to {
    transform: translate(-8vw, 10vw) scale(0.94);
  }
}
@keyframes aa-drift3 {
  to {
    transform: translate(-10vw, -8vw) scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .aa-aurora i {
    animation: none;
  }
}
:root.aurora-static .aa-aurora i {
  animation: none;
}
/* The app surface gets a soft elevation so it reads as one clean card. */
.aa-surface {
  box-shadow: var(--aa-shadow-lg);
}

/* ---- Aurora Glass (Fase 1, DECISIONS.md) --------------------------------
   Glassmorphism recipe for chrome that floats over the full-bleed canvas
   (header, top nav, mobile bars, overlays). Opaque fallback when the engine
   lacks backdrop-filter or color-mix; blur dropped on low-core devices
   (aurora-static) where compositing is the bottleneck. */
.aa-glass {
  background: color-mix(in srgb, var(--color-background-secondary) 62%, transparent);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: var(--aa-shadow-md);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .aa-glass {
    background: var(--color-background-secondary);
  }
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .aa-glass {
    background: var(--color-background-secondary);
  }
}
:root.aurora-static .aa-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--color-background-secondary);
}
/* Ensure modal cards are fully opaque, not transparent (owner request) */
.aa-manual.aa-glass,
.aa-chat-panel.aa-glass,
.aa-cop-card.aa-glass {
  background: var(--color-background-primary) !important;
}

/* ---- Modern badge system (Fase 1 polish) --------------------------------
   One recipe for every badge / complementary label: glass pill, accent-tinted
   hairline, optional glowing gradient dot. Variants: -accent (violet text on
   info fill) and -soft (no ring). Falls back to solid fills without color-mix. */
.aa-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: var(--aa-fs-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-background-tertiary) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--aa-accent) 26%, transparent);
}
.aa-badge-accent {
  color: var(--color-text-info);
  background: var(--color-background-info);
  border-color: color-mix(in srgb, var(--aa-accent) 40%, transparent);
}
.aa-badge-soft {
  border-color: transparent;
}
.aa-badge .aa-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aa-grad-text);
  box-shadow: 0 0 6px rgba(139, 124, 255, 0.4);
  flex: none;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .aa-badge {
    background: var(--color-background-tertiary);
    border-color: var(--color-border-info);
  }
}
/* The Advisor's 4-step journey rail (Fase 2d): FLOATS under the app bar, each step is a
   clickable button, and the scroll-spy lights up the step you are on right now. */
.aa-steps {
  position: sticky;
  top: 70px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--aa-space-2) var(--aa-space-3);
  margin: 0 var(--aa-panel-pad);
  border-radius: 999px;
  flex-wrap: wrap;
}
/* Wrap tier (Fase 2g): a single pill row gets ugly once it breaks, so below the width where it
   fits, switch to a clean, perfectly-aligned 2×2 grid of full-width steps (connectors hidden). */
@media (max-width: 720px) {
  .aa-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-radius: var(--border-radius-lg);
  }
  .aa-step {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }
  /* Long guided labels must wrap inside the cell, never overflow it. */
  .aa-steps .aa-step-label {
    white-space: normal;
    min-width: 0;
  }
  .aa-step .f-num {
    flex: none;
  }
  .aa-step-line {
    display: none;
  }
}
.aa-step {
  appearance: none;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 7px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.aa-step:hover {
  border-color: color-mix(in srgb, var(--aa-accent) 24%, transparent);
}
.aa-step.on {
  background: color-mix(in srgb, var(--aa-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--aa-accent) 34%, transparent);
  box-shadow: 0 2px 10px -4px rgba(139, 124, 255, 0.5);
}
.aa-step.on .aa-step-label {
  color: var(--color-text-primary);
  font-weight: 600;
}
.aa-step:not(.on) .f-num {
  background: var(--color-background-tertiary);
  color: var(--color-text-secondary);
  box-shadow: none;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .aa-step.on {
    background: var(--color-background-info);
    border-color: var(--color-border-info);
  }
}
.aa-step-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.aa-step-line {
  flex: 1 1 12px;
  min-width: 12px;
  height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--aa-accent) 35%, transparent), color-mix(in srgb, var(--aa-accent) 10%, transparent));
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .aa-step-line {
    background: var(--color-border-secondary);
  }
}
@media (max-width: 640px) {
  .aa-step-line {
    display: none;
  }
}

/* Advisor step sections (Fase 2d): numbered collapsible cards — coin + title + chevron on a
   native <details>, so the flow is scannable AND skippable. */
.aa-sec {
  border: none;
  border-radius: var(--border-radius-lg);
  background: color-mix(in srgb, var(--color-background-secondary) 55%, transparent);
  scroll-margin-top: 132px; /* clears the sticky app bar + step rail when jumped to */
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .aa-sec {
    background: var(--color-background-secondary);
  }
}
.aa-sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--aa-space-3) var(--aa-space-4);
  cursor: pointer;
  list-style: none;
  border-radius: var(--border-radius-lg);
  transition: background 0.15s ease;
}
.aa-sec-head::-webkit-details-marker {
  display: none;
}
.aa-sec-head:hover {
  background: color-mix(in srgb, var(--aa-accent) 7%, transparent);
}
.aa-sec-title {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
}
.aa-sec-chev {
  color: var(--color-text-tertiary);
  transition: transform 0.2s var(--aa-ease);
  flex: none;
}
.aa-sec[open] > .aa-sec-head .aa-sec-chev {
  transform: rotate(180deg);
}
.aa-sec-body {
  padding: 0 var(--aa-space-4) var(--aa-space-4);
}

/* Modern range slider (Fase 2c — the priorities adjuster): calm accent, thin track. */
.aa-range {
  width: 100%;
  height: 18px;
  accent-color: var(--color-text-info);
  cursor: pointer;
  background: transparent;
}

/* Inline keyboard hint rendered as a modern key cap. */
.aa-kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-background-tertiary) 85%, transparent);
  border: 1px solid var(--color-border-secondary);
  box-shadow: 0 1.5px 0 var(--color-border-secondary);
}
/* Standard content padding for panels/sections (replaces fixed 18px 20px). */
.aa-panel {
  padding: var(--aa-panel-pad);
}

/* Generic card: rounded, bordered, softly elevated, token-padded. */
.aa-card {
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  padding: var(--aa-card-pad);
  box-shadow: var(--aa-shadow-sm);
}

/* Action rows wrap instead of overflowing on narrow screens. */
.aa-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aa-space-2);
}

/* Comfortable touch targets on touch devices without inflating desktop chrome. */
@media (pointer: coarse) {
  .aa-touch,
  .f-btn,
  .f-chip,
  .f-mode,
  .learn-card {
    min-height: var(--aa-touch);
  }
}

/* Overflow safety: nothing may force a horizontal page scroll. */
img,
svg {
  max-width: 100%;
}
.learn-prose pre {
  overflow-x: auto;
}
.learn-article,
.aa-panel {
  overflow-wrap: break-word;
}

/* ---- Phone tier (≤640px — canonical breakpoint, design-spec §6.1) ---- */
/* ---- Compact-nav tier (≤1180px — any width where the app bar would wrap, Fase 2d) ---
   Owner feedback: the app bar must NEVER wrap. Below the laptop tier the mobile
   chrome takes over entirely (bottom tab bar + compact top bar), so tablets get
   the same elegant single-row experience as phones. The historical class names
   keep the -phone suffix; they now mean "compact tier". */
@media (max-width: 1180px) {
  /* Keyboard-centric chrome adds noise on touch devices. */
  .aa-hide-phone {
    display: none;
  }
}
@media (max-width: 640px) {
  /* Tighter vertical rhythm on small screens. */
  .f-div {
    margin: var(--aa-space-4) 0;
  }
  /* Overlays start closer to the top so dialogs get usable height. */
  .f-ov {
    padding: var(--aa-space-5) var(--aa-space-2);
  }
}

/* Learn — interactive content cards (inviting hover cue for both newcomers and experts). */
.learn-card {
  transition:
    border-color 0.15s ease,
    transform 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}
.learn-card:hover {
  border-color: var(--color-text-info);
  transform: translateY(-2px);
  background: var(--color-background-tertiary);
  box-shadow: var(--aa-shadow-md);
}
.learn-card:focus-visible {
  outline: 2px solid var(--color-text-info);
  outline-offset: 2px;
}
/* A coloured icon chip for section cards. */
.learn-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--color-background-info);
  color: var(--color-text-info);
  flex-shrink: 0;
}

/* ---- Aurora Slate polish (ADR-009) ------------------------------------- */

/* Pointer-following glow on Insights cards — fine-pointer only, faint enough to keep text
   readable, non-interactive; the --mx/--my vars are set by a guarded rAF listener in App.tsx. */
@media (hover: hover) and (pointer: fine) {
  .learn-card {
    position: relative;
    overflow: hidden;
  }
  .learn-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(
      460px circle at var(--mx, 50%) var(--my, 50%),
      rgba(139, 124, 255, 0.1),
      transparent 45%
    );
  }
  .learn-card:hover::before {
    opacity: 1;
  }
}

/* Scroll-reveal — subtle fade-up; instant under reduced-motion (see the IO effect in LearnView). */
.aa-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--aa-ease),
    transform 0.5s var(--aa-ease);
}
.aa-reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .aa-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Article body spacing so long reads are comfortable. */
.learn-prose h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0 8px;
  color: var(--color-text-primary);
}
.learn-prose h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 6px;
  color: var(--color-text-primary);
}
.learn-prose p {
  margin: 8px 0;
}
.learn-prose ul,
.learn-prose ol {
  margin: 8px 0;
  padding-left: 20px;
}
.learn-prose li {
  margin: 4px 0;
}
.learn-prose blockquote {
  margin: 10px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--color-border-info);
  background: var(--color-background-info);
  border-radius: 6px;
  color: var(--color-text-secondary);
}
.learn-prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-background-tertiary);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Print / PDF: hide the app chrome and render the clean report (white, black text). */
.print-only {
  display: none;
}
@media print {
  body {
    background: #fff;
  }
  .screen-only {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
}

/* ============================================================
   Landing / Home page — "Aurora Slate" (mirrors prototype-v2/preview-modern.html).
   Scoped under .aa-landing / .lp-*; uses app tokens (no parallel colour system).
   ============================================================ */
.aa-landing {
  --lp-r-lg: 24px;
  --lp-r-md: 16px;
  --lp-r-pill: 999px;
}

/* ---- HERO ---- */
.lp-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  padding: clamp(28px, 6vw, 72px) 0 clamp(28px, 4vw, 56px);
}
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: var(--lp-r-pill);
  border: 1px solid color-mix(in srgb, var(--aa-accent) 26%, transparent);
  background: color-mix(in srgb, var(--color-background-secondary) 66%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .lp-eyebrow {
    background: var(--color-background-secondary);
    border-color: var(--color-border-tertiary);
  }
}
.lp-eyebrow b {
  background: var(--aa-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
.lp-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.2vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.03;
  margin: 20px 0 18px;
}
.lp-grad {
  background: var(--aa-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-lede {
  max-width: 34rem;
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  line-height: 1.7;
}
.lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--aa-touch);
  padding: 0 22px;
  border-radius: var(--lp-r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    transform 0.18s var(--aa-ease),
    box-shadow 0.18s var(--aa-ease),
    background 0.18s;
}
.lp-btn:active {
  transform: scale(0.97);
}
.lp-btn-primary {
  background: var(--color-text-primary);
  color: var(--color-background-primary);
}
.lp-btn-primary:hover {
  box-shadow: 0 8px 30px -8px rgba(139, 124, 255, 0.55);
}
.lp-btn-ghost {
  background: transparent;
  border-color: var(--color-border-secondary);
  color: var(--color-text-primary);
}
.lp-btn-ghost:hover {
  background: var(--color-background-tertiary);
}
/* Hero stats as calm glass chips (Fase 2c — modern & aesthetic, never loud). */
.lp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  color: var(--color-text-tertiary);
  font-size: 0.85rem;
}
.lp-meta > div {
  padding: 10px 16px;
  border-radius: var(--border-radius-lg);
  background: color-mix(in srgb, var(--color-background-secondary) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--aa-accent) 16%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .lp-meta > div {
    background: var(--color-background-secondary);
    border-color: var(--color-border-tertiary);
  }
}
.lp-meta b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
/* CTA micro-interaction: the arrow leans forward on hover (fine pointers). */
.lp-btn svg {
  transition: transform 0.2s var(--aa-ease);
}
@media (hover: hover) {
  .lp-btn-primary:hover svg {
    transform: translateX(3px);
  }
}

/* ---- HERO RADAR (decorative motif) ---- */
.aa-landing .radar-wrap {
  position: relative;
  display: grid;
  place-items: center;
}
.aa-landing .radar-card {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 1;
  padding: 26px;
  border-radius: var(--lp-r-lg);
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-tertiary);
}
.aa-landing .radar-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(139, 124, 255, 0.5), transparent 30%, transparent 70%, rgba(56, 225, 255, 0.5));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  pointer-events: none;
}
.aa-landing .radar-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.aa-landing .radar-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--color-text-tertiary);
  letter-spacing: 0.06em;
}
.aa-landing .radar-grid {
  fill: none;
  stroke: var(--aa-grid-line);
  stroke-width: 1;
}
.aa-landing .radar-axis {
  stroke: var(--aa-grid-line);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.aa-landing .radar-shape {
  fill: rgba(139, 124, 255, 0.16);
  stroke-width: 2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(56, 225, 255, 0.35));
}
.aa-landing .radar-pt {
  fill: var(--color-background-primary);
  stroke-width: 2;
}
.aa-landing .radar-sweep {
  transform-origin: 136px 104px;
  animation: lp-sweep 7s linear infinite;
  opacity: 0.5;
}
/* Floating hero badges — short one-liners on elegant glass pills (Fase 1 polish):
   never wrap, never clip, a soft accent ring and a floating drift. */
.aa-landing .radar-chip {
  position: absolute;
  padding: 9px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-background-secondary) 66%, transparent);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--aa-accent) 30%, transparent);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: lp-float 6s var(--aa-ease) infinite alternate;
  box-shadow: var(--aa-shadow-lg);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .aa-landing .radar-chip {
    background: var(--color-background-tertiary);
    border-color: var(--color-border-info);
  }
}
/* Chips stay INSIDE the wrap (no negative offsets) so they can never be clipped by an
   ancestor or push horizontal overflow on phones (Fase 1c). */
.aa-landing .chip-a {
  top: 4%;
  left: 0;
}
.aa-landing .chip-b {
  bottom: 6%;
  right: 0;
  animation-delay: -3s;
}
@keyframes lp-sweep {
  to {
    transform: rotate(360deg);
  }
}
@keyframes lp-float {
  to {
    transform: translateY(-9px);
  }
}

/* ---- SECTIONS ---- */
.lp-section {
  padding: clamp(28px, 5vw, 56px) 0;
}
.lp-sec-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.lp-sec-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.lp-sec-head p {
  color: var(--color-text-secondary);
  max-width: 32rem;
  margin-top: 8px;
}
.lp-kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  display: block;
  margin-bottom: 10px;
}
.lp-kicker::before {
  content: '◆ ';
  background: var(--aa-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- BENTO ---- */
/* ---- Pattern SLIDER (Fase 2c — replaces the bento grid): modern snap carousel.
   Swipe on touch, glass arrows on fine pointers, soft edge fades; the page itself
   never scrolls sideways (overflow is contained here). */
.lp-slider-wrap {
  position: relative;
}
.lp-slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 14px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.lp-slider::-webkit-scrollbar {
  display: none;
}
.lp-slider .lp-card {
  flex: 0 0 min(380px, 82%);
  scroll-snap-align: start;
}
.lp-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--aa-accent) 26%, transparent);
  background: color-mix(in srgb, var(--color-background-secondary) 78%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--aa-shadow-md);
  transition: transform 0.15s var(--aa-ease), border-color 0.15s ease;
}
.lp-slider-btn:hover {
  transform: translateY(-50%) scale(1.06);
  border-color: color-mix(in srgb, var(--aa-accent) 45%, transparent);
}
.lp-slider-btn.prev {
  left: -8px;
}
.lp-slider-btn.next {
  right: -8px;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .lp-slider-btn {
    background: var(--color-background-secondary);
    border-color: var(--color-border-secondary);
  }
}
/* Arrows show on EVERY device (Fase 2d, owner request) — swipe still works on touch;
   they just shrink on phones so they never cover content. */
@media (max-width: 640px) {
  .lp-slider-btn {
    width: 32px;
    height: 32px;
  }
  .lp-slider-btn.prev {
    left: -4px;
  }
  .lp-slider-btn.next {
    right: -4px;
  }
}
.lp-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--lp-r-lg);
  padding: 26px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-tertiary);
  transition:
    border-color 0.25s var(--aa-ease),
    transform 0.25s var(--aa-ease);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.lp-card:hover {
  border-color: var(--color-border-secondary);
  transform: translateY(-3px);
}
@media (hover: hover) and (pointer: fine) {
  .lp-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 124, 255, 0.12), transparent 45%);
  }
  .lp-card:hover::before {
    opacity: 1;
  }
}
.lp-tag {
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  border: 1px solid color-mix(in srgb, var(--aa-accent) 24%, transparent);
  background: color-mix(in srgb, var(--color-background-tertiary) 55%, transparent);
  border-radius: var(--lp-r-pill);
  padding: 4px 12px;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .lp-tag {
    background: none;
    border-color: var(--color-border-tertiary);
  }
}
.lp-card-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-text-primary);
}
.lp-card-p {
  color: var(--color-text-secondary);
  font-size: 0.96rem;
  line-height: 1.55;
}
.lp-card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text-info);
}
.lp-card-art {
  margin: -4px -4px 2px;
  height: 116px;
  border-radius: var(--lp-r-md);
  border: 1px solid var(--color-border-tertiary);
  background: linear-gradient(140deg, rgba(139, 124, 255, 0.14), rgba(56, 225, 255, 0.08));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.lp-spark {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 62px;
}
.lp-spark i {
  width: 10px;
  border-radius: 4px;
  background: var(--aa-grad-text);
  opacity: 0.8;
  animation: lp-eq 2.6s var(--aa-ease) infinite alternate;
}
.lp-spark i:nth-child(1) {
  height: 38%;
}
.lp-spark i:nth-child(2) {
  height: 72%;
  animation-delay: -0.4s;
}
.lp-spark i:nth-child(3) {
  height: 52%;
  animation-delay: -0.9s;
}
.lp-spark i:nth-child(4) {
  height: 90%;
  animation-delay: -1.3s;
}
.lp-spark i:nth-child(5) {
  height: 60%;
  animation-delay: -1.8s;
}
@keyframes lp-eq {
  to {
    transform: scaleY(0.55);
  }
}
.lp-nodes,
.lp-art {
  width: 82%;
  height: 70%;
}
/* How-it-works cards reuse the pattern-card art frame, slightly shorter. */
.lp-step-art {
  display: grid;
  place-items: center;
  height: 92px;
  margin: 0 0 14px;
}

/* ---- Living pattern symbols (Fase 2c: "buat simbol gambarnya bergerak"). Gentle,
   transform/opacity-only; frozen under reduced-motion and on low-core devices. ---- */
@keyframes lp-dash {
  to {
    stroke-dashoffset: -56;
  }
}
@keyframes lp-breathe {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 0.95;
  }
}
@keyframes lp-flicker {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.9;
  }
}
@keyframes lp-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes lp-grow {
  from {
    transform: scaleX(0.55);
  }
  to {
    transform: scaleX(1);
  }
}
.lp-art-nodes line,
.lp-art-mesh line {
  stroke-dasharray: 5 8;
  animation: lp-dash 3.6s linear infinite;
}
.lp-art-nodes circle,
.lp-art-mesh circle {
  animation: lp-breathe 2.6s var(--aa-ease) infinite alternate;
}
.lp-art-mesh circle:nth-of-type(2n) {
  animation-delay: -1.3s;
}
.lp-art-bolt polygon {
  animation: lp-flicker 2.4s ease-in-out infinite;
}
.lp-art-bolt polygon:nth-of-type(2) {
  animation-delay: 0.5s;
}
.lp-art-bolt polygon:nth-of-type(3) {
  animation-delay: 1s;
}
.lp-art-modules .hl,
.lp-art-form .hl,
.lp-art-hex .core,
.lp-art-pick .core {
  animation: lp-breathe 2.2s var(--aa-ease) infinite alternate;
}
.lp-art-hex .ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: lp-spin 18s linear infinite;
}
.lp-art-weights .bar {
  transform-box: fill-box;
  transform-origin: left center;
  animation: lp-grow 3s var(--aa-ease) infinite alternate;
}
.lp-art-weights .b1 {
  animation-delay: -0.7s;
}
.lp-art-weights .b2 {
  animation-delay: -1.4s;
}
.lp-art-weights .b3 {
  animation-delay: -2.1s;
}
/* Generic art-animation utilities (Fase 2d — the 21 Catalog symbols reuse the same calm
   keyframes as the landing patterns). */
.aa-anim-dash {
  stroke-dasharray: 5 8;
  animation: lp-dash 3.6s linear infinite;
}
.aa-anim-breathe {
  animation: lp-breathe 2.6s var(--aa-ease) infinite alternate;
}
.aa-anim-flicker {
  animation: lp-flicker 2.4s ease-in-out infinite;
}
.aa-anim-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: lp-spin 18s linear infinite;
}
/* Catalog card art frame + the larger detail-page hero. */
.learn-art {
  display: grid;
  place-items: center;
  height: 84px;
  margin-bottom: 8px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-tertiary);
  background: linear-gradient(140deg, rgba(139, 124, 255, 0.12), rgba(56, 225, 255, 0.06));
  overflow: hidden;
}
.learn-art-hero {
  display: grid;
  place-items: center;
  height: clamp(180px, 26vw, 230px);
  margin: 4px 0 16px;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border-tertiary);
  background: linear-gradient(140deg, rgba(139, 124, 255, 0.12), rgba(56, 225, 255, 0.06));
  overflow: hidden;
}
.learn-art-hero .lp-art {
  width: min(96%, 560px);
  height: 94%;
}

@media (prefers-reduced-motion: reduce) {
  .lp-art-nodes line,
  .lp-art-mesh line,
  .lp-art-nodes circle,
  .lp-art-mesh circle,
  .lp-art-bolt polygon,
  .lp-art-modules .hl,
  .lp-art-form .hl,
  .lp-art-hex .core,
  .lp-art-pick .core,
  .lp-art-hex .ring,
  .lp-art-weights .bar,
  .aa-anim-dash,
  .aa-anim-breathe,
  .aa-anim-flicker,
  .aa-anim-spin {
    animation: none;
  }
}
:root.aurora-static .aa-anim-dash,
:root.aurora-static .aa-anim-breathe,
:root.aurora-static .aa-anim-flicker,
:root.aurora-static .aa-anim-spin {
  animation: none;
}
:root.aurora-static .lp-art-nodes line,
:root.aurora-static .lp-art-mesh line,
:root.aurora-static .lp-art-nodes circle,
:root.aurora-static .lp-art-mesh circle,
:root.aurora-static .lp-art-bolt polygon,
:root.aurora-static .lp-art-modules .hl,
:root.aurora-static .lp-art-form .hl,
:root.aurora-static .lp-art-hex .core,
:root.aurora-static .lp-art-pick .core,
:root.aurora-static .lp-art-hex .ring,
:root.aurora-static .lp-art-weights .bar {
  animation: none;
}
.lp-nodes circle {
  fill: var(--color-background-primary);
  stroke: url(#lpRadGrad);
  stroke-width: 1.6;
}
.lp-nodes line {
  stroke: var(--color-border-secondary);
  stroke-width: 1.2;
}

/* ---- STEPS ---- */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  counter-reset: lp-s;
}
/* How-it-works (Fase 2d rev.3 + 2e): grid on desktop; a swipe slider on phones & tablets,
   WITH arrow hints so users know the cards slide (arrows exist only in slider mode). */
.lp-steps-btn {
  display: none;
}
@media (max-width: 1024px) {
  .lp-steps-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lp-steps {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 14px;
    scrollbar-width: none;
  }
  .lp-steps::-webkit-scrollbar {
    display: none;
  }
  .lp-steps .lp-step {
    flex: 0 0 min(340px, 84%);
    scroll-snap-align: start;
  }
}
.lp-step {
  position: relative;
  padding: 26px;
  border-radius: var(--lp-r-lg);
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-tertiary);
}
.lp-step::before {
  counter-increment: lp-s;
  content: counter(lp-s, decimal-leading-zero);
  display: block;
  /* Breathing room between the number and the art below (Fase 2d, owner feedback). */
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  /* Muted, theme-tuned gradient (Fase 2b): the vivid accent glared in light mode. */
  background: var(--aa-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-step h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  margin: 10px 0 8px;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.lp-step p {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ---- Landing responsive ---- */
@media (max-width: 820px) {
  .lp-hero {
    grid-template-columns: 1fr;
  }
  .aa-landing .radar-wrap {
    order: -1;
  }
  .lp-bento {
    grid-template-columns: 1fr 1fr;
  }
  .lp-c-4,
  .lp-c-2 {
    grid-column: span 2;
  }
  .lp-steps {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .lp-bento {
    grid-template-columns: 1fr;
  }
  .lp-c-4,
  .lp-c-2 {
    grid-column: span 1;
  }
}

/* ============================================================
   Mobile chrome — bottom tab bar + settings sheet (phone-only).
   See docs/03-blueprint/mobile-experience-plan.md. Token-based; hidden ≥641px.
   ============================================================ */
.aa-tabbar {
  display: none;
}
@media (max-width: 1180px) {
  .aa-tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: color-mix(in srgb, var(--color-background-secondary) 86%, transparent);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    /* Borderless: the bar separates by upward shadow, not a stroke (Fase 1). */
    box-shadow: 0 -6px 20px var(--aa-shadow-color);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Fallback for engines without color-mix: a solid bar (declared first so color-mix wins). */
  @supports not (background: color-mix(in srgb, red, blue)) {
    .aa-tabbar {
      background: var(--color-background-secondary);
    }
  }
  .aa-tab {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-height: 56px;
    padding: 8px 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--color-text-tertiary);
    font: 500 0.68rem var(--font-sans);
  }
  .aa-tab.on {
    color: var(--color-text-info);
  }
  /* Content clears the fixed bottom bar (+ the Advisor action bar when present). */
  .aa-page {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .aa-page.has-actionbar {
    padding-bottom: calc(122px + env(safe-area-inset-bottom));
  }
}

/* Settings sheet (opened from the bottom bar's "More"; only reachable on phones). */
.aa-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  animation: aa-fade 0.2s var(--aa-ease);
}
.aa-sheet {
  width: 100%;
  background: var(--color-background-secondary);
  border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--color-border-secondary);
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow: var(--aa-shadow-lg);
  animation: aa-slide-up 0.24s var(--aa-ease);
  max-height: 80vh;
  overflow-y: auto;
}
.aa-sheet-grip {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-border-secondary);
  margin: 4px auto 12px;
}
.aa-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.aa-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 0.5px solid var(--color-border-tertiary);
}
.aa-set-row:first-of-type {
  border-top: 0;
}
.aa-set-row > span {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
}
.aa-seg2 {
  display: inline-flex;
  background: var(--color-background-tertiary);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.aa-seg2-btn {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font: 600 0.85rem var(--font-sans);
  color: var(--color-text-secondary);
}
.aa-seg2-btn.on {
  background: var(--color-background-info);
  color: var(--color-text-info);
}
@keyframes aa-slide-up {
  from {
    transform: translateY(100%);
  }
}
@keyframes aa-fade {
  from {
    opacity: 0;
  }
}

/* Advisor mobile action bar — sticky contextual primary button (phone-only). */
.aa-mobile-actionbar {
  display: none;
}
@media (max-width: 1180px) {
  .aa-mobile-actionbar {
    position: fixed;
    inset-inline: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 55;
    display: flex;
    padding: 10px var(--aa-page-pad);
    background: linear-gradient(to top, var(--color-background-primary) 60%, transparent);
    pointer-events: none;
  }
  /* Hide action bar when Guide modal is open */
  .f-ov.open ~ .aa-mobile-actionbar,
  body:has(.f-ov.open) .aa-mobile-actionbar {
    display: none !important;
    pointer-events: none !important;
  }
  .aa-mobile-actionbar > button {
    pointer-events: auto;
    flex: 1;
    min-height: 50px;
    border: 0;
    border-radius: 999px;
    background: var(--color-text-primary);
    color: var(--color-background-primary);
    font: 600 1rem var(--font-sans);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 8px 24px -8px rgba(139, 124, 255, 0.6);
  }
}

/* Modern app bar (Fase 2): ONE sticky glass bar — nav tabs at the top-left corner,
   controls + brand docked right. Stays floating over content while scrolling. */
.aa-appbar {
  position: sticky;
  top: var(--aa-space-2);
  z-index: 40;
  display: flex;
  align-items: center;
  /* Wraps on mid widths: nav stays top-left, the controls row drops beneath right-aligned —
     each cluster remains a single horizontal line, and the page never scrolls sideways. */
  flex-wrap: wrap;
  gap: var(--aa-space-2) var(--aa-space-3);
  padding: var(--aa-space-2) var(--aa-space-3);
  margin-bottom: var(--aa-space-2);
  border-radius: var(--border-radius-xl);
}
@media (max-width: 1180px) {
  /* Compact tier: MobileChrome owns navigation; the bar is a compact row (brand left + Guide right). */
  .aa-appbar {
    border-radius: var(--border-radius-lg);
  }
}
/* Brand in the app bar — LEFT on every width (Fase 2f, owner: one identity, matching the
   mobile layout): compass + calm gradient wordmark (never glares in either theme). */
.aa-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: 0;
  color: var(--color-text-primary);
}
.aa-brand-word {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--aa-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* ---- Modern app-bar controls (Fase 2f): ONE consistent glass-chip language for every
   button/toggle in the bar — professional, calm, obvious for experts and newcomers. ---- */
.aa-appbar .f-btn {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--aa-accent) 18%, transparent);
  background: color-mix(in srgb, var(--color-background-tertiary) 40%, transparent);
  padding: 7px 13px;
  font-weight: 600;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s var(--aa-ease);
}
.aa-appbar .f-btn:hover {
  border-color: color-mix(in srgb, var(--aa-accent) 40%, transparent);
  transform: translateY(-1px);
}
.aa-seg {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--aa-accent) 14%, transparent);
  background: color-mix(in srgb, var(--color-background-tertiary) 40%, transparent);
}
.aa-ctl-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--aa-accent) 18%, transparent);
  background: color-mix(in srgb, var(--color-background-tertiary) 40%, transparent);
  transition:
    border-color 0.15s ease,
    transform 0.15s var(--aa-ease);
}
.aa-ctl-icon:hover {
  border-color: color-mix(in srgb, var(--aa-accent) 40%, transparent);
  transform: translateY(-1px);
}
/* Pressed/expanded state for icon toggles (e.g. the chat's "What can I ask?" browser). A toggle
   whose on-state is invisible reads as a dead button — kept to surfaces, not an accent fill. */
.aa-ctl-icon.on {
  background: var(--color-background-tertiary);
  border-color: var(--color-border-secondary);
  color: var(--color-text-primary);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .aa-appbar .f-btn,
  .aa-seg,
  .aa-ctl-icon {
    background: var(--color-background-secondary);
    border-color: var(--color-border-secondary);
  }
}

/* ---- Export actions (Fase 2g): uniform professional buttons; a clean full-width list on wrap ---- */
.aa-export {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.aa-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  border: 1px solid color-mix(in srgb, var(--aa-accent) 18%, transparent);
  background: color-mix(in srgb, var(--color-background-tertiary) 40%, transparent);
  border-radius: var(--border-radius-md);
  padding: 10px 15px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s var(--aa-ease);
}
.aa-export-btn:hover {
  border-color: color-mix(in srgb, var(--aa-accent) 42%, transparent);
  transform: translateY(-1px);
}
.aa-export-btn.primary {
  color: var(--color-text-secondary);
  font-weight: 600;
  background: var(--color-background-secondary);
  border-color: var(--color-border-secondary);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
}
.aa-export-btn.primary .aa-kbd {
  color: var(--color-text-secondary);
  background: transparent;
  border-color: var(--color-border-tertiary);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .aa-export-btn {
    background: transparent;
    border-color: var(--color-border-secondary);
  }
}
/* Wrap tier: stack as a full-width list (like the factor sections) — one action per row. */
@media (max-width: 720px) {
  .aa-export {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .aa-export-btn {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ---- Footer legal line (Fase 2g): inline · separated on wide; 3 centered lines on narrow ---- */
.aa-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px 8px;
  font-size: var(--aa-fs-2xs);
  color: var(--color-text-tertiary);
  text-align: center;
}
.aa-footer-sep {
  color: var(--color-text-tertiary);
  opacity: 0.6;
}
@media (max-width: 560px) {
  .aa-footer-sep {
    display: none;
  }
  .aa-footer-legal > span:not(.aa-footer-sep) {
    flex: 0 0 100%;
  }
}

/* ---- Scenario Card Gallery (Master Blueprint Phase 1.3) — searchable cards + a dominant,
   terminal-styled "Build Custom System" card ---- */
.aa-gallery-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 11px;
}
.aa-gallery-search {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--aa-accent) 20%, transparent);
  background: color-mix(in srgb, var(--color-background-tertiary) 40%, transparent);
}
.aa-gallery-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 12.5px;
}
.aa-gallery-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.aa-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: 10px;
}
.aa-scard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 13px 14px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-tertiary);
  background: color-mix(in srgb, var(--color-background-secondary) 70%, transparent);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    transform 0.15s var(--aa-ease),
    box-shadow 0.15s ease;
}
.aa-scard:hover {
  border-color: color-mix(in srgb, var(--aa-accent) 45%, transparent);
  transform: translateY(-2px);
  box-shadow: var(--aa-shadow-md);
}
.aa-scard.on {
  border-color: var(--color-border-info);
  background: var(--color-background-info);
}
.aa-scard-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.aa-scard-head svg {
  color: var(--color-text-info);
  flex: none;
}
.aa-scard-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--color-text-secondary);
}
.aa-scard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
  padding-top: 4px;
}
.aa-scard-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  /* Secondary (not tertiary) to clear WCAG AA on the light card fill (tertiary was 4.27:1). */
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: 5px;
  padding: 1px 6px;
}
/* The dominant "Build Custom System" card — dashed border + terminal iconography (Phase 1.3). */
.aa-scard-custom {
  border-style: dashed;
  border-width: 1.5px;
  border-color: color-mix(in srgb, var(--aa-accent) 55%, transparent);
  background: color-mix(in srgb, var(--aa-accent) 8%, transparent);
  font-family: var(--font-mono);
}
.aa-scard-custom .aa-scard-head {
  color: var(--color-text-info);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .aa-gallery-search,
  .aa-scard {
    background: var(--color-background-secondary);
    border-color: var(--color-border-secondary);
  }
  .aa-scard-custom {
    border-color: var(--color-border-info);
    background: var(--color-background-info);
  }
}

/* ---- Custom Architecture Wizard modal (Phase 1.2) ---- */
.aa-wizard {
  width: 100%;
  max-width: 640px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.aa-wizard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.aa-wizard-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}
.aa-wizard-intro {
  padding: 12px 18px 4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.aa-wizard-body {
  overflow-y: auto;
  padding: 8px 18px 4px;
  display: grid;
  gap: 16px;
}
.aa-wizard-group-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-info);
  margin: 0 0 8px;
}
.aa-wizard-optional {
  color: var(--color-text-tertiary);
  text-transform: none;
}
.aa-wizard-q {
  margin-bottom: 10px;
}
.aa-wizard-q-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--color-text-secondary);
}
.aa-wizard-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.aa-wizard-opt {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--color-text-secondary);
  border: 1px solid color-mix(in srgb, var(--aa-accent) 18%, transparent);
  background: color-mix(in srgb, var(--color-background-tertiary) 40%, transparent);
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}
.aa-wizard-opt:hover {
  border-color: color-mix(in srgb, var(--aa-accent) 40%, transparent);
}
.aa-wizard-opt.on {
  color: var(--color-text-info);
  background: var(--color-background-info);
  border-color: var(--color-border-info);
  font-weight: 600;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .aa-wizard-opt {
    background: var(--color-background-secondary);
    border-color: var(--color-border-secondary);
  }
}
.aa-wizard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-top: 0.5px solid var(--color-border-tertiary);
}
.aa-wizard-hint {
  font-size: 11.5px;
  color: var(--color-text-tertiary);
  flex: 1 1 200px;
}
.aa-wizard-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* ---- Honest Step-3 Analysis Stepper (Master Blueprint Phase 2.2) — terminal readout ---- */
.aa-stepper {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--border-radius-md);
  border: 1px solid color-mix(in srgb, var(--aa-accent) 26%, transparent);
  background: color-mix(in srgb, var(--color-background-tertiary) 45%, transparent);
  font-family: var(--font-mono);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .aa-stepper {
    background: var(--color-background-secondary);
    border-color: var(--color-border-info);
  }
}
.aa-stepper-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-info);
  margin-bottom: 8px;
}
.aa-stepper-skip {
  margin-left: auto;
  font: inherit;
  font-size: 10.5px;
  color: var(--color-text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}
.aa-stepper-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.aa-stepper-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--color-text-tertiary);
  transition: color 0.15s ease;
}
.aa-stepper-line .aa-stepper-mark {
  width: 14px;
  display: inline-flex;
  justify-content: center;
  color: var(--color-text-tertiary);
}
.aa-stepper-line.active {
  color: var(--color-text-primary);
}
.aa-stepper-line.active .aa-stepper-mark {
  color: var(--color-text-info);
  animation: aa-blink 0.9s steps(2) infinite;
}
.aa-stepper-line.done {
  color: var(--color-text-secondary);
}
.aa-stepper-line.done .aa-stepper-mark {
  color: var(--color-text-success);
}
@keyframes aa-blink {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aa-stepper-line.active .aa-stepper-mark {
    animation: none;
  }
}

/* ============================================================
   Chat Advisor (Phase 3) — floating launcher + glass panel.
   ============================================================ */
.aa-chat-root {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 70;
}
@media (max-width: 1180px) {
  /* Clear the mobile bottom tab bar (+ the Advisor action bar) so the FAB never overlaps them. */
  .aa-chat-root {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
}
.aa-chat-fab {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--color-text-tertiary);
  background: var(--color-background-secondary);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.15s var(--aa-ease),
    box-shadow 0.15s ease;
}
.aa-chat-fab:hover {
  transform: translateY(-2px) scale(1.03);
}
.aa-chat-fab.open {
  color: var(--color-text-primary);
  background: var(--color-background-tertiary);
  box-shadow: var(--aa-shadow-md);
}

.aa-chat-panel {
  position: absolute;
  right: 0;
  bottom: 66px;
  width: min(384px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  background: var(--color-background-primary);
}
@media (max-width: 640px) {
  .aa-chat-panel {
    position: fixed;
    right: 8px;
    left: 8px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    width: auto;
    height: min(70vh, 560px);
  }
}
.aa-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
}
.aa-chat-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
}
.aa-chat-tools {
  display: inline-flex;
  gap: 6px;
}
.aa-chat-sub {
  padding: 0 14px 8px;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-text-tertiary);
}
.aa-chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.aa-chat-empty {
  margin: auto 0;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 12.5px;
  display: grid;
  gap: 12px;
}
.aa-chat-sugs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

/* ---- Capability browser ("What can I ask?") -----------------------------
   Two levels, deliberately: the adapter routes ~27 intent families, and listing
   them flat is the overwhelm this is meant to cure (progressive disclosure).
   Level 1 = five plain-language topics; level 2 = real, tappable questions.
   Subtle surfaces only — no accent fills, per the owner's no-bright-colors rule. */
.aa-chat-empty-lead {
  margin: 0;
  color: var(--color-text-secondary);
}
.aa-chat-topics {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 2px 0 4px;
}
.aa-chat-topic,
.aa-chat-ask {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: var(--border-radius-md);
  border: 0.5px solid var(--color-border-tertiary);
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  padding: 9px 11px;
  min-height: 44px; /* touch target floor */
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.aa-chat-topic:hover,
.aa-chat-ask:hover {
  border-color: var(--color-border-secondary);
  background: var(--color-background-tertiary);
}
.aa-chat-topic-ic {
  flex: none;
  color: var(--color-text-tertiary);
}
.aa-chat-topic-txt {
  display: grid;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.aa-chat-topic-label {
  font-size: 12.5px;
  font-weight: 600;
}
.aa-chat-topic-hint {
  font-size: 11px;
  line-height: 1.4;
  /* Secondary, not tertiary: at 11px over the hover surface, tertiary measures 4.22:1 and fails
     WCAG AA (axe-verified). Hierarchy still reads via size and weight, not contrast alone. */
  color: var(--color-text-secondary);
}
.aa-chat-topic-go {
  flex: none;
  color: var(--color-text-tertiary);
}
.aa-chat-ask {
  font-size: 12.5px;
  line-height: 1.45;
}
/* "How to use this" — prose, not a control: no hover/pointer affordance, so it never reads as a
   dead button. Same surface as the topic rows so the pane still looks like one list. */
.aa-chat-howto {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border-radius: var(--border-radius-md);
  border: 0.5px solid var(--color-border-tertiary);
  background: var(--color-background-secondary);
}
.aa-chat-howto-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.aa-chat-howto-body {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.aa-chat-topic-back,
.aa-chat-browse-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  align-self: center;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  font-size: 11.5px;
  font-weight: 500;
  padding: 7px 9px;
  min-height: 34px;
  border-radius: var(--border-radius-sm);
}
.aa-chat-topic-back {
  align-self: start;
  justify-content: flex-start;
}
.aa-chat-topic-back:hover,
.aa-chat-browse-cta:hover {
  color: var(--color-text-primary);
  background: var(--color-background-secondary);
}
@media (prefers-reduced-motion: reduce) {
  .aa-chat-topic,
  .aa-chat-ask {
    transition: none;
  }
}
.aa-chat-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 88%;
}
.aa-chat-msg.user {
  align-self: flex-end;
  align-items: flex-end;
}
.aa-chat-msg.bot {
  align-self: flex-start;
}
.aa-chat-bubble {
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: break-word;
}
.aa-chat-msg.user .aa-chat-bubble {
  background: var(--color-background-info);
  color: var(--color-text-primary);
  border-bottom-right-radius: 4px;
}
.aa-chat-msg.bot .aa-chat-bubble {
  background: color-mix(in srgb, var(--color-background-tertiary) 60%, transparent);
  border-bottom-left-radius: 4px;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .aa-chat-msg.bot .aa-chat-bubble {
    background: var(--color-background-tertiary);
  }
}
.aa-chat-prose > :first-child {
  margin-top: 0;
}
.aa-chat-prose > :last-child {
  margin-bottom: 0;
}
.aa-chat-prose p {
  margin: 4px 0;
}
.aa-chat-error {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-danger);
  font-size: 12.5px;
}
.aa-chat-regen {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--color-text-info);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
}
.aa-chat-caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--color-text-info);
  animation: aa-chat-blink 1s steps(2) infinite;
}
@keyframes aa-chat-blink {
  50% {
    opacity: 0;
  }
}
.aa-chat-jump {
  position: absolute;
  right: 14px;
  bottom: 66px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--color-border-secondary);
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--aa-shadow-md);
}
.aa-chat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 0.5px solid var(--color-border-tertiary);
}
.aa-chat-input {
  flex: 1;
  resize: none;
  max-height: 96px;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--color-border-secondary);
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
}
.aa-chat-input:focus {
  border-color: var(--color-border-info);
}
.aa-chat-send {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--color-text-secondary);
  background: var(--color-background-secondary);
}
.aa-chat-send:disabled {
  opacity: 0.5;
  cursor: default;
}
.aa-chat-send.stop {
  color: var(--color-background-primary);
  background: var(--color-text-danger);
}
@media (prefers-reduced-motion: reduce) {
  .aa-chat-fab,
  .aa-chat-list {
    transition: none;
    scroll-behavior: auto;
  }
  .aa-chat-caret {
    animation: none;
  }
}

/* ============================================================
   Interactive Copilot / guided tutorial (Phase 3).
   ============================================================ */
/* During a tour the app's own sticky 4-step rail is redundant (the Copilot guides you) and, on
   short viewports, it steals the band a spotlight needs — so hide it while the tour runs. */
body.aa-cop-running .aa-steps {
  display: none;
}
.aa-cop-launch-root {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 70;
}
@media (max-width: 1180px) {
  .aa-cop-launch-root {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
  /* Advisor view has the mobile action bar — lift the corner controls ABOVE it (no overlap). */
  body.aa-view-advisor .aa-cop-launch-root,
  body.aa-view-advisor .aa-chat-root {
    bottom: calc(134px + env(safe-area-inset-bottom));
  }
}
.aa-cop-offscreen {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--color-text-tertiary);
  font-style: italic;
}
.aa-cop-launch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-tertiary);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.15s var(--aa-ease),
    border-color 0.15s ease;
}
.aa-cop-launch:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--aa-accent) 50%, transparent);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .aa-cop-launch {
    background: var(--color-background-secondary);
    border-color: var(--color-border-secondary);
  }
}

.aa-cop-portal {
  position: fixed;
  inset: 0;
  z-index: 9999; /* overlay tier (owner z-index strategy): above the primary action + utility FABs */
  pointer-events: none;
}
/* Spotlight ring — a huge box-shadow dims everything except the target cut-out. */
.aa-cop-spot {
  position: fixed;
  border-radius: 10px;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--aa-accent) 70%, transparent),
    0 0 0 9999px rgba(3, 4, 12, 0.55);
  transition:
    top 0.18s var(--aa-ease),
    left 0.18s var(--aa-ease),
    width 0.18s var(--aa-ease),
    height 0.18s var(--aa-ease);
  pointer-events: none;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .aa-cop-spot {
    box-shadow:
      0 0 0 3px var(--color-text-info),
      0 0 0 9999px rgba(3, 4, 12, 0.55);
  }
}
/* Fallback scrim when there's no target (silent fallback → centered card). */
.aa-cop-scrim {
  position: fixed;
  inset: 0;
  background: rgba(3, 4, 12, 0.5);
  pointer-events: none;
}
.aa-cop-card {
  position: fixed;
  z-index: 10000;
  pointer-events: auto;
  padding: 12px 14px;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
  outline: none;
  background: var(--color-background-primary);
  /* Flex column: header + footer are pinned (flex:none), only the middle scrolls — no control or
     text is ever clipped, on any viewport height. */
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}
.aa-cop-head,
.aa-cop-foot {
  flex: none;
}
.aa-cop-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Phones: a bottom sheet — always fully visible, full-width, never clipped by the target's edge. */
.aa-cop-card.sheet {
  left: 8px;
  right: 8px;
  top: auto;
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: auto;
  max-width: none;
  transform: none;
  /* Tall enough that a full step (title + body + Do/Don't) fits WITHOUT internal clipping; the
     sheet still only grows to its content, and the target is scrolled above it. Header + Back/Next
     stay pinned; the body scrolls only if content is unusually long. */
  max-height: min(68vh, calc(100dvh - 84px));
}
.aa-cop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.aa-cop-step {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-info);
}
.aa-cop-title {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 6px;
}
.aa-cop-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.aa-cop-body > :first-child {
  margin-top: 0;
}
.aa-cop-body > :last-child {
  margin-bottom: 0;
}
.aa-cop-rules-wrap {
  display: grid;
  gap: 8px;
  margin: 11px 0 4px;
}
.aa-cop-rules {
  border-radius: var(--border-radius-md);
  padding: 8px 11px;
  border: 1px solid var(--color-border-tertiary);
}
.aa-cop-rules.do {
  background: var(--color-background-success);
}
.aa-cop-rules.dont {
  background: var(--color-background-danger);
}
.aa-cop-rules-h {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.aa-cop-rules.do .aa-cop-rules-h {
  color: var(--color-text-success);
}
.aa-cop-rules.dont .aa-cop-rules-h {
  color: var(--color-text-danger);
}
.aa-cop-rules ul {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.aa-cop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .aa-cop-spot,
  .aa-cop-launch {
    transition: none;
  }
}

/* Top tab nav (desktop) — display via a class (NOT inline) so the phone-hide wins over it. */
.aa-topnav {
  display: flex;
  gap: 4px;
  width: fit-content;
  flex: none;
}
/* Modern segmented tabs: icon + label, FIXED segment width so the pill's size and position
   are identical in English and Indonesian; the active segment is an accent glass pill with
   a soft glow (Fase 1 polish). */
.aa-topnav-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 122px;
  padding: 9px 16px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.aa-topnav-tab:hover {
  color: var(--color-text-primary);
}
.aa-topnav-tab.on {
  background: color-mix(in srgb, var(--aa-accent) 20%, transparent);
  color: var(--color-text-primary);
  font-weight: 600;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--aa-accent) 35%, transparent),
    0 2px 12px -4px rgba(139, 124, 255, 0.55);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .aa-topnav-tab.on {
    background: var(--color-background-info);
  }
}
@media (max-width: 1180px) {
  .aa-topnav {
    display: none;
  }
}

/* Header's theme/language/mode cluster — hidden on phones (they live in the settings sheet). */
.aa-desktop-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 1180px) {
  .aa-desktop-controls {
    display: none;
  }
}