/* ============================================================
   Ancient Grimoire — shared styles
   Dark, warm, parchment-and-candlelight.
   ============================================================ */

:root {
  --bg:         #0f0d0b;
  --bg-2:       #17130f;
  --panel:      #1d1813;
  --panel-2:    #241d16;
  --line:       #3a2f24;
  --ink:        #ece3d4;
  --ink-dim:    #a2947f;
  --ink-faint:  #6d6252;
  --gold:       #c9a227;
  --gold-soft:  #e0c168;
  --green:      #6fae5c;
  --amber:      #d9922b;
  --red:        #c05a4a;
  --blue:       #6b8fb5;
  --radius:     10px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 500px at 50% -10%, #241c14 0%, transparent 70%),
    var(--bg);
  color: var(--ink);
  font: 16px/1.55 ui-serif, Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-soft); }

.shell { max-width: 1100px; margin: 0 auto; padding: 24px 20px 64px; }
.shell.centered {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding-bottom: 24px;
}

/* ---------- header ---------- */

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0 20px; border-bottom: 1px solid var(--line); margin-bottom: 28px;
}
.topbar .sigil { margin: 0; font-size: 20px; }
.topbar nav { display: flex; gap: 4px; margin-left: 12px; }
.topbar nav a {
  padding: 6px 12px; border-radius: 6px; text-decoration: none;
  color: var(--ink-dim); font-size: 14px; font-family: system-ui, sans-serif;
}
.topbar nav a:hover { background: var(--panel); color: var(--ink); }
.topbar nav a.active { background: var(--panel-2); color: var(--gold-soft); }
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 13px; color: var(--ink-faint); font-family: system-ui, sans-serif; }

.sigil {
  font-family: ui-serif, Georgia, serif;
  letter-spacing: 0.04em;
  color: var(--gold-soft);
  font-weight: 600;
}

/* ---------- cards / panels ---------- */

.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.card.narrow { width: min(420px, 100%); text-align: center; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* ---------- typography helpers ---------- */

.muted { color: var(--ink-dim); }
.small { font-size: 13px; }
.mono  { font-family: var(--mono); font-size: 13px; }
h2 { font-size: 17px; margin: 0 0 14px; color: var(--gold-soft); font-weight: 600; }
.label {
  font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 7px;
}

/* ---------- stats ---------- */

.stat { text-align: center; padding: 18px 12px; }
.stat .num {
  font: 700 30px/1 ui-serif, Georgia, serif;
  color: var(--gold-soft); display: block; margin-bottom: 6px;
}
.stat .cap {
  font: 500 12px/1.3 system-ui, sans-serif;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint);
}

/* ---------- progress bars ---------- */

.bar-row { margin-bottom: 20px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 7px; font-family: system-ui, sans-serif; font-size: 13px;
}
.bar-head .name { color: var(--ink); }
.bar-head .val  { color: var(--ink-dim); font-family: var(--mono); font-size: 12px; }
.bar {
  height: 10px; border-radius: 999px;
  background: #100d0a; border: 1px solid var(--line); overflow: hidden;
}
.bar > i {
  display: block; height: 100%; width: 0;
  border-radius: 999px; transition: width .5s ease;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 100%);
}
.bar.green > i { background: linear-gradient(90deg, #4d8a3d, var(--green)); }
.bar.blue  > i { background: linear-gradient(90deg, #4d6f91, var(--blue)); }

/* the big one */
.hero-bar { padding: 26px; text-align: center; }
.hero-bar .headline {
  font: 700 46px/1 ui-serif, Georgia, serif; color: var(--gold-soft);
}
.hero-bar .sub {
  font-family: system-ui, sans-serif; font-size: 13px;
  color: var(--ink-faint); margin: 8px 0 18px;
  letter-spacing: 0.05em; text-transform: uppercase;
}

/* ---------- forms + buttons ---------- */

input[type="email"], input[type="password"], input[type="text"], textarea, select {
  width: 100%; padding: 11px 13px;
  background: #100d0a; color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px;
  font: 15px/1.5 system-ui, sans-serif;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,.14);
}
textarea { resize: vertical; min-height: 120px; font-family: ui-serif, Georgia, serif; font-size: 16px; }
.field { margin-bottom: 15px; text-align: left; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  font: 600 14px/1 system-ui, sans-serif;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:hover:not(:disabled) { background: #2e2519; border-color: #4d3f2e; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(180deg, #b8901f, #8f6f16);
  border-color: #c9a227; color: #1a1409;
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #cfa22a, #a37f1a); }
.btn-approve { border-color: #4d7a3f; color: #b6dfa6; }
.btn-approve:hover:not(:disabled) { background: #253520; }
.btn-reject  { border-color: #8a4438; color: #efb5aa; }
.btn-reject:hover:not(:disabled) { background: #3a2320; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- chips ---------- */

.chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font: 600 11px/1.6 system-ui, sans-serif;
  letter-spacing: .04em; text-transform: uppercase; border: 1px solid;
}
.chip-approved  { color: #b6dfa6; border-color: #4d7a3f; background: #1f2c1a; }
.chip-pending   { color: #f0c98a; border-color: #8a6a2e; background: #2e2415; }
.chip-rejected  { color: #efb5aa; border-color: #8a4438; background: #2e1c19; }
.chip-generated { color: #a9c6e0; border-color: #47637e; background: #1a232c; }
.chip-none      { color: var(--ink-faint); border-color: var(--line); background: #171310; }

/* ---------- card-type badges ----------
   Deliberately a different SHAPE from status chips (soft rectangle, no border,
   vs. outlined pill) as well as a different palette. Colour alone isn't enough:
   the two sit two columns apart in the same row, and roughly 1 in 12 men can't
   separate the greens from the ambers. Shape carries the distinction, colour
   just makes scanning faster.
   Hues are held clear of the status palette (green/amber/red/steel-blue). */

.tchip {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font: 600 10.5px/1.6 system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  margin-left: 8px; vertical-align: 1px;
  background: var(--t-bg); color: var(--t-ink);
}

/* One source of truth per type: the badge and the row's left accent bar both
   read these two vars, so adding a type means adding one rule here. */
.t-survivor  { --t-bg: #16302b; --t-ink: #8fd3bf; }  /* verdigris */
.t-zombie    { --t-bg: #2b1f33; --t-ink: #c3a3dd; }  /* violet    */
.t-spawn     { --t-bg: #33202a; --t-ink: #dd9db4; }  /* rose      */
.t-equipment { --t-bg: #33280f; --t-ink: #e2c273; }  /* brass     */
.t-reference { --t-bg: #1e232b; --t-ink: #9fb0c4; }  /* slate     */
.t-unknown   { --t-bg: #171310; --t-ink: var(--ink-faint); }

/* ---------- table ---------- */

table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; font-size: 14px; }
th {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line);
  font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
}
td { padding: 11px 10px; border-bottom: 1px solid #241d16; vertical-align: top; }
tbody tr:hover { background: #191410; }
td .title { color: var(--ink); font-weight: 500; }

/* Left accent bar on the card cell — same colour as the badge text, so a long
   list reads as bands of type without having to parse any words. Falls back to
   transparent, keeping the 3px inset consistent so titles stay aligned. */
td.card-cell { border-left: 3px solid var(--t-ink, transparent); padding-left: 10px; }
td .snippet {
  color: var(--ink-faint); font-size: 12.5px; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- review page ---------- */

.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .review-grid { grid-template-columns: 1fr; } }

.card-image {
  width: 100%; border-radius: 8px; border: 1px solid var(--line);
  background: #100d0a; display: block;
}
.card-image-empty {
  aspect-ratio: 3/4; display: grid; place-items: center;
  border: 1px dashed var(--line); border-radius: 8px;
  color: var(--ink-faint); font: 13px system-ui, sans-serif; background: #100d0a;
}
.source-text {
  background: #100d0a; border: 1px solid var(--line); border-radius: 7px;
  padding: 13px; font-family: var(--mono); font-size: 13px;
  color: var(--ink-dim); white-space: pre-wrap;
}

/* Lore reads as prose, not as data. Serif + italic so a reviewer can tell at
   a glance that it is flavour and not the rules text above it. */
.source-text.lore-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px; font-style: italic; line-height: 1.6;
  border-left: 3px solid #6b4f2a;
}
audio { width: 100%; margin-top: 6px; }

.history { list-style: none; margin: 0; padding: 0; font-family: system-ui, sans-serif; font-size: 13px; }
.history li { padding: 8px 0; border-bottom: 1px solid #241d16; color: var(--ink-dim); }
.history li:last-child { border-bottom: none; }

.empty-state { text-align: center; padding: 56px 24px; }
.empty-state .big { font-size: 40px; margin-bottom: 12px; }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(16px);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  padding: 11px 20px; border-radius: 8px;
  font: 14px system-ui, sans-serif; box-shadow: 0 8px 28px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast[data-kind="error"] { border-color: #8a4438; color: #efb5aa; }
.toast[data-kind="success"] { border-color: #4d7a3f; color: #b6dfa6; }

.error-msg {
  color: #efb5aa; background: #2e1c19; border: 1px solid #8a4438;
  border-radius: 7px; padding: 10px 13px;
  font: 13px system-ui, sans-serif; margin-bottom: 14px; text-align: left;
}
.hidden { display: none !important; }