/* MM6 Companion — theme & layout. Dark-fantasy default + light parchment. */
:root {
  --bg: #11131c;
  --bg-2: #181b28;
  --bg-3: #20243450;
  --panel: #1b1f2e;
  --panel-2: #232838;
  --border: #2e3344;
  --text: #e6e8f0;
  --text-dim: #aab0c4;
  --text-faint: #79809a;
  --gold: #d4af37;
  --gold-soft: #e8cd72;
  --ember: #e2723b;
  --blood: #b3434a;
  --teal: #4bb6a8;
  --violet: #8a7bd8;
  --link: #8ec5ff;
  --shadow: 0 6px 24px rgba(0,0,0,.35);
  --radius: 10px;
  --maxw: 1180px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

[data-theme="light"] {
  --bg: #efe6d2;
  --bg-2: #e8dcc2;
  --bg-3: #d8c9a830;
  --panel: #f6efe0;
  --panel-2: #efe5cf;
  --border: #cdbb95;
  --text: #2e2a20;
  --text-dim: #5f5848;
  --text-faint: #857c66;
  --gold: #9a7b1e;
  --gold-soft: #7d6418;
  --ember: #b8531e;
  --blood: #9c2f37;
  --teal: #1f7a6e;
  --violet: #5b4cae;
  --link: #2a5db0;
  --shadow: 0 6px 20px rgba(80,60,20,.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.65;
  background-image: radial-gradient(1200px 600px at 80% -10%, #20243422, transparent),
                    radial-gradient(900px 500px at -10% 10%, #2a223a22, transparent);
  background-attachment: fixed;
}
[hidden] { display: none !important; }
[x-cloak] { display: none !important; }
.reco-parties .comp-card.is-reco { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, var(--shadow); }
.reco-parties .ease .tag { margin-right: .3rem; }
.curve-fit { font-size: .85rem; margin: .5rem 0; border-left: 3px solid var(--gold); padding-left: .6rem; color: var(--text-dim); }
.curve-fit strong { color: var(--gold-soft); display: block; margin-bottom: .2rem; }
.curve-fit > div { margin: .15rem 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { font-family: var(--serif); line-height: 1.25; color: var(--text); }
h1 { font-size: 2rem; margin: .2em 0 .5em; }
h2 { font-size: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: .25em; margin-top: 1.6em; }
h3 { font-size: 1.2rem; color: var(--gold-soft); }
code, pre { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
pre { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: .8em 1em; overflow:auto; font-size: .86em; line-height:1.5; }
hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: .94em; }
th, td { border: 1px solid var(--border); padding: .45em .6em; text-align: left; vertical-align: top; }
th { background: var(--panel-2); color: var(--gold-soft); }
tbody tr:nth-child(even) { background: var(--bg-3); }
img { max-width: 100%; height: auto; border-radius: 6px; }

/* ---- header / nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: #0e1018ee; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .site-header { background: #efe6d2ee; }
.nav { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; }
.brand { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--gold); white-space: nowrap; }
.brand span { color: var(--ember); }
.nav-links { display: flex; gap: .2rem; flex-wrap: wrap; }
.nav-links a { color: var(--text-dim); padding: .35rem .6rem; border-radius: 6px; font-size: .92rem; }
.nav-links a:hover, .nav-links a.active { color: var(--text); background: var(--panel-2); text-decoration: none; }
.nav-spacer { flex: 1; }
.search-box { position: relative; }
.search-box input {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: .4rem .7rem; width: 210px; font-size: .9rem;
}
.search-box input:focus { outline: none; border-color: var(--gold); }
.search-results {
  position: absolute; right: 0; top: 110%; width: 380px; max-height: 60vh; overflow:auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: .4rem;
}
.search-results a { display:block; padding:.45rem .55rem; border-radius:6px; color:var(--text); }
.search-results a:hover { background: var(--panel-2); text-decoration:none; }
.search-results .sr-title { font-weight:600; }
.search-results .sr-ctx { font-size:.8rem; color: var(--text-faint); }
.icon-btn { background: var(--bg-2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:.4rem .55rem; cursor:pointer; font-size:.95rem; }
.icon-btn:hover { border-color: var(--gold); }

/* ---- layout ---- */
.layout { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 240px 1fr; gap: 2rem; padding: 1.4rem 1rem 4rem; }
.layout.no-toc { grid-template-columns: 1fr; }
.toc { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 92px); overflow:auto; font-size: .9rem; border-left: 2px solid var(--border); padding-left: .8rem; }
.toc a { display:block; color: var(--text-dim); padding: .15rem 0; }
.toc a:hover, .toc a.active { color: var(--gold-soft); text-decoration: none; }
.content { min-width: 0; }
.content > :first-child { margin-top: 0; }

/* ---- callout blocks ---- */
.block { margin: 1.1rem 0; }
.callout { border-left: 4px solid var(--border); background: var(--panel); border-radius: 8px; padding: .7rem .95rem; margin: 1rem 0; }
.callout .callout-h { font-weight: 700; font-family: var(--serif); margin-bottom: .25rem; display:flex; align-items:center; gap:.45rem; }
.callout.tip      { border-color: var(--teal);  }
.callout.tip .callout-h { color: var(--teal); }
.callout.warning  { border-color: var(--ember); }
.callout.warning .callout-h { color: var(--ember); }
.callout.patch    { border-color: var(--violet); background: linear-gradient(90deg, #8a7bd815, transparent); }
.callout.patch .callout-h { color: var(--violet); }
.callout.power    { border-color: var(--gold); background: linear-gradient(90deg, #d4af3718, transparent); }
.callout.power .callout-h { color: var(--gold); }
.callout.combat   { border-color: var(--blood); }
.callout.combat .callout-h { color: var(--blood); }
.callout.dungeon  { border-color: var(--gold-soft); background: var(--panel-2); }
.combat-cols { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.combat-cols h4 { margin:.2rem 0 .3rem; }
.combat-cols .clear h4 { color: var(--teal); }
.combat-cols .skip h4 { color: var(--ember); }
.combat-cols ul { margin:.2rem 0; padding-left: 1.1rem; }

/* spoiler toggle */
details.spoiler { border: 1px dashed var(--gold); border-radius: 8px; padding: .2rem .8rem; margin: .9rem 0; background: var(--bg-3); }
details.spoiler > summary { cursor: pointer; color: var(--gold-soft); font-weight: 600; padding: .4rem 0; list-style: none; }
details.spoiler > summary::before { content: "👁 "; }
details.spoiler[open] > summary::before { content: "🔓 "; }
details.spoiler > summary::-webkit-details-marker { display:none; }

/* ---- cards / grids ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1rem; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.card h3 { margin-top: 0; }
.card.link-card { transition: transform .12s, border-color .12s; }
.card.link-card:hover { transform: translateY(-2px); border-color: var(--gold); }
.badge { display:inline-block; font-size:.72rem; padding:.1rem .5rem; border-radius: 999px; border:1px solid var(--border); color: var(--text-dim); }
.badge.diff-easy { color: var(--teal); border-color: var(--teal); }
.badge.diff-hard { color: var(--ember); border-color: var(--ember); }
.badge.diff-veryhard { color: var(--blood); border-color: var(--blood); }
.tag { display:inline-block; font-size:.72rem; padding:.05rem .45rem; border-radius:4px; background: var(--panel-2); color: var(--text-faint); margin: 0 .2rem .2rem 0; }

/* ---- hero (home) ---- */
.hero { text-align:center; padding: 3rem 1rem 1rem; max-width: 820px; margin: 0 auto; }
.hero h1 { font-size: 2.6rem; color: var(--gold); }
.hero p { color: var(--text-dim); font-size: 1.1rem; }

/* progress / dashboard */
.progress-bar { background: var(--bg-2); border:1px solid var(--border); border-radius:999px; height: 14px; overflow:hidden; }
.progress-bar > span { display:block; height:100%; background: linear-gradient(90deg, var(--gold), var(--ember)); }

/* stage step checkboxes */
.step-done { opacity: .55; }
.check { accent-color: var(--gold); width:1.05em; height:1.05em; cursor:pointer; }

/* back to top */
.to-top { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 40; }

/* footer */
.site-footer { border-top:1px solid var(--border); color: var(--text-faint); font-size:.85rem; padding: 1.4rem 1rem; text-align:center; }
.src-footer { font-size:.82rem; color: var(--text-faint); border-top:1px dashed var(--border); margin-top:2rem; padding-top:.8rem; }
.src-footer a { color: var(--text-dim); }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .toc { display:none; }
  .combat-cols { grid-template-columns: 1fr; }
  .search-box input { width: 140px; }
  .nav-links a { padding: .3rem .45rem; }
}
@media print {
  .site-header, .toc, .to-top, .search-box, .theme-toggle { display:none !important; }
  body { background: #fff; color:#000; }
  details.spoiler { border:none; } details.spoiler > summary { display:none; }
  details.spoiler[open] { display:block; }
}

/* ---- generated-page helpers (use existing vars only; no new theme) ---- */
.muted { color: var(--text-faint); }
.tag + .tag { margin-left: .15rem; }

/* stage steps: a small "done" check tucked to the right of each block */
.block.step { position: relative; padding-right: 3.2rem; }
.step-check { position: absolute; top: .2rem; right: .2rem; display: inline-flex;
  align-items: center; gap: .25rem; font-size: .72rem; color: var(--text-faint); cursor: pointer; }
.step-check-label { user-select: none; }
.stage-intro { font-size: 1.04rem; color: var(--text); }
.stage-nav { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between;
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.visit-stages { color: var(--text-dim); }
.gf-note { color: var(--text-dim); }

/* hidden promotion steps + adaptive toggle */
.promo-hidden { display: none !important; }

/* quests (region pages + dashboard) */
.quest-item { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0;
  padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.quest-check { padding-top: .15rem; }
.quest-body { min-width: 0; }
.quest-giver { color: var(--text-dim); font-size: .9rem; margin: .15rem 0 .4rem; }
.stage-ref { font-size: .8rem; }
.region-quests { margin: .6rem 0; border: 1px solid var(--border); border-radius: 8px;
  padding: .2rem .8rem; }
.region-quests > summary { cursor: pointer; font-weight: 600; padding: .4rem 0; }
.region-quests ul { list-style: none; padding-left: 0; }
.region-quests li { padding: .15rem 0; }

/* planner */
.planner-toolbar { display: flex; gap: .6rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.char-card .char-head { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.char-name { flex: 1; background: var(--bg-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; padding: .35rem .5rem; }
.char-card select, .skill-row select { background: var(--bg-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; padding: .3rem .4rem; }
.char-card label { display: block; margin: .4rem 0; color: var(--text-dim); font-size: .9rem; }
.char-detail .role { color: var(--text-dim); font-size: .9rem; }
.build-buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0; }
.skills-list summary { cursor: pointer; color: var(--gold-soft); padding: .3rem 0; }
.skill-row { display: flex; align-items: center; gap: .4rem; padding: .15rem 0;
  font-size: .85rem; color: var(--text); }

/* maps */
.map-figure { margin: 1.5rem 0; }
.map-figure figcaption h3 { margin-bottom: .2rem; }
.map-figure img { border: 1px solid var(--border); }

/* principles list spacing */
ul.principles li { margin-bottom: .7rem; }

/* progression coach sidebar (walkthrough only) */
.layout.has-coach { grid-template-columns: 240px 1fr 300px; }
.layout.has-coach.no-toc { grid-template-columns: 1fr 300px; }
.coach { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 92px); overflow:auto; font-size: .9rem; border-left: 2px solid var(--border); padding-left: .8rem; }
.coach summary { cursor: pointer; font-family: var(--serif); }
.coach .coach-group h4 { margin: .8rem 0 .35rem; color: var(--gold-soft); }
.coach-item { display:flex; gap:.5rem; padding:.45rem 0; border-bottom:1px solid var(--border); }
.coach-item .ci-icon { color: var(--teal); }
.coach-item.promote .ci-icon { color: var(--gold); }
.coach-item.train .ci-icon { color: var(--teal); }
.coach-item.invest .ci-icon { color: var(--text-dim); }
.coach-item .ci-who { font-weight:700; }
.coach-item .ci-how { color: var(--text-dim); font-size:.82rem; margin:.15rem 0; }
.coach-item .ci-cav { color: var(--ember); font-size:.8rem; }
.coach-item .ci-link { font-size:.8rem; }
@media (max-width: 1100px) { .layout.has-coach { grid-template-columns: 240px 1fr; } .layout.has-coach .coach { grid-column: 1 / -1; position: static; max-height:none; border-left:none; padding-left:0; } }
@media (max-width: 860px) { .layout.has-coach { grid-template-columns: 1fr; } }
@media print { .coach { display:none !important; } }