/*
 * Nat1 original work.
 * Copyright (c) 2026 Md Hafijur Rahman. All rights reserved.
 * Contact: kirentsukenzenrifat@gmail.com
 * Signature: NAT1-MHR-KIRENTSUKENZENRIFAT-2026-6E617431
 *
 * ─────────────────────────────────────────────────────────────────────────
 * nat1-ui.css — THE Nat1 design system.
 * ─────────────────────────────────────────────────────────────────────────
 *
 * Before this file the product carried six unrelated visual languages: a
 * dark-navy dashboard, the "Midnight Arcane" admin tools, a purple-gradient
 * settings page, a blue-gradient login, and two more. This file is the single
 * source of truth that replaces all of them.
 *
 * The palette is deliberately NOT new — it is ether2.html's Midnight Arcane
 * theme, promoted from "the character sheet's look" to "the product's look".
 * The sheets open in their own tab and stay untouched, so matching them here
 * is what makes the tab-switch feel like one app instead of two.
 *
 * Layering:
 *   nat1-ui.css     tokens + components         ← every page, shell or not
 *   nat1-shell.css  sidebar / topbar / router   ← app.php only
 *
 * Everything is prefixed `n-` so it can coexist with the legacy per-page
 * <style> blocks during migration without collisions.
 */

/* ══════════════════════════════════════════════════════════════════════
   1. TOKENS
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces — a 5-step ramp. Each step is "one level closer to the user":
     bg is the page ground, surface-1 the chrome, surface-2 panels sitting on
     it, surface-3 controls inside those panels, surface-4 hover/active. */
  --n-bg:         #0b0910;
  --n-surface-1:  #14111c;
  --n-surface-2:  #171320;
  --n-surface-3:  #1e1929;
  --n-surface-4:  #282133;
  --n-inset:      #100d18;

  /* Text */
  --n-text:       #ece3d0;
  --n-muted:      #9c8f79;
  --n-muted-2:    #6e6353;

  /* Accents. Gold = the product's own voice (primary actions, focus, brand).
     Arcane purple = authority/ownership (DM powers, admin surfaces). Never
     use arcane for a plain action — it means "you hold power here". */
  --n-accent:     #d4a24c;
  --n-accent-hi:  #f0c46a;
  --n-accent-dim: #8a6d2f;
  --n-accent-ink: #241a10;
  --n-glow:       rgba(212,162,76,.22);

  --n-arcane:     #a78bfa;
  --n-arcane-dim: #6d4fa8;
  --n-arcane-wash:rgba(167,139,250,.14);

  /* Status */
  --n-green:      #5cc47c;
  --n-green-dim:  rgba(92,196,124,.14);
  --n-red:        #e0605a;
  --n-red-dim:    rgba(224,96,90,.14);
  --n-amber:      #fbbf24;
  --n-amber-dim:  rgba(251,191,36,.14);
  --n-info:       #7dd3fc;
  --n-info-dim:   rgba(125,211,252,.12);

  /* Lines. --n-border carries a gold tint so panel edges read as warm even at
     15% — a neutral white border is what made the old dashboard feel cold. */
  --n-border:     rgba(212,162,76,.15);
  --n-border-2:   rgba(212,162,76,.32);
  --n-line:       rgba(255,255,255,.07);
  --n-line-soft:  rgba(255,255,255,.04);

  /* Type */
  --n-font-display: 'Cinzel', 'Georgia', serif;
  --n-font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --n-font-mono:    'JetBrains Mono', 'Consolas', 'Courier New', monospace;

  /* A 1.2-ish type scale, capped at 30px — this is a dense data product, not
     a marketing site, so display sizes stay restrained. */
  --n-fs-2xs: 10px;
  --n-fs-xs:  11px;
  --n-fs-sm:  12px;
  --n-fs-md:  13px;
  --n-fs-base:14px;
  --n-fs-lg:  16px;
  --n-fs-xl:  19px;
  --n-fs-2xl: 23px;
  --n-fs-3xl: 30px;

  /* Space — 4px base grid */
  --n-s1: 4px;  --n-s2: 8px;  --n-s3: 12px; --n-s4: 16px;
  --n-s5: 20px; --n-s6: 24px; --n-s8: 32px; --n-s10: 40px;

  /* Radii */
  --n-r-sm: 6px; --n-r: 9px; --n-r-lg: 12px; --n-r-xl: 16px; --n-r-full: 999px;

  /* Elevation */
  --n-shadow-sm: 0 2px 6px rgba(0,0,0,.3);
  --n-shadow:    0 8px 24px rgba(0,0,0,.45);
  --n-shadow-lg: 0 18px 44px rgba(0,0,0,.55);
  --n-ring:      0 0 0 3px var(--n-glow);

  --n-ease: cubic-bezier(.4,0,.2,1);
  --n-t:    .16s var(--n-ease);
}

/* ══════════════════════════════════════════════════════════════════════
   2. RESET + BASE
   ══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--n-surface-4) transparent;
}

body.n-body {
  margin: 0;
  min-height: 100vh;
  color: var(--n-text);
  font-family: var(--n-font-ui);
  font-size: var(--n-fs-base);
  line-height: 1.5;
  background: var(--n-bg);
  /* Two very wide, very faint washes. They give the flat ground some depth
     without ever reading as "gradient background" — at 7-10% alpha over
     600px they are felt more than seen. */
  background-image:
    radial-gradient(ellipse 900px 500px at 8% -10%,  rgba(167,139,250,.10), transparent 60%),
    radial-gradient(ellipse 800px 460px at 100% 0%,  rgba(212,162,76,.07),  transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.n-body.n-scroll-lock { overflow: hidden; }

button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
a { color: var(--n-accent); text-decoration: none; }
a:hover { color: var(--n-accent-hi); }

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

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--n-surface-4); border-radius: var(--n-r-full);
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--n-accent-dim); background-clip: padding-box; }
* { scrollbar-width: thin; }

/* ══════════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════════ */

/* Cinzel is reserved for proper nouns — character names, campaign names, the
   wordmark. Using it for UI chrome is what made the old pages feel costumed
   rather than designed. Everything functional is Inter. */
.n-display { font-family: var(--n-font-display); font-weight: 700; letter-spacing: .01em; }
.n-mono    { font-family: var(--n-font-mono); font-size: .92em; }

.n-h1 { margin: 0; font-size: var(--n-fs-2xl); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.n-h2 { margin: 0; font-size: var(--n-fs-xl); font-weight: 700; line-height: 1.25; }
.n-h3 { margin: 0; font-size: var(--n-fs-lg); font-weight: 700; line-height: 1.3; }

.n-eyebrow {
  margin: 0; font-size: var(--n-fs-2xs); font-weight: 700; color: var(--n-muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.n-lead    { margin: 0; color: var(--n-muted); font-size: var(--n-fs-md); line-height: 1.6; }
.n-dim     { color: var(--n-muted); }
.n-dimmer  { color: var(--n-muted-2); }
.n-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   4. ICONS
   Lucide (ISC) line art from partials/icon-sprite.php. Sized in em and
   coloured by currentColor, so an icon always matches the text beside it.
   ══════════════════════════════════════════════════════════════════════ */
.n-icon {
  width: 1em; height: 1em; flex: 0 0 auto; display: inline-block; vertical-align: -.14em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.n-icon-lg { width: 1.35em; height: 1.35em; }

/* ══════════════════════════════════════════════════════════════════════
   5. BUTTONS
   ══════════════════════════════════════════════════════════════════════ */
.n-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--n-s2);
  min-height: 38px; padding: 0 var(--n-s4);
  border: 1px solid transparent; border-radius: var(--n-r);
  font-family: var(--n-font-ui); font-size: var(--n-fs-md); font-weight: 600;
  white-space: nowrap; text-decoration: none;
  transition: background var(--n-t), border-color var(--n-t), color var(--n-t),
              transform var(--n-t), box-shadow var(--n-t), filter var(--n-t);
}
.n-btn:active { transform: translateY(1px); }
.n-btn:disabled, .n-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.n-btn-primary {
  color: var(--n-accent-ink);
  background: linear-gradient(160deg, var(--n-accent-hi), var(--n-accent));
  box-shadow: 0 2px 10px rgba(212,162,76,.22);
}
.n-btn-primary:hover { color: var(--n-accent-ink); filter: brightness(1.08); box-shadow: 0 4px 16px rgba(212,162,76,.3); }

.n-btn-arcane { color: #fff; background: linear-gradient(160deg, var(--n-arcane), var(--n-arcane-dim)); }
.n-btn-arcane:hover { color: #fff; filter: brightness(1.1); }

.n-btn-secondary {
  color: var(--n-text); background: var(--n-surface-3); border-color: var(--n-line);
}
.n-btn-secondary:hover { background: var(--n-surface-4); border-color: var(--n-border-2); color: var(--n-text); }

.n-btn-ghost { color: var(--n-muted); background: transparent; }
.n-btn-ghost:hover { color: var(--n-text); background: var(--n-surface-3); }

.n-btn-danger { color: #fff0ef; background: linear-gradient(160deg, var(--n-red), #a83a44); }
.n-btn-danger:hover { color: #fff0ef; filter: brightness(1.1); }

.n-btn-success { color: #0e1c14; background: linear-gradient(160deg, #7ade9a, var(--n-green)); }
.n-btn-success:hover { color: #0e1c14; filter: brightness(1.08); }

.n-btn-sm  { min-height: 30px; padding: 0 var(--n-s3); font-size: var(--n-fs-sm); border-radius: var(--n-r-sm); }
.n-btn-lg  { min-height: 44px; padding: 0 var(--n-s5); font-size: var(--n-fs-base); }
.n-btn-block { width: 100%; }

/* Square icon-only button — the 1:1 lock is what keeps toolbars from
   looking ragged when icons have different intrinsic widths. */
.n-btn-icon {
  width: 34px; height: 34px; min-height: 0; padding: 0; flex: 0 0 34px;
  border-radius: var(--n-r-sm); color: var(--n-muted);
  background: var(--n-surface-3); border-color: var(--n-line);
}
.n-btn-icon:hover { color: var(--n-text); background: var(--n-surface-4); border-color: var(--n-border-2); }
.n-btn-icon.n-btn-sm { width: 30px; height: 30px; flex-basis: 30px; }

/* ══════════════════════════════════════════════════════════════════════
   6. PANELS & CARDS
   ══════════════════════════════════════════════════════════════════════ */

/* .n-panel is the primary stage: filled, bordered, lifted. .n-panel-quiet is
   for supporting content — border only, no fill — so a page of five panels
   still has one obvious focal point. */
.n-panel {
  position: relative; padding: var(--n-s5); border-radius: var(--n-r-lg);
  border: 1px solid var(--n-border); background: var(--n-surface-2);
  background-image: linear-gradient(180deg, rgba(255,255,255,.035), transparent 140px);
  box-shadow: var(--n-shadow-sm);
}
.n-panel-quiet {
  border-color: var(--n-line); background: transparent;
  background-image: none; box-shadow: none;
}
.n-panel-arcane {
  border-color: rgba(167,139,250,.28);
  background-image: radial-gradient(ellipse 420px 200px at 100% 0%, var(--n-arcane-wash), transparent 70%);
}
.n-panel-flush { padding: 0; overflow: hidden; }

.n-panel-hdr {
  display: flex; align-items: center; gap: var(--n-s3);
  margin-bottom: var(--n-s4); padding-bottom: var(--n-s3);
  border-bottom: 1px solid var(--n-line-soft);
}
.n-panel-hdr.n-bare { margin-bottom: var(--n-s4); padding-bottom: 0; border-bottom: 0; }
.n-panel-hdr h2, .n-panel-hdr h3 {
  margin: 0; flex: 1; min-width: 0;
  font-size: var(--n-fs-lg); font-weight: 700; letter-spacing: -.005em;
}
.n-panel-hdr > .n-icon { color: var(--n-accent); font-size: var(--n-fs-lg); }
.n-panel-quiet .n-panel-hdr > .n-icon { color: var(--n-muted); }
.n-panel-hdr-actions { display: flex; align-items: center; gap: var(--n-s2); flex: 0 0 auto; }

.n-card {
  padding: var(--n-s4); border-radius: var(--n-r);
  border: 1px solid var(--n-line); background: var(--n-surface-3);
  transition: border-color var(--n-t), transform var(--n-t), box-shadow var(--n-t);
}
.n-card-interactive:hover {
  border-color: var(--n-border-2); transform: translateY(-2px); box-shadow: var(--n-shadow);
}

/* ══════════════════════════════════════════════════════════════════════
   7. FORM FIELDS
   ══════════════════════════════════════════════════════════════════════ */
.n-field { display: grid; gap: var(--n-s2); }
.n-field > label, .n-label {
  font-size: var(--n-fs-xs); font-weight: 700; color: var(--n-muted);
  text-transform: uppercase; letter-spacing: .07em;
}
.n-hint { margin: 0; font-size: var(--n-fs-sm); color: var(--n-muted-2); line-height: 1.5; }

.n-input, .n-select, .n-textarea {
  width: 100%; min-height: 40px; padding: 9px var(--n-s3);
  color: var(--n-text); background: var(--n-inset);
  border: 1px solid var(--n-line); border-radius: var(--n-r-sm);
  font-size: var(--n-fs-md); outline: none;
  transition: border-color var(--n-t), box-shadow var(--n-t), background var(--n-t);
}
.n-input::placeholder, .n-textarea::placeholder { color: var(--n-muted-2); }
.n-input:hover, .n-select:hover, .n-textarea:hover { border-color: var(--n-border); }
.n-input:focus, .n-select:focus, .n-textarea:focus {
  border-color: var(--n-accent); box-shadow: var(--n-ring);
}
.n-textarea { min-height: 96px; resize: vertical; line-height: 1.6; padding: var(--n-s3); }

.n-select {
  appearance: none; padding-right: var(--n-s8); cursor: pointer;
  /* Inline caret as a data URI: keeps the control one element, and the arrow
     can't drift out of sync with a separately-positioned icon. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c8f79' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
}
.n-select option { background: var(--n-surface-2); color: var(--n-text); }
/* A multi-select renders as a scrollable list box, not a one-line dropdown —
   the single-select caret icon doesn't belong on it. */
.n-select[multiple] { appearance: auto; background-image: none; padding: var(--n-s2); height: auto; cursor: default; }
.n-select[multiple] option { padding: 5px 8px; border-radius: var(--n-r-sm); }
.n-select[multiple] option:checked { background: var(--n-accent); color: var(--n-accent-ink); }

/* Search field with a leading icon well */
.n-search { position: relative; }
.n-search > .n-icon {
  position: absolute; left: var(--n-s3); top: 50%; transform: translateY(-50%);
  color: var(--n-muted-2); pointer-events: none; font-size: var(--n-fs-lg);
}
.n-search .n-input { padding-left: 36px; }

.n-checkbox, .n-radio {
  width: 16px; height: 16px; flex: 0 0 auto;
  accent-color: var(--n-accent); cursor: pointer;
}

/* A selectable grid of checkboxes (share-with pickers, permission lists) */
.n-check-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--n-s2); max-height: 210px; overflow: auto; padding: var(--n-s2);
  border: 1px solid var(--n-line); border-radius: var(--n-r-sm); background: var(--n-inset);
}
.n-check-option {
  display: flex; align-items: center; gap: var(--n-s2);
  min-height: 36px; padding: 6px var(--n-s2);
  border: 1px solid var(--n-line-soft); border-radius: var(--n-r-sm);
  background: var(--n-surface-2); font-size: var(--n-fs-md); cursor: pointer;
  transition: border-color var(--n-t), background var(--n-t);
}
.n-check-option:hover { background: var(--n-surface-3); border-color: var(--n-border); }
.n-check-option:has(input:checked) {
  border-color: var(--n-border-2); background: rgba(212,162,76,.09);
}

.n-form-grid { display: grid; gap: var(--n-s4); }
.n-form-row  { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--n-s4); }
.n-form-actions {
  display: flex; justify-content: flex-end; gap: var(--n-s2); flex-wrap: wrap;
  margin-top: var(--n-s1);
}

/* ══════════════════════════════════════════════════════════════════════
   8. BADGES, PILLS, TAGS
   ══════════════════════════════════════════════════════════════════════ */
.n-badge {
  display: inline-flex; align-items: center; gap: var(--n-s1);
  padding: 3px 9px; border-radius: var(--n-r-full);
  font-size: var(--n-fs-xs); font-weight: 700; letter-spacing: .02em;
  background: var(--n-surface-4); color: var(--n-muted); border: 1px solid var(--n-line);
}
.n-badge-accent { background: rgba(212,162,76,.14); color: var(--n-accent-hi); border-color: rgba(212,162,76,.3); }
.n-badge-arcane { background: var(--n-arcane-wash); color: var(--n-arcane); border-color: rgba(167,139,250,.3); }
.n-badge-green  { background: var(--n-green-dim); color: var(--n-green); border-color: rgba(92,196,124,.3); }
.n-badge-red    { background: var(--n-red-dim); color: var(--n-red); border-color: rgba(224,96,90,.3); }
.n-badge-amber  { background: var(--n-amber-dim); color: var(--n-amber); border-color: rgba(251,191,36,.3); }
.n-badge-solid  {
  background: linear-gradient(160deg, var(--n-accent-hi), var(--n-accent-dim));
  color: var(--n-accent-ink); border-color: transparent; font-weight: 800;
}
.n-badge-count { min-width: 20px; justify-content: center; padding: 2px 7px; }

.n-tag {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px;
  border-radius: var(--n-r-sm); border: 1px solid var(--n-line);
  font-size: var(--n-fs-2xs); font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--n-muted);
}
/* A .n-tag that is also a button — the owner's "shared with N" indicator on
   a character card, clicking straight through to the Share modal. */
.n-tag-btn {
  cursor: pointer; transition: color var(--n-t), border-color var(--n-t), background var(--n-t);
}
.n-tag-btn:hover { color: var(--n-accent-hi); border-color: var(--n-border-2); background: var(--n-surface-3); }
.n-tag-btn .n-icon { font-size: 1.1em; }

/* ══════════════════════════════════════════════════════════════════════
   9. AVATARS
   Colour comes from an inline style set in PHP (nat1_avatar_color) so the
   same person is always the same colour without storing anything.
   ══════════════════════════════════════════════════════════════════════ */
.n-avatar {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--n-r-full);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: var(--n-fs-md);
  text-transform: uppercase; user-select: none;
}
.n-avatar-sm { width: 24px; height: 24px; font-size: var(--n-fs-xs); }
.n-avatar-lg { width: 44px; height: 44px; font-size: var(--n-fs-lg); }
.n-avatar-xl { width: 88px; height: 88px; font-size: var(--n-fs-2xl); }
.n-avatar-upload {
  position: relative; cursor: pointer; border: 2px solid transparent;
  transition: border-color var(--n-t), box-shadow var(--n-t);
}
.n-avatar-upload:hover { border-color: var(--n-accent); box-shadow: 0 0 0 4px var(--n-accent-glow); }
.n-avatar-upload::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center/16px no-repeat;
  opacity: 0; transition: opacity var(--n-t);
}
.n-avatar-upload:hover::after { opacity: 1; }
#account-avatar-file { display: none; }

/* A neutral square well for a leading icon — the non-identity counterpart to
   an avatar (class icons, section glyphs, campaign marks). */
.n-icon-well {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--n-r-sm);
  display: grid; place-items: center;
  background: var(--n-surface-4); color: var(--n-accent); font-size: var(--n-fs-lg);
}
.n-icon-well-arcane { background: var(--n-arcane-wash); color: var(--n-arcane); }
.n-icon-well-round { border-radius: var(--n-r-full); }
.n-icon-well-sm { width: 30px; height: 30px; font-size: var(--n-fs-base); }

/* ══════════════════════════════════════════════════════════════════════
   10. ALERTS
   ══════════════════════════════════════════════════════════════════════ */
.n-alert {
  display: flex; align-items: flex-start; gap: var(--n-s3);
  padding: var(--n-s3) var(--n-s4); border-radius: var(--n-r);
  border: 1px solid var(--n-line); background: var(--n-surface-3);
  font-size: var(--n-fs-md); font-weight: 500; line-height: 1.55;
}
.n-alert > .n-icon { margin-top: 2px; font-size: var(--n-fs-lg); }
.n-alert p { margin: 0 0 var(--n-s1); }
.n-alert p:last-child { margin: 0; }
.n-alert-success { color: #c6f0d4; background: var(--n-green-dim); border-color: rgba(92,196,124,.35); }
.n-alert-success > .n-icon { color: var(--n-green); }
.n-alert-error   { color: #ffd8d6; background: var(--n-red-dim); border-color: rgba(224,96,90,.35); }
.n-alert-error > .n-icon { color: var(--n-red); }
.n-alert-warn    { color: #ffeec2; background: var(--n-amber-dim); border-color: rgba(251,191,36,.35); }
.n-alert-warn > .n-icon { color: var(--n-amber); }
.n-alert-info    { color: #d5eefc; background: var(--n-info-dim); border-color: rgba(125,211,252,.3); }
.n-alert-info > .n-icon { color: var(--n-info); }

/* ══════════════════════════════════════════════════════════════════════
   11. EMPTY STATES
   ══════════════════════════════════════════════════════════════════════ */
.n-empty {
  padding: var(--n-s8) var(--n-s5); text-align: center;
  border: 1px dashed var(--n-line); border-radius: var(--n-r-lg);
}
.n-empty-icon {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: var(--n-s3); border-radius: var(--n-r-full);
  background: var(--n-surface-3); color: var(--n-muted-2); font-size: var(--n-fs-2xl);
}
.n-empty h3 { margin: 0 0 var(--n-s2); font-size: var(--n-fs-lg); font-weight: 700; }
.n-empty p  { margin: 0 auto var(--n-s4); max-width: 44ch; color: var(--n-muted); font-size: var(--n-fs-md); line-height: 1.6; }
.n-empty p:last-child { margin-bottom: 0; }

/* Inline "nothing here" line, for a panel that already has a header */
.n-empty-line {
  margin: 0; padding: var(--n-s3) var(--n-s4); border-radius: var(--n-r-sm);
  background: var(--n-inset); color: var(--n-muted);
  font-size: var(--n-fs-md); font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════
   12. STAT TILES
   ══════════════════════════════════════════════════════════════════════ */
.n-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--n-s3); }
.n-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--n-s3) var(--n-s4); border-radius: var(--n-r);
  border: 1px solid var(--n-line); background: var(--n-surface-2);
  background-image: radial-gradient(ellipse 180px 100px at 100% 0%, rgba(212,162,76,.09), transparent 70%);
}
.n-stat-label { font-size: var(--n-fs-2xs); font-weight: 700; color: var(--n-muted); text-transform: uppercase; letter-spacing: .07em; }
.n-stat-value { font-family: var(--n-font-display); font-size: var(--n-fs-2xl); font-weight: 800; color: var(--n-accent-hi); line-height: 1.1; }
.n-stat-foot  { font-size: var(--n-fs-xs); color: var(--n-muted-2); }

/* ══════════════════════════════════════════════════════════════════════
   13. TABS
   ══════════════════════════════════════════════════════════════════════ */
.n-tabs {
  display: flex; gap: var(--n-s1); padding-bottom: var(--n-s3);
  border-bottom: 1px solid var(--n-line-soft); margin-bottom: var(--n-s4);
  overflow-x: auto; scrollbar-width: none;
}
.n-tabs::-webkit-scrollbar { display: none; }
.n-tab {
  display: inline-flex; align-items: center; gap: var(--n-s2);
  padding: 7px var(--n-s3); border-radius: var(--n-r-sm);
  color: var(--n-muted); font-size: var(--n-fs-md); font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; background: transparent;
  transition: color var(--n-t), background var(--n-t), border-color var(--n-t);
}
.n-tab:hover { color: var(--n-text); background: var(--n-surface-3); }
.n-tab.is-active {
  color: var(--n-accent-hi); background: rgba(212,162,76,.12); border-color: rgba(212,162,76,.24);
}
/* A tab can be unreachable while its content does not exist yet (level
   features before the class is saved). It stays visible so the step is
   discoverable, and the title attribute says what unlocks it. */
.n-tab:disabled { opacity: .4; pointer-events: none; }
.n-tab-panel[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   14. TABLES
   ══════════════════════════════════════════════════════════════════════ */
.n-table-wrap {
  overflow-x: auto; border: 1px solid var(--n-line); border-radius: var(--n-r);
  background: var(--n-surface-2);
}
.n-table { width: 100%; border-collapse: collapse; font-size: var(--n-fs-md); }
.n-table th {
  position: sticky; top: 0; z-index: 1;
  padding: var(--n-s3) var(--n-s4); text-align: left; white-space: nowrap;
  background: var(--n-surface-3); color: var(--n-muted);
  font-size: var(--n-fs-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 1px solid var(--n-border);
}
.n-table td {
  padding: var(--n-s3) var(--n-s4); border-bottom: 1px solid var(--n-line-soft);
  vertical-align: top;
}
.n-table tbody tr:last-child td { border-bottom: 0; }
.n-table tbody tr { transition: background var(--n-t); }
.n-table tbody tr:hover { background: rgba(255,255,255,.022); }
.n-table .n-td-sub { display: block; margin-top: 2px; color: var(--n-muted-2); font-size: var(--n-fs-xs); }
.n-table-compact th, .n-table-compact td { padding: var(--n-s2) var(--n-s3); }

/* Below 720px a wide table stops being a table: each row becomes a stacked
   card and the column name is re-attached from data-label. Scrolling
   sideways through eight columns on a phone is not a real option. */
@media (max-width: 720px) {
  .n-table-responsive thead { display: none; }
  .n-table-responsive, .n-table-responsive tbody, .n-table-responsive tr, .n-table-responsive td { display: block; width: 100%; }
  .n-table-responsive tr {
    margin-bottom: var(--n-s3); border: 1px solid var(--n-line);
    border-radius: var(--n-r); background: var(--n-surface-3); overflow: hidden;
  }
  .n-table-responsive td { border-bottom: 1px solid var(--n-line-soft); padding: var(--n-s2) var(--n-s3); }
  .n-table-responsive td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    color: var(--n-muted-2); font-size: var(--n-fs-2xs); font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   15. DROPDOWN MENUS
   ══════════════════════════════════════════════════════════════════════ */
.n-menu { position: relative; }
.n-menu-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 190px; padding: var(--n-s1); border-radius: var(--n-r);
  border: 1px solid var(--n-border); background: var(--n-surface-3);
  box-shadow: var(--n-shadow-lg);
  animation: n-menu-in .13s var(--n-ease);
}
.n-menu-panel[hidden] { display: none; }
.n-menu.n-drop-up .n-menu-panel { top: auto; bottom: calc(100% + 6px); }
.n-menu-panel.n-menu-left { right: auto; left: 0; }
@keyframes n-menu-in { from { opacity: 0; transform: translateY(-4px); } }

.n-menu-item {
  display: flex; align-items: center; gap: var(--n-s2); width: 100%;
  padding: 8px var(--n-s3); border-radius: var(--n-r-sm);
  color: var(--n-text); font-size: var(--n-fs-md); font-weight: 500;
  text-align: left; text-decoration: none;
  transition: background var(--n-t), color var(--n-t);
}
.n-menu-item:hover { background: var(--n-surface-4); color: var(--n-text); }
.n-menu-item .n-icon { color: var(--n-muted); }
.n-menu-item:hover .n-icon { color: var(--n-accent); }
.n-menu-item.n-danger { color: var(--n-red); }
.n-menu-item.n-danger .n-icon, .n-menu-item.n-danger:hover .n-icon { color: var(--n-red); }
.n-menu-sep { height: 1px; margin: var(--n-s1) 2px; background: var(--n-line-soft); border: 0; }
.n-menu-label {
  padding: 6px var(--n-s3) 3px; font-size: var(--n-fs-2xs); font-weight: 800;
  color: var(--n-muted-2); text-transform: uppercase; letter-spacing: .08em;
}

/* ══════════════════════════════════════════════════════════════════════
   16. MODALS
   ══════════════════════════════════════════════════════════════════════ */
.n-modal[hidden] { display: none; }
.n-modal {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  padding: var(--n-s4); background: rgba(4,3,8,.74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: n-fade-in .15s var(--n-ease);
}
.n-modal-window {
  width: min(540px, 100%); max-height: min(760px, calc(100svh - 32px)); overflow: auto;
  padding: var(--n-s6); border-radius: var(--n-r-xl);
  border: 1px solid var(--n-border); background: var(--n-surface-2);
  background-image: radial-gradient(ellipse 380px 200px at 100% 0%, var(--n-arcane-wash), transparent 70%);
  box-shadow: var(--n-shadow-lg);
  animation: n-modal-in .18s var(--n-ease);
}
.n-modal-lg .n-modal-window { width: min(820px, 100%); }
.n-modal-window > h2 {
  display: flex; align-items: center; gap: var(--n-s3);
  margin: 0 0 var(--n-s3); font-size: var(--n-fs-xl); font-weight: 700;
}
.n-modal-window > h2 .n-icon { color: var(--n-accent); }
.n-modal-copy { margin: 0 0 var(--n-s5); color: var(--n-muted); font-size: var(--n-fs-md); line-height: 1.6; }
@keyframes n-fade-in  { from { opacity: 0; } }
@keyframes n-modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }

/* ══════════════════════════════════════════════════════════════════════
   17. TOASTS
   Fired from JS (nat1-app.js) for status feedback that used to be a banner
   pinned above the page, pushing all content down on every action.
   ══════════════════════════════════════════════════════════════════════ */
.n-toasts {
  position: fixed; bottom: var(--n-s5); right: var(--n-s5); z-index: 900;
  display: flex; flex-direction: column; gap: var(--n-s2);
  pointer-events: none;
}
.n-toast {
  display: flex; align-items: center; gap: var(--n-s3);
  min-width: 260px; max-width: 380px; padding: var(--n-s3) var(--n-s4);
  border-radius: var(--n-r); border: 1px solid var(--n-border);
  background: var(--n-surface-3); box-shadow: var(--n-shadow-lg);
  font-size: var(--n-fs-md); font-weight: 600; pointer-events: auto;
  animation: n-toast-in .22s var(--n-ease);
}
.n-toast.n-out { animation: n-toast-out .2s var(--n-ease) forwards; }
.n-toast-success .n-icon { color: var(--n-green); }
.n-toast-error   .n-icon { color: var(--n-red); }
.n-toast-info    .n-icon { color: var(--n-accent); }
@keyframes n-toast-in  { from { opacity: 0; transform: translateX(24px); } }
@keyframes n-toast-out { to   { opacity: 0; transform: translateX(24px); } }
@media (max-width: 560px) {
  .n-toasts { left: var(--n-s3); right: var(--n-s3); bottom: var(--n-s3); }
  .n-toast { min-width: 0; max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   18. HP METER
   Shared by the dashboard cards and the campaign party overview.
   ══════════════════════════════════════════════════════════════════════ */
.n-hp-label {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px;
  font-size: var(--n-fs-2xs); font-weight: 700; color: var(--n-muted);
  text-transform: uppercase; letter-spacing: .07em;
}
.n-hp-label strong { font-size: var(--n-fs-md); color: var(--n-text); text-transform: none; letter-spacing: 0; }
.n-hp-track { height: 6px; border-radius: var(--n-r-full); background: rgba(255,255,255,.07); overflow: hidden; }
.n-hp-fill  { height: 100%; border-radius: var(--n-r-full); transition: width .35s var(--n-ease); }
.n-hp-ok   { background: linear-gradient(90deg, var(--n-green), #7ade9a); }
.n-hp-mid  { background: linear-gradient(90deg, #d99a1e, var(--n-amber)); }
.n-hp-low  { background: linear-gradient(90deg, #b8433f, var(--n-red)); }
.n-hp-unset { font-size: var(--n-fs-sm); color: var(--n-muted-2); font-style: italic; }

/* ══════════════════════════════════════════════════════════════════════
   19. DISCLOSURE (accordion)
   ══════════════════════════════════════════════════════════════════════ */
.n-disclosure {
  border: 1px solid var(--n-line); border-radius: var(--n-r);
  background: var(--n-surface-2); overflow: hidden;
}
.n-disclosure + .n-disclosure { margin-top: var(--n-s2); }
.n-disclosure > summary {
  display: flex; align-items: center; gap: var(--n-s3);
  padding: var(--n-s3) var(--n-s4); cursor: pointer; list-style: none;
  transition: background var(--n-t);
}
.n-disclosure > summary::-webkit-details-marker { display: none; }
.n-disclosure > summary::marker { content: ''; }
.n-disclosure > summary:hover { background: var(--n-surface-3); }
.n-disclosure-text { flex: 1; min-width: 0; }
.n-disclosure-text strong { display: block; font-size: var(--n-fs-md); font-weight: 700; }
.n-disclosure-text small  { display: block; margin-top: 1px; font-size: var(--n-fs-xs); color: var(--n-muted); }
.n-disclosure-caret { margin-left: auto; flex: 0 0 auto; color: var(--n-muted); transition: transform .2s var(--n-ease); transform: rotate(-90deg); }
.n-disclosure[open] > summary .n-disclosure-caret { transform: rotate(0); }
.n-disclosure[open] > summary { border-bottom: 1px solid var(--n-line-soft); }
.n-disclosure-body { padding: var(--n-s4); }

/* ══════════════════════════════════════════════════════════════════════
   20. LAYOUT HELPERS
   ══════════════════════════════════════════════════════════════════════ */
.n-stack   { display: flex; flex-direction: column; gap: var(--n-s4); }
.n-stack-sm{ display: flex; flex-direction: column; gap: var(--n-s2); }
.n-row     { display: flex; align-items: center; gap: var(--n-s3); }
.n-row-tight { display: flex; align-items: center; gap: var(--n-s2); }
.n-wrap    { flex-wrap: wrap; }
.n-spacer  { flex: 1 1 auto; min-width: 0; }
.n-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--n-s3); }

/* The recurring two-column page: a wide stage plus a fixed-width rail that
   sticks while the stage scrolls. Collapses to one column under 1080px. */
.n-split { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: var(--n-s5); align-items: start; }
.n-split-main { min-width: 0; }
.n-split-side { min-width: 0; position: sticky; top: var(--n-s5); display: flex; flex-direction: column; gap: var(--n-s4); }
@media (max-width: 1080px) {
  .n-split { grid-template-columns: 1fr; }
  .n-split-side { position: static; }
}

.n-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* ══════════════════════════════════════════════════════════════════════
   21. PROSE
   Authored HTML the app renders but did not compose — the contact page,
   a class description shown read-only. Styles bare tags, because the
   markup comes from an editor and carries no classes of its own.
   ══════════════════════════════════════════════════════════════════════ */
.n-prose { font-size: var(--n-fs-base); line-height: 1.7; color: var(--n-text); }
.n-prose > :first-child { margin-top: 0; }
.n-prose > :last-child { margin-bottom: 0; }
.n-prose h1, .n-prose h2, .n-prose h3, .n-prose h4 {
  font-family: var(--n-font-display); font-weight: 700; line-height: 1.25;
  margin: 1.4em 0 .5em; color: var(--n-text);
}
.n-prose h1 { font-size: var(--n-fs-xl); color: var(--n-accent-hi); }
.n-prose h2 { font-size: var(--n-fs-lg); color: var(--n-accent-hi); }
.n-prose h3 { font-size: var(--n-fs-base); }
.n-prose p { margin: 0 0 .85em; }
.n-prose a { color: var(--n-accent-hi); text-decoration: underline; text-underline-offset: 2px; }
.n-prose strong { font-weight: 700; }
.n-prose ul, .n-prose ol { margin: 0 0 .85em; padding-left: 1.4em; }
.n-prose li { margin-bottom: .3em; }
.n-prose blockquote {
  margin: 1em 0; padding: .4em 0 .4em var(--n-s4);
  border-left: 3px solid var(--n-accent-dim); color: var(--n-muted);
}
.n-prose code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--n-surface-4); font-family: var(--n-font-mono); font-size: .88em;
}
.n-prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: var(--n-fs-md); }
.n-prose th, .n-prose td { padding: 7px 10px; border: 1px solid var(--n-line); text-align: left; }
.n-prose th { background: var(--n-surface-3); font-weight: 700; }
.n-prose hr { border: 0; border-top: 1px solid var(--n-line); margin: 1.5em 0; }
.n-prose img { max-width: 100%; border-radius: var(--n-r-sm); }