/* ChaseDesk Map Maker · Studio layout, October 2026
   Presentation only. Interactive behaviour remains in world-map-editor-current.js. */
.world-map-page {
  --studio-ink: #19352f;
  --studio-muted: #667670;
  --studio-border: #dde5df;
  --studio-primary: #246c59;
  --studio-primary-strong: #194e41;
  --studio-surface: #ffffff;
  --map-ink: var(--studio-ink);
  --map-muted: var(--studio-muted);
  --map-accent: var(--studio-primary);
  --map-accent-dark: var(--studio-primary-strong);
  --map-paper: #fffefa;
  color: var(--studio-ink);
  background: #f7f9f6;
}
.world-map-page .topbar {
  position: relative; top: auto; min-height: 68px;
  padding: 14px clamp(20px,3vw,48px);
  border-bottom: 1px solid var(--studio-border);
  background: #fff; box-shadow: none; backdrop-filter: none;
}
.world-map-page .brand { color: #19382f; font-size: 21px; letter-spacing: -.045em; }
.world-map-page .brand span { color: var(--studio-primary); }
.world-map-page .tagline { padding-left: 13px; border-left: 1px solid #cddbd2; font-size: 12px; font-weight: 750; color: #4b6258; }
.world-map-page .header-support { font-weight: 550; color: #6f8277; }
.world-map-page .top-actions .button.primary { background:#eaf3ed; border-color:#d7e7da; color:#2c6e50; font-size:12px; font-weight:740; }
.world-map-page .top-actions .button.primary:hover { background:#e3efe7; }
.world-map-page .tools-menu-button { border-radius: 9px; background:#fff; border-color:#dce5df; color:#385248; font-weight:650; }
.world-map-page .tools-menu-button:hover { border-color:#91b7a1; }
.world-map-page .tools-menu-panel { background:#fff; border-color:#d9e5dc; border-radius:12px; }
.world-map-page a.tool-menu-item:hover,.world-map-page .tool-menu-item.active { background:#f0f6f1; }

.world-map-page .app-shell { width:min(1660px,calc(100% - 48px)); padding:0 0 48px; }
.world-map-page .map-intro {
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  min-height:0; padding:31px 4px 28px; margin:0;
}
.world-map-page .map-intro .eyebrow { margin:0 0 9px; color:#497c66; letter-spacing:.11em; font-size:10px; }
.world-map-page .map-intro h1 {
  font-size:clamp(27px,3.2vw,40px); line-height:1.12; font-weight:760; letter-spacing:-.045em;
  max-width:none; margin:0;
}
.world-map-page .map-intro p { max-width:810px; margin:8px 0 0; color:#68796f; font-size:14px; line-height:1.5; }
.world-map-page .map-intro p strong { color:#345a47; font-weight:750; }
.world-map-page .intro-free { color:#6d8174; font-size:12px; font-weight:670; white-space:nowrap; }
.world-map-page .intro-free::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#45a77c; margin-right:8px; vertical-align:2px; }

.world-map-page .map-workspace {
  margin:0; border:1px solid var(--studio-border); border-radius:18px;
  overflow:hidden; background:#fff; box-shadow:0 12px 42px rgba(32,66,47,.055);
}
.world-map-page .workspace-head {
  min-height:82px; padding:17px 22px 17px 26px;
  border-radius:0; background:#fff; border-bottom:1px solid var(--studio-border);
}
.world-map-page .workspace-head .workspace-kicker { color:#6b8777; font-size:10px; letter-spacing:.09em; margin:0 0 3px; }
.world-map-page .workspace-head h2 { font-size:23px; font-weight:760; letter-spacing:-.04em; }
.world-map-page .workspace-actions { flex-wrap:wrap; gap:8px; }
.world-map-page .workspace-actions .button {
  min-width:104px; border:1px solid #cddbd2; border-radius:9px;
  box-shadow:none; font-size:12px; font-weight:720;
  padding:10px 15px; background:#fff; color:#254c39;
}
.world-map-page .workspace-actions .button:hover { border-color:#8eafa0; background:#f7faf7; }
.world-map-page .workspace-actions .button.primary { background:#1d604d; border-color:#1d604d; color:#fff; }
.world-map-page .workspace-actions .button.primary:hover { background:#134934; border-color:#134934; }

.world-map-page .tool-frame {
  display:grid; grid-template-columns:315px minmax(0,1fr); gap:0;
  min-height:620px; align-items:stretch;
}
.world-map-page .toolbar {
  display:flex; flex-direction:column; gap:0;
  position:relative; top:auto; z-index:3;
  width:100%; max-height:760px; min-height:620px; height:auto;
  padding:0; margin:0;
  overflow-y:auto; overflow-x:hidden;
  background:#fff; border:0; border-right:1px solid var(--studio-border); border-radius:0;
  scrollbar-color:#cbd8ce transparent; scrollbar-width:thin;
}
.world-map-page .sidebar-top {
  padding:25px 24px 18px;
  border-bottom:1px solid #edf1ed;
}
.world-map-page .sidebar-eyebrow { color:#7a9a85; font-size:10px; font-weight:820; letter-spacing:.13em; text-transform:uppercase; }
.world-map-page .sidebar-top h3 { margin:4px 0 4px; font-size:20px; font-weight:770; letter-spacing:-.035em; color:#1f3830; }
.world-map-page .sidebar-top p { margin:0; color:#849088; font-size:12px; line-height:1.4; }
.world-map-page .toolbar-section {
  display:block; padding:20px 24px 19px; border-bottom:1px solid #e8efe9;
}
.world-map-page .toolbar-heading {
  margin:0 0 13px; color:#355a47; font-size:11px; font-weight:800;
  letter-spacing:.085em; text-transform:uppercase; line-height:1.3;
}
.world-map-page .editor-modes { display:grid; gap:7px; }
.world-map-page .toolbar button.mode-option {
  display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:10px; align-items:center;
  width:100%; min-height:53px; padding:8px 10px;
  text-align:left; color:#385249; background:#fff;
  border:1px solid #e0e9e3; border-radius:10px;
  box-shadow:none; transition:background .14s,border-color .14s;
}
.world-map-page .toolbar button.mode-option:hover:not(:disabled) { background:#f8fbf9; border-color:#aec9b7; }
.world-map-page .toolbar button.mode-option.active {
  background:#eaf5ef; border-color:#83b69b; color:#164a39;
  box-shadow:inset 3px 0 0 #29805e;
}
.world-map-page .mode-icon {
  display:grid; place-items:center; width:33px; height:33px; border-radius:8px;
  background:#f0f4f0; color:#486c59; font-size:18px; font-weight:700;
}
.world-map-page .mode-option.active .mode-icon { background:#d2e9d9; color:#1e6f4d; }
.world-map-page .mode-copy { display:grid; gap:1px; font-size:13px; line-height:1.2; font-weight:770; }
.world-map-page .mode-copy small { font-size:11px; color:#78887e; font-weight:480; }
.world-map-page .mode-option kbd { padding:3px 6px; background:#f2f5f2; border:1px solid #e3e9e3; border-radius:5px; color:#7b8a82; font:600 10px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace; }
.world-map-page .mode-option.active kbd { background:#fff; border-color:#ccded3; color:#3b7455; }
.world-map-page .toolbar-tip { margin:11px 0 0; color:#77877c; font-size:11px; line-height:1.55; }

.world-map-page .tool-group { display:grid; gap:8px; padding:0; margin:0 0 16px; border:0; }
.world-map-page .tool-group:last-child { margin-bottom:0; }
.world-map-page .tool-group label { color:#415b4d; font-size:12px; font-weight:730; letter-spacing:0; }
.world-map-page .tool-label { display:flex; align-items:center; justify-content:space-between; }
.world-map-page .tool-label output,.world-map-page .tool-label span { color:#7b8d81; font-size:11px; font-weight:620; }
.world-map-page .toolbar select,
.world-map-page .toolbar input[type="text"] {
  width:100%; min-height:39px; padding:9px 11px; background:#fff;
  color:#243e33; border:1px solid #dce5de; border-radius:8px;
  box-shadow:none; font-size:12px; font-weight:510;
}
.world-map-page .toolbar select:hover,.world-map-page .toolbar input[type="text"]:hover { border-color:#a6c0ac; }
.world-map-page .toolbar select:focus-visible,.world-map-page .toolbar input:focus-visible,
.world-map-page .toolbar button:focus-visible { outline:2px solid #3a9970; outline-offset:2px; }
.world-map-page .colour-group { grid-template-columns:auto minmax(0,1fr); gap:8px 12px; }
.world-map-page .colour-group .tool-label { grid-column:1/-1; }
.world-map-page .colour-group input[type="color"] {
  width:46px; height:40px; border:1px solid #dce4dd; border-radius:8px; padding:3px; cursor:pointer;
}
.world-map-page .colour-group input[type="color"]::-webkit-color-swatch { border:0; border-radius:4px; }
.world-map-page .preset-colours { grid-column:2; display:flex; gap:5px; justify-content:space-between; align-items:center; flex-wrap:nowrap; }
.world-map-page .toolbar button.preset-colour {
  width:22px; height:22px; min-height:22px; flex:0 0 22px;
  padding:0; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #dce5df; background:var(--swatch); cursor:pointer;
}
.world-map-page .toolbar button.preset-colour:hover { box-shadow:0 0 0 2px #629c7a; transform:scale(1.08); }
/* Remove fill is a country-level operation, not the freehand eraser. */
.world-map-page .remove-fill-row { grid-column:1 / -1; margin-top:5px; }
.world-map-page .toolbar button.remove-fill-button {
  display:flex; align-items:center; gap:11px; width:100%; min-height:49px;
  padding:8px 10px; text-align:left; color:#4d6356; background:#f8faf8;
  border:1px solid #dce5df; border-radius:9px; box-shadow:none;
}
.world-map-page .toolbar button.remove-fill-button:hover {
  background:#f2f8f3; border-color:#93b49e;
}
.world-map-page .toolbar button.remove-fill-button[aria-pressed="true"] {
  color:#8b413a; background:#fef2f0; border-color:#dcaaa3;
  box-shadow:inset 3px 0 0 #c36c5d;
}
.world-map-page .remove-fill-icon {
  display:grid; width:32px; height:32px; flex:0 0 32px; place-items:center;
  border-radius:7px; background:#ebf0eb; color:#526c5c; font-size:19px;
}
.world-map-page .remove-fill-button[aria-pressed="true"] .remove-fill-icon { background:#f8dbd6; color:#8b413a; }
.world-map-page .remove-fill-copy { display:grid; gap:3px; min-width:0; }
.world-map-page .remove-fill-copy strong { font-size:12px; line-height:1.15; font-weight:760; }
.world-map-page .remove-fill-copy small { font-size:10px; line-height:1.25; color:#829086; font-weight:510; }
.world-map-page .toolbar[data-mode="pen"] .remove-fill-row,
.world-map-page .toolbar[data-mode="eraser"] .remove-fill-row { display:none; }
.world-map-page .map-colour-history { grid-column:1/-1; display:grid; gap:6px; margin-top:5px; }
.world-map-page .map-colour-history-heading { color:#829086; font-size:10px; font-weight:660; }
.world-map-page .map-colour-swatches { display:flex; flex-wrap:wrap; gap:6px; min-height:26px; }
.world-map-page .map-colour-swatch { width:25px; height:25px; min-height:25px; border-radius:7px; box-shadow:0 0 0 1px #cddbd0; }
.world-map-page .map-colour-empty { font-size:11px; color:#95a097; }
.world-map-page .brush-group { padding-top:0; }
.world-map-page input[type="range"] { height:6px; margin:5px 0; accent-color:var(--studio-primary); }
.world-map-page .toolbar[data-mode="fill"] .brush-group { display:none; }
.world-map-page .country-lock-controls.has-lock select { background:#f0f8f1; border-color:#86b39a; box-shadow:inset 3px 0 0 #3b8c69; }
.world-map-page .settings-hint { margin:4px 0 0; font-size:11px; line-height:1.45; color:#8a978d; }

.world-map-page #legendMount { display:contents; }
.world-map-page .legend-section { display:block; border-bottom:1px solid #e8efe9; padding:20px 24px; }
.world-map-page .legend-heading-row { display:flex; align-items:center; gap:12px; justify-content:space-between; margin-bottom:12px; }
.world-map-page .legend-heading-row .toolbar-heading { margin:0; }
.world-map-page .legend-visibility { min-height:29px; border:1px solid #dde7de; border-radius:7px; padding:4px 7px; color:#5c7565; font-size:11px; }
.world-map-page .legend-settings { display:grid; gap:12px; }
.world-map-page .legend-items-heading { color:#77877c; font-size:11px; font-weight:670; }
.world-map-page .map-key-row { grid-template-columns:28px minmax(0,1fr) 30px; gap:7px; }
.world-map-page .map-key-row .map-key-swatch { width:24px; height:24px; min-height:24px; border-radius:6px; }
.world-map-page .map-key-row .map-key-label { min-height:36px; font-size:12px; }
.world-map-page .legend-empty,.world-map-page .legend-help { color:#829086; font-size:11px; }
.world-map-page .toolbar-actions {
  position:relative; bottom:auto; display:grid; gap:9px; padding:19px 24px 22px;
  margin-top:auto; border-top:0; background:#fff;
}
.world-map-page .toolbar-actions .tool-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.world-map-page .toolbar-actions button {
  min-height:38px; font-size:12px; font-weight:720; border-radius:8px;
  border-color:#dce5df; color:#3d5b49; background:#fff; box-shadow:none;
}
.world-map-page .toolbar-actions button:hover:not(:disabled) { border-color:#95bca3; background:#f4faf5; }
.world-map-page .toolbar-actions button:disabled { opacity:.45; cursor:not-allowed; }
.world-map-page .toolbar-actions kbd { display:none; }
.world-map-page .toolbar-actions .quiet-danger { color:#ae5955; border-color:#f1e2df; }
.world-map-page .toolbar-actions .quiet-danger:hover:not(:disabled) { color:#943c34; border-color:#d7aaa3; background:#fdf5f4; }
.world-map-page .history-shortcuts { color:#9caaa1; font-size:10px; text-align:center; margin:0; }

.world-map-page .canvas-wrap {
  width:100%; min-width:0; min-height:620px; margin:0;
  background:#f5f8f6; border:0; border-radius:0; box-shadow:none;
  overflow:hidden; position:relative;
}
.world-map-page .map-stage {
  width:calc(100% - 24px); height:708px; margin:12px;
  border:1px solid #dce6e0; border-radius:10px;
  overflow:hidden; background:#e9f0ed; box-shadow:0 3px 13px rgba(25,54,40,.04);
}
.world-map-page .map-stage #mapSvg,
.world-map-page .map-stage #drawSvg {
  position:absolute; inset:0; width:100%; height:100%; margin:0; border:0;
  border-radius:10px; box-shadow:none;
}
.world-map-page .map-stage #mapSvg { background:#fffefa; }
.world-map-page .canvas-badge {
  top:25px; left:25px; border:1px solid #e5ece6; border-radius:7px;
  padding:7px 10px; color:#547061; background:rgba(255,255,255,.92);
  box-shadow:0 3px 9px rgba(25,54,40,.05); font-size:10px; font-weight:750;
}
.world-map-page .canvas-badge span { background:#49a67e; }
.world-map-page .zoom-controls {
  top:25px; right:25px; border:1px solid #e0e9e1; border-radius:8px;
  background:rgba(255,255,255,.95); box-shadow:0 3px 9px rgba(25,54,40,.05);
}
.world-map-page .zoom-controls button { color:#314f3d; }
.world-map-page .zoom-controls button:hover { background:#f2f8f3; }
.world-map-page .canvas-status {
  right:25px; bottom:25px; left:25px; padding:9px 12px;
  color:#657b6b; font-size:11px; border:1px solid #e1e9e2; border-radius:7px;
  background:rgba(255,255,255,.94); box-shadow:0 2px 8px rgba(25,54,40,.04);
}
.world-map-page .canvas-status #mapStatus { color:#325744; }
.world-map-page #mapSvg.outline-only #landSilhouette path { fill:#f4f3e9; }
.world-map-page #mapSvg.outline-only #paper { fill:#e1ecf3; }
.world-map-page .loading { z-index:10; }
.world-map-page .notes { padding:30px 0 0; }
.world-map-page .notes h2 { font-size:21px; color:#264739; font-weight:770; letter-spacing:-.04em; margin:0 0 15px; }
.world-map-page .note-grid { gap:12px; }
.world-map-page .note-grid div { background:#fff; border:1px solid #e3ebe4; border-radius:12px; box-shadow:none; padding:18px 20px; }
.world-map-page .note-grid strong { color:#2a503f; font-size:13px; }
.world-map-page .note-grid span { color:#6e8176; font-size:12px; }

@media(max-width:1060px) {
 .world-map-page .tool-frame { grid-template-columns:285px minmax(0,1fr); }
 .world-map-page .toolbar-section,.world-map-page .legend-section { padding:18px; }
 .world-map-page .sidebar-top { padding:20px 18px; }
 .world-map-page .toolbar-actions { padding:18px; }
 .world-map-page .preset-colours { gap:3px; }
 .world-map-page .toolbar button.preset-colour { width:20px; height:20px; min-height:20px; flex-basis:20px; }
}
@media(max-width:850px) {
 .world-map-page .app-shell { width:calc(100% - 28px); }
 .world-map-page .tool-frame { display:flex; flex-direction:column; }
 .world-map-page .toolbar {
   display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0;
   max-height:none; min-height:0; height:auto; overflow:visible;
   border-right:0; border-bottom:1px solid var(--studio-border);
 }
 .world-map-page .sidebar-top { grid-column:1/-1; padding:18px 20px 12px; }
 .world-map-page .draw-section,.world-map-page .style-section { border-bottom:1px solid #e9efe9; }
 .world-map-page .settings-section { grid-column:1; }
 .world-map-page .legend-section { grid-column:2; }
 .world-map-page .toolbar-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; border-top:1px solid #edf1ed; margin:0; }
 .world-map-page .toolbar-actions .tool-row { flex:1 1 190px; }
 .world-map-page .toolbar-actions #resetViewBtn,.world-map-page .toolbar-actions #clearBtn { flex:1 1 125px; }
 .world-map-page .canvas-wrap { min-height:530px; }
 .world-map-page .map-stage { height:520px; }
 .world-map-page .intro-free { display:none; }
}
@media(max-width:560px) {
 .world-map-page .topbar { padding:12px 16px; min-height:60px; }
 .world-map-page .header-support { display:none; }
 .world-map-page .app-shell { width:calc(100% - 20px); }
 .world-map-page .map-intro { padding:22px 2px 20px; }
 .world-map-page .map-intro h1 { font-size:27px; }
 .world-map-page .map-intro p { font-size:12px; }
 .world-map-page .workspace-head { flex-wrap:wrap; gap:12px; padding:17px; }
 .world-map-page .workspace-head h2 { font-size:21px; }
 .world-map-page .workspace-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
 .world-map-page .workspace-actions .button { min-width:0; }
 .world-map-page .tool-frame { display:flex; }
 .world-map-page .toolbar { display:flex; flex-direction:column; }
 .world-map-page .sidebar-top { padding:16px 18px 12px; }
 .world-map-page .draw-section,.world-map-page .style-section,.world-map-page .settings-section,.world-map-page .legend-section { padding:16px 18px; border-bottom:1px solid #e9efe9; }
 .world-map-page .editor-modes { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
 .world-map-page .toolbar button.mode-option { min-height:81px; padding:10px 5px; grid-template-columns:1fr; justify-items:center; gap:3px; }
 .world-map-page .mode-copy { justify-items:center; font-size:11px; }
 .world-map-page .mode-copy small { display:none; }
 .world-map-page .mode-option kbd { display:none; }
 .world-map-page .toolbar-actions { padding:16px 18px; display:grid; grid-template-columns:1fr 1fr; }
 .world-map-page .toolbar-actions .tool-row { grid-column:1/-1; }
 .world-map-page .toolbar-actions #resetViewBtn,.world-map-page .toolbar-actions #clearBtn { min-width:0; }
 .world-map-page .canvas-wrap { min-height:405px; }
 .world-map-page .map-stage { height:390px; width:calc(100% - 16px); margin:8px; }
 .world-map-page .canvas-badge { top:18px; left:17px; font-size:9px; padding:5px 8px; }
 .world-map-page .zoom-controls { top:18px; right:17px; }
 .world-map-page .canvas-status { left:17px; right:17px; bottom:17px; font-size:10px; }
 .world-map-page .desktop-hint { display:none; }
}
@media(prefers-reduced-motion:reduce) { .world-map-page .toolbar button.mode-option,.world-map-page .toolbar button.preset-colour { transition:none; } }