/* =====================================================================
   Round 3 (Agent P): the field-journal panels — world map, Explorer's Journal, Team, Talents —
   and the quest log brought onto the same cover/page materials (structure unchanged).
   Built on journal.css (kit) + theme.css + setpieces.css.
   ===================================================================== */

/* ===================================================================== WORLD MAP */
#worldmap.wm { position: absolute; inset: max(2.5vh, var(--gutter)) max(2.5vw, var(--gutter)) calc(max(2.5vh, var(--gutter)) + var(--hints-h)); display: flex; flex-direction: column; z-index: var(--z-modal); padding: 0.8rem 1rem 1rem; color: var(--text); }
.wm-head { display: flex; align-items: baseline; gap: 1rem; padding: 0 0.4rem 0.55rem; position: relative; z-index: 1; }
.wm-title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: var(--fs-xl); letter-spacing: 0.02em; color: var(--gold-hi); white-space: nowrap; }
.wm-title small { margin-left: 0.7rem; font-family: var(--font-prose); font-style: italic; font-weight: 400; font-size: 1rem; letter-spacing: 0; color: var(--text-dim); }
.wm-where { flex: 1; font-family: var(--font-hand); font-size: 1.35rem; color: var(--gold); }
.wm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(12rem, 15.5rem); gap: 1rem; position: relative; z-index: 1; }
.wm-sheet { position: relative; min-height: 0; }
.wm-sheet::before { background: var(--fj-foxing), var(--fj-mottle), var(--grain), var(--fibers), linear-gradient(176deg, #ecdcb8, #e2cfa3); }
.wm-cv { position: absolute; inset: 0.9rem; width: calc(100% - 1.8rem); height: calc(100% - 1.8rem); cursor: grab; border-radius: var(--r-sm); }
.wm-cv:active { cursor: grabbing; }
/* the pencil frame line around the chart */
.wm-sheet::after { content: ''; position: absolute; inset: 0.65rem; border: 1px solid rgba(31, 42, 74, 0.279); outline: 1px solid rgba(31, 42, 74, 0.124); outline-offset: 3px; pointer-events: none; }
.wm-rose { position: absolute; right: 1.6rem; top: 1.5rem; width: 4.6rem; height: 4.6rem; opacity: 0.85; pointer-events: none; --mark-ink: #3a2c1e; --mark-lt: rgba(239, 226, 194, 0.9); }
.wm-rose .hb-mark { width: 100%; height: 100%; }
.wm-zoom { position: absolute; right: 1.5rem; bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.3rem; }
.wm-zoom button { all: unset; cursor: pointer; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; font: 700 1.1rem/1 var(--font-ui); color: var(--ink); background: rgba(246, 236, 210, 0.92); border: 1px solid rgba(31, 42, 74, 0.341); border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
.wm-zoom button:hover, .wm-zoom button:focus-visible { background: #fff6dc; outline: 2px solid rgba(44, 74, 99, 0.35); }
.wm-side { min-height: 0; display: flex; flex-direction: column; gap: 0.9rem; padding: 1.1rem 1rem 0.9rem; transform: rotate(0.6deg); }
.wm-sec { display: flex; flex-direction: column; gap: 0.3rem; }
.wm-sec--grow { flex: 1; min-height: 0; }
.wm-quest b { display: block; font-family: var(--font-print); font-weight: 400; font-size: 1.15rem; color: var(--ink); }
.wm-quest span { font-family: var(--font-hand); font-size: 1.2rem; color: var(--ink-red); line-height: 1.1; }
.wm-none { font-family: var(--font-prose); font-style: italic; color: var(--ink-soft); font-size: 0.95rem; }
.wm-legend { display: grid; grid-template-columns: 1fr; gap: 0.18rem; font-family: var(--font-prose); font-size: 0.98rem; color: var(--ink); }
.wm-legend span { display: flex; align-items: center; gap: 0.5rem; }
.wm-legend svg { width: 1.2rem; height: 1.2rem; flex: none; }
.wm-places { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 0.05rem; scrollbar-width: thin; }
.wm button.wm-pl { all: unset; cursor: pointer; font-family: var(--font-print-lc); font-size: 1.02rem; color: var(--ink); padding: 0.08rem 0.3rem; border-radius: var(--r-sm); }
.wm button.wm-pl::before { content: '·'; margin-right: 0.35rem; color: var(--ink-soft); }
.wm button.wm-pl--dungeon { color: var(--ink-red); font-style: italic; } .wm button.wm-pl--dungeon::before { content: '◠'; color: var(--ink-red); }
.wm button.wm-pl--hub::before { content: '⌂'; }
.wm button.wm-pl:hover, .wm button.wm-pl:focus-visible { background: rgba(44, 74, 99, 0.1); box-shadow: inset 2px 0 0 var(--ink-red); outline: none; }
.wm-foot { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; font-size: var(--fs-2xs); color: var(--ink-soft); border-top: 1px dashed rgba(31, 42, 74, 0.217); padding-top: 0.45rem; }
.wm-foot .ui-key { transform: scale(0.85); }
/* fast travel (J): the ledger overlays the chart; the side column steps aside */
#worldmap.wm-ledger .wm-body { grid-template-columns: 1fr; }
#worldmap.wm-ledger .wm-side { display: none; }
#worldmap.wm-ledger .wm-rose { right: auto; left: 1.6rem; }
#worldmap #tv-ledger { top: 4.4rem; bottom: 1.6rem; right: 1.8rem; z-index: 3; }
@media (max-width: 860px) {
  .wm-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .wm-side { max-height: 30vh; transform: none; }
  .wm-sec:first-child, .wm-sec:nth-child(2) { display: none; }
  .wm-rose { width: 3rem; height: 3rem; }
}

/* ===================================================================== SHARED MENUS ON THE NOTEBOOK COVER
   #menu (bag, team, quest log, shop, storage, base, Harbor Log) and #help keep their structure; only the
   material changes to the field-journal cover: oiled canvas, brass-thread stitching, brass corner caps. */
#menu.ui-panel, #help.ui-panel { background: var(--cover-bg); -webkit-backdrop-filter: none; backdrop-filter: none; border: var(--cover-line); border-radius: var(--cover-r); box-shadow: var(--cover-shadow); }
#menu.ui-panel::before, #help.ui-panel::before { inset: 7px; border: var(--cover-stitch); border-radius: calc(var(--cover-r) - 6px); }
#menu.ui-panel::after, #help.ui-panel::after { content: none; }
/* quest log (kept as the user likes it): the detail page becomes an aged, torn sheet */
.qlog .qd.ui-panel--parch { border: 0; background: none; box-shadow: none; filter: drop-shadow(0 0.4rem 0.7rem rgba(0, 0, 0, 0.4)); isolation: isolate; }
.qlog .qd.ui-panel--parch::before { content: ''; position: absolute; inset: 0; z-index: -1; border: 0; border-radius: 0; background: radial-gradient(ellipse 6rem 4.5rem at 92% 10%, transparent 60%, rgba(128, 86, 34, 0.15) 64%, transparent 70%), radial-gradient(ellipse 55% 35% at 0% 100%, rgba(120, 82, 30, 0.18), transparent 70%), var(--fj-foxing), var(--fj-mottle), var(--grain), linear-gradient(176deg, #f0e3c4 0%, #e4d1a8 100%); box-shadow: inset 0 0 2rem rgba(112, 72, 26, 0.28); -webkit-mask-box-image: var(--fj-torn) 16 round; }
.qlog .qd.ui-panel--parch::before { left: 0; top: 0; right: 0; bottom: 0; width: auto; height: auto; }
.qlog .qd.ui-panel--parch::after { content: ''; position: absolute; inset: 0.4rem auto 0.4rem 1.1rem; width: 1px; background: rgba(168, 50, 31, 0.4); -webkit-mask: none; mask: none; pointer-events: none; }