@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Literata:ital,opsz,wght@0,7..72,400..700;1,7..72,400..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');


/* TowAdmin app layer. Built only from the Xilyxis tokens and primitives in ./xds (synced, never edited here).
   Light and dark both resolve through the tokens; nothing here names a color directly. */

/* typography.css (the editorial display and reading faces) is deliberately not imported: TowAdmin is all chrome,
   which the design system sets in --xlx-font-sans. */

/* =========================================================================
   Xilyxis Design System — Core tokens
   Colors, typography, spacing, radii, shadows, glass effects.

   Light + dark variants. Default: dark (matches current marketing site).
   Toggle by setting [data-theme="light"] on <html> or any ancestor.
   ========================================================================= */

/* ---------- Fonts ----------
   The production site uses the system font stack (no webfont is bundled).
   We keep that as the default and add Inter + JetBrains Mono as the
   recommended substitutes when a polished variable-weight font is needed
   (e.g. for slides, UI kits, marketing).
   ------------------------------------------------------------------- */

:root {
  /* ============ Brand ============ */
  --xlx-brand:            #A3DAFF;   /* primary — light cyan / sky blue */
  --xlx-brand-dark:       #7BC4F2;   /* primary hover */
  --xlx-brand-light:      #C2EEFF;   /* accents, borders */
  --xlx-brand-ink:        #0B1220;   /* foreground when on brand fill */
  --xlx-brand-rgb:        163, 218, 255;   /* raw RGB for rgba() usage */
  --xlx-brand-dark-rgb:   123, 196, 242;   /* --xlx-brand-dark raw RGB */

  /* ============ Neutral scale (Tailwind gray) ============ */
  --xlx-gray-50:   #f9fafb;
  --xlx-gray-100:  #f3f4f6;
  --xlx-gray-200:  #e5e7eb;
  --xlx-gray-300:  #d1d5db;
  --xlx-gray-400:  #9ca3af;
  --xlx-gray-500:  #6b7280;
  --xlx-gray-600:  #4b5563;
  --xlx-gray-700:  #374151;
  --xlx-gray-800:  #1f2937;
  --xlx-gray-900:  #111827;
  --xlx-gray-950:  #0b1220;

  /* ============ Semantic status ============ */
  --xlx-success:             #6EE7B7;
  --xlx-warning:             #FBBF24;
  --xlx-danger:              #FECACA;
  --xlx-info:                #A3DAFF;
  --xlx-success-rgb:         110, 231, 183; /* raw RGB for rgba() usage */
  --xlx-warning-rgb:         251, 191, 36;  /* raw RGB for rgba() usage */
  --xlx-danger-rgb:          254, 202, 202; /* raw RGB for rgba() usage */
  --xlx-neutral-muted-rgb:   156, 163, 175; /* raw RGB for rgba() usage */

  /* Status TEXT and status FILL are different tokens, because they pull in
     opposite directions: text wants a tone that stands off the background
     (light at night, deep in daylight), while a solid fill under white ink
     wants a deep tone in every theme. `--xlx-danger` was once both and passed
     as neither at night (white on #F87171 is 2.77:1). The fills below are
     theme-invariant: white ink clears 4.5:1 on each in any theme. */
  --xlx-danger-fill:  #B91C1C;         /* danger button / solid danger surface */
  --xlx-danger-ink:   #ffffff;         /* foreground on --xlx-danger-fill */
  --xlx-success-fill: #166534;         /* solid success surface (e.g. a done step) */
  --xlx-success-ink:  #ffffff;         /* foreground on --xlx-success-fill */
  --xlx-overlay:    var(--xlx-scrim);  /* modal/dialog backdrop */

  /* ============ Spacing scale (4px base) ============ */
  --xlx-space-0:   0;
  --xlx-space-1:   0.25rem;   /*  4 */
  --xlx-space-2:   0.5rem;    /*  8 */
  --xlx-space-3:   0.75rem;   /* 12 */
  --xlx-space-4:   1rem;      /* 16 */
  --xlx-space-5:   1.25rem;   /* 20 */
  --xlx-space-6:   1.5rem;    /* 24 */
  --xlx-space-7:   1.75rem;   /* 28 */
  --xlx-space-8:   2rem;      /* 32 */
  --xlx-space-10:  2.5rem;    /* 40 */
  --xlx-space-12:  3rem;      /* 48 */
  --xlx-space-16:  4rem;      /* 64 */
  --xlx-space-20:  5rem;      /* 80 */

  /* ============ Radii ============ */
  --xlx-radius-sm:   0.375rem;  /*  6 — small tags/chips */
  --xlx-radius-md:   0.5rem;    /*  8 — buttons, inputs */
  --xlx-radius-lg:   0.75rem;   /* 12 — cards, header */
  --xlx-radius-xl:   1rem;      /* 16 — big panels */
  --xlx-radius-2xl:  1.5rem;    /* 24 — hero cards */
  --xlx-radius-full: 9999px;

  /* ============ Motion ============ */
  --xlx-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --xlx-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --xlx-duration-1:  150ms;
  --xlx-duration-2:  200ms;
  --xlx-duration-3:  300ms;

  /* ============ Font families ============ */
  --xlx-font-sans:  'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
  --xlx-font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --xlx-font-system: system-ui, Avenir, Helvetica, Arial, sans-serif; /* legacy match */

  /* Book-writing app stack — additive, opt-in.
     Use on the manuscript surface itself; UI chrome stays on --xlx-font-sans. */
  --xlx-font-reading:    'Literata', Charter, 'Iowan Old Style', Georgia, serif;        /* long-form body */
  --xlx-font-editorial:  'Source Serif 4', 'Source Serif Pro', Georgia, Cambria, serif; /* alt manuscript */
  --xlx-font-chapter:    'Libre Caslon Text', 'Libre Caslon', Georgia, serif;           /* chapter display */
  --xlx-font-draft:      'IBM Plex Mono', ui-monospace, 'Courier Prime', Courier, monospace; /* typewriter draft */

  /* ============ Type scale ============ */
  --xlx-text-xs:   0.75rem;   /* 12 */
  --xlx-text-sm:   0.875rem;  /* 14 */
  --xlx-text-base: 1rem;      /* 16 */
  --xlx-text-lg:   1.125rem;  /* 18 */
  --xlx-text-xl:   1.25rem;   /* 20 */
  --xlx-text-2xl:  1.5rem;    /* 24 */
  --xlx-text-3xl:  1.875rem;  /* 30 */
  --xlx-text-4xl:  2.25rem;   /* 36 */
  --xlx-text-5xl:  3rem;      /* 48 */
  --xlx-text-6xl:  3.75rem;   /* 60 */

  --xlx-leading-tight: 1.15;
  --xlx-leading-snug:  1.35;
  --xlx-leading-base:  1.55;
  --xlx-leading-loose: 1.75;

  --xlx-tracking-tight:  -0.02em;
  --xlx-tracking-normal:  0;
  --xlx-tracking-wide:    0.02em;
  --xlx-tracking-caps:    0.12em;
}

/* =========================================================================
   DARK THEME (default — matches current marketing site)
   ========================================================================= */
:root,
[data-theme="dark"] {
  --xlx-bg:              #0b1220;                          /* page background (slightly deeper than gray-900 for depth) */
  --xlx-bg-raised:       #111827;                          /* gray-900 */
  --xlx-surface:         #1f2937;                          /* gray-800 — opaque cards */
  --xlx-surface-2:       #374151;                          /* gray-700 — hover on surface */
  --xlx-surface-muted:   rgba(31, 41, 55, 0.5);            /* translucent feature tiles */

  --xlx-fg:              #ffffff;                          /* headings, emphasized */
  --xlx-fg-1:            #e5e7eb;                          /* high-contrast body */
  --xlx-fg-2:            #d1d5db;                          /* body */
  --xlx-fg-muted:        #aab1bc;                          /* descriptions */
  --xlx-fg-subtle:       #6b7280;                          /* placeholder, disabled */

  --xlx-border:          #374151;                          /* standard divider */
  --xlx-border-subtle:   #1f2937;                          /* barely-there lines */
  --xlx-border-strong:   #4b5563;                          /* focused borders */

  /* Glass — the signature treatment */
  --xlx-glass:           rgba(255, 255, 255, 0.08);
  --xlx-glass-strong:    rgba(255, 255, 255, 0.14);
  --xlx-glass-border:    rgba(255, 255, 255, 0.18);
  --xlx-glass-border-hi: rgba(255, 255, 255, 0.28);
  --xlx-glass-blur:      16px;                              /* slightly stronger than legacy 12px */
  --xlx-glass-saturate:  140%;

  /* Shadows */
  --xlx-shadow-sm:  0 1px 2px  rgba(0, 0, 0, 0.25);
  --xlx-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.30);
  --xlx-shadow-lg:  0 10px 30px rgba(0, 0, 0, 0.38);
  --xlx-shadow-xl:  0 24px 60px rgba(0, 0, 0, 0.45);
  --xlx-shadow-glow: 0 0 0 1px rgba(163, 218, 255, 0.25), 0 8px 30px rgba(163, 218, 255, 0.18);

  /* Scrim — full-screen darkening overlay */
  --xlx-scrim:      rgba(0, 0, 0, 0.60);
  --xlx-scrim-soft: rgba(0, 0, 0, 0.20);

  --xlx-danger-bg:    rgba(248, 113, 113, 0.12);
  --xlx-warning-bg:   rgba(251, 191, 36, 0.10);
  --xlx-warning-border: rgba(251, 191, 36, 0.28);
  --xlx-warn-bg:      rgba(251, 191, 36, 0.10);
  --xlx-warn-fg:      #FBBF24;
  --xlx-info-bg:      rgba(96, 165, 250, 0.10);
  --xlx-info-fg:      #60A5FA;
  --xlx-audit:          #a78bfa;
  --xlx-audit-bg:       rgba(167, 139, 250, 0.12);
  --xlx-audit-border:   rgba(167, 139, 250, 0.28);

  /* Accent — secondary violet, distinct from brand blue; used for category/icon badges */
  --xlx-accent:         #c084fc;   /* violet-400 — secondary accent */

  /* Focus ring */
  --xlx-ring:       0 0 0 2px var(--xlx-bg), 0 0 0 4px var(--xlx-brand-dark);

  /* Selection highlight — used for click-to-select outline rings in preview/audit surfaces */
  --xlx-selection:            #f472b6;               /* pink-400 — distinct from brand/accent */
  --xlx-selection-glow:       rgba(244, 114, 182, 0.18);

  /* Workspace panel overlays — used by .ws-* chrome in app.css */
  --xlx-ws-layer-deep:    rgba(0, 0, 0, 0.30);
  --xlx-ws-layer-mid:     rgba(0, 0, 0, 0.22);
  --xlx-ws-layer-subtle:  rgba(0, 0, 0, 0.18);
  --xlx-ws-shimmer:       rgba(255, 255, 255, 0.02);
  --xlx-ws-shimmer-md:    rgba(255, 255, 255, 0.06);
  --xlx-ws-shimmer-hi:    rgba(255, 255, 255, 0.10);
}

/* =========================================================================
   LIGHT THEME — new, for the "extendable" case
   Keeps the same brand primary but inverts the neutral stack.
   Glass sits on top of a soft off-white rather than a photo background.
   ========================================================================= */
[data-theme="light"] {
  /* Brand shifts deeper in light mode so links/icons meet contrast on white */
  --xlx-brand:           #16639A;   /* deep sky — 5.3:1 as text on every light surface, 6.4:1 under white */
  --xlx-brand-dark:      #114E7A;   /* hover */
  --xlx-brand-light:     #A3DAFF;   /* accent / surface tint */
  --xlx-brand-ink:       #ffffff;   /* foreground when on brand fill */
  --xlx-brand-rgb:       22, 99, 154;    /* raw RGB of --xlx-brand, for tints */
  --xlx-brand-dark-rgb:  17, 78, 122;    /* raw RGB of --xlx-brand-dark */

  --xlx-bg:              #EEF2F7;
  --xlx-bg-raised:       #ffffff;
  --xlx-surface:         #ffffff;
  --xlx-surface-2:       #E4EBF3;
  --xlx-surface-muted:   rgba(17, 24, 39, 0.05);

  --xlx-fg:              #0b1220;
  --xlx-fg-1:            #111827;
  --xlx-fg-2:            #1f2937;
  --xlx-fg-muted:        #334155;
  --xlx-fg-subtle:       #475569;

  --xlx-border:          #D1D9E2;
  --xlx-border-subtle:   #E4EBF3;
  --xlx-border-strong:   #A3B2C2;

  /* Glass on light: lower opacity + stronger borders so the backdrop blur reads */
  --xlx-glass:           rgba(255, 255, 255, 0.50);
  --xlx-glass-strong:    rgba(255, 255, 255, 0.70);
  --xlx-glass-border:    rgba(17, 24, 39, 0.18);
  --xlx-glass-border-hi: rgba(17, 24, 39, 0.28);
  --xlx-glass-blur:      20px;
  --xlx-glass-saturate:  180%;

  --xlx-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.08);
  --xlx-shadow-md:  0 4px 14px rgba(15, 23, 42, 0.12);
  --xlx-shadow-lg:  0 14px 36px rgba(15, 23, 42, 0.16);
  --xlx-shadow-xl:  0 28px 70px rgba(15, 23, 42, 0.22);
  --xlx-shadow-glow: 0 0 0 1px rgba(30, 127, 184, 0.40), 0 8px 30px rgba(30, 127, 184, 0.30);

  /* Scrim — full-screen darkening overlay (lighter in light mode) */
  --xlx-scrim:      rgba(15, 23, 42, 0.55);
  --xlx-scrim-soft: rgba(15, 23, 42, 0.12);

  --xlx-danger-bg:    rgba(220, 38, 38, 0.10);
  --xlx-warning-bg:   rgba(251, 191, 36, 0.08);
  --xlx-warning-border: rgba(251, 191, 36, 0.24);
  /* Status text — deepened for daylight. The base `:root` values are the dark
     theme's 400-weight tones, which fall to ~2.3:1 on cream and white. These
     reach 4.5:1 on every light surface, including small badge text sitting on
     its own 15% tint (`rgba(var(--xlx-*-rgb), 0.15)`). Solid fills use the
     invariant `--xlx-*-fill` tokens instead. */
  --xlx-success:        #166534;
  --xlx-warning:        #92400E;
  --xlx-danger:         #A61B1B;
  --xlx-success-rgb:    22, 101, 52;
  --xlx-warning-rgb:    146, 64, 14;
  --xlx-danger-rgb:     166, 27, 27;
  --xlx-warn-bg:      rgba(251, 191, 36, 0.08);
  --xlx-warn-fg:      #B45309;
  --xlx-info-bg:      rgba(37, 99, 235, 0.08);
  --xlx-info-fg:      #1D4ED8;
  --xlx-audit:          #7c3aed;
  --xlx-audit-bg:       rgba(124, 58, 237, 0.10);
  --xlx-audit-border:   rgba(124, 58, 237, 0.24);

  /* Accent — secondary violet; meets contrast on light backgrounds */
  --xlx-accent:         #7c3aed;   /* violet-700 — secondary accent */

  --xlx-ring:       0 0 0 2px var(--xlx-bg), 0 0 0 4px var(--xlx-brand-dark);

  /* Selection highlight — light mode (deeper shade for contrast on white) */
  --xlx-selection:            #db2777;               /* pink-600 — readable on light */
  --xlx-selection-glow:       rgba(219, 39, 119, 0.14);

  /* Workspace panel overlays — light mode */
  --xlx-ws-layer-deep:    rgba(0, 0, 0, 0.08);
  --xlx-ws-layer-mid:     rgba(0, 0, 0, 0.05);
  --xlx-ws-layer-subtle:  rgba(0, 0, 0, 0.04);
  --xlx-ws-shimmer:       rgba(0, 0, 0, 0.025);
  --xlx-ws-shimmer-md:    rgba(0, 0, 0, 0.04);
  --xlx-ws-shimmer-hi:    rgba(0, 0, 0, 0.05);
}

/* =========================================================================
   Semantic element defaults — opt-in via class="xlx"
   Use on a root wrapper so these don't leak into other systems on the page.
   ========================================================================= */
.xlx,
.xlx * {
  box-sizing: border-box;
}

.xlx {
  font-family: var(--xlx-font-sans);
  color: var(--xlx-fg-2);
  background-color: transparent;
  font-size: var(--xlx-text-base);
  line-height: var(--xlx-leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.xlx h1, .xlx .h1 {
  font-size: clamp(var(--xlx-text-4xl), 4vw + 1rem, var(--xlx-text-6xl));
  font-weight: 700;
  letter-spacing: var(--xlx-tracking-tight);
  line-height: var(--xlx-leading-tight);
  color: var(--xlx-fg);
  margin: 0 0 var(--xlx-space-6) 0;
}

.xlx h2, .xlx .h2 {
  font-size: var(--xlx-text-3xl);
  font-weight: 700;
  letter-spacing: var(--xlx-tracking-tight);
  line-height: var(--xlx-leading-snug);
  color: var(--xlx-fg);
  margin: 0 0 var(--xlx-space-4) 0;
}

.xlx h3, .xlx .h3 {
  font-size: var(--xlx-text-xl);
  font-weight: 700;
  line-height: var(--xlx-leading-snug);
  color: var(--xlx-fg);
  margin: 0 0 var(--xlx-space-3) 0;
}

.xlx h4, .xlx .h4 {
  font-size: var(--xlx-text-lg);
  font-weight: 600;
  color: var(--xlx-fg-1);
  margin: 0 0 var(--xlx-space-2) 0;
}

.xlx p, .xlx .body {
  font-size: var(--xlx-text-base);
  color: var(--xlx-fg-2);
  line-height: var(--xlx-leading-base);
  margin: 0 0 var(--xlx-space-4) 0;
}

.xlx .lead {
  font-size: var(--xlx-text-xl);
  color: var(--xlx-fg-2);
  line-height: var(--xlx-leading-snug);
}

.xlx .small,
.xlx small {
  font-size: var(--xlx-text-sm);
  color: var(--xlx-fg-muted);
}

.xlx .eyebrow {
  font-size: var(--xlx-text-xs);
  letter-spacing: var(--xlx-tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--xlx-brand);
}

.xlx code, .xlx .mono {
  font-family: var(--xlx-font-mono);
  font-size: 0.95em;
}

.xlx a {
  color: var(--xlx-brand);
  text-decoration: none;
  transition: color var(--xlx-duration-2) var(--xlx-ease);
}
.xlx a:hover { color: var(--xlx-brand-light); }

/* Brand word — used in the hero ("XILYXIS") */
.xlx .brand {
  color: var(--xlx-brand);
}

/* =========================================================================
   LINEN PALETTE — alternate color scheme
   Orthogonal to light/dark. Activate by setting [data-palette="linen"] on
   <html> (or any ancestor). Default palette = "blue" (the stack above).

   Philosophy: the book-writing aesthetic — cream paper, warm ink, oxblood
   accent. In dark mode we invert to deep espresso backgrounds with a warm
   cream foreground and a lifted terracotta accent for AA contrast.
   ========================================================================= */

/* ---------- Linen LIGHT (default pairing) ---------- */
[data-palette="linen"],
[data-palette="linen"][data-theme="light"] {
  /* Accent — warm oxblood */
  --xlx-brand:           #7a2e1f;   /* primary — oxblood */
  --xlx-brand-dark:      #5c2216;   /* hover — deeper */
  --xlx-brand-light:     #c7b8a0;   /* soft accent — warm taupe */
  --xlx-brand-ink:       #fbfaf7;   /* foreground when on brand fill */
  --xlx-brand-rgb:       122, 46, 31;
  --xlx-brand-dark-rgb:  92, 34, 22;

  /* Surfaces — cream & paper */
  --xlx-bg:              #eeeae0;   /* page — warm cream */
  --xlx-bg-raised:       #fbfaf7;   /* paper */
  --xlx-surface:         #ffffff;   /* chrome — pure white cards */
  --xlx-surface-2:       #f5f3ee;   /* paper-2 — hover/recessed */
  --xlx-surface-muted:   rgba(20, 24, 31, 0.04);

  /* Ink scale */
  --xlx-fg:              #14181f;   /* headings */
  --xlx-fg-1:            #2b323c;   /* high-contrast body */
  --xlx-fg-2:            #4b5563;   /* body */
  --xlx-fg-muted:        #5f6571;   /* descriptions */
  --xlx-fg-subtle:       #8a8577;   /* warm-tinted disabled */

  /* Rules — warm, slightly desaturated */
  --xlx-border:          #d9d4c7;   /* rule-2 */
  --xlx-border-subtle:   #e6e2d8;   /* rule */
  --xlx-border-strong:   #c7b8a0;   /* brand-light doubles as strong rule */

  /* Glass — warm cream instead of cool white */
  --xlx-glass:           rgba(251, 250, 247, 0.60);
  --xlx-glass-strong:    rgba(251, 250, 247, 0.80);
  --xlx-glass-border:    rgba(20, 24, 31, 0.14);
  --xlx-glass-border-hi: rgba(20, 24, 31, 0.24);
  --xlx-glass-blur:      20px;
  --xlx-glass-saturate:  160%;

  /* Shadows — softer, warm-tinted */
  --xlx-shadow-sm:  0 1px 2px  rgba(20, 24, 31, 0.06);
  --xlx-shadow-md:  0 4px 14px rgba(20, 24, 31, 0.09);
  --xlx-shadow-lg:  0 16px 40px rgba(20, 24, 31, 0.12);
  --xlx-shadow-xl:  0 28px 70px rgba(20, 24, 31, 0.16);
  --xlx-shadow-glow: 0 0 0 1px rgba(122, 46, 31, 0.30), 0 8px 30px rgba(122, 46, 31, 0.22);

  --xlx-ring:       0 0 0 2px var(--xlx-bg), 0 0 0 4px var(--xlx-brand);

  /* Scrim — warm-tinted overlay for linen light */
  --xlx-scrim:      rgba(20, 24, 31, 0.55);
  --xlx-scrim-soft: rgba(20, 24, 31, 0.12);

  /* Warning status — amber on warm cream */
  --xlx-warn-bg:    rgba(251, 191, 36, 0.08);
  --xlx-warn-fg:    #92400E;

  /* Semantic status — warm terracotta tones on cream */
  --xlx-danger-bg:      rgba(180, 30, 30, 0.10);
  --xlx-warning-bg:     rgba(180, 100, 20, 0.10);
  --xlx-warning-border: rgba(180, 100, 20, 0.25);
  /* Status text — deepened for daylight. The base `:root` values are the dark
     theme's 400-weight tones, which fall to ~2.3:1 on cream and white. These
     reach 4.5:1 on every light surface, including small badge text sitting on
     its own 15% tint (`rgba(var(--xlx-*-rgb), 0.15)`). Solid fills use the
     invariant `--xlx-*-fill` tokens instead. */
  --xlx-success:        #166534;
  --xlx-warning:        #92400E;
  --xlx-danger:         #A61B1B;
  --xlx-success-rgb:    22, 101, 52;
  --xlx-warning-rgb:    146, 64, 14;
  --xlx-danger-rgb:     166, 27, 27;
  --xlx-audit:          #8b3e2f;
  --xlx-audit-bg:       rgba(139, 62, 47, 0.10);
  --xlx-audit-border:   rgba(139, 62, 47, 0.24);

  /* Accent — warm slate, distinct from oxblood brand; complements linen palette */
  --xlx-accent:         #4d6b7a;   /* warm slate — secondary accent on cream */

  /* Info status — warm slate, distinct from oxblood brand */
  --xlx-info:       #4d6b7a;
  --xlx-info-bg:    rgba(77, 107, 122, 0.10);
  --xlx-info-fg:    #4d6b7a;
}

/* ---------- Linen DARK — inverted, warm espresso ---------- */
[data-palette="linen"][data-theme="dark"] {
  /* Accent — terracotta lifted for AA contrast on dark ink */
  --xlx-brand:           #e8a990;   /* primary — lifted terracotta */
  --xlx-brand-dark:      #c9826a;   /* hover — muted rust */
  --xlx-brand-light:     #f5d9c8;   /* soft accent — warm sand */
  --xlx-brand-ink:       #1a1410;   /* foreground when on brand fill */
  --xlx-brand-rgb:       232, 169, 144;
  --xlx-brand-dark-rgb:  201, 130, 106;

  /* Surfaces — deep espresso with warm undertone */
  --xlx-bg:              #17130f;   /* page — warm near-black */
  --xlx-bg-raised:       #1f1a15;   /* raised — espresso */
  --xlx-surface:         #2a231c;   /* cards — cocoa */
  --xlx-surface-2:       #3a3128;   /* hover */
  --xlx-surface-muted:   rgba(232, 169, 144, 0.06);

  /* Foreground — warm cream */
  --xlx-fg:              #faf4ea;   /* headings */
  --xlx-fg-1:            #ede4d2;   /* high-contrast body */
  --xlx-fg-2:            #d9cdb5;   /* body */
  --xlx-fg-muted:        #a89a80;   /* descriptions */
  --xlx-fg-subtle:       #75685a;   /* disabled */

  /* Rules — warm dividers */
  --xlx-border:          #3a3128;
  --xlx-border-subtle:   #2a231c;
  --xlx-border-strong:   #5a4d3f;

  /* Glass — warm-tinted translucency */
  --xlx-glass:           rgba(250, 244, 234, 0.06);
  --xlx-glass-strong:    rgba(250, 244, 234, 0.12);
  --xlx-glass-border:    rgba(250, 244, 234, 0.16);
  --xlx-glass-border-hi: rgba(250, 244, 234, 0.26);
  --xlx-glass-blur:      16px;
  --xlx-glass-saturate:  140%;

  /* Shadows — deeper, for depth against warm bg */
  --xlx-shadow-sm:  0 1px 2px  rgba(0, 0, 0, 0.32);
  --xlx-shadow-md:  0 4px 14px rgba(0, 0, 0, 0.40);
  --xlx-shadow-lg:  0 14px 36px rgba(0, 0, 0, 0.50);
  --xlx-shadow-xl:  0 28px 70px rgba(0, 0, 0, 0.60);
  --xlx-shadow-glow: 0 0 0 1px rgba(232, 169, 144, 0.30), 0 8px 30px rgba(232, 169, 144, 0.22);

  --xlx-ring:       0 0 0 2px var(--xlx-bg), 0 0 0 4px var(--xlx-brand);

  /* Scrim — warm-tinted overlay for linen dark */
  --xlx-scrim:      rgba(23, 19, 15, 0.60);
  --xlx-scrim-soft: rgba(23, 19, 15, 0.20);

  /* Warning status — amber on warm espresso */
  --xlx-warn-bg:    rgba(251, 191, 36, 0.10);
  --xlx-warn-fg:    #FBBF24;

  /* Semantic status — lifted terracotta tones on espresso */
  --xlx-danger-bg:      rgba(200, 60, 60, 0.14);
  --xlx-warning-bg:     rgba(200, 140, 60, 0.12);
  --xlx-warning-border: rgba(200, 140, 60, 0.28);
  /* Status text — the base dark tones, restated. The light pairing above is
     also selected by bare `[data-palette="linen"]`, which matches at night too,
     so without these its daylight values would win here. */
  --xlx-success:        #6EE7B7;
  --xlx-warning:        #FBBF24;
  --xlx-danger:         #FECACA;
  --xlx-success-rgb:    110, 231, 183;
  --xlx-warning-rgb:    251, 191, 36;
  --xlx-danger-rgb:     254, 202, 202;
  --xlx-audit:          #d4846a;
  --xlx-audit-bg:       rgba(212, 132, 106, 0.12);
  --xlx-audit-border:   rgba(212, 132, 106, 0.28);

  /* Accent — warm slate, distinct from terracotta brand; secondary accent on espresso */
  --xlx-accent:         #8faab8;   /* warm slate — secondary accent */

  /* Info status — warm slate, distinct from terracotta brand */
  --xlx-info:       #8faab8;
  --xlx-info-bg:    rgba(143, 170, 184, 0.12);
  --xlx-info-fg:    #8faab8;
}
/* =========================================================================
   Xilyxis Design System — Components
   Reusable class-based primitives. Load AFTER colors_and_type.css.

   All components sit inside a .xlx wrapper so they pick up theme tokens.
   ========================================================================= */

/* ---------- App background (Mt. Rainier silhouette, fixed) --------------- */
.xlx-bg-hero {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--xlx-bg);
  background-image:
    /* Dark overlay keeps contrast over the photo */
    linear-gradient(180deg, rgba(11, 18, 32, 0.45) 0%, rgba(11, 18, 32, 0.70) 100%),
    url('/assets/mt-rainier-silhouette.webp');
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

[data-palette="linen"][data-theme="dark"] .xlx-bg-hero,
[data-palette="linen"]:not([data-theme="light"]) .xlx-bg-hero {
  background-image:
    linear-gradient(180deg, rgba(23, 19, 15, 0.55) 0%, rgba(23, 19, 15, 0.88) 100%),
    url('/assets/mt-rainier-silhouette.webp');
}
[data-palette="linen"][data-theme="light"] .xlx-bg-hero {
  background-image:
    linear-gradient(180deg, rgba(238, 234, 224, 0.60) 0%, rgba(238, 234, 224, 0.25) 100%),
    url('/assets/mt-rainier-silhouette.webp');
}

[data-theme="light"] .xlx-bg-hero {
  background-image:
    linear-gradient(180deg, rgba(238, 242, 247, 0.55) 0%, rgba(238, 242, 247, 0.15) 100%),
    url('/assets/mt-rainier-silhouette.webp');
}

/* Subtle aurora — optional enhancement, adds color to dark hero areas */
.xlx-bg-aurora::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(163, 218, 255, 0.18), transparent 60%),
    radial-gradient(35% 45% at 80% 20%, rgba(123, 196, 242, 0.14), transparent 60%),
    radial-gradient(45% 50% at 60% 90%, rgba(194, 238, 255, 0.10), transparent 60%);
  pointer-events: none;
  filter: blur(40px);
}

/* ========================== Glass surfaces ============================== */
.xlx-glass {
  background-color: var(--xlx-glass);
  backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  -webkit-backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  border: 1px solid var(--xlx-glass-border);
  box-shadow: var(--xlx-shadow-md);
  border-radius: var(--xlx-radius-lg);
}

.xlx-glass-strong {
  background-color: var(--xlx-glass-strong);
  backdrop-filter: blur(calc(var(--xlx-glass-blur) * 1.25)) saturate(var(--xlx-glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--xlx-glass-blur) * 1.25)) saturate(var(--xlx-glass-saturate));
  border: 1px solid var(--xlx-glass-border-hi);
  box-shadow: var(--xlx-shadow-lg);
  border-radius: var(--xlx-radius-xl);
}

/* Inner highlight — gives glass a glossy top edge. Apply with class="xlx-glass xlx-glass-gloss" */
.xlx-glass-gloss {
  position: relative;
  overflow: hidden;
}
.xlx-glass-gloss::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: overlay;
}

/* ============================== Buttons ================================= */
.xlx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--xlx-radius-md);
  font-family: inherit;
  font-size: var(--xlx-text-base);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--xlx-duration-1) var(--xlx-ease),
              background-color var(--xlx-duration-2) var(--xlx-ease),
              color var(--xlx-duration-2) var(--xlx-ease),
              border-color var(--xlx-duration-2) var(--xlx-ease),
              box-shadow var(--xlx-duration-2) var(--xlx-ease);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.xlx-btn:focus-visible { outline: none; box-shadow: var(--xlx-ring); }
.xlx-btn:active       { transform: translateY(1px); }
.xlx-btn:disabled     { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Sizes */
.xlx-btn-sm { padding: 0.375rem 0.875rem; font-size: var(--xlx-text-sm); border-radius: var(--xlx-radius-sm); }
.xlx-btn-md { padding: 0.625rem 1.25rem; font-size: var(--xlx-text-base); }
.xlx-btn-lg { padding: 0.875rem 1.75rem; font-size: var(--xlx-text-lg); }

/* Variants */
.xlx-btn-primary {
  background-color: var(--xlx-brand);
  color: var(--xlx-brand-ink);
}
.xlx-btn-primary:hover {
  background-color: var(--xlx-brand-light);
  box-shadow: var(--xlx-shadow-glow);
}

.xlx-btn-secondary {
  background-color: transparent;
  border-color: var(--xlx-brand);
  color: var(--xlx-brand);
}
.xlx-btn-secondary:hover {
  background-color: var(--xlx-brand);
  color: var(--xlx-brand-ink);
}

.xlx-btn-ghost {
  background-color: transparent;
  color: var(--xlx-fg-2);
}
.xlx-btn-ghost:hover {
  background-color: var(--xlx-surface-2);
  color: var(--xlx-fg);
}

[data-theme="light"] .xlx-btn-ghost:hover {
  background-color: var(--xlx-surface-muted);
}

.xlx-btn-glass {
  background-color: var(--xlx-glass);
  backdrop-filter: blur(var(--xlx-glass-blur));
  -webkit-backdrop-filter: blur(var(--xlx-glass-blur));
  border-color: var(--xlx-glass-border);
  color: var(--xlx-fg);
}
.xlx-btn-glass:hover {
  background-color: var(--xlx-glass-strong);
  border-color: var(--xlx-glass-border-hi);
}

.xlx-btn-danger {
  background-color: var(--xlx-danger-fill);
  color: var(--xlx-danger-ink);
}
.xlx-btn-danger:hover { filter: brightness(1.1); }

/* ============================== Cards =================================== */
.xlx-card {
  background-color: var(--xlx-glass);
  backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  -webkit-backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  border: 1px solid var(--xlx-glass-border);
  box-shadow: var(--xlx-shadow-md);
  border-radius: var(--xlx-radius-lg);
  padding: var(--xlx-space-5);
  transition: transform var(--xlx-duration-3) var(--xlx-ease-out),
              background-color var(--xlx-duration-3) var(--xlx-ease),
              border-color var(--xlx-duration-3) var(--xlx-ease),
              box-shadow var(--xlx-duration-3) var(--xlx-ease);
}
.xlx-card:hover {
  transform: translateY(-4px);
  background-color: var(--xlx-glass-strong);
  border-color: var(--xlx-glass-border-hi);
  box-shadow: var(--xlx-shadow-lg);
}

.xlx-card-solid {
  background-color: var(--xlx-surface);
  border: 1px solid var(--xlx-border);
  border-radius: var(--xlx-radius-lg);
  padding: var(--xlx-space-6);
  box-shadow: var(--xlx-shadow-sm);
  transition: all var(--xlx-duration-3) var(--xlx-ease);
}
.xlx-card-solid:hover {
  background-color: var(--xlx-bg-raised);
  border-color: var(--xlx-border-strong);
  box-shadow: var(--xlx-shadow-md);
}

/* Feature tile — used inside sections as a lighter-weight card */
.xlx-tile {
  background-color: var(--xlx-surface-muted);
  border: 1px solid var(--xlx-border-subtle);
  border-radius: var(--xlx-radius-md);
  padding: var(--xlx-space-4);
}

/* ============================== Inputs ================================== */
.xlx-input, .xlx-select, .xlx-textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background-color: var(--xlx-surface);
  border: 1px solid var(--xlx-border);
  border-radius: var(--xlx-radius-md);
  color: var(--xlx-fg);
  font-family: inherit;
  font-size: var(--xlx-text-base);
  line-height: var(--xlx-leading-snug);
  transition: border-color var(--xlx-duration-2) var(--xlx-ease),
              box-shadow var(--xlx-duration-2) var(--xlx-ease),
              background-color var(--xlx-duration-2) var(--xlx-ease);
}
.xlx-input::placeholder,
.xlx-textarea::placeholder { color: var(--xlx-fg-muted); }

.xlx-input:focus,
.xlx-select:focus,
.xlx-textarea:focus {
  outline: none;
  border-color: var(--xlx-brand);
  box-shadow: 0 0 0 3px rgba(163, 218, 255, 0.18);
}

.xlx-label {
  display: block;
  font-size: var(--xlx-text-sm);
  font-weight: 500;
  color: var(--xlx-fg-1);
  margin-bottom: var(--xlx-space-2);
}

.xlx-hint {
  font-size: var(--xlx-text-sm);
  color: var(--xlx-fg-muted);
  margin-top: var(--xlx-space-2);
}

/* ============================== Badges ================================== */
.xlx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--xlx-radius-full);
  font-size: var(--xlx-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background-color: var(--xlx-surface-muted);
  color: var(--xlx-fg-1);
  border: 1px solid var(--xlx-border-subtle);
}
.xlx-badge-glass {
  background-color: var(--xlx-glass-strong);
  color: var(--xlx-fg);
  border-color: var(--xlx-glass-border-hi);
  backdrop-filter: blur(var(--xlx-glass-blur));
  -webkit-backdrop-filter: blur(var(--xlx-glass-blur));
}
.xlx-badge-brand   { background: var(--xlx-brand); color: var(--xlx-brand-ink); border-color: transparent; }
.xlx-badge-success { background: rgba(var(--xlx-success-rgb), 0.15); color: var(--xlx-success); border-color: rgba(var(--xlx-success-rgb), 0.35); }
.xlx-badge-warning { background: rgba(var(--xlx-warning-rgb), 0.15); color: var(--xlx-warning); border-color: rgba(var(--xlx-warning-rgb), 0.35); }
.xlx-badge-danger  { background: rgba(var(--xlx-danger-rgb), 0.15); color: var(--xlx-danger);  border-color: rgba(var(--xlx-danger-rgb), 0.35); }

/* ============================== Nav / Header =========================== */
.xlx-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--xlx-glass);
  backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  -webkit-backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  border-bottom: 1px solid var(--xlx-glass-border);
}

.xlx-header-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 var(--xlx-space-6);
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.xlx-nav-link {
  position: relative;
  color: var(--xlx-fg-2);
  font-weight: 500;
  padding: 0.25rem 0;
  text-decoration: none;
  transition: color var(--xlx-duration-2) var(--xlx-ease);
}
.xlx-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: var(--xlx-brand);
  transition: width var(--xlx-duration-2) var(--xlx-ease);
}
.xlx-nav-link:hover { color: var(--xlx-fg); }
.xlx-nav-link:hover::after,
.xlx-nav-link.is-active::after { width: 100%; }
.xlx-nav-link.is-active { color: var(--xlx-fg); }

/* ============================== Container =============================== */
.xlx-container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--xlx-space-4);
  padding-right: var(--xlx-space-4);
}
@media (min-width: 640px) {
  .xlx-container { padding-left: var(--xlx-space-6); padding-right: var(--xlx-space-6); }
}
@media (min-width: 1024px) {
  .xlx-container { padding-left: var(--xlx-space-8); padding-right: var(--xlx-space-8); }
}
.xlx-container-sm { max-width: 42rem; }
.xlx-container-md { max-width: 56rem; }
.xlx-container-lg { max-width: 72rem; }
.xlx-container-xl { max-width: 80rem; }

/* ============================== Divider ================================= */
.xlx-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--xlx-border) 50%, transparent 100%);
  border: 0;
  margin: var(--xlx-space-8) 0;
}

/* ============================== Kbd ===================================== */
.xlx-kbd {
  display: inline-block;
  font-family: var(--xlx-font-mono);
  font-size: 0.8em;
  padding: 0.125rem 0.375rem;
  background-color: var(--xlx-surface);
  border: 1px solid var(--xlx-border);
  border-bottom-width: 2px;
  border-radius: var(--xlx-radius-sm);
  color: var(--xlx-fg-1);
}

/* =================== Spin animation utility ============================== */
.xlx-spin {
  animation: xlx-spin 1s linear infinite;
}

@keyframes xlx-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .xlx-spin { animation: none; }
}

/* =================== Focus-ring helper for any element ================== */
.xlx-focusable:focus-visible {
  outline: none;
  box-shadow: var(--xlx-ring);
  border-radius: var(--xlx-radius-md);
}
html,
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--xlx-font-sans);
  color: var(--xlx-fg);
  background-color: var(--xlx-bg);
}

/* Chrome type: one sans face throughout, weights and tracking per the design system (700 H1–H3, 600 H4, 400 body). */
h1,
h2,
h3,
h4 {
  color: var(--xlx-fg);
  line-height: 1.25;
}

h1,
h2,
h3 {
  overflow-wrap: anywhere;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h4 {
  font-weight: 600;
}

/* Section headings sit well below the page title (h1 is sized by .app-page-header). */
h2 {
  font-size: var(--xlx-text-2xl);
}

h3 {
  font-size: var(--xlx-text-xl);
}

ul {
  padding-left: 1.25rem;
}

li + li {
  margin-top: var(--xlx-space-1);
}

p {
  color: var(--xlx-fg-2);
  line-height: 1.6;
}

button,
input,
select,
textarea {
  font: inherit;
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--xlx-brand);
}

a:hover {
  color: var(--xlx-brand-dark);
}

/* colors_and_type.css colors every link inside .xlx (.xlx a, specificity 0,1,1), which outranks the button and nav
   classes (0,1,0) when they are applied to <a>. Restore each variant's own colors for links. */
.xlx a.xlx-btn-primary,
.xlx a.xlx-btn-primary:hover,
.xlx a.xlx-btn-secondary:hover {
  color: var(--xlx-brand-ink);
}

.xlx a.xlx-btn-secondary {
  color: var(--xlx-brand);
}

.xlx a.xlx-btn-ghost,
.xlx a.xlx-nav-link,
.xlx .app-menu a {
  color: var(--xlx-fg-2);
}

.xlx a.xlx-btn-ghost:hover,
.xlx a.xlx-nav-link:hover,
.xlx a.xlx-nav-link.active,
.xlx .app-menu a:hover,
.xlx a.xlx-btn-glass,
.xlx a.xlx-btn-glass:hover {
  color: var(--xlx-fg);
}

.xlx a.xlx-btn-danger,
.xlx a.xlx-btn-danger:hover {
  color: var(--xlx-danger-ink);
}

/* Text for assistive technology only (labels a visible control already explains, e.g. a search box). */
.app-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-stack {
  display: flex;
  flex-direction: column;
  gap: var(--xlx-space-6);
}

.app-skip-link {
  position: absolute;
  left: -9999px;
}

.app-skip-link:focus {
  left: var(--xlx-space-4);
  top: var(--xlx-space-4);
  z-index: 100;
}

/* ---------- Header and navigation ---------- */
.app-brand {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: var(--xlx-fg);
  text-decoration: none;
  font-size: var(--xlx-text-lg);
  min-width: 0;
}

.app-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: var(--xlx-space-5);
}

.app-nav-group {
  position: relative;
}

.app-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--xlx-space-2));
  min-width: 14rem;
  padding: var(--xlx-space-2);
  border-radius: var(--xlx-radius-md);
  /* Menus are solid, not glass: page content showing through made the items hard to read. */
  background-color: var(--xlx-bg-raised);
  border: 1px solid var(--xlx-border);
  box-shadow: var(--xlx-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--xlx-space-1);
  z-index: 60;
}

.app-menu a,
.app-menu button {
  display: flex;
  align-items: center;
  gap: var(--xlx-space-2);
  padding: var(--xlx-space-2) var(--xlx-space-3);
  border-radius: var(--xlx-radius-sm);
  color: var(--xlx-fg-2);
  text-decoration: none;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.app-menu a:hover,
.app-menu button:hover,
.app-menu a:focus-visible,
.app-menu button:focus-visible {
  color: var(--xlx-fg);
  background-color: var(--xlx-surface-2);
  outline: none;
}

.app-menu hr {
  border: 0;
  border-top: 1px solid var(--xlx-border-subtle);
  margin: var(--xlx-space-1) 0;
}

.app-menu-toggle {
  display: none;
}

@media (max-width: 860px) {
  .app-menu-toggle {
    display: inline-flex;
  }

  .app-nav {
    display: none;
  }

  .app-nav.is-open {
    display: flex;
    position: absolute;
    top: 4rem;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--xlx-space-2);
    padding: var(--xlx-space-4);
    background-color: var(--xlx-bg-raised);
    box-shadow: var(--xlx-shadow-lg);
    border-bottom: 1px solid var(--xlx-glass-border);
  }

  .app-nav.is-open .app-menu {
    position: static;
    min-width: 0;
  }
}

/* ---------- Page frame ---------- */
.app-main {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: var(--xlx-space-8) 0 var(--xlx-space-12);
}

.app-page-header {
  margin-bottom: var(--xlx-space-6);
}

.app-page-header h1 {
  margin: 0;
  font-size: clamp(var(--xlx-text-2xl), 3vw + 1rem, var(--xlx-text-3xl));
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app-page-header p {
  margin: var(--xlx-space-2) 0 0;
  color: var(--xlx-fg-2);
  font-size: var(--xlx-text-lg);
}

.app-page-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--xlx-space-4);
}

.app-back {
  display: inline-flex;
  align-items: center;
  gap: var(--xlx-space-1);
  margin-bottom: var(--xlx-space-3);
  color: var(--xlx-fg-2);
  text-decoration: none;
  font-size: var(--xlx-text-sm);
}

.app-back:hover {
  color: var(--xlx-fg);
}

/* Its own frosted surface, like the header: the background photo is darkest at the bottom, where light-theme text
   would otherwise sit unreadable on the mountains. */
.app-footer {
  background-color: var(--xlx-glass-strong);
  backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  -webkit-backdrop-filter: blur(var(--xlx-glass-blur)) saturate(var(--xlx-glass-saturate));
  border-top: 1px solid var(--xlx-border-subtle);
  padding: var(--xlx-space-6) 0;
  color: var(--xlx-fg-muted);
  font-size: var(--xlx-text-sm);
}

.app-footer p {
  margin: var(--xlx-space-1) 0;
}

/* ---------- Grids, cards, lists ---------- */
.app-grid {
  display: grid;
  gap: var(--xlx-space-5);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.app-card {
  display: flex;
  flex-direction: column;
  gap: var(--xlx-space-3);
  padding: var(--xlx-space-6);
}

.app-card h2,
.app-card h3 {
  margin: 0;
  font-size: var(--xlx-text-xl);
  font-weight: 700;
}

.app-card p {
  margin: 0;
  color: var(--xlx-fg-2);
}

/* Icons keep their size when a button's label is long. */
.xlx-btn svg {
  flex-shrink: 0;
}

.app-card-actions .xlx-btn {
  white-space: normal;
  text-align: center;
}

.app-card-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--xlx-space-2);
  padding-top: var(--xlx-space-2);
}

.app-icon-brand {
  color: var(--xlx-brand);
}

.app-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--xlx-space-3);
}

.app-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--xlx-space-4);
  padding: var(--xlx-space-4) var(--xlx-space-5);
  border-radius: var(--xlx-radius-md);
  background-color: var(--xlx-surface);
  border: 1px solid var(--xlx-border);
}

.app-list-item-main {
  display: flex;
  flex-direction: column;
  gap: var(--xlx-space-1);
  min-width: 0;
}

.app-list-item-title {
  font-weight: 600;
}

.app-muted {
  color: var(--xlx-fg-muted);
  font-size: var(--xlx-text-sm);
}

.app-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--xlx-space-3);
  margin-bottom: var(--xlx-space-4);
}

.app-toolbar .xlx-input {
  flex: 1 1 16rem;
  max-width: 28rem;
}

/* ---------- Notices and states ---------- */
.app-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--xlx-space-3);
  padding: var(--xlx-space-4) var(--xlx-space-5);
  border-radius: var(--xlx-radius-md);
  border: 1px solid var(--xlx-border);
  background-color: var(--xlx-surface);
  margin-bottom: var(--xlx-space-5);
}

.app-notice-body {
  flex: 1;
}

.app-notice-body p {
  margin: 0;
}

.app-notice-success {
  border-color: rgba(var(--xlx-success-rgb), 0.45);
}

.app-notice-success > svg {
  color: var(--xlx-success);
}

.app-notice-warning {
  border-color: rgba(var(--xlx-warning-rgb), 0.45);
}

.app-notice-warning > svg {
  color: var(--xlx-warning);
}

.app-notice-danger {
  border-color: rgba(var(--xlx-danger-rgb), 0.55);
}

.app-notice-danger > svg {
  color: var(--xlx-danger);
}

.app-notice-info > svg {
  color: var(--xlx-info);
}

.app-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--xlx-space-3);
  padding: var(--xlx-space-12) var(--xlx-space-6);
}

.app-state h2 {
  margin: 0;
  font-size: var(--xlx-text-xl);
}

.app-state p {
  margin: 0;
  color: var(--xlx-fg-2);
}

/* ---------- Forms ---------- */
.app-form {
  display: flex;
  flex-direction: column;
  gap: var(--xlx-space-6);
}

.app-fieldset {
  border: 0;
  margin: 0;
  padding: var(--xlx-space-6);
  display: grid;
  gap: var(--xlx-space-4);
  /* A fixed column count keeps fields in the same places at every window width: two side by side, one on phones. */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 48rem) {
  .app-fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The heading spans its own row inside the card. Floating it stops the browser drawing it on the card's border, which
   makes it an ordinary grid item, so it needs the full-row span or it takes a field's place. */
.app-fieldset > legend {
  float: left;
  width: 100%;
  grid-column: 1 / -1;
  padding: 0;
  margin-bottom: var(--xlx-space-2);
  font-size: var(--xlx-text-lg);
  font-weight: 700;
}

.app-field {
  display: flex;
  flex-direction: column;
  gap: var(--xlx-space-1);
  min-width: 0;
}

.app-field-wide {
  grid-column: 1 / -1;
}

.app-required {
  color: var(--xlx-warning);
  margin-left: 0.15em;
}

.app-field-error {
  color: var(--xlx-danger);
  font-size: var(--xlx-text-sm);
}

.app-field .xlx-input[aria-invalid='true'],
.app-field .xlx-select[aria-invalid='true'] {
  border-color: var(--xlx-danger);
}

.app-check {
  display: flex;
  align-items: flex-start;
  gap: var(--xlx-space-3);
}

.app-check input {
  /* Long agreement text must not squeeze the box. */
  flex-shrink: 0;
  margin-top: 0.3em;
  width: 1rem;
  height: 1rem;
  accent-color: var(--xlx-brand);
}

.app-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xlx-space-3);
  justify-content: flex-end;
}

.app-code-boxes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--xlx-space-2);
}

.app-code-boxes .xlx-input {
  width: 5.5rem;
  text-align: center;
  font-family: var(--xlx-font-mono);
}

.app-amount {
  font-size: var(--xlx-text-2xl);
  font-weight: 700;
}

.app-definition {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--xlx-space-2) var(--xlx-space-6);
  margin: 0;
}

.app-definition dt {
  color: var(--xlx-fg-muted);
}

.app-definition dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The native file picker button, in the design system's secondary-button style for both themes. */
.xlx-input::file-selector-button {
  margin-right: var(--xlx-space-3);
  padding: var(--xlx-space-1) var(--xlx-space-3);
  border: 1px solid var(--xlx-brand);
  border-radius: var(--xlx-radius-sm);
  background-color: transparent;
  color: var(--xlx-brand);
  font: inherit;
  cursor: pointer;
}

.xlx-input::file-selector-button:hover {
  background-color: var(--xlx-brand);
  color: var(--xlx-brand-ink);
}

.app-table-wrap {
  overflow-x: auto;
}

.app-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--xlx-surface);
  border: 1px solid var(--xlx-border);
  border-radius: var(--xlx-radius-md);
}

.app-table th,
.app-table td {
  padding: var(--xlx-space-3) var(--xlx-space-4);
  text-align: left;
  border-bottom: 1px solid var(--xlx-border-subtle);
}

.app-table th {
  color: var(--xlx-fg-muted);
  font-weight: 500;
  font-size: var(--xlx-text-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* A revealed notice scrolls into view below the sticky header; 8rem must clear the xds .xlx-header height. */
.app-notice {
  scroll-margin-top: 8rem;
}