/* Season VII first design pass. Map data and planner behaviour stay in the source app. */
:root {
  color-scheme: light;
  --ink: #392d44;
  --muted: #84738e;
  --paper: #f3eee7;
  --paper2: #fffcf6;
  --gold: #eab544;
  --line: #e4d7c5;
  --shadow: 0 12px 32px #070b1426;
}
body { background: #101722; color: var(--ink); }
.shell { max-width: 1640px; padding: 28px 28px 40px; }
.top {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 190px; padding: 32px; margin-bottom: 24px;
  border: 1px solid #795366; border-bottom: 3px solid #e2b14e;
  border-radius: 18px;
  background: linear-gradient(110deg, #281c3b, #43284d);
  box-shadow: 0 12px 32px #05080d40;
}
.top::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 0 auto;
  width: 660px; max-width: 65%;
  background: url('branding/season-vii-art.png') center 28% / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 38%);
  opacity: .87; pointer-events: none;
}
.brand { align-items: center; gap: 23px; max-width: 72%; }
.crest { width: 104px; height: 70px; flex: 0 0 104px; background: none; border-radius: 0; box-shadow: none; }
.crest img { display: block; width: 104px; height: 70px; object-fit: contain; filter: drop-shadow(0 3px 6px #160b2980); }
.eyebrow { color: #e6bc71; font-size: 11px; letter-spacing: .15em; line-height: 1.6; }
.brand h1 { color: #ffdf8e; font: 850 clamp(23px, 2.8vw, 34px)/1.18 system-ui, sans-serif; letter-spacing: -.025em; margin-top: 7px; max-width: 650px; text-wrap: balance; text-shadow: 0 2px 16px #160b29; }
.lang-wrap { align-self: flex-start; position: relative; z-index: 1; color: #f4e5c2; gap: 8px; }
.lang-wrap label { font-size: 12px; }
.lang-wrap select { background: #2e213de8; border-color: #b2956d9c; color: #fff0cd; box-shadow: 0 3px 12px #140b2466; }
.lang-wrap option { background: #30233f; color: #fff0cd; }
.intro { margin: 0 0 20px; }
.intro h2 { color: #fff3d7; font: 800 26px/1.25 system-ui, sans-serif; letter-spacing: -.025em; }
.intro p { color: #acb6c6; max-width: 880px; font-size: 14px; line-height: 1.65; }
.layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
.map-card, .side-card { background: #fffcf6; border-color: #d9c9b1; border-radius: 16px; box-shadow: var(--shadow); }
.toolbar { padding: 16px; background: linear-gradient(100deg, #eee6f3, #faf1df); border-color: #e4d7c5; gap: 12px; flex-wrap: wrap; }
.filters { gap: 7px; }
.chip { color: #796783; border-color: #dcd0e2; background: #fffcf6; border-radius: 9px; font-size: 12px; padding: 9px 12px; }
.chip.active { color: #553563; border-color: #a88bb7; background: #f4eafa; box-shadow: inset 0 -2px #b294bd; }
.chip:hover { background: #f6eef9; border-color: #a88bb7; }
.controls { gap: 7px; }
.controls button { background: #fffcf6; color: #62446f; border-color: #d5c4dd; border-radius: 9px; height: 37px; min-width: 37px; }
.controls button:hover { background: #f5ebfa; border-color: #9670aa; }
.zoom-label { color: #7c6787; font-weight: 700; font-size: 12px; }
#export-map { background: linear-gradient(135deg, #f8d273, #e9b13f); border-color: #d9a43b; color: #3a2545; font-size: 12px; font-weight: 800; padding-inline: 14px; box-shadow: 0 3px 9px #bb7c2520; }
#export-map:hover { background: linear-gradient(135deg, #ffe3a0, #f4c664); }
.map-viewport { background: #e9d4a5; scrollbar-color: #aa84b4 #eee5f3; }
.map-stage { background: #e7cb93; }
.map-art { box-shadow: inset 0 0 0 1px #a87d3a66; }
.terrain-caption { color: #795e39; }
.compass { color: #68436f; }
.compass b { color: #8b5b9b; }
.node .asset-icon, .node.temple .asset-icon { filter: drop-shadow(0 1px 2px #2c183b70); opacity: 1; }
.node:hover .tile-outline, .node:focus .tile-outline { stroke: #8a50a2; fill: #f8e6ff50; }
.map-note { color: #8b7693; background: #f5eff7; border-color: #e6d9e9; padding: 11px 16px; font-size: 12px; }
.side-card { padding: 20px; border-top: 3px solid #ad85b7; }
.side-card h3 { font: 800 19px/1.3 system-ui, sans-serif; color: #53365f; }
.stat-row { gap: 8px; margin-top: 14px; }
.stat { background: #fffcf6; border-color: #e7dccb; border-top: 2px solid #d7b266; padding: 12px; border-radius: 11px; }
.stat:nth-child(3n+1) { border-top-color: #a07eb0; }
.stat:nth-child(3n) { border-top-color: #59a8b5; }
.stat strong { color: #65416f; font: 800 23px/1.2 system-ui, sans-serif; }
.stat span, .level-chip { color: #88738f; }
.level-legend-title { color: #795e88; font-size: 12px; }
.building-selector { background: #f5eff7; border-color: #e3d7e9; border-radius: 12px; padding: 14px; }
.building-selector h4, .temple-list h4 { color: #634471; font-size: 13px; }
.selector-grid label { color: #897192; font-size: 11px; }
.selector-grid select, .selector-reset { border-color: #dccce3; background: #fffcf8; color: #5c426a; border-radius: 8px; }
.selector-reset { font-size: 12px; }
.detail { background: #fffcf8; border-color: #dfcfe6; border-radius: 12px; border-top: 3px solid #d7b266; }
.detail-img { background: #efe4f4; }
.detail-title { color: #583865; font-size: 15px; }
.detail-sub, .detail dt, .detail-empty { color: #8c7893; }
.detail dd { color: #604469; }
.skill-box { background: #f3e6bc; border: 1px solid #e6cf8b; }
.skill-box span { color: #98702c; }
.skill-box strong { color: #674727; }
.skill-desc { color: #80623c; line-height: 1.65; }
.temple-list { border-color: #e9ddec; }
.temple-row { border-color: #ede4ef; font-size: 12px; padding-block: 10px; color: #60466b; }
.temple-level { color: #a2772e; }
.temple-row small, .temple-total, .foot { color: #927d99; }
.planner-panel { background: #fffcf6; border-color: #e4d7c5; padding: 22px; }
.planner-heading h3 { color: #583865; font: 800 20px/1.3 system-ui, sans-serif; }
.planner-heading p, .planner-count, .planner-field, .planner-limit-counts { color: #8a7492; }
.planner-setup { border-color: #e0d1e6; background: #f6f0f8; border-radius: 12px; }
.planner-setup summary { color: #6a4b78; font-weight: 750; }
.planner-field input, .claim-item input { border-color: #dfcfe5; background: #fffdfa; color: #523e60; font: 13px system-ui, sans-serif; }
.planner-button, .alliance-remove { color: #755383; }
.planner-button { border-color: #d8c7df; background: #fffcf6; border-radius: 9px; font-size: 13px; }
.planner-button:hover { background: #f4eaf8; border-color: #ad8aba; }
.planner-button.active { color: #5e3a71; background: #eee0f5; border-color: #ad87bf; box-shadow: 0 0 0 2px #b994c62a; }
#planner-add { background: linear-gradient(135deg, #f8d273, #e9b13f); border-color: #d9a43b; color: #3a2545; }
.alliance-row, .claim-item { border-color: #e4d7e9; background: #fffdfa; border-radius: 10px; }
.alliance-name { color: #62446f; font-size: 13px; }
.alliance-name:focus { outline-color: #ac86be; background: #fffdfa; }
.alliance-card { background: #fffdfa; border-color: #dfd1e4; color: #684b76; }
.alliance-card.active { border-color: #ad85bf; background: #f2e7f7; box-shadow: 0 0 0 2px #b796c22a; }
.alliance-card small { color: #92709e; }
.planner-empty { background: #f5eff7; color: #957f9e; }
.planner-subtitle, .claim-site-name { color: #6b4b79; }
.planner-notice { background: #f4eddf; color: #967443; border-color: #e9d7af; border-radius: 9px; }
.planner-notice.error { background: #fff0ef; color: #a14a51; border-color: #edb6ba; }
button, select, input { transition: border-color .15s, background-color .15s, box-shadow .15s; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, #viewport:focus-visible { outline: 3px solid #bb91cf; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { button, select, input { transition: none; } }
@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .side-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .side-card h3, .stat-row, .level-legend-title, .level-legend, .building-selector, .foot { grid-column: 1/-1; }
  .top { padding: 26px; }
  .brand { max-width: 75%; gap: 16px; }
  .crest, .crest img { width: 86px; height: 60px; }
  .crest { flex-basis: 86px; }
  .brand h1 { font-size: 27px; }
}
@media (max-width: 650px) {
  .shell { padding: 12px 10px 24px; }
  .top { padding: 22px 18px 18px; min-height: 230px; flex-direction: column; align-items: stretch; gap: 22px; border-radius: 13px; margin-bottom: 20px; }
  .top::before { width: 100%; max-width: 100%; opacity: .4; background-position: center 26%; mask-image: linear-gradient(90deg, transparent, #000 70%); }
  .brand { max-width: 100%; gap: 12px; align-items: flex-start; }
  .crest, .crest img { width: 68px; height: 48px; }
  .crest { flex-basis: 68px; }
  .eyebrow { font-size: 9px; letter-spacing: .1em; }
  .brand h1 { font-size: 22px; max-width: 270px; margin-top: 6px; }
  .lang-wrap { align-self: stretch; display: flex; justify-content: space-between; width: 100%; }
  .lang-wrap label { display: block; }
  .lang-wrap select { width: auto; min-width: 150px; flex: 0 1 64%; max-width: 70%; font-size: 12px; }
  .intro h2 { font-size: 22px; }
  .intro p { font-size: 12px; line-height: 1.6; }
  .layout { gap: 14px; }
  .toolbar { padding: 11px; gap: 12px; }
  .chip { font-size: 11px; padding: 8px 9px; }
  .controls { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(85px, 1.5fr); }
  .controls button { height: 36px; min-width: 0; }
  #export-map { font-size: 11px; padding-inline: 8px; }
  .map-card, .side-card { border-radius: 12px; }
  .side-card { display: block; padding: 16px; }
  .side-card h3 { font-size: 19px; }
  .stat strong { font-size: 22px; }
  .planner-panel { padding: 16px 13px; }
  .planner-heading h3 { font-size: 18px; }
  .planner-create { grid-template-columns: minmax(0, 1fr) 55px auto; }
  .planner-field, .planner-heading p, .planner-count { font-size: 11px; }
  .planner-button { padding: 9px 10px; font-size: 12px; }
}
/* Direct manipulation replaces the nested scrolling map window. */
.map-viewport { overflow: hidden; touch-action: none; cursor: grab; user-select: none; direction: ltr; }
.map-viewport.is-panning, .map-viewport.is-panning * { cursor: grabbing !important; }
.map-stage { transition: none; will-change: transform; }
.map-viewport .node, .map-viewport .node-hitarea { cursor: grab; }
.map-viewport:focus-visible { outline: 3px solid #46bdd2; outline-offset: -3px; }
.side-stack { display: grid; gap: 14px; min-width: 0; }
.building-panel .building-selector { margin-top: 0; }
.building-panel .detail { margin-bottom: 0; }
.map-reference { padding: 0; }
.map-reference > summary { display: flex; align-items: center; gap: 10px; padding: 16px; cursor: pointer; color: #654575; font-size: 14px; font-weight: 750; list-style: none; }
.map-reference > summary::-webkit-details-marker { display: none; }
.info-icon { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border: 1.5px solid #9576a4; border-radius: 50%; font: italic 700 17px Georgia, serif; }
.info-chevron { margin-inline-start: auto; transition: transform .15s; }
.map-reference[open] .info-chevron { transform: rotate(180deg); }
.reference-content { padding: 0 16px 16px; border-top: 1px solid #e6d9eb; }
.node .location-footprint { fill: none; stroke: transparent; pointer-events: none; }
.node.selected .occupied-cell { fill: #b6f2a6; stroke: #16803c; stroke-width: 2; }
.node.selected .location-footprint,
.node.stronghold.selected .stronghold-footprint,
.node.capitol.selected .stronghold-footprint { stroke: #075b2b; stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px #c7ffb7); }
.node.selected .tile-outline,
.node.stronghold.selected .tile-outline,
.node.capitol.selected .tile-outline { fill: none; stroke: transparent; stroke-width: 0; }
@media (max-width: 1100px) {
  .side-stack .side-card { display: block; }
}
/* Colour zones and building boundaries carry the map; tiny cell borders do not. */
.grid-cell { stroke: none; }
.node .occupied-cell, .node.selected .occupied-cell,
.node.selector-match .occupied-cell { stroke: none; }
.node, .route-drawing .node,
.node .asset-icon, .node.temple .asset-icon { opacity: 1; }
.route-drawing .grid-cell { opacity: 1; }
/* Strongholds are one plus-shaped footprint, with no inner square marker. */
.node.stronghold .tile-outline, .node.capitol .tile-outline { display: none; }
.node.stronghold .occupied-cell, .node.capitol .occupied-cell { stroke: none; filter: none; }
/* Render each zoom level from the original vector text and full-resolution art. */
.map-stage { will-change: auto; }
.map-art { text-rendering: geometricPrecision; }
.node .asset-icon, .node.temple .asset-icon { image-rendering: optimizeQuality; filter: none; }
.node .node-label { stroke-width: .8px; }
.node.temple .node-label { stroke-width: 1px; }
.stat-row { gap: 5px; margin: 10px 0 12px; }
.stat { display: flex; align-items: baseline; gap: 7px; padding: 7px 8px; border-radius: 7px; border-top-width: 1px; }
.stat strong { font-size: 16px; }
.stat span { font-size: 10px; overflow-wrap: anywhere; }
.occupied-cell, .plan-claim-fill { shape-rendering: crispEdges; }
.planner-panel { display: grid; gap: 16px; background: #f1eaf3; }
.planner-section { min-width: 0; padding: 18px; background: #fffcf6; border: 1px solid #ddcde4; border-radius: 13px; }
.alliance-setup-panel > .planner-heading { align-items: center; }
.alliance-setup-panel .planner-setup { margin-bottom: 0; }
.danger-button { color: #a02f3e; border-color: #d69aa2; background: #fff0f1; }
.danger-button:hover:not(:disabled) { color: #fff; border-color: #a02f3e; background: #a02f3e; }
.clear-plan-confirm { padding: 12px; margin-bottom: 14px; border: 1px solid #e1a7af; border-radius: 9px; background: #fff0f1; color: #852e3a; font-size: 13px; }
.clear-plan-confirm[hidden] { display: none; }
.clear-plan-confirm p { margin: 0 0 10px; }
.clear-plan-confirm > div { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 650px) { .planner-section { padding: 13px; } }
.node.temple .skill-label { font-family: Georgia, serif; font-style: italic; font-weight: 600; font-size: 10px; }
.node.stronghold .node-label { font-size: 16px; font-weight: 850; }
.node .node-label, .node.temple .node-label { fill: var(--label-ink, #241B2B); stroke: none; }
.node.selected .node-label, .node.selector-match .node-label { fill: #123C23; }
.node .tile-outline, .node .stronghold-footprint { stroke: #765B6B; }
.map-viewport, .map-stage { background: #EBDABD; }
.node.trade:not(.selected):not(.selector-match) .tile-outline { stroke: #F7CE75; stroke-width: 2; vector-effect: non-scaling-stroke; }
.node.temple:not(.selected):not(.selector-match) .tile-outline { stroke: #EACB91; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.toolbar { flex-wrap: wrap; align-items: center; }
.toolbar .filters { flex: 1 1 620px; min-width: 0; }
.toolbar-selector { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; width: 100%; padding: 0; margin: 0; border: 0; background: none; }
.building-type-field, .temple-type-field { display: grid; gap: 5px; min-width: 145px; font-size: 11px; font-weight: 700; color: #73597f; }
.toolbar-selector select { max-width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid #cbb4d5; border-radius: 8px; background: #fffaf4; color: #523561; font: 600 12px system-ui,sans-serif; }
.temple-type-field { flex: 1 1 190px; max-width: 260px; }
.temple-type-field[hidden] { display: none; }
.map-level-options { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; padding: 0; margin: 0; border: 0; }
.map-level-options legend { padding: 0; margin-bottom: 5px; font-size: 11px; font-weight: 700; color: #73597f; }
.level-option { position: relative; cursor: pointer; }
.level-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.level-option span { display: block; padding: 9px 10px; border: 1px solid #cbb4d5; border-radius: 7px; background: #fffaf4; color: #73597f; font-size: 11px; font-weight: 650; white-space: nowrap; }
.level-option input:checked + span { border-color: #79508c; background: #735082; color: #fff8e8; box-shadow: 0 0 0 1px #79508c; }
.level-option input:focus-visible + span { outline: 3px solid #46bdd2; outline-offset: 2px; }
.toolbar-selector .selector-reset { margin: 0; min-height: 36px; }
.building-panel .detail { margin: 0; }
@media(max-width:650px) {
  .toolbar .filters { flex-basis: 100%; }
  .building-type-field { width: 100%; }
  .map-level-options { width: 100%; }
  .toolbar .controls { width: 100%; }
}
.temple-entry { border-bottom: 1px solid #e4d7e8; }
.temple-entry .temple-row { cursor: pointer; list-style: none; border-bottom: 0; padding: 10px 0; }
.temple-entry .temple-row::-webkit-details-marker { display: none; }
.temple-entry[open] .temple-entry-name { color: #5b3670; font-weight: 750; }
.temple-expand-icon { display: inline-block; margin-inline-start: 5px; color: #795589; transition: transform .15s; }
.temple-entry[open] .temple-expand-icon { transform: rotate(180deg); }
.overview-skill { padding: 12px; margin-bottom: 11px; border-radius: 9px; background: #f1e5c8; border: 1px solid #e1cea0; color: #53412e; font-size: 12px; line-height: 1.6; }
.overview-skill-label { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 750; letter-spacing: .06em; color: #85602d; }
.overview-skill p { margin: 6px 0 0; }
.temple-entry > summary:focus-visible { outline: 3px solid #46bdd2; outline-offset: 2px; border-radius: 5px; }
/* Three-step planning workflow. Mode feedback stays attached to the map. */
.map-viewport { --mode-colour: #2999AF; }
.map-viewport[data-mode="occupy"] { --mode-colour: #D08B27; }
.map-viewport[data-mode="route"] { --mode-colour: #A274C7; }
.map-viewport::after { content: ''; position: absolute; inset: 0; z-index: 15; pointer-events: none; border: 4px solid var(--mode-colour); }
#map-mode-badge { position: absolute; bottom: 15px; right: 15px; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px 13px; border: 2px solid var(--mode-colour); border-radius: 11px; color: #fff8e8; background: #241b2bf2; box-shadow: 0 3px 14px #241b2b33; font: 700 13px system-ui,sans-serif; cursor: pointer; }
#map-mode-badge:disabled { opacity: 1; cursor: default; }
#map-mode-badge svg, .workflow-actions svg, .workflow-mark-controls svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#map-mode-badge svg { color: var(--mode-colour); }
#map-edit-hint { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); z-index: 20; max-width: 85%; padding: 10px 16px; color: #fff8e8; background: #553769f2; border: 1px solid #d5b1ee; border-radius: 10px; font-size: 13px; pointer-events: none; box-shadow: 0 3px 15px #241b2b44; }
#map-edit-hint[hidden] { display: none; }
.workflow-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.workflow-tabs button { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid #cbb4d5; border-radius: 11px; background: #fffcf6; color: #71527d; font-weight: 750; text-align: start; }
.workflow-tabs button b { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: #eee0f4; }
.workflow-tabs button[aria-selected="true"] { background: #5e3d70; border-color: #5e3d70; color: #fff8e8; box-shadow: 0 0 0 2px #c5a8d44d; }
.workflow-tabs button[aria-selected="true"] b { background: #fff8e8; color: #5e3d70; }
.workflow-tabs button:disabled { opacity: .43; cursor: not-allowed; }
.workflow-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.workflow-actions .planner-button, .workflow-mark-controls .planner-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.workflow-alliance { max-width: 450px; margin-bottom: 16px; }
.workflow-alliance select { width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid #cfb9d9; border-radius: 8px; color: #523561; background: #fffaf4; font: 600 14px system-ui,sans-serif; }
.territory-counts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.territory-count { padding: 15px; border: 1px solid #decde5; border-radius: 11px; color: #71527d; background: #f7f0fa; }
.territory-count > span { display: block; font-size: 12px; font-weight: 650; margin-bottom: 6px; }
.territory-count strong { color: #503062; font-size: 30px; line-height: 1.15; }
.territory-count > div > span { color: #92799b; font-size: 18px; }
.territory-count.is-over { border-color: #e8a9b2; background: #fff1f2; }
.territory-count.is-over strong { color: #C32840; }
.workflow-mark-controls { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.workflow-mark-controls p, .route-add-controls p { flex: 1 1 250px; margin: 0; color: #826b8d; font-size: 13px; line-height: 1.6; }
.route-add-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
#workflow-add-route, #workflow-mark.active { background: #f4cb6d; color: #402b4b; border-color: #dab359; }
.workflow-route-list { display: grid; gap: 10px; }
.workflow-route-card { padding: 13px; background: #f9f3fb; border: 1px solid #decde5; border-radius: 10px; }
.workflow-route-card > div { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #6a487b; font-size: 12px; }
.workflow-route-card > div > b { color: #9b7aa9; }
.workflow-route-card > div > span { flex: 1; }
.workflow-route-card .planner-field input { width: 100%; min-height: 39px; }
.intro { align-items: center; }
.intro > div:first-child { min-width: 0; }
.map-heading-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.map-export-control { position: relative; }
.map-export-button, .map-clear-button { min-height: 41px; padding: 10px 16px; border-radius: 9px; font: 700 13px system-ui,sans-serif; }
.map-export-button { color: #35213f; background: linear-gradient(135deg,#f6d480,#e8b348); border: 1px solid #d2a34c; }
#map-actions #export-map { font-size: 13px; }
.map-clear-button { color: #f0bbc5; background: #341f2b; border: 1px solid #a55d72; }
.map-clear-button:hover { background: #642e43; }
#map-export-menu { position: absolute; z-index: 50; top: calc(100% + 8px); inset-inline-end: 0; width: max-content; min-width: 200px; padding: 6px; border: 1px solid #a58bb4; border-radius: 10px; background: #fffcf6; box-shadow: 0 9px 28px #080b184d; }
#map-export-menu[hidden] { display: none; }
#map-export-menu button { display: block; width: 100%; padding: 12px; text-align: start; border: 0; border-radius: 6px; color: #55356a; background: transparent; font: 650 13px system-ui,sans-serif; }
#map-export-menu button:hover, #map-export-menu button:focus-visible { background: #ede0f4; }
.heading-clear-confirm { margin: 0 0 15px; padding: 15px; }
.map-export-status { padding: 10px 14px; border-radius: 8px; color: #f5bac5; background: #522838; font-size: 13px; }
.map-export-status[hidden] { display: none; }
@media(max-width:650px) {
  .intro { align-items: stretch; flex-direction: column; gap: 13px; }
  .map-heading-actions { justify-content: flex-start; flex-wrap: wrap; }
  .toolbar .controls { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
.territory-warning-outline, .route-start-outline, .plan-claim-outline { pointer-events: none; }
@media(max-width:650px) {
  .workflow-tabs { gap: 5px; }
  .workflow-tabs button { padding: 9px 6px; gap: 5px; font-size: 10px; flex-direction: column; text-align: center; }
  .workflow-tabs button b { width: 23px; height: 23px; flex-basis: 23px; }
  .planner-section > .planner-heading { flex-wrap: wrap; gap: 12px; }
  .territory-counts { gap: 6px; }
  .territory-count { padding: 10px 8px; }
  .territory-count strong { font-size: 25px; }
  .territory-count > span { font-size: 10px; }
  #map-mode-badge { right: 10px; bottom: 10px; padding: 8px 10px; font-size: 11px; }
}