/* Wyrm & Quill stylesheet.
   1. Base: layout, type, and form controls shared by screen and print.
   2. Screen theme: the painted, gilded look for each view (one @media screen block).
   3. Print.
   4. Late overrides that must win over the theme. */

/* ---------- 1. Base ---------- */

:root {
  color-scheme: dark;
  --ink: #171c1a;
  --panel: #232a25;
  --gold: #e6c98e;
  --paper: #f7eedc;
  --muted: #c2c3b0;
  --line: #536054;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 16px/1.6 system-ui, sans-serif;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px clamp(16px, 5vw, 76px);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

main { max-width: 1200px; margin: auto; padding: clamp(16px, 5vw, 64px); }

h1, h2, h3 { font-family: Georgia, serif; font-weight: normal; line-height: 1.1; margin: 0 0 .5em; }
h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); }
h2 { font-size: 2rem; }
h3 { font-size: 1.4rem; }
p { margin: .5em 0 1em; }
a { color: var(--gold); }
small, .muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

button, input, textarea, select { font: inherit; color: inherit; }
button {
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .55rem .9rem;
}
button:hover, button[aria-current=true] { border-color: var(--gold); color: var(--gold); }
button.primary { background: var(--gold); color: #262016; border-color: var(--gold); font-weight: 650; }

.brand { background: none; border: 0; color: var(--gold); letter-spacing: .16em; font-family: Georgia, serif; }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 6vw, 76px);
  border: 1px solid #786744;
  background: linear-gradient(100deg, #252921, #28342b);
  margin-bottom: 2rem;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url(wyrm-quill-crest.svg) right center / auto 115% no-repeat;
  opacity: .42;
}
.hero p { max-width: 44ch; }

.eyebrow { color: var(--gold); letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; font-weight: 650; }
.actions, nav { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.card { padding: 1.25rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); overflow-wrap: anywhere; }

.editor { max-width: 760px; }
.editor label:not(.check) { display: grid; gap: .25rem; margin: 0 0 1rem; }
.check { display: flex; gap: .6rem; margin: .5rem 0; }
input:not([type=checkbox]), textarea, select {
  width: 100%;
  background: #151a17;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .6rem;
}
textarea { min-height: 95px; resize: vertical; }
fieldset { border: 1px solid var(--line); margin: 1rem 0; }

#status { position: fixed; bottom: 1rem; right: 1rem; max-width: 85vw; background: var(--panel); padding: .5rem; border-radius: 4px; }
#status:empty { display: none; }

.document p { white-space: pre-wrap; overflow-wrap: anywhere; }
.document section { break-inside: avoid; margin: 1.5rem 0; }

@media (max-width: 560px) {
  header span { display: none; }
  .hero::after { opacity: .18; }
}

@media print {
  header, .no-print, #status { display: none; }
  body { background: #fff; color: #111; }
  main { padding: 0; }
  .document small { color: #444; }
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 0 .8rem; }
.stat-grid label:has(textarea) { grid-column: 1 / -1; }
.level-pick { display: grid; gap: .25rem; max-width: 240px; margin: 0 0 .8rem; }
.level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 0 .8rem; }
.level-grid .level-pick { max-width: none; }
.detail-panel { margin: .5rem 0 0; }
.detail-panel summary { margin-bottom: .4rem; }
.pick-option { margin-top: 1.5rem; }
.level-more { margin: -.6rem 0 1rem; font-size: .88rem; }
.printables-heading { font-size: 1.4rem; margin: 1.6rem 0 .2rem; }
.printable { display: flex; flex-direction: column; }
.combatant legend .tag { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-left: .4rem; }
.combatant-facts { margin: 0 0 .6rem; font-size: .9rem; }
.combat-board .combatant.combatant-pc { border-color: #8dbaa3; }
.combat-board .combatant.down { border-color: #c96b7e; }
.down-note { margin: 0 0 .6rem; color: #ffc6ce; font-weight: 650; }
.condition-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 .8rem; margin-top: .4rem; }
.condition-grid .check { margin: .25rem 0; font-size: .92rem; }
.difficulty-verdict { font: 1.25rem Georgia, serif; color: var(--gold); margin: .2rem 0 .4rem; }
.roll-result { font: 1.2rem Georgia, serif; color: var(--gold); min-height: 1.6em; }
.editor form h3, form.editor h3 { margin-top: .2rem; }
.printable .actions { margin-top: auto; margin-bottom: 0; }
.stat-heading { font-size: 1.1rem; margin: 1rem 0 .6rem; }
.pick-option + .pick-option { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.pick-option h2 { font-size: 1.5rem; margin-bottom: .2rem; }
.start-help { font-size: .92rem; max-width: 60ch; margin: .8rem 0 0; }
.level-legend { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 .5rem; max-width: 760px; }
.level-legend dt { color: var(--gold); font-family: Georgia, serif; }
.level-legend dd { margin: 0; }
.level-note { margin: -.4rem 0 1rem; font-size: .92rem; }
@media (max-width: 560px) {
  .level-legend { grid-template-columns: 1fr; gap: 0; }
  .level-legend dd { margin-bottom: .4rem; }
}
details { margin: 1rem 0; }
summary { cursor: pointer; color: var(--gold); margin-bottom: .75rem; }
#campaign-search { display: block; max-width: 620px; margin: .4rem 0 1rem; }

/* ---------- 2. Screen theme ---------- */

@media screen {

  /* Library: the hero opens like an illuminated journal cover. */
  .hero {
    min-height: 420px;
    display: grid;
    align-content: center;
    border-color: #ad8051;
    background: #1b1428;
    box-shadow: 0 18px 48px #08060d66, inset 0 0 0 5px #20162a;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px solid #d9ad7359;
    pointer-events: none;
  }
  .hero::after {
    background: linear-gradient(90deg, #1b1428 13%, #1b1428e8 30%, #1b142824 70%),
      url(dragon-gate.jpg) right center / cover no-repeat;
    opacity: 1;
  }
  .hero h1 {
    max-width: 10ch;
    margin-bottom: .28em;
    color: #ffe3a9;
    text-shadow: 0 3px 24px #d29d5850;
  }
  .hero .eyebrow::before { content: "✦  "; }
  .hero .actions { margin-bottom: 0; }
  .hero button { background: #2b203b; border-color: #a67e58; }
  .hero button.primary { background: linear-gradient(135deg, #ffe0a1, #ce9a58); }

  @media (max-width: 560px) {
    .hero { min-height: 390px; }
    .hero::after {
      background: linear-gradient(90deg, #1b1428f5, #1b142875),
        url(dragon-gate.jpg) 72% center / cover no-repeat;
    }
  }

  /* Library: ember field behind the campaign collection. */
  body:has(.hero) {
    min-height: 100vh;
    background:
      url(ember-field.svg) center top / max(1050px, 100vw) auto repeat-y,
      radial-gradient(ellipse at 12% 70%, #48245c 0%, transparent 48%),
      radial-gradient(ellipse at 91% 22%, #35264e 0%, transparent 53%),
      #150e22;
  }
  body:has(.hero) header { background: #170e25e8; border-bottom-color: #93704a80; }

  .hero ~ .eyebrow { display: flex; align-items: center; gap: .75rem; }
  .hero ~ .eyebrow::after {
    content: "";
    width: min(16rem, 30vw);
    height: 1px;
    background: linear-gradient(90deg, #c89e64, transparent);
  }
  .hero ~ .grid .card {
    border-color: #9173ac99;
    background: linear-gradient(145deg, #30203fec, #1c142aec);
    box-shadow: inset 0 2px #d8b47770, 0 8px 24px #0e081a55;
  }
  .hero ~ .grid button,
  .hero ~ .actions button { background: #281b39; border-color: #8a6da2; }

  /* Campaign workspace: painted backdrop and an illuminated chapter banner. */
  body:has(.campaign-banner) {
    --ink: #170f24;
    --panel: #2a1e38;
    --line: #775b8a;
    --muted: #d3c5de;
    min-height: 100vh;
    background:
      linear-gradient(180deg, #170f2420, #170f2440 48%, #170f24 95%) center top / 100% max(820px, 75vw) no-repeat,
      url(dragon-gate.jpg) right top / auto max(780px, 65vw) no-repeat,
      var(--ink);
  }
  body:has(.campaign-banner, .bestiary-entry, .npc-entry) header { background: #170f24e8; }

  .campaign-banner {
    padding: clamp(20px, 4vw, 44px);
    border: 1px solid #b38c58;
    background: linear-gradient(90deg, #21142def 18%, #21142da8 58%, #21142d35);
    box-shadow: inset 0 0 0 5px #d9ad7322;
    text-shadow: 0 2px 5px #130c1c;
  }
  .campaign-banner h1 {
    color: #ffe3a9;
    font-size: clamp(2rem, 5vw, 4.2rem);
    overflow-wrap: anywhere;
    margin: .35em 0;
  }
  .campaign-banner .eyebrow::before { content: "✦  "; }

  body:has(.campaign-banner) input:not([type=checkbox]),
  body:has(.campaign-banner) textarea,
  body:has(.campaign-banner) select { background: #1d142a; }

  nav[aria-label="Campaign sections"] {
    border-bottom: 1px solid #94724f;
    padding-bottom: .65rem;
    margin-bottom: 1.6rem;
  }
  nav[aria-label="Campaign sections"] button[aria-current="true"] {
    background: #4b315d;
    box-shadow: inset 0 -2px #e6c98e;
  }
  .campaign-banner ~ nav { background: #170f24df; padding: .65rem; }

  body:has(.campaign-banner) .card,
  body:has(.campaign-banner) .editor { background: #21172ef5; }
  body:has(.campaign-banner) .editor {
    padding: clamp(12px, 3vw, 26px);
    border: 1px solid var(--line);
    border-radius: 6px;
  }

  @media (max-width: 600px) {
    body:has(.campaign-banner) { background-size: 100% 700px, auto 610px; }
    .campaign-banner { background: linear-gradient(90deg, #21142df2, #21142d99); }
  }

  /* Preset picker: each draw is presented as a gilded card. */
  body:has(.preset-deck) {
    min-height: 100vh;
    --panel: #2b1b3c;
    --line: #8869a1;
    background: linear-gradient(90deg, #160e22f5 10%, #160e22ba 65%, #160e2270),
      url(dragon-gate.jpg) right top / cover no-repeat, #160e22;
  }
  .preset-deck {
    padding: clamp(18px, 4vw, 40px);
    background: #20142eeb;
    border: 1px solid #ad8051;
    box-shadow: inset 0 0 0 5px #d9ad7326, 0 14px 36px #0d081499;
  }
  .preset-deck select { background: #171022; }
  .preset-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(10px, 3vw, 24px);
    padding: clamp(14px, 3vw, 26px);
    background: radial-gradient(ellipse at top left, #583970, #291b3b 65%);
    border: 1px solid #bb965f;
    outline: 1px solid #e9c88c45;
    outline-offset: -6px;
  }
  .preset-card h3 { margin: 0; font-size: clamp(1.25rem, 3vw, 2rem); color: #ffe3aa; }
  .preset-card p { margin: .35rem 0 0; }
  .preset-sigil { color: #ffe3aa; font: clamp(2rem, 6vw, 4rem)/1 Georgia, serif; }

  @media (prefers-reduced-motion: no-preference) {
    .preset-revealed { animation: preset-reveal 440ms ease-out; }
  }

  /* Record folios: monsters and NPCs get framed panels over the painted backdrop. */
  body:has(.bestiary-entry, .npc-entry) {
    min-height: 100vh;
    --panel: #2b1b3c;
    --line: #8869a1;
    --muted: #d3c5de;
  }
  body:has(.bestiary-entry) {
    background: linear-gradient(180deg, #160e2270, #160e22 850px),
      url(dragon-gate.jpg) right top / max(100%, 1100px) auto no-repeat, #160e22;
  }
  body:has(.npc-entry) {
    background: linear-gradient(180deg, #160e2260, #160e22 850px),
      url(dragon-gate.jpg) right top / max(100%, 1100px) auto no-repeat, #160e22;
  }

  :is(.bestiary-entry, .npc-entry) {
    background: #20142ef0;
    border: 1px solid #ad8051;
    box-shadow: inset 0 0 0 5px #d9ad7326, 0 14px 36px #0d081499;
    padding: clamp(18px, 4vw, 38px);
  }
  :is(.bestiary-entry, .npc-entry) h1 { color: #ffe3aa; overflow-wrap: anywhere; }
  .bestiary-entry .eyebrow::before { content: "◇  "; }
  .npc-entry .eyebrow::before { content: "✦  "; }
  :is(.bestiary-entry, .npc-entry) input:not([type=checkbox]),
  :is(.bestiary-entry, .npc-entry) textarea { background: #171022; }

  .bestiary-identity,
  .bestiary-stats,
  .npc-identity,
  .npc-private,
  .npc-public,
  .npc-sheet,
  .record-sheet,
  .bestiary-lore {
    padding: clamp(12px, 3vw, 20px);
    margin: 1rem 0;
    border: 1px solid #bb965f;
    background: linear-gradient(145deg, #422a57, #271a39 72%);
  }
  .bestiary-identity,
  .bestiary-stats { min-inline-size: 0; }

  .bestiary-identity .actions { margin-bottom: 0; }
  .bestiary-stats legend { padding: 0 .6em; color: #ffe3aa; font: 1.35rem Georgia, serif; }
  .bestiary-stats summary { padding: .5rem 0; border-top: 1px solid #bb965f70; }

  /* NPCs separate the DM's private notes from the player introduction. */
  .npc-identity .actions,
  .npc-entry :is(.npc-private, .npc-public) label:not(.check) { margin-bottom: 0; }
  .bestiary-lore h2,
  .record-sheet h2,
  .npc-sheet h2 { font-size: 1.35rem; color: #ffe3aa; margin-bottom: .6rem; }
  .npc-combat { border: 1px solid #bb965f70; padding: .6rem clamp(12px, 3vw, 20px); background: #20142ecc; }
  .npc-combat summary { margin-bottom: 0; }
  .npc-combat[open] summary { margin-bottom: .6rem; }
  .npc-private { border-color: #a67298; background: linear-gradient(145deg, #43253c, #2b1b33); }
  .npc-public { border-color: #8dbaa3; background: linear-gradient(145deg, #263b3d, #21253a); }

  /* Journal pages: forms, combat tracker, and printable documents. */
  body:has(.editor, .combat-board, .document) {
    min-height: 100vh;
    --panel: #2b1b3c;
    --line: #8869a1;
    --muted: #d3c5de;
  }
  body:has(.editor, .combat-board, .document):not(:has(.campaign-banner, .preset-deck, .bestiary-entry, .npc-entry)) {
    background:
      linear-gradient(90deg, #160e22f2, #160e2290),
      url(dragon-gate.jpg) right top / max(100%, 1100px) auto no-repeat,
      #160e22;
  }
  .editor:not(.preset-deck, .bestiary-entry, .npc-entry),
  .combat-board,
  .document {
    background: #21162ef2;
    border: 1px solid #a88151;
    padding: clamp(18px, 4vw, 38px);
    box-shadow: inset 0 0 0 5px #d9ad7322, 0 14px 36px #0d081477;
    overflow-wrap: anywhere;
  }
  .combat-board .editor { padding: 0; border: 0; box-shadow: none; background: transparent; }

  .editor h1,
  .combat-board h2,
  .document h1 { color: #ffe3aa; }
  .editor input:not([type=checkbox]),
  .editor textarea,
  .editor select { background: #171022; }
  .editor fieldset { min-inline-size: 0; }

  .combat-board fieldset,
  .document section {
    padding: 1rem;
    border: 1px solid #8964a0;
    background: linear-gradient(135deg, #39254e, #251a35);
  }
  .combat-board legend,
  .document h2 { color: #efcf93; }
  .document section { border-inline-start: 3px solid #b99360; }
  .document section p:last-child { margin-bottom: 0; }
}

@keyframes preset-reveal {
  from { transform: translateY(5px); box-shadow: 0 0 26px #c596ff80; }
  to { transform: translateY(0); box-shadow: none; }
}

/* ---------- 3. Print ---------- */

@media print {
  .document .eyebrow { color: #555; }
}

/* ---------- 4. Late overrides ---------- */

button[data-action^="delete-campaign:"] { color: #ffc6ce; border-color: #a56a7f; }
button[data-action^="delete-campaign:"]:hover { background: #51283e; border-color: #ffc6ce; }

header #home-link { margin-inline-start: .65rem; }

.campaign-nav { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
.campaign-nav button { flex: none; }
.campaign-nav:first-child { margin-top: 0; }

.brand { display: inline-flex; align-items: center; gap: .6rem; text-align: left; }
.brand img { flex: none; }