/* Quest Board v4.4.0 mockups — shared design system.
 *
 * Both mockups use this file unchanged. That is the point: the two designs must
 * differ in STRUCTURE (what is on a screen, how you move between screens), never
 * in polish, or an evaluator picks the prettier one for the wrong reason.
 *
 * Palette: ink on warm paper for "Book" surfaces; a true dark for "Table"
 * surfaces, which are used at a lit table with a phone flat on the wood.
 * Accent is a deep verdigris — a lantern-and-ledger colour, not a SaaS blue.
 */

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --paper:        #f7f4ee;
  --paper-raised: #fffdf8;
  --paper-sunk:   #efeae0;
  --rule:         #ded6c8;
  --rule-strong:  #c9bfae;

  --ink:          #23201b;
  --ink-soft:     #55503f;
  --ink-faint:    #857e6c;

  --accent:       #1f5f57;
  --accent-soft:  #dfece9;
  --accent-ink:   #123d37;

  --warn:         #8a5a12;
  --warn-soft:    #f6ecd8;
  --live:         #a3341f;
  --live-soft:    #f7e5e0;
  --good:         #2c6134;
  --gm:           #9a5a14;
  --gm-soft:      #fbf1df;
  --gm-hatch:     rgba(154, 90, 20, .13);
  --map-land:     #efe5cf;
  --map-sea:      #d3e2dd;
  --map-sea-ink:  #8fb1a9;
  --map-marsh:    #c9d4b4;
  --map-rock:     #d8cdb6;
  --map-ink:      #6d624d;
  --map-road:     #a58a5f;
  --mk-holding:   #5d4b8e;
  --sb-trait:     #6e2a1f;
  --sb-size:      #3f6b3a;
  --sb-unique:    #5a2a73;

  --table-bg:     #14161a;
  --table-raised: #1e2229;
  --table-rule:   #333a45;
  --table-ink:    #eceff4;
  --table-soft:   #a3adbb;

  --step--1: 0.8125rem;
  --step-0:  0.9375rem;
  --step-1:  1.0625rem;
  --step-2:  1.375rem;
  --step-3:  1.75rem;
  --step-4:  2.25rem;

  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;

  --r-1: 3px; --r-2: 6px; --r-3: 10px; --r-4: 16px;
  --shadow: 0 1px 2px rgba(35,32,27,.06), 0 6px 18px -10px rgba(35,32,27,.25);

  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:        #17181a;
    --paper-raised: #1f2124;
    --paper-sunk:   #121314;
    --rule:         #32353a;
    --rule-strong:  #464a51;
    --ink:          #e9e7e2;
    --ink-soft:     #b5b1a8;
    --ink-faint:    #85817a;
    --accent:       #6fbcae;
    --accent-soft:  #17322e;
    --accent-ink:   #a8ded3;
    --warn:         #d9a75a;
    --warn-soft:    #33291a;
    --live:         #e4795f;
    --live-soft:    #34201c;
    --good:         #7fbd88;
    --gm:           #e3ad62;
    --gm-soft:      #2d2416;
    --gm-hatch:     rgba(227, 173, 98, .15);
    --map-land:     #2a2720;
    --map-sea:      #16252a;
    --map-sea-ink:  #3f6a66;
    --map-marsh:    #2c3526;
    --map-rock:     #201e1a;
    --map-ink:      #b8ac92;
    --map-road:     #8c7552;
    --mk-holding:   #a898d8;
    --sb-trait:     #8d3b2c;
    --sb-size:      #4f8048;
    --sb-unique:    #7a4a96;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 22px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #17181a; --paper-raised: #1f2124; --paper-sunk: #121314;
  --rule: #32353a; --rule-strong: #464a51;
  --ink: #e9e7e2; --ink-soft: #b5b1a8; --ink-faint: #85817a;
  --accent: #6fbcae; --accent-soft: #17322e; --accent-ink: #a8ded3;
  --warn: #d9a75a; --warn-soft: #33291a; --live: #e4795f; --live-soft: #34201c;
  --good: #7fbd88;
  --gm: #e3ad62; --gm-soft: #2d2416; --gm-hatch: rgba(227,173,98,.15);
  --map-land: #2a2720; --map-sea: #16252a; --map-sea-ink: #3f6a66; --map-marsh: #2c3526;
  --map-rock: #201e1a; --map-ink: #b8ac92; --map-road: #8c7552; --mk-holding: #a898d8;
  --sb-trait: #8d3b2c; --sb-size: #4f8048; --sb-unique: #7a4a96;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 22px -12px rgba(0,0,0,.7);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--step-0)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-4); letter-spacing: -0.01em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 var(--sp-4); }
a { color: var(--accent); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
img { max-width: 100%; }

.prose { font-family: var(--serif); font-size: var(--step-1); line-height: 1.65; max-width: 64ch; }
.prose p { margin-bottom: var(--sp-4); }

/* Small caps label used for section eyebrows and field names. */
.label {
  font: 600 var(--step--1)/1.2 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.tnum { font-variant-numeric: tabular-nums; }

/* ── Surfaces ──────────────────────────────────────────────────────────── */
.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  padding: var(--sp-4);
}
.card--flat { box-shadow: none; }
.card--lift { box-shadow: var(--shadow); }
.panel { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-3); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-5) 0; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-2 { display: flex; flex-direction: column; gap: var(--sp-2); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-wrap { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.grow { flex: 1; }
.scroll-x { overflow-x: auto; }

/* ── Controls ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font: 600 var(--step-0)/1 var(--sans);
  padding: .6rem .9rem;
  border-radius: var(--r-2);
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { border-color: var(--ink-faint); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn--lg { font-size: var(--step-1); padding: .85rem 1.25rem; }
.btn--sm { font-size: var(--step--1); padding: .4rem .6rem; }
.btn--block { width: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: 500 var(--step--1)/1 var(--sans);
  padding: .35rem .6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-raised);
  color: var(--ink-soft);
  white-space: nowrap;
}
.chip--on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.chip--live { background: var(--live-soft); border-color: var(--live); color: var(--live); }
.chip--warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }

.field {
  width: 100%; font: var(--step-0) var(--sans); color: var(--ink);
  padding: .55rem .7rem; border: 1px solid var(--rule-strong);
  border-radius: var(--r-2); background: var(--paper-raised);
}
.field::placeholder { color: var(--ink-faint); }

/* Status dot for RSVP rosters and recording state. */
.dot { width: .6rem; height: .6rem; border-radius: 999px; background: var(--rule-strong); flex: none; }
.dot--yes { background: var(--good); }
.dot--no { background: var(--live); }
.dot--maybe { background: var(--warn); }
.dot--live { background: var(--live); box-shadow: 0 0 0 0 var(--live); animation: pulse 2s infinite; }
@keyframes pulse {
  70% { box-shadow: 0 0 0 .5rem rgba(163,52,31,0); }
  100% { box-shadow: 0 0 0 0 rgba(163,52,31,0); }
}
@media (prefers-reduced-motion: reduce) { .dot--live { animation: none; } }

/* Person: an initial disc plus a name, used in rosters and speaker lists. */
.who { display: inline-flex; align-items: center; gap: var(--sp-2); }
.who__disc {
  width: 1.75rem; height: 1.75rem; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
  font: 600 var(--step--1)/1 var(--sans);
}

/* ── Frames: the phone and desktop viewports a screen is shown inside ──── */
.frames { display: grid; gap: var(--sp-6); }
.frame { display: grid; gap: var(--sp-2); }
.frame__cap { font: 600 var(--step--1)/1.2 var(--sans); color: var(--ink-faint); letter-spacing: .04em; text-transform: uppercase; }
.frame__box {
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-4);
  background: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.frame--phone .frame__box { width: 390px; max-width: 100%; height: 780px; overflow-y: auto; }
.frame--desk .frame__box { width: 100%; height: 760px; overflow: auto; }
@media (max-width: 900px) {
  .frame--desk .frame__box { height: 560px; }
}

/* ── App chrome shared by both mockups ─────────────────────────────────── */
.appbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-raised);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 5;
}
.appbar__brand { font: 600 var(--step-1)/1 var(--serif); color: var(--ink); }
.appbar__brand span { color: var(--accent); }

.tablemode {
  background: var(--table-bg); color: var(--table-ink);
  min-height: 100%;
}
.tablemode .card, .tablemode .panel { background: var(--table-raised); border-color: var(--table-rule); color: var(--table-ink); }
.tablemode .muted, .tablemode .label { color: var(--table-soft); }
.tablemode .btn { background: var(--table-raised); border-color: var(--table-rule); color: var(--table-ink); }
.tablemode .btn--primary { background: var(--accent); border-color: var(--accent); color: #04110f; }
.tablemode .chip { background: transparent; border-color: var(--table-rule); color: var(--table-soft); }
.tablemode h1, .tablemode h2, .tablemode h3 { color: var(--table-ink); }

/* Event log rows — used by both mockups so the new feature reads identically. */
.events { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-3); overflow: hidden; }
.events__row { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--paper-raised); }
.events__t { font: var(--step--1)/1.5 var(--mono); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.events__what { font-size: var(--step-0); }
.events__who { color: var(--ink-faint); }

/* Utility */
.hide { display: none !important; }
@media (max-width: 700px) { .desk-only { display: none !important; } }
@media (min-width: 701px) { .phone-only { display: none !important; } }

/* ══ Wiki components ═══════════════════════════════════════════════════════
 * Styles for everything shared/wiki.js (window.QBW) renders. Class prefix
 * qbw-. Both mockups use this unchanged, so the wiki reads the same in both.
 * New colours are tokens (see the three :root blocks above): --gm* for the
 * GM-only treatment, --map-* for the parchment maps, --sb-* for stat-block
 * trait chips, --mk-holding for organisation holdings.
 * ════════════════════════════════════════════════════════════════════════ */

/* Table mode: remap the paper tokens so every wiki component reads on the
   dark table surface without a second set of rules. */
.tablemode .qbw, .tablemode.qbw {
  --paper: var(--table-bg); --paper-raised: var(--table-raised); --paper-sunk: #101216;
  --rule: var(--table-rule); --rule-strong: #4a5362;
  --ink: var(--table-ink); --ink-soft: var(--table-soft); --ink-faint: #818c9c;
  --accent: #6fbcae; --accent-soft: #17322e; --accent-ink: #a8ded3;
  --warn: #d9a75a; --warn-soft: #33291a; --live: #e4795f; --live-soft: #34201c; --good: #7fbd88;
  --gm: #e3ad62; --gm-soft: #2d2416; --gm-hatch: rgba(227,173,98,.15);
  --map-land: #2a2720; --map-sea: #16252a; --map-sea-ink: #3f6a66; --map-marsh: #2c3526;
  --map-rock: #201e1a; --map-ink: #b8ac92; --map-road: #8c7552; --mk-holding: #a898d8;
  --sb-trait: #8d3b2c; --sb-size: #4f8048; --sb-unique: #7a4a96;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 22px -12px rgba(0,0,0,.7);
  color: var(--ink);
}

.qbw { color: var(--ink); min-width: 0; }
.qbw-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.qbw-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.qbw-empty { color: var(--ink-faint); font-style: italic; margin: 0; padding: var(--sp-2) 0; }
.qbw-body-empty { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--rule-strong); border-radius: var(--r-3); color: var(--ink-faint); font: italic var(--step-0)/1.5 var(--serif); }
.qbw-body-empty p { margin: 0; }
.qbw-body-empty .btn { font-style: normal; }
.qbw-h { font: 600 var(--step-1)/1.2 var(--serif); margin: var(--sp-2) 0 0; }
.qbw-md, .qbw-hc, .qbw-pop, .qbw-sr__snip { overflow-wrap: break-word; }

/* Chips in wiki colours (.chip.x beats the kit's .tablemode .chip). */
.chip.qbw-chip { font-size: .75rem; padding: .28rem .5rem; }
.chip.qbw-chip--good { background: transparent; border-color: var(--good); color: var(--good); }
.chip.qbw-chip--warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.chip.qbw-chip--live { background: var(--live-soft); border-color: var(--live); color: var(--live); }
.chip.qbw-chip--accent { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.chip.qbw-chip--gm { background: var(--gm-soft); border: 1px dashed var(--gm); color: var(--gm); }
.chip.qbw-chip--gm[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--gm); }

/* ── Links ─────────────────────────────────────────────────────────────── */
.qbw-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; -webkit-touch-callout: none; }
.qbw-link:hover { text-decoration-thickness: 2px; }
.qbw-link__sec { color: var(--ink-soft); }
.qbw-link--gm { text-decoration-style: dotted; text-decoration-color: var(--gm); }
.qbw-link--wanted { color: var(--ink-soft); text-decoration-style: dashed; text-decoration-color: var(--ink-faint); }
.qbw-link--wanted:hover { color: var(--ink); }
.qbw-new {
  display: inline-block; margin-left: .25em; padding: .12rem .28rem; vertical-align: .15em;
  font: 600 .625rem/1 var(--sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px dashed var(--rule-strong); border-radius: 3px; text-decoration: none;
}
.qbw-rtag {
  display: inline-block; margin-left: .35em; padding: .16rem .32rem; vertical-align: .12em;
  font: 600 .625rem/1 var(--sans); letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: 3px; text-decoration: none; white-space: nowrap;
}
.qbw-link--rules .qbw-rtag, .qbw-rtag--rules { color: var(--accent-ink); background: var(--accent-soft); border-color: transparent; }

/* ── Markdown ─────────────────────────────────────────────────────────── */
.qbw-md { font: var(--step-1)/1.65 var(--serif); max-width: 68ch; }
.qbw-md > :first-child { margin-top: 0; }
.qbw-md h2 { font-size: var(--step-2); margin: var(--sp-5) 0 var(--sp-2); scroll-margin-top: var(--sp-4); }
.qbw-md h3 { font-size: var(--step-1); margin: var(--sp-4) 0 var(--sp-2); }
.qbw-md h4, .qbw-md h5, .qbw-md h6 { font-size: var(--step-0); margin: var(--sp-3) 0 var(--sp-1); }
.qbw-md p { margin: 0 0 var(--sp-3); }
.qbw-md ul, .qbw-md ol { margin: 0 0 var(--sp-3); padding-left: 1.4rem; }
.qbw-md li { margin-bottom: var(--sp-1); }
.qbw-md blockquote { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); border-left: 3px solid var(--rule-strong); font-style: italic; color: var(--ink-soft); }
.qbw-md blockquote p:last-child { margin-bottom: 0; }
.qbw-md del { color: var(--ink-faint); }
.qbw-md hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-4) 0; }
.qbw-md code, .qbw-ed__foot code { font: .85em var(--mono); background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: 3px; padding: .05em .3em; }
.qbw-code { font: var(--step--1)/1.5 var(--mono); background: var(--paper-sunk); padding: var(--sp-3); border-radius: var(--r-2); overflow-x: auto; margin: 0 0 var(--sp-3); }
.qbw-tasks { list-style: none; padding-left: 0 !important; }
.qbw-task { display: flex; gap: var(--sp-2); align-items: baseline; }
.qbw-task__box { flex: none; width: 1em; height: 1em; border: 1.5px solid var(--ink-faint); border-radius: 3px; display: inline-grid; place-items: center; font: 700 .7em/1 var(--sans); color: var(--paper-raised); transform: translateY(.14em); }
.qbw-task--done .qbw-task__box { background: var(--good); border-color: var(--good); }
.qbw-task--done > span:last-child { color: var(--ink-soft); }
.qbw-table-wrap { overflow-x: auto; margin: 0 0 var(--sp-3); }
.qbw-md table { border-collapse: collapse; font: var(--step-0)/1.45 var(--sans); min-width: 100%; }
.qbw-md th, .qbw-md td { border-bottom: 1px solid var(--rule); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.qbw-md th { font-weight: 600; color: var(--ink-soft); border-bottom-color: var(--rule-strong); }

/* ── GM blocks: unmistakable, and the same treatment everywhere ─────────── */
.qbw-gm {
  margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4);
  background: repeating-linear-gradient(135deg, var(--gm-hatch) 0 6px, transparent 6px 12px), var(--gm-soft);
  border: 1px dashed var(--gm); border-left: 4px solid var(--gm); border-radius: var(--r-2);
}
.qbw-gm > :last-child { margin-bottom: 0; }
.qbw-gm__label { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); font: 700 .75rem/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--gm); }
.qbw-gmtag {
  display: inline-flex; align-items: center; padding: .2rem .45rem; vertical-align: middle; white-space: nowrap;
  font: 700 .625rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--gm); background: var(--gm-soft); border: 1px dashed var(--gm); border-radius: 999px; font-style: normal;
}

/* ── Hover / long-press preview card ───────────────────────────────────── */
.qbw-hc {
  position: fixed; z-index: 1000; max-width: calc(100vw - 16px); padding: var(--sp-3) var(--sp-4);
  background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--r-3); box-shadow: var(--shadow);
  font: var(--step-0)/1.45 var(--sans); animation: qbw-in .14s ease;
}
.qbw-hc[hidden] { display: none; }
.qbw-hc__eyebrow { display: flex; gap: var(--sp-2); align-items: center; font: 600 .6875rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.qbw-hc__eyebrow .qbw-rtag { margin-left: 0; }
.qbw-hc__title { font: 600 var(--step-1)/1.25 var(--serif); margin: var(--sp-1) 0; }
.qbw-hc__sum { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.qbw-hc__chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.qbw-hc__foot { margin-top: var(--sp-2); font-size: var(--step--1); color: var(--ink-faint); }
.qbw-hc__unid { margin: var(--sp-1) 0; padding: .25rem .5rem; border-radius: var(--r-1); font-size: var(--step--1); }
@keyframes qbw-in { from { opacity: 0; transform: translateY(3px); } }

/* ── Article head, infobox ─────────────────────────────────────────────── */
.qbw-head { display: grid; gap: var(--sp-2); }
.qbw-head__eyebrow { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.qbw-head__title { font-family: var(--serif); margin: 0; }
.qbw-head__aka { margin: 0; font-size: var(--step--1); color: var(--ink-faint); }
.qbw-head__aka span { font-style: italic; }
.qbw-head__sum { margin: 0; max-width: 64ch; font: var(--step-1)/1.5 var(--serif); color: var(--ink-soft); }
.qbw-head__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.qbw-unid { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-2); font-size: var(--step--1); }

.qbw-info { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-3); font-size: var(--step-0); }
.qbw-info__title { font: 600 var(--step-2)/1.2 var(--serif); }
.qbw-info__type { margin-top: calc(-1 * var(--sp-2)); font-size: var(--step--1); color: var(--ink-faint); }
.qbw-info__dl { display: grid; margin: 0; }
.qbw-info__row { display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: var(--sp-3); padding: .45rem .5rem; border-top: 1px solid var(--rule); }
.qbw-info__row dt { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; align-content: start; font-size: var(--step--1); color: var(--ink-faint); }
.qbw-info__row dd { margin: 0; }
.qbw-info__block { display: grid; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--rule); }
.qbw-info__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.qbw-info__mem { display: grid; padding: .35rem .5rem; border-radius: var(--r-1); }
.qbw-info__mem--former .qbw-link { color: var(--ink-soft); }
.qbw-info__role, .qbw-info__span { font-size: var(--step--1); color: var(--ink-faint); }
.qbw-info__mks { display: grid; gap: 2px; justify-items: start; }
.qbw-info__mk {
  all: unset; box-sizing: border-box; width: 100%; min-height: 36px; padding: .35rem .5rem; border-radius: var(--r-1);
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem var(--sp-2); cursor: pointer; color: var(--accent); font: 500 var(--step--1)/1.3 var(--sans);
}
.qbw-info__mk:hover { background: var(--paper-sunk); }
.qbw-info__mk:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Kind swatches: the same shapes the map markers use. */
.qbw-kind { display: inline-block; flex: none; width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent); }
.qbw-kind--event { background: var(--live); border-radius: 1px; transform: rotate(45deg) scale(.85); }
.qbw-kind--quest { background: var(--warn); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.qbw-kind--holding { background: var(--mk-holding); border-radius: 2px; }
.qbw-kind--note { background: var(--ink-soft); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.qbw-kind--portal { background: transparent; border: 3px double var(--accent); }
.qbw-kind--party { width: .55rem; height: .55rem; background: var(--good); box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 3.5px var(--good); }
.qbw-kind--trail { width: 1rem; height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--live); }
.qbw-kind--gm { border-radius: 2px; background: repeating-linear-gradient(135deg, var(--gm) 0 2px, var(--gm-soft) 2px 4px); border: 1px dashed var(--gm); }

/* ── Stat block (classic PF2e layout) ──────────────────────────────────── */
.qbw-sb { max-width: 42rem; padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-3); font: var(--step-0)/1.45 var(--sans); }
.qbw-sb__bar { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding-bottom: var(--sp-1); margin-bottom: var(--sp-2); border-bottom: 2px solid var(--ink); }
.qbw-sb__name { font: 700 var(--step-1)/1.2 var(--serif); letter-spacing: .03em; text-transform: uppercase; }
.qbw-sb__lvl { font: 700 var(--step-0)/1 var(--serif); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.qbw-sb__traits { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: var(--sp-2); }
.qbw-trait { padding: .22rem .4rem; font: 700 .6875rem/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--sb-trait); border: 2px solid #d8c483; }
.qbw-trait--size { background: var(--sb-size); }
.qbw-trait--unique { background: var(--sb-unique); }
.qbw-trait--uncommon { background: #98513d; }
.qbw-trait--rare { background: #1d3a78; }
.qbw-sb__line { margin: 0 0 .2rem; padding-left: 1rem; text-indent: -1rem; }
.qbw-sb__rule { border: 0; border-top: 1px solid var(--ink-faint); margin: var(--sp-2) 0; }
.qbw-act { font-size: .9em; letter-spacing: -.05em; white-space: nowrap; color: var(--ink); }
.qbw-sb__prov { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px dashed var(--rule-strong); font-size: var(--step--1); color: var(--ink-faint); }
.qbw-sb__src { padding: .2rem .4rem; border-radius: 3px; font: 600 .6875rem/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); }
.qbw-sb--hidden { border-style: dashed; }
.qbw-sb--hidden .qbw-sb__bar { margin-bottom: var(--sp-2); }
.qbw-sb__none { margin: 0; font-style: italic; color: var(--ink-faint); }

/* ── Relationships, appearances, backlinks, rows ───────────────────────── */
.qbw-rels, .qbw-rows, .qbw-srs, .qbw-qlist, .qbw-recent, .qbw-people, .qbw-health__list {
  display: grid; gap: 1px; margin: 0; padding: 0; list-style: none;
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-3); overflow: hidden;
}
.qbw-rel { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); align-items: baseline; padding: var(--sp-2) var(--sp-3); background: var(--paper-raised); }
.qbw-rel__kind, .qbw-rel__span { font-size: var(--step--1); color: var(--ink-faint); }
.qbw-rel__span { text-align: right; }
.qbw-rels[data-qbw-compact] .qbw-rel { grid-template-columns: minmax(0, 1fr); }
.qbw-rels[data-qbw-compact] .qbw-rel__span { text-align: left; }

.qbw-apps { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.qbw-app { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--sp-3); align-items: baseline; }
.qbw-app__n { padding: .3rem 0; border-radius: 999px; text-align: center; font: 600 var(--step--1)/1 var(--mono); color: var(--accent-ink); background: var(--accent-soft); }
.qbw-app__main { display: grid; }
.qbw-app__title { font: 600 var(--step-0)/1.3 var(--serif); }
.qbw-app__note, .qbw-app__when { font-size: var(--step--1); color: var(--ink-faint); }

.qbw-backs { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.qbw-back__snip { display: block; margin-top: 2px; font: var(--step--1)/1.5 var(--serif); color: var(--ink-soft); }

.qbw-row { padding: var(--sp-3) var(--sp-4); background: var(--paper-raised); }
.qbw-row__main { display: block; }
.qbw-row .qbw-link { font: 600 var(--step-0)/1.3 var(--serif); }
.qbw-row__sum { display: block; margin-top: 2px; font-size: var(--step--1); color: var(--ink-soft); }

/* ── Timeline: two clocks ──────────────────────────────────────────────── */
.qbw-tl { display: grid; gap: var(--sp-3); }
.qbw-tl__head { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: end; }
.qbw-tl__clocks { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.qbw-clock { display: grid; gap: 2px; }
.qbw-clock b { font: 600 var(--step-0)/1.2 var(--serif); }
.qbw-seg { display: inline-flex; flex: none; max-width: 100%; border: 1px solid var(--rule-strong); border-radius: var(--r-2); overflow: hidden; }
.qbw-seg button { appearance: none; min-height: 36px; padding: .5rem .7rem; border: 0; background: var(--paper-raised); color: var(--ink-soft); font: 500 var(--step--1)/1.1 var(--sans); cursor: pointer; }
.qbw-seg button + button { border-left: 1px solid var(--rule-strong); }
.qbw-seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.qbw-tl__list { display: grid; gap: var(--sp-2); margin: 0; padding: 0 0 0 1rem; list-style: none; border-left: 2px solid var(--rule-strong); }
.qbw-tl__item { position: relative; display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); align-items: baseline; padding: var(--sp-2) var(--sp-3); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-2); }
.qbw-tl__item::before { content: ""; position: absolute; left: calc(-1rem - 7px); top: .9rem; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); }
.qbw-tl__date { font: 600 var(--step--1)/1.4 var(--sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.qbw-tl__clock { margin-right: .3rem; color: var(--ink-faint); }
.qbw-tl__text { font: var(--step-0)/1.45 var(--serif); }
.qbw-tl__about { font: var(--step--1) var(--sans); }
.qbw-tl__gap { margin-left: -1.35rem; padding: 2px 0; font: italic var(--step--1)/1.2 var(--serif); color: var(--ink-faint); }
.qbw-tl__gap span { padding: 0 .4rem; background: var(--paper); }
.qbw-tl--table .qbw-tl__item { grid-template-columns: auto minmax(0, 1fr) 11.5rem; }
.qbw-tl--table .qbw-tl__learned { order: -1; }
.qbw-tl--table .qbw-tl__date { text-align: right; }
.qbw-tl[data-qbw-compact] .qbw-tl__item { grid-template-columns: minmax(0, 1fr); }
.qbw-tl[data-qbw-compact] .qbw-tl__date { text-align: left; }
.qbw-sess { display: inline-block; padding: .25rem .5rem; border-radius: 999px; white-space: nowrap; font: 600 .6875rem/1 var(--sans); letter-spacing: .03em; color: var(--accent-ink); background: var(--accent-soft); }
.qbw-sess--none { color: var(--ink-faint); background: var(--paper-sunk); }

/* ── Editor ────────────────────────────────────────────────────────────── */
.qbw-ed { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--r-3); }
.qbw-ed__head { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule); }
.qbw-ed__title b { font: 600 var(--step-1)/1.2 var(--serif); }
.qbw-ed__sect { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--step--1); }
.qbw-ed__badge { padding: .25rem .6rem; border-radius: 999px; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent); }
.qbw-ed__note { margin: 0; padding: var(--sp-2) var(--sp-4); font-size: var(--step--1); color: var(--ink-soft); background: var(--paper-sunk); border-bottom: 1px solid var(--rule); }
.qbw-ed__conflict { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--warn-soft); border-bottom: 1px solid var(--warn); font-size: var(--step--1); }
.qbw-ed__cmsg b { color: var(--warn); font-size: var(--step-0); }
.qbw-ed__cacts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.qbw-ed__vers { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sp-2); margin-top: var(--sp-1); }
.qbw-ver { padding: var(--sp-2) var(--sp-3); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-2); }
.qbw-ver p { margin: var(--sp-1) 0 0; font: var(--step-0)/1.5 var(--serif); }
.qbw-ver ins { text-decoration: none; color: var(--accent-ink); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.qbw-ed__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--paper-sunk); border-bottom: 1px solid var(--rule); }
.qbw-ed__tools { display: flex; flex-wrap: wrap; gap: 2px; }
.qbw-ed__tool { appearance: none; flex: none; white-space: nowrap; min-width: 2.1rem; height: 2.1rem; padding: 0 .45rem; border: 1px solid transparent; border-radius: var(--r-1); background: transparent; color: var(--ink-soft); font: 600 var(--step--1)/1 var(--sans); cursor: pointer; }
.qbw-ed__tool:hover { background: var(--paper-raised); border-color: var(--rule); color: var(--ink); }
.qbw-ed__tool--italic { font-style: italic; font-family: var(--serif); }
.qbw-ed__tool--strike { text-decoration: line-through; }
.qbw-ed__tool--link { font-family: var(--mono); }
.qbw-ed__tool--gm { color: var(--gm); border: 1px dashed var(--gm); background: var(--gm-soft); }
.qbw-ed__panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 16rem; }
.qbw-ed--write .qbw-ed__panes, .qbw-ed--preview .qbw-ed__panes { grid-template-columns: minmax(0, 1fr); }
.qbw-ed--write .qbw-ed__pre, .qbw-ed--preview .qbw-ed__src { display: none; }
.qbw-ed__src { max-height: 34rem; overflow: auto; background: var(--paper); border-right: 1px solid var(--rule); }
.qbw-ed--write .qbw-ed__src { border-right: 0; }
.qbw-ed__code { position: relative; min-height: 100%; }
.qbw-ed__hl, .qbw-ed__ta {
  margin: 0; padding: var(--sp-3) var(--sp-4); border: 0; letter-spacing: 0; tab-size: 2;
  font: .8125rem/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
}
.qbw-ed__hl { min-height: 16rem; color: var(--ink); }
.qbw-ed__ta { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; resize: none; overflow: hidden; background: transparent; color: transparent; caret-color: var(--ink); outline: none; }
.qbw-ed__ta:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.qbw-ed__ta::selection { background: rgba(111, 188, 174, .3); color: transparent; }
.qbw-hl-h { color: var(--accent-ink); background: var(--accent-soft); }
.qbw-hl-link { color: var(--accent); background: var(--accent-soft); border-radius: 2px; }
.qbw-hl-gm { color: var(--gm); background: var(--gm-soft); }
.qbw-hl-gmbody { background: var(--gm-hatch); }
.qbw-hl-strong { text-decoration: underline; text-decoration-color: var(--rule-strong); }
.qbw-hl-mark { color: var(--warn); }
.qbw-hl-quote { color: var(--ink-soft); }
/* The suggestion list hangs from the start of the caret's line, inside the
   coloured copy, so it sits under the line being typed without any script. */
.qbw-ed__anchor { position: relative; display: inline; }
.qbw-ed__code.has-ac { padding-bottom: 13rem; }
.qbw-ac { position: absolute; z-index: 3; left: 0; top: 1.6em; width: 17rem; display: grid; gap: 1px; padding: var(--sp-1); background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--r-2); box-shadow: var(--shadow); font-family: var(--sans); white-space: normal; letter-spacing: normal; }
.qbw-ac__opt { appearance: none; min-height: 40px; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); padding: .5rem .6rem; border: 0; border-radius: var(--r-1); background: transparent; color: var(--ink); text-align: left; font: 500 var(--step-0)/1.2 var(--sans); cursor: pointer; }
.qbw-ac__opt.is-active, .qbw-ac__opt:hover { background: var(--accent-soft); color: var(--accent-ink); }
.qbw-ac__opt--new .qbw-ac__t { font-style: italic; }
.qbw-ac__type { font-size: .75rem; color: var(--ink-faint); white-space: nowrap; }
.qbw-ac__hint { margin-top: 2px; padding: .3rem .6rem 0; border-top: 1px solid var(--rule); font-size: .6875rem; color: var(--ink-faint); }
.qbw-ed__pre { max-height: 34rem; overflow: auto; padding: var(--sp-3) var(--sp-4); }
.qbw-ed__pre .qbw-md { font-size: var(--step-0); }
.qbw-ed__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--rule); font-size: var(--step--1); }
.qbw-ed__acts { display: flex; gap: var(--sp-2); margin-left: auto; }
.qbw-ed--compact .qbw-ed__bar { flex-direction: column; align-items: stretch; }
.qbw-ed--compact .qbw-ed__tools { flex-wrap: nowrap; overflow-x: auto; }
.qbw-ed--compact .qbw-ed__tabs { width: 100%; }
.qbw-ed--compact .qbw-ed__tabs button { flex: 1; min-height: 44px; font-size: var(--step-0); }
.qbw-ed--compact .qbw-ed__head, .qbw-ed--compact .qbw-ed__conflict, .qbw-ed--compact .qbw-ed__note { padding-left: var(--sp-3); padding-right: var(--sp-3); }
.qbw-ed--compact .qbw-ed__hl, .qbw-ed--compact .qbw-ed__ta { padding: var(--sp-3); }

/* ── Expanders ─────────────────────────────────────────────────────────── */
.qbw-exp { appearance: none; min-height: 32px; display: inline-flex; gap: .35rem; align-items: center; padding: .3rem 0; border: 0; background: none; color: var(--accent); font: 600 var(--step--1)/1.2 var(--sans); cursor: pointer; }
.qbw-exp__chev { display: inline-block; color: var(--ink-faint); transition: transform .15s ease; }
.qbw-exp[aria-expanded="true"] .qbw-exp__chev { transform: rotate(90deg); }
.qbw-exp__panel[hidden] { display: none; }

/* ── Map ───────────────────────────────────────────────────────────────── */
.qbw-map { display: grid; gap: var(--sp-2); min-width: 0; }
.qbw-map__top { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: flex-end; justify-content: space-between; }
.qbw-map__where { display: grid; gap: 2px; min-width: 0; }
.qbw-map__where .qbw-gmtag { justify-self: start; }
.qbw-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px .25rem; }
.qbw-crumb { appearance: none; min-height: 32px; display: inline-flex; align-items: baseline; gap: .35rem; padding: .3rem .25rem; border: 0; border-radius: var(--r-1); background: none; color: var(--accent); font: 600 var(--step-0)/1.2 var(--serif); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.qbw-crumb.is-here { color: var(--ink); text-decoration: none; cursor: default; }
.qbw-crumb__lvl { display: inline-block; font: 600 .625rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.qbw-crumb__sep { color: var(--ink-faint); }
.qbw-map__gmnote { padding: .3rem .55rem; border-radius: 999px; font: 700 .6875rem/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--gm); background: var(--gm-soft); border: 1px dashed var(--gm); }
.qbw-map__atlases, .qbw-map__filters { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
.qbw-map--compact .qbw-map__filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.qbw-fchip { min-height: 36px; }
.qbw-fchip[aria-pressed="false"] { opacity: .62; text-decoration: line-through; }
.qbw-fchip[aria-pressed="false"] .qbw-kind { filter: grayscale(1); }
.qbw-map__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-2); color: var(--accent-ink); background: var(--accent-soft); font-size: var(--step--1); animation: qbw-in .2s ease; }
.qbw-map__noteic { font-size: 1.15em; }
/* The frame is the desk and the stage is the map sheet. The stage keeps the
   map's aspect ratio, fills the width, and never grows past the max height
   the component sets inline, so the whole map always fits, uncropped. It is
   also a size container, so labels can hide below a width (see .qbw-mk--quiet-sm). */
.qbw-map__frame { position: relative; overflow: hidden; background: var(--paper-sunk); border: 1px solid var(--rule-strong); border-radius: var(--r-3); }
.qbw-map__scroll { max-width: 100%; overflow: hidden; }
.qbw-map__stage { position: relative; width: 100%; margin: 0 auto; background: var(--map-land); container-type: inline-size; }
.qbw-map__stage::before { content: ""; display: block; padding-top: var(--qbw-ratio, 75%); }
.qbw-map__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px rgba(90, 70, 40, .2); }.qbw-map__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.qbw-map__land { fill: var(--map-land); }
.qbw-map__sea { fill: var(--map-sea); stroke: var(--map-sea-ink); stroke-width: 1.2; }
.qbw-map__marsh { fill: var(--map-marsh); stroke: var(--map-ink); stroke-width: .6; stroke-dasharray: 1.5 2.5; }
.qbw-map__river { fill: none; stroke: var(--map-sea-ink); stroke-width: 2.2; stroke-linecap: round; }
/* Roads are quiet thin solid lines, so the only dashed line is the trail. */
.qbw-map__road { fill: none; stroke: var(--map-road); stroke-width: 1.1; stroke-linecap: round; opacity: .7; }
.qbw-map__wall { fill: none; stroke: var(--map-ink); stroke-width: 4; stroke-linecap: round; }
.qbw-map__hills { fill: none; stroke: var(--map-ink); stroke-width: 1; opacity: .7; }
.qbw-map__block { fill: var(--map-rock); stroke: var(--map-ink); stroke-width: .6; }
.qbw-map__rock { fill: var(--map-rock); }
.qbw-map__floor { fill: none; stroke: var(--map-land); stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; }
.qbw-map__water { fill: var(--map-sea); stroke: var(--map-sea-ink); stroke-width: 1; }
.qbw-map__txt { font: italic 9px var(--serif); letter-spacing: .06em; fill: var(--map-ink); }
.qbw-map__txt--sm { font-size: 6.5px; }
.qbw-map__scale path { fill: none; stroke: var(--map-ink); stroke-width: 1.2; }
.qbw-map__compass path { fill: var(--map-ink); }
.qbw-map__scale text, .qbw-map__compass text { font: 600 7px var(--sans); fill: var(--map-ink); }
/* The trail is the only dashed line. Each leg is drawn once; the underground
   hop is a dotted arc out to sea with the travel-link glyph at its middle. */
.qbw-trail { fill: none; stroke: var(--live); stroke-width: 1.8; stroke-dasharray: 5 3.5; stroke-linecap: round; opacity: .9; }
.qbw-trail--under { stroke-width: 2.6; stroke-dasharray: .1 4.5; opacity: .85; }
.qbw-trail__hop circle { fill: none; stroke: var(--live); stroke-width: 1.3; }
.qbw-trail__hop circle:first-child { fill: var(--paper-raised); }

/* Markers: one shape and colour per kind, always a focusable button. */
.qbw-mk { position: absolute; z-index: 2; width: 28px; height: 28px; margin: 0; padding: 0; transform: translate(-50%, -50%); display: grid; place-items: center; appearance: none; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.qbw-map--compact .qbw-mk { width: 34px; height: 34px; }
.qbw-mk__glyph { width: 12px; height: 12px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); border: 2px solid var(--paper-raised); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); font: 700 10px/1 var(--sans); color: #fff; }
.qbw-mk--town .qbw-mk__glyph { width: 14px; height: 14px; border-radius: 3px; background: var(--ink); color: var(--paper-raised); }
.qbw-mk--zoom .qbw-mk__glyph { width: 17px; height: 17px; }
.qbw-mk--event .qbw-mk__glyph { background: var(--live); border-radius: 2px; transform: rotate(45deg); }
.qbw-mk--quest .qbw-mk__glyph { width: 14px; height: 13px; background: var(--warn); border: 0; border-radius: 0; box-shadow: none; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.qbw-mk--holding .qbw-mk__glyph { background: var(--mk-holding); border-radius: 2px; }
.qbw-mk--note .qbw-mk__glyph { background: var(--ink-soft); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.qbw-mk--private .qbw-mk__glyph { background: var(--paper-raised); border: 2px dashed var(--ink-soft); }
.qbw-mk--portal .qbw-mk__glyph { width: 17px; height: 17px; background: var(--paper-raised); border: 4px double var(--accent); }
.qbw-mk--party .qbw-mk__glyph { width: 14px; height: 14px; background: var(--good); box-shadow: 0 0 0 3px var(--good); animation: qbw-here 2.4s ease-in-out infinite; }
@keyframes qbw-here { 50% { box-shadow: 0 0 0 7px rgba(44, 97, 52, 0); } }
.qbw-mk--gm::before { content: ""; position: absolute; inset: 3px; border: 1.5px dashed var(--gm); border-radius: 50%; background: var(--gm-hatch); }
.qbw-mk--gm .qbw-mk__glyph { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .5) 0 2px, transparent 2px 4px); }
.qbw-mk__label {
  position: absolute; left: 50%; top: calc(100% - 5px); transform: translateX(-50%); z-index: 1;
  padding: .1rem .3rem; border-radius: 3px; white-space: nowrap; pointer-events: none;
  font: 600 .6875rem/1.2 var(--sans); color: var(--ink); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule);
  opacity: 0; transition: opacity .12s ease;
}
/* Always-on labels: the party, towns and travel links. The component flags
   the ones that would collide (see labelPlan in wiki.js): quiet = hover/focus
   only; quiet-sm = hidden while the map is narrower than 640px (1.6px per map
   unit on the 400-unit maps). Hover, focus and selection always show. */
.qbw-mk--town .qbw-mk__label, .qbw-mk--party .qbw-mk__label, .qbw-mk--portal .qbw-mk__label { opacity: 1; }
.qbw-mk--quiet .qbw-mk__label { opacity: 0; }
.qbw-mk--up .qbw-mk__label { top: auto; bottom: calc(100% - 5px); }
@container (max-width: 639.98px) { .qbw-mk--quiet-sm .qbw-mk__label { opacity: 0; } }
.qbw-mk.is-sel .qbw-mk__label, .qbw-mk.is-arrived .qbw-mk__label, .qbw-mk:hover .qbw-mk__label, .qbw-mk:focus-visible .qbw-mk__label { opacity: 1; }
.qbw-mk--gm .qbw-mk__label { color: var(--gm); background: var(--gm-soft); box-shadow: 0 0 0 1px var(--gm); }
.qbw-mk--town, .qbw-mk--party { z-index: 3; }
.qbw-mk:hover, .qbw-mk:focus-visible, .qbw-mk.is-sel { z-index: 4; }
.qbw-mk:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.qbw-mk.is-sel .qbw-mk__glyph { box-shadow: 0 0 0 3px var(--paper-raised), 0 0 0 5px var(--accent); }
.qbw-mk.is-arrived .qbw-mk__glyph { animation: qbw-arrive 1.1s ease 2; }
@keyframes qbw-arrive { 50% { box-shadow: 0 0 0 9px rgba(111, 188, 174, .35); } }

/* Trail waypoints: small session badges beside the stop they mark. */
.qbw-wp { position: absolute; z-index: 3; min-width: 18px; height: 18px; padding: 0 3px; transform: translate(calc(7px + var(--i, 0) * 17px), -135%); display: grid; place-items: center; appearance: none; border: 1.5px solid var(--live); border-radius: 999px; background: var(--paper-raised); color: var(--live); font: 700 .625rem/1 var(--sans); cursor: pointer; }
.qbw-wp::after { content: ""; position: absolute; inset: -5px; }
.qbw-wp:hover, .qbw-wp.is-sel { z-index: 5; background: var(--live); color: var(--paper-raised); }
.qbw-wp--under { border-style: dotted; }
.qbw-map--compact .qbw-wp { min-width: 22px; height: 22px; font-size: .6875rem; transform: translate(calc(9px + var(--i, 0) * 21px), -135%); }
.qbw-wp--multi { display: inline-flex; align-items: center; gap: 2px; padding: 0 5px; }
.qbw-wp__sep { opacity: .5; }
.qbw-pop__list { margin: 0 0 var(--sp-2); padding-left: 1.1rem; font-size: var(--step--1); color: var(--ink-soft); }
.qbw-pop__list li { margin-bottom: 2px; }

/* Popover card; a bottom sheet in the compact (phone) layout. */
.qbw-pop { position: absolute; z-index: 10; width: min(17rem, 80%); padding: var(--sp-3); transform: translate(-50%, calc(-100% - 18px)); background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--r-3); box-shadow: var(--shadow); animation: qbw-in .15s ease; }
.qbw-pop--below { transform: translate(-50%, 18px); }
.qbw-pop--left { transform: translate(calc(-100% + 24px), calc(-100% - 18px)); }
.qbw-pop--left.qbw-pop--below { transform: translate(calc(-100% + 24px), 18px); }
.qbw-pop--right { transform: translate(-24px, calc(-100% - 18px)); }
.qbw-pop--right.qbw-pop--below { transform: translate(-24px, 18px); }
.qbw-pop--sheet { left: 0; right: 0; bottom: 0; width: auto; max-height: 72%; overflow: auto; padding: var(--sp-2) var(--sp-4) var(--sp-4); transform: none; border-bottom: 0; border-radius: var(--r-4) var(--r-4) 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .22); animation: qbw-up .2s ease; }
@keyframes qbw-up { from { opacity: 0; transform: translateY(14px); } }
.qbw-pop--gm { border: 1px dashed var(--gm); background: repeating-linear-gradient(135deg, var(--gm-hatch) 0 6px, transparent 6px 12px), var(--paper-raised); }
.qbw-pop__grip { width: 2.5rem; height: 4px; margin: 0 auto var(--sp-2); border-radius: 4px; background: var(--rule-strong); }
.qbw-pop__head { display: flex; align-items: center; gap: var(--sp-2); }
.qbw-pop__x { width: 32px; height: 32px; margin-left: auto; appearance: none; border: 0; border-radius: var(--r-1); background: none; color: var(--ink-faint); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.qbw-pop__title { margin: var(--sp-1) 0; font: 600 var(--step-1)/1.25 var(--serif); }
.qbw-pop__body, .qbw-pop__meta { margin: 0 0 var(--sp-2); font-size: var(--step--1); color: var(--ink-soft); }
.qbw-pop__meta { color: var(--ink-faint); }
.qbw-pop__vis { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-2); font-size: var(--step--1); }
.qbw-pop__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.qbw-map__legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; font-size: .75rem; color: var(--ink-faint); }
.qbw-map__legend > span { display: inline-flex; align-items: center; gap: .35rem; }
.qbw-map__lvl { margin-left: auto; }

/* ── Party, members, items ─────────────────────────────────────────────── */
.qbw-party { display: grid; gap: var(--sp-4); }
.qbw-party__name { font: 600 var(--step-2)/1.2 var(--serif); }
.qbw-party__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sp-3); }
.qbw-party__cell { display: grid; gap: var(--sp-1); align-content: start; padding: var(--sp-3) var(--sp-4); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-3); }
.qbw-party__big { font: 600 var(--step-1)/1.3 var(--serif); }
.qbw-party__note { margin: 0; font-size: var(--step--1); color: var(--ink-faint); }
.qbw-xp { height: 8px; overflow: hidden; border-radius: 999px; background: var(--paper-sunk); border: 1px solid var(--rule); }
.qbw-xp span { display: block; height: 100%; background: var(--accent); }
.qbw-party__rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-3); }
.qbw-party__list { display: grid; gap: 2px; margin: var(--sp-1) 0 0; padding: 0; list-style: none; }
.qbw-party__list li { padding: .3rem .5rem; border-radius: var(--r-1); }
.qbw-fund { display: grid; gap: var(--sp-1); margin: var(--sp-1) 0 0; padding: 0; list-style: none; font-size: var(--step--1); }
.qbw-fund li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-2); align-items: baseline; }
.qbw-amt { font-weight: 600; color: var(--good); white-space: nowrap; }
.qbw-amt.is-neg { color: var(--live); }

.qbw-mem { display: grid; gap: var(--sp-2); }
.qbw-mem__grid { --qbw-cols: minmax(9.5rem, 13rem) repeat(var(--qbw-n, 14), minmax(1.3rem, 1fr)); min-width: 31rem; }
.qbw-mem__row { display: grid; grid-template-columns: var(--qbw-cols); align-items: center; min-height: 2.4rem; }
.qbw-mem__row > * { grid-row: 1; }
.qbw-mem__row--head { min-height: 1.6rem; border-bottom: 1px solid var(--rule-strong); }
.qbw-mem__h { text-align: center; font: 600 .6875rem/1 var(--mono); color: var(--ink-faint); }
.qbw-mem__h.is-x { text-decoration: line-through; opacity: .6; }
.qbw-mem__h.is-next { color: var(--accent); }
.qbw-mem__sec { padding: var(--sp-3) 0 var(--sp-1); }
.qbw-mem__list { margin: 0; padding: 0; list-style: none; }
.qbw-mem__item { padding: var(--sp-1) 0; border-bottom: 1px solid var(--rule); }
.qbw-mem__who { grid-column: 1; display: grid; justify-items: start; gap: 2px; min-width: 0; padding-right: var(--sp-3); }
.qbw-mem__name { font: 600 var(--step-0)/1.25 var(--serif); }
.qbw-mem__meta { font-size: .75rem; color: var(--ink-faint); }
.qbw-mem__kind { padding: .15rem .4rem; border-radius: 999px; font: 600 .625rem/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--rule-strong); }
.qbw-mem__kind--companion { color: var(--good); border-color: var(--good); }
.qbw-mem__kind--hireling { color: var(--warn); border-color: var(--warn); }
.qbw-mem__bar { position: relative; height: 12px; margin: 0 2px; display: flex; align-items: center; justify-content: flex-end; border-radius: 999px; background: var(--accent); }
.qbw-mem__bar.is-open { margin-right: 0; border-radius: 999px 0 0 999px; }
.qbw-mem__bar--companion { background: var(--good); }
.qbw-mem__bar--hireling { background: var(--warn); }
.qbw-mem__end { padding-right: 3px; font: 700 .75rem/1 var(--sans); color: var(--paper-raised); }
.qbw-mem__x { position: relative; z-index: 1; align-self: stretch; background: repeating-linear-gradient(135deg, var(--rule-strong) 0 1.5px, transparent 1.5px 5px); opacity: .7; }
.qbw-mem__abs { z-index: 2; justify-self: center; width: 11px; height: 11px; border-radius: 50%; background: var(--paper-raised); border: 2px solid var(--ink-faint); }
.qbw-mem__item.is-former .qbw-mem__bar { opacity: .5; }
.qbw-mem__item.is-former .qbw-mem__name .qbw-link { color: var(--ink-soft); }
.qbw-mem__story { padding: 0 0 var(--sp-1); font-size: .75rem; color: var(--ink-soft); }
.qbw-mem__key { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: .75rem; color: var(--ink-faint); }
.qbw-mem__key > span { display: inline-flex; gap: .35rem; align-items: center; }
.qbw-mem__k { display: inline-block; width: 1.1rem; height: 8px; border-radius: 999px; background: var(--accent); }
.qbw-mem__k--companion { background: var(--good); }
.qbw-mem__k--hireling { background: var(--warn); }
.qbw-mem__k--x { border-radius: 0; background: repeating-linear-gradient(135deg, var(--rule-strong) 0 1.5px, transparent 1.5px 4px); }
.qbw-mem__k--abs { width: 9px; height: 9px; background: var(--paper-raised); border: 2px solid var(--ink-faint); }

.qbw-items { display: grid; gap: var(--sp-2); }
.qbw-items__notable { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.qbw-item { padding: var(--sp-3) var(--sp-4); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-3); }
.qbw-item--unid { border-style: dashed; border-color: var(--warn); }
.qbw-item__main { display: grid; gap: var(--sp-1); justify-items: start; }
.qbw-item__name .qbw-link { font: 600 var(--step-1)/1.25 var(--serif); }
.qbw-item__based, .qbw-item__holder { font-size: var(--step--1); color: var(--ink-soft); }
.qbw-items .qbw-unid { display: grid; gap: var(--sp-1); padding: 0; font-size: var(--step--1); }
.qbw-unid__seen, .qbw-unid__truth { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .3rem .5rem; border-radius: var(--r-1); }
.qbw-unid__seen { background: var(--warn-soft); }
.qbw-custody { display: grid; gap: var(--sp-1); margin: var(--sp-1) 0 0; padding: 0 0 0 var(--sp-2); list-style: none; border-left: 2px solid var(--rule-strong); font-size: var(--step--1); }
.qbw-custody li { display: flex; gap: var(--sp-2); align-items: baseline; }
.qbw-ledger { width: 100%; min-width: 22rem; border-collapse: collapse; font-size: var(--step--1); }
.qbw-ledger th { padding: .4rem .5rem; text-align: left; font-weight: 600; color: var(--ink-faint); border-bottom: 1px solid var(--rule-strong); }
.qbw-ledger td { padding: .45rem .5rem; vertical-align: top; border-bottom: 1px solid var(--rule); }
.qbw-ledger__note { display: block; font-size: .75rem; color: var(--ink-faint); }

/* ── Reputation ────────────────────────────────────────────────────────── */
.qbw-rep { display: grid; gap: var(--sp-4); }
.qbw-rep__org { display: grid; gap: var(--sp-2); }
.qbw-rep__head { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }
.qbw-rep__head .qbw-link { font: 600 var(--step-1)/1.2 var(--serif); }
.qbw-rep__now { padding: .3rem .55rem; border-radius: 999px; font: 700 .75rem/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--paper-raised); background: var(--ink-faint); }
.qbw-rep__now--0, .qbw-rep__now--1, .qbw-rep__now--2 { background: var(--good); }
.qbw-rep__now--4 { background: var(--warn); }
.qbw-rep__now--5, .qbw-rep__now--6 { background: var(--live); }
.qbw-rep__track { display: grid; grid-template-columns: repeat(7, minmax(3.4rem, 1fr)); gap: 3px; min-width: 25rem; margin: 0; padding: 0; list-style: none; }
.qbw-rep__step { display: grid; gap: 3px; justify-items: center; padding: .45rem .2rem .35rem; text-align: center; font-size: .6875rem; color: var(--ink-faint); background: var(--paper-sunk); border-top: 4px solid var(--ink-faint); }
.qbw-rep__step:first-child { border-radius: var(--r-2) 0 0 var(--r-2); }
.qbw-rep__step:last-child { border-radius: 0 var(--r-2) var(--r-2) 0; }
.qbw-rep__step--0, .qbw-rep__step--1, .qbw-rep__step--2 { border-top-color: var(--good); }
.qbw-rep__step--4 { border-top-color: var(--warn); }
.qbw-rep__step--5, .qbw-rep__step--6 { border-top-color: var(--live); }
.qbw-rep__step.is-now { font-weight: 700; color: var(--ink); background: var(--paper-raised); box-shadow: inset 0 0 0 2px var(--ink); }
.qbw-rep__step.is-was { color: var(--ink-soft); }
.qbw-rep__lvl { letter-spacing: .04em; text-transform: uppercase; }
.qbw-rep__was { min-height: .625rem; font: 600 .625rem/1 var(--mono); color: var(--ink-faint); }
.qbw-rep__hist { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.qbw-rep__hist li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--sp-2); align-items: baseline; }
.qbw-rep__move--up b { color: var(--good); }
.qbw-rep__move--down b { color: var(--live); }
.qbw-rep__why { color: var(--ink-faint); }
.qbw-rep[data-qbw-compact] .qbw-rep__hist li { grid-template-columns: auto minmax(0, 1fr); }
.qbw-rep[data-qbw-compact] .qbw-rep__why { grid-column: 2; }

/* ── Quests ────────────────────────────────────────────────────────────── */
.qbw-qlog { display: grid; gap: var(--sp-5); }
.qbw-qlog__rumours .qbw-qlist { border: 1px dashed var(--warn); }
.qbw-qlog__h, .qbw-qlog__st { margin: var(--sp-2) 0 var(--sp-1); }
.qbw-qrow { display: grid; grid-template-columns: .75rem minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; padding: var(--sp-3) var(--sp-4); background: var(--paper-raised); }
.qbw-qrow__dot { width: .6rem; height: .6rem; margin-top: .45rem; border-radius: 50%; background: var(--rule-strong); }
.qbw-qrow--active .qbw-qrow__dot { background: var(--accent); }
.qbw-qrow--completed .qbw-qrow__dot { background: var(--good); }
.qbw-qrow--failed .qbw-qrow__dot { background: var(--live); }
.qbw-qrow--abandoned .qbw-qrow__dot { background: transparent; border: 1.5px solid var(--ink-faint); }
.qbw-qrow--rumoured .qbw-qrow__dot { background: transparent; border: 1.5px dashed var(--warn); }
.qbw-qrow__main { display: grid; gap: 2px; min-width: 0; }
.qbw-qrow__main .qbw-link { font: 600 var(--step-0)/1.3 var(--serif); }
.qbw-qrow--completed .qbw-qrow__main .qbw-link, .qbw-qrow--abandoned .qbw-qrow__main .qbw-link { color: var(--ink-soft); }
.qbw-qrow--failed .qbw-qrow__main .qbw-link { text-decoration-line: line-through; }
.qbw-qrow__sum { font-size: var(--step--1); color: var(--ink-soft); }
.qbw-qrow__by { font-size: .75rem; color: var(--warn); }
.qbw-qrow__end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); font-size: .75rem; white-space: nowrap; }
.qbw-qlog[data-qbw-compact] .qbw-qrow { grid-template-columns: .75rem minmax(0, 1fr); }
.qbw-qlog[data-qbw-compact] .qbw-qrow__end { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; white-space: normal; }
.qbw-arc { display: grid; gap: var(--sp-2); }
.qbw-arc__head { display: flex; flex-wrap: wrap; gap: .25rem var(--sp-3); align-items: baseline; }
.qbw-arc__ch { font: 600 .6875rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.qbw-arc__title { font: 600 var(--step-2)/1.2 var(--serif); }
.qbw-arc:not(.is-active) .qbw-arc__title { color: var(--ink-soft); }
.qbw-arc__when { font-size: var(--step--1); color: var(--ink-faint); }
.qbw-arc__line { margin: 0; font: italic var(--step-0)/1.5 var(--serif); color: var(--ink-soft); }
.qbw-quest { display: grid; gap: var(--sp-3); }
.qbw-quest__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--sp-2); margin: 0; }
.qbw-quest__facts > div { padding: var(--sp-2) var(--sp-3); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-2); }
.qbw-quest__facts dt { font: 600 .6875rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.qbw-quest__facts dd { margin: 2px 0 0; }
.qbw-quest__rumour { margin: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--step--1); background: var(--warn-soft); border: 1px dashed var(--warn); border-radius: var(--r-2); }
.qbw-quest__body .qbw-md { font-size: var(--step-0); }
.qbw-quest__mks { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.qbw-objs { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.qbw-obj { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) var(--sp-3); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-2); }
.qbw-obj__box { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .12rem; display: grid; place-items: center; border: 2px solid var(--ink-faint); border-radius: 4px; font: 700 .75rem/1 var(--sans); color: var(--paper-raised); }
.qbw-obj.is-done .qbw-obj__box { background: var(--good); border-color: var(--good); }
.qbw-obj.is-done .qbw-obj__text { color: var(--ink-soft); }
.qbw-obj__text { font: var(--step-0)/1.45 var(--serif); }
.qbw-obj__meta { display: block; font: .75rem/1.4 var(--sans); color: var(--ink-faint); }

/* ── Handouts ──────────────────────────────────────────────────────────── */
.qbw-hos { display: grid; gap: var(--sp-4); }
.qbw-hos__h { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.qbw-hos__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.qbw-hos[data-qbw-compact] .qbw-hos__tiles { grid-template-columns: minmax(0, 1fr); }
.qbw-ho { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-3); }
.qbw-ho--hidden { border: 1px dashed var(--gm); }
.qbw-ho__thumb { width: 3.5rem; height: 4.4rem; display: grid; place-items: center; border-radius: var(--r-1); background: var(--paper-sunk); }
.qbw-ho__thumb svg { width: 100%; height: 100%; }
.qbw-th__paper { fill: var(--paper-raised); stroke: var(--rule-strong); stroke-width: 1; }
.qbw-th__back { fill: var(--paper-sunk); }
.qbw-th__ink { fill: none; stroke: var(--ink-faint); stroke-width: 1.4; stroke-linecap: round; }
.qbw-th__bold { stroke: var(--ink-soft); stroke-width: 2.2; }
.qbw-th__hand { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linecap: round; }
.qbw-th__seal { fill: var(--live); opacity: .85; }
.qbw-th__sea { fill: var(--map-sea); }
.qbw-th__x { fill: none; stroke: var(--live); stroke-width: 1.4; stroke-linecap: round; }
.qbw-th__band { fill: var(--accent); opacity: .85; }
.qbw-th__lbl { font: 700 7px var(--sans); fill: var(--live); }
.qbw-th__big { font: 700 7.5px var(--serif); letter-spacing: .05em; fill: var(--ink); }
.qbw-th__face { fill: var(--rule-strong); }
.qbw-ho__body { display: grid; gap: var(--sp-1); align-content: start; min-width: 0; }
.qbw-ho__title .qbw-link { font: 600 var(--step-0)/1.3 var(--serif); }
.qbw-ho__meta, .qbw-ho__vis { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .75rem; }
.qbw-ho__meta .qbw-rtag { margin-left: 0; }
.qbw-ho__to { color: var(--ink-faint); }
.qbw-ho__just { font-weight: 700; }
.qbw-ho__vis .qbw-expwrap { width: 100%; }
.qbw-ho__reveal { display: grid; gap: var(--sp-2); justify-items: start; }
.qbw-ho__picker { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ── Search ────────────────────────────────────────────────────────────── */
.qbw-search { display: grid; gap: var(--sp-2); }
.qbw-sr__h { margin-top: var(--sp-2); }
.qbw-sr { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); background: var(--paper-raised); }
.qbw-sr__top { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.qbw-sr__top .qbw-link { font: 600 var(--step-0)/1.3 var(--serif); }
.qbw-sr__top .qbw-rtag { margin-left: 0; }
.qbw-sr__snip { font-size: var(--step--1); color: var(--ink-soft); }
.qbw-search mark { color: inherit; background: var(--warn-soft); box-shadow: inset 0 -2px 0 var(--warn); border-radius: 1px; }
.qbw-sr__src { font-size: .75rem; color: var(--ink-faint); }

/* ── Wiki health, recent, people met ───────────────────────────────────── */
.qbw-health { display: grid; gap: var(--sp-4); }
.qbw-health__h { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-2); }
.qbw-health__n { min-width: 2.2rem; text-align: center; font: 600 var(--step-3)/1 var(--serif); color: var(--accent); }
.qbw-health__why { display: block; font-size: var(--step--1); font-weight: 400; color: var(--ink-faint); }
.qbw-health__list li { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); background: var(--paper-raised); font-size: var(--step--1); }
.qbw-health__list li > .btn, .qbw-health__acts { margin-left: auto; }
.qbw-health__acts { display: flex; gap: var(--sp-1); }
.qbw-recent__row, .qbw-person { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); background: var(--paper-raised); }
.qbw-verb { flex: none; width: 5.4rem; font: 600 .6875rem/1.6 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.qbw-verb--revealed { color: var(--accent); }
.qbw-verb--proposed { color: var(--warn); }
.qbw-verb--created { color: var(--good); }
.qbw-recent__main, .qbw-person__main { flex: 1; display: grid; gap: 2px; min-width: 0; }
.qbw-recent__main .qbw-link, .qbw-person__main .qbw-link { font: 600 var(--step-0)/1.3 var(--serif); }
.qbw-recent__meta, .qbw-person__sum { font-size: var(--step--1); color: var(--ink-faint); }
.qbw-person__last { flex: none; display: grid; justify-items: end; gap: 2px; text-align: right; font-size: .75rem; }
.qbw-people[data-qbw-compact] .qbw-person { flex-wrap: wrap; }
.qbw-people[data-qbw-compact] .qbw-person__last { width: 100%; padding-left: 2.5rem; justify-items: start; text-align: left; }

/* ── GM-only rows, fields, objectives, markers, tiles ──────────────────────
   Last, so the hatching wins over the row backgrounds above. */
.qbw .qbw-gmrow, .qbw-gmrow.qbw-gmrow {
  background: repeating-linear-gradient(135deg, var(--gm-hatch) 0 5px, transparent 5px 10px), var(--gm-soft);
  box-shadow: inset 3px 0 0 var(--gm);
}
.qbw .qbw-obj.qbw-gmrow, .qbw .qbw-ho.qbw-gmrow, .qbw .qbw-tl__item.qbw-gmrow { border: 1px dashed var(--gm); }

@media (prefers-reduced-motion: reduce) {
  .qbw-hc, .qbw-pop, .qbw-map__note, .qbw-mk--party .qbw-mk__glyph, .qbw-mk.is-arrived .qbw-mk__glyph { animation: none !important; }
  .qbw-exp__chev, .qbw-mk__label { transition: none !important; }
}