/* Dragon Dashboard — visual identity per docs/design-system.md.
   Saiyan-orange palette on a deep void surface, with a top-anchored radial
   energy aura. Russo One drives the wordmark; body is the system stack.
   The brand mark is the 4-Star Dragon Ball as an inline-SVG data URI on
   .energy-ball, wrapped by a CSS box-shadow halo so the glow extends past
   the ball edge. Single-file token contract — no build step. */

/* Russo One — self-hosted woff2 (latin only, ~7 KB). The font ships with
   the app under /fonts/, covered by CSP fontSrc 'self'. font-display:swap
   so first paint isn't blocked on the font load. */
@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/russo-one-latin.woff2') format('woff2');
}

/* §1 — Token contract. CSS custom properties on :root replace the Arena
   guide's @theme block. Names mirror the Tailwind-shaped scale so any later
   port to a build-tool stack stays mechanical. */
:root {
  /* Wordmark font — Russo One first, system stack as the swap fallback. */
  --font-wordmark: 'Russo One', 'Impact', 'Arial Narrow', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, Monaco, monospace;

  /* Saiyan orange — punchier and warmer than Tailwind's amber-500 #f59e0b. */
  --color-amber-50:  #fff5e8;
  --color-amber-100: #ffe6c8;
  --color-amber-200: #ffd28e;
  --color-amber-300: #ffb45a;
  --color-amber-400: #ff9a33;
  --color-amber-500: #ff7a1a;
  --color-amber-600: #d95c08;
  --color-amber-700: #a64405;
  --color-amber-800: #7a3204;
  --color-amber-900: #4d1f02;
  --color-amber-950: #2a1100;

  /* Warm dark surface — orange-tinted near-blacks. */
  --color-zinc-50:  #f5edee;
  --color-zinc-100: #ebdfe1;
  --color-zinc-200: #d9c8cb;
  --color-zinc-300: #b8a3a7;
  --color-zinc-400: #8a7378;
  --color-zinc-500: #6c585d;
  --color-zinc-600: #4f4044;
  --color-zinc-700: #322629;
  --color-zinc-800: #221a1c;
  --color-zinc-900: #150e10;
  --color-zinc-950: #0a0608;

  /* Void — slightly deeper than zinc-950, used on body. */
  --color-void: #070406;

  /* Super Saiyan gold — for active/selected emphasis. */
  --color-gold-300: #ffd76a;
  --color-gold-400: #ffc23a;
  --color-gold-500: #ffae00;

  /* Ki blue — reserved; do not use in primary chrome. */
  --color-ki-300: #7ec3ff;
  --color-ki-400: #4aa9ff;
  --color-ki-500: #1d8aff;

  /* Semantic aliases (kept stable so existing class names continue to work
     after the palette swap). All map onto the new Saiyan tokens above. */
  --bg: var(--color-void);
  --bg-raised: var(--color-zinc-900);
  --bg-card: rgba(34, 26, 28, 0.6); /* zinc-800/60 — body aura bleeds through */
  --bg-input: var(--color-zinc-950);
  --border: var(--color-zinc-800);
  --border-strong: var(--color-zinc-700);
  --border-focus: var(--color-amber-500);
  --text: var(--color-zinc-100);
  --text-muted: var(--color-zinc-400);
  --text-heading: var(--color-zinc-50);
  --accent: var(--color-amber-300);
  --accent-hover: var(--color-amber-200);
  --accent-strong: var(--color-amber-500);
  --gold: var(--color-gold-400);
  --danger: #c44a3a;
  --danger-hover: #d65a4a;
  --success: #5fa86b;

  --badge-editable-bg: rgba(255, 154, 50, 0.12);
  --badge-editable-fg: var(--color-amber-200);
  --badge-static-bg:   rgba(184, 163, 167, 0.10);
  --badge-static-fg:   var(--color-zinc-300);
  --badge-empty-bg:    rgba(196, 74, 58, 0.15);
  --badge-empty-fg:    #e89a8a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* §2 — Body surface. Void background plus a top-anchored radial aura that
   stays fixed under scroll. background-attachment:fixed must live on body
   so deep-link / overflow-y scenarios still see it. */
html {
  background-color: var(--color-void);
}
body {
  font-family: var(--font-body);
  background-color: var(--color-void);
  background-image: radial-gradient(
    ellipse 110% 60% at 50% -10%,
    rgba(255, 122, 26, 0.20) 0%,
    rgba(255, 122, 26, 0.08) 30%,
    rgba(255, 122, 26, 0.02) 55%,
    transparent 75%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

code {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.05em 0.4em;
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-amber-200);
}

::selection { background: rgba(255, 122, 26, 0.35); color: var(--text-heading); }

/* §3 — Brand mark. Inline SVG (4-Star Dragon Ball) as background-image
   data URI, wrapped by a CSS box-shadow halo. Sized in em so it scales
   with surrounding text. The viewBox is cropped (50 50 400 400) so the
   ball fills the inscribed circle and the halo wraps the ball edge cleanly. */
.energy-ball {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%2250%2050%20400%20400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22sphere%22%20cx%3D%2238%25%22%20cy%3D%2232%25%22%20r%3D%2262%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23FFE88A%22%2F%3E%3Cstop%20offset%3D%2225%25%22%20stop-color%3D%22%23FFD95C%22%2F%3E%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%23F5A623%22%2F%3E%3Cstop%20offset%3D%2280%25%22%20stop-color%3D%22%23D4780A%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23B05E00%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22shine1%22%20cx%3D%2232%25%22%20cy%3D%2228%25%22%20r%3D%2228%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23FFFDF0%22%20stop-opacity%3D%220.85%22%2F%3E%3Cstop%20offset%3D%2240%25%22%20stop-color%3D%22%23FFF8E0%22%20stop-opacity%3D%220.4%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23FFF8E0%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22shine2%22%20cx%3D%2268%25%22%20cy%3D%2272%25%22%20r%3D%2222%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23FFE88A%22%20stop-opacity%3D%220.35%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23FFE88A%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22glow%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%23FFD95C%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%2285%25%22%20stop-color%3D%22%23FFD95C%22%20stop-opacity%3D%220.12%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23FFD95C%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22rim%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%3Cstop%20offset%3D%2288%25%22%20stop-color%3D%22%23D4780A%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%2296%25%22%20stop-color%3D%22%23B05E00%22%20stop-opacity%3D%220.25%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%238B4A00%22%20stop-opacity%3D%220.4%22%2F%3E%3C%2FradialGradient%3E%3Csymbol%20id%3D%22star%22%20viewBox%3D%22-5%20-5%2010%2010%22%3E%3Cpolygon%20points%3D%220%2C-4.5%201.05%2C-1.45%204.28%2C-1.39%201.7%2C0.58%202.6%2C3.69%200%2C1.82%20-2.6%2C3.69%20-1.7%2C0.58%20-4.28%2C-1.39%20-1.05%2C-1.45%22%20fill%3D%22%23C23B22%22%2F%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%22250%22%20cy%3D%22250%22%20r%3D%22230%22%20fill%3D%22url(%23glow)%22%2F%3E%3Cellipse%20cx%3D%22255%22%20cy%3D%22255%22%20rx%3D%22200%22%20ry%3D%22200%22%20fill%3D%22%23B05E00%22%20opacity%3D%220.08%22%2F%3E%3Ccircle%20cx%3D%22250%22%20cy%3D%22250%22%20r%3D%22200%22%20fill%3D%22url(%23sphere)%22%2F%3E%3Ccircle%20cx%3D%22250%22%20cy%3D%22250%22%20r%3D%22200%22%20fill%3D%22url(%23rim)%22%2F%3E%3Ccircle%20cx%3D%22250%22%20cy%3D%22250%22%20r%3D%22200%22%20fill%3D%22url(%23shine1)%22%2F%3E%3Ccircle%20cx%3D%22250%22%20cy%3D%22250%22%20r%3D%22200%22%20fill%3D%22url(%23shine2)%22%2F%3E%3Cuse%20href%3D%22%23star%22%20x%3D%22145%22%20y%3D%22165%22%20width%3D%2280%22%20height%3D%2280%22%2F%3E%3Cuse%20href%3D%22%23star%22%20x%3D%22250%22%20y%3D%22165%22%20width%3D%2280%22%20height%3D%2280%22%2F%3E%3Cuse%20href%3D%22%23star%22%20x%3D%22170%22%20y%3D%22255%22%20width%3D%2280%22%20height%3D%2280%22%2F%3E%3Cuse%20href%3D%22%23star%22%20x%3D%22275%22%20y%3D%22255%22%20width%3D%2280%22%20height%3D%2280%22%2F%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow:
    0 0 0.35em rgba(255, 154, 50, 0.85),
    0 0 0.9em  rgba(255, 122, 26, 0.55),
    0 0 1.8em  rgba(255, 122, 26, 0.28);
  vertical-align: 0.08em;
  flex-shrink: 0;
}

/* Larger pulsing variant — for hero/centerpiece use only (login screen). */
.energy-ball-hero {
  width: 1.8em;
  height: 1.8em;
  animation: ki-ambient 4s ease-in-out infinite;
}

@keyframes ki-ambient {
  0%, 100% {
    box-shadow:
      0 0 0.5em rgba(255, 196, 80, 0.85),
      0 0 1.4em rgba(255, 122, 26, 0.6),
      0 0 3em   rgba(255, 122, 26, 0.32);
  }
  50% {
    box-shadow:
      0 0 0.7em rgba(255, 220, 110, 1),
      0 0 1.8em rgba(255, 154, 50, 0.75),
      0 0 4em   rgba(255, 122, 26, 0.45);
  }
}

/* §4 — Active-state pulse. Used on the current page's nav link, the
   currently-running operation, etc. Halts under reduced motion. */
@keyframes ki-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 196, 80, 0.55),
      0 0 6px   rgba(255, 196, 80, 0.45),
      0 0 14px  rgba(255, 122, 26, 0.30);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 220, 110, 0.85),
      0 0 12px  rgba(255, 220, 110, 0.65),
      0 0 22px  rgba(255, 154, 50, 0.45);
  }
}
.ki-aura {
  animation: ki-pulse 2.4s ease-in-out infinite;
  border-radius: 0.25rem;
  color: var(--color-gold-300);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .energy-ball-hero { animation: none; }
  .ki-aura {
    animation: none;
    box-shadow:
      0 0 0 1px rgba(255, 196, 80, 0.55),
      0 0 8px   rgba(255, 196, 80, 0.4);
  }
}

/* §5 — Mobile horizontal-scroll nav strip. Hides scrollbar; combine with
   sm:flex-wrap-equivalent at desktop sizes (handled in @media below). */
.nav-strip {
  scrollbar-width: none;
}
.nav-strip::-webkit-scrollbar { display: none; }

/* §7 — Component chrome.
   ----------------------------------------------------------------- */

/* Top nav (rebuilt by Sub-step B; classes here support the new structure). */
.top-nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem 0.75rem;
  background: rgba(10, 6, 8, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 10;
}

@media (min-width: 720px) {
  .top-nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
  }
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-wordmark);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-heading);
  transition: color 0.15s;
}

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

.brand .energy-ball { width: 1.4em; height: 1.4em; vertical-align: -0.05em; }

.nav-brand {
  /* Legacy alias kept so any view that hasn't been touched yet still picks
     up the wordmark styling. New views should use .brand directly. */
  font-family: var(--font-wordmark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.05rem;
  color: var(--text-heading);
}

/* Right-side wrapper. Holds the .nav-links strip (which may scroll on
   mobile) and the .user-chip side-by-side. Sits outside the scroll
   container so the chip's absolutely-positioned dropdown isn't clipped
   by the strip's overflow-x: auto. */
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  flex-wrap: wrap;
  overflow-x: auto;
  margin: 0 -0.25rem;
  padding: 0 0.25rem 0.15rem;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-zinc-700);
  border-radius: 0.3rem;
  color: var(--color-zinc-300);
  font-size: 0.85rem;
  white-space: nowrap;
  transition: all 0.15s;
}

.nav-link:hover {
  border-color: rgba(255, 122, 26, 0.5);
  background: var(--color-zinc-900);
  color: var(--color-amber-200);
}

.nav-link.is-active {
  border-color: var(--color-amber-500);
  background: rgba(255, 122, 26, 0.1);
  color: var(--color-amber-200);
  box-shadow: 0 0 10px rgba(255, 122, 26, 0.25);
}

.nav-link.is-outbound::after {
  content: '↗';
  font-size: 0.75em;
  opacity: 0.65;
  margin-left: 0.05rem;
}

.nav-user {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.user-chip {
  position: relative;
}

.user-chip > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-zinc-700);
  border-radius: 0.3rem;
  font-size: 0.85rem;
  color: var(--color-zinc-200);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.15s;
}
.user-chip > summary::-webkit-details-marker { display: none; }
.user-chip > summary::after {
  content: '▾';
  font-size: 0.7em;
  color: var(--text-muted);
}
.user-chip > summary:hover {
  border-color: rgba(255, 122, 26, 0.5);
  color: var(--color-amber-200);
}
.user-chip[open] > summary {
  border-color: var(--color-amber-500);
  color: var(--color-amber-200);
}

.user-chip-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: 200px;
  background: var(--color-zinc-900);
  border: 1px solid var(--color-zinc-700);
  border-radius: 0.4rem;
  padding: 0.35rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 122, 26, 0.08);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.user-chip-menu a,
.user-chip-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.65rem;
  border-radius: 0.25rem;
  background: none;
  border: none;
  color: var(--color-zinc-200);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}
.user-chip-menu a:hover,
.user-chip-menu button:hover {
  background: rgba(255, 122, 26, 0.1);
  color: var(--color-amber-200);
}
.user-chip-menu .menu-sep {
  height: 1px;
  background: var(--color-zinc-700);
  margin: 0.2rem 0;
}
.user-chip-menu .menu-label {
  padding: 0.35rem 0.65rem 0.1rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.role-badge {
  display: inline-block;
  padding: 0.05em 0.45em;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: 0.35rem;
}
.role-badge.is-admin {
  background: rgba(255, 174, 0, 0.15);
  color: var(--color-gold-300);
  border: 1px solid rgba(255, 174, 0, 0.35);
}
.role-badge.is-gm {
  background: rgba(255, 122, 26, 0.12);
  color: var(--color-amber-200);
  border: 1px solid rgba(255, 122, 26, 0.35);
}
.role-badge.is-player {
  background: rgba(184, 163, 167, 0.10);
  color: var(--color-zinc-300);
  border: 1px solid var(--color-zinc-700);
}

.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  padding: 0;
}
.btn-link:hover { color: var(--accent-hover); }

/* Layout. max-width 960 keeps long form fields readable; per the design
   doc, dashboards lean wider and read-heavy pages narrower. */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem;
}

.site-footer {
  text-align: center;
  padding: 2.5rem 1rem 1.5rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.footer-sep { margin: 0 0.5rem; opacity: 0.5; }
.site-footer code {
  font-size: 0.75rem;
  color: var(--color-amber-200);
}
.footer-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--color-zinc-200);
  letter-spacing: 0.06em;
}
.footer-brand .energy-ball {
  width: 0.85em;
  height: 0.85em;
  vertical-align: -0.05em;
}

/* Page header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.page-header h1 {
  font-family: var(--font-wordmark);
  font-size: 1.85rem;
  letter-spacing: 0.04em;
  color: var(--text-heading);
  text-transform: uppercase;
  line-height: 1.15;
}

.page-header h1 .muted {
  font-family: var(--font-body);
  font-size: 0.65em;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.header-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-muted); transition: color 0.1s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb strong { color: var(--text); font-weight: 600; }
.breadcrumb-sep {
  color: var(--color-zinc-700);
  font-size: 0.85em;
  user-select: none;
}

.info-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.65rem 1rem;
  font-size: 0.85rem;
  color: var(--color-zinc-300);
  margin-bottom: 1.5rem;
}
.info-bar a { color: var(--color-amber-200); }
.info-bar a:hover { color: var(--color-amber-300); }

.card-sep { color: var(--color-zinc-700); user-select: none; }

/* Buttons. Primary CTA carries the amber glow shadow at rest, brighter on
   hover; secondary is the outline variant; both honor reduced motion. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.95rem;
  border-radius: 0.3rem;
  border: 1px solid transparent;
  font-size: 0.88rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-amber-500);
  color: var(--color-zinc-950);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 0 10px rgba(255, 122, 26, 0.35);
}
.btn-primary:hover {
  background: var(--color-amber-400);
  color: var(--color-zinc-950);
  box-shadow: 0 0 18px rgba(255, 154, 50, 0.6);
}
.btn-primary:disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-zinc-700);
  color: var(--color-zinc-300);
}
.btn-secondary:hover {
  border-color: rgba(255, 122, 26, 0.5);
  background: var(--color-zinc-900);
  color: var(--color-amber-200);
}

.btn-small {
  padding: 0.3rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  box-shadow: 0 0 8px rgba(196, 74, 58, 0.3);
}
.btn-danger:hover {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
  color: #fff;
  box-shadow: 0 0 14px rgba(214, 90, 74, 0.5);
}

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

.card {
  display: block;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.15rem 1.25rem;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.card:hover {
  border-color: rgba(255, 122, 26, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.08), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card-copy-row { margin-top: 0.6rem; }

.card h2 {
  font-family: var(--font-wordmark);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--text-heading);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.card-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.card-meta + .card-meta { margin-top: 0.15rem; }

/* Document list */
.section-heading {
  font-family: var(--font-wordmark);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-amber-200);
  margin: 1.75rem 0 0.25rem;
}

.doc-list {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  margin-top: 0.75rem;
  background: var(--bg-card);
}

.doc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  transition: background 0.1s;
}
.doc-row:last-child { border-bottom: none; }
.doc-row:hover { background: rgba(255, 122, 26, 0.03); }

.doc-info { flex: 1 1 240px; min-width: 0; }

.doc-title {
  font-weight: 600;
  color: var(--text-heading);
  display: block;
  font-size: 0.98rem;
}
.doc-title:hover { color: var(--color-amber-200); }

.doc-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.row-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-editable { background: var(--badge-editable-bg); color: var(--badge-editable-fg); border: 1px solid rgba(255, 154, 50, 0.25); }
.badge-static   { background: var(--badge-static-bg);   color: var(--badge-static-fg);   border: 1px solid var(--color-zinc-700); }
.badge-empty    { background: var(--badge-empty-bg);    color: var(--badge-empty-fg);    border: 1px solid rgba(196, 74, 58, 0.3); }
.badge-archived { background: rgba(113, 113, 122, 0.18); color: var(--color-zinc-300);   border: 1px solid var(--color-zinc-700); margin-left: 0.5rem; vertical-align: middle; }

/* Forms — bg-zinc-950 (deeper than surrounding cards) carves the input
   into the surface; focus draws an amber border + 30% glow ring. */
.form-group { margin-bottom: 1.25rem; }

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-zinc-200);
  margin-bottom: 0.4rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.55rem 0.85rem;
  background: var(--bg-input);
  border: 1px solid var(--color-zinc-700);
  border-radius: 0.3rem;
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
  transition: border-color 0.1s, box-shadow 0.1s;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--color-zinc-500); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-amber-500);
  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18);
}

.form-help {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

/* Activity Form submit panel — gated to the activity-log editor view. */
.activity-form-panel {
  border: 1px solid rgba(255, 122, 26, 0.25);
  border-radius: 0.5rem;
  padding: 0.85rem 1.15rem 1rem;
  margin-bottom: 1rem;
  background: rgba(255, 122, 26, 0.04);
}
.activity-form-panel summary {
  cursor: pointer;
  padding: 0.25rem 0;
  font-family: var(--font-wordmark);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-amber-200);
}
.activity-form-panel summary::-webkit-details-marker { color: var(--color-amber-300); }
.activity-form .form-group { margin-top: 0.85rem; margin-bottom: 0; }
.activity-form input,
.activity-form textarea {
  width: 100%;
  padding: 0.55rem 0.85rem;
  background: var(--bg-input);
  border: 1px solid var(--color-zinc-700);
  border-radius: 0.3rem;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
}
.activity-form input:focus,
.activity-form textarea:focus {
  outline: none;
  border-color: var(--color-amber-500);
  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18);
}
.activity-form .form-actions { margin-top: 0.85rem; }
.form-separator {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1rem 0;
}

.input-small {
  width: 180px;
  padding: 0.35rem 0.7rem;
  background: var(--bg-input);
  border: 1px solid var(--color-zinc-700);
  border-radius: 0.3rem;
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
}
.input-small:focus {
  outline: none;
  border-color: var(--color-amber-500);
  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18);
}

.inline-form { display: flex; align-items: center; gap: 0.5rem; }
.inline-form-wide {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.inline-form-wide input {
  padding: 0.5rem 0.8rem;
  background: var(--bg-input);
  border: 1px solid var(--color-zinc-700);
  border-radius: 0.3rem;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
}
.inline-form-wide input:focus {
  outline: none;
  border-color: var(--color-amber-500);
  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18);
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--color-zinc-200);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  accent-color: var(--color-amber-500);
}

/* Login — auth header pattern: stacked wordmark above the h1, returning
   to / if the user lands here by mistake. The hero energy-ball pulses
   above the two-line "DRAGON / DASHBOARD" wordmark; the h1 sits below. */
.login-container {
  max-width: 380px;
  margin: 5rem auto 2rem;
  padding: 0 1rem;
  text-align: center;
}
.login-container .auth-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-wordmark);
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-heading);
  margin-bottom: 1.25rem;
  line-height: 1;
}
.login-container .auth-brand:hover { color: var(--accent); }
.login-container .auth-brand .energy-ball-hero {
  width: 2.4em;
  height: 2.4em;
}
.login-container .auth-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05em;
}
.login-container h1 {
  font-family: var(--font-wordmark);
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-heading);
  margin-bottom: 1.5rem;
}
/* The form grid itself stays left-aligned for input scanability — the
   centered chrome is the hero block above it, not the controls. */
.login-container form { text-align: left; }

/* Alerts */
.alert {
  padding: 0.75rem 1rem;
  border-radius: 0.35rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  border: 1px solid transparent;
}
.alert-error {
  background: rgba(196, 74, 58, 0.12);
  border-color: rgba(196, 74, 58, 0.45);
  color: #f1a89a;
}
.alert-success {
  background: rgba(95, 168, 107, 0.10);
  border-color: rgba(95, 168, 107, 0.4);
  color: #a8d9b2;
}

.alert-restore {
  background: rgba(255, 122, 26, 0.08);
  border: 1px solid rgba(255, 122, 26, 0.4);
  color: var(--color-amber-200);
  padding: 0.75rem 1rem;
  border-radius: 0.35rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.alert-archived {
  background: rgba(113, 113, 122, 0.10);
  border: 1px solid var(--color-zinc-700);
  color: var(--color-zinc-200);
  padding: 0.75rem 1rem;
  border-radius: 0.35rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Archived character cards: dim the entire card and desaturate the heading,
   so the archived state reads at a glance in the card grid. */
.card-archived { opacity: 0.6; }
.card-archived h2 { color: var(--color-zinc-400); }

.archive-disclosure { font-size: 0.85rem; margin-bottom: 1rem; }

/* Editor */
.editor-header { margin-bottom: 1rem; }
.editor-header h1 {
  font-family: var(--font-wordmark);
  font-size: 1.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-heading);
}
.editor-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.save-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  flex-wrap: wrap;
}

.summary-input {
  flex: 1 1 240px;
  padding: 0.5rem 0.8rem;
  background: var(--bg-input);
  border: 1px solid var(--color-zinc-700);
  border-radius: 0.3rem;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
}
.summary-input:focus {
  outline: none;
  border-color: var(--color-amber-500);
  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18);
}
.summary-input::placeholder { color: var(--color-zinc-500); }

.save-actions { display: flex; gap: 0.5rem; }

.edit-history {
  margin-top: 1.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.edit-history summary { cursor: pointer; color: var(--text-muted); }
.edit-history summary:hover { color: var(--color-amber-200); }
.edit-history ul { list-style: none; margin-top: 0.5rem; }
.edit-history li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.edit-history li:last-child { border-bottom: none; }

.danger-zone {
  margin-top: 2.25rem;
  font-size: 0.85rem;
  border: 1px solid rgba(196, 74, 58, 0.3);
  border-radius: 0.4rem;
  padding: 0.75rem 1rem;
  background: rgba(196, 74, 58, 0.04);
}
.danger-zone > summary {
  cursor: pointer;
  color: #d68a7e;
  font-family: var(--font-wordmark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.danger-zone > details > :not(summary) { margin-top: 0.75rem; }
.danger-zone[open] > :not(summary) { margin-top: 0.85rem; }

.muted { color: var(--text-muted); }

/* Public URL display + copy buttons */
.public-url-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: var(--bg-input);
  border: 1px solid var(--color-zinc-700);
  border-radius: 0.3rem;
  font-size: 0.85rem;
}
.public-url-bar code {
  flex: 1;
  background: none;
  border: none;
  padding: 0;
  user-select: all;
  color: var(--color-amber-200);
}

.doc-url {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
}
.doc-url code {
  font-size: 0.75rem;
  user-select: all;
  cursor: text;
}

.btn-copy-link {
  background: transparent;
  border: 1px solid var(--color-zinc-700);
  border-radius: 0.25rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.2em 0.55em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-copy-link:hover {
  border-color: rgba(255, 122, 26, 0.5);
  color: var(--color-amber-200);
  background: rgba(255, 122, 26, 0.05);
}

/* EasyMDE overrides — the editor brings its own DOM; we re-skin it. */
.EasyMDEContainer .CodeMirror {
  background: var(--bg-input);
  color: var(--text);
  border-color: var(--color-zinc-700);
}
.EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--color-amber-300); }
.editor-toolbar {
  background: var(--color-zinc-900);
  border-color: var(--color-zinc-700);
}
.editor-toolbar button {
  color: var(--color-zinc-400) !important;
}
.editor-toolbar button:hover,
.editor-toolbar button.active {
  color: var(--color-amber-200) !important;
  background: rgba(255, 122, 26, 0.08);
  border-color: rgba(255, 122, 26, 0.3) !important;
}
.editor-statusbar { color: var(--text-muted); }
.EasyMDEContainer .CodeMirror-selected {
  background: rgba(255, 122, 26, 0.18);
}
.editor-preview {
  background: var(--bg-card);
  color: var(--text);
}
.editor-preview h1, .editor-preview h2, .editor-preview h3 {
  color: var(--text-heading);
  font-family: var(--font-wordmark);
  letter-spacing: 0.03em;
}

/* Version history */
.version-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-top: 1rem;
}
.version-pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

/* Markdown rendering — server-rendered output drops into <article class="markdown-body">. */
.markdown-body {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.5rem 2rem;
  margin: 1rem 0 1.5rem;
  line-height: 1.7;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  color: var(--text-heading);
  margin: 1.5rem 0 0.75rem;
  line-height: 1.3;
}
.markdown-body h1:first-child,
.markdown-body h2:first-child,
.markdown-body h3:first-child { margin-top: 0; }
.markdown-body h1 {
  font-family: var(--font-wordmark);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
}
.markdown-body h2 {
  font-family: var(--font-wordmark);
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3rem;
  color: var(--color-amber-200);
}
.markdown-body h3 {
  font-size: 1.12rem;
  color: var(--color-amber-200);
}
.markdown-body h4 { font-size: 1rem; color: var(--color-zinc-200); }
.markdown-body p { margin: 0.75rem 0; }
.markdown-body ul,
.markdown-body ol { margin: 0.75rem 0 0.75rem 1.5rem; }
.markdown-body li { margin: 0.25rem 0; }
.markdown-body strong { color: var(--text-heading); }
.markdown-body em { color: var(--color-zinc-200); }
.markdown-body a { color: var(--color-amber-300); text-decoration: underline; text-decoration-color: rgba(255, 154, 50, 0.4); text-underline-offset: 2px; }
.markdown-body a:hover { color: var(--color-amber-200); text-decoration-color: var(--color-amber-300); }
.markdown-body code {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.05rem 0.4rem;
  font-size: 0.9em;
  font-family: var(--font-mono);
  color: var(--color-amber-200);
}
.markdown-body pre {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  padding: 0.85rem 1.1rem;
  margin: 0.85rem 0;
  overflow-x: auto;
}
.markdown-body pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
}
.markdown-body blockquote {
  border-left: 3px solid var(--color-amber-500);
  padding: 0.25rem 1rem;
  margin: 0.85rem 0;
  color: var(--color-zinc-300);
  background: rgba(255, 122, 26, 0.04);
}
.markdown-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.4rem 0;
}
.markdown-body table {
  border-collapse: collapse;
  margin: 1rem 0;
  width: auto;
  max-width: 100%;
}
.markdown-body th,
.markdown-body td {
  border: 1px solid var(--border);
  padding: 0.45rem 0.85rem;
  text-align: left;
  vertical-align: top;
}
.markdown-body thead th {
  background: var(--bg-input);
  color: var(--color-amber-200);
  font-family: var(--font-wordmark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 400;
}
.markdown-body tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.015);
}

/* Raw-source <details> on doc display views. */
.raw-source { margin: 1rem 0 1.5rem; }
.raw-source > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 0.25rem 0;
}
.raw-source > summary:hover { color: var(--color-amber-200); }
.raw-source pre {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  padding: 1rem;
  margin-top: 0.5rem;
  overflow-x: auto;
  white-space: pre;
}
.raw-source code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-zinc-300);
}

/* Recent Activity widget (campaign dashboard, sub-step E). */
.recent-activity {
  margin-top: 1.75rem;
}
.activity-list {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--bg-card);
}
.activity-row {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr auto;
  gap: 0.75rem 1rem;
  align-items: baseline;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}
.activity-row:last-child { border-bottom: none; }
.activity-row .activity-when {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}
.activity-row .activity-target a {
  color: var(--text-heading);
  font-weight: 600;
}
.activity-row .activity-target a:hover { color: var(--color-amber-200); }
.activity-row .activity-target .doc-name {
  color: var(--text-muted);
  font-weight: 400;
}
.activity-row .activity-by {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
}
@media (max-width: 600px) {
  .activity-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .activity-row .activity-by { text-align: left; }
}

/* Responsive */
@media (max-width: 720px) {
  .container { padding: 1rem; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .page-header h1 { font-size: 1.4rem; }
  .save-bar { flex-direction: column; align-items: stretch; }
  .save-actions { width: 100%; justify-content: flex-end; }
  .inline-form-wide { flex-direction: column; align-items: stretch; }
  .markdown-body { padding: 1.1rem 1.25rem; }
  .markdown-body table { font-size: 0.88rem; }
  .markdown-body th, .markdown-body td { padding: 0.3rem 0.55rem; }
}