/* ==========================================================================
   Amplifier Design System
   --------------------------------------------------------------------------
   The single source of truth for the product's visual language. It works by
   overriding Shoelace's design tokens at :root, so every sl-* component and
   every template that references var(--sl-*) inherits the brand automatically.

   Layers (in order):
     1. Brand tokens        --amp-* primitives (palette, gradients, fonts)
     2. Shoelace overrides  --sl-* tokens remapped onto the brand
     3. Base elements       body, headings, links, scrollbars
     4. App shell           topbar, workflow rail, main container, footer
     5. Components          cards, buttons, dialogs, tables, tags, nav
     6. Page patterns       page headers, stat tiles, empty states, prose
     7. Utilities           spacing/layout helpers used across templates

   Companion docs: /docs/Brand_Guidelines.md (repo) and /styleguide/ (live).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Brand tokens
   -------------------------------------------------------------------------- */

:root {
  /* Ember — primary brand hue. The warm glow of amplifier hardware:
     rust at rest, brightening as the signal heats up. */
  --amp-ember-50:  #fff7ed;
  --amp-ember-100: #ffedd5;
  --amp-ember-200: #fed7aa;
  --amp-ember-300: #fdba74;
  --amp-ember-400: #fb923c;
  --amp-ember-500: #ea580c;
  --amp-ember-600: #c2410c;  /* core — white text passes AA (5.3:1) */
  --amp-ember-700: #9a3412;
  --amp-ember-800: #7c2d12;
  --amp-ember-900: #5f230e;
  --amp-ember-950: #431407;

  /* Signal Amber — the "amplified" accent. Use sparingly: highlights,
     the final bar of the logo, moments of success/energy. */
  --amp-amber-50:  #fffbeb;
  --amp-amber-100: #fef3c7;
  --amp-amber-200: #fde68a;
  --amp-amber-300: #fcd34d;
  --amp-amber-400: #fbbf24;
  --amp-amber-500: #f59e0b;
  --amp-amber-600: #d97706;
  --amp-amber-700: #b45309;

  /* Warm stone neutrals — "paper", never blue-gray */
  --amp-stone-0:    #ffffff;
  --amp-stone-50:   #fafaf9;
  --amp-stone-100:  #f5f5f4;
  --amp-stone-200:  #e7e5e4;
  --amp-stone-300:  #d6d3d1;
  --amp-stone-400:  #a8a29e;
  --amp-stone-500:  #78716c;
  --amp-stone-600:  #57534e;
  --amp-stone-700:  #44403c;
  --amp-stone-800:  #292524;
  --amp-stone-900:  #1c1917;
  --amp-stone-950:  #0c0a09;

  /* Surfaces */
  --amp-color-bg: #faf9f7;                /* warm paper page background */
  --amp-color-surface: var(--amp-stone-0);
  --amp-color-border: var(--amp-stone-200);
  --amp-color-ink: var(--amp-stone-900);
  --amp-color-ink-muted: var(--amp-stone-600);
  --amp-color-ink-faint: var(--amp-stone-500);

  /* Brand gradient — the signal heating up: rust through ember into
     amber gold. One warm family, so the midpoint never goes muddy. */
  --amp-gradient-brand: linear-gradient(120deg, #7c2d12 0%, #c2410c 40%, #ea580c 70%, #f59e0b 105%);
  --amp-gradient-cta: linear-gradient(120deg, #c2410c 0%, #ea580c 100%);
  --amp-gradient-wash: radial-gradient(1200px 500px at 50% -10%, rgba(234, 88, 12, 0.07), transparent 70%);

  /* Typography */
  --amp-font-display: "Sora", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --amp-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --amp-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Radii */
  --amp-radius-sm: 8px;
  --amp-radius-md: 12px;
  --amp-radius-lg: 16px;
  --amp-radius-xl: 24px;
  --amp-radius-pill: 999px;

  /* Soft, warm shadows (stone-tinted, never pure black) */
  --amp-shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.05);
  --amp-shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.07), 0 1px 2px rgba(28, 25, 23, 0.04);
  --amp-shadow-md: 0 4px 12px rgba(28, 25, 23, 0.07), 0 2px 4px rgba(28, 25, 23, 0.04);
  --amp-shadow-lg: 0 12px 32px rgba(28, 25, 23, 0.10), 0 4px 8px rgba(28, 25, 23, 0.04);
  --amp-shadow-glow: 0 4px 20px rgba(194, 65, 12, 0.30);

  /* Layout */
  --amp-content-width: 1240px;
  --amp-topbar-height: 64px;
}


/* --------------------------------------------------------------------------
   2. Shoelace token overrides
   -------------------------------------------------------------------------- */

:root,
:host,
.sl-theme-light {
  /* Primary → Ember */
  --sl-color-primary-50:  var(--amp-ember-50);
  --sl-color-primary-100: var(--amp-ember-100);
  --sl-color-primary-200: var(--amp-ember-200);
  --sl-color-primary-300: var(--amp-ember-300);
  --sl-color-primary-400: var(--amp-ember-400);
  --sl-color-primary-500: var(--amp-ember-500);
  --sl-color-primary-600: var(--amp-ember-600);
  --sl-color-primary-700: var(--amp-ember-700);
  --sl-color-primary-800: var(--amp-ember-800);
  --sl-color-primary-900: var(--amp-ember-900);
  --sl-color-primary-950: var(--amp-ember-950);

  /* Neutral → warm stone */
  --sl-color-neutral-0:    var(--amp-stone-0);
  --sl-color-neutral-50:   var(--amp-stone-50);
  --sl-color-neutral-100:  var(--amp-stone-100);
  --sl-color-neutral-200:  var(--amp-stone-200);
  --sl-color-neutral-300:  var(--amp-stone-300);
  --sl-color-neutral-400:  var(--amp-stone-400);
  --sl-color-neutral-500:  var(--amp-stone-500);
  --sl-color-neutral-600:  var(--amp-stone-600);
  --sl-color-neutral-700:  var(--amp-stone-700);
  --sl-color-neutral-800:  var(--amp-stone-800);
  --sl-color-neutral-900:  var(--amp-stone-900);
  --sl-color-neutral-950:  var(--amp-stone-950);
  --sl-color-neutral-1000: #000000;

  /* Success → emerald */
  --sl-color-success-50:  #ecfdf5;
  --sl-color-success-100: #d1fae5;
  --sl-color-success-200: #a7f3d0;
  --sl-color-success-300: #6ee7b7;
  --sl-color-success-400: #34d399;
  --sl-color-success-500: #10b981;
  --sl-color-success-600: #059669;
  --sl-color-success-700: #047857;
  --sl-color-success-800: #065f46;
  --sl-color-success-900: #064e3b;
  --sl-color-success-950: #022c22;

  /* Warning → Signal Amber */
  --sl-color-warning-50:  var(--amp-amber-50);
  --sl-color-warning-100: var(--amp-amber-100);
  --sl-color-warning-200: var(--amp-amber-200);
  --sl-color-warning-300: var(--amp-amber-300);
  --sl-color-warning-400: var(--amp-amber-400);
  --sl-color-warning-500: var(--amp-amber-500);
  --sl-color-warning-600: var(--amp-amber-600);
  --sl-color-warning-700: var(--amp-amber-700);
  --sl-color-warning-800: #92400e;
  --sl-color-warning-900: #78350f;
  --sl-color-warning-950: #451a03;

  /* Danger → rose, clearly separated from the ember primary */
  --sl-color-danger-50:  #fff1f2;
  --sl-color-danger-100: #ffe4e6;
  --sl-color-danger-200: #fecdd3;
  --sl-color-danger-300: #fda4af;
  --sl-color-danger-400: #fb7185;
  --sl-color-danger-500: #f43f5e;
  --sl-color-danger-600: #e11d48;
  --sl-color-danger-700: #be123c;
  --sl-color-danger-800: #9f1239;
  --sl-color-danger-900: #881337;
  --sl-color-danger-950: #4c0519;

  /* Typography */
  --sl-font-sans: var(--amp-font-body);
  --sl-font-mono: var(--amp-font-mono);

  /* Radii — comfortable rounding everywhere */
  --sl-border-radius-small: var(--amp-radius-sm);
  --sl-border-radius-medium: var(--amp-radius-md);
  --sl-border-radius-large: var(--amp-radius-lg);
  --sl-border-radius-x-large: var(--amp-radius-xl);

  /* Shadows */
  --sl-shadow-x-small: var(--amp-shadow-xs);
  --sl-shadow-small: var(--amp-shadow-sm);
  --sl-shadow-medium: var(--amp-shadow-md);
  --sl-shadow-large: var(--amp-shadow-lg);
  --sl-shadow-x-large: var(--amp-shadow-lg);

  /* Focus ring */
  --sl-focus-ring-color: var(--amp-ember-400);
  --sl-focus-ring-width: 3px;

  /* Inputs */
  --sl-input-border-radius-small: var(--amp-radius-sm);
  --sl-input-border-radius-medium: 10px;
  --sl-input-border-radius-large: var(--amp-radius-md);
  --sl-input-border-color: var(--amp-stone-300);
  --sl-input-border-color-hover: var(--amp-stone-400);
  --sl-input-border-color-focus: var(--amp-ember-500);
  --sl-input-placeholder-color: var(--amp-stone-400);

  /* Panels (dropdowns, dialogs, menus) */
  --sl-panel-background-color: var(--amp-stone-0);
  --sl-panel-border-color: var(--amp-stone-200);

  /* Tooltips */
  --sl-tooltip-background-color: var(--amp-stone-900);
  --sl-tooltip-color: var(--amp-stone-50);
  --sl-tooltip-border-radius: var(--amp-radius-sm);
}


/* --------------------------------------------------------------------------
   3. Base elements
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--amp-font-body);
  margin: 0;
  background-color: var(--amp-color-bg);
  color: var(--amp-color-ink);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--amp-font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--amp-color-ink);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }

a {
  color: var(--amp-ember-700);
  text-decoration-color: var(--amp-ember-300);
  text-underline-offset: 2px;
  transition: color 120ms ease;
}

a:hover { color: var(--amp-ember-600); }

::selection {
  background: var(--amp-ember-200);
  color: var(--amp-ember-950);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* --------------------------------------------------------------------------
   4. App shell
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--amp-content-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

/* Topbar */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--amp-topbar-height);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--amp-color-border);
}

.app-topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.app-topbar-left,
.app-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

/* Brand lockup (mark SVG + wordmark) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--amp-color-ink);
}

.brand:hover { color: var(--amp-color-ink); }

.brand img,
.brand svg {
  height: 26px;
  width: auto;
  display: block;
}

.brand-name {
  font-family: var(--amp-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Quiet top-nav links */
.top-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.top-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--amp-radius-sm);
  color: var(--amp-color-ink-muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.top-nav a:hover {
  background: var(--amp-stone-100);
  color: var(--amp-color-ink);
}

.top-nav a.is-active {
  background: var(--amp-ember-50);
  color: var(--amp-ember-700);
}

/* Avatar button */
.avatar-button {
  border: none;
  background: none;
  padding: 2px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
}

.avatar-button:focus-visible {
  outline: var(--sl-focus-ring-width) solid var(--sl-focus-ring-color);
  outline-offset: 1px;
}

.avatar-button sl-avatar {
  --size: 34px;
}

.avatar-button sl-avatar::part(base) {
  background: var(--amp-gradient-cta);
  color: #fff;
  font-weight: 600;
  font-family: var(--amp-font-display);
}

/* Main content area */
main.app-main {
  padding: 2rem 0 4rem;
  min-height: calc(100vh - var(--amp-topbar-height) - 120px);
}

/* Subtle ember wash at the very top of every page */
.app-body {
  background-image: var(--amp-gradient-wash);
  background-repeat: no-repeat;
}

/* App footer */
.app-footer {
  border-top: 1px solid var(--amp-color-border);
  padding: 1.5rem 0;
  background: var(--amp-color-surface);
}

.app-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--amp-color-ink-faint);
}

.app-footer-inner nav {
  display: flex;
  gap: 1.25rem;
}

.app-footer-inner a {
  color: var(--amp-color-ink-faint);
  text-decoration: none;
}

.app-footer-inner a:hover { color: var(--amp-ember-700); }


/* --------------------------------------------------------------------------
   4b. Workflow rail (the verb spine: Capture → … → Engage)
   -------------------------------------------------------------------------- */

.workflow-stepper {
  background: transparent;
  padding: 0.9rem 0 0;
}

.workflow-stepper-list {
  max-width: var(--amp-content-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.workflow-stepper-list::-webkit-scrollbar { display: none; }

.workflow-step {
  display: flex;
  align-items: center;
  min-width: max-content;
}

/* Connector between steps — the signal flowing forward */
.workflow-step + .workflow-step::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--amp-stone-300);
  margin: 0 0.35rem;
  flex: none;
}

.workflow-step-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.9rem;
  border-radius: var(--amp-radius-pill);
  border: 1px solid transparent;
  color: var(--amp-color-ink-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.workflow-step-link sl-icon { font-size: 0.95rem; }

.workflow-step-link:hover {
  background: var(--amp-stone-0);
  border-color: var(--amp-color-border);
  color: var(--amp-ember-700);
  box-shadow: var(--amp-shadow-xs);
}

.workflow-step--active .workflow-step-link {
  background: var(--amp-gradient-cta);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--amp-shadow-glow);
}

.workflow-step--active .workflow-step-link:hover {
  background: var(--amp-gradient-cta);
  color: #fff;
}

.workflow-step--disabled .workflow-step-link {
  color: var(--amp-stone-400);
  cursor: not-allowed;
}

.workflow-step--disabled .workflow-step-link:hover {
  background: transparent;
  border-color: transparent;
  color: var(--amp-stone-400);
  box-shadow: none;
}

.workflow-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--amp-stone-200);
  color: var(--amp-stone-600);
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--amp-font-display);
}

.workflow-step--active .workflow-step-index {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.workflow-step--disabled .workflow-step-index {
  background: var(--amp-stone-100);
  color: var(--amp-stone-400);
}

@media (max-width: 860px) {
  .workflow-step-label { display: none; }
  .workflow-step-index { display: none; }
  .workflow-step-link { padding: 0.45rem 0.7rem; }
  .workflow-step-link sl-icon { font-size: 1.05rem; }
  .workflow-step + .workflow-step::before { width: 10px; margin: 0 0.15rem; }
}


/* --------------------------------------------------------------------------
   5. Component polish (Shoelace parts)
   -------------------------------------------------------------------------- */

/* Cards — soft surfaces with hairline borders */
sl-card {
  --border-color: var(--amp-color-border);
  --border-radius: var(--amp-radius-lg);
  --padding: 1.25rem;
  width: 100%;
}

sl-card::part(base) {
  box-shadow: var(--amp-shadow-sm);
  background: var(--amp-color-surface);
}

sl-card [slot="header"] h2,
sl-card [slot="header"] h3 {
  margin: 0;
}

/* Buttons — confident weight, subtle lift on hover */
sl-button::part(base) {
  font-weight: 600;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

sl-button[variant="primary"]::part(base) {
  box-shadow: var(--amp-shadow-xs);
}

sl-button[variant="primary"]:not([disabled])::part(base):hover {
  transform: translateY(-1px);
  box-shadow: var(--amp-shadow-glow);
}

sl-button[variant="default"]::part(base) {
  background: var(--amp-color-surface);
}

/* Gradient CTA — marketing + hero moments */
sl-button.amp-cta::part(base) {
  background: var(--amp-gradient-cta);
  border: none;
  color: #fff;
}

sl-button.amp-cta:not([disabled])::part(base):hover {
  transform: translateY(-1px);
  box-shadow: var(--amp-shadow-glow);
  background: var(--amp-gradient-cta);
}

/* Dialogs & drawers */
sl-dialog::part(panel),
sl-drawer::part(panel) {
  border-radius: var(--amp-radius-lg);
  box-shadow: var(--amp-shadow-lg);
}

sl-dialog::part(title) {
  font-family: var(--amp-font-display);
  font-weight: 600;
}

/* Menus */
sl-menu {
  border-radius: var(--amp-radius-md);
}

/* Tags */
sl-tag::part(base) {
  border-radius: var(--amp-radius-pill);
  font-weight: 500;
}

/* Details (FAQ / collapsibles) */
sl-details::part(base) {
  border-radius: var(--amp-radius-md);
  border-color: var(--amp-color-border);
  background: var(--amp-color-surface);
}

sl-details::part(header) {
  font-weight: 600;
  font-family: var(--amp-font-display);
}

/* Plain HTML tables (publishing queue, analytics) */
.amp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--amp-color-surface);
  border: 1px solid var(--amp-color-border);
  border-radius: var(--amp-radius-md);
  overflow: hidden;
  font-size: 0.9rem;
}

.amp-table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--amp-color-ink-faint);
  background: var(--amp-stone-50);
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--amp-color-border);
}

.amp-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--amp-stone-100);
  vertical-align: middle;
}

.amp-table tr:last-child td { border-bottom: none; }

.amp-table tbody tr {
  transition: background 100ms ease;
}

.amp-table tbody tr:hover { background: var(--amp-stone-50); }

/* Forms */
sl-input, sl-textarea, sl-select, sl-checkbox {
  width: 100%;
}

sl-input::part(form-control-label),
sl-textarea::part(form-control-label),
sl-select::part(form-control-label) {
  font-weight: 500;
  font-size: 0.875rem;
}


/* --------------------------------------------------------------------------
   6. Page patterns
   -------------------------------------------------------------------------- */

/* Page header: title + subtitle on the left, actions on the right */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.page-header h1 {
  margin: 0 0 0.25rem;
  font-size: 1.6rem;
}

.page-header .page-subtitle {
  margin: 0;
  color: var(--amp-color-ink-muted);
  font-size: 0.95rem;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Eyebrow label above titles */
.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amp-ember-600);
  margin-bottom: 0.5rem;
}

/* Stat tiles */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.stat-card {
  background: var(--amp-color-surface);
  border: 1px solid var(--amp-color-border);
  border-radius: var(--amp-radius-lg);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--amp-shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stat-card .stat-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--amp-color-ink-faint);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.stat-card .stat-value {
  font-family: var(--amp-font-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--amp-color-ink);
}

.stat-card .stat-hint {
  font-size: 0.8rem;
  color: var(--amp-color-ink-faint);
}

/* Empty states */
.amp-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--amp-color-ink-muted);
}

.amp-empty sl-icon {
  font-size: 2rem;
  color: var(--amp-ember-300);
  margin-bottom: 0.75rem;
}

.amp-empty h3 {
  margin: 0 0 0.35rem;
}

.amp-empty p {
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
}

/* List rows (recent items, inbox-style lists) */
.amp-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--amp-radius-md);
  border: 1px solid var(--amp-stone-100);
  background: var(--amp-color-surface);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.amp-row:hover {
  border-color: var(--amp-ember-200);
  box-shadow: var(--amp-shadow-xs);
}

.amp-row-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--amp-ember-50);
  color: var(--amp-ember-600);
  font-size: 1rem;
}

/* Prose — long-form docs & guides */
.prose {
  max-width: 46rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--amp-stone-800);
}

.prose h1 { font-size: 2rem; margin: 0 0 0.75rem; }
.prose h2 { font-size: 1.35rem; margin: 2.25rem 0 0.6rem; }
.prose h3 { font-size: 1.1rem; margin: 1.75rem 0 0.5rem; }
.prose p { margin: 0 0 1.1em; }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.35em; }
.prose li::marker { color: var(--amp-ember-400); }

.prose code {
  font-family: var(--amp-font-mono);
  font-size: 0.85em;
  background: var(--amp-stone-100);
  border: 1px solid var(--amp-stone-200);
  border-radius: 5px;
  padding: 0.1em 0.35em;
}

.prose blockquote {
  margin: 1.25em 0;
  padding: 0.5em 1.25em;
  border-left: 3px solid var(--amp-ember-300);
  background: var(--amp-ember-50);
  border-radius: 0 var(--amp-radius-sm) var(--amp-radius-sm) 0;
  color: var(--amp-stone-700);
}

.prose blockquote p { margin: 0; }

.prose hr {
  border: none;
  border-top: 1px solid var(--amp-color-border);
  margin: 2rem 0;
}


/* --------------------------------------------------------------------------
   7. Utilities (existing templates rely on several of these — keep stable)
   -------------------------------------------------------------------------- */

.text-center { text-align: center; }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.text-muted { color: var(--amp-color-ink-muted); }
.text-faint { color: var(--amp-color-ink-faint); }

/* HTMX loading indicators */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-request.htmx-indicator { display: inline-block; }

.htmx-swapping {
  opacity: 0;
  transition: opacity 200ms ease-out;
}

/* Global corner spinner */
.loading-spinner {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
}

/* Toast container polish */
#toast-container sl-alert::part(base) {
  border-radius: var(--amp-radius-md);
  box-shadow: var(--amp-shadow-lg);
}


/* --------------------------------------------------------------------------
   7b. Auth screens
   -------------------------------------------------------------------------- */

.auth-main { padding: 0; min-height: 100vh; }

/* Split layout: brand story left, form right */
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  min-height: 100vh;
}

.auth-brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: #fff;
  background:
    radial-gradient(700px 420px at 85% 110%, rgba(245, 158, 11, 0.22), transparent 60%),
    radial-gradient(600px 400px at -10% -10%, rgba(234, 88, 12, 0.28), transparent 55%),
    linear-gradient(160deg, #7c2d12, var(--amp-ember-950));
}

.auth-brand-panel .brand-name { color: #fff; }

.auth-brand-headline {
  font-family: var(--amp-font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 1.5rem;
}

.auth-props {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.auth-props li {
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  color: var(--amp-ember-100);
  font-size: 0.95rem;
}

.auth-props sl-icon {
  color: var(--amp-amber-400);
  flex: none;
  transform: translateY(2px);
}

.auth-brand-footer {
  font-size: 0.82rem;
  color: var(--amp-ember-300);
}

.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.auth-form-inner { width: 100%; max-width: 400px; }

.auth-form-inner .auth-title {
  font-size: 1.5rem;
  margin: 1.75rem 0 0.4rem;
}

.auth-form-inner .auth-subtitle {
  color: var(--amp-color-ink-muted);
  font-size: 0.95rem;
  margin: 0 0 1.75rem;
}

@media (max-width: 860px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-brand-panel { display: none; }
}

/* Simple centered card — used by allauth fallback pages (password reset,
   email verification, logout confirm). These render plain HTML elements,
   so give bare inputs/buttons inside the card a styled default. */
.auth-simple {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2.5rem 1rem;
  background-image: var(--amp-gradient-wash);
  background-repeat: no-repeat;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--amp-color-surface);
  border: 1px solid var(--amp-color-border);
  border-radius: var(--amp-radius-xl);
  box-shadow: var(--amp-shadow-lg);
  padding: 2.25rem;
}

.auth-card h1 {
  font-size: 1.4rem;
  margin: 0 0 1rem;
}

.auth-card form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}

.auth-card label {
  font-weight: 500;
  font-size: 0.875rem;
  display: block;
  margin-bottom: 0.3rem;
}

.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--sl-input-border-color);
  border-radius: var(--sl-input-border-radius-medium);
  background: var(--amp-stone-0);
  color: var(--amp-color-ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.auth-card input:focus-visible {
  outline: none;
  border-color: var(--sl-input-border-color-focus);
  box-shadow: 0 0 0 3px var(--amp-ember-100);
}

.auth-card button[type="submit"],
.auth-card .auth-btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.65rem 1.2rem;
  border: none;
  border-radius: var(--sl-input-border-radius-medium);
  background: var(--amp-ember-600);
  color: #fff;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.auth-card button[type="submit"]:hover,
.auth-card .auth-btn:hover {
  background: var(--amp-ember-700);
  transform: translateY(-1px);
  box-shadow: var(--amp-shadow-glow);
}

.auth-card .helptext,
.auth-card .errorlist {
  font-size: 0.82rem;
  color: var(--amp-color-ink-faint);
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.auth-card .errorlist { color: var(--sl-color-danger-600); }


/* --------------------------------------------------------------------------
   8. Documentation layout
   -------------------------------------------------------------------------- */

.docs-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.docs-sidebar {
  position: sticky;
  top: calc(var(--amp-topbar-height) + 1.5rem);
}

.docs-sidebar .docs-nav-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amp-color-ink-faint);
  margin: 0 0 0.6rem;
  padding-left: 0.75rem;
}

.docs-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 1.5rem;
}

.docs-nav a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--amp-radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--amp-color-ink-muted);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.docs-nav a sl-icon {
  font-size: 0.9rem;
  color: var(--amp-stone-400);
}

.docs-nav a:hover {
  background: var(--amp-stone-100);
  color: var(--amp-color-ink);
}

.docs-nav a.is-active {
  background: var(--amp-ember-50);
  color: var(--amp-ember-700);
  font-weight: 600;
}

.docs-nav a.is-active sl-icon { color: var(--amp-ember-500); }

/* Docs hub cards */
.docs-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.docs-card {
  display: block;
  background: var(--amp-color-surface);
  border: 1px solid var(--amp-color-border);
  border-radius: var(--amp-radius-lg);
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.docs-card:hover {
  border-color: var(--amp-ember-300);
  box-shadow: var(--amp-shadow-md);
  transform: translateY(-2px);
  color: inherit;
}

.docs-card .docs-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--amp-ember-50);
  color: var(--amp-ember-600);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.docs-card h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}

.docs-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--amp-color-ink-muted);
  line-height: 1.5;
}

/* Prev/next pager at the bottom of each guide */
.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--amp-color-border);
}

.docs-pager a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .docs-sidebar { position: static; }
  .docs-nav { flex-direction: row; flex-wrap: wrap; }
}