:root {
  /* Background — pure black */
  --bg-base: #0a0a0a;
  --bg-surface: #141414;
  --bg-surface-hover: #1e1e1e;
  --bg-elevated: #1a1a1a;
  --bg-overlay: rgba(10, 10, 10, 0.95);

  /* Panel — warm bronze tint */
  --panel: #1f1a16;
  --panel-bg: #1f1a16;
  --panel-border: #3a2b18;

  /* Border — warm gold-tinted */
  --border-subtle: #2a2218;
  --border-default: #3a2b18;
  --border-strong: #524020;

  /* Utility */
  --line: rgba(255, 255, 255, 0.08);
  --muted: rgba(255, 255, 255, 0.5);

  /* Text */
  --text-primary: #f5f7fb;
  --text-secondary: #a9b0bd;
  --text-muted: #6d7580;
  --text-inverse: #0a0a0a;

  /* Primary Accent (Gold) */
  --accent: #c99a2e;
  --accent-hover: #f2b84b;
  --accent-muted: rgba(201, 154, 46, 0.10);
  --accent-glow: rgba(242, 184, 75, 0.20);
  --accent-border: rgba(201, 154, 46, 0.30);

  /* Athena Dark — info highlights only */
  --athena-blue: #141414;
  --athena-blue-glow: rgba(20, 20, 20, 0.15);

  /* Spartan Crimson */
  --crimson: #8b2e22;
  --crimson-accent: #a73a2b;
  --crimson-glow: rgba(167, 58, 43, 0.12);

  /* Laurel Green */
  --laurel: #3e5d2a;
  --success: #5f8a3c;
  --success-muted: rgba(95, 138, 60, 0.10);

  /* Semantic */
  --warning: #c99a2e;
  --warning-muted: rgba(201, 154, 46, 0.10);
  --danger: #a73a2b;
  --danger-muted: rgba(167, 58, 43, 0.10);

  /* Palette */
  --color-indigo: #6366f1;
  --color-cyan: #06b6d4;
  --color-rose: #f43f5e;
  --color-amber: #f2b84b;
  --color-emerald: #5f8a3c;
  --color-violet: #8b5cf6;
  --color-sky: #141414;
  --color-orange: #f97316;

  /* Typography */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* Shadows — warmer tones */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.5);
  --shadow-glow-gold: 0 0 20px rgba(201, 154, 46, 0.12);
  --shadow-glow-blue: 0 0 12px rgba(20, 20, 20, 0.08);

  /* Sidebar */
  --sidebar-width: 240px;
  --sidebar-collapsed: 64px;
  --sidebar-bg: #0d0d0d;
  --sidebar-border: #2a2218;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Event dossier cards */
  --event-paper: #d4c8b0;
  --event-paper-deep: #c2b498;
  --event-paper-edge: #a89878;
  --event-paper-fiber: rgba(90, 70, 40, 0.10);
  --event-paper-highlight: rgba(255, 245, 220, 0.18);
  --event-ink: #171715;
  --event-ink-muted: #56524c;
  --event-rule: rgba(23, 23, 21, 0.16);
  --event-shadow: rgba(0, 0, 0, 0.48);
  --event-shadow-soft: rgba(0, 0, 0, 0.24);
  --event-focus: #f2b84b;
  --event-error: #9f3328;
  --event-success: #315f3d;

  /* Event command center */
  --command-surface: #11110f;
  --command-surface-raised: #181713;
  --command-surface-strong: #211f18;
  --command-rule: rgba(201, 154, 46, 0.22);
  --command-rule-soft: rgba(255, 255, 255, 0.08);
  --command-ink-muted: #a9a69c;
  --command-overlay: rgba(8, 8, 7, 0.82);
  --command-gold-soft: rgba(201, 154, 46, 0.13);
  --command-shadow: rgba(0, 0, 0, 0.44);
}

/* ── Reset & Base ─────────────────────────────────────────────── */

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

html {
  font-size: 16px;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-base);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(10, 15, 30, 0.5) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(10, 15, 30, 0.3) 0%, transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ── Typography ───────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

h1 {
  font-weight: 800;
  font-size: var(--text-3xl);
  letter-spacing: -0.025em;
}
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p {
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

small {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ── Selection ────────────────────────────────────────────────── */

::selection {
  background: var(--accent-muted);
  color: var(--text-primary);
}

/* ── Focus ────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Scrollbar ────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* ── Decorative Greek Key Border ──────────────────────────────── */
/* Subtle repeating-meander pattern using CSS gradients.
   Use via .greek-border-top / .greek-border-bottom classes. */

.greek-border-top,
.greek-border-bottom {
  position: relative;
}

.greek-border-top::before,
.greek-border-bottom::after {
  content: "";
  display: block;
  height: 3px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--border-subtle) 0px,
      var(--border-subtle) 6px,
      transparent 6px,
      transparent 8px,
      var(--border-subtle) 8px,
      var(--border-subtle) 10px,
      transparent 10px,
      transparent 12px,
      var(--border-subtle) 12px,
      var(--border-subtle) 18px,
      transparent 18px,
      transparent 20px
    );
  opacity: 0.5;
  pointer-events: none;
}

.greek-border-top::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.greek-border-bottom::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* ── App Shell ────────────────────────────────────────────────── */

.app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Top Navigation ───────────────────────────────────────────── */

.top-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 56px;
  padding: 0 var(--space-8);
  background: rgba(12, 12, 12, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.top-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-primary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: opacity var(--transition-fast);
}

.top-brand:hover {
  text-decoration: none;
  opacity: 0.8;
}

.top-brand-mark {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 4px;
  background: var(--bg-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.top-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: none;
  object-fit: cover;
  flex-shrink: 0;
}

.top-brand-text {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.1em;
}

.top-nav-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}

.top-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 0;
  border: none;
  white-space: nowrap;
  transition: all var(--transition-fast);
  position: relative;
}

.top-nav-link svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.top-nav-link:hover {
  color: var(--text-primary);
  background: rgba(201, 154, 46, 0.06);
  text-decoration: none;
}

.top-nav-link:hover svg {
  opacity: 1;
}

.top-nav-link.active {
  color: var(--accent);
  background: rgba(201, 154, 46, 0.08);
  text-decoration: none;
}

.top-nav-link.active svg {
  opacity: 1;
}

.top-nav-link::after {
  display: none;
}

.top-nav-actions {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.top-account {
  position: relative;
}
.top-user {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  max-width: 220px;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  transition: all var(--transition-fast);
}

.top-user:hover,
.top-user[aria-expanded="true"] {
  color: var(--text-primary);
  background: transparent;
  text-decoration: none;
}

.top-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid #222;
  transition: border-color var(--transition-fast);
}

.top-user:hover .top-user-avatar {
  border-color: rgba(201, 154, 46, 0.4);
}
.top-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.top-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-account-menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 200px;
  padding: 4px;
  background: #0d1117;
  border: 1px solid rgba(201, 154, 46, 0.2);
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 90;
}

.top-account.open .top-account-menu,
.top-account-menu.open {
  display: block;
}

.top-account-name {
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-xs);
  border-bottom: 1px solid rgba(201, 154, 46, 0.12);
  margin-bottom: var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-account-menu a {
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 3px;
  transition: all var(--transition-fast);
}

.top-account-menu a:hover,
.top-account-menu a:focus-visible {
  color: var(--text-primary);
  background: rgba(201, 154, 46, 0.08);
  text-decoration: none;
}

.top-nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.top-nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  margin: 2.5px auto;
  background: var(--text-muted);
  border-radius: 1px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.top-nav.mobile-open .top-nav-toggle span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.top-nav.mobile-open .top-nav-toggle span:nth-child(2) {
  opacity: 0;
}
.top-nav.mobile-open .top-nav-toggle span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* ── Nav Section (sidebar-style, used in dashboard views) ────── */

.nav-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-item:hover {
  background: rgba(201, 154, 46, 0.08);
  color: var(--text-primary);
  text-decoration: none;
}

.nav-item.active {
  background: var(--accent-muted);
  color: var(--accent);
}

.nav-item-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-item:hover .nav-item-icon,
.nav-item.active .nav-item-icon {
  opacity: 1;
}

.nav-label {
  flex: 1;
  min-width: 0;
}

/* ── Main Content ─────────────────────────────────────────────── */

.main {
  flex: 1;
  min-height: calc(100vh - 56px);
  overflow-x: hidden;
}

.page-header {
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.page-header h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.page-header p {
  color: var(--text-muted);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
}

.page-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header-actions .button {
  white-space: nowrap;
}

.button-danger-outline {
  color: var(--danger);
  border: 1px solid rgba(167, 58, 43, 0.3);
  background: transparent;
}

.button-danger-outline:hover {
  background: rgba(167, 58, 43, 0.1);
  border-color: var(--danger);
  color: var(--danger);
}

/* ── Page Section ────────────────────────────────────────────── */

.page-section {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.page-section:last-child {
  border-bottom: none;
}

/* ── Back Link ───────────────────────────────────────────────── */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  margin-bottom: var(--space-4);
  transition: color var(--transition-fast);
}

.back-link:hover {
  color: var(--accent);
  text-decoration: none;
}

/* ── Shell & Content Width ──────────────────────────────────── */

.shell {
  width: min(1220px, calc(100% - var(--space-8) * 2));
  margin: 0 auto;
}

.shell-wide {
  width: min(1440px, calc(100% - var(--space-8) * 2));
  margin: 0 auto;
}

/* ── Flex Utilities ──────────────────────────────────────────── */

.flex {
  display: flex;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Dashboard Command Center ───────────────────────────────── */

.dash-command {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 56px);
  margin: 0;
  padding: var(--space-8) var(--space-8) var(--space-16);
  background: transparent;
}

body:has(.dash-command) {
  background: #090b10;
}

body:has(.dash-command)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.30), rgba(12, 12, 12, 0.70)),
    radial-gradient(circle at 20% 15%, rgba(201, 154, 46, 0.16), transparent 28%),
    radial-gradient(circle at 80% 35%, rgba(139, 46, 34, 0.14), transparent 24%),
    url('/assets/dashboard.webp') center / cover no-repeat;
  pointer-events: none;
}

.dash-hero {
  min-height: 260px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-8) 0 var(--space-6);
  border: 0;
  background: transparent;
  box-shadow: none;
  max-width: 1120px;
  margin: 0 auto;
}

.dash-kicker,
.dash-panel-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  animation: floatIn 0.42s var(--ease-out-expo) both;
}

.dash-hero h1 {
  max-width: 720px;
  margin: var(--space-3) 0 var(--space-4);
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  animation: floatIn 0.42s var(--ease-out-expo) 0.08s both;
}

.dash-hero h1::first-line {
  color: var(--accent-hover);
}

.dash-summary {
  max-width: 520px;
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  animation: floatIn 0.42s var(--ease-out-expo) 0.16s both;
}

.dash-hero-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.dash-overview,
.dash-panel,
.dash-network-panel {
  border: 1px solid rgba(201, 154, 46, 0.22);
  background: rgba(12, 12, 12, 0.78);
  box-shadow: inset 0 1px 0 rgba(242, 184, 75, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.dash-overview {
  padding: var(--space-5);
  animation: floatIn 0.42s var(--ease-out-expo) 0.1s both;
}

.dash-overview h2,
.dash-section-head h2,
.dash-panel h2 {
  margin: 0;
  color: var(--accent-hover);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.dash-overview dl {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.dash-overview dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.dash-overview dd {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.dash-overview dd span,
.dash-meter {
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
}

.dash-overview dd i,
.dash-meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
}

.dash-overview dd b {
  color: var(--accent-hover);
  font-size: var(--text-xs);
  font-weight: 700;
}

.dash-war-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 1px;
  margin-top: 1px;
  background: rgba(201, 154, 46, 0.22);
  border-inline: 1px solid rgba(201, 154, 46, 0.22);
}

.dash-panel {
  min-height: 210px;
  padding: var(--space-6);
}

.dash-panel > p:not(.dash-panel-label) {
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.dash-next-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
}

.dash-next-meta span {
  display: grid;
  gap: 2px;
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.dash-next-meta b {
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dash-meter {
  display: block;
  width: 100%;
}

.dash-panel-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.dash-force-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: var(--space-8);
  background: rgba(201, 154, 46, 0.16);
}

.dash-force-grid div {
  min-width: 0;
  padding: var(--space-4) var(--space-3);
  background: rgba(12, 12, 12, 0.66);
  text-align: center;
}

.dash-force-grid b {
  display: block;
  color: var(--accent-hover);
  font-size: var(--text-2xl);
  line-height: 1;
}

.dash-force-grid span {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dash-network-panel {
  padding: var(--space-6);
  border-top: 0;
  max-width: 1120px;
  margin-inline: auto;
  animation: floatIn 0.42s var(--ease-out-expo) 0.2s both;
}

.dash-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.dash-section-head > span {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.dash-bookmark-tip {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.dash-server-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 42px;
  margin-bottom: var(--space-4);
  padding: 0 var(--space-3);
  border: 1px solid rgba(201, 154, 46, 0.18);
  background: rgba(12, 12, 12, 0.58);
  color: var(--text-muted);
  box-shadow: inset 0 1px 0 rgba(242, 184, 75, 0.05);
}

.dash-server-search:focus-within {
  border-color: rgba(201, 154, 46, 0.46);
  color: var(--accent-hover);
  box-shadow: 0 0 0 3px rgba(201, 154, 46, 0.08);
}

.dash-server-search svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash-server-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
}

.dash-server-search input::placeholder {
  color: var(--text-muted);
}

.dash-server-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(201, 154, 46, 0.18);
  background: transparent;
}

.dash-server-empty {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed rgba(201, 154, 46, 0.22);
  background: rgba(12, 12, 12, 0.58);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.dash-server {
  position: relative;
  background: rgba(12, 12, 12, 0.82);
}

.dash-server.is-admin {
  box-shadow: inset 3px 0 0 var(--accent);
}

.dash-server.is-bookmarked {
  background: rgba(12, 12, 12, 0.9);
  box-shadow: inset 3px 0 0 var(--accent);
}

.dash-server.is-admin .dash-server-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(201, 154, 46, 0.08), transparent 55%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.dash-server.is-admin:hover .dash-server-row::before {
  opacity: 1;
}

.dash-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(201, 154, 46, 0.28);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  background: var(--accent-muted);
  color: var(--accent-hover);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.dash-admin-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.dash-bookmark-button {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid rgba(201, 154, 46, 0.22);
  border-radius: var(--radius-full);
  background: rgba(12, 12, 12, 0.52);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0;
  line-height: 1;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.dash-bookmark-button:hover,
.dash-bookmark-button:focus-visible,
.dash-bookmark-button[aria-pressed="true"] {
  border-color: rgba(201, 154, 46, 0.46);
  background: rgba(201, 154, 46, 0.16);
  color: var(--accent-hover);
  box-shadow: 0 0 18px rgba(201, 154, 46, 0.12);
}

.dash-bookmark-button:hover {
  transform: translateY(-1px);
}

.dash-bookmark-button[aria-pressed="true"] svg {
  fill: currentColor;
}

.dash-bookmark-button svg {
  width: 13px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition-fast), fill var(--transition-fast);
}

.dash-server-row {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
}

.dash-server-row:hover {
  background: rgba(201, 154, 46, 0.05);
}

.dash-server-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 10px rgba(201, 154, 46, 0.35);
}

.dash-server-status.ready {
  background: var(--success);
  box-shadow: 0 0 10px rgba(95, 138, 60, 0.45);
}

.dash-server-row .server-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
}

.dash-server-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dash-server-name {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: 700;
}

.dash-server-sub {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.dash-server-spacer {
  flex: 1 1 auto;
}

.dash-server-meta {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.dash-server-meta b {
  color: var(--accent-hover);
}

.dash-chevron {
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-server.is-open .dash-chevron {
  transform: rotate(180deg);
}

.dash-server-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  background: #090b10;
  padding: 0;
  transition:
    max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    border-color 0.2s ease;
}

.dash-server.is-open .dash-server-menu {
  max-height: 640px;
  opacity: 1;
  border-top-color: transparent;
}

.dash-menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  min-height: 82px;
  padding: var(--space-4);
  color: var(--text-secondary);
  text-decoration: none;
  border-top: 1px solid rgba(201, 154, 46, 0.06);
  border-right: 1px solid rgba(201, 154, 46, 0.06);
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.dash-menu-item.has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
}

.dash-menu-item.has-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(12, 12, 12, 0.85);
  transition: background var(--transition-fast);
  z-index: 0;
}

.dash-menu-item.has-image > * {
  position: relative;
  z-index: 1;
}

.dash-menu-item.has-image:hover::before {
  background: rgba(12, 12, 12, 0.45);
}

.dash-menu-item:not(.has-image):hover {
  background: rgba(201, 154, 46, 0.07);
  color: var(--text-primary);
  text-decoration: none;
}

.dash-menu-item.has-image:hover {
  color: var(--text-primary);
  text-decoration: none;
}

.dash-menu-label {
  color: var(--accent-hover);
  font-weight: 700;
}

.dash-menu-desc {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.dash-menu-arrow {
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.dash-menu-item:hover .dash-menu-arrow {
  opacity: 1;
  transform: translateX(2px);
}

@media (max-width: 980px) {
  .dash-hero,
  .dash-war-grid {
    grid-template-columns: 1fr;
  }

  .dash-force-grid,
  .dash-server-menu {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .dash-command {
    padding: var(--space-4) var(--space-4) var(--space-10);
  }

  .dash-hero,
  .dash-panel,
  .dash-network-panel {
    padding: var(--space-5);
  }

  .dash-next-meta,
  .dash-force-grid,
  .dash-server-menu {
    grid-template-columns: 1fr;
  }

  .dash-server-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .dash-server-meta {
    width: 100%;
    margin-left: calc(48px + var(--space-3));
  }
}
/* ── Roster drag-and-drop ───────────────────────────────────── */

.signup-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  font-size: var(--text-sm);
  transition: background var(--transition-fast);
}

.signup-row:hover {
  background: rgba(201, 154, 46, 0.04);
}

.draggable-signup {
  cursor: grab;
}

.draggable-signup:active {
  cursor: grabbing;
}

.roster-dropzone.is-drag-over {
  background: rgba(201, 154, 46, 0.08);
  outline: 2px dashed rgba(201, 154, 46, 0.4);
  outline-offset: -2px;
}

.draggable-signup.is-dragging {
  opacity: 0.4;
}

.roster-dropzone.is-saving .signup-row {
  pointer-events: none;
  opacity: 0.5;
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.page-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.page-content {
  padding: var(--space-6) var(--space-8);
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Gold data pages ────────────────────────────────────────── */

.athena-data-page {
  position: relative;
  min-height: calc(100vh - 56px);
  border: 1px solid rgba(201, 154, 46, 0.18);
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.56), rgba(12, 12, 12, 0.72)),
    radial-gradient(circle at 18% 0%, rgba(201, 154, 46, 0.12), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(139, 46, 34, 0.10), transparent 28%);
  box-shadow: inset 0 1px 0 rgba(242, 184, 75, 0.08), 0 24px 70px rgba(0, 0, 0, 0.22);
}

.athena-data-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.32), rgba(12, 12, 12, 0.68)),
    radial-gradient(circle at 20% 18%, rgba(201, 154, 46, 0.14), transparent 30%),
    url('/assets/stats.webp') center / cover fixed;
}
.athena-data-page .dashboard-header,
.athena-data-page .dash-header {
  border-bottom: 1px solid rgba(201, 154, 46, 0.18);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
}

.athena-data-page h1,
.athena-data-page h2,
.athena-data-page .page-title {
  color: var(--accent-hover);
  letter-spacing: 0.03em;
}

.athena-data-page .card,
.athena-data-page .stat-card,
.athena-data-page .score-table-wrap,
.athena-data-page .att-grid-wrap {
  border-color: rgba(201, 154, 46, 0.20);
  background: rgba(12, 12, 12, 0.84);
  box-shadow: inset 0 1px 0 rgba(242, 184, 75, 0.06);
}

.athena-data-page .table th,
.athena-data-page .score-table th,
.athena-data-page .att-grid thead th,
.athena-data-page .att-stats th {
  color: var(--accent);
  background: rgba(201, 154, 46, 0.06);
  border-color: rgba(201, 154, 46, 0.18);
}

.athena-data-page .table td,
.athena-data-page .score-table td,
.athena-data-page .att-grid td,
.athena-data-page .att-stats td {
  border-color: rgba(201, 154, 46, 0.10);
}

.athena-data-page .score-history-card,
.athena-data-page .guild-stats-grid {
  background: transparent;
}

.athena-data-page .badge,
.athena-data-page .status-pill {
  border-color: rgba(201, 154, 46, 0.22);
}

/* ── Guild Performance ──────────────────────────────────────── */

.guild-performance-page {
  width: min(1480px, calc(100% - var(--space-8) * 2));
  max-width: none !important;
}

.guild-performance-tables {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
  align-items: start;
}

.guild-performance-panel {
  min-width: 0;
  padding: var(--space-4);
  background: rgba(12, 12, 12, 0.6);
  border-radius: 10px;
  border: 1px solid rgba(201, 154, 46, 0.12);
}

.guild-performance-panel h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
}

.guild-performance-panel .score-table-wrap {
  overflow: auto;
  max-height: 620px;
  border-radius: 8px;
  border: 1px solid rgba(201, 154, 46, 0.15);
}

.guild-performance-panel .score-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.guild-performance-panel .score-table {
  min-width: 560px;
}

.guild-performance-panel:nth-child(2) .score-table {
  min-width: 720px;
}

.guild-performance-panel .score-table th,
.guild-performance-panel .score-table td {
  white-space: nowrap;
  padding: 12px 14px;
}

.guild-performance-panel .score-table th {
  padding-bottom: 14px;
}

.guild-performance-panel .score-table tbody tr:hover {
  background: rgba(201, 154, 46, 0.04);
}

.guild-performance-panel .score-table tbody tr {
  transition: background 0.15s ease;
}

.guild-performance-panel .score-table td:nth-child(3) {
  white-space: normal;
  min-width: 160px;
}

@media (max-width: 1120px) {
  .guild-performance-page {
    width: 100%;
  }

  .guild-performance-tables {
    grid-template-columns: 1fr;
  }
}

/* ── Landing ──────────────────────────────────────────────────── */

.landing-hero {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: grid;
  align-items: center;
  border-bottom: 1px solid rgba(201, 154, 46, 0.12);
  background:
    linear-gradient(135deg, rgba(8, 8, 8, 0.98), rgba(14, 12, 10, 0.94) 48%, rgba(8, 8, 8, 0.98)),
    radial-gradient(circle at 18% 22%, rgba(201, 154, 46, 0.15), transparent 24%),
    radial-gradient(circle at 82% 68%, rgba(201, 154, 46, 0.06), transparent 28%),
    url('/assets/wallpaper2.webp') center / cover;
}

.landing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(201, 154, 46, 0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(201, 154, 46, 0.02) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

.landing-hero::after {
  content: '';
  position: absolute;
  inset: auto -15% -45% -15%;
  height: 60%;
  background: radial-gradient(ellipse at center, rgba(201, 154, 46, 0.14), transparent 60%);
  pointer-events: none;
}

.landing-hero-inner {
  position: relative;
  z-index: 1;
  width: min(1220px, calc(100% - var(--space-8) * 2));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1fr);
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) 0;
}

.landing-orbit {
  position: absolute;
  right: max(-120px, -6vw);
  top: 50%;
  width: min(54vw, 720px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  opacity: 0.55;
  pointer-events: none;
}

.orbit-ring {
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(201, 154, 46, 0.15);
  border-radius: var(--radius-full);
}
.ring-one {
  /* inherits orbit-ring base; outer ring uses gold accent */
}

.ring-two {
  inset: 26%;
  border-color: rgba(201, 154, 46, 0.10);
}

.orbit-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
  box-shadow: 0 0 24px var(--accent);
}

.dot-one { left: 28%; top: 24%; }
.dot-two { right: 19%; top: 48%; background: var(--accent-hover); box-shadow: 0 0 24px rgba(242, 184, 75, 0.3); }
.dot-three { left: 54%; bottom: 18%; background: var(--accent); box-shadow: 0 0 20px rgba(201, 154, 46, 0.25); }

.landing-copy {
  max-width: 660px;
}

.landing-kicker {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.landing-copy h1 {
  font-size: clamp(3rem, 6.6vw, 6.6rem);
  line-height: 0.9;
  letter-spacing: -0.07em;
  max-width: 760px;
}

.landing-copy p {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  margin: var(--space-6) 0;
  max-width: 560px;
}

.landing-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Landing Ops (logged-in variant) ─────────────────────────── */

.landing-ops {
  /* inherits .landing-hero styles */
}

.landing-ops-inner {
  /* inherits .landing-hero-inner styles */
}

.landing-ops-copy {
  /* inherits .landing-copy styles */
}

/* ── Ops Panel Grid ─────────────────────────────────────────── */

.ops-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  transform: rotate(-2deg);
}

.ops-panel {
  min-height: 155px;
  padding: var(--space-5);
  border: 1px solid rgba(201, 154, 46, 0.12);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.82), rgba(12, 12, 12, 0.92)),
    rgba(201, 154, 46, 0.03);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ops-panel:hover {
  border-color: rgba(201, 154, 46, 0.2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 0 24px rgba(201, 154, 46, 0.06);
}

.ops-panel:nth-child(2),
.ops-panel:nth-child(3) {
  transform: translateY(var(--space-8));
}

.ops-panel-primary {
  grid-row: span 2;
  min-height: 330px;
  background:
    linear-gradient(160deg, rgba(201, 154, 46, 0.12), rgba(10, 12, 18, 0.92) 55%),
    radial-gradient(circle at 80% 20%, rgba(201, 154, 46, 0.08), transparent 24%);
  border-color: rgba(201, 154, 46, 0.18);
}

.ops-panel-label,
.tool-card-index {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ops-panel strong {
  display: block;
  color: var(--text-primary);
  font-size: clamp(1.45rem, 2.6vw, 2.65rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.ops-panel small {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.tools-section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.tools-bento {
  max-width: 1220px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: var(--space-6);
}

.section-heading h2 {
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
  color: var(--accent);
}

.tools-heading h2 {
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
  max-width: 780px;
}

.section-heading p {
  color: var(--text-muted);
  margin-top: var(--space-3);
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 210px;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  border-color: rgba(201, 154, 46, 0.1);
}

.tool-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(201, 154, 46, 0.12), transparent 38%);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.tool-card:hover,
.tool-card:focus-visible {
  text-decoration: none;
  transform: translateY(-3px);
}

.tool-card:hover::before,
.tool-card:focus-visible::before {
  opacity: 1;
}

.tool-card-1,
.tool-card-2 {
  grid-column: span 3;
}
/* ── Dashboard overview ───────────────────────────────────────── */

.dashboard-overview {
  max-width: 1220px;
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(520px, 1fr);
  align-items: stretch;
  gap: var(--space-6);
  padding-top: var(--space-10);
  padding-bottom: var(--space-6);
}

.dashboard-overview-copy {
  border: 1px solid rgba(201, 154, 46, 0.12);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 20% 20%, rgba(201, 154, 46, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.035);
  padding: var(--space-7);
}

.dashboard-overview-copy h1 {
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
  max-width: 560px;
}

.dashboard-overview-copy p:not(.landing-kicker) {
  color: var(--text-secondary);
  margin-top: var(--space-4);
  max-width: 520px;
}

.dashboard-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.dashboard-tool-card {
  min-height: 170px;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dashboard-tool-card:hover,
.dashboard-tool-card:focus-visible {
  text-decoration: none;
  transform: translateY(-2px);
}

.dashboard-tool-card p {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.dashboard-tool-card small {
  color: var(--accent);
  font-weight: 700;
  margin-top: var(--space-4);
}

.events-overview,
.server-join-section,
.raid-list-section {
  max-width: 1220px;
  padding-top: var(--space-6);
}

.events-overview {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-10);
}

.server-join-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.server-join-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.server-join-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.server-join-head h3 {
  font-size: var(--text-base);
}

.server-join-head p,
.server-join-meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.server-join-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.server-join-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.server-join-actions a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.server-join-actions a:hover,
.server-join-actions a:focus-visible {
  color: var(--accent);
  background: var(--accent-muted);
  border-color: var(--accent);
  text-decoration: none;
}


.tool-card-3,
.tool-card-4,
.tool-card-5,
.tool-card-6 {
  grid-column: span 2;
}


.tool-card-index {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  color: rgba(201, 154, 46, 0.3);
  font-size: var(--text-lg);
}

.tool-card h3 {
  position: relative;
  margin: var(--space-8) 0 var(--space-2);
  padding-right: var(--space-8);
  font-size: var(--text-xl);
}

.tool-card p {
  position: relative;
  color: var(--text-muted);
  font-size: var(--text-sm);
  flex: 1;
  max-width: 440px;
}

.tool-card small {
  position: relative;
  color: var(--accent);
  font-weight: 700;
  margin-top: var(--space-5);
}

/* ── Compact Empty State ─────────────────────────────────────── */

.compact-empty {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  color: var(--text-muted);
}

.compact-empty h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.compact-empty p {
  font-size: var(--text-sm);
  max-width: 360px;
  margin: 0 auto;
  line-height: var(--leading-normal);
}

/* ── Grid ─────────────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Page Enter Animation ─────────────────────────────────────── */

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.main > * {
  animation: fadeSlideIn 0.3s ease forwards;
}

.main > *:nth-child(2) { animation-delay: 0.05s; }
.main > *:nth-child(3) { animation-delay: 0.1s; }
.main > *:nth-child(4) { animation-delay: 0.15s; }

/* ── Site Footer ─────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid rgba(201, 154, 46, 0.15);
  background: #07090d;
  padding: var(--space-5) var(--space-6);
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-footer-left {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.site-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.site-footer-kofi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 0;
  background: transparent;
  border: none;
  transition: all var(--transition-normal);
  text-decoration: none;
  color: var(--text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.site-footer-kofi-img {
  width: 16px;
  height: 16px;
  filter: grayscale(1) brightness(0) invert(67%) sepia(80%) saturate(500%) hue-rotate(2deg) brightness(95%);
  transition: filter var(--transition-normal), transform var(--transition-normal);
}

.site-footer-kofi:hover {
  color: var(--accent);
}

.site-footer-kofi:hover .site-footer-kofi-img {
  filter: grayscale(1) brightness(0) invert(75%) sepia(80%) saturate(600%) hue-rotate(2deg) brightness(100%);
}

.site-footer-sep {
  opacity: 0.3;
}

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

@media (max-width: 640px) {
  .site-footer-inner {
    flex-direction: column;
    text-align: center;
  }
}
/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .top-nav {
    grid-template-columns: auto auto auto;
    padding: 0 var(--space-5);
  }
  .top-nav-toggle {
    display: flex;
    order: 3;
  }
  .top-nav-menu {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: rgba(12, 12, 12, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-direction: column;
    align-items: stretch;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .top-nav.mobile-open .top-nav-menu {
    display: flex;
  }
  .top-nav-actions {
    margin-left: auto;
  }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .page-content { padding: var(--space-5) var(--space-6); }
  .page-header { padding: var(--space-5) var(--space-6); }
  .landing-hero-inner { grid-template-columns: 1fr; padding: var(--space-8) 0; }
  .ops-panel-grid { transform: none; }
  .ops-panel:nth-child(2),
  .ops-panel:nth-child(3) { transform: none; }
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-overview { grid-template-columns: 1fr; }
  .server-join-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-card-1,
  .tool-card-2,
  .tool-card-3,
  .tool-card-4,
  .tool-card-5,
  .tool-card-6 { grid-column: span 1; }
}

@media (max-width: 768px) {
  .top-nav {
    padding: 0 var(--space-4);
    gap: var(--space-3);
  }
  .top-brand-text {
    font-size: var(--text-xs);
  }
  .top-user-name {
    display: none;
  }
  .page-header {
    padding: var(--space-4);
  }
  .page-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .page-content {
    padding: var(--space-4);
  }
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .landing-hero {
    min-height: auto;
  }
  .landing-hero-inner {
    width: calc(100% - var(--space-4) * 2);
    grid-template-columns: 1fr;
  }
  .landing-copy h1 {
    font-size: clamp(2.5rem, 14vw, 4.2rem);
  }
  .ops-panel-grid,
  .tools-grid,
  .dashboard-tool-grid,
  .server-join-grid {
    grid-template-columns: 1fr;
  }
  .events-overview {
    align-items: stretch;
    flex-direction: column;
  }
  .ops-panel,
  .ops-panel-primary {
    min-height: 150px;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: var(--text-xl);
  }
  .page-subtitle {
    font-size: var(--text-xs);
  }
  .dash-server-meta {
    display: none;
  }
  .dash-menu-item {
    flex-wrap: wrap;
    padding-left: var(--space-5);
  }
  .dash-menu-desc {
    width: 100%;
    padding-left: 0;
    margin-top: var(--space-1);
  }
  .dash-menu-label {
    min-width: auto;
  }
}
/* ── Guild Activity ──────────────────────────────────────────── */
.guild-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .guild-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.guild-link-modal {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════
   Project Athena – Component Styles
   Ancient Greek strategic command center × modern tactical tech
   ═══════════════════════════════════════════════════════════════ */

/* ── Card ─────────────────────────────────────────────────────── */

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover {
  border-color: var(--border-default);
  box-shadow: 0 0 24px rgba(201, 154, 46, 0.06);
}

a.card:hover,
a.card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(201, 154, 46, 0.12);
  color: inherit;
  text-decoration: none;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.card-description {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* ── Stat Card ────────────────────────────────────────────────── */

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.stat-card:hover {
  border-color: var(--border-default);
  background: var(--bg-elevated);
  box-shadow: 0 0 20px rgba(201, 154, 46, 0.05);
}

.stat-card:hover::after {
  opacity: 1;
}

.stat-card-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-card-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.stat-card-change {
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

.stat-card-change.positive { color: var(--success); }
.stat-card-change.negative { color: var(--danger); }

/* ── Button ───────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}

.button:active {
  transform: scale(0.97);
}

.button-primary {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.button-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-inverse);
  box-shadow: 0 0 16px rgba(201, 154, 46, 0.25);
}

.button-secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.button-secondary:hover {
  background: var(--accent-muted);
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.button-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.button-ghost:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.button-danger {
  background: var(--danger-muted);
  color: var(--crimson-accent);
  border-color: transparent;
}
.button-danger:hover {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 0 16px rgba(167, 58, 43, 0.25);
}

.button-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.button-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

/* ── Badge ────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.badge-active {
  background: var(--accent-muted);
  color: var(--accent);
  box-shadow: 0 0 8px rgba(201, 154, 46, 0.1);
}

.badge-inactive {
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.badge-warning {
  background: var(--warning-muted);
  color: var(--warning);
}

.badge-danger {
  background: var(--danger-muted);
  color: var(--crimson-accent);
  box-shadow: 0 0 8px rgba(167, 58, 43, 0.1);
}

.badge-accent {
  background: var(--accent-muted);
  color: var(--accent);
  box-shadow: 0 0 8px rgba(201, 154, 46, 0.1);
}

/* ── Progress Bar ─────────────────────────────────────────────── */

.progress {
  height: 6px;
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-subtle);
}

.progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width 0.6s var(--ease-out-expo);
  box-shadow: 0 0 8px rgba(201, 154, 46, 0.2);
}

.progress-bar.success { background: var(--success); box-shadow: 0 0 8px rgba(95, 138, 60, 0.2); }
.progress-bar.warning { background: var(--warning); box-shadow: 0 0 8px rgba(201, 154, 46, 0.2); }
.progress-bar.danger { background: var(--danger); box-shadow: 0 0 8px rgba(167, 58, 43, 0.2); }

/* ── Form Elements ────────────────────────────────────────────── */

.input, .textarea, .select {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted), 0 0 12px rgba(201, 154, 46, 0.08);
}

.input::placeholder, .textarea::placeholder {
  color: var(--text-muted);
}

.textarea {
  min-height: 80px;
  resize: vertical;
  line-height: var(--leading-normal);
}

/* File input */
.input[type="file"] {
  padding: var(--space-3);
  cursor: pointer;
}

.input[type="file"]::file-selector-button {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-right: var(--space-3);
  transition: all var(--transition-fast);
}

.input[type="file"]::file-selector-button:hover {
  background: var(--bg-surface-hover);
  border-color: var(--accent);
  color: var(--accent);
}

/* Select */
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7a94' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--space-2) center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5em;
}

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

.form-group {
  margin-bottom: var(--space-4);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Table ────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-xs);
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.table tbody tr:hover {
  background: var(--bg-surface-hover);
}

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

/* ── Empty State ──────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-8);
}

.empty-state-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  color: var(--text-muted);
  opacity: 0.6;
}

.empty-state h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.empty-state p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* ── Dropdown ─────────────────────────────────────────────────── */

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--transition-fast);
}

.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dropdown-item:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

/* ── Tooltip ──────────────────────────────────────────────────── */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  box-shadow: var(--shadow-md);
}

[data-tooltip]:hover::after {
  opacity: 1;
}

/* ── Tabs ──────────────────────────────────────────────────────── */

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: -1px;
}

.tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}

.tab-btn.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Dashboard Layout ─────────────────────────────────────────── */

.dashboard {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
  padding: var(--space-2) var(--space-4);
  gap: var(--space-3);
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Split pane: table left, charts right */
.dashboard-split {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-3);
  min-height: 0;
}

.dashboard-split-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dashboard-split-main .dashboard-table-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dashboard-split-main .dashboard-table-scroll {
  flex: 0 0 auto;
}

.dashboard-split-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}

.dashboard-split-side .chart-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dashboard-split-side .chart-container {
  flex: 1;
  min-height: 0;
  height: auto;
}

@media (max-width: 1280px) {
  .dashboard-split {
    grid-template-columns: 1fr 280px;
  }
}

@media (max-width: 1024px) {
  .dashboard-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .dashboard-split-side {
    flex-direction: row;
  }
  .dashboard-split-side .chart-card {
    flex: 1;
  }
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

@media (max-width: 768px) {
  .dashboard-split-side {
    flex-direction: column;
  }
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-table-scroll {
    overflow-x: auto;
  }
  .dashboard {
    padding: var(--space-2) var(--space-3);
  }
  .dashboard-header > div:last-child {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .dashboard-stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .dashboard .stat-card {
    padding: var(--space-2) var(--space-3);
  }
  .dashboard .stat-card-value {
    font-size: var(--text-lg);
  }
}

.dashboard-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-3);
  flex-shrink: 0;
}

.dashboard-charts-full {
  grid-column: 1 / -1;
}

/* ── Chart Card ───────────────────────────────────────────────── */

.chart-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeSlideUp 0.4s ease forwards;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.chart-card:hover {
  border-color: var(--border-default);
  box-shadow: 0 0 16px rgba(201, 154, 46, 0.04);
}

.chart-card:nth-child(1) { animation-delay: 0.05s; }
.chart-card:nth-child(2) { animation-delay: 0.1s; }
.chart-card:nth-child(3) { animation-delay: 0.15s; }

.chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  flex-shrink: 0;
}

.chart-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.chart-card-subtitle {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.chart-container {
  height: 120px;
  position: relative;
}

.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Dashboard table */
.dashboard-table-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  animation: fadeSlideUp 0.4s ease 0.2s forwards;
  opacity: 0;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dashboard-table-wrap:hover {
  border-color: var(--border-default);
  box-shadow: 0 0 16px rgba(201, 154, 46, 0.04);
}

.dashboard-table-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.dashboard-table-scroll {
  /* Horizontal only. A vertical cap here was a second scrollbar inside a page
     that already scrolls as one — long tables now flow with the document. */
  overflow-x: auto;
}

/* Compact stat card for dashboard */
.dashboard .stat-card {
  padding: var(--space-3) var(--space-4);
  animation: fadeSlideUp 0.3s ease forwards;
  opacity: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dashboard .stat-card:hover {
  border-color: var(--border-default);
  background: var(--bg-elevated);
  box-shadow: 0 0 20px rgba(201, 154, 46, 0.05);
}

.dashboard .stat-card:nth-child(1) { animation-delay: 0s; }
.dashboard .stat-card:nth-child(2) { animation-delay: 0.05s; }
.dashboard .stat-card:nth-child(3) { animation-delay: 0.1s; }
.dashboard .stat-card:nth-child(4) { animation-delay: 0.15s; }

.dashboard .stat-card-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.dashboard .stat-card-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Upload Modal ─────────────────────────────────────────────── */

.upload-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 200;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.upload-modal-overlay.open {
  display: flex;
}

.upload-modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  width: min(520px, 90vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  animation: scaleIn 0.25s ease;
  position: relative;
}

.upload-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
}

.upload-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.upload-modal-close:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

/* ── Animations ───────────────────────────────────────────────── */

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ── Score History Cards ────────────────────────────────────── */

.score-history-card {
  display: flex;
  gap: 0;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.score-history-card:hover {
  border-color: var(--border-default);
  box-shadow: 0 0 16px rgba(201, 154, 46, 0.04);
}

.score-history-card-image {
  flex: 0 0 240px;
  position: relative;
  background: var(--bg-base);
  border-right: 1px solid var(--border-subtle);
  overflow: hidden;
}

.score-history-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.score-history-card-body {
  flex: 1;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.score-history-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: auto;
}

.score-history-card-stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.score-history-card-stat-value {
  font-weight: 600;
  margin-top: 2px;
  color: var(--text-primary);
}

/* ── Table Responsive ───────────────────────────────────────── */

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive .table {
  min-width: 600px;
}

/* ── Empty State Enhanced ───────────────────────────────────── */

.empty-state-enhanced {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-10) var(--space-6);
  min-height: 300px;
}

.empty-state-enhanced .empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  opacity: 0.4;
}

.empty-state-enhanced h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.empty-state-enhanced p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 360px;
  line-height: var(--leading-normal);
}

.empty-state-enhanced .empty-state-action {
  margin-top: var(--space-5);
}

/* ── Responsive Score History ───────────────────────────────── */
@media (max-width: 768px) {
  .score-history-card {
    flex-direction: column;
  }
  .score-history-card-image {
    flex: none;
    height: 180px;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
  .score-history-card-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .score-history-card-stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .score-history-card-body {
    padding: var(--space-3);
  }
}

/* ── Outlier Warning Tooltip ────────────────────────────────── */

.outlier-warn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  min-height: 1.4em;
}

.outlier-warn:hover {
  background: rgba(201, 154, 46, 0.1);
}

.outlier-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  max-width: 400px;
  white-space: normal;
}

.outlier-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--bg-elevated);
}

.outlier-warn:hover .outlier-tip {
  display: block;
}

/* ── Project Athena Home Dashboard ──────────────────────────── */

.athena-hero-bg {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.3) 0%, rgba(12, 12, 12, 0.6) 40%, rgba(12, 12, 12, 0.95) 100%),
    url('/assets/bg.webp') center / cover no-repeat;
  overflow: hidden;
}

.athena-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(201, 154, 46, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.athena-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 600px;
}

.athena-hero-logo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  margin-bottom: var(--space-4);
  filter: drop-shadow(0 0 40px rgba(201, 154, 46, 0.3));
  animation: floatIn 0.42s var(--ease-out-expo) both;
}

@keyframes logoGlow {
  from { filter: drop-shadow(0 0 30px rgba(201, 154, 46, 0.2)); }
  to { filter: drop-shadow(0 0 50px rgba(201, 154, 46, 0.4)); }
}

@keyframes floatIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.athena-hero-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
  animation: floatIn 0.42s var(--ease-out-expo) 0.08s both;
}

.athena-hero-title {
  font-size: clamp(2.4rem, 8vw, 5.2rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--accent-hover);
  line-height: 1;
  margin-bottom: var(--space-3);
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: 0 0 32px rgba(201, 154, 46, 0.26), 0 2px 0 rgba(0, 0, 0, 0.35);
  animation: floatIn 0.42s var(--ease-out-expo) 0.16s both;
}

.athena-hero-sub {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-6);
  animation: floatIn 0.42s var(--ease-out-expo) 0.24s both;
}

.athena-hero-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 420px;
  margin-bottom: var(--space-8);
  animation: floatIn 0.42s var(--ease-out-expo) 0.32s both;
}

.athena-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-3);
  animation: floatIn 0.42s var(--ease-out-expo) 0.4s both;
}


.athena-feature-overview {
  padding: var(--space-12) var(--space-8);
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.96), rgba(12, 12, 12, 0.98)),
    radial-gradient(circle at 50% 0%, rgba(201, 154, 46, 0.10), transparent 34%);
  border-top: 1px solid rgba(201, 154, 46, 0.18);
}

.athena-section-heading {
  max-width: 760px;
  margin: 0 auto var(--space-6);
  text-align: center;
}

.athena-section-heading h2 {
  margin: 0;
  color: var(--accent-hover);
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.athena-feature-shell {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1px;
  border: 1px solid rgba(201, 154, 46, 0.22);
  background: rgba(201, 154, 46, 0.22);
}

.athena-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(201, 154, 46, 0.22);
}

.athena-feature-grid article {
  min-height: 210px;
  padding: var(--space-6);
  background: rgba(12, 12, 12, 0.92);
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}

.athena-feature-grid article::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
}

.athena-feature-grid article:hover {
  background: rgba(20, 20, 20, 0.95);
  transform: translateY(-4px);
  z-index: 1;
}

.athena-feature-grid article:hover::before {
  border-color: rgba(201, 154, 46, 0.4);
  box-shadow: 0 8px 32px rgba(201, 154, 46, 0.08), inset 0 1px 0 rgba(201, 154, 46, 0.1);
}

.athena-feature-grid span {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.athena-feature-grid article:hover span {
  color: var(--accent-hover);
  text-shadow: 0 0 12px rgba(242, 184, 75, 0.3);
}

.athena-feature-grid h3 {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--text-xl);
}

.athena-feature-grid p {
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.athena-support-panel {
  padding: var(--space-6);
  background:
    linear-gradient(180deg, rgba(201, 154, 46, 0.08), rgba(12, 12, 12, 0.94)),
    rgba(12, 12, 12, 0.92);
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.athena-support-panel:hover {
  background:
    linear-gradient(180deg, rgba(201, 154, 46, 0.12), rgba(12, 12, 12, 0.96)),
    rgba(12, 12, 12, 0.95);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(201, 154, 46, 0.08);
}

.athena-support-panel h3 {
  margin: var(--space-2) 0 var(--space-5);
  color: var(--accent-hover);
  font-size: var(--text-2xl);
  line-height: 1.12;
}

.athena-support-panel ul {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.athena-support-panel li {
  display: grid;
  gap: 3px;
  padding-left: var(--space-3);
  border-left: 2px solid rgba(201, 154, 46, 0.34);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.athena-support-panel li:hover {
  border-left-color: var(--accent);
  transform: translateX(4px);
}

.athena-support-panel strong {
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.athena-support-panel span {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}
/* ── Scroll-triggered feature reveal ─────────────────────────── */
.athena-section-heading,
.athena-feature-grid article,
.athena-support-panel {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.athena-section-heading.in-view,
.athena-feature-grid article.in-view,
.athena-support-panel.in-view {
  opacity: 1;
  transform: translateY(0);
}
.athena-feature-grid article:nth-child(2) { transition-delay: 0.1s; }
.athena-feature-grid article:nth-child(3) { transition-delay: 0.2s; }
.athena-feature-grid article:nth-child(4) { transition-delay: 0.3s; }
.athena-support-panel { transition-delay: 0.15s; }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .athena-hero-logo,
  .athena-hero-kicker,
  .athena-hero-title,
  .athena-hero-sub,
  .athena-hero-desc,
  .athena-hero-actions,
  .athena-section-heading,
  .athena-feature-grid article,
  .athena-support-panel {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}
.athena-grid {
  width: 100%;
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--space-8);
}

.athena-grid-cell {
  background: rgba(20, 20, 20, 0.9);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--transition-fast);
}

.athena-grid-cell:hover {
  background: rgba(12, 12, 12, 0.95);
}

.athena-grid-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.athena-grid-value {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
}

.athena-grid-value.white {
  color: var(--text-primary);
}

.athena-grid-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.athena-op-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.athena-op-head {
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(201, 154, 46, 0.04) 0%, transparent 100%);
}

.athena-op-tag {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: var(--space-1);
  display: block;
}

.athena-op-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.athena-op-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.athena-op-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-subtle);
}

.athena-op-meta-cell {
  background: var(--bg-elevated);
  padding: var(--space-3) var(--space-4);
}

.athena-op-meta-lbl {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
}

.athena-op-meta-val {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 2px;
}

.athena-op-progress {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.athena-op-bar {
  height: 4px;
  background: var(--bg-base);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--space-2);
}

.athena-op-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}

.athena-op-actions {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.athena-campaigns,
.athena-network {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.athena-campaigns-head,
.athena-network-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.athena-campaigns-head h3,
.athena-network-head h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

.athena-campaign-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}

.athena-campaign-row:hover {
  background: rgba(201, 154, 46, 0.03);
}

.athena-campaign-row:last-child {
  border-bottom: none;
}

.athena-campaign-date {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.athena-campaign-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.athena-campaign-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.athena-campaign-guild {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.athena-campaign-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.athena-campaign-badge {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.athena-campaign-badge.active {
  color: var(--success);
  background: var(--success-muted);
}

.athena-campaign-badge.scheduled {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
}

.athena-guild-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background var(--transition-fast);
}

.athena-guild-row:last-child {
  border-bottom: none;
}

.athena-guild-row:hover {
  background: rgba(201, 154, 46, 0.03);
}

.athena-guild-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.athena-guild-dot.ready {
  background: var(--success);
  box-shadow: 0 0 6px rgba(95, 138, 60, 0.4);
}

.athena-guild-dot.warn {
  background: var(--warning);
  box-shadow: 0 0 6px rgba(201, 154, 46, 0.4);
}

.athena-guild-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.athena-guild-stats {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.athena-guild-links {
  display: flex;
  gap: var(--space-2);
}

.athena-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.athena-nav-item {
  background: var(--bg-elevated);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.athena-nav-item:hover {
  background: var(--bg-surface-hover);
}

.athena-nav-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.athena-nav-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Create Page Split Layout ─────────────────────────────── */

.create-split {
  display: grid;
  grid-template-columns: minmax(460px, 0.82fr) minmax(720px, 1.18fr);
  gap: var(--space-5);
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
}

.create-preview {
  position: sticky;
  top: calc(64px + var(--space-4));
  min-width: 0;
}

.create-page {
  padding: var(--space-4) var(--space-6) var(--space-8);
}

.create-back-link {
  display: inline-flex;
  margin: 0 auto var(--space-4);
}

.create-preview-card {
  padding: var(--space-4);
  border: 1px solid rgba(201, 154, 46, 0.22);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.88), rgba(12, 12, 12, 0.95)),
    rgba(201, 154, 46, 0.03);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(242, 184, 75, 0.08);
  overflow: hidden;
}

.create-preview-label {
  margin-bottom: var(--space-4);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.create-form {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.create-form form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-content: start;
}

.create-form .create-panel {
  position: relative;
  margin-bottom: 0 !important;
  padding: 0;
  overflow: hidden;
  border-color: rgba(201, 154, 46, 0.16);
  background: rgba(12, 12, 12, 0.86);
  box-shadow: inset 0 1px 0 rgba(242, 184, 75, 0.05);
}

.create-form .create-panel:nth-of-type(4) {
  min-height: 0;
}

.create-form .create-panel:hover {
  border-color: rgba(201, 154, 46, 0.28);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(242, 184, 75, 0.08);
}

.create-panel > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
  min-height: 48px;
  padding: var(--space-3) var(--space-4) !important;
  border-bottom: 1px solid rgba(201, 154, 46, 0.14) !important;
  background: linear-gradient(180deg, rgba(201, 154, 46, 0.055), transparent) !important;
}

.create-panel > div:first-child h3 {
  margin: 0 !important;
  color: var(--text-primary);
  font-size: var(--text-sm) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.create-panel > div:nth-child(2) {
  padding: var(--space-4) !important;
}

.create-panel .form-group {
  margin-bottom: 0 !important;
}

.create-panel .label {
  margin-bottom: var(--space-2) !important;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.create-panel .input {
  min-height: 38px;
  padding: var(--space-2) var(--space-3) !important;
  font-size: var(--text-sm) !important;
  background: rgba(12, 12, 12, 0.76);
}

.create-form form > .create-panel:first-of-type > div:nth-child(2) > div:first-child {
  grid-template-columns: minmax(110px, 0.8fr) minmax(120px, 0.8fr) !important;
  gap: var(--space-3) !important;
}

.create-form form > .create-panel:first-of-type > div:nth-child(2) > div:first-child > div:nth-child(3) {
  grid-column: 1 / -1 !important;
}

.create-form form > .create-panel:first-of-type > div:nth-child(2) > div:nth-child(2) {
  margin-top: var(--space-3) !important;
}

.create-form form > .create-panel:nth-of-type(2) > div:nth-child(2) > div {
  grid-template-columns: 1fr !important;
  gap: var(--space-3) !important;
}

.create-form form > .create-panel:nth-of-type(2) label[style] {
  padding: 5px 10px !important;
  gap: 6px !important;
  border-color: rgba(201, 154, 46, 0.16) !important;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-secondary);
  font-size: var(--text-xs) !important;
}

.create-form form > .create-panel:nth-of-type(2) input[type="checkbox"] {
  width: 12px !important;
  height: 12px !important;
}

.create-form form > .create-panel:nth-of-type(3) > div:nth-child(2) > div {
  grid-template-columns: 1fr !important;
  gap: var(--space-2) !important;
}

.create-form .template-button {
  min-height: 54px !important;
  padding: var(--space-2) var(--space-3) !important;
  display: grid;
  align-content: center;
}

.create-form .template-button strong {
  font-size: var(--text-sm) !important;
  line-height: 1.25;
}

.create-form .template-button small {
  font-size: var(--text-xs) !important;
}

.create-help-text {
  margin: var(--space-3) 0 0 !important;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.create-actions {
  grid-column: 1 / -1;
  position: sticky;
  bottom: 0;
  padding-bottom: var(--space-8) !important;
  margin-top: 0;
  padding-top: var(--space-3);
  background: linear-gradient(180deg, transparent, rgba(12, 12, 12, 0.92) 28%);
}

/* Create Page Revamp */
.create-page {
  width: min(1520px, calc(100% - var(--space-6) * 2));
  min-height: calc(100vh - 64px);
  margin: 0 auto;
  padding: var(--space-5) 0 var(--space-8);
}

.create-back-link {
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  border: 1px solid rgba(201, 154, 46, 0.12);
  background: rgba(12, 12, 12, 0.44);
}

.create-split {
  grid-template-columns: minmax(440px, 0.78fr) minmax(740px, 1.22fr);
  gap: var(--space-5);
  max-width: none;
}

.create-preview-card,
.create-panel {
  border: 1px solid rgba(201, 154, 46, 0.18) !important;
  border-radius: var(--radius-md) !important;
  background: rgba(12, 12, 12, 0.86) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.create-preview-card {
  padding: var(--space-5);
}

.create-preview-label {
  margin-bottom: var(--space-3);
  color: var(--accent);
}

.create-form form {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--space-4);
}

.create-panel {
  margin: 0 !important;
}

.create-panel > div:first-child {
  min-height: 44px;
  padding: var(--space-3) var(--space-4) !important;
  border-bottom: 1px solid rgba(201, 154, 46, 0.16) !important;
  background: rgba(255, 255, 255, 0.018) !important;
}

.create-panel > div:first-child h3 {
  font-size: 0.82rem !important;
  letter-spacing: 0.08em;
}

.create-panel > div:nth-child(2) {
  padding: var(--space-4) !important;
}

.create-panel-schedule {
  grid-column: 1;
}

.create-panel-delivery {
  grid-column: 2;
}

.create-panel-templates {
  grid-column: 1;
}

.create-panel-composition {
  grid-column: 2;
  grid-row: span 2;
}

.create-panel-schedule > div:nth-child(2) > div:first-child {
  display: grid !important;
  grid-template-columns: minmax(110px, 0.8fr) minmax(120px, 0.8fr) !important;
  gap: var(--space-3) !important;
}

.create-panel-schedule > div:nth-child(2) > div:first-child > div:nth-child(3) {
  grid-column: 1 / -1 !important;
}

.create-panel-schedule .input,
.create-panel-delivery .input {
  max-width: 100%;
}

.create-panel-schedule .day-checks {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.create-panel-delivery > div:nth-child(2) > div {
  grid-template-columns: 1fr !important;
  gap: var(--space-3) !important;
}

.create-panel-delivery label[style] {
  border-color: rgba(201, 154, 46, 0.14) !important;
  background: rgba(255, 255, 255, 0.04);
}

.create-panel-templates > div:nth-child(2) > div {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--space-2) !important;
}

.create-panel-templates .template-button {
  min-height: 48px !important;
  padding: var(--space-2) var(--space-3) !important;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  text-align: left;
  border-width: 1px;
  background: rgba(255, 255, 255, 0.035);
}

.create-panel-templates .template-button strong {
  margin: 0;
}

.create-panel-templates .template-button small {
  justify-self: end;
  color: var(--accent);
}

.create-panel-composition > div:nth-child(2) {
  max-height: 430px;
  overflow: auto;
}

.create-panel-composition #role-table {
  display: grid;
  gap: var(--space-2);
}

.create-panel-composition #role-table > .form-group {
  padding: var(--space-3) !important;
  border: 1px solid rgba(201, 154, 46, 0.12) !important;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
}

.create-panel-composition .role-icon,
.create-panel-composition .role-class-icon {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px;
  object-fit: contain;
}

.create-panel-composition .role-emoji {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
}

.create-panel-composition input[type="range"] {
  height: 6px !important;
}

.role-emote-button {
  min-width: 74px;
  padding: var(--space-1) var(--space-2) !important;
  font-size: var(--text-xs) !important;
}

.role-emote-modal {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(6, 6, 6, 0.72);
  backdrop-filter: blur(10px);
}

.role-emote-modal[hidden] {
  display: none !important;
}

.role-emote-dialog {
  width: min(360px, 100%);
  border: 1px solid rgba(201, 154, 46, 0.24);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.role-emote-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(201, 154, 46, 0.16);
}

.role-emote-close {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--text-lg);
}

.role-emote-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  padding: var(--space-4);
  max-height: min(58vh, 460px);
  overflow: auto;
}

.role-emote-option {
  min-height: 42px;
  border: 1px solid rgba(201, 154, 46, 0.14);
  border-radius: var(--radius-md);
  background: rgba(12, 12, 12, 0.72);
  cursor: pointer;
  font-size: var(--text-xl);
}

.role-emote-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: var(--space-3) var(--space-4) 0;
}

.role-emote-tabs button {
  min-height: 34px;
  border: 1px solid rgba(201, 154, 46, 0.16);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.role-emote-tabs button.active {
  border-color: var(--accent);
  background: rgba(201, 154, 46, 0.12);
  color: var(--accent);
}

.role-class-option {
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 8px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text);
  display: grid;
}

.role-class-option img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.role-class-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-emote-option:hover,
.role-emote-option.active {
  border-color: var(--accent);
  background: rgba(201, 154, 46, 0.12);
}

.create-actions {
  position: static;
  display: flex !important;
  justify-content: flex-end !important;
  gap: var(--space-3) !important;
  padding: var(--space-1) 0 0 !important;
  background: transparent;
}

/* ── Discord Message Preview ──────────────────────────────── */

.discord-message {
  display: flex;
  gap: 16px;
  padding: 0;
  font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #dbdee1;
  font-size: 1rem;
  line-height: 1.375;
  width: 100%;
}

.discord-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-top: 2px;
}

.discord-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}

.discord-message-content {
  flex: 1;
  min-width: 0;
}

.discord-message-header {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.discord-message-author {
  color: #f2f3f5;
  font-weight: 600;
  font-size: 1rem;
}

.discord-message-bot-tag {
  background: #5865f2;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  text-transform: uppercase;
  line-height: 1.3;
}

.discord-message-timestamp {
  color: #949ba4;
  font-size: 0.75rem;
  font-weight: 400;
}

.discord-message-mention {
  color: #c9dafb;
  background: rgba(201, 154, 46, 0.3);
  padding: 0 2px;
  border-radius: 3px;
  font-size: 0.95rem;
  margin-top: 2px;
  display: inline-block;
}

/* ── Embed ─────────────────────────────────────────────────── */

.discord-embed {
  display: flex;
  background: #2b2d31;
  border-radius: 4px;
  margin-top: 4px;
  overflow: hidden;
  width: min(100%, 560px);
  max-width: none;
}

.discord-embed-color-bar {
  width: 4px;
  flex-shrink: 0;
  background: #ed4245;
}

.discord-embed-body {
  flex: 1;
  padding: 12px 14px 14px;
  min-width: 0;
}

.discord-embed-title {
  color: #00a8fc;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
}

.discord-embed-title:hover {
  text-decoration: underline;
}

.discord-embed-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 10px;
}

.discord-embed-field {
  min-width: 0;
}

.discord-embed-field-name {
  color: #dbdee1;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.discord-embed-field-value {
  color: #dbdee1;
  font-size: 0.85rem;
  font-weight: 400;
}

.discord-embed-field-spacer {
  grid-column: span 1;
}

.discord-embed-divider {
  border: none;
  border-top: 1px solid #3f4147;
  margin: 8px 0;
}

.discord-embed-footer-bar {
  border-top: 1px solid #3f4147;
  margin-top: 8px;
  padding-top: 6px;
}

.discord-embed-footer {
  color: #949ba4;
  font-size: 0.75rem;
}

.discord-muted {
  color: #949ba4;
}

/* ── Discord Buttons ───────────────────────────────────────── */

.discord-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.discord-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  cursor: default;
  line-height: 1.4;
}

.discord-button-primary {
  background: #5865f2;
  color: #fff;
}

.discord-button-secondary {
  background: #4e5058;
  color: #dbdee1;
}

.discord-button-danger {
  background: #ed4245;
  color: #fff;
}

.discord-emoji {
  display: inline-block;
  vertical-align: middle;
  margin: 0 2px;
}

.discord-emoji-text {
  display: inline-block;
  vertical-align: middle;
  margin: 0 2px;
}

.discord-button .discord-emoji {
  width: 14px;
  height: 14px;
}

/* Discord Select Menu */
.discord-select-wrapper {
  margin-top: 8px;
}

.discord-select {
  width: 100%;
  padding: 10px 12px;
  background: #1e1f22;
  border: 1px solid #3f4147;
  border-radius: 4px;
  color: #dbdee1;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23949ba4' d='M6 8.825a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 0 1 .708-.708L6 7.617l3.646-3.646a.5.5 0 0 1 .708.708l-4 4A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

.discord-select:focus {
  outline: none;
  border-color: #5865f2;
}

.discord-buttons-inline {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* ── Create Page Background ───────────────────────────────── */

.create-page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.88) 0%, rgba(12, 12, 12, 0.95) 100%),
    url('/assets/wallpaper2.webp') center/cover no-repeat;
}

/* ── Day Checkboxes (Pill Style) ──────────────────────────── */

.day-checks {
  display: grid;
  grid-template-columns: repeat(7, minmax(38px, max-content));
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.day-check {
  position: relative;
}

.day-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.day-check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(12, 12, 12, 0.62);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.day-check-box:hover {
  border-color: var(--accent);
  color: var(--text);
}

.day-check input:checked + .day-check-box {
  border-color: var(--accent);
  background: rgba(201, 154, 46, 0.12);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(201, 154, 46, 0.16);
}

.day-check input:focus-visible + .day-check-box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Template Buttons ─────────────────────────────────────── */

.template-button {
  padding: 16px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--text);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 72px;
}

.template-button:hover {
  border-color: var(--accent);
  background: rgba(201, 154, 46, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.template-button.active {
  border-color: var(--accent);
  background: rgba(201, 154, 46, 0.12);
  box-shadow: 0 0 16px rgba(201, 154, 46, 0.2), inset 0 0 0 1px rgba(201, 154, 46, 0.3);
}

.template-button strong {
  display: block;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.template-button.active strong {
  color: var(--accent);
}

.template-button small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 900px) {
  .create-split {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .create-form form {
    grid-template-columns: 1fr;
  }

  .create-panel-schedule,
  .create-panel-delivery,
  .create-panel-templates,
  .create-panel-composition {
    grid-column: auto;
    grid-row: auto;
  }

  .create-preview {
    position: static;
    order: -1;
  }

  .create-preview-card {
    padding: var(--space-4);
  }

  .create-form form > .create-panel:first-of-type > div:nth-child(2) > div:first-child,
  .create-form form > .create-panel:nth-of-type(2) > div:nth-child(2) > div {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .create-page {
    padding-inline: var(--space-3);
  }

  .create-panel > div:first-child,
  .create-panel > div:nth-child(2) {
    padding: var(--space-3) !important;
  }

  .create-form form > .create-panel:nth-of-type(3) > div:nth-child(2) > div {
    grid-template-columns: 1fr !important;
  }

  .discord-message {
    gap: 10px;
    font-size: 0.92rem;
  }

  .discord-avatar,
  .discord-avatar-img {
    width: 32px;
    height: 32px;
  }

  .discord-embed-fields {
    grid-template-columns: 1fr;
  }

  .create-actions {
    justify-content: stretch !important;
  }

  .create-actions .button {
    flex: 1;
  }
}

@media (max-width: 900px) {
  .athena-feature-shell,
  .athena-feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .athena-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .athena-hero-logo {
    width: 120px;
    height: 120px;
  }

  .athena-op-meta {
    grid-template-columns: repeat(2, 1fr);
  }

  .athena-campaign-row {
    grid-template-columns: 60px 1fr auto;
  }

  .athena-campaign-time {
    display: none;
  }

  .athena-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Event Type Picker ─────────────────────────────────────── */

.event-type-page-body {
  overflow: hidden;
}

.event-type-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  overflow: hidden;
  padding: var(--space-2) var(--space-4);
}

.event-type-back-link {
  align-self: flex-start;
  color: #f6c453;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid rgba(246, 196, 83, 0.45);
  border-radius: 8px;
  background: rgba(246, 196, 83, 0.12);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}

.event-type-back-link:hover {
  color: #ffe29a;
  border-color: rgba(246, 196, 83, 0.72);
  background: rgba(246, 196, 83, 0.18);
}

.event-type-header {
  text-align: center;
  margin: var(--space-1) 0 var(--space-2);
  flex-shrink: 0;
}

.event-type-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.event-type-sub {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.event-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  gap: var(--space-3);
  flex: 1 1 0;
  min-height: 0;
}

/* ── Card — dark by default, lights up on hover ─────────────── */

.event-type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 0;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.event-type-card:hover {
  border-color: var(--accent);
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--accent);
}

.event-type-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
  outline: none;
}

/* Image — starts dark, brightens on hover */
.event-type-card-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.event-type-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 0;
  max-height: none;
  filter: brightness(0.35) saturate(0.6);
  transition: filter 0.45s ease, transform 0.45s ease;
}

.event-type-card:hover .event-type-card-image img {
  filter: brightness(0.7) saturate(1.1);
  transform: scale(1.05);
}

/* Bottom text area */
.event-type-card-bottom {
  position: relative;
  z-index: 1;
  padding: var(--space-5) var(--space-5) var(--space-6);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.5) 60%,
    transparent 100%
  );
  transition: background 0.4s ease;
}

.event-type-card:hover .event-type-card-bottom {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.3) 70%,
    transparent 100%
  );
}

.event-type-card-title {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 700;
  color: #fff;
  transition: color 0.3s ease;
}

.event-type-card:hover .event-type-card-title {
  color: var(--accent);
}

.event-type-card-desc {
  margin: 0;
  margin-top: 0;
  max-height: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.35s ease, margin-top 0.35s ease;
}

.event-type-card:hover .event-type-card-desc {
  max-height: 80px;
  opacity: 1;
  margin-top: var(--space-2);
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 900px) {
  .event-type-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .event-type-page {
    padding: var(--space-3);
    overflow-y: auto;
  }

  /* Always show title color and desc on mobile */
  .event-type-card-title {
    color: var(--accent);
  }

  .event-type-card-desc {
    max-height: 80px;
    opacity: 1;
    margin-top: var(--space-2);
  }

  .event-type-card-image img {
    filter: brightness(0.55) saturate(0.9);
  }
}

/* Create Page Final Workspace Revamp */
.create-page-bg {
  background:
    linear-gradient(180deg, rgba(8, 11, 16, 0.86), rgba(8, 11, 16, 0.97)),
    radial-gradient(circle at 28% 12%, rgba(201, 154, 46, 0.11), transparent 24%),
    radial-gradient(circle at 74% 24%, rgba(65, 182, 255, 0.06), transparent 26%),
    url('/assets/wallpaper2.webp') center / cover no-repeat;
}

.create-page {
  width: min(1240px, calc(100% - 48px));
  padding: 18px 0 36px;
}

.create-back-link {
  height: 32px;
  padding: 0 12px;
  margin-bottom: 16px;
  color: #9aa4b2;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(10, 15, 22, 0.68);
}

.create-back-link:hover {
  color: #f5f7fb;
  background: rgba(255, 255, 255, 0.055);
}

.create-split {
  grid-template-columns: minmax(380px, 440px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.create-preview {
  top: 84px;
}

.create-preview-card {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  background: rgba(9, 13, 19, 0.9) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.create-preview-label {
  margin-bottom: 18px;
  color: var(--accent-hover);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

.create-preview .discord-message {
  gap: 14px;
}

.create-preview .discord-avatar,
.create-preview .discord-avatar-img {
  width: 34px;
  height: 34px;
}

.create-preview .discord-embed {
  width: 100%;
  background: #2b2d31;
}

.create-preview .discord-embed-body {
  padding: 14px;
}

.create-preview #preview-groups .role-icon,
.create-preview #preview-groups .discord-emoji {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain;
}

.create-preview #preview-groups .role-emoji {
  width: 16px;
  height: 16px;
  font-size: 14px;
}

.create-form form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 16px;
}

.create-panel {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  background: rgba(12, 12, 12, 0.88) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  overflow: hidden;
}

.create-panel:hover {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.create-panel > div:first-child {
  min-height: 44px;
  padding: 0 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

.create-panel > div:first-child h3 {
  color: #eef2f8;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
}

.create-panel > div:nth-child(2) {
  padding: 16px !important;
}

.create-panel .label {
  margin-bottom: 7px !important;
  color: #9aa4b2;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.create-panel .input {
  min-height: 38px;
  color: #f7f9fc;
  border-color: rgba(201, 154, 46, 0.28);
  border-radius: 7px;
  background: rgba(5, 8, 13, 0.72);
}

.create-panel .input:focus {
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 3px rgba(242, 184, 75, 0.11);
}

.create-panel-schedule {
  grid-column: 1;
}

.create-panel-delivery {
  grid-column: 2;
}

.create-panel-templates {
  grid-column: 1;
}

.create-panel-composition {
  grid-column: 2;
  grid-row: 2 / span 2;
}

.create-panel-schedule > div:nth-child(2) > div:first-child {
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) !important;
  gap: 12px !important;
}

.create-panel-schedule > div:nth-child(2) > div:first-child > div:nth-child(3) {
  grid-column: 1 / -1 !important;
}

.create-panel-schedule .day-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.day-check-box {
  min-width: 40px;
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(5, 8, 13, 0.46);
  color: #d8dee8;
}

.day-check input:checked + .day-check-box {
  border-color: rgba(242, 184, 75, 0.46);
  background: rgba(242, 184, 75, 0.13);
  color: var(--accent-hover);
}

.create-panel-delivery > div:nth-child(2) > div {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.create-panel-delivery label[style] {
  border-color: transparent !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.04);
}

.create-panel-templates > div:nth-child(2) > div {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.create-panel-templates .template-button {
  min-height: 48px !important;
  padding: 0 12px !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  transform: none;
  box-shadow: none;
}

.create-panel-templates .template-button:hover {
  border-color: rgba(242, 184, 75, 0.28);
  background: rgba(255, 255, 255, 0.055);
  transform: none;
}

.create-panel-templates .template-button.active {
  border-color: rgba(242, 184, 75, 0.5);
  background: rgba(242, 184, 75, 0.105);
  box-shadow: inset 0 0 0 1px rgba(242, 184, 75, 0.08);
}

.create-panel-templates .template-button strong {
  margin: 0;
  font-size: 13px !important;
}

.create-panel-templates .template-button small {
  color: var(--accent-hover);
  font-size: 12px !important;
}

.create-panel-composition > div:nth-child(2) {
  max-height: 360px;
  overflow: auto;
}

.create-panel-composition #role-table {
  display: grid;
  gap: 8px;
}

.create-panel-composition #role-table > .form-group {
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
}

.create-panel-composition #role-table > .form-group:hover {
  border-color: rgba(242, 184, 75, 0.25) !important;
}

.create-panel-composition .role-icon,
.create-panel-composition .role-class-icon {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px;
  object-fit: contain;
}

.create-panel-composition .role-emoji {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.create-panel-composition output {
  color: var(--accent-hover) !important;
}

.create-help-text {
  max-width: 300px;
  color: #798392;
  line-height: 1.45;
}

.role-emote-button {
  min-width: 72px;
  border-color: rgba(242, 184, 75, 0.28);
  color: var(--accent-hover);
}

.role-emote-modal {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 6, 6, 0.74);
  backdrop-filter: blur(10px);
}

.role-emote-modal[hidden] {
  display: none !important;
}

.role-emote-dialog {
  width: min(360px, 100%);
  border: 1px solid rgba(242, 184, 75, 0.26);
  border-radius: 12px;
  background: #0d1117;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.role-emote-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.role-emote-close {
  border: 0;
  background: transparent;
  color: #9aa4b2;
  cursor: pointer;
  font-size: 18px;
}

.role-emote-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 14px;
}

.role-emote-option {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: rgba(5, 8, 13, 0.72);
  cursor: pointer;
  font-size: 20px;
}

.role-emote-option:hover,
.role-emote-option.active {
  border-color: rgba(242, 184, 75, 0.5);
  background: rgba(242, 184, 75, 0.12);
}

.role-emote-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 12px 14px 0;
}

.role-emote-tabs button {
  min-height: 34px;
  border: 1px solid rgba(242, 184, 75, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: #9aa4b2;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.role-emote-tabs button.active {
  border-color: rgba(242, 184, 75, 0.52);
  background: rgba(242, 184, 75, 0.12);
  color: var(--accent-hover);
}

.role-emote-grid {
  max-height: min(58vh, 460px);
  overflow: auto;
}

.role-emote-search {
  padding: 10px 14px 0;
}

.role-emote-search input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(242, 184, 75, 0.18);
  border-radius: 8px;
  background: rgba(5, 8, 13, 0.72);
  color: #e9edf4;
  outline: 0;
  padding: 0 11px;
}

.role-emote-search input:focus {
  border-color: rgba(242, 184, 75, 0.52);
  box-shadow: 0 0 0 3px rgba(242, 184, 75, 0.1);
}

.role-emote-grid-classes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.role-emoji-section {
  grid-column: 1 / -1;
}

.role-emoji-section h4 {
  margin: 6px 0 8px;
  color: #9aa4b2;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.role-emoji-section-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.role-emote-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px;
  color: #9aa4b2;
  text-align: center;
}

.role-class-option {
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: #e9edf4;
  display: grid;
}

.role-class-option img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.role-class-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-actions {
  position: static;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 4px 0 0 !important;
  background: transparent;
}

.create-actions .button {
  min-height: 42px;
  border-radius: 8px;
  padding-inline: 18px;
}

@media (max-width: 1240px) {
  .create-page {
    width: min(100% - 32px, 1100px);
  }

  .create-split {
    grid-template-columns: 1fr;
  }

  .create-preview {
    position: static;
  }
}

/* Rebuilt Create Workspace */
.create-workspace {
  width: min(1260px, calc(100% - 48px));
  margin: 0 auto;
  padding: 22px 0 38px;
}

.create-workspace-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.create-workspace-head p {
  margin: 0 0 2px;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.create-workspace-head h1 {
  margin: 0;
  color: #f5f7fb;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0;
}

.create-workspace .create-back-link {
  order: -1;
  flex: 0 0 auto;
}

.create-builder {
  display: grid;
  grid-template-columns: minmax(390px, 440px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.create-preview-stage,
.create-config-board {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(9, 13, 19, 0.9);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.create-preview-stage {
  position: sticky;
  top: 82px;
  padding: 18px;
}

.create-preview-kicker {
  margin-bottom: 16px;
  color: var(--accent-hover);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.create-config-board {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.create-block {
  min-width: 0;
  background: rgba(12, 12, 12, 0.94);
}

.create-block-head {
  min-height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.create-block-head span {
  color: #eef2f8;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.create-block-schedule,
.create-block-templates {
  grid-column: 1;
}

.create-block-delivery {
  grid-column: 2;
}

.create-block-composition {
  grid-column: 2;
  grid-row: 2 / span 2;
}

.create-field-grid,
.create-day-row,
.create-delivery-body,
.create-template-list,
.create-role-table,
.create-block-composition .create-help-text {
  padding: 16px;
}

.create-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 0;
}

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

.create-workspace .form-group {
  margin: 0;
}

.create-workspace .label {
  margin-bottom: 7px;
  color: #9aa4b2;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.create-workspace .input {
  min-height: 39px;
  border-color: rgba(201, 154, 46, 0.28);
  border-radius: 8px;
  background: rgba(5, 8, 13, 0.72);
  color: #f7f9fc;
}

.create-day-row {
  padding-top: 14px;
}

.create-workspace .day-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.create-workspace .day-check-box {
  min-width: 42px;
  min-height: 31px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(5, 8, 13, 0.52);
  color: #d8dee8;
}

.create-workspace .day-check input:checked + .day-check-box {
  border-color: rgba(242, 184, 75, 0.48);
  background: rgba(242, 184, 75, 0.13);
  color: var(--accent-hover);
}

.create-delivery-body > div {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.create-delivery-body label[style] {
  border-color: transparent !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.045);
}

.create-template-list {
  display: grid;
  gap: 8px;
}

.create-template-list .template-button {
  min-height: 50px !important;
  padding: 0 12px !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.create-template-list .template-button:hover {
  border-color: rgba(242, 184, 75, 0.28);
  background: rgba(255, 255, 255, 0.055);
  transform: none;
}

.create-template-list .template-button.active {
  border-color: rgba(242, 184, 75, 0.5);
  background: rgba(242, 184, 75, 0.105);
}

.create-template-list .template-button strong {
  margin: 0;
  font-size: 13px !important;
}

.create-template-list .template-button small {
  color: var(--accent-hover);
  font-size: 12px !important;
}

.create-role-table {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}

.create-role-table > .form-group {
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
}

.create-role-table .role-icon,
.create-role-table .role-class-icon {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px;
  object-fit: contain;
}

.create-role-table .role-emoji {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.create-role-table output {
  color: var(--accent-hover) !important;
}

.create-block-composition .create-help-text {
  margin: 0 !important;
  padding-top: 0;
  color: #798392;
  line-height: 1.45;
}

.create-workspace .create-actions {
  grid-column: 1 / -1;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 16px !important;
  background: rgba(12, 12, 12, 0.94);
}

.create-workspace .create-actions .button {
  min-height: 42px;
  border-radius: 8px;
  padding-inline: 18px;
}

.create-preview-stage #preview-groups .role-icon,
.create-preview-stage #preview-groups .discord-emoji {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain;
}

.create-preview-stage #preview-groups .role-emoji {
  width: 16px;
  height: 16px;
  font-size: 14px;
}

@media (max-width: 1180px) {
  .create-workspace {
    width: min(100% - 32px, 920px);
  }

  .create-builder,
  .create-config-board {
    grid-template-columns: 1fr;
  }

  .create-preview-stage {
    position: static;
  }

  .create-block-schedule,
  .create-block-delivery,
  .create-block-templates,
  .create-block-composition {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Node War new create surface */
.nodewar-new-body {
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.58) 0%, rgba(12, 12, 12, 0.46) 42%, rgba(12, 12, 12, 0.72) 100%),
    url('/assets/nodewar.webp') center / cover fixed no-repeat,
    #090b10;
}

.nodewar-new-body .main {
  padding: 0;
}

.nwnew-shell {
  min-height: calc(100vh - 65px);
  padding: 18px;
  color: #e9edf4;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 38%),
    rgba(12, 12, 12, 0.32);
}

.nwnew-topbar {
  width: min(100%, 1540px);
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.nwnew-back {
  min-width: 82px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: #b8c0cc;
  font-size: 13px;
  font-weight: 700;
}

.nwnew-back:hover {
  border-color: rgba(214, 161, 48, 0.46);
  color: #f3c157;
  text-decoration: none;
}

.nwnew-title span,
.nwnew-preview-toolbar span,
.nwnew-field > span,
.nwnew-days > span,
.nwnew-capacity-strip span {
  color: #8f98a7;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nwnew-title h1 {
  margin: 2px 0 0;
  color: #f8fafc;
  font-size: 28px;
  line-height: 1;
}

.nwnew-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.nwnew-actions .button {
  min-height: 40px;
  border-radius: 8px;
  padding-inline: 16px;
}

.nwnew-actions .button-ghost {
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #b8c0cc;
}

.nwnew-actions .button-ghost:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
}

.nwnew-grid {
  width: min(100%, 1540px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(420px, 1.08fr) minmax(430px, 1.08fr);
  gap: 14px;
  align-items: start;
}

.nwnew-column {
  min-width: 0;
}

.nwnew-plan,
.nwnew-compose {
  display: grid;
  gap: 14px;
}

.nwnew-panel,
.nwnew-preview {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0;
  background: rgba(12, 12, 12, 0.66);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  overflow: hidden;
}

.nwnew-panel-head {
  min-height: 52px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.04);
}

.nwnew-panel-head > span:not(.nwnew-tier-chevron) {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(214, 161, 48, 0.12);
  color: #d6a130;
  font-size: 0.75rem;
  font-weight: 900;
}

.nwnew-panel-head strong {
  flex: 1;
  color: #f4f7fb;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nwnew-panel-head #add-role {
  min-height: 32px;
  border-color: rgba(214, 161, 48, 0.5);
  border-radius: 8px;
  color: #f1bd51;
}

.nwnew-fields {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.nwnew-field {
  margin: 0;
  display: grid;
  gap: 7px;
}

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

.nwnew-shell .input {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(5, 8, 12, 0.82);
  color: #f8fafc;
  box-shadow: none;
}

.nwnew-shell .input:focus {
  border-color: rgba(214, 161, 48, 0.65);
  box-shadow: 0 0 0 3px rgba(214, 161, 48, 0.12);
}

.nwnew-days {
  padding: 0 16px 16px;
  display: grid;
  gap: 9px;
}

.nwnew-shell .day-checks {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.nwnew-shell .day-check-box {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: #dce2eb;
  font-size: 12px;
  font-weight: 800;
}

.nwnew-shell .day-check input:checked + .day-check-box {
  border-color: rgba(214, 161, 48, 0.6);
  background: rgba(214, 161, 48, 0.14);
  color: #f1bd51;
}

.nwnew-template-stack {
  padding: 14px;
  display: grid;
  gap: 9px;
}

.nwnew-template-stack .template-button {
  min-height: 54px !important;
  padding: 0 14px !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
  transform: none;
}

.nwnew-template-stack .template-button span {
  color: #edf1f6;
  font-size: 13px;
  font-weight: 800;
}

.nwnew-template-stack .template-button strong {
  width: 34px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: #f1bd51;
  font-size: 12px;
}

.nwnew-template-stack .template-button:hover,
.nwnew-template-stack .template-button.active {
  border-color: rgba(214, 161, 48, 0.58);
  background: rgba(214, 161, 48, 0.11);
  box-shadow: none;
}

.nwnew-delivery {
  padding: 14px 14px 18px;
}

.nwnew-delivery > div {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.nwnew-delivery .form-group {
  margin: 0 !important;
}

.nwnew-delivery .label {
  margin-bottom: 7px !important;
  color: #8f98a7 !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nwnew-delivery label[style] {
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.nwnew-role-menu {
  position: relative;
}

.nwnew-role-menu summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(5, 8, 12, 0.82);
  color: #f8fafc;
  cursor: pointer;
  list-style: none;
}

.nwnew-role-menu summary::-webkit-details-marker {
  display: none;
}

.nwnew-role-menu summary::after {
  content: "▾";
  color: #8f98a7;
  font-size: 12px;
}

.nwnew-role-menu[open] summary {
  border-color: rgba(214, 161, 48, 0.65);
  box-shadow: 0 0 0 3px rgba(214, 161, 48, 0.12);
}

.nwnew-role-options {
  position: static;
  z-index: 30;
  max-height: 220px;
  margin-top: 6px;
  padding: 6px;
  overflow: auto;
  border: 1px solid rgba(214, 161, 48, 0.28);
  border-radius: 8px;
  background: rgba(8, 12, 18, 0.98);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
}

.nwnew-role-option {
  display: flex;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 6px;
  color: #dce2eb;
  cursor: pointer;
}

.nwnew-role-option:hover {
  background: rgba(214, 161, 48, 0.1);
}

.nwnew-role-option input {
  accent-color: #d6a130;
}

.nwnew-role-empty {
  margin: 0;
  padding: 8px;
  color: #8f98a7;
  font-size: 12px;
}

.nwnew-composition-panel {
  min-height: 720px;
}

.nwnew-capacity-strip {
  margin: 14px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.035);
}

.nwnew-capacity-strip strong {
  display: block;
  color: #f1bd51;
  font-size: 28px;
  line-height: 1;
}

.nwnew-capacity-strip p {
  margin: 0;
  color: #9aa3b2;
  font-size: 12px;
  line-height: 1.4;
}

.nwnew-role-table {
  padding: 0 14px 14px;
  display: grid;
  gap: 10px;
  max-height: 590px;
  overflow: auto;
}

.nwnew-role-table > .form-group {
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.035);
}

.nwnew-role-table .role-icon,
.nwnew-role-table .role-class-icon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px;
  object-fit: contain;
}

.nwnew-role-table .role-emoji {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nwnew-role-table output {
  color: #f1bd51 !important;
  font-weight: 900 !important;
}

.nwnew-role-table input[type="range"] {
  accent-color: #d6a130;
}

.nwnew-role-table .role-emote-button,
.nwnew-role-table .remove-role {
  min-height: 34px;
  border-radius: 8px;
}

.nwnew-preview {
  position: sticky;
  top: 82px;
  padding: 0;
}

.nwnew-preview-toolbar {
  min-height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.nwnew-preview-toolbar strong {
  display: block;
  margin-top: 2px;
  color: #f8fafc;
  font-size: 15px;
}

.nwnew-live-dot {
  padding: 5px 9px;
  border: 1px solid rgba(35, 197, 94, 0.36);
  border-radius: 999px;
  background: rgba(35, 197, 94, 0.12);
  color: #86efac !important;
  font-size: 0.75rem !important;
}

.nwnew-preview .discord-message {
  padding: 18px;
}

.nwnew-preview .discord-embed {
  width: 100%;
}

.nwnew-preview .discord-embed-fields {
  gap: 8px 12px;
}

.nwnew-preview .discord-roster-fields {
  margin-top: 14px;
}

.nwnew-preview .discord-buttons {
  margin-top: 8px;
}

.nwnew-preview #preview-groups .role-icon,
.nwnew-preview #preview-groups .role-class-icon,
.nwnew-preview #preview-groups .discord-emoji,
.nwnew-preview .discord-button .role-icon,
.nwnew-preview .discord-button .role-class-icon {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain;
}

.nwnew-preview #preview-groups .discord-emoji-text {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
}

/* Roster/response spacer — forces a full-width row break in the 3-col grid */
.discord-embed-field-spacer {
  grid-column: 1 / -1;
  height: 8px;
  border: none;
  padding: 0;
  background: none;
}

@media (max-width: 1320px) {
  .nwnew-grid {
    grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.1fr);
  }

  .nwnew-preview {
    grid-column: 1 / -1;
    position: static;
  }
}

@media (max-width: 860px) {
  .nwnew-shell {
    padding: 12px;
  }

  .nwnew-topbar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .nwnew-back,
  .nwnew-actions {
    justify-self: stretch;
  }

  .nwnew-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .nwnew-grid,
  .nwnew-fields,
  .nwnew-capacity-strip {
    grid-template-columns: 1fr;
  }

  .nwnew-shell .day-checks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nwnew-composition-panel {
    min-height: 0;
  }

  .nwnew-role-table {
    max-height: none;
  }
}

/* ── Stacked event cards ─────────────────────────────────── */
.sc-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 20px;
  padding-left: 2px;
}

.sc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-bottom: 48px;
}
@media (max-width: 1024px) { .sc-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 768px)  { .sc-grid { grid-template-columns: 1fr; } }

/* ── Card wrapper ── */
.sc-card {
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  padding-top: 12px;
}

/* ── Back paper (the sheet behind) ── */
.sc-card-back {
  position: absolute;
  top: 0;
  left: 10px;
  right: -10px;
  height: calc(100% - 8px);
  background: #14161a;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  z-index: 0;
  transform: rotate(2deg);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease;
}
.sc-card:hover .sc-card-back {
  transform: translateY(-8px) rotate(2.5deg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* ── Front card (the main face) ── */
.sc-card-front {
  position: relative;
  z-index: 1;
  background: #181b21;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease,
              box-shadow 0.3s ease,
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sc-card:hover .sc-card-front {
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4),
              0 0 0 1px rgba(255,255,255,0.08);
  transform: translateY(-3px);
}

/* ── Banner area ── */
.sc-banner {
  height: 80px;
  background: linear-gradient(135deg, #1c1f26, #1a1d23);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.sc-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 15% 50%, rgba(226,197,109,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 50% 70% at 85% 40%, rgba(99,102,241,0.04) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sc-card:hover .sc-banner::before {
  opacity: 1;
}
.sc-banner-icon {
  font-size: 28px;
  opacity: 0.3;
  position: relative;
  z-index: 1;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sc-card:hover .sc-banner-icon {
  opacity: 0.5;
  transform: scale(1.1);
}

/* ── Card body ── */
.sc-body {
  padding: 16px 18px 18px;
  transition: background 0.3s ease;
}
.sc-card:hover .sc-body {
  background: rgba(255,255,255,0.015);
}

/* ── Meta row (date + badge) ── */
.sc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sc-date {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}

/* ── Tier badge ── */
.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: transform 0.2s ease;
}
.sc-card:hover .sc-badge {
}
.sc-badge-t1 { background: rgba(226,197,109,0.2); color: #e2c56d; border: 1px solid rgba(226,197,109,0.15); }
.sc-badge-t2 { background: rgba(99,102,241,0.15); color: #818cf8; border: 1px solid rgba(99,102,241,0.12); }
.sc-badge-t3 { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.12); }
.sc-badge-default { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.06); }
.sc-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.sc-badge-dot-live {
  background: #34d399;
  box-shadow: 0 0 8px rgba(52,211,153,0.6);
  animation: sc-pulse 2s ease-in-out infinite;
}
@keyframes sc-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.85)} }

/* ── Title ── */
.sc-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 8px;
  color: #f0f2f5;
}

/* ── Day pills ── */
.sc-days {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sc-day {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid rgba(255,255,255,0.04);
  transition: background 0.2s ease, color 0.2s ease;
}
.sc-card:hover .sc-day {
  background: rgba(140, 110, 60, 0.18);
  color: #5a4a30;
}

/* ── Footer (progress + time) ── */
.sc-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sc-progress-wrap { flex: 1; min-width: 0; }
.sc-progress-info {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 6px;
}
.sc-progress-num {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sc-n { color: #e2c56d; }
.sc-d { color: rgba(255,255,255,0.4); }
.sc-l { color: rgba(255,255,255,0.3); font-size: 0.75rem; font-weight: 500; margin-left: 2px; }
.sc-track {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.sc-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
  min-width: 2px;
}
.sc-fill-gold { background: linear-gradient(90deg, #e2c56d, #d6a130); }
.sc-fill-green { background: linear-gradient(90deg, #34d399, #10b981); }
.sc-fill-warn { background: linear-gradient(90deg, #fb923c, #f97316); }
.sc-time {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding-bottom: 1px;
}
.sc-time svg { opacity: 0.5; }

/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5 */
/* Hallmark · component: event card · genre: atmospheric · theme: Athena dossier
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass
 */
.sc-section-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-6);
}

.sc-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px);
  padding: 4px 12px var(--space-12) 4px;
}

.sc-card {
  color: var(--event-ink);
  min-width: 0;
  padding-top: 20px;
  isolation: isolate;
  border-radius: 20px;
  outline: 2px solid transparent;
  outline-offset: 4px;
}

.sc-card-back {
  inset: 8px -8px 8px 12px;
  height: auto;
  background-color: var(--event-paper-deep);
  background-image:
    radial-gradient(circle at 18% 24%, var(--event-paper-fiber) 0 1px, transparent 1.2px),
    radial-gradient(circle at 72% 68%, var(--event-paper-highlight) 0 0.8px, transparent 1px);
  background-size: 9px 11px, 13px 15px;
  border: 1px solid var(--event-paper-edge);
  border-radius: 20px;
  z-index: -1;
  transform: rotate(2.4deg);
  transform-origin: 50% 90%;
  box-shadow: 0 10px 22px var(--event-shadow-soft);
  transition: transform 320ms var(--ease-out-expo), box-shadow 320ms ease;
}

.sc-card-front {
  z-index: auto;
  display: flex;
  flex-direction: column;
  min-height: 408px;
  background-color: var(--event-paper);
  background-image:
    radial-gradient(circle at 16% 28%, var(--event-paper-fiber) 0 0.8px, transparent 1px),
    radial-gradient(circle at 78% 62%, var(--event-paper-highlight) 0 0.7px, transparent 0.9px),
    repeating-linear-gradient(94deg, transparent 0 31px, var(--event-paper-highlight) 32px, transparent 33px);
  background-size: 8px 10px, 12px 14px, 100% 100%;
  color: var(--event-ink);
  border: 1px solid var(--event-paper-edge);
  border-radius: 20px;
  box-shadow: 0 18px 36px var(--event-shadow-soft), inset 0 0 0 3px var(--event-paper);
  transition: transform 320ms var(--ease-out-expo), box-shadow 320ms ease, border-color 180ms ease;
}

.sc-banner {
  height: auto;
  aspect-ratio: 16 / 8.4;
  margin: 12px 12px 0;
  border: 1px solid var(--event-ink);
  border-radius: 12px;
  background: var(--event-ink);
}

.sc-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.86) contrast(1.04) brightness(0.82);
  transition: transform 500ms var(--ease-out-expo), filter 320ms ease;
}

.sc-image-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, var(--event-shadow) 100%);
}

.sc-image-label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--event-shadow);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}

.sc-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 20px 20px;
  background: transparent;
}

.sc-meta {
  gap: var(--space-3);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--event-rule);
}

.sc-date {
  color: var(--event-ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sc-badge-t1 { background: var(--accent-muted); color: var(--event-ink); border: 1px solid var(--accent-border); }
.sc-badge-t2 { background: var(--athena-blue-glow); color: var(--event-ink); border: 1px solid var(--event-rule); }
.sc-badge-t3 { background: var(--danger-muted); color: var(--event-error); border: 1px solid var(--event-rule); }
.sc-badge-default { background: var(--event-paper-deep); color: var(--event-ink); border: 1px solid var(--event-rule); }
.sc-badge-dot { background: var(--event-ink-muted); }
.sc-badge-dot-live { background: var(--success); box-shadow: 0 0 8px var(--success); }

.sc-title {
  color: var(--event-ink);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.sc-id-chip {
  all: unset;
  display: inline-block;
  width: fit-content;
  margin-bottom: 10px;
  padding: 1px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: monospace;
  color: var(--event-ink-muted);
  background: transparent;
  border: 1px dashed var(--event-paper-edge);
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.sc-id-chip:hover {
  opacity: 1;
  background: var(--event-paper-deep);
  color: var(--event-ink);
  border-style: solid;
}
.sc-id-chip.copied {
  opacity: 1;
  background: rgba(95, 138, 60, 0.12);
  color: var(--success);
  border-color: var(--success);
  border-style: solid;
}

.sc-summary {
  color: var(--event-ink-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.sc-days { margin-bottom: 18px; }
.sc-day {
  background: var(--event-paper-deep);
  color: var(--event-ink-muted);
  border-color: var(--event-rule);
}
.sc-footer { border-color: var(--event-rule); margin-top: auto; }
.sc-n { color: var(--event-ink); }
.sc-d, .sc-l, .sc-time { color: var(--event-ink-muted); }
.sc-track { background: var(--event-paper-deep); }
.sc-fill-gold { background: var(--accent); }
.sc-fill-green { background: var(--success); }
.sc-fill-warn { background: var(--color-orange); }

.sc-card:focus-visible { outline-color: var(--event-focus); }
.sc-card:active .sc-card-front,
.sc-card.is-active .sc-card-front {
  transform: translateY(1px) scale(0.995);
  box-shadow: 0 8px 18px var(--event-shadow-soft);
}
.sc-card[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; pointer-events: none; }
.sc-card[data-state="loading"] .sc-card-front { cursor: wait; filter: saturate(0.45); }
.sc-card[data-state="loading"] .sc-image-label::after { content: "  /  LOADING"; }
.sc-card[data-state="error"] .sc-card-front { border-color: var(--event-error); }
.sc-card[data-state="success"] .sc-card-front { border-color: var(--event-success); }

@media (hover: hover) {
  .sc-card:hover,
  .sc-card.is-hover { color: var(--event-ink); }
  .sc-card:hover .sc-card-back,
  .sc-card.is-hover .sc-card-back {
    transform: translateY(-16px) rotate(2.4deg);
  }
  .sc-card:hover .sc-card-front,
  .sc-card.is-hover .sc-card-front {
    border-color: var(--event-paper-edge);
    transform: none;
    box-shadow: 0 18px 36px var(--event-shadow-soft), inset 0 0 0 3px var(--event-paper);
  }
}

@media (max-width: 1024px) {
  .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .sc-grid { grid-template-columns: minmax(0, 1fr); padding-right: 6px; }
  .sc-card-front { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-card-back,
  .sc-card-front,
  .sc-banner img,
  .sc-badge,
  .sc-day { transition-duration: 0.01ms; }
  .sc-badge-dot-live { animation: none; }
}


/* Events page background */
body.events-page-body {
  background:
    linear-gradient(180deg, rgba(10, 12, 18, 0.55) 0%, rgba(10, 12, 18, 0.78) 100%),
    url("/assets/guild-event.webp") center / cover no-repeat;
  background-attachment: fixed;
}
/* Events page: header + button readability */
.events-page-body .page-header {
  background: rgba(10, 12, 18, 0.7);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.events-page-body .page-header h1 {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.events-page-body .sc-section-label {
  color: #ffffff !important;
}
.events-page-body .button-primary {
  border-color: rgba(255, 255, 255, 0.25);
}
/* Hallmark · macrostructure: Workbench · tone: technical · anchor hue: Athena gold */
.event-command {
  color: var(--text-primary);
  background: var(--bg-base);
  min-width: 0;
}

.event-command-container {
  width: min(100% - var(--space-8), 1240px);
  margin: 0 auto;
}

.event-command-hero {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border-bottom: 1px solid var(--command-rule);
  background: var(--command-surface);
}

.event-command-hero-art {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--command-overlay) 0%, var(--command-overlay) 38%, transparent 76%),
    linear-gradient(180deg, transparent 38%, var(--command-overlay) 100%),
    url('/assets/nodewar.webp') center 42% / cover no-repeat;
  opacity: 0.82;
}

.event-command[data-event-kind="gbr"] .event-command-hero-art {
  background:
    linear-gradient(90deg, var(--command-overlay) 0%, var(--command-overlay) 38%, transparent 76%),
    linear-gradient(180deg, transparent 38%, var(--command-overlay) 100%),
    url('/assets/gbr.webp') center / cover no-repeat;
}

.event-command[data-event-kind="custom"] .event-command-hero-art {
  background:
    linear-gradient(90deg, var(--command-overlay) 0%, var(--command-overlay) 38%, transparent 76%),
    linear-gradient(180deg, transparent 38%, var(--command-overlay) 100%),
    url('/assets/Custom.webp') center / cover no-repeat;
}

.event-command-hero-inner {
  position: relative;
  z-index: 1;
  min-height: 260px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-10) 0 var(--space-8);
}

.event-command-hero-copy { min-width: 0; }
.event-command-kicker,
.event-command-section-head > div > span {
  display: block;
  color: var(--accent-hover);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.event-command-hero h1 {
  max-width: 22ch;
  margin-top: var(--space-2);
  color: var(--text-primary);
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  letter-spacing: -0.045em;
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.event-command-hero p {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.event-command-actions {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: end;
  align-items: stretch;
  gap: var(--space-2);
}

.event-command-actions form { display: contents; }
.event-command-actions .button {
  min-height: 42px;
  padding-inline: var(--space-3);
  box-shadow: 0 8px 22px var(--command-shadow);
  white-space: nowrap;
}
.event-command-actions .button-danger-outline {
  border-color: rgba(232, 100, 82, 0.48);
  background: rgba(167, 58, 43, 0.1);
}
.event-command-actions .button-danger-outline:hover {
  border-color: var(--danger);
  background: var(--danger-muted);
  box-shadow: 0 8px 22px rgba(167, 58, 43, 0.22);
}
.event-command-actions .button:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.event-command-actions .button:active { transform: translateY(1px); }
.event-command-actions .button:disabled { cursor: not-allowed; opacity: 0.56; }
.event-command-actions .event-command-delete[data-state="loading"] { color: var(--text-muted); }
.event-command-actions .event-command-delete[data-state="error"] { border-color: var(--danger); }
.event-command-actions .event-command-delete[data-state="success"] { border-color: var(--success); color: var(--success); }
}

.event-command-body {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8) 0 var(--space-12);
}

.event-command-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.8fr);
  gap: var(--space-4);
}

.event-command-facts,
.event-command-delivery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--command-rule);
  background: var(--command-surface);
}

.event-command-fact {
  min-width: 0;
  padding: var(--space-5);
  border-right: 1px solid var(--command-rule-soft);
}

.event-command-fact:last-child { border-right: 0; }
.event-command-fact span,
.event-command-delivery-grid dt {
  display: block;
  color: var(--command-ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.event-command-fact strong {
  display: block;
  margin-top: var(--space-3);
  color: var(--text-primary);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.event-command-commitment,
.event-command-panel,
.event-command-announcement,
.event-roster-column {
  border: 1px solid var(--command-rule);
  background: var(--command-surface);
  box-shadow: 0 14px 30px var(--command-shadow);
}

.event-command-commitment { padding: var(--space-5); }
.event-command-panel-head,
.event-command-section-head,
.event-roster-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.event-command-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent-hover);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.event-command-status::before {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--text-muted);
  content: "";
}
.event-command-status.is-active::before { background: var(--success); }
.event-command-panel-head h2 { margin-top: var(--space-2); font-size: var(--text-lg); }
.event-command-panel-head > strong { color: var(--accent-hover); font-size: var(--text-3xl); line-height: 1; }
.event-command-panel-head > strong small { color: var(--text-muted); font-size: var(--text-base); }

.event-command-progress {
  height: 8px;
  margin-top: var(--space-5);
  overflow: hidden;
  border: 1px solid var(--command-rule-soft);
  background: var(--command-surface-strong);
}
.event-command-progress span { display: block; height: 100%; min-width: 2px; background: var(--accent); }
.event-command-progress span.is-healthy { background: var(--success); }
.event-command-progress span.is-low { background: var(--color-orange); }
.event-command-commitment-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  color: var(--command-ink-muted);
  font-size: var(--text-xs);
}

.event-command-panel { padding: var(--space-6); }
.event-command-section-head { margin-bottom: var(--space-5); }
.event-command-section-head h2 { margin-top: var(--space-1); font-size: var(--text-xl); }
.event-command-section-note { color: var(--command-ink-muted); font-size: var(--text-sm); text-align: right; }

.event-command-delivery-grid > div {
  min-width: 0;
  padding: var(--space-4);
  border-right: 1px solid var(--command-rule-soft);
}
.event-command-delivery-grid > div:last-child { border-right: 0; }
.event-command-delivery-grid dd { margin-top: var(--space-2); color: var(--text-primary); font-size: var(--text-sm); font-weight: 700; overflow-wrap: anywhere; }

.event-command-schedule-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--command-rule-soft);
  background: var(--command-surface-raised);
}
.event-command-days { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.event-command-days span {
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 38px;
  border: 1px solid var(--accent-border);
  background: var(--command-gold-soft);
  color: var(--accent-hover);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
}
.event-command-schedule-detail { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-5); color: var(--command-ink-muted); font-size: var(--text-sm); }
.event-command-schedule-detail strong { display: block; margin-top: var(--space-1); color: var(--text-primary); }

.event-command-dispatch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.92fr);
  gap: var(--space-6);
  align-items: start;
}
.event-command-announcements,
.event-command-roster { min-width: 0; }
.event-command-announcement-list { display: grid; gap: var(--space-2); }
.event-command-announcement {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(140px, auto);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
}
.event-command-announcement.is-next { border-color: var(--accent); background: var(--command-surface-raised); }
.event-command-announcement-order { color: var(--accent-hover); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.event-command-announcement h3 { font-size: var(--text-base); }
.event-command-announcement p,
.event-command-announcement time { margin-top: var(--space-1); color: var(--command-ink-muted); font-size: var(--text-sm); }
.event-command-announcement time { text-align: right; }
.event-command-announcement-empty {
  padding: var(--space-6);
  border: 1px dashed var(--command-rule);
  color: var(--command-ink-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.event-discord-preview {
  overflow: hidden;
  border: 1px solid var(--command-rule);
  background: #1e1f22;
  box-shadow: var(--command-shadow);
}
.event-discord-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #242529;
}
.event-discord-preview-toolbar span:first-child {
  color: #a9b4c7;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.event-discord-preview-toolbar h2 { margin-top: 2px; color: #f2f3f5; font-size: var(--text-base); }
.event-discord-preview-live {
  padding: 5px 9px;
  border: 1px solid rgba(35, 197, 94, 0.36);
  border-radius: 999px;
  background: rgba(35, 197, 94, 0.12);
  color: #86efac;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.event-discord-preview .discord-message { padding: var(--space-5); font-size: 0.875rem; }
.event-discord-preview .discord-avatar,
.event-discord-preview .discord-avatar-img { width: 34px; height: 34px; }
.event-discord-preview .discord-embed { width: 100%; }
.event-discord-preview .discord-embed-body { padding: 11px 12px 12px; }
.event-discord-preview .discord-embed-title { font-size: 0.9rem; }
.event-discord-preview .discord-embed-fields { gap: 6px 8px; }
.event-discord-preview .discord-embed-field-name,
.event-discord-preview .discord-embed-field-value { font-size: 0.75rem; }
.event-discord-preview .discord-roster-fields { margin-top: 12px; }
.event-discord-preview .discord-roster-preview-names { display: grid; gap: 2px; }
.event-discord-preview .discord-roster-preview-names span { display: flex; align-items: center; gap: 3px; overflow-wrap: anywhere; }
.event-discord-preview .role-icon { width: 15px; height: 15px; object-fit: contain; }
.event-discord-preview .role-emoji { display: inline-flex; width: 15px; height: 15px; align-items: center; justify-content: center; }
.event-discord-preview .discord-embed-footer { margin-top: 6px; }
.event-discord-preview .discord-select-wrapper { margin-top: 9px; }
.event-discord-preview .discord-select { width: 100%; }
.event-discord-preview .discord-buttons-inline { display: flex; gap: 6px; margin-top: 8px; }

.event-roster-grid { display: grid; gap: var(--space-4); }
.event-roster-grid[data-columns="1"] { grid-template-columns: minmax(0, 1fr); }
.event-roster-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.event-roster-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.event-roster-grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.event-roster-grid .roster-section-spacer { grid-column: 1 / -1; height: 0; }
/* Hallmark · component: roster board · genre: technical · theme: Athena command
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass
 */
.event-roster-column {
  min-width: 0;
  min-height: 196px;
  padding: var(--space-4);
  border: 1px solid var(--command-rule);
  background: linear-gradient(145deg, var(--command-surface-raised), var(--command-surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 12px 28px rgba(0,0,0,0.16);
  transition: border-color 180ms var(--ease-out-expo), background 180ms var(--ease-out-expo), transform 180ms var(--ease-out-expo), box-shadow 180ms var(--ease-out-expo);
}
.event-roster-column:hover {
  border-color: var(--accent-border);
  background: linear-gradient(145deg, var(--command-surface-strong), var(--command-surface-raised));
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 34px rgba(0,0,0,0.22);
}
.event-roster-column:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.event-roster-column-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.event-roster-role { display: flex; align-items: center; min-width: 0; gap: var(--space-3); }
.event-roster-symbol {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
}
.event-roster-symbol .role-icon { width: 42px; height: 42px; object-fit: contain; }
.event-roster-symbol .role-emoji { display: grid; width: 29px; height: 29px; place-items: center; font-size: 22px; line-height: 1; }
.event-roster-label { display: block; color: var(--command-ink-muted); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.event-roster-column-head h3 { min-width: 0; margin-top: 2px; font-size: var(--text-lg); line-height: 1.1; overflow-wrap: anywhere; }
.event-roster-capacity { display: grid; min-width: 48px; color: var(--accent-hover); text-align: right; line-height: 1; }
.event-roster-capacity strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.event-roster-capacity span { margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
.event-roster-capacity small { margin-top: 6px; color: var(--command-ink-muted); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.event-roster-meter { height: 3px; margin-top: var(--space-4); overflow: hidden; background: var(--command-rule-soft); }
.event-roster-meter span { display: block; height: 100%; min-width: 2px; background: var(--accent); transition: width 240ms var(--ease-out-expo); }
.event-roster-signups { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); }
.event-command .signup-row { display: flex; align-items: center; gap: var(--space-2); min-height: 42px; padding: 0 var(--space-3); border: 1px solid var(--command-rule-soft); background: var(--command-surface); transition: background 150ms var(--ease-out-expo), border-color 150ms var(--ease-out-expo); }
.event-command .signup-row:hover { border-color: var(--accent-border); background: var(--command-gold-soft); }
.event-roster-position { width: 20px; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: center; }
.event-roster-member { min-width: 0; overflow: hidden; font-size: var(--text-sm); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.event-roster-drag { margin-left: auto; color: var(--command-ink-muted); cursor: grab; font-size: var(--text-lg); line-height: 1; }
.draggable-signup:active .event-roster-drag { cursor: grabbing; }
.event-roster-empty { padding: var(--space-5) var(--space-3); color: var(--command-ink-muted); font-size: var(--text-sm); text-align: center; }
.event-command .roster-dropzone.is-drag-over { border-color: var(--accent); background: var(--command-gold-soft); outline: 2px solid var(--accent); outline-offset: -5px; }
.event-command .roster-dropzone.is-saving { opacity: 0.62; pointer-events: none; }

@media (max-width: 1080px) {
  .event-command-overview { grid-template-columns: 1fr; }
  .event-command-dispatch { grid-template-columns: 1fr; }
  .event-command-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-command-fact:nth-child(2) { border-right: 0; }
  .event-command-fact:nth-child(-n + 2) { border-bottom: 1px solid var(--command-rule-soft); }
  .event-roster-grid[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .event-command-container { width: min(100% - var(--space-6), 1240px); }
  .event-command-hero { min-height: 330px; }
  .event-command-hero-inner { min-height: 330px; align-items: start; flex-direction: column; padding: var(--space-8) 0 var(--space-6); }
  .event-command-hero-art { background-position: 62% center; }
  .event-command-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .event-command-actions .button { width: 100%; }
  .event-command-actions .event-command-delete { grid-column: 1 / -1; }
  .event-command-facts,
  .event-command-delivery-grid { grid-template-columns: 1fr; }
  .event-command-fact,
  .event-command-delivery-grid > div { border-right: 0; border-bottom: 1px solid var(--command-rule-soft); }
  .event-command-fact:last-child,
  .event-command-delivery-grid > div:last-child { border-bottom: 0; }
  .event-command-schedule-main { align-items: start; flex-direction: column; }
  .event-command-schedule-detail { justify-content: flex-start; }
  .event-command-section-head { align-items: start; flex-direction: column; }
  .event-command-section-note { text-align: left; }
  .event-command-announcement { grid-template-columns: 1fr; gap: var(--space-2); }
  .event-command-announcement time { text-align: left; }
  .event-roster-grid[data-columns="2"],
  .event-roster-grid[data-columns="3"],
  .event-roster-grid[data-columns="4"] { grid-template-columns: minmax(0, 1fr); }
  .event-command-commitment-meta { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .event-command *,
  .event-command *::before,
  .event-command *::after { transition-duration: 0.01ms; animation-duration: 0.01ms; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ── Guild League ──
   Panels unique to /stats/league. Everything the Node War dashboard already
   styles (`sd-section`, `sd-metric`, `sd-kpi`, `sd-board`, `sd-dmg`,
   `sd-donut`, `score-history-card`) is reused as-is; only the quadrant
   scatter, the 100% stacked output bars, the match-log cards and the upload
   dropzone need rules of their own. Scoped under `.sd` / their own `gl-`
   prefix so nothing leaks, and specificity is raised to two classes where a
   rule has to beat an `sd-*` base declared later in the bundle.
   ══════════════════════════════════════════════════════════════════════════ */

/* Six form metrics, not four — three per row reads better than 4 + orphans. */
.sd-sparks.gl-sparks { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .sd-sparks.gl-sparks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .sd-sparks.gl-sparks { grid-template-columns: minmax(0, 1fr); }
}

/* ── Chart frame ─────────────────────────────────────────────── */

.sd .gl-chart {
  display: grid;
  /* An explicit 1fr track, not `auto`: an inline SVG contributes its viewBox
     width as max-content, so an auto track can settle at the drawing's own
     780-odd pixels and leave a third of the panel empty beside it. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-md);
  background: var(--sd-surface, var(--bg-surface));
  border: 1px solid var(--sd-hairline, var(--border-default));
  border-radius: var(--radius-md);
}

/* ── Combat-efficiency quadrant ──────────────────────────────── */

.sd .gl-scatter {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: auto;
  justify-self: stretch;
  overflow: visible;
}

.sd .gl-scatter-plot {
  fill: color-mix(in oklch, var(--chronicle-ink) 82%, transparent);
  stroke: var(--chronicle-gold-line);
  stroke-width: 1;
}

.sd .gl-scatter-grid {
  stroke: var(--chronicle-rule-soft);
  stroke-width: 1;
}

/* Median crosshair: the quadrant boundary, so it must read louder than a grid
   line but never compete with the bubbles. */
.sd .gl-scatter-median {
  stroke: var(--chronicle-gold);
  stroke-width: 1.25;
  stroke-dasharray: 5 4;
  opacity: 0.75;
}

.sd .gl-scatter-tick {
  fill: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
}

.sd .gl-scatter-axis {
  fill: var(--chronicle-gold);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sd .gl-scatter-quadrant {
  fill: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  opacity: 0.55;
}

.sd .gl-scatter-point circle {
  fill: color-mix(in oklch, var(--gl-quadrant, var(--chronicle-gold)) 34%, transparent);
  stroke: var(--gl-quadrant, var(--chronicle-gold));
  stroke-width: 1.25;
  transition: fill var(--dur-short) var(--ease-out);
}

.sd .gl-scatter-point text {
  fill: var(--chronicle-text);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.sd .gl-scatter-point:hover circle {
  fill: color-mix(in oklch, var(--gl-quadrant, var(--chronicle-gold)) 62%, transparent);
}

.sd [data-gl-quadrant="carry"] { --gl-quadrant: var(--chronicle-gold-bright); }
.sd [data-gl-quadrant="duelist"] { --gl-quadrant: var(--chronicle-gold); }
.sd [data-gl-quadrant="anchor"] { --gl-quadrant: var(--chronicle-success); }
.sd [data-gl-quadrant="liability"] { --gl-quadrant: var(--chronicle-danger); }

.sd .gl-scatter-legend { align-items: center; }

.sd .gl-scatter-note {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--chronicle-text-muted);
}

/* Legend swatches borrow `.sd-swatch` geometry and only restate the fill. */
.sd-swatch.gl-swatch[data-gl-quadrant] { background: var(--gl-quadrant, var(--chronicle-gold)); }
.sd-swatch.gl-swatch[data-gl-mix="damage"] { background: var(--chronicle-gold-bright); }
.sd-swatch.gl-swatch[data-gl-mix="control"] { background: var(--chronicle-gold-deep); }
.sd-swatch.gl-swatch[data-gl-mix="healing"] { background: var(--chronicle-success); }

/* ── 100% stacked output mix ─────────────────────────────────── */

.sd .gl-mix {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}

.sd .gl-mix-row {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.sd .gl-mix-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  min-width: 0;
}

.sd .gl-mix-head img {
  align-self: center;
  flex-shrink: 0;
  border-radius: 4px;
}

.sd .gl-mix-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 0.8rem;
  color: var(--chronicle-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd .gl-mix-role {
  flex-shrink: 0;
  padding: 0.02rem 0.36rem;
  color: var(--chronicle-gold-bright);
  background: var(--chronicle-gold-wash);
  border: 1px solid var(--chronicle-gold-line);
  border-radius: 999px;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sd .gl-mix-load {
  flex-shrink: 0;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  color: var(--chronicle-text-muted);
  font-variant-numeric: tabular-nums;
}

.sd .gl-mix-track {
  display: flex;
  overflow: hidden;
  height: 0.9rem;
  background: color-mix(in oklch, var(--chronicle-ink) 86%, transparent);
  border: 1px solid var(--chronicle-rule-soft);
  border-radius: 999px;
}

/* The three segments are already normalized to 100 by the analytics, so the
   track needs no scaling of its own. */
.sd .gl-mix-seg {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: calc(var(--gl-pct, 0) * 1%);
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.sd .gl-mix-seg-label {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  color: var(--chronicle-paper-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Damage board: share-of-guild chip ──────────────────────── */

.sd .gl-dmg-share {
  flex-shrink: 0;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  color: var(--chronicle-gold);
  font-variant-numeric: tabular-nums;
}

/* ── Match log ───────────────────────────────────────────────── */

.sd .gl-matches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: var(--space-sm);
  min-width: 0;
}

.sd .gl-match {
  --gl-rail: var(--chronicle-rule);
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-md);
  background: var(--sd-surface, var(--bg-surface));
  border: 1px solid var(--sd-hairline, var(--border-default));
  border-inline-start: 2px solid var(--gl-rail);
  border-radius: var(--radius-md);
}

.sd .gl-match--win { --gl-rail: var(--sd-win, var(--chronicle-success)); }
.sd .gl-match--loss { --gl-rail: var(--sd-loss, var(--chronicle-danger)); }
.sd .gl-match--unknown { --gl-rail: var(--chronicle-rule); }

.sd .gl-match > a { justify-self: start; }

.sd .gl-match-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem var(--space-xs);
  min-width: 0;
}

.sd .gl-match-stamp {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--chronicle-gold);
  white-space: nowrap;
}

.sd .gl-match-opponent {
  flex: 1 1 6rem;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--chronicle-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd .gl-match-side,
.sd .gl-match-roster {
  flex-shrink: 0;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chronicle-text-muted);
}

.sd .gl-match-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs) var(--space-sm);
  min-width: 0;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--chronicle-rule-soft);
}

.sd .gl-match-mvp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem var(--space-xs);
  min-width: 0;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--chronicle-rule-soft);
}

.sd .gl-match-mvp img {
  flex-shrink: 0;
  border-radius: 4px;
}

.sd .gl-match-mvp-name {
  font-size: 0.82rem;
  color: var(--chronicle-gold-bright);
}

/* ── Roster cleanup: merge suggestions ───────────────────────── */

.sd .gl-merge-lede {
  max-width: 68ch;
  margin: 0;
  color: var(--chronicle-text-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.sd .gl-merge-lede strong { color: var(--chronicle-gold-bright); }

.sd .gl-merges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--space-sm);
  min-width: 0;
}

.sd .gl-merge {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--sd-surface, var(--bg-surface));
  border: 1px solid var(--sd-hairline, var(--border-default));
  border-left: 2px solid var(--chronicle-gold);
  border-radius: var(--radius-md);
}

.sd .gl-merge-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  justify-content: space-between;
}

.sd .gl-merge-keep {
  min-width: 0;
  color: var(--chronicle-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sd .gl-merge-keep strong {
  color: var(--chronicle-gold-bright);
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
}

.sd .gl-merge-meta {
  flex-shrink: 0;
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
}

.sd .gl-merge-copy {
  margin: 0;
  color: var(--chronicle-text-muted);
  font-size: 0.75rem;
}

.sd .gl-merge-variants {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.sd .gl-merge-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  padding: 0.2rem 0.35rem;
  border-radius: var(--radius-sm);
}

.sd .gl-merge-row:hover { background: var(--chronicle-ink-soft, var(--bg-base)); }

/* The chosen keeper is the one line that is NOT rewritten — mark it. */
.sd .gl-merge-row:has(.gl-merge-radio:checked) {
  background: color-mix(in oklch, var(--chronicle-gold) 10%, transparent);
}

.sd .gl-merge-row:has(.gl-merge-radio:checked) .gl-merge-variant-name {
  color: var(--chronicle-gold-bright);
  font-weight: 600;
}

.sd .gl-merge-radio,
.sd .gl-merge-check { flex-shrink: 0; accent-color: var(--chronicle-gold); cursor: pointer; }

.sd .gl-merge-radio-label {
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.sd .gl-merge-row:has(.gl-merge-radio:checked) .gl-merge-radio-label { color: var(--chronicle-gold-bright); }

.sd .gl-merge-check-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  cursor: pointer;
}

.sd .gl-merge-variant-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--chronicle-text);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd .gl-merge-variant-meta {
  flex-shrink: 0;
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
}

/* ── Upload dropzone ─────────────────────────────────────────── */

.gl-dropzone {
  display: grid;
  place-items: center;
  gap: 0.3rem;
  padding: var(--space-5) var(--space-4);
  color: var(--text-muted);
  background: var(--bg-base);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}

.gl-dropzone strong {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.gl-dropzone span {
  font-size: var(--text-xs);
  line-height: 1.4;
}

.gl-dropzone svg { color: var(--accent); }

.gl-dropzone:hover,
.gl-dropzone.is-drag-over {
  border-color: var(--accent);
  background: var(--bg-surface);
}

@media (max-width: 720px) {
  .sd .gl-match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd .gl-matches { grid-template-columns: minmax(0, 1fr); }
  .sd .gl-merges { grid-template-columns: minmax(0, 1fr); }
}

/* ── Tickets (/admin/tickets) ─────────────────────────────────── */
.ticket-page { display: grid; gap: 12px; max-width: 1200px; margin: 0 auto; padding: 24px 16px; }
.ticket-list { display: grid; gap: 10px; }
.ticket-card { border: 1px solid var(--border, rgba(255, 255, 255, 0.12)); border-radius: 8px; padding: 12px 14px; background: rgba(0, 0, 0, 0.25); }
.ticket-closed { opacity: 0.6; }
.ticket-head, .ticket-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 0.9em; }
.ticket-status { margin-left: auto; text-transform: uppercase; letter-spacing: 0.05em; }
.ticket-detail { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.ticket-meta form { margin-left: auto; }

/* ── Logs (/admin/logs) ───────────────────────────────────────── */
.log-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.log-filters input, .log-filters select { min-width: 0; flex: 1 1 160px; }
.log-table-wrap { overflow-x: auto; }
.log-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.log-table th, .log-table td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.log-table pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 0; font-size: 0.9em; }
.log-level { text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.05em; }
.log-warn .log-level { color: #f0b429; }
.log-error .log-level, .log-error .log-action, p.log-error { color: #ff7b72; }
.log-time { display: grid; white-space: nowrap; }
.log-time span:first-child { opacity: 0.6; font-size: 0.85em; }
.log-time .log-level { margin-top: 2px; }
.log-event { white-space: nowrap; }
.log-category { font-size: 0.8em; opacity: 0.7; }
.log-action { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; font-weight: 600; background: rgba(255, 255, 255, 0.08); }
.log-action-sell, .log-action-sacrifice, .log-action-bottles { background: rgba(63, 185, 80, 0.18); color: #7ee787; }
.log-action-buy, .log-action-enhance, .log-action-unlock { background: rgba(240, 180, 41, 0.18); color: #f0c35a; }
.log-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.log-chip { padding: 1px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.log-chip b { font-weight: 500; opacity: 0.6; }
.log-chip-gain { color: #7ee787; }
.log-chip-spend { color: #ff7b72; }
.log-chip-prize { color: #f0c35a; }
.log-muted { opacity: 0.4; }
.log-species { margin-top: 4px; font-size: 0.85em; opacity: 0.8; overflow-wrap: anywhere; }
.log-grade-trash { color: #b5b5b5; }
.log-grade-general { color: #8fd17e; }
.log-grade-hq { color: #7fb6e6; }
.log-grade-rare { color: #f0c96a; }
.log-grade-prize { color: #e07a6a; }
.log-grade-mystical { color: #c4a0e6; }
.log-user { display: grid; gap: 2px; }
.log-name { font-weight: 600; }
.log-table summary { cursor: pointer; opacity: 0.6; font-size: 0.85em; margin-top: 4px; }

/* Hallmark · genre: atmospheric · macrostructure: Workbench / Long Document · design-system: DESIGN.md · theme: studied-DNA (Silver Palace + Project Athena source) · nav: N11 archive bar · footer: Ft1 masthead · pre-emit critique: P5 H4 E4 S5 R4 V4 · designed-as-app */

:root {
  --chronicle-void: oklch(11% 0.012 67);
  --chronicle-ink: oklch(15% 0.018 66);
  --chronicle-ink-raised: oklch(19% 0.022 67);
  --chronicle-ink-soft: oklch(24% 0.024 68);
  --chronicle-rule: oklch(43% 0.055 72);
  --chronicle-rule-soft: oklch(34% 0.034 72);
  --chronicle-gold: #c5a059;
  --chronicle-gold-bright: #e5c17c;
  --chronicle-gold-deep: #8f6d2b;
  /* Aliases for names other stylesheets reference but nothing defined —
     without them those rules silently fell back to inherited/initial values. */
  --gold: var(--chronicle-gold);
  --chronicle-font-body: var(--font-body);
  --chronicle-font-display: var(--font-display);
  --chronicle-font-mono: var(--font-outlier);
  --color-focus: oklch(82% 0.190 82);
  --color-error: oklch(62% 0.160 30);
  --color-success: oklch(70% 0.100 125);
  --surface: var(--bg-surface);
  --space-7: 1.75rem;
  --space-16: 4rem;
  --chronicle-gold-wash: rgba(197, 160, 89, 0.15);
  --chronicle-gold-line: rgba(197, 160, 89, 0.45);
  --chronicle-paper: #e5cd97;
  --chronicle-paper-raised: #ebd6a4;
  --chronicle-paper-deep: #d8be82;
  --chronicle-paper-rule: #a4864a;
  --chronicle-paper-ink: #1a140b;
  --chronicle-paper-muted: #4a3c26;
  --chronicle-text: oklch(94% 0.018 84);
  --chronicle-text-soft: oklch(78% 0.018 79);
  --chronicle-text-muted: oklch(65% 0.015 73);
  --chronicle-danger: oklch(57% 0.16 32);
  --chronicle-success: oklch(56% 0.09 128);
  --chronicle-focus: #e5c17c;
  --chronicle-shadow: oklch(6% 0.01 65 / 0.58);
  --chronicle-shadow-soft: oklch(6% 0.01 65 / 0.28);
  --chronicle-backdrop: oklch(8% 0.012 66 / 0.84);
  --chronicle-backdrop-soft: oklch(8% 0.012 66 / 0.67);
  --chronicle-paper-glaze: rgba(255, 240, 200, 0.15);
  --chronicle-paper-fiber: rgba(45, 30, 10, 0.12);
  --chronicle-paper-wash: rgba(229, 205, 151, 0.18);
  --chronicle-paper-edge: #b89855;
  --chronicle-nav-height: 4rem;

  --font-display: "Cormorant Garamond", ui-serif, serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, sans-serif;
  --font-outlier: "IBM Plex Mono", ui-monospace, monospace;
  --font-sans: var(--font-body);
  --font-mono: var(--font-outlier);

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  --bg-base: var(--chronicle-void);
  --bg-surface: var(--chronicle-ink-raised);
  --bg-surface-hover: var(--chronicle-ink-soft);
  --bg-elevated: var(--chronicle-ink-soft);
  --bg-overlay: var(--chronicle-backdrop);
  --panel: var(--chronicle-ink-raised);
  --panel-bg: var(--chronicle-ink-raised);
  --panel-border: var(--chronicle-rule-soft);
  --border-subtle: var(--chronicle-rule-soft);
  --border-default: var(--chronicle-rule);
  --border-strong: var(--chronicle-gold-deep);
  --text-primary: var(--chronicle-text);
  --text-secondary: var(--chronicle-text-soft);
  --text-muted: var(--chronicle-text-muted);
  --text-inverse: var(--chronicle-paper-ink);
  --accent: var(--chronicle-gold);
  --accent-hover: var(--chronicle-gold-bright);
  --accent-muted: var(--chronicle-gold-wash);
  --accent-border: var(--chronicle-gold-line);
  --accent-glow: var(--chronicle-gold-wash);
  --color-indigo: var(--chronicle-gold);
  --color-cyan: var(--chronicle-gold-bright);
  --color-violet: var(--chronicle-gold-deep);
  --color-sky: var(--chronicle-ink-soft);
  --event-paper: var(--chronicle-paper);
  --event-paper-deep: var(--chronicle-paper-deep);
  --event-paper-edge: var(--chronicle-paper-rule);
  --event-paper-fiber: var(--chronicle-paper-fiber);
  --event-paper-highlight: var(--chronicle-paper-glaze);
  --event-ink: var(--chronicle-paper-ink);
  --event-ink-muted: var(--chronicle-paper-muted);
  --event-rule: var(--chronicle-paper-rule);
  --event-shadow: var(--chronicle-shadow);
  --event-shadow-soft: var(--chronicle-shadow-soft);
  --event-focus: var(--chronicle-focus);
  --command-surface: var(--chronicle-ink);
  --command-surface-raised: var(--chronicle-ink-raised);
  --command-surface-strong: var(--chronicle-ink-soft);
  --command-rule: var(--chronicle-gold-line);
  --command-rule-soft: var(--chronicle-rule-soft);
  --command-ink-muted: var(--chronicle-text-soft);
  --command-overlay: var(--chronicle-backdrop);
  --command-gold-soft: var(--chronicle-gold-wash);
  --command-shadow: var(--chronicle-shadow);
}

html,
body {
  overflow-x: clip;
}

html {
  scroll-padding-top: calc(var(--chronicle-nav-height) + var(--space-lg));
}

html:has(body[data-page="command-center"]) {
  overflow-y: auto;
  scrollbar-gutter: auto;
}

body[data-page="command-center"] { overflow-y: visible; }

body.obsidian-chronicle {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--chronicle-text);
  background-color: var(--chronicle-void);
  background-image:
    linear-gradient(180deg, var(--chronicle-backdrop-soft), var(--chronicle-backdrop)),
    url("/assets/dashboard.webp");
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

body.events-page-body {
  background-image:
    linear-gradient(180deg, var(--chronicle-backdrop-soft), var(--chronicle-backdrop)),
    url("/assets/guild-event.webp");
}

body[data-page^="stats"],
body[data-page^="war-history"],
body[data-page^="war-comparison"],
body[data-page$="stats"] {
  background-image:
    linear-gradient(180deg, var(--chronicle-backdrop-soft), var(--chronicle-backdrop)),
    url("/assets/stats.webp");
}

.athena-atmosphere {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--chronicle-backdrop-soft), transparent 25%, transparent 75%, var(--chronicle-backdrop-soft)),
    url("/assets/chronicle-paper-texture-v1.webp");
  background-size: auto, 32rem 32rem;
  background-repeat: no-repeat, repeat;
  background-blend-mode: normal, soft-light;
  opacity: 0.1;
}

body.obsidian-chronicle:has(.dash-command)::before {
  filter: contrast(1.06) saturate(0.88);
}

.app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
}

.main {
  min-width: 0;
}

.skip-link {
  position: fixed;
  z-index: 600;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-paper-raised);
  border: 1px solid var(--chronicle-paper-rule);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

body:not(.is-ready) .main,
body:not(.is-ready) .top-nav {
  opacity: 0;
  transform: translateY(var(--space-xs));
}

body.is-ready .main,
body.is-ready .top-nav {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
}

h1,
h2,
h3,
h4,
.page-title,
.section-heading h1,
.event-command-hero h1 {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.025em;
}

h1,
.page-title,
.section-heading h1 {
  font-size: clamp(2.5rem, 4vw + 0.5rem, 4.75rem);
  line-height: 1.02;
}

h2 { font-size: clamp(1.75rem, 2.4vw, 2.7rem); line-height: 1.08; }
h3 { font-size: clamp(1.35rem, 1.7vw, 1.85rem); line-height: 1.12; }

p,
li,
label,
input,
select,
textarea,
button {
  font-family: var(--font-body);
}

.landing-kicker,
.eyebrow,
.sc-section-label,
.stat-card-label,
.dashboard-table-header,
.badge,
.event-command-kicker {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.top-nav {
  position: sticky;
  z-index: 300;
  inset-block-start: var(--space-sm);
  width: min(calc(100% - var(--space-xl)), 92rem);
  min-height: var(--chronicle-nav-height);
  margin: var(--space-sm) auto 0;
  padding-inline: var(--space-lg);
  color: var(--chronicle-text);
  /* The base layout.css rule gives the nav a solid rectangle background and a
     faint bottom border; the chronicle bar is a floating pointed shape, so the
     notches must stay transparent (the material layer paints only the hexagon). */
  background: transparent;
  border-bottom: none;
  /* The blur lives on .top-nav-material, clipped to the hexagon. The nav
     itself must never blur, or its rectangle bleeds grey past the arrow
     tips (layout.css sets a base blur(20px) that we must override). */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The clipped-ends material lives on background layers so the account
   dropdown and tablet mobile menu are not clipped by the bar's shape.
   This gold layer is the hexagon outline: one pixel larger than the
   fill that paints over it, leaving a clean 1px border on the points. */
.top-nav::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--chronicle-gold-line);
  clip-path: polygon(calc(var(--space-sm) - 1px) -1px, calc(100% - var(--space-sm) + 1px) -1px, calc(100% + 1px) 50%, calc(100% - var(--space-sm) + 1px) calc(100% + 1px), calc(var(--space-sm) - 1px) calc(100% + 1px), -1px 50%);
  pointer-events: none;
}

/* The dark, blurred fill of the bar. Paints over the gold outline layer
   (same z-index, later in DOM order) so only the gold rim stays visible. */
.top-nav-material {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--chronicle-backdrop);
  backdrop-filter: blur(var(--space-sm));
  clip-path: polygon(var(--space-sm) 0, calc(100% - var(--space-sm)) 0, 100% 50%, calc(100% - var(--space-sm)) 100%, var(--space-sm) 100%, 0 50%);
  pointer-events: none;
}

.top-nav::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-xl);
  inset-block-end: var(--space-3xs);
  height: 1px;
  background: var(--chronicle-gold-line);
  pointer-events: none;
}

.top-brand {
  gap: var(--space-sm);
  color: var(--chronicle-text);
}

.top-brand-logo {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--chronicle-gold-line);
  border-radius: 50%;
  object-fit: cover;
}

.top-brand-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.top-nav-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
}

.top-bookmarked-guilds {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  max-width: min(18rem, 24vw);
  padding-inline-start: var(--space-md);
  border-inline-start: 1px solid var(--chronicle-gold-line);
  overflow-x: auto;
  scrollbar-width: none;
}

.top-bookmarked-guilds[hidden],
.top-bookmarked-guild[hidden] {
  display: none;
}

.top-bookmarked-guilds::-webkit-scrollbar { display: none; }

.top-bookmarked-guild {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: 2.125rem;
  height: 2.125rem;
  place-items: center;
  color: var(--chronicle-gold-bright);
  background: var(--chronicle-ink-raised);
  border: 1px solid var(--chronicle-gold-line);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.15rem var(--chronicle-void), 0 var(--space-3xs) var(--space-xs) var(--chronicle-shadow-soft);
  transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}

.top-bookmarked-guild-avatar,
.top-bookmarked-guild-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.top-bookmarked-guild-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: radial-gradient(circle at 35% 28%, var(--chronicle-gold-wash), var(--chronicle-ink-raised) 70%);
}

.top-bookmarked-guild-avatar img { object-fit: cover; }

.top-bookmarked-guild.is-current {
  border-color: var(--chronicle-gold-bright);
  box-shadow: inset 0 0 0 0.15rem var(--chronicle-void), 0 0 0 0.125rem var(--chronicle-gold-wash), 0 0 var(--space-sm) var(--chronicle-gold-wash);
}

.top-nav-menu,
.top-nav-actions,
.header-actions,
.events-overview,
.site-footer-inner {
  align-items: center;
}

.top-nav-link {
  min-height: 2.75rem;
  padding-inline: var(--space-md);
  color: var(--chronicle-text-soft);
  border: 1px solid transparent;
  border-radius: 0;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.top-nav-link svg { color: var(--chronicle-gold); }

.top-nav-link.active {
  color: var(--chronicle-gold-bright);
  background: linear-gradient(180deg, var(--chronicle-gold-wash), color-mix(in oklch, var(--chronicle-ink-raised) 92%, transparent));
  border-color: var(--chronicle-gold-line);
  box-shadow: inset 0 -0.125rem 0 var(--chronicle-gold);
}

.top-nav-link:active { transform: translateY(1px); }
.top-nav-link[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Sign in: outlined action link matching the nav-link treatment. */
.top-nav-signin {
  color: var(--chronicle-gold-bright);
  border-color: var(--chronicle-gold-line);
  background: linear-gradient(180deg, var(--chronicle-gold-wash), color-mix(in oklch, var(--chronicle-ink-raised) 92%, transparent));
}

.top-nav-signin:hover,
.top-nav-signin:focus-visible {
  color: var(--chronicle-gold-bright);
  border-color: var(--chronicle-gold);
  background: var(--chronicle-gold-wash);
}

.top-user {
  background: transparent !important;
  border: 1px solid transparent !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  transition: background var(--dur-micro), border-color var(--dur-micro);
}

.top-user:hover,
.top-user[aria-expanded="true"] {
  background: rgba(197, 160, 89, 0.14) !important;
  border-color: var(--chronicle-gold-line) !important;
}

.top-account-menu {
  border-color: var(--chronicle-gold-line);
  background: var(--chronicle-ink-raised);
}

.top-user-avatar {
  width: 2rem !important;
  height: 2rem !important;
  color: var(--chronicle-gold-bright) !important;
  background: transparent !important;
  border: 1px solid var(--chronicle-gold) !important;
  box-shadow: 0 0 8px rgba(197, 160, 89, 0.25) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

.top-user-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

.top-user-name {
  color: var(--chronicle-text) !important;
  font-weight: 500 !important;
}

.top-account-menu {
  box-shadow: 0 var(--space-md) var(--space-xl) var(--chronicle-shadow);
}

.page-header,
.events-page-body .page-header {
  width: min(calc(100% - var(--space-xl)), 92rem);
  margin: var(--space-xl) auto 0;
  padding: var(--space-xl) var(--space-xl) var(--space-2xl);
  background: linear-gradient(90deg, var(--chronicle-backdrop), var(--chronicle-backdrop-soft));
  border: 1px solid var(--chronicle-gold-line);
  border-block-end-width: var(--space-2xs);
}

.page-header-inner {
  max-width: none;
}

.page-title,
.page-header h1,
.events-page-body .page-header h1 {
  color: var(--chronicle-text);
  text-shadow: none;
}

.page-subtitle {
  max-width: 65ch;
  margin-block-start: var(--space-sm);
  color: var(--chronicle-text-soft);
  font-size: 1rem;
}

.landing-kicker {
  color: var(--chronicle-gold-bright);
}

.page-content {
  width: min(calc(100% - var(--space-xl)), 92rem);
  max-width: 92rem;
  margin-inline: auto;
}

.events-overview {
  min-height: 13rem;
  margin-block-start: var(--space-xl);
  padding: var(--space-xl) var(--space-xl) var(--space-2xl);
  background: linear-gradient(90deg, var(--chronicle-backdrop), transparent);
  border-inline-start: var(--space-2xs) solid var(--chronicle-gold);
}

.events-overview .section-heading h1 {
  max-width: 18ch;
  color: var(--chronicle-text);
}

.raid-list-section {
  padding-block-start: 0;
  padding-block-end: var(--space-3xl);
}

.sc-section-label,
.events-page-body .sc-section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-end: var(--space-lg);
  color: var(--chronicle-paper-raised) !important;
}

.sc-section-label::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--chronicle-gold);
}

.sc-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-lg);
  align-items: stretch;
}

.sc-card {
  grid-column: auto !important;
  min-width: 0;
  height: 100%;
  color: var(--chronicle-paper-ink);
}

.sc-card-front { height: 100%; }

.sc-card-front,
.sc-card-back,
.card,
.modal-content,
dialog {
  color: var(--chronicle-paper-ink);
  background-color: var(--chronicle-paper);
  background-image:
    linear-gradient(145deg, var(--chronicle-paper-glaze), transparent),
    url("/assets/chronicle-paper-texture-v1.webp");
  background-blend-mode: soft-light, luminosity;
  background-size: auto, 24rem 24rem;
  border-color: var(--chronicle-paper-rule);
}

.sc-card-front {
  box-shadow: 0 var(--space-sm) var(--space-xl) var(--chronicle-shadow), inset 0 0 0 var(--space-2xs) var(--chronicle-paper);
}

.sc-card-back {
  background-color: var(--chronicle-paper-deep);
}

.sc-banner {
  border: 1px solid var(--chronicle-paper-rule);
}

.sc-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, var(--chronicle-backdrop-soft));
  pointer-events: none;
}

.sc-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.8vw, 2rem);
  font-weight: 600;
  line-height: 1.08;
}

.sc-meta-row,
.sc-footer,
.sc-progress-num,
.sc-time {
  font-variant-numeric: tabular-nums;
}

.button,
button,
[role="button"] {
  min-height: 2.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.button-primary {
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-gold);
  border-color: var(--chronicle-gold-bright);
  box-shadow: inset 0 0 0 1px var(--chronicle-gold-deep);
}

.button-secondary,
.button-ghost {
  color: var(--chronicle-text);
  background: var(--chronicle-ink-raised);
  border-color: var(--chronicle-gold-line);
}

.card .button-secondary,
.card .button-ghost,
dialog .button-secondary,
dialog .button-ghost {
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-paper-raised);
  border-color: var(--chronicle-paper-rule);
}

.button:active { transform: translateY(1px); }
.button:disabled,
.button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

input,
select,
textarea,
.input {
  min-height: 2.75rem;
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-paper-raised);
  border: 1px solid var(--chronicle-paper-rule);
  outline: 2px solid transparent;
  outline-offset: 1px;
  border-radius: 0;
}

textarea { min-height: 7rem; resize: vertical; }
input::placeholder,
textarea::placeholder { color: var(--chronicle-paper-muted); font-weight: 400; opacity: 1; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.input:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--chronicle-focus);
  outline-offset: 2px;
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--chronicle-paper-deep);
}

[aria-invalid="true"] {
  border-color: var(--chronicle-danger);
}

.card label,
.modal-content label,
dialog label,
.sc-card label {
  color: var(--chronicle-paper-ink);
}

.card p,
.card small,
.card .text-muted,
dialog p,
dialog small {
  color: var(--chronicle-paper-muted);
}

.card h1,
.card h2,
.card h3,
.card h4,
dialog h1,
dialog h2,
dialog h3 {
  color: var(--chronicle-paper-ink);
}

.dashboard-stats,
.guild-stats-grid {
  gap: var(--space-sm);
}

.stat-card,
.dashboard-table-wrap,
.chart-card,
.dash-server,
.dashboard-tool-card,
.athena-data-card,
.event-command-facts,
.event-command-delivery-grid {
  color: var(--chronicle-text);
  background: var(--chronicle-backdrop);
  border-color: var(--chronicle-gold-line);
  border-radius: 0;
  box-shadow: none;
}

.stat-card-value,
.dashboard-table-wrap h2,
.dashboard-table-wrap h3,
.chart-card h2,
.chart-card h3,
.dash-server-name {
  color: var(--chronicle-text);
}

.stat-card-label,
.dashboard-table-wrap p,
.chart-card p,
.dash-server-sub {
  color: var(--chronicle-text-soft);
}

table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th {
  font-family: var(--font-outlier);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

th,
td {
  border-color: var(--chronicle-rule-soft);
}

tbody tr {
  transition: background-color var(--dur-short) var(--ease-out);
}

.badge {
  border-radius: 0;
}

dialog,
.modal-content {
  position: fixed;
  inset: 0;
  width: min(calc(100% - var(--space-xl)), 48rem);
  max-height: min(84dvh, 48rem);
  height: fit-content;
  margin: auto;
  padding: var(--space-xl);
  border: 1px solid var(--chronicle-paper-rule);
  box-shadow: 0 var(--space-lg) var(--space-2xl) var(--chronicle-shadow);
}

dialog::backdrop {
  background: var(--chronicle-backdrop);
  backdrop-filter: blur(var(--space-2xs));
}

/* The emoji artwork carries its own square and edge, so a parchment plate and
   rule behind it only added a second frame in a colour the art does not use. */
.role-icon,
.role-class-icon,
img[src*="/images/classes/"] {
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0 !important;
  filter: none;
}

.site-footer {
  margin-block-start: var(--space-3xl);
  color: var(--chronicle-text-soft);
  background: var(--chronicle-backdrop);
  border-block-start: 1px solid var(--chronicle-gold-line);
}

.site-footer::before {
  content: "PROJECT ATHENA";
  display: block;
  width: min(calc(100% - var(--space-xl)), 92rem);
  margin-inline: auto;
  padding-block-start: var(--space-lg);
  color: var(--chronicle-text-soft);
  font-family: var(--font-outlier);
  font-size: clamp(0.75rem, 1.1vw, 1rem);
  line-height: 1;
  letter-spacing: 0.12em;
  opacity: 0.7;
}

.site-footer a { color: var(--chronicle-gold-bright); }

/* --------------------------------------------------------------------------
   Iteration 2 — parchment operations, archive docs, restrained data color
   -------------------------------------------------------------------------- */

.nwnew-plan .nwnew-panel,
.nwnew-compose .nwnew-panel,
.role-emote-dialog {
  color: var(--chronicle-paper-ink);
  background-color: oklch(81% 0.012 82);
  background-image:
    linear-gradient(oklch(23% 0.012 70 / 0.1), oklch(23% 0.012 70 / 0.1)),
    url("/assets/chronicle-paper-texture-v1.webp");
  background-blend-mode: normal, luminosity;
  border: 1px solid var(--chronicle-paper-rule);
  border-radius: 0;
  box-shadow:
    0 0 0 0.25rem var(--chronicle-paper-edge),
    0 1.25rem 3.5rem var(--chronicle-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nwnew-plan .nwnew-panel-head,
.nwnew-compose .nwnew-panel-head,
.role-emote-dialog-head {
  color: var(--chronicle-paper-ink);
  background: color-mix(in oklch, var(--chronicle-paper-deep) 88%, transparent);
  border-color: var(--chronicle-paper-rule);
}

.nwnew-plan .nwnew-panel-head strong,
.nwnew-compose .nwnew-panel-head strong,
.role-emote-dialog-head strong,
.role-class-option,
.role-emoji-section h4 {
  color: var(--chronicle-paper-ink);
}

.nwnew-panel-head > span:not(.nwnew-tier-chevron) {
  width: auto;
  height: auto;
  min-width: 1.4rem;
  color: var(--chronicle-paper-muted);
  background: transparent;
  border-radius: 0;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 700;
}

.nwnew-plan .nwnew-field > span,
.nwnew-plan .nwnew-days > span,
.nwnew-compose .nwnew-field > span,
.nwnew-delivery .label,
.nwnew-capacity-strip span,
.nwnew-capacity-strip p {
  color: var(--chronicle-paper-muted) !important;
}

.nwnew-capacity-strip strong {
  color: var(--chronicle-paper-ink) !important;
}

.nwnew-plan .input,
.nwnew-compose .input,
.nwnew-plan select,
.nwnew-compose select,
.nwnew-plan textarea,
.nwnew-compose textarea,
.role-emote-search input {
  color: var(--chronicle-paper-ink);
  background: color-mix(in oklch, var(--chronicle-paper-raised) 92%, transparent);
  border-color: var(--chronicle-paper-rule);
  border-radius: 0;
}

.nwnew-plan .input:focus,
.nwnew-compose .input:focus,
.role-emote-search input:focus {
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-paper-raised);
  border-color: var(--chronicle-gold);
  box-shadow: 0 0 0 0.1875rem var(--chronicle-gold-wash);
}

.nwnew-shell .day-check-box,
.nwnew-template-stack .template-button,
.nwnew-delivery label[style],
.nwnew-role-menu summary,
.nwnew-role-option,
.nwnew-capacity-strip,
.role-emote-tabs button,
.role-emote-option {
  color: var(--chronicle-paper-ink);
  background: color-mix(in oklch, var(--chronicle-paper-raised) 82%, transparent);
  border-color: var(--chronicle-paper-rule) !important;
  border-radius: 0;
}

.nwnew-template-stack .template-button span,
.nwnew-template-stack .template-button strong,
.nwnew-role-option,
.nwnew-role-menu summary {
  color: var(--chronicle-paper-ink);
}

.nwnew-shell .day-check input:checked + .day-check-box,
.nwnew-template-stack .template-button.active,
.nwnew-template-stack .template-button:hover,
.role-emote-tabs button.active,
.role-emote-option.active,
.role-emote-option:hover {
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-gold-wash);
  border-color: var(--chronicle-gold) !important;
}

.nwnew-shell .day-check {
  border: 0 !important;
  background: transparent !important;
}

.nwnew-shell .day-check input:focus-visible + .day-check-box {
  outline: 0;
  border-color: var(--chronicle-gold) !important;
  box-shadow: 0 0 0 0.125rem color-mix(in oklch, var(--chronicle-gold) 35%, transparent);
}

.nwnew-shell .day-check input:checked + .day-check-box {
  color: var(--chronicle-paper-ink) !important;
  background: color-mix(in oklch, var(--chronicle-gold-wash) 70%, var(--chronicle-paper-raised)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--chronicle-gold) 25%, transparent);
}

.nwnew-template-stack .template-button,
.nwnew-template-stack .template-button:hover {
  color: var(--chronicle-paper-ink) !important;
  background: color-mix(in oklch, var(--chronicle-paper-raised) 82%, transparent) !important;
  border-color: var(--chronicle-paper-rule) !important;
  box-shadow: none !important;
  transform: none !important;
}

.nwnew-template-stack .template-button span,
.nwnew-template-stack .template-button strong {
  color: var(--chronicle-paper-ink) !important;
  background: transparent !important;
}

.nwnew-template-stack .template-button.active,
.nwnew-template-stack .template-button.active:hover {
  background: color-mix(in oklch, var(--chronicle-gold-wash) 68%, var(--chronicle-paper-raised)) !important;
  border-color: var(--chronicle-gold) !important;
}

/* Roster marks show their real artwork; every icon shares one plain frame so a
   picked class icon and a default mark sit at the same size. */
.nwnew-role-table .role-icon-preview {
  display: inline-grid;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 2.6rem;
  place-items: center;
  background: transparent;
  border: 0;
}

.nwnew-role-table .role-icon-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.nwnew-role-options {
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-paper-raised);
  border-color: var(--chronicle-paper-rule);
}

.nwnew-role-table output { color: var(--chronicle-paper-ink) !important; }

.nwnew-role-table input[type="range"]:disabled {
  opacity: 1;
  filter: brightness(0.78) contrast(1.15);
  cursor: default;
}

.nwnew-preview .discord-select,
.event-discord-preview .discord-select {
  color: #b5bac1 !important;
  background-color: #1e1f22 !important;
  border: 1px solid #3f4147 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: Arial, sans-serif;
}

.nwnew-preview .discord-select:disabled,
.event-discord-preview .discord-select:disabled {
  color: #b5bac1 !important;
  background-color: #4e5058 !important;
  opacity: 0.62;
}

.nwnew-preview .discord-button-secondary,
.event-discord-preview .discord-button-secondary {
  color: #dbdee1 !important;
  background: #4e5058 !important;
  border: 0 !important;
  border-radius: 4px !important;
}

.nwnew-preview .discord-button-danger,
.event-discord-preview .discord-button-danger {
  color: #fff !important;
  background: #ed4245 !important;
  border: 0 !important;
  border-radius: 4px !important;
}

.discord-embed-field-name img,
.discord-embed-field-name .role-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 2px !important;
  background: transparent !important;
  border: none !important;
}

/* --------------------------------------------------------------------------
   GBR & Custom Event — Silver Palace parchment theme overrides
   -------------------------------------------------------------------------- */

/* Scoped to `body` so the folio's bodyClass wrapper div (see layout.ts folio
   mode) does not paint an opaque void panel over the folio background. */
body.nodewar-new-body,
body.gbr-create-body,
body.custom-create-body {
  background: var(--chronicle-void) !important;
}

/* Inside the folio stage the wrapper is a plain block: it carries the page's
   scoped styles but never its own backdrop. */
.folio-body-scope {
  background: transparent;
  min-height: 100%;
}

/* One backdrop per folio, not one per page. Each create page ships its own
   full-bleed art (nodewar.jpg, gbr.png, custom_event.jpg), which inside the
   folio stacks a second competing background over the guild art and makes the
   panel jump on every sidebar click. Strip the art here and let the shells act
   as plain content wrappers; the standalone routes keep their own look. */
.folio-body-scope .nwnew-shell,
.folio-body-scope .gbr-shell {
  background: transparent !important;
  background-color: transparent !important;
  min-height: 0 !important;
  padding: 0 !important;
}

/* Same rule for the stats family (Player Performance, Guild Performance, Guild
   Attendance, War History). Those pages carry no bodyClass, so they are scoped
   by the stage instead. Each pins a fixed stats.png layer behind itself via
   ::before and washes an opaque panel over it — inside the folio that buries
   the guild art the shell is built around. */
.events-folio-content .athena-data-page {
  min-height: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.events-folio-content .athena-data-page::before {
  display: none;
}

/* The picker sizes itself to `100vh - 60px`, which assumes the standalone page.
   Inside the folio it also has to clear the app nav, the masthead, and the
   stage padding — without this the cards run past the fold and need scrolling. */
.folio-body-scope .event-type-page {
  height: calc(
    100dvh - var(--chronicle-nav-height) - var(--events-folio-masthead-h) -
    (2 * var(--events-folio-stage-pad))
  );
  min-height: 20rem;
  max-height: 40rem;
  padding: 0;
}

.nodewar-new-body .nwnew-shell {
  color: var(--chronicle-text);
  background:
    linear-gradient(180deg, rgba(11, 14, 19, 0.45) 0%, rgba(11, 14, 19, 0.35) 45%, rgba(11, 14, 19, 0.65) 100%),
    radial-gradient(circle at 24% 12%, rgba(197, 160, 89, 0.2), transparent 35%),
    url('/assets/nodewar.webp') center/cover fixed no-repeat,
    var(--chronicle-void) !important;
}

.gbr-create-body .gbr-shell {
  color: var(--chronicle-text);
  background:
    linear-gradient(180deg, rgba(11, 14, 19, 0.45) 0%, rgba(11, 14, 19, 0.35) 45%, rgba(11, 14, 19, 0.65) 100%),
    radial-gradient(circle at 24% 12%, rgba(197, 160, 89, 0.2), transparent 35%),
    url('/assets/gbr.webp') center/cover fixed no-repeat,
    var(--chronicle-void) !important;
}

.custom-create-body .gbr-shell {
  color: var(--chronicle-text);
  background:
    linear-gradient(180deg, rgba(11, 14, 19, 0.45) 0%, rgba(11, 14, 19, 0.35) 45%, rgba(11, 14, 19, 0.65) 100%),
    radial-gradient(circle at 24% 12%, rgba(197, 160, 89, 0.2), transparent 35%),
    url('/assets/custom_event.jpg') center/cover fixed no-repeat,
    var(--chronicle-void) !important;
}

.gbr-create-body .gbr-title h1,
.custom-create-body .gbr-title h1 {
  color: var(--chronicle-gold-bright) !important;
  font-family: var(--font-display);
}

.gbr-create-body .gbr-title span,
.custom-create-body .gbr-title span {
  color: var(--chronicle-text-muted) !important;
  font-family: var(--font-outlier);
  letter-spacing: 0.12em;
}

/* Custom event form: Schedule is the tall panel, so it spans two rows and the
   short Title and Description panels stack beside it. In a plain 2-column grid
   Title stretched to Schedule's height and left a mostly empty paper box. */
@media (min-width: 1101px) {
  .custom-create-body .gbr-grid > .gbr-panel:nth-child(1) { grid-row: span 2; }
}

/* Panels — parchment paper card styling */
.gbr-create-body .gbr-panel,
.custom-create-body .gbr-panel {
  color: var(--chronicle-paper-ink);
  background-color: oklch(81% 0.012 82);
  background-image:
    linear-gradient(oklch(23% 0.012 70 / 0.1), oklch(23% 0.012 70 / 0.1)),
    url("/assets/chronicle-paper-texture-v1.webp");
  background-blend-mode: normal, luminosity;
  border: 1px solid var(--chronicle-paper-rule) !important;
  border-radius: 0 !important;
  box-shadow:
    0 0 0 0.25rem var(--chronicle-paper-edge),
    0 1.25rem 3.5rem var(--chronicle-shadow);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.gbr-create-body .gbr-panel:hover,
.custom-create-body .gbr-panel:hover {
  border-color: var(--chronicle-gold) !important;
  box-shadow:
    0 0 0 0.25rem var(--chronicle-paper-edge),
    0 1.25rem 3.5rem var(--chronicle-shadow),
    0 0 0.5rem var(--chronicle-gold-wash);
}

/* Panel headers */
.gbr-create-body .gbr-panel-head,
.custom-create-body .gbr-panel-head {
  color: var(--chronicle-paper-ink) !important;
  background: color-mix(in oklch, var(--chronicle-paper-deep) 88%, transparent) !important;
  border-color: var(--chronicle-paper-rule) !important;
  font-family: var(--font-body);
}

.gbr-create-body .gbr-panel-num,
.custom-create-body .gbr-panel-num {
  color: var(--chronicle-paper-muted) !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-family: var(--font-outlier);
  font-weight: 700;
}

/* Panel description footers */
.gbr-create-body .gbr-panel-desc,
.custom-create-body .gbr-panel-desc {
  color: var(--chronicle-paper-muted) !important;
  background: color-mix(in oklch, var(--chronicle-paper-deep) 60%, transparent) !important;
  border-color: var(--chronicle-paper-rule) !important;
}

/* Labels */
.gbr-create-body .gbr-label,
.custom-create-body .gbr-label {
  color: var(--chronicle-paper-muted) !important;
  font-family: var(--font-outlier);
  letter-spacing: 0.06em;
}

/* Inputs & selects — raised parchment */
.gbr-create-body .gbr-input,
.custom-create-body .gbr-input {
  color: var(--chronicle-paper-ink) !important;
  background: color-mix(in oklch, var(--chronicle-paper-raised) 92%, transparent) !important;
  border-color: var(--chronicle-paper-rule) !important;
  border-radius: 0 !important;
  background-image: none !important;
}

.gbr-create-body .gbr-input:focus,
.custom-create-body .gbr-input:focus {
  color: var(--chronicle-paper-ink) !important;
  background: var(--chronicle-paper-raised) !important;
  border-color: var(--chronicle-gold) !important;
  box-shadow: 0 0 0 0.1875rem var(--chronicle-gold-wash) !important;
}

.gbr-create-body .gbr-input:hover,
.custom-create-body .gbr-input:hover {
  color: var(--chronicle-paper-ink) !important;
  background: color-mix(in oklch, var(--chronicle-paper-raised) 96%, transparent) !important;
  border-color: var(--chronicle-gold-line) !important;
}

.gbr-create-body .gbr-input::placeholder,
.custom-create-body .gbr-input::placeholder {
  /* Lighter and regular weight so an example never reads as a typed value;
     still 4.6:1 on the field. */
  color: #6b5a3e !important;
  font-weight: 400;
}

.gbr-create-body select.gbr-input option,
.custom-create-body select.gbr-input option {
  background: var(--chronicle-paper) !important;
  color: var(--chronicle-paper-ink) !important;
}

/* Day buttons */
.gbr-create-body .gbr-day-btn,
.custom-create-body .gbr-day-btn {
  color: var(--chronicle-paper-ink) !important;
  background: color-mix(in oklch, var(--chronicle-paper-raised) 82%, transparent) !important;
  border-color: var(--chronicle-paper-rule) !important;
  border-radius: 0 !important;
}

.gbr-create-body .gbr-day-btn:hover,
.custom-create-body .gbr-day-btn:hover {
  background: var(--chronicle-gold-wash) !important;
  border-color: var(--chronicle-gold-line) !important;
  color: var(--chronicle-paper-ink) !important;
  box-shadow: none !important;
}

.gbr-create-body .gbr-day-btn.active,
.custom-create-body .gbr-day-btn.active {
  background: color-mix(in oklch, var(--chronicle-gold-wash) 70%, var(--chronicle-paper-raised)) !important;
  border-color: var(--chronicle-gold) !important;
  color: var(--chronicle-paper-ink) !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--chronicle-gold) 25%, transparent) !important;
}

/* Boss cards (GBR) */
.gbr-create-body .gbr-boss-card {
  color: var(--chronicle-paper-ink) !important;
  background: color-mix(in oklch, var(--chronicle-paper-raised) 82%, transparent) !important;
  border-color: var(--chronicle-paper-rule) !important;
  border-radius: 0 !important;
}

.gbr-create-body .gbr-boss-card:hover {
  background: color-mix(in oklch, var(--chronicle-paper-raised) 95%, transparent) !important;
  border-color: var(--chronicle-gold-line) !important;
}

.gbr-create-body .gbr-boss-card.dragging {
  border-color: var(--chronicle-gold) !important;
}

.gbr-create-body .gbr-boss-num {
  color: var(--chronicle-paper-muted) !important;
  font-family: var(--font-outlier);
}

.gbr-create-body .gbr-boss-name {
  color: var(--chronicle-paper-ink) !important;
}

.gbr-create-body .gbr-boss-drag {
  color: var(--chronicle-paper-muted) !important;
}

.gbr-create-body .gbr-boss-card:hover .gbr-boss-drag {
  color: var(--chronicle-paper-ink) !important;
}

.gbr-create-body .gbr-boss-img {
  border-color: var(--chronicle-paper-rule) !important;
  border-radius: 0 !important;
}

/* Live Preview panel — keep dark Discord-native bg */
.gbr-create-body .gbr-panel-preview,
.custom-create-body .gbr-panel-preview {
  background: var(--chronicle-ink) !important;
  background-image: none !important;
  border-color: var(--chronicle-gold-line) !important;
  box-shadow: 0 1.25rem 3.5rem var(--chronicle-shadow) !important;
}

.gbr-create-body .gbr-panel-preview .gbr-panel-head,
.custom-create-body .gbr-panel-preview .gbr-panel-head {
  color: var(--chronicle-text-soft) !important;
  background: var(--chronicle-ink-raised) !important;
  border-color: var(--chronicle-gold-line) !important;
}

.gbr-create-body .gbr-preview-body,
.custom-create-body .gbr-preview-body {
  background: #2b2d31 !important;
  border-radius: 0 !important;
}

/* Discord embed styling for GBR/Custom previews */
.gbr-create-body .discord-embed,
.custom-create-body .discord-embed {
  background: #2b2d31 !important;
  border-radius: 0 !important;
}

.gbr-create-body .discord-embed-title,
.custom-create-body .discord-embed-title {
  color: #00a8fc !important;
}

.gbr-create-body .discord-avatar,
.custom-create-body .discord-avatar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.gbr-create-body .discord-avatar-img,
.custom-create-body .discord-avatar-img {
  border: 0 !important;
  box-shadow: none !important;
}

/* Buttons */
.gbr-create-body .button-primary,
.custom-create-body .button-primary {
  color: var(--chronicle-paper-ink) !important;
  background: var(--chronicle-gold) !important;
  border-color: var(--chronicle-gold) !important;
  border-radius: 0 !important;
}

.gbr-create-body .button-primary:hover,
.custom-create-body .button-primary:hover {
  background: var(--chronicle-gold-bright) !important;
  border-color: var(--chronicle-gold-bright) !important;
  box-shadow: 0 4px 16px var(--chronicle-gold-wash) !important;
}

.gbr-create-body .button-ghost,
.custom-create-body .button-ghost {
  color: var(--chronicle-text-soft) !important;
  border-color: var(--chronicle-gold-line) !important;
  border-radius: 0 !important;
}

.gbr-create-body .button-ghost:hover,
.custom-create-body .button-ghost:hover {
  background: var(--chronicle-gold-wash) !important;
  color: var(--chronicle-text) !important;
}

/* Custom event specific — title input and textarea */
.custom-create-body #custom-title,
.custom-create-body #custom-description {
  color: var(--chronicle-paper-ink) !important;
  font-family: var(--font-body);
}

.athena-data-page .card:has(.score-history-card) {
  width: min(100%, 58rem);
  padding: 0 !important;
  overflow: hidden;
  color: var(--chronicle-text);
  background: color-mix(in oklch, var(--chronicle-ink) 94%, transparent) !important;
  border: 1px solid var(--chronicle-gold-line) !important;
  box-shadow: 0 1.25rem 3rem var(--chronicle-shadow);
}

.score-history-grid {
  display: grid;
  grid-template-columns: minmax(0, 58rem);
  gap: var(--space-lg);
}

.athena-data-page .score-history-card {
  min-height: 15rem;
  color: var(--chronicle-text);
  background: transparent;
  border: 0;
}

.athena-data-page .score-history-card-image {
  flex-basis: 38%;
  min-width: 18rem;
  background: var(--chronicle-void);
  border-color: var(--chronicle-gold-line);
  position: relative;
}

.athena-data-page .score-history-card-image img {
  object-fit: contain;
  background: var(--chronicle-void);
}

/* Zoom button overlaid on the scoreboard thumbnail */
.score-history-zoom {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chronicle-gold-bright);
  background: color-mix(in oklch, var(--chronicle-void) 78%, transparent);
  border: 1px solid var(--chronicle-gold-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.score-history-zoom svg {
  width: 0.9rem;
  height: 0.9rem;
}
.score-history-zoom:hover {
  background: var(--chronicle-gold-wash);
  border-color: var(--chronicle-gold);
}

/* Fullscreen lightbox for scoreboard images */
.score-history-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: oklch(0.05 0.01 60 / 0.92);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.score-history-lightbox[hidden] {
  display: none;
}
.score-history-lightbox-body {
  position: relative;
  max-width: min(94vw, 120rem);
  max-height: 92vh;
  margin: 0;
  padding: 0;
}
.score-history-lightbox-body img {
  display: block;
  max-width: 100%;
  max-height: 92vh;
  object-fit: contain;
  border: 1px solid var(--chronicle-gold-line);
  border-radius: var(--radius-sm);
  box-shadow: 0 var(--space-lg) var(--space-2xl) var(--chronicle-shadow-strong, oklch(0 0 0 / 0.6));
}
.score-history-lightbox-close {
  position: absolute;
  top: -2.75rem;
  right: -0.25rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--chronicle-gold-bright);
  background: var(--chronicle-ink-raised);
  border: 1px solid var(--chronicle-gold-line);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out);
}
.score-history-lightbox-close:hover {
  background: var(--chronicle-gold-wash);
}
body.score-history-lightbox-open {
  overflow: hidden;
}

.athena-data-page .score-history-card-body {
  padding: var(--space-xl);
}

.athena-data-page .score-history-card-body h3,
.athena-data-page .score-history-card-stat-value {
  color: var(--chronicle-text) !important;
}

.athena-data-page .score-history-card-body > div:nth-child(2),
.athena-data-page .score-history-card-stat-label {
  color: var(--chronicle-text-soft) !important;
}

.role-emote-dialog {
  width: min(46rem, calc(100% - var(--space-xl)));
  max-height: min(82dvh, 48rem);
}

.role-emote-grid { padding: var(--space-lg); }
.role-emote-close { color: var(--chronicle-paper-muted); }
.role-emote-search input::placeholder { color: var(--chronicle-paper-muted); }
.role-class-option img { background: var(--chronicle-paper-raised); }

.member-raid-card .featured-raid-footer b,
.member-raid-card .featured-raid-footer a,
.member-raid-card .featured-raid-footer,
.member-raid-card p,
.member-raid-card time {
  color: var(--chronicle-paper-ink);
}

.member-raid-card .featured-raid-footer {
  border-color: var(--chronicle-paper-rule);
}

body[data-page="member-view"] .card,
body[data-page="member-view"] .card > div,
body[data-page="member-view"] .card span:not(.badge) {
  color: var(--chronicle-paper-ink) !important;
}

body[data-page="member-view"] .card p,
body[data-page="member-view"] .card > div > span:last-child {
  color: var(--chronicle-paper-muted) !important;
}

.docs-hero {
  position: relative;
  overflow: hidden;
  color: var(--chronicle-paper-ink);
  background-color: var(--chronicle-paper);
  background-image:
    radial-gradient(circle at 84% 20%, transparent 0 3.5rem, var(--chronicle-paper-rule) 3.6rem 3.65rem, transparent 3.75rem),
    linear-gradient(112deg, transparent 0 66%, var(--chronicle-gold-wash) 66% 100%),
    url("/assets/chronicle-paper-texture-v1.webp");
  background-blend-mode: normal, soft-light, luminosity;
  border: 1px solid var(--chronicle-paper-rule);
  border-radius: 0;
  box-shadow: 0.35rem 0.35rem 0 var(--chronicle-paper-edge), 0 1.5rem 3.5rem var(--chronicle-shadow);
}

.docs-hero::after {
  content: "ATHENA / OPERATIONS ARCHIVE";
  position: absolute;
  inset-block-end: var(--space-lg);
  inset-inline-end: var(--space-xl);
  color: var(--chronicle-paper-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

.docs-hero h1,
.docs-hero p { color: var(--chronicle-paper-ink); }

.docs-hero-kicker {
  margin: 0 0 var(--space-sm);
  color: var(--chronicle-paper-muted) !important;
  font-family: var(--font-outlier);
  font-size: 0.75rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.docs-hero .button {
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-paper-raised) !important;
  border-color: var(--chronicle-paper-rule) !important;
}

.docs-sidebar,
.docs-section > div,
.docs-section > div > div {
  border-radius: 0 !important;
}

.docs-sidebar {
  color: var(--chronicle-paper-ink);
  background-color: var(--chronicle-paper) !important;
  background-image: url("/assets/chronicle-paper-texture-v1.webp") !important;
  background-blend-mode: luminosity;
  border-color: var(--chronicle-paper-rule) !important;
  box-shadow: 0.25rem 0.25rem 0 var(--chronicle-paper-edge);
}

.docs-nav-mark {
  display: inline-grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  flex: 0 0 auto;
  color: var(--chronicle-paper-muted);
  border: 1px solid var(--chronicle-paper-rule);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.docs-nav-link { color: var(--chronicle-paper-muted) !important; }
.docs-nav-link:hover,
.docs-nav-link.active {
  color: var(--chronicle-paper-ink) !important;
  background: var(--chronicle-gold-wash) !important;
  border-left-color: var(--chronicle-gold) !important;
}

.docs-section > div:first-child {
  color: var(--chronicle-paper-ink) !important;
  background-color: var(--chronicle-paper) !important;
  background-image: linear-gradient(var(--chronicle-paper-wash), var(--chronicle-paper-wash)), url("/assets/chronicle-paper-texture-v1.webp") !important;
  background-blend-mode: soft-light, luminosity;
  border: 1px solid var(--chronicle-paper-rule) !important;
  border-left: 0.25rem solid var(--chronicle-gold) !important;
  box-shadow: 0.25rem 0.25rem 0 var(--chronicle-paper-edge);
}

.docs-section > div:first-child h2,
.docs-section > div:first-child p { color: var(--chronicle-paper-ink) !important; }

.docs-content h2,
.docs-content h3,
.docs-content code { color: var(--chronicle-gold-bright) !important; }

.docs-content [style*="font-size:2em"],
.docs-content h3::first-letter {
  filter: grayscale(1) sepia(1) saturate(1.2);
}

.docs-content [style*="background:var(--surface)"],
.docs-content [style*="background:linear-gradient"]:not(:first-child) {
  background: var(--chronicle-backdrop) !important;
  border-color: var(--chronicle-gold-line) !important;
}

/* ── War analytics ─────────────────────────────────────────────
   Charts already draw in the Chronicle gold palette, so they are shown as
   drawn; desaturating the canvas flattened every series to the same grey and
   made stacked bars unreadable. */

.chart-card {
  position: relative;
  padding: 1.15rem 1.25rem 1.25rem;
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--chronicle-ink-raised) 92%, transparent),
      color-mix(in oklch, var(--chronicle-ink) 94%, transparent));
  border: 1px solid var(--chronicle-gold-line) !important;
  border-radius: 0;
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--chronicle-gold) 14%, transparent);
}

/* A hairline that reads as a ruled heading rather than a card chrome. */
.chart-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid color-mix(in oklch, var(--chronicle-gold) 22%, transparent);
}

.chart-card-title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--chronicle-gold-bright);
}

.chart-card-subtitle {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--chronicle-text-muted);
}

/* Stated when a series needs more wars than the guild has logged, so the panel
   explains itself instead of rendering an empty grid. */
.chart-empty {
  display: grid;
  place-items: center;
  gap: 0.4rem;
  min-height: 8rem;
  padding: 1.5rem 1rem;
  text-align: center;
  border: 1px dashed color-mix(in oklch, var(--chronicle-gold) 26%, transparent);
}

.chart-empty strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--chronicle-gold);
}

.chart-empty span {
  max-width: 26rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--chronicle-text-muted);
}

/* 120px left no room for a legend, rotated player names, and the plot itself,
   so the side-rail charts rendered as a squashed strip. */
.dashboard-split-side .chart-container {
  height: 200px;
}

/* Explains a chart's reading rather than leaving the reader to infer it. */
.chart-note {
  margin: 0.85rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid color-mix(in oklch, var(--chronicle-gold) 16%, transparent);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--chronicle-text-muted);
}

.stat-card,
.stats-leader-card,
.dashboard-tool-card {
  border-color: var(--chronicle-gold-line) !important;
}

.stat-card-value,
.stat-card-change,
.stats-leader-card [style*="color"] {
  color: var(--chronicle-gold-bright) !important;
}

.dashboard-split-side > .card {
  color: var(--chronicle-paper-ink);
}

.dashboard-split-side > .card .chart-card-title,
.dashboard-split-side > .card p {
  color: var(--chronicle-paper-ink) !important;
}

.dashboard-split-side > .card span {
  color: var(--chronicle-paper-muted) !important;
}

#class-modal .player-class-dialog {
  color: var(--chronicle-paper-ink);
  background-color: var(--chronicle-paper);
  background-image: linear-gradient(var(--chronicle-paper-wash), var(--chronicle-paper-wash)), url("/assets/chronicle-paper-texture-v1.webp");
  background-blend-mode: soft-light, luminosity;
  border: 1px solid var(--chronicle-paper-rule);
  border-radius: 0;
  box-shadow: 0 0 0 0.25rem var(--chronicle-paper-edge), 0 1.5rem 4rem var(--chronicle-shadow);
}

#class-modal .player-class-dialog h3,
#class-modal .player-class-dialog button,
#class-modal .class-option span {
  color: var(--chronicle-paper-ink) !important;
}

#class-modal .class-option img {
  background: var(--chronicle-paper-raised);
  border: 1px solid var(--chronicle-paper-rule);
}

#class-modal .class-option {
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-paper-raised) !important;
  border-color: var(--chronicle-paper-rule) !important;
}

#class-modal .class-option.selected {
  background: var(--chronicle-gold-wash) !important;
  border-color: var(--chronicle-gold) !important;
}

#player-class-icon > div:hover {
  color: var(--chronicle-gold) !important;
  border-color: var(--chronicle-gold) !important;
}

/* Roster and class art is shown in its own black-and-white form. Tinting it
   gold turned the neutral marks parchment-coloured, so they read as part of the
   panel behind them instead of as icons on it. */
.role-icon,
.role-class-icon,
.event-roster-symbol img,
.discord-emoji img,
img[src*="/images/classes/"] {
  filter: none;
}

/* The class picker uses the same neutral material language as the MB/DEF
   composition badges. The tile lives on the option so filtering the source
   artwork cannot tint the parchment behind it. */
.role-class-option {
  position: relative;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: var(--space-sm);
}

.role-class-option::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  place-self: center;
  width: 1.875rem;
  height: 1.875rem;
  background: oklch(81% 0.012 82);
  border: 2px solid var(--chronicle-paper-ink);
  box-shadow: inset 0 0 0 1px oklch(92% 0.008 82 / 0.55);
  pointer-events: none;
}

.role-class-option img,
.role-class-option img[src*="/images/classes/"] {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  place-self: center;
  width: 1.125rem !important;
  height: 1.125rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.role-class-option span {
  grid-column: 2;
  grid-row: 1;
}

/* Class art is drawn to its own edge; trimming the sprite border keeps it from
   reading as a second frame inside the row. */
.nwnew-role-table .custom-role .role-icon-preview img[src*="/images/classes/"] {
  clip-path: inset(3.5%);
}

@media (hover: hover) and (pointer: fine) {
  .top-bookmarked-guild:hover,
  .top-bookmarked-guild:focus-visible {
    border-color: var(--chronicle-gold-bright);
    box-shadow: inset 0 0 0 0.15rem var(--chronicle-void), 0 0 var(--space-sm) var(--chronicle-gold-wash);
  }

  .top-nav-link:hover,
  .top-nav-link:focus-visible {
    color: var(--chronicle-text);
    background: var(--chronicle-gold-wash);
  }

  .button:hover { transform: translateY(-1px); }
  .button-primary:hover { color: var(--chronicle-paper-ink); background: var(--chronicle-gold-bright); }
  .button-secondary:hover,
  .button-ghost:hover { color: var(--chronicle-text); background: var(--chronicle-ink-soft); }

  tbody tr:hover { background: var(--chronicle-gold-wash); }
}

@media (max-width: 64rem) {
  .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 64rem) {
  .top-nav {
    width: calc(100% - var(--space-lg));
    padding-inline: var(--space-lg);
  }

  .top-nav-menu {
    inset-block-start: calc(var(--chronicle-nav-height) - var(--space-2xs));
    inset-inline: var(--space-lg);
    padding: var(--space-md);
    color: var(--chronicle-text);
    background: var(--chronicle-ink);
    border: 1px solid var(--chronicle-gold-line);
  }

  .top-nav.mobile-open .top-nav-menu { display: flex; }

  .top-bookmarked-guilds { max-width: 10rem; }
}

@media (max-width: 48rem) {
  .top-nav {
    inset-block-start: var(--space-xs);
    width: calc(100% - var(--space-md));
    margin-block-start: var(--space-xs);
    padding-inline: var(--space-md);
    clip-path: none;
    .top-nav::before { clip-path: none; }
    .top-nav-material { clip-path: none; }
  }

  .top-brand-text { font-size: 1rem; }
  .top-nav-left { gap: var(--space-sm); }
  .top-bookmarked-guilds {
    max-width: 7rem;
    padding-inline-start: var(--space-sm);
  }
  .top-bookmarked-guild {
    width: 1.875rem;
    height: 1.875rem;
  }
  .top-nav-toggle { min-width: 2.75rem; }

  .page-header,
  .events-page-body .page-header,
  .page-content {
    width: calc(100% - var(--space-lg));
  }

  .page-header,
  .events-page-body .page-header,
  .events-overview {
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }

  .events-overview {
    min-height: 0;
    align-items: flex-start;
  }

  .sc-grid { grid-template-columns: minmax(0, 1fr); }
  .sc-card,
  .sc-card:nth-child(n) { grid-column: 1; }

  .site-footer::before,
  .site-footer-inner {
    width: calc(100% - var(--space-lg));
  }

  dialog,
  .modal-content {
    width: calc(100% - var(--space-lg));
    padding: var(--space-lg);
  }

  .role-emote-grid-classes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (pointer: coarse) {
  .button,
  button,
  [role="button"],
  input,
  select {
    min-height: 3rem;
  }
}

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

  body:not(.is-ready) .main,
  body:not(.is-ready) .top-nav,
  body.is-ready .main,
  body.is-ready .top-nav {
    transform: none;
  }
}

/* ── Silver Palace x Golden Parchment Theme Components ──────── */

/* Ornamental Section Divider with Center Diamond */
.silver-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  color: var(--chronicle-gold);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.silver-divider::before,
.silver-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--chronicle-gold-line), transparent);
}

/* Silver Palace Frame Container */
.silver-frame {
  position: relative;
  background: var(--chronicle-ink-raised);
  border: 1px solid var(--chronicle-gold-line);
  box-shadow: inset 0 0 0 1px rgba(197, 160, 89, 0.15), 0 8px 32px var(--chronicle-shadow);
  border-radius: 4px;
}

.silver-frame::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(197, 160, 89, 0.2);
  pointer-events: none;
  border-radius: 6px;
}

/* Silver Palace News / Event Dossier Card */
.silver-card {
  display: flex;
  flex-direction: column;
  background: var(--chronicle-paper);
  background-image:
    linear-gradient(180deg, var(--chronicle-paper-glaze), transparent 40%),
    url("/assets/chronicle-paper-texture-v1.webp");
  background-size: cover, 300px 300px;
  border: 1px solid var(--chronicle-paper-rule);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 12px 28px var(--chronicle-shadow);
  border-radius: 4px;
  color: var(--chronicle-paper-ink);
  overflow: hidden;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short);
  text-decoration: none;
}

.silver-card:hover {
  transform: translateY(-4px);
  border-color: var(--chronicle-gold);
  box-shadow:
    inset 0 0 0 1px rgba(229, 193, 124, 0.6),
    0 16px 36px var(--chronicle-shadow),
    0 0 20px rgba(197, 160, 89, 0.25);
}

.silver-card-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--chronicle-ink);
}

.silver-card-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-long) var(--ease-out);
}

.silver-card:hover .silver-card-banner img {
  transform: scale(1.05);
}

.silver-card-badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 2;
  background: rgba(18, 17, 16, 0.88);
  border: 1px solid var(--chronicle-gold);
  color: var(--chronicle-gold-bright);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.silver-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-md) var(--space-lg);
}

.silver-card-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--chronicle-paper-ink);
  margin-bottom: var(--space-xs);
  letter-spacing: 0.01em;
}

.silver-card-desc {
  font-size: 0.85rem;
  color: var(--chronicle-paper-muted);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

.silver-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--chronicle-paper-rule);
  font-size: 0.75rem;
  font-family: var(--font-outlier);
  color: var(--chronicle-paper-muted);
}

/* Feature grid layout for home page */
.athena-hero-bg {
  min-height: clamp(480px, 60vh, 720px) !important;
  padding: var(--space-xl) var(--space-lg) !important;
}

.athena-feature-overview {
  padding: var(--space-xl) var(--space-lg) var(--space-3xl);
  max-width: 1200px;
  margin: 0 auto;
}

.athena-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.athena-feature-card {
  position: relative;
  background-color: #dfc488 !important;
  background-image:
    radial-gradient(ellipse at center, rgba(245, 225, 175, 0.45) 0%, rgba(185, 150, 90, 0.45) 100%),
    url("/assets/silver-palace-parchment-texture.webp") !important;
  background-size: cover, 500px 500px !important;
  background-blend-mode: multiply, normal !important;
  border: 1px solid #a4864a !important;
  border-radius: 4px;
  padding: var(--space-lg);
  color: #1a140b !important;
  box-shadow:
    inset 0 0 20px rgba(130, 90, 30, 0.35),
    inset 0 0 0 1px rgba(255, 245, 210, 0.6),
    inset 0 0 0 2px rgba(164, 134, 74, 0.5),
    0 12px 28px rgba(0, 0, 0, 0.6) !important;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short);
}

.athena-feature-card:hover {
  transform: translateY(-5px);
  border-color: #e5c17c !important;
  box-shadow:
    inset 0 0 24px rgba(160, 110, 35, 0.45),
    inset 0 0 0 1px rgba(255, 245, 210, 0.8),
    inset 0 0 0 2px rgba(229, 193, 124, 0.8),
    0 16px 40px rgba(0, 0, 0, 0.75),
    0 0 25px rgba(197, 160, 89, 0.35) !important;
}

.athena-feature-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: #8f6d2b !important;
  line-height: 1;
  margin-bottom: var(--space-2xs);
}

.athena-feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a140b !important;
  margin-bottom: var(--space-xs);
}

.athena-feature-card p {
  font-size: 0.875rem;
  color: #4a3c26 !important;
  line-height: 1.55;
}

/* ── Silver Palace Footer Overhaul ────────────────────────────── */

.site-footer {
  margin-block-start: var(--space-3xl);
  background: var(--chronicle-ink-raised) !important;
  border-top: 1px solid var(--chronicle-gold-line) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4) !important;
  padding: 0 0 var(--space-xl) !important;
}

.site-footer::before {
  display: none !important;
}

.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.site-footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-footer-logo {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.site-footer-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--chronicle-gold);
  letter-spacing: 0.1em;
}

.site-footer-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--chronicle-text-muted);
}

.site-footer-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.site-footer-links a {
  color: var(--chronicle-text-soft);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color var(--dur-micro);
}

.site-footer-links a:hover {
  color: var(--chronicle-gold-bright);
}

.site-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-footer-kofi {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: rgba(197, 160, 89, 0.12);
  border: 1px solid var(--chronicle-gold-line);
  color: var(--chronicle-gold-bright) !important;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-micro), border-color var(--dur-micro);
}

.site-footer-kofi:hover {
  background: rgba(197, 160, 89, 0.25);
  border-color: var(--chronicle-gold);
}

.site-footer-discord {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--chronicle-text-muted);
}

/* --------------------------------------------------------------------------
   Post-handoff fixes — illuminated war archive
   -------------------------------------------------------------------------- */

/* Home: replace the flat card row with a continuous command archive. */
body[data-page="command-center"] .main {
  background: transparent;
  overflow: visible;
}

body[data-page="command-center"] .athena-hero-bg {
  --hero-scroll: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100dvh - var(--chronicle-nav-height)) !important;
  background: #080705 !important;
}

body[data-page="command-center"] .athena-hero-bg::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -7%;
  background:
    linear-gradient(180deg, rgba(8, 7, 5, 0.06), rgba(8, 7, 5, 0.14) 48%, rgba(8, 7, 5, 0.72)),
    url("/assets/dashboard.webp") center / cover no-repeat;
  transform: translate3d(0, calc(var(--hero-scroll) * 4rem), 0) scale(calc(1.04 + var(--hero-scroll) * 0.04));
  filter: brightness(calc(1 - var(--hero-scroll) * 0.24));
  will-change: transform, filter;
}

body[data-page="command-center"] .athena-hero-bg::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, transparent 15%, rgba(8, 7, 5, 0.16) 48%, rgba(8, 7, 5, 0.7) 100%);
  opacity: calc(0.55 + var(--hero-scroll) * 0.45);
  pointer-events: none;
}

body[data-page="command-center"] .athena-hero-content {
  transform: translate3d(0, calc(var(--hero-scroll) * -3.2rem), 0) scale(calc(1 - var(--hero-scroll) * 0.055));
  opacity: calc(1 - var(--hero-scroll) * 0.68);
  will-change: transform, opacity;
}

body[data-page="command-center"] .athena-hero-actions {
  transform: translate3d(0, calc(var(--hero-scroll) * -1.4rem), 0);
  opacity: calc(1 - var(--hero-scroll) * 0.85);
  will-change: transform, opacity;
}

.athena-hero-particles {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(0, calc(var(--hero-scroll) * -1.2rem), 0);
}

.athena-hero-particles i {
  --ember-x: 8%;
  --ember-size: 0.12rem;
  --ember-delay: 0s;
  position: absolute;
  left: var(--ember-x);
  bottom: 5%;
  width: var(--ember-size);
  height: var(--ember-size);
  border-radius: 50%;
  opacity: 0;
  background: #f4c76b;
  box-shadow: 0 0 0.28rem #df9d32, 0 0 0.9rem rgba(218, 150, 49, 0.95);
  animation: athenaHeroEmber 9s var(--ember-delay) ease-in infinite;
}

.athena-hero-particles i:nth-child(2) { --ember-x: 14%; --ember-size: 0.08rem; --ember-delay: -4s; }
.athena-hero-particles i:nth-child(3) { --ember-x: 21%; --ember-size: 0.16rem; --ember-delay: -7s; }
.athena-hero-particles i:nth-child(4) { --ember-x: 29%; --ember-size: 0.07rem; --ember-delay: -2s; }
.athena-hero-particles i:nth-child(5) { --ember-x: 37%; --ember-size: 0.11rem; --ember-delay: -8s; }
.athena-hero-particles i:nth-child(6) { --ember-x: 44%; --ember-size: 0.07rem; --ember-delay: -5s; }
.athena-hero-particles i:nth-child(7) { --ember-x: 52%; --ember-size: 0.14rem; --ember-delay: -1s; }
.athena-hero-particles i:nth-child(8) { --ember-x: 59%; --ember-size: 0.08rem; --ember-delay: -6s; }
.athena-hero-particles i:nth-child(9) { --ember-x: 66%; --ember-size: 0.12rem; --ember-delay: -3s; }
.athena-hero-particles i:nth-child(10) { --ember-x: 73%; --ember-size: 0.06rem; --ember-delay: -8.5s; }
.athena-hero-particles i:nth-child(11) { --ember-x: 81%; --ember-size: 0.15rem; --ember-delay: -4.7s; }
.athena-hero-particles i:nth-child(12) { --ember-x: 88%; --ember-size: 0.08rem; --ember-delay: -7.6s; }
.athena-hero-particles i:nth-child(13) { --ember-x: 94%; --ember-size: 0.1rem; --ember-delay: -2.8s; }
.athena-hero-particles i:nth-child(14) { --ember-x: 48%; --ember-size: 0.06rem; --ember-delay: -9s; }
.athena-hero-particles i:nth-child(15) { --ember-x: 5%; --ember-size: 0.09rem; --ember-delay: -6.4s; }
.athena-hero-particles i:nth-child(16) { --ember-x: 18%; --ember-size: 0.13rem; --ember-delay: -1.8s; }
.athena-hero-particles i:nth-child(17) { --ember-x: 33%; --ember-size: 0.08rem; --ember-delay: -5.7s; }
.athena-hero-particles i:nth-child(18) { --ember-x: 57%; --ember-size: 0.11rem; --ember-delay: -3.4s; }
.athena-hero-particles i:nth-child(19) { --ember-x: 69%; --ember-size: 0.07rem; --ember-delay: -7.2s; }
.athena-hero-particles i:nth-child(20) { --ember-x: 77%; --ember-size: 0.14rem; --ember-delay: -0.6s; }
.athena-hero-particles i:nth-child(21) { --ember-x: 86%; --ember-size: 0.09rem; --ember-delay: -5.1s; }
.athena-hero-particles i:nth-child(22) { --ember-x: 98%; --ember-size: 0.12rem; --ember-delay: -2.3s; }
.athena-hero-particles i:nth-child(23) { --ember-x: 11%; --ember-size: 0.15rem; --ember-delay: -8.2s; }
.athena-hero-particles i:nth-child(24) { --ember-x: 25%; --ember-size: 0.1rem; --ember-delay: -3.7s; }
.athena-hero-particles i:nth-child(25) { --ember-x: 31%; --ember-size: 0.07rem; --ember-delay: -6.8s; }
.athena-hero-particles i:nth-child(26) { --ember-x: 41%; --ember-size: 0.13rem; --ember-delay: -1.3s; }
.athena-hero-particles i:nth-child(27) { --ember-x: 54%; --ember-size: 0.09rem; --ember-delay: -4.9s; }
.athena-hero-particles i:nth-child(28) { --ember-x: 63%; --ember-size: 0.16rem; --ember-delay: -7.9s; }
.athena-hero-particles i:nth-child(29) { --ember-x: 71%; --ember-size: 0.08rem; --ember-delay: -2.1s; }
.athena-hero-particles i:nth-child(30) { --ember-x: 83%; --ember-size: 0.12rem; --ember-delay: -5.9s; }
.athena-hero-particles i:nth-child(31) { --ember-x: 91%; --ember-size: 0.09rem; --ember-delay: -0.9s; }
.athena-hero-particles i:nth-child(32) { --ember-x: 46%; --ember-size: 0.14rem; --ember-delay: -6.2s; }

@keyframes athenaHeroEmber {
  0%, 12% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.55); }
  24% { opacity: 0.94; }
  65% { opacity: 0.42; }
  100% { opacity: 0; transform: translate3d(2.6rem, -32rem, 0) scale(1.25); }
}

.athena-feature-overview {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin: -1px 0 0;
  padding: clamp(4rem, 8vw, 7.5rem) var(--space-lg) clamp(5rem, 9vw, 8rem);
  background:
    linear-gradient(180deg, rgba(8, 7, 5, 0.2), rgba(8, 7, 5, 0.84) 22%, rgba(8, 7, 5, 0.96)),
    radial-gradient(circle at 50% 0%, rgba(197, 160, 89, 0.14), transparent 44%);
  border-top: 0;
  box-shadow: inset 0 4rem 5rem -4rem rgba(197, 160, 89, 0.12);
}

.athena-feature-overview::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.11;
  background: url("/assets/chronicle-paper-texture-v1.webp") center / 42rem repeat;
  mix-blend-mode: soft-light;
}

.athena-council-shell {
  width: min(100%, 75rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(17rem, 0.72fr) minmax(36rem, 1.4fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: stretch;
}

.athena-council-intro {
  position: relative;
  min-height: 31rem;
  padding: clamp(2.6rem, 4vw, 3.75rem) clamp(2.35rem, 4vw, 3.65rem);
  overflow: hidden;
  color: var(--chronicle-paper-ink);
  background:
    linear-gradient(145deg, rgba(227, 217, 192, 0.96), rgba(203, 190, 158, 0.96)),
    url("/assets/chronicle-paper-texture-v1.webp") center / 34rem repeat;
  border: 1px solid var(--chronicle-paper-rule);
  box-shadow:
    0 0 0 0.28rem rgba(151, 125, 72, 0.62),
    inset 0.8rem 0 0 rgba(115, 88, 40, 0.07),
    0 2rem 5rem rgba(0, 0, 0, 0.5);
}

.athena-council-intro::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(74, 60, 38, 0.28);
  pointer-events: none;
}

.athena-council-intro::before {
  content: "";
  position: absolute;
  inset: 1.45rem;
  background:
    linear-gradient(90deg, #75591f 0 2.5rem, transparent 2.5rem) top left / 5rem 1px no-repeat,
    linear-gradient(#75591f 0 2.5rem, transparent 2.5rem) top left / 1px 5rem no-repeat,
    linear-gradient(270deg, #75591f 0 2.5rem, transparent 2.5rem) bottom right / 5rem 1px no-repeat,
    linear-gradient(0deg, #75591f 0 2.5rem, transparent 2.5rem) bottom right / 1px 5rem no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

.athena-council-kicker {
  position: relative;
  z-index: 1;
  display: block;
  color: #5c4518;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.athena-council-masthead,
.athena-council-register {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.athena-council-masthead {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(91, 67, 31, 0.35);
}

.athena-council-folio,
.athena-council-register {
  color: #5c4518;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.athena-council-folio { white-space: nowrap; }

.athena-council-intro h2 {
  position: relative;
  z-index: 1;
  margin: 1.9rem 0 1.25rem;
  color: var(--chronicle-paper-ink);
  font-family: var(--font-display);
  font-size: clamp(2.45rem, 3.15vw, 3.35rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.athena-council-intro h2 em {
  color: #76591f;
  font-weight: 500;
}

.athena-council-intro p {
  position: relative;
  z-index: 1;
  max-width: 13.5rem;
  margin: 0;
  color: var(--chronicle-paper-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.athena-council-register {
  position: absolute;
  left: clamp(2.35rem, 4vw, 3.65rem);
  right: clamp(2.35rem, 4vw, 3.65rem);
  bottom: 2.15rem;
  max-width: none;
  padding-top: 0.75rem;
  padding-right: 6.4rem;
  border-top: 1px solid rgba(91, 67, 31, 0.35);
}

.athena-council-register b { font-weight: 800; }

.athena-council-seal {
  position: absolute;
  z-index: 3;
  right: 1.45rem;
  bottom: 0.8rem;
  width: 6.4rem;
  height: 6.4rem;
  object-fit: contain;
  transform: rotate(-8deg);
  filter: drop-shadow(0 0.65rem 0.65rem rgba(62, 32, 18, 0.38));
}

.athena-council-filigree {
  position: absolute;
  z-index: 1;
  right: 2.4rem;
  top: 2.2rem;
  color: rgba(112, 82, 32, 0.58);
  font-size: 1.1rem;
}

.athena-feature-grid {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 1px;
  background: var(--chronicle-gold-line);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.48);
}

.athena-feature-card {
  --operation-art: url("/assets/dashboard.webp");
  min-height: 15.5rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 1.1rem 1rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--chronicle-text) !important;
  text-decoration: none;
  background:
    linear-gradient(135deg, rgba(32, 27, 19, 0.96), rgba(14, 12, 9, 0.98)),
    url("/assets/chronicle-paper-texture-v1.webp") center / 28rem repeat !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
  overflow: hidden;
}

.athena-feature-card:nth-child(1) { --operation-art: url("/assets/nodewar.webp"); }
.athena-feature-card:nth-child(2) { --operation-art: url("/assets/dashboard.webp"); }
.athena-feature-card:nth-child(3) { --operation-art: url("/assets/stats.webp"); }
.athena-feature-card:nth-child(4) { --operation-art: url("/assets/custom_event.jpg"); }

.athena-feature-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0.34;
  background:
    linear-gradient(90deg, rgba(17, 14, 10, 0.94) 0 34%, rgba(17, 14, 10, 0.16)),
    linear-gradient(180deg, rgba(17, 14, 10, 0.42), transparent 48%, rgba(17, 14, 10, 0.82)),
    var(--operation-art) center / cover no-repeat;
  filter: grayscale(1) sepia(0.34) contrast(1.08);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-out);
  pointer-events: none;
}

.athena-feature-card:hover::after {
  opacity: 0.5;
  transform: scale(1.025);
}

/* Role picker selections must visibly complete the action. */
.role-emote-modal[hidden] {
  display: none !important;
}

/* The source crest already contains its own medallion; avoid drawing a second ring. */
.top-brand-logo {
  border: 0;
  border-radius: 0;
  object-fit: contain;
  padding: 0;
  transform: translateY(-0.02rem);
}

.athena-feature-card > * {
  position: relative;
  z-index: 1;
}

.athena-feature-card:hover {
  z-index: 1;
  transform: translateY(-0.25rem);
  color: var(--chronicle-text) !important;
  background:
    linear-gradient(135deg, rgba(52, 42, 26, 0.98), rgba(20, 16, 11, 0.99)),
    url("/assets/chronicle-paper-texture-v1.webp") center / 28rem repeat !important;
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.44) !important;
}

.athena-feature-num {
  margin: 0;
  color: var(--chronicle-gold) !important;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.athena-feature-copy { display: grid; gap: 0.35rem; }

.athena-feature-copy strong {
  color: var(--chronicle-text);
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1;
}

.athena-feature-copy small {
  color: var(--chronicle-gold);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.athena-feature-arrow {
  color: var(--chronicle-text-muted);
  font-size: 1.15rem;
  transition: color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.athena-feature-card:hover .athena-feature-arrow {
  color: var(--chronicle-gold-bright);
  transform: translate(0.2rem, -0.2rem);
}

.athena-feature-card p {
  grid-column: 2 / 4;
  align-self: end;
  margin: 0;
  color: var(--chronicle-text-soft) !important;
  font-size: 0.82rem;
  line-height: 1.65;
}

.athena-feature-route {
  grid-column: 2 / 4;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.85rem;
  color: var(--chronicle-text-muted) !important;
  border-top: 1px solid rgba(197, 160, 89, 0.28);
  font-family: var(--font-outlier);
  font-size: 0.75rem !important;
  line-height: 1.4;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}

.athena-feature-route b {
  color: var(--chronicle-gold);
  font-weight: 600;
}

/* Builders: expose their artwork and float the workbench over a warm veil. */
.nodewar-new-body .main,
.gbr-create-body .main,
.custom-create-body .main {
  background: transparent;
}

.nodewar-new-body .nwnew-shell,
.gbr-create-body .gbr-shell,
.custom-create-body .gbr-shell {
  position: relative;
  isolation: isolate;
  min-height: calc(100dvh - var(--chronicle-nav-height));
  padding: clamp(1.25rem, 2.5vw, 2.75rem);
  background-attachment: fixed !important;
}

.nodewar-new-body .nwnew-shell {
  background:
    linear-gradient(100deg, rgba(209, 193, 158, 0.46), rgba(44, 35, 24, 0.58) 48%, rgba(9, 8, 7, 0.84)),
    linear-gradient(180deg, rgba(20, 17, 12, 0.22), rgba(12, 10, 8, 0.78)),
    url("/assets/nodewar.webp") center / cover fixed no-repeat !important;
}

.gbr-create-body .gbr-shell {
  background:
    linear-gradient(100deg, rgba(215, 202, 174, 0.58), rgba(93, 74, 45, 0.72) 50%, rgba(15, 11, 7, 0.88)),
    linear-gradient(180deg, rgba(146, 109, 55, 0.38), rgba(12, 10, 8, 0.8)),
    url("/assets/gbr.webp") center / cover fixed no-repeat !important;
  background-color: #6c593b !important;
  background-blend-mode: normal, color, luminosity !important;
}

.custom-create-body .gbr-shell {
  background:
    linear-gradient(100deg, rgba(215, 202, 174, 0.5), rgba(48, 39, 28, 0.58) 50%, rgba(9, 8, 7, 0.84)),
    linear-gradient(180deg, rgba(20, 17, 12, 0.14), rgba(12, 10, 8, 0.76)),
    url("/assets/custom_event.jpg") center / cover fixed no-repeat !important;
}

.nwnew-topbar,
.gbr-topbar {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  color: var(--chronicle-text);
  background: linear-gradient(90deg, rgba(11, 9, 7, 0.9), rgba(20, 16, 11, 0.74));
  border-inline-start: 0.2rem solid var(--chronicle-gold);
  border-block: 1px solid var(--chronicle-gold-line);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(0.5rem);
}

.nwnew-title p,
.gbr-title p {
  max-width: 46rem;
  margin: 0.25rem 0 0;
  color: var(--chronicle-text-soft);
  font-size: 0.8rem;
  line-height: 1.55;
}

.nwnew-title h1,
.gbr-title h1 {
  color: var(--chronicle-gold-bright) !important;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
  line-height: 1;
}

.nwnew-title > span,
.gbr-title > span {
  color: var(--chronicle-gold) !important;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

.nwnew-grid,
.gbr-grid { gap: clamp(1rem, 1.4vw, 1.4rem); }

.nwnew-plan .nwnew-panel,
.nwnew-compose .nwnew-panel,
.gbr-create-body .gbr-panel:not(.gbr-panel-preview),
.custom-create-body .gbr-panel:not(.gbr-panel-preview) {
  background-color: #d6c8aa !important;
  background-image:
    linear-gradient(rgba(44, 34, 21, 0.09), rgba(44, 34, 21, 0.09)),
    url("/assets/chronicle-paper-texture-v1.webp") !important;
  background-blend-mode: multiply, luminosity !important;
  border-color: #806b45 !important;
  box-shadow:
    0 0 0 0.2rem rgba(91, 70, 35, 0.42),
    0 1.35rem 3.5rem rgba(0, 0, 0, 0.4) !important;
}

.nwnew-plan .nwnew-panel-head,
.nwnew-compose .nwnew-panel-head,
.gbr-create-body .gbr-panel:not(.gbr-panel-preview) .gbr-panel-head,
.custom-create-body .gbr-panel:not(.gbr-panel-preview) .gbr-panel-head {
  background: rgba(189, 169, 129, 0.78) !important;
}

.gbr-panel-preview,
.nwnew-preview {
  align-self: start;
  border: 1px solid var(--chronicle-gold-line) !important;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.52) !important;
}

.nwnew-preview {
  background: rgba(10, 9, 8, 0.94) !important;
}

/* Discord previews retain Discord's native palette, and role art is shown as
   uploaded — desaturating it here made the marks blend into the embed. */
.nwnew-preview .discord-role-icon,
.nwnew-preview .discord-embed-field-name .role-icon {
  width: 1.35rem !important;
  height: 1.35rem !important;
  flex: 0 0 1.35rem;
  margin: 0 0.18rem 0 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  vertical-align: -0.28rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.nwnew-preview .discord-embed-field-name {
  align-items: flex-start;
  line-height: 1.25;
}

/* The preview mimics Discord, which draws emoji flat on the embed with no
   plate behind them. */
.nwnew-preview .discord-role-mark {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  margin-right: 0.22rem;
  background: transparent;
  border: 0;
  vertical-align: -0.28rem;
  box-sizing: border-box;
}

@media (max-width: 64rem) {
  .athena-council-shell { grid-template-columns: 1fr; }
  .athena-council-intro { min-height: 24rem; }
}

@media (max-width: 46rem) {
  .athena-feature-overview { padding-inline: 1rem; }
  .athena-feature-grid { grid-template-columns: 1fr; }
  .athena-feature-card { min-height: 12rem; }
  .nwnew-topbar,
  .gbr-topbar { padding: 1rem; }
  .nodewar-new-body .nwnew-shell,
  .gbr-create-body .gbr-shell,
  .custom-create-body .gbr-shell { background-attachment: scroll !important; }
}

@media (prefers-reduced-motion: reduce) {
  .athena-feature-card,
  .athena-feature-arrow { transition: none; }
  .athena-feature-card:hover { transform: none; }
  .athena-feature-card:hover::after { transform: none; }
}

/* Footer is one compact terminal band, not a margin plus a second panel. */
.site-footer {
  margin-block-start: 0 !important;
  padding: 1.25rem 0 !important;
  background: rgba(20, 15, 9, 0.97) !important;
  box-shadow: 0 -0.75rem 2.5rem rgba(0, 0, 0, 0.32) !important;
}

.site-footer-inner {
  min-height: 3rem;
}

/* Hallmark · atmospheric editorial · Silver-style operations dossier · black/gold */
.athena-operations-dossier {
  --story-progress: 0;
  --story-intro-reveal: 0;
  --story-reveal: 0;
  --story-intro-x: 0px;
  --story-intro-y: 0px;
  --story-intro-scale: 0.96;
  --story-intro-brightness: 1;
  --story-intro-blur: 0px;
  --story-intro-clip-y: 6%;
  --story-intro-clip-x: 3%;
  --story-browser-x: 7rem;
  --story-browser-y: 0px;
  --story-browser-scale: 0.96;
  --story-browser-clip: 6%;
  --story-stage-y: 0px;
  position: relative;
  isolation: isolate;
  width: min(100%, 78rem);
  min-height: 34rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(17rem, 0.7fr) minmax(0, 1.65fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.athena-feature-overview::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -3.5rem;
  left: 0;
  right: 0;
  height: 7rem;
  background:
    linear-gradient(90deg, transparent 7%, rgba(197, 160, 89, 0.08) 28%, rgba(197, 160, 89, 0.48) 50%, rgba(197, 160, 89, 0.08) 72%, transparent 93%) center / 100% 1px no-repeat,
    radial-gradient(ellipse at 50% 50%, rgba(197, 160, 89, 0.13), transparent 48%),
    linear-gradient(180deg, transparent, rgba(8, 7, 5, 0.72) 46%, rgba(8, 7, 5, 0.18) 72%, transparent);
  pointer-events: none;
}

body[data-page="command-center"] .athena-feature-overview {
  min-height: calc(100vh - var(--chronicle-nav-height));
  padding-top: clamp(5rem, 10vh, 8rem);
  padding-bottom: clamp(5rem, 10vh, 8rem);
}

.athena-operation-particles {
  position: absolute;
  z-index: 5;
  inset: -8rem -5rem;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.athena-operation-particles i {
  --particle-x: 8%;
  --particle-size: 0.16rem;
  --particle-delay: 0s;
  position: absolute;
  left: var(--particle-x);
  bottom: -1rem;
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 50%;
  opacity: 0;
  background: #f3c86b;
  box-shadow: 0 0 0.32rem #e0aa42, 0 0 1rem rgba(197, 160, 89, 0.9);
  animation: athenaOperationParticle 9s var(--particle-delay) linear infinite;
}

.athena-operation-particles i:nth-child(2) { --particle-x: 17%; --particle-size: 0.09rem; --particle-delay: -6s; }
.athena-operation-particles i:nth-child(3) { --particle-x: 27%; --particle-size: 0.12rem; --particle-delay: -3s; }
.athena-operation-particles i:nth-child(4) { --particle-x: 38%; --particle-size: 0.07rem; --particle-delay: -9s; }
.athena-operation-particles i:nth-child(5) { --particle-x: 47%; --particle-size: 0.14rem; --particle-delay: -1s; }
.athena-operation-particles i:nth-child(6) { --particle-x: 56%; --particle-size: 0.08rem; --particle-delay: -7.5s; }
.athena-operation-particles i:nth-child(7) { --particle-x: 64%; --particle-size: 0.11rem; --particle-delay: -4.5s; }
.athena-operation-particles i:nth-child(8) { --particle-x: 72%; --particle-size: 0.07rem; --particle-delay: -10s; }
.athena-operation-particles i:nth-child(9) { --particle-x: 81%; --particle-size: 0.13rem; --particle-delay: -2s; }
.athena-operation-particles i:nth-child(10) { --particle-x: 89%; --particle-size: 0.08rem; --particle-delay: -8s; }
.athena-operation-particles i:nth-child(11) { --particle-x: 95%; --particle-size: 0.1rem; --particle-delay: -5s; }
.athena-operation-particles i:nth-child(12) { --particle-x: 33%; --particle-size: 0.06rem; --particle-delay: -11s; }
.athena-operation-particles i:nth-child(13) { --particle-x: 4%; --particle-size: 0.12rem; --particle-delay: -4.2s; }
.athena-operation-particles i:nth-child(14) { --particle-x: 14%; --particle-size: 0.08rem; --particle-delay: -7.8s; }
.athena-operation-particles i:nth-child(15) { --particle-x: 24%; --particle-size: 0.15rem; --particle-delay: -1.6s; }
.athena-operation-particles i:nth-child(16) { --particle-x: 42%; --particle-size: 0.1rem; --particle-delay: -6.1s; }
.athena-operation-particles i:nth-child(17) { --particle-x: 59%; --particle-size: 0.13rem; --particle-delay: -3.3s; }
.athena-operation-particles i:nth-child(18) { --particle-x: 70%; --particle-size: 0.08rem; --particle-delay: -8.5s; }
.athena-operation-particles i:nth-child(19) { --particle-x: 84%; --particle-size: 0.14rem; --particle-delay: -2.5s; }
.athena-operation-particles i:nth-child(20) { --particle-x: 98%; --particle-size: 0.09rem; --particle-delay: -5.2s; }
.athena-operation-particles i:nth-child(21) { --particle-x: 7%; --particle-size: 0.14rem; --particle-delay: -8.1s; }
.athena-operation-particles i:nth-child(22) { --particle-x: 19%; --particle-size: 0.1rem; --particle-delay: -2.1s; }
.athena-operation-particles i:nth-child(23) { --particle-x: 31%; --particle-size: 0.16rem; --particle-delay: -5.8s; }
.athena-operation-particles i:nth-child(24) { --particle-x: 37%; --particle-size: 0.08rem; --particle-delay: -0.7s; }
.athena-operation-particles i:nth-child(25) { --particle-x: 49%; --particle-size: 0.13rem; --particle-delay: -7.2s; }
.athena-operation-particles i:nth-child(26) { --particle-x: 56%; --particle-size: 0.09rem; --particle-delay: -3.8s; }
.athena-operation-particles i:nth-child(27) { --particle-x: 65%; --particle-size: 0.15rem; --particle-delay: -8.8s; }
.athena-operation-particles i:nth-child(28) { --particle-x: 74%; --particle-size: 0.08rem; --particle-delay: -1.9s; }
.athena-operation-particles i:nth-child(29) { --particle-x: 79%; --particle-size: 0.12rem; --particle-delay: -6.6s; }
.athena-operation-particles i:nth-child(30) { --particle-x: 87%; --particle-size: 0.16rem; --particle-delay: -4.1s; }
.athena-operation-particles i:nth-child(31) { --particle-x: 93%; --particle-size: 0.09rem; --particle-delay: -7.7s; }
.athena-operation-particles i:nth-child(32) { --particle-x: 45%; --particle-size: 0.11rem; --particle-delay: -2.9s; }

@keyframes athenaOperationParticle {
  0%, 12% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.65); }
  25% { opacity: 1; }
  68% { opacity: 0.52; }
  100% { opacity: 0; transform: translate3d(2.2rem, -46rem, 0) scale(1.3); }
}

.athena-operations-dossier .athena-council-intro {
  position: relative;
  z-index: 1;
  min-height: 34rem;
  height: 34rem;
  padding-bottom: 8.5rem;
  background:
    linear-gradient(rgba(215, 203, 174, 0.2), rgba(185, 166, 126, 0.16)),
    url("/assets/chronicle-paper-texture-v1.webp") center / 36rem repeat,
    #d4c6a5;
  background-blend-mode: multiply, luminosity, normal;
  overflow: hidden;
  opacity: var(--story-intro-reveal);
  clip-path: inset(var(--story-intro-clip-y) var(--story-intro-clip-x));
  filter: blur(var(--story-intro-blur)) brightness(var(--story-intro-brightness));
  transform-origin: left center;
  transform: translate3d(var(--story-intro-x), var(--story-intro-y), 0) scale(var(--story-intro-scale));
  transition: box-shadow 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 140ms linear, filter 140ms linear, clip-path 140ms linear;
  will-change: transform, opacity, filter, clip-path;
}

.athena-operations-dossier .athena-council-intro:hover {
  box-shadow: 0 2.1rem 5rem rgba(0, 0, 0, 0.58), 0 0 3rem rgba(197, 160, 89, 0.16);
}

.athena-operations-dossier .athena-council-intro::after {
  transition: border-color 320ms var(--ease-out), box-shadow 420ms var(--ease-out);
}

.athena-operations-dossier .athena-council-intro:hover::after {
  border-color: rgba(117, 89, 31, 0.48);
  box-shadow: inset 0 0 2.4rem rgba(197, 160, 89, 0.09);
}

.athena-council-aura {
  position: absolute;
  z-index: 0;
  width: 18rem;
  height: 18rem;
  right: -8rem;
  bottom: -7rem;
  border-radius: 50%;
  opacity: 0.34;
  background: radial-gradient(circle, rgba(186, 135, 44, 0.32), rgba(186, 135, 44, 0.08) 38%, transparent 70%);
  filter: blur(0.4rem);
  animation: athenaArchiveAura 6s ease-in-out infinite alternate;
  pointer-events: none;
}

.athena-council-dust {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.athena-council-dust i {
  --dust-size: 0.16rem;
  --dust-x: 18%;
  --dust-delay: 0s;
  position: absolute;
  left: var(--dust-x);
  bottom: 7%;
  width: var(--dust-size);
  height: var(--dust-size);
  border-radius: 50%;
  opacity: 0;
  background: #c59a42;
  box-shadow: 0 0 0.45rem rgba(164, 124, 49, 0.72);
  animation: athenaArchiveDust 7.5s var(--dust-delay) ease-in-out infinite;
}

.athena-council-dust i:nth-child(2) { --dust-x: 76%; --dust-size: 0.11rem; --dust-delay: -1.2s; }
.athena-council-dust i:nth-child(3) { --dust-x: 44%; --dust-size: 0.09rem; --dust-delay: -2.8s; }
.athena-council-dust i:nth-child(4) { --dust-x: 88%; --dust-size: 0.14rem; --dust-delay: -4.1s; }
.athena-council-dust i:nth-child(5) { --dust-x: 29%; --dust-size: 0.08rem; --dust-delay: -5.4s; }
.athena-council-dust i:nth-child(6) { --dust-x: 63%; --dust-size: 0.12rem; --dust-delay: -6.5s; }
.athena-council-dust i:nth-child(7) { --dust-x: 9%; --dust-size: 0.1rem; --dust-delay: -3.5s; }
.athena-council-dust i:nth-child(8) { --dust-x: 54%; --dust-size: 0.07rem; --dust-delay: -0.7s; }

.athena-operations-dossier .athena-council-masthead,
.athena-operations-dossier .athena-council-intro h2,
.athena-operations-dossier .athena-council-intro p {
  position: relative;
  z-index: 2;
}

.athena-operations-dossier .athena-council-seal {
  position: absolute;
  z-index: 4;
  animation: athenaSealBreath 4.8s ease-in-out infinite;
}

@keyframes athenaArchiveDust {
  0%, 18% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.7); }
  35% { opacity: 0.52; }
  72% { opacity: 0.18; }
  100% { opacity: 0; transform: translate3d(1.4rem, -25rem, 0) scale(1.25); }
}

@keyframes athenaArchiveAura {
  from { opacity: 0.2; transform: scale(0.92); }
  to { opacity: 0.42; transform: scale(1.08); }
}

@keyframes athenaSealBreath {
  0%, 100% { filter: drop-shadow(0 0.55rem 0.65rem rgba(57, 26, 15, 0.42)); }
  50% { filter: drop-shadow(0 0.7rem 0.95rem rgba(89, 32, 16, 0.55)) brightness(1.045); }
}

.athena-operations-dossier .athena-council-intro h2 span {
  display: inline-block;
  color: #76591f;
  font-weight: 500;
  transition: color 300ms var(--ease-out), text-shadow 360ms var(--ease-out);
}

.athena-operations-dossier .athena-council-intro:hover h2 span {
  color: #684b17;
  text-shadow: 0 0 1.5rem rgba(166, 121, 39, 0.2);
}

.athena-operations-dossier .athena-council-intro p {
  max-width: 12rem;
  padding-right: 0;
}

.athena-operations-dossier .athena-council-seal {
  right: 0.45rem;
  bottom: 0.15rem;
  width: 4.6rem;
  height: 4.6rem;
  scale: 1;
  transition: scale 360ms var(--ease-out);
}

.athena-operations-dossier .athena-council-intro:hover .athena-council-seal { scale: 1.045; }

.athena-operation-browser {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.35fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
  opacity: var(--story-reveal);
  clip-path: inset(var(--story-browser-clip) 0);
  transform-origin: left center;
  transform: translate3d(var(--story-browser-x), var(--story-browser-y), 0) scale(var(--story-browser-scale));
  transition: opacity 140ms linear, clip-path 140ms linear;
  will-change: transform, opacity, clip-path;
  pointer-events: none;
  visibility: hidden;
}

.athena-operations-dossier.is-story-revealed .athena-operation-browser { pointer-events: auto; visibility: visible; }

.athena-operation-list {
  display: grid;
  align-content: center;
}

.athena-operation-item {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.25rem 0.8rem;
  align-items: center;
  padding: 1.15rem 0.9rem;
  color: var(--chronicle-text-soft);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(197, 160, 89, 0.24);
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 500ms var(--ease-out), color 220ms var(--ease-out);
}

.athena-operation-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.34rem;
  height: 0.34rem;
  background: var(--chronicle-gold-bright);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-0.15rem, -50%);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.athena-operation-list {
  transform: none;
}

.athena-operation-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--chronicle-gold-bright) 14%, var(--chronicle-gold-bright) 86%, transparent);
  transform: translateX(-105%);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.athena-operation-item > span {
  grid-row: 1 / 3;
  color: var(--chronicle-gold);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.athena-operation-item strong {
  min-width: 0;
  color: var(--chronicle-text);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 600;
  line-height: 1.05;
  transition: color 220ms var(--ease-out), transform 420ms var(--ease-out), text-shadow 420ms var(--ease-out);
}

.athena-operation-item small {
  min-width: 0;
  overflow: hidden;
  color: var(--chronicle-gold);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.athena-operation-item b {
  grid-column: 3;
  grid-row: 1 / 3;
  color: var(--chronicle-text-muted);
  font-size: 1.15rem;
  font-weight: 400;
  transition: color 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.athena-operation-item:is(:hover, :focus-visible, .is-active) {
  color: var(--chronicle-text);
  background: rgba(197, 160, 89, 0.13);
}

.athena-operation-item:is(:focus-visible, .is-active)::before {
  opacity: 1;
  transform: translate(0.5rem, -50%);
}

.athena-operation-item:is(:hover, :focus-visible, .is-active)::after { transform: translateX(0); }

.athena-operation-item:is(:hover, :focus-visible, .is-active) strong {
  color: #fff9e9;
  transform: translateX(0.22rem);
  text-shadow: 0 0 1.25rem rgba(197, 160, 89, 0.22);
}

.athena-operation-item.is-active { padding-left: 1.4rem; }
.athena-operation-item.is-active b { color: var(--chronicle-gold-bright); transform: rotate(45deg); }
.athena-operation-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.athena-operation-stage {
  position: relative;
  min-width: 0;
  min-height: 29rem;
  padding: 1rem;
  color: var(--chronicle-paper-ink);
  background:
    url("/assets/chronicle-paper-texture-v1.webp") center / 32rem repeat,
    #d2c5a8;
  border: 1px solid rgba(98, 75, 38, 0.52);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.52);
  isolation: isolate;
  transform: translate3d(0, var(--story-stage-y), 0);
  will-change: transform;
}

.athena-operation-stage::before,
.athena-operation-stage::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0.7rem -0.65rem -0.75rem 0.8rem;
  background: #b8aa8f;
  border: 1px solid rgba(66, 52, 31, 0.48);
  transform: rotate(1.1deg);
}

.athena-operation-stage::after {
  z-index: -1;
  inset: 0.35rem -0.3rem -0.35rem 0.4rem;
  background: #c7baa0;
  transform: rotate(-0.45deg);
}

.athena-operation-stage.is-switching {
  opacity: 1;
  filter: none;
  transform: translate3d(0, var(--story-stage-y), 0);
}

.athena-operation-photo {
  position: relative;
  height: 19rem;
  overflow: hidden;
  border: 0.42rem solid rgba(238, 229, 207, 0.86);
  box-shadow: 0 0 0 1px rgba(73, 57, 34, 0.4);
}

.athena-operation-photo::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  opacity: 0;
  background: rgba(15, 12, 8, 0.12);
  backdrop-filter: blur(0.18rem);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.athena-operation-stage.is-switching .athena-operation-photo::before { opacity: 0.58; }

.athena-operation-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(10, 8, 6, 0.08) 60%, rgba(10, 8, 6, 0.58) 100%),
    linear-gradient(180deg, rgba(10, 8, 6, 0.08), transparent 32%, rgba(10, 8, 6, 0.48));
  pointer-events: none;
}

.athena-operation-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.12) contrast(1.04) brightness(0.9);
  opacity: 0;
  visibility: visible;
  background: #17130d;
  transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.athena-operation-image-current { z-index: 0; }
.athena-operation-image-next { z-index: 1; }
.athena-operation-photo img.is-visible {
  z-index: 2;
  opacity: 1;
  animation: athenaOperationDrift 7.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes athenaOperationDrift {
  0% { transform: scale(1.055); }
  100% { transform: scale(1.085); }
}

.athena-operation-caption {
  position: relative;
  min-width: 0;
  min-height: 7.65rem;
  padding: 0.85rem 6.5rem 0.35rem 0.45rem;
  opacity: 1;
  transition: opacity 220ms var(--ease-out);
}

.athena-operation-stage.is-switching .athena-operation-caption { opacity: 0.72; }

.athena-operation-caption > span {
  color: #71551f;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.athena-operation-caption h3 {
  margin: 0.2rem 0 0.35rem;
  color: #211b13;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.5vw, 2.2rem);
  line-height: 1;
  text-shadow: 0 1px rgba(255, 248, 226, 0.42);
}

.athena-operation-caption p {
  margin: 0 0 0.55rem;
  color: var(--chronicle-paper-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.athena-operation-caption a {
  color: #614714;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
}

.athena-operation-seal {
  position: absolute;
  right: 0.65rem;
  bottom: 0.35rem;
  width: 6.5rem;
  height: 6.5rem;
  object-fit: contain;
  transform: rotate(7deg);
  filter: drop-shadow(0 0.55rem 0.65rem rgba(57, 26, 15, 0.42));
}

.events-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  gap: 1.35rem;
}

.events-dashboard-accordion .dash-server {
  margin: 0;
  background: rgba(9, 8, 7, 0.96);
  border-color: var(--chronicle-gold-line);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.42);
}

.events-dashboard-accordion .dash-server-menu {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.events-dashboard-accordion .dash-server-menu[aria-hidden="true"] {
  display: grid;
}

.events-command-dossier {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  margin-inline: auto;
  padding: 0.8rem;
  position: relative;
  isolation: isolate;
  color: var(--chronicle-paper-ink);
  background:
    linear-gradient(rgba(104, 83, 47, 0.06), rgba(104, 83, 47, 0.06)),
    url("/assets/chronicle-paper-texture-v1.webp") center / 38rem repeat,
    #d1c5aa;
  border: 1px solid rgba(84, 63, 31, 0.62);
  box-shadow:
    0 0 0 0.28rem #a99469,
    0 0 0 0.42rem rgba(227, 216, 190, 0.86),
    0 1.75rem 4.5rem rgba(0, 0, 0, 0.48);
}

.events-command-dossier::before {
  content: none;
}

.events-command-masthead,
.events-command-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.65rem;
  padding: 0.68rem 0.85rem;
  color: #685021;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: rgba(226, 216, 192, 0.24);
  border: 1px solid rgba(91, 67, 31, 0.34);
}

.events-command-state { white-space: nowrap; }

.events-command-body {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  padding-block: 0;
}

.events-command-carousel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  color: var(--chronicle-text);
  background: #100e0a;
  border: 1px solid rgba(91, 67, 31, 0.62);
  box-shadow: inset 0 0 0 0.35rem rgba(216, 199, 157, 0.08);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.events-command-carousel.is-dragging { cursor: grabbing; }

.events-command-carousel-track,
.events-command-carousel-slide {
  position: absolute;
  inset: 0;
}

.events-command-carousel-slide {
  margin: 0;
  opacity: 0;
  transform: translateX(1.25rem);
  pointer-events: none;
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
}

.events-command-carousel-slide::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 36%, rgba(8, 7, 5, 0.08) 58%, rgba(8, 7, 5, 0.64) 100%),
    linear-gradient(180deg, rgba(8, 7, 5, 0.08), transparent 24%, transparent 58%, rgba(8, 7, 5, 0.76) 100%),
    linear-gradient(90deg, rgba(8, 7, 5, 0.48), transparent 18%, transparent 82%, rgba(8, 7, 5, 0.48));
  content: "";
  pointer-events: none;
}

.events-command-carousel-slide.is-active {
  z-index: 1;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.events-command-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.035);
  object-position: center;
  transform: scale(1.04);
  filter: sepia(0.08) saturate(0.88) contrast(1.04);
  -webkit-user-drag: none;
}

.events-command-carousel-slide.is-active img {
  animation: events-command-focus-pull 6s linear both;
}

@keyframes events-command-focus-pull {
  0% {
    transform: scale(1.085);
    filter: blur(0.3rem) sepia(0.12) saturate(0.74) contrast(0.94) brightness(0.78);
  }
  12% {
    transform: scale(1.045);
    filter: blur(0) sepia(0.08) saturate(0.88) contrast(1.04) brightness(1);
  }
  100% {
    transform: scale(1.075);
    filter: blur(0) sepia(0.08) saturate(0.92) contrast(1.06) brightness(1.02);
  }
}

.events-command-carousel-caption {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  overflow: hidden;
  display: grid;
  gap: 0.18rem;
  min-width: 12.5rem;
  max-width: min(21rem, calc(100% - 2rem));
  padding: 0.75rem 1rem 0.8rem;
  color: var(--chronicle-text);
  background: rgba(11, 9, 6, 0.88);
  border: 1px solid rgba(226, 216, 192, 0.28);
  box-shadow: 0 0.85rem 1.8rem rgba(0, 0, 0, 0.34);
  opacity: 0;
  transform: translateY(-0.65rem);
  transition: opacity 320ms var(--ease-out) 100ms, transform 420ms var(--ease-out) 100ms;
  pointer-events: none;
}

.events-command-carousel-caption::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.14rem;
  background: linear-gradient(90deg, var(--chronicle-gold), var(--chronicle-gold-bright));
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--ease-out) 220ms;
}

.events-command-carousel-slide.is-active .events-command-carousel-caption {
  opacity: 1;
  transform: translateY(0);
}

.events-command-carousel-slide.is-active .events-command-carousel-caption::after { transform: scaleX(1); }

.events-command-carousel-caption-index {
  color: var(--chronicle-gold-bright);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.events-command-carousel-caption strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.05;
}

.events-command-carousel-caption small {
  color: var(--chronicle-text-soft);
  font-size: 0.75rem;
  line-height: 1.35;
}

.events-command-carousel-arrow,
.events-command-carousel-dots button {
  appearance: none;
  border: 0;
  font: inherit;
}

.events-command-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  place-items: center;
  color: var(--chronicle-text);
  background: rgba(8, 7, 5, 0.64);
  border: 1px solid rgba(226, 216, 192, 0.34);
  border-radius: 50%;
  box-shadow: 0 0.45rem 1.2rem rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 180ms var(--ease-out), background-color 180ms var(--ease-out);
}

.events-command-carousel-arrow span {
  display: block;
  margin-top: -0.12rem;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
}

.events-command-carousel-arrow.is-previous { left: 0.8rem; }
.events-command-carousel-arrow.is-next { right: 0.8rem; }
.events-command-carousel:hover .events-command-carousel-arrow,
.events-command-carousel:focus-within .events-command-carousel-arrow { opacity: 1; }
.events-command-carousel-arrow:hover { background: rgba(8, 7, 5, 0.86); }
.events-command-carousel-arrow:active { transform: translateY(calc(-50% + 1px)); }

.events-command-carousel-arrow:focus-visible,
.events-command-carousel-dots button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.events-command-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 0.85rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.35rem 0.5rem;
  transform: translateX(-50%);
}

.events-command-carousel-dots button {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border-radius: 50%;
}

.events-command-carousel-dots button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.43rem;
  height: 0.43rem;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.38);
  transform: translate(-50%, -50%);
  transition: background-color 180ms var(--ease-out), transform 180ms var(--ease-out);
  content: "";
}

.events-command-carousel-dots button:hover::before { background: rgba(255, 255, 255, 0.72); }

.events-command-carousel-dots button[aria-current="true"]::before {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.2);
}

.events-command-carousel-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.events-command-feature {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  align-items: end;
  color: var(--chronicle-text) !important;
  text-decoration: none;
  background: #100e0a;
  border: 1px solid rgba(91, 67, 31, 0.62);
  box-shadow: inset 0 0 0 0.35rem rgba(216, 199, 157, 0.08);
}

.events-command-feature-art {
  position: absolute;
  inset: 0;
  opacity: 0.78;
  background:
    radial-gradient(circle at 58% 35%, rgba(193, 148, 55, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(9, 8, 6, 0.12), rgba(9, 8, 6, 0.94)),
    url("/assets/dashboard.webp") center / cover no-repeat;
  filter: sepia(0.2) saturate(0.72) contrast(1.06);
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
}

.events-command-feature:hover .events-command-feature-art { opacity: 0.92; transform: scale(1.018); }

.events-command-feature-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.55rem;
  padding: 1.45rem;
}

.events-command-feature-copy small,
.events-command-feature-copy b {
  color: var(--chronicle-gold);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.events-command-feature-copy strong {
  max-width: 18rem;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2.25rem);
  line-height: 1;
}

.events-command-feature-copy > span { max-width: 25rem; color: var(--chronicle-text-soft); font-size: 0.78rem; line-height: 1.5; }

.events-command-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.events-command-ledger a {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0.2rem 0.75rem;
  align-content: center;
  padding: 1rem 1.05rem;
  color: var(--chronicle-paper-ink) !important;
  text-decoration: none;
  background:
    linear-gradient(rgba(83, 67, 39, 0.08), rgba(83, 67, 39, 0.08)),
    url("/assets/chronicle-paper-texture-v1.webp") center / 24rem repeat,
    #d2c6aa;
  border: 1px solid rgba(91, 67, 31, 0.42);
  box-shadow: 0 0.45rem 1rem rgba(47, 34, 15, 0.12);
  transition: background-color 260ms var(--ease-out), transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), border-color 260ms var(--ease-out);
}

.events-command-ledger a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.14rem;
  background: linear-gradient(90deg, var(--chronicle-gold), var(--chronicle-gold-bright));
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}

.events-command-ledger a:last-child { grid-column: 1 / -1; }
.events-command-ledger a:hover,
.events-command-ledger a:focus-visible {
  transform: translateY(-0.16rem);
  background-color: #d9cdb1;
  border-color: rgba(119, 91, 35, 0.72);
  box-shadow: 0 0.8rem 1.5rem rgba(47, 34, 15, 0.2);
}

.events-command-ledger a:hover::after,
.events-command-ledger a:focus-visible::after { transform: scaleX(1); }

.events-command-ledger a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -0.28rem;
}

.events-command-ledger a:active {
  transform: translateY(1px);
  box-shadow: 0 0.3rem 0.7rem rgba(47, 34, 15, 0.18);
}

.events-command-ledger a > span {
  grid-row: 1 / 3;
  align-self: start;
  padding-top: 0.14rem;
  color: #775b23;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  transition: color 220ms var(--ease-out);
}

.events-command-ledger a strong {
  width: fit-content;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  transition: color 220ms var(--ease-out), transform 260ms var(--ease-out);
}

.events-command-ledger a:hover > span,
.events-command-ledger a:focus-visible > span { color: #4f360f; }

.events-command-ledger a:hover strong,
.events-command-ledger a:focus-visible strong {
  color: #2e200a;
  transform: translateX(0.18rem);
}

.events-command-ledger a small { overflow: hidden; color: var(--chronicle-paper-muted); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }

.events-command-footer { border-color: rgba(91, 67, 31, 0.34); }
.events-command-footer > span { display: inline-flex; align-items: center; gap: 0.55rem; }
.events-command-footer .guild-avatar { width: 1.5rem; height: 1.5rem; }
.events-command-admin { color: #614714; }

.events-command-strip {
  display: grid;
  grid-template-columns: minmax(16rem, 1.1fr) minmax(0, 2fr) auto;
  align-items: stretch;
  color: var(--chronicle-text);
  background: rgba(10, 8, 6, 0.94);
  border: 1px solid var(--chronicle-gold-line);
  border-left: 0.22rem solid var(--chronicle-gold);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.38);
}

.events-command-primary {
  position: relative;
  display: grid;
  align-content: center;
  gap: 0.15rem;
  padding: 1.25rem 3rem 1.25rem 1.4rem;
  color: var(--chronicle-text) !important;
  text-decoration: none;
  border-right: 1px solid var(--chronicle-gold-line);
}

.events-command-primary > span:last-child { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--chronicle-gold); }
.events-command-index { color: var(--chronicle-gold); font-family: var(--font-outlier); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.events-command-primary strong { font-family: var(--font-display); font-size: 1.35rem; }
.events-command-primary small { color: var(--chronicle-text-muted); font-size: 0.75rem; }
.events-command-primary:hover { background: rgba(197, 160, 89, 0.1); }

.events-command-links {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.events-command-links a {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1rem;
  color: var(--chronicle-text-soft) !important;
  text-decoration: none;
  border-right: 1px solid rgba(197, 160, 89, 0.16);
  border-bottom: 1px solid rgba(197, 160, 89, 0.16);
  font-size: 0.75rem;
  white-space: nowrap;
}

.events-command-links a:nth-child(n + 3) { border-bottom: 0; }
.events-command-links a span { color: var(--chronicle-gold); font-family: var(--font-outlier); font-size: 0.75rem; }
.events-command-links a:hover { color: var(--chronicle-text) !important; background: rgba(197, 160, 89, 0.1); }
.events-command-create { align-self: center; margin: 1rem; white-space: nowrap; }

@media (max-width: 70rem) {
  body[data-page="command-center"] .athena-feature-overview { min-height: auto; padding-block: clamp(4rem, 8vw, 7.5rem); }
  .athena-operations-dossier {
    position: relative;
    top: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .athena-operations-dossier .athena-council-intro { min-height: 24rem; height: 24rem; }
  .athena-operations-dossier .athena-council-intro,
  .athena-operation-browser,
  .athena-operation-stage { transform: none; filter: none; clip-path: none; }
  .athena-operations-dossier .athena-council-intro { opacity: 1; }
  .athena-operation-browser { grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.35fr); opacity: 1; pointer-events: auto; visibility: visible; }
  .events-command-strip { grid-template-columns: 1fr auto; }
  .events-command-primary { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--chronicle-gold-line); }
}

@media (max-width: 58rem) {
  .athena-operation-browser { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 1.25rem; }
  .athena-operation-item { padding-inline: 0.7rem; }
  .athena-operation-item strong { font-size: clamp(1rem, 2.3vw, 1.25rem); }
  .athena-operation-stage { min-height: 26rem; }
  .athena-operation-photo { height: 16rem; }
}

@media (max-width: 46rem) {
  .athena-operation-browser { grid-template-columns: 1fr; }
  .athena-operation-stage { min-height: 25rem; }
  .athena-operation-photo { height: 15rem; }
  .athena-operation-caption { min-height: 9rem; padding-right: 5.4rem; }
  .athena-operation-seal { width: 5.3rem; height: 5.3rem; }
  .events-command-strip { grid-template-columns: 1fr; }
  .events-command-primary { grid-column: auto; }
  .events-command-links { grid-template-columns: 1fr; }
  .events-command-links a { border-right: 0; border-bottom: 1px solid rgba(197, 160, 89, 0.16) !important; }
  .events-command-create { justify-self: stretch; text-align: center; }
  .events-dashboard-accordion .dash-server-menu { grid-template-columns: 1fr; }
  .events-command-body { grid-template-columns: 1fr; }
  .events-command-sidebar { flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid rgba(91, 67, 31, 0.34); }
  .events-command-feature { min-height: 17rem; border-right: 0; border-bottom: 1px solid rgba(91, 67, 31, 0.55); }
  .events-command-ledger { grid-template-columns: 1fr; }
  .events-command-ledger a:last-child { grid-column: auto; }
  .events-command-masthead,
  .events-command-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .events-command-carousel-slide,
  .events-command-carousel-slide img,
  .events-command-carousel-caption,
  .events-command-carousel-caption::after,
  .events-command-ledger a,
  .events-command-ledger a::after,
  .events-command-ledger a strong,
  .athena-operation-item,
  .athena-operation-item::before,
  .athena-operation-item::after,
  .athena-operation-item strong,
  .athena-operation-item b,
  .athena-operation-stage { transition-duration: 1ms !important; }
  .athena-council-aura,
  .athena-council-dust i,
  .athena-operation-particles i,
  .athena-hero-particles i,
  .athena-operations-dossier .athena-council-seal { animation: none !important; }
  .athena-operations-dossier .athena-council-intro { transform: none !important; }
  body[data-page="command-center"] .athena-hero-bg::before,
  body[data-page="command-center"] .athena-hero-content,
  body[data-page="command-center"] .athena-hero-actions,
  .athena-hero-particles { transform: none !important; opacity: 1 !important; filter: none !important; }
  .athena-operation-photo img.is-visible { animation: none !important; transform: scale(1.035) !important; filter: sepia(0.12) contrast(1.04) brightness(0.9) !important; }
  .events-command-carousel-slide,
  .events-command-carousel-slide img,
  .events-command-carousel-caption,
  .events-command-carousel-caption::after,
  .events-command-ledger a,
  .events-command-ledger a::after,
  .events-command-ledger a strong { transition-duration: 1ms !important; transition-delay: 0ms !important; transform: none !important; }
  .events-command-carousel-slide img { animation: none !important; filter: sepia(0.08) saturate(0.88) contrast(1.04) !important; }
}
/* ── Toasts (bottom-right) ─────────────────────────────────────── */

#athena-toasts {
  position: fixed;
  inset-block-end: var(--space-lg);
  inset-inline-end: var(--space-lg);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-sm);
  pointer-events: none;
}

.athena-toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: min(24rem, calc(100vw - 2 * var(--space-lg)));
  padding: var(--space-sm) var(--space-md);
  color: var(--chronicle-text);
  background: var(--chronicle-ink-raised);
  border: 1px solid var(--chronicle-gold-line);
  border-radius: var(--radius-sm, 0.25rem);
  box-shadow:
    0 var(--space-md) var(--space-xl) var(--chronicle-shadow),
    inset 0 1px 0 rgba(197, 160, 89, 0.32);
  font-size: var(--text-sm);
  line-height: 1.45;
  animation: athena-toast-in var(--dur-short) var(--ease-out) both;
}

/* Danger signals stay restrained: gold frame, ember status dot. */
.athena-toast-error::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--space-sm);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--chronicle-danger);
  box-shadow: 0 0 0.5rem color-mix(in oklch, var(--chronicle-danger) 55%, transparent);
  pointer-events: none;
}

/* Auto-dismiss countdown: fills left to right over the 5s lifetime.
   Animated via width (main-thread) so it ticks reliably in headless QA. */
.athena-toast-timer {
  position: absolute;
  inset-block-end: 1px;
  inset-inline-start: 1px;
  width: 0;
  height: 2px;
  border-radius: var(--radius-sm, 0.25rem);
  background: linear-gradient(90deg, var(--chronicle-gold), var(--chronicle-gold-bright));
  animation: athena-toast-timer 5000ms linear forwards;
  pointer-events: none;
}

@keyframes athena-toast-timer {
  from { width: 0; }
  to { width: calc(100% - 2px); }
}

.athena-toast-label {
  flex: 1 1 auto;
  min-width: 0;
}

.athena-toast-error .athena-toast-label {
  padding-inline-start: var(--space-sm);
}

.athena-toast-close {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--chronicle-gold);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 0.25rem);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}

.athena-toast-close:hover,
.athena-toast-close:focus-visible {
  color: var(--chronicle-gold-bright);
  border-color: var(--chronicle-gold-line);
  background: rgba(197, 160, 89, 0.1);
}

.athena-toast.is-leaving {
  opacity: 0;
  transform: translateY(var(--space-sm));
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

@keyframes athena-toast-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-sm));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .athena-toast,
  .athena-toast.is-leaving,
  .athena-toast-timer {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Dashboard: servers without the bot ───────────────────────── */

/* Reserve the vertical scrollbar gutter so toggling the without-bot list
   (which grows the page) never recenters the layout. */
html {
  scrollbar-gutter: stable;
}

.dash-stale-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--chronicle-gold-line);
  border-radius: var(--radius-sm, 0.25rem);
  background: var(--chronicle-gold-wash);
  color: var(--chronicle-text);
  font-size: var(--text-sm);
}
.dash-stale-session a {
  color: var(--chronicle-gold-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.dash-stale-session[hidden] {
  display: none;
}
.dash-stale-session-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.dash-stale-session-actions button {
  background: transparent;
  border: 1px solid var(--chronicle-gold-line);
  border-radius: var(--radius-sm, 0.25rem);
  color: var(--chronicle-text-muted);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
}
.dash-stale-session-actions button:hover {
  color: var(--chronicle-text);
  border-color: var(--chronicle-gold);
}

.dash-network-grid {
  width: min(100%, 1280px);
  margin-inline: auto;
}
.dash-network-grid > * {
  min-width: 0;
  max-width: none;
}

.dash-without-bot-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 42px;
  margin-bottom: var(--space-4);
}
.dash-without-bot-search {
  flex: 1;
  margin-bottom: 0;
  min-width: 0;
  /* Explicit dark surface (matches .dash-server-search) so the field never
     flashes white if the base rule is missing from a stale bundle. */
  background: rgba(12, 12, 12, 0.58);
  border: 1px solid rgba(201, 154, 46, 0.18);
}
.dash-without-bot-search input {
  background: transparent;
}

.dash-without-bot-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-width: 240px;
  padding: var(--space-2xs) var(--space-sm);
  color: var(--chronicle-gold-bright);
  background: transparent;
  border: 1px solid var(--chronicle-gold-line);
  border-radius: var(--radius-sm, 0.25rem);
  font-size: var(--text-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.dash-without-bot-toggle:hover,
.dash-without-bot-toggle:focus-visible {
  background: var(--chronicle-gold-wash);
  border-color: var(--chronicle-gold);
}

.dash-without-bot-list {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.dash-without-bot-list[hidden] {
  display: none;
}

.dash-without-bot-list .dash-server {
  border-color: color-mix(in oklch, var(--chronicle-danger) 22%, var(--chronicle-gold-line));
}

.dash-invite-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.dash-invite-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--chronicle-gold-bright);
}

.dash-invite-desc,
.dash-invite-note {
  margin: 0;
  color: var(--chronicle-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.dash-invite-note a {
  color: var(--chronicle-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Dashboard server tile grid (replaces the accordion list) ────── */
.dash-tile-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg) var(--space-md);
  padding-block: var(--space-sm) var(--space-md);
}

.dash-tile-divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-xl) 0 var(--space-md);
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dash-tile-divider::before,
.dash-tile-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--chronicle-rule-soft);
}

.dash-nobot-details { margin: 0; }
.dash-nobot-details:not([open]) > .dash-tile-grid { display: none; }
.dash-nobot-details[open] > .dash-tile-grid { display: flex; }
.dash-nobot-details > summary { cursor: pointer; list-style: none; }
.dash-nobot-details > summary::-webkit-details-marker { display: none; }
.dash-nobot-details > summary::marker { display: none; content: ""; }
.dash-nobot-details > summary .chevron {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-inline-start: 0.4rem;
  vertical-align: middle;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.dash-nobot-details[open] > summary .chevron { transform: rotate(-135deg); }
.dash-nobot-details > summary:hover { color: var(--chronicle-gold); }

.dash-tile {
  position: relative;
  width: 6.5rem;
  padding: var(--space-xs) 0;
  text-align: center;
  border-radius: var(--space-2xs);
}
.dash-tile-link,
.dash-tile-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 0;
  color: inherit;
  text-align: inherit;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.dash-tile-link:focus-visible,
.dash-tile-toggle:focus-visible {
  outline: 2px solid var(--chronicle-focus);
  outline-offset: 3px;
}

.dash-tile-icon-wrap {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
}
.dash-tile-icon-wrap .server-mark,
.dash-tile-icon-wrap .server-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: 30%;
  object-fit: cover;
  color: var(--chronicle-void);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  background: var(--chronicle-paper-deep);
  border: 1px solid var(--chronicle-gold-line);
  box-shadow: 0 0.5rem 1.1rem rgba(0, 0, 0, 0.45);
  transition: border-radius var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.dash-tile:hover .dash-tile-icon-wrap .server-mark,
.dash-tile:hover .dash-tile-icon-wrap .server-avatar,
.dash-tile-link:focus-visible .dash-tile-icon-wrap .server-mark,
.dash-tile-link:focus-visible .dash-tile-icon-wrap .server-avatar,
.dash-tile-toggle:focus-visible .dash-tile-icon-wrap .server-mark,
.dash-tile-toggle:focus-visible .dash-tile-icon-wrap .server-avatar {
  border-radius: 22%;
  transform: translateY(-2px);
  box-shadow: 0 0.8rem 1.4rem rgba(0, 0, 0, 0.55), 0 0 0 2px var(--chronicle-gold-wash);
}

.dash-tile-status {
  position: absolute;
  right: -0.1rem;
  bottom: -0.1rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border: 2px solid var(--chronicle-ink);
}
.dash-tile-status.ready { background: var(--chronicle-success); }
.dash-tile-status.warn { background: var(--chronicle-gold-bright); }

.dash-tile-bookmark {
  position: absolute;
  top: -0.4rem;
  left: -0.4rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  min-height: 0; /* override global button min-height: 2.75rem */
  padding: 0;
  color: var(--chronicle-gold);
  background: var(--chronicle-ink-raised);
  border: 1px solid var(--chronicle-gold-line);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.2rem);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.dash-tile-bookmark svg { width: 0.6rem; height: 0.6rem; fill: currentColor; }
.dash-tile-bookmark:hover,
.dash-tile-bookmark:focus-visible,
.dash-tile-bookmark[aria-pressed="true"] {
  color: var(--chronicle-gold-bright);
  border-color: var(--chronicle-gold-bright);
}
.dash-tile-bookmark[aria-pressed="true"] svg { fill: var(--chronicle-gold-bright); }
.dash-tile:hover .dash-tile-bookmark,
.dash-tile:focus-within .dash-tile-bookmark,
.dash-tile-bookmark[aria-pressed="true"] {
  opacity: 1;
  transform: translateY(0);
}

.dash-tile-name {
  overflow: hidden;
  width: 100%;
  color: var(--chronicle-text-soft);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-tile:hover .dash-tile-name,
.dash-tile-link:focus-visible .dash-tile-name,
.dash-tile-toggle:focus-visible .dash-tile-name { color: var(--chronicle-gold-bright); }

/* Not-yet-added servers: held back rather than switched off, so the grid reads
   as one family. A dashed edge says "slot open"; the word Invite moved out of
   the artwork and under the name, where it no longer crowds either. */
.dash-tile.is-dim .dash-tile-icon-wrap .server-mark,
.dash-tile.is-dim .dash-tile-icon-wrap .server-avatar {
  /* Keep the parchment face the connected tiles use — the letter fallback is
     dark ink, so an ink background would erase it. Desaturate instead. */
  filter: grayscale(0.85) brightness(0.78);
  opacity: 0.75;
  border: 1px dashed var(--chronicle-gold-line);
  box-shadow: none;
}
.dash-tile.is-dim:hover .dash-tile-icon-wrap .server-mark,
.dash-tile.is-dim:hover .dash-tile-icon-wrap .server-avatar,
.dash-tile.is-invite-open .dash-tile-icon-wrap .server-mark,
.dash-tile.is-invite-open .dash-tile-icon-wrap .server-avatar {
  filter: none;
  opacity: 1;
  border-style: solid;
  border-color: var(--chronicle-gold);
}
.dash-tile.is-dim .dash-tile-name { color: var(--chronicle-text-muted); }

/* Corner "+" in the same spot the connected tiles put their status dot. */
.dash-tile-invite-badge {
  position: absolute;
  right: -0.25rem;
  bottom: -0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  color: var(--chronicle-void);
  background: var(--chronicle-gold);
  border: 2px solid var(--chronicle-ink);
  border-radius: 50%;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.dash-tile-invite-badge svg { width: 0.7rem; height: 0.7rem; }
.dash-tile:hover .dash-tile-invite-badge,
.dash-tile.is-invite-open .dash-tile-invite-badge {
  background: var(--chronicle-gold-bright);
  transform: scale(1.12);
}

.dash-tile-invite-hint {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chronicle-gold-deep);
  transition: color var(--dur-short) var(--ease-out);
}
.dash-tile:hover .dash-tile-invite-hint,
.dash-tile.is-invite-open .dash-tile-invite-hint {
  color: var(--chronicle-gold-bright);
}

.dash-tile-invite-popover {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  z-index: 5;
  display: none;
  width: 15rem;
  padding: var(--space-sm);
  text-align: left;
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-paper);
  border: 1px solid var(--chronicle-paper-rule);
  border-radius: 4px;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
}
/* toggleDashInvite() marks the tile and clears the popover's `hidden`
   attribute, but neither beats the `display: none` above — without this rule
   the Invite button looks dead because the popover never becomes visible. */
.dash-tile.is-invite-open .dash-tile-invite-popover {
  display: block;
  animation: dash-invite-in var(--dur-short) var(--ease-out);
}

@keyframes dash-invite-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-0.3rem);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

/* Rows near the page bottom flip above the tile — see toggleDashInvite(). */
.dash-tile.is-invite-open .dash-tile-invite-popover.is-flip-up {
  top: auto;
  bottom: calc(100% + 0.6rem);
}

.dash-tile-invite-popover p {
  margin: 0 0 var(--space-xs);
  font-size: 0.76rem;
  line-height: 1.45;
  /* Explicit: the surrounding dashboard sets a light body colour, which is
     unreadable on the parchment panel. */
  color: var(--chronicle-paper-ink);
}
.dash-tile-invite-eyebrow {
  margin: 0 0 0.1rem;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chronicle-paper-muted);
}

.dash-tile-invite-target {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--chronicle-paper-ink);
  overflow-wrap: anywhere;
}

/* Primary/secondary pair drawn for parchment: filled ink against an outline,
   rather than two heavy fills competing. */
.dash-tile-invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0.55rem 0 0.5rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--chronicle-paper-rule);
}

.dash-tile-invite-popover .button {
  display: inline-block;
  min-height: 0;
  padding: 0.4rem 0.75rem;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 3px;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.dash-invite-primary {
  color: var(--chronicle-paper);
  background: var(--chronicle-paper-ink);
  border: 1px solid var(--chronicle-paper-ink);
}
.dash-invite-primary:hover { background: var(--chronicle-paper-muted); border-color: var(--chronicle-paper-muted); }

.dash-invite-secondary {
  color: var(--chronicle-paper-ink);
  background: transparent;
  border: 1px solid var(--chronicle-paper-rule);
}
.dash-invite-secondary:hover { background: rgba(0, 0, 0, 0.07); }
.dash-tile-invite-popover code {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  padding: 0 0.2rem;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}
.dash-tile-invite-popover .dash-tile-invite-note {
  margin-bottom: 0.3rem;
  color: var(--chronicle-paper-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}
.dash-tile-invite-popover .dash-tile-invite-note:last-child { margin-bottom: 0; }
.dash-tile-invite-popover .dash-tile-invite-note a {
  color: var(--chronicle-paper-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Guild folio: inline logo next to the page title ──────────────── */
.section-heading.has-guild-mark {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.section-heading-mark { flex-shrink: 0; }
.section-heading-mark .server-mark,
.section-heading-mark .server-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  overflow: hidden;
  border-radius: 26%;
  object-fit: cover;
  color: var(--chronicle-void);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  background: var(--chronicle-paper-deep);
  border: 1px solid var(--chronicle-gold-line);
  box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.5);
}

/* ── Guild folio sidebar: switcher rail + vertical section nav ────── */
.events-command-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-sm);
  background: rgba(83, 67, 39, 0.08);
  border-right: 1px solid rgba(91, 67, 31, 0.34);
}

.events-command-switcher-label {
  margin: 0 0 0.5rem;
  color: var(--chronicle-paper-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.events-command-switcher-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.events-switcher-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  overflow: hidden;
  color: var(--chronicle-void);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--chronicle-paper-deep);
  border: 1px solid transparent;
  border-radius: 28%;
  transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.events-switcher-tile .server-mark,
.events-switcher-tile .server-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.events-switcher-tile:hover,
.events-switcher-tile:focus-visible { transform: translateY(-1px); }
.events-switcher-tile:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.events-switcher-tile.is-current {
  border-color: var(--chronicle-paper-ink);
  box-shadow: 0 0 0 2px var(--chronicle-paper-deep), 0 0 0 3px var(--chronicle-paper-rule);
}

.events-command-permission {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  padding: 0.35rem 0.55rem;
  color: var(--chronicle-paper-ink);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(197, 160, 89, 0.28);
  border: 1px solid rgba(91, 67, 31, 0.34);
  border-radius: 3px;
}
.events-command-permission svg { width: 0.7rem; height: 0.7rem; }

.events-command-nav-list {
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--space-lg);
}

.events-command-nav-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.4rem;
  color: var(--chronicle-paper-ink) !important;
  text-decoration: none;
  border-top: 1px solid rgba(91, 67, 31, 0.22);
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.events-command-nav-row:first-child { border-top: none; }
.events-command-nav-row:hover,
.events-command-nav-row:focus-visible {
  background-color: rgba(83, 67, 39, 0.1);
  transform: translateX(0.2rem);
}
.events-command-nav-row:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -0.2rem;
}
.events-command-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  background: rgba(210, 198, 170, 0.6);
  border: 1px solid rgba(91, 67, 31, 0.34);
  border-radius: 4px;
}
.events-command-nav-icon img { width: 100%; height: 100%; object-fit: cover; }
.events-command-nav-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.15;
}
.events-command-nav-text small {
  overflow: hidden;
  color: var(--chronicle-paper-muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Premium folio: dossier frame, command cards, event cards (2026-08-04) ── */

/* Dossier sheet: warm glaze + double-frame with corner brackets */
.events-command-dossier {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 244, 208, 0.5), transparent 55%),
    linear-gradient(rgba(104, 83, 47, 0.06), rgba(104, 83, 47, 0.06)),
    url("/assets/chronicle-paper-texture-v1.webp") center / 38rem repeat,
    #d1c5aa;
}

.events-command-dossier::before {
  content: "";
  position: absolute;
  inset: 0.55rem;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(197, 160, 89, 0.3);
  background:
    linear-gradient(var(--chronicle-gold-deep), var(--chronicle-gold-deep)) top left / 1.1rem 2px,
    linear-gradient(var(--chronicle-gold-deep), var(--chronicle-gold-deep)) top left / 2px 1.1rem,
    linear-gradient(var(--chronicle-gold-deep), var(--chronicle-gold-deep)) top right / 1.1rem 2px,
    linear-gradient(var(--chronicle-gold-deep), var(--chronicle-gold-deep)) top right / 2px 1.1rem,
    linear-gradient(var(--chronicle-gold-deep), var(--chronicle-gold-deep)) bottom left / 1.1rem 2px,
    linear-gradient(var(--chronicle-gold-deep), var(--chronicle-gold-deep)) bottom left / 2px 1.1rem,
    linear-gradient(var(--chronicle-gold-deep), var(--chronicle-gold-deep)) bottom right / 1.1rem 2px,
    linear-gradient(var(--chronicle-gold-deep), var(--chronicle-gold-deep)) bottom right / 2px 1.1rem;
  background-repeat: no-repeat;
}

/* Masthead: gold rule strip + fleuron seals */
.events-command-masthead {
  background: linear-gradient(90deg, rgba(226, 216, 192, 0.22), rgba(226, 216, 192, 0.5), rgba(226, 216, 192, 0.22));
}
.events-command-masthead::after {
  content: "✦";
  color: var(--chronicle-gold-deep);
  font-size: 0.75rem;
  line-height: 1;
}
.events-command-kicker { color: var(--chronicle-gold-deep); }
.events-command-kicker::before {
  content: "✦";
  margin-right: 0.45rem;
  color: var(--chronicle-gold);
}

/* Sidebar: guild switcher + permission seal (structure unchanged) */
.events-command-sidebar {
  background: linear-gradient(180deg, rgba(197, 160, 89, 0.12), rgba(83, 67, 39, 0.08));
}
.events-command-switcher-label::before {
  content: "";
  display: inline-block;
  width: 0.9rem;
  height: 1px;
  margin-right: 0.4rem;
  vertical-align: middle;
  background: var(--chronicle-gold);
}
.events-switcher-tile {
  border-radius: 30%;
  transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.events-switcher-tile:hover,
.events-switcher-tile:focus-visible {
  transform: translateY(-2px);
  border-color: var(--chronicle-gold);
  box-shadow: 0 0.4rem 0.8rem rgba(47, 34, 15, 0.28), 0 0 0 2px var(--chronicle-gold-wash);
}
.events-switcher-tile.is-current {
  border-color: var(--chronicle-gold-deep);
  box-shadow: 0 0 0 2px var(--chronicle-paper-deep), 0 0 0 3px var(--chronicle-gold);
}
.events-command-permission {
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.46), rgba(197, 160, 89, 0.16));
  border-color: rgba(119, 91, 35, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 3px rgba(47, 34, 15, 0.12);
  transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.events-command-permission:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 3px var(--chronicle-gold-wash);
}

/* Command cards: raised dossier panels with index, sheen sweep, hover lift */
.events-command-nav-list {
  gap: 0.8rem;
  padding: var(--space-lg);
}

.events-command-nav-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 2.7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  color: var(--chronicle-paper-ink) !important;
  text-decoration: none;
  background:
    linear-gradient(120deg, rgba(255, 250, 230, 0.55), rgba(229, 205, 151, 0.14) 60%, transparent),
    rgba(255, 250, 230, 0.24);
  border: 1px solid rgba(91, 67, 31, 0.32);
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(47, 34, 15, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  overflow: hidden;
  animation: events-folio-card-in 480ms var(--ease-out) backwards;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.events-command-nav-row:first-child { border-top: 1px solid rgba(91, 67, 31, 0.32); }
.events-command-nav-row:nth-child(1) { animation-delay: 40ms; }
.events-command-nav-row:nth-child(2) { animation-delay: 90ms; }
.events-command-nav-row:nth-child(3) { animation-delay: 140ms; }
.events-command-nav-row:nth-child(4) { animation-delay: 190ms; }
.events-command-nav-row:nth-child(5) { animation-delay: 240ms; }

@keyframes events-folio-card-in {
  from { opacity: 0; transform: translateY(0.8rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sheen sweep across the card on hover */
.events-command-nav-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
  transform: translateX(-130%);
  transition: transform 640ms var(--ease-out);
}
.events-command-nav-row:hover::before,
.events-command-nav-row:focus-visible::before { transform: translateX(130%); }

.events-command-nav-row:hover,
.events-command-nav-row:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(119, 91, 35, 0.7);
  background-color: rgba(255, 250, 230, 0.55);
  box-shadow: 0 0.85rem 1.6rem rgba(47, 34, 15, 0.24), 0 0 0 1px var(--chronicle-gold-line), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.events-command-nav-row:active { transform: translateY(-1px); }
.events-command-nav-row:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.events-command-nav-index {
  color: var(--chronicle-gold-deep);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding-right: 0.15rem;
}

.events-command-nav-icon {
  width: 2.7rem;
  height: 2.7rem;
  background: var(--chronicle-paper-raised);
  border: 1px solid rgba(119, 91, 35, 0.5);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 3px rgba(47, 34, 15, 0.18);
  transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.events-command-nav-icon img { transition: transform var(--dur-long) var(--ease-out); }
.events-command-nav-row:hover .events-command-nav-icon,
.events-command-nav-row:focus-visible .events-command-nav-icon {
  transform: scale(1.07) rotate(-2deg);
  border-color: var(--chronicle-gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 3px var(--chronicle-gold-wash);
}
.events-command-nav-row:hover .events-command-nav-icon img,
.events-command-nav-row:focus-visible .events-command-nav-icon img { transform: scale(1.14); }

.events-command-nav-text strong {
  font-size: 1.14rem;
  transition: color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), text-shadow var(--dur-short) var(--ease-out);
}
.events-command-nav-row:hover .events-command-nav-text strong,
.events-command-nav-row:focus-visible .events-command-nav-text strong {
  color: #2e200a;
  transform: translateX(0.12rem);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.events-command-nav-text small { transition: color var(--dur-short) var(--ease-out); }
.events-command-nav-row:hover .events-command-nav-text small,
.events-command-nav-row:focus-visible .events-command-nav-text small { color: #3a2c12; }

.events-command-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--chronicle-gold-deep);
  background: rgba(255, 250, 230, 0.55);
  border: 1px solid rgba(119, 91, 35, 0.42);
  border-radius: 50%;
  opacity: 0.72;
  transform: translateX(-0.25rem);
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.events-command-nav-arrow svg { width: 0.8rem; height: 0.8rem; }
.events-command-nav-row:hover .events-command-nav-arrow,
.events-command-nav-row:focus-visible .events-command-nav-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-gold);
  border-color: var(--chronicle-gold-bright);
  box-shadow: 0 1px 3px rgba(47, 34, 15, 0.25);
}

/* Ongoing & Upcoming: section header + event card lift */
.sc-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-end: var(--space-lg);
}
.sc-section-head .sc-section-label { margin-block-end: 0; }
.sc-section-count {
  color: var(--chronicle-gold-deep);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}


.sc-card {
  animation: events-folio-card-in 480ms var(--ease-out) backwards;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.sc-card:nth-child(1) { animation-delay: 60ms; }
.sc-card:nth-child(2) { animation-delay: 110ms; }
.sc-card:nth-child(3) { animation-delay: 160ms; }
.sc-card:nth-child(4) { animation-delay: 210ms; }
.sc-card:nth-child(5) { animation-delay: 260ms; }
.sc-card:nth-child(6) { animation-delay: 310ms; }
.sc-card:hover { transform: translateY(-5px); }
.sc-card:hover .sc-card-back {
  transform: translateY(-11px) rotate(2.5deg);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.sc-card-front {
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.sc-card:hover .sc-card-front {
  border-color: var(--chronicle-gold-line);
  box-shadow: 0 1.1rem 2.4rem var(--chronicle-shadow), 0 0 0 3px var(--chronicle-gold-wash), inset 0 0 0 var(--space-2xs) var(--chronicle-paper);
}
.sc-banner {
  overflow: hidden;
  border-color: var(--chronicle-paper-rule);
}
.sc-banner img {
  transition: transform var(--dur-long) var(--ease-out), filter var(--dur-long) var(--ease-out);
}
.sc-card:hover .sc-banner img { transform: scale(1.07); }
.sc-title { transition: color var(--dur-short) var(--ease-out); }
.sc-card:hover .sc-title { color: var(--chronicle-gold-deep); }

@media (prefers-reduced-motion: reduce) {
  .events-command-nav-row,
  .events-command-nav-row::before,
  .events-command-nav-icon,
  .events-command-nav-icon img,
  .events-command-nav-text strong,
  .events-command-nav-text small,
  .events-command-nav-arrow,
  .events-switcher-tile,
  .events-command-permission,
  .sc-card,
  .sc-card-front,
  .sc-card .sc-card-back,
  .sc-card .sc-banner img,
  .sc-card .sc-title {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
  .events-command-nav-row:hover,
  .events-command-nav-row:focus-visible,
  .events-command-nav-row:hover .events-command-nav-icon,
  .events-command-nav-row:hover .events-command-nav-text strong,
  .events-command-nav-row:hover .events-command-nav-arrow,
  .events-switcher-tile:hover,
  .events-command-permission:hover,
  .sc-card:hover,
  .sc-card:hover .sc-card-back,
  .sc-card:hover .sc-banner img { transform: none; }
}
/* --------------------------------------------------------------------------
   Events Folio — guild command folio: sidebar + inline content SPA
   Scoped to the .events-folio root so the legacy events-command-* styles
   above remain untouched.
   -------------------------------------------------------------------------- */

:root {
  --events-folio-sidebar-w: 244px;
  --events-folio-sidebar-collapsed: 60px;
  --events-folio-masthead-h: 4rem;
  /* Stage padding is a variable because folio pages that size themselves to the
     viewport have to subtract it (see .event-type-page below). */
  --events-folio-stage-pad: clamp(1rem, 2.5vw, 2.5rem);
}

/* Transparent so the page's atmospheric background image reads through the
   folio instead of being masked by an opaque void panel. Chrome (masthead,
   sidebar) uses the translucent backdrop tokens over it. */
.events-folio {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - var(--chronicle-nav-height));
  background: transparent;
  position: relative;
}

/* The folio used to be locked to the viewport with `.events-folio-stage`
   scrolling internally. That produced TWO scrollbars — the stage's and the
   document's, because the site footer renders after <main> and so lived below
   the locked block — and put the footer out of reach of the stage scroll.
   The document is now the only scroller; the sidebar sticks instead. */

/* `.main` carries `overflow-y: auto` from layout.css, which makes it the
   sticky containing block for everything inside it — the sidebar would scroll
   away instead of pinning. It is not actually scrolling on a folio page, so
   drop the containment just for this layout. */
.main:has(> .events-folio) {
  overflow: visible;
}

/* Masthead --------------------------------------------------------------- */

.events-folio-masthead {
  height: var(--events-folio-masthead-h);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0 var(--space-lg);
  background:
    radial-gradient(120% 340% at 0% 50%, color-mix(in oklch, var(--chronicle-gold) 9%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in oklch, var(--chronicle-ink) 92%, transparent), var(--chronicle-backdrop));
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 20;
}

/* Gold hairline that fades out to the right instead of ruling edge to edge. */
.events-folio-masthead::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--chronicle-gold-line),
    color-mix(in oklch, var(--chronicle-gold-line) 45%, transparent) 45%,
    transparent
  );
}

/* Guild crest — the folio's anchor. A conic ring rather than a linear one: a
   linear gradient fading to transparent leaves the lower arc unpainted and
   reads as a clipped circle. */
.events-folio-crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    var(--chronicle-gold-bright),
    var(--chronicle-gold-deep) 28%,
    var(--chronicle-gold) 52%,
    var(--chronicle-gold-deep) 76%,
    var(--chronicle-gold-bright)
  );
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0.35rem 1rem rgba(0, 0, 0, 0.45),
    0 0 1.4rem -0.4rem var(--chronicle-gold);
  /* Animation is declared with the entrance sequence further down. */
}

/* Slow halo breath, so the masthead has a pulse without anything moving. */
@keyframes events-folio-crest-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.5),
      0 0.35rem 1rem rgba(0, 0, 0, 0.45),
      0 0 1.4rem -0.4rem var(--chronicle-gold);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.5),
      0 0.35rem 1rem rgba(0, 0, 0, 0.45),
      0 0 1.9rem -0.15rem var(--chronicle-gold);
  }
}

.events-folio-crest .server-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.05rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--chronicle-ink);
  color: var(--chronicle-gold-bright);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  object-fit: cover;
  transition: transform var(--dur-long) var(--ease-out);
}

.events-folio-masthead:hover .events-folio-crest .server-mark {
  transform: scale(1.06);
}

.events-folio-identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  min-width: 0;
}

.events-folio-eyebrow {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chronicle-gold-deep);
}

.events-folio-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--chronicle-gold-bright);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    text-shadow var(--dur-long) var(--ease-out),
    letter-spacing var(--dur-long) var(--ease-out);
}

.events-folio-masthead:hover .events-folio-name {
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 0 1.1rem rgba(229, 193, 124, 0.35);
}

/* Masthead arrival: crest, name, and rule settle in sequence on first paint. */
.events-folio-crest {
  animation:
    events-folio-crest-glow 5s var(--ease-out) infinite,
    events-folio-rise var(--dur-long) var(--ease-out) both;
}

.events-folio-identity {
  animation: events-folio-rise var(--dur-long) var(--ease-out) 60ms both;
}

@keyframes events-folio-rise {
  from {
    opacity: 0;
    transform: translateY(-0.4rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Trailing rule + diamond so the masthead reads as a banner, not a bare bar. */
.events-folio-flourish {
  flex: 1 1 auto;
  height: 1px;
  min-width: 1.5rem;
  margin-inline-start: 0.25rem;
  background: linear-gradient(90deg, var(--chronicle-gold-line), transparent 70%);
  position: relative;
  /* Visible so the diamond can sit proud of the 1px rule; the glint is clipped
     by its own animation ending at left:100% with zero opacity. */
  overflow: visible;
}

.events-folio-flourish::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.3rem;
  height: 0.3rem;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--chronicle-gold-deep);
  animation: events-folio-diamond 5s var(--ease-out) infinite;
}

@keyframes events-folio-diamond {
  0%,
  100% {
    background: var(--chronicle-gold-deep);
  }
  50% {
    background: var(--chronicle-gold-bright);
  }
}

/* A slow glint travelling the rule — the only motion in the chrome at rest. */
.events-folio-flourish::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 4rem;
  background: linear-gradient(90deg, transparent, var(--chronicle-gold-bright), transparent);
  opacity: 0.65;
  animation: events-folio-glint 7s var(--ease-out) infinite;
}

@keyframes events-folio-glint {
  0% {
    left: 0;
    opacity: 0;
  }
  25% {
    opacity: 0.65;
  }
  60%,
  100% {
    left: 100%;
    opacity: 0;
  }
}

.events-folio-menu {
  display: none;
}

/* Shell ------------------------------------------------------------------ */

.events-folio-shell {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  /* Sticky children only engage when the flex line does not stretch them. */
  align-items: flex-start;
}

.events-folio-sidebar {
  width: var(--events-folio-sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  /* Rides the single page scroll. The offset clears the floating top nav,
     which is itself sticky at `inset-block-start: var(--space-sm)`. */
  position: sticky;
  top: calc(var(--chronicle-nav-height) + (2 * var(--space-sm)));
  /* Only scrolls itself if the nav list outgrows the viewport; short lists
     never show a second scrollbar. */
  max-height: calc(100vh - var(--chronicle-nav-height) - (2 * var(--space-sm)));
  /* Fill that height too: sized to its links alone, the panel ended mid-page
     and left a hard edge over the backdrop art. */
  height: calc(100vh - var(--chronicle-nav-height) - (2 * var(--space-sm)));
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--chronicle-ink) 88%, transparent),
    var(--chronicle-backdrop) 40%
  );
  backdrop-filter: blur(10px);
  transition: width var(--dur-long) var(--ease-out);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Gold edge that fades downward, so the sidebar is bounded by light rather
   than by a flat grey rule running the full height. */
.events-folio-sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--chronicle-gold-line), var(--command-rule-soft) 30%, transparent);
  pointer-events: none;
}

.events-folio-collapse {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.6rem 0.75rem 0.35rem;
  background: transparent;
  border: 0;
  color: var(--chronicle-text-muted);
  cursor: pointer;
}

.events-folio-collapse svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-short) var(--ease-out);
}

.events-folio-collapse:hover {
  color: var(--chronicle-gold-bright);
}

.events-folio-collapse:focus-visible {
  outline: 2px solid var(--chronicle-gold);
}

.events-folio-nav {
  display: flex;
  flex-direction: column;
  padding: 0 0.5rem var(--space-lg);
  gap: 1px;
}

.events-folio-nav-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem 0.6rem;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* gold-deep measured 4.2:1 on the rail — under the 4.5:1 floor. */
  color: var(--chronicle-gold);
}

.events-folio-nav-label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--command-rule-soft), transparent);
}

.events-folio-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  color: var(--chronicle-text-soft);
  text-decoration: none;
  overflow: visible;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
}

.events-folio-item:hover {
  background: var(--command-gold-soft);
  color: var(--chronicle-text);
  transform: translateX(2px);
}

/* Gold wash that wipes in from the left edge on hover. */
.events-folio-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--chronicle-gold-wash), transparent 65%);
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
  pointer-events: none;
}

.events-folio-item:hover::before {
  opacity: 1;
}

.events-folio-item:hover .events-folio-item-icon {
  transform: scale(1.12);
}

.events-folio-item:focus-visible {
  outline: 2px solid var(--chronicle-gold);
  outline-offset: -2px;
}

.events-folio-item.is-active {
  background: linear-gradient(90deg, var(--command-gold-soft), transparent 90%);
  border-left-color: var(--chronicle-gold);
  color: var(--chronicle-text);
}

/* The wash sweeps in from the rail when a row becomes current. The bar itself
   stays a plain border-left: in collapsed mode ::after is the tooltip and
   ::before is the hover wash, so neither is free for a separate element. */
.events-folio-item.is-active {
  animation: events-folio-mark var(--dur-long) var(--ease-out);
}

@keyframes events-folio-mark {
  from {
    background-size: 0% 100%;
    background-repeat: no-repeat;
  }
  to {
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

.events-folio-item.is-active .events-folio-item-icon {
  color: var(--chronicle-gold-bright);
}

.events-folio-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  color: var(--chronicle-gold-deep);
  transition: color var(--dur-short) var(--ease-out);
}

.events-folio-item:hover .events-folio-item-icon {
  color: var(--chronicle-gold-bright);
}

.events-folio-item-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.events-folio-item-text {
  min-width: 0;
  flex: 1;
}

.events-folio-item-text strong {
  display: block;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.events-folio-item-text small {
  display: block;
  color: var(--chronicle-text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Collapsed state --------------------------------------------------------- */

.events-folio.is-collapsed .events-folio-sidebar {
  width: var(--events-folio-sidebar-collapsed);
}

.events-folio.is-collapsed .events-folio-nav-label {
  visibility: hidden;
}

.events-folio.is-collapsed .events-folio-item {
  gap: 0;
  padding: 0.6rem 0;
  justify-content: center;
  border-left-color: transparent;
}

.events-folio.is-collapsed .events-folio-item-text {
  display: none;
}

.events-folio.is-collapsed .events-folio-item.is-active {
  background: var(--command-gold-soft);
}

.events-folio.is-collapsed .events-folio-item-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.events-folio.is-collapsed .events-folio-collapse {
  justify-content: center;
}

.events-folio.is-collapsed .events-folio-collapse svg {
  transform: rotate(180deg);
}

/* Collapsed tooltip -------------------------------------------------------- */

.events-folio.is-collapsed .events-folio-item::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 0.75rem);
  top: 50%;
  white-space: nowrap;
  background: var(--chronicle-ink-soft);
  border: 1px solid var(--command-rule);
  color: var(--chronicle-text);
  font-size: 0.75rem;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-4px);
  transition:
    opacity var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
  z-index: 40;
}

.events-folio.is-collapsed .events-folio-item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Stage / content ---------------------------------------------------------- */

/* A light scrim rather than an opaque panel: the guild background art carries
   the page, and a soft vignette keeps text legible over its brighter regions. */
.events-folio-stage {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, transparent, color-mix(in oklch, var(--chronicle-void) 34%, transparent)),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--chronicle-void) 34%, transparent),
      color-mix(in oklch, var(--chronicle-void) 58%, transparent)
    );
  /* No `overflow-y` here: the document is the only scroller (see the note by
     `.events-folio`). `min-height` keeps the scrim covering short pages. */
  min-height: calc(100vh - var(--chronicle-nav-height) - var(--events-folio-masthead-h));
  overflow-x: clip;
}

.events-folio-content {
  padding: var(--events-folio-stage-pad);
  /* 76rem left ~350px of dead gutter each side at 1600px. Wide viewports now
     get the space; the cap still stops text lines running unreadably long. */
  max-width: min(104rem, 100%);
  margin-inline: auto;
  transition:
    opacity var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
}

.events-folio-content.is-swapping {
  opacity: 0;
  transform: translateY(0.35rem);
}

.events-folio-content.is-swapped {
  animation: events-folio-fade-in var(--dur-short) var(--ease-out);
}

@keyframes events-folio-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Spinner ------------------------------------------------------------------ */

.events-folio-spinner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  min-height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  pointer-events: none;
}

.events-folio-spinner::before {
  content: "";
  width: 2.2rem;
  height: 2.2rem;
  border: 2px solid var(--command-rule);
  border-top-color: var(--chronicle-gold);
  border-radius: 50%;
  animation: events-folio-spin 700ms linear infinite;
}

.events-folio-spinner[hidden] {
  display: none;
}

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

/* Tablet — sidebar forced to collapsed look -------------------------------- */

@media (max-width: 64rem) {
  .events-folio .events-folio-sidebar {
    width: var(--events-folio-sidebar-collapsed);
  }

  .events-folio .events-folio-nav-label {
    visibility: hidden;
  }

  .events-folio .events-folio-item {
    gap: 0;
    padding: 0.6rem 0;
    justify-content: center;
    border-left-color: transparent;
  }

  .events-folio .events-folio-item-text {
    display: none;
  }

  .events-folio .events-folio-item-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .events-folio .events-folio-collapse {
    display: none;
  }

  .events-folio .events-folio-content {
    padding: 1rem;
  }
}

/* Mobile — off-canvas drawer ----------------------------------------------- */

@media (max-width: 40rem) {
  .events-folio-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: transparent;
    border: 1px solid var(--command-rule-soft);
    border-radius: var(--radius-md);
    color: var(--chronicle-text-soft);
    cursor: pointer;
  }

  .events-folio-masthead {
    gap: var(--space-xs);
    padding-inline: var(--space-md);
  }

  .events-folio-crest {
    display: none;
  }

  .events-folio-name {
    font-size: 1.1rem;
  }

  .events-folio-flourish {
    display: none;
  }

  .events-folio .events-folio-sidebar,
  .events-folio.is-collapsed .events-folio-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--events-folio-sidebar-w);
    transform: translateX(-100%);
    transition: transform var(--dur-long) var(--ease-out);
    z-index: 60;
    background: var(--chronicle-ink);
  }

  .events-folio.is-menu-open .events-folio-sidebar {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  .events-folio.is-menu-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(6, 6, 5, 0.6);
    z-index: 50;
  }

  .events-folio .events-folio-collapse,
  .events-folio.is-collapsed .events-folio-collapse {
    display: none;
  }

  .events-folio .events-folio-nav-label,
  .events-folio.is-collapsed .events-folio-nav-label {
    visibility: visible;
  }

  .events-folio .events-folio-item,
  .events-folio.is-collapsed .events-folio-item {
    gap: 0.7rem;
    padding: 0.55rem 0.6rem;
    justify-content: flex-start;
  }

  .events-folio .events-folio-item-text,
  .events-folio.is-collapsed .events-folio-item-text {
    display: block;
  }

  .events-folio .events-folio-item-icon,
  .events-folio.is-collapsed .events-folio-item-icon {
    width: 1.4rem;
    height: 1.4rem;
  }

  .events-folio.is-collapsed .events-folio-item::after {
    display: none;
  }
}

/* Reduced motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .events-folio-sidebar,
  .events-folio-item,
  .events-folio-item::before,
  .events-folio-item-icon,
  .events-folio-crest,
  .events-folio-crest .server-mark,
  .events-folio-identity,
  .events-folio-name,
  .events-folio-flourish::before,
  .events-folio-flourish::after,
  .events-folio-collapse svg,
  .events-folio-content,
  .events-folio.is-collapsed .events-folio-item::after,
  .events-folio-spinner,
  .events-folio-spinner::before {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }

  /* The travelling glint has no still frame worth keeping — remove it outright. */
  .events-folio-flourish::after {
    display: none;
  }

  .events-folio-item:hover {
    transform: none;
  }
}
/* Sub-menu groups (dropdowns) -------------------------------------------------
   Parent rows with data-folio-parent carry a chevron and expand a submenu of
   data-folio-sub links. Reveal uses max-height: direct children make the
   grid-template-rows:0fr trick unusable (implicit rows never collapse), so a
   capped max-height gives the same smooth expand/collapse for any count. */

.events-folio-item[data-folio-parent] {
  cursor: pointer;
  /* Slightly reduced right padding so the chevron sits close to the rail
     without the row feeling padded twice. */
  padding-inline-end: 0.4rem;
}

.events-folio-chevron {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--chronicle-text-muted);
  transition:
    transform var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}

.events-folio-chevron svg {
  width: 100%;
  height: 100%;
  display: block;
}

.events-folio-item[data-folio-parent]:hover .events-folio-chevron,
.events-folio-chevron:hover {
  color: var(--chronicle-gold-bright);
}

.events-folio-group.is-open .events-folio-chevron {
  transform: rotate(180deg);
  color: var(--chronicle-gold-bright);
}

.events-folio-submenu {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.28s var(--ease-out),
    opacity 0.28s var(--ease-out);
}

.events-folio-group.is-open .events-folio-submenu {
  max-height: 14rem;
  opacity: 1;
}

.events-folio-subitem {
  display: flex;
  align-items: center;
  margin: 0 0.5rem 0.25rem;
  padding: 0.5rem 0.6rem 0.5rem 3rem;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  color: var(--chronicle-text-muted);
  font-size: 0.78rem;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}

.events-folio-subitem:hover {
  background: var(--command-gold-soft);
  color: var(--chronicle-text);
  border-left-color: var(--chronicle-gold);
}

.events-folio-subitem.is-active {
  color: var(--chronicle-gold-bright);
  border-left-color: var(--chronicle-gold);
  background: linear-gradient(90deg, var(--command-gold-soft), transparent 90%);
}

/* Collapsed rail — icon-only, so dropdowns and their chevrons are removed. */
.events-folio.is-collapsed .events-folio-submenu {
  display: none;
}

.events-folio.is-collapsed .events-folio-chevron {
  display: none;
}

/* Tablet — sidebar forced to collapsed look: no dropdowns, no chevrons. */
@media (max-width: 64rem) {
  .events-folio .events-folio-submenu {
    display: none;
  }

  .events-folio .events-folio-chevron {
    display: none;
  }

  /* Restore the rail rule's zero inline padding so the centered icon stays put. */
  .events-folio .events-folio-item[data-folio-parent] {
    padding-inline-end: 0;
  }
}

/* Mobile — off-canvas drawer shows the full nav, dropdowns included. */
@media (max-width: 40rem) {
  .events-folio .events-folio-submenu,
  .events-folio.is-collapsed .events-folio-submenu {
    display: grid;
  }

  .events-folio .events-folio-chevron,
  .events-folio.is-collapsed .events-folio-chevron {
    display: inline-flex;
  }

  .events-folio-subitem {
    padding-left: 2.6rem;
  }

  /* Restore the drawer rule's inline padding for parent rows. */
  .events-folio .events-folio-item[data-folio-parent] {
    padding-inline-end: 0.6rem;
  }
}

/* Reduced motion — snap the dropdown open/closed like the rest of the folio. */
@media (prefers-reduced-motion: reduce) {
  .events-folio-submenu,
  .events-folio-chevron {
    transition-duration: 1ms !important;
  }
}

/* Respect the initial hidden attribute: until the script opens a group the
   submenu stays out of layout and out of the tab order. Must win the tie
   against the mobile display:grid rule above, so it sits last. */
.events-folio .events-folio-submenu[hidden] {
  display: none;
}
/* ── Audit log page ──────────────────────────────────────────────── */

.audit-action-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--chronicle-gold-line);
  white-space: nowrap;
}

.audit-action-gold {
  background: var(--chronicle-gold-wash);
  color: var(--chronicle-gold-bright);
}

.audit-action-green {
  background: rgba(120, 180, 120, 0.12);
  border-color: rgba(120, 180, 120, 0.4);
  color: #9ccb9c;
}

.audit-action-blue {
  background: rgba(120, 160, 220, 0.12);
  border-color: rgba(120, 160, 220, 0.4);
  color: #9dbcda;
}

.audit-action-red {
  background: rgba(200, 100, 90, 0.12);
  border-color: rgba(200, 100, 90, 0.4);
  color: #d99a8f;
}

.audit-log-table td {
  vertical-align: middle;
}

/* Wider table for the extra columns */
/* The folio stage caps content at 76rem; the audit page gets the full stage
   so the table can use all available width. */
.events-folio-content:has(.folio-body-scope.audit-log-page-body) {
  max-width: none;
}

.audit-log-page-body .page-content {
  max-width: none;
}

.audit-log-page-body .guild-performance-page {
  width: 100%;
}

.guild-performance-panel .audit-log-table-wrap {
  overflow-x: auto;
  max-height: none;
}

.guild-performance-panel .audit-log-table {
  width: 100%;
  table-layout: fixed;
  min-width: 0;
}

.guild-performance-panel .audit-log-table th,
.guild-performance-panel .audit-log-table td {
  white-space: normal;
  word-break: break-word;
  padding: 10px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guild-performance-panel .audit-log-table th {
  text-align: left;
}

.guild-performance-panel .audit-log-table .audit-time {
  white-space: nowrap;
  color: var(--chronicle-text-soft);
  font-size: var(--text-sm);
  width: 15%;
  padding-inline-start: 0.75rem;
}

.guild-performance-panel .audit-log-table .audit-user {
  width: 9%;
  padding-inline-start: 1.5rem;
}

.guild-performance-panel .audit-log-table .audit-user strong {
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.guild-performance-panel .audit-log-table .audit-target-id {
  width: 12%;
  padding-inline-start: 1.5rem;
}

.guild-performance-panel .audit-log-table .audit-target-id code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--chronicle-text-muted);
  background: var(--chronicle-ink-raised);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  border: 1px solid var(--chronicle-gold-line);
  letter-spacing: 0.02em;
  word-break: break-all;
}

.guild-performance-panel .audit-log-table .audit-details {
  color: var(--chronicle-text-soft);
  font-size: var(--text-sm);
}

.guild-performance-panel .audit-log-table .audit-actions {
  width: 8%;
  text-align: center;
  color: var(--chronicle-text-muted);
  font-size: var(--text-sm);
}

.audit-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.audit-pagination-page {
  color: var(--text-muted);
  font-size: var(--text-sm);
}
/* ── Audit log: deleted-event preview ────────────────────────── */

.audit-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  min-height: 0;
  font-size: 0.75rem;
  color: var(--chronicle-gold);
  border: 1px solid var(--chronicle-gold-line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.audit-preview-btn:hover {
  background: var(--chronicle-gold-wash);
  color: var(--chronicle-gold-bright);
}

.deleted-event-page .deleted-event-card {
  background: var(--chronicle-ink-raised);
  border: 1px solid var(--chronicle-gold-line);
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--chronicle-gold) 14%, transparent), 0 1.25rem 3rem var(--chronicle-shadow);
  padding: var(--space-6) var(--space-8);
  max-width: 46rem;
}

.deleted-event-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3) var(--space-8);
  margin: 0;
}

.deleted-event-meta div {
  border-block-end: 1px solid color-mix(in oklch, var(--chronicle-gold) 18%, transparent);
  padding-block-end: var(--space-2);
}

.deleted-event-meta dt {
  color: var(--chronicle-gold);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-block-end: var(--space-1);
}

.deleted-event-meta dd {
  margin: 0;
  color: var(--chronicle-text);
  font-size: var(--text-sm);
}

.deleted-event-description {
  margin: var(--space-6) 0 0;
  padding: var(--space-4);
  border-inline-start: 0.2rem solid var(--chronicle-gold);
  border-block: 1px solid var(--chronicle-gold-line);
  background: color-mix(in oklch, var(--chronicle-gold-wash) 30%, transparent);
  color: var(--chronicle-text-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.deleted-event-note {
  margin: var(--space-6) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--chronicle-gold-line);
  border-radius: var(--radius-sm);
  background: var(--chronicle-gold-wash);
  color: var(--chronicle-text);
  font-size: var(--text-sm);
}

/* ── Custom 12-hour time picker ───────────────────────────────────────
   The control ships on two very different surfaces (dark chronicle pages and
   the parchment builder/GBR/Custom panels), so every colour goes through a
   --nwtp-* custom property. Structure is declared once here with the dark
   values as the default; a parchment surface only re-declares the palette.
   That beats duplicating the whole component under a parchment selector —
   there is one place to change if the markup contract ever grows. */

.nw-time-picker {
  --nwtp-surface: var(--chronicle-ink-raised);
  --nwtp-field: transparent;
  --nwtp-line: var(--chronicle-gold-line);
  --nwtp-ink: var(--chronicle-text);
  --nwtp-ink-muted: var(--chronicle-text-muted);
  --nwtp-hover: var(--chronicle-gold-wash);
  --nwtp-selected: var(--chronicle-gold);
  --nwtp-selected-ink: var(--chronicle-void);
  --nwtp-focus: var(--chronicle-gold);
  --nwtp-radius: var(--radius-sm);
  --nwtp-inner-radius: 3px;

  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  padding: 0.35rem 0.5rem;
  background: var(--nwtp-surface);
  border: 1px solid var(--nwtp-line);
  border-radius: var(--nwtp-radius);
  font-size: var(--text-sm);
}

/* Two classes deep on purpose: the surrounding surface rules (`.nwnew-plan
   select`, `.gbr-create-body .gbr-input`) would otherwise repaint these
   selects independently of the frame they sit in. */
.nw-time-picker select.nw-time-hours,
.nw-time-picker select.nw-time-minutes {
  appearance: none;
  -webkit-appearance: none;
  width: 2.8rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.3rem;
  background: var(--nwtp-field);
  border: 1px solid var(--nwtp-line);
  border-radius: var(--nwtp-inner-radius);
  color: var(--nwtp-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
}

.nw-time-picker select.nw-time-hours:focus,
.nw-time-picker select.nw-time-minutes:focus {
  outline: 2px solid var(--nwtp-focus);
  outline-offset: 1px;
}

.nw-time-colon {
  color: var(--nwtp-ink-muted);
  font-weight: 600;
  pointer-events: none;
}

.nw-time-ampm {
  display: inline-flex;
  margin-inline-start: 0.4rem;
  border-radius: var(--nwtp-inner-radius);
  overflow: hidden;
  border: 1px solid var(--nwtp-line);
}

.nw-time-picker .nw-time-ampm-btn {
  padding: 0.25rem 0.55rem;
  background: var(--nwtp-field);
  border: none;
  color: var(--nwtp-ink-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.nw-time-picker .nw-time-ampm-btn:hover {
  background: var(--nwtp-hover);
  color: var(--nwtp-ink);
}

/* An ambiguous AM/PM state is what produced the silent 12-hour bug, so the
   chosen half is a filled slab with inverted text — never a faint tint that
   could be mistaken for hover. */
.nw-time-picker .nw-time-ampm-btn.is-active {
  background: var(--nwtp-selected);
  color: var(--nwtp-selected-ink);
  font-weight: 800;
}

/* Parchment surfaces: builder plan/compose columns and the GBR / Custom
   create panels (their preview panel stays dark, hence the :not()). */
.nwnew-plan .nw-time-picker,
.nwnew-compose .nw-time-picker,
.gbr-create-body .gbr-panel:not(.gbr-panel-preview) .nw-time-picker,
.custom-create-body .gbr-panel:not(.gbr-panel-preview) .nw-time-picker {
  --nwtp-surface: color-mix(in oklch, var(--chronicle-paper-raised) 92%, transparent);
  --nwtp-field: color-mix(in oklch, var(--chronicle-paper-raised) 96%, transparent);
  --nwtp-line: var(--chronicle-paper-rule);
  --nwtp-ink: var(--chronicle-paper-ink);
  --nwtp-ink-muted: var(--chronicle-paper-muted);
  --nwtp-hover: var(--chronicle-gold-wash);
  --nwtp-selected: var(--chronicle-paper-ink);
  --nwtp-selected-ink: var(--chronicle-paper-raised);
  --nwtp-radius: 0;
  --nwtp-inner-radius: 0;
}

/* Native dropdown lists render on the OS surface, not ours — keep them paper
   so the open list matches the closed control. */
.nwnew-plan .nw-time-picker select option,
.nwnew-compose .nw-time-picker select option,
.gbr-create-body .gbr-panel:not(.gbr-panel-preview) .nw-time-picker select option,
.custom-create-body .gbr-panel:not(.gbr-panel-preview) .nw-time-picker select option {
  background: var(--chronicle-paper);
  color: var(--chronicle-paper-ink);
}

/* Hide native time inputs that we've replaced (safety fallback) */
.nw-time-picker input[type="hidden"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Node War builder · Schedule row ───────────────────────────────────
   The base two-equal-column grid let the wide time picker starve the repeat
   select until "One-time event" clipped to "One-". Fields are sized by their
   own content and may not be shrunk below it, so a field that no longer fits
   beside its sibling wraps onto a line of its own instead of squeezing. */
.nwnew-plan .nwnew-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.nwnew-plan .nwnew-fields .nwnew-field {
  flex: 0 1 auto;
  max-width: 100%;
}

/* `min-width: max-content` is the no-clip guarantee: the widest option label
   sets the floor, so the row wraps before the text is ever cut. */
.nwnew-plan .nwnew-fields .nwnew-field > select.input {
  width: auto;
  min-width: max-content;
  padding-right: 2rem;
}

/* IANA labels run long, so the zone stretches into whatever a wide row has
   left over — but it may not be squeezed below a readable floor; past that
   it claims a full-width line of its own. Its select tracks the field width
   (max-content here would mean the longest zone in the list, not the
   selected one) so the chosen label always has the whole line. */
.nwnew-plan .nwnew-fields .nwnew-field-zone {
  flex: 1 1 16rem;
  min-width: 16rem;
}

.nwnew-plan .nwnew-fields .nwnew-field-zone > select.input {
  width: 100%;
  min-width: 0;
}

/* Below ~30rem of viewport there is no sharing left to do: stack outright so
   neither the content floor nor the zone floor can push past the panel edge. */
@media (max-width: 30rem) {
  .nwnew-plan .nwnew-fields .nwnew-field,
  .nwnew-plan .nwnew-fields .nwnew-field-zone {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* A secondary annotation on the ANNOUNCEMENT TIME label, not a second label:
   smaller and quieter than the 11px/800 field caption beside it. */
.nwnew-plan .nwnew-zone-hint {
  margin-left: 0.4rem;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
  /* 88% keeps it visibly recessive against the caption while still clearing
     4.5:1 on parchment — a hint nobody can read is not an improvement. */
  color: color-mix(in oklch, var(--chronicle-paper-muted) 88%, transparent);
}
/* ────────────────────────────────────────────────────────────────
   ALLIANCE + BOARDS (Help Wanted / War Heroes) — appended 2026-08-15
   Class prefixes: alliance-*, hw-*, wh-*
   ──────────────────────────────────────────────────────────────── */

/* ── Shared section scaffolding ─────────────────────────────── */
.alliance-panel,
.hw-board,
.wh-board {
  margin-block: var(--space-lg);
  padding: var(--space-lg);
  background: var(--chronicle-ink-raised);
  border: 1px solid var(--chronicle-gold-line);
  box-shadow: 0 var(--space-sm) var(--space-xl) var(--chronicle-shadow);
}

.alliance-panel > h2,
.hw-section-head,
.wh-section-head {
  margin-block-start: 0;
  font-family: var(--font-display);
  color: var(--chronicle-gold-bright);
  letter-spacing: 0.02em;
}

.alliance-panel > p,
.hw-section-head + p,
.wh-section-head + p {
  color: var(--chronicle-text-soft);
}

.alliance-empty,
.hw-empty,
.wh-empty {
  padding: var(--space-lg);
  color: var(--chronicle-text-muted);
  border: 1px dashed var(--chronicle-rule);
  text-align: center;
}

/* ── Alliance: request cards + terms ────────────────────────── */
.alliance-request-card {
  padding: var(--space-md) var(--space-lg);
  margin-block-end: var(--space-md);
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-paper);
  border: 1px solid var(--chronicle-paper-rule);
}

.alliance-request-card h3 {
  margin-block: 0 var(--space-2xs);
  font-family: var(--font-display);
}

.alliance-request-card p {
  margin-block: var(--space-2xs) var(--space-sm);
}

.alliance-terms {
  margin-block: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--chronicle-gold-wash);
  border: 1px dashed var(--chronicle-gold-line);
}

.alliance-terms strong {
  display: block;
  margin-block-end: var(--space-2xs);
  color: var(--chronicle-gold-deep);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.alliance-terms ul {
  margin: 0;
  padding-inline-start: var(--space-lg);
  color: var(--chronicle-paper-muted);
}

.alliance-terms li {
  margin-block: var(--space-2xs);
}

.alliance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}

.alliance-status-chip,
.hw-badge,
.wh-kind-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 0;
}

.alliance-status-chip--pending {
  color: var(--chronicle-gold-deep);
  background: var(--chronicle-gold-wash);
  border-color: var(--chronicle-gold-line);
}

.alliance-status-chip--accepted {
  color: var(--chronicle-success);
  border-color: var(--chronicle-success);
}

.alliance-status-chip--declined,
.alliance-status-chip--cancelled {
  color: var(--chronicle-text-muted);
  border-color: var(--chronicle-rule);
}

.alliance-members {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block: var(--space-sm);
}

.alliance-member-chip {
  padding: var(--space-2xs) var(--space-sm);
  color: var(--chronicle-text);
  background: var(--chronicle-ink-soft);
  border: 1px solid var(--chronicle-gold-line);
}

.alliance-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-md);
  margin-block: var(--space-md);
}

.alliance-stat {
  padding: var(--space-md);
  background: var(--chronicle-ink-soft);
  border-block-start: 2px solid var(--chronicle-gold);
}

.alliance-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--chronicle-gold-bright);
}

.alliance-stat span {
  color: var(--chronicle-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.alliance-killshare-row {
  display: grid;
  grid-template-columns: 9rem 1fr 4rem;
  gap: var(--space-sm);
  align-items: center;
  margin-block: var(--space-2xs);
  font-size: 0.9rem;
}

.alliance-killshare-bar {
  height: 0.6rem;
  background: var(--chronicle-ink-soft);
  border: 1px solid var(--chronicle-rule);
}

.alliance-killshare-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--chronicle-gold-deep), var(--chronicle-gold-bright));
}

.alliance-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.alliance-top-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-2xs) 0;
  border-block-end: 1px solid var(--chronicle-rule-soft);
  color: var(--chronicle-text-soft);
}

.alliance-top-list li:last-child {
  border-block-end: 0;
}

.alliance-top-list .rank {
  color: var(--chronicle-gold);
  font-weight: 700;
  min-width: 1.6rem;
}

.alliance-form label {
  display: block;
  margin-block: var(--space-sm) var(--space-2xs);
  color: var(--chronicle-text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.alliance-form input[type="text"],
.alliance-form textarea,
.alliance-form select,
.hw-form input[type="text"],
.hw-form textarea,
.hw-form select,
.wh-form input[type="text"],
.wh-form textarea,
.wh-form select {
  width: 100%;
  max-width: 34rem;
}

.alliance-form .form-row,
.hw-form .form-row,
.wh-form .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.alliance-form .form-row > div,
.hw-form .form-row > div,
.wh-form .form-row > div {
  flex: 1 1 16rem;
}

/* ── Help Wanted board ──────────────────────────────────────── */
.hw-filter,
.wh-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block: var(--space-sm) var(--space-md);
}

.hw-filter-chip,
.wh-filter-chip {
  padding: 0.3rem 0.9rem;
  color: var(--chronicle-text-soft);
  background: var(--chronicle-ink-soft);
  border: 1px solid var(--chronicle-rule);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hw-filter-chip:hover,
.hw-filter-chip.is-active,
.wh-filter-chip:hover,
.wh-filter-chip.is-active {
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-gold);
  border-color: var(--chronicle-gold-bright);
}

.hw-card,
.wh-card {
  padding: var(--space-md) var(--space-lg);
  margin-block-end: var(--space-md);
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-paper);
  border: 1px solid var(--chronicle-paper-rule);
}

.hw-card-title,
.wh-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
  margin-block: 0 var(--space-2xs);
  font-family: var(--font-display);
}

.hw-card-title strong,
.wh-card-title strong {
  font-size: 1.15rem;
}

.hw-meta,
.wh-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-end: var(--space-2xs);
  color: var(--chronicle-paper-muted);
  font-size: 0.85rem;
}

.hw-badge {
  color: var(--chronicle-gold-deep);
  background: var(--chronicle-gold-wash);
  border-color: var(--chronicle-gold-line);
}

.hw-card p,
.wh-card p {
  margin-block: var(--space-2xs);
}

.hw-card .hw-contact,
.wh-card .wh-contact {
  margin-block-start: var(--space-sm);
  color: var(--chronicle-paper-muted);
  font-size: 0.85rem;
}

.hw-card .hw-contact strong,
.wh-card .wh-contact strong {
  color: var(--chronicle-paper-ink);
}

/* ── War Hero board ─────────────────────────────────────────── */
.wh-kind-badge--available {
  color: var(--chronicle-success);
  border-color: var(--chronicle-success);
}

.wh-kind-badge--recruiting {
  color: var(--chronicle-gold-deep);
  background: var(--chronicle-gold-wash);
  border-color: var(--chronicle-gold-line);
}

.wh-role-tag,
.wh-gs-tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  margin-inline-end: var(--space-2xs);
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-paper-raised);
  border: 1px solid var(--chronicle-paper-rule);
  font-size: 0.8rem;
}

/* ── Alliance war tables ────────────────────────────────────── */
.alliance-war-table {
  width: 100%;
  margin-block: var(--space-sm);
}

.alliance-war-table th {
  color: var(--chronicle-gold-bright);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.alliance-war-table td {
  padding-block: 0.5rem;
  color: var(--chronicle-text-soft);
}

.alliance-war-table .alliance-total-row td {
  color: var(--chronicle-gold-bright);
  font-weight: 700;
  border-block-start: 1px solid var(--chronicle-gold-line);
}

.alliance-result-win { color: var(--chronicle-success); font-weight: 700; }
.alliance-result-loss { color: var(--chronicle-danger); font-weight: 700; }
.alliance-result-unknown { color: var(--chronicle-text-muted); }

.alliance-war-table-wrap {
  overflow-x: auto;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 48rem) {
  .alliance-panel,
  .hw-board,
  .wh-board {
    padding: var(--space-md);
  }

  .alliance-killshare-row {
    grid-template-columns: 6.5rem 1fr 3rem;
  }

  .alliance-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .alliance-actions .button {
    width: 100%;
  }
}
/* ────────────────────────────────────────────────────────────────
   ALLIANCE + BOARDS — v2 (matches agents' actual markup) 2026-08-15
   ──────────────────────────────────────────────────────────────── */

/* Generic empty state (used across alliance/hw pages) */
.empty-state {
  padding: var(--space-lg);
  color: var(--chronicle-text-muted);
  border: 1px dashed var(--chronicle-rule);
  text-align: center;
}

/* ── Alliance page ──────────────────────────────────────────── */
.alliance-subtitle {
  color: var(--chronicle-text-soft);
  margin-block-start: var(--space-2xs);
}

.alliance-section {
  margin-block-start: var(--space-xl);
}

.alliance-group-head {
  margin-block: var(--space-lg) var(--space-sm);
  font-family: var(--font-display);
  color: var(--chronicle-gold-bright);
  letter-spacing: 0.02em;
}

.alliance-panel-lede {
  color: var(--chronicle-text-soft);
}

.alliance-panel-points {
  margin-block: var(--space-sm) 0;
  padding-inline-start: var(--space-lg);
  color: var(--chronicle-text-muted);
}

.alliance-panel-points li {
  margin-block: var(--space-2xs);
}

/* Request cards */
.alliance-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}

.alliance-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.alliance-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.alliance-card-meta {
  color: var(--chronicle-text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.alliance-card-id {
  font-family: var(--font-body);
  font-size: 0.8rem;
}

.alliance-card-message {
  margin-block: var(--space-sm);
  color: var(--chronicle-text-soft);
  white-space: pre-wrap;
}

.alliance-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}

.alliance-terms-title {
  display: block;
  margin-block-end: var(--space-2xs);
  color: var(--chronicle-gold-deep);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.alliance-terms-list {
  margin: 0;
  padding-inline-start: var(--space-lg);
  color: var(--chronicle-paper-muted);
}

.alliance-terms-list li {
  margin-block: var(--space-2xs);
}

/* Chips */
.alliance-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 0;
}

.alliance-chip-pending {
  color: var(--chronicle-gold-deep);
  background: var(--chronicle-gold-wash);
  border-color: var(--chronicle-gold-line);
}

.alliance-chip-accepted,
.alliance-chip-win {
  color: var(--chronicle-success);
  border-color: var(--chronicle-success);
}

.alliance-chip-declined,
.alliance-chip-cancelled,
.alliance-chip-loss {
  color: var(--chronicle-danger);
  border-color: var(--chronicle-danger);
}

.alliance-chip-unknown {
  color: var(--chronicle-text-muted);
  border-color: var(--chronicle-rule);
}

.alliance-recent-chip {
  font-size: 0.75rem;
}

/* Alliance header */
.alliance-summary-formed {
  color: var(--chronicle-text-muted);
  font-size: 0.9rem;
}

.alliance-member-list {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.alliance-member {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  color: var(--chronicle-text);
  background: var(--chronicle-ink-soft);
  border: 1px solid var(--chronicle-gold-line);
}

.alliance-member-name {
  font-weight: 700;
  color: var(--chronicle-gold-bright);
}

.alliance-member-id {
  color: var(--chronicle-text-muted);
  font-size: 0.75rem;
}

.alliance-disband-form {
  margin-block-start: var(--space-md);
}

/* Forms */
.alliance-form-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-end: var(--space-sm);
}

.alliance-form-field {
  margin-block-end: var(--space-sm);
}

.alliance-form-label {
  display: block;
  margin-block-end: var(--space-2xs);
  color: var(--chronicle-text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.alliance-form-optional {
  color: var(--chronicle-text-muted);
  font-weight: 400;
}

.alliance-form-hint {
  display: block;
  color: var(--chronicle-text-muted);
  font-size: 0.8rem;
  margin-block-start: var(--space-2xs);
}

.alliance-form-actions {
  margin-block-start: var(--space-sm);
}

.alliance-action-form {
  display: inline;
}

/* War table */
.alliance-cell-result {
  white-space: nowrap;
}

.alliance-cell-kda {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.alliance-cell-record {
  white-space: nowrap;
}

.alliance-cell-siege {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.alliance-war-date {
  white-space: nowrap;
  color: var(--chronicle-text);
}

/* Analytics */
.alliance-analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-md);
  margin-block-start: var(--space-sm);
}

.alliance-analytics-title {
  margin-block: var(--space-md) var(--space-2xs);
  font-family: var(--font-display);
  color: var(--chronicle-gold-bright);
  font-size: 1.05rem;
}

.alliance-record-list,
.alliance-share-list,
.alliance-top-list,
.alliance-recent-strip {
  list-style: none;
  margin: 0;
  padding: 0;
}

.alliance-record-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-2xs) 0;
  border-block-end: 1px solid var(--chronicle-rule-soft);
}

.alliance-record-row:last-child {
  border-block-end: 0;
}

.alliance-record-guild {
  color: var(--chronicle-text-soft);
}

.alliance-record-value {
  font-variant-numeric: tabular-nums;
  color: var(--chronicle-gold-bright);
  font-weight: 700;
}

.alliance-share-row {
  display: grid;
  grid-template-columns: 8rem 1fr 3.5rem;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-2xs) 0;
  font-size: 0.9rem;
}

.alliance-share-guild {
  color: var(--chronicle-text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alliance-share-track {
  height: 0.6rem;
  background: var(--chronicle-ink-soft);
  border: 1px solid var(--chronicle-rule);
}

.alliance-share-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--chronicle-gold-deep), var(--chronicle-gold-bright));
}

.alliance-share-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--chronicle-text-soft);
}

.alliance-top-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-2xs) 0;
  border-block-end: 1px solid var(--chronicle-rule-soft);
}

.alliance-top-row:last-child {
  border-block-end: 0;
}

.alliance-top-rank {
  color: var(--chronicle-gold);
  font-weight: 700;
  min-width: 1.6rem;
}

.alliance-top-name {
  color: var(--chronicle-text-soft);
  font-weight: 600;
}

.alliance-top-guild {
  color: var(--chronicle-text-muted);
  font-size: 0.85rem;
}

.alliance-top-kda {
  margin-inline-start: auto;
  color: var(--chronicle-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.alliance-recent-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.alliance-recent-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.alliance-recent-date {
  color: var(--chronicle-text-muted);
  font-size: 0.85rem;
}

/* ── Help Wanted page ───────────────────────────────────────── */
.hw-board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}

.hw-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.hw-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.hw-card-guild {
  color: var(--chronicle-paper-muted);
  font-size: 0.9rem;
}

.hw-card-looking-for {
  margin-block: var(--space-2xs);
}

.hw-card-description {
  color: var(--chronicle-paper-muted);
  white-space: pre-wrap;
}

.hw-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}

.hw-card-contact {
  font-size: 0.85rem;
  color: var(--chronicle-paper-muted);
}

.hw-card-contact strong {
  color: var(--chronicle-paper-ink);
}

.hw-card-date {
  font-size: 0.8rem;
  color: var(--chronicle-paper-muted);
}

.hw-card-delete-form {
  display: inline;
}

.hw-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block: var(--space-sm) var(--space-md);
}

.hw-form-field {
  margin-block-end: var(--space-sm);
}

.hw-form-label {
  display: block;
  margin-block-end: var(--space-2xs);
  color: var(--chronicle-text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.hw-form-actions {
  margin-block-start: var(--space-sm);
}

/* ── War Hero page ──────────────────────────────────────────── */
.wh-board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}

.wh-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.wh-card-guild {
  color: var(--chronicle-paper-muted);
  font-size: 0.9rem;
}

.wh-card-message {
  white-space: pre-wrap;
}

.wh-card-date {
  font-size: 0.8rem;
  color: var(--chronicle-paper-muted);
}

.wh-card-delete-form {
  display: inline;
}

.wh-count {
  color: var(--chronicle-text-muted);
  font-size: 0.85rem;
}

.wh-field {
  margin-block-end: var(--space-sm);
}

.wh-field-label {
  display: block;
  margin-block-end: var(--space-2xs);
  color: var(--chronicle-text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.wh-field-hint {
  color: var(--chronicle-text-muted);
  font-size: 0.8rem;
  margin-block-start: var(--space-2xs);
}

.wh-form-actions {
  margin-block-start: var(--space-sm);
}

.wh-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.wh-form-row .wh-field {
  flex: 1 1 16rem;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 48rem) {
  .alliance-card-head,
  .hw-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .alliance-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .alliance-card-actions .button {
    width: 100%;
  }

  .alliance-share-row {
    grid-template-columns: 5.5rem 1fr 2.5rem;
  }
}
/* Page notice banner (alliance/board flash messages) */
.page-notice {
  padding: var(--space-sm) var(--space-md);
  margin-block-end: var(--space-md);
  border: 1px solid;
  font-weight: 600;
}

.page-notice-ok {
  color: var(--chronicle-success);
  background: var(--chronicle-ink-soft);
  border-color: var(--chronicle-success);
}

.page-notice-error {
  color: var(--chronicle-danger);
  background: var(--chronicle-ink-soft);
  border-color: var(--chronicle-danger);
}
/* ────────────────────────────────────────────────────────────────
   ALLIANCE + BOARDS — v3 class-coverage supplement (2026-08-15)
   Covers classes the agents used that v1/v2 missed.
   ──────────────────────────────────────────────────────────────── */

/* Kill-share rows: head line (guild + %) above the track bar */
.alliance-share-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}

.alliance-share-track {
  margin-block-start: var(--space-2xs);
}

/* Table sub-headers (Result / K-D-A under a guild group) */
.alliance-sub-head {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--chronicle-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Help Wanted extras ─────────────────────────────────────── */
.hw-subtitle {
  color: var(--chronicle-text-muted);
  margin-block-start: var(--space-2xs);
}

.hw-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.hw-form-row > * {
  flex: 1 1 16rem;
}

.hw-own {
  margin-block-start: var(--space-xl);
}

/* ── War Hero extras ────────────────────────────────────────── */
.panel {
  padding: var(--space-lg);
  margin-block: var(--space-lg);
  background: var(--chronicle-ink-raised);
  border: 1px solid var(--chronicle-gold-line);
  box-shadow: 0 var(--space-sm) var(--space-xl) var(--chronicle-shadow);
}

.wh-page-head {
  margin-block-end: var(--space-md);
}

.wh-page-title {
  margin-block: var(--space-2xs) 0;
  font-family: var(--font-display);
}

.wh-page-subtitle {
  color: var(--chronicle-text-muted);
  margin-block-start: var(--space-2xs);
}

.wh-kicker {
  color: var(--chronicle-gold);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-block: 0;
}

/* Notice-type radio picker */
.wh-kind-picker {
  display: grid;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
  padding: 0;
  border: 0;
}

.wh-kind-picker > legend {
  margin-block-end: var(--space-2xs);
  color: var(--chronicle-text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.wh-kind-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--chronicle-ink-soft);
  border: 1px solid var(--chronicle-rule);
  cursor: pointer;
}

.wh-kind-option:has(input:checked) {
  border-color: var(--chronicle-gold);
  background: var(--chronicle-gold-wash);
}

.wh-kind-option input[type="radio"] {
  margin-block-start: 0.3rem;
  accent-color: var(--chronicle-gold-deep);
}

.wh-kind-option-label {
  display: block;
  color: var(--chronicle-text);
  font-weight: 600;
}

.wh-kind-option-hint {
  display: block;
  color: var(--chronicle-text-muted);
  font-size: 0.85rem;
  margin-block-start: var(--space-2xs);
}

.wh-meta-poster {
  color: var(--chronicle-text-muted);
  font-size: 0.8rem;
}

.wh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block: var(--space-2xs);
}

@media (max-width: 48rem) {
  .wh-kind-option {
    flex-direction: column;
    align-items: stretch;
  }
}
/* ────────────────────────────────────────────────────────────────
   Folio pop-in smoothing (2026-08-15)
   .dash-kicker/.dash-panel-label carry a 0.7s floatIn (36px rise,
   `both` fill) that RESTARTS on every fragment injection and fights
   the folio's own fade — the "animations off when it pops up" jank.
   Inside the stage, the folio fade owns the entrance; suppress the
   per-element entrances and cross-fade the swap.
   ──────────────────────────────────────────────────────────────── */
.events-folio-content {
  transition: opacity var(--dur-short) ease-out, transform var(--dur-short) ease-out;
}

.events-folio-content .dash-kicker,
.events-folio-content .dash-panel-label,
.events-folio-content .dash-hero h1,
.events-folio-content .dash-summary,
.events-folio-content .dash-overview {
  animation: none;
}

.events-folio-content.is-swapped {
  animation: none;
}
/* ────────────────────────────────────────────────────────────────
   Board info-bar style (2026-08-15) — compact title/meta bars with
   expandable details, replacing full-description cards.
   ──────────────────────────────────────────────────────────────── */

.hw-bar,
.wh-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

.hw-bar-main,
.wh-bar-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.hw-bar-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--chronicle-paper-ink);
}

.hw-bar-meta,
.wh-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  color: var(--chronicle-paper-muted);
  font-size: 0.85rem;
}

.hw-bar-guild,
.wh-bar-guild {
  color: var(--chronicle-paper-muted);
}

.hw-bar-date {
  color: var(--chronicle-paper-muted);
  font-size: 0.8rem;
}

.hw-bar-side,
.wh-bar-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-inline-start: auto;
}

.hw-bar-contact,
.wh-contact {
  color: var(--chronicle-paper-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Expandable details */
.hw-bar-expand,
.wh-bar-expand {
  font-size: 0.85rem;
}

.hw-bar-expand summary,
.wh-bar-expand summary {
  cursor: pointer;
  color: var(--chronicle-gold-deep);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
  user-select: none;
}

.hw-bar-expand summary:hover,
.wh-bar-expand summary:hover {
  color: var(--chronicle-paper-ink);
}

.hw-bar-body,
.wh-bar-body {
  margin-block-start: var(--space-sm);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--chronicle-paper-rule);
}

.hw-bar-body p {
  margin-block: var(--space-2xs);
  color: var(--chronicle-paper-muted);
}

.hw-bar-description {
  white-space: pre-wrap;
}

@media (max-width: 48rem) {
  .hw-bar-side,
  .wh-bar-side {
    margin-inline-start: 0;
    width: 100%;
    justify-content: space-between;
  }
}
/* Alliance form steps (2026-08-15) — explicit how-to under the unallied panel */
.alliance-steps {
  margin-block: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--chronicle-ink-soft);
  border: 1px solid var(--chronicle-gold-line);
}

.alliance-steps-list {
  margin: 0;
  padding-inline-start: var(--space-lg);
  color: var(--chronicle-text-soft);
}

.alliance-steps-list li {
  margin-block: var(--space-2xs);
}

.alliance-steps-list strong {
  color: var(--chronicle-gold-bright);
}
/* ────────────────────────────────────────────────────────────────
   Board polish v4 (2026-08-15) — switches, edit dialogs, badges,
   chip contrast, section labels, spacing, icons.
   ──────────────────────────────────────────────────────────────── */

/* Section labels: board titles should read as titles, not footnotes */
.hw-board .dash-panel-label,
.hw-own .dash-panel-label,
.wh-board .dash-panel-label {
  color: var(--chronicle-gold-bright);
  font-size: 0.85rem;
}

.hw-board .dash-section-head h2,
.hw-own .dash-section-head h2,
.wh-board .dash-section-head h2,
.wh-compose .dash-section-head h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}

/* Card inner spacing: keep text off the edges */
.hw-bar,
.wh-bar {
  padding: var(--space-md) var(--space-lg);
}

.hw-bar-title,
.wh-card-title {
  margin-block-end: var(--space-2xs);
}

.hw-bar-meta,
.wh-meta {
  gap: var(--space-sm);
}

/* Icons in bars */
.hw-icon,
.wh-icon {
  width: 0.95rem;
  height: 0.95rem;
  vertical-align: -0.15em;
  color: var(--chronicle-gold-deep);
}

.hw-bar-contact,
.wh-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Hidden (toggled-off) listings */
.hw-bar-off,
.wh-bar-off {
  opacity: 0.72;
}

.hw-hidden-badge,
.wh-hidden-badge {
  display: inline-block;
  margin-inline-start: var(--space-2xs);
  padding: 0.1rem 0.5rem;
  color: var(--chronicle-text-muted);
  border: 1px solid var(--chronicle-rule);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* On/Off switch — green when visible, red when hidden */
.hw-switch,
.wh-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
}

.hw-switch-input,
.wh-switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hw-switch-track,
.wh-switch-track {
  display: inline-block;
  width: 2.75rem;
  height: 1.4rem;
  position: relative;
  background: var(--chronicle-danger);
  border: 1px solid var(--chronicle-danger);
  border-radius: 999px;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

.hw-switch-track::after,
.wh-switch-track::after {
  content: "";
  position: absolute;
  top: 0.16rem;
  left: 0.16rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--chronicle-paper);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

.hw-switch-input:checked + .hw-switch-track,
.wh-switch-input:checked + .wh-switch-track {
  background: var(--chronicle-success);
  border-color: var(--chronicle-success);
}

.hw-switch-input:checked + .hw-switch-track::after,
.wh-switch-input:checked + .wh-switch-track::after {
  transform: translateX(1.3rem);
  background: var(--chronicle-paper);
}

.hw-switch-input:focus-visible + .hw-switch-track,
.wh-switch-input:focus-visible + .wh-switch-track {
  outline: 2px solid var(--chronicle-focus);
  outline-offset: 2px;
}

.hw-toggle-form,
.wh-toggle-form {
  display: inline-flex;
  margin: 0;
}

/* Edit dialogs */
.hw-edit-dialog,
.wh-edit-dialog {
  color: var(--chronicle-paper-ink);
  background-color: var(--chronicle-paper);
  background-image:
    linear-gradient(145deg, var(--chronicle-paper-glaze), transparent),
    url("/assets/chronicle-paper-texture-v1.webp");
  background-blend-mode: soft-light, luminosity;
  background-size: auto, 24rem 24rem;
  border: 1px solid var(--chronicle-paper-rule);
}

.hw-dialog-title,
.wh-dialog-title {
  margin-block-start: 0;
  font-family: var(--font-display);
  color: var(--chronicle-paper-ink);
}

.hw-dialog-actions,
.wh-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}

.hw-edit-dialog .hw-form-label,
.wh-edit-dialog .wh-field-label {
  color: var(--chronicle-paper-muted);
}

.hw-edit-dialog input,
.hw-edit-dialog select,
.hw-edit-dialog textarea,
.wh-edit-dialog input,
.wh-edit-dialog select,
.wh-edit-dialog textarea {
  background: var(--chronicle-paper-raised);
  border-color: var(--chronicle-paper-rule);
  color: var(--chronicle-paper-ink);
}

.hw-edit-dialog .button-secondary,
.wh-edit-dialog .button-secondary {
  color: var(--chronicle-paper-ink);
  background: var(--chronicle-paper-raised);
  border-color: var(--chronicle-paper-rule);
}

/* Alliance request card: roomier text + outlined cancel + loud pending chip */
.alliance-card {
  padding: var(--space-md) var(--space-lg);
}

.alliance-card-message {
  padding-block-end: var(--space-2xs);
}

.alliance-chip {
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 800;
}

.alliance-chip-pending {
  color: var(--chronicle-gold-deep);
  background: var(--chronicle-gold-bright);
  border: 1px solid var(--chronicle-gold-deep);
  box-shadow: inset 0 0 0 1px var(--chronicle-gold-wash);
}

.alliance-action-form .button-danger-outline,
.hw-card-delete-form .button-danger-outline,
.wh-card-delete-form .button-danger-outline {
  border: 1px solid var(--chronicle-danger);
}

.alliance-card-actions {
  gap: var(--space-sm);
}

/* ────────────────────────────────────────────────────────────────
   UI polish round 1 (2026-08-21) — id-chip legibility, stats table
   width pressure, War Hero / Help Wanted form grids, alliance steps
   accent. Appended overrides only; base rules live in layout.css /
   components.css and are untouched.
   ──────────────────────────────────────────────────────────────── */

/* N3 — .sc-id-chip rendered at 9px / 50% opacity: unreadable.
   Same specificity (0,1,0) as the components.css base but later in
   the cascade → wins; :hover and .copied states are (0,2,0) and
   keep overriding these properties. */
.sc-id-chip {
  font-size: 0.75rem;
  color: #3a2f1c;
  opacity: 0.85;
}

/* N4 — /stats scoreboard measured 1762px inside a 1550px wrapper.
   That page renders .dashboard-table-scroll > table.table under
   .athena-data-page (NOT .guild-performance-panel .score-table —
   verified in src/web/templates/stats-page.ts:744-748,110). Reduce
   horizontal padding on every column except the label column:
   selector = (0,4,1) vs the (0,1,1) base `.table th/td` padding in
   components.css → wins cleanly. Wrapper keeps overflow-x: auto. */
.athena-data-page .dashboard-table-scroll .table th:not(:first-child),
.athena-data-page .dashboard-table-scroll .table td:not(:first-child) {
  padding-inline: 8px;
}

/* N5 — War Hero forms: consistent 2-column grid instead of ragged
   flex rows (338px vs 176px inputs). display:contents on the row
   wrappers promotes their fields to grid items; applies to both the
   page form and the edit dialog (both are form.wh-form). */
.wh-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.wh-form-row {
  display: contents;
}
.wh-form-row .wh-field {
  /* (0,2,0), later than the identical-specificity flex base → wins */
  flex: initial;
}
.wh-form-row > div {
  min-width: 0;
}
.wh-form > .wh-kind-picker,
.wh-form > .wh-field,
.wh-form > .wh-form-actions,
.wh-form > .wh-dialog-title,
.wh-form > .wh-dialog-actions {
  grid-column: 1 / -1;
}

/* N6 — Help Wanted post form: same 2-column treatment. Scoped to
   .hw-form-panel so the edit dialog's form.hw-form (no .hw-form-row
   wrapper) keeps its current layout. */
.hw-form-panel .hw-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-md);
}
.hw-form-panel .hw-form-row {
  display: contents;
}
.hw-form-panel .hw-form-row > * {
  /* (0,3,0)+ vs the (0,1,0) flex base `.hw-form-row > *` → wins */
  flex: initial;
  min-width: 0;
}
.hw-form-panel .hw-form-field-wide {
  grid-column: auto;
}
.hw-form-panel .hw-form > .hw-form-field,
.hw-form-panel .hw-form > .hw-form-actions {
  grid-column: 1 / -1;
}

/* N8 — alliance steps: quiet left-accent instead of a full boxed
   callout competing with the form below. color-mix() is already used
   throughout this sheet, so no browser-target risk. */
.alliance-steps {
  border: none;
  border-left: 2px solid var(--chronicle-gold-line);
  background: color-mix(in srgb, var(--chronicle-ink-soft) 60%, transparent);
}

/* Round 2 — event detail hero: the event ID moved out of the <h1> text into
   a .sc-id-chip. The hero surface is var(--command-surface) = --chronicle-ink
   (dark), but the chip's base ink (#3a2f1c / --event-ink-muted) is tuned for
   parchment cards → swap to the hero's own light-on-dark palette. The chip
   carries only a title tooltip here (no copy handler), so drop the pointer
   cursor and the card margin. Specificity (0,2,0) beats both the
   components.css base and the round-1 (0,1,0) legibility override. */
.event-command-hero .sc-id-chip {
  margin-bottom: 0;
  color: var(--command-ink-muted);
  border-color: var(--command-rule);
  cursor: help;
}

/* Reduced motion (DESIGN.md → Motion): keep state changes, drop the travel.
   Every animation and transition collapses to a short fade-length step. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 150ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Owl Logs · /owl-logs
   The nocturnal war ledger: kill/death telemetry uploaded by the Owl client,
   read back as an archive page. Obsidian-chronicle native — warm ink panels,
   gold hairline rules, Cormorant display headings, mono for every machine
   value (tokens, timestamps, tallies). Parchment appears only where the reader
   is meant to *act*: the how-to steps and the token plate.

   Every rule is owl-prefixed or descends from `.owl-page`, so nothing here
   leaks into the rest of the archive. Shared classes (.card, .button, inputs)
   are only ever touched as descendants of an owl root.

   Corners are square throughout — the two circles on the page are the heatmap
   kill dots and the legend swatches that decode them.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Root & shared material ────────────────────────────────────
   The surface recipe lives here once instead of being retyped on each panel,
   so the download bay, the war list, and the four detail panels read as one
   sheet of material rather than six unrelated boxes. */
.owl-page {
  --owl-panel:
    linear-gradient(180deg,
      color-mix(in oklch, var(--chronicle-ink-raised) 94%, transparent),
      color-mix(in oklch, var(--chronicle-ink) 96%, transparent));
  --owl-panel-raised: color-mix(in oklch, var(--chronicle-ink-raised) 92%, var(--chronicle-gold) 3%);
  --owl-well: color-mix(in oklch, var(--chronicle-void) 82%, var(--chronicle-ink));
  --owl-hairline: color-mix(in oklch, var(--chronicle-gold) 26%, transparent);
  --owl-hairline-strong: var(--chronicle-gold-line);
  --owl-rule: var(--chronicle-rule-soft);
  --owl-shadow: 0 1px 2px var(--chronicle-shadow-soft), 0 14px 34px -26px var(--chronicle-shadow);
  --owl-inner-lip: inset 0 1px 0 color-mix(in oklch, var(--chronicle-gold) 12%, transparent);
  --owl-kill: var(--chronicle-success);
  --owl-death: var(--chronicle-danger);
  --owl-parchment:
    linear-gradient(180deg, var(--chronicle-paper-raised), var(--chronicle-paper-deep));

  display: grid;
  gap: var(--space-xl);
  min-width: 0;
  color: var(--chronicle-text);
  font-family: var(--font-body);
}

/* The page is composed entirely of grids and flex rows; browser margins on
   headings and lists only fight the gaps that already position them. */
.owl-page :is(h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote) {
  margin: 0;
}

.owl-page :is(ul, ol) {
  padding: 0;
  list-style: none;
}

/* Sharp corners are the page's signature; shared components arrive with
   --radius-* baked in, so they are squared off inside the owl root only. */
.owl-page :is(.card, .button, button, input, select, textarea, code, pre, dialog, .badge) {
  border-radius: 0;
}

.owl-page :is(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* One focus treatment for the whole page: a gold ring clear of the element's
   own border, so it stays legible on ink panels and on parchment alike. */
.owl-page :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--chronicle-focus);
  outline-offset: 2px;
}

/* ── Page header ───────────────────────────────────────────────
   A ruled masthead rather than a hero: eyebrow, title, one line of orientation
   copy, closed by the gold hairline that every section below repeats. */
.owl-header {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--owl-hairline);
  text-align: left;
}

.owl-eyebrow {
  color: var(--chronicle-gold-deep);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.owl-title,
.owl-header h1 {
  color: var(--chronicle-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 2.1vw, 3rem);
  line-height: 1.04;
}

.owl-subtitle {
  max-width: 46rem;
  color: var(--chronicle-text-muted);
  font-size: 0.86rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Return-to-index link: a quiet mono breadcrumb above the title. */
.owl-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--dur-short) var(--ease-out);
}

.owl-back::before {
  content: "\2190";
  color: var(--chronicle-gold-deep);
  transition: transform var(--dur-short) var(--ease-out);
}

.owl-back:hover {
  color: var(--chronicle-gold-bright);
}

.owl-back:hover::before {
  transform: translateX(-2px);
}

/* ── Section shells ────────────────────────────────────────────
   Panels are flat ink slabs with a hairline and a lit top edge. No nesting:
   a panel never contains another panel, only ruled regions. */
.owl-download-panel,
.owl-wars,
.owl-kd-panel,
.owl-guild-panel,
.owl-feed-panel,
.owl-heatmap-panel {
  min-width: 0;
  padding: var(--space-lg);
  background: var(--owl-panel);
  border: 1px solid var(--owl-hairline);
  box-shadow: var(--owl-shadow), var(--owl-inner-lip);
}

.owl-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  min-width: 0;
  margin-block-end: var(--space-md);
  padding-block-end: var(--space-xs);
  border-block-end: 1px solid var(--owl-hairline);
}

.owl-section-head h2,
.owl-section-head h3 {
  color: var(--chronicle-gold-bright);
  font-size: clamp(1.1rem, 0.96rem + 0.6vw, 1.4rem);
  line-height: 1.1;
}

.owl-section-copy {
  max-width: 42rem;
  color: var(--chronicle-text-muted);
  font-size: 0.8rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Tally beside a section title — "12 wars logged". */
.owl-count {
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Download bay ──────────────────────────────────────────────
   Two columns divided by a gold hairline: what the client is and how to run it
   on the left, the token that authorises it on the right. A rule instead of a
   second panel — the bay is one object, not two stacked cards. */
.owl-download-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-xl);
  min-width: 0;
}

.owl-download-copy,
.owl-token-section {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  min-width: 0;
}

.owl-token-section {
  padding-inline-start: var(--space-xl);
  border-inline-start: 1px solid var(--owl-hairline);
}

.owl-download-copy p {
  color: var(--chronicle-text-soft);
  font-size: 0.86rem;
  line-height: 1.6;
  text-wrap: pretty;
}
/* Subtle dark gradient on the download panel — sets it apart from the
   flat ink slab used by other panels. */
.owl-download-panel {
  background: linear-gradient(135deg, var(--owl-panel) 0%, rgba(26, 23, 15, 0.95) 100%);
}

/* The primary action: download button made prominent — full-width, gold
   background, box-shadow for depth. */
.owl-download-action {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  min-height: 3rem;
  padding: var(--space-sm) var(--space-lg);
  background: linear-gradient(135deg, var(--chronicle-gold-bright), var(--chronicle-gold));
  border: 1px solid var(--chronicle-gold-bright);
  box-shadow: 0 4px 16px rgba(199, 154, 74, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  color: var(--chronicle-paper-ink);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.owl-download-action:hover {
  background: linear-gradient(135deg, #dbb35e, var(--chronicle-gold-bright));
  box-shadow: 0 6px 24px rgba(199, 154, 74, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
  color: var(--chronicle-paper-ink);
}

.owl-download-action:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(199, 154, 74, 0.25);
}

/* ── Step flow ─────────────────────────────────────────────────
   A modern visual guide replacing the numbered parchment list. Steps
   are connected by a gold left border and numbered with gold circles.
   Premium game-launcher feel on the dark ink panel. */
.owl-download-subtitle {
  color: var(--chronicle-text-soft);
  font-size: 0.86rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.owl-steps {
  display: grid;
  gap: 0;
  margin-block-start: var(--space-md);
  border-left: 2px solid var(--gold);
  padding-left: var(--space-lg);
}

.owl-step {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--space-sm);
  align-items: start;
  position: relative;
  padding-block: var(--space-sm);
}

.owl-step + .owl-step {
  border-block-start: 1px solid var(--owl-hairline);
}

.owl-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--gold);
  color: var(--chronicle-paper-ink);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  /* Square corners per the owl-page design system */
}

.owl-step-body {
  display: grid;
  gap: 0.15rem;
  padding-block-start: 0.1rem;
}

.owl-step-label {
  color: var(--gold);
  font-family: var(--font-outlier);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.owl-step-desc {
  color: var(--chronicle-text-soft);
  font-size: 0.82rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Legacy .owl-howto kept for any other pages that may reference it —
   only the Owl download panel uses .owl-steps now. */
.owl-howto {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  background: var(--owl-parchment);
  border: 1px solid var(--chronicle-paper-rule);
  box-shadow: inset 0 1px 0 var(--chronicle-paper-glaze);
  color: var(--chronicle-paper-ink);
  counter-reset: owl-step;
  font-size: 0.84rem;
  line-height: 1.55;
}
.owl-howto li {
  position: relative;
  min-width: 0;
  padding-inline-start: 2.1rem;
  counter-increment: owl-step;
  text-wrap: pretty;
}
.owl-howto li::before {
  content: counter(owl-step, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 0.05rem;
  color: var(--chronicle-gold-deep);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.owl-howto strong {
  color: var(--chronicle-paper-ink);
  font-weight: 700;
}
.owl-howto code,
.owl-howto kbd {
  padding: 0.05rem 0.3rem;
  background: rgba(26, 20, 11, 0.09);
  border: 1px solid var(--chronicle-paper-rule);
  color: var(--chronicle-paper-ink);
  font-family: var(--font-outlier);
  font-size: 0.78em;
  overflow-wrap: anywhere;
}
.owl-howto a {
  color: var(--chronicle-gold-deep);
  text-decoration-color: var(--chronicle-paper-rule);
  text-underline-offset: 0.2em;
}
.owl-howto a:hover {
  color: var(--chronicle-paper-ink);
}

/* ── Token plate ───────────────────────────────────────────────
   The token is a credential, so it is shown as a stamped plate: parchment,
   ruled edge, mono glyphs that select in one click. */
.owl-token-display {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--owl-parchment);
  border: 1px solid var(--chronicle-paper-rule);
  box-shadow: inset 0 1px 0 var(--chronicle-paper-glaze);
}

.owl-token-code {
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--chronicle-paper-ink);
  font-family: var(--font-outlier);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  user-select: all;
  word-break: break-all;
}

.owl-token-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

/* Outlined controls on parchment: an ink hairline, filled only on hover, so
   copy and revoke never read as two competing primaries. */
.owl-copy-button,
.owl-token-delete {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2rem;
  padding: 0.3rem var(--space-sm);
  background: transparent;
  border: 1px solid var(--chronicle-paper-rule);
  color: var(--chronicle-paper-muted);
  cursor: pointer;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
    background var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}

.owl-copy-button:hover {
  background: rgba(26, 20, 11, 0.08);
  border-color: var(--chronicle-paper-ink);
  color: var(--chronicle-paper-ink);
}

.owl-token-delete {
  border-color: color-mix(in oklch, var(--owl-death) 55%, transparent);
  color: color-mix(in oklch, var(--owl-death) 72%, var(--chronicle-paper-ink));
}

.owl-token-delete:hover {
  background: color-mix(in oklch, var(--owl-death) 14%, transparent);
  border-color: var(--owl-death);
  color: var(--owl-death);
}

.owl-copy-button.is-copied {
  border-color: color-mix(in oklch, var(--owl-kill) 60%, transparent);
  color: color-mix(in oklch, var(--owl-kill) 70%, var(--chronicle-paper-ink));
}

/* ── Token forms ───────────────────────────────────────────────
   Issue / rename / revoke. Fields sit on a line and wrap whole rather than
   squeezing a label past legibility. */
.owl-token-form,
.owl-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-xs) var(--space-sm);
  min-width: 0;
}

.owl-inline-form {
  display: inline-flex;
  margin: 0;
}

.owl-field {
  display: grid;
  flex: 1 1 12rem;
  gap: var(--space-3xs);
  min-width: 0;
}

.owl-field-label {
  color: var(--chronicle-gold-deep);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.owl-token-form :is(input, select),
.owl-inline-form :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 2.4rem;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--owl-well);
  border: 1px solid var(--owl-rule);
  color: var(--chronicle-text);
  font-family: var(--font-outlier);
  font-size: 0.78rem;
  transition: border-color var(--dur-short) var(--ease-out);
}

.owl-token-form :is(input, select):hover,
.owl-inline-form :is(input, select):hover {
  border-color: var(--owl-hairline-strong);
}

.owl-token-form input::placeholder,
.owl-inline-form input::placeholder {
  color: var(--chronicle-text-muted);
  opacity: 1;
}

/* Revoking a token breaks every client running it, so the caution is stated
   as a ruled aside rather than shouted in red across the panel. */
.owl-token-warning {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-xs) var(--space-sm);
  background: color-mix(in oklch, var(--owl-death) 9%, transparent);
  border-inline-start: 2px solid color-mix(in oklch, var(--owl-death) 70%, transparent);
  color: color-mix(in oklch, var(--owl-death) 34%, var(--chronicle-text-soft));
  font-size: 0.76rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.owl-token-warning strong {
  color: color-mix(in oklch, var(--owl-death) 55%, var(--chronicle-text));
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Token table ───────────────────────────────────────────────
   Issued tokens, one row each. Same table grammar as the K/D board below:
   gold mono header, hairline rows, tabular figures. */
.owl-token-table-wrap,
.owl-kd-table-wrap {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--owl-hairline-strong) transparent;
  scrollbar-width: thin;
}

.owl-token-table,
.owl-kd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.owl-token-table th,
.owl-kd-table thead th {
  padding: var(--space-2xs) var(--space-xs);
  background: color-mix(in oklch, var(--chronicle-gold) 16%, var(--chronicle-ink));
  border-block-end: 1px solid var(--owl-hairline-strong);
  color: var(--chronicle-gold-bright);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: start;
  text-transform: uppercase;
  white-space: nowrap;
}

.owl-token-table td,
.owl-kd-table td,
.owl-kd-table tbody th {
  padding: var(--space-2xs) var(--space-xs);
  border-block-end: 1px solid var(--owl-rule);
  color: var(--chronicle-text-soft);
  vertical-align: middle;
}

.owl-token-table tbody tr:last-child td,
.owl-kd-table tbody tr:last-child :is(th, td) {
  border-block-end: 0;
}

.owl-token-table tbody tr,
.owl-kd-table tbody tr {
  transition: background-color var(--dur-short) var(--ease-out);
}

.owl-token-table tbody tr:hover,
.owl-kd-table tbody tr:hover {
  background: color-mix(in oklch, var(--chronicle-gold) 7%, transparent);
}

.owl-token-table code {
  color: var(--chronicle-gold-bright);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.owl-token-table time,
.owl-kd-table time {
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  white-space: nowrap;
}

/* ── Recent wars ───────────────────────────────────────────────
   Info bars, not cards: one line per war, title and meta on the left, the
   tallies right-aligned so the numbers form a readable column down the list. */
.owl-war-list {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
}

.owl-war-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--owl-panel-raised);
  border: 1px solid var(--owl-rule);
  border-inline-start: 2px solid var(--owl-hairline);
  color: inherit;
  text-decoration: none;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
}

.owl-war-card:hover,
.owl-war-card:focus-within {
  background: color-mix(in oklch, var(--chronicle-ink-soft) 88%, var(--chronicle-gold) 4%);
  border-color: var(--owl-hairline);
  border-inline-start-color: var(--chronicle-gold);
  transform: translateX(2px);
}

/* The war currently receiving uploads is marked by its rail, not by a badge
   competing with the title. */
.owl-war-active {
  border-inline-start-color: var(--chronicle-gold-bright);
}

.owl-war-main {
  display: grid;
  flex: 1 1 16rem;
  gap: 0.15rem;
  min-width: 0;
}

.owl-war-title {
  color: var(--chronicle-text);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owl-war-link {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  min-width: 0;
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}

.owl-war-view {
  color: var(--chronicle-gold-bright);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.owl-war-card:hover .owl-war-link,
.owl-war-link:hover,
.owl-war-link:focus-visible {
  color: var(--chronicle-gold-bright);
}

/* Stretch the row link across the whole bar so the entire info bar is the
   target, not just the title text. Row text stops being selectable — an
   accepted trade for a war list whose job is "open this war". */
.owl-war-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.owl-war-card:has(.owl-war-link) {
  position: relative;
}

/* Anything else interactive in the bar (a delete form, an external link) has
   to sit above that overlay or the stretched link eats its clicks. */
.owl-war-card :is(a[href], button, input, select, summary):not(.owl-war-link) {
  position: relative;
  z-index: 1;
}

.owl-war-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  min-width: 0;
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.owl-war-meta > * + *::before {
  content: "·";
  margin-inline-end: var(--space-2xs);
  color: var(--chronicle-gold-deep);
}

.owl-war-result {
  color: var(--chronicle-text-soft);
  font-weight: 600;
}

.owl-war-result-win {
  color: var(--owl-kill);
}

.owl-war-result-loss {
  color: var(--owl-death);
}

.owl-war-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  min-width: 0;
}

/* ── Stat pairs ────────────────────────────────────────────────
   Mono caption over a tabular figure. Used in the war bars and, one step
   larger, in the detail header. */
.owl-stat {
  display: grid;
  gap: 0.05rem;
  min-width: 3.2rem;
  text-align: end;
}

.owl-stat span,
.owl-stat-label {
  color: var(--chronicle-gold-deep);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.owl-stat strong,
.owl-stat-value {
  color: var(--chronicle-text);
  font-family: var(--font-outlier);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.15;
}

/* ── War detail ────────────────────────────────────────────────
   One war, opened. The header restates which war and its headline tallies;
   the grid below carries the four analysis panels. */
.owl-detail {
  display: grid;
  gap: var(--space-lg);
  min-width: 0;
}

.owl-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-xl);
  min-width: 0;
  padding-block-end: var(--space-sm);
  border-block-end: 1px solid var(--owl-hairline);
}

.owl-detail-heading {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
}

.owl-detail-heading h2,
.owl-detail-heading h1 {
  color: var(--chronicle-gold-bright);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  line-height: 1.06;
}

.owl-detail-copy {
  max-width: 40rem;
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.owl-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-sm);
  letter-spacing: normal;
  text-transform: none;
}

.owl-share-body .main {
  width: 100%;
  max-width: none;
  padding-inline: clamp(0.75rem, 2vw, 2rem);
}

.owl-share-page {
  width: min(100%, 120rem);
  margin-inline: auto;
  padding-block: clamp(1rem, 3vw, 2.5rem);
}

.owl-share-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-lg);
  max-width: 118rem;
  margin-inline: auto;
  padding-inline: clamp(0.25rem, 1vw, 1rem);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--owl-hairline);
}

.owl-share-header h1 {
  color: var(--chronicle-gold-bright);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem);
  line-height: 1.05;
}

.owl-share-summary {
  display: grid;
  justify-items: end;
  gap: 0.1rem;
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.owl-share-summary strong {
  color: var(--chronicle-gold-bright);
  font-size: 1.7rem;
  line-height: 1;
}

.owl-share-expiry,
.owl-share-empty {
  max-width: 118rem;
  margin: var(--space-sm) auto;
  padding-inline: clamp(0.25rem, 1vw, 1rem);
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
}

.owl-share-page > .owl-heatmap-panel {
  width: 100%;
  max-width: 118rem;
  margin-inline: auto;
}

.owl-detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  min-width: 0;
}

.owl-detail-stats .owl-stat {
  min-width: 4rem;
  text-align: start;
}

.owl-detail-stats :is(.owl-stat strong, .owl-stat-value) {
  color: var(--chronicle-gold-bright);
  font-size: 1.45rem;
}

/* Panels flow two-up on wide viewports and single-file below ~24rem of column
   width — auto-fit rather than fixed placement, so the grid stays intact if a
   panel is absent for a war with no map or no guild breakdown. */
.owl-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: var(--space-md);
  align-items: start;
  min-width: 0;
}

/* The map is read spatially, so it always claims the full row. */
.owl-heatmap-panel {
  grid-column: 1 / -1;
}

/* ── Kill/death board ──────────────────────────────────────────
   The page's densest data: a long roster of players. The header stays pinned
   while the body scrolls so the column meanings never leave the viewport. */
.owl-kd-panel,
.owl-guild-panel,
.owl-feed-panel {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  min-width: 0;
}

.owl-kd-table-wrap {
  max-height: 28rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.owl-kd-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.owl-kd-table :is(th, td):not(:nth-child(2)) {
  text-align: end;
}

.owl-kd-table :is(th, td):nth-child(2) {
  text-align: start;
}

.owl-kd-name {
  color: var(--chronicle-text);
  font-weight: 600;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owl-kd-positive {
  color: var(--owl-kill);
  font-weight: 600;
}

.owl-kd-negative {
  color: var(--owl-death);
  font-weight: 600;
}

/* States what the numbers mean or where they stop — a table that explains its
   own reading rather than leaving the reader to infer it. */
.owl-table-note {
  color: var(--chronicle-text-muted);
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ── Guild share bars ──────────────────────────────────────────
   Proportion at a glance: name and count on one line, the bar beneath it, so
   long guild names never squeeze the track. */
.owl-guild-list {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}

.owl-guild-row {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
}

.owl-guild-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  min-width: 0;
  font-size: 0.78rem;
}

.owl-guild-name {
  min-width: 0;
  color: var(--chronicle-text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owl-guild-count {
  color: var(--chronicle-gold-bright);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.owl-guild-track {
  position: relative;
  height: 0.5rem;
  overflow: hidden;
  background: var(--owl-well);
  border: 1px solid var(--owl-rule);
}

/* Width arrives inline as --owl-width; the clamp is the no-overflow guarantee
   if a rounding error ever pushes a share past 100%. */
.owl-guild-bar {
  display: block;
  width: clamp(0%, var(--owl-width, 0%), 100%);
  height: 100%;
  background: linear-gradient(90deg, var(--chronicle-gold-deep), var(--chronicle-gold));
  transition: width var(--dur-long) var(--ease-out);
}

.owl-guild-row:first-child .owl-guild-bar {
  background: linear-gradient(90deg, var(--chronicle-gold), var(--chronicle-gold-bright));
}

/* ── Event feed ────────────────────────────────────────────────
   A scrolling ledger capped at 24rem: enough to read a run of events without
   the panel outgrowing everything beside it. */
.owl-feed {
  display: grid;
  align-content: start;
  gap: 0;
  max-height: 24rem;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline-end: var(--space-2xs);
  scrollbar-color: var(--owl-hairline-strong) transparent;
  scrollbar-width: thin;
}

.owl-feed::-webkit-scrollbar {
  width: 0.35rem;
}

.owl-feed::-webkit-scrollbar-thumb {
  background: var(--owl-hairline-strong);
}

.owl-feed-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-xs);
  min-width: 0;
  padding-block: var(--space-2xs);
  border-block-end: 1px solid var(--owl-rule);
  font-size: 0.78rem;
}

.owl-feed-row:last-child {
  border-block-end: 0;
}

.owl-feed-time {
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.owl-feed-chip {
  flex: 0 0 auto;
  padding: 0.08rem 0.36rem;
  border: 1px solid var(--owl-rule);
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.owl-feed-chip-kill {
  background: color-mix(in oklch, var(--owl-kill) 14%, transparent);
  border-color: color-mix(in oklch, var(--owl-kill) 45%, transparent);
  color: color-mix(in oklch, var(--owl-kill) 45%, var(--chronicle-text));
}

.owl-feed-chip-death {
  background: color-mix(in oklch, var(--owl-death) 13%, transparent);
  border-color: color-mix(in oklch, var(--owl-death) 45%, transparent);
  color: color-mix(in oklch, var(--owl-death) 42%, var(--chronicle-text));
}

.owl-feed-combatants {
  flex: 1 1 11rem;
  min-width: 0;
  color: var(--chronicle-text-soft);
  overflow-wrap: anywhere;
}

.owl-feed-combatants strong {
  color: var(--chronicle-text);
  font-weight: 600;
}

.owl-feed-note {
  flex: 0 1 auto;
  margin-inline-start: auto;
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-align: end;
  text-transform: uppercase;
}

.owl-feed-empty {
  padding-block: var(--space-md);
  color: var(--chronicle-text-muted);
  font-size: 0.78rem;
  text-align: center;
}

/* ── Heatmap ───────────────────────────────────────────────────
   The map is a 2:1 plate and every dot is placed as a percentage of it, so the
   stage must hold that ratio exactly at any width. */
.owl-heatmap-wrap,
.owl-heatmap-stage {
  position: relative;
  width: 100%;
  min-width: 0;
  touch-action: none; /* the map owns pan/pinch — no browser scroll hijack */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.owl-heatmap-wrap {
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 1 / 1; /* the Foundry world is square — 2:1 squeezed it */
  overflow: hidden;
  background: var(--owl-well);
  border: 1px solid var(--owl-rule);
}

.owl-heatmap-stage {
  height: 100%;
}

/* `fill`, not `cover`: dot coordinates are percentages of this box, so the
   artwork has to map onto it edge to edge or every mark drifts. */
.owl-map-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  /* Muted "war-room" look: desaturate + dim so the kill dots (bright teal /
     pink with white rims) are the loudest thing on the board. */
  opacity: 0.85;
  filter: saturate(0.55) brightness(0.62) contrast(1.12);
}

/* No map for this territory: the plate says so over the empty stage instead of
   collapsing and leaving the dots floating on nothing. */
.owl-map-unavailable {
  position: absolute;
  inset: 0;
  display: grid;
  gap: var(--space-2xs);
  place-content: center;
  place-items: center;
  padding: var(--space-lg);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 0.7rem,
      color-mix(in oklch, var(--chronicle-gold) 4%, transparent) 0.7rem 1.4rem),
    var(--owl-well);
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.owl-map-unavailable[hidden] {
  display: none;
}

.owl-map-unavailable strong {
  color: var(--chronicle-text-soft);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

/* NOTE (measured, do not re-add): registering --owl-dot-screen-scale /
   --owl-selected-dot-screen-scale / --owl-icon-scale with @property, on the
   theory that typed custom properties invalidate more cheaply than untyped
   tokens, changed nothing: single-notch style recalc stayed ~410-440ms. The
   cost is not property typing, it is the marker DOM being restyled/rebuilt at
   settle (~2,900 elements). See the plan for the canvas-markers fix. */

/* Kill marks. Position and radius arrive inline as --owl-x / --owl-y /
   --owl-r. The map canvas can be zoom-transformed, so the marker applies
   the inverse screen-scale inherited from its host; dots stay readable while
   the artwork still zooms. */
.owl-kill-dot {
  position: absolute;
  /* Radius, size and centring are the same for every dot, so they live here
     instead of being written seven times per dot in JS. Only --owl-x/--owl-y
     are per-dot. */
  --owl-r: 5px;
  left: var(--owl-x);
  top: var(--owl-y);
  width: calc(var(--owl-r) * 2);
  height: calc(var(--owl-r) * 2);
  margin: calc(var(--owl-r) * -1) 0 0 calc(var(--owl-r) * -1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: scale(var(--owl-dot-screen-scale, 1));
  transform-origin: center;
  pointer-events: auto;
  z-index: 3;
}

.owl-kill-dot:focus-visible {
  outline: 2px solid var(--chronicle-focus);
  outline-offset: 2px;
}

.owl-kill-dot-kill,
.owl-kill-dot[data-kind="kill"] {
  background: color-mix(in oklch, var(--owl-kill) 82%, white);
  box-shadow: 0 0 0.45rem color-mix(in oklch, var(--owl-kill) 60%, transparent);
}
.owl-kill-dot-kill[style*="--owl-density"] {
  background: radial-gradient(circle, rgba(255, 100, 0, var(--owl-density, 0.8)) 0%, rgba(200, 50, 0, var(--owl-density, 0.6)) 100%);
}

.owl-kill-dot-death,
.owl-kill-dot[data-kind="death"] {
  background: color-mix(in oklch, var(--owl-death) 86%, white);
  box-shadow: 0 0 0.45rem color-mix(in oklch, var(--owl-death) 60%, transparent);
}
.owl-kill-dot-count {
  position: absolute;
  top: -10px;
  right: -10px;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  padding: 0 3px;
  pointer-events: none;
  z-index: 4;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

/* Event hover card: keep the count/time hierarchy separate from the
   participant route so long names and guilds do not become one cramped line. */
.owl-tooltip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 0.38rem;
  border-bottom: 1px solid color-mix(in oklch, var(--chronicle-gold-line) 70%, transparent);
}
.owl-tooltip-count {
  color: var(--chronicle-gold-bright);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}
.owl-tooltip-time {
  flex: 0 0 auto;
  color: var(--chronicle-text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
}
.owl-tooltip-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.52rem;
}
.owl-tooltip-edge {
  display: inline-flex;
  align-items: center;
  gap: 0.16rem;
  white-space: nowrap;
}
.owl-tooltip-party {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.1rem;
}
.owl-tooltip-name,
.owl-tooltip-guild {
  overflow-wrap: anywhere;
}
.owl-tooltip-name {
  color: var(--chronicle-text);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
}
.owl-tooltip-guild {
  color: var(--chronicle-text-muted);
  font-size: 0.75rem;
  line-height: 1.2;
}
.owl-tooltip-arrow {
  color: var(--chronicle-gold-bright);
  font-size: 1rem;
  line-height: 1;
}
.owl-tooltip-action {
  color: var(--chronicle-gold-bright);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.owl-map-legend {
  position: absolute;
  z-index: 2;
  inset-inline-start: var(--space-sm);
  bottom: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
  min-width: 0;
  padding: var(--space-2xs) var(--space-sm);
  background: color-mix(in oklch, var(--chronicle-ink) 88%, transparent);
  border: 1px solid var(--owl-hairline);
}

.owl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.owl-legend-swatch {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: none;
}

.owl-legend-kill {
  background: color-mix(in oklch, var(--owl-kill) 82%, white);
  box-shadow: 0 0 0.35rem color-mix(in oklch, var(--owl-kill) 50%, transparent);
}

.owl-legend-death {
  background: color-mix(in oklch, var(--owl-death) 86%, white);
  box-shadow: 0 0 0.35rem color-mix(in oklch, var(--owl-death) 50%, transparent);
}

/* ── Empty state & footer ──────────────────────────────────────
   An empty archive is a prompt, not a dead end: the dashed plate holds the
   line that tells the reader what to do next. */
.owl-empty {
  display: grid;
  gap: var(--space-2xs);
  justify-items: center;
  padding: var(--space-xl) var(--space-lg);
  border: 1px dashed var(--owl-hairline-strong);
  color: var(--chronicle-text-muted);
  font-size: 0.82rem;
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;
}

.owl-empty strong {
  color: var(--chronicle-text-soft);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

.owl-empty a {
  color: var(--chronicle-gold-bright);
  text-underline-offset: 0.2em;
}

.owl-footer-note {
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--owl-hairline);
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-wrap: pretty;
}

.owl-footer-note a {
  color: var(--chronicle-gold-deep);
  text-underline-offset: 0.2em;
}

.owl-footer-note a:hover {
  color: var(--chronicle-gold-bright);
}

/* ── Shared components inside the owl root ─────────────────────
   Buttons and inputs that arrive from the global sheet are re-seated on ink:
   square, hairline-edged, and never brighter than the gold they sit beside. */
.owl-page .card {
  background: var(--owl-panel);
  border-color: var(--owl-hairline);
}

.owl-page .button {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Responsive ────────────────────────────────────────────────
   Below 48rem the two-column bay, the war bars, and the detail grid all
   collapse to single file; the feed takes the full width it was sharing. */
@media (max-width: 48rem) {
  .owl-page {
    gap: var(--space-lg);
  }

  .owl-download-panel,
  .owl-wars,
  .owl-kd-panel,
  .owl-guild-panel,
  .owl-feed-panel,
  .owl-heatmap-panel {
    padding: var(--space-md);
  }

  .owl-download-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  /* The divider rotates with the layout: a rule above the token block instead
     of beside it. */
  .owl-token-section {
    padding-block-start: var(--space-lg);
    padding-inline-start: 0;
    border-block-start: 1px solid var(--owl-hairline);
    border-inline-start: 0;
  }

  .owl-steps {
    padding-left: var(--space-md);
  }

  .owl-download-action,
  .owl-copy-button,
  .owl-token-delete {
    justify-content: center;
    flex: 1 1 auto;
  }

  .owl-token-actions,
  .owl-token-form,
  .owl-inline-form {
    display: flex;
    width: 100%;
  }

  .owl-war-link {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .owl-war-view {
    align-self: flex-end;
  }

  .owl-war-title {
    white-space: normal;
  }

  .owl-war-stats {
    gap: var(--space-xs) var(--space-md);
    width: 100%;
  }

  .owl-stat {
    text-align: start;
  }

  .owl-detail-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .owl-detail-stats {
    gap: var(--space-sm) var(--space-lg);
  }

  .owl-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .owl-kd-panel,
  .owl-guild-panel,
  .owl-feed-panel,
  .owl-heatmap-panel {
    grid-column: 1 / -1;
  }

  .owl-kd-name {
    max-width: 9rem;
  }

  .owl-kd-table-wrap {
    max-height: 22rem;
  }

  .owl-feed-note {
    margin-inline-start: 0;
    text-align: start;
  }

  .owl-map-legend {
    gap: var(--space-2xs) var(--space-md);
  }
}

/* Very narrow phones: the field rows have nothing left to share. */
@media (max-width: 30rem) {
  .owl-field {
    flex: 1 1 100%;
  }

  .owl-war-meta {
    font-size: 0.75rem;
  }
}

/* ── Reduced motion ────────────────────────────────────────────
   Every transition here is decorative — the bar fill, the row nudge, the
   button press. None of them carry meaning, so they are simply removed. */
@media (prefers-reduced-motion: reduce) {
  .owl-page *,
  .owl-page *::before,
  .owl-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .owl-war-card:hover,
  .owl-war-card:focus-within {
    transform: none;
  }

  .owl-back:hover::before {
    transform: none;
  }

  .owl-download-action:active {
    transform: none;
  }
}

/* ── Interactive map layer (pan/zoom · nodes · scrubber · tooltip) ── */

/* The canvas carries the artwork + dots and is what pan/zoom transforms. */
.owl-map-canvas {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.owl-heatmap-stage {
  /* Normal arrow — Zen's call: the grab-hand hides the exact pixel the
     cursor is on, which matters for the coordinate readout. */
  cursor: default;
  touch-action: none;
  /* Dark ocean tone — matches the questlog map's sea so the brief moment
     the scaled layer doesn't cover the viewport corners during zoom doesn't
     flash jet-black. */
  background-color: #0d1a1e;
}

.owl-heatmap-stage.owl-map-dragging {
  cursor: grabbing;
}

/* Header tools (nodes toggle + region filter) */
.owl-map-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: center;
}

.owl-tool-btn,
.owl-tool-select {
  appearance: none;
  font: 600 0.75rem var(--font-outlier);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chronicle-text-soft);
  background: var(--chronicle-ink-raised);
  border: 1px solid var(--chronicle-gold-line);
  border-radius: 0;
  padding: 0.28rem 0.6rem;
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}

/* The region filter and speed control are real <select> dropdowns; a plain
   squared button look (appearance:none, no arrow) reads as a dead-end box
   rather than a menu, so they get the app's standard gold chevron back. */
.owl-tool-select {
  padding-inline-end: 1.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23c5a059' d='M6 8.825a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 0 1 .708-.708L6 7.617l3.646-3.646a.5.5 0 0 1 .708.708l-4 4A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
}

.owl-tool-btn:hover,
.owl-tool-select:hover {
  color: var(--chronicle-gold-bright);
  border-color: var(--chronicle-gold-bright);
}

.owl-tool-btn.is-active {
  color: var(--chronicle-ink);
  background: var(--chronicle-gold);
  border-color: var(--chronicle-gold);
}

.owl-tool-btn:disabled,
.owl-tool-select:disabled,
.owl-scrubber:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Toolbar under the map: play · scrubber · speed · reset */
.owl-map-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-block: var(--space-xs) 0;
}

.owl-play-btn {
  min-width: 3.6rem;
  text-align: center;
}

.owl-scrubber {
  flex: 1 1 auto;
  min-width: 4rem;
  accent-color: var(--chronicle-gold);
  height: 1.1rem;
  cursor: pointer;
}

.owl-timeline-time {
  min-width: 10.5rem;
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
}

.owl-speed-select {
  width: auto;
}

.owl-feed-heading-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.owl-feed-clear:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.owl-cannon-toggle {
  border-color: color-mix(in oklch, var(--chronicle-gold) 58%, var(--chronicle-rule));
}

.owl-cannon-panel {
  /* Deliberately NOT sticky. It used to stick to the top of the viewport and
     ride along while reading the map below it, covering the terrain it is
     supposed to be measuring. It scrolls with the page like every other panel. */
  position: relative;
  z-index: 25;
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
  padding: var(--space-md);
  background: color-mix(in oklch, var(--owl-well) 96%, var(--chronicle-gold) 4%);
  border-block-start: 1px solid var(--owl-hairline);
  box-shadow: 0 0.6rem 1.4rem rgb(0 0 0 / 0.28);
}

.owl-cannon-panel[hidden] {
  display: none;
}

.owl-cannon-head,
.owl-cannon-controls,
.owl-cannon-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.owl-cannon-head {
  justify-content: space-between;
}

.owl-cannon-head h4 {
  color: var(--chronicle-gold-bright);
  font-size: 1.05rem;
}

.owl-cannon-note,
.owl-cannon-status,
.owl-cannon-range-note {
  color: var(--chronicle-text-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.owl-cannon-controls label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--chronicle-text-soft);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.owl-cannon-controls input {
  width: 7rem;
  padding: 0.35rem 0.45rem;
  color: var(--chronicle-text);
  background: var(--chronicle-ink);
  border: 1px solid var(--owl-rule);
  font-family: var(--font-mono, monospace);
}

.owl-cannon-readout {
  align-items: stretch;
}

.owl-cannon-readout[hidden] {
  display: none;
}

.owl-cannon-readout > div {
  display: grid;
  gap: 0.18rem;
  min-width: 10rem;
  padding-inline-end: var(--space-md);
  border-inline-end: 1px solid var(--owl-rule);
}

.owl-cannon-readout span {
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.owl-cannon-readout strong {
  color: var(--chronicle-gold-bright);
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
}

.owl-cannon-solutions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--chronicle-text-soft);
  font-size: 0.75rem;
}

.owl-cannon-solutions[hidden] {
  display: none;
}

.owl-cannon-solutions > strong,
.owl-cannon-range-note {
  flex: 0 0 100%;
}

.owl-cannon-solution {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.35rem 0.5rem;
  background: color-mix(in oklch, var(--chronicle-ink) 90%, var(--chronicle-gold) 4%);
  border: 1px solid var(--owl-rule);
  font-family: var(--font-mono, monospace);
}

.owl-cannon-solution b:first-child {
  color: var(--chronicle-gold-bright);
}

.owl-cannon-solution em {
  color: var(--chronicle-text-muted);
  font-size: 0.75rem;
  font-style: normal;
}

.owl-cannon-calibration,
.owl-cannon-calibration-log {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  color: var(--chronicle-text-soft);
  font-size: 0.75rem;
}

.owl-cannon-calibration[hidden],
.owl-cannon-calibration-log[hidden] {
  display: none;
}

.owl-cannon-calibration > strong,
.owl-cannon-calibration-log > strong {
  flex-basis: 100%;
  color: var(--chronicle-gold-bright);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.owl-cannon-calibration label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.owl-cannon-calibration select,
.owl-cannon-calibration input {
  min-width: 5rem;
  padding: 0.3rem 0.4rem;
  color: var(--chronicle-text);
  background: var(--chronicle-ink);
  border: 1px solid var(--owl-rule);
}

.owl-cannon-observation {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding-block: 0.25rem;
  border-block-start: 1px solid var(--owl-rule);
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
}

.owl-cannon-observation .owl-tool-btn {
  margin-inline-start: auto;
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
}

.owl-heatmap-stage.owl-cannon-mode {
  cursor: crosshair;
}

.owl-cannon-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.owl-cannon-marker {
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  margin: -0.7rem 0 0 -0.7rem;
  border: 2px solid var(--chronicle-ink);
  border-radius: 50%;
  color: var(--chronicle-ink);
  cursor: grab;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.1rem;
  pointer-events: auto;
  text-align: center;
  text-shadow: none;
  touch-action: none;
  user-select: none;
}

.owl-cannon-marker:active {
  cursor: grabbing;
}

.owl-cannon-origin {
  background: var(--chronicle-success);
}

.owl-cannon-target {
  background: var(--chronicle-danger);
}

.owl-cannon-line {
  position: absolute;
  height: 2px;
  transform-origin: 0 50%;
  background: var(--chronicle-gold-bright);
  box-shadow: 0 0 0.4rem color-mix(in oklch, var(--chronicle-gold) 70%, transparent);
}

.owl-cannon-marker[hidden],
.owl-cannon-line[hidden] {
  display: none;
}

/* Node markers: small rotated squares (diamonds), region-colored border.
   They are the only non-round shapes on the map, so kills read at a glance. */
.owl-node-dot {
  position: absolute;
  inset-inline-start: var(--owl-x);
  top: var(--owl-y);
  width: 7px;
  height: 7px;
  margin: -4px 0 0 -4px;
  background: color-mix(in oklch, var(--chronicle-ink) 55%, transparent);
  border: 1.5px solid var(--chronicle-gold, #c5a059);
  transform: rotate(45deg);
  cursor: help;
  pointer-events: auto;
  z-index: 2;
}

/* Tooltip (follows the cursor within the folio's positioned coordinate space) */
.owl-tooltip {
  position: absolute;
  z-index: 120;
  min-width: 15rem;
  max-width: 22rem;
  padding: 0.68rem 0.78rem;
  background: color-mix(in oklch, var(--chronicle-ink-raised) 94%, black);
  border: 1px solid var(--chronicle-gold-line);
  border-radius: 3px;
  box-shadow: 0 6px 22px rgb(0 0 0 / 0.52);
  color: var(--chronicle-text);
  font-size: 0.75rem;
  line-height: 1.35;
  pointer-events: none;
}

.owl-tooltip strong {
  color: var(--chronicle-gold-bright);
  font-family: var(--font-display);
  font-size: 0.8rem;
}

.owl-tip-region {
  color: var(--chronicle-text-muted);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Node legend swatch */
.owl-legend-node {
  background: color-mix(in oklch, var(--chronicle-ink) 55%, transparent);
  border: 1.5px solid var(--chronicle-gold);
  transform: rotate(45deg);
  width: 0.5rem;
  height: 0.5rem;
}

/* Responsive: keep toolbar usable on narrow screens */
@media (max-width: 48rem) {
  .owl-map-tools {
    width: 100%;
    margin-top: var(--space-2xs);
  }
}

/* ── Slippy tile engine ────────────────────────────────────────
   The questlog/bdolytics tile grid is square (336 * 2^z px per side, y=0
   top, zooms 0..7 — the CURRENT game map incl. LOML + Edania).
   .owl-world-layer is a full-world-size box that the engine translates; tiles
   and markers live inside it at world coordinates, so the existing
   percentage-based --owl-x/--owl-y marker maths keeps working unchanged. */
/* The tile canvas paints in SCREEN space, so it sits in .owl-map-canvas
   OUTSIDE the world layer's transform (the layer scales its markers; the
   canvas redraws instead). z-index 0 keeps it under the connection web,
   markers and kill dots, which is the same order the old .owl-tiles div had. */
.owl-map-tiles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Every marker — kill dots, node icons, CP badges, city labels and the whole
   connection web — is painted here instead of being ~2,900 DOM elements inside
   the transformed world layer. That is what removed the zoom lag: a canvas has
   no style to recalculate. Screen space, so it sits outside the world layer's
   transform, directly above the tile canvas. Hit-testing is done in JS against
   the layer's grid index, so the canvas itself never takes the pointer. */
.owl-map-markers-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.owl-world-layer {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
  overflow: hidden;
  pointer-events: none;
}

/* The world layer now carries only the cannon overlay (the last pixel-positioned
   children); markers moved to the canvas above. It stays above both canvases so
   the cannon markers remain grabbable. */
.owl-world-layer {
  z-index: 2;
}

.owl-world-layer .owl-kill-dot,
.owl-world-layer .owl-node-dot,
.owl-world-layer .owl-fort-dot {
  pointer-events: auto;
}

.owl-world-layer[hidden] {
  display: none;
}

.owl-map-image[hidden] {
  display: none;
}

/* Per-layer containers. Each render pass clears its own container with one
   replaceChildren instead of a querySelectorAll over the whole map plus a
   removal per element, and `contain` keeps a layer's style/layout work from
   escaping into its siblings. Both boxes match the world layer exactly, so the
   percentage marker positions inside them are unchanged. */
.owl-dots,
.owl-markers {
  position: absolute;
  inset: 0;
  contain: layout style;
}

/* `contain: layout` makes each container its own stacking context, so the
   layer order that used to come from per-marker z-index now lives here — and
   it is the same order: tile canvas (0, outside this layer) under the
   connection web (1, .owl-conn-svg) under node markers (2) under kill
   dots (3). */

.owl-markers {
  z-index: 2;
}

.owl-dots {
  z-index: 3;
}

/* The containers themselves are transparent to the pointer; the markers inside
   keep their own `pointer-events: auto`, which still applies inside a
   non-interactive parent. Labels and cost badges stay non-interactive. */
.owl-dots,
.owl-markers {
  pointer-events: none;
}

/* NOTE (measured, do not re-add): gating marker `pointer-events` on a class
   toggled on the stage during gestures — to stop the browser re-matching
   :hover for markers sliding under the cursor — made things much WORSE.
   Toggling a class on an ancestor of ~2,900 markers invalidates style for the
   whole subtree twice per gesture and forces a full descendant re-match:
   recalc went 186ms -> 663ms and an 8-notch burst 1471ms -> 2111ms. The same
   trap the zoom-band attribute comment warns about. The JS-side hover guard
   (see the pointerover handler) is the version that actually pays. */

/* Fort spawns: small squares (not rotated, so they read apart from node
   diamonds), red-gold border, filled on hover. Default toggle is OFF. */
.owl-fort-dot {
  position: absolute;
  inset-inline-start: var(--owl-x);
  top: var(--owl-y);
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: color-mix(in oklch, var(--chronicle-ink) 45%, transparent);
  border: 1.5px solid var(--chronicle-gold-bright);
  box-shadow: 0 0 0.35rem color-mix(in oklch, var(--owl-death) 55%, transparent);
  cursor: help;
  transition: background var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.owl-fort-dot:hover {
  background: color-mix(in oklch, var(--owl-death) 55%, transparent);
  transform: scale(1.25);
}

.owl-fort-dot:focus-visible {
  outline: 2px solid var(--chronicle-focus);
  outline-offset: 2px;
}

/* ── Tile engine (slippy map) ── */
.owl-map-canvas {
  overflow: hidden;
}

.owl-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  /* Warm dark backdrop so tiles that are still loading (or failed) never
     read as jet-black voids. Land-green tone: matches the map's terrain
     average so the brief tile-decode window isn't a dark flash. */
  background-color: #33382e;
}

/* City / village markers: larger gold diamonds with a name label below —
   the Foundry tiles carry no baked-in labels, so the towns are overlaid
   from the node dataset (always visible at zoom >= 3). */
.owl-city-dot {
  position: absolute;
  left: var(--owl-x);
  top: var(--owl-y);
  width: 11px;
  height: 11px;
  margin: -6px 0 0 -6px;
  background: color-mix(in oklch, var(--chronicle-ink) 35%, transparent);
  border: 2px solid #e5c17c;
  transform: rotate(45deg);
  cursor: help;
  pointer-events: auto;
  z-index: 3;
}

.owl-city-label {
  position: absolute;
  margin-top: 8px;
  transform: translateX(-50%);
  color: #ecd9a8;
  font-family: var(--chronicle-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 0 4px rgb(0 0 0 / 0.8);
  pointer-events: none;
  z-index: 3;
}
/* Hide city labels at low zoom — CSS-gated so no JS rebuild needed */
.owl-heatmap-stage[data-owl-zoom="0"] .owl-city-label,
.owl-heatmap-stage[data-owl-zoom="1"] .owl-city-label,
.owl-heatmap-stage[data-owl-zoom="2"] .owl-city-label {
  display: none;
}

.owl-tip-note {
  display: block;
  margin-top: 2px;
  color: var(--chronicle-text-muted);
  font-size: 0.75rem;
  font-style: italic;
}

/* City legend swatch */
.owl-legend-city {
  background: color-mix(in oklch, var(--chronicle-ink) 35%, transparent);
  border: 2px solid #e5c17c;
  width: 0.5rem;
  height: 0.5rem;
  transform: rotate(45deg);
}

/* ── Contrast pass (2026-08-16) ─────────────────────────────────
   The theme's base rule `.card h2, .card h3, .card h4 { color:
   var(--chronicle-paper-ink) }` targets light parchment cards; the Owl
   panels are dark ink, so every heading without an explicit override
   rendered near-black on near-black (K/D, Guild kills, Combat feed, Kill
   heatmap, Get the Owl Logs app, Logger token, Token label — all were
   invisible). These scoped rules keep the light-card theme untouched. */
.owl-page .card h2,
.owl-page .card h3,
.owl-page .card h4 {
  color: #e5c17c;
}

.owl-page .landing-kicker {
  color: #e5c17c;
}

.owl-page .owl-token-warning,
.owl-page .owl-token-hint {
  color: oklch(0.78 0.018 79);
}

/* ...but the token plate is the one Owl surface that stays light: it paints the
   --owl-parchment gradient. The cream hint colour above rendered light-on-light
   there (~1.3:1), so "Step 2 — paste this into the app:" and the "Shown once"
   instruction were invisible and the plate looked empty apart from the token
   well. Inside the plate, hints go back to paper ink. */
.owl-page .owl-token-display .owl-token-hint {
  color: var(--chronicle-paper-ink);
}

.owl-page .owl-field-label {
  color: #c79a4a;
}

.owl-page .owl-token-code {
  color: #f0dcae;
  background: var(--owl-well);
  border-color: var(--owl-rule);
}

/* Gateway markers: small teal circles — portals/connections, quieter than
   towns so they never compete with war zones or kills. */
.owl-gateway-dot {
  position: absolute;
  left: var(--owl-x);
  top: var(--owl-y);
  width: 7px;
  height: 7px;
  margin: -4px 0 0 -4px;
  background: color-mix(in oklch, var(--chronicle-ink) 45%, transparent);
  border: 1.5px solid #9fd8cb;
  border-radius: 50%;
  cursor: help;
  pointer-events: auto;
  z-index: 2;
}

/* Cursor coordinate readout — follows the mouse over the map like the
   game's own position display. */
.owl-coord-readout {
  position: absolute;
  z-index: 20;
  padding: 3px 8px;
  border: 1px solid var(--owl-rule);
  background: color-mix(in oklch, var(--chronicle-ink) 88%, transparent);
  color: #e5c17c;
  font-family: var(--chronicle-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.45);
}

/* Resource / activity nodes (ql-nodes-full.json) — small kind-colored dots,
   tooltip on hover, shown at zoom >= 4 via the renderer. */
.owl-poi-dot {
  position: absolute;
  left: var(--owl-x);
  top: var(--owl-y);
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 1px;
  background: #8a8a8a;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.55);
  pointer-events: auto;
  cursor: default;
}
.owl-poi-dot.poi-farm     { background: #7da96b; }
.owl-poi-dot.poi-gathering{ background: #c9a34f; }
.owl-poi-dot.poi-mining   { background: #c98a4f; }
.owl-poi-dot.poi-lumbering{ background: #8a6b4f; }
.owl-poi-dot.poi-fishing  { background: #6ba3c9; }
.owl-poi-dot.poi-ranch    { background: #c96ba3; }
.owl-poi-dot.poi-hideout  { background: #c96b6b; }
.owl-poi-dot.poi-ancient  { background: #a97dc9; }
.owl-poi-dot.poi-other    { background: #8a8a8a; }

/* ── bdolytics-style node network ── */
.owl-conn-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.owl-conn-svg line {
  stroke: rgb(229 193 124 / 0.55);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  transition: stroke 150ms ease, stroke-width 150ms ease;
}
/* Thicker lines at low zoom for visibility */
.owl-heatmap-stage[data-owl-zoom="0"] .owl-conn-svg line,
.owl-heatmap-stage[data-owl-zoom="1"] .owl-conn-svg line,
.owl-heatmap-stage[data-owl-zoom="2"] .owl-conn-svg line {
  stroke-width: 2.4;
  stroke: rgb(229 193 124 / 0.82);
}
/* Thinner lines at high zoom to avoid clutter */
.owl-heatmap-stage[data-owl-zoom="5"] .owl-conn-svg line,
.owl-heatmap-stage[data-owl-zoom="6"] .owl-conn-svg line,
.owl-heatmap-stage[data-owl-zoom="7"] .owl-conn-svg line {
  stroke-width: 1.3;
  stroke: rgb(229 193 124 / 0.4);
}
/* Node icons scale with zoom via --owl-icon-scale (set in JS alongside
   data-owl-zoom): the world layer grows on zoom-in but a fixed-px icon
   would shrink relative to the art, so every marker grows with it inside
   a clamped range. A drop-shadow lifts icons off busy tile art the way
   bdolytics' markers hold a consistent silhouette at any zoom. */
.owl-node-icon {
  position: absolute;
  left: var(--owl-x);
  top: var(--owl-y);
  --owl-ico: calc(22px * var(--owl-icon-scale, 1));
  width: var(--owl-ico);
  height: var(--owl-ico);
  margin: calc(var(--owl-ico) * -0.5) 0 0 calc(var(--owl-ico) * -0.5);
  pointer-events: auto;
  cursor: default;
  transform: none !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.65));
  transition: filter 120ms ease;
  z-index: 2;
}
.owl-node-icon:hover {
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.75)) drop-shadow(0 0 5px rgb(255 217 138 / 0.55));
  z-index: 3;
}
/* Size tiers: cities read largest, then gateways/war zones, then POIs.
   Each tier only re-points --owl-ico; width/height/margins/padding follow. */
.owl-city-dot.owl-node-icon {
  --owl-ico: calc(40px * var(--owl-icon-scale, 1));
}
.owl-gateway-dot.owl-node-icon {
  --owl-ico: calc(34px * var(--owl-icon-scale, 1));
}
.owl-node-dot.owl-node-icon {
  --owl-ico: calc(31px * var(--owl-icon-scale, 1));
}
.owl-poi-dot.owl-node-icon {
  --owl-ico: calc(26px * var(--owl-icon-scale, 1));
}

/* Node search */
.owl-map-search-wrap {
  position: relative;
}
.owl-map-search {
  width: 168px;
  height: 28px;
  padding: 0 9px;
  background: rgb(10 8 6 / 0.7);
  border: 1px solid rgb(197 160 89 / 0.35);
  border-radius: 4px;
  color: #e8e2d4;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
}
.owl-map-search::placeholder {
  color: rgb(230 230 230 / 0.4);
}
.owl-map-search:focus {
  border-color: rgb(229 193 124 / 0.7);
  box-shadow: 0 0 0 2px rgb(229 193 124 / 0.15);
}
.owl-map-search-results {
  position: absolute;
  top: 32px;
  left: 0;
  width: 260px;
  max-height: 320px;
  overflow-y: auto;
  background: rgb(18 15 11 / 0.97);
  border: 1px solid rgb(197 160 89 / 0.4);
  border-radius: 5px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.6);
  z-index: 40;
  padding: 4px;
}
.owl-map-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
}
.owl-map-search-item:hover {
  background: rgb(197 160 89 / 0.14);
}
.owl-map-search-icon {
  width: 22px;
  height: 22px;
  flex: none;
}
.owl-map-search-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.owl-map-search-item-name {
  color: #e5c17c;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owl-map-search-item-sub {
  color: rgb(230 230 230 / 0.5);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owl-map-search-none {
  padding: 8px;
  color: rgb(230 230 230 / 0.5);
  font-size: 12.5px;
}

/* Legend kind icons */
.owl-legend-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Selected node: brighten its connections, dim the rest of the web */
.owl-map-selecting .owl-conn-svg line:not(.owl-conn-active) {
  opacity: 0.12;
}
.owl-conn-svg line.owl-conn-active {
  stroke: #ffd98a;
  stroke-width: 2.6;
  opacity: 1;
}
.owl-selected-node {
  filter: drop-shadow(0 0 6px rgb(255 217 138 / 0.9));
  z-index: 4;
}

/* Node info card (click a node → details + its connections) */
.owl-node-info {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  width: 232px;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  background: rgb(18 15 11 / 0.94);
  border: 1px solid rgb(197 160 89 / 0.45);
  border-radius: 6px;
  padding: 12px 12px 10px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.55);
  pointer-events: auto;
}
.owl-node-info-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: rgb(197 160 89 / 0.8);
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
}
.owl-node-info-close:hover {
  background: rgb(197 160 89 / 0.15);
  color: #e5c17c;
}
.owl-node-info-title {
  font-family: var(--chronicle-font-display);
  font-size: 17px;
  font-weight: 600;
  color: #e5c17c;
  padding-right: 20px;
  line-height: 1.2;
}
.owl-node-info-meta {
  font-size: 12px;
  color: rgb(229 193 124 / 0.65);
  margin-top: 2px;
}
.owl-node-info-rows {
  margin-top: 10px;
  display: grid;
  gap: 4px;
}
.owl-node-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
}
.owl-node-info-label {
  color: rgb(230 230 230 / 0.55);
}
.owl-node-info-value {
  color: #e8e2d4;
  font-family: var(--chronicle-font-mono);
}
.owl-node-info-conns {
  margin-top: 10px;
  border-top: 1px solid rgb(197 160 89 / 0.25);
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.owl-node-info-conn {
  background: rgb(197 160 89 / 0.12);
  border: 1px solid rgb(197 160 89 / 0.35);
  border-radius: 10px;
  color: #e5c17c;
  font-size: 0.75rem;
  padding: 2px 8px;
  cursor: pointer;
}
.owl-node-info-conn:hover {
  background: rgb(197 160 89 / 0.28);
}
.owl-node-info-more {
  font-size: 0.75rem;
  color: rgb(230 230 230 / 0.45);
  align-self: center;
}

/* Contribution-cost badge (bdolytics-style number on resource nodes) */
.owl-node-badge {
  position: absolute;
  left: calc(var(--owl-x) + 12px);
  top: calc(var(--owl-y) + 12px);
  margin: -8px 0 0 -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(12 10 7 / 0.85);
  border: 1px solid rgb(229 193 124 / 0.5);
  color: #e5c17c;
  font-family: var(--chronicle-font-mono);
  font-size: 0.75rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ── Mobile / narrow screens ──────────────────────────────────── */
@media (max-width: 52rem) {
  .owl-map-search-wrap {
    flex: 1 1 100%;
    order: -1; /* search on top of the toggles */
  }
  .owl-map-search {
    width: 100%;
  }
  .owl-map-search-results {
    width: 100%;
  }
  .owl-tool-btn,
  .owl-tool-select {
    min-height: 38px; /* thumb-sized touch targets */
  }
  .owl-heatmap-panel {
    padding-inline: 10px; /* more map, less chrome on phones */
  }
  .owl-heatmap-wrap {
    height: 58vh; /* tall map — a phone-screen postage stamp is useless */
    aspect-ratio: auto;
  }
  .owl-map-toolbar {
    flex-wrap: wrap;
  }
  .owl-scrubber {
    flex: 1 1 100%;
    order: -1; /* full-width timeline above play/speed/reset */
  }
  .owl-map-legend {
    flex-wrap: wrap;
    gap: 6px 12px;
  }
  .owl-node-info {
    top: 8px;
    right: 8px;
    width: calc(100% - 16px);
    max-height: 45%;
  }
}
@media (max-width: 30rem) {
  .owl-heatmap-wrap {
    height: 64vh;
  }
}

/* ── Fullscreen map ──────────────────────────────────────────── */
.owl-map-fs-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.owl-map-fs-btn .owl-ic-min {
  display: none;
}
.owl-map-fs-btn.is-fs-on .owl-ic-max {
  display: none;
}
.owl-map-fs-btn.is-fs-on .owl-ic-min {
  display: block;
}
.owl-heatmap-panel.owl-map-fullscreen {
  /* vw/vh (not inset:0): a transformed ancestor (the folio stage) becomes the
     containing block for fixed elements, so inset:0 would size to the whole
     page. Viewport units always mean the screen. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--owl-panel);
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.owl-map-fullscreen .owl-heatmap-wrap {
  flex: 1 1 0; /* basis 0 — the wrap takes exactly the panel's leftover */
  height: auto;
  aspect-ratio: auto;
  width: 100%;
  border: 0;
  border-radius: 0;
}
.owl-map-fullscreen .owl-node-info {
  max-height: 40%;
}
.owl-map-fullscreen .owl-tooltip {
  z-index: 130;
}

/* ── Token row removal animation ─────────────────────────────── */
.owl-token-row-removing {
  transition: opacity 0.3s ease, max-height 0.3s ease;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

/* ── War-link badge ───────────────────────────────────────────
   Small inline badge next to a war title indicating it has linked
   logger data from another session on the same date. */
.owl-war-link-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 0.5em;
  vertical-align: middle;
}

.owl-war-link-badge a {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.1em 0.45em;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--chronicle-gold);
  background: color-mix(in oklch, var(--chronicle-gold) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--chronicle-gold) 25%, transparent);
  border-radius: 0;
  text-decoration: none;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
  white-space: nowrap;
}

.owl-war-link-badge a:hover {
  color: var(--chronicle-gold-bright);
  background: color-mix(in oklch, var(--chronicle-gold) 18%, transparent);
}

/* ── Upload log modal ─────────────────────────────────────────
   The manual counterpart to the desktop client: a war log dropped in by hand,
   either the app's plain-text session export or a .json one. The dialog lives
   inside `.owl-page` so it inherits the same material recipe as the panels it
   covers — one sheet of ink, gold hairlines, square corners, mono for every
   machine value. It is the only overlay on the page, so the entry animation
   and the backdrop blur are allowed to be slightly more deliberate than the
   page's other transitions. */
.owl-upload-modal {
  inline-size: min(34rem, calc(100vw - var(--space-md)));
  max-block-size: calc(100vh - var(--space-lg));
  padding: 0;
  background: var(--owl-panel);
  border: 1px solid var(--owl-hairline-strong);
  box-shadow: var(--owl-shadow), 0 0 0 1px var(--chronicle-shadow-soft);
  color: var(--chronicle-text);
  overflow: hidden;
}

/* Closed dialogs must be invisible — the UA default display:none is beaten by
   the class rule above, so force it back off here. Only an [open] dialog gets
   the grid layout (set below). Without this the closed modal floats as a stray
   panel at the bottom of the page. */
.owl-upload-modal:not([open]) {
  display: none;
}

.owl-upload-modal[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.owl-upload-modal::backdrop {
  background: var(--chronicle-backdrop);
  backdrop-filter: blur(3px) saturate(0.85);
}

/* The dialog is only in the DOM tree while it matters, so the entry runs on
   [open] rather than on a class the script has to remember to remove. */
.owl-upload-modal[open] {
  animation: owl-upload-enter var(--dur-short) var(--ease-out);
}

.owl-upload-modal[open]::backdrop {
  animation: owl-upload-veil var(--dur-short) var(--ease-out);
}

@keyframes owl-upload-enter {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(0.5rem);
  }
}

@keyframes owl-upload-veil {
  from {
    opacity: 0;
  }
}

.owl-upload-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  max-block-size: 100%;
  min-block-size: 0;
}

/* ── Header: what this accepts ── */
.owl-upload-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border-block-end: 1px solid var(--owl-hairline);
}

.owl-upload-head-copy {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
}

.owl-upload-header h2 {
  color: var(--chronicle-gold-bright);
  font-size: 1.35rem;
  line-height: 1.15;
}

.owl-upload-subtitle {
  color: var(--chronicle-text-soft);
  font-size: 0.78rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* The line shape is the whole contract of the text format — printed as the
   machine value it is, wrapping rather than scrolling on a narrow phone. */
.owl-upload-sample {
  padding: var(--space-2xs) var(--space-xs);
  background: var(--owl-well);
  border-inline-start: 2px solid var(--owl-hairline-strong);
  color: var(--chronicle-gold);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.owl-upload-close {
  flex: 0 0 auto;
  min-inline-size: 1.9rem;
  min-block-size: 1.9rem;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  color: var(--chronicle-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

.owl-upload-close:hover:not(:disabled) {
  border-color: var(--owl-hairline);
  color: var(--chronicle-gold-bright);
}

/* ── Body: the form itself ── */
.owl-upload-fields {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: var(--space-md);
  max-block-size: 55vh;
  min-block-size: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.owl-upload-fields .owl-field {
  gap: var(--space-2xs);
}

.owl-upload-fields :is(input[type="text"], input[type="date"], textarea) {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 2.4rem;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--owl-well);
  border: 1px solid var(--owl-rule);
  color: var(--chronicle-text);
  font-family: var(--font-outlier);
  font-size: 0.78rem;
  transition: border-color var(--dur-short) var(--ease-out);
}

.owl-upload-fields textarea {
  min-block-size: 4rem;
  line-height: 1.55;
  resize: vertical;
}

.owl-upload-fields :is(input, textarea):hover {
  border-color: var(--owl-hairline-strong);
}

.owl-upload-fields :is(input, textarea):focus-visible {
  border-color: var(--chronicle-gold);
  outline: 2px solid var(--chronicle-focus);
  outline-offset: 2px;
}

.owl-upload-fields ::placeholder {
  color: var(--chronicle-text-muted);
  opacity: 1;
}

.owl-upload-fields input[type="file"] {
  inline-size: 100%;
  min-inline-size: 0;
  padding: var(--space-2xs);
  background: var(--owl-well);
  border: 1px dashed var(--owl-rule);
  color: var(--chronicle-text-soft);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  transition: border-color var(--dur-short) var(--ease-out);
}

.owl-upload-fields input[type="file"]:hover {
  border-color: var(--owl-hairline-strong);
}

.owl-upload-fields input[type="file"]::file-selector-button {
  margin-inline-end: var(--space-xs);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--owl-panel-raised);
  border: 1px solid var(--owl-hairline-strong);
  border-radius: 0;
  color: var(--chronicle-gold-bright);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.owl-upload-fields input[type="file"]::file-selector-button:hover {
  background: color-mix(in oklch, var(--chronicle-gold) 16%, transparent);
}

/* Hints sit under the control they qualify, quiet enough that the label above
   still reads as the field's name. */
.owl-upload-hint {
  color: var(--chronicle-text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.owl-upload-filename {
  color: var(--chronicle-gold);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

/* ── Failure, stated in place ──
   The server's rejection reason is the most useful sentence in this dialog, so
   it is given its own ruled band instead of a toast that scrolls away. */
.owl-upload-form .owl-upload-error {
  /* `.owl-page p` zeroes every margin on the page — outrank it, this band
     needs to inset from the ruled edges. */
  margin-inline: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: color-mix(in oklch, var(--owl-death) 12%, transparent);
  border-inline-start: 2px solid color-mix(in oklch, var(--owl-death) 75%, transparent);
  color: color-mix(in oklch, var(--owl-death) 30%, var(--chronicle-text));
  font-size: 0.75rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.owl-upload-error[hidden],
.owl-upload-filename[hidden] {
  display: none;
}

/* ── Footer ── */
.owl-upload-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-block-start: 1px solid var(--owl-hairline);
}

.owl-upload-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-inline-size: 9rem;
}

.owl-upload-actions button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* The spinner only exists while the request is in flight; collapsing it to
   zero width keeps the button from jumping when it appears. */
.owl-upload-spinner {
  inline-size: 0;
  block-size: 0.75rem;
  border: 2px solid transparent;
  border-block-start-color: currentcolor;
  border-inline-start-color: currentcolor;
  border-radius: 50%;
  opacity: 0;
}

.owl-upload-form-busy .owl-upload-spinner {
  inline-size: 0.75rem;
  opacity: 1;
  animation: owl-upload-spin 0.7s linear infinite;
}

@keyframes owl-upload-spin {
  to {
    transform: rotate(1turn);
  }
}

.owl-upload-json-btn {
  justify-self: start;
  margin-block-start: var(--space-2xs);
}

/* Below this width the footer has nothing left to divide: the two buttons
   take the full measure and stack in reading order. */
@media (max-width: 30rem) {
  .owl-upload-actions {
    flex-direction: column-reverse;
  }

  .owl-upload-actions .button {
    inline-size: 100%;
  }

  .owl-upload-header h2 {
    font-size: 1.2rem;
  }
}

/* The entry animation, the veil, and the spinner are all decorative; the
   dialog is just as usable arriving instantly with a static mark. */
@media (prefers-reduced-motion: reduce) {
  .owl-upload-modal[open],
  .owl-upload-modal[open]::backdrop {
    animation: none;
  }

  .owl-upload-form-busy .owl-upload-spinner {
    animation: none;
    border-color: currentcolor;
    border-block-start-color: transparent;
  }
}

/* Interactive event ledger and map selection states. */
.owl-feed-row[role="button"] {
  cursor: pointer;
  outline: 0;
  transition: background var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}

.owl-feed-row[role="button"]:hover,
.owl-feed-row[role="button"]:focus-visible,
.owl-feed-row[role="button"].is-selected {
  background: color-mix(in oklch, var(--chronicle-gold) 10%, transparent);
  box-shadow: inset 2px 0 0 var(--chronicle-gold);
}

.owl-kill-dot.is-selected {
  z-index: 8;
  outline: 2px solid var(--chronicle-gold-bright);
  outline-offset: 3px;
  transform: scale(var(--owl-selected-dot-screen-scale, 2.2));
}

.owl-map-filter-group {
  display: inline-flex;
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--chronicle-gold-line);
}

.owl-map-filter-group .owl-tool-btn {
  border: 0;
}

/* ── Dedicated Owl Logs map shell ──────────────────────────────
   The map route is a work surface, not a document of cards. Every viewport
   rule stays beneath the map-only wrapper so archive and detail pages retain
   their normal flow. */
.owl-map-shell-body {
  min-height: 100dvh;
  background: var(--chronicle-void);
}

.owl-map-shell {
  --owl-map-rail-width: 22rem;
  --owl-map-column-gap: 0;
  display: grid;
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
}

.owl-map-shell .owl-map-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--owl-map-column-gap);
  min-height: 0;
}

/* The existing map-page controller owns these desktop collapse states. */
.owl-map-shell.owl-map-controls-collapsed .owl-map-layout,
.owl-map-shell.owl-recent-wars-collapsed .owl-map-layout {
  --owl-map-rail-width: 15rem;
}

.owl-map-shell.owl-map-controls-collapsed.owl-recent-wars-collapsed .owl-map-layout {
  --owl-map-rail-width: 9rem;
}

/* The rail floats over the map so the world art runs edge to edge. Only the
   rail's own panels take pointer input; its gaps stay transparent to the map. */
.owl-map-shell .owl-map-rail {
  position: absolute;
  z-index: 3;
  inset-block: var(--space-sm);
  inset-inline-start: var(--space-sm);
  display: flex;
  width: var(--owl-map-rail-width);
  min-width: 0;
  min-height: 0;
  padding: 0;
  flex-direction: column;
  gap: var(--space-xs);
  background: transparent;
  border: 0;
  overflow: hidden;
  pointer-events: none;
}

.owl-map-shell .owl-map-rail-toggle,
.owl-map-shell .owl-map-rail-panel {
  pointer-events: auto;
}

.owl-map-shell .owl-map-rail-toggle {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--owl-panel-raised);
  border: 1px solid var(--owl-hairline);
  color: var(--chronicle-gold-bright);
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: start;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}

.owl-map-shell .owl-map-rail-toggle::after {
  content: "⌃";
  flex: 0 0 auto;
  color: var(--chronicle-gold-deep);
  transition: transform var(--dur-short) var(--ease-out);
}

.owl-map-shell .owl-map-rail-toggle.is-collapsed::after {
  transform: rotate(180deg);
}

.owl-map-shell .owl-map-rail-toggle:hover,
.owl-map-shell .owl-map-rail-toggle:focus-visible {
  background: color-mix(in oklch, var(--chronicle-gold) 9%, var(--owl-panel-raised));
  border-color: var(--chronicle-gold-line);
  color: var(--chronicle-text);
}

.owl-map-shell .owl-map-rail-panel {
  display: block;
  min-width: 0;
  padding: var(--space-sm);
  background: var(--owl-panel);
  border: 1px solid var(--owl-hairline);
  box-shadow: var(--owl-shadow), var(--owl-inner-lip);
  overflow: hidden auto;
}

/* Rail polish: the controls read as one tidy column of equal-width tools
   instead of a ragged wrap, and the cannon block reads as a subsection. */
.owl-map-shell .owl-map-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3xs);
  align-items: stretch;
}

.owl-map-shell .owl-map-tools > .owl-map-search-wrap,
.owl-map-shell .owl-map-tools > .owl-map-filter-group,
.owl-map-shell .owl-map-tools > .owl-cannon-toggle {
  grid-column: 1 / -1;
}

.owl-map-shell .owl-map-tools > .owl-tool-select {
  grid-column: span 2;
  width: 100%;
}

.owl-map-shell .owl-map-search {
  width: 100%;
  height: 2rem;
}

.owl-map-shell .owl-map-filter-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.owl-map-shell .owl-tool-btn {
  justify-content: center;
  padding-inline: var(--space-2xs);
  text-align: center;
}

.owl-map-shell .owl-cannon-panel {
  margin-block-start: var(--space-sm);
  padding: var(--space-sm) 0 0;
  border-block-start: 1px solid var(--owl-hairline);
  background: none;
  gap: var(--space-2xs);
}

.owl-map-shell .owl-cannon-head h4 {
  font-size: 0.95rem;
}

.owl-map-shell .owl-cannon-note,
.owl-map-shell .owl-cannon-status {
  font-size: 0.75rem;
  line-height: 1.5;
}

.owl-map-shell .owl-cannon-controls label {
  width: 100%;
  justify-content: space-between;
}

.owl-map-shell .owl-cannon-controls input {
  width: 5.5rem;
}

.owl-map-shell .owl-map-rail-panel.is-collapsed[hidden],
.owl-map-shell .owl-map-rail-panel[hidden] {
  display: none;
}

.owl-map-shell .owl-map-rail-panel[data-owl-map-controls] {
  flex: 0 1 auto;
}

.owl-map-shell .owl-map-rail-panel[data-owl-recent-wars] {
  display: flex;
  min-height: 0;
  flex: 1 1 0;
  flex-direction: column;
}

.owl-map-shell .owl-map-rail-panel[data-owl-recent-wars][hidden] {
  display: none;
}

.owl-map-shell .owl-recent-wars-list {
  display: grid;
  min-width: 0;
  min-height: 0;
  gap: var(--space-2xs);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--chronicle-gold-line) transparent;
}

.owl-map-shell .owl-recent-war {
  min-width: 0;
  border-inline-start: 2px solid var(--owl-hairline);
}

.owl-map-shell .owl-recent-war.is-active {
  border-inline-start-color: var(--chronicle-gold-bright);
  background: color-mix(in oklch, var(--chronicle-gold) 8%, transparent);
}

.owl-map-shell .owl-recent-war-link {
  display: grid;
  min-width: 0;
  gap: var(--space-3xs);
  padding: var(--space-sm);
  color: inherit;
  text-decoration: none;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}

.owl-map-shell .owl-recent-war-link:hover,
.owl-map-shell .owl-recent-war-link:focus-visible {
  background: color-mix(in oklch, var(--chronicle-gold) 10%, transparent);
  color: var(--chronicle-gold-bright);
}

.owl-map-shell .owl-recent-war-link strong,
.owl-map-shell .owl-recent-war-link .owl-war-meta,
.owl-map-shell .owl-recent-war-link .owl-war-stats {
  min-width: 0;
  overflow-wrap: anywhere;
}

.owl-map-shell .owl-recent-war-link .owl-war-view {
  justify-self: start;
  margin-block-start: var(--space-2xs);
}

.owl-map-shell .owl-map-main {
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.owl-map-shell .owl-map-main > .owl-map-surface {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.owl-map-shell .owl-map-surface .owl-map-toolbar,
.owl-map-shell .owl-map-surface .owl-map-legend {
  flex: 0 0 auto;
}

/* The floating rail owns the map's inline start, so bottom-anchored map chrome
   starts clear of it instead of hiding behind it. */
.owl-map-shell .owl-map-surface .owl-map-legend {
  inset-inline-start: calc(var(--owl-map-rail-width) + var(--space-md));
}

/* The rail's panels run to the bottom of the map column — the Recent Wars list
   sits directly over the timeline row — so the toolbar clears the same column
   or its leftmost controls (Play) are covered by the panel. */
.owl-map-shell .owl-map-surface .owl-map-toolbar {
  padding-inline-start: calc(var(--owl-map-rail-width) + var(--space-md));
}

.owl-map-shell .owl-map-surface .owl-heatmap-wrap {
  width: 100%;
  min-height: 0;
  margin-inline: 0;
  aspect-ratio: auto;
  flex: 1 1 auto;
}

.owl-map-shell .owl-map-unavailable-state {
  display: grid;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  align-content: center;
  justify-items: start;
}

@media (max-width: 64rem) {
  .owl-map-shell {
    --owl-map-rail-width: 18rem;
  }

  .owl-map-shell.owl-map-controls-collapsed .owl-map-layout,
  .owl-map-shell.owl-recent-wars-collapsed .owl-map-layout {
    --owl-map-rail-width: 13rem;
  }
}

@media (max-width: 48rem) {
  .owl-map-shell-body,
  .owl-map-shell {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .owl-map-shell .owl-map-layout,
  .owl-map-shell.owl-map-controls-collapsed .owl-map-layout,
  .owl-map-shell.owl-recent-wars-collapsed .owl-map-layout,
  .owl-map-shell.owl-map-controls-collapsed.owl-recent-wars-collapsed .owl-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    height: 100%;
    gap: 0;
  }

  .owl-map-shell .owl-map-main,
  .owl-map-shell .owl-map-main > .owl-map-surface {
    width: 100%;
    min-width: 0;
    height: 100%;
  }

  .owl-map-shell .owl-map-surface .owl-map-legend {
    inset-inline-start: var(--space-sm);
  }

  /* Below the rail breakpoint the rail is a top drawer, not a column, so the
     toolbar takes the full width again. */
  .owl-map-shell .owl-map-surface .owl-map-toolbar {
    padding-inline-start: 0;
  }

  .owl-map-shell .owl-map-rail {
    position: absolute;
    z-index: 2;
    inset: var(--space-sm) var(--space-sm) auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    padding: 0;
    gap: var(--space-2xs);
    background: transparent;
    border: 0;
    overflow: visible;
    pointer-events: none;
  }

  .owl-map-shell .owl-map-rail-toggle {
    min-height: 2.25rem;
    padding: var(--space-2xs) var(--space-sm);
    font-size: 0.75rem;
    pointer-events: auto;
  }

  .owl-map-shell .owl-map-rail-panel,
  .owl-map-shell .owl-map-rail-panel[data-owl-map-controls],
  .owl-map-shell .owl-map-rail-panel[data-owl-recent-wars] {
    position: fixed;
    z-index: 3;
    inset: calc(var(--space-sm) + 2.5rem) var(--space-sm) var(--space-sm);
    display: none !important;
    min-height: 0;
    max-height: none;
    padding: var(--space-md);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .owl-map-shell.owl-map-drawer-active-controls .owl-map-rail-panel[data-owl-map-controls] {
    display: block !important;
    pointer-events: auto;
  }

  .owl-map-shell.owl-map-drawer-active-controls .owl-map-rail-panel[data-owl-map-controls] :is(button, input, select, textarea, a),
  .owl-map-shell.owl-map-drawer-active-wars .owl-map-rail-panel[data-owl-recent-wars] .owl-recent-wars-list,
  .owl-map-shell.owl-map-drawer-active-wars .owl-map-rail-panel[data-owl-recent-wars] .owl-recent-wars-list * {
    pointer-events: auto;
  }

  .owl-map-shell.owl-map-drawer-active-wars .owl-map-rail-panel[data-owl-recent-wars] {
    display: flex !important;
    pointer-events: auto;
  }

  .owl-map-shell .owl-map-surface .owl-heatmap-wrap {
    min-height: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Stats dashboard · /stats?guild=…
   Chronicle-native analytics surface: warm ink panels, hairline gold rules,
   serif display headings, mono uppercase eyebrows. Every rule is scoped under
   the `.sd` wrapper so nothing leaks into the rest of the archive.
   Charts are pure CSS — conic-gradient dials/donuts, flex bars, column sparks.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Registered properties ─────────────────────────────────────
   `--sd-value` is the dial's target (0–100), written inline by the renderer.
   Because an inline declaration always wins the cascade it can never be
   animated from the stylesheet, so the paint reads `--sd-sweep`, a derived
   property that the cascade *can* move. Registering both as <number> keeps a
   malformed value from poisoning the calc() and gives `--sd-sweep` a smooth
   interpolation instead of a discrete jump. */
@property --sd-value {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

@property --sd-sweep {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

/* ── Root wrapper & shared surface recipe ──────────────────────
   The surface tokens live here rather than being retyped per card so the
   panels, boards, metrics, kpis and sparks stay one material. */
.sd {
  --sd-surface:
    linear-gradient(180deg,
      color-mix(in oklch, var(--chronicle-ink-raised) 94%, transparent),
      color-mix(in oklch, var(--chronicle-ink) 96%, transparent));
  --sd-surface-hover:
    linear-gradient(180deg,
      color-mix(in oklch, var(--chronicle-ink-soft) 90%, transparent),
      color-mix(in oklch, var(--chronicle-ink-raised) 96%, transparent));
  --sd-hairline: color-mix(in oklch, var(--chronicle-gold) 24%, transparent);
  --sd-shadow: 0 1px 2px var(--chronicle-shadow-soft), 0 12px 30px -22px var(--chronicle-shadow);
  --sd-inner-lip: inset 0 1px 0 color-mix(in oklch, var(--chronicle-gold) 12%, transparent);
  --sd-win: var(--chronicle-success);
  --sd-loss: var(--chronicle-danger);
  --sd-unknown: color-mix(in oklch, var(--chronicle-text-muted) 60%, var(--chronicle-ink-soft));
  --sd-taken: color-mix(in oklch, var(--chronicle-danger) 70%, var(--chronicle-ink-soft));
  --sd-bar-dur: 900ms;

  display: grid;
  gap: var(--space-xl);
  min-width: 0;
  color: var(--chronicle-text);
  font-family: var(--font-body);
}

.sd :is(p, h2, h3, ul, ol, li, figure) {
  margin: 0;
}

.sd :is(ul, ol) {
  padding: 0;
  list-style: none;
}

/* ── Section shell ─────────────────────────────────────────────
   A section is a ruled chapter, not a box: the head sits above a gold hairline
   and the body carries the panels. */
.sd-section {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.sd-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--sd-hairline);
}

.sd-section-head > div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.sd-section-eyebrow {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chronicle-gold-deep);
}

.sd-section-title {
  font-family: var(--font-display);
  /* Chronicle sizes bare h2 with a 2.7rem clamp meant for page chapters; a
     dashboard section head needs a tighter step. */
  font-size: clamp(1.15rem, 0.98rem + 0.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--chronicle-gold-bright);
}

.sd-section-sub {
  max-width: 34rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--chronicle-text-muted);
  text-wrap: pretty;
}

.sd-section-body {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

/* ── Reveal on scroll ──────────────────────────────────────────
   Reveal is strictly opt-in. The page script sets html[data-sd-reveal="on"]
   only when it can genuinely drive the observer (IntersectionObserver present
   and reduced motion not requested); otherwise it flags every section visible
   and sets nothing. So the *hidden* state is gated on that attribute and a
   bare `.sd-reveal` paints in full — no-JS clients get the dashboard, not a
   blank page. Every collapsed bar and dial below follows the same polarity.
   `--sd-index` (set by the script on each section, and by the renderers on
   cards and rows) staggers siblings instead of snapping them in together. */
html[data-sd-reveal="on"] .sd-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-long) var(--ease-out),
    transform var(--dur-long) var(--ease-out);
  transition-delay: calc(var(--sd-index, 0) * 60ms);
}

html[data-sd-reveal="on"] .sd-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Cards rise in sequence behind their section using the per-card --sd-index.
   An animation rather than a transition, so the stagger delay cannot leak
   into the hover transitions declared on the same elements. */
html[data-sd-reveal="on"] .sd-reveal:not(.is-visible) :is(.sd-metric, .sd-spark, .sd-board) {
  opacity: 0;
}

html[data-sd-reveal="on"] .sd-reveal.is-visible :is(.sd-metric, .sd-spark, .sd-board) {
  animation: sd-rise var(--dur-long) var(--ease-out) calc(var(--sd-index, 0) * 60ms) both;
}

@keyframes sd-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Card recipe ───────────────────────────────────────────────
   One material for every panel. `--sd-accent` lets a board tint its own
   hairline; it falls back to chronicle gold. */
.sd-card,
.sd-board,
.sd-metric,
.sd-kpi,
.sd-spark {
  position: relative;
  min-width: 0;
  padding: var(--space-md);
  background: var(--sd-surface);
  border: 1px solid var(--chronicle-rule-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--sd-shadow), var(--sd-inner-lip);
  transition:
    background var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
}

/* The hover affordance is a gold hairline drawn along the top edge — the same
   ruled gesture the folio mastheads use, rather than a glow. */
.sd-card::before,
.sd-board::before,
.sd-metric::before,
.sd-kpi::before,
.sd-spark::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg,
    transparent,
    var(--sd-accent, var(--chronicle-gold)) 22%,
    var(--sd-accent, var(--chronicle-gold)) 78%,
    transparent);
  opacity: 0;
  transform: scaleX(0.5);
  transition:
    opacity var(--dur-short) var(--ease-out),
    transform var(--dur-long) var(--ease-out);
}

.sd-card:hover,
.sd-board:hover,
.sd-metric:hover,
.sd-kpi:hover,
.sd-spark:hover {
  background: var(--sd-surface-hover);
  border-color: color-mix(in oklch, var(--sd-accent, var(--chronicle-gold)) 40%, transparent);
}

.sd-card:hover::before,
.sd-board:hover::before,
.sd-metric:hover::before,
.sd-kpi:hover::before,
.sd-spark:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

/* ── Generic grids ─────────────────────────────────────────────
   `minmax(0, 1fr)` everywhere so long guild names cannot blow the tracks out. */
.sd-grid {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.sd-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── Empty state ───────────────────────────────────────────────
   States why the panel is blank instead of leaving a hole. */
.sd-empty {
  display: grid;
  place-items: center;
  gap: 0.4rem;
  min-height: 7rem;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  border: 1px dashed color-mix(in oklch, var(--chronicle-gold) 26%, transparent);
  border-radius: var(--radius-lg);
}

.sd-empty strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--chronicle-gold);
}

.sd-empty span {
  max-width: 26rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--chronicle-text-muted);
}

/* ── Hero ──────────────────────────────────────────────────────── */
.sd-hero {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background:
    radial-gradient(120% 140% at 0% 0%,
      color-mix(in oklch, var(--chronicle-gold) 8%, transparent),
      transparent 58%),
    var(--sd-surface);
  border: 1px solid var(--chronicle-gold-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--sd-shadow), var(--sd-inner-lip);
}

.sd-hero-identity {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--sd-hairline);
}

.sd-hero-crest {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3.4rem;
  height: 3.4rem;
  overflow: hidden;
  background: var(--chronicle-ink);
  border: 1px solid var(--chronicle-gold-line);
  border-radius: 50%;
  object-fit: cover;
  transition: transform var(--dur-long) var(--ease-out);
}

.sd-hero:hover .sd-hero-crest {
  transform: scale(1.05);
}

.sd-hero-crest img,
.sd-hero-crest svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No emblem on file — the guild initial stands in as a struck monogram. */
.sd-hero-crest-fallback {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--chronicle-gold-bright);
  text-transform: uppercase;
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--chronicle-gold) 14%, transparent),
      transparent),
    var(--chronicle-ink);
}

.sd-hero-name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.08rem + 0.95vw, 1.8rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--chronicle-text);
  overflow-wrap: anywhere;
}

.sd-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem var(--space-sm);
  margin-top: 0.2rem;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chronicle-text-muted);
  font-variant-numeric: tabular-nums;
}

.sd-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  min-width: 0;
}

/* ── Metric tiles ──────────────────────────────────────────────── */
.sd-metric {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.sd-metric--gold { --sd-accent: var(--chronicle-gold-bright); }
.sd-metric--win { --sd-accent: var(--sd-win); }
.sd-metric--loss { --sd-accent: var(--sd-loss); }
.sd-metric--neutral { --sd-accent: var(--chronicle-rule); }

.sd-metric-icon {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  margin-bottom: 0.15rem;
  color: var(--sd-accent, var(--chronicle-gold));
  background: color-mix(in oklch, var(--sd-accent, var(--chronicle-gold)) 14%, transparent);
  border-radius: var(--radius-sm);
}

.sd-metric-icon svg,
.sd-metric-icon img {
  width: 0.95rem;
  height: 0.95rem;
  object-fit: contain;
}

.sd-metric-label {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chronicle-text-muted);
}

.sd-metric-value {
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 1.05rem + 0.6vw, 1.55rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--chronicle-text);
  font-variant-numeric: tabular-nums;
}

.sd-metric-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--chronicle-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Trend chips ───────────────────────────────────────────────
   Polarity, not direction, decides the colour: an up-arrow on deaths is bad,
   so `[data-sd-polarity="inverted"]` swaps the up/down palettes. */
.sd-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.08rem 0.36rem;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.5;
  border: 1px solid currentcolor;
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}

.sd-trend-arrow {
  font-size: 0.6em;
  line-height: 1;
}

.sd-trend--up,
.sd-trend--down[data-sd-polarity="inverted"],
[data-sd-polarity="inverted"] .sd-trend--down {
  color: color-mix(in oklch, var(--sd-win) 62%, var(--chronicle-gold-bright));
  background: color-mix(in oklch, var(--sd-win) 14%, transparent);
}

.sd-trend--down,
.sd-trend--up[data-sd-polarity="inverted"],
[data-sd-polarity="inverted"] .sd-trend--up {
  color: color-mix(in oklch, var(--sd-loss) 72%, var(--chronicle-text));
  background: color-mix(in oklch, var(--sd-loss) 14%, transparent);
}

.sd-trend--flat,
.sd-trend--flat[data-sd-polarity="inverted"],
[data-sd-polarity="inverted"] .sd-trend--flat {
  color: var(--chronicle-text-muted);
  background: color-mix(in oklch, var(--chronicle-text-muted) 10%, transparent);
}

/* ── Performance: dial · win-loss · KPIs ───────────────────────── */
.sd-perf {
  display: grid;
  grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: var(--space-lg);
  min-width: 0;
  padding: var(--space-lg);
  background: var(--sd-surface);
  border: 1px solid var(--chronicle-rule-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--sd-shadow), var(--sd-inner-lip);
}

/* Pure-CSS circular progress: a conic sweep with an overlaid hole. */
.sd-dial {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(8.5rem, 13vw, 10.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  /* Fallback for engines without registered custom properties: the sweep
     cannot interpolate there, so it is painted at its final value outright. */
  --sd-sweep: var(--sd-value, 0);
  background:
    conic-gradient(from -90deg,
      var(--chronicle-gold) calc(var(--sd-sweep) * 1%),
      var(--chronicle-rule-soft) 0);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--chronicle-gold) 18%, transparent),
    0 8px 24px -18px var(--chronicle-shadow);
}

/* Only engines that actually register `--sd-value` can animate the sweep; an
   unknown @supports function evaluates false, which leaves the static paint
   above in place. The base value stays final, so the dial is correct even when
   the reveal script never runs. */
@supports at-rule(@property) {
  html[data-sd-reveal="on"] .sd-dial {
    transition: --sd-sweep 1100ms var(--ease-out) 140ms;
  }

  html[data-sd-reveal="on"] .sd-reveal:not(.is-visible) .sd-dial {
    --sd-sweep: 0;
  }
}

.sd-dial-inner {
  position: absolute;
  inset: 12%;
  display: grid;
  place-items: center;
  gap: 0.1rem;
  text-align: center;
  background:
    radial-gradient(100% 100% at 50% 0%,
      color-mix(in oklch, var(--chronicle-ink-soft) 80%, transparent),
      var(--chronicle-ink) 70%);
  border: 1px solid var(--chronicle-rule-soft);
  border-radius: 50%;
}

.sd-dial-value {
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--chronicle-gold-bright);
  font-variant-numeric: tabular-nums;
}

.sd-dial-label {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chronicle-text-muted);
}

/* Win / loss / unknown split ------------------------------------------------ */
.sd-wl {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}

.sd-wl-bar {
  display: flex;
  overflow: hidden;
  height: 0.7rem;
  background: color-mix(in oklch, var(--chronicle-ink) 80%, transparent);
  border: 1px solid var(--chronicle-rule-soft);
  border-radius: var(--radius-full);
}

.sd-wl-seg {
  flex: 0 0 auto;
  width: calc(var(--sd-pct, 0) * 1%);
  height: 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

html[data-sd-reveal="on"] .sd-wl-seg {
  transition: width var(--sd-bar-dur) var(--ease-out) 120ms;
}

html[data-sd-reveal="on"] .sd-reveal:not(.is-visible) .sd-wl-seg {
  width: 0;
}

.sd-wl-seg--win {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--sd-win) 74%, var(--chronicle-gold)),
    var(--sd-win));
}

.sd-wl-seg--loss {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--sd-loss) 80%, black),
    var(--sd-loss));
}

.sd-wl-seg--unknown {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--sd-unknown) 70%, black),
    var(--sd-unknown));
}

.sd-wl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem var(--space-md);
}

.sd-wl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--chronicle-text-soft);
  font-variant-numeric: tabular-nums;
}

.sd-swatch {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--sd-color, var(--chronicle-rule-soft));
  border-radius: 2px;
}

.sd-swatch[data-sd-result="win"] { background: var(--sd-win); }
.sd-swatch[data-sd-result="loss"] { background: var(--sd-loss); }
.sd-swatch[data-sd-result="unknown"] { background: var(--sd-unknown); }

/* KPI row ------------------------------------------------------------------- */
.sd-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--space-sm);
  min-width: 0;
}

.sd-kpi {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  padding: var(--space-sm);
}

.sd-kpi-label {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chronicle-text-muted);
}

.sd-kpi-value {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--chronicle-text);
  font-variant-numeric: tabular-nums;
}

.sd-kpi-foot {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--chronicle-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Sparklines ────────────────────────────────────────────────── */
.sd-sparks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  min-width: 0;
}

.sd-spark {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.sd-spark-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  min-width: 0;
}

.sd-spark-label {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chronicle-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-spark-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--chronicle-gold-bright);
  font-variant-numeric: tabular-nums;
}

.sd-spark-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 3.1rem;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--chronicle-rule-soft);
}

.sd-spark-bar {
  flex: 1 1 0;
  min-width: 2px;
  /* A zero-sample column still needs a tick so the series reads as continuous. */
  min-height: 2px;
  height: calc(var(--sd-h, 0) * 1%);
  background: linear-gradient(180deg,
    var(--chronicle-gold-bright),
    var(--chronicle-gold-deep));
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform-origin: bottom center;
}

html[data-sd-reveal="on"] .sd-spark-bar {
  transition: transform 620ms var(--ease-out);
  transition-delay: calc(var(--sd-index, 0) * 35ms);
}

html[data-sd-reveal="on"] .sd-reveal:not(.is-visible) .sd-spark-bar {
  transform: scaleY(0);
}

.sd-spark-bar--win {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--sd-win) 70%, var(--chronicle-gold-bright)),
    var(--sd-win));
}

.sd-spark-bar--loss {
  background: linear-gradient(180deg,
    var(--sd-loss),
    color-mix(in oklch, var(--sd-loss) 66%, black));
}

.sd-spark-bar--unknown {
  background: linear-gradient(180deg,
    var(--sd-unknown),
    color-mix(in oklch, var(--sd-unknown) 60%, black));
}

.sd-spark-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--chronicle-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Verdicts read the series so the reader is not left to infer the direction. */
.sd-verdict {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.34rem;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid currentcolor;
  border-radius: var(--radius-sm);
}

.sd-verdict--improving {
  color: color-mix(in oklch, var(--sd-win) 62%, var(--chronicle-gold-bright));
  background: color-mix(in oklch, var(--sd-win) 14%, transparent);
}

.sd-verdict--declining {
  color: color-mix(in oklch, var(--sd-loss) 72%, var(--chronicle-text));
  background: color-mix(in oklch, var(--sd-loss) 14%, transparent);
}

.sd-verdict--steady {
  color: var(--chronicle-gold);
  background: var(--chronicle-gold-wash);
}

.sd-verdict--insufficient {
  color: var(--chronicle-text-muted);
  background: color-mix(in oklch, var(--chronicle-text-muted) 10%, transparent);
}

/* ── Ranking boards ────────────────────────────────────────────── */
.sd-boards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  min-width: 0;
}

.sd-board {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.sd-board-head {
  display: grid;
  gap: 0.1rem;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--chronicle-rule-soft);
}

.sd-board-eyebrow {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chronicle-gold-deep);
}

.sd-board-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--chronicle-text);
}

.sd-board-unit {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chronicle-text-muted);
}

.sd-board-list {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.sd-rank-row {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  padding: 0.34rem 0 0.42rem;
  border-bottom: 1px solid color-mix(in oklch, var(--chronicle-rule-soft) 55%, transparent);
}

.sd-rank-row:last-child {
  border-bottom: none;
}

.sd-rank-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--chronicle-text-muted);
  background: color-mix(in oklch, var(--chronicle-ink) 70%, transparent);
  border: 1px solid var(--chronicle-rule-soft);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}

.sd-rank-badge svg {
  width: 0.7rem;
  height: 0.7rem;
}

.sd-rank-badge--1 {
  color: var(--chronicle-paper-ink);
  background: linear-gradient(160deg, var(--chronicle-gold-bright), var(--chronicle-gold-deep));
  border-color: var(--chronicle-gold-bright);
}

.sd-rank-badge--2 {
  color: var(--chronicle-gold-bright);
  border-color: var(--chronicle-gold-line);
}

.sd-rank-badge--3 {
  color: var(--chronicle-gold);
  border-color: color-mix(in oklch, var(--chronicle-gold) 34%, transparent);
}

.sd-rank-avatar,
.sd-rank-avatar-blank {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1px solid var(--chronicle-rule-soft);
  object-fit: cover;
}

.sd-rank-avatar-blank {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--chronicle-gold);
  background: var(--chronicle-ink);
  text-transform: uppercase;
}

.sd-rank-name {
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--chronicle-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-rank-detail {
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--chronicle-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Robust whether the renderer nests the detail inside .sd-rank-name or emits
   it as a fifth child: as a direct child it tucks under the name instead of
   auto-placing into the badge column. */
.sd-rank-row > .sd-rank-detail {
  grid-column: 3 / 4;
  margin-top: -0.1rem;
}

.sd-rank-value {
  justify-self: end;
  font-family: var(--font-outlier);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--chronicle-gold-bright);
  font-variant-numeric: tabular-nums;
}

/* A hairline share bar pinned to the row's baseline — magnitude without a
   second column of chrome. */
.sd-rank-bar {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -1px;
  height: 2px;
  width: calc(var(--sd-pct, 0) * 1%);
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--chronicle-gold) 45%, transparent),
    var(--chronicle-gold-bright));
  border-radius: var(--radius-full);
  transform-origin: left center;
}

html[data-sd-reveal="on"] .sd-rank-bar {
  transition: transform var(--sd-bar-dur) var(--ease-out);
  transition-delay: calc(var(--sd-index, 0) * 45ms);
}

html[data-sd-reveal="on"] .sd-reveal:not(.is-visible) .sd-rank-bar {
  transform: scaleX(0);
}

/* ── Damage ────────────────────────────────────────────────────── */
.sd-dmg {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  background: var(--sd-surface);
  border: 1px solid var(--chronicle-rule-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--sd-shadow), var(--sd-inner-lip);
}

.sd-dmg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--chronicle-rule-soft);
}

.sd-dmg-row {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding-block: 0.2rem;
}

.sd-dmg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  min-width: 0;
}

.sd-dmg-name {
  /* Absorbs the slack so the name sits beside the icon and the ratio stays
     pinned right, instead of space-between stranding it mid-row. */
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--chronicle-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-dmg-ratio {
  flex-shrink: 0;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--chronicle-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Two columns: the rail (drawn as ::before so the fill can overlap it) and the
   figure. The figure used to live inside the clipped rail, which cropped it. */
.sd-dmg-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-sm);
}

.sd-dmg-track::before {
  content: "";
  grid-area: 1 / 1;
  height: 0.62rem;
  background: color-mix(in oklch, var(--chronicle-ink) 82%, transparent);
  border: 1px solid var(--chronicle-rule-soft);
  border-radius: var(--radius-full);
}

.sd-dmg-fill {
  grid-area: 1 / 1;
  justify-self: start;
  height: 0.62rem;
  width: calc(var(--sd-pct, 0) * 1%);
  min-width: 2px;
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform-origin: left center;
}

html[data-sd-reveal="on"] .sd-dmg-fill {
  transition: transform var(--sd-bar-dur) var(--ease-out);
  transition-delay: calc(var(--sd-index, 0) * 45ms);
}

html[data-sd-reveal="on"] .sd-reveal:not(.is-visible) .sd-dmg-fill {
  transform: scaleX(0);
}

/* Modifiers carry tint only — width stays on the base rule so the same
   modifier can colour a legend swatch. */
.sd-dmg-fill--dealt {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--chronicle-gold) 55%, transparent),
    var(--chronicle-gold-bright));
}

.sd-dmg-fill--taken {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--sd-taken) 60%, transparent),
    var(--sd-taken));
}

.sd-swatch.sd-dmg-fill--dealt,
.sd-swatch.sd-dmg-fill--taken {
  grid-area: auto;
  justify-self: auto;
  width: 0.55rem;
  min-width: 0;
  height: 0.55rem;
  border-radius: 2px;
  box-shadow: none;
  transform: none;
  transition: none;
}

.sd-swatch.sd-dmg-fill--dealt { background: var(--chronicle-gold); }
.sd-swatch.sd-dmg-fill--taken { background: var(--sd-taken); }

.sd-dmg-figure {
  grid-area: 1 / 2;
  min-width: 3.1rem;
  text-align: right;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--chronicle-text-soft);
  font-variant-numeric: tabular-nums;
}

/* ── War timeline ──────────────────────────────────────────────── */
.sd-timeline {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.sd-war {
  --sd-rail: var(--chronicle-rule);
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--sd-surface);
  border: 1px solid var(--chronicle-rule-soft);
  border-inline-start: 2px solid var(--sd-rail);
  border-radius: var(--radius-md);
  transition:
    background var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}

.sd-war--win { --sd-rail: var(--sd-win); }
.sd-war--loss { --sd-rail: var(--sd-loss); }
.sd-war--unknown { --sd-rail: var(--sd-unknown); }

.sd-war[open] {
  background: var(--sd-surface-hover);
  border-color: color-mix(in oklch, var(--chronicle-gold) 30%, transparent);
  border-inline-start-color: var(--sd-rail);
}

/* Flex, not grid: the title is optional and the child count varies (dot, date,
   [title], result, quick, chevron), so fixed tracks would misalign the row. */
.sd-war-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  min-width: 0;
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  list-style: none;
  transition: background var(--dur-micro) var(--ease-out);
}

.sd-war-summary::-webkit-details-marker {
  display: none;
}

.sd-war-summary:hover {
  background: color-mix(in oklch, var(--chronicle-gold) 7%, transparent);
}

.sd-war-summary:focus-visible {
  outline: 2px solid var(--chronicle-focus);
  outline-offset: -2px;
}

.sd-war-dot {
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--sd-rail);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--sd-rail) 18%, transparent);
}

.sd-war-date {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chronicle-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sd-war-title {
  flex: 1 1 8rem;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--chronicle-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-war-result {
  flex-shrink: 0;
  padding: 0.05rem 0.36rem;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-rail);
  background: color-mix(in oklch, var(--sd-rail) 13%, transparent);
  border: 1px solid color-mix(in oklch, var(--sd-rail) 45%, transparent);
  border-radius: var(--radius-sm);
}

/* Pushed to the trailing edge so the chevron always closes the row, with or
   without a title in the middle. */
.sd-war-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem var(--space-sm);
  min-width: 0;
  margin-inline-start: auto;
}

.sd-war-quick-item {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  color: var(--chronicle-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sd-war-chevron {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--chronicle-gold);
  transition: transform var(--dur-short) var(--ease-out);
}

.sd-war-chevron svg {
  width: 0.7rem;
  height: 0.7rem;
}

.sd-war[open] .sd-war-chevron {
  transform: rotate(90deg);
}

.sd-war-body {
  display: grid;
  /* Four spec cells; capped so they do not spread into a thin strip on a wide
     viewport. .sd-war-top and the manage link span every track. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 56rem;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  margin-top: 0;
  border-top: 1px solid var(--sd-hairline);
  animation: sd-war-open var(--dur-short) var(--ease-out) both;
}

/* The top-performer block and the trailing manage link are full-bleed rows
   under the four spec cells. */
.sd-war-body > .sd-war-top,
.sd-war-body > a {
  grid-column: 1 / -1;
}

.sd-war-body > a {
  justify-self: start;
}

@keyframes sd-war-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.sd-war-detail {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.sd-war-detail-label {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chronicle-text-muted);
}

.sd-war-detail-value {
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--chronicle-text);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.sd-war-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--space-xs);
  min-width: 0;
}

/* Bare class icon emitted without a class of its own. */
.sd-war-top img {
  grid-row: span 2;
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
}

.sd-war-top-name {
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--chronicle-gold-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Class distribution ────────────────────────────────────────── */
.sd-classes {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: var(--space-xl);
  min-width: 0;
  padding: var(--space-lg);
  background: var(--sd-surface);
  border: 1px solid var(--chronicle-rule-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--sd-shadow), var(--sd-inner-lip);
}

.sd-donut {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(9rem, 15vw, 11.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from -90deg,
    var(--sd-gradient, var(--chronicle-rule-soft) 0% 100%));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--chronicle-gold) 18%, transparent),
    0 8px 24px -18px var(--chronicle-shadow);
}

.sd-donut-hole {
  position: absolute;
  inset: 27%;
  display: grid;
  place-items: center;
  gap: 0.1rem;
  text-align: center;
  background:
    radial-gradient(100% 100% at 50% 0%,
      color-mix(in oklch, var(--chronicle-ink-soft) 80%, transparent),
      var(--chronicle-ink) 70%);
  border: 1px solid var(--chronicle-rule-soft);
  border-radius: 50%;
}

.sd-donut-total {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--chronicle-text);
  font-variant-numeric: tabular-nums;
}

.sd-donut-label {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chronicle-text-muted);
}

.sd-class-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  max-width: 46rem;
  gap: 0.1rem var(--space-md);
  min-width: 0;
}

.sd-class-legend-item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  padding: 0.3rem 0;
  border-bottom: 1px solid color-mix(in oklch, var(--chronicle-rule-soft) 55%, transparent);
}

.sd-class-legend-item:last-child {
  border-bottom: none;
}

.sd-class-legend-item img {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
}

.sd-class-swatch {
  flex-shrink: 0;
  width: 0.4rem;
  height: 1.05rem;
  background: var(--sd-color, var(--chronicle-gold));
  border-radius: 1px;
}

.sd-class-name {
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--chronicle-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-class-count {
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  color: var(--chronicle-text-muted);
  font-variant-numeric: tabular-nums;
}

.sd-class-pct {
  justify-self: end;
  min-width: 2.6rem;
  text-align: end;
  font-family: var(--font-outlier);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--chronicle-gold-bright);
  font-variant-numeric: tabular-nums;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .sd-perf {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--space-md);
  }

  .sd-perf .sd-kpi-row {
    grid-column: 1 / -1;
  }

  .sd-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-sparks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sd {
    gap: var(--space-lg);
  }

  .sd-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sd-classes {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--space-lg);
  }

  .sd-class-legend {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .sd-perf {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .sd-perf .sd-wl,
  .sd-perf .sd-kpi-row {
    width: 100%;
  }

  .sd-hero,
  .sd-dmg,
  .sd-classes {
    padding: var(--space-md);
  }

  /* The title and the quick facts each take their own line; the chevron still
     closes the row it shares with the result chip. */
  .sd-war-quick {
    order: 1;
    flex-basis: 100%;
    margin-inline-start: 0;
  }

  .sd-war-title {
    flex-basis: 100%;
  }

  .sd-war-chevron {
    margin-inline-start: auto;
  }

  .sd-war-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .sd-hero-stats,
  .sd-boards,
  .sd-sparks,
  .sd-grid-2,
  .sd-grid-3,
  .sd-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-section-head {
    align-items: flex-start;
  }

  .sd-war-title {
    white-space: normal;
  }

  .sd-war-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Reduced motion ────────────────────────────────────────────
   A second belt behind the script's own reduced-motion check: even if
   html[data-sd-reveal="on"] is somehow set, nothing moves and every figure is
   shown at its final value.
   obsidian-chronicle.css (~line 2027) forces `transition-duration: 150ms
   !important` on every element under this same query, so these overrides must
   also be !important to actually stop the sweep, the bars and the reveals. */
@media (prefers-reduced-motion: reduce) {
  .sd :is(
    .sd-reveal,
    .sd-dial,
    .sd-wl-seg,
    .sd-rank-bar,
    .sd-dmg-fill,
    .sd-spark-bar,
    .sd-war,
    .sd-war-body,
    .sd-war-chevron,
    .sd-war-summary,
    .sd-hero-crest,
    .sd-card,
    .sd-board,
    .sd-metric,
    .sd-kpi,
    .sd-spark
  ),
  .sd :is(.sd-card, .sd-board, .sd-metric, .sd-kpi, .sd-spark)::before,
  .sd-reveal,
  .sd-reveal :is(.sd-metric, .sd-spark, .sd-board) {
    transition: none !important;
    transition-delay: 0s !important;
    animation: none !important;
  }

  html[data-sd-reveal="on"] .sd-reveal,
  html[data-sd-reveal="on"] .sd-reveal.is-visible,
  html[data-sd-reveal="on"] .sd-reveal:not(.is-visible) :is(.sd-metric, .sd-spark, .sd-board) {
    opacity: 1;
    transform: none;
  }

  html[data-sd-reveal="on"] .sd-reveal:not(.is-visible) .sd-dial {
    --sd-sweep: var(--sd-value, 0);
  }

  html[data-sd-reveal="on"] .sd-reveal:not(.is-visible) .sd-wl-seg {
    width: calc(var(--sd-pct, 0) * 1%);
  }

  html[data-sd-reveal="on"] .sd-reveal:not(.is-visible) :is(.sd-rank-bar, .sd-dmg-fill, .sd-spark-bar) {
    transform: none;
  }

  .sd-hero:hover .sd-hero-crest {
    transform: none;
  }
}

/* ── War roster & class breakdown (expanded timeline) ─────────── */
.sd-war-roster-section {
  display: grid;
  gap: 0.35rem;
  margin-top: var(--space-sm);
}

.sd-war-roster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.sd-war-player-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  background: color-mix(in oklch, var(--chronicle-ink-raised) 90%, transparent);
  border: 1px solid var(--chronicle-rule-soft);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  color: var(--chronicle-text-muted);
  text-decoration: none;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.sd-war-player-chip:hover {
  border-color: color-mix(in oklch, var(--chronicle-gold) 40%, transparent);
  color: var(--chronicle-text);
}

.sd-war-player-chip img {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}

.sd-war-class-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.sd-war-class-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  background: color-mix(in oklch, var(--chronicle-gold) 6%, transparent);
  border: 1px solid var(--sd-hairline);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  color: var(--chronicle-text-muted);
}

.sd-war-class-chip img {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}