/* web-v44.1: the chart viewer (98-map-chart.js), from design/map/.
   Phone: one bar, the chart, one sheet (peek · half · full). 900px and wider:
   the sheet becomes a side panel. Sits where the old viewer did (z-index 200),
   so app modals (260) open above it. */
body:has(#mpShell) #mapEditor { display: none !important; }

.mpc {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: #2a1f15; color: #231a10;
  font-family: var(--font-ui, system-ui, sans-serif); font-size: 16px; line-height: 1.4;
}
.mpc button { font: inherit; cursor: pointer; }
.mpc button:disabled { opacity: .5; cursor: default; }
.mpc :focus-visible { outline: 2px solid #e8c069; outline-offset: 2px; }
.mpc .mpc-sheet :focus-visible, .mpc .mpc-menu :focus-visible, .mpc .mpc-callout :focus-visible { outline-color: #14615c; }

/* bar */
.mpc-bar {
  flex: 0 0 auto; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 4px;
  min-height: 56px; padding: env(safe-area-inset-top) 8px 0;
  background: #2a1f15; border-bottom: 1px solid #4a3a28;
}
.mpc-icon {
  width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center;
  border: 0; border-radius: 12px; background: none; color: #e8c069;
}
#mpMore { border: 1px solid #6e5b40; color: #f1e4c4; }
.mpc-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mpc-icon svg circle { fill: currentColor; stroke: none; }
.mpc-title {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 4px 6px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  border: 0; border-radius: 10px; background: none; color: #f1e4c4; text-align: left;
}
.mpc-name { max-width: 100%; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpc-sub { font-size: 12px; color: #c3b189; }

/* edit bar */
.mpc-editbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title done" "seg seg"; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 8px 10px 16px; background: #6e4f12; color: #fff4dc; border-bottom: 0; }
.mpc-editbar .mpc-edittitle { grid-area: title; }
.mpc-editbar .mpc-done { grid-area: done; }
.mpc-editbar .mpc-seg { grid-area: seg; }
@media (min-width: 900px) {
  .mpc-editbar { grid-template-columns: minmax(0, 1fr) 320px auto; grid-template-areas: "title seg done"; padding: calc(6px + env(safe-area-inset-top)) 8px 6px 16px; }
}
.mpc-edittitle { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpc-done { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: #f4ecd8; color: #231a10; font-weight: 600; }
.mpc-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.mpc-seg button { min-height: 40px; border: 0; border-radius: 9px; background: none; color: #fff4dc; }
.mpc-seg button[aria-pressed="true"] { background: #f4ecd8; color: #231a10; font-weight: 600; }

/* body and chart */
.mpc .mp-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.mpc .mp-map, .mpc .leaflet-container { flex: 1 1 auto; min-width: 0; min-height: 0; background: #1c130a; }
.mpc-panel select { font-weight: 400; }
.mpc .mpc-draggable { cursor: grab; }

/* sheet (phone) */
.mpc-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1100;
  display: flex; flex-direction: column; max-height: calc(100% - 8px);
  background: #f4ecd8; border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 20px rgba(20, 14, 8, .35);
  transition: height .2s ease;
}
@media (prefers-reduced-motion: reduce) { .mpc-sheet { transition: none; } }
.mpc[data-sheet="half"] .mpc-sheet { height: 52%; }
.mpc[data-sheet="full"] .mpc-sheet { height: calc(100% - 8px); }
.mpc[data-sheet="peek"] .mpc-panel { display: none; }
.mpc-handle { align-self: center; flex: 0 0 auto; width: 72px; height: 24px; display: grid; place-items: center; border: 0; background: none; touch-action: none; cursor: grab; }
.mpc-handle span { width: 40px; height: 4px; border-radius: 4px; background: #b5a274; }
.mpc-tabs {
  flex: 0 0 auto; display: flex; gap: 18px; padding: 0 16px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid #d9c9a4; white-space: nowrap;
}
.mpc-tabs::-webkit-scrollbar { display: none; }
.mpc-tabs[hidden] { display: none; }
.mpc-tabs button { flex: 0 0 auto; min-height: 44px; padding: 10px 0 9px; border: 0; border-bottom: 3px solid transparent; background: none; color: #5c4a30; font-size: 14px; }
.mpc-tabs button[aria-selected="true"] { color: #231a10; font-weight: 700; border-bottom-color: #c18a2a; }
.mpc-count { font-weight: 400; color: #5c4a30; font-variant-numeric: tabular-nums; }
.mpc-peek { display: none; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 16px calc(10px + env(safe-area-inset-bottom)); border: 0; background: none; color: #231a10; font-size: 13px; text-align: left; }
.mpc[data-sheet="peek"] .mpc-peek { display: flex; }
.mpc-dots { display: inline-flex; padding-left: 5px; }
.mpc-dot { width: 16px; height: 16px; margin-left: -5px; border-radius: 50%; border: 2px solid #f4ecd8; }
.mpc-peek-text { min-width: 0; }
.mpc-peek-more { margin-left: auto; flex: 0 0 auto; color: #6e4f12; font-weight: 600; }
.mpc-panel { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); }

/* chips */
.mpc-chips { display: flex; gap: 8px; padding-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.mpc-chips::-webkit-scrollbar { display: none; }
.mpc-wrap { flex-wrap: wrap; overflow: visible; }
.mpc-chip { flex: 0 0 auto; min-height: 36px; padding: 6px 12px; border: 1px solid #c9b88e; border-radius: 999px; background: #ece0c2; color: #231a10; font-size: 13px; white-space: nowrap; }
.mpc-chip span { color: #5c4a30; font-variant-numeric: tabular-nums; }
.mpc-chip[aria-pressed="true"] { background: #c18a2a; border-color: #c18a2a; font-weight: 600; }
.mpc-chip[aria-pressed="true"] span { color: #231a10; }

/* rows */
.mpc-list { display: flex; flex-direction: column; gap: 8px; }
.mpc-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 12px;
  border: 1px solid #ddd0ab; border-radius: 14px; background: #efe4c3; color: #231a10; text-align: left;
}
.mpc-tile { position: relative; flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: #d6c7a1; }
.mpc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mpc-kind-dot { position: relative; width: 12px; height: 12px; border-radius: 999px; box-shadow: 0 0 0 2px #fff4dc; }
.mpc-tile img + .mpc-kind-dot { position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px; }
.mpc-swatch { border: 1px solid rgba(35, 26, 16, .3); }
.mpc-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mpc-row-name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.mpc-row-sub { font-size: 13px; color: #5c4a30; }
.mpc-chev svg { display: block; width: 16px; height: 16px; fill: none; stroke: #5c4a30; stroke-width: 2; }
.mpc .mpc-tag { flex: 0 0 auto; white-space: nowrap; }
.mpc-secret { padding: 1px 7px; border-radius: 999px; background: #3f3018; color: #f1e4c4; font-size: 11px; font-weight: 600; vertical-align: 1px; }
.mpc-faction { display: flex; align-items: center; gap: 8px; }
.mpc-faction .mpc-row { flex: 1 1 auto; min-width: 0; }
.mpc-faction.is-on .mpc-row { border-color: #c18a2a; box-shadow: 0 0 0 1px #c18a2a; background: #f4e6bf; }
.mpc-colour { position: relative; flex: 0 0 auto; display: block; box-sizing: border-box; width: 44px; height: 44px; padding: 0; margin: 0; border: 1px solid #c9b88e; border-radius: 12px; background: #efe4c3; cursor: pointer; }
.mpc-colour-swatch { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; width: 22px; height: 22px; border-radius: 999px; box-shadow: 0 0 0 2px #fff4dc, 0 0 0 3px rgba(35, 26, 16, .35); }
.mpc-colour input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.mpc-colour:focus-within { outline: 2px solid #14615c; outline-offset: 2px; }
.mpc-avatar {
  position: relative; flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden;
  border-radius: 999px; background: #d6c7a1; color: #231a10; font-size: 13px; font-weight: 700;
  box-shadow: 0 0 0 2px #f4ecd8, 0 0 0 4px var(--owner, #c18a2a);
}
.mpc-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mpc-avatar-s { width: 28px; height: 28px; font-size: 11px; box-shadow: 0 0 0 2px #efe4c3, 0 0 0 3px var(--owner, #c18a2a); }

/* record sheets in the panel */
.mpc-backlink { min-height: 40px; padding: 0; margin: 0 0 4px; border: 0; background: none; color: #6e4f12; font-weight: 600; }
.mpc-identity { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; }
.mpc-identity .mpc-tile { width: 52px; height: 52px; border-radius: 12px; }
.mpc .mpc-h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; line-height: 1.2; }
.mpc .mpc-h { margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5c4a30; }
.mpc .mpc-facts { margin: 0 0 12px; background: #efe4c3; border-color: #ddd0ab; }
.mpc .mpc-facts .rs-fact { align-items: center; min-height: 44px; }
.mpc-link { min-height: 36px; padding: 4px 0; border: 0; background: none; color: #231a10; font-weight: 600; text-align: right; }
.mpc-person { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: #231a10; font-weight: 600; }
.mpc-notes { margin: 0 0 8px; }
.mpc-muted { color: #5c4a30; }
.mpc-history { display: flex; flex-direction: column; }
.mpc-history-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e3d7b8; font-size: 14px; }
.mpc-history-row > span:last-child { flex: 0 0 auto; }
.mpc-history .mpc-link { align-self: flex-start; }
.mpc .rs-edited { margin: 12px 0 0; font-size: 12px; color: #5c4a30; }
.mpc-note, .mpc-empty { margin: 8px 0; font-size: 13px; color: #5c4a30; }
.mpc-empty { font-size: 14px; }
.mpc-search input { display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin-bottom: 10px; padding: 10px 14px; border: 1px solid #c9b88e; border-radius: 12px; background: #fffaf0; color: #231a10; font: inherit; }

/* actions */
.mpc-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; margin-top: 14px; }
.mpc-actions-grow { grid-template-columns: minmax(0, 1fr) auto; margin: 4px 0 14px; }
.mpc-primary { min-height: 46px; padding: 0 16px; border: 0; border-radius: 12px; background: #c18a2a; color: #231a10; font-weight: 600; }
.mpc-quiet { min-height: 46px; padding: 0 14px; border: 1px solid #c9b88e; border-radius: 12px; background: none; color: #231a10; }
.mpc-danger { border-color: #b06a5a; color: #8a2b1d; }

/* the engine's own panels (draw, form, review, import) */
.mpc-panel h2 { margin: 0 0 10px; font-size: 20px; font-weight: 700; }
.mpc-panel label { display: block; margin-top: 12px; font-size: 14px; color: #4a3a28; }
/* v44.6: the app's label weight (800) reached the fields inside each label, so
   every value in the border form read as bold (the field rule further down
   lost on specificity until it gained #mpPanel). */
.mpc-panel label { font-weight: 600; }
.mpc-panel label.mp-layer { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.mpc-panel :is(input:not([type="checkbox"]):not([type="color"]), select, textarea) {
  display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin-top: 5px; padding: 8px 12px;
  border: 1px solid #c9b88e; border-radius: 10px; background: #fffaf0; color: #231a10; font: inherit;
}
.mpc-panel textarea { min-height: 90px; }
.mpc-panel input[type="color"] { display: block; width: 56px; height: 44px; margin-top: 5px; padding: 3px; border: 1px solid #c9b88e; border-radius: 10px; background: #fffaf0; }
.mpc-panel input[type="checkbox"] { width: 20px; height: 20px; }
.mpc-panel .mp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mpc-panel .mp-actions button { min-height: 46px; padding: 0 14px; border: 1px solid #c9b88e; border-radius: 12px; background: none; color: #231a10; }
.mpc-panel .mp-actions .mp-primary { background: #c18a2a; border-color: #c18a2a; font-weight: 600; }
.mpc-panel .mp-danger { border-color: #b06a5a; color: #8a2b1d; }
.mpc-panel .mp-note { color: #5c4a30; }
.mpc-panel ul { padding-left: 20px; }

/* ⋯ and level menus */
.mpc-menu {
  position: absolute; top: calc(56px + env(safe-area-inset-top)); right: 8px; z-index: 1300;
  display: flex; flex-direction: column; min-width: 220px; max-width: calc(100vw - 16px); padding: 6px;
  background: #f4ecd8; border: 1px solid #ddd0ab; border-radius: 14px; box-shadow: 0 8px 24px rgba(20, 14, 8, .4);
}
.mpc-menu[hidden] { display: none; }
.mpc-menu-levels { left: 52px; right: auto; }
.mpc-menu button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: #231a10; text-align: left; }
.mpc-menu button:hover, .mpc-menu button:focus-visible { background: #ece0c2; }
.mpc-menu small { margin-left: auto; padding-left: 12px; color: #5c4a30; font-size: 13px; }
.mpc-tick { width: 16px; color: #6e4f12; font-weight: 700; }

/* marker callout */
.mpc-callout {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 1050; max-width: 380px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 12px;
  background: #f4ecd8; border: 1px solid #ddd0ab; border-radius: 14px; box-shadow: 0 6px 18px rgba(20, 14, 8, .3);
}
.mpc-callout[hidden] { display: none; }
.mpc-callout .mpc-tile { width: 40px; height: 40px; }
.mpc-callout .mpc-link { flex: 0 0 auto; min-height: 44px; padding: 0 6px; color: #6e4f12; }
.mpc-x { flex: 0 0 auto; width: 40px; height: 40px; border: 0; background: none; color: #5c4a30; font-size: 22px; line-height: 1; }

/* status line */
.mpc .mp-status {
  position: absolute; top: calc(64px + env(safe-area-inset-top)); bottom: auto; left: 12px; right: 12px; z-index: 1250;
  max-width: 420px; max-height: none; margin: 0 auto; padding: 8px 14px;
  background: #231a10; color: #fff4dc; border: 0; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  font-size: 13px; text-align: center; pointer-events: none;
}
.mpc.mp-editing .mp-status { top: calc(118px + env(safe-area-inset-top)); }

/* full screen */
.mpc .mpc-exit-full { display: none; position: absolute; top: 12px; right: 12px; z-index: 1200; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: #f4ecd8; color: #231a10; font-weight: 600; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.mpc.mp-full-view .mpc-bar, .mpc.mp-full-view .mpc-sheet, .mpc.mp-full-view .mpc-callout { display: none; }
.mpc.mp-full-view .mpc-exit-full { display: block; }

/* desktop: the sheet becomes a side panel */
@media (min-width: 900px) {
  .mpc-sheet {
    position: relative; left: auto; right: auto; bottom: auto; order: 2;
    flex: 0 0 380px; width: 380px; min-width: 0; height: auto !important; max-height: none;
    border-radius: 0; border-left: 1px solid #c9b88e; box-shadow: none;
  }
  .mpc-handle, .mpc-peek { display: none !important; }
  .mpc[data-sheet] .mpc-panel { display: block; }
  .mpc-tabs { padding-top: 8px; }
  .mpc-callout { right: 392px; }
}

/* Maps › Charts grouped by kind */
.map-grid.mpc-grouped .mpc-grid-head { grid-column: 1 / -1; margin: 10px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.map-grid.mpc-grouped .mpc-grid-head:first-child { margin-top: 0; }
.map-card-thumb { position: relative; }
.mpc-levels { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(35, 26, 16, .86); color: #fff4dc; font-size: 12px; }

/* Toasts sit under the bar while a chart is open, clear of the sheet. */
body:has(#mpShell) #toast { top: calc(64px + env(safe-area-inset-top)); bottom: auto; }

/* Placing markers: the sheet is only the small card from EditMarkers, so the chart stays clear. */
/* Drawing a border: the same, until the border is finished and the form opens. */
.mpc:is(.mpc-edit-markers, .mpc-compact) .mpc-sheet { height: auto; }
.mpc:is(.mpc-edit-markers, .mpc-compact) .mpc-panel { display: block; flex: 0 0 auto; }
.mpc:is(.mpc-edit-markers, .mpc-compact) .mpc-peek { display: none; }

/* web-v44.2: drawing (99-map-drawing.js) */
.mpc-panel .mpc-corners { margin: -4px 0 8px; font-size: 14px; font-weight: 600; color: #6e4f12; font-variant-numeric: tabular-nums; }
.mpc-panel .mpc-snap { margin-top: 10px; font-size: 14px; color: #4a3a28; }
.mpc-panel .mpc-edit-tools { margin: 0 0 4px; grid-template-columns: minmax(0, 1fr); }
.mpc-panel .mpc-edit-tools [aria-pressed="true"] { background: #f4e6bf; border-color: #c18a2a; font-weight: 600; }
.mpc .mpc-cut { display: block; margin: 10px 0 0; text-align: left; color: #6e4f12; }
.mpc .leaflet-pm-tooltip, .mpc .leaflet-tooltip.leaflet-pm-tooltip { background: #231a10; color: #fff4dc; border: 0; border-radius: 8px; font-size: 13px; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.mpc .leaflet-pm-tooltip::before { border-right-color: #231a10; }
/* While tapping corners the tip under the finger says what to do; keep the sheet to its controls. */
.mpc.mpc-compact .mpc-panel > p:not(.mpc-corners) { display: none; }
.mpc.mpc-compact .mpc-panel h2 { margin-bottom: 4px; font-size: 17px; }
.mpc.mpc-compact .mpc-panel .mp-actions { margin-top: 8px; }
.mpc.mpc-compact .mpc-panel .mpc-snap { min-height: 40px; margin-top: 4px; }
#mpPanel.mpc-panel :is(input, select, textarea) { font-weight: 400; }
.mpc .mpc-panel input[type="color"] { width: 56px; max-width: 56px; }
/* Corner handles big enough for a finger, in the chart's brass. */
.mpc .marker-icon { width: 20px !important; height: 20px !important; margin: -10px 0 0 -10px !important; border: 2px solid #6e4f12; background: #fff4dc; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.mpc .marker-icon.marker-icon-middle { width: 14px !important; height: 14px !important; margin: -7px 0 0 -7px !important; opacity: .85; }

/* web-v44.4 */
/* Chips wrap on a desktop (a mouse can't swipe a row sideways); the wheel also scrolls a row. */
@media (min-width: 900px) { .mpc-panel .mpc-chips { flex-wrap: wrap; overflow: visible; } }

/* Location views: the view's own name, with a small link mark when a marker uses it. */
.place-gallery-tile .marker-view-linked { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; border-radius: 999px; background: rgba(35, 26, 16, .82); color: #fff4dc; }
.place-gallery-tile .marker-view-linked svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.place-gallery-tile { position: relative; }

/* Maps: the Charts board. Sections as underline tabs; World, Towns and places, Bastions. */
#screen-maps.mpc-maps .status-chips[aria-label="Maps sections"] { display: flex; gap: 20px; padding: 0; margin: 4px 0 2px; border-bottom: 1px solid rgba(195, 177, 137, .35); overflow-x: auto; scrollbar-width: none; }
#screen-maps.mpc-maps .status-chips[aria-label="Maps sections"] .fchip { flex: 0 0 auto; min-height: 44px; padding: 8px 0 9px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; box-shadow: none; color: #c3b189; font-weight: 400; }
#screen-maps.mpc-maps .status-chips[aria-label="Maps sections"] .fchip.active { color: #f1e4c4; font-weight: 700; border-bottom-color: #c18a2a; }
#screen-maps.mpc-maps .status-chips[aria-label="Maps sections"] .fchip .fcount { background: none; color: inherit; font-weight: 400; opacity: 1; padding: 0 0 0 2px; }
#screen-maps .map-grid.mpc-grouped { display: flex; flex-direction: column; gap: 14px; }
.mpc-chart-group { display: flex; flex-direction: column; gap: 10px; }
#screen-maps .map-grid.mpc-grouped .mpc-chart-group .mpc-grid-head { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #e8c069; }
.mpc-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mpc-chart-group.is-world .mpc-chart-grid { grid-template-columns: minmax(0, 1fr); }
/* v44.6: as many columns as fit (they were three wide on a desktop, which made long lists slow to scan). */
@media (min-width: 700px) { .mpc-chart-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .mpc-chart-group.is-world .mpc-chart-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); } }
#screen-maps .mpc-chart-card { position: relative; display: block; margin: 0; padding: 0; overflow: hidden; border: 1px solid #ddd0ab; border-radius: 14px; background: #f4ecd8; color: #231a10; }
#screen-maps .mpc-chart-card .map-card-open { display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
#screen-maps .mpc-chart-card .mpc-chart-thumb { position: relative; display: block; width: 100%; height: 90px; border-radius: 0; background-color: #d6c7a1; background-size: cover; background-position: center; }
#screen-maps .mpc-chart-group.is-world .mpc-chart-thumb { height: 150px; }
#screen-maps .mpc-chart-card .mpc-levels { left: 8px; bottom: 8px; background: rgba(244, 236, 216, .95); color: #231a10; font-weight: 600; }
#screen-maps .mpc-chart-card .mpc-secret-badge { left: auto; right: 8px; background: #3f3018; color: #f1e4c4; }
.mpc-chart-body { display: flex; align-items: center; gap: 8px; padding: 9px 10px 10px 12px; min-width: 0; }
.mpc-chart-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#screen-maps .mpc-chart-card .map-card-name { font-size: 15px; font-weight: 700; color: #231a10; overflow-wrap: anywhere; }
#screen-maps .mpc-chart-card .map-card-sub { font-size: 12px; color: #5c4a30; }
.mpc-chart-counts { flex: 0 0 auto; display: inline-flex; gap: 8px; color: #5a4728; font-size: 13px; font-variant-numeric: tabular-nums; }
.mpc-chart-counts > span { display: inline-flex; align-items: center; gap: 2px; }
.mpc-chart-counts svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.mpc-chart-card .mpc-chev svg { display: block; width: 14px; height: 14px; fill: none; stroke: #5c4a30; stroke-width: 2; }
/* v44.6: one meta line — kind, then the counts — on every card. */
#screen-maps .mpc-chart-card .map-card-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
.mpc-chart-kind { white-space: nowrap; }
.mpc-chart-group:not(.is-world) .mpc-chart-counts { font-size: 12px; }
.mpc-chart-group:not(.is-world) .mpc-chart-card .mpc-chev { display: none; }
#screen-maps .mpc-chart-group.is-world .mpc-chart-card .map-card-sub { font-size: 13px; }
#screen-maps .mpc-chart-card > :is(.map-card-pin, .codex-row-pin) { position: absolute; display: grid; place-items: center; padding: 0; border: 1px solid #c9b88e; z-index: 1; top: 6px; right: 6px; width: 36px; height: 36px; min-height: 36px; border-radius: 999px; background: rgba(244, 236, 216, .92); }
/* v44.6: names offered from the markers inside a new border. */
.mpc-name-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.mpc-name-ideas > span { font-size: 13px; color: #5c4a30; }
/* v44.6: repeated markers (a plan's ballistae) as one row that opens. */
.mpc-group-n { font-weight: 400; color: #5c4a30; font-variant-numeric: tabular-nums; }
.mpc-group .mpc-group-chev { transition: transform .15s ease; transform: rotate(90deg); }
.mpc-group[aria-expanded="true"] .mpc-group-chev { transform: rotate(-90deg); }
.mpc-group-list { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; margin: 2px 0 4px; border-left: 2px solid #d8c79c; margin-left: 20px; }
@media (prefers-reduced-motion: reduce) { .mpc-group .mpc-group-chev { transition: none; } }
/* v44.6: the brass Codex pin on the card's picture; quiet until pinned. */
#screen-maps .mpc-chart-card > .codex-row-pin.row-pin-brass { top: 6px; right: 6px; width: 44px; height: 44px; min-height: 44px; transform: none; color: #6e5b40; filter: none; opacity: 1; }
#screen-maps .mpc-chart-card > .codex-row-pin.row-pin-brass svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
#screen-maps .mpc-chart-card > .codex-row-pin.row-pin-brass.on.shared { color: #845c0f; background: #f1dfb1; border-color: #c18a2a; }
#screen-maps .mpc-chart-card > .codex-row-pin.row-pin-brass.on:not(.shared) { color: #14564c; background: #d5ebe5; border-color: #1f6d5f; }
#screen-maps .mpc-chart-card > .codex-row-pin.row-pin-brass.on svg { fill: currentColor; }
/* v44.7: the Maps search and tabs stay at the top while the list scrolls (as the Codex's do). */
#screen-maps .mpc-maps-sticky { position: sticky; top: 0; z-index: 4; background: var(--deck, #2b2118); padding: 6px 0 4px; margin-bottom: 8px; }
#screen-maps .mpc-maps-sticky > .filter-rail { margin-bottom: 4px; }
#screen-maps .mpc-maps-sticky > .status-chips[aria-label="Region filter"] { margin: 8px 0 2px; }
/* v44.8: a chart picture that didn't load says so, with Retry, instead of a dark empty chart. */
.mpc .mp-image-failed { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: #f1e4c4; z-index: 1; }
.mpc .mp-image-failed p { margin: 0; max-width: 32ch; line-height: 1.45; }
.mpc .mp-image-failed .mpc-quiet { min-height: 44px; padding: 0 18px; border: 1px solid #c18a2a; border-radius: 12px; background: none; color: #f1e4c4; }

/* v44.13: people at a place — the People tab and a marker's "People here". */
.mpc-face {
  position: relative; flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden;
  border-radius: 999px; background: #d6c7a1; color: #3f3018; font-weight: 700; font-size: 17px;
  box-shadow: 0 0 0 2px #fff4dc, 0 0 0 3px rgba(193,138,42,.55);
}
.mpc-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mpc-face.is-dead img { filter: grayscale(1); opacity: .75; }
.mpc-person { min-height: 64px; }
.mpc-group-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 8px; font-size: 15px; font-weight: 700; color: #3f3018; }
.mpc-people-group:first-of-type .mpc-group-h { margin-top: 4px; }
.mpc-group-h .mpc-link { padding: 0; font-size: 15px; font-weight: 700; }
.mpc-here { margin: 6px 0 12px; }
.mpc-see-all { display: block; margin-top: 8px; min-height: 44px; }
@media (max-width: 420px) { .mpc-tabs { gap: 13px; padding: 0 12px; } .mpc-tabs button { font-size: 13.5px; } }

/* v44.14: the bar's party flag and territories switch; the party marker. */
.mpc-bar .mpc-party-btn, .mpc-bar .mpc-borders-btn { margin-left: -4px; }
.mpc-bar .mpc-party-btn { color: #e0614b; }
.mpc-bar .mpc-party-btn[aria-pressed="true"] { background: #b3261e; color: #fff4dc; }
.mpc-bar .mpc-borders-btn[aria-pressed="true"] { background: rgba(193,138,42,.22); box-shadow: inset 0 0 0 1px #c18a2a; color: #e8c069; }
.mpc-bar .mpc-borders-btn[aria-pressed="false"] { opacity: .75; }
.mpc-party-icon { background: none; border: 0; }
.mpc-party { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.mpc-party-flag {
  position: relative; z-index: 1; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px;
  background: #b3261e; color: #fff4dc; box-shadow: 0 0 0 2px #fff4dc, 0 2px 6px rgba(0,0,0,.45);
}
.mpc-party-flag svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mpc-party-ring { position: absolute; inset: 9px; border-radius: 999px; border: 3px solid rgba(179,38,30,.55); animation: mpc-party-pulse 2.2s ease-out infinite; }
.mpc-party.is-moving .mpc-party-flag { box-shadow: 0 0 0 2px #fff4dc, 0 0 0 5px #b3261e, 0 3px 8px rgba(0,0,0,.45); }
.mpc-party-label {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: -6px; white-space: nowrap;
  padding: 1px 6px; border-radius: 999px; background: #b3261e; color: #fff4dc; font-size: 10.5px; font-weight: 700;
}
@keyframes mpc-party-pulse { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mpc-party-ring { animation: none; opacity: .6; } }
.mpc-moving-party .leaflet-container { cursor: crosshair; }
.mpc-history-clear { margin-top: 14px; flex-wrap: wrap; }
.mpc-history-clear .mpc-note { flex: 1 1 100%; margin: 0 0 6px; }
.mpc-danger-fill { background: #b3261e !important; border-color: #b3261e !important; color: #fff4dc !important; }

/* v44.15: the party marker lets taps through unless the party is being moved. */
.mpc-party-icon, .mpc-party-icon * { pointer-events: none !important; }

/* v44.18: the party off screen — a thin red sliver on that edge, not a control. */
/* v44.21: two bars (top/bottom and side) that make an L in a corner; both pulse. */
.mpc-party-edge { position: absolute; inset: 0; z-index: 450; pointer-events: none; }
.mpc-party-edge > span { position: absolute; background: #b3261e; border-radius: 3px; animation: mpc-party-edge-pulse 2.2s ease-out infinite; }
@keyframes mpc-party-edge-pulse { 0% { box-shadow: 0 0 0 0 rgba(179,38,30,.75); } 70% { box-shadow: 0 0 0 7px rgba(179,38,30,0); } 100% { box-shadow: 0 0 0 0 rgba(179,38,30,0); } }
@media (prefers-reduced-motion: reduce) { .mpc-party-edge > span { animation: none; } }
.mpc-party-edge[hidden] { display: none; }
.mpc .mp-body { overflow: hidden; }

/* v44.23: no focus rectangle round a tapped territory; the territory itself is picked out. */
.mpc .leaflet-interactive:focus, .mpc .leaflet-interactive:focus-visible { outline: none; }
.mpc path.mpc-terr-selected { animation: mpc-terr-pulse 1.8s ease-in-out infinite; }
@keyframes mpc-terr-pulse { 0%, 100% { filter: drop-shadow(0 0 1px var(--terr-glow, #c18a2a)); } 50% { filter: drop-shadow(0 0 7px var(--terr-glow, #c18a2a)); } }
@media (prefers-reduced-motion: reduce) { .mpc path.mpc-terr-selected { animation: none; filter: drop-shadow(0 0 4px var(--terr-glow, #c18a2a)); } }
/* On a touch screen a territory's name box only got in the way of the tap; the sheet names it. */
@media (hover: none) { .mpc .leaflet-tooltip:not(.mp-feature-tooltip) { display: none !important; } }

/* v44.28: a place marker's sheet — location views and its charts as icon tiles. */
.mpc-chart-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.mpc-chart-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 88px; padding: 10px 12px; text-align: left; border: 1px solid #ddd0ab; border-radius: 14px; background: #efe4c3; color: #231a10; font: inherit; cursor: pointer; }
.mpc-chart-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(193,138,42,.18); color: #845c0f; }
.mpc-chart-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mpc-chart-name { font-weight: 700; font-size: 15px; }
.mpc-chart-sub { font-size: 13px; color: #5c4a30; overflow-wrap: anywhere; }
/* v44.29: one chart tile spans the row, icon beside its label, and is shorter. */
.mpc-chart-tiles.is-one { grid-template-columns: minmax(0, 1fr); }
.mpc-chart-tiles.is-one .mpc-chart-tile { flex-direction: row; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 8px 14px; }
.mpc-chart-tiles .mpc-chart-tile { align-items: center; text-align: center; min-height: 76px; }