/* ------------------------------------------------------------------
     Tokens - identical to WoWMounts/Azeroth Appraiser so all noreset.app tools read as one
     family. Dark-first with a light "parchment" theme.
     ------------------------------------------------------------------ */
:root {
  --ground: #15100c;
  --ground-2: #1e1712;
  --ground-3: #27201a;
  --line: #3a2f26;
  --line-strong: #5a4a3b;
  --ink: #ecdfc8;
  --ink-2: #b9a88f;
  --ink-3: #90806c;
  --gold: #d9a441;
  --gold-ink: #15100c;
  --gold-soft: rgba(217, 164, 65, 0.14);

  --ok: #43d15a;
  --warn: #e0b13a;
  --bad: #e2574a;

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Crimson Pro", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --radius: 4px;
  --measure: 66ch;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #f4ecdd; --ground-2: #fbf6ea; --ground-3: #ece2cf;
    --line: #d8cbb3; --line-strong: #b8a689;
    --ink: #2a2118; --ink-2: #5e4f3f; --ink-3: #706353;
    --gold: #9a6b12; --gold-ink: #fbf6ea; --gold-soft: rgba(154, 107, 18, 0.12);
    --ok: #1f8f37; --warn: #a67c0a; --bad: #b8352a;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ground: #f4ecdd; --ground-2: #fbf6ea; --ground-3: #ece2cf;
  --line: #d8cbb3; --line-strong: #b8a689;
  --ink: #2a2118; --ink-2: #5e4f3f; --ink-3: #706353;
  --gold: #9a6b12; --gold-ink: #fbf6ea; --gold-soft: rgba(154, 107, 18, 0.12);
  --ok: #1f8f37; --warn: #a67c0a; --bad: #b8352a;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--body); font-size: 18px; line-height: 1.5;
  padding-inline: clamp(16px, 4vw, 48px); padding-block: 0 80px;
}
a { color: var(--gold); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
.wrap { max-width: 900px; margin-inline: auto; }
.eyebrow { font-family: var(--display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.lede { color: var(--ink-2); font-size: 16px; max-width: var(--measure); }
.muted { color: var(--ink-3); }
[hidden] { display: none !important; }

/* ---------------------------- Brand strip / masthead - shared with every noreset.app tool */
.brand-strip { padding-block: 10px; font-family: var(--display); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.brand-strip a { color: var(--ink-3); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.brand-strip a:hover, .brand-strip a:focus-visible { color: var(--gold); }
.brand-strip .tld { opacity: 0.6; }

.mast { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; padding-block: 28px 20px; border-bottom: 1px solid var(--line); }
.mast h1 { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: 0.06em; }
.mast p { margin: 0; color: var(--ink-2); font-size: 17px; }
.mast .spacer { flex: 1; }
.theme-toggle { background: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 12px; font-size: 14px; color: var(--ink-2); cursor: pointer; }

/* ---------------------------- Sample-data banner ---------------------------- */
.sample-banner {
  margin-top: 16px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--gold-soft); border-left: 3px solid var(--gold); font-size: 15px; color: var(--ink-2);
}
.sample-banner strong { color: var(--ink); }

/* ---------------------------- Addon cross-promo banner ---------------------------- */
.addon-banner {
  margin-top: 12px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--ground-2); border-left: 3px solid var(--line-strong); font-size: 15px; color: var(--ink-2);
}
.addon-banner strong { color: var(--ink); }
.addon-links { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin-left: 6px; }
.addon-links a { font-weight: 600; }
.addon-pending { color: var(--ink-3); font-style: italic; }

/* ---------------------------- Pickers ---------------------------- */
.picker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding-block: 18px 6px; }
.picker-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-3); }
.picker-row select {
  background: var(--ground-2); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 8px 10px; min-width: 220px; font-size: 15px; color: var(--ink);
}
.status { font-size: 15px; color: var(--ink-2); min-height: 1.5em; padding-block: 4px 8px; }
.status.bad { color: var(--bad); }

/* ---------------------------- Display-mode checkboxes ---------------------------- */
.options-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-block: 0 6px; font-size: 14px; color: var(--ink-2); }
.options-row .checkbox { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.options-row input[type="checkbox"] { accent-color: var(--gold); }
.split-note { color: var(--ink-3); font-style: italic; }

/* ---------------------------- Report ---------------------------- */
.dungeon-meta { padding-block: 12px 6px; }
.dungeon-meta h2 { font-family: var(--display); font-size: 24px; margin-top: 4px; }

.scroll { overflow-x: auto; margin-top: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
td.num, th.num { text-align: right; font-family: var(--mono); }
td.num.safe { color: var(--ok); }
td.num.median { color: var(--ink); }
td.num.risky { color: var(--bad); }
tbody tr:hover { background: var(--ground-2); }

.fine-print { margin-top: 18px; font-size: 14px; color: var(--ink-3); max-width: var(--measure); }

/* ---------------------------- Footer ---------------------------- */
.foot { padding-block: 32px 0; color: var(--ink-3); font-size: 14px; max-width: var(--measure); border-top: 1px solid var(--line); margin-top: 24px; }
.foot p { margin: 0 0 12px; }
.foot strong { color: var(--ink-2); font-family: var(--display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 6px; }
.foot a { color: var(--ink-2); }

@media (max-width: 640px) {
  .picker-row select { min-width: 0; width: 100%; }
}