/*
 * world_map.css — World Map Generator (Maps > World).
 *
 * Styles the world-map home gallery + the hex-grid editor. Reuses the dungeon
 * Map Builder's canvas chrome classes (.maps__plate / .maps__canvas / .maps__zoom*
 * from maps.css) so the canvas + zoom controls match; everything world-specific
 * is namespaced under .world / .world-editor / .world-saved / .world-panel using
 * the shared dark --color-* / --space-* / --font-* tokens. No new CSS approach.
 */

/* ---- Home gallery ------------------------------------------------------- */
.world__titlestrip {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md, 1rem);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-sm, 0.5rem);
  margin-bottom: var(--space-md, 1rem);
}


.world-home__new { white-space: nowrap; }

.world-saved__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
}

.world-saved-row {
  /* position:relative anchors the Load button's stretched ::after overlay so a
     click anywhere on the row triggers Load — mirrors the dungeon .maps-saved-row
     "stretched link" pattern so the whole row is clickable-to-load (Ken, 2026-06-13). */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md, 1rem);
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  /* Match the dungeon-maps / encounter / campaign saved-row standard: accent
     left rail at rest + accent border on hover/focus (Ken #2, 2026-06-11). */
  border-left: 3px solid var(--color-accent);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.world-saved-row:hover,
.world-saved-row:focus-within {
  background-color: var(--color-surface-hover);
  border-color: var(--color-accent);
}

/* Stretch the Load button's hit area over the whole row ("stretched link"),
   matching .maps-saved-row__load::after. Lives on the Load button only; the
   delegated home handler reads e.target.closest('[data-load-world]'), so a click
   anywhere on the row resolves to Load. Keyboard a11y is unchanged — the real
   Load <button> stays the focusable affordance. */
.world-saved-row__load::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Delete (and any other per-row control) sits ABOVE the Load overlay so its
   clicks delete and never also trigger a row-load — mirrors
   .maps-saved-row__btn--delete. */
.world-saved-row__btn--delete {
  position: relative;
  z-index: 2;
}

.world-saved-row__main {
  display: flex;
  align-items: baseline;
  gap: var(--space-md, 1rem);
  flex-wrap: wrap;
  min-width: 0;
}

.world-saved-row__nameline {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}

.world-saved-row__name {
  font-family: var(--font-heading-ui);
  color: var(--color-text);
  font-size: 1rem;
}

.world-saved-row__current {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-cinzel-caps, 0.04em);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 0.05rem 0.4rem;
  border-radius: 2px;
}

.world-saved-row__counts,
.world-saved-row__meta,
.world-saved-row__date {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.world-saved-row__actions {
  display: inline-flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Color + hover come from the shared .btn--danger class applied in markup;
   no local color rule needed (was a duplicate of .btn--danger). */

.world-saved__empty,
.world-saved__loading {
  padding: var(--space-md, 1rem) 0;
}

/* ---- Editor ------------------------------------------------------------- */
/* Ken #7 — FULL re-layout to mirror the dungeon Map Builder. The world editor now
   shares the dungeon's 3-column workspace (.maps__workspace: rail | plate | panel),
   its LEFT-rail control classes (.maps__rail / .maps-rail__* from maps.css), and
   its RIGHT panel frame (.maps__legend). Ken #2 — the realm title is no longer in
   the top bar (it renders on the map via drawRealmTitle). This file now only adds
   the world-specific bits: a couple of rail field/hint helpers, the meta chips
   (under the title strip), the in-panel hex-editor styling that sits inside the
   shared .maps__legend frame, the compass, the on-map legend overlay, and the
   parchment canvas ground. */
.world-editor__head { align-items: flex-end; }

/* #8/#4 — the map meta (size chip + user-settable danger) moved to the TOP of the
   right hex-editor panel (it used to sit under the title strip). The chip styling
   is kept and reused inside .world-panel__meta. */
.world-meta__chip {
  font-family: var(--font-heading-ui);
  font-size: 0.78rem;
  letter-spacing: var(--ls-cinzel-caps, 0.03em);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
}

/* ---- Left rail: world-specific helpers on top of the shared maps-rail base ---- */
/* The Generate group stacks labelled inputs vertically (the dungeon Generate group
   uses segmented size toggles; ours needs number/select fields). A field is a
   small uppercase label (.maps-rail__optlbl, shared) above its control. */
.world-rail .maps-rail__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.world-rail .world-gen__num,
.world-rail .world-gen__select {
  width: 100%;
  padding: 0.35rem 0.5rem;
}

/* Make the generate-inputs section hide cleanly when a map exists (mirrors the
   other rail groups toggled via [hidden] in syncGenVisibility). */
.maps-rail__group[hidden] { display: none; }

/* Color / generated-lines / cataclysm checks reuse .maps-rail__check sizing; just
   tint the box to the accent like the dungeon's stone-tile toggle. */
.world-gen__toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
}
.world-gen__toggle input { accent-color: var(--color-accent); }

/* Unified tool palette (item #11) — the tool buttons reuse the dungeon's
   .maps-rail__btn icon+label layout and is-active styling (accent left-border +
   filled bg), so the two builders' rails match. No bespoke rule needed for the
   active state; the shared .maps-rail__btn.is-active in maps.css governs it. The
   tool hint sits muted/italic beneath the list. */
.maps-rail__hint {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-text-muted);
  padding: 0.1rem 0.1rem 0;
}

/* When a draw tool is active the canvas is a drawing surface (crosshair); with
   the Select tool it stays a select/pan surface. */
.world-editor__canvas--draw { cursor: crosshair; }

.world-editor__plate { position: relative; min-width: 0; }

/* The world hex tiles are BLACK ink on transparent PNGs, so this canvas gets a
   warm parchment ground for ink-on-paper contrast (the canvas fill in draw()
   matches). This is world-only; the dungeon Maps builder keeps its dark canvas. */
.world-editor__canvas { background: #e8dcc0; }

/* ----------------------------------------------------------------------------
   On-map label rename + reroll (Ken #2/#7). A small inline control that floats
   over the canvas at a clicked label's position: a text input + a reroll (dice)
   icon to its right, mirroring the dungeon builder's on-map rename. Anchored by
   its CENTRE on the label (JS sets left/top to the label centre) via translate.
   Ink-on-parchment to sit with the map's cartography skin.
   ---------------------------------------------------------------------------- */
.world-labeledit {
  position: absolute;
  z-index: 20;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.22rem;
  background: rgba(241, 232, 207, 0.97);   /* parchment halo, opaque enough to read */
  border: 1px solid #6b5a3a;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(20, 14, 6, 0.35);
}

.world-labeledit__input {
  appearance: none;
  min-width: 7ch;
  max-width: 44vw;
  width: auto;
  field-sizing: content;            /* shrink/grow to the name where supported */
  margin: 0;
  padding: 0.1rem 0.3rem;
  background: #fffaf0;
  border: 1px solid #8a7752;
  border-radius: 2px;
  color: #2a1c0c;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 1rem;                  /* JS overrides to match the on-map label size */
  line-height: 1.2;
}
.world-labeledit__input--italic { font-style: italic; }
.world-labeledit__input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

/* The reroll (dice) icon, hugging the input's right edge. */
.world-labeledit__reroll {
  appearance: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  background: transparent;
  border: 1px solid #8a7752;
  border-radius: 2px;
  color: #4a3a22;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition:
    color var(--transition-fast, 150ms),
    border-color var(--transition-fast, 150ms),
    background var(--transition-fast, 150ms);
}
.world-labeledit__reroll:hover,
.world-labeledit__reroll:focus-visible {
  color: #2a1c0c;
  border-color: var(--color-accent);
  background: rgba(255, 250, 240, 0.7);
  outline: none;
}
.world-labeledit__reroll:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.world-labeledit__reroll:disabled { cursor: default; opacity: 0.55; }
/* Spin the die while a roll is in flight (reuses the panel's spin keyframe). */
.world-labeledit__reroll.is-rolling { animation: world-reroll-spin 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .world-labeledit__reroll.is-rolling { animation: none; opacity: 0.6; }
}

.world-editor__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  margin: 0;
  /* #6 — the empty-state hint sits over the warm parchment canvas, where the muted
     light text was hard to read. Use dark ink so it's legible on the light fill. */
  color: #2a1c0c;
  font-style: italic;
  pointer-events: none;
}

/* item 6 — the hint's display:flex above out-specifies the UA [hidden] rule, so
   the prompt lingered as a watermark over a generated/loaded map. Force it off
   when [hidden] is set (refreshEmptyState toggles .hidden on every map change). */
.world-editor__empty[hidden] { display: none !important; }

/* ---- Navigation compass rose ---------------------------------------------
   Ken 2026-07-07 (batch "lexical-leaping-quasar", Part 2) — the old
   position:fixed .world-compass DOM/SVG overlay is RETIRED: it was oblivious to
   pan/zoom (pointer-events:none, permanently pinned to the viewport corner) so
   it could never be draggable/persistent. The compass is now canvas-drawn
   (world_map.js paintWorldCompass/paintCompassRose) so it lives inside the
   pan/zoom transform and can be dragged/resized/rotated/cropped like the title
   and scale bar. No CSS needed for it any more. */

/* ---- On-screen legend panel (Ken #9) ------------------------------------ */
/* Docked to the UPPER-LEFT of the canvas viewport (sibling of the canvas inside
   the relatively-positioned plate), so it never pans/zooms with the map and stays
   clear of the lower-right compass + lower-left scale bar. Ink-on-parchment to
   match the map; toggled by the header "Legend" button; tasteful + non-blocking. */
.world-legend {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 6;
  max-width: 15rem;
  max-height: calc(100% - 1.7rem);
  overflow-y: auto;
  padding: 0.5rem 0.7rem 0.6rem;
  background: radial-gradient(circle at 30% 20%, rgba(240, 232, 213, 0.97), rgba(232, 220, 192, 0.95));
  border: 1px solid #b39a6b;
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(40, 30, 15, 0.35);
  color: #2a1c0c;
  font-family: Georgia, 'Times New Roman', serif;
}
.world-legend[hidden] { display: none; }

.world-legend__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(58, 42, 22, 0.35);
}
.world-legend__title {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}
.world-legend__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: #3a2a16;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.1rem 0.25rem;
  cursor: pointer;
  border-radius: 2px;
}
.world-legend__close:hover { background: rgba(58, 42, 22, 0.12); }
.world-legend__close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.world-legend__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.18rem;
}
.world-legend__row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
}
.world-legend__row--gm .world-legend__label { font-style: italic; }
.world-legend__swatch {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
}
.world-legend__label { min-width: 0; }

/* ---- Right panel (hex editor) ------------------------------------------- */
/* The per-hex editor now uses the dungeon legend's RIGHT-panel frame
   (.maps__legend): same surface, border, width, sticky max-height, and internal
   scroll — so it reads as the same right-side panel the dungeon builder uses. We
   only add the inner padding for the hex-editor content (the dungeon legend pads
   per-row instead). min-width:0 keeps long names from forcing overflow. */
.world-editor__panel {
  min-width: 0;
  padding: var(--space-md, 1rem);
  /* Sticky so the hex editor stays in view as the (often tall) map scrolls past,
     matching the sticky left rail. The .maps__workspace grid uses
     align-items:stretch, but a sticky child needs align-self:start to pin. */
  align-self: start;
  position: sticky;
  top: 0.5rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}

.world-panel__hint { margin: 0; font-style: italic; }

/* #8/#4 — panel-top meta: the size chip + the user-settable Danger control. Sits at
   the very top of the right panel (above the hex editor / placeholder), separated
   from the content below by a hairline rule so the map-level info reads as its own
   band. The danger control is a compact labelled <select> on the app's hex
   danger-level scale (Safe/Unsafe/Risky/Deadly), persisted on world.meta.danger. */
.world-panel__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}
.world-panel__danger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.world-panel__danger-lbl {
  font-family: var(--font-heading-ui);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-cinzel-caps, 0.04em);
  color: var(--color-text-muted);
}
.world-panel__danger-sel {
  appearance: auto;
  font-family: var(--font-heading-ui);
  font-size: 0.78rem;
  padding: 0.2rem 0.4rem;
  background: var(--color-bg);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 2px;
}
.world-panel__danger-sel:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
}

/* Header band — echoes the dungeon legend head (.maps__legend-head /
   .maps__legend-title): a separated row with an uppercase Cinzel-caps heading. */
.world-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.6rem;
  margin-bottom: 0.85rem;
}

.world-panel__title {
  margin: 0;
  font-family: var(--font-heading-ui);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-cinzel-caps, 0.04em);
  color: var(--color-heading);
}

.world-panel__edited {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-cinzel-caps, 0.04em);
  color: var(--color-accent);
}

.world-panel__terrain {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.world-panel__terrain strong { color: var(--color-text); }

/* item 7 — land/sea name rows in the panel. */
.world-panel__area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  font-size: 0.84rem;
  color: var(--color-text);
}
.world-panel__area:last-child { margin-bottom: 0; }

/* Hint that naming/rerolling now happens on the map (Ken #2/#7). */
.world-panel__area-hint {
  margin: 0.45rem 0 0;
  font-size: 0.74rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.world-panel__area-kind {
  font-family: var(--font-heading-ui);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-cinzel-caps, 0.04em);
  color: var(--color-text-muted);
}

/* Shrink-to-content so the re-roll icon hugs the name (immediately to its
   right), matching the dungeon builder's grouped name + reroll control. */
.world-panel__area-name {
  font-family: var(--font-heading-ui);
  color: var(--color-text);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Small re-roll dice/refresh icon — every panel name row (region, sea, POI).
   Mirrors maps.js .maps__title-reroll for visual parity. (Ken #2: the old
   top-bar realm name + its reroll were removed; the realm name renders on the
   map only. On-map inline name editing is a separate follow-up task.) */
.world-panel__reroll {
  appearance: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: 2px;
  line-height: 1;
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.9rem;
  transition:
    color var(--transition-fast, 150ms),
    border-color var(--transition-fast, 150ms);
}
.world-panel__reroll:hover,
.world-panel__reroll:focus-visible {
  color: var(--color-text);
  border-color: var(--color-accent);
  outline: none;
}
.world-panel__reroll:disabled {
  cursor: default;
  opacity: 0.6;
}
/* Spin the glyph while a roll is in flight (the button keeps its icon). */
.world-panel__reroll.is-rolling { animation: world-reroll-spin 0.7s linear infinite; }
@keyframes world-reroll-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .world-panel__reroll.is-rolling { animation: none; opacity: 0.6; }
}

/* #6 — clearly delineated sections, mirroring the dungeon room-edit menu
   (maps.css .maps-roomedit__row + .maps-roomedit__row separation + .maps-roomedit__lbl
   uppercase Cinzel-caps labels). Each section is a card-like block with a hairline
   top rule between sections and a consistent label/body rhythm, so it reads at a
   glance which controls belong to Terrain tile / Point of interest / Encounter /
   Land & sea / Cataclysm / Dungeon. The first section has no top rule (the panel
   header already separates it). */
.world-panel__sec {
  margin: 0;
  padding: 0.85rem 0;
}
.world-panel__sec + .world-panel__sec {
  border-top: 1px solid var(--color-border);
}
.world-panel__sec:last-child { padding-bottom: 0; }

/* Section header — uppercase Cinzel-caps label, same family + weight as the
   dungeon's .maps-roomedit__lbl, so the two builders' edit menus read alike. */
.world-panel__sec-h {
  margin: 0 0 0.55rem;
  font-family: var(--font-heading-ui);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-cinzel-caps, 0.04em);
  color: var(--color-heading);
}

.world-panel__biomes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}

.world-panel__biome {
  appearance: none;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 0.25rem 0.5rem;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background-color var(--transition-fast, 150ms), border-color var(--transition-fast, 150ms);
}
.world-panel__biome:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-accent);
}
.world-panel__biome:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.world-panel__small {
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
}

/* (Ken #4a) Rivers/Roads chip sections were removed from the hex panel — drawing
   is freehand now — so the .world-panel__chip(s)/__none/__chip-x styles that
   served those sections are gone with them. */

.world-panel__poi-on {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--color-text);
}

/* #5 — cataclysm TYPE picker row + the "marked" caption. The picker row reuses the
   POI type-row layout (label + <select>); the caption names the chosen type (the
   "!" map icon stays as Ken likes). */
.world-panel__cata-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.world-panel__cata-on {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.world-panel__cata-on strong { color: var(--color-danger); }

.world-panel__poi-on {
  justify-content: space-between;
}

.world-panel__poi-kind {
  text-transform: capitalize;
}

.world-panel__poi-actions {
  display: inline-flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

/* POI name + content detail (item 3). */
.world-panel__poi-detail {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Ken #3 — POI name + inline re-roll icon on one row (replaces the old
   "Re-roll name/content" button), matching the region/sea name rows. */
.world-panel__poi-namerow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.world-panel__poi-name {
  margin: 0;
  font-family: var(--font-heading-ui);
  font-size: 0.92rem;
  color: var(--color-text);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.world-panel__poi-name--empty {
  color: var(--color-text-muted);
  font-style: italic;
}

.world-panel__poi-content {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* Linked-encounter block (Ken #7) — mirrors the POI block's compact layout. The
   name line shows the linked encounter (or a muted "None"); the button below
   creates or edits the link. GM-only feature; this panel is editor-only chrome. */
.world-panel__enc {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
}
.world-panel__enc-lbl {
  color: var(--color-text-muted);
}
.world-panel__enc-name {
  font-family: var(--font-heading-ui);
  color: var(--color-text);
  word-break: break-word;
}
.world-panel__enc-name--none {
  font-family: inherit;
  font-style: italic;
  color: var(--color-text-muted);
}
/* #6 — the linked encounter name is itself a clickable link (opens the encounter,
   same path as the Edit button). Styled as an inline text link, not a chrome button:
   no box, underline-on-hover, keyboard-focusable. */
.world-panel__enc-name--link {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  font-family: var(--font-heading-ui);
  color: var(--color-accent, #6495ED);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.12s ease, color 0.12s ease;
}
.world-panel__enc-name--link:hover,
.world-panel__enc-name--link:focus-visible {
  text-decoration-color: currentColor;
}
.world-panel__enc-name--link:focus-visible {
  outline: 2px solid var(--color-accent, #6495ED);
  outline-offset: 2px;
  border-radius: 2px;
}
.world-panel__sec [data-enc-link] {
  align-self: flex-start;
}

/* #6 — POI type selector + Add-POI type chooser. A compact labelled <select>
   bound to poi.kind, styled to sit with the parchment/dark theme. */
.world-panel__poi-kindrow,
.world-panel__poi-addrow,
.world-panel__dungeon-link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.world-panel__poi-addrow {
  margin-bottom: 0;
}
.world-panel__poi-kindlbl {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.world-panel__poi-kindsel {
  appearance: auto;
  font-size: 0.8rem;
  padding: 0.2rem 0.4rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.world-panel__poi-kindsel:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
}
.world-panel__poi-kindsel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* #7 — POI Dungeon block. Mirrors the encounter block layout: a name line then
   an actions row (create / open / unlink) and a "Link existing" dropdown. */
.world-panel__dungeon {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.82rem;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}
.world-panel__dungeon-lbl {
  color: var(--color-text-muted);
}
.world-panel__dungeon-name {
  font-family: var(--font-heading-ui);
  color: var(--color-text);
  word-break: break-word;
}
.world-panel__dungeon-name--none {
  font-family: inherit;
  font-style: italic;
  color: var(--color-text-muted);
}
.world-panel__dungeon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.4rem 0 0.5rem;
}

/* Save dirty cue — the rail Save filebtn (text-only) flips to the accent color
   while there are unsaved edits, mirroring the dungeon Save button's is-dirty cue
   (which tints its disk icon). */
[data-world-save].is-dirty {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
}

/* ---- Character tokens (party) ------------------------------------------- */
/* The Add-party MODAL and the per-token POPOVER reuse the dungeon builder's
   .maps-party-* and .maps-tokenmenu styles (maps.css, loaded on this page), so
   the world party reads as the same control set as the dungeon party. Only the
   rail group + the on-canvas grab affordance are world-specific.

   Tokens themselves are painted on the <canvas> by paintWorldTokens() — they are
   not DOM, so there is no per-token CSS. They draw ON TOP of tiles/overlays/labels
   and appear in both the GM and Player PNG exports (the party is not a GM secret). */
.world-party {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* The party count sits a hair tighter under the Add-party button in the rail. */
.world-party__count {
  margin-top: 0.3rem;
}
/* NOTE: the canvas cursor is left to the existing rig — a default pointer for
   hex select, and `grab`/`grabbing` (via .maps__canvas--pannable / --panning,
   shared from maps.css) when zoomed-in panning is available. Token dragging works
   under any of those, so we deliberately add no token-specific canvas cursor to
   avoid masking the hex-select / pan affordances. */

/* ---- Responsive --------------------------------------------------------- */
/* The 3-column grid, the left rail (static + full-width), and the right panel
   (full-width, capped height) all collapse via the shared .maps__workspace /
   .maps__rail / .maps__legend rules in maps.css at <=768px, so the world editor
   inherits the dungeon builder's stacked layout for free. Only the world-specific
   bits need their own tweaks below. */
@media (max-width: 768px) {
  /* Stacked panel scrolls its own content rather than running tall. */
  .world-editor__panel { max-height: 50vh; }
}

@media (max-width: 700px) {
  .world-saved-row { align-items: flex-start; }
  .world-saved-row__actions { width: 100%; justify-content: flex-end; }
}