@import url("/static/tokens.css");

/* ════════════════════════════════════════════════════════════════
   Base reset + body
   ════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: var(--body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Tabular figures for numeric monospace blocks */
.tnum { font-feature-settings: "tnum"; }

/* ════════════════════════════════════════════════════════════════
   Navbar — 50px fixed top
   ════════════════════════════════════════════════════════════════ */

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--layout-navbar);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0 var(--space-6);
  background: var(--surface-page-deep);
  border-bottom: 1px solid var(--border-default);
}

.navbar .brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-15);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-display);
}
.navbar .brand-mark {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transform: rotate(45deg);
}

.navbar nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
}
.navbar nav a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  border-radius: var(--radius-xs);
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.navbar nav a:hover {
  color: var(--text-display);
  background: var(--surface-row-hover);
}
.navbar nav a.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.navbar .who {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  font-size: var(--fs-12);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
}
.navbar .who .dot {
  width: 6px; height: 6px;
  background: var(--status-good);
  border-radius: var(--radius-circle);
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
}

/* ════════════════════════════════════════════════════════════════
   Layout
   ════════════════════════════════════════════════════════════════ */

main {
  max-width: var(--layout-app-content);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
}

.page-title {
  font: var(--page-title);
  color: var(--text-display);
  margin: 0 0 var(--space-2);
}
.page-subtitle {
  font: var(--body-sm);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-6);
}

.eyebrow {
  font: var(--eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

/* ════════════════════════════════════════════════════════════════
   Cards
   ════════════════════════════════════════════════════════════════ */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
  overflow: hidden;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(180deg, var(--bg-card-app), var(--bg-light));
  border-bottom: 1px solid var(--border-default);
}
.card-title {
  font: var(--label-upper);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-display);
  margin: 0;
}
.card-body { padding: var(--space-4); }
.card-body.tight { padding: 0; }   /* for tables that should bleed to the card edges */
.card-footer {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card-footer);
  border-top: 1px solid var(--border-default);
  font: var(--body-sm);
  color: var(--text-tertiary);
}

/* Branded callout — used on landing card */
.card.branded { border-color: var(--border-accent); }
.card.branded .card-header { background: linear-gradient(180deg, var(--bg-card-app), var(--bg-light)); }

/* ════════════════════════════════════════════════════════════════
   Stat row (counts strip)
   ════════════════════════════════════════════════════════════════ */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--border-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
  overflow: hidden;
}
.stat {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.stat-label {
  font: var(--label-upper);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.stat-value {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  color: var(--text-display);
  font-feature-settings: "tnum";
  letter-spacing: 0.5px;
}
.stat-value.accent { color: var(--accent); }
.stat-value.warn   { color: var(--status-warning-fg); }
.stat-value.muted  { color: var(--text-tertiary); }

/* ════════════════════════════════════════════════════════════════
   Tables (dense; first-class citizen)
   ════════════════════════════════════════════════════════════════ */

table.t {
  width: 100%;
  border-collapse: collapse;
  font-feature-settings: "tnum";
}
table.t thead th {
  position: sticky;
  top: var(--layout-navbar);
  background: var(--surface-table-head);
  font: var(--label-upper);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
table.t tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
  font-size: var(--fs-13);
  line-height: 1.4;
}
table.t tbody tr {
  transition: background var(--dur-fast) var(--ease-standard);
}
table.t tbody tr:hover td {
  background: var(--surface-row-hover);
}
table.t tbody tr:last-child td { border-bottom: 0; }

table.t .num { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-secondary); }
table.t .name { font-weight: var(--fw-medium); color: var(--text-display); }
table.t .right { text-align: right; }
table.t .nowrap { white-space: nowrap; }

/* Compact variant */
table.t.compact thead th,
table.t.compact tbody td { padding: 4px var(--space-3); font-size: var(--fs-12); }

/* ════════════════════════════════════════════════════════════════
   Buttons
   ════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--space-3);
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  font: var(--fw-medium) var(--fs-12) / 1 var(--font-body-app);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
  text-decoration: none;
}
.btn:hover {
  background: var(--surface-card-hover);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}
.btn.primary:hover {
  background: var(--accent-hot);
  border-color: var(--accent-hot);
  box-shadow: var(--shadow-glow-accent);
  color: var(--accent-on);
}

.btn.warn {
  color: var(--status-warning-fg);
  border-color: var(--status-warning-fg);
}
.btn.warn:hover {
  background: var(--status-warn-soft);
  color: var(--status-warning-fg);
}

.btn.danger {
  color: var(--status-error-fg);
  border-color: var(--status-error-fg);
}
.btn.danger:hover {
  background: var(--status-bad-soft);
  color: var(--status-error-fg);
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn.ghost:hover {
  color: var(--text-display);
  background: var(--surface-row-hover);
}

.btn.small { height: 24px; padding: 0 var(--space-2); font-size: var(--fs-10); }
.btn.large { height: 40px; padding: 0 var(--space-4); font-size: var(--fs-13); }

/* ════════════════════════════════════════════════════════════════
   Forms
   ════════════════════════════════════════════════════════════════ */

label {
  display: block;
  font: var(--label-upper);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

label.inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--body-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
  margin: 0;
}
label.inline input[type="checkbox"] { width: auto; margin: 0; }

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 8px var(--space-3);
  background: var(--surface-input);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  font: var(--body);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
textarea {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px var(--accent-glow);
  background: var(--surface-input-focus);
}

::placeholder { color: var(--text-tertiary); }

.form-row {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
  align-items: end;
  flex-wrap: wrap;
}
.form-row .grow { flex: 1; min-width: 200px; }

/* ════════════════════════════════════════════════════════════════
   Tags / status pills
   ════════════════════════════════════════════════════════════════ */

.tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  font: var(--fw-semibold) var(--fs-10) / 1 var(--font-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  white-space: nowrap;
}
.tag.npc {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
}
.tag.target {
  background: var(--status-warn-soft);
  color: var(--status-warning-fg);
  border: 1px solid var(--status-warning-fg);
}
.tag.player {
  background: transparent;
  color: var(--text-tertiary);
  border: 1px solid var(--border-default);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font: var(--fw-semibold) var(--fs-10) / 1 var(--font-body-app);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.status-queued  { color: var(--text-secondary); background: var(--surface-row-hover); }
.status-queued::before { box-shadow: none; }
.status-running { color: var(--status-warning-fg); background: var(--status-warn-soft); }
.status-done    { color: var(--status-success-fg); background: rgba(76, 175, 80, 0.10); }
.status-error   { color: var(--status-error-fg); background: var(--status-bad-soft); }

/* ════════════════════════════════════════════════════════════════
   Copy box (CSV output for evemail)
   ════════════════════════════════════════════════════════════════ */

.copy-box {
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.copy-box .copy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.copy-box .copy-head .label {
  font: var(--eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.copy-box textarea {
  background: var(--surface-input);
  border-color: var(--border-default);
  font-size: var(--fs-12);
  color: var(--text-display);
  min-height: 60px;
}

/* "Take first N" control inside copy-box */
.take-control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font: var(--body-sm);
  color: var(--text-secondary);
}
.take-control .take-label {
  font: var(--label-upper);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.take-control input[type="number"] {
  width: 60px;
  padding: 4px 6px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--text-display);
  background: var(--surface-input);
  -moz-appearance: textfield;
}
.take-control input[type="number"]::-webkit-outer-spin-button,
.take-control input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.take-control .take-of {
  font: var(--tabular);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.take-control input[type="range"] {
  flex: 1;
  min-width: 120px;
  height: 18px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.take-control input[type="range"]:focus { outline: none; }

/* Track */
.take-control input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--surface-input);
  border-radius: var(--radius-pill);
}
.take-control input[type="range"]::-moz-range-track {
  height: 4px;
  background: var(--surface-input);
  border-radius: var(--radius-pill);
}
/* Thumb */
.take-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  background: var(--accent);
  border-radius: var(--radius-circle);
  box-shadow: 0 0 8px var(--accent-glow);
  border: 1px solid var(--bg-0);
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.take-control input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: var(--radius-circle);
  box-shadow: 0 0 8px var(--accent-glow);
  border: 1px solid var(--bg-0);
}
.take-control input[type="range"]:hover::-webkit-slider-thumb,
.take-control input[type="range"]:focus::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 12px var(--accent-glow);
}
.take-control input[type="range"]:hover::-moz-range-thumb,
.take-control input[type="range"]:focus::-moz-range-thumb {
  transform: scale(1.15);
}

/* ════════════════════════════════════════════════════════════════
   Progress bar
   ════════════════════════════════════════════════════════════════ */

.progress {
  height: 4px;
  background: var(--surface-input);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin: var(--space-2) 0;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hot));
  transition: width 0.4s var(--ease-standard);
  box-shadow: 0 0 6px var(--accent-glow);
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  font: var(--tabular);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

/* ════════════════════════════════════════════════════════════════
   Welcome / login surface
   ════════════════════════════════════════════════════════════════ */

.welcome {
  max-width: 560px;
  margin: var(--space-12) auto;
  text-align: center;
}
.welcome .crest {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border: 1px solid var(--border-accent);
  background:
    radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 70%),
    var(--surface-card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome .crest .mark {
  width: 18px;
  height: 18px;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 16px var(--accent-glow);
}
.welcome h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 36px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--text-display);
  margin: 0 0 var(--space-3);
}
.welcome p {
  font: var(--body);
  color: var(--text-secondary);
  margin: 0 auto var(--space-4);
  max-width: 480px;
}
.welcome .btn { height: 40px; padding: 0 var(--space-5); font-size: var(--fs-13); }
.welcome .fineprint {
  font: var(--eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: var(--space-4);
}

/* ════════════════════════════════════════════════════════════════
   Utility classes
   ════════════════════════════════════════════════════════════════ */

.muted { color: var(--text-tertiary); }
.danger { color: var(--status-error-fg); }
.warn   { color: var(--status-warning-fg); }
.small  { font-size: var(--fs-12); }
.row    { display: flex; align-items: center; gap: var(--space-2); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.section { margin-bottom: var(--space-6); }
.searchbar {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  max-width: 360px;
}
.searchbar input { height: 32px; padding: 0 var(--space-3); }

.inline-form { display: inline; }

.empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--text-tertiary);
  font: var(--body);
}
.empty .eyebrow { margin-bottom: var(--space-2); }

/* ════════════════════════════════════════════════════════════════
   Flash banners (?added=N / ?removed=N)
   ════════════════════════════════════════════════════════════════ */

.flash {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-accent);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-sm);
  font: var(--label-upper);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  animation: flash-in 0.25s var(--ease-standard);
}
.flash .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.flash strong {
  color: var(--text-display);
  font-weight: var(--fw-semibold);
}
@keyframes flash-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}