/* refactored with chatGPT — 13 August 2026 15:48 BST */
:root {
  color: #1f2933;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: #eef3f6;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
}

button,
input,
select {
  font: inherit;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100%;
  background: #d9f3f6;
}

#map.is-hovering-feature {
  cursor: pointer;
}

#map.is-box-selecting {
  cursor: crosshair;
}

#map.is-lasso-selecting {
  cursor: cell;
}

.spreadsheet-drop-overlay {
  position: absolute;
  z-index: 30;
  inset: 10px;
  display: grid;
  place-items: center;
  border: 3px dashed rgba(27, 111, 159, 0.78);
  border-radius: 14px;
  background: rgba(219, 234, 254, 0.42);
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.spreadsheet-drop-overlay[hidden],
.spreadsheet-notice[hidden],
.spreadsheet-modal-backdrop[hidden],
.worksheet-selector-block[hidden],
.spreadsheet-empty-message[hidden],
.spreadsheet-table-wrap[hidden] {
  display: none;
}

.spreadsheet-drop-prompt {
  display: grid;
  gap: 5px;
  min-width: min(360px, calc(100vw - 48px));
  border: 1px solid rgba(27, 111, 159, 0.25);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.2);
  color: #17212b;
  padding: 18px 22px;
  text-align: center;
}

.spreadsheet-drop-prompt strong {
  font-size: 1.02rem;
}

.spreadsheet-drop-prompt span {
  color: #526170;
  font-size: 0.82rem;
}

.spreadsheet-notice {
  position: absolute;
  z-index: 70;
  left: 50%;
  bottom: 24px;
  width: min(520px, calc(100vw - 32px));
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28);
  color: #ffffff;
  padding: 11px 15px;
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.spreadsheet-notice.is-error {
  background: rgba(153, 27, 27, 0.95);
}

.pdf-coverage-frame {
  position: absolute;
  z-index: 3;
  border: 3px dashed rgba(15, 23, 42, 0.76);
  background: rgba(255, 255, 255, 0.035);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.72),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  pointer-events: none;
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
}

#app.is-pdf-reviewing .pdf-coverage-frame {
  z-index: 7;
}

#app.is-pdf-reviewing .pdf-coverage-frame.is-page-active {
  border-color: rgba(15, 23, 42, 0.76);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.72),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

#app.is-pdf-reviewing .pdf-coverage-frame.is-locked.is-page-active {
  border-color: rgba(185, 28, 28, 0.84);
}

.pdf-coverage-frame.is-locked {
  border-color: rgba(185, 28, 28, 0.84);
  background: rgba(185, 28, 28, 0.025);
}

.pdf-frame-label,
.pdf-frame-mode-button,
.pdf-frame-lock-button {
  position: absolute;
  z-index: 20;
  top: 7px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  font-size: 0.76rem;
  line-height: 1;
}

.pdf-frame-mode-button {
  right: 7px;
  border: 1px solid rgba(15, 23, 42, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #334155;
  cursor: grab;
  padding: 6px 10px;
  pointer-events: auto;
  user-select: none;
  touch-action: none;
}

.pdf-frame-mode-button:hover {
  border-color: #1b6f9f;
  background: #edf6fb;
}

.pdf-coverage-frame.is-locked .pdf-frame-mode-button {
  border-color: rgba(185, 28, 28, 0.5);
  color: #991b1b;
  cursor: pointer;
}

.pdf-coverage-frame.is-dragging .pdf-frame-mode-button {
  cursor: grabbing;
}

.pdf-coverage-frame.is-page-active {
  border-color: #1267d5;
  box-shadow:
    0 0 0 2px rgba(18, 103, 213, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.pdf-map-margin-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.pdf-map-margin-layer[hidden] {
  display: none;
}

.pdf-map-print-area {
  position: absolute;
  box-sizing: border-box;
  border: var(--page-map-frame-width, 0px) solid var(--page-map-frame-colour, #334155);
  background: transparent;
  box-shadow: 0 0 0 10000px #ffffff;
}

.pdf-frame-label {
  left: 7px;
  border: 0;
  background: rgba(15, 23, 42, 0.82);
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  padding: 7px 8px;
  pointer-events: auto;
  text-transform: capitalize;
  user-select: none;
  appearance: none;
  -webkit-appearance: none;
}

.pdf-frame-label:hover {
  background: rgba(27, 111, 159, 0.94);
}

.pdf-frame-label:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: 2px;
}

.pdf-frame-lock-button {
  top: auto;
  right: auto;
  bottom: 7px;
  left: 7px;
  border: 1px solid rgba(15, 23, 42, 0.3);
  background: rgba(255, 255, 255, 0.96);
  color: #17212b;
  cursor: pointer;
  padding: 6px 9px;
  pointer-events: auto;
}

.pdf-frame-lock-button:hover {
  background: #edf6fb;
  border-color: #1b6f9f;
}

.pdf-print-legend {
  position: absolute;
  z-index: 5;
  overflow: hidden;
  border: 1px solid rgba(51, 65, 85, 0.72);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.24);
  color: #17212b;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.pdf-print-legend[hidden] {
  display: none;
}

.pdf-print-legend.is-dragging {
  cursor: grabbing;
}

.pdf-print-legend.is-resizing {
  cursor: default;
}

.pdf-print-legend:focus-visible {
  outline: 3px solid rgba(27, 111, 159, 0.48);
  outline-offset: 2px;
}

.pdf-print-legend.is-active-composition {
  outline: 2px solid #1267d5;
  outline-offset: 2px;
}

.pdf-print-legend-header {
  height: var(--pdf-legend-header-height);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 0 var(--pdf-legend-padding);
  border-bottom: 1px solid rgba(51, 65, 85, 0.24);
  font-size: var(--pdf-legend-header-font-size);
  line-height: 1;
}

.pdf-print-legend-columns {
  max-height: calc(100% - var(--pdf-legend-header-height));
  display: grid;
  gap: var(--pdf-legend-column-gap);
  overflow: hidden;
  padding: var(--pdf-legend-padding);
}

.pdf-print-legend-column {
  min-width: 0;
}

.pdf-print-legend-entry {
  position: relative;
  height: var(--pdf-legend-row-height);
  display: grid;
  grid-template-columns: var(--pdf-legend-swatch-size) minmax(0, 1fr);
  align-items: center;
  gap: var(--pdf-legend-entry-gap);
  font-size: var(--pdf-legend-font-size);
  line-height: 1;
  border-radius: 2px;
  padding: 0 calc(var(--pdf-legend-row-height) * 0.5 + 2px) 0 2px;
}

.pdf-print-legend-entry.is-selected {
  background: rgba(27, 111, 159, 0.15);
  box-shadow: inset 2px 0 #1b6f9f;
}

.pdf-print-legend-swatch {
  width: var(--pdf-legend-swatch-size);
  height: var(--pdf-legend-swatch-size);
  border: 1px solid rgba(15, 23, 42, 0.28);
  border-radius: 1px;
  cursor: pointer;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

.pdf-print-legend-swatch:hover,
.pdf-print-legend-swatch:focus-visible {
  border-color: #1b6f9f;
  outline: 1px solid rgba(27, 111, 159, 0.55);
  outline-offset: 1px;
}

.pdf-legend-resize-handle {
  position: absolute;
  z-index: 6;
  width: 9px;
  height: 9px;
  border: 1px solid #1b6f9f;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
}

.pdf-legend-resize-handle.is-n,
.pdf-legend-resize-handle.is-s {
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.pdf-legend-resize-handle.is-e,
.pdf-legend-resize-handle.is-w {
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.pdf-legend-resize-handle.is-n {
  top: 1px;
}

.pdf-legend-resize-handle.is-ne {
  top: 1px;
  right: 1px;
  cursor: nesw-resize;
}

.pdf-legend-resize-handle.is-e {
  right: 1px;
}

.pdf-legend-resize-handle.is-se {
  right: 1px;
  bottom: 1px;
  cursor: nwse-resize;
}

.pdf-legend-resize-handle.is-s {
  bottom: 1px;
}

.pdf-legend-resize-handle.is-sw {
  bottom: 1px;
  left: 1px;
  cursor: nesw-resize;
}

.pdf-legend-resize-handle.is-w {
  left: 1px;
}

.pdf-legend-resize-handle.is-nw {
  top: 1px;
  left: 1px;
  cursor: nwse-resize;
}

.pdf-print-legend-name {
  min-width: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  padding: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
}

.pdf-print-legend-name:hover,
.pdf-print-legend-name:focus-visible {
  color: #0f5f91;
  outline: none;
  text-decoration: underline;
}

.pdf-coverage-frame.is-locked .pdf-frame-lock-button {
  border-color: rgba(185, 28, 28, 0.5);
  color: #991b1b;
}

.pdf-review-message {
  position: absolute;
  z-index: 200;
  top: 82px;
  left: 50%;
  width: min(690px, calc(100vw - 40px));
  max-height: calc(100vh - 114px);
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 18px;
  background: #111827;
  box-shadow:
    0 26px 70px rgba(2, 6, 23, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  color: #ffffff;
  transform: translateX(-50%);
  pointer-events: auto;
}

.pdf-review-message[hidden] {
  display: none;
}

.export-dialog-header {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  padding: 18px 20px 16px;
  background:
    radial-gradient(circle at 90% -30%, rgba(59, 130, 246, 0.22), transparent 45%),
    linear-gradient(135deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.98));
}

.export-dialog-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(147, 197, 253, 0.35);
  border-radius: 14px;
  background: linear-gradient(145deg, #2563eb, #1d4ed8);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.3);
}

.export-dialog-icon svg {
  width: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.export-dialog-eyebrow {
  display: block;
  margin: 0 0 2px;
  color: #93c5fd;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.export-dialog-header h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.28rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.export-dialog-header p {
  margin: 4px 0 0;
  color: #cbd5e1;
  font-size: 0.8rem;
  line-height: 1.35;
}

.export-dialog-close {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  cursor: pointer;
}

.export-dialog-close:hover,
.export-dialog-close:focus-visible {
  border-color: rgba(147, 197, 253, 0.7);
  background: rgba(59, 130, 246, 0.15);
  color: #ffffff;
  outline: none;
}

.export-dialog-close svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.export-dialog-body {
  display: grid;
  gap: 15px;
  padding: 18px 20px;
}

.export-review-tip {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 11px;
  background: rgba(30, 64, 175, 0.12);
  padding: 10px 12px;
}

.export-review-tip svg {
  width: 21px;
  fill: none;
  stroke: #93c5fd;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.export-review-tip p {
  margin: 0;
}

.export-review-tip strong,
.export-review-tip span {
  display: block;
}

.export-review-tip strong {
  color: #f8fafc;
  font-size: 0.82rem;
}

.export-review-tip span {
  margin-top: 2px;
  color: #bfdbfe;
  font-size: 0.73rem;
  line-height: 1.35;
}

.pdf-review-message .pdf-legend-warning {
  display: block;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.13);
  padding: 8px 10px;
  color: #fde68a;
  font-size: 0.75rem;
  font-weight: 650;
}

.export-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.export-setting-field {
  display: grid;
  gap: 6px;
}

.export-setting-field[hidden] {
  display: none;
}

.export-setting-field > span,
.export-format-group legend {
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 750;
}

.export-setting-field .dataset-select {
  border-color: rgba(148, 163, 184, 0.35);
  background-color: #1e293b;
  color: #f8fafc;
}

.export-format-group {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.export-format-group legend {
  margin-bottom: 7px;
}

.export-format-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.export-format-card {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.export-format-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.export-format-card > span {
  display: grid;
  min-height: 58px;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.7);
  padding: 8px;
  text-align: left;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}

.export-format-icon {
  display: block;
  width: 25px;
  height: 25px;
}

.export-format-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.export-format-card strong {
  color: #f8fafc;
  font-size: 0.8rem;
}

.export-format-card small {
  overflow: hidden;
  color: #94a3b8;
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-format-card:hover > span {
  border-color: rgba(147, 197, 253, 0.6);
  background: rgba(30, 64, 175, 0.15);
}

.export-format-card input:focus-visible + span {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.export-format-card input:checked + span {
  border-color: #60a5fa;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.34), rgba(30, 64, 175, 0.2));
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.15) inset;
}

.export-format-card input:checked + span strong {
  color: #dbeafe;
}

.export-size-card {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 10px;
  background: rgba(22, 101, 52, 0.12);
  padding: 10px 12px;
}

.export-size-card[data-level="warning"] {
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(146, 64, 14, 0.18);
}

.export-size-card[data-level="blocked"] {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(153, 27, 27, 0.2);
}

.export-size-summary {
  color: #f8fafc;
  font-size: 0.78rem;
  font-weight: 750;
}

.export-safety-message {
  color: #bbf7d0;
  font-size: 0.7rem;
  line-height: 1.35;
}

.export-size-card[data-level="warning"] .export-safety-message {
  color: #fde68a;
}

.export-size-card[data-level="blocked"] .export-safety-message {
  color: #fecaca;
}

.export-data-card,
.export-result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(96, 165, 250, 0.26);
  border-radius: 11px;
  background: rgba(30, 64, 175, 0.1);
  padding: 11px 12px;
}

.export-data-icon,
.export-result-check {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
}

.export-data-icon svg,
.export-result-check svg,
.export-data-button svg,
.export-result-download svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.export-data-card > div,
.export-result-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.export-data-card strong,
.export-result-copy strong {
  color: #f8fafc;
  font-size: 0.76rem;
}

.export-data-card > div > span,
.export-result-copy > span {
  color: #aebed1;
  font-size: 0.67rem;
  line-height: 1.35;
}

.export-data-card small,
.export-result-copy small {
  overflow: hidden;
  color: #93c5fd;
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-data-card small:empty {
  display: none;
}

.export-data-card small.is-error {
  display: block;
  color: #fca5a5;
}

.export-data-button,
.export-result-download {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 9px;
  background: rgba(37, 99, 235, 0.2);
  padding: 7px 10px;
  color: #dbeafe;
  font: inherit;
  font-size: 0.69rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.export-data-button:hover:not(:disabled),
.export-data-button:focus-visible:not(:disabled),
.export-result-download:hover,
.export-result-download:focus-visible {
  border-color: #93c5fd;
  background: rgba(37, 99, 235, 0.34);
  outline: none;
}

.export-data-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.export-progress {
  display: grid;
  gap: 7px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 13px;
}

.export-progress[hidden] {
  display: none;
}

.export-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #dbeafe;
  font-size: 0.72rem;
}

.export-progress-copy > span {
  color: #93c5fd;
  font-variant-numeric: tabular-nums;
}

.export-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
}

.export-progress-track > span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #60a5fa, #22d3ee);
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.55);
  transition: width 280ms ease;
}

.export-progress.is-error .export-progress-copy {
  color: #fecaca;
}

.export-progress.is-error .export-progress-copy > span {
  color: #fca5a5;
}

.export-progress.is-error .export-progress-track > span {
  background: linear-gradient(90deg, #b91c1c, #ef4444);
}

.export-result {
  border-color: rgba(74, 222, 128, 0.42);
  background: linear-gradient(145deg, rgba(22, 101, 52, 0.24), rgba(20, 83, 45, 0.13));
}

.export-result[hidden] {
  display: none;
}

.export-result-check {
  background: rgba(34, 197, 94, 0.17);
  color: #86efac;
}

.export-result-check svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.4;
}

.export-result-download {
  border-color: rgba(74, 222, 128, 0.52);
  background: linear-gradient(135deg, #15803d, #166534);
  color: #f0fdf4;
  box-shadow: 0 7px 16px rgba(21, 128, 61, 0.2);
}

.export-result-download:hover,
.export-result-download:focus-visible {
  border-color: #86efac;
  background: linear-gradient(135deg, #16a34a, #15803d);
}

.export-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  padding: 14px 20px 17px;
  background: rgba(2, 6, 23, 0.26);
}

.export-dialog-button {
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 15px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
}

.export-dialog-button.is-secondary {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
}

.export-dialog-button.is-primary {
  min-width: 156px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 9px 20px rgba(37, 99, 235, 0.25);
  color: #ffffff;
}

.export-dialog-button svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.export-dialog-button:hover:not(:disabled),
.export-dialog-button:focus-visible:not(:disabled) {
  filter: brightness(1.1);
  outline: none;
  transform: translateY(-1px);
}

.export-dialog-button:disabled,
.export-dialog-close:disabled {
  cursor: not-allowed;
  filter: saturate(0.45);
  opacity: 0.55;
}

/* Light three-step export workflow */
.pdf-review-message {
  position: fixed;
  top: clamp(14px, 5vh, 54px);
  display: grid;
  width: min(880px, calc(100vw - 40px));
  max-height: calc(100vh - clamp(28px, 10vh, 108px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #d6e0eb;
  border-radius: 20px;
  background: #fbfdff;
  box-shadow:
    0 28px 80px rgba(15, 23, 42, 0.24),
    0 2px 10px rgba(37, 99, 235, 0.07);
  color: #172033;
}

.export-dialog-header {
  grid-template-columns: 56px minmax(0, 1fr) 44px;
  gap: 17px;
  border-bottom-color: #d8e2ed;
  padding: 21px 28px 19px;
  background:
    radial-gradient(circle at 88% -35%, rgba(96, 165, 250, 0.17), transparent 48%),
    linear-gradient(135deg, #f9fbff 0%, #edf5ff 100%);
}

.export-dialog-icon {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #3478f6, #1558ed);
  box-shadow:
    0 9px 20px rgba(37, 99, 235, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.export-dialog-icon svg {
  width: 27px;
  height: 27px;
  stroke-width: 1.9;
}

.export-dialog-heading {
  min-width: 0;
}

.export-dialog-eyebrow {
  margin-bottom: 3px;
  color: #2563eb;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
}

.export-dialog-header h2 {
  color: #172033;
  font-size: 1.48rem;
  line-height: 1.12;
}

.export-dialog-header p {
  margin-top: 5px;
  color: #4f6078;
  font-size: 0.82rem;
}

.export-dialog-close {
  width: 42px;
  height: 42px;
  border-color: #d2dce8;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.82);
  color: #39475c;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.export-dialog-close:hover,
.export-dialog-close:focus-visible {
  border-color: #93b4e7;
  background: #ffffff;
  color: #172033;
  outline: 3px solid rgba(37, 99, 235, 0.14);
  outline-offset: 1px;
}

.export-dialog-close svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
}

.export-dialog-body {
  display: grid;
  min-height: 0;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 34px 20px;
  background: #fffefd;
  scrollbar-gutter: stable;
}

.export-review-tip {
  display: none;
}

.export-step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #172033;
}

.export-step-header h3 {
  margin: 0;
  color: inherit;
  font-size: 0.98rem;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.export-step-number {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #3478f6, #1558ed);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.17);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
}

.export-page-header {
  order: 1;
  padding-top: 24px;
}

.export-settings-grid {
  order: 2;
  margin: 14px 0 0 39px;
}

.export-size-card {
  order: 3;
  margin: 10px 0 22px 39px;
}

.export-format-header {
  order: 4;
  border-top: 1px solid #dce4ed;
  padding-top: 20px;
}

.export-format-group {
  order: 5;
  margin: 14px 0 22px 39px;
}

.export-generate-header {
  order: 6;
  border-top: 1px solid #dce4ed;
  padding-top: 20px;
}

.export-ready-summary {
  order: 7;
  margin: 14px 0 10px 11px;
}

.export-progress,
.export-result {
  order: 8;
  margin: 14px 0 10px 11px;
}

.export-data-card {
  order: 9;
  margin: 0 0 10px 11px;
}

.pdf-review-message .pdf-legend-warning {
  order: 10;
  margin: 2px 0 0 11px;
}

.export-settings-grid {
  gap: 24px;
}

.export-settings-grid.is-vector {
  grid-template-columns: minmax(0, 1fr);
}

.export-setting-field {
  gap: 7px;
}

.export-setting-field > span {
  color: #3a4960;
  font-size: 0.72rem;
  font-weight: 750;
}

.export-setting-field .dataset-select {
  min-height: 48px;
  border: 1px solid #d2dce8;
  border-radius: 10px;
  background-color: #ffffff;
  color: #1f2937;
  font-size: 0.87rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
}

.export-setting-field .dataset-select:hover {
  border-color: #aebed0;
}

.export-setting-field .dataset-select:focus-visible {
  border-color: #2563eb;
  outline: 3px solid rgba(37, 99, 235, 0.13);
  outline-offset: 1px;
}

.export-size-card {
  grid-template-columns: 21px minmax(0, 1fr);
  gap: 2px 9px;
  border: 0;
  background: transparent;
  padding: 1px 2px;
}

.export-size-icon {
  display: grid;
  width: 20px;
  height: 20px;
  grid-row: 1 / span 2;
  place-items: center;
  color: #2563eb;
}

.export-size-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.export-size-summary {
  color: #2563eb;
  font-size: 0.74rem;
}

.export-safety-message {
  color: #64748b;
  font-size: 0.67rem;
}

.export-size-card[data-level="warning"],
.export-size-card[data-level="blocked"] {
  border: 1px solid;
  border-radius: 9px;
  padding: 9px 11px;
}

.export-size-card[data-level="warning"] {
  border-color: #f7c86a;
  background: #fffaf0;
}

.export-size-card[data-level="blocked"] {
  border-color: #f0a3a3;
  background: #fff5f5;
}

.export-size-card[data-level="warning"] .export-size-icon,
.export-size-card[data-level="warning"] .export-size-summary,
.export-size-card[data-level="warning"] .export-safety-message {
  color: #a75a00;
}

.export-size-card[data-level="blocked"] .export-size-icon,
.export-size-card[data-level="blocked"] .export-size-summary,
.export-size-card[data-level="blocked"] .export-safety-message {
  color: #b42318;
}

.export-format-options {
  gap: 14px;
}

.export-format-card > span {
  position: relative;
  min-height: 116px;
  grid-template-columns: 1fr;
  grid-template-rows: 49px auto;
  place-items: center;
  gap: 7px;
  border-color: #d6dee8;
  border-radius: 11px;
  background: #ffffff;
  padding: 13px 8px 11px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
}

.export-format-icon {
  width: 47px;
  height: 47px;
}

.export-format-copy {
  justify-items: center;
  gap: 2px;
}

.export-format-card strong {
  color: #172033;
  font-size: 0.85rem;
}

.export-format-card small {
  overflow: visible;
  color: #64748b;
  font-size: 0.66rem;
  text-overflow: clip;
  white-space: normal;
}

.export-format-card:hover > span {
  border-color: #9db7dd;
  background: #f8fbff;
  transform: translateY(-1px);
}

.export-format-card input:focus-visible + span {
  outline: 3px solid rgba(37, 99, 235, 0.2);
  outline-offset: 2px;
}

.export-format-card input:checked + span {
  border-color: #1f66f3;
  background: linear-gradient(145deg, #f7fbff, #eef5ff);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.16),
    0 6px 16px rgba(37, 99, 235, 0.08);
}

.export-format-card input:checked + span::after {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  content: '';
}

.export-format-card input:checked + span::before {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 11px;
  width: 6px;
  height: 3px;
  border-bottom: 1.5px solid #ffffff;
  border-left: 1.5px solid #ffffff;
  content: '';
  transform: rotate(-45deg);
}

.export-format-card input:checked + span strong {
  color: #172033;
}

.export-ready-summary {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid #d8e3f1;
  border-radius: 11px;
  background: #f8fbff;
  padding: 10px 12px;
}

.export-ready-summary[hidden] {
  display: none;
}

.export-ready-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: #e8f1ff;
  color: #2563eb;
}

.export-ready-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.export-ready-summary > span:last-child {
  display: grid;
  gap: 2px;
}

.export-ready-summary strong {
  color: #223047;
  font-size: 0.77rem;
}

.export-ready-summary small {
  color: #64748b;
  font-size: 0.67rem;
}

.export-data-card,
.export-result {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  border-color: #d6dee8;
  background: #ffffff;
  padding: 11px 13px;
}

.export-data-icon,
.export-result-check {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #eaf2ff;
  color: #2563eb;
}

.export-data-card strong,
.export-result-copy strong {
  color: #1f2a3d;
  font-size: 0.77rem;
}

.export-data-card > div > span,
.export-result-copy > span {
  color: #66758a;
  font-size: 0.67rem;
}

.export-data-card small,
.export-result-copy small {
  color: #2563eb;
}

.export-data-card small.is-error {
  color: #b42318;
}

.export-data-card .export-data-summary {
  color: #64748b;
  font-weight: 650;
}

.export-data-button {
  min-height: 38px;
  border-color: #b8c7dc;
  background: #ffffff;
  color: #2563eb;
  font-size: 0.72rem;
}

.export-data-button:hover:not(:disabled),
.export-data-button:focus-visible:not(:disabled) {
  border-color: #2563eb;
  background: #f4f8ff;
  outline: 3px solid rgba(37, 99, 235, 0.12);
}

.export-progress {
  gap: 9px;
  border: 1px solid #cbdcf5;
  border-radius: 11px;
  background: #f6faff;
  padding: 13px 14px;
}

.export-progress-copy {
  color: #294a7a;
  font-size: 0.73rem;
}

.export-progress-copy > span {
  color: #2563eb;
}

.export-progress-track {
  background: #dbe7f6;
}

.export-progress-track > span {
  background: linear-gradient(90deg, #1558ed, #3b82f6, #38bdf8);
  box-shadow: none;
}

.export-progress.is-error {
  border-color: #e58f8f;
  background: #fff4f4;
}

.export-progress.is-error .export-progress-copy,
.export-progress.is-error .export-progress-copy > span {
  color: #b42318;
}

.export-result {
  border-color: #75c891;
  background: linear-gradient(145deg, #f8fffa, #f1fbf4);
}

.export-result-check {
  border-radius: 50%;
  background: linear-gradient(145deg, #35ad65, #168746);
  color: #ffffff;
}

.export-result-copy strong {
  color: #14532d;
  font-size: 0.83rem;
}

.export-result-download {
  min-height: 40px;
  border-color: #1b8c49;
  background: linear-gradient(135deg, #2ea95f, #168743);
  padding: 8px 13px;
  color: #ffffff;
  font-size: 0.72rem;
}

.export-result-download:hover,
.export-result-download:focus-visible {
  border-color: #166534;
  background: linear-gradient(135deg, #249951, #11773a);
  outline: 3px solid rgba(22, 135, 67, 0.14);
}

.pdf-review-message .pdf-legend-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #f5c66b;
  border-radius: 9px;
  background: #fffaf0;
  padding: 9px 12px;
  color: #8b4b00;
  font-size: 0.7rem;
  font-weight: 650;
}

.pdf-review-message .pdf-legend-warning[hidden] {
  display: none;
}

.pdf-review-message .pdf-legend-warning svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: #e38300;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.export-dialog-actions {
  border-top-color: #d9e2ec;
  padding: 14px 28px 16px;
  background: #fbfcfe;
}

.export-dialog-button {
  min-height: 42px;
  border-radius: 10px;
  padding: 9px 17px;
  font-size: 0.78rem;
}

.export-dialog-button.is-secondary {
  border-color: #cbd5e1;
  background: #ffffff;
  color: #253247;
}

.export-dialog-button.is-primary {
  min-width: 168px;
  background: linear-gradient(135deg, #3478f6, #1558ed);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.export-dialog-button:hover:not(:disabled),
.export-dialog-button:focus-visible:not(:disabled) {
  outline: 3px solid rgba(37, 99, 235, 0.13);
  outline-offset: 1px;
}

@media (max-width: 720px) {
  .pdf-review-message {
    top: 12px;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .export-dialog-header {
    grid-template-columns: 48px minmax(0, 1fr) 42px;
    gap: 12px;
    padding: 17px 18px 15px;
  }

  .export-dialog-icon {
    width: 46px;
    height: 46px;
  }

  .export-dialog-header h2 {
    font-size: 1.25rem;
  }

  .export-dialog-body {
    padding-right: 18px;
    padding-left: 18px;
    scrollbar-gutter: auto;
  }

  .export-settings-grid,
  .export-settings-grid.is-vector {
    grid-template-columns: 1fr;
    margin-left: 0;
  }

  .export-size-card,
  .export-format-group {
    margin-left: 0;
  }

  .export-ready-summary,
  .export-progress,
  .export-result,
  .export-data-card,
  .pdf-review-message .pdf-legend-warning {
    margin-left: 0;
  }

  .export-format-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .export-format-card > span {
    min-height: 101px;
  }
}

@media (max-width: 460px) {
  .export-dialog-header p {
    display: none;
  }

  .export-format-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .export-data-card,
  .export-result {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .export-data-button,
  .export-result-download {
    grid-column: 1 / -1;
  }

  .export-dialog-actions {
    padding-right: 18px;
    padding-left: 18px;
  }

  .export-dialog-button.is-primary {
    min-width: 0;
  }
}

@media (max-height: 760px) and (min-width: 721px) {
  .pdf-review-message {
    top: 12px;
    max-height: calc(100vh - 24px);
  }

  .export-dialog-header {
    padding-top: 14px;
    padding-bottom: 13px;
  }

  .export-dialog-icon {
    width: 46px;
    height: 46px;
  }

  .export-dialog-body {
    padding-bottom: 14px;
  }

  .export-page-header {
    padding-top: 16px;
  }

  .export-format-header,
  .export-generate-header {
    padding-top: 15px;
  }

  .export-settings-grid {
    margin-top: 9px;
  }

  .export-size-card,
  .export-format-group {
    margin-bottom: 14px;
  }

  .export-format-card > span {
    min-height: 92px;
    grid-template-rows: 38px auto;
    padding-top: 9px;
    padding-bottom: 8px;
  }

  .export-format-icon {
    width: 37px;
    height: 37px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .export-format-card > span,
  .export-progress-track > span,
  .export-dialog-button {
    transition: none;
  }
}

.dataset-panel,
.legend-panel,
.control-panel,
.info-panel {
  position: absolute;
  z-index: 5;
  width: min(320px, calc(100vw - 24px));
  border: 1px solid rgba(31, 41, 51, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(31, 41, 51, 0.16);
  backdrop-filter: blur(8px);
  transition:
    opacity 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}

#app.is-pdf-reviewing .dataset-panel {
  z-index: 9;
}

#app.is-pdf-reviewing .legend-panel,
#app.is-pdf-reviewing .control-panel,
#app.is-pdf-reviewing .info-panel {
  opacity: 0.16;
  filter: blur(3px) saturate(0.45);
  transform: scale(0.985);
  pointer-events: none;
}

.dataset-panel {
  top: 12px;
  left: 64px;
  width: min(380px, calc(100vw - 88px));
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}

.dataset-save-row {
  display: flex;
  gap: 8px;
}

.spreadsheet-load-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.spreadsheet-load-row .dataset-button {
  flex: 0 0 auto;
}

.spreadsheet-load-row span {
  color: #64748b;
  font-size: 0.76rem;
}

.dataset-export-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.pdf-legend-option {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #526170;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
}

.pdf-legend-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1b6f9f;
}

.export-pdf-button {
  flex: 1 1 auto;
}

.pdf-orientation-block {
  display: grid;
  gap: 5px;
}

.pdf-page-settings-grid {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: 9px;
}

.pdf-orientation-block > span {
  color: #526170;
  font-size: 0.76rem;
  font-weight: 650;
}

.pdf-orientation-select {
  min-width: 0;
  padding-left: 9px;
  padding-right: 9px;
}

.dataset-select-block {
  display: grid;
  gap: 8px;
}

.map-template-card {
  display: grid;
  gap: 10px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  padding: 12px;
}

.map-region-control {
  display: grid;
  gap: 10px;
  border-top: 1px solid #c7dcf5;
  padding-top: 11px;
}

.map-region-control[hidden] {
  display: none;
}

.map-region-breadcrumb {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: #526476;
  font-size: .74rem;
}

.map-region-breadcrumb span,
.map-region-breadcrumb strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-region-breadcrumb strong {
  color: #174f86;
}

.map-region-breadcrumb svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.map-region-breadcrumb path {
  fill: none;
  stroke: #7c91a8;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-region-counterpart {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #9fc5eb;
  border-radius: 8px;
  background: #ffffff;
  color: #175a96;
  padding: 7px 10px;
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.map-region-counterpart[hidden] {
  display: none;
}

.map-region-counterpart:hover {
  border-color: #4f91ce;
  background: #f5faff;
}

.map-region-counterpart:focus-visible {
  outline: 3px solid rgba(18, 103, 213, .24);
  outline-offset: 2px;
}

.map-region-counterpart svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.map-region-counterpart path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.boundary-overlays-card {
  display: grid;
  gap: 10px;
  border: 1px solid #d8dee9;
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}

.boundary-overlays-heading {
  align-items: center;
}

.boundary-overlay-add {
  display: inline-flex;
  min-width: 66px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #a7d6a1;
  border-radius: 8px;
  background: #f2faef;
  color: #255d21;
  padding: 5px 8px;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.boundary-overlay-add img {
  width: 18px;
  height: 18px;
}

.boundary-overlay-add:disabled {
  opacity: .45;
  cursor: default;
}

.boundary-overlay-add:hover:not(:disabled) {
  border-color: #79bd70;
  background: #e9f7e5;
}

.boundary-overlay-list {
  display: grid;
  gap: 10px;
}

.boundary-overlay-empty {
  margin: 0;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #64748b;
  padding: 10px;
  font-size: .8rem;
  line-height: 1.4;
  text-align: center;
}

.boundary-overlay-item {
  display: grid;
  gap: 9px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #f8fafc;
  padding: 10px;
}

.boundary-overlay-item.is-loading {
  opacity: .7;
}

.boundary-overlay-item-header,
.boundary-overlay-order,
.boundary-overlay-inline,
.boundary-overlay-country-list {
  display: flex;
  align-items: center;
}

.boundary-overlay-item-header {
  justify-content: space-between;
  gap: 8px;
}

.boundary-overlay-item-header strong {
  color: #29384a;
  font-size: .82rem;
}

.boundary-overlay-order {
  gap: 4px;
}

.boundary-overlay-icon-button {
  display: grid;
  width: 28px;
  height: 27px;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  cursor: pointer;
}

.boundary-overlay-icon-button:disabled {
  opacity: .35;
  cursor: default;
}

.boundary-overlay-remove {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #e4aaa5;
  border-radius: 6px;
  background: #fff3f2;
  padding: 4px 7px;
  color: #a72f25;
  font: inherit;
  font-size: 0.67rem;
  font-weight: 700;
  cursor: pointer;
}

.boundary-overlay-remove:hover {
  border-color: #d77c74;
  background: #ffe8e6;
  color: #8f2119;
}

.boundary-overlay-remove:focus-visible {
  outline: 3px solid rgba(183, 48, 37, 0.18);
  outline-offset: 2px;
}

.boundary-overlay-remove svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.boundary-overlay-remove path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.boundary-overlay-item .dataset-select-block {
  gap: 5px;
}

.boundary-overlay-item .dataset-select {
  padding-block: 6px;
  font-size: .8rem;
}

.boundary-overlay-style-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.boundary-overlay-field {
  display: grid;
  gap: 4px;
  color: #475569;
  font-size: .73rem;
  font-weight: 650;
}

.boundary-overlay-field input[type='color'] {
  width: 100%;
  min-height: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  padding: 2px;
}

.boundary-overlay-field input[type='range'] {
  width: 100%;
  margin: 3px 0 0;
}

.boundary-overlay-field.is-wide {
  grid-column: 1 / -1;
}

.boundary-overlay-readout {
  color: #64748b;
  font-size: .7rem;
  font-weight: 500;
}

.boundary-overlay-inline {
  flex-wrap: wrap;
  gap: 7px 10px;
}

.boundary-overlay-inline .mini-checkbox {
  flex: 0 0 auto;
}

.boundary-overlay-wrap-length {
  width: 68px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  padding: 4px 6px;
  color: #334155;
  font-size: .75rem;
}

.boundary-overlay-countries {
  border-top: 1px solid #e2e8f0;
  padding-top: 8px;
}

.boundary-overlay-countries > summary {
  color: #475569;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}

.boundary-overlay-country-list {
  flex-wrap: wrap;
  gap: 6px 10px;
  padding-top: 8px;
}

.boundary-overlay-status {
  margin: 0;
  color: #64748b;
  font-size: .72rem;
}

.boundary-overlay-status.is-error {
  color: #b42318;
}

.map-template-summary {
  margin: 0;
  color: #526170;
  font-size: .8rem;
  line-height: 1.4;
}

.area-label-field-control {
  margin-bottom: 4px;
}

.settlement-availability-status {
  margin: 0;
  border: 1px solid #dbe5ee;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  padding: 8px 10px;
  font-size: .75rem;
  line-height: 1.4;
}

.settlement-availability-status[hidden] {
  display: none;
}

.dataset-select-block > span {
  color: #334155;
  font-size: 0.86rem;
  font-weight: 650;
}

.dataset-select,
.dataset-button,
.save-name-input {
  min-width: 72px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #1e293b;
  padding: 7px 12px;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

.dataset-select,
.dataset-button {
  cursor: pointer;
}

.dataset-select {
  width: 100%;
}

.dataset-button:hover {
  border-color: #7aa6bf;
  background: #edf6fb;
}

.dataset-button.is-active {
  border-color: #1b6f9f;
  background: #1b6f9f;
  color: #ffffff;
}

.dataset-readout {
  margin: 0;
  color: #526170;
  font-size: 0.88rem;
  line-height: 1.4;
}

.export-status {
  min-height: 1.2em;
  margin: 0;
  color: #526170;
  font-size: 0.86rem;
  line-height: 1.35;
}

.export-status a {
  color: #1b6f9f;
  font-weight: 650;
}

.export-status.is-error {
  color: #b91c1c;
}

.dataset-readout strong {
  color: #0f172a;
}

.legend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.legend-header h2 {
  margin: 0;
  color: #17212b;
  font-size: 0.98rem;
  line-height: 1.2;
}

.add-name-button {
  min-width: 96px;
}

.legend-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.save-name-input {
  flex: 1 1 auto;
  min-width: 0;
  background: #ffffff;
}

.save-name-input:focus,
.dataset-select:focus {
  outline: 2px solid rgba(27, 111, 159, 0.18);
  border-color: #1b6f9f;
}

.legend-empty {
  margin: 0;
  color: #526170;
  font-size: 0.9rem;
  line-height: 1.4;
}

.legend-swatch {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(15, 23, 42, 0.22);
  border-radius: 4px;
  flex: 0 0 auto;
  background-position: center;
}

.swatch-button {
  cursor: pointer;
  padding: 0;
}

.legend-panel {
  top: 12px;
  left: calc(100vw - 332px);
  width: min(320px, calc(100vw - 24px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  max-height: calc(100vh - 24px);
  overflow: hidden;
  padding: 11px;
  touch-action: none;
}

.legend-panel.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.legend-header {
  cursor: default;
}

.legend-list {
  display: grid;
  gap: 4px;
  min-height: 0;
  max-height: calc(100vh - 96px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}

.legend-item {
  display: grid;
  grid-template-columns: 14px 16px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 6px;
  width: 100%;
  /* border: 1px solid #d8e2ec; */
  /* border-radius: 8px; */
  background: #f8fafc;
  color: #17212b;
  cursor: pointer;
  padding: 0px 3px;
  text-align: left;
}

.legend-item.is-selected {
  border-color: #1b6f9f;
  background: #e7f3fa;
}

.legend-name-input {
  width: 100%;
  min-width: 0;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #17212b;
  padding: 5px 7px;
}

.legend-name-input:focus {
  outline: 2px solid rgba(27, 111, 159, 0.18);
  border-color: #1b6f9f;
}

.legend-entry-remove {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid #b91c1c;
  border-radius: 50%;
  background: #dc2626;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  line-height: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

.legend-entry-remove span {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
}

.legend-entry-remove span::before,
.legend-entry-remove span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: '';
  transform-origin: center;
}

.legend-entry-remove span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.legend-entry-remove span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.legend-entry-remove:hover {
  border-color: #991b1b;
  background: #b91c1c;
}

.legend-entry-remove:focus-visible {
  outline: 3px solid rgba(220, 38, 38, 0.24);
  outline-offset: 2px;
}

.colour-picker-input {
  position: fixed;
  width: 28px;
  height: 28px;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
}

.control-panel {
  top: 12px;
  right: 344px;
  width: 312px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.control-panel-header,
.control-group-header,
.slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.control-panel-title,
.slider-block > span,
.zoom-chip span {
  color: #334155;
  font-size: 0.86rem;
  font-weight: 650;
}

.zoom-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d8e2ec;
  border-radius: 999px;
  background: #f8fafc;
  padding: 5px 10px;
}

.control-group {
  display: grid;
  gap: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.9);
  padding: 12px;
}

.control-group-header {
  align-items: flex-start;
}

.control-group-header h3 {
  margin: 0;
  color: #17212b;
  font-size: 0.94rem;
  line-height: 1.2;
}

.control-group-header p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.3;
}

.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  color: #334155;
  font-size: 0.86rem;
  font-weight: 650;
}

.checkbox-row input {
  width: 16px;
  height: 16px;
  accent-color: #1b6f9f;
}

.slider-block {
  display: grid;
  gap: 8px;
}

.compact-slider {
  gap: 6px;
}

.boundary-style-note {
  margin: 0;
  color: #64748b;
  font-size: 0.76rem;
  line-height: 1.35;
}

.settlement-filters {
  display: grid;
  gap: 8px;
}

.label-priority-intro {
  display: grid;
  gap: 3px;
  border: 1px solid #cfe0f3;
  border-radius: 8px;
  background: #eef6ff;
  padding: 10px 12px;
  color: #526476;
  font-size: 0.75rem;
  line-height: 1.35;
}

.label-priority-intro strong {
  color: #174f86;
  font-size: 0.8rem;
}

.label-priority-stack {
  display: grid;
  gap: 12px;
}

.label-priority-card.is-higher-priority {
  box-shadow: 0 2px 8px rgba(51, 65, 85, 0.12);
}

.label-priority-card[data-label-priority-card="areas"] {
  border-color: #b9d4ee;
  background: #eef6ff;
}

.label-priority-card[data-label-priority-card="settlements"] {
  border-color: #c9dbb5;
  background: #f3f8eb;
}

.label-priority-heading {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.label-priority-card > .control-group-header {
  align-items: center;
}

.label-priority-heading > div {
  min-width: 0;
}

.label-priority-move-button {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid #b9c9d9;
  border-radius: 7px;
  background: #ffffff;
  color: #286ca9;
  cursor: pointer;
}

.label-priority-move-button:hover {
  border-color: #5594ca;
  background: #edf6ff;
}

.label-priority-move-button:focus-visible {
  outline: 3px solid rgba(18, 103, 213, 0.25);
  outline-offset: 2px;
}

.label-priority-move-button svg {
  width: 17px;
  height: 17px;
  transition: transform 120ms ease;
}

.label-priority-move-button[data-direction="down"] svg {
  transform: rotate(180deg);
}

.label-priority-move-button path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.area-label-wrap-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid #e1e8ef;
  padding-top: 7px;
}

.area-label-wrap-length {
  display: block;
  min-width: 0;
  flex: 1 1 92px;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 650;
}

.area-label-wrap-length .dataset-select {
  width: 100%;
  min-height: 30px;
  padding: 4px 24px 4px 7px;
}

.area-label-wrap-length .dataset-select:disabled {
  background: #eef2f6;
  color: #98a4b3;
  cursor: not-allowed;
}

.settlement-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 65px;
  align-items: center;
  gap: 8px;
}

.label-size-number {
  display: flex;
  height: 30px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #64748b;
  font-size: .7rem;
}

.label-size-number input {
  width: 43px;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #334155;
  padding: 3px 0 3px 6px;
  font: inherit;
  font-weight: 700;
}

.label-size-number > span:last-child {
  padding-right: 5px;
}

.label-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.label-colour-control {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  padding: 3px;
}

.label-colour-control input[type='color'] {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.label-colour-control:focus-within {
  border-color: #1267d5;
  box-shadow: 0 0 0 3px rgba(18, 103, 213, 0.12);
}

.country-filters {
  display: grid;
  gap: 8px;
  max-height: 132px;
  overflow: auto;
  padding-right: 2px;
}

.filter-placeholder {
  margin: 0;
  color: #64748b;
  font-size: 0.84rem;
  line-height: 1.35;
}

.mini-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  padding: 7px 9px;
}

.mini-checkbox span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-checkbox input {
  width: 15px;
  height: 15px;
  accent-color: #1b6f9f;
  flex: 0 0 auto;
}

input[type='range'] {
  width: 100%;
  min-width: 0;
  accent-color: #1b6f9f;
}

output {
  min-width: 40px;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  text-align: right;
}

/* Keep changing slider values from altering the row or panel height. */
.slider-row > output {
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  white-space: nowrap;
}

.info-panel {
  right: 12px;
  bottom: 12px;
  max-height: min(48vh, 460px);
  padding: 14px;
  overflow: hidden;
}

.info-panel h2 {
  margin: 0 0 10px;
  color: #17212b;
  font-size: 1rem;
  line-height: 1.2;
}

.info-panel p {
  margin: 0;
  color: #526170;
  font-size: 0.9rem;
  line-height: 1.45;
}

.info-panel code {
  font-size: 0.85em;
}

.info-panel.error {
  border-color: rgba(185, 28, 28, 0.35);
}

.spreadsheet-modal-backdrop {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.42);
  padding: 24px;
  backdrop-filter: blur(5px);
}

.spreadsheet-modal {
  width: min(1120px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.35);
}

.spreadsheet-modal-header,
.spreadsheet-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.spreadsheet-modal-header {
  border-bottom: 1px solid #e2e8f0;
}

.spreadsheet-modal-eyebrow {
  margin: 0 0 3px;
  color: #1b6f9f;
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spreadsheet-modal-header h2 {
  margin: 0;
  color: #17212b;
  font-size: 1.08rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.spreadsheet-modal-header #spreadsheet-modal-description {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 0.82rem;
}

.spreadsheet-modal-close {
  width: 34px;
  height: 34px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
  padding: 0;
}

.spreadsheet-modal-close:hover {
  border-color: #1b6f9f;
  background: #edf6fb;
}

.spreadsheet-modal-close span {
  font-size: 1.35rem;
  line-height: 1;
}

.spreadsheet-modal-body {
  min-height: 0;
  overflow: auto;
  padding: 16px 18px;
}

.spreadsheet-column-selectors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dots-column-selectors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.spreadsheet-field {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 700;
}

.spreadsheet-field > span small {
  margin-left: 4px;
  color: #7c3aed;
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
}

.spreadsheet-field-hint {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
}

.spreadsheet-single-group-field {
  display: grid;
  gap: 4px;
}

.spreadsheet-single-group-field[hidden] {
  display: none;
}

.spreadsheet-single-group-field input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #172033;
  font: inherit;
  font-weight: 600;
  padding: 7px 10px;
}

.spreadsheet-single-group-field input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  outline: 0;
}

.worksheet-selector-block {
  max-width: 360px;
  margin-bottom: 12px;
}

.spreadsheet-validation,
.spreadsheet-preview-summary,
.spreadsheet-empty-message {
  margin: 11px 0 0;
  font-size: 0.84rem;
  line-height: 1.4;
}

.spreadsheet-validation {
  min-height: 1.2em;
  color: #92400e;
}

.spreadsheet-validation.is-valid {
  color: #166534;
}

.spreadsheet-map-suggestion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  border: 1px solid #93c5fd;
  border-radius: 11px;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  color: #172554;
  padding: 10px 11px;
}

.spreadsheet-map-suggestion[hidden] {
  display: none;
}

.spreadsheet-map-suggestion-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.14);
}

.spreadsheet-map-suggestion-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.spreadsheet-map-suggestion > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.spreadsheet-map-suggestion strong {
  font-size: 0.82rem;
}

.spreadsheet-map-suggestion > div > span {
  color: #475569;
  font-size: 0.74rem;
  line-height: 1.35;
}

.spreadsheet-map-suggestion-button {
  min-height: 38px;
  border-color: #1d4ed8;
  background: linear-gradient(135deg, #2563eb, #6d28d9);
  color: #ffffff;
  font-weight: 750;
  white-space: nowrap;
}

.spreadsheet-map-suggestion-button:hover:not(:disabled) {
  border-color: #1e40af;
  background: linear-gradient(135deg, #1d4ed8, #5b21b6);
}

.spreadsheet-preview-summary {
  color: #526170;
}

.spreadsheet-empty-message {
  border: 1px solid #d8e2ec;
  border-radius: 10px;
  background: #f8fafc;
  color: #526170;
  padding: 20px;
  text-align: center;
}

.spreadsheet-table-wrap {
  width: 100%;
  max-width: 100%;
  margin-top: 12px;
  overflow: auto;
  border: 1px solid #d8e2ec;
  border-radius: 10px;
  background: #ffffff;
}

.spreadsheet-preview-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 0.8rem;
}

.spreadsheet-preview-table th,
.spreadsheet-preview-table td {
  width: 180px;
  min-width: 180px;
  max-width: 280px;
  border: 0;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 10px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spreadsheet-preview-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: #f1f5f9;
  color: #334155;
  font-weight: 750;
}

.spreadsheet-preview-table tr:last-child td {
  border-bottom: 0;
}

.spreadsheet-preview-table th:last-child,
.spreadsheet-preview-table td:last-child {
  border-right: 0;
}

.spreadsheet-preview-table .is-postcode-column {
  background: #e0f2fe;
  box-shadow: inset 3px 0 0 #0284c7;
}

.spreadsheet-preview-table .is-heading-column {
  background: #ecfdf5;
  box-shadow: inset 3px 0 0 #059669;
}

.spreadsheet-preview-table .is-stats-column {
  background: #f5f3ff;
  box-shadow: inset 3px 0 0 #7c3aed;
}

.spreadsheet-preview-table .is-postcode-column.is-heading-column {
  background: #fef3c7;
  box-shadow: inset 3px 0 0 #d97706;
}

.dots-preview-table .is-dot-postcode-column {
  background: #e0f2fe;
  box-shadow: inset 3px 0 0 #0284c7;
}

.dots-preview-table .is-dot-label-column {
  background: #ecfdf5;
  box-shadow: inset 3px 0 0 #059669;
}

.dots-preview-table .is-dot-colour-column {
  background: #f5f3ff;
  box-shadow: inset 3px 0 0 #7c3aed;
}

.dots-preview-table .is-dot-style-column {
  background: #fff7ed;
  box-shadow: inset 3px 0 0 #ea580c;
}

.spreadsheet-modal-footer {
  justify-content: flex-end;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.spreadsheet-import-button:not(:disabled) {
  border-color: #1b6f9f;
  background: #1b6f9f;
  color: #ffffff;
}

.spreadsheet-import-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.properties-table-wrap {
  max-height: calc(min(48vh, 460px) - 58px);
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

th,
td {
  border-top: 1px solid #e2e8f0;
  padding: 7px 0;
  text-align: left;
  vertical-align: top;
}

th {
  width: 42%;
  padding-right: 10px;
  color: #475569;
  font-weight: 650;
  word-break: break-word;
}

td {
  color: #111827;
  word-break: break-word;
}

.ol-control button {
  background: rgba(255, 255, 255, 0.92);
  color: #1f2933;
}

.ol-zoom {
  left: 12px;
  top: 12px;
}

@media (max-width: 680px) {
  .dataset-panel,
  .legend-panel,
  .control-panel,
  .info-panel {
    width: calc(100vw - 24px);
  }

  .dataset-panel {
    top: 56px;
    left: 12px;
    width: calc(100vw - 24px);
  }

  .legend-panel {
    left: 12px;
    top: 168px;
  }

  .control-panel {
    top: 280px;
    right: 12px;
    width: calc(100vw - 24px);
  }

  .info-panel {
    max-height: 36vh;
  }

  .pdf-frame-label {
    display: none;
  }

  .pdf-review-message {
    position: fixed;
    top: 12px;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .export-dialog-header,
  .export-dialog-body,
  .export-dialog-actions {
    padding-right: 14px;
    padding-left: 14px;
  }

  .export-format-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .export-data-card,
  .export-result {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .export-data-button,
  .export-result-download {
    grid-column: 1 / -1;
  }

  .export-settings-grid {
    grid-template-columns: 1fr;
  }

  .spreadsheet-load-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .spreadsheet-modal-backdrop {
    padding: 12px;
  }

  .spreadsheet-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .spreadsheet-column-selectors {
    grid-template-columns: 1fr;
  }

  .spreadsheet-map-suggestion {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .spreadsheet-map-suggestion-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .dots-column-selectors {
    grid-template-columns: 1fr;
  }
}

/* Application shell */
:root {
  --topbar-height: 64px;
  --statusbar-height: 32px;
  --rail-width: 76px;
  --panel-width: 360px;
  --ui-blue: #1267d5;
  --ui-blue-dark: #0b55b5;
  --ui-border: #dce4ee;
  --ui-muted: #657386;
  --ui-shadow: 0 12px 32px rgba(26, 46, 72, 0.14);
}

.app-topbar {
  position: absolute;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid var(--ui-border);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  padding: 0 18px;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  min-width: 190px;
  text-decoration: none;
}

.app-brand-logo {
  display: block;
  width: 150px;
  height: auto;
  max-height: 44px;
}

.icon-button svg,
.topbar-button svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.project-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.map-search {
  position: relative;
  width: min(360px, 26vw);
  min-width: 210px;
  display: flex;
  align-items: center;
  margin-left: auto;
  border: 1px solid #d7e0eb;
  border-radius: 9px;
  background: #f8fafc;
  color: #64748b;
}

.map-search:focus-within {
  border-color: var(--ui-blue);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(18, 103, 213, 0.1);
}

.map-search > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-left: 11px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.map-search input {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #172334;
  padding: 0 8px;
  font-size: 0.82rem;
}

.map-search-clear {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-size: 1.2rem;
}

.map-search-results {
  position: absolute;
  z-index: 150;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  max-height: min(420px, calc(100vh - 90px));
  overflow-y: auto;
  border: 1px solid #d7e0eb;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.2);
  padding: 5px;
}

.map-search-results[hidden],
.map-search-clear[hidden] {
  display: none;
}

.map-search-result,
.map-search-message {
  width: 100%;
  display: grid;
  gap: 2px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 9px 10px;
  text-align: left;
}

.map-search-result {
  color: #172334;
  cursor: pointer;
}

.map-search-result:hover,
.map-search-result.is-active {
  background: #edf5ff;
}

.map-search-result strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-search-result span,
.map-search-message {
  color: #657386;
  font-size: 0.72rem;
}

.project-heading strong {
  overflow: hidden;
  color: #182433;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #738093;
  font-size: 0.82rem;
  white-space: nowrap;
}

.save-indicator > span,
.status-saved > span {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.65rem;
}

.background-map-toggle {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  margin-left: -8px;
  border: 1px solid #d5dde8;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 2px 5px rgba(34, 52, 74, 0.07);
  color: #64748b;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.background-map-toggle svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.background-map-toggle:hover,
.background-map-toggle:focus-visible {
  border-color: #91bdeb;
  background: #f2f7fd;
  box-shadow: 0 3px 9px rgba(18, 103, 213, 0.13);
  color: var(--ui-blue-dark);
  outline: none;
}

.background-map-toggle:focus-visible {
  box-shadow:
    0 0 0 3px rgba(18, 103, 213, 0.14),
    0 3px 9px rgba(18, 103, 213, 0.13);
}

.background-map-toggle[aria-pressed="true"] {
  border-color: #72a9e7;
  background: linear-gradient(145deg, #e7f2ff, #f4f8ff);
  box-shadow:
    0 0 0 1px rgba(18, 103, 213, 0.08) inset,
    0 3px 10px rgba(18, 103, 213, 0.15);
  color: var(--ui-blue);
}

.background-map-toggle[aria-pressed="true"] svg {
  stroke-width: 1.8;
}

.history-controls {
  display: flex;
  gap: 6px;
  margin-left: 0;
}

.icon-button,
.topbar-button,
.tool-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: #263547;
  cursor: pointer;
}

.icon-button {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}

.icon-button svg,
.topbar-button svg {
  width: 20px;
  height: 20px;
}

.icon-button:hover:not(:disabled) {
  background: #eef5fc;
  color: var(--ui-blue);
}

.icon-button:disabled {
  color: #b8c1cc;
  cursor: not-allowed;
}

.topbar-actions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.topbar-export-action {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.topbar-button {
  gap: 10px;
  min-height: 46px;
  border-radius: 11px;
  padding: 0 15px 0 11px;
  font-size: 0.84rem;
  font-weight: 760;
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-shadow: none;
  box-shadow: 0 3px 9px rgba(31, 48, 67, 0.09);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.topbar-action-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(15, 31, 49, 0.16));
}

.topbar-button.is-import {
  border-color: #b9cff1;
  background: linear-gradient(180deg, #f7faff 0%, #edf3fd 100%);
  color: #172334;
}

.topbar-button.is-export,
.topbar-button.is-primary.is-export {
  border-color: #bdd6a9;
  background: linear-gradient(180deg, #f3f9ec 0%, #e7f1de 100%);
  color: #172334;
  box-shadow: 0 3px 9px rgba(72, 126, 43, 0.1);
}

.topbar-button.is-account {
  border-color: #efd283;
  background: linear-gradient(180deg, #fff9e3 0%, #fff2c9 100%);
  color: #172334;
  box-shadow: 0 3px 9px rgba(171, 125, 13, 0.1);
}

.topbar-button.is-upgrade {
  border-color: #315fc1;
  background: linear-gradient(180deg, #477be0 0%, #2d5fc8 100%);
  color: #ffffff;
  box-shadow: 0 4px 11px rgba(37, 84, 180, 0.24);
}

.topbar-button.is-upgrade[hidden] {
  display: none;
}

.topbar-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.topbar-button.is-import:hover:not(:disabled) {
  border-color: #91b2e6;
  background: linear-gradient(180deg, #f0f6ff 0%, #e1ecfc 100%);
  box-shadow: 0 5px 13px rgba(58, 103, 174, 0.17);
}

.topbar-button.is-export:hover:not(:disabled),
.topbar-button.is-primary.is-export:hover:not(:disabled) {
  border-color: #9fc681;
  background: linear-gradient(180deg, #edf7e5 0%, #dceccb 100%);
  box-shadow: 0 5px 13px rgba(72, 126, 43, 0.16);
}

.topbar-button.is-account:hover:not(:disabled) {
  border-color: #e4bd54;
  background: linear-gradient(180deg, #fff5d4 0%, #ffe9ad 100%);
  box-shadow: 0 5px 13px rgba(171, 125, 13, 0.16);
}

.topbar-button.is-upgrade:hover:not(:disabled) {
  border-color: #244fae;
  background: linear-gradient(180deg, #5689e8 0%, #234fae 100%);
  box-shadow: 0 7px 16px rgba(37, 84, 180, 0.32);
}

.topbar-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(31, 48, 67, 0.16);
}

.topbar-button:focus-visible {
  outline: 3px solid rgba(18, 103, 213, 0.3);
  outline-offset: 2px;
}

.topbar-button:disabled {
  cursor: wait;
  filter: saturate(0.55);
  opacity: 0.68;
}

@media (max-width: 1550px) {
  .topbar-button {
    width: 48px;
    min-width: 48px;
    padding: 0;
    font-size: 0;
  }

  .account-button > #account-button-label,
  .account-plan-badge {
    display: none;
  }
}

#map {
  position: absolute;
  z-index: 1;
  inset: var(--topbar-height) 0 var(--statusbar-height) var(--rail-width);
  width: auto;
  height: auto;
}

.leaflet-background-map {
  position: absolute;
  z-index: 0;
  inset: var(--topbar-height) 0 var(--statusbar-height) var(--rail-width);
  overflow: hidden;
  background: #e5e7eb;
  pointer-events: none;
}

.leaflet-background-map[hidden],
.background-map-attribution[hidden] {
  display: none;
}

.background-map-attribution {
  position: absolute;
  z-index: 6;
  right: 7px;
  bottom: calc(var(--statusbar-height) + 5px);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.88);
  color: #334155;
  padding: 2px 5px;
  font-size: 0.62rem;
  line-height: 1.25;
}

.background-map-attribution a {
  color: #245f9f;
  text-decoration: none;
}

.background-map-attribution a:hover,
.background-map-attribution a:focus-visible {
  text-decoration: underline;
}

.tool-rail {
  position: absolute;
  z-index: 90;
  top: var(--topbar-height);
  bottom: var(--statusbar-height);
  left: 0;
  width: var(--rail-width);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ui-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 253, 0.98));
  box-shadow: 4px 0 18px rgba(32, 58, 85, 0.045);
  padding: 10px 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.tool-rail-button {
  position: relative;
  display: grid;
  min-height: 64px;
  place-items: center;
  align-content: center;
  gap: 1px;
  border: 0;
  background: transparent;
  color: #536174;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 650;
  padding: 4px 3px;
  transition: background-color 160ms ease, color 160ms ease;
}

.tool-rail-button::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  content: '';
}

.tool-rail-icon-frame {
  display: grid;
  width: 46px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.tool-rail-icon {
  display: block;
  width: 41px;
  height: 41px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(30, 50, 70, 0.12));
  transition: transform 160ms ease, filter 160ms ease;
}

.tool-rail-label {
  line-height: 1.02;
}

.tool-rail-button:hover {
  background: rgba(235, 244, 253, 0.72);
  color: #244662;
}

.tool-rail-button:hover .tool-rail-icon-frame {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  transform: translateY(-1px);
}

.tool-rail-button:focus-visible {
  outline: 2px solid rgba(18, 103, 213, 0.72);
  outline-offset: -3px;
}

.tool-rail-button.is-active {
  background: linear-gradient(90deg, #e8f3ff 0%, #f6faff 100%);
  color: var(--ui-blue);
}

.tool-rail-button.is-active .tool-rail-icon-frame {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.tool-rail-button.is-active .tool-rail-icon {
  filter: drop-shadow(0 2px 2px rgba(26, 65, 102, 0.16));
  transform: scale(1.04);
}

.tool-rail-button.is-active::before {
  background: var(--ui-blue);
}

.tool-panel,
.dataset-panel,
.legend-panel,
.labels-panel,
.page-panel,
.display-panel {
  position: absolute;
  z-index: 80;
  top: calc(var(--topbar-height) + 10px) !important;
  bottom: auto;
  left: calc(var(--rail-width) + 10px) !important;
  width: min(calc(var(--panel-width) - 10px), calc(100vw - var(--rail-width) - 20px)) !important;
  height: fit-content;
  max-height: calc(100vh - var(--topbar-height) - var(--statusbar-height) - 20px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  border: 1px solid #cbd9e7;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 15px 38px rgba(28, 51, 75, 0.2);
  padding: 0;
  overflow: hidden;
  touch-action: auto;
  backdrop-filter: blur(10px);
}

.tool-panel[hidden] {
  display: none;
}

[data-tool-panel='data'] { --tool-panel-icon: url('./new-icons/import-excel.svg'); }
[data-tool-panel='statistics'] { --tool-panel-icon: url('./new-icons/statistics-data.svg'); }
[data-tool-panel='map-types'] { --tool-panel-icon: url('./new-icons/map-types.svg'); }
[data-tool-panel='colour'] { --tool-panel-icon: url('./new-icons/territories.svg'); }
[data-tool-panel='thematic'] { --tool-panel-icon: url('./new-icons/thematic.svg'); }
[data-tool-panel='circles'] { --tool-panel-icon: url('./new-icons/circles.svg'); }
[data-tool-panel='travel'] { --tool-panel-icon: url('./new-icons/travel-areas.svg'); }
[data-tool-panel='dots'] { --tool-panel-icon: url('./new-icons/dots.svg'); }
[data-tool-panel='locations'] { --tool-panel-icon: url('./new-icons/locations.svg'); }
[data-tool-panel='points'] { --tool-panel-icon: url('./new-icons/locations.svg'); }
[data-tool-panel='inset'] { --tool-panel-icon: url('./new-icons/inset.svg'); }
[data-tool-panel='images'] { --tool-panel-icon: url('./new-icons/images.svg'); }
[data-tool-panel='tables'] { --tool-panel-icon: url('./new-icons/tables.svg'); }
[data-tool-panel='labels'] { --tool-panel-icon: url('./new-icons/labels.svg'); }
[data-tool-panel='page'] { --tool-panel-icon: url('./new-icons/page.svg'); }
[data-tool-panel='display'] { --tool-panel-icon: url('./new-icons/display.svg'); }

.tool-panel-header {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #cbddec;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(135deg, #e7f2fc 0%, #f3f8fd 100%);
  box-shadow: inset 4px 0 0 #6ca7df;
  padding: 14px 17px;
}

.tool-panel-header::before {
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  background: var(--tool-panel-icon) center / contain no-repeat;
  content: '';
  filter: drop-shadow(0 2px 2px rgba(26, 65, 102, 0.14));
}

.tool-panel-header > div {
  min-width: 0;
  flex: 1 1 auto;
}

.tool-panel-header h2,
.legend-header h2 {
  margin: 2px 0 0;
  color: #172334;
  font-size: 1.12rem;
  line-height: 1.2;
}

.tool-panel-eyebrow {
  color: #4678a7;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.tool-panel-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(93, 132, 170, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  color: #6c7888;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(31, 57, 82, 0.04);
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.tool-panel-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-panel-close:hover {
  border-color: rgba(65, 97, 127, 0.3);
  background: #fff;
  color: #1d2b3c;
  box-shadow: 0 3px 8px rgba(31, 57, 82, 0.1);
  transform: translateY(-1px);
}

.tool-panel-close:focus-visible {
  outline: 2px solid rgba(18, 103, 213, 0.72);
  outline-offset: 2px;
}

.tool-panel-close:active {
  transform: translateY(0);
}

.tool-panel-content {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow-y: auto;
  padding: 16px;
}

.thematic-panel-content {
  gap: 11px;
  scrollbar-gutter: stable;
}

.thematic-card,
.thematic-preview-card {
  display: grid;
  gap: 10px;
  border: 1px solid #d5e1ed;
  border-radius: 11px;
  background: #fbfdff;
  padding: 12px;
}

.thematic-card-heading {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
}

.thematic-step {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #3776c8, #27589c);
  box-shadow: 0 3px 8px rgba(37, 88, 156, 0.2);
  color: #fff;
  font-size: 0.79rem;
  font-weight: 800;
}

.thematic-card h3 {
  margin: 1px 0 0;
  color: #1e2c3d;
  font-size: 0.88rem;
}

.thematic-card-heading p,
.thematic-inline-help,
.thematic-dataset-summary,
.thematic-status {
  margin: 2px 0 0;
  color: #66768a;
  font-size: 0.69rem;
  line-height: 1.4;
}

.thematic-import-button {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px dashed #8fb3d8;
  border-radius: 9px;
  background: #fff;
  color: #285f9f;
  cursor: pointer;
  padding: 8px 12px;
}

.thematic-import-button:hover { border-color: #3677bd; background: #eef6ff; }
.thematic-import-button svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.thematic-import-button span { display: grid; text-align: left; }
.thematic-import-button strong { font-size: 0.77rem; }
.thematic-import-button small { color: #718096; font-size: 0.65rem; font-weight: 500; }

.thematic-field {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #405268;
  font-size: 0.7rem;
  font-weight: 700;
}

.thematic-field > span small { color: #7b8998; font-weight: 500; }
.thematic-field input[type='text'] {
  min-width: 0;
  height: 34px;
  border: 1px solid #c7d5e3;
  border-radius: 7px;
  background: #fff;
  color: #243448;
  padding: 0 9px;
  font: inherit;
  font-weight: 500;
}

.thematic-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.thematic-two-column[hidden] { display: none; }

.thematic-palette-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.thematic-palette-button {
  display: grid;
  gap: 5px;
  border: 1px solid #cad7e5;
  border-radius: 8px;
  background: #fff;
  color: #45566b;
  cursor: pointer;
  padding: 7px;
  text-align: left;
}
.thematic-palette-button:hover { border-color: #79a6d3; background: #f5faff; }
.thematic-palette-button.is-selected { border-color: #2c70ba; box-shadow: 0 0 0 2px rgba(44, 112, 186, 0.13); color: #1d4f85; }
.thematic-palette-strip { height: 10px; display: flex; overflow: hidden; border-radius: 4px; }
.thematic-palette-strip i { flex: 1; }
.thematic-palette-button span:last-child { overflow: hidden; font-size: 0.67rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.thematic-check-row { display: flex; align-items: center; gap: 7px; color: #53657a; font-size: 0.7rem; }
.thematic-check-row input { accent-color: #2c70ba; }

.thematic-preview-card { background: linear-gradient(145deg, #f5f9fd, #fff); }
.thematic-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #26374b; font-size: 0.77rem; }
.thematic-preview-heading span { color: #6b7a8d; font-size: 0.67rem; }
.thematic-class-preview { display: grid; gap: 4px; }
.thematic-class-row { display: grid; grid-template-columns: 17px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 25px; border-bottom: 1px solid #e5edf5; color: #33465b; font-size: 0.7rem; }
.thematic-class-row:last-child { border-bottom: 0; }
.thematic-class-swatch { width: 17px; height: 17px; border: 1px solid rgba(15, 23, 42, 0.16); border-radius: 4px; }
.thematic-class-row small { color: #7a8999; font-size: 0.64rem; }
.thematic-status.is-error { color: #b42318; font-weight: 650; }

.thematic-actions { display: grid; gap: 8px; }
.thematic-build-note {
  margin: -1px 4px 1px;
  color: #6b7a8d;
  font-size: 0.66rem;
  line-height: 1.4;
  text-align: center;
}
.thematic-apply-button {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, #347ac3, #27599e);
  box-shadow: 0 5px 13px rgba(39, 89, 158, 0.22);
  color: #fff;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
}
.thematic-apply-button:disabled { background: #c7d1dc; box-shadow: none; cursor: not-allowed; }
.thematic-remove-button { border-color: #f3b6b6; color: #a82323; }

@media (max-width: 430px) {
  .thematic-two-column,
  .thematic-palette-grid { grid-template-columns: 1fr; }
}

.legend-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.legend-panel-content {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}

.colouring-mode-panel {
  display: grid;
  min-height: 116px;
  align-content: center;
  gap: 7px;
  margin: 2px 12px 5px;
  border: 1px solid #c5d9ea;
  border-radius: 10px;
  background: linear-gradient(145deg, #f1f7fc, #f8fbfe);
  box-shadow: 0 3px 9px rgba(44, 75, 105, 0.06);
  padding: 13px 12px;
}

.colouring-mode-panel label {
  display: grid;
  gap: 6px;
}

.colouring-mode-panel strong {
  color: #263548;
  font-size: 0.78rem;
}

.colouring-mode-panel p {
  margin: 0;
  color: #657386;
  font-size: 0.7rem;
  line-height: 1.35;
}

.bulk-selection-panel {
  display: grid;
  min-height: 164px;
  align-content: center;
  gap: 8px;
  margin: 0 12px 10px;
  border: 1px solid #cddcea;
  border-radius: 10px;
  background: linear-gradient(145deg, #f7fafd, #ffffff);
  box-shadow: 0 3px 9px rgba(44, 75, 105, 0.06);
  padding: 13px 12px;
}

.bulk-selection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bulk-selection-heading strong {
  color: #263548;
  font-size: 0.78rem;
}

.bulk-selection-heading span,
.bulk-selection-panel p {
  margin: 0;
  color: #657386;
  font-size: 0.7rem;
  line-height: 1.35;
}

.coloured-areas-visibility-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 12px 10px;
  border: 1px solid #c7dcec;
  border-radius: 10px;
  background: linear-gradient(145deg, #f3f8fc, #ffffff);
  padding: 11px 12px;
}

.coloured-areas-visibility-panel > div {
  min-width: 0;
}

.coloured-areas-visibility-panel strong {
  display: block;
  color: #263548;
  font-size: 0.78rem;
}

.coloured-areas-visibility-panel p {
  margin: 3px 0 0;
  color: #657386;
  font-size: 0.68rem;
  line-height: 1.35;
}

.coloured-areas-visibility-panel.is-active {
  border-color: #8ebde6;
  background: linear-gradient(145deg, #eaf4ff, #f8fbff);
  box-shadow: inset 3px 0 #1267d5;
}

.coloured-areas-visibility-panel.is-unavailable {
  border-color: #dce4ec;
  background: #f8fafc;
  opacity: 0.72;
}

.coloured-areas-visibility-panel .switch-row {
  flex: 0 0 auto;
}

.switch-row:has(input:disabled) {
  cursor: not-allowed;
}

.switch-row input:disabled + span {
  background: #e2e8f0;
  box-shadow: inset 0 0 0 1px #cbd5e1;
}

.bulk-selection-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid #cbd7e4;
  border-radius: 7px;
}

.bulk-selection-modes button {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-right: 1px solid #cbd7e4;
  background: #ffffff;
  color: #526170;
  cursor: pointer;
  padding: 5px 4px;
  font-size: 0.72rem;
  font-weight: 700;
}

.bulk-selection-modes button img {
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  object-fit: contain;
}

.bulk-selection-modes button:last-child {
  border-right: 0;
}

.bulk-selection-modes button.is-active {
  background: #e7f2ff;
  color: var(--ui-blue-dark);
  box-shadow: inset 0 -3px 0 var(--ui-blue);
}

.bulk-selection-box {
  border: 2px dashed #1267d5;
  background: rgba(18, 103, 213, 0.1);
}

.inset-map-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.inset-map-overlay {
  position: absolute;
  overflow: visible;
  box-sizing: border-box;
  background: var(--inset-map-background, #d9f3f6);
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.28);
  pointer-events: auto;
  touch-action: none;
}

.inset-map-overlay::after {
  content: '';
  position: absolute;
  z-index: 4;
  inset: 0;
  box-sizing: border-box;
  border: var(--inset-map-border-width, 2px) solid var(--inset-map-border, #334155);
  pointer-events: none;
}

.inset-map-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--inset-map-background, #d9f3f6);
  cursor: grab;
  touch-action: none;
}

.inset-map-viewport:active {
  cursor: grabbing;
}

.inset-map-viewport:focus-visible {
  outline: 3px solid #1267d5;
  outline-offset: -3px;
}

.inset-map-drag-handle {
  position: absolute;
  z-index: 5;
  top: 6px;
  left: 50%;
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(15, 23, 42, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.24);
  color: #263548;
  cursor: grab;
  font: 700 0.7rem/1 system-ui, sans-serif;
  padding: 6px 9px;
  transform: translateX(-50%);
  white-space: nowrap;
  touch-action: none;
}

.inset-map-drag-handle output {
  min-width: auto;
  color: #526170;
  font-size: 0.66rem;
}

.inset-map-layer.is-editing .inset-map-overlay {
  outline: 2px solid #1267d5;
  outline-offset: 2px;
}

.inset-map-layer.is-editing .inset-map-drag-handle {
  display: inline-flex;
}

.inset-map-overlay.is-moving .inset-map-drag-handle {
  cursor: grabbing;
}

.inset-map-resize-handle {
  position: absolute;
  z-index: 6;
  display: none;
  width: 11px;
  height: 11px;
  border: 1px solid #1267d5;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.32);
  pointer-events: auto;
}

.inset-map-layer.is-editing .inset-map-resize-handle { display: block; }
.inset-map-resize-handle.is-n,
.inset-map-resize-handle.is-s { left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.inset-map-resize-handle.is-e,
.inset-map-resize-handle.is-w { top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.inset-map-resize-handle.is-n { top: -7px; }
.inset-map-resize-handle.is-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.inset-map-resize-handle.is-e { right: -7px; }
.inset-map-resize-handle.is-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.inset-map-resize-handle.is-s { bottom: -7px; }
.inset-map-resize-handle.is-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.inset-map-resize-handle.is-w { left: -7px; }
.inset-map-resize-handle.is-nw { top: -7px; left: -7px; cursor: nwse-resize; }

#app.is-pdf-reviewing .inset-map-overlay {
  outline: 0;
  box-shadow: none;
  pointer-events: none;
}

#app.is-pdf-reviewing .inset-map-drag-handle,
#app.is-pdf-reviewing .inset-map-resize-handle {
  display: none;
}

.inset-map-empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  border: 1px solid #cfe0ee;
  border-radius: 10px;
  background: #f3f8fc;
  padding: 14px;
}

.inset-map-empty strong {
  color: #223247;
  font-size: 0.9rem;
}

.inset-map-empty span {
  color: #5f7083;
  font-size: 0.76rem;
  line-height: 1.4;
}

.inset-map-controls {
  display: grid;
  gap: 14px;
}

.inset-map-controls[hidden],
.inset-map-empty[hidden] {
  display: none;
}

.inset-map-action-grid,
.inset-label-category-grid,
.inset-overlay-label-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.inset-switch-row {
  justify-self: start;
}

.inset-border-control {
  grid-template-columns: 36px minmax(0, 1fr);
}

.page-image-layer {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-image-overlay {
  position: absolute;
  overflow: visible;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.page-image-layer.is-editing .page-image-overlay {
  cursor: move;
}

.page-image-layer.is-editing .page-image-overlay.is-selected {
  outline: 2px solid #1267d5;
  outline-offset: 2px;
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.28);
}

.page-image-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: transparent;
}

.page-image-overlay::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  box-sizing: border-box;
  border: var(--page-image-frame-width, 0px) solid var(--page-image-frame-colour, #334155);
  pointer-events: none;
}

.page-image-viewport img {
  position: absolute;
  z-index: 0;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.page-image-resize-handle {
  position: absolute;
  z-index: 2;
  display: none;
  width: 10px;
  height: 10px;
  border: 1px solid #1267d5;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.32);
}

.page-image-layer.is-editing .page-image-overlay.is-selected .page-image-resize-handle {
  display: block;
}

.page-image-resize-handle[data-resize-direction="n"],
.page-image-resize-handle[data-resize-direction="s"] {
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.page-image-resize-handle[data-resize-direction="e"],
.page-image-resize-handle[data-resize-direction="w"] {
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.page-image-resize-handle[data-resize-direction="n"] { top: -6px; }
.page-image-resize-handle[data-resize-direction="ne"] { top: -6px; right: -6px; cursor: nesw-resize; }
.page-image-resize-handle[data-resize-direction="e"] { right: -6px; }
.page-image-resize-handle[data-resize-direction="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
.page-image-resize-handle[data-resize-direction="s"] { bottom: -6px; }
.page-image-resize-handle[data-resize-direction="sw"] { bottom: -6px; left: -6px; cursor: nesw-resize; }
.page-image-resize-handle[data-resize-direction="w"] { left: -6px; }
.page-image-resize-handle[data-resize-direction="nw"] { top: -6px; left: -6px; cursor: nwse-resize; }

#app.is-pdf-reviewing .page-image-overlay {
  outline: 0;
  box-shadow: none;
  pointer-events: none;
}

#app.is-pdf-reviewing .page-image-resize-handle {
  display: none;
}

.page-image-drop-zone {
  display: grid;
  justify-items: center;
  gap: 6px;
  border: 2px dashed #b9c8d8;
  border-radius: 10px;
  background: #f8fbfe;
  color: #536579;
  cursor: pointer;
  padding: 16px 12px;
  text-align: center;
}

.page-image-drop-zone strong {
  color: #223247;
  font-size: 0.86rem;
}

.page-image-drop-zone span {
  font-size: 0.72rem;
}

.page-image-drop-zone:hover,
.page-image-drop-zone:focus-visible,
.page-image-drop-zone.is-dragging {
  border-color: #1267d5;
  background: #edf5ff;
  outline: none;
}

.page-image-drop-zone.is-disabled {
  cursor: default;
  opacity: 0.58;
}

.page-image-count-row {
  display: grid;
  gap: 2px;
  color: #66768a;
  font-size: 0.7rem;
}

.page-image-count-row strong {
  color: #2c3c50;
  font-size: 0.78rem;
}

.page-image-list {
  display: grid;
  gap: 7px;
}

.page-image-empty {
  margin: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #718094;
  font-size: 0.75rem;
  padding: 12px;
  text-align: center;
}

.page-image-list-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #dbe4ee;
  border-radius: 9px;
  background: #ffffff;
  cursor: pointer;
  padding: 7px;
}

.page-image-list-item.is-selected {
  border-color: #1267d5;
  background: #eef6ff;
  box-shadow: 0 0 0 1px rgba(18, 103, 213, 0.14);
}

.page-image-list-thumbnail {
  width: 44px;
  height: 36px;
  object-fit: cover;
  border: 1px solid #d5dee8;
  border-radius: 5px;
  background: #ffffff;
}

.page-image-list-name {
  min-width: 0;
  overflow: hidden;
  color: #263548;
  font-size: 0.75rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-image-list-visibility {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #526170;
  font-size: 0.68rem;
}

.page-image-editor {
  display: grid;
  gap: 11px;
}

.page-image-frame-controls {
  display: grid;
  gap: 12px;
  border-top: 1px solid #dbe5ee;
  padding-top: 12px;
}

.map-frame-controls,
.map-frame-style-controls {
  display: grid;
  gap: 11px;
}

.map-frame-controls {
  border-top: 1px solid #dbe5ee;
  padding-top: 11px;
}

.map-frame-controls[hidden],
.map-frame-style-controls[hidden] {
  display: none;
}

.page-image-editor[hidden] {
  display: none;
}

.page-image-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.page-image-remove {
  border-color: #fecaca;
  color: #a51d2d;
}

.page-table-layer {
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.page-table-overlay {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--page-table-border, #64748b);
  background: var(--page-table-body, #fff);
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.24);
  color: var(--page-table-text, #17212b);
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.page-table-layer.is-editing .page-table-overlay {
  cursor: grab;
  pointer-events: auto;
}

.page-table-layer.is-editing .page-table-overlay.is-selected {
  outline: 2px solid #1b6f9f;
  outline-offset: 2px;
}

.page-table-caption {
  overflow: hidden;
  padding: 0.35em 0.6em;
  background: var(--page-table-header, #1f4e78);
  color: var(--page-table-header-text, #fff);
  font-size: 1.12em;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-table-grid {
  width: 100%;
  height: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font: inherit;
}

.page-table-grid th,
.page-table-grid td {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--page-table-border, #64748b);
  padding: 0.18em 0.45em;
  line-height: 1.15;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-table-grid th {
  background: var(--page-table-header, #1f4e78);
  color: var(--page-table-header-text, #fff);
  font-weight: 700;
}

.page-table-grid tbody tr:nth-child(odd) td { background: var(--page-table-body, #fff); }
.page-table-grid tbody tr:nth-child(even) td { background: var(--page-table-stripe, #eef4f8); }

.page-table-resize-handle {
  position: absolute;
  z-index: 4;
  width: 10px;
  height: 10px;
  display: none;
  border: 1px solid #1b6f9f;
  border-radius: 50%;
  background: #fff;
}

.page-table-layer.is-editing .page-table-overlay.is-selected .page-table-resize-handle { display: block; }
.page-table-resize-handle[data-resize-direction="n"],
.page-table-resize-handle[data-resize-direction="s"] { left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.page-table-resize-handle[data-resize-direction="e"],
.page-table-resize-handle[data-resize-direction="w"] { top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.page-table-resize-handle[data-resize-direction="n"] { top: -5px; }
.page-table-resize-handle[data-resize-direction="ne"] { top: -5px; right: -5px; cursor: nesw-resize; }
.page-table-resize-handle[data-resize-direction="e"] { right: -5px; }
.page-table-resize-handle[data-resize-direction="se"] { right: -5px; bottom: -5px; cursor: nwse-resize; }
.page-table-resize-handle[data-resize-direction="s"] { bottom: -5px; }
.page-table-resize-handle[data-resize-direction="sw"] { bottom: -5px; left: -5px; cursor: nesw-resize; }
.page-table-resize-handle[data-resize-direction="w"] { left: -5px; }
.page-table-resize-handle[data-resize-direction="nw"] { top: -5px; left: -5px; cursor: nwse-resize; }

#app.is-pdf-reviewing .page-table-overlay { outline: 0; box-shadow: none; pointer-events: none; }
#app.is-pdf-reviewing .page-table-resize-handle { display: none; }

.page-table-colour-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.page-table-colour-grid label {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #475569;
  font-size: 0.76rem;
}

.page-table-colour-grid input { width: 30px; height: 28px; border: 0; padding: 0; }
.page-table-import-dialog { width: min(1180px, calc(100vw - 48px)); }
.page-table-import-settings { display: grid; grid-template-columns: minmax(240px, 1fr) 150px 150px; gap: 12px; }
.page-table-column-heading { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 8px; color: #334155; font-size: 0.82rem; }
.page-table-column-heading span { color: #64748b; }
.page-table-column-list { display: flex; flex-wrap: wrap; gap: 7px; }
.page-table-column-option { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; color: #334155; cursor: grab; padding: 7px 9px; font-size: 0.8rem; }
.page-table-column-option.is-selected { border-color: #1b6f9f; background: #e7f3fa; }
.page-table-column-option.is-dragging { opacity: 0.42; }
.page-table-column-option input { margin: 0; accent-color: #1b6f9f; }
.page-table-preview-wrap { max-height: 320px; }

.location-key-table-layer {
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.location-key-table-overlay {
  position: absolute;
  overflow: hidden;
  border: 1px solid #64748b;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.24);
  color: #17212b;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.location-key-table-layer.is-editing .location-key-table-overlay { cursor: grab; }
.location-key-table-layer.is-editing .location-key-table-overlay.is-selected { outline: 2px solid #1b6f9f; outline-offset: 2px; }
.location-key-table-title { height: 1.95em; display: flex; align-items: center; overflow: hidden; background: #1f4e78; color: #fff; font-size: 1.12em; font-weight: 750; padding: 0 0.55em; text-overflow: ellipsis; white-space: nowrap; }
.location-key-table-overlay table { width: 100%; height: calc(100% - 1.95em); table-layout: auto; border-collapse: collapse; font: inherit; }
.location-key-table-overlay th,
.location-key-table-overlay td { overflow: hidden; border: 1px solid #64748b; padding: 0.16em 0.4em; line-height: 1.12; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.location-key-table-overlay th { background: #e2e8f0; font-weight: 700; }
.location-key-table-overlay th:first-child,
.location-key-table-overlay td:first-child { width: 1%; white-space: nowrap; }
.location-key-id-cell { background: var(--location-colour); color: var(--location-text); font-weight: 700; }
.location-key-table-layer.is-editing .location-key-table-overlay.is-selected .page-table-resize-handle { display: block; }
#app.is-pdf-reviewing .location-key-table-overlay { outline: 0; box-shadow: none; pointer-events: none; }
#app.is-pdf-reviewing .location-key-table-overlay .page-table-resize-handle { display: none; }
.location-key-column-selectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.location-key-header-option { margin-bottom: 14px; }
#location-key-controls[hidden] { display: none; }
.location-key-preview-table .is-location-id { background: #ede9fe; }
.location-key-preview-table .is-location-postcode { background: #dbeafe; }
.location-key-preview-table .is-location-label { background: #dcfce7; }
.location-key-preview-table .is-location-colour { background: #ffedd5; }

@media (max-width: 760px) {
  .page-table-import-settings { grid-template-columns: 1fr; }
  .location-key-column-selectors { grid-template-columns: 1fr 1fr; }
}

.import-quality-card {
  display: grid;
  gap: 10px;
  border: 1px solid #cddbea;
  border-radius: 9px;
  background: #f8fafc;
  padding: 11px;
}

.territory-data-card {
  display: grid;
  gap: 10px;
  border: 1px solid #d8e3ee;
  border-radius: 10px;
  background: #f8fafc;
  padding: 11px;
}

.territory-data-card .control-group-header h3 {
  margin: 0;
  color: #263548;
  font-size: 0.86rem;
}

.territory-data-card .control-group-header p {
  margin: 2px 0 0;
  color: #657386;
  font-size: 0.72rem;
}

.metrics-drop-zone {
  display: grid;
  gap: 4px;
  border: 1.5px dashed #9cb4cc;
  border-radius: 9px;
  background: #ffffff;
  color: #526170;
  cursor: pointer;
  padding: 13px;
  text-align: center;
}

.metrics-drop-zone:hover,
.metrics-drop-zone:focus-visible,
.metrics-drop-zone.is-dragging {
  border-color: var(--ui-blue);
  background: #edf5ff;
  outline: none;
}

.metrics-drop-zone strong {
  color: #263548;
  font-size: 0.78rem;
}

.metrics-drop-zone span {
  font-size: 0.69rem;
  line-height: 1.35;
}

.metrics-drop-zone .dataset-button {
  justify-self: center;
  margin-top: 4px;
  padding: 7px 12px;
  font-size: 0.72rem;
}

.metrics-active-controls {
  display: grid;
  gap: 9px;
}

.metrics-active-controls[hidden] {
  display: none;
}

.metrics-dataset-summary {
  margin: 0;
  color: #657386;
  font-size: 0.7rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.metrics-territory-totals {
  max-height: 210px;
  display: grid;
  overflow-y: auto;
  border: 1px solid #e0e7ef;
  border-radius: 8px;
  background: #ffffff;
}

.metrics-total-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #edf1f5;
  padding: 7px 8px;
  font-size: 0.7rem;
}

.metrics-total-row:last-child {
  border-bottom: 0;
}

.metrics-total-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 3px;
}

.metrics-total-row > span:nth-child(2) {
  overflow: hidden;
  color: #526170;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metrics-total-row strong {
  color: #172334;
  font-variant-numeric: tabular-nums;
}

.metrics-remove-button {
  border-color: #fecaca;
  background: #fffafa;
  color: #b91c1c;
}

.metrics-column-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.3fr);
  align-items: start;
  gap: 14px;
}

.metrics-column-fieldset {
  min-width: 0;
  margin: 0;
  border: 1px solid #d8e2ec;
  border-radius: 9px;
  padding: 9px;
}

.metrics-column-fieldset legend {
  color: #334155;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0 5px;
}

.metrics-column-list {
  max-height: 190px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  overflow-y: auto;
}

.metrics-column-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px 7px;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #ffffff;
  padding: 7px;
  font-size: 0.75rem;
}

.metrics-column-option input {
  grid-row: 1 / span 2;
}

.metrics-column-option span {
  overflow: hidden;
  color: #263548;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metrics-column-option small {
  color: #718094;
  font-size: 0.66rem;
}

.metrics-column-option:has(input:checked) {
  border-color: #86b5e8;
  background: #edf5ff;
}

.metrics-column-option:has(input:disabled) {
  opacity: 0.58;
}

.metrics-preview-table .is-metrics-postcode-column {
  background: #e0f2fe;
  box-shadow: inset 3px 0 0 #0284c7;
}

.metrics-preview-table .is-metrics-data-column {
  background: #f0fdf4;
  box-shadow: inset 3px 0 0 #16a34a;
}

.import-quality-card[hidden] {
  display: none;
}

.import-quality-card > div:first-child {
  display: grid;
  gap: 3px;
}

.import-quality-card strong {
  color: #263548;
  font-size: 0.8rem;
}

.import-quality-card span {
  color: #657386;
  font-size: 0.73rem;
  line-height: 1.4;
}

.import-quality-actions {
  display: flex;
  gap: 7px;
}

.import-quality-actions .dataset-button {
  flex: 1 1 0;
  padding: 7px 8px;
  font-size: 0.72rem;
}

.import-quality-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 13px;
}

.import-quality-metric {
  display: grid;
  gap: 2px;
  border: 1px solid #dce5ef;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.import-quality-metric strong {
  color: #172334;
  font-size: 1rem;
}

.import-quality-metric span {
  color: #657386;
  font-size: 0.72rem;
}

.import-quality-table th:nth-child(1),
.import-quality-table td:nth-child(1) {
  width: 90px;
  min-width: 90px;
}

.import-quality-table th:nth-child(5),
.import-quality-table td:nth-child(5) {
  width: 360px;
  min-width: 280px;
  white-space: normal;
}

.legend-header {
  cursor: default;
}

.legend-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 9px 12px;
  color: var(--ui-muted);
  font-size: 0.74rem;
}

.legend-summary-row strong {
  color: #263548;
}

.legend-group-total {
  flex: 0 0 auto;
  white-space: nowrap;
}

.legend-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.clear-legend-selection-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: #b8c7d8;
  background: #ffffff;
  color: #45566a;
  padding: 6px 8px;
  font-size: 0.7rem;
}

.clear-legend-selection-button img,
.add-name-button img {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  object-fit: contain;
}

.clear-legend-selection-button:hover {
  border-color: #8ca4bd;
  background: #f3f7fb;
}

.clear-legend-selection-button[hidden] {
  display: none;
}

.circle-postcode-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

#circles-panel {
  width: min(410px, calc(100vw - var(--rail-width) - 20px)) !important;
}

.circle-panel-header {
  min-height: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 11px;
  padding: 15px 17px 13px;
}

.circle-panel-header::before {
  grid-column: 1;
  grid-row: 1;
  width: 48px;
  height: 48px;
  align-self: center;
}

.circle-panel-heading {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  align-self: center;
}

.circle-panel-heading > .tool-panel-eyebrow {
  display: block;
}

.circle-panel-heading > h2 {
  margin-top: 3px;
  white-space: nowrap;
}

.circle-panel-header > .tool-panel-actions {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}

.circle-panel-summary-row {
  grid-column: 1 / 4;
  grid-row: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}

.circle-panel-summary-row p {
  min-width: 0;
  margin: 0;
  color: #5d6b7d;
  font-size: 0.8rem;
  line-height: 22px;
}

.circle-panel-visibility {
  flex: 0 0 auto;
  margin: 0;
}

.circle-panel-visibility > span {
  width: 38px;
  height: 22px;
}

.circle-panel-visibility > span::after {
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
}

.circle-panel-visibility input:checked + span::after {
  transform: translateX(16px);
}

@media (max-width: 430px) {
  .circle-panel-heading > h2 {
    white-space: normal;
  }
}

.circle-panel-content {
  gap: 10px;
  padding: 12px;
}

.circle-panel-content > * {
  min-width: 0;
}

.circles-panel .circle-step-card {
  display: grid;
  min-width: 0;
  gap: 10px;
  border-color: #d8e2ee;
  background: #ffffff;
  padding: 11px;
}

.circle-step-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.circle-step-heading h3 {
  margin: 0;
  color: #172334;
  font-size: 0.94rem;
  line-height: 1.2;
}

.circle-step-number {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #4d6db7;
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 750;
}

.circle-centre-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.circle-centre-method {
  min-width: 0;
  min-height: 88px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 1px solid #cbd6e4;
  border-radius: 9px;
  background: #ffffff;
  color: #243448;
  padding: 8px 6px;
  cursor: pointer;
}

.circle-centre-method svg {
  width: 39px;
  height: 39px;
  overflow: visible;
  fill: none;
  stroke: #4d6db7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.circle-centre-method svg circle {
  fill: #ffffff;
}

.circle-centre-method .circle-map-lines {
  stroke: #80b978;
  stroke-width: 2.3;
}

.circle-centre-method span {
  font-size: 0.78rem;
  font-weight: 700;
}

.circle-centre-method:hover {
  border-color: #7d98ce;
  background: #f7f9fe;
}

.circle-centre-method.is-active {
  border-color: #4268b7;
  background: #f4f7fe;
  color: #365ca8;
  box-shadow: inset 0 0 0 1px #4268b7;
}

.circle-centre-method:focus-visible,
.circle-stepper button:focus-visible,
.circle-ring-style-swatch:focus-visible {
  outline: 3px solid rgba(66, 104, 183, 0.18);
  outline-offset: 2px;
}

.circle-search-field {
  min-width: 0;
  gap: 0;
}

.analysis-location-search {
  position: relative;
}

.circles-panel .circle-postcode-row {
  grid-template-columns: minmax(0, 1fr) 62px;
}

.circles-panel .circle-postcode-row input,
.circles-panel .circle-postcode-row button {
  width: 100%;
  min-width: 0;
}

.circle-postcode-row input {
  min-width: 0;
  border: 1px solid #cad5e2;
  border-radius: 8px;
  background: #ffffff;
  color: #172334;
  padding: 8px 10px;
}

.circle-postcode-row input:focus {
  outline: 3px solid rgba(18, 103, 213, 0.12);
  border-color: var(--ui-blue);
}

.analysis-location-results {
  position: absolute;
  z-index: 180;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #d7e0eb;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.2);
  padding: 5px;
}

.analysis-location-results[hidden] {
  display: none;
}

.analysis-location-result,
.analysis-location-message {
  width: 100%;
  display: grid;
  gap: 2px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 8px 9px;
  text-align: left;
}

.analysis-location-result {
  color: #172334;
  cursor: pointer;
}

.analysis-location-result:hover,
.analysis-location-result.is-active {
  background: #edf5ff;
}

.analysis-location-result strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-location-result span,
.analysis-location-message {
  color: #657386;
  font-size: 0.7rem;
}

.circle-place-button.is-active {
  border-color: #d97706;
  background: #fef3c7;
  color: #92400e;
}

.circle-centre-status {
  min-height: 1.25em;
  margin: 0;
  color: #657386;
  font-size: 0.75rem;
  line-height: 1.4;
}

.circle-centre-status.is-error {
  color: #b91c1c;
}

.circle-ring-editor-group {
  display: grid;
  gap: 8px;
}

.circle-ring-editor {
  display: grid;
  gap: 6px;
}

.circle-ring-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.circle-ring-colour {
  width: 30px;
  height: 30px;
  border: 1px solid #b9c7d6;
  border-radius: 7px;
  background: #ffffff;
  cursor: pointer;
  padding: 2px;
}

.circles-panel .circle-ring-editor-group {
  border: 1px solid #e0e7f0;
  border-radius: 9px;
  background: #f8fafc;
  padding: 9px;
}

.circles-panel .circle-ring-editor-group .control-group-header h3 {
  font-size: 0.78rem;
}

.circles-panel .circle-ring-editor-group .control-group-header p {
  margin-top: 2px;
  font-size: 0.67rem;
}

.circle-ring-style-swatch {
  width: 30px;
  height: 30px;
  border: 1px solid #aebdce;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
}

.circle-ring-label {
  width: 100%;
  min-width: 0;
  border: 1px solid #cad5e2;
  border-radius: 7px;
  background: #ffffff;
  color: #243448;
  padding: 7px 8px;
}

.circle-ring-label:focus,
.circle-ring-colour:focus-visible,
.circle-ring-style-swatch:focus-visible {
  outline: 3px solid rgba(18, 103, 213, 0.12);
  border-color: var(--ui-blue);
}

.circle-distance-sentence {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #243448;
  font-size: 0.72rem;
  white-space: nowrap;
}

.circle-stepper {
  display: grid;
  grid-template-columns: 25px 34px 25px;
  flex: 0 0 84px;
  overflow: hidden;
  border: 1px solid #cad5e2;
  border-radius: 8px;
  background: #ffffff;
}

.circle-stepper button,
.circle-stepper input {
  min-width: 0;
  height: 32px;
  border: 0;
  background: #ffffff;
  color: #243448;
  text-align: center;
}

.circle-stepper button {
  font-size: 1rem;
  cursor: pointer;
}

.circle-stepper button:hover {
  background: #edf3fb;
}

.circle-stepper input {
  width: 34px;
  border-right: 1px solid #d7e0eb;
  border-left: 1px solid #d7e0eb;
  font-size: 0.84rem;
  appearance: textfield;
  padding: 0;
}

.circle-stepper input::-webkit-outer-spin-button,
.circle-stepper input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.circle-apply-button {
  border-color: var(--ui-blue);
  background: var(--ui-blue);
  color: #ffffff;
  font-weight: 700;
  padding: 10px 12px;
}

.circle-colour-areas-button {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: normal;
}

.circle-colour-areas-button img {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}

.circles-panel .circle-clear-button {
  justify-self: center;
  border: 0;
  background: transparent;
  padding: 3px 8px;
}

.circles-panel .circle-help {
  margin: -3px 0 0;
  text-align: center;
}

/* Compact, flat distance-circle workflow */
#circles-panel {
  --circle-primary: var(--ui-blue, oklch(0.52 0.17 263));
  --circle-primary-soft: oklch(0.94 0.03 263);
  --circle-border: oklch(0.88 0.01 263);
  --circle-hairline: oklch(0.92 0.008 263);
  width: min(380px, calc(100vw - var(--rail-width) - 20px)) !important;
  min-width: min(280px, calc(100vw - var(--rail-width) - 20px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid oklch(0.9 0.008 263);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 3px oklch(0.2 0.02 263 / 0.08);
  color: oklch(0.22 0.01 263);
  overflow: hidden;
}

#circles-panel .circle-panel-header {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--circle-hairline);
  border-radius: 13px 13px 0 0;
  background: #ffffff;
  box-shadow: none;
  padding: 14px 16px;
}

#circles-panel .circle-panel-header::before {
  display: none;
}

.circle-panel-title-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  overflow: visible;
  fill: none;
  stroke-width: 2.5;
}

.circle-panel-title-icon-outer {
  stroke: oklch(0.94 0.03 263);
}

.circle-panel-title-icon-middle {
  stroke: var(--circle-primary);
}

.circle-panel-title-icon-centre {
  fill: var(--circle-primary);
  stroke: none;
}

#circles-panel .circle-panel-header > h2 {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  overflow: hidden;
  color: oklch(0.18 0.01 263);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#circles-panel .circle-panel-header > .tool-panel-actions {
  flex: 0 0 auto;
  gap: 6px;
  margin-left: auto;
}

#circles-panel .circle-panel-header .vm-tool-context-help,
#circles-panel .circle-panel-header .tool-panel-close {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-color: oklch(0.87 0.01 263);
  background: #ffffff;
  color: oklch(0.45 0.01 263);
  box-shadow: none;
  transform: none;
}

#circles-panel .circle-panel-header .vm-tool-context-help {
  border-radius: 50%;
}

#circles-panel .circle-panel-header .tool-panel-close {
  border-radius: 7px;
}

#circles-panel .circle-panel-header .vm-tool-context-help:hover,
#circles-panel .circle-panel-header .tool-panel-close:hover {
  border-color: var(--circle-primary);
  background: var(--circle-primary-soft);
  color: var(--circle-primary);
  box-shadow: none;
  transform: none;
}

#circles-panel .circle-panel-header .vm-panel-action-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.25;
}

#circles-panel .circle-panel-content {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 16px;
}

#circles-panel .circle-panel-content > * {
  min-width: 0;
  flex: 0 0 auto;
}

#circles-panel .circle-centre-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#circles-panel .circle-centre-method {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1.5px solid var(--circle-border);
  border-radius: 9px;
  background: #ffffff;
  color: oklch(0.35 0.01 263);
  box-shadow: none;
  padding: 11px 8px;
  cursor: pointer;
}

#circles-panel .circle-centre-method svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#circles-panel .circle-centre-method svg circle {
  fill: none;
}

#circles-panel .circle-centre-method span {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#circles-panel .circle-centre-method:hover {
  border-color: color-mix(in oklch, var(--circle-primary), white 35%);
  background: oklch(0.98 0.01 263);
}

#circles-panel .circle-centre-method.is-active {
  border-color: var(--circle-primary);
  background: var(--circle-primary-soft);
  color: var(--circle-primary);
  box-shadow: inset 0 0 0 0.5px var(--circle-primary);
}

#circles-panel .circle-centre-method:focus-visible,
#circles-panel .circle-stepper button:focus-visible,
#circles-panel .circle-ring-style-swatch:focus-visible,
#circles-panel .circle-centre-clear:focus-visible,
#circles-panel .circle-colour-areas-button:focus-visible,
#circles-panel .circle-action-undo:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--circle-primary), transparent 55%);
  outline-offset: 2px;
}

#circles-panel .circle-search-field,
#circles-panel .analysis-location-search {
  min-width: 0;
  display: block;
  position: relative;
}

#circles-panel .circle-search-field[hidden],
#circles-panel .circle-map-mode-help[hidden] {
  display: none;
}

#circles-panel .circle-postcode-row {
  min-width: 0;
  display: flex;
  gap: 8px;
}

#circles-panel .circle-postcode-row input {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  border: 1px solid oklch(0.85 0.01 263);
  border-radius: 9px;
  background: #ffffff;
  color: oklch(0.22 0.01 263);
  font: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
}

#circles-panel .circle-postcode-row input:focus {
  border-color: var(--circle-primary);
  outline: 2px solid color-mix(in oklch, var(--circle-primary), transparent 78%);
}

#circles-panel .circle-postcode-row button {
  width: auto;
  min-width: 62px;
  flex: 0 0 auto;
  border: 1px solid var(--circle-primary);
  border-radius: 9px;
  background: var(--circle-primary);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 16px;
}

#circles-panel .circle-postcode-row button:hover {
  filter: brightness(0.95);
}

#circles-panel .circle-map-mode-help {
  margin: 0;
  color: oklch(0.45 0.01 263);
  font-size: 13px;
  line-height: 1.4;
}

#circles-panel .circle-centre-status {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  color: oklch(0.55 0.01 263);
  font-size: 12.5px;
  line-height: 1.35;
}

#circles-panel .circle-centre-status > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#circles-panel .circle-centre-status.is-selected {
  border-radius: 9px;
  background: var(--circle-primary-soft);
  color: oklch(0.3 0.05 263);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 11px;
}

#circles-panel .circle-centre-status.is-error {
  color: #b42318;
}

#circles-panel .circle-centre-clear {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--circle-primary);
  cursor: pointer;
  padding: 0;
}

#circles-panel .circle-centre-clear:hover {
  background: color-mix(in oklch, var(--circle-primary), transparent 88%);
}

#circles-panel .circle-centre-clear svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

#circles-panel .circle-centre-clear[hidden] {
  display: none;
}

.circle-panel-rule {
  width: 100%;
  height: 1px;
  background: var(--circle-hairline);
}

#circles-panel .circle-distance-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  gap: 12px;
}

#circles-panel .circle-distance-control {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

#circles-panel .circle-distance-control > strong {
  color: oklch(0.3 0.01 263);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

#circles-panel .circle-distance-control > span:last-child {
  color: oklch(0.5 0.01 263);
  font-size: 12.5px;
  line-height: 1.2;
  white-space: nowrap;
}

#circles-panel .circle-stepper {
  display: grid;
  grid-template-columns: 32px 34px 32px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid oklch(0.85 0.01 263);
  border-radius: 9px;
  background: #ffffff;
}

#circles-panel .circle-stepper button,
#circles-panel .circle-stepper input {
  min-width: 0;
  height: 34px;
  border: 0;
  border-radius: 0;
  color: oklch(0.3 0.01 263);
  text-align: center;
}

#circles-panel .circle-stepper button {
  width: 32px;
  background: oklch(0.97 0.01 263);
  cursor: pointer;
  font-size: 17px;
}

#circles-panel .circle-stepper button:hover {
  background: var(--circle-primary-soft);
  color: var(--circle-primary);
}

#circles-panel .circle-stepper input {
  width: 34px;
  border-right: 1px solid var(--circle-border);
  border-left: 1px solid var(--circle-border);
  background: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  appearance: textfield;
  padding: 0;
}

#circles-panel .circle-ring-editor-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

#circles-panel .circle-ring-caption {
  margin: 0;
  color: oklch(0.55 0.01 263);
  font-size: 11.5px;
  line-height: 1.35;
}

#circles-panel .circle-ring-editor {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#circles-panel .circle-ring-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

#circles-panel .circle-ring-style-swatch {
  width: 34px;
  height: 34px;
  border: 1px solid oklch(0 0 0 / 0.1);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.16);
  cursor: pointer;
  padding: 0;
}

#circles-panel .circle-ring-label {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--circle-border);
  border-radius: 8px;
  background: #ffffff;
  color: oklch(0.25 0.01 263);
  font: inherit;
  font-size: 13.5px;
  padding: 9px 11px;
}

#circles-panel .circle-ring-label:focus {
  border-color: var(--circle-primary);
  outline: 2px solid color-mix(in oklch, var(--circle-primary), transparent 78%);
}

#circles-panel .circle-ring-popover {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-left: 0;
  border: 1px solid var(--circle-border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 4px 14px oklch(0.2 0.02 263 / 0.12);
  padding: 10px;
  animation: circle-popover-in 150ms ease-out;
}

#circles-panel .circle-ring-popover-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

#circles-panel .circle-ring-fill-row {
  gap: 5px;
}

#circles-panel .circle-ring-popover-label {
  width: 43px;
  flex: 0 0 43px;
  color: oklch(0.5 0.01 263);
  font-size: 10.5px;
  font-weight: 600;
}

#circles-panel .circle-ring-colour-chip,
#circles-panel .circle-ring-pattern-chip {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid oklch(0 0 0 / 0.1);
  border-radius: 6px;
  background-color: #ffffff;
  cursor: pointer;
  padding: 0;
}

#circles-panel .circle-ring-colour-chip.is-selected,
#circles-panel .circle-ring-pattern-chip.is-selected {
  border: 2px solid var(--circle-primary);
  box-shadow: 0 0 0 1px #ffffff inset;
}

#circles-panel .circle-ring-colour-well {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  overflow: hidden;
  place-items: stretch;
  border: 1px solid oklch(0 0 0 / 0.12);
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
}

#circles-panel .circle-ring-colour-well input[type='color'] {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transform: translate(-4px, -4px);
}

#circles-panel .circle-ring-colour-well input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

#circles-panel .circle-ring-colour-well input[type='color']::-webkit-color-swatch {
  border: 0;
}

#circles-panel .circle-ring-colour-well:focus-within {
  outline: 2px solid color-mix(in oklch, var(--circle-primary), transparent 45%);
  outline-offset: 2px;
}

#circles-panel .circle-ring-custom-colour {
  position: relative;
  place-items: center;
  color: oklch(0.42 0.035 263);
}

#circles-panel .circle-ring-custom-colour.is-selected {
  border: 2px solid var(--circle-primary);
  box-shadow: 0 0 0 1px #ffffff inset;
}

#circles-panel .circle-ring-custom-colour svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  pointer-events: none;
}

#circles-panel .circle-ring-custom-colour-preview {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: var(--circle-custom-colour, #ffffff);
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.18);
  pointer-events: none;
}

#circles-panel .circle-ring-custom-colour input[type='color'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: none;
}

#circles-panel .circle-ring-pattern-details {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid var(--circle-hairline);
  border-bottom: 1px solid var(--circle-hairline);
  padding: 8px 0;
}

#circles-panel .circle-ring-pattern-details.is-solid > * {
  opacity: 0.46;
}

#circles-panel .circle-ring-pattern-details.is-solid::after {
  color: oklch(0.55 0.01 263);
  content: 'Choose a pattern to adjust the hatch lines.';
  font-size: 10.5px;
  line-height: 1.3;
}

#circles-panel .circle-ring-detail-hint {
  color: oklch(0.5 0.01 263);
  font-size: 11px;
}

#circles-panel .circle-ring-range-row input {
  min-width: 0;
  flex: 1 1 auto;
  accent-color: var(--circle-primary);
}

#circles-panel .circle-ring-range-row output {
  width: 42px;
  flex: 0 0 42px;
  color: oklch(0.4 0.01 263);
  font-size: 11.5px;
  font-weight: 600;
  text-align: right;
}

#circles-panel .circle-ring-background-options {
  min-width: 0;
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--circle-border);
  border-radius: 7px;
}

#circles-panel .circle-ring-background-options button {
  min-height: 26px;
  border: 0;
  border-left: 1px solid var(--circle-border);
  background: #ffffff;
  color: oklch(0.42 0.01 263);
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  padding: 5px 8px;
}

#circles-panel .circle-ring-background-options button:first-child {
  border-left: 0;
}

#circles-panel .circle-ring-background-options button.is-selected {
  background: var(--circle-primary-soft);
  color: var(--circle-primary);
}

#circles-panel .circle-ring-background-options button:disabled {
  cursor: not-allowed;
}

@keyframes circle-popover-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#circles-panel .circle-colour-action {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#circles-panel .circle-colour-areas-button {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1.5px solid var(--circle-border);
  border-radius: 10px;
  background: #ffffff;
  color: oklch(0.25 0.01 263);
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 12px 14px;
}

#circles-panel .circle-colour-areas-button:hover:not(:disabled) {
  border-color: var(--circle-primary);
  background: oklch(0.98 0.01 263);
}

#circles-panel .circle-colour-areas-button.is-applied {
  border-color: var(--circle-primary);
  background: var(--circle-primary-soft);
  color: var(--circle-primary);
}

#circles-panel .circle-colour-areas-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.circle-colour-action-icon {
  width: 24px;
  height: 20px;
  flex: 0 0 24px;
}

.circle-colour-action-blue {
  fill: oklch(0.78 0.11 265);
}

.circle-colour-action-green {
  fill: oklch(0.78 0.11 165);
}

.circle-colour-action-yellow {
  fill: oklch(0.8 0.12 60);
}

#circles-panel .circle-colour-action-help {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

#circles-panel .circle-colour-action-help p {
  min-width: 0;
  margin: 0;
  color: oklch(0.55 0.01 263);
  font-size: 11.5px;
  line-height: 1.35;
}

#circles-panel .circle-colour-action-help button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--circle-primary);
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 0;
}

#circles-panel .circle-colour-action-help button[hidden] {
  display: none;
}

#circles-panel .circle-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--circle-hairline);
  background: oklch(0.98 0.008 263);
  padding: 11px 16px;
}

#circles-panel .circle-panel-footer > span {
  color: oklch(0.3 0.01 263);
  font-size: 13px;
  font-weight: 600;
}

#circles-panel .circle-panel-visibility {
  position: relative;
  width: 38px;
  height: 22px;
  flex: 0 0 38px;
  display: block;
  cursor: pointer;
  margin: 0;
}

#circles-panel .circle-panel-visibility input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

#circles-panel .circle-panel-visibility > span {
  position: absolute;
  inset: 0;
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: oklch(0.85 0.01 263);
  transition: background-color 150ms ease;
}

#circles-panel .circle-panel-visibility > span::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px oklch(0.2 0.02 263 / 0.2);
  content: '';
  transition: transform 150ms ease;
}

#circles-panel .circle-panel-visibility input:checked + span {
  background: var(--circle-primary);
}

#circles-panel .circle-panel-visibility input:checked + span::after {
  transform: translateX(16px);
}

#circles-panel .circle-panel-visibility input:focus-visible + span {
  outline: 2px solid color-mix(in oklch, var(--circle-primary), transparent 45%);
  outline-offset: 2px;
}

@media (max-width: 390px) {
  #circles-panel .circle-panel-header {
    gap: 8px;
    padding-inline: 12px;
  }

  #circles-panel .circle-panel-header > h2 {
    font-size: 15px;
  }

  #circles-panel .circle-panel-content {
    padding-inline: 12px;
  }

  #circles-panel .circle-centre-method {
    gap: 5px;
    padding-inline: 6px;
  }

  #circles-panel .circle-centre-method span {
    font-size: 12px;
  }

  #circles-panel .circle-ring-popover-row:not(.circle-ring-opacity-row) {
    flex-wrap: wrap;
    gap: 5px;
  }

  #circles-panel .circle-ring-popover-row:not(.circle-ring-opacity-row) .circle-ring-popover-label {
    width: 100%;
    flex-basis: 100%;
  }
}

.circle-ring-style-dialog {
  width: min(520px, calc(100vw - 28px));
}

.analysis-fill-opacity-control > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.analysis-fill-opacity-control > span small {
  color: #738195;
  font-size: 0.68rem;
  font-weight: 500;
}

.circle-apply-button:hover:not(:disabled) {
  border-color: var(--ui-blue-dark);
  background: var(--ui-blue-dark);
}

.circle-apply-button:disabled {
  border-color: #d6dee8;
  background: #e8edf3;
  color: #8995a4;
  cursor: not-allowed;
}

.circle-clear-button {
  color: #9f3030;
}

.circle-clear-button[hidden] {
  display: none;
}

.circle-help {
  padding: 0;
}

.travel-area-intro {
  margin: 0;
  border: 1px solid #ddd6fe;
  border-radius: 9px;
  background: #f5f3ff;
  color: #5b4589;
  padding: 9px 10px;
}

.dots-drop-zone {
  display: grid;
  justify-items: center;
  gap: 6px;
  border: 2px dashed #9cb5ca;
  border-radius: 11px;
  background: #f6f9fc;
  color: #52657a;
  cursor: pointer;
  padding: 16px 12px;
  text-align: center;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.dots-drop-zone strong {
  color: #27394e;
  font-size: 0.9rem;
}

.dots-drop-zone span {
  max-width: 270px;
  font-size: 0.72rem;
  line-height: 1.4;
}

.dots-drop-zone.is-dragging,
.dots-drop-zone:focus-visible {
  border-color: #1267d5;
  background: #eaf4ff;
  outline: 3px solid rgba(18, 103, 213, 0.12);
  transform: translateY(-1px);
}

.page-colour-grid {
  display: grid;
  gap: 8px;
}

.page-colour-control {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #dce5ee;
  border-radius: 9px;
  background: #ffffff;
  cursor: pointer;
  padding: 8px 10px;
}

.page-colour-control input[type='color'] {
  width: 36px;
  height: 36px;
  border: 1px solid #b9c7d6;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  padding: 2px;
}

.page-colour-control span {
  display: grid;
  gap: 2px;
}

.page-colour-control strong {
  color: #25364a;
  font-size: 0.79rem;
}

.page-colour-control small {
  color: #718095;
  font-size: 0.7rem;
}

#travel-area-generate-button {
  border-color: #7c3aed;
  background: #7c3aed;
}

#travel-area-generate-button:hover:not(:disabled) {
  border-color: #6d28d9;
  background: #6d28d9;
}

.circle-confirm-backdrop {
  position: fixed;
  z-index: 140;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.42);
  padding: 20px;
  backdrop-filter: blur(3px);
}

.circle-confirm-backdrop[hidden] {
  display: none;
}

.circle-confirm-dialog {
  width: min(430px, calc(100vw - 32px));
  display: grid;
  justify-items: center;
  gap: 10px;
  border: 1px solid #e1e7ee;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
  padding: 24px;
  text-align: center;
}

.circle-confirm-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: #fef3c7;
  color: #b45309;
  font-size: 1.25rem;
  font-weight: 800;
}

.circle-confirm-dialog h2 {
  margin: 0;
  color: #172334;
  font-size: 1.12rem;
}

.circle-confirm-dialog p {
  margin: 0;
  color: #637286;
  font-size: 0.86rem;
  line-height: 1.5;
}

.circle-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 5px;
}

.circle-confirm-apply {
  border-color: #b91c1c;
  background: #b91c1c;
  color: #ffffff;
}

.circle-confirm-apply:hover {
  border-color: #991b1b;
  background: #991b1b;
}

#map.is-placing-circle-centre {
  cursor: crosshair;
}

#map.is-placing-travel-area-centre {
  cursor: crosshair;
}

.add-name-button {
  min-width: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: #acd19b;
  background: #f2f9ed;
  color: #275f27;
  padding: 6px 8px;
  font-size: 0.7rem;
}

.add-name-button:hover {
  border-color: #82b96d;
  background: #e7f4de;
  color: #1f5220;
}

.tool-help {
  margin: 0;
  color: #718094;
  font-size: 0.76rem;
  line-height: 1.4;
  padding: 0 16px 11px;
}

.legend-list {
  align-content: start;
  grid-auto-rows: min-content;
  max-height: none;
  gap: 0;
  border-top: 1px solid #edf1f5;
  overflow: visible;
  padding: 0;
}

.legend-empty {
  padding: 18px 16px;
}

.legend-item {
  min-height: 43px;
  grid-template-columns: 14px 20px minmax(0, 1fr) 25px;
  gap: 9px;
  border-bottom: 1px solid #e8edf3;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px 12px;
}

.legend-item:hover {
  background: #f6f9fc;
}

.legend-item.is-selected {
  border-color: #d5e8fb;
  background: #eaf4ff;
  box-shadow: inset 3px 0 var(--ui-blue);
}

.legend-swatch {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.territory-style-dialog {
  width: min(600px, calc(100vw - 28px));
}

.territory-style-body {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}

.territory-style-dialog .spreadsheet-modal-header {
  display: grid;
  gap: 3px;
  padding: 11px 14px 10px;
}

.territory-style-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.territory-style-dialog #territory-style-description {
  margin: 0;
  color: #64748b;
  font-size: .73rem;
  line-height: 1.35;
}

.territory-style-dialog .spreadsheet-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.territory-style-dialog .spreadsheet-modal-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.territory-style-preview {
  position: relative;
  width: 126px;
  height: 58px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid #94a3b8;
  border-radius: 8px;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.territory-label-preview {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 28px);
  border-radius: 3px;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .16);
}

.territory-fill-editor {
  display: grid;
  gap: 9px;
  border: 1px solid #d7e2ee;
  border-radius: 11px;
  background: linear-gradient(145deg, #fbfdff, #f6f9fc);
  padding: 10px 11px;
}

.territory-fill-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.territory-fill-heading h3,
.territory-fill-heading p {
  margin: 0;
}

.territory-fill-heading h3 {
  color: #1e293b;
  font-size: .88rem;
}

.territory-fill-heading p {
  margin-top: 2px;
  color: #64748b;
  font-size: .7rem;
}

.territory-pattern-fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.territory-pattern-fieldset legend {
  margin-bottom: 6px;
  color: #334155;
  font-size: .71rem;
  font-weight: 700;
}

.territory-pattern-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.territory-pattern-options button {
  min-width: 0;
  display: grid;
  gap: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  color: #334155;
  padding: 7px;
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
}

.territory-pattern-options button:hover {
  border-color: #7aa6bf;
  background: #f8fbfd;
}

.territory-pattern-options button.is-selected {
  border-color: #1b6f9f;
  background: #eaf5fb;
  box-shadow: 0 0 0 2px rgba(27, 111, 159, .14);
}

.territory-pattern-options button:focus-visible {
  outline: 3px solid rgba(27, 111, 159, .2);
  outline-offset: 1px;
}

.territory-pattern-sample {
  height: 28px;
  border: 1px solid rgba(15, 23, 42, .25);
  border-radius: 5px;
  background-position: center;
}

.territory-style-dialog .territory-pattern-fieldset {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.territory-style-dialog .territory-pattern-fieldset legend {
  margin: -1px;
  padding: 0;
}

.territory-pattern-label {
  color: #334155;
  font-size: .71rem;
  font-weight: 700;
}

.territory-style-dialog .territory-pattern-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.territory-style-dialog .territory-pattern-options button {
  position: relative;
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  padding: 4px;
}

.territory-style-dialog .territory-pattern-options button.is-selected::after {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #176d9f;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .2);
  content: '';
}

.territory-style-dialog .territory-pattern-sample {
  width: 26px;
  height: 26px;
  border-radius: 4px;
}

.territory-style-colours {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.territory-style-dialog .page-colour-control {
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 8px;
  border-radius: 8px;
  padding: 5px 7px;
}

.territory-style-dialog .page-colour-control input[type='color'] {
  width: 29px;
  height: 29px;
  border-radius: 6px;
}

.territory-style-dialog .page-colour-control strong {
  font-size: .72rem;
}

.territory-style-dialog .page-colour-control small {
  font-size: .63rem;
}

.territory-pattern-detail-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 10px;
  border-top: 1px solid #e4ebf2;
  padding-top: 9px;
}

.territory-pattern-detail-controls .mini-checkbox {
  grid-column: 1 / -1;
}

.territory-pattern-detail-controls.is-solid {
  opacity: .5;
}

.territory-boundary-editor,
.territory-label-editor {
  display: grid;
  gap: 9px;
  border: 1px solid #d7e2ee;
  border-radius: 11px;
  background: #fbfdff;
  padding: 10px 11px;
}

.territory-boundary-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.territory-boundary-heading h3,
.territory-boundary-heading p {
  margin: 0;
}

.territory-boundary-heading h3 {
  color: #1e293b;
  font-size: .92rem;
}

.territory-boundary-heading p {
  margin-top: 4px;
  color: #64748b;
  font-size: .75rem;
  line-height: 1.4;
}

.switch-control {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  padding: 6px 9px;
  color: #334155;
  font-size: .74rem;
  font-weight: 750;
  cursor: pointer;
}

.switch-control:has(input:checked) {
  border-color: #7fb89a;
  background: #edf9f2;
  color: #17613a;
}

.territory-boundary-controls {
  display: grid;
  gap: 7px;
  transition: opacity .15s ease;
}

.territory-boundary-controls.is-disabled {
  opacity: .48;
}

.territory-label-controls {
  display: grid;
  gap: 7px;
  transition: opacity .15s ease;
}

.territory-style-dialog .slider-block.compact-slider {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(76px, auto) minmax(62px, 1fr) 48px;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  border: 1px solid #dde6ef;
  border-radius: 8px;
  background: #fff;
  padding: 4px 6px 4px 8px;
}

.territory-style-dialog .slider-block.compact-slider > span {
  color: #405166;
  font-size: .68rem;
  font-weight: 650;
  white-space: nowrap;
}

.territory-style-dialog .slider-row {
  display: contents;
}

.territory-style-dialog .slider-row > output {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  border: 1px solid #d5e0ea;
  border-radius: 6px;
  background: #f3f7fb;
  padding: 3px 4px;
  color: #245d87;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.territory-style-dialog input[type='range'] {
  height: 14px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.territory-style-dialog input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: #d7e2ed;
}

.territory-style-dialog input[type='range']::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #226d9d;
  box-shadow: 0 0 0 1px #226d9d, 0 1px 3px rgba(15, 23, 42, .25);
}

.territory-style-dialog input[type='range']::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: #d7e2ed;
}

.territory-style-dialog input[type='range']::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #226d9d;
  box-shadow: 0 0 0 1px #226d9d, 0 1px 3px rgba(15, 23, 42, .25);
}

.territory-style-dialog .mini-checkbox {
  min-height: 31px;
  gap: 7px;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: .67rem;
}

.territory-style-dialog .mini-checkbox span {
  white-space: normal;
}

.territory-label-controls.is-disabled {
  opacity: .48;
}

.territory-label-source,
.territory-label-minimum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #dbe4ee;
  border-radius: 9px;
  background: #fff;
  padding: 6px 8px;
}

.territory-label-source > span,
.territory-label-minimum > span {
  display: grid;
  gap: 2px;
}

.territory-label-source strong,
.territory-label-minimum strong {
  color: #334155;
  font-size: .76rem;
}

.territory-label-source small,
.territory-label-minimum small {
  color: #64748b;
  font-size: .67rem;
}

.territory-label-source select,
.territory-label-minimum select {
  min-width: 116px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  padding: 6px 8px;
  color: #334155;
  font: inherit;
  font-size: .74rem;
}

.territory-label-custom-row {
  display: grid;
  gap: 4px;
  color: #334155;
  font-size: .74rem;
  font-weight: 700;
}

.territory-label-custom-row[hidden] {
  display: none;
}

.territory-label-custom-row input {
  width: 100%;
  min-width: 0;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  padding: 7px 9px;
  color: #17212b;
  font: inherit;
  font-size: .78rem;
}

.territory-label-custom-row input:focus {
  border-color: #1b6f9f;
  outline: 3px solid rgba(27, 111, 159, .12);
}

.territory-label-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.territory-label-lower-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .9fr);
  align-items: end;
  gap: 8px;
}

.territory-label-lower-row .territory-label-minimum {
  min-height: 41px;
}

.territory-label-apply-all {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  border: 1px solid #bfd4e6;
  border-radius: 10px;
  background: #f2f8fc;
  padding: 8px 9px;
  color: #334155;
  cursor: pointer;
}

.territory-label-apply-all:has(input:checked) {
  border-color: #4f8ab0;
  background: #e8f3fa;
  box-shadow: 0 0 0 2px rgba(27, 111, 159, .1);
}

.territory-label-apply-all input {
  margin-top: 2px;
  accent-color: #1b6f9f;
}

.territory-label-apply-all > span {
  display: grid;
  gap: 3px;
}

.territory-label-apply-all strong {
  font-size: .76rem;
}

.territory-label-apply-all small {
  color: #64748b;
  font-size: .68rem;
  line-height: 1.4;
}

.territory-boundary-line-style {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #dbe4ee;
  border-radius: 9px;
  background: #fff;
  padding: 6px 8px;
}

.territory-boundary-line-style > span {
  display: grid;
  gap: 2px;
}

.territory-boundary-line-style strong {
  color: #334155;
  font-size: .76rem;
}

.territory-boundary-line-style small {
  color: #64748b;
  font-size: .67rem;
}

.territory-boundary-line-style select {
  min-width: 92px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  padding: 6px 8px;
  color: #334155;
  font: inherit;
  font-size: .74rem;
}

.territory-boundary-status {
  min-height: 1.3em;
  margin: 0;
  border-radius: 7px;
  background: #f1f5f9;
  color: #526170;
  padding: 5px 7px;
  font-size: .66rem;
  line-height: 1.35;
}

.territory-boundary-status.is-error {
  background: #fff1f2;
  color: #a1172f;
}

@media (max-width: 560px) {
  .territory-pattern-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .territory-style-colours {
    grid-template-columns: 1fr;
  }

  .territory-label-lower-row,
  .territory-label-source,
  .territory-label-minimum {
    grid-template-columns: 1fr;
  }

  .territory-label-source,
  .territory-label-minimum {
    align-items: start;
  }

  .territory-boundary-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .switch-control {
    align-self: flex-start;
  }
}

/* Inset map: compact label controls aligned with the Labels panel. */
#inset-panel {
  --inset-settlement-city-badge: linear-gradient(145deg, #4269c8, #234c9d);
  --inset-settlement-town-badge: linear-gradient(145deg, #429887, #267265);
  --inset-settlement-village-badge: linear-gradient(145deg, #88a84c, #617e2f);
  --inset-settlement-landmark-badge: linear-gradient(145deg, #a26a2e, #75461d);
}

#inset-panel .inset-map-controls {
  gap: 8px;
}

#inset-panel .inset-visibility-strip {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-left: 3px solid #326ae5;
  background: #ffffff;
  padding: 6px 8px;
}

#inset-panel .inset-visibility-strip > strong {
  color: #263548;
  font-size: 0.75rem;
  font-weight: 720;
}

#inset-panel .inset-label-priority-stack {
  display: grid;
  gap: 8px;
}

#inset-panel .inset-label-card,
#inset-panel .inset-label-card.is-higher-priority,
#inset-panel .inset-label-card:not(.is-higher-priority) {
  gap: 0;
  overflow: hidden;
  border: 1px solid;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: none;
  padding: 0;
}

#inset-panel .inset-label-card[data-inset-label-priority-card='areas'] {
  border-color: #dfa14b;
  background: #fffdfa;
}

#inset-panel .inset-label-card[data-inset-label-priority-card='settlements'] {
  border-color: #4b927e;
  background: #fbfefd;
}

#inset-panel .inset-label-card:not(.is-higher-priority) {
  opacity: 0.97;
}

#inset-panel .inset-label-card-header {
  min-height: 40px;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  padding: 6px 8px;
}

#inset-panel [data-inset-label-priority-card='areas'] .inset-label-card-header {
  background: #d9892d;
}

#inset-panel [data-inset-label-priority-card='settlements'] .inset-label-card-header {
  background: #347f70;
}

#inset-panel .inset-label-card-header .label-priority-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

#inset-panel .inset-label-card-header .label-priority-heading > div {
  order: 1;
}

#inset-panel .inset-label-card-header .label-priority-move-button {
  order: 2;
}

#inset-panel .inset-label-card-header h3,
#inset-panel .inset-label-card-header .switch-row b {
  color: #ffffff;
}

#inset-panel .inset-label-card-header h3 {
  font-size: 0.75rem;
  font-weight: 720;
}

#inset-panel .inset-label-card-header .switch-row b {
  font-size: 0.61rem;
}

#inset-panel .inset-label-card-header .switch-row > span {
  background: rgba(15, 30, 55, 0.26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

#inset-panel .inset-label-card-header .switch-row input:checked + span {
  background: #163a66;
}

#inset-panel .label-priority-move-button {
  width: auto;
  height: 25px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(9, 30, 55, 0.22);
  color: #ffffff;
  padding: 3px 7px 3px 5px;
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 1;
}

#inset-panel .label-priority-move-button:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(9, 30, 55, 0.38);
}

#inset-panel .label-priority-move-button svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

#inset-panel .inset-label-card-body {
  display: grid;
  gap: 6px;
  padding: 7px;
}

#inset-panel [data-inset-label-priority-card='areas'] .inset-label-card-body {
  background: #fff9ef;
}

#inset-panel [data-inset-label-priority-card='settlements'] .inset-label-card-body {
  background: #f5fbf8;
}

#inset-panel .area-label-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 29px;
  align-items: end;
  gap: 6px;
}

#inset-panel .area-label-field-control {
  gap: 3px;
}

#inset-panel .area-label-field-control > span,
#inset-panel .inset-label-setting-row > span:first-child {
  color: #5d4b38;
  font-size: 0.6rem;
  font-weight: 700;
}

#inset-panel .area-label-field-control .dataset-select {
  min-height: 30px;
}

#inset-panel .area-label-field-row .label-colour-control,
#inset-panel .settlement-filter-row .label-colour-control {
  width: 29px;
  height: 29px;
  flex-basis: 29px;
  border: 1px solid #c8d2e1;
  border-radius: 6px;
  background: #ffffff;
  padding: 2px;
}

#inset-panel .inset-area-label-settings {
  display: grid;
  gap: 3px;
}

#inset-panel .inset-label-setting-row {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

#inset-panel .inset-label-setting-row .label-size-number,
#inset-panel .label-zoom-stepper,
#inset-panel .settlement-filter-row .label-size-number {
  height: 28px;
  min-height: 28px;
  border-color: #c8d2e1;
  border-radius: 6px;
  background: #ffffff;
  font-size: 0.61rem;
}

#inset-panel .inset-label-setting-row .label-size-number input,
#inset-panel .settlement-filter-row .label-size-number input {
  width: 39px;
  height: 100%;
  min-height: 0;
  padding-left: 5px;
}

#inset-panel .inset-area-wrap-row .mini-checkbox {
  min-height: 26px;
  border: 0;
  background: transparent;
  padding: 2px 0;
}

#inset-panel .inset-area-wrap-row .dataset-select {
  width: 76px;
  min-height: 28px;
  height: 28px;
  font-size: 0.62rem;
}

#inset-panel .settlement-filters {
  display: grid;
  gap: 3px;
}

#inset-panel .settlement-filter-row {
  min-height: 29px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 29px 58px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(172, 195, 146, 0.44);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.62);
  padding: 2px 4px;
}

#inset-panel .settlement-filter-row .mini-checkbox {
  min-height: 24px;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 1px 2px;
}

#inset-panel .label-zoom-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 57px;
  align-items: center;
  gap: 6px;
  border-top: 1px solid rgba(113, 131, 157, 0.2);
  background: rgba(245, 247, 250, 0.72);
  padding: 5px 7px;
}

#inset-panel .label-zoom-icon {
  width: 24px;
  height: 24px;
  border-color: #cbd5e3;
  background: #ffffff;
}

#inset-panel .label-zoom-copy strong {
  color: #34445a;
  font-size: 0.61rem;
}

#inset-panel .label-zoom-stepper input[type='number'] {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 2px;
  text-align: center;
}

/* Keep inset priority actions on one line inside the compact heading row. */
#inset-panel .inset-label-card-header .label-priority-move-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

#inset-panel .inset-label-card-header .label-priority-move-button span {
  display: inline-block;
  white-space: nowrap;
}

#inset-panel .inset-map-controls > .control-group:not(.inset-label-card) {
  gap: 7px;
  border-left: 3px solid #d6deea;
  background: #ffffff;
  padding: 7px 8px;
}

#inset-panel .inset-map-controls > .control-group:not(.inset-label-card) .control-group-header h3 {
  font-size: 0.76rem;
}

#inset-panel .inset-overlay-label-grid {
  gap: 4px 7px;
}

#inset-panel .inset-overlay-label-grid .mini-checkbox {
  min-height: 26px;
  border: 0;
  background: transparent;
  padding: 2px 0;
}

#inset-panel .composition-frame-shape-control {
  gap: 7px;
}

#inset-panel .composition-frame-shape-control > strong,
#inset-panel .slider-block > span,
#inset-panel .inset-border-control strong,
#inset-panel .inset-switch-row b {
  font-size: 0.69rem;
}

#inset-panel .composition-frame-shape-button {
  min-height: 29px;
  padding: 4px 6px;
  font-size: 0.65rem;
}

#inset-panel .inset-border-control {
  min-height: 32px;
  border: 0;
  background: transparent;
  padding: 0;
}

#inset-panel .inset-border-control small {
  display: none;
}

#inset-panel #inset-map-remove {
  min-height: 32px;
  padding-block: 5px;
}

@media (max-width: 420px) {
  #inset-panel .label-priority-move-button span {
    display: none;
  }

  #inset-panel .label-priority-move-button {
    width: 25px;
    padding: 4px 5px;
  }
}

/* Compact, always-visible examples beside every spreadsheet importer. */
.spreadsheet-example-link {
  min-height: 28px;
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  border: 1px solid #a9bddc;
  border-radius: 7px;
  background: #eef4ff;
  color: #285aa8;
  padding: 4px 7px;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
}

.spreadsheet-example-link svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.spreadsheet-example-link:is(:hover, :focus-visible) {
  border-color: #6088cb;
  background: #dfeaff;
  color: #174b9c;
  outline: none;
}

#points-panel .spreadsheet-example-link,
#tables-panel .spreadsheet-example-link,
#thematic-panel .spreadsheet-example-link {
  margin-top: -3px;
}

/* Callouts follow the same compact list-first flow as manually added
   territories: edit what exists, add another, then optionally import in bulk. */
#points-panel .points-manual-add.callout-manual-add {
  min-height: 56px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 3px 7px;
  border: 1px solid #c6dcb9;
  border-left: 3px solid #82ad6d;
  border-radius: 8px;
  background: #f2f8ee;
  padding: 6px 7px;
}

#points-panel .callout-manual-add input {
  grid-column: 2;
  grid-row: 1 / span 2;
  height: 34px;
  min-height: 34px;
  border-radius: 8px;
}

#points-panel .callout-manual-add label {
  align-self: end;
  color: #376a2d;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15;
}

#points-panel .callout-manual-add small {
  align-self: start;
  color: #64785d;
  font-size: 0.57rem;
  line-height: 1.2;
}

#points-panel .points-manual-add.callout-manual-add:focus-within,
#points-panel .points-manual-add.callout-manual-add.has-pending-label {
  border-color: #7fb469;
  border-left-color: #4d8f3d;
  background: #e9f5e3;
}

#points-panel .points-manual-add.callout-manual-add.has-pending-label label {
  color: #285b20;
}

#points-panel .callout-status {
  min-height: 0;
  padding: 0 2px;
  font-size: 0.65rem;
}

#points-panel .callout-remove-row {
  min-height: 0;
  justify-content: flex-end;
}

#points-panel .callout-remove-row #callout-clear {
  min-height: 28px;
  flex: 0 0 auto;
  border: 1px solid #d7a6a9;
  border-radius: 6px;
  background: #fff6f6;
  color: #9f3f48;
  padding: 4px 8px;
  font-size: 0.64rem;
  font-weight: 700;
}

#points-panel .callout-remove-row #callout-clear:hover {
  border-color: #c87f85;
  background: #f8e5e7;
  color: #a52d3a;
}

#points-panel #location-key-drop-zone.callout-upload-zone {
  min-height: 52px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  justify-items: stretch;
  gap: 7px;
  border: 1px dashed #aebbd0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 6px 7px;
  color: #536278;
  text-align: left;
}

#points-panel #location-key-drop-zone.callout-upload-zone:is(:hover, :focus-visible, .is-dragging) {
  border-color: #6f8fc4;
  background: #f3f7ff;
  outline: none;
}

#points-panel #location-key-drop-zone.callout-upload-zone > img {
  width: 30px;
  height: 30px;
}

#points-panel .callout-upload-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

#points-panel .callout-upload-copy strong {
  color: #34435a;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15;
}

#points-panel .callout-upload-copy small {
  color: #6a788c;
  font-size: 0.58rem;
  line-height: 1.2;
}

#points-panel #location-key-drop-zone.callout-upload-zone #location-key-file-button {
  width: auto;
  min-width: 72px;
  min-height: 30px;
  border-color: #9cb3d8;
  background: #edf3ff;
  color: #2457a7;
  padding: 5px 7px;
  font-size: 0.64rem;
}

#points-panel #location-key-drop-zone.callout-upload-zone #location-key-file-button:hover {
  border-color: #6f8fc4;
  background: #dfe9fb;
}

@media (max-width: 390px) {
  #points-panel #location-key-drop-zone.callout-upload-zone {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  #points-panel #location-key-drop-zone.callout-upload-zone #location-key-file-button {
    grid-column: 2;
    justify-self: start;
  }
}

.legend-name-input {
  border-color: transparent;
  background: transparent;
  padding: 5px 2px;
}

.legend-entry-main {
  min-width: 0;
  display: grid;
  gap: 0;
}

.legend-metric-total {
  overflow: hidden;
  color: #526b82;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  padding: 0 2px 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legend-metric-total[hidden] {
  display: none;
}

.legend-name-input:hover,
.legend-name-input:focus {
  border-color: #b8c9da;
  background: #ffffff;
}

.legend-entry-remove {
  width: 23px;
  height: 23px;
  border-color: transparent;
  background: transparent;
  color: #9a6570;
}

.legend-entry-remove:hover {
  border-color: #fecaca;
  background: #fee2e2;
  color: #b91c1c;
}

.legend-entry-drag-handle,
.pdf-print-legend-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #73869a;
  cursor: grab;
  padding: 0;
  touch-action: none;
  appearance: none;
  -webkit-appearance: none;
}

.legend-entry-drag-handle {
  width: 14px;
  height: 28px;
  margin-left: -3px;
}

.legend-entry-drag-handle span,
.pdf-print-legend-drag-handle span {
  display: block;
  width: 8px;
  height: 16px;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1.4px);
  background-position: 0 0;
  background-size: 4px 4px;
  content: '';
}

.legend-entry-drag-handle:hover,
.legend-entry-drag-handle:focus-visible,
.pdf-print-legend-drag-handle:hover,
.pdf-print-legend-drag-handle:focus-visible {
  color: #1267d5;
  outline: 2px solid rgba(18, 103, 213, 0.25);
  outline-offset: 1px;
}

.pdf-print-legend-drag-handle {
  position: absolute;
  top: 50%;
  right: 1px;
  width: calc(var(--pdf-legend-row-height) * 0.45);
  height: calc(var(--pdf-legend-row-height) * 0.8);
  color: rgba(51, 65, 85, 0.5);
  transform: translateY(-50%);
}

.pdf-print-legend-drag-handle span {
  width: 70%;
  height: 70%;
  background-size: 3px 3px;
}

.is-reordering-entries,
.is-reordering-entries * {
  cursor: grabbing !important;
  user-select: none;
}

.legend-item.is-being-reordered,
.pdf-print-legend-entry.is-being-reordered {
  opacity: 0.42;
}

.legend-item.is-drop-before,
.pdf-print-legend-entry.is-drop-before {
  outline: 2px solid #1267d5;
  outline-offset: -1px;
  box-shadow: inset 0 3px #1267d5;
}

.legend-item.is-drop-after,
.pdf-print-legend-entry.is-drop-after {
  outline: 2px solid #1267d5;
  outline-offset: -1px;
  box-shadow: inset 0 -3px #1267d5;
}

.control-group {
  border-color: #e3e9f0;
  border-radius: 10px;
  background: #f8fafc;
  padding: 13px;
}

.form-field,
.dataset-save-block {
  display: grid;
  gap: 6px;
}

.form-field > span,
.dataset-save-block > label {
  color: #455468;
  font-size: 0.76rem;
  font-weight: 700;
}

.form-field input {
  width: 100%;
  border: 1px solid #cad5e2;
  border-radius: 8px;
  background: #ffffff;
  color: #172334;
  padding: 9px 10px;
}

.form-field input:focus {
  outline: 3px solid rgba(18, 103, 213, 0.12);
  border-color: var(--ui-blue);
}

.panel-note {
  display: grid;
  gap: 4px;
  border: 1px solid #dbe8f5;
  border-radius: 10px;
  background: #f2f8fe;
  color: #607186;
  padding: 12px;
  font-size: 0.78rem;
  line-height: 1.42;
}

.panel-note strong {
  color: #29445f;
}

/* One clear, map-aware data-import entry point */
.data-import-intro {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #c9dcf0;
  border-radius: 11px;
  background: linear-gradient(135deg, #eef6ff, #f8fbff);
  padding: 11px 12px;
}

.data-import-map-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #ffffff;
  color: #2563b5;
  box-shadow: 0 3px 9px rgba(37, 99, 181, 0.13);
}

.data-import-map-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.data-import-intro > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.data-import-intro span,
.data-import-intro small,
.dataset-select-block > small {
  color: #65758a;
  font-size: 0.68rem;
  line-height: 1.38;
}

.data-import-intro strong {
  overflow: hidden;
  color: #193b62;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-import-primary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 11px;
  border: 1px solid #b8d1ed;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(29, 72, 114, 0.08);
  padding: 13px;
}

.data-import-primary > img {
  width: 42px;
  height: 42px;
  grid-row: 1;
  object-fit: contain;
}

.data-import-primary h3 {
  margin: 1px 0 3px;
  color: #172334;
  font-size: 0.86rem;
  line-height: 1.24;
}

.data-import-primary p,
.data-import-primary > small {
  margin: 0;
  color: #65758a;
  font-size: 0.69rem;
  line-height: 1.4;
}

.data-import-primary > button,
.data-import-primary > small {
  grid-column: 1 / -1;
}

.data-import-primary > button {
  min-height: 39px;
  margin-top: 8px;
}

.data-import-primary > small {
  text-align: center;
}

.map-data-template-card {
  display: grid;
  gap: 9px;
  border: 1px solid #b9d2ed;
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff 20%, #f4f9ff);
  box-shadow: 0 4px 13px rgba(29, 72, 114, 0.07);
  padding: 12px;
}

.map-data-template-card.is-statistics {
  border-color: #c9c4eb;
  background: linear-gradient(145deg, #ffffff 20%, #f7f6ff);
}

.map-data-template-heading {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.map-data-template-heading > div {
  min-width: 0;
}

.map-data-template-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #edf5ff;
}

.map-data-template-card.is-statistics .map-data-template-icon {
  background: #f0effc;
}

.map-data-template-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.map-data-template-kicker {
  display: block;
  margin-bottom: 2px;
  color: #3269a3;
  font-size: 0.61rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

.map-data-template-card.is-statistics .map-data-template-kicker {
  color: #6650a8;
}

.map-data-template-card h3 {
  margin: 0;
  color: #172334;
  font-size: 0.84rem;
  line-height: 1.25;
}

.map-data-template-card > p:not(.map-data-template-status) {
  margin: 0;
  color: #5f7084;
  font-size: 0.69rem;
  line-height: 1.43;
}

.map-data-template-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  color: #64748b;
  font-size: 0.65rem;
  line-height: 1.35;
}

.map-data-template-format {
  border: 1px solid #bfd4eb;
  border-radius: 999px;
  background: #edf6ff;
  color: #285f98;
  padding: 3px 7px;
  font-weight: 700;
}

.map-data-template-card.is-statistics .map-data-template-format {
  border-color: #d1cceb;
  background: #f2f0fb;
  color: #62509c;
}

.map-data-template-button {
  width: 100%;
  min-height: 37px;
  justify-content: center;
}

.map-data-template-status {
  min-height: 0.9em;
  margin: -1px 0 0;
  color: #3f6f55;
  font-size: 0.64rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.map-data-template-status:empty {
  display: none;
}

.map-data-template-status.is-error {
  color: #b42318;
}

/* Professional spreadsheet-colouring workflow */
#data-panel {
  border-color: #1747a7;
  border-radius: 13px;
  background: #fffdfc;
  box-shadow: 0 15px 38px rgba(5, 34, 79, 0.24);
}

#data-panel .data-import-panel-header {
  position: relative;
  min-height: 94px;
  gap: 10px;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(118deg, #071b46 0%, #09275d 54%, #1747a7 100%);
  box-shadow: none;
  padding: 15px 13px 21px;
}

#data-panel .data-import-panel-header > div {
  align-self: center;
}

#data-panel .data-import-panel-header::before {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.28));
}

#data-panel .data-import-panel-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    #2864e8 0%,
    #2864e8 25%,
    #159451 25%,
    #159451 50%,
    #f2a900 50%,
    #f2a900 75%,
    #7638d5 75%,
    #7638d5 100%
  );
  content: '';
}

#data-panel .data-import-panel-header h2 {
  margin: 4px 0 0;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

#data-panel .data-import-panel-header .tool-panel-eyebrow {
  color: #e8f1ff;
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  line-height: 1.2;
  white-space: nowrap;
}

#data-panel .data-import-panel-header > .tool-panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

#data-panel .data-import-panel-header .vm-tool-context-help,
#data-panel .data-import-panel-header .tool-panel-close {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background: rgba(7, 27, 70, 0.24);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

#data-panel .data-import-panel-header .tool-panel-close {
  border-radius: 9px;
}

#data-panel .data-import-panel-header .vm-tool-context-help:hover,
#data-panel .data-import-panel-header .tool-panel-close:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  transform: translateY(-1px);
}

#data-panel .data-import-panel-header .vm-tool-context-help:focus-visible,
#data-panel .data-import-panel-header .tool-panel-close:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.52);
  outline-offset: 3px;
}

#data-panel .data-import-panel-header .vm-panel-action-icon,
#data-panel .data-import-panel-header .tool-panel-close svg {
  width: 21px;
  height: 21px;
}

#data-panel .data-import-panel-content {
  gap: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(40, 100, 232, 0.045), transparent 34%),
    #fffdfc;
  padding: 17px 10px 20px;
  scrollbar-gutter: stable both-edges;
}

#data-panel .data-import-workflow {
  display: grid;
  gap: 26px;
}

#data-panel .data-import-step {
  position: relative;
  min-width: 0;
}

#data-panel .data-import-step.is-template::after {
  display: none;
}

#data-panel .data-import-step-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}

#data-panel .data-import-step-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #20ad68, #087d43);
  color: #ffffff;
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 700;
}

#data-panel .data-import-step.is-upload .data-import-step-number {
  background: linear-gradient(145deg, #874ae0, #5820b5);
  box-shadow: none;
}

#data-panel .data-import-step-heading h3 {
  margin: 0;
  color: #10203f;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.18;
}

#data-panel .data-import-step-body {
  min-width: 0;
  display: grid;
  gap: 10px;
  margin-left: 0;
}

#data-panel .data-import-template-card {
  gap: 14px;
  border: 1px solid #d9e0ea;
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 8px 19px rgba(15, 41, 72, 0.13);
  padding: 16px 14px 15px;
}

#data-panel .data-import-template-copy {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
}

#data-panel .data-import-template-icon {
  width: 48px;
  height: 56px;
  display: grid;
  place-items: center;
  background: transparent;
  box-shadow: none;
}

#data-panel .data-import-template-icon img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

#data-panel .data-import-template-copy p {
  margin: 0;
  color: #1f2b42;
  font-size: 0.76rem;
  line-height: 1.48;
}

#data-panel .data-import-template-copy p > strong {
  color: #10203f;
  font-weight: 600;
}

#data-panel .data-import-template-copy .data-import-accent-text {
  color: #098249;
}

#data-panel .data-import-template-copy .data-import-stats-text {
  color: #6d28d9;
}

#data-panel .data-import-download-button {
  width: 100%;
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #00743e;
  border-radius: 10px;
  background: linear-gradient(180deg, #0aa35c, #008447);
  color: #ffffff;
  box-shadow: 0 4px 0 #066b3e, 0 8px 14px rgba(5, 91, 54, 0.2);
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

#data-panel .data-import-download-button svg,
#data-panel .data-import-upload-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#data-panel .data-import-download-button:hover:not(:disabled) {
  filter: brightness(1.06) saturate(1.06);
  box-shadow: 0 5px 0 #066b3e, 0 9px 16px rgba(5, 91, 54, 0.23);
  transform: translateY(-1px);
}

#data-panel .data-import-download-button:active:not(:disabled) {
  box-shadow: 0 2px 0 #066b3e, 0 5px 9px rgba(5, 91, 54, 0.18);
  transform: translateY(3px);
}

#data-panel .data-import-download-button:focus-visible,
#data-panel .data-import-upload-button:focus-visible {
  outline: 3px solid rgba(40, 100, 232, 0.46);
  outline-offset: 4px;
}

#data-panel .data-import-download-button:disabled {
  box-shadow: none;
  opacity: 0.5;
}

#data-panel .data-import-upload-card {
  position: relative;
  min-height: 250px;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 8px;
  border: 2px dashed #2864e8;
  border-radius: 14px;
  background:
    radial-gradient(circle at 7% 94%, rgba(242, 169, 0, 0.1), transparent 34%),
    radial-gradient(circle at 94% 6%, rgba(255, 255, 255, 0.7), transparent 38%),
    #fff6cf;
  padding: 11px 15px 16px;
  text-align: center;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

#data-panel .data-import-upload-card::before,
#data-panel .data-import-upload-card::after {
  position: absolute;
  width: 24px;
  height: 24px;
  content: '';
  pointer-events: none;
}

#data-panel .data-import-upload-card::before {
  top: 9px;
  right: 9px;
  border-top: 3px solid #7638d5;
  border-right: 3px solid #7638d5;
  border-radius: 0 8px 0 0;
}

#data-panel .data-import-upload-card::after {
  bottom: 9px;
  left: 9px;
  border-bottom: 3px solid #7638d5;
  border-left: 3px solid #7638d5;
  border-radius: 0 0 0 8px;
}

#data-panel .data-import-upload-card.is-drag-over {
  border-color: #7638d5;
  background:
    radial-gradient(circle at 50% 45%, rgba(118, 56, 213, 0.1), transparent 56%),
    #fff2bd;
  box-shadow: 0 0 0 5px rgba(40, 100, 232, 0.13), 0 13px 28px rgba(43, 76, 155, 0.17);
  transform: translateY(-1px);
}

#data-panel .data-import-upload-icon {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: start center;
}

#data-panel .data-import-upload-icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

#data-panel .data-import-upload-card > div:not(.data-import-file-chips) {
  max-width: 100%;
}

#data-panel .data-import-upload-card h4 {
  margin: 0 0 4px;
  color: #10203f;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.2;
}

#data-panel .data-import-upload-card p {
  margin: 0;
  color: #34425b;
  font-size: 0.7rem;
  line-height: 1.4;
}

#data-panel .data-import-file-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#data-panel .data-import-file-chips span {
  min-width: 47px;
  border: 1px solid #2864e8;
  border-radius: 7px;
  background: #ffffff;
  color: #1d5fd1;
  padding: 5px 8px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

#data-panel .data-import-file-chips span:nth-child(2) {
  border-color: #159451;
  color: #087844;
}

#data-panel .data-import-file-chips span:nth-child(3) {
  border-color: #7638d5;
  color: #6825b5;
}

#data-panel .data-import-upload-button {
  width: min(260px, 100%);
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #2447bb;
  border-radius: 10px;
  background: linear-gradient(112deg, #145de0 0%, #3e4bd3 54%, #7638d5 100%);
  color: #ffffff;
  box-shadow: 0 4px 0 #29359e, 0 8px 14px rgba(35, 45, 128, 0.2);
  font-size: 0.9rem;
  font-weight: 600;
  transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

#data-panel .data-import-upload-button:hover:not(:disabled) {
  filter: brightness(1.08) saturate(1.06);
  box-shadow: 0 5px 0 #29359e, 0 9px 16px rgba(35, 45, 128, 0.23);
  transform: translateY(-1px);
}

#data-panel .data-import-upload-button:active:not(:disabled) {
  box-shadow: 0 2px 0 #29359e, 0 5px 9px rgba(35, 45, 128, 0.18);
  transform: translateY(3px);
}

#data-panel .map-data-template-status {
  color: #087844;
  text-align: center;
}

#data-panel .map-data-template-status.is-error {
  color: #b42318;
}

@media (max-width: 520px) {
  #data-panel .data-import-panel-header {
    min-height: 88px;
    gap: 8px;
    padding: 13px 10px 19px;
  }

  #data-panel .data-import-panel-header::before {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  #data-panel .data-import-panel-header h2 {
    font-size: 1.08rem;
  }

  #data-panel .data-import-panel-header .tool-panel-eyebrow {
    font-size: 0.54rem;
    letter-spacing: 0.07em;
  }

  #data-panel .data-import-panel-header .vm-tool-context-help,
  #data-panel .data-import-panel-header .tool-panel-close {
    width: 33px;
    height: 33px;
    flex-basis: 33px;
  }

  #data-panel .data-import-panel-header > .tool-panel-actions {
    gap: 5px;
  }

  #data-panel .data-import-panel-content {
    padding-inline: 8px;
  }

  #data-panel .data-import-step-heading {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 9px;
  }

  #data-panel .data-import-step-number {
    width: 28px;
    height: 28px;
  }

  #data-panel .data-import-step-heading h3 {
    font-size: 0.92rem;
  }

  #data-panel .data-import-template-card {
    padding: 14px 12px 13px;
  }

  #data-panel .data-import-template-copy {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 9px;
  }

  #data-panel .data-import-template-icon {
    width: 42px;
    height: 50px;
  }

  #data-panel .data-import-template-icon img {
    width: 40px;
    height: 40px;
  }

  #data-panel .data-import-template-copy p {
    font-size: 0.7rem;
  }

  #data-panel .data-import-download-button,
  #data-panel .data-import-upload-button {
    font-size: 0.84rem;
  }

  #data-panel .data-import-upload-card {
    min-height: 238px;
  }
}

.data-import-routes {
  display: grid;
  gap: 7px;
}

.data-import-routes > button {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 17px;
  align-items: center;
  gap: 9px;
  border: 1px solid #d5e1ed;
  border-radius: 10px;
  background: #fbfdff;
  color: #1e2c3d;
  padding: 9px 10px;
  text-align: left;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.data-import-routes > button:hover {
  border-color: #9fc2e7;
  background: #f3f8fe;
  box-shadow: 0 3px 9px rgba(37, 88, 156, 0.08);
}

.data-import-routes > button:focus-visible {
  outline: 2px solid rgba(18, 103, 213, 0.7);
  outline-offset: 2px;
}

.data-import-routes img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.data-import-routes span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.data-import-routes strong {
  font-size: 0.76rem;
}

.data-import-routes small {
  color: #68798d;
  font-size: 0.65rem;
  line-height: 1.32;
}

.data-import-routes > button > svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #7690ab;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.data-compatibility-status {
  border: 1px solid #a9d4b7;
  border-radius: 9px;
  background: #f0faf3;
  color: #17633a;
  padding: 9px 10px;
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.4;
}

.data-compatibility-status.is-error {
  border-color: #efb4b4;
  background: #fff4f4;
  color: #9f2f2f;
}

.data-compatibility-status[hidden] {
  display: none;
}

#statistics-panel {
  border-color: #4d43a6;
  border-radius: 13px;
  background: #fffdfc;
  box-shadow: 0 15px 38px rgba(21, 25, 83, 0.24);
}

#statistics-panel .statistics-panel-header {
  position: relative;
  min-height: 94px;
  gap: 10px;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(118deg, #071b46 0%, #142d75 54%, #5332a6 100%);
  box-shadow: none;
  padding: 15px 13px 21px;
}

#statistics-panel .statistics-panel-header::before {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.28));
}

#statistics-panel .statistics-panel-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    #2864e8 0%,
    #2864e8 25%,
    #159451 25%,
    #159451 50%,
    #f2a900 50%,
    #f2a900 75%,
    #7638d5 75%,
    #7638d5 100%
  );
  content: '';
}

#statistics-panel .statistics-panel-header h2 {
  margin: 4px 0 0;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

#statistics-panel .statistics-panel-header .tool-panel-eyebrow {
  color: #e8f1ff;
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

#statistics-panel .statistics-panel-header > .tool-panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

#statistics-panel .statistics-panel-header .vm-tool-context-help,
#statistics-panel .statistics-panel-header .tool-panel-close {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background: rgba(7, 27, 70, 0.24);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

#statistics-panel .statistics-panel-header .tool-panel-close {
  border-radius: 9px;
}

#statistics-panel .statistics-panel-header .vm-tool-context-help:hover,
#statistics-panel .statistics-panel-header .tool-panel-close:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  transform: translateY(-1px);
}

#statistics-panel .statistics-panel-header .vm-tool-context-help:focus-visible,
#statistics-panel .statistics-panel-header .tool-panel-close:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

#statistics-panel .statistics-panel-header .vm-panel-action-icon,
#statistics-panel .statistics-panel-header .tool-panel-close svg {
  width: 21px;
  height: 21px;
}

#statistics-panel .statistics-panel-content {
  gap: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(83, 50, 166, 0.045), transparent 34%),
    #fffdfc;
  padding: 14px 10px 20px;
  scrollbar-gutter: stable both-edges;
}

#statistics-panel .statistics-map-context {
  min-width: 0;
  margin: 0 0 -2px;
  overflow: hidden;
  color: #65758a;
  font-size: 0.68rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#statistics-panel .statistics-map-context strong {
  color: #354a67;
  font-weight: 600;
}

#statistics-panel .statistics-workflow {
  display: grid;
  gap: 12px;
}

#statistics-panel .statistics-step {
  min-width: 0;
}

#statistics-panel .statistics-step-heading {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

#statistics-panel .statistics-step-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #3474ee, #1c4eb7);
  color: #ffffff;
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 700;
}

#statistics-panel .statistics-step.is-upload .statistics-step-number {
  background: linear-gradient(145deg, #874ae0, #5820b5);
}

#statistics-panel .statistics-step-heading h3 {
  margin: 0;
  color: #10203f;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.18;
}

#statistics-panel .statistics-step-body {
  min-width: 0;
  display: grid;
  gap: 11px;
}

#statistics-panel .statistics-choice-divider {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #758197;
  font-size: 0.66rem;
  text-transform: uppercase;
}

#statistics-panel .statistics-choice-divider::before,
#statistics-panel .statistics-choice-divider::after {
  height: 1px;
  flex: 1 1 auto;
  background: #d8deea;
  content: '';
}

#statistics-panel .statistics-choice-divider span {
  padding: 0 2px;
}

#statistics-panel .statistics-source-card,
#statistics-panel .statistics-template-card,
#statistics-panel .territory-data-card,
#statistics-panel .statistics-current-card {
  min-width: 0;
  border: 1px solid #d9e0ea;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(22, 39, 73, 0.09);
}

#statistics-panel .statistics-source-card {
  display: grid;
  gap: 9px;
  background: linear-gradient(145deg, #ffffff, #f4f8ff);
  padding: 13px;
}

#statistics-panel .statistics-source-card > p:first-child {
  margin: 0;
  color: #59687d;
  font-size: 0.72rem;
  line-height: 1.4;
}

#statistics-panel .dataset-select-block {
  gap: 5px;
}

#statistics-panel .dataset-select-block > span {
  color: #45566c;
  font-size: 0.69rem;
  font-weight: 600;
}

#statistics-panel .dataset-select {
  min-height: 36px;
  font-size: 0.72rem;
}

#statistics-panel .statistics-dataset-description {
  min-height: 0;
  margin: -1px 0 0;
  color: #65758a;
  font-size: 0.68rem;
  line-height: 1.4;
}

#statistics-panel .statistics-catalogue-button,
#statistics-panel .statistics-template-button,
#statistics-panel .statistics-upload-button {
  width: 100%;
  min-height: 41px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 9px;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

#statistics-panel .statistics-catalogue-button {
  border-color: #1f55bd;
  background: linear-gradient(180deg, #3474ee, #245cc7);
  box-shadow: 0 3px 0 #193f8c, 0 7px 12px rgba(25, 63, 140, 0.16);
}

#statistics-panel .statistics-catalogue-button:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 4px 0 #193f8c, 0 8px 14px rgba(25, 63, 140, 0.2);
  transform: translateY(-1px);
}

#statistics-panel .statistics-catalogue-button:disabled {
  box-shadow: none;
  opacity: 0.5;
}

#statistics-panel .statistics-source-card .circle-centre-status,
#statistics-panel .statistics-current-card .circle-centre-status {
  margin: 0;
  color: #65758a;
  font-size: 0.66rem;
  line-height: 1.4;
}

#statistics-panel .statistics-template-card {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 7px 11px;
  background: linear-gradient(145deg, #ffffff, #f8f7ff);
  padding: 13px;
}

#statistics-panel .statistics-template-icon {
  width: 44px;
  height: 44px;
  display: grid;
  grid-row: 1;
  place-items: center;
}

#statistics-panel .statistics-template-icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

#statistics-panel .statistics-template-card > p:not(.map-data-template-status) {
  align-self: center;
  margin: 0;
  color: #536278;
  font-size: 0.7rem;
  line-height: 1.42;
}

#statistics-panel .statistics-template-button,
#statistics-panel .statistics-template-card > .map-data-template-status {
  grid-column: 1 / -1;
}

#statistics-panel .statistics-template-button {
  border-color: #087844;
  background: linear-gradient(180deg, #0aa35c, #008447);
  box-shadow: 0 3px 0 #066b3e, 0 7px 12px rgba(5, 91, 54, 0.16);
}

#statistics-panel .statistics-template-button:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 4px 0 #066b3e, 0 8px 14px rgba(5, 91, 54, 0.2);
  transform: translateY(-1px);
}

#statistics-panel .statistics-template-button:disabled {
  box-shadow: none;
  opacity: 0.5;
}

#statistics-panel .statistics-template-button svg,
#statistics-panel .statistics-upload-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#statistics-panel .territory-data-card {
  padding: 0;
  overflow: hidden;
}

#statistics-panel .statistics-upload-zone {
  min-height: 232px;
  align-content: start;
  justify-items: center;
  gap: 8px;
  border: 2px dashed #2864e8;
  border-radius: 11px;
  background:
    radial-gradient(circle at 7% 94%, rgba(242, 169, 0, 0.1), transparent 34%),
    radial-gradient(circle at 94% 6%, rgba(255, 255, 255, 0.7), transparent 38%),
    #fff6cf;
  padding: 10px 14px 15px;
  color: #34425b;
}

#statistics-panel .statistics-upload-zone:hover,
#statistics-panel .statistics-upload-zone:focus-visible,
#statistics-panel .statistics-upload-zone.is-dragging {
  border-color: #7638d5;
  background: #fff2bd;
  box-shadow: inset 0 0 0 2px rgba(118, 56, 213, 0.08);
  outline: none;
}

#statistics-panel .statistics-upload-zone > img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}

#statistics-panel .statistics-upload-zone > strong {
  color: #10203f;
  font-size: 0.9rem;
  font-weight: 600;
}

#statistics-panel .statistics-upload-zone > span {
  color: #526170;
  font-size: 0.68rem;
  line-height: 1.35;
}

#statistics-panel .statistics-file-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

#statistics-panel .statistics-file-chips span {
  min-width: 43px;
  border: 1px solid #2864e8;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.82);
  color: #1d5fd1;
  padding: 4px 7px;
  font-size: 0.62rem;
  font-weight: 600;
}

#statistics-panel .statistics-file-chips span:nth-child(2) {
  border-color: #159451;
  color: #087844;
}

#statistics-panel .statistics-file-chips span:nth-child(3) {
  border-color: #7638d5;
  color: #6825b5;
}

#statistics-panel .statistics-upload-button {
  width: min(250px, 100%);
  min-height: 41px;
  margin-top: 1px;
  border-color: #3145bb;
  background: linear-gradient(112deg, #145de0 0%, #3e4bd3 54%, #7638d5 100%);
  box-shadow: 0 3px 0 #29359e, 0 7px 12px rgba(35, 45, 128, 0.16);
}

#statistics-panel .statistics-upload-button:hover:not(:disabled) {
  filter: brightness(1.07);
  box-shadow: 0 4px 0 #29359e, 0 8px 14px rgba(35, 45, 128, 0.2);
  transform: translateY(-1px);
}

#statistics-panel .statistics-current-card {
  display: grid;
  gap: 8px;
  background: #f8fafc;
  box-shadow: none;
  padding: 10px 11px;
}

#statistics-panel .metrics-active-controls {
  gap: 8px;
}

#statistics-panel .metrics-remove-button {
  min-height: 34px;
  font-size: 0.7rem;
}

/* Compact professional theme shared by Images, Page and Display. */
.workspace-themed-panel {
  border-color: #264dad;
  border-radius: 13px;
  background: #fffdfc;
  box-shadow: 0 15px 38px rgba(14, 37, 89, 0.24);
}

.workspace-themed-header {
  position: relative;
  min-height: 94px;
  gap: 10px;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(118deg, #071b46 0%, #143578 58%, #4d36a8 100%);
  box-shadow: none;
  padding: 15px 13px 21px;
}

.workspace-themed-header::before {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.28));
}

.workspace-themed-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    #2864e8 0%,
    #2864e8 25%,
    #159451 25%,
    #159451 50%,
    #f2a900 50%,
    #f2a900 75%,
    #7638d5 75%,
    #7638d5 100%
  );
  content: '';
}

.workspace-themed-header > div {
  align-self: center;
}

.workspace-themed-header h2 {
  margin: 4px 0 0;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.workspace-themed-header .tool-panel-eyebrow {
  color: #e8f1ff;
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.workspace-themed-header > .tool-panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.workspace-themed-header .vm-tool-context-help,
.workspace-themed-header .tool-panel-close {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(7, 27, 70, 0.24);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

.workspace-themed-header .vm-tool-context-help {
  border-radius: 999px;
}

.workspace-themed-header .tool-panel-close {
  border-radius: 9px;
}

.workspace-themed-header .vm-tool-context-help:hover,
.workspace-themed-header .tool-panel-close:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  transform: translateY(-1px);
}

.workspace-themed-header .vm-tool-context-help:focus-visible,
.workspace-themed-header .tool-panel-close:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.workspace-themed-header .vm-panel-action-icon,
.workspace-themed-header .tool-panel-close svg {
  width: 21px;
  height: 21px;
}

.workspace-themed-content {
  gap: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(77, 54, 168, 0.045), transparent 34%),
    #fffdfc;
  padding: 14px 10px 19px;
  scrollbar-gutter: stable both-edges;
}

.workspace-panel-step {
  min-width: 0;
}

.workspace-step-heading {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

.workspace-step-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #3474ee, #1c4eb7);
  color: #ffffff;
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 700;
}

.workspace-panel-step.is-secondary .workspace-step-number {
  background: linear-gradient(145deg, #874ae0, #5820b5);
}

.workspace-panel-step.is-tertiary .workspace-step-number {
  background: linear-gradient(145deg, #1ca967, #087844);
}

.workspace-step-heading h3 {
  margin: 0;
  color: #10203f;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.18;
}

.workspace-step-body {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.workspace-settings-card {
  min-width: 0;
  gap: 9px;
  border: 1px solid #d9e0ea;
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff, #f8faff);
  box-shadow: 0 6px 16px rgba(22, 39, 73, 0.08);
  padding: 11px;
}

.workspace-step-helper,
.workspace-compact-hint,
.workspace-inline-status {
  margin: 0;
  color: #65758a;
  font-size: 0.67rem;
  line-height: 1.4;
}

.workspace-compact-hint {
  border-top: 1px solid #e1e6ee;
  padding-top: 8px;
}

.workspace-upload-zone {
  min-height: 205px;
  align-content: start;
  justify-items: center;
  gap: 7px;
  border: 2px dashed #2864e8;
  border-radius: 12px;
  background:
    radial-gradient(circle at 7% 94%, rgba(242, 169, 0, 0.1), transparent 34%),
    radial-gradient(circle at 94% 6%, rgba(255, 255, 255, 0.72), transparent 38%),
    #fff6cf;
  padding: 9px 13px 13px;
  color: #34425b;
}

.workspace-upload-zone:hover,
.workspace-upload-zone:focus-visible,
.workspace-upload-zone.is-dragging {
  border-color: #7638d5;
  background: #fff2bd;
  box-shadow: inset 0 0 0 2px rgba(118, 56, 213, 0.08);
  outline: none;
}

.workspace-upload-zone > img {
  width: 66px;
  height: 66px;
  object-fit: contain;
}

.workspace-upload-zone > strong {
  color: #10203f;
  font-size: 0.9rem;
  font-weight: 600;
}

.workspace-upload-zone > span {
  color: #526170;
  font-size: 0.68rem;
  line-height: 1.35;
}

.workspace-file-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.workspace-file-chips span {
  min-width: 43px;
  border: 1px solid #2864e8;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.84);
  color: #1d5fd1;
  padding: 3px 6px;
  font-size: 0.6rem;
  font-weight: 600;
}

.workspace-file-chips span:nth-child(2) {
  border-color: #159451;
  color: #087844;
}

.workspace-file-chips span:nth-child(3) {
  border-color: #7638d5;
  color: #6825b5;
}

.workspace-primary-button {
  width: min(245px, 100%);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 1px;
  border-color: #3145bb;
  border-radius: 9px;
  background: linear-gradient(112deg, #145de0 0%, #3e4bd3 54%, #7638d5 100%);
  color: #ffffff;
  box-shadow: 0 3px 0 #29359e, 0 7px 12px rgba(35, 45, 128, 0.16);
  font-size: 0.81rem;
  font-weight: 600;
}

.workspace-primary-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workspace-primary-button:hover:not(:disabled) {
  filter: brightness(1.07);
  box-shadow: 0 4px 0 #29359e, 0 8px 14px rgba(35, 45, 128, 0.2);
  transform: translateY(-1px);
}

#images-panel .page-image-count-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 7px;
  padding: 0 2px;
}

#images-panel .page-image-count-row strong {
  font-size: 0.7rem;
  white-space: nowrap;
}

#images-panel .page-image-count-row span {
  font-size: 0.64rem;
  line-height: 1.35;
}

#images-panel .workspace-inline-status:empty,
#page-panel .export-status:empty {
  display: none;
}

#images-panel .workspace-list-card {
  gap: 6px;
}

#images-panel .page-image-empty {
  border-style: dashed;
  background: #fbfcfe;
  padding: 9px;
  font-size: 0.68rem;
}

#images-panel .page-image-editor {
  gap: 9px;
}

#images-panel .page-image-editor .control-group-header h3 {
  font-size: 0.82rem;
}

#images-panel .page-image-editor .control-group-header p {
  font-size: 0.66rem;
}

#images-panel .page-image-frame-controls {
  gap: 9px;
  padding-top: 9px;
}

#images-panel .page-image-editor-actions .dataset-button {
  min-height: 34px;
  font-size: 0.7rem;
}

#page-panel .page-paper-card {
  gap: 10px;
}

#page-panel .pdf-page-settings-grid {
  grid-template-columns: 0.82fr 1.18fr;
  gap: 8px;
}

#page-panel .pdf-orientation-block {
  gap: 4px;
}

#page-panel .pdf-orientation-block > span {
  font-size: 0.68rem;
  font-weight: 600;
}

#page-panel .pdf-orientation-select {
  min-height: 35px;
  font-size: 0.72rem;
}

#page-panel .pdf-legend-option {
  border-top: 1px solid #e1e6ee;
  padding-top: 9px;
  font-size: 0.72rem;
  font-weight: 600;
}

#page-panel .page-colour-grid {
  gap: 7px;
}

#page-panel .page-colour-control,
#images-panel .page-colour-control {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  border-radius: 8px;
  padding: 7px 8px;
}

#page-panel .page-colour-control input[type='color'],
#images-panel .page-colour-control input[type='color'] {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

#page-panel .page-colour-control strong,
#images-panel .page-colour-control strong {
  font-size: 0.73rem;
  font-weight: 600;
}

#page-panel .page-colour-control small,
#images-panel .page-colour-control small {
  font-size: 0.63rem;
}

#page-panel .page-frame-card,
#page-panel .map-frame-controls,
#page-panel .map-frame-style-controls {
  gap: 9px;
}

#page-panel .map-frame-controls {
  padding-top: 9px;
}

#page-panel .mini-checkbox {
  padding: 6px 8px;
  font-size: 0.7rem;
}

#display-panel .display-panel-content {
  gap: 14px;
}

#display-panel .zoom-card {
  border-color: #cadbf4;
  border-radius: 9px;
  background: linear-gradient(135deg, #edf5ff, #f7f9ff);
  padding: 7px 10px;
  font-size: 0.7rem;
  font-weight: 600;
}

#display-panel .zoom-card output {
  color: #245cc7;
  font-size: 0.76rem;
}

#display-panel .display-boundary-card {
  gap: 9px;
}

#display-panel .boundary-style-note {
  border-top: 1px solid #e1e6ee;
  padding-top: 7px;
  font-size: 0.64rem;
}

#display-panel .display-filter-card {
  padding: 9px;
}

#display-panel .country-filters {
  gap: 5px;
  max-height: 142px;
}

#display-panel .mini-checkbox {
  min-height: 32px;
  padding: 5px 7px;
  font-size: 0.7rem;
}

#display-panel .info-panel {
  max-height: 205px;
  border-color: #d9e0ea;
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff, #f8faff);
  padding: 10px;
  overflow: auto;
}

#display-panel .info-panel :is(h2, h4) {
  margin: 0 0 5px;
  color: #17212b;
  font-size: 0.8rem;
  line-height: 1.2;
}

#display-panel .info-panel p {
  font-size: 0.68rem;
  line-height: 1.4;
}

@media (max-width: 520px) {
  #statistics-panel .statistics-panel-header {
    min-height: 88px;
    gap: 8px;
    padding: 13px 10px 19px;
  }

  #statistics-panel .statistics-panel-header::before {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  #statistics-panel .statistics-panel-header h2 {
    font-size: 1.08rem;
  }

  #statistics-panel .statistics-panel-header .tool-panel-eyebrow {
    font-size: 0.54rem;
  }

  #statistics-panel .statistics-panel-header .vm-tool-context-help,
  #statistics-panel .statistics-panel-header .tool-panel-close {
    width: 33px;
    height: 33px;
    flex-basis: 33px;
  }

  #statistics-panel .statistics-panel-content {
    padding-inline: 8px;
  }

  .workspace-themed-header {
    min-height: 88px;
    gap: 8px;
    padding: 13px 10px 19px;
  }

  .workspace-themed-header::before {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .workspace-themed-header h2 {
    font-size: 1.08rem;
  }

  .workspace-themed-header .tool-panel-eyebrow {
    font-size: 0.54rem;
  }

  .workspace-themed-header .vm-tool-context-help,
  .workspace-themed-header .tool-panel-close {
    width: 33px;
    height: 33px;
    flex-basis: 33px;
  }

  .workspace-themed-content {
    padding-inline: 8px;
  }
}

.legacy-data-controls[hidden] {
  display: none;
}

.switch-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.switch-row input {
  position: absolute;
  opacity: 0;
}

.switch-row > span {
  position: relative;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 140ms ease;
}

.switch-row > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
  content: '';
  transition: transform 140ms ease;
}

.switch-row input:checked + span {
  background: var(--ui-blue);
}

.switch-row input:checked + span::after {
  transform: translateX(15px);
}

.switch-row input:focus-visible + span {
  outline: 3px solid rgba(18, 103, 213, 0.18);
  outline-offset: 2px;
}

.switch-row b {
  color: #516073;
  font-size: 0.74rem;
}

.zoom-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e3e9f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #4d5d70;
  padding: 10px 13px;
  font-size: 0.8rem;
  font-weight: 680;
}

.zoom-card output {
  color: var(--ui-blue);
}

.info-panel {
  position: static;
  width: auto;
  max-height: none;
  border: 1px solid #e3e9f0;
  border-radius: 10px;
  background: #f8fafc;
  box-shadow: none;
  padding: 13px;
  overflow: visible;
}

.pdf-map-title-preview {
  position: absolute;
  z-index: 2;
  top: 4.5%;
  left: 10%;
  width: 80%;
  height: 9%;
  display: grid;
  align-content: center;
  gap: 2px;
  box-sizing: border-box;
  border: 1px solid rgba(71, 85, 105, 0.34);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.88);
  color: #17212b;
  padding: clamp(4px, 1.1%, 12px) clamp(6px, 2%, 18px);
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.pdf-map-title-preview.is-active-composition {
  outline: 2px solid #1267d5;
  outline-offset: 2px;
}

.pdf-map-title-preview:focus-visible {
  outline: 3px solid rgba(18, 103, 213, 0.48);
  outline-offset: 2px;
}

#app.is-pdf-reviewing .pdf-map-title-preview {
  outline: 0;
  pointer-events: none;
}

#app.is-pdf-reviewing .pdf-print-legend.is-active-composition {
  outline: 0;
}

.pdf-map-title-preview strong {
  overflow: hidden;
  line-height: 1.15;
  overflow-wrap: anywhere;
  white-space: normal;
}

.pdf-map-title-preview span {
  overflow: hidden;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.pdf-map-title-preview span:empty {
  display: none;
}

.pdf-map-title-preview[hidden] {
  display: none;
}

.map-title-resize-handle {
  position: absolute;
  z-index: 3;
  display: none;
  width: 10px;
  height: 10px;
  border: 1px solid #ffffff;
  border-radius: 2px;
  background: #1267d5;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.32);
}

.pdf-map-title-preview.is-active-composition .map-title-resize-handle {
  display: block;
}

.map-title-resize-handle.is-n { top: -6px; left: calc(50% - 5px); cursor: ns-resize; }
.map-title-resize-handle.is-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.map-title-resize-handle.is-e { top: calc(50% - 5px); right: -6px; cursor: ew-resize; }
.map-title-resize-handle.is-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.map-title-resize-handle.is-s { bottom: -6px; left: calc(50% - 5px); cursor: ns-resize; }
.map-title-resize-handle.is-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.map-title-resize-handle.is-w { top: calc(50% - 5px); left: -6px; cursor: ew-resize; }
.map-title-resize-handle.is-nw { top: -6px; left: -6px; cursor: nwse-resize; }

.app-statusbar {
  position: absolute;
  z-index: 100;
  inset: auto 0 0;
  height: var(--statusbar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-top: 1px solid var(--ui-border);
  background: rgba(255, 255, 255, 0.98);
  color: #657386;
  font-size: 0.75rem;
}

.statusbar-copyright {
  position: absolute;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.statusbar-copyright button {
  border: 0;
  background: transparent;
  color: #315f91;
  cursor: pointer;
  padding: 2px 1px;
  font: inherit;
  font-weight: 720;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.statusbar-copyright button:hover {
  color: var(--ui-blue-dark);
}

.statusbar-copyright button:focus-visible {
  border-radius: 3px;
  outline: 2px solid rgba(18, 103, 213, 0.24);
  outline-offset: 2px;
}

@media (max-width: 1050px) {
  .statusbar-copyright-text {
    display: none;
  }
}

.app-statusbar i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #8793a2;
}

.app-statusbar strong {
  color: #28374a;
}

.status-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2e8a57;
}

.spreadsheet-drop-overlay {
  inset: calc(var(--topbar-height) + 10px) 10px calc(var(--statusbar-height) + 10px) calc(var(--rail-width) + 10px);
}

.spreadsheet-notice {
  bottom: calc(var(--statusbar-height) + 14px);
}

.spreadsheet-modal-backdrop {
  position: fixed;
  z-index: 130;
}

.ol-zoom {
  top: calc(var(--topbar-height) + 12px);
  left: calc(var(--rail-width) + 12px);
}

#app.is-pdf-reviewing .tool-panel,
#app.is-pdf-reviewing .tool-rail {
  opacity: 0.16;
  filter: blur(3px) saturate(0.45);
  pointer-events: none;
}

#app.is-pdf-reviewing .app-topbar > :not(.topbar-actions) {
  opacity: 0.22;
}

@media (max-width: 900px) {
  .app-brand {
    min-width: auto;
  }

  .save-indicator {
    display: none;
  }

  .project-heading {
    display: none;
  }

  .map-search {
    width: min(300px, 38vw);
    min-width: 150px;
  }

  .history-controls {
    margin-left: 0;
  }

  .topbar-button {
    width: 42px;
    padding: 0;
    font-size: 0;
  }

}

@media (max-width: 620px) {
  :root {
    --topbar-height: 58px;
    --statusbar-height: 30px;
    --rail-width: 62px;
  }

  .app-topbar {
    gap: 7px;
    padding: 0 8px;
  }

  .app-brand-logo {
    width: 112px;
  }

  .project-heading {
    display: none;
  }

  .map-search {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    margin-left: 0;
  }

  .map-search input {
    font-size: 0.74rem;
  }

  .import-quality-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metrics-column-layout,
  .metrics-column-list {
    grid-template-columns: 1fr;
  }

  .history-controls {
    margin-left: auto;
  }

  .tool-rail-button {
    min-height: 58px;
    font-size: 0.64rem;
  }

  .tool-panel,
  .dataset-panel,
  .legend-panel,
  .labels-panel,
  .page-panel,
  .display-panel {
    right: 10px;
    width: calc(100vw - var(--rail-width) - 20px) !important;
  }

  .app-statusbar {
    gap: 8px;
    font-size: 0.65rem;
  }

  .status-saved,
  .app-statusbar i:last-of-type {
    display: none;
  }

  .statusbar-copyright {
    position: static;
    margin-right: auto;
    padding-left: 8px;
  }

  .statusbar-copyright button {
    font-size: 0.67rem;
  }
}

/* Compact public contact dialog. */
.contact-modal-backdrop {
  z-index: 335;
}

.contact-dialog {
  width: min(500px, calc(100vw - 30px));
  max-height: calc(100vh - 30px);
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.3);
}

.contact-dialog-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #e4eaf1;
  background: linear-gradient(135deg, #f7fbff, #ffffff);
  padding: 15px 17px;
}

.contact-dialog-header h2,
.contact-dialog-header p {
  margin: 0;
}

.contact-dialog-header h2 {
  color: #172334;
  font-size: 1.18rem;
  line-height: 1.2;
}

.contact-dialog-header p {
  margin-top: 4px;
  color: #657386;
  font-size: 0.78rem;
  line-height: 1.35;
}

.contact-dialog-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 10px;
  background: #e8f2fd;
  color: #245f9d;
}

.contact-dialog-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.contact-dialog-header .spreadsheet-modal-close {
  justify-self: end;
}

.contact-form {
  display: grid;
  gap: 13px;
  overflow-y: auto;
  padding: 17px;
}

.contact-form > label:not(.contact-honeypot) {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 720;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid #ccd7e4;
  border-radius: 8px;
  outline: 0;
  background: #ffffff;
  color: #172334;
  padding: 9px 11px;
  font: inherit;
  font-weight: 450;
}

.contact-form input {
  min-height: 42px;
}

.contact-form textarea {
  min-height: 128px;
  resize: vertical;
  line-height: 1.45;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--ui-blue);
  box-shadow: 0 0 0 3px rgba(18, 103, 213, 0.1);
}

.contact-form label small {
  justify-self: end;
  color: #7b8798;
  font-size: 0.68rem;
  font-weight: 520;
}

.contact-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.contact-status {
  min-height: 1.3em;
  margin: -2px 0 0;
  color: #64748b;
  font-size: 0.76rem;
  line-height: 1.4;
}

.contact-status.is-error {
  color: #b42318;
}

.contact-status.is-success {
  color: #167343;
  font-weight: 650;
}

.contact-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.contact-form-actions button {
  min-height: 40px;
}

@media (max-width: 540px) {
  .contact-modal-backdrop {
    padding: 8px;
  }

  .contact-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .contact-dialog-header,
  .contact-form {
    padding-right: 14px;
    padding-left: 14px;
  }
}

/* Account access */
.account-button {
  max-width: 230px;
  white-space: nowrap;
}

.account-button > #account-button-label {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-plan-badge {
  border-radius: 999px;
  background: #e8f2ff;
  color: #0b55b5;
  padding: 3px 7px;
  font-size: 0.66rem;
  font-weight: 760;
  line-height: 1;
}

.account-modal-backdrop {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 31, 49, 0.46);
  padding: 20px;
  backdrop-filter: blur(5px);
}

.account-modal-backdrop[hidden] {
  display: none;
}

.account-dialog {
  width: min(540px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.account-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #e7edf4;
  background: linear-gradient(135deg, #f7fbff, #ffffff);
  padding: 20px 22px 17px;
}

.account-dialog-eyebrow {
  margin: 0 0 3px;
  color: var(--ui-blue);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-dialog-header h2 {
  margin: 0;
  color: #172334;
  font-size: 1.28rem;
}

.account-dialog-header p:last-child {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.4;
}

.account-dialog-body {
  min-height: 0;
  overflow-y: auto;
  padding: 20px 22px 22px;
}

.account-loading {
  border-radius: 10px;
  background: #f4f8fc;
  color: #526276;
  padding: 14px;
  text-align: center;
}

.account-setup-card {
  border: 1px solid #f0cf7a;
  border-radius: 10px;
  background: #fff9e9;
  color: #754f0b;
  padding: 14px 15px;
}

.account-setup-card p {
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
}

.account-setup-card code {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.75);
  padding: 1px 4px;
}

.account-provider-actions {
  display: grid;
  gap: 10px;
  margin-bottom: 15px;
}

.account-provider-actions[hidden],
.account-google-button[hidden],
.account-provider-button[hidden] {
  display: none;
}

.account-google-button {
  min-height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
}

.account-google-button > div,
.account-google-button iframe {
  max-width: 100% !important;
}

.account-provider-button {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  border: 1px solid #c8d0da;
  border-radius: 8px;
  background: #ffffff;
  color: #171717;
  cursor: pointer;
  padding: 7px 12px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
}

.account-provider-button:hover {
  border-color: #9da8b6;
  background: #f8fafc;
}

.account-provider-button:focus-visible {
  outline: 3px solid rgba(18, 103, 213, 0.2);
  outline-offset: 1px;
}

.account-apple-mark {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", sans-serif;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
}

.account-provider-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: #78879a;
  font-size: 0.72rem;
  font-weight: 650;
}

.account-provider-divider::before,
.account-provider-divider::after {
  height: 1px;
  background: #e0e7ef;
  content: "";
}

.account-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border-radius: 10px;
  background: #edf2f7;
  padding: 4px;
}

.account-tab {
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #607086;
  cursor: pointer;
  font-weight: 720;
}

.account-tab.is-active {
  background: #ffffff;
  color: var(--ui-blue-dark);
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.12);
}

.account-view {
  padding-top: 18px;
}

.account-view[hidden],
.account-loading[hidden],
.account-setup-card[hidden],
#account-signed-out[hidden],
#account-signed-in[hidden] {
  display: none;
}

.account-view h3 {
  margin: 0 0 5px;
  color: #172334;
  font-size: 1rem;
}

.account-view > p {
  margin: 0 0 15px;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.5;
}

.account-form {
  display: grid;
  gap: 13px;
}

.account-form label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 720;
}

.account-form label small {
  color: #8491a2;
  font-size: 0.7rem;
  font-weight: 560;
}

.account-form input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #ccd7e4;
  border-radius: 8px;
  outline: 0;
  background: #ffffff;
  color: #172334;
  padding: 8px 10px;
  font: inherit;
  font-weight: 500;
}

.account-form input:focus {
  border-color: var(--ui-blue);
  box-shadow: 0 0 0 3px rgba(18, 103, 213, 0.11);
}

.account-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-submit-button,
.account-logout-button {
  min-height: 40px;
  border: 1px solid var(--ui-blue);
  border-radius: 8px;
  background: var(--ui-blue);
  color: #ffffff;
  cursor: pointer;
  padding: 0 15px;
  font-weight: 720;
}

.account-form > .account-submit-button {
  justify-self: end;
}

.account-submit-button:hover:not(:disabled) {
  border-color: var(--ui-blue-dark);
  background: var(--ui-blue-dark);
}

.account-submit-button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.account-text-button,
.account-back-button {
  border: 0;
  background: transparent;
  color: var(--ui-blue-dark);
  cursor: pointer;
  padding: 5px 0;
  font-weight: 680;
}

.account-back-button {
  margin-bottom: 12px;
}

.account-reset-link {
  display: inline-flex;
  margin-top: 14px;
  color: var(--ui-blue-dark);
  font-size: 0.82rem;
  font-weight: 720;
}

.account-reset-link[hidden] {
  display: none;
}

.account-profile-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #dce5ef;
  border-radius: 11px;
  padding: 13px;
}

.account-avatar {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: #e8f2ff;
  color: #0b55b5;
  font-size: 1.08rem;
  font-weight: 800;
}

.account-profile-card > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.account-profile-card strong,
.account-profile-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-profile-card > div span {
  color: #68788c;
  font-size: 0.76rem;
}

.account-profile-plan {
  border-radius: 999px;
  background: #edf5ff;
  color: #0b55b5;
  padding: 5px 8px;
  font-size: 0.7rem;
  font-weight: 760;
}

.account-access-note {
  display: grid;
  gap: 3px;
  margin-top: 13px;
  border-radius: 9px;
  background: #f4f8fc;
  color: #526276;
  padding: 11px 12px;
  font-size: 0.76rem;
  line-height: 1.4;
}

.account-access-note strong {
  color: #314358;
}

.account-subscription-button {
  width: 100%;
  margin-top: 10px;
}

.subscription-dialog {
  width: min(820px, calc(100vw - 32px));
  max-height: min(780px, calc(100vh - 32px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.3);
}

.subscription-dialog-body {
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
}

.stripe-test-mode-badge {
  flex: 0 0 auto;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  padding: 6px 9px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.stripe-test-mode-badge[hidden],
.subscription-test-notice[hidden] {
  display: none;
}

.subscription-test-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  margin-bottom: 16px;
  border: 1px solid #f2b84b;
  border-radius: 10px;
  background: #fffbeb;
  color: #78350f;
  padding: 11px 13px;
  font-size: 0.8rem;
}

.subscription-test-notice span {
  color: #92400e;
}

.subscription-reason {
  margin-bottom: 16px;
  border: 1px solid #bfdbfe;
  border-radius: 9px;
  background: #eff6ff;
  color: #1e4f88;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 680;
}

.subscription-reason[hidden],
.subscription-account-step[hidden],
.subscription-active[hidden] {
  display: none;
}

.subscription-account-step {
  margin-bottom: 18px;
  border: 1px solid #dbe4ee;
  border-radius: 11px;
  background: #f8fafc;
  padding: 16px;
}

.subscription-account-step h3,
.subscription-account-step p {
  margin: 0 0 8px;
}

.subscription-account-step > p,
.subscription-signin-hint {
  color: #64748b;
  font-size: 0.8rem;
}

.subscription-account-step .account-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.subscription-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.subscription-plan {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  border: 1px solid #d7e1ec;
  border-radius: 12px;
  background: #fff;
  padding: 17px;
}

.subscription-plan.is-featured {
  border-color: #7db5fa;
  box-shadow: inset 0 3px 0 var(--ui-blue);
}

.subscription-plan h3,
.subscription-plan p {
  margin: 0;
}

.subscription-plan p {
  min-height: 42px;
  color: #64748b;
  font-size: 0.79rem;
  line-height: 1.45;
}

.subscription-plan-price {
  color: #172334;
  font-size: 1.03rem;
  font-weight: 800;
}

.subscription-plan button {
  width: 100%;
  margin-top: 5px;
}

.subscription-loading {
  grid-column: 1 / -1;
  color: #64748b;
  text-align: center;
}

.subscription-active {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #b7e3c6;
  border-radius: 11px;
  background: #f0fdf4;
  color: #176236;
  padding: 14px;
}

.subscription-active.is-cancelling {
  border-color: #edcf83;
  background: #fffbeb;
  color: #7a5408;
}

.subscription-active.is-cancelling > span {
  background: #fce9ac;
}

.subscription-active > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #d5f5df;
  font-weight: 900;
}

.subscription-active p {
  margin: 3px 0 0;
  font-size: 0.78rem;
}

.subscription-active-actions {
  display: grid;
  justify-items: stretch;
  gap: 7px;
  min-width: 150px;
}

.subscription-active-actions button[hidden],
.subscription-cancel-confirm[hidden] {
  display: none;
}

.subscription-complimentary-upgrade {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-inline: 12px;
}

.subscription-complimentary-upgrade img {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.subscription-cancel-button {
  min-height: 40px;
  border: 1px solid #d56a61;
  border-radius: 8px;
  background: #fff7f6;
  color: #a12f27;
  cursor: pointer;
  padding: 0 14px;
  font-weight: 720;
}

.subscription-cancel-button:hover:not(:disabled) {
  border-color: #b42318;
  background: #fff0ee;
}

.subscription-cancel-button.is-confirm {
  background: #b42318;
  color: #ffffff;
}

.subscription-cancel-button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.subscription-cancel-confirm {
  margin-top: 14px;
  border: 1px solid #efb3ad;
  border-radius: 11px;
  background: #fff8f7;
  color: #6f2b25;
  padding: 15px;
}

.subscription-cancel-confirm h3,
.subscription-cancel-confirm p {
  margin: 0;
}

.subscription-cancel-confirm h3 {
  font-size: 0.94rem;
}

.subscription-cancel-confirm p {
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.5;
}

.subscription-cancel-confirm > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 13px;
}

.subscription-secure-note {
  margin: 17px 0 0;
  color: #64748b;
  font-size: 0.75rem;
  text-align: center;
}

.subscription-account-type,
.organisation-management {
  margin-bottom: 18px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, #f7fafe 100%);
  padding: 16px;
}

.subscription-account-type[hidden],
.subscription-organisation-fields[hidden],
.organisation-management[hidden],
.organisation-owner-controls[hidden],
#organisation-invitations-section[hidden],
.organisation-activity-section[hidden],
.organisation-invitation-details[hidden] {
  display: none;
}

.subscription-account-type > div:first-child,
.organisation-management-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.subscription-account-type h3,
.subscription-account-type p,
.organisation-management h3,
.organisation-management h4,
.organisation-management p {
  margin: 0;
}

.subscription-account-type p,
.organisation-management-heading p {
  margin-top: 3px;
  color: #65758a;
  font-size: 0.78rem;
}

.subscription-step-number {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #2c6bed;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 850;
}

.subscription-account-type-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.subscription-account-type-option {
  display: grid;
  gap: 3px;
  min-height: 72px;
  border: 1px solid #d5dfeb;
  border-radius: 10px;
  background: #fff;
  color: #26384c;
  cursor: pointer;
  padding: 12px 14px;
  text-align: left;
}

.subscription-account-type-option:hover {
  border-color: #8db8ef;
  background: #f8fbff;
}

.subscription-account-type-option.is-selected {
  border-color: #2c6bed;
  background: #f1f6ff;
  box-shadow: inset 0 0 0 1px #2c6bed;
}

.subscription-account-type-option strong {
  font-size: 0.9rem;
}

.subscription-account-type-option span {
  color: #65758a;
  font-size: 0.76rem;
}

.subscription-organisation-fields {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(210px, 0.8fr);
  gap: 12px;
  margin-top: 12px;
  border-top: 1px solid #dce5ef;
  padding-top: 12px;
}

.subscription-organisation-fields label {
  display: grid;
  gap: 6px;
  color: #33465b;
  font-size: 0.74rem;
  font-weight: 760;
}

.subscription-organisation-fields label > input {
  min-height: 42px;
  border: 1px solid #cfd9e5;
  border-radius: 8px;
  padding: 0 11px;
  font: inherit;
  font-size: 0.84rem;
}

.subscription-organisation-fields small {
  color: #77879a;
  font-weight: 550;
}

.subscription-seat-control {
  display: grid;
  grid-template-columns: 42px minmax(70px, 1fr) 42px;
}

.subscription-seat-control button,
.subscription-seat-control input {
  min-height: 42px;
  border: 1px solid #cfd9e5;
  background: #fff;
  color: #25405d;
  text-align: center;
  font: inherit;
  font-size: 0.9rem;
}

.subscription-seat-control button {
  cursor: pointer;
  font-size: 1.18rem;
}

.subscription-seat-control button:first-child {
  border-radius: 8px 0 0 8px;
}

.subscription-seat-control button:last-child {
  border-radius: 0 8px 8px 0;
}

.subscription-seat-control input {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.subscription-team-discount-note {
  grid-column: 1 / -1;
  border-radius: 7px;
  background: #edf3fa;
  color: #52667d;
  padding: 8px 10px;
  font-size: 0.75rem;
}

.subscription-team-discount-note.is-applied {
  background: #eaf8ef;
  color: #176b3a;
  font-weight: 720;
}

.subscription-organisation-upgrade-confirm {
  grid-column: 1 / -1;
  justify-self: end;
  min-width: 220px;
}

.subscription-plan-price.is-organisation-price {
  display: grid;
  gap: 4px;
  min-height: 86px;
  font-size: 0.76rem;
  font-weight: 620;
}

.subscription-plan-price.is-organisation-price span {
  color: #5f7084;
}

.subscription-plan-price.is-organisation-price strong {
  margin-top: 3px;
  color: #172334;
  font-size: 1rem;
}

.subscription-plan-price.is-organisation-price small {
  color: #356298;
  line-height: 1.35;
}

.organisation-management {
  display: grid;
  gap: 14px;
  margin-bottom: 0;
}

.organisation-management-heading {
  justify-content: space-between;
}

.organisation-seat-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  gap: 8px;
}

.organisation-seat-summary > div {
  display: grid;
  gap: 2px;
  border: 1px solid #dce5ef;
  border-radius: 9px;
  background: #fff;
  padding: 10px 11px;
}

.organisation-seat-summary > div > strong {
  color: #1e3d61;
  font-size: 1.05rem;
}

.organisation-seat-summary > div > span,
.organisation-seat-summary > div > small {
  color: #718197;
  font-size: 0.68rem;
}

.organisation-seat-summary .organisation-billing-summary {
  grid-column: span 3;
}

.organisation-renewal-control {
  grid-template-columns: 78px minmax(140px, 1fr);
  align-items: center;
}

.organisation-renewal-control input,
.organisation-seat-actions input {
  min-height: 38px;
  min-width: 0;
  border: 1px solid #cfd9e5;
  border-radius: 7px;
  padding: 0 9px;
}

.organisation-owner-controls {
  display: grid;
  gap: 10px;
  border-top: 1px solid #dce5ef;
  border-bottom: 1px solid #dce5ef;
  padding: 13px 0;
}

.organisation-invite-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: end;
  gap: 9px;
}

.organisation-invite-form label,
.organisation-seat-actions label {
  display: grid;
  gap: 5px;
  color: #41556c;
  font-size: 0.72rem;
  font-weight: 760;
}

.organisation-invite-form input {
  min-height: 40px;
  border: 1px solid #cfd9e5;
  border-radius: 8px;
  padding: 0 10px;
}

.organisation-seat-actions {
  display: flex;
  align-items: end;
  gap: 8px;
}

.organisation-directory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.organisation-directory-heading span {
  color: #718197;
  font-size: 0.72rem;
}

.organisation-member-list,
.organisation-invitation-list {
  display: grid;
  gap: 7px;
}

.organisation-member,
.organisation-invitation-list article {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e0e7ef;
  border-radius: 9px;
  background: #fff;
  padding: 9px 10px;
}

.organisation-member-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #e8f1ff;
  color: #245bb3;
  font-size: 0.78rem;
  font-weight: 850;
}

.organisation-member > div:nth-child(2),
.organisation-invitation-list article > div:first-child {
  display: grid;
  gap: 2px;
}

.organisation-member > div:nth-child(2) span,
.organisation-invitation-list article span {
  color: #718197;
  font-size: 0.7rem;
}

.organisation-member-role {
  border-radius: 999px;
  background: #eef3f8;
  color: #53667c;
  padding: 5px 8px;
  font-size: 0.67rem;
  font-weight: 720;
}

.organisation-member-actions,
.organisation-invitation-row-actions {
  display: flex;
  gap: 6px;
}

.organisation-member-actions select {
  max-width: 190px;
}

.organisation-member-actions button,
.organisation-invitation-row-actions button {
  min-height: 34px;
  padding: 0 9px;
  font-size: 0.69rem;
}

.organisation-activity-section {
  border: 1px solid #dce5ef;
  border-radius: 9px;
  background: #fff;
  padding: 10px;
}

.organisation-activity-section summary {
  cursor: pointer;
  color: #334a64;
  font-size: 0.76rem;
  font-weight: 760;
}

#organisation-activity-list {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}

#organisation-activity-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #eef2f6;
  padding-top: 6px;
  font-size: 0.7rem;
}

#organisation-activity-list span {
  color: #718197;
}

.organisation-oversight-note {
  border-radius: 8px;
  background: #fff8e7;
  color: #73551c;
  padding: 10px 11px;
  font-size: 0.73rem;
  line-height: 1.45;
}

.organisation-invitation-dialog {
  width: min(620px, calc(100vw - 32px));
}

.organisation-invitation-details {
  display: grid;
  gap: 13px;
}

.organisation-invitation-benefit {
  display: grid;
  gap: 3px;
  border: 1px solid #b8e2c6;
  border-radius: 10px;
  background: #f0fbf4;
  color: #22653b;
  padding: 13px;
}

.organisation-invitation-benefit span,
.organisation-invitation-details li,
.organisation-invitation-details p {
  font-size: 0.78rem;
  line-height: 1.45;
}

.organisation-invitation-details ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  color: #51647a;
}

.organisation-invitation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.organisation-share-backdrop {
  z-index: 2200;
}

.organisation-share-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
}

.organisation-share-members {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}

.organisation-share-members > label {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 150px;
  align-items: center;
  gap: 12px;
  border: 1px solid #e0e7ef;
  border-radius: 9px;
  padding: 9px 10px;
}

.organisation-share-members > label > span {
  display: grid;
  gap: 2px;
}

.organisation-share-members small {
  color: #718197;
  font-size: 0.7rem;
}

@media (max-width: 720px) {
  .subscription-plans,
  .subscription-account-step .account-form {
    grid-template-columns: 1fr;
  }

  .subscription-active {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .subscription-active button {
    grid-column: 1 / -1;
  }

  .subscription-active-actions {
    grid-column: 1 / -1;
  }

  .subscription-account-type-options,
  .subscription-organisation-fields,
  .organisation-seat-summary {
    grid-template-columns: 1fr;
  }

  .organisation-seat-summary .organisation-billing-summary {
    grid-column: auto;
  }

  .organisation-invite-form,
  .organisation-member,
  .organisation-invitation-list article {
    grid-template-columns: 1fr;
  }

  .organisation-member-avatar {
    display: none;
  }

  .organisation-member-actions,
  .organisation-seat-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

.account-password-section {
  margin-top: 15px;
  border-top: 1px solid #e5ebf2;
  padding-top: 13px;
}

.account-password-section summary {
  color: #26384c;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 720;
}

.account-password-section .account-form {
  margin-top: 14px;
}

.account-logout-button {
  margin-top: 18px;
  border-color: #d6dee8;
  background: #ffffff;
  color: #334155;
}

.account-logout-button:hover {
  border-color: #bdcad8;
  background: #f5f8fb;
}

.account-status-message {
  min-height: 1.3em;
  margin: 14px 0 0;
  color: #64748b;
  font-size: 0.79rem;
  line-height: 1.4;
}

.account-status-message.is-error {
  color: #b42318;
}

.account-status-message.is-success {
  color: #167343;
}

@media (max-width: 1100px) {
  .account-button > #account-button-label,
  .account-plan-badge {
    display: none;
  }

  .account-button {
    width: 42px;
    padding: 0;
  }
}

@media (max-width: 540px) {
  .account-modal-backdrop {
    padding: 8px;
  }

  .account-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .account-dialog-header,
  .account-dialog-body {
    padding-right: 16px;
    padding-left: 16px;
  }

  .account-profile-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .account-profile-plan {
    grid-column: 2;
    justify-self: start;
  }
}

/* Saved map projects */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.project-heading {
  position: relative;
}

.project-menu-button {
  min-width: 142px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #d5dde8;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 2px 6px rgba(34, 52, 74, 0.08);
  color: #182433;
  cursor: pointer;
  padding: 5px 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.project-menu-button:hover,
.project-menu-button[aria-expanded="true"] {
  border-color: #9fc5f2;
  background: #f5f9ff;
  box-shadow: 0 3px 10px rgba(18, 103, 213, 0.14);
}

.project-menu-trigger-icon {
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  object-fit: contain;
}

.project-menu-chevron {
  position: relative;
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  margin-left: 2px;
}

.project-menu-chevron img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 150ms ease, transform 150ms ease;
}

.project-menu-chevron-active {
  opacity: 0;
}

.project-menu-button:hover .project-menu-chevron-default,
.project-menu-button[aria-expanded="true"] .project-menu-chevron-default {
  opacity: 0;
}

.project-menu-button:hover .project-menu-chevron-active,
.project-menu-button[aria-expanded="true"] .project-menu-chevron-active {
  opacity: 1;
}

.project-menu-button[aria-expanded="true"] .project-menu-chevron img {
  transform: rotate(180deg);
}

.project-menu {
  position: absolute;
  z-index: 190;
  top: calc(100% + 8px);
  left: 0;
  width: 308px;
  display: grid;
  gap: 3px;
  border: 1px solid #d7e1ec;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.2);
  padding: 8px;
}

.project-menu[hidden] {
  display: none;
}

.project-menu-heading {
  min-width: 0;
  display: grid;
  gap: 4px;
  margin: 1px 2px 8px;
  border: 1px solid #d7e6f5;
  border-radius: 9px;
  background: linear-gradient(135deg, #f1f7fd 0%, #f8fbff 100%);
  box-shadow: inset 3px 0 0 #78aeea;
  padding: 10px 12px 11px 15px;
}

.project-menu-heading span {
  color: #3974ae;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-menu-heading strong {
  overflow: hidden;
  color: #172334;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-menu button {
  min-height: 51px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #172334;
  cursor: pointer;
  padding: 7px 12px;
  text-align: left;
  font-size: 0.94rem;
  font-weight: 650;
}

.project-menu button:hover:not(:disabled) {
  background: #eef6ff;
  color: var(--ui-blue-dark);
}

.project-menu button:focus-visible {
  outline: 2px solid #78aeea;
  outline-offset: -2px;
}

.project-menu button img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.project-menu button:disabled {
  color: #a0aaba;
  cursor: not-allowed;
  opacity: 0.52;
}

.project-menu-separator {
  display: block;
  height: 1px;
  margin: 7px 10px;
  background: #e3eaf1;
}

.save-indicator b,
.status-saved b {
  font: inherit;
  font-weight: 600;
}

.save-indicator[data-save-state="dirty"],
.status-saved[data-save-state="dirty"] {
  color: #9a6700;
}

.save-indicator[data-save-state="saved"],
.status-saved[data-save-state="saved"] {
  color: #2e8a57;
}

.project-modal-backdrop {
  position: fixed;
  z-index: 290;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 31, 49, 0.48);
  padding: 18px;
  backdrop-filter: blur(5px);
}

.project-modal-backdrop[hidden] {
  display: none;
}

.project-dialog {
  width: min(540px, calc(100vw - 30px));
  max-height: min(820px, calc(100vh - 30px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.3);
}

.project-confirm-dialog {
  width: min(480px, calc(100vw - 32px));
  max-height: min(360px, calc(100vh - 32px));
  grid-template-rows: auto auto;
}

.project-open-dialog {
  width: min(920px, calc(100vw - 30px));
}

.project-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #e4eaf1;
  background: linear-gradient(135deg, #f7fbff, #ffffff);
  padding: 18px 21px 16px;
}

.project-dialog-header p {
  margin: 0 0 3px;
  color: var(--ui-blue);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-dialog-header h2 {
  margin: 0;
  color: #172334;
  font-size: 1.25rem;
}

.project-dialog-header div > span {
  display: block;
  margin-top: 5px;
  color: #657386;
  font-size: 0.79rem;
  line-height: 1.4;
}

.project-dialog-body {
  min-height: 0;
  overflow-y: auto;
  padding: 18px 21px;
}

.project-name-field {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 720;
}

.project-name-field input,
.project-search-field input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #ccd7e4;
  border-radius: 8px;
  outline: 0;
  background: #ffffff;
  color: #172334;
  padding: 8px 11px;
  font: inherit;
}

.project-name-field input:focus,
.project-search-field input:focus {
  border-color: var(--ui-blue);
  box-shadow: 0 0 0 3px rgba(18, 103, 213, 0.11);
}

.project-template-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid #dbe5ee;
  border-radius: 10px;
  background: #f6f9fc;
  padding: 11px 12px;
  cursor: pointer;
}

.project-template-option input {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--ui-blue);
}

.project-template-option span {
  display: grid;
  gap: 3px;
}

.project-template-option strong {
  color: #24364a;
  font-size: 0.86rem;
}

.project-template-option small {
  color: #68788a;
  font-size: 0.76rem;
  line-height: 1.4;
}

.project-save-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.project-save-summary span {
  border-radius: 999px;
  background: #eef4fa;
  color: #4a5d73;
  padding: 5px 8px;
  font-size: 0.7rem;
  font-weight: 650;
}

.project-dialog-actions,
.project-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.project-dialog-actions {
  margin-top: 17px;
}

.project-dialog-footer {
  border-top: 1px solid #e4eaf1;
  padding: 12px 21px;
}

.project-dialog-message {
  min-height: 1.25em;
  margin: 13px 0 0;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.4;
}

.project-dialog-message.is-error {
  color: #b42318;
}

.project-dialog-message.is-success {
  color: #167343;
}

.project-library-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 170px 170px auto;
  gap: 9px;
  margin-bottom: 13px;
}

.project-search-field,
.project-sort-field {
  min-width: 0;
}

.project-open-warning {
  margin: 0 0 13px;
  border: 1px solid #f1cf72;
  border-radius: 8px;
  background: #fff9e8;
  color: #7a5408;
  padding: 9px 11px;
  font-size: 0.75rem;
  line-height: 1.4;
}

.project-open-warning[hidden],
.project-library-message[hidden],
.project-investment-summary[hidden],
.project-assets-message[hidden] {
  display: none;
}

.project-investment-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(360px, 1.75fr);
  align-items: center;
  gap: 16px;
  margin: 0 0 13px;
  border: 1px solid #c9ddef;
  border-radius: 11px;
  background: linear-gradient(135deg, #f2f8fe, #f8fcff);
  padding: 12px 14px;
}

.project-investment-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-investment-icon {
  flex: 0 0 auto;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 9px;
  background: #dceefe;
  font-size: 1.1rem;
}

.project-investment-heading div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.project-investment-heading strong {
  color: #193b60;
  font-size: 0.82rem;
}

.project-investment-heading span:last-child {
  color: #64788d;
  font-size: 0.69rem;
  line-height: 1.35;
}

.project-investment-summary dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.project-investment-summary dl div {
  min-width: 0;
  display: grid;
  gap: 2px;
  border-left: 1px solid #d6e4f0;
  padding-left: 9px;
}

.project-investment-summary dt {
  overflow: hidden;
  color: #184f83;
  font-size: 0.9rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-investment-summary dd {
  margin: 0;
  color: #6e8093;
  font-size: 0.62rem;
  line-height: 1.25;
}

.project-assets-message {
  margin: 0 0 13px;
  border: 1px solid #f1cf72;
  border-radius: 8px;
  background: #fff9e8;
  color: #7a5408;
  padding: 9px 11px;
  font-size: 0.72rem;
}

.project-library-message {
  margin: 16px 0;
  color: #68788c;
  text-align: center;
  font-size: 0.82rem;
}

.project-library-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.project-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid #dce4ee;
  border-radius: 11px;
  background: #ffffff;
  padding: 13px;
}

.project-card:hover {
  border-color: #b9cce0;
  box-shadow: 0 7px 18px rgba(34, 56, 82, 0.08);
}

.project-card.is-confirming-delete {
  border-color: #e8a7a1;
  background: #fffafa;
}

.project-card.is-template {
  border-color: #bfd5ee;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9fe 100%);
}

.project-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.project-card-heading > div {
  min-width: 0;
}

.project-card h3 {
  overflow: hidden;
  margin: 0;
  color: #172334;
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card-heading p {
  overflow: hidden;
  margin: 3px 0 0;
  color: #768599;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-current-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #e8f6ee;
  color: #1d7546;
  padding: 4px 7px;
  font-size: 0.65rem;
  font-weight: 750;
}

.project-current-badge[hidden] {
  display: none;
}

.project-card-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
  margin: 0;
}

.project-card-details div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.project-card-details dt {
  color: #8190a2;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
}

.project-card-details dd {
  overflow: hidden;
  margin: 0;
  color: #33465b;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card-assets {
  min-width: 0;
  border: 1px solid #dce7f0;
  border-radius: 8px;
  background: #f7fafc;
}

.project-card-assets summary {
  padding: 8px 10px;
  color: #36536f;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 750;
}

.project-card-assets[open] summary {
  border-bottom: 1px solid #dce7f0;
}

.project-asset-list {
  max-height: 170px;
  overflow-y: auto;
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 5px;
  list-style: none;
}

.project-asset-list li {
  min-width: 0;
  display: grid;
  gap: 2px;
  border-radius: 6px;
  padding: 6px 7px;
}

.project-asset-list li:hover {
  background: #eaf3fb;
}

.project-asset-list a {
  overflow: hidden;
  color: #1163a9;
  font-size: 0.72rem;
  font-weight: 720;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-asset-list a:hover {
  text-decoration: underline;
}

.project-asset-list .project-asset-locked {
  color: #718096;
  font-size: 0.72rem;
  font-weight: 720;
  cursor: not-allowed;
}

.project-asset-list span {
  overflow: hidden;
  color: #75869a;
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card-actions {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
}

.project-card-actions button {
  min-height: 36px;
  border-radius: 7px;
  cursor: pointer;
  padding: 0 11px;
  font-size: 0.73rem;
  font-weight: 700;
}

.project-card-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.project-card-delete {
  border: 0;
  background: transparent;
  color: #a23a32;
}

.project-card-delete:hover {
  background: #fff0ef;
}

.project-delete-warning {
  margin-right: auto;
  color: #9d3029;
  font-size: 0.72rem;
  font-weight: 700;
}

.project-delete-confirm {
  border: 1px solid #bd3e35;
  background: #bd3e35;
  color: #ffffff;
}

@media (max-width: 1050px) {
  .project-menu-button {
    min-width: 126px;
    gap: 9px;
    padding-inline: 9px;
  }

  .project-menu-trigger-icon {
    width: 28px;
    height: 28px;
  }

  .project-heading .save-indicator {
    display: none;
  }
}

@media (max-width: 720px) {
  .project-modal-backdrop {
    padding: 8px;
  }

  .project-dialog,
  .project-open-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .project-library-toolbar,
  .project-library-list {
    grid-template-columns: 1fr;
  }

  .project-investment-summary {
    grid-template-columns: 1fr;
  }

  .project-investment-summary dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-library-toolbar .dataset-button {
    justify-self: start;
  }
}

/* Shared long-running task indicator */
.global-progress-overlay {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(229, 239, 247, 0.48);
  padding: 20px;
  cursor: wait;
  backdrop-filter: blur(3px) saturate(0.8);
}

.global-progress-overlay[hidden] {
  display: none;
}

.global-progress-card {
  min-width: min(340px, calc(100vw - 32px));
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px solid rgba(156, 179, 200, 0.72);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 22px 60px rgba(18, 42, 66, 0.25);
  color: #172334;
  padding: 23px 28px 21px;
  text-align: center;
}

.global-progress-spinner {
  width: 48px;
  height: 48px;
  margin-bottom: 3px;
  border: 5px solid #dbe9f7;
  border-top-color: var(--ui-blue);
  border-right-color: #65a5ed;
  border-radius: 50%;
  animation: global-progress-spin 0.78s linear infinite;
}

.global-progress-card strong {
  font-size: 1rem;
}

.global-progress-card > span:last-child {
  max-width: 300px;
  color: #657386;
  font-size: 0.78rem;
  line-height: 1.45;
}

@keyframes global-progress-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .global-progress-spinner {
    animation-duration: 1.8s;
  }

  .tool-rail-button,
  .tool-rail-icon-frame,
  .tool-rail-icon {
    transition: none;
  }
}

@media (max-width: 1200px) {
  .app-topbar {
    gap: 10px;
    padding-inline: 10px;
  }

  .project-heading .save-indicator {
    display: none;
  }

  .map-search {
    width: min(240px, 22vw);
    min-width: 160px;
  }

  .topbar-actions {
    gap: 6px;
  }

  .stripe-test-mode-badge {
    padding: 5px 7px;
    font-size: 0;
  }

  .stripe-test-mode-badge::after {
    content: 'TEST';
    font-size: 0.62rem;
  }
}

@media (max-width: 900px) {
  .app-topbar {
    gap: 8px;
    padding-inline: 8px;
  }

  .app-brand-logo {
    width: 130px;
  }

  .map-search {
    width: auto;
    min-width: 120px;
    flex: 1 1 auto;
  }

  .topbar-button,
  .account-button {
    width: 42px;
    min-width: 42px;
  }

  .topbar-action-icon {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 620px) {
  .topbar-actions {
    gap: 5px;
  }

  .topbar-button,
  .account-button {
    width: 40px;
    min-width: 40px;
  }

  .topbar-action-icon {
    width: 32px;
    height: 32px;
  }
}

/* Compact themed final export workflow. */
#pdf-review-message {
  top: 50%;
  left: 50%;
  width: min(780px, calc(100vw - 28px));
  max-height: calc(100vh - 24px);
  border: 1px solid #264dad;
  border-radius: 16px;
  background: #fffdfc;
  box-shadow: 0 28px 80px rgba(8, 26, 67, 0.32);
  color: #172033;
  transform: translate(-50%, -50%);
}

#pdf-review-message .export-dialog-header {
  position: relative;
  min-height: 92px;
  grid-template-columns: 50px minmax(0, 1fr) 36px;
  gap: 12px;
  border-bottom: 0;
  padding: 14px 16px 20px;
  background: linear-gradient(118deg, #071b46 0%, #143578 58%, #4d36a8 100%);
}

#pdf-review-message .export-dialog-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    #2864e8 0%,
    #2864e8 25%,
    #159451 25%,
    #159451 50%,
    #f2a900 50%,
    #f2a900 75%,
    #7638d5 75%,
    #7638d5 100%
  );
  content: '';
}

#pdf-review-message .export-dialog-icon {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.18);
}

#pdf-review-message .export-dialog-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

#pdf-review-message .export-dialog-eyebrow {
  margin-bottom: 2px;
  color: #dce9ff;
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.11em;
}

#pdf-review-message .export-dialog-header h2 {
  color: #ffffff;
  font-size: 1.24rem;
  font-weight: 700;
  line-height: 1.12;
}

#pdf-review-message .export-dialog-header p {
  margin-top: 4px;
  color: #d7e2f5;
  font-size: 0.7rem;
  line-height: 1.3;
}

#pdf-review-message .export-dialog-close {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 9px;
  background: rgba(7, 27, 70, 0.24);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

#pdf-review-message .export-dialog-close:hover,
#pdf-review-message .export-dialog-close:focus-visible {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  outline: 3px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

#pdf-review-message .export-dialog-body {
  gap: 11px;
  padding: 12px 11px 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(77, 54, 168, 0.045), transparent 35%),
    #fffdfc;
  scrollbar-gutter: stable both-edges;
}

#pdf-review-message .export-workflow-step {
  min-width: 0;
  border: 1px solid #d9e0ea;
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff, #f8faff);
  box-shadow: 0 5px 14px rgba(22, 39, 73, 0.07);
  padding: 11px;
}

#pdf-review-message .export-step-header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 0;
  padding: 0;
}

#pdf-review-message .export-step-header h3 {
  color: #10203f;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.18;
}

#pdf-review-message .export-step-number {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  border-radius: 50%;
  background: linear-gradient(145deg, #3474ee, #1c4eb7);
  box-shadow: none;
  font-size: 0.74rem;
  font-weight: 700;
}

#pdf-review-message .export-workflow-step.is-format .export-step-number {
  background: linear-gradient(145deg, #874ae0, #5820b5);
}

#pdf-review-message .export-workflow-step.is-download .export-step-number {
  background: linear-gradient(145deg, #1ca967, #087844);
}

#pdf-review-message .export-step-content {
  min-width: 0;
  display: grid;
  gap: 8px;
  margin-top: 9px;
}

#pdf-review-message .export-page-toolbar {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(310px, 430px);
  align-items: center;
  gap: 12px;
}

#pdf-review-message .export-page-header {
  order: initial;
}

#pdf-review-message .export-page-status-content {
  margin-top: 7px;
}

#pdf-review-message .export-settings-grid,
#pdf-review-message .export-settings-grid.is-vector {
  order: initial;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 7px;
  margin: 0;
}

#pdf-review-message .export-settings-grid.is-vector {
  width: min(100%, 205px);
  grid-template-columns: minmax(0, 1fr);
  justify-self: end;
}

#pdf-review-message .export-settings-grid.is-vector .export-setting-field:first-child {
  grid-column: 1 / -1;
}

#pdf-review-message .export-setting-field {
  position: relative;
  gap: 0;
}

#pdf-review-message .export-setting-field > span {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#pdf-review-message .export-setting-field .dataset-select {
  min-height: 36px;
  border-color: #ccd7e4;
  border-radius: 8px;
  font-size: 0.74rem;
  box-shadow: none;
}

#pdf-review-message .export-size-card {
  order: initial;
  grid-template-columns: 18px max-content minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: #edf5ff;
  padding: 7px 8px;
}

#pdf-review-message .export-size-icon {
  width: 18px;
  height: 18px;
}

#pdf-review-message .export-size-icon svg {
  width: 17px;
  height: 17px;
}

#pdf-review-message .export-size-summary {
  color: #245cc7;
  font-size: 0.67rem;
  font-weight: 600;
}

#pdf-review-message .export-safety-message {
  color: #5e6f85;
  font-size: 0.61rem;
  line-height: 1.3;
}

#pdf-review-message .export-data-toolbar {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
}

#pdf-review-message .export-excel-step-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
}

#pdf-review-message .export-excel-step-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

#pdf-review-message .export-data-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0;
  margin: 5px 0 0 43px;
  overflow: hidden;
  color: #68778c;
  font-size: 0.6rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pdf-review-message .export-data-meta small {
  color: #245cc7;
  font: inherit;
}

#pdf-review-message .export-data-meta small:not(:empty)::before {
  color: #91a0b4;
  content: ' · ';
}

#pdf-review-message .export-data-meta small.is-error {
  color: #b42318;
}

#pdf-review-message .export-size-card[data-level='warning'],
#pdf-review-message .export-size-card[data-level='blocked'] {
  border: 1px solid;
  padding: 7px 8px;
}

#pdf-review-message .export-format-group {
  order: initial;
  margin: 0;
}

#pdf-review-message .export-format-options {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

#pdf-review-message .export-format-card > span {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: center;
  border-color: #d6dee8;
  border-radius: 11px;
  padding: 8px;
  box-shadow: none;
}

#pdf-review-message .export-format-icon {
  width: 62px;
  height: 70px;
  object-fit: contain;
  transition: transform 140ms ease;
}

#pdf-review-message .export-format-card:hover .export-format-icon {
  transform: translateY(-1px) scale(1.025);
}

#pdf-review-message .export-format-card input:checked + span {
  border-color: #2864e8;
  background: linear-gradient(145deg, #f4f8ff, #eaf2ff);
  box-shadow: 0 0 0 1px rgba(40, 100, 232, 0.13);
}

#pdf-review-message .export-format-card input:checked + span::after {
  top: 5px;
  right: 5px;
  width: 13px;
  height: 13px;
}

#pdf-review-message .export-format-card input:checked + span::before {
  top: 7px;
  right: 8px;
}

#pdf-review-message .export-download-content {
  gap: 8px;
}

#pdf-review-message .export-ready-summary {
  display: none !important;
}

#pdf-review-message .export-data-card,
#pdf-review-message .export-result {
  order: initial;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  margin: 0;
  border-color: #d6dee8;
  border-radius: 10px;
  background: #ffffff;
  padding: 8px 9px;
}

#pdf-review-message .export-data-icon,
#pdf-review-message .export-result-check {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

#pdf-review-message .export-data-icon {
  background: #eef5ff;
}

#pdf-review-message .export-data-icon img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

#pdf-review-message .export-data-card > div,
#pdf-review-message .export-result-copy {
  gap: 1px;
}

#pdf-review-message .export-data-card strong,
#pdf-review-message .export-result-copy strong {
  font-size: 0.7rem;
}

#pdf-review-message .export-data-card > div > span,
#pdf-review-message .export-result-copy > span {
  font-size: 0.61rem;
  line-height: 1.28;
}

#pdf-review-message .export-data-card small,
#pdf-review-message .export-result-copy small {
  font-size: 0.58rem;
}

#pdf-review-message .export-data-button,
#pdf-review-message .export-result-download {
  min-height: 34px;
  gap: 6px;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 0.64rem;
}

#pdf-review-message .export-data-button {
  min-height: 32px;
  grid-column: auto;
  border-color: #16814d;
  background: linear-gradient(112deg, #0e9653 0%, #087844 100%);
  color: #ffffff;
  padding: 4px 9px 4px 6px;
}

#pdf-review-message .export-data-button:hover:not(:disabled),
#pdf-review-message .export-data-button:focus-visible:not(:disabled) {
  border-color: #08673a;
  background: linear-gradient(112deg, #0e9653 0%, #087844 100%);
  filter: brightness(1.07);
}

#pdf-review-message .export-excel-download-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  object-fit: contain;
}

#pdf-review-message .export-download-button-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  object-fit: contain;
}

#pdf-review-message .export-progress {
  order: initial;
  gap: 7px;
  margin: 0;
  border-radius: 9px;
  padding: 9px 10px;
}

#pdf-review-message .export-progress-copy {
  font-size: 0.66rem;
}

#pdf-review-message .export-progress-track {
  height: 6px;
}

#pdf-review-message .pdf-legend-warning {
  order: initial;
  margin: 0;
  padding: 7px 9px;
  font-size: 0.62rem;
}

#pdf-review-message .export-dialog-actions {
  min-height: 58px;
  gap: 8px;
  border-top-color: #d9e2ec;
  padding: 9px 14px 11px;
  background: #fbfcfe;
}

#pdf-review-message .export-dialog-button {
  min-height: 38px;
  border-radius: 9px;
  padding: 7px 13px;
  font-size: 0.72rem;
  font-weight: 650;
}

#pdf-review-message .export-dialog-button.is-primary {
  min-width: 150px;
  background: linear-gradient(112deg, #145de0 0%, #3e4bd3 58%, #7638d5 100%);
  box-shadow: 0 6px 14px rgba(35, 45, 128, 0.2);
}

#pdf-review-message .export-generate-format-icon {
  width: 19px;
  height: 25px;
  flex: 0 0 19px;
  object-fit: contain;
}

@media (max-width: 720px) {
  #pdf-review-message {
    top: 50%;
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  #pdf-review-message .export-dialog-header {
    min-height: 86px;
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    gap: 9px;
    padding: 12px 10px 18px;
  }

  #pdf-review-message .export-dialog-icon {
    width: 44px;
    height: 44px;
  }

  #pdf-review-message .export-dialog-header h2 {
    font-size: 1.08rem;
  }

  #pdf-review-message .export-dialog-body {
    padding-inline: 8px;
    scrollbar-gutter: auto;
  }

  #pdf-review-message .export-page-toolbar {
    grid-template-columns: minmax(150px, 0.8fr) minmax(280px, 1.2fr);
    gap: 8px;
  }

  #pdf-review-message .export-format-options {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #pdf-review-message .export-format-card {
    grid-column: span 2;
  }

  #pdf-review-message .export-format-card:nth-child(4) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 460px) {
  #pdf-review-message .export-dialog-header p {
    display: none;
  }

  #pdf-review-message .export-settings-grid,
  #pdf-review-message .export-settings-grid.is-vector {
    grid-template-columns: 1fr;
  }

  #pdf-review-message .export-page-toolbar {
    grid-template-columns: 1fr;
  }

  #pdf-review-message .export-settings-grid.is-vector {
    width: 100%;
  }

  #pdf-review-message .export-settings-grid.is-vector .export-setting-field:first-child {
    grid-column: auto;
  }

  #pdf-review-message .export-format-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #pdf-review-message .export-format-card,
  #pdf-review-message .export-format-card:nth-child(4) {
    grid-column: auto;
  }

  #pdf-review-message .export-format-card:last-child {
    width: calc((100% - 7px) / 2);
    grid-column: 1 / -1;
    justify-self: center;
  }

  #pdf-review-message .export-result {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  #pdf-review-message .export-result-download {
    grid-column: 1 / -1;
  }

  #pdf-review-message .export-data-toolbar {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  #pdf-review-message .export-data-toolbar h3 {
    font-size: 0.78rem;
  }

  #pdf-review-message .export-data-button span {
    display: none;
  }

  #pdf-review-message .export-data-button {
    width: 34px;
    padding: 3px;
  }

  #pdf-review-message .export-data-meta {
    margin-left: 39px;
  }
}

/* Unified compact theme for the remaining left-hand workflows. */
.classic-themed-panel .classic-themed-content {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 100% 0%, rgba(77, 54, 168, 0.045), transparent 34%),
    #fffdfc;
  padding: 11px 9px 17px;
  scrollbar-gutter: stable both-edges;
}

.classic-themed-panel .classic-themed-content > .tool-help:first-child {
  margin: 0;
  border: 1px solid #cadbf4;
  border-left: 3px solid #2864e8;
  border-radius: 8px;
  background: linear-gradient(135deg, #edf5ff, #f8faff);
  padding: 7px 9px;
  color: #53647a;
  font-size: 0.64rem;
  line-height: 1.38;
}

.classic-themed-panel :is(
  .map-template-card,
  .boundary-overlays-card,
  .colouring-mode-panel,
  .bulk-selection-panel,
  .coloured-areas-visibility-panel,
  .control-group,
  .thematic-card,
  .thematic-preview-card,
  .label-priority-intro,
  .inset-map-empty,
  .statistics-current-card
) {
  min-width: 0;
  margin: 0;
  border: 1px solid #d9e0ea;
  border-radius: 11px;
  background: linear-gradient(145deg, #ffffff, #f8faff);
  box-shadow: 0 5px 13px rgba(22, 39, 73, 0.065);
  padding: 9px 10px;
}

.classic-themed-panel .control-group {
  gap: 8px;
}

.classic-themed-panel .control-group-header {
  gap: 8px;
}

.classic-themed-panel .control-group-header h3,
.classic-themed-panel .thematic-card-heading h3,
.classic-themed-panel .thematic-preview-heading strong {
  color: #10203f;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}

.classic-themed-panel .control-group-header p,
.classic-themed-panel .thematic-card-heading p {
  margin-top: 1px;
  color: #68778c;
  font-size: 0.61rem;
  line-height: 1.3;
}

.classic-themed-panel :is(.form-field, .dataset-select-block, .thematic-field) {
  gap: 4px;
}

.classic-themed-panel :is(.form-field, .dataset-select-block, .thematic-field) > span,
.classic-themed-panel .slider-block > span {
  color: #45566c;
  font-size: 0.64rem;
  font-weight: 600;
}

.classic-themed-panel :is(.dataset-select, input[type='text'], input[type='number']) {
  min-height: 34px;
  border-color: #ccd7e4;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: none;
  font-size: 0.7rem;
}

.classic-themed-panel :is(.dataset-select, input[type='text'], input[type='number']):focus {
  border-color: #2864e8;
  box-shadow: 0 0 0 3px rgba(40, 100, 232, 0.12);
  outline: none;
}

.classic-themed-panel .compact-slider {
  gap: 4px;
}

.classic-themed-panel .slider-row {
  gap: 7px;
}

.classic-themed-panel .slider-row output {
  min-width: 46px;
  border-color: #d7e0eb;
  border-radius: 7px;
  background: #f3f7fc;
  color: #245cc7;
  font-size: 0.64rem;
}

.classic-themed-panel .switch-row b,
.classic-themed-panel .mini-checkbox {
  font-size: 0.66rem;
  font-weight: 600;
}

.classic-themed-panel .dataset-button {
  min-height: 33px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 600;
}

.classic-themed-panel :is(
  .circle-apply-button,
  .thematic-apply-button,
  #inset-map-add,
  #travel-area-generate-button,
  #travel-area-apply-button
) {
  border-color: #3145bb;
  background: linear-gradient(112deg, #145de0 0%, #3e4bd3 54%, #7638d5 100%);
  color: #ffffff;
  box-shadow: 0 3px 0 #29359e, 0 6px 11px rgba(35, 45, 128, 0.14);
}

.classic-themed-panel :is(
  .circle-apply-button,
  .thematic-apply-button,
  #inset-map-add,
  #travel-area-generate-button,
  #travel-area-apply-button
):hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.classic-themed-panel :is(.circle-clear-button, .page-image-remove, .thematic-remove-button) {
  border-color: #e6b5b5;
  background: #fff8f8;
  color: #a83c3c;
  box-shadow: none;
}

.classic-themed-panel .panel-note {
  gap: 2px;
  border: 1px solid #d7e4f5;
  border-radius: 8px;
  background: #f3f8ff;
  padding: 7px 9px;
}

.classic-themed-panel .panel-note strong {
  color: #244f91;
  font-size: 0.65rem;
  font-weight: 600;
}

.classic-themed-panel .panel-note span {
  color: #65758a;
  font-size: 0.6rem;
  line-height: 1.35;
}

.classic-themed-panel .circle-centre-status,
.classic-themed-panel .thematic-status,
.classic-themed-panel .map-template-summary {
  margin: 0;
  border-radius: 7px;
  background: #f2f6fb;
  padding: 6px 8px;
  color: #607086;
  font-size: 0.62rem;
  line-height: 1.32;
}

.classic-upload-zone {
  min-height: 168px;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  border: 2px dashed #2864e8;
  border-radius: 12px;
  background:
    radial-gradient(circle at 8% 92%, rgba(242, 169, 0, 0.11), transparent 34%),
    radial-gradient(circle at 94% 6%, rgba(255, 255, 255, 0.75), transparent 38%),
    #fff6cf;
  padding: 9px 12px 12px;
  text-align: center;
}

.classic-upload-zone:hover,
.classic-upload-zone:focus-visible,
.classic-upload-zone.is-dragging {
  border-color: #7638d5;
  background-color: #fff2bd;
  box-shadow: inset 0 0 0 2px rgba(118, 56, 213, 0.08);
  outline: none;
}

.classic-upload-zone > img {
  width: 61px;
  height: 61px;
  object-fit: contain;
}

.classic-upload-zone > strong {
  color: #10203f;
  font-size: 0.86rem;
  font-weight: 600;
}

.classic-upload-zone > span {
  color: #526170;
  font-size: 0.64rem;
  line-height: 1.32;
}

.classic-file-chips {
  display: flex;
  justify-content: center;
}

.classic-file-chips span {
  min-width: 43px;
  border: 1px solid #159451;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.86);
  padding: 3px 7px;
  color: #087844;
  font-size: 0.6rem;
  font-weight: 600;
}

.classic-upload-zone .workspace-primary-button {
  width: min(238px, 100%);
  min-height: 38px;
  margin-top: 1px;
}

#map-types-panel .classic-themed-content {
  gap: 9px;
}

#map-types-panel :is(.map-template-card, .boundary-overlays-card) {
  gap: 8px;
}

#map-types-panel .map-region-control {
  gap: 7px;
  border-color: #d7e1ee;
  border-radius: 9px;
  background: #f5f8fc;
  padding: 8px;
}

#map-types-panel :is(.boundary-overlay-add, .boundary-overlay-remove) {
  min-height: 31px;
  border-radius: 8px;
  font-size: 0.66rem;
}

#legend-panel .classic-themed-content {
  gap: 9px;
  background:
    radial-gradient(circle at 100% 0%, rgba(106, 79, 196, 0.07), transparent 38%),
    linear-gradient(180deg, #f7f9ff 0%, #fffdfa 100%);
}

#legend-panel .workspace-themed-header h2 {
  font-size: 1.1rem;
}

#legend-panel .territory-list-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #536fbd;
  border-radius: 11px;
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(28, 55, 103, 0.11);
}

#legend-panel .territory-list-card .legend-list {
  min-height: 0;
  gap: 5px;
  border: 0;
  background: linear-gradient(180deg, #fbfcff, #f5f8ff);
  padding: 6px;
}

#legend-panel .legend-summary-row {
  min-height: 42px;
  border: 0;
  border-top: 1px solid #31486f;
  border-radius: 0;
  background: linear-gradient(135deg, #0f1e38, #172b4c 58%, #203a61);
  padding: 6px 8px;
}

#legend-panel .legend-group-total {
  color: #d4dfef;
}

#legend-panel .legend-group-total strong {
  color: #ffffff;
}

#legend-panel .legend-empty {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  border: 1px dashed #9eb2d2;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.88);
  padding: 9px;
  color: #526170;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.66rem;
  line-height: 1.35;
  text-align: left;
}

#legend-panel .legend-empty img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  object-fit: contain;
}

#legend-panel .legend-empty:hover {
  border-color: #7aa5df;
  background: #f2f7ff;
  color: #234f8f;
}

#legend-panel .legend-empty:focus-visible {
  border-color: #2864e8;
  outline: 3px solid rgba(40, 100, 232, 0.18);
  outline-offset: 2px;
}

#legend-panel .colouring-mode-panel {
  min-height: 0;
  overflow: hidden;
  gap: 0;
  border-color: #536fbd;
  border-radius: 11px;
  background: #ffffff;
  padding: 0;
  box-shadow: 0 5px 14px rgba(28, 55, 103, 0.1);
}

#legend-panel .colouring-mode-panel > label {
  gap: 0;
}

#legend-panel .territory-card-heading {
  display: grid;
  gap: 1px;
  background: linear-gradient(125deg, #244f9e, #3a60bd 55%, #6a4fc4);
  padding: 7px 9px;
}

#legend-panel .territory-card-heading strong {
  color: #ffffff;
  font-size: 0.7rem;
}

#legend-panel .territory-card-heading small {
  color: #e5ecff;
  font-size: 0.56rem;
  line-height: 1.25;
}

#legend-panel .colouring-mode-panel .dataset-select {
  width: calc(100% - 16px);
  margin: 8px;
  border-color: #cbd7eb;
  background-color: #fbfcff;
}

#legend-panel .colouring-mode-panel > p {
  margin: 0;
  background: linear-gradient(135deg, #0f1e38, #172b4c 58%, #203a61);
  padding: 7px 9px;
  color: #d3deed;
  font-size: 0.58rem;
  line-height: 1.35;
}

#legend-panel .bulk-selection-panel {
  min-height: 0;
  align-content: start;
  overflow: hidden;
  gap: 0;
  border-color: #dfa14b;
  border-radius: 11px;
  background: #ffffff;
  padding: 0;
  box-shadow: 0 5px 14px rgba(112, 69, 14, 0.1);
}

#legend-panel .bulk-selection-heading {
  min-height: 48px;
  align-items: center;
  background: linear-gradient(125deg, #bd6c18, #dc952e 58%, #eba843);
  padding: 7px 9px;
}

#legend-panel .bulk-selection-heading > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

#legend-panel .bulk-selection-heading strong {
  color: #ffffff;
  font-size: 0.7rem;
}

#legend-panel .bulk-selection-heading small {
  color: #fff4df;
  font-size: 0.55rem;
  line-height: 1.2;
}

#legend-panel #bulk-selection-count {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(86, 42, 4, 0.2);
  padding: 3px 6px;
  color: #ffffff;
  font-size: 0.54rem;
}

#legend-panel .bulk-selection-modes {
  width: calc(100% - 16px);
  margin: 8px;
  border-color: #d9e1ee;
  background: #f8faff;
}

#legend-panel .bulk-selection-modes button {
  min-height: 48px;
}

#legend-panel .bulk-selection-panel > p {
  margin: 0;
  background: linear-gradient(135deg, #0f1e38, #172b4c 58%, #203a61);
  padding: 7px 9px;
  color: #d3deed;
  font-size: 0.58rem;
  line-height: 1.35;
}

#legend-panel .coloured-areas-visibility-panel {
  min-height: 0;
  display: grid;
  overflow: hidden;
  gap: 0;
  border-color: #4b927e;
  border-radius: 11px;
  background: #ffffff;
  padding: 0;
  box-shadow: 0 5px 14px rgba(20, 91, 72, 0.1);
}

#legend-panel .coloured-areas-visibility-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(125deg, #236b5d, #347f70 58%, #4b9483);
  padding: 7px 9px;
}

#legend-panel .coloured-areas-visibility-header > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

#legend-panel .coloured-areas-visibility-header strong {
  color: #ffffff;
  font-size: 0.68rem;
}

#legend-panel .coloured-areas-visibility-header small {
  color: #ddf4ed;
  font-size: 0.55rem;
  line-height: 1.2;
}

#legend-panel .coloured-areas-visibility-header .switch-row {
  flex: 0 0 auto;
}

#legend-panel .coloured-areas-visibility-header .switch-row > span {
  background: rgba(11, 49, 42, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

#legend-panel .coloured-areas-visibility-header .switch-row input:checked + span {
  background: #173b6c;
}

#legend-panel .coloured-areas-visibility-panel > p {
  margin: 0;
  background: linear-gradient(180deg, #ffffff, #f1faf7);
  padding: 8px 9px;
  color: #53677a;
  font-size: 0.58rem;
  line-height: 1.35;
}

#legend-panel .coloured-areas-visibility-panel.is-unavailable {
  border-color: #4b927e;
  background: #ffffff;
  opacity: 1;
}

#legend-panel .coloured-areas-visibility-panel.is-active {
  border-color: #2f8c71;
  background: #ffffff;
  box-shadow: 0 5px 16px rgba(20, 91, 72, 0.16);
}

#legend-panel .legend-summary-actions {
  min-width: 0;
  flex: 1 1 auto;
}

#legend-panel .clear-legend-selection-button {
  flex: 0 0 auto;
  border-color: #d8e2f1;
  background: #ffffff;
  padding-inline: 7px;
}

#legend-panel .add-name-button {
  min-width: 120px;
  flex: 0 1 auto;
  justify-content: center;
  border-color: #aad99c;
  background: linear-gradient(180deg, #f7fff3, #eaf8e4);
  padding-inline: 9px;
}

#legend-panel .territory-guidance {
  margin: 0;
  border: 1px solid #cadbf4;
  border-left: 3px solid #6a4fc4;
  border-radius: 8px;
  background: linear-gradient(135deg, #f1f5ff, #fbf9ff);
  padding: 7px 9px;
  color: #53647a;
  font-size: 0.64rem;
  line-height: 1.38;
}

#thematic-panel .thematic-panel-content {
  gap: 9px;
}

#thematic-panel .thematic-card-heading {
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 8px;
}

#thematic-panel .thematic-step {
  width: 27px;
  height: 27px;
  box-shadow: none;
  font-size: 0.7rem;
}

#thematic-panel .thematic-card:nth-of-type(2) .thematic-step {
  background: linear-gradient(145deg, #874ae0, #5820b5);
}

#thematic-panel .thematic-card:nth-of-type(3) .thematic-step {
  background: linear-gradient(145deg, #1ca967, #087844);
}

#thematic-panel .thematic-card:nth-of-type(4) .thematic-step {
  background: linear-gradient(145deg, #f0a51c, #c37200);
}

#thematic-panel .thematic-import-button {
  min-height: 38px;
  border-radius: 9px;
}

#thematic-panel .thematic-actions {
  gap: 7px;
}

#labels-panel .classic-themed-content {
  gap: 7px;
  padding-top: 8px;
}

#labels-panel .workspace-themed-header {
  min-height: 64px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

#labels-panel .map-heading-control {
  gap: 7px;
  border-color: #cbd9ed;
  background:
    radial-gradient(circle at 100% 0%, rgba(118, 56, 213, 0.07), transparent 38%),
    linear-gradient(145deg, #ffffff, #f5f8ff);
  padding: 8px 9px;
}

#labels-panel .map-heading-field {
  display: grid;
  gap: 4px;
}

#labels-panel .map-heading-field + .map-heading-field {
  border-top: 1px solid #e1e8f2;
  padding-top: 7px;
}

#labels-panel .map-heading-style-row,
#labels-panel .map-heading-box-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(40, 100, 232, 0.07), rgba(118, 56, 213, 0.025));
  padding: 4px 6px;
}

#labels-panel .map-heading-field:nth-child(2) .map-heading-style-row {
  background: linear-gradient(90deg, rgba(118, 56, 213, 0.075), rgba(40, 100, 232, 0.025));
}

#labels-panel .map-heading-box-row {
  border-top: 1px solid #e5e9ef;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, rgba(242, 169, 0, 0.09), rgba(255, 255, 255, 0));
  padding-top: 7px;
}

#labels-panel .map-heading-colour-control {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-color: #c8d5e4;
  border-radius: 7px;
  padding: 2px;
}

#labels-panel .map-heading-inline-slider {
  min-width: 0;
}

#labels-panel .map-heading-inline-slider .slider-row {
  justify-content: flex-start;
  gap: 4px;
}

#labels-panel .map-heading-inline-slider input[type='range'] {
  width: min(170px, 100%);
  flex: 1 1 130px;
  max-width: 170px;
}

#labels-panel .map-heading-inline-slider .slider-row > output {
  width: 43px;
  min-width: 43px;
  max-width: 43px;
  flex-basis: 43px;
  padding-inline: 4px;
  text-align: center;
}

#labels-panel .map-heading-drag-hint {
  margin: -1px 0 0 36px;
  color: #68778c;
  font-size: 0.59rem;
  line-height: 1.3;
}

#labels-panel .label-priority-intro {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border-left: 3px solid #7638d5;
  background: linear-gradient(100deg, #f2edff, #f8faff);
  padding: 6px 8px;
}

#labels-panel .label-priority-intro strong {
  font-size: 0.7rem;
}

#labels-panel .label-priority-intro span {
  font-size: 0.61rem;
  line-height: 1.3;
}

#labels-panel .label-priority-stack {
  gap: 7px;
}

#labels-panel .label-priority-card {
  gap: 6px;
  padding: 7px 8px;
}

#labels-panel .label-priority-card[data-label-priority-card='areas'] {
  background: linear-gradient(145deg, #f7fbff, #edf5ff);
}

#labels-panel .label-priority-card[data-label-priority-card='settlements'] {
  background: linear-gradient(145deg, #fbfff5, #eff7e7);
}

#labels-panel .label-inline-slider {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

#labels-panel .label-inline-slider > span {
  min-width: 0;
  line-height: 1.15;
  white-space: normal;
}

#labels-panel .label-inline-slider .slider-row {
  min-width: 0;
  gap: 5px;
}

#labels-panel .label-inline-slider .slider-row > output {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  flex-basis: 42px;
  padding-inline: 3px;
  text-align: center;
}

#labels-panel .area-label-wrap-controls .mini-checkbox {
  min-height: 30px;
  flex: 0 1 auto;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 3px 0;
}

#labels-panel .area-label-wrap-controls .mini-checkbox span {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

#labels-panel .label-priority-heading {
  gap: 6px;
}

#labels-panel .label-priority-move-button {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}

#labels-panel .settlement-filters {
  gap: 2px;
}

#labels-panel .settlement-filter-row {
  min-height: 29px;
  grid-template-columns: minmax(0, 1fr) 28px 58px;
  gap: 5px;
  border: 1px solid rgba(172, 195, 146, 0.44);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.58);
  padding: 2px 4px;
}

#labels-panel .settlement-filter-row .mini-checkbox {
  min-height: 24px;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 2px 3px;
}

#labels-panel .settlement-filter-row .label-colour-control {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  border-radius: 6px;
  padding: 2px;
}

#labels-panel .settlement-filter-row .label-size-number {
  height: 27px;
  border-radius: 6px;
  font-size: 0.64rem;
}

#labels-panel .settlement-filter-row .label-size-number input[type='number'] {
  width: 38px;
  min-height: 0;
  padding-left: 5px;
}

#labels-panel #settlement-label-controls > .compact-slider {
  gap: 3px;
  border-top: 1px solid rgba(172, 195, 146, 0.5);
  padding-top: 5px;
}

#labels-panel #settlement-label-controls > .compact-slider .slider-row {
  gap: 5px;
}

/* Labels: strong, framed area and settlement cards with compact zoom footers. */
#labels-panel .label-priority-stack {
  gap: 9px;
}

#labels-panel .label-priority-card {
  gap: 0;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
  border-radius: 11px;
  background: #ffffff;
  padding: 0;
  box-shadow: 0 5px 14px rgba(20, 39, 73, 0.09);
}

#labels-panel .label-priority-card.is-higher-priority {
  box-shadow: 0 7px 18px rgba(20, 39, 73, 0.14);
}

#labels-panel .label-priority-card[data-label-priority-card='areas'] {
  border-color: #dfa14b;
  background: #fffdfa;
}

#labels-panel .label-priority-card[data-label-priority-card='settlements'] {
  border-color: #4b927e;
  background: #fbfefd;
}

#labels-panel .label-card-header {
  min-height: 52px;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
}

#labels-panel [data-label-priority-card='areas'] .label-card-header {
  background: linear-gradient(112deg, #bd6c18 0%, #dc952e 55%, #eba843 100%);
}

#labels-panel [data-label-priority-card='settlements'] .label-card-header {
  background: linear-gradient(112deg, #236b5d 0%, #347f70 55%, #4b9483 100%);
}

#labels-panel .label-card-header .label-priority-heading {
  gap: 7px;
}

#labels-panel .label-card-header .label-priority-heading > div {
  order: 1;
}

#labels-panel .label-card-header .label-priority-heading > .label-priority-move-button {
  order: 2;
}

#labels-panel .label-card-header h3 {
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 720;
}

#labels-panel .label-card-header p {
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.83);
  font-size: 0.56rem;
  line-height: 1.2;
}

#labels-panel .label-header-actions {
  flex: 0 0 auto;
  gap: 5px;
}

#labels-panel .label-card-header .switch-row,
#labels-panel .map-heading-card-header .switch-row {
  gap: 5px;
}

#labels-panel .label-card-header .switch-row b,
#labels-panel .map-heading-card-header .switch-row b {
  color: #ffffff;
  font-size: 0.61rem;
  font-weight: 700;
}

#labels-panel .label-card-header .switch-row > span,
#labels-panel .map-heading-card-header .switch-row > span {
  background: rgba(15, 30, 55, 0.26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

#labels-panel .label-card-header .switch-row input:checked + span,
#labels-panel .map-heading-card-header .switch-row input:checked + span {
  background: #163a66;
}

#labels-panel .label-priority-move-button {
  width: auto;
  height: 26px;
  min-width: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-color: rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(9, 30, 55, 0.22);
  color: #ffffff;
  padding: 3px 7px 3px 5px;
  font: inherit;
  font-size: 0.53rem;
  font-weight: 700;
  line-height: 1;
}

#labels-panel .label-priority-move-button:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(9, 30, 55, 0.36);
}

#labels-panel .label-priority-move-button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  transition: none;
}

#labels-panel .label-priority-move-button[data-direction='down'] svg {
  transform: none;
}

#labels-panel .label-priority-move-button path {
  stroke-width: 1.8;
}

#labels-panel .label-card-body {
  display: grid;
  gap: 7px;
  padding: 8px;
}

#labels-panel [data-label-priority-card='areas'] .label-card-body {
  background: linear-gradient(145deg, #fffdfa, #fff7ea);
}

#labels-panel [data-label-priority-card='settlements'] .label-card-body {
  background: linear-gradient(145deg, #ffffff, #f4fbf8);
}

#labels-panel .area-label-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: end;
  gap: 7px;
}

#labels-panel .area-label-field-row .label-colour-control {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-color: #d7b883;
  border-radius: 7px;
  background: #ffffff;
  padding: 2px;
}

#labels-panel .area-label-field-control {
  gap: 3px;
}

#labels-panel .area-label-field-control > span {
  color: #6b4a24;
  font-size: 0.6rem;
  font-weight: 700;
}

#labels-panel .area-label-field-control .dataset-select {
  min-height: 30px;
}

#labels-panel .area-label-settings-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border-top: 1px solid rgba(205, 155, 79, 0.28);
  padding-top: 7px;
}

#labels-panel .area-font-size-control {
  min-width: 0;
  grid-template-columns: 46px minmax(0, 1fr);
}

#labels-panel .area-font-size-control > span {
  color: #5d4b38;
  font-size: 0.61rem;
  white-space: nowrap;
}

#labels-panel .area-font-size-control .slider-row {
  gap: 4px;
}

#labels-panel .area-label-wrap-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 0;
  padding: 0;
}

#labels-panel .area-label-wrap-controls .mini-checkbox {
  min-height: 28px;
  gap: 4px;
  padding: 2px 0;
}

#labels-panel .area-label-wrap-controls .mini-checkbox span {
  color: #5d4b38;
  font-size: 0.58rem;
}

#labels-panel .area-label-wrap-length {
  flex: 0 0 65px;
}

#labels-panel .area-label-wrap-length .dataset-select {
  min-height: 28px;
  padding-right: 19px;
  font-size: 0.58rem;
}

#labels-panel .settlement-filters {
  gap: 4px;
}

#labels-panel .settlement-filter-row {
  min-height: 33px;
  grid-template-columns: minmax(0, 1fr) 28px 58px;
  gap: 5px;
  border: 1px solid #dbe8e3;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 4px;
  box-shadow: 0 1px 2px rgba(29, 76, 65, 0.04);
}

#labels-panel .settlement-filter-row .mini-checkbox {
  min-height: 27px;
  gap: 5px;
  padding: 1px 2px;
}

#labels-panel .settlement-filter-row .mini-checkbox input {
  accent-color: #274f9f;
}

#labels-panel .settlement-category-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 40, 70, 0.18);
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1;
}

#labels-panel .settlement-category-icon--city {
  background: linear-gradient(145deg, #4269c8, #234c9d);
}

#labels-panel .settlement-category-icon--town {
  background: linear-gradient(145deg, #429887, #267265);
}

#labels-panel .settlement-category-icon--village {
  background: linear-gradient(145deg, #88a84c, #617e2f);
}

#labels-panel .settlement-category-icon--landmark {
  background: linear-gradient(145deg, #a26a2e, #75461d);
}

#labels-panel .settlement-category-name {
  color: #24334a;
  font-size: 0.65rem;
  font-weight: 680;
}

#labels-panel .settlement-filter-row .label-colour-control {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
  border-color: #cad8d4;
  background: #ffffff;
}

#labels-panel .settlement-filter-row .label-size-number {
  height: 27px;
  border-color: #d1dce5;
  background: #ffffff;
}

#labels-panel .settlement-availability-status {
  margin: 0;
}

#labels-panel .label-zoom-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: 25px minmax(82px, auto) minmax(92px, 1fr);
  align-items: center;
  gap: 6px;
  background: linear-gradient(112deg, #0f1e38, #16294a 58%, #1d365d);
  padding: 7px 8px;
  color: #ffffff;
}

#labels-panel .label-zoom-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

#labels-panel .label-zoom-icon svg {
  width: 16px;
  height: 16px;
}

#labels-panel .label-zoom-icon :is(circle, path) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

#labels-panel .label-zoom-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

#labels-panel .label-zoom-copy strong {
  overflow: hidden;
  font-size: 0.58rem;
  font-weight: 720;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#labels-panel .label-zoom-copy span {
  overflow: hidden;
  color: #aebbd0;
  font-size: 0.49rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#labels-panel .label-zoom-slider {
  min-width: 0;
}

#labels-panel .label-zoom-slider .slider-row {
  min-width: 0;
  gap: 5px;
}

#labels-panel .label-zoom-slider input[type='range'] {
  min-width: 42px;
  accent-color: #7196ef;
}

#labels-panel .label-zoom-slider .slider-row > output {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  flex-basis: 36px;
  border: 1px solid #cad4e3;
  border-radius: 5px;
  background: #ffffff;
  color: #1d3359;
  padding: 4px 2px;
  font-size: 0.59rem;
  font-weight: 750;
  text-align: center;
}

@media (max-width: 430px) {
  #labels-panel .label-priority-move-button span {
    display: none;
  }

  #labels-panel .label-priority-move-button {
    width: 26px;
    padding: 3px 5px;
  }

  #labels-panel .area-label-settings-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Labels: title card and comfortably stacked area-label settings. */
#labels-panel .map-heading-control {
  gap: 0;
  overflow: visible;
  border-color: #526fbd;
  border-radius: 11px;
  background: #ffffff;
  padding: 0;
  box-shadow: 0 5px 14px rgba(20, 39, 73, 0.09);
}

#labels-panel .map-heading-card-header {
  min-height: 49px;
  align-items: center;
  background: linear-gradient(112deg, #244f9e 0%, #395fc0 55%, #6a4fc4 100%);
  border-radius: 10px 10px 0 0;
  padding: 7px 10px;
}

#labels-panel .map-heading-card-header h3 {
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 720;
}

#labels-panel .map-heading-card-header p {
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.56rem;
  line-height: 1.2;
}

#labels-panel .map-heading-card-body {
  display: grid;
  gap: 7px;
  background: linear-gradient(145deg, #ffffff, #f3f6ff);
  padding: 8px;
}

#labels-panel .map-heading-card-body .map-heading-field + .map-heading-field {
  border-top-color: #dce4f3;
}

#labels-panel .map-heading-card-body .map-heading-style-row {
  border: 1px solid #dbe3f1;
  background: linear-gradient(90deg, #edf3ff, #f8f6ff);
}

#labels-panel .map-heading-card-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px 30px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  background: linear-gradient(112deg, #0f1e38, #16294a 58%, #1d365d);
  border-radius: 0 0 10px 10px;
  padding: 7px 8px;
  color: #ffffff;
}

#labels-panel .map-heading-card-footer > strong {
  font-size: 0.58rem;
  font-weight: 720;
  line-height: 1.15;
}

#labels-panel .map-heading-card-footer .map-heading-colour-control {
  width: 29px;
  height: 29px;
  flex-basis: 29px;
  border-color: rgba(255, 255, 255, 0.5);
  background: #ffffff;
}

#labels-panel .map-heading-card-footer .map-heading-opacity-control {
  min-width: 0;
}

#labels-panel .map-heading-card-footer .map-heading-opacity-control input[type='range'] {
  min-width: 48px;
  accent-color: #7196ef;
}

#labels-panel .map-heading-card-footer .map-heading-inline-slider .slider-row > output {
  border: 1px solid #cad4e3;
  border-radius: 5px;
  background: #ffffff;
  color: #1d3359;
}

#labels-panel .map-heading-card-footer .map-heading-drag-hint {
  grid-column: 1 / -1;
  margin: 0;
  color: #aebbd0;
  font-size: 0.5rem;
  line-height: 1.2;
  text-align: center;
}

#labels-panel .area-label-settings-stack {
  display: grid;
  gap: 5px;
  border-top: 1px solid rgba(205, 155, 79, 0.28);
  padding-top: 7px;
}

#labels-panel .area-label-setting-row {
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: 27px 66px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border: 1px solid #ead9bd;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.86);
  padding: 3px 5px;
}

#labels-panel .area-label-setting-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid #ead5ae;
  border-radius: 6px;
  background: linear-gradient(145deg, #fff7e7, #ffffff);
  color: #86581f;
}

#labels-panel .area-label-setting-icon svg {
  width: 18px;
  height: 18px;
}

#labels-panel .area-label-setting-icon :is(path, circle) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#labels-panel .area-label-setting-title {
  color: #5d4b38;
  font-size: 0.61rem;
  font-weight: 680;
  white-space: nowrap;
}

#labels-panel .area-font-size-control {
  grid-template-columns: 27px 66px minmax(0, 1fr);
}

#labels-panel .area-font-size-control > .label-inline-slider {
  min-width: 0;
  display: block;
}

#labels-panel .area-font-size-control .slider-row {
  min-width: 0;
  gap: 6px;
}

#labels-panel .area-font-size-control .slider-row input[type='range'] {
  min-width: 60px;
}

#labels-panel .area-font-size-control .slider-row > output {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  flex-basis: 44px;
}

#labels-panel .area-label-wrap-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: 27px minmax(98px, 1fr) 75px;
  gap: 6px;
  border: 1px solid #ead9bd;
  padding: 3px 5px;
}

#labels-panel .area-label-wrap-controls .mini-checkbox {
  min-width: 0;
  min-height: 27px;
  gap: 5px;
  padding: 1px 0;
}

#labels-panel .area-label-wrap-controls .mini-checkbox span {
  color: #5d4b38;
  font-size: 0.61rem;
  font-weight: 680;
}

#labels-panel .area-label-wrap-length {
  min-width: 0;
  flex: none;
}

#labels-panel .area-label-wrap-length .dataset-select {
  width: 100%;
  min-height: 28px;
  font-size: 0.6rem;
}

#travel-areas-panel .classic-themed-content {
  gap: 9px;
}

#travel-areas-panel .circle-place-button,
#travel-areas-panel .circle-apply-button,
#travel-areas-panel .circle-clear-button {
  width: 100%;
}

#travel-areas-panel .circle-ring-editor-group {
  padding-bottom: 9px;
}

#dots-panel .classic-themed-content,
#locations-panel .classic-themed-content,
#tables-panel .classic-themed-content {
  gap: 9px;
}

#dots-panel .circle-apply-button,
#dots-panel .circle-clear-button {
  width: 100%;
}

#locations-panel #location-key-controls {
  gap: 9px;
}

#inset-panel .inset-map-empty {
  gap: 6px;
  border-style: dashed;
  border-color: #9eb8dd;
  background: linear-gradient(145deg, #f5f9ff, #ffffff);
  padding: 13px 11px;
}

#inset-panel .inset-map-empty strong {
  color: #10203f;
  font-size: 0.84rem;
  font-weight: 600;
}

#inset-panel .inset-map-empty span {
  color: #64748b;
  font-size: 0.64rem;
  line-height: 1.36;
}

#inset-panel .inset-map-controls {
  gap: 9px;
}

#inset-panel .inset-map-action-grid {
  gap: 7px;
}

#tables-panel .page-image-count-row {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  margin: 0;
  padding: 0 2px;
}

#tables-panel .page-image-count-row strong {
  font-size: 0.68rem;
  white-space: nowrap;
}

#tables-panel .page-image-count-row span {
  font-size: 0.61rem;
  line-height: 1.3;
}

#tables-panel .page-table-colour-grid {
  gap: 6px;
}

#tables-panel .page-table-colour-grid label {
  border-radius: 7px;
  padding: 5px;
  font-size: 0.59rem;
}

@media (max-height: 760px) {
  .classic-themed-panel .workspace-themed-header {
    min-height: 78px;
    padding-top: 11px;
    padding-bottom: 17px;
  }

  .classic-themed-panel .workspace-themed-header::before {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
  }

  .classic-themed-panel .workspace-themed-header h2 {
    font-size: 1.1rem;
  }

  .classic-themed-panel .classic-themed-content {
    gap: 8px;
    padding-top: 9px;
    padding-bottom: 12px;
  }

  .classic-upload-zone {
    min-height: 150px;
  }

  .classic-upload-zone > img {
    width: 52px;
    height: 52px;
  }
}

/* Compact single-line purple panel headers. */
.tool-panel-header.workspace-themed-header,
#data-panel .data-import-panel-header,
#statistics-panel .statistics-panel-header {
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 14px;
}

.tool-panel-header.workspace-themed-header::before,
#data-panel .data-import-panel-header::before,
#statistics-panel .statistics-panel-header::before {
  width: 42px;
  height: 42px;
  min-width: 0;
  flex-basis: auto;
}

.tool-panel-header.workspace-themed-header > div,
#data-panel .data-import-panel-header > div,
#statistics-panel .statistics-panel-header > div {
  min-width: 0;
  align-self: center;
}

.tool-panel-header.workspace-themed-header h2,
#data-panel .data-import-panel-header h2,
#statistics-panel .statistics-panel-header h2,
#legend-panel .workspace-themed-header h2 {
  min-width: 0;
  margin: 1px 0 0;
  overflow: hidden;
  font-size: 1.08rem;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-panel-header.workspace-themed-header .tool-panel-eyebrow,
#data-panel .data-import-panel-header .tool-panel-eyebrow,
#statistics-panel .statistics-panel-header .tool-panel-eyebrow {
  display: block;
  overflow: hidden;
  font-size: 0.56rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-panel-header.workspace-themed-header > .tool-panel-actions,
#data-panel .data-import-panel-header > .tool-panel-actions,
#statistics-panel .statistics-panel-header > .tool-panel-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 5px;
  white-space: nowrap;
}

.tool-panel-header.workspace-themed-header :is(.vm-tool-context-help, .tool-panel-close),
#data-panel .data-import-panel-header :is(.vm-tool-context-help, .tool-panel-close),
#statistics-panel .statistics-panel-header :is(.vm-tool-context-help, .tool-panel-close) {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

.tool-panel-header.workspace-themed-header :is(.vm-panel-action-icon, .tool-panel-close svg),
#data-panel .data-import-panel-header :is(.vm-panel-action-icon, .tool-panel-close svg),
#statistics-panel .statistics-panel-header :is(.vm-panel-action-icon, .tool-panel-close svg) {
  width: 19px;
  height: 19px;
}

@media (max-width: 520px), (max-height: 760px) {
  .tool-panel-header.workspace-themed-header,
  #data-panel .data-import-panel-header,
  #statistics-panel .statistics-panel-header {
    min-height: 68px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 7px 8px 13px;
  }

  .tool-panel-header.workspace-themed-header::before,
  #data-panel .data-import-panel-header::before,
  #statistics-panel .statistics-panel-header::before {
    width: 38px;
    height: 38px;
  }

  .tool-panel-header.workspace-themed-header h2,
  #data-panel .data-import-panel-header h2,
  #statistics-panel .statistics-panel-header h2,
  #legend-panel .workspace-themed-header h2 {
    font-size: 1rem;
  }

  .tool-panel-header.workspace-themed-header :is(.vm-tool-context-help, .tool-panel-close),
  #data-panel .data-import-panel-header :is(.vm-tool-context-help, .tool-panel-close),
  #statistics-panel .statistics-panel-header :is(.vm-tool-context-help, .tool-panel-close) {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
}

/* Progressive Map Library: place, boundary type, map level, then optional area. */
#map-types-panel .tool-panel-content.classic-themed-content {
  gap: 9px;
  padding: 9px;
}

#map-types-panel .map-type-browser {
  display: grid;
  gap: 8px;
}

#map-types-panel .map-type-browser-title {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.2;
}

#map-types-panel .map-type-search-wrap {
  min-width: 0;
  position: relative;
  z-index: 40;
}

#map-types-panel .map-type-search-field {
  min-height: 38px;
  margin: 0;
}

#map-types-panel .map-type-route-step {
  min-width: 0;
  display: grid;
  gap: 4px;
  margin: 0;
}

#map-types-panel .map-type-route-step-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #263548;
  font-size: 0.76rem;
  line-height: 1.2;
}

#map-types-panel .map-type-route-step-heading b,
#map-types-panel .map-type-route-number {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #326ae5;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
}

#map-types-panel :is(#map-type-place-select, #map-type-category-select, #map-type-boundary-select, #map-region-select) {
  width: 100%;
  min-height: 37px;
  border: 1px solid #c4cfdd;
  border-radius: 7px;
  background-color: #ffffff;
  padding-block: 5px;
  color: #1f2d40;
  font-size: 0.75rem;
  box-shadow: none;
}

#map-types-panel :is(#map-type-place-select, #map-type-category-select, #map-type-boundary-select, #map-region-select):focus-visible {
  border-color: #326ae5;
  outline: 3px solid rgba(50, 106, 229, 0.14);
}

#map-types-panel #map-type-category-select:disabled {
  color: #34445a;
  opacity: 1;
  cursor: default;
}

#map-types-panel .map-type-search-results {
  width: 100%;
  max-height: min(260px, 48vh);
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 50;
}

#map-types-panel .map-type-boundary-picker {
  min-width: 0;
  display: grid;
  gap: 0;
  border: 1px solid #d2dae6;
  background: #ffffff;
}

#map-types-panel .map-type-section-heading {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #e2e7ef;
  padding: 5px 7px;
}

#map-types-panel .map-type-section-heading h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 0.78rem;
}

#map-types-panel .map-type-section-heading > span:not(.map-type-route-number) {
  color: #69788c;
  font-size: 0.66rem;
}

#map-types-panel .map-type-boundary-list {
  max-height: 212px;
  display: grid;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

#map-types-panel .map-type-boundary-option,
#map-types-panel .map-type-boundary-group-items .map-type-boundary-option {
  min-height: 42px;
  border: 0;
  border-bottom: 1px solid #e5e9f0;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: #ffffff;
  padding: 6px 7px 6px 8px;
  box-shadow: none;
}

#map-types-panel .map-type-boundary-option:last-child {
  border-bottom: 0;
}

#map-types-panel .map-type-boundary-option:hover:not(:disabled),
#map-types-panel .map-type-boundary-option:focus-visible {
  border-left-color: #86a5df;
  background: #f5f8ff;
  outline: none;
}

#map-types-panel .map-type-boundary-option.is-selected {
  border-left-color: #326ae5;
  background: #eaf2ff;
}

#map-types-panel .map-type-boundary-copy strong {
  font-size: 0.75rem;
}

#map-types-panel .map-type-boundary-copy small {
  margin-top: 1px;
  font-size: 0.65rem;
  line-height: 1.25;
}

#map-types-panel .map-region-control {
  display: grid;
  gap: 4px;
  border: 0;
  background: transparent;
  padding: 0;
}

#map-types-panel .map-region-control[hidden] {
  display: none;
}

#map-types-panel .map-region-control .dataset-select-block {
  display: block;
}

#map-types-panel .map-type-selection-bar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #b9cbea;
  border-left: 4px solid #326ae5;
  background: #f5f8ff;
  padding: 7px 7px 7px 9px;
}

#map-types-panel .map-type-selection-bar > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

#map-types-panel .map-type-selection-bar > div > span {
  color: #6a7890;
  font-size: 0.61rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#map-types-panel #map-type-selection-title {
  overflow: hidden;
  color: #1d2d45;
  font-size: 0.72rem;
  line-height: 1.25;
  text-overflow: ellipsis;
}

#map-types-panel #map-template-summary {
  margin: 0;
  overflow: hidden;
  color: #62738a;
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#map-types-panel #map-type-open-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #275ccc;
  border-radius: 7px;
  background: #326ae5;
  padding: 6px 10px;
  color: #ffffff;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 780;
  cursor: pointer;
}

#map-types-panel #map-type-open-button:hover:not(:disabled),
#map-types-panel #map-type-open-button:focus-visible {
  background: #2457c5;
  outline: 3px solid rgba(50, 106, 229, 0.16);
}

#map-types-panel #map-type-open-button:disabled {
  border-color: #c6cfdd;
  background: #dfe5ee;
  color: #718096;
  cursor: default;
}

#map-types-panel #map-type-open-button svg {
  width: 15px;
  height: 15px;
}

#map-types-panel #map-type-open-button path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#map-types-panel .boundary-overlays-card {
  gap: 6px;
  border-top: 1px solid #cfd7e3;
  padding-top: 8px;
}

#map-types-panel .boundary-overlays-heading {
  min-height: 34px;
}

#map-types-panel .boundary-overlays-heading p {
  margin-top: 1px;
  font-size: 0.66rem;
}

#map-types-panel #boundary-overlays-summary {
  display: none;
}

#map-types-panel .boundary-overlay-empty {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  color: #68778c;
  font-size: 0.68rem;
}

#map-types-panel .boundary-overlay-visibility.switch-control {
  min-height: 28px;
  gap: 5px;
  border-radius: 7px;
  padding: 3px 6px;
  font-size: 0.68rem;
}

#map-types-panel .boundary-overlay-visibility input {
  margin: 0;
  accent-color: #326ae5;
}

#map-types-panel .boundary-overlay-item.is-hidden {
  border-left-color: #9aa7b8;
  background: #f6f7f9;
}

@media (max-width: 420px), (max-height: 720px) {
  #map-types-panel .tool-panel-content.classic-themed-content {
    gap: 7px;
    padding: 7px;
  }

  #map-types-panel .map-type-browser {
    gap: 7px;
  }

  #map-types-panel .map-type-boundary-list {
    max-height: 170px;
  }
}

/* Simplified Full Access choice */
.subscription-dialog {
  width: min(500px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
}

.subscription-dialog-header {
  align-items: flex-start;
  padding: 14px 20px 13px;
}

.subscription-dialog-heading {
  align-items: center;
  max-width: calc(100% - 54px);
}

.subscription-dialog-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.subscription-dialog-header h2 {
  font-size: clamp(1.22rem, 2vw, 1.48rem);
}

#subscription-dialog-subtitle {
  margin: 0;
  color: #5f6e7f;
  font-size: 0.8rem;
  line-height: 1.35;
}

.subscription-dialog-body {
  padding: 14px 20px 10px;
}

.subscription-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.subscription-choice-grid {
  display: block;
}

.subscription-term-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.subscription-plans {
  gap: 9px;
}

.subscription-plan {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 63px;
  border-color: #d5dce5;
  border-radius: 10px;
  padding: 11px 15px;
}

.subscription-plan.is-selected {
  border-color: #5076c8;
  background: #f8faff;
  box-shadow: inset 0 0 0 1px #5076c8;
}

.subscription-plan-radio {
  width: 19px;
  height: 19px;
}

.subscription-plan.is-selected .subscription-plan-radio {
  border: 5px solid #5076c8;
}

.subscription-plan-heading strong {
  font-size: 0.92rem;
}

.subscription-plan-copy > small {
  color: #6d7785;
  font-size: 0.73rem;
}

.subscription-plan-badge,
.subscription-plan-badge.is-best {
  background: #dfe9fc;
  color: #315ca9;
  padding: 4px 8px;
  font-size: 0.62rem;
  letter-spacing: 0;
  text-transform: none;
}

.subscription-plan-price {
  min-width: 100px;
}

.subscription-plan-price strong {
  font-size: 1.02rem;
}

.subscription-plan-price small {
  font-size: 0.67rem;
}

.subscription-paid-continue {
  min-height: 50px;
  margin-top: 13px;
  border-radius: 10px;
  background: #5472bb;
  font-size: 0.96rem;
}

.subscription-paid-continue:hover:not(:disabled) {
  background: #4463ad;
}

.subscription-payment-assurance {
  flex-wrap: wrap;
  gap: 7px 10px;
  margin-top: 9px;
}

.subscription-payment-label {
  color: #657181;
  font-size: 0.72rem;
}

.subscription-card-mark,
.subscription-stripe-mark {
  height: 29px;
}

.subscription-benefits {
  margin-top: 13px;
  border-top: 1px solid #dce2e9;
  padding-top: 12px;
}

.subscription-benefits h3 {
  margin: 0;
  color: #2c3949;
  font-size: 0.82rem;
}

.subscription-benefits ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 20px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.subscription-benefits li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #4b5766;
  font-size: 0.76rem;
  line-height: 1.3;
}

.subscription-benefit-tick {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  border-radius: 50%;
  background: #168a50;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 1000;
  line-height: 1;
}

.subscription-choice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 13px;
  border-top: 1px solid #dce2e9;
  padding-top: 10px;
}

.subscription-choice-footer p {
  margin: 0;
  color: #657181;
  font-size: 0.72rem;
}

.subscription-choice-footer .account-text-button {
  font-size: inherit;
}

.subscription-secure-note[hidden] {
  display: none;
}

.subscription-choice-step.is-organisation-upgrade :is(
  .subscription-benefits,
  .subscription-choice-footer
) {
  display: none;
}

@media (max-width: 580px) {
  .subscription-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .subscription-dialog-header,
  .subscription-dialog-body {
    padding-right: 14px;
    padding-left: 14px;
  }

  .subscription-plan {
    grid-template-columns: 19px minmax(0, 1fr);
  }

  .subscription-plan-price {
    grid-column: 2;
    justify-content: flex-start;
    min-width: 0;
    text-align: left;
  }

  .subscription-benefits ul {
    grid-template-columns: 1fr;
  }

  .subscription-choice-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

/* Full Access decision flow */
.subscription-modal-backdrop {
  padding: 16px;
}

.subscription-dialog {
  width: min(1080px, calc(100vw - 32px));
  max-height: min(850px, calc(100vh - 32px));
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(15, 31, 49, 0.34);
}

.subscription-dialog-header {
  align-items: center;
  min-height: 0;
  border-bottom-color: #cfdbea;
  background: #f3f7fc;
  padding: 8px 22px;
}

.subscription-dialog-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
}

.subscription-dialog-header h2 {
  font-size: clamp(1.24rem, 2vw, 1.55rem);
  letter-spacing: -0.025em;
}

.subscription-unlock-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
}

.subscription-unlock-icon svg {
  width: 40px;
  height: 40px;
  overflow: visible;
}

.subscription-unlock-icon rect {
  fill: #f4c542;
  stroke: #9f7200;
  stroke-width: 1.4;
}

.subscription-unlock-icon path:first-child {
  fill: none;
  stroke: #d39b08;
  stroke-linecap: round;
  stroke-width: 4;
}

.subscription-unlock-icon :is(circle, path:last-child) {
  fill: #2b4059;
  stroke: #2b4059;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.subscription-dialog-body {
  padding: 14px 24px 8px;
}

#subscription-purchase-flow[hidden],
.subscription-choice-step[hidden],
.subscription-saving[hidden],
.subscription-account-step[hidden] {
  display: none;
}

.subscription-test-notice {
  max-width: 760px;
  margin: 0 auto 10px;
  padding: 8px 12px;
}

.subscription-reason {
  display: none !important;
}

.subscription-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  gap: 18px;
}

.subscription-comparison-card,
.subscription-term-card {
  min-width: 0;
  border: 1px solid #bfcddd;
  border-radius: 12px;
  background: #fff;
  padding: 16px;
}

.subscription-term-card {
  border: 2px solid #6294cf;
  background: #f4f8fd;
  box-shadow: none;
}

.subscription-section-heading {
  margin-bottom: 13px;
}

.subscription-section-heading h3,
.subscription-section-heading p {
  margin: 0;
}

.subscription-section-heading h3 {
  color: #172334;
  font-size: 1.04rem;
}

.subscription-section-heading > p:last-child:not(.account-dialog-eyebrow) {
  margin-top: 4px;
  color: #68788c;
  font-size: 0.76rem;
}

.subscription-comparison-scroll {
  overflow-x: auto;
}

.subscription-comparison-table {
  width: 100%;
  border-collapse: collapse;
  color: #35465a;
  font-size: 0.73rem;
}

.subscription-comparison-table :is(th, td) {
  border-bottom: 1px solid #e8edf3;
  padding: 6px 7px;
  vertical-align: middle;
}

.subscription-comparison-table thead th {
  color: #53657a;
  font-size: 0.66rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.subscription-comparison-table thead th:nth-child(3) {
  border-radius: 6px 6px 0 0;
  background: #155fa9;
  color: #fff;
}

.subscription-comparison-table tbody td:nth-child(3) {
  background: #eef5fc;
  color: #164f8e;
  font-weight: 740;
}

.subscription-comparison-table thead th:first-child,
.subscription-comparison-table tbody th {
  text-align: left;
}

.subscription-comparison-table :is(td, thead th:not(:first-child)) {
  width: 25%;
  text-align: center;
}

.subscription-comparison-table tbody th {
  width: 50%;
  color: #2f4054;
  font-weight: 650;
}

.subscription-comparison-tick {
  display: inline-grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: #149153;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 1000;
  line-height: 1;
}

.subscription-comparison-dash {
  color: #a9b4c1;
  font-weight: 760;
}

.subscription-free-button,
.subscription-back-button {
  min-height: 40px;
  border: 1px solid #c7d3df;
  border-radius: 9px;
  background: #fff;
  color: #30445a;
  cursor: pointer;
  padding: 0 14px;
  font-weight: 720;
}

.subscription-free-button {
  width: 100%;
  margin-top: 16px;
}

.subscription-free-button:hover,
.subscription-back-button:hover {
  border-color: #7e9bbb;
  background: #f7fafc;
}

.subscription-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.subscription-plan {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 61px;
  border: 1px solid #d5dfeb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  padding: 10px 12px;
}

.subscription-plan:hover {
  border-color: #8cb5e7;
}

.subscription-plan.is-selected {
  border: 2px solid #1267d5;
  background: #eaf3ff;
  box-shadow: none;
}

.subscription-plan.is-unavailable {
  cursor: not-allowed;
  opacity: 0.56;
}

.subscription-plan input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.subscription-plan:has(input:focus-visible) {
  outline: 3px solid rgba(18, 103, 213, 0.22);
  outline-offset: 2px;
}

.subscription-plan-radio {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 2px solid #a9b7c7;
  border-radius: 50%;
  background: #fff;
}

.subscription-plan.is-selected .subscription-plan-radio {
  border: 5px solid #1267d5;
}

.subscription-plan-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.subscription-plan-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.subscription-plan-heading strong {
  color: #172334;
  font-size: 0.88rem;
}

.subscription-plan-copy > small {
  color: #68788c;
  font-size: 0.7rem;
}

.subscription-plan-badge {
  border-radius: 999px;
  background: #e9f1fb;
  color: #1f5f9e;
  padding: 3px 6px;
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.035em;
}

.subscription-plan-badge.is-best {
  background: #dff5e8;
  color: #147344;
}

.subscription-plan-price {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  min-width: 86px;
  color: #172334;
  text-align: right;
}

.subscription-plan-price strong {
  font-size: 0.98rem;
}

.subscription-plan-price small {
  color: #68788c;
  font-size: 0.63rem;
  font-weight: 600;
}

.subscription-plan-price.is-organisation-price {
  display: grid;
  gap: 1px;
  min-height: 0;
  font-size: inherit;
}

.subscription-plan-price.is-organisation-price strong {
  margin: 0;
  font-size: 0.9rem;
}

.subscription-plan-price.is-organisation-price small {
  color: #68788c;
  font-size: 0.62rem;
}

.subscription-saving {
  margin: 9px 0 0;
  border-radius: 8px;
  background: #eaf8ef;
  color: #176b3a;
  padding: 8px 10px;
  font-size: 0.72rem;
  font-weight: 720;
  text-align: center;
}

.subscription-account-type {
  margin: 11px 0 0;
  border: 0;
  border-top: 1px solid #dde6ef;
  border-radius: 0;
  background: transparent;
  padding: 11px 0 0;
}

.subscription-account-type h4,
.subscription-account-type p {
  margin: 0;
}

.subscription-account-type h4 {
  color: #33465b;
  font-size: 0.75rem;
}

.subscription-account-type p {
  margin-top: 2px;
  color: #718197;
  font-size: 0.68rem;
}

.subscription-account-type-options {
  gap: 7px;
  margin-top: 8px;
}

.subscription-account-type-option {
  min-height: 45px;
  padding: 8px 10px;
}

.subscription-account-type-option strong {
  font-size: 0.76rem;
}

.subscription-account-type-option span {
  font-size: 0.66rem;
}

.subscription-term-card .subscription-account-type-option.is-selected {
  background: #e8f2ff;
  box-shadow: none;
}

.subscription-organisation-fields {
  gap: 9px;
  margin-top: 9px;
  padding-top: 9px;
}

.subscription-paid-continue {
  width: 100%;
  min-height: 44px;
  margin-top: 13px;
  font-size: 0.88rem;
}

.subscription-map-safe-note,
.subscription-signin-hint {
  margin: 7px 0 0;
  color: #718197;
  font-size: 0.69rem;
  text-align: center;
}

.subscription-payment-assurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 9px;
  color: #52657b;
}

.subscription-payment-label {
  font-size: 0.7rem;
  font-weight: 720;
}

.subscription-payment-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.subscription-card-mark,
.subscription-stripe-mark {
  display: inline-grid;
  min-width: 47px;
  height: 29px;
  place-items: center;
  border: 1px solid #aebdce;
  border-radius: 4px;
  background: #fff;
  color: #263d59;
  padding: 0 7px;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
}

.subscription-card-mark.is-visa {
  color: #17458f;
  font-size: 0.77rem;
  font-style: italic;
  letter-spacing: 0.02em;
}

.subscription-card-mark.is-mastercard {
  position: relative;
  display: inline-block;
  min-width: 47px;
}

.subscription-card-mark.is-mastercard :is(i, b) {
  position: absolute;
  top: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.subscription-card-mark.is-mastercard i {
  left: 8px;
  background: #e54835;
}

.subscription-card-mark.is-mastercard b {
  right: 8px;
  background: rgba(244, 159, 32, 0.9);
}

.subscription-card-mark.is-amex {
  background: #2b86bc;
  color: #fff;
}

.subscription-card-mark.is-paypal {
  color: #173c78;
  font-size: 0.68rem;
  font-style: italic;
  letter-spacing: -0.02em;
}

.subscription-card-mark.is-paypal span {
  color: #168bd1;
}

.subscription-stripe-mark {
  min-width: auto;
  color: #68788c;
  font-weight: 650;
}

.subscription-stripe-mark strong {
  color: #635bff;
  font-size: 0.72rem;
}

.subscription-secure-note {
  margin: 9px 0 0;
  color: #56687d;
  font-size: 0.82rem;
  line-height: 1.3;
}

.subscription-secure-note span {
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  vertical-align: -0.08em;
}

#subscription-status {
  margin-top: 8px;
}

#subscription-status:empty {
  display: none;
}

.subscription-account-step {
  max-width: 780px;
  margin: 0 auto;
  border: 1px solid #dbe4ee;
  border-radius: 14px;
  background: #fbfdff;
  padding: 18px;
}

.subscription-back-button {
  margin-bottom: 16px;
}

.subscription-account-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(340px, 1.22fr);
  gap: 24px;
}

.subscription-account-intro h3,
.subscription-account-intro p {
  margin: 0;
}

.subscription-account-intro h3 {
  color: #172334;
  font-size: 1.2rem;
}

.subscription-account-intro > p:not(.account-dialog-eyebrow) {
  margin-top: 6px;
  color: #68788c;
  font-size: 0.78rem;
  line-height: 1.5;
}

.subscription-selected-plan {
  display: grid;
  gap: 3px;
  margin-top: 16px;
  border: 1px solid #b8d2f1;
  border-radius: 10px;
  background: #f0f6ff;
  color: #194f8f;
  padding: 11px 12px;
}

.subscription-selected-plan span {
  font-size: 0.7rem;
}

.subscription-account-step .account-form {
  grid-template-columns: 1fr;
  margin: 0;
}

.subscription-account-step .account-submit-button {
  width: 100%;
  min-height: 44px;
  justify-self: stretch;
}

.subscription-choice-step.is-organisation-upgrade .subscription-choice-grid {
  display: block;
  max-width: 620px;
  margin: 0 auto;
}

.subscription-choice-step.is-organisation-upgrade :is(
  .subscription-comparison-card,
  .subscription-term-card > .subscription-section-heading,
  .subscription-plans,
  .subscription-saving,
  .subscription-paid-continue,
  .subscription-map-safe-note,
  .subscription-payment-assurance,
  .subscription-signin-hint
) {
  display: none;
}

.subscription-choice-step.is-organisation-upgrade .subscription-account-type {
  margin: 0;
  border: 0;
  padding: 0;
}

.subscription-free-button:focus-visible,
.subscription-back-button:focus-visible,
.subscription-paid-continue:focus-visible,
.subscription-account-type-option:focus-visible {
  outline: 3px solid rgba(18, 103, 213, 0.22);
  outline-offset: 2px;
}

@media (max-width: 820px) {
  .subscription-dialog-header,
  .subscription-dialog-body {
    padding-right: 18px;
    padding-left: 18px;
  }

  .subscription-choice-grid,
  .subscription-account-layout {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 520px) {
  .subscription-modal-backdrop {
    padding: 8px;
  }

  .subscription-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 14px;
  }

  .subscription-dialog-header {
    gap: 12px;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .subscription-dialog-header h2 {
    font-size: 1.2rem;
  }

  .subscription-unlock-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .subscription-unlock-icon svg {
    width: 34px;
    height: 34px;
  }

  .subscription-comparison-card,
  .subscription-term-card,
  .subscription-account-step {
    padding: 14px;
  }

  .subscription-plan {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .subscription-plan-price {
    grid-column: 2;
    justify-content: flex-start;
    text-align: left;
  }

  .subscription-account-type-options,
  .subscription-organisation-fields {
    grid-template-columns: 1fr;
  }

  .subscription-payment-assurance {
    align-items: center;
    flex-direction: column;
    gap: 5px;
  }
}

@media (max-height: 700px) and (min-width: 821px) {
  .subscription-dialog-body {
    padding-top: 14px;
  }
}

/* Editor chrome: compact workspace shortcuts, map history and access message. */
:root {
  --workspace-quick-offset: 130px;
  --workspace-quick-gap: 8px;
  --workspace-quick-width: min(calc(var(--panel-width) - 10px), calc(100vw - var(--rail-width) - 20px));
}

.app-topbar {
  display: grid;
  grid-template-areas: "brand gbmaps-return access-offer actions";
  grid-template-columns: minmax(145px, 200px) auto minmax(0, 1fr) auto;
  gap: 16px;
  padding-inline: 17px;
}

.app-brand {
  grid-area: brand;
  min-width: 0;
}

.gbmaps-return-link {
  grid-area: gbmaps-return;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 8px;
  border: 1px solid #c9d7e6;
  border-radius: 9px;
  background: #f7fafd;
  color: #24364a;
  padding: 0 11px 0 8px;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.gbmaps-return-link[hidden] {
  display: none;
}

.gbmaps-return-link img {
  width: 27px;
  height: 18px;
  flex: 0 0 auto;
  border: 1px solid rgba(15, 23, 42, 0.16);
  object-fit: cover;
}

.gbmaps-return-link:hover {
  border-color: #88acd3;
  background: #edf5fd;
  color: #0b55b5;
  transform: translateY(-1px);
}

.gbmaps-return-link:focus-visible {
  outline: 3px solid rgba(18, 103, 213, 0.2);
  outline-offset: 2px;
}

.topbar-access-offer {
  grid-area: access-offer;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
}

.topbar-access-offer[hidden] {
  display: none;
}

.topbar-access-offer p {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: #172334;
  font-size: clamp(0.78rem, 1.02vw, 0.93rem);
  font-weight: 630;
  letter-spacing: -0.01em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-access-offer p span {
  color: #7690aa;
}

.support-impersonation-banner {
  grid-area: access-offer;
  min-width: 0;
  max-width: 680px;
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 9px;
  border: 1px solid #d89b34;
  border-radius: 10px;
  background: #fff7df;
  color: #402b0d;
  padding: 5px 6px 5px 9px;
  box-shadow: 0 2px 8px rgba(117, 75, 13, 0.1);
}

.support-impersonation-banner[hidden] {
  display: none;
}

body.has-support-impersonation .topbar-access-offer {
  display: none !important;
}

body.has-support-impersonation #topbar-complimentary-upgrade-button {
  display: none !important;
}

.support-impersonation-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e7a72d;
  color: #ffffff;
}

.support-impersonation-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.support-impersonation-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.72rem;
  line-height: 1.15;
  white-space: nowrap;
}

.support-impersonation-copy > strong {
  color: #825312;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.support-impersonation-copy > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-impersonation-copy b {
  font-weight: 800;
}

.support-impersonation-copy small {
  color: #89642c;
  font-size: inherit;
}

#support-impersonation-exit {
  min-height: 30px;
  flex: 0 0 auto;
  border: 1px solid #c7861c;
  border-radius: 7px;
  background: #ffffff;
  color: #68430e;
  cursor: pointer;
  padding: 0 9px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
}

#support-impersonation-exit:hover,
#support-impersonation-exit:focus-visible {
  border-color: #8a570c;
  background: #fff2c9;
  outline: none;
}

#support-impersonation-exit:disabled {
  cursor: wait;
  opacity: 0.58;
}

#topbar-full-access-button {
  min-height: 40px;
  flex: 0 0 auto;
  border: 1px solid #245ed7;
  border-radius: 10px;
  background: linear-gradient(180deg, #3475ed 0%, #245dd4 100%);
  box-shadow: 0 5px 13px rgba(37, 94, 212, 0.2);
  color: #ffffff;
  cursor: pointer;
  padding: 0 18px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

#topbar-full-access-button:hover {
  background: linear-gradient(180deg, #3f7ff0 0%, #1f55c5 100%);
  box-shadow: 0 7px 17px rgba(37, 94, 212, 0.27);
  transform: translateY(-1px);
}

#topbar-full-access-button:focus-visible {
  outline: 3px solid rgba(37, 94, 212, 0.25);
  outline-offset: 2px;
}

.topbar-actions {
  grid-area: actions;
  align-items: center;
  justify-self: end;
}

#help-button.topbar-button.is-help {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  border-color: #d5dee8;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 3px 9px rgba(31, 48, 67, 0.09);
  padding: 0 !important;
  font-size: 1rem !important;
}

#help-button.topbar-button.is-help > span {
  color: #26384b;
  font-size: 1.08rem;
  font-weight: 850;
  line-height: 1;
}

#help-button.topbar-button.is-help:hover {
  border-color: #9ebfe4;
  background: #f4f8fd;
  color: var(--ui-blue-dark);
}

.workspace-quick-panel {
  position: absolute;
  z-index: 86;
  top: calc(var(--topbar-height) + 10px);
  left: calc(var(--rail-width) + 10px);
  width: var(--workspace-quick-width);
  display: grid;
  gap: 8px;
  box-sizing: border-box;
  border: 1px solid #bad59f;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(239, 249, 229, 0.98), rgba(224, 242, 207, 0.98));
  box-shadow: 0 10px 28px rgba(50, 86, 38, 0.14);
  padding: 9px;
  backdrop-filter: blur(9px);
}

.workspace-quick-panel .map-search {
  width: 100%;
  min-width: 0;
  margin: 0;
  border-color: #c9d8bc;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 6px rgba(50, 86, 38, 0.06);
}

.workspace-quick-panel .map-search input {
  height: 40px;
  font-size: 0.78rem;
}

.workspace-quick-panel .map-search-results {
  z-index: 210;
  max-height: min(420px, calc(100vh - var(--topbar-height) - 140px));
}

.workspace-quick-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 7px;
}

.workspace-quick-panel .project-heading {
  min-width: 0;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.workspace-quick-panel .project-menu-button {
  width: 116px;
  min-width: 116px;
  height: 40px;
  gap: 6px;
  border-color: #c9d8bc;
  border-radius: 10px;
  padding: 4px 7px;
}

.workspace-quick-panel .project-menu-trigger-icon {
  width: 25px;
  height: 25px;
}

.workspace-quick-panel .project-menu-chevron {
  width: 15px;
  height: 15px;
  margin-left: 0;
}

.workspace-quick-panel .save-indicator {
  min-width: 0;
  display: inline-flex !important;
  gap: 5px;
  overflow: hidden;
  color: #52664d;
  font-size: 0.7rem;
}

.workspace-quick-panel .save-indicator > span {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  font-size: 0.58rem;
}

.workspace-quick-panel .save-indicator b {
  overflow: hidden;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-quick-panel .background-map-toggle {
  width: 40px;
  height: 40px;
  margin: 0;
  border-color: #c9d8bc;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
}

.workspace-quick-panel .project-menu {
  top: calc(100% + 7px);
  width: min(308px, calc(100vw - var(--rail-width) - 30px));
}

.history-controls {
  position: absolute;
  z-index: 86;
  top: calc(var(--topbar-height) + 12px);
  right: 14px;
  display: flex;
  gap: 5px;
  margin: 0;
  border: 1px solid #c3dca9;
  border-radius: 14px;
  background: rgba(235, 247, 222, 0.96);
  box-shadow: 0 9px 24px rgba(50, 86, 38, 0.14);
  padding: 8px;
  backdrop-filter: blur(9px);
}

.history-controls .icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid #d3dfc8;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 5px rgba(50, 86, 38, 0.06);
}

.history-controls .icon-button:hover:not(:disabled) {
  border-color: #9bbbdc;
  background: #f4f8fd;
}

.history-controls .icon-button:disabled {
  background: rgba(255, 255, 255, 0.7);
  color: #aeb9ac;
  opacity: 0.78;
}

.tool-panel,
.dataset-panel,
.legend-panel,
.labels-panel,
.page-panel,
.display-panel {
  top: calc(var(--topbar-height) + var(--workspace-quick-offset)) !important;
  max-height: calc(100vh - var(--topbar-height) - var(--statusbar-height) - var(--workspace-quick-offset) - 10px);
}

.workspace-map-zoom-controls {
  position: absolute;
  z-index: 86;
  top: calc(var(--topbar-height) + 10px);
  left: calc(var(--rail-width) + 10px + var(--workspace-quick-width) + var(--workspace-quick-gap));
  height: calc(var(--workspace-quick-offset) - 20px);
  display: flex;
  align-items: center;
}

.workspace-map-zoom-controls .ol-zoom {
  position: static;
  top: auto;
  left: auto;
  display: grid;
  gap: 2px;
  margin: 0;
  border: 1px solid #c3dca9;
  border-radius: 10px;
  background: rgba(235, 247, 222, 0.96);
  box-shadow: 0 7px 18px rgba(50, 86, 38, 0.13);
  padding: 4px;
  backdrop-filter: blur(9px);
}

.workspace-map-zoom-controls .ol-zoom button {
  width: 32px;
  height: 30px;
  margin: 0;
  border: 1px solid #d3dfc8;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.96);
  color: #26384b;
  font-size: 1.05rem;
  line-height: 1;
}

.workspace-map-zoom-controls .ol-zoom button:hover,
.workspace-map-zoom-controls .ol-zoom button:focus-visible {
  border-color: #9bbbdc;
  background: #f4f8fd;
  color: var(--ui-blue-dark);
}

#app.is-pdf-reviewing .workspace-quick-panel,
#app.is-pdf-reviewing .workspace-map-zoom-controls,
#app.is-pdf-reviewing .history-controls {
  opacity: 0.16;
  filter: blur(3px) saturate(0.45);
  pointer-events: none;
}

@media (max-width: 1180px) {
  .app-topbar {
    grid-template-columns: minmax(125px, 165px) auto minmax(0, 1fr) auto;
    gap: 10px;
    padding-inline: 11px;
  }

  .topbar-access-offer {
    gap: 10px;
  }

  #topbar-full-access-button {
    padding-inline: 13px;
  }
}

@media (max-width: 900px) {
  .app-topbar {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }

  .topbar-access-offer p {
    display: none;
  }

  .support-impersonation-copy > strong,
  .support-impersonation-copy small {
    display: none;
  }

  .workspace-quick-panel .project-heading {
    display: grid !important;
  }
}

@media (max-width: 760px) {
  .topbar-access-offer {
    display: none;
  }

  .app-topbar {
    grid-template-areas: "brand gbmaps-return actions";
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  body.has-support-impersonation .app-topbar {
    grid-template-areas: "brand access-offer actions";
    grid-template-columns: minmax(100px, 145px) minmax(0, 1fr) auto;
  }

  body.has-support-impersonation .gbmaps-return-link {
    display: none;
  }

  .support-impersonation-banner {
    max-width: 100%;
    gap: 6px;
    padding-left: 6px;
  }

  .support-impersonation-icon {
    display: none;
  }

  .support-impersonation-copy {
    overflow: hidden;
  }
}

@media (max-width: 620px) {
  .gbmaps-return-link {
    width: 40px;
    min-width: 40px;
    justify-content: center;
    padding: 0;
  }

  .gbmaps-return-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 620px) {
  :root {
    --workspace-quick-offset: 124px;
  }

  .workspace-quick-panel {
    top: calc(var(--topbar-height) + 8px);
    right: 61px;
    left: calc(var(--rail-width) + 8px);
    width: auto;
    gap: 7px;
    border-radius: 12px;
    padding: 8px;
  }

  .workspace-quick-panel .map-search input {
    height: 38px;
  }

  .workspace-quick-panel .project-menu-button {
    width: 108px;
    min-width: 108px;
    height: 38px;
  }

  .workspace-quick-panel .project-menu-trigger-icon {
    width: 23px;
    height: 23px;
  }

  .workspace-quick-panel .save-indicator {
    display: none !important;
  }

  .workspace-quick-panel .project-heading {
    grid-template-columns: auto;
  }

  .workspace-quick-panel .background-map-toggle {
    width: 38px;
    height: 38px;
  }

  .history-controls {
    top: calc(var(--topbar-height) + 8px);
    right: 7px;
    flex-direction: column;
    gap: 4px;
    border-radius: 12px;
    padding: 5px;
  }

  .history-controls .icon-button {
    width: 36px;
    height: 36px;
  }

  .tool-panel,
  .dataset-panel,
  .legend-panel,
  .labels-panel,
  .page-panel,
  .display-panel {
    top: calc(var(--topbar-height) + var(--workspace-quick-offset)) !important;
    max-height: calc(100vh - var(--topbar-height) - var(--statusbar-height) - var(--workspace-quick-offset) - 8px);
  }

  .ol-zoom {
    top: auto;
    right: auto;
    left: auto;
  }

  .workspace-map-zoom-controls {
    top: calc(var(--topbar-height) + var(--workspace-quick-offset) + 8px);
    right: 8px;
    left: auto;
    height: auto;
    align-items: flex-start;
  }
}

/* Shared composition frame shapes: flat controls and identical screen clipping. */
.composition-frame-shape-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.composition-frame-shape-control > strong {
  flex: 0 0 auto;
  color: #27364c;
  font-size: 0.78rem;
  font-weight: 700;
}

.composition-frame-shape-options {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 220px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
}

.composition-frame-shape-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 32px;
  border: 0;
  border-right: 1px solid #d8e0eb;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  color: #4a5a70;
  cursor: pointer;
  font: 700 0.72rem/1 system-ui, sans-serif;
  padding: 6px 8px;
}

.composition-frame-shape-button:last-child {
  border-right: 0;
}

.composition-frame-shape-button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.composition-frame-shape-button:is(:hover, :focus-visible) {
  background: #f1f6ff;
  color: #245ec7;
}

.composition-frame-shape-button.is-selected {
  background: #e8f0ff;
  color: #1d57bd;
}

.composition-frame-shape-button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

.page-image-frame-controls .composition-frame-shape-control {
  grid-column: 1 / -1;
}

.inset-map-overlay[data-frame-shape='circle'],
.inset-map-overlay[data-frame-shape='circle']::after,
.inset-map-overlay[data-frame-shape='circle'] .inset-map-viewport,
.page-image-overlay[data-frame-shape='circle'],
.page-image-overlay[data-frame-shape='circle']::after,
.page-image-overlay[data-frame-shape='circle'] .page-image-viewport {
  border-radius: 50%;
}

.inset-map-overlay[data-frame-shape='circle'] :is(
  .inset-map-resize-handle.is-n,
  .inset-map-resize-handle.is-e,
  .inset-map-resize-handle.is-s,
  .inset-map-resize-handle.is-w
),
.page-image-overlay[data-frame-shape='circle'] .page-image-resize-handle:is(
  [data-resize-direction='n'],
  [data-resize-direction='e'],
  [data-resize-direction='s'],
  [data-resize-direction='w']
) {
  display: none;
}

.inset-map-layer.is-editing .inset-map-overlay[data-frame-shape='circle'] .inset-map-resize-handle:is(
  .is-n,
  .is-e,
  .is-s,
  .is-w
),
.page-image-layer.is-editing .page-image-overlay.is-selected[data-frame-shape='circle'] .page-image-resize-handle:is(
  [data-resize-direction='n'],
  [data-resize-direction='e'],
  [data-resize-direction='s'],
  [data-resize-direction='w']
) {
  display: none;
}

/* Unified points and markers. One compact workflow replaces the separate
   Dots and Locations panels while retaining both import engines. */
#points-panel .points-panel-content {
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: #eef1f7;
  padding: 10px;
}

#points-panel .points-mode-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #c8d2e2;
  border-radius: 9px;
  background: #ffffff;
}

#points-panel .points-mode-tabs button {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-rows: 23px auto;
  place-items: center;
  gap: 2px;
  border: 0;
  border-left: 1px solid #d4dce9;
  background: #ffffff;
  color: #40516b;
  padding: 5px 3px;
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.08;
}

#points-panel .points-mode-tabs button:first-child { border-left: 0; }

#points-panel .points-mode-tabs button:is(:hover, :focus-visible) {
  background: #f2f6ff;
  color: #1f54bd;
  outline: none;
}

#points-panel .points-mode-tabs button.is-active {
  background: #326ae5;
  color: #ffffff;
}

#points-panel .points-mode-tabs svg {
  width: 26px;
  height: 22px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#points-panel .points-mode-tabs button:nth-child(2) svg,
#points-panel .points-mode-tabs button:nth-child(3) svg {
  fill: none;
}

#points-panel .points-mode-pane {
  min-width: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  padding: 10px;
}

#points-panel .points-mode-pane[hidden] { display: none; }

#points-panel .points-upload-zone {
  min-height: 126px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed #326ae5;
  border-radius: 9px;
  background: #fff5c9;
  box-shadow: none;
  padding: 8px 10px 9px;
}

#points-panel .points-upload-zone:is(:hover, :focus-visible, .is-dragging) {
  border-color: #7040c7;
  background: #ffefb5;
  outline: none;
}

#points-panel .points-upload-zone > img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

#points-panel .points-upload-zone > strong {
  color: #14213c;
  font-size: 0.83rem;
  font-weight: 650;
}

#points-panel .points-upload-zone > span,
#points-panel .circle-centre-status,
#points-panel .points-section-heading p {
  margin: 0;
  color: #5c6b80;
  font-size: 0.71rem;
  line-height: 1.32;
}

#points-panel .spreadsheet-file-chips { display: flex; gap: 5px; }

#points-panel .spreadsheet-file-chips span {
  border: 1px solid #326ae5;
  border-radius: 999px;
  background: #ffffff;
  color: #2559ba;
  padding: 2px 9px;
  font-size: 0.65rem;
  font-weight: 700;
}

#points-panel .dataset-button {
  min-height: 34px;
  border-radius: 7px;
  box-shadow: none;
  font-size: 0.73rem;
  font-weight: 650;
}

#points-panel .spreadsheet-upload-button,
#points-panel .circle-apply-button {
  border-color: #326ae5;
  background: #326ae5;
  color: #ffffff;
}

#points-panel :is(.circle-clear-button, #location-key-clear) {
  border-color: #dca4a4;
  background: #fff6f6;
  color: #a43b3b;
}

#points-panel .points-section-heading,
#points-panel .points-compact-row,
#points-panel .points-action-row,
#points-panel .points-manual-add {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#points-panel .points-section-heading h3 {
  margin: 0;
  color: #14213c;
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.18;
}

#points-panel .switch-row b,
#points-panel label > span:first-child {
  color: #34435a;
  font-size: 0.72rem;
  font-weight: 650;
}

#points-panel .points-shape-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #cad4e3;
  border-radius: 8px;
}

#points-panel .points-shape-grid button {
  min-width: 0;
  height: 43px;
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid #d4dce9;
  background: #ffffff;
  color: #57708f;
  cursor: pointer;
  padding: 4px;
}

#points-panel .points-shape-grid button:first-child { border-left: 0; }
#points-panel .points-shape-grid button.is-selected { background: #eaf1ff; color: #245fd2; }
#points-panel .points-shape-grid svg { width: 21px; height: 21px; fill: currentColor; }
#points-panel .points-shape-grid button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#points-panel .points-symbol-fill-editor {
  min-width: 0;
  display: grid;
  gap: 7px;
}

#points-panel .points-symbol-fill-button {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  border: 1px solid #c7d1e1;
  border-radius: 8px;
  background: #ffffff;
  color: #26364e;
  cursor: pointer;
  padding: 4px 8px;
  text-align: left;
}

#points-panel .points-symbol-fill-button:is(:hover, :focus-visible),
#points-panel .points-symbol-fill-button[aria-expanded='true'] {
  border-color: #326ae5;
  background: #f4f7ff;
  outline: none;
}

#points-panel .points-symbol-fill-swatch {
  width: 30px;
  height: 30px;
  border: 1px solid #6d7b8f;
  border-radius: 6px;
  background: #8193d4;
}

#points-panel .points-symbol-fill-button > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}

#points-panel .points-symbol-fill-button strong {
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.15;
}

#points-panel .points-symbol-fill-button small {
  overflow: hidden;
  color: #68778b;
  font-size: 0.68rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#points-panel .points-symbol-fill-button > svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 140ms ease;
}

#points-panel .points-symbol-fill-button[aria-expanded='true'] > svg { transform: rotate(180deg); }

#points-panel .points-symbol-fill-popover {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #c7d1e1;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px;
}

#points-panel .points-symbol-fill-popover[hidden] { display: none; }

#points-panel .points-symbol-fill-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

#points-panel .points-symbol-fill-label {
  width: 42px;
  flex: 0 0 42px;
  color: #657287;
  font-size: 0.67rem;
  font-weight: 650;
}

#points-panel :is(.circle-ring-colour-chip, .circle-ring-pattern-chip, .circle-ring-colour-well) {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  overflow: hidden;
  border: 1px solid rgb(23 33 43 / 18%);
  border-radius: 5px;
  background-color: #ffffff;
  cursor: pointer;
  padding: 0;
}

#points-panel :is(.circle-ring-colour-chip, .circle-ring-pattern-chip, .circle-ring-custom-colour).is-selected,
#points-panel .points-symbol-imported-colours.is-selected {
  border: 2px solid #326ae5;
  box-shadow: 0 0 0 1px #ffffff inset;
}

#points-panel .points-symbol-imported-colours {
  height: 23px;
  flex: 0 0 auto;
  border: 1px solid #bac6d8;
  border-radius: 5px;
  background: linear-gradient(135deg, #8193d4 0 25%, #63b9d4 25% 50%, #69bd9c 50% 75%, #f97316 75% 100%);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  padding: 0 4px;
  text-shadow: 0 1px 2px rgb(23 33 43 / 65%);
}

#points-panel .circle-ring-colour-well {
  position: relative;
  display: grid;
  place-items: center;
}

#points-panel .circle-ring-colour-well input[type='color'] {
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transform: translate(-4px, -4px);
}

#points-panel .circle-ring-custom-colour {
  color: #475a75;
}

#points-panel .circle-ring-custom-colour svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  pointer-events: none;
}

#points-panel .circle-ring-custom-colour-preview {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: var(--circle-custom-colour, #2563eb);
  box-shadow: 0 0 0 1px rgb(23 33 43 / 20%);
  pointer-events: none;
}

#points-panel .circle-ring-custom-colour input[type='color'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: none;
}

#points-panel .circle-ring-pattern-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #f6f8fb;
  padding: 7px 0;
}

#points-panel .circle-ring-pattern-details.is-solid > * { opacity: 0.48; }

#points-panel .circle-ring-detail-hint {
  color: #68778b;
  font-size: 0.67rem;
}

#points-panel .circle-ring-range-row > input[type='range'] {
  min-width: 0;
  flex: 1 1 auto;
  accent-color: #326ae5;
}

#points-panel .circle-ring-range-row output {
  width: 40px;
  flex: 0 0 40px;
  color: #536278;
  font-size: 0.67rem;
  font-weight: 650;
  text-align: right;
}

#points-panel .circle-ring-background-options {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #c7d1e1;
  border-radius: 6px;
}

#points-panel .circle-ring-background-options button {
  min-height: 25px;
  border: 0;
  border-left: 1px solid #c7d1e1;
  background: #ffffff;
  color: #536278;
  cursor: pointer;
  font: inherit;
  font-size: 0.65rem;
  font-weight: 650;
  padding: 4px 7px;
}

#points-panel .circle-ring-background-options button:first-child { border-left: 0; }
#points-panel .circle-ring-background-options button.is-selected { background: #eaf1ff; color: #245fd2; }
#points-panel .circle-ring-background-options button:disabled { cursor: not-allowed; }

#points-panel .points-inline-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 9px;
}

#points-panel .points-sizing-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(118px, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 9px;
}

#points-panel .points-sizing-row p {
  min-width: 0;
  margin: 0 0 2px;
  color: #5f6f84;
  font-size: 0.72rem;
  line-height: 1.35;
}

#points-panel .callout-style-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }

#points-panel .callout-appearance-editor {
  position: relative;
  min-width: 0;
}

#points-panel .callout-appearance-launch {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #c7d1e1;
  border-radius: 8px;
  background: #f8faff;
  color: #26364e;
  padding: 4px 5px 4px 8px;
  text-align: left;
}

#points-panel .callout-appearance-button {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  border: 1px solid #b9c8df;
  border-radius: 6px;
  background: #ffffff;
  color: #326ae5;
  cursor: pointer;
  padding: 6px;
}

#points-panel .callout-appearance-button:is(:hover, :focus-visible),
#points-panel .callout-appearance-button[aria-expanded='true'] {
  border-color: #326ae5;
  background: #e9f0ff;
  outline: none;
}

#points-panel .callout-appearance-button > svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

#points-panel .callout-appearance-launch > span,
#points-panel .callout-popover-header > span,
#points-panel .callout-style-mode-row > span:first-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}

#points-panel .callout-appearance-launch strong,
#points-panel .callout-popover-header strong,
#points-panel .callout-style-mode-row strong {
  color: #26364e;
  font-size: 0.74rem;
  line-height: 1.15;
}

#points-panel .callout-appearance-launch small,
#points-panel .callout-popover-header small,
#points-panel .callout-style-mode-row small {
  overflow: hidden;
  color: #68778b;
  font-size: 0.65rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#points-panel .callout-appearance-popover {
  position: absolute;
  z-index: 45;
  top: calc(100% + 5px);
  right: 0;
  box-sizing: border-box;
  width: min(286px, 100%);
  max-height: min(430px, calc(100vh - 210px));
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  gap: 5px;
  border: 2px solid #355da9;
  border-radius: 10px;
  background: #edf3fc;
  box-shadow: 0 10px 24px rgba(20, 42, 77, 0.24);
  padding: 6px;
}

#points-panel .callout-appearance-popover[hidden] { display: none; }

#points-panel .callout-popover-header,
#points-panel .callout-style-mode-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#points-panel .callout-popover-header {
  margin: -6px -6px 0;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(125deg, #1b3e79, #2e61bd);
  padding: 6px 7px;
}

#points-panel .callout-popover-header strong {
  color: #ffffff;
}

#points-panel .callout-popover-header small {
  color: #dce8ff;
}

#points-panel .callout-popover-header > button {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
  padding: 5px;
}

#points-panel .callout-popover-header > button:hover {
  background: rgba(255, 255, 255, 0.24);
}

#points-panel .callout-popover-header svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

#points-panel .callout-style-mode-row {
  border: 1px solid #b9c9e1;
  border-left: 3px solid #326ae5;
  border-radius: 7px;
  background: #ffffff;
  padding: 5px 6px;
}

#points-panel #callout-style-controls {
  display: grid;
  gap: 5px;
  border-top: 1px solid #c5d3e7;
  padding-top: 5px;
}

#points-panel .callout-style-fields {
  gap: 4px;
}

#points-panel .callout-style-fields > label {
  gap: 2px;
  color: #40526e;
  font-size: 0.59rem;
}

#points-panel .callout-style-fields input[type='color'] {
  width: 31px;
  height: 27px;
  border-color: #9fb1ca;
  padding: 2px;
}

#points-panel .callout-measure-fields,
#points-panel .callout-layout-fields {
  gap: 4px 6px;
}

#points-panel #callout-style-controls .callout-measure-fields > label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  align-items: center;
  gap: 4px;
}

#points-panel .callout-measure-fields > label > span:first-child,
#points-panel .callout-layout-fields > label > span:first-child {
  color: #40526e;
  font-size: 0.61rem;
  line-height: 1.1;
}

#points-panel .callout-measure-fields .points-value-field,
#points-panel .callout-layout-fields .points-value-field {
  height: 29px;
  gap: 3px;
}

#points-panel .callout-measure-fields .points-value-field input,
#points-panel .callout-layout-fields .points-value-field input {
  height: 29px;
  border-color: #aebed4;
  border-radius: 6px;
  padding: 3px 4px;
  font-size: 0.67rem;
}

#points-panel .callout-measure-fields .points-unit-suffix,
#points-panel .callout-layout-fields .points-unit-suffix {
  font-size: 0.59rem;
}

#points-panel .callout-layout-fields .dataset-select {
  min-height: 29px;
  height: 29px;
  border-color: #aebed4;
  border-radius: 6px;
  padding: 3px 5px;
  font-size: 0.66rem;
}

#points-panel .callout-layout-fields > label:last-child {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) 82px;
  align-items: center;
  gap: 6px;
}

#points-panel .callout-item-list {
  display: grid;
  gap: 0;
  border-top: 1px solid #dfe4ec;
}

#points-panel .callout-item-row {
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) 26px 26px;
  align-items: center;
  gap: 5px;
  border: 0;
  border-bottom: 1px solid #dfe4ec;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.82);
  padding: 3px 2px 3px 3px;
}

#points-panel .callout-item-row.is-style-target {
  border-left-color: #326ae5;
  background: #eef3ff;
}

#points-panel .callout-item-row:hover { background: #f8faff; }

#points-panel .callout-item-row.is-marker-active,
#points-panel .callout-item-row.is-marker-active:hover {
  border-left-color: #4d8f3d;
  background: #edf7e9;
}

#points-panel .callout-item-row.is-marker-active input {
  border-color: #7fb469;
  background: #fbfff9;
}

#points-panel .callout-item-number {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--callout-row-colour, #2563eb);
  color: var(--callout-row-text, #ffffff);
  font-size: 0.63rem;
  font-weight: 750;
}

#points-panel .callout-item-row input {
  min-width: 0;
  width: 100%;
  height: 29px;
  border: 1px solid #c7d1df;
  border-radius: 7px;
  background: #ffffff;
  color: #26364e;
  padding: 4px 7px;
  font: inherit;
  font-size: 0.71rem;
}

#points-panel .callout-item-action {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #47607f;
  cursor: pointer;
  padding: 4px;
}

#points-panel .callout-item-action:hover { background: #e8effc; color: #245fd2; }
#points-panel .callout-item-delete { color: #98666d; }
#points-panel .callout-item-delete:hover { background: #f8e5e7; color: #a52d3a; }

#points-panel .callout-item-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  pointer-events: none;
}

#points-panel .callout-item-delete span {
  position: relative;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

#points-panel .callout-item-delete span::before,
#points-panel .callout-item-delete span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: '';
}

#points-panel .callout-item-delete span::before { transform: translate(-50%, -50%) rotate(45deg); }
#points-panel .callout-item-delete span::after { transform: translate(-50%, -50%) rotate(-45deg); }

#callout-style-mode-backdrop {
  padding: 10px;
}

.callout-style-mode-dialog {
  width: min(286px, calc(100vw - 20px));
  gap: 6px;
  border-color: #bdcbe0;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(15, 36, 68, 0.24);
  padding: 12px;
}

.callout-style-mode-dialog .circle-confirm-icon {
  width: 30px;
  height: 30px;
  font-size: 0.9rem;
}

.callout-style-mode-dialog h2 {
  font-size: 0.92rem;
}

.callout-style-mode-dialog p {
  max-width: 250px;
  font-size: 0.7rem;
  line-height: 1.32;
}

.callout-style-mode-dialog .circle-confirm-actions {
  width: 100%;
  gap: 6px;
  margin-top: 2px;
}

.callout-style-mode-dialog .circle-confirm-actions .dataset-button {
  min-height: 31px;
  padding: 5px 9px;
  font-size: 0.69rem;
}

.callout-style-mode-dialog .circle-confirm-apply {
  border-color: #2f63c5;
  background: #2f63c5;
}

.callout-style-mode-dialog .circle-confirm-apply:hover {
  border-color: #234f9f;
  background: #234f9f;
}

#points-panel .points-inline-fields > label,
#points-panel .points-wide-field,
#points-panel .points-select-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#points-panel .callout-style-fields > label { align-items: center; }

#points-panel input[type='color'] {
  width: 34px;
  height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  padding: 3px;
}

#points-panel .points-value-field,
#points-panel .points-colour-and-number {
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 5px;
}

#points-panel .points-value-field input,
#points-panel .points-colour-and-number input[type='number'] {
  min-width: 0;
  width: 100%;
  height: 34px;
  flex: 1 1 0;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  padding: 5px 7px;
  color: #26364e;
  font: inherit;
  font-size: 0.73rem;
}

#points-panel .points-unit-suffix {
  flex: 0 0 auto;
  color: #68778b;
  line-height: 1;
  font-size: 0.67rem;
  font-weight: 600;
}

#points-panel .points-colour-and-number input[type='color'] {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

#points-panel .points-value-field input:focus-visible,
#points-panel .points-colour-and-number input[type='number']:focus-visible {
  border-color: #326ae5;
  outline: 2px solid rgba(50, 106, 229, 0.18);
  outline-offset: 1px;
}

#points-panel :is(.dataset-select, input[type='text']) {
  min-width: 0;
  width: 100%;
  min-height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: none;
  color: #26364e;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.73rem;
}

#points-panel .points-manual-add input { flex: 1 1 auto; }
#points-panel .points-action-row > :first-child { flex: 1 1 auto; }
#points-panel .points-action-row > :last-child { flex: 0 0 auto; }
#points-panel .points-key-empty {
  border-left: 3px solid #7b8ba3;
  background: #f5f7fa;
  color: #536278;
  padding: 9px;
  font-size: 0.72rem;
  line-height: 1.4;
}

#points-panel .points-key-empty:not([hidden]) {
  display: grid;
  gap: 8px;
}

#points-panel .points-key-empty .dataset-button {
  justify-self: start;
  min-height: 32px;
  border-color: #9cb3d8;
  background: #eaf1ff;
  color: #2457a7;
}

#points-panel .points-key-data-actions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

#points-panel #location-key-key-controls .points-compact-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px;
}

#points-panel #location-key-key-controls .points-compact-row > .switch-row {
  flex: 0 0 auto;
  white-space: nowrap;
}

#points-panel #location-key-key-controls .points-key-data-actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

#points-panel #location-key-key-controls .points-key-data-actions .dataset-button {
  min-width: 0;
  padding: 6px;
  white-space: nowrap;
}

#points-panel #location-key-controls,
#points-panel #location-key-key-controls {
  display: grid;
  gap: 9px;
}

#points-panel :is(#location-key-controls, #location-key-key-controls)[hidden] { display: none; }

#map.is-placing-callout { cursor: crosshair; }

@media (max-width: 390px) {
  #points-panel .points-shape-grid { grid-template-columns: repeat(3, 1fr); }
  #points-panel .points-shape-grid button:nth-child(4) { border-left: 0; }
  #points-panel .callout-style-fields { grid-template-columns: repeat(2, 1fr); }
  #points-panel .points-sizing-row { grid-template-columns: 1fr; align-items: stretch; }
}

/* Map Library v2: four illustrated geography choices above a flat catalogue. */
#map-types-panel {
  overflow: clip;
}

#map-types-panel .tool-panel-content.classic-themed-content {
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #eef1f7;
  padding: 12px;
  scrollbar-color: #9aa8bb transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

#map-types-panel .tool-panel-content.classic-themed-content > * {
  min-width: 0;
  flex: 0 0 auto;
}

#map-types-panel .tool-panel-content.classic-themed-content::-webkit-scrollbar {
  width: 7px;
}

#map-types-panel .tool-panel-content.classic-themed-content::-webkit-scrollbar-track {
  background: transparent;
}

#map-types-panel .tool-panel-content.classic-themed-content::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #9aa8bb;
  background-clip: padding-box;
}

#map-types-panel .map-type-browser {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

#map-types-panel .map-type-browser-title {
  color: #263548;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
}

#map-types-panel .map-type-search-field {
  min-height: 38px;
  border-color: #c8d2e1;
  border-radius: 9px;
  box-shadow: none;
}

#map-types-panel .map-type-search-field input {
  font-size: 0.76rem;
}

#map-types-panel .map-type-geography-grid {
  gap: 8px;
}

#map-types-panel .map-type-geography-card {
  min-height: 102px;
  grid-template-rows: minmax(62px, 1fr) auto;
  border-radius: 9px;
  background: var(--map-card-surface);
  box-shadow: none;
  padding: 7px 7px 8px;
}

#map-types-panel .map-type-geography-card:hover:not(:disabled) {
  box-shadow: none;
  transform: none;
}

#map-types-panel .map-type-geography-card.is-selected {
  box-shadow: none;
}

#map-types-panel .map-type-geography-card strong {
  font-size: 0.78rem;
  font-weight: 700;
}

#map-types-panel .map-type-country-control {
  gap: 5px;
}

#map-types-panel .map-type-country-control > span,
#map-types-panel .map-region-control .dataset-select-block > span {
  color: #34445a;
  font-size: 0.74rem;
  font-weight: 700;
}

#map-types-panel :is(.map-type-country-control, .map-region-control) .dataset-select {
  min-height: 36px;
  border-color: #c8d2e1;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 0.74rem;
  box-shadow: none;
}

#map-types-panel .map-type-boundary-picker {
  gap: 7px;
}

#map-types-panel .map-type-section-heading h4,
#map-types-panel .boundary-overlays-heading h3 {
  color: #263548;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
}

#map-types-panel .map-type-section-heading span {
  color: #68778c;
  font-size: 0.69rem;
}

#map-types-panel .map-type-boundary-list {
  gap: 4px;
}

#map-types-panel .map-type-boundary-group {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#map-types-panel .map-type-boundary-group > summary {
  min-height: 40px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.86);
  padding: 7px 8px 7px 6px;
}

#map-types-panel .map-type-boundary-group > summary:hover,
#map-types-panel .map-type-boundary-group > summary:focus-visible {
  background: #f8faff;
}

#map-types-panel .map-type-boundary-group[open] > summary {
  border-bottom: 0;
  border-left-color: var(--tool-panel-active-red);
  background: #fbe9e7;
  color: #8d2826;
}

#map-types-panel .map-type-boundary-group-chevron {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #edf2f8;
}

#map-types-panel .map-type-boundary-group[open] .map-type-boundary-group-chevron {
  background: #ffffff;
  color: #a72f2c;
}

#map-types-panel .map-type-boundary-group > summary strong {
  font-size: 0.76rem;
  font-weight: 700;
}

#map-types-panel .map-type-boundary-group > summary small {
  min-width: 25px;
  background: #eef2f7;
  padding: 2px 7px;
  color: #5f6f84;
  font-size: 0.66rem;
}

#map-types-panel .map-type-boundary-group[open] > summary small {
  background: #ffffff;
  color: #8d2826;
}

#map-types-panel .map-type-boundary-group-items {
  gap: 0;
  background: #ffffff;
  padding: 0;
}

#map-types-panel .map-type-boundary-group-items .map-type-boundary-option,
#map-types-panel .map-type-boundary-option {
  min-height: 43px;
  border: 0;
  border-bottom: 1px solid #e3e8f0;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 7px 7px 7px 8px;
  transform: none;
}

#map-types-panel .map-type-boundary-group-items .map-type-boundary-option:hover:not(:disabled),
#map-types-panel .map-type-boundary-group-items .map-type-boundary-option:focus-visible,
#map-types-panel .map-type-boundary-option:hover:not(:disabled),
#map-types-panel .map-type-boundary-option:focus-visible {
  border-color: #e3e8f0;
  border-left-color: #7699d9;
  background: #f6f9ff;
  transform: none;
}

#map-types-panel .map-type-boundary-group-items .map-type-boundary-option.is-selected,
#map-types-panel .map-type-boundary-option.is-selected {
  border: 0;
  border-bottom: 1px solid #e3e8f0;
  border-left: 3px solid #326ae5;
  border-radius: 0;
  background: #edf4ff;
  box-shadow: none;
  padding: 7px 7px 7px 8px;
}

#map-types-panel .map-type-boundary-copy strong {
  font-size: 0.76rem;
  font-weight: 680;
}

#map-types-panel .map-type-boundary-copy small {
  color: #68778c;
  font-size: 0.68rem;
}

#map-types-panel .map-type-boundary-empty,
#map-types-panel .map-type-search-empty {
  border-radius: 0;
  background: #ffffff;
  padding: 8px;
  font-size: 0.72rem;
}

#map-types-panel .map-region-control {
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 8px;
}

#map-types-panel .map-region-breadcrumb {
  color: #5e6e83;
  font-size: 0.7rem;
}

#map-types-panel .map-region-counterpart {
  min-height: 34px;
  border-radius: 8px;
  background-image: none;
  box-shadow: none;
  font-size: 0.72rem;
}

#map-types-panel .map-type-current-summary {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 1px;
  color: #617187;
  font-size: 0.7rem;
}

#map-types-panel .map-type-complete-list {
  border: 0;
  padding: 0;
}

#map-types-panel .map-type-complete-list summary {
  color: #4f6380;
  font-size: 0.72rem;
  font-weight: 700;
}

#map-types-panel .map-type-complete-list .dataset-select-block {
  margin-top: 7px;
}

#map-types-panel .map-type-complete-list .dataset-select-block > span {
  font-size: 0.7rem;
}

#map-types-panel .boundary-overlays-card {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

#map-types-panel .boundary-overlays-heading {
  min-height: 36px;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

#map-types-panel .boundary-overlays-heading p {
  margin-top: 1px;
  color: #68778c;
  font-size: 0.7rem;
  line-height: 1.3;
}

#map-types-panel .boundary-overlay-add,
#map-types-panel .boundary-overlay-remove {
  min-height: 34px;
  border-radius: 8px;
  background-image: none;
  box-shadow: none;
  font-size: 0.72rem;
}

#map-types-panel #boundary-overlays-summary {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: #617187;
  font-size: 0.7rem;
}

#map-types-panel .boundary-overlay-list {
  gap: 6px;
}

#map-types-panel .boundary-overlay-empty {
  border: 0;
  border-radius: 0;
  background: #ffffff;
  padding: 8px;
  color: #617187;
  font-size: 0.72rem;
  line-height: 1.4;
}

#map-types-panel .boundary-overlay-item {
  border: 0;
  border-left: 3px solid #7699d9;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 8px;
}

#map-types-panel .boundary-overlay-item-header strong,
#map-types-panel .boundary-overlay-item .dataset-select-block > span,
#map-types-panel .boundary-overlay-field,
#map-types-panel .boundary-overlay-inline,
#map-types-panel .boundary-overlay-status,
#map-types-panel .boundary-overlay-countries > summary {
  font-size: 0.71rem;
}

@media (max-width: 520px), (max-height: 760px) {
  #map-types-panel .tool-panel-content.classic-themed-content {
    gap: 9px;
    padding: 9px 8px 12px;
  }

  #map-types-panel .map-type-geography-card {
    min-height: 94px;
    grid-template-rows: minmax(55px, 1fr) auto;
  }
}

/* Account modal aligned with the Full Access visual system */
#account-dialog.account-dialog {
  width: min(500px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  border-color: #cfdbea;
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(15, 31, 49, 0.32);
}

#account-dialog .account-access-dialog-header {
  align-items: center;
  gap: 14px;
  border-bottom-color: #cfdbea;
  background: #f3f7fc;
  padding: 14px 20px 13px;
}

.account-access-dialog-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: calc(100% - 50px);
}

.account-access-dialog-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-dialog-identity-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
}

.account-dialog-identity-icon svg {
  width: 40px;
  height: 40px;
  overflow: visible;
}

.account-dialog-identity-disc {
  fill: #ffffff;
  stroke: #5b78ba;
  stroke-width: 2;
}

.account-dialog-identity-head {
  fill: #5472bb;
}

.account-dialog-identity-bust {
  fill: none;
  stroke: #5472bb;
  stroke-linecap: round;
  stroke-width: 4.2;
}

#account-dialog .account-dialog-eyebrow {
  margin: 0;
  color: #4668ad;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
}

#account-dialog .account-dialog-header h2 {
  font-size: clamp(1.12rem, 2vw, 1.3rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

#account-dialog .account-dialog-header p:last-child {
  margin: 2px 0 0;
  color: #5f6e7f;
  font-size: 0.75rem;
  line-height: 1.35;
}

#account-dialog .account-dialog-body {
  padding: 16px 20px 18px;
}

#account-dialog .account-tabs {
  gap: 4px;
  border: 1px solid #dce4ee;
  background: #e9eff6;
  padding: 4px;
}

#account-dialog .account-tab {
  min-height: 40px;
  border: 1px solid transparent;
  color: #607086;
  font-size: 0.84rem;
  font-weight: 760;
}

#account-dialog .account-tab.is-active {
  border-color: #cfd9e7;
  background: #ffffff;
  color: #345cb0;
  box-shadow: none;
}

#account-dialog .account-view {
  padding-top: 15px;
}

#account-dialog .account-form {
  gap: 12px;
}

#account-dialog .account-form label {
  gap: 5px;
  color: #334155;
  font-size: 0.76rem;
}

#account-dialog .account-form input {
  min-height: 44px;
  border-color: #cbd6e4;
  border-radius: 9px;
  padding: 8px 11px;
}

#account-dialog .account-form input:focus {
  border-color: #5277c8;
  box-shadow: 0 0 0 3px rgba(82, 119, 200, 0.14);
}

#account-dialog :is(.account-submit-button, .account-logout-button) {
  min-height: 42px;
  border-color: #5472bb;
  border-radius: 9px;
  background: #5472bb;
  font-weight: 760;
}

#account-dialog :is(.account-submit-button, .account-logout-button):hover:not(:disabled) {
  border-color: #4463ad;
  background: #4463ad;
}

#account-dialog :is(.account-text-button, .account-back-button, .account-reset-link) {
  color: #345cb0;
}

#account-dialog .account-provider-button,
#account-dialog .account-loading,
#account-dialog .account-setup-card,
#account-dialog .account-profile-card,
#account-dialog .account-access-note {
  box-shadow: none;
}

#account-dialog .account-status-message:empty {
  display: none;
}

@media (max-width: 520px) {
  #account-dialog.account-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 15px;
  }

  #account-dialog .account-access-dialog-header,
  #account-dialog .account-dialog-body {
    padding-right: 14px;
    padding-left: 14px;
  }

  .account-dialog-identity-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .account-dialog-identity-icon svg {
    width: 34px;
    height: 34px;
  }
}

/* Saved-map and account overlays share the same modal theme */
.project-dialog {
  border-color: #cfdbea;
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(15, 31, 49, 0.32);
}

.project-save-dialog,
.project-confirm-dialog {
  width: min(500px, calc(100vw - 32px));
}

.project-dialog-header {
  align-items: center;
  gap: 14px;
  border-bottom-color: #cfdbea;
  background: #f3f7fc;
  padding: 14px 20px 13px;
}

.project-dialog-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: calc(100% - 50px);
}

.project-dialog-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.project-dialog-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
}

.project-dialog-icon img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.project-dialog-header h2 {
  font-size: clamp(1.12rem, 2vw, 1.3rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.project-dialog-header .project-dialog-copy > span {
  margin-top: 2px;
  color: #5f6e7f;
  font-size: 0.75rem;
  line-height: 1.35;
}

.project-dialog-body {
  padding: 16px 20px 18px;
}

.project-dialog-footer {
  border-top-color: #dce3ec;
  padding: 12px 20px;
}

.project-dialog :is(.project-template-option, .project-investment-summary, .project-library-card) {
  box-shadow: none;
}

.project-dialog-message:empty {
  display: none;
}

.organisation-invitation-dialog {
  width: min(500px, calc(100vw - 32px));
  border-color: #cfdbea;
  border-radius: 20px;
}

.organisation-invitation-dialog .account-access-dialog-header {
  align-items: center;
  gap: 14px;
  border-bottom-color: #cfdbea;
  background: #f3f7fc;
  padding: 14px 20px 13px;
}

.organisation-invitation-dialog .account-dialog-header h2 {
  font-size: clamp(1.12rem, 2vw, 1.3rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.organisation-invitation-dialog .account-dialog-header p:last-child {
  margin: 2px 0 0;
  color: #5f6e7f;
  font-size: 0.75rem;
  line-height: 1.35;
}

@media (max-width: 520px) {
  .project-dialog,
  .project-save-dialog,
  .project-confirm-dialog,
  .organisation-invitation-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 15px;
  }

  .project-dialog-header,
  .project-dialog-body,
  .organisation-invitation-dialog .account-access-dialog-header {
    padding-right: 14px;
    padding-left: 14px;
  }

  .project-dialog-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .project-dialog-icon img {
    width: 33px;
    height: 33px;
  }
}

/* Full Access capability showcase */
.subscription-capabilities-link {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  border: 1px solid #9ebbe2;
  border-radius: 10px;
  background: #edf5ff;
  color: #345ca9;
  cursor: pointer;
  padding: 8px 9px;
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.subscription-capabilities-link:hover {
  border-color: #3569ba;
  background: #dfeeff;
  box-shadow: 0 5px 14px rgba(34, 78, 145, 0.18);
  transform: translateY(-1px);
}

.subscription-capabilities-link:focus-visible {
  outline: 3px solid rgba(82, 119, 200, 0.2);
  outline-offset: 2px;
}

.subscription-capabilities-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #c9d9ee;
}

.subscription-capabilities-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.subscription-capabilities-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.subscription-capabilities-link strong {
  color: #214d95;
  font-size: 0.79rem;
}

.subscription-capabilities-link small {
  color: #64758b;
  font-size: 0.67rem;
  line-height: 1.35;
}

.subscription-capabilities-action {
  display: flex;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  background: #3569ba;
  color: #ffffff;
  padding: 6px 7px 6px 10px;
  font-size: 0.63rem;
  font-weight: 800;
  white-space: nowrap;
  transition: background 150ms ease, transform 150ms ease;
}

.subscription-capabilities-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.subscription-capabilities-link:hover .subscription-capabilities-action {
  background: #244f9d;
  transform: translateX(2px);
}

.capabilities-modal-backdrop {
  position: fixed;
  z-index: 4000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(15, 31, 49, 0.58);
  padding: 16px;
  backdrop-filter: blur(6px);
}

.capabilities-modal-backdrop[hidden] {
  display: none;
}

body.has-capabilities-modal {
  overflow: hidden;
}

.capabilities-dialog {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #cfdbea;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 34px 100px rgba(8, 22, 38, 0.42);
}

.capabilities-dialog-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #cfdbea;
  background: #f3f7fc;
  padding: 14px 20px 13px;
}

.capabilities-dialog-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: calc(100% - 52px);
}

.capabilities-dialog-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.capabilities-dialog-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
}

.capabilities-dialog-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.capabilities-dialog-header h2,
.capabilities-dialog-header p {
  margin: 0;
}

.capabilities-dialog-header h2 {
  color: #172334;
  font-size: clamp(1.2rem, 2vw, 1.48rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.capabilities-dialog-header p {
  color: #5f6e7f;
  font-size: 0.77rem;
  line-height: 1.35;
}

.capabilities-dialog-scroll {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 22px 24px 26px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.capabilities-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.8fr);
  align-items: center;
  gap: 24px;
  border: 1px solid #c9daef;
  border-radius: 14px;
  background: #f2f7fd;
  padding: 20px;
}

.capabilities-intro h3,
.capabilities-intro p {
  margin: 0;
}

.capabilities-intro h3 {
  color: #172334;
  font-size: 1.18rem;
  letter-spacing: -0.015em;
}

.capabilities-intro p {
  margin-top: 6px;
  color: #5b6b7e;
  font-size: 0.82rem;
  line-height: 1.55;
}

.capabilities-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.capabilities-highlights div {
  display: grid;
  align-content: center;
  min-height: 84px;
  border: 1px solid #d3dfed;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
  text-align: center;
}

.capabilities-highlights dt {
  color: #345ca9;
  font-size: 1.22rem;
  font-weight: 850;
}

.capabilities-highlights dd {
  margin: 3px 0 0;
  color: #66758a;
  font-size: 0.66rem;
  line-height: 1.3;
}

.capabilities-feature-list {
  margin-top: 8px;
}

.capabilities-feature {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  border-bottom: 1px solid #e0e6ed;
  padding: 22px 4px;
}

.capabilities-feature.is-reversed {
  grid-template-columns: minmax(0, 1fr) 240px;
}

.capabilities-feature.is-reversed .capabilities-feature-media {
  grid-column: 2;
  grid-row: 1;
}

.capabilities-feature.is-reversed .capabilities-feature-copy {
  grid-column: 1;
  grid-row: 1;
}

.capabilities-feature-media {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid #ccd9e8;
  border-radius: 14px;
  background: linear-gradient(145deg, #eef5fd, #ffffff);
  color: #41619b;
  text-align: center;
}

.capabilities-feature-media img {
  width: 82px;
  height: 82px;
  object-fit: contain;
}

.capabilities-feature-media span {
  font-size: 0.76rem;
  font-weight: 800;
}

.capabilities-feature-media.has-example {
  position: relative;
  display: block;
  padding: 5px;
  background: #e8f0f8;
}

.capabilities-feature-media.has-example > img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 9px;
  background: #ffffff;
  object-fit: cover;
  object-position: center;
}

.capabilities-feature-media.has-example.is-contain > img {
  object-fit: contain;
}

.capabilities-feature-copy h3,
.capabilities-feature-copy p,
.capabilities-feature-copy ul {
  margin: 0;
}

.capabilities-feature-copy h3 {
  color: #172334;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
}

.capabilities-feature-copy p {
  margin-top: 7px;
  color: #526276;
  font-size: 0.81rem;
  line-height: 1.55;
}

.capabilities-feature-copy ul {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 0;
  list-style: none;
}

.capabilities-feature-copy li {
  position: relative;
  color: #3f4e61;
  padding-left: 21px;
  font-size: 0.76rem;
  line-height: 1.4;
}

.capabilities-feature-copy li::before {
  position: absolute;
  top: 0.06em;
  left: 0;
  display: inline-grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: #168a50;
  color: #ffffff;
  content: "\2713";
  font-size: 0.58rem;
  font-weight: 1000;
  line-height: 1;
}

.capabilities-closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  border-radius: 14px;
  background: #233f72;
  color: #ffffff;
  padding: 18px 20px;
}

.capabilities-closing h3,
.capabilities-closing p {
  margin: 0;
}

.capabilities-closing h3 {
  font-size: 1rem;
}

.capabilities-closing p {
  margin-top: 4px;
  color: #dce7f8;
  font-size: 0.75rem;
  line-height: 1.4;
}

.capabilities-closing .account-submit-button {
  flex: 0 0 auto;
  border-color: #ffffff;
  background: #ffffff;
  color: #294f99;
}

.capabilities-closing .account-submit-button:hover:not(:disabled) {
  border-color: #e6eef9;
  background: #e6eef9;
  color: #203f7a;
}

@media (max-width: 760px) {
  .capabilities-modal-backdrop {
    padding: 8px;
  }

  .capabilities-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 15px;
  }

  .capabilities-dialog-header {
    padding-right: 14px;
    padding-left: 14px;
  }

  .capabilities-dialog-scroll {
    padding: 16px 14px 20px;
  }

  .capabilities-intro {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .capabilities-feature,
  .capabilities-feature.is-reversed {
    grid-template-columns: minmax(120px, 34vw) minmax(0, 1fr);
    gap: 16px;
  }

  .capabilities-feature.is-reversed .capabilities-feature-media,
  .capabilities-feature.is-reversed .capabilities-feature-copy {
    grid-column: auto;
    grid-row: auto;
  }

  .capabilities-feature-media img {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 520px) {
  .capabilities-dialog-heading {
    gap: 9px;
  }

  .capabilities-dialog-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .capabilities-dialog-icon img {
    width: 34px;
    height: 34px;
  }

  .capabilities-dialog-header p {
    display: none;
  }

  .capabilities-highlights {
    grid-template-columns: 1fr;
  }

  .capabilities-highlights div {
    min-height: 62px;
  }

  .capabilities-feature,
  .capabilities-feature.is-reversed {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 0;
  }

  .capabilities-feature.is-reversed .capabilities-feature-media {
    grid-column: 1;
    grid-row: 1;
  }

  .capabilities-feature.is-reversed .capabilities-feature-copy {
    grid-column: 1;
    grid-row: 2;
  }

  .capabilities-feature-media {
    width: min(100%, 280px);
    justify-self: center;
  }

  .capabilities-closing {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Final cascade for the simplified Full Access choice */
#subscription-backdrop.subscription-modal-backdrop {
  align-items: center;
  justify-items: center;
  overflow: hidden;
}

.subscription-dialog {
  width: min(500px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
}

#subscription-dialog.subscription-dialog {
  width: min(500px, 100%);
  max-width: 100%;
  margin: 0;
  align-self: center;
  justify-self: center;
  grid-template-columns: minmax(0, 1fr);
}

#subscription-dialog[data-subscription-layout='account'] {
  width: min(700px, 100%);
}

#subscription-dialog[data-subscription-layout='management'] {
  width: min(620px, 100%);
}

#subscription-dialog[data-subscription-layout='organisation'] {
  width: min(900px, 100%);
}

.subscription-dialog-header {
  align-items: flex-start;
  padding: 14px 20px 13px;
}

.subscription-dialog-heading {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  max-width: none;
}

.subscription-dialog-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#subscription-dialog-subtitle {
  margin: 0;
  color: #5f6e7f;
  font-size: 0.8rem;
  line-height: 1.35;
}

.subscription-dialog-body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  padding: 14px 20px 10px;
}

#subscription-dialog .subscription-dialog-body > *,
#subscription-dialog :is(
  #subscription-purchase-flow,
  .subscription-choice-step,
  .subscription-choice-grid,
  .subscription-term-card,
  .subscription-account-step,
  .subscription-active,
  .organisation-management
) {
  min-width: 0;
  max-width: 100%;
}

.subscription-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.subscription-choice-grid {
  display: block;
}

.subscription-term-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.subscription-plans {
  gap: 9px;
}

.subscription-plan {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 52px;
  border-color: #d5dce5;
  border-radius: 10px;
  padding: 7px 13px;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.subscription-plan:hover:not(.is-selected):not(.is-unavailable) {
  border-color: #5076c8;
  background: #edf4ff;
  box-shadow: inset 0 0 0 1px #7897d5, 0 3px 10px rgba(49, 83, 148, 0.13);
  transform: translateY(-1px);
}

.subscription-plan.is-selected {
  border-color: #3f67bc;
  background: #e8f1ff;
  box-shadow: inset 0 0 0 1px #3f67bc;
}

.subscription-plan.is-selected:hover {
  border-color: #294f9d;
  background: #dceaff;
  box-shadow: inset 0 0 0 1px #294f9d, 0 3px 10px rgba(49, 83, 148, 0.15);
}

.subscription-plan-radio {
  width: 19px;
  height: 19px;
}

.subscription-plan.is-selected .subscription-plan-radio {
  border: 5px solid #5076c8;
}

.subscription-plan-heading strong {
  font-size: 0.92rem;
}

.subscription-plan-copy > small {
  color: #6d7785;
  font-size: 0.73rem;
}

.subscription-plan-badge,
.subscription-plan-badge.is-best {
  background: #dfe9fc;
  color: #315ca9;
  padding: 4px 8px;
  font-size: 0.62rem;
  letter-spacing: 0;
  text-transform: none;
}

.subscription-plan-price {
  min-width: 100px;
}

.subscription-plan-price strong {
  font-size: 1.02rem;
}

.subscription-plan-price small {
  font-size: 0.67rem;
}

.subscription-paid-continue {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 13px;
  border-radius: 10px;
  background: #4168c2;
  box-shadow: 0 5px 14px rgba(48, 82, 158, 0.22);
  font-size: 0.98rem;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.subscription-paid-continue::after {
  margin-left: 9px;
  content: "\2192";
  font-size: 1.18em;
  line-height: 1;
  transition: transform 150ms ease;
}

.subscription-paid-continue:hover:not(:disabled) {
  background: #284fa7;
  box-shadow: 0 8px 20px rgba(40, 79, 167, 0.34);
  transform: translateY(-2px);
}

.subscription-paid-continue:hover:not(:disabled)::after {
  transform: translateX(4px);
}

.subscription-payment-assurance {
  flex-wrap: wrap;
  gap: 7px 10px;
  margin-top: 9px;
}

.subscription-payment-label {
  color: #657181;
  font-size: 0.72rem;
}

.subscription-benefits {
  margin-top: 13px;
  border-top: 1px solid #dce2e9;
  padding-top: 12px;
}

.subscription-benefits h3 {
  margin: 0;
  color: #2c3949;
  font-size: 0.82rem;
}

.subscription-benefits ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 20px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.subscription-benefits li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #4b5766;
  font-size: 0.76rem;
  line-height: 1.3;
}

.subscription-benefit-tick {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  border-radius: 50%;
  background: #168a50;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 1000;
  line-height: 1;
}

.subscription-choice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 13px;
  border-top: 1px solid #dce2e9;
  padding-top: 10px;
}

.subscription-choice-footer p {
  margin: 0;
  color: #657181;
  font-size: 0.72rem;
}

.subscription-choice-footer .account-text-button {
  font-size: inherit;
}

.subscription-secure-note[hidden] {
  display: none;
}

.subscription-choice-step.is-organisation-upgrade :is(
  .subscription-benefits,
  .subscription-choice-footer
) {
  display: none;
}

@media (max-width: 580px) {
  .subscription-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .subscription-dialog-header,
  .subscription-dialog-body {
    padding-right: 14px;
    padding-left: 14px;
  }

  .subscription-plan {
    grid-template-columns: 19px minmax(0, 1fr);
  }

  .subscription-plan-price {
    grid-column: 2;
    justify-content: flex-start;
    min-width: 0;
    text-align: left;
  }

  .subscription-capabilities-link {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .subscription-capabilities-action {
    grid-column: 2;
    justify-self: start;
  }

  .subscription-benefits ul {
    grid-template-columns: 1fr;
  }

  .subscription-choice-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

/* Display is a temporary inspect-only mode. Page objects remain visible but
   cannot intercept the polygon click used by the information panel. */
#app.is-display-inspecting :is(
  .pdf-frame-label,
  .pdf-frame-mode-button,
  .pdf-frame-lock-button,
  .pdf-print-legend,
  .pdf-print-legend *,
  .pdf-map-title-preview,
  .pdf-map-title-preview *,
  .inset-map-overlay,
  .inset-map-overlay *,
  .page-image-overlay,
  .page-image-overlay *,
  .page-table-overlay,
  .page-table-overlay *,
  .location-key-table-overlay,
  .location-key-table-overlay *
) {
  pointer-events: none !important;
}

#app.is-display-inspecting #map {
  cursor: help;
}

/* Page and Display join the flat workflow family. Their three useful tasks
   remain intact; only decorative nesting, gradients and cramped type go. */
:is(#page-panel .page-panel-content, #display-panel .display-panel-content) {
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #eef1f7;
  padding: 11px 10px 15px;
  scrollbar-color: #9aa8bb transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

:is(#page-panel .page-panel-content, #display-panel .display-panel-content) > * {
  min-width: 0;
  flex: 0 0 auto;
}

:is(#page-panel .page-panel-content, #display-panel .display-panel-content)::-webkit-scrollbar {
  width: 7px;
}

:is(#page-panel .page-panel-content, #display-panel .display-panel-content)::-webkit-scrollbar-track {
  background: transparent;
}

:is(#page-panel .page-panel-content, #display-panel .display-panel-content)::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #9aa8bb;
}

:is(#page-panel, #display-panel) .workspace-panel-step {
  min-width: 0;
  margin: 0;
}

:is(#page-panel, #display-panel) .workspace-step-heading {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  margin: 0 0 8px;
}

:is(#page-panel, #display-panel) .workspace-step-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #326ae5;
  box-shadow: none;
  font-size: 0.75rem;
  font-weight: 700;
}

:is(#page-panel, #display-panel) .workspace-panel-step.is-secondary .workspace-step-number {
  background: #7040c7;
}

:is(#page-panel, #display-panel) .workspace-panel-step.is-tertiary .workspace-step-number {
  background: #18865a;
}

:is(#page-panel, #display-panel) .workspace-step-heading h3 {
  margin: 0;
  color: #14213c;
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.22;
}

:is(#page-panel, #display-panel) .workspace-step-body {
  gap: 8px;
}

:is(#page-panel, #display-panel) .workspace-settings-card,
#display-panel .info-panel {
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 10px;
}

:is(#page-panel, #display-panel) .control-group {
  gap: 9px;
}

:is(#page-panel, #display-panel) :is(.slider-block, .pdf-orientation-block) > span,
#page-panel .pdf-legend-option,
#display-panel .mini-checkbox {
  color: #34435a;
  font-size: 0.75rem;
  font-weight: 650;
}

:is(#page-panel, #display-panel) :is(.dataset-select, input[type='text'], input[type='number']) {
  min-height: 36px;
  border-color: #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: none;
  font-size: 0.75rem;
}

:is(#page-panel, #display-panel) .slider-row {
  gap: 8px;
}

:is(#page-panel, #display-panel) .slider-row output {
  min-width: 50px;
  border: 0;
  border-radius: 6px;
  background: #eaf0fa;
  color: #2856aa;
  padding: 5px 6px;
  font-size: 0.72rem;
  font-weight: 650;
}

/* Page setup stays compact and makes its real choices visually obvious. */
#page-panel .pdf-page-settings-grid {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 8px;
}

#page-panel .pdf-orientation-block {
  gap: 5px;
}

#page-panel .pdf-legend-option {
  min-height: 30px;
  border: 0;
  background: transparent;
  padding: 2px 0 0;
}

#page-panel .page-colour-grid {
  gap: 6px;
}

#page-panel .page-colour-control {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  border: 0;
  border-radius: 6px;
  background: #f4f7fb;
  box-shadow: none;
  padding: 7px 8px;
}

#page-panel .page-colour-control input[type='color'] {
  width: 34px;
  height: 34px;
  border-radius: 6px;
}

#page-panel .page-colour-control strong {
  color: #263750;
  font-size: 0.76rem;
  font-weight: 650;
}

#page-panel .page-colour-control small {
  color: #65758a;
  font-size: 0.7rem;
  line-height: 1.3;
}

#page-panel :is(.page-frame-card, .map-frame-controls, .map-frame-style-controls) {
  gap: 9px;
}

#page-panel .map-frame-controls {
  border: 0;
  padding-top: 2px;
}

#page-panel .map-frame-style-controls {
  border: 0;
  background: #f4f7fb;
  padding: 8px;
}

#page-panel .mini-checkbox {
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 2px 0;
  color: #34435a;
  font-size: 0.75rem;
  font-weight: 650;
}

#page-panel .workspace-compact-hint {
  margin: 0;
  border: 0;
  border-left: 3px solid #326ae5;
  background: #e8f0fb;
  color: #53657c;
  padding: 7px 8px;
  font-size: 0.7rem;
  line-height: 1.38;
}

#page-panel .export-status {
  margin: 0;
  color: #53657c;
  font-size: 0.72rem;
  line-height: 1.38;
}

/* Display treats zoom as compact status, filters as controls and inspection as output. */
#display-panel .zoom-card {
  min-height: 34px;
  border: 0;
  border-radius: 0;
  background: #273f70;
  box-shadow: none;
  color: #ffffff;
  padding: 7px 10px;
  font-size: 0.74rem;
  font-weight: 650;
}

#display-panel .zoom-card output {
  min-width: 36px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: right;
}

#display-panel .boundary-style-note {
  margin: 0;
  border: 0;
  border-left: 3px solid #326ae5;
  background: #e8f0fb;
  color: #53657c;
  padding: 7px 8px;
  font-size: 0.7rem;
  line-height: 1.38;
}

#display-panel .display-filter-card {
  padding: 8px 10px;
}

#display-panel .country-filters {
  gap: 5px;
  max-height: 154px;
  padding-right: 2px;
  scrollbar-color: #a7b3c3 transparent;
  scrollbar-width: thin;
}

#display-panel .mini-checkbox {
  min-height: 32px;
  border: 1px solid #d7deea;
  border-radius: 6px;
  background: #f8fafc;
  box-shadow: none;
  padding: 5px 7px;
}

#display-panel .filter-placeholder {
  color: #63738a;
  font-size: 0.72rem;
}

#display-panel .info-panel {
  max-height: 220px;
  overflow: auto;
  color: #536278;
  scrollbar-color: #a7b3c3 transparent;
  scrollbar-width: thin;
}

#display-panel .info-panel :is(h2, h4) {
  margin: 0 0 5px;
  color: #14213c;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.24;
}

#display-panel .info-panel p {
  margin: 0;
  color: #5b6c82;
  font-size: 0.72rem;
  line-height: 1.42;
}

@media (max-width: 520px), (max-height: 760px) {
  :is(#page-panel .page-panel-content, #display-panel .display-panel-content) {
    gap: 8px;
    padding: 9px 8px 12px;
  }
}

/* End flat Page and Display workflow family. */

/* Illustrated, catalogue-driven Map Types browser. */
#map-types-panel .classic-themed-content {
  gap: 9px;
  padding: 10px 8px 16px;
}

#map-types-panel .map-type-browser {
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 1px 2px 2px;
}

.map-type-browser-title {
  margin: 0;
  color: #10203f;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
}

.map-type-search-field {
  min-height: 39px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 7px;
  border: 1px solid #cbd5e3;
  border-radius: 9px;
  background: #ffffff;
  padding: 0 7px 0 10px;
  box-shadow: 0 3px 8px rgba(31, 51, 82, 0.04);
}

.map-type-search-field:focus-within {
  border-color: #2864e8;
  box-shadow: 0 0 0 3px rgba(40, 100, 232, 0.12);
}

.map-type-search-field > svg {
  width: 19px;
  height: 19px;
}

.map-type-search-field > svg :is(circle, path),
.map-type-search-field button path {
  fill: none;
  stroke: #7b8799;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#map-types-panel .map-type-search-field input {
  width: 100%;
  min-width: 0;
  min-height: 35px;
  border: 0;
  background: transparent;
  padding: 0;
  color: #10203f;
  font: inherit;
  font-size: 0.74rem;
  outline: 0;
}

.map-type-search-field input::placeholder {
  color: #8a94a5;
}

.map-type-search-field button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: #f0f4f9;
  padding: 0;
  cursor: pointer;
}

.map-type-search-field button[hidden] {
  display: none;
}

.map-type-search-field button:hover {
  background: #e3ebf5;
}

.map-type-search-field button svg {
  width: 15px;
  height: 15px;
}

.map-type-search-results {
  display: grid;
  gap: 4px;
  border: 1px solid #cbd8ea;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(17, 38, 77, 0.14);
  padding: 5px;
}

.map-type-search-results[hidden] {
  display: none;
}

.map-type-search-result {
  display: grid;
  gap: 2px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 7px 8px;
  color: #10203f;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.map-type-search-result:hover,
.map-type-search-result:focus-visible {
  background: #edf4ff;
  outline: none;
}

.map-type-search-result span {
  color: #66768b;
  font-size: 0.58rem;
  line-height: 1.2;
}

.map-type-search-result strong {
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.25;
}

.map-type-search-empty,
.map-type-boundary-empty {
  margin: 0;
  border-radius: 7px;
  background: #f4f7fb;
  padding: 8px 9px;
  color: #65758a;
  font-size: 0.63rem;
  line-height: 1.4;
}

.map-type-geography-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.map-type-geography-card {
  --map-card-accent: #7ca851;
  --map-card-border: #c8dab7;
  --map-card-surface: #f4f9ed;
  position: relative;
  min-width: 0;
  min-height: 106px;
  display: grid;
  grid-template-rows: minmax(65px, 1fr) auto;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  border: 1px solid var(--map-card-border);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.9), transparent 55%),
    var(--map-card-surface);
  padding: 7px 7px 8px;
  color: #17213a;
  font: inherit;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.map-type-geography-card.is-usa {
  --map-card-accent: #4c6fbd;
  --map-card-border: #b9cae8;
  --map-card-surface: #eef4fc;
}

.map-type-geography-card.is-europe {
  --map-card-accent: #7564b4;
  --map-card-border: #d0c8e7;
  --map-card-surface: #f5f2fb;
}

.map-type-geography-card.is-world-other {
  --map-card-accent: #d49b20;
  --map-card-border: #ecd396;
  --map-card-surface: #fff8e7;
}

.map-type-geography-card:hover:not(:disabled) {
  border-color: var(--map-card-accent);
  transform: translateY(-1px);
}

.map-type-geography-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--map-card-accent) 28%, transparent);
  outline-offset: 2px;
}

.map-type-geography-card.is-selected {
  border: 2px solid var(--map-card-accent);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--map-card-accent) 18%, transparent);
  padding: 6px 6px 7px;
}

.map-type-geography-card.contains-loaded-map:not(.is-selected)::after {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--map-card-accent);
  box-shadow: 0 1px 4px rgba(17, 32, 62, 0.25);
  content: '';
}

.map-type-geography-card:disabled {
  cursor: wait;
  opacity: 0.7;
}

.map-type-geography-illustration {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}

.map-type-geography-illustration img {
  width: 100%;
  height: 66px;
  display: block;
  object-fit: contain;
}

.map-type-geography-card.is-uk-ireland .map-type-geography-illustration img {
  height: 69px;
}

.map-type-geography-card strong {
  display: block;
  color: #17213a;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.15;
  text-align: center;
}

.map-type-geography-card.is-selected strong {
  color: var(--map-card-accent);
}

.map-type-country-control {
  display: grid;
  gap: 4px;
}

.map-type-country-control[hidden] {
  display: none;
}

.map-type-country-control > span {
  color: #45566c;
  font-size: 0.64rem;
  font-weight: 650;
}

.map-type-boundary-picker {
  display: grid;
  gap: 6px;
}

.map-type-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.map-type-section-heading h4 {
  margin: 0;
  color: #10203f;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.map-type-section-heading span {
  color: #78879a;
  font-size: 0.56rem;
  white-space: nowrap;
}

.map-type-section-heading span.is-loading {
  color: #315fb5;
}

.map-type-section-heading span.is-unavailable {
  color: #a15b14;
}

.map-type-boundary-list {
  display: grid;
  gap: 6px;
}

.map-type-boundary-group {
  overflow: hidden;
  border: 1px solid #d7e0eb;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(21, 38, 72, 0.045);
}

.map-type-boundary-group > summary {
  min-height: 39px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 9px 6px 7px;
  color: #182640;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.map-type-boundary-group > summary::-webkit-details-marker {
  display: none;
}

.map-type-boundary-group > summary:hover,
.map-type-boundary-group > summary:focus-visible {
  background: #f2f6fc;
  outline: none;
}

.map-type-boundary-group[open] > summary {
  border-bottom: 1px solid #dfe7f1;
  background: linear-gradient(100deg, #edf4ff, #f8faff);
  color: #2453a6;
}

.map-type-boundary-group-chevron {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #edf2f8;
  color: #65758a;
}

.map-type-boundary-group[open] .map-type-boundary-group-chevron {
  background: #dce9ff;
  color: #315fb5;
}

.map-type-boundary-group-chevron svg {
  width: 14px;
  height: 14px;
  transition: transform 150ms ease;
}

.map-type-boundary-group[open] .map-type-boundary-group-chevron svg {
  transform: rotate(90deg);
}

.map-type-boundary-group-chevron path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-type-boundary-group > summary strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: 680;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-type-boundary-group > summary small {
  min-width: 22px;
  border-radius: 999px;
  background: #eef2f7;
  padding: 2px 6px;
  color: #67768a;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.map-type-boundary-group[open] > summary small {
  background: #dce9ff;
  color: #315fb5;
}

.map-type-boundary-group-items {
  display: grid;
  gap: 4px;
  padding: 5px;
}

.map-type-boundary-group-items .map-type-boundary-option {
  border-color: transparent;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
}

.map-type-boundary-group-items .map-type-boundary-option:not(:last-child) {
  border-bottom-color: #edf1f6;
}

.map-type-boundary-group-items .map-type-boundary-option:hover:not(:disabled),
.map-type-boundary-group-items .map-type-boundary-option:focus-visible {
  border-color: #cbdaf2;
  background: #f4f8ff;
}

.map-type-boundary-group-items .map-type-boundary-option.is-selected {
  border-color: #4c6fbd;
  background: linear-gradient(100deg, #ffffff, #edf4ff);
}

.map-type-boundary-option {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27px;
  align-items: center;
  gap: 8px;
  border: 1px solid #d7dfe9;
  border-radius: 9px;
  background: #ffffff;
  padding: 6px 7px 6px 9px;
  color: #17213a;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.map-type-boundary-option:hover:not(:disabled),
.map-type-boundary-option:focus-visible {
  border-color: #7899d5;
  background: #f6f9ff;
  outline: none;
  transform: translateY(-1px);
}

.map-type-boundary-option.is-selected {
  border: 2px solid #4c6fbd;
  background: linear-gradient(100deg, #ffffff, #edf4ff);
  padding: 5px 6px 5px 8px;
  box-shadow: 0 3px 9px rgba(54, 91, 164, 0.1);
}

.map-type-boundary-option:disabled {
  cursor: wait;
  opacity: 0.68;
}

.map-type-boundary-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.map-type-boundary-copy strong {
  overflow: hidden;
  color: #17213a;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.18;
  text-overflow: ellipsis;
}

.map-type-boundary-copy small {
  overflow: hidden;
  color: #718096;
  font-size: 0.55rem;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-type-boundary-check {
  width: 25px;
  height: 25px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: #4c6fbd;
  color: #ffffff;
}

.map-type-boundary-option.is-selected .map-type-boundary-check {
  display: grid;
}

.map-type-boundary-check svg {
  width: 16px;
  height: 16px;
}

.map-type-boundary-check path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#map-types-panel .map-region-control {
  gap: 6px;
  border: 1px solid #d5e0ee;
  border-radius: 9px;
  background: #f6f9fd;
  padding: 8px;
}

#map-types-panel .map-region-breadcrumb {
  font-size: 0.61rem;
}

#map-types-panel .map-region-control .dataset-select-block > span {
  color: #253752;
  font-size: 0.66rem;
  font-weight: 700;
}

#map-types-panel .map-region-counterpart {
  min-height: 33px;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 0.64rem;
  font-weight: 650;
}

#map-types-panel .map-type-current-summary {
  border: 1px solid #d9e5f2;
  background: #f6f9fd;
  padding: 6px 8px;
}

.map-type-complete-list {
  border-top: 1px solid #e2e8f0;
  padding-top: 7px;
}

.map-type-complete-list summary {
  color: #5b6d84;
  font-size: 0.62rem;
  font-weight: 650;
  cursor: pointer;
}

.map-type-complete-list[open] summary {
  margin-bottom: 7px;
  color: #245cc7;
}

#map-types-panel .boundary-overlays-card {
  gap: 7px;
  border-color: #d7e0eb;
  background: linear-gradient(145deg, #ffffff, #f7f9fc);
  box-shadow: none;
  padding: 8px 9px;
}

#map-types-panel .boundary-overlays-heading h3 {
  font-size: 0.76rem;
}

#map-types-panel .boundary-overlays-heading p {
  font-size: 0.58rem;
}

@media (max-width: 520px), (max-height: 760px) {
  .map-type-geography-card {
    min-height: 96px;
    grid-template-rows: minmax(57px, 1fr) auto;
  }

  .map-type-geography-illustration img,
  .map-type-geography-card.is-uk-ireland .map-type-geography-illustration img {
    height: 58px;
  }

  .map-type-boundary-option {
    min-height: 48px;
  }
}

/* One consistent spreadsheet drop area across every data workflow. */
:is(#data-panel, #statistics-panel, #thematic-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone {
  position: relative;
  min-height: 168px;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  overflow: visible;
  border: 2px dashed #2864e8;
  border-radius: 12px;
  background:
    radial-gradient(circle at 8% 92%, rgba(242, 169, 0, 0.11), transparent 34%),
    radial-gradient(circle at 94% 6%, rgba(255, 255, 255, 0.75), transparent 38%),
    #fff6cf;
  box-shadow: none;
  padding: 9px 12px 12px;
  color: #526170;
  text-align: center;
  transform: none;
}

:is(#data-panel, #statistics-panel, #thematic-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone::before,
:is(#data-panel, #statistics-panel, #thematic-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone::after {
  content: none;
}

:is(#data-panel, #statistics-panel, #thematic-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone:is(:hover, :focus-visible, .is-dragging, .is-drag-over) {
  border-color: #7638d5;
  background:
    radial-gradient(circle at 50% 45%, rgba(118, 56, 213, 0.08), transparent 58%),
    #fff2bd;
  box-shadow: inset 0 0 0 2px rgba(118, 56, 213, 0.08);
  outline: none;
  transform: none;
}

:is(#data-panel, #statistics-panel, #thematic-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone > img {
  width: 61px;
  height: 61px;
  object-fit: contain;
}

:is(#data-panel, #statistics-panel, #thematic-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone > strong,
#data-panel .spreadsheet-upload-zone h4 {
  margin: 0;
  color: #10203f;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
}

:is(#data-panel, #statistics-panel, #thematic-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone > span,
#data-panel .spreadsheet-upload-zone p {
  margin: 0;
  color: #526170;
  font-size: 0.64rem;
  line-height: 1.32;
}

:is(#data-panel, #statistics-panel, #thematic-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-file-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

:is(#data-panel, #statistics-panel, #thematic-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-file-chips span {
  min-width: 43px;
  margin: 0;
  border: 1px solid #2864e8;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.86);
  padding: 3px 7px;
  color: #1d5fd1;
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.2;
}

:is(#data-panel, #statistics-panel, #thematic-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-file-chips span:nth-child(2) {
  border-color: #159451;
  color: #087844;
}

:is(#data-panel, #statistics-panel, #thematic-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-file-chips span:nth-child(3) {
  border-color: #7638d5;
  color: #6825b5;
}

:is(#data-panel, #statistics-panel, #thematic-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-button {
  width: min(238px, 100%);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 1px;
  border: 1px solid #3145bb;
  border-radius: 9px;
  background: linear-gradient(112deg, #145de0 0%, #3e4bd3 54%, #7638d5 100%);
  color: #ffffff;
  box-shadow: 0 3px 0 #29359e, 0 7px 12px rgba(35, 45, 128, 0.16);
  font-size: 0.81rem;
  font-weight: 600;
  text-align: center;
}

:is(#data-panel, #statistics-panel, #thematic-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-button:hover:not(:disabled) {
  filter: brightness(1.07);
  box-shadow: 0 4px 0 #29359e, 0 8px 14px rgba(35, 45, 128, 0.2);
  transform: translateY(-1px);
}

#data-panel .data-import-workflow {
  gap: 18px;
}

/* Bring Distance circles into the same compact professional panel system. */
#circles-panel.workspace-themed-panel {
  width: min(calc(var(--panel-width) - 10px), calc(100vw - var(--rail-width) - 20px)) !important;
  min-width: 0;
  border-color: #264dad;
  border-radius: 13px;
  background: #fffdfc;
  box-shadow: 0 15px 38px rgba(14, 37, 89, 0.24);
}

#circles-panel .circle-panel-header.workspace-themed-header {
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(118deg, #071b46 0%, #143578 58%, #4d36a8 100%);
  box-shadow: none;
  padding: 8px 10px 14px;
}

#circles-panel .circle-panel-header.workspace-themed-header::before {
  width: 42px;
  height: 42px;
  display: block;
  background: var(--tool-panel-icon) center / contain no-repeat;
  content: '';
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.28));
}

#circles-panel .circle-panel-header.workspace-themed-header::after {
  display: block;
}

#circles-panel .circle-panel-header.workspace-themed-header > div {
  min-width: 0;
  align-self: center;
}

#circles-panel .circle-panel-header.workspace-themed-header h2 {
  margin: 1px 0 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 1.08rem;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#circles-panel .circle-panel-header.workspace-themed-header .tool-panel-eyebrow {
  display: block;
  overflow: hidden;
  color: #e8f1ff;
  font-size: 0.56rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#circles-panel .circle-panel-header.workspace-themed-header > .tool-panel-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 5px;
  margin: 0;
}

#circles-panel .circle-panel-header.workspace-themed-header :is(.vm-tool-context-help, .tool-panel-close) {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(7, 27, 70, 0.24);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

#circles-panel .circle-panel-header.workspace-themed-header .vm-tool-context-help {
  border-radius: 999px;
}

#circles-panel .circle-panel-header.workspace-themed-header .tool-panel-close {
  border-radius: 9px;
}

#circles-panel .circle-panel-header.workspace-themed-header :is(.vm-tool-context-help, .tool-panel-close):hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  transform: translateY(-1px);
}

#circles-panel .circle-panel-header.workspace-themed-header .vm-panel-action-icon {
  width: 19px;
  height: 19px;
}

#circles-panel .circle-panel-content.classic-themed-content {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 100% 0%, rgba(77, 54, 168, 0.045), transparent 34%),
    #fffdfc;
  padding: 11px 9px 12px;
  scrollbar-gutter: stable both-edges;
}

#circles-panel .circle-panel-content.classic-themed-content > :is(.circle-centre-methods, .circle-distance-controls, .circle-ring-editor-group, .circle-colour-action) {
  min-width: 0;
  margin: 0;
  border: 1px solid #d9e0ea;
  border-radius: 11px;
  background: linear-gradient(145deg, #ffffff, #f8faff);
  box-shadow: 0 5px 13px rgba(22, 39, 73, 0.065);
  padding: 9px 10px;
}

#circles-panel .circle-panel-content .circle-panel-rule {
  display: none;
}

#circles-panel .circle-panel-content .circle-centre-method {
  border-color: #ccd7e4;
  background: #ffffff;
}

#circles-panel .circle-panel-content .circle-centre-method.is-active {
  border-color: #2864e8;
  background: #edf4ff;
  color: #245cc7;
}

#circles-panel .circle-panel-content .circle-ring-editor-group {
  gap: 7px;
}

#circles-panel .circle-panel-content .circle-colour-areas-button {
  min-height: 38px;
  border-color: #3145bb;
  background: linear-gradient(112deg, #145de0 0%, #3e4bd3 54%, #7638d5 100%);
  color: #ffffff;
  box-shadow: 0 3px 0 #29359e, 0 6px 11px rgba(35, 45, 128, 0.14);
}

#circles-panel .circle-panel-content .circle-colour-areas-button:hover:not(:disabled) {
  border-color: #3145bb;
  background: linear-gradient(112deg, #1b67e7 0%, #4954d9 54%, #8043dc 100%);
}

#circles-panel .circle-panel-content .circle-colour-areas-button:disabled {
  border-color: #cbd4df;
  background: #eef2f6;
  color: #8290a2;
  box-shadow: none;
}

#circles-panel .circle-panel-footer {
  border-top: 1px solid #d7e4f5;
  background: #f3f8ff;
  padding: 9px 11px;
}

@media (max-width: 520px), (max-height: 760px) {
  :is(#data-panel, #statistics-panel, #thematic-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone {
    min-height: 150px;
  }

  :is(#data-panel, #statistics-panel, #thematic-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone > img {
    width: 52px;
    height: 52px;
  }

  #circles-panel .circle-panel-header.workspace-themed-header {
    min-height: 68px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 7px 8px 13px;
  }

  #circles-panel .circle-panel-header.workspace-themed-header::before {
    width: 38px;
    height: 38px;
  }

  #circles-panel .circle-panel-header.workspace-themed-header h2 {
    font-size: 1rem;
  }

  #circles-panel .circle-panel-header.workspace-themed-header :is(.vm-tool-context-help, .tool-panel-close) {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
}

/* One shared colour connection between every popout and its selected rail tool. */
:root {
  --tool-panel-active-red: #d8322f;
  --tool-panel-active-red-dark: #ad211f;
  --tool-panel-active-red-hover: #e13b37;
}

#app .tool-panel > .tool-panel-header {
  position: relative;
  height: 68px;
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 69px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: var(--tool-panel-active-red);
  box-shadow: none;
  box-sizing: border-box;
  padding: 8px 10px;
}

#app .tool-panel > .tool-panel-header::before {
  grid-column: 1;
  grid-row: 1;
  width: 42px;
  height: 42px;
  min-width: 0;
  flex-basis: auto;
  align-self: center;
  justify-self: center;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 9px;
  background-color: rgba(255, 255, 255, 0.9);
  background-image: var(--tool-panel-icon);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 34px 34px;
  box-shadow: 0 2px 5px rgba(73, 9, 8, 0.2);
  box-sizing: border-box;
  filter: none;
}

#app .tool-panel > .tool-panel-header::after {
  display: none;
  content: none;
}

#app .tool-panel > .tool-panel-header > div {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: grid;
  align-content: center;
  align-self: center;
  gap: 2px;
  margin: 0;
  padding: 0;
}

#app .tool-panel > .tool-panel-header h2,
#app #legend-panel > .tool-panel-header h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .tool-panel > .tool-panel-header .tool-panel-eyebrow {
  display: block;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.09em;
  margin: 0;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .tool-panel > .tool-panel-header > .tool-panel-actions {
  grid-column: 3;
  grid-row: 1;
  width: 69px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 5px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

#app .tool-panel > .tool-panel-header > .tool-panel-close {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

#app .tool-panel > .tool-panel-header :is(.vm-tool-context-help, .tool-panel-close) {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(116, 12, 11, 0.18);
  color: #ffffff;
  box-shadow: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 1;
  appearance: none;
}

#app .tool-panel > .tool-panel-header .vm-tool-context-help {
  border-radius: 999px;
}

#app .tool-panel > .tool-panel-header .tool-panel-close {
  border-radius: 9px;
}

#app .tool-panel > .tool-panel-header :is(.vm-tool-context-help, .tool-panel-close):hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  transform: translateY(-1px);
}

#app .tool-panel > .tool-panel-header :is(.vm-tool-context-help, .tool-panel-close):focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

#app .tool-panel > .tool-panel-header :is(.vm-panel-action-icon, .tool-panel-close svg) {
  width: 19px;
  height: 19px;
  display: block;
  flex: 0 0 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app .tool-rail-button.is-active,
#app .tool-rail-button.is-active:hover {
  background: var(--tool-panel-active-red);
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(84, 9, 8, 0.24);
}

#app .tool-rail-button.is-active .tool-rail-icon-frame,
#app .tool-rail-button.is-active:hover .tool-rail-icon-frame {
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 2px 6px rgba(91, 12, 11, 0.18);
}

#app .tool-rail-button.is-active::before {
  display: none;
}

#app .tool-rail-button.is-active:focus-visible {
  outline-color: #ffffff;
}

@media (max-width: 520px), (max-height: 760px) {
  #app .tool-panel > .tool-panel-header {
    height: 64px;
    min-height: 64px;
    grid-template-columns: 38px minmax(0, 1fr) 65px;
    gap: 7px;
    padding: 7px 8px;
  }

  #app .tool-panel > .tool-panel-header::before {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-size: 31px 31px;
  }

  #app .tool-panel > .tool-panel-header h2,
  #app #legend-panel > .tool-panel-header h2 {
    font-size: 1rem;
  }

  #app .tool-panel > .tool-panel-header :is(.vm-tool-context-help, .tool-panel-close) {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  #app .tool-panel > .tool-panel-header > .tool-panel-actions {
    width: 65px;
  }
}

/* Flat, compact Territories workflow: controls first, decoration second. */
#legend-panel {
  overflow: clip;
}

#legend-panel .legend-panel-content.classic-themed-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #eef1f7;
  padding: 12px;
  scrollbar-color: #9aa8bb transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  scroll-padding-block: 12px;
}

#legend-panel .legend-panel-content.classic-themed-content > * {
  flex: 0 0 auto;
}

#legend-panel .legend-panel-content.classic-themed-content::-webkit-scrollbar {
  width: 8px;
}

#legend-panel .legend-panel-content.classic-themed-content::-webkit-scrollbar-track {
  background: transparent;
}

#legend-panel .legend-panel-content.classic-themed-content::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #9aa8bb;
  background-clip: padding-box;
}

#legend-panel :is(
  .territory-list-card,
  .colouring-mode-panel,
  .bulk-selection-panel,
  .coloured-areas-visibility-panel
) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  box-shadow: none;
}

#legend-panel .territory-list-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#legend-panel .territory-list-card .legend-list {
  width: 100%;
  gap: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

#legend-panel .legend-item {
  min-height: 46px;
  grid-template-columns: 16px 26px minmax(0, 1fr) 26px;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid #dfe4ec;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
  padding: 5px 8px 5px 5px;
}

#legend-panel .legend-item:hover {
  background: #f8faff;
}

#legend-panel .legend-item.is-selected {
  border-color: #dfe4ec;
  border-left-color: var(--tool-panel-active-red);
  background: #fbe9e7;
  box-shadow: none;
}

#legend-panel .legend-swatch {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

#legend-panel .legend-name-input {
  min-height: 36px;
  border: 1px solid #c8d2e1;
  border-radius: 9px;
  background: #ffffff;
  padding: 6px 9px;
  box-shadow: none;
}

#legend-panel .legend-name-input:hover,
#legend-panel .legend-name-input:focus {
  border-color: #7699d9;
  background: #ffffff;
}

#legend-panel .legend-item.is-selected .legend-name-input {
  border-color: #dfa09b;
  background: #fffafa;
}

#legend-panel .legend-item.is-selected .legend-name-input:focus {
  border-color: var(--tool-panel-active-red);
  outline-color: rgba(216, 50, 47, 0.18);
}

#legend-panel .legend-entry-remove {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #98666d;
  box-shadow: none;
}

#legend-panel .legend-entry-remove:hover {
  border: 0;
  background: #f8e5e7;
  color: #a52d3a;
}

#legend-panel .legend-empty {
  min-height: 46px;
  border: 1px dashed #aebbd0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
  padding: 8px 10px;
}

#legend-panel .legend-summary-row {
  min-height: 0;
  justify-content: flex-end;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 10px 0 0;
}

#legend-panel .legend-summary-actions {
  width: auto;
  flex: 0 0 auto;
  gap: 8px;
}

#legend-panel :is(.clear-legend-selection-button, .add-name-button) {
  min-height: 36px;
  justify-content: center;
  border-radius: 9px;
  background-image: none;
  box-shadow: none;
  font-size: 0.7rem;
}

#legend-panel .clear-legend-selection-button {
  min-width: 116px;
  border-color: #d0d8e5;
  background-color: #ffffff;
  color: #4f5d70;
}

#legend-panel .add-name-button {
  min-width: 132px;
  border-color: #a9cf96;
  background-color: #eff9e9;
  color: #376a2d;
}

#legend-panel .add-name-button:hover {
  border-color: #83b96c;
  background-color: #e5f4dd;
  color: #285d22;
}

#legend-panel .colouring-mode-panel {
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

#legend-panel .colouring-mode-panel > label {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

#legend-panel .colouring-mode-panel > label > strong {
  color: #263548;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

#legend-panel .colouring-mode-panel .dataset-select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  border-color: #c8d2e1;
  border-radius: 9px;
  background-color: #ffffff;
  padding: 6px 27px 6px 9px;
  font-size: 0.72rem;
  box-shadow: none;
}

#legend-panel .bulk-selection-panel {
  min-height: 0;
  align-content: start;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

#legend-panel .bulk-selection-modes {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border: 1px solid #cbd5e3;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: none;
}

#legend-panel .bulk-selection-modes button {
  min-width: 0;
  min-height: 56px;
  border-bottom: 4px solid transparent;
  background: #ffffff;
  box-shadow: none;
  box-sizing: border-box;
}

#legend-panel .bulk-selection-modes button.is-active {
  border-bottom-color: #326ae5;
  background: #eef4ff;
  box-shadow: none;
}

#legend-panel .coloured-areas-visibility-panel {
  min-height: 54px;
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #4f887b;
  padding: 9px 11px;
}

#legend-panel .coloured-areas-visibility-header {
  min-height: 36px;
  background: transparent;
  padding: 0;
}

#legend-panel .coloured-areas-visibility-header strong {
  color: #ffffff;
  font-size: 0.7rem;
}

#legend-panel .coloured-areas-visibility-header small {
  color: #e4f3ef;
  font-size: 0.56rem;
}

#legend-panel .coloured-areas-visibility-panel.is-unavailable {
  border: 0;
  background: #668f86;
  opacity: 1;
}

#legend-panel .coloured-areas-visibility-panel.is-active {
  border: 0;
  background: #397767;
  box-shadow: none;
}

#legend-panel .territory-guidance {
  display: none;
}

/* Labels follows the flat Territories panel pattern. */
#labels-panel {
  overflow: clip;
}

#labels-panel .tool-panel-content.classic-themed-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #eef1f7;
  padding: 12px;
  scrollbar-color: #9aa8bb transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

#labels-panel .tool-panel-content.classic-themed-content > * {
  flex: 0 0 auto;
}

#labels-panel .tool-panel-content.classic-themed-content::-webkit-scrollbar {
  width: 8px;
}

#labels-panel .tool-panel-content.classic-themed-content::-webkit-scrollbar-track {
  background: transparent;
}

#labels-panel .tool-panel-content.classic-themed-content::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #9aa8bb;
  background-clip: padding-box;
}

#labels-panel :is(.map-heading-control, .label-priority-card) {
  width: 100%;
  min-width: 0;
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#labels-panel .label-priority-card.is-higher-priority {
  box-shadow: none;
}

#labels-panel :is(.map-heading-card-header, .label-card-header) {
  min-height: 44px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-bottom: 1px solid #dfe4ec;
  border-radius: 0;
  background: #f8fafc;
  padding: 7px 8px;
}

#labels-panel :is(
  .map-heading-card-header,
  [data-label-priority-card='areas'] .label-card-header,
  [data-label-priority-card='settlements'] .label-card-header
) {
  background: #f8fafc;
}

#labels-panel :is(.map-heading-card-header, .label-card-header) h3 {
  color: #263548;
  font-size: 0.76rem;
  font-weight: 720;
}

#labels-panel :is(.map-heading-card-header, .label-card-header) p {
  margin-top: 1px;
  color: #69788c;
  font-size: 0.56rem;
  line-height: 1.2;
}

#labels-panel :is(.map-heading-card-header, .label-card-header) .switch-row b {
  color: #46566c;
  font-size: 0.61rem;
}

#labels-panel :is(.map-heading-card-header, .label-card-header) .switch-row > span {
  background: #cbd4e1;
  box-shadow: none;
}

#labels-panel :is(.map-heading-card-header, .label-card-header) .switch-row input:checked + span {
  background: #326ae5;
}

#labels-panel .map-heading-card-body {
  display: grid;
  gap: 7px;
  background: #ffffff;
  padding: 8px;
}

#labels-panel .map-heading-field {
  display: grid;
  gap: 4px;
}

#labels-panel .map-heading-field + .map-heading-field {
  border-top: 1px solid #e3e8f0;
  padding-top: 7px;
}

#labels-panel .map-heading-field-label {
  color: #46566c;
  font-size: 0.61rem;
  font-weight: 700;
}

#labels-panel .map-heading-entry-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px 62px;
  align-items: center;
  gap: 6px;
}

#labels-panel .map-heading-entry-row > input[type='text'] {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  border: 1px solid #c8d2e1;
  border-radius: 7px;
  background: #ffffff;
  color: #25344a;
  padding: 5px 8px;
  font: inherit;
  font-size: 0.67rem;
}

#labels-panel .map-heading-entry-row > input[type='text']:focus {
  border-color: #7699d9;
  outline: 2px solid rgba(50, 106, 229, 0.14);
}

#labels-panel .map-heading-colour-control,
#labels-panel .area-label-field-row .label-colour-control {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border: 1px solid #c8d2e1;
  border-radius: 7px;
  background: #ffffff;
  padding: 2px;
}

#labels-panel :is(.map-heading-size-control, .map-heading-opacity-control, .area-label-size-control, .label-zoom-stepper) {
  min-width: 0;
  height: 30px;
  border-color: #c8d2e1;
  border-radius: 7px;
  background: #ffffff;
  font-size: 0.62rem;
}

#labels-panel :is(.map-heading-size-control, .map-heading-opacity-control, .area-label-size-control, .label-zoom-stepper) input[type='number'] {
  width: 41px;
  min-width: 0;
  height: 100%;
  padding: 3px 0 3px 5px;
  color: #263548;
  font: inherit;
  font-weight: 700;
}

#labels-panel .map-heading-card-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: max-content 30px 64px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border: 0;
  border-top: 1px solid #dfe4ec;
  border-radius: 0;
  background: #f4f6fa;
  color: #46566c;
  padding: 7px 8px;
}

#labels-panel .map-heading-card-footer > strong {
  color: #34445a;
  font-size: 0.59rem;
}

#labels-panel .map-heading-card-footer .map-heading-colour-control {
  border-color: #c8d2e1;
  background: #ffffff;
}

#labels-panel .map-heading-card-footer .map-heading-drag-hint {
  min-width: 0;
  grid-column: auto;
  margin: 0;
  color: #718095;
  font-size: 0.5rem;
  line-height: 1.2;
  text-align: right;
}

#labels-panel .label-priority-stack {
  gap: 12px;
}

#labels-panel .label-priority-move-button {
  width: auto;
  height: 27px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #c8d2e1;
  border-radius: 7px;
  background: #ffffff;
  color: #43639b;
  padding: 3px 6px 3px 5px;
  font-size: 0.53rem;
  box-shadow: none;
}

#labels-panel .label-priority-move-button:hover {
  border-color: #7699d9;
  background: #eef4ff;
  color: #244f9e;
}

#labels-panel .label-card-body,
#labels-panel :is(
  [data-label-priority-card='areas'] .label-card-body,
  [data-label-priority-card='settlements'] .label-card-body
) {
  display: grid;
  gap: 7px;
  background: #ffffff;
  padding: 8px;
}

#labels-panel .area-label-field-control > span {
  color: #46566c;
}

#labels-panel .area-label-field-control .dataset-select {
  min-height: 32px;
  border-color: #c8d2e1;
  background: #ffffff;
}

#labels-panel .area-label-settings-stack {
  gap: 0;
  border-top: 1px solid #e3e8f0;
  padding-top: 0;
}

#labels-panel .area-label-setting-row,
#labels-panel .area-label-wrap-controls {
  min-height: 34px;
  border: 0;
  border-bottom: 1px solid #e3e8f0;
  border-radius: 0;
  background: transparent;
  padding: 4px 0;
}

#labels-panel .area-label-setting-icon {
  border-color: #d7dee9;
  border-radius: 6px;
  background: #f4f6fa;
  color: #526a91;
}

#labels-panel :is(.area-label-setting-title, .area-label-wrap-controls .mini-checkbox span) {
  color: #46566c;
}

#labels-panel .area-label-size-control {
  width: 62px;
  justify-self: end;
}

#labels-panel .area-label-wrap-length .dataset-select {
  border-color: #c8d2e1;
  background: #ffffff;
}

#labels-panel .settlement-filters {
  gap: 0;
}

#labels-panel .settlement-filter-row {
  min-height: 34px;
  border: 0;
  border-bottom: 1px solid #e3e8f0;
  border-radius: 0;
  background: transparent;
  padding: 3px 0;
  box-shadow: none;
}

#labels-panel .settlement-filter-row:last-child {
  border-bottom: 0;
}

#labels-panel .settlement-filter-row .mini-checkbox {
  background: transparent;
}

#labels-panel .settlement-filter-row .label-colour-control,
#labels-panel .settlement-filter-row .label-size-number {
  border-color: #c8d2e1;
  background: #ffffff;
}

#labels-panel .label-zoom-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-top: 1px solid #dfe4ec;
  border-radius: 0;
  background: #f4f6fa;
  color: #34445a;
  padding: 7px 8px;
}

#labels-panel .label-zoom-icon {
  border-color: #cbd5e3;
  background: #ffffff;
  color: #526a91;
}

#labels-panel .label-zoom-copy strong {
  color: #34445a;
}

#labels-panel .label-zoom-copy span {
  color: #718095;
}

#labels-panel .label-zoom-stepper {
  width: 58px;
  justify-self: end;
}

#labels-panel .label-zoom-stepper input[type='number'] {
  width: 100%;
  padding-right: 2px;
  text-align: center;
}

@media (max-width: 430px) {
  #labels-panel .map-heading-entry-row {
    grid-template-columns: minmax(0, 1fr) 30px 58px;
  }

  #labels-panel .map-heading-card-footer {
    grid-template-columns: max-content 30px 64px;
  }

  #labels-panel .map-heading-card-footer .map-heading-drag-hint {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* Labels v20: remove the remaining card frames and redundant padding. */
#labels-panel :is(.map-heading-control, .label-priority-card) {
  background: transparent;
}

#labels-panel .label-priority-card[data-label-priority-card='areas'],
#labels-panel .label-priority-card[data-label-priority-card='settlements'] {
  background: transparent;
}

#labels-panel :is(.map-heading-card-header, .label-card-header) {
  min-height: 34px;
  border: 0;
  background: transparent;
  padding: 0 0 5px;
}

#labels-panel :is(
  .map-heading-card-header,
  [data-label-priority-card='areas'] .label-card-header,
  [data-label-priority-card='settlements'] .label-card-header
) {
  background: transparent;
}

#labels-panel .map-heading-card-body,
#labels-panel .label-card-body,
#labels-panel :is(
  [data-label-priority-card='areas'] .label-card-body,
  [data-label-priority-card='settlements'] .label-card-body
) {
  background: transparent;
  padding: 0;
}

#labels-panel .map-heading-card-footer {
  grid-template-columns: max-content 30px 64px minmax(70px, 1fr);
  border-top-color: #d7dee9;
  background: transparent;
  padding: 6px 0 0;
}

#labels-panel .map-heading-footer-toggle {
  justify-self: end;
}

#labels-panel .map-heading-footer-toggle b {
  color: #46566c;
  font-size: 0.61rem;
}

#labels-panel .map-heading-footer-toggle > span {
  background: #cbd4e1;
  box-shadow: none;
}

#labels-panel .map-heading-footer-toggle input:checked + span {
  background: #326ae5;
}

#labels-panel .label-priority-card {
  padding: 0;
}

#labels-panel .label-card-body {
  gap: 5px;
}

#labels-panel .label-zoom-footer {
  border-top-color: #d7dee9;
  background: transparent;
  padding: 6px 0 0;
}

#labels-panel .label-zoom-copy strong {
  font-size: 0.66rem;
  line-height: 1.2;
}

#labels-panel :is(
  .map-heading-size-control,
  .map-heading-opacity-control,
  .area-label-size-control,
  .label-zoom-stepper,
  .settlement-filter-row .label-size-number
) {
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  box-sizing: border-box;
}

#labels-panel :is(
  .map-heading-size-control,
  .map-heading-opacity-control,
  .area-label-size-control,
  .label-zoom-stepper,
  .settlement-filter-row .label-size-number
) input[type='number'] {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
}

#labels-panel .area-label-wrap-length .dataset-select {
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  box-sizing: border-box;
}

@media (max-width: 430px) {
  #labels-panel .map-heading-card-footer {
    grid-template-columns: max-content 30px 64px minmax(66px, 1fr);
  }
}

/* Labels v22: priority provides the only section emphasis. */
#labels-panel :is(
  .map-heading-field + .map-heading-field,
  .map-heading-card-footer,
  .area-label-settings-stack,
  .area-label-setting-row,
  .area-label-wrap-controls,
  .settlement-filter-row,
  .label-zoom-footer
) {
  border-top: 0;
  border-bottom: 0;
}

#labels-panel .label-priority-card.is-higher-priority,
#labels-panel .label-priority-card.is-higher-priority[data-label-priority-card='areas'],
#labels-panel .label-priority-card.is-higher-priority[data-label-priority-card='settlements'] {
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 7px;
}

#labels-panel .label-priority-card:not(.is-higher-priority) {
  background: transparent;
  padding: 0;
}

#labels-panel .map-heading-card-footer {
  grid-template-columns: minmax(108px, max-content) 30px 64px minmax(70px, 1fr);
}

/* Legend title uses the same compact text, colour and size row as page titles. */
#labels-panel .legend-title-field {
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 7px 0 0;
}

/* Heat maps follows the flat Territories and Labels panel pattern. */
#thematic-panel {
  overflow: clip;
}

#thematic-panel .thematic-panel-content.classic-themed-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #eef1f7;
  padding: 12px;
  scrollbar-color: #9aa8bb transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

#thematic-panel .thematic-panel-content.classic-themed-content > * {
  flex: 0 0 auto;
}

#thematic-panel .thematic-panel-content.classic-themed-content::-webkit-scrollbar {
  width: 8px;
}

#thematic-panel .thematic-panel-content.classic-themed-content::-webkit-scrollbar-track {
  background: transparent;
}

#thematic-panel .thematic-panel-content.classic-themed-content::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #9aa8bb;
  background-clip: padding-box;
}

#thematic-panel .thematic-panel-content > .tool-help:first-child {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: #5e6d81;
}

#thematic-panel :is(.thematic-card, .thematic-preview-card) {
  width: 100%;
  min-width: 0;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#thematic-panel .thematic-card-heading {
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

#thematic-panel .thematic-step {
  width: 27px;
  height: 27px;
  background: #326ae5;
  box-shadow: none;
}

#thematic-panel .thematic-card:nth-of-type(2) .thematic-step {
  background: #7042c1;
}

#thematic-panel .thematic-card:nth-of-type(3) .thematic-step {
  background: #19885a;
}

#thematic-panel .thematic-card:nth-of-type(4) .thematic-step {
  background: #d88912;
}

#thematic-panel .thematic-upload-zone {
  background: #fff6cf;
  box-shadow: none;
}

#thematic-panel .thematic-upload-zone:is(:hover, :focus-visible, .is-dragging, .is-drag-over) {
  background: #fff2bd;
  box-shadow: none;
}

#thematic-panel .thematic-upload-zone .thematic-import-button {
  border-color: #326ae5;
  background: #326ae5;
  box-shadow: none;
  filter: none;
  transform: none;
}

#thematic-panel .thematic-upload-zone .thematic-import-button:hover:not(:disabled) {
  border-color: #285ac5;
  background: #285ac5;
  box-shadow: none;
  filter: none;
  transform: none;
}

#thematic-panel .thematic-palette-button {
  background: #ffffff;
  box-shadow: none;
}

#thematic-panel .thematic-palette-button:hover {
  background: #f4f7fb;
  box-shadow: none;
}

#thematic-panel .thematic-palette-button.is-selected {
  border-color: #326ae5;
  background: #eef4ff;
  color: #244f9e;
  box-shadow: none;
}

#thematic-panel .thematic-actions {
  gap: 7px;
}

#thematic-panel .thematic-apply-button {
  border: 1px solid #326ae5;
  background: #326ae5;
  box-shadow: none;
  filter: none;
  transform: none;
}

#thematic-panel .thematic-apply-button:hover:not(:disabled) {
  border-color: #285ac5;
  background: #285ac5;
  box-shadow: none;
  filter: none;
  transform: none;
}

#thematic-panel .thematic-apply-button:disabled {
  border-color: #b7c1ce;
  background: #b7c1ce;
  box-shadow: none;
}

#thematic-panel .thematic-remove-button {
  background: #fff8f8;
  box-shadow: none;
}

/* Distance circles follows the flat Territories, Labels and Heat maps pattern. */
#circles-panel.workspace-themed-panel {
  --circle-primary: #326ae5;
  --circle-primary-soft: #eef4ff;
  --circle-border: #c8d2e1;
  --circle-hairline: #dfe4ec;
  background: #eef1f7;
  box-shadow: none;
}

#circles-panel .circle-panel-content.classic-themed-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #eef1f7;
  padding: 12px;
  scrollbar-color: #9aa8bb transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

#circles-panel .circle-panel-content.classic-themed-content > * {
  min-width: 0;
  flex: 0 0 auto;
}

#circles-panel .circle-panel-content.classic-themed-content::-webkit-scrollbar {
  width: 8px;
}

#circles-panel .circle-panel-content.classic-themed-content::-webkit-scrollbar-track {
  background: transparent;
}

#circles-panel .circle-panel-content.classic-themed-content::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #9aa8bb;
  background-clip: padding-box;
}

#circles-panel .circle-panel-content.classic-themed-content > :is(
  .circle-centre-methods,
  .circle-distance-controls,
  .circle-ring-editor-group,
  .circle-colour-action
) {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#circles-panel .circle-centre-method {
  border-color: var(--circle-border);
  background: #ffffff;
  box-shadow: none;
}

#circles-panel .circle-centre-method:hover {
  border-color: #8fa9d8;
  background: #f6f8fc;
  box-shadow: none;
}

#circles-panel .circle-centre-method.is-active {
  border-color: var(--circle-primary);
  background: var(--circle-primary-soft);
  color: #244f9e;
  box-shadow: none;
}

#circles-panel .circle-centre-method span {
  font-size: 0.84rem;
  font-weight: 650;
}

#circles-panel .circle-postcode-row button {
  border-color: var(--circle-primary);
  background: var(--circle-primary);
  box-shadow: none;
  filter: none;
  transform: none;
}

#circles-panel .circle-postcode-row button:hover {
  border-color: #285ac5;
  background: #285ac5;
  box-shadow: none;
  filter: none;
  transform: none;
}

#circles-panel .circle-distance-control > strong {
  color: #25344d;
  font-size: 0.86rem;
  font-weight: 700;
}

#circles-panel .circle-distance-control > span:last-child,
#circles-panel .circle-ring-caption,
#circles-panel .circle-colour-action-help p {
  color: #5e6d81;
  font-size: 0.78rem;
  line-height: 1.4;
}

#circles-panel :is(
  .circle-ring-style-swatch,
  .circle-ring-popover,
  .circle-ring-colour-chip.is-selected,
  .circle-ring-pattern-chip.is-selected,
  .circle-ring-custom-colour.is-selected,
  .circle-ring-custom-colour-preview
) {
  box-shadow: none;
}

#circles-panel .circle-colour-areas-button,
#circles-panel .circle-panel-content .circle-colour-areas-button {
  border: 1px solid var(--circle-primary);
  background: var(--circle-primary);
  color: #ffffff;
  box-shadow: none;
  filter: none;
  transform: none;
}

#circles-panel .circle-colour-areas-button:hover:not(:disabled),
#circles-panel .circle-panel-content .circle-colour-areas-button:hover:not(:disabled) {
  border-color: #285ac5;
  background: #285ac5;
  box-shadow: none;
  filter: none;
  transform: none;
}

#circles-panel .circle-colour-areas-button.is-applied {
  border-color: #19885a;
  background: #19885a;
  color: #ffffff;
  box-shadow: none;
}

#circles-panel .circle-colour-areas-button:disabled,
#circles-panel .circle-panel-content .circle-colour-areas-button:disabled {
  border-color: #b7c1ce;
  background: #b7c1ce;
  color: #ffffff;
  box-shadow: none;
  opacity: 1;
}

#circles-panel .circle-panel-footer {
  border-top-color: #d6dde8;
  background: #e7edf6;
  box-shadow: none;
}

/* A small shared legibility lift without changing the compact panel geometry. */
#app .tool-panel > .tool-panel-header h2,
#app #legend-panel > .tool-panel-header h2 {
  font-size: 1.12rem;
}

#app .tool-panel > .tool-panel-header .tool-panel-eyebrow {
  font-size: 0.62rem;
  line-height: 1.08;
}

.classic-themed-panel .control-group-header h3,
.classic-themed-panel .thematic-card-heading h3,
.classic-themed-panel .thematic-preview-heading strong {
  font-size: 0.88rem;
  line-height: 1.22;
}

.classic-themed-panel .control-group-header p,
.classic-themed-panel .thematic-card-heading p {
  font-size: 0.68rem;
  line-height: 1.38;
}

/* Travel areas follows the same flat workflow and inline fill picker. */
#travel-areas-panel {
  --travel-primary: #326ae5;
  --travel-primary-dark: #285ac5;
  --travel-purple: #7042c1;
  --travel-purple-dark: #5d35a7;
  --travel-border: #c8d2e1;
  --circle-primary: #326ae5;
  --circle-primary-soft: #eef4ff;
  --circle-border: #c8d2e1;
  --circle-hairline: #dfe4ec;
  overflow: clip;
  background: #eef1f7;
  box-shadow: none;
}

#travel-areas-panel .tool-panel-content.classic-themed-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #eef1f7;
  padding: 12px;
  scrollbar-color: #9aa8bb transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

#travel-areas-panel .tool-panel-content.classic-themed-content > * {
  min-width: 0;
  flex: 0 0 auto;
}

#travel-areas-panel .tool-panel-content.classic-themed-content::-webkit-scrollbar {
  width: 8px;
}

#travel-areas-panel .tool-panel-content.classic-themed-content::-webkit-scrollbar-track {
  background: transparent;
}

#travel-areas-panel .tool-panel-content.classic-themed-content::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #9aa8bb;
  background-clip: padding-box;
}

#travel-areas-panel .tool-panel-content > .travel-area-intro:first-child,
#travel-areas-panel .tool-panel-content > .circle-help:last-child {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 0;
  color: #5e6d81;
  font-size: 0.76rem;
  line-height: 1.42;
}

#travel-areas-panel .tool-panel-content > .control-group {
  width: 100%;
  min-width: 0;
  gap: 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#travel-areas-panel .control-group-header {
  align-items: center;
  gap: 8px;
}

#travel-areas-panel #travel-area-profile-help {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 0;
  color: #5e6d81;
  font-size: 0.74rem;
  line-height: 1.42;
}

#travel-areas-panel :is(
  #travel-area-postcode-button,
  #travel-area-place-button,
  #travel-area-generate-button,
  #travel-area-apply-button,
  #travel-area-clear-button
) {
  min-height: 38px;
  border-radius: 9px;
  background-image: none;
  box-shadow: none;
  filter: none;
  font-size: 0.78rem;
  transform: none;
}

#travel-areas-panel #travel-area-postcode-button,
#travel-areas-panel #travel-area-apply-button {
  border-color: var(--travel-primary);
  background-color: var(--travel-primary);
  color: #ffffff;
}

#travel-areas-panel #travel-area-postcode-button:hover:not(:disabled),
#travel-areas-panel #travel-area-apply-button:hover:not(:disabled) {
  border-color: var(--travel-primary-dark);
  background-color: var(--travel-primary-dark);
  box-shadow: none;
  filter: none;
  transform: none;
}

#travel-areas-panel #travel-area-place-button {
  border-color: #9ab1d8;
  background-color: #ffffff;
  color: #315da8;
}

#travel-areas-panel #travel-area-place-button:hover:not(:disabled),
#travel-areas-panel #travel-area-place-button.is-active {
  border-color: var(--travel-primary);
  background-color: #eef4ff;
  color: #244f9e;
  box-shadow: none;
}

#travel-areas-panel #travel-area-generate-button {
  border-color: var(--travel-purple);
  background-color: var(--travel-purple);
  color: #ffffff;
}

#travel-areas-panel #travel-area-generate-button:hover:not(:disabled) {
  border-color: var(--travel-purple-dark);
  background-color: var(--travel-purple-dark);
  box-shadow: none;
}

#travel-areas-panel :is(#travel-area-generate-button, #travel-area-apply-button):disabled {
  border-color: #b7c1ce;
  background-color: #b7c1ce;
  color: #ffffff;
  box-shadow: none;
  opacity: 1;
}

#travel-areas-panel #travel-area-clear-button {
  border-color: #e3b4b4;
  background-color: #fff8f8;
  color: #9f3030;
}

#travel-areas-panel .circle-centre-status {
  color: #5e6d81;
  font-size: 0.76rem;
}

#travel-areas-panel .circle-ring-editor-group {
  gap: 8px;
  padding: 0;
}

#travel-areas-panel .circle-ring-editor {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#travel-areas-panel .circle-ring-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

#travel-areas-panel .circle-ring-style-swatch {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
  padding: 0;
}

#travel-areas-panel .circle-ring-label {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--travel-border);
  border-radius: 8px;
  background: #ffffff;
  color: #25344d;
  font: inherit;
  font-size: 0.78rem;
  padding: 7px 10px;
}

#travel-areas-panel .circle-ring-popover {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  border: 1px solid var(--travel-border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
  padding: 10px;
}

#travel-areas-panel .circle-ring-popover-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

#travel-areas-panel .circle-ring-fill-row {
  gap: 5px;
}

#travel-areas-panel .circle-ring-popover-label {
  width: 43px;
  flex: 0 0 43px;
  color: #5e6d81;
  font-size: 0.72rem;
  font-weight: 650;
}

#travel-areas-panel :is(.circle-ring-colour-chip, .circle-ring-pattern-chip) {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: none;
  cursor: pointer;
  padding: 0;
}

#travel-areas-panel :is(.circle-ring-colour-chip, .circle-ring-pattern-chip).is-selected,
#travel-areas-panel .circle-ring-custom-colour.is-selected {
  border: 2px solid var(--travel-primary);
  box-shadow: none;
}

#travel-areas-panel .circle-ring-colour-well {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  overflow: hidden;
  place-items: stretch;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
}

#travel-areas-panel .circle-ring-colour-well input[type='color'] {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transform: translate(-4px, -4px);
}

#travel-areas-panel .circle-ring-custom-colour {
  place-items: center;
  color: #52627a;
}

#travel-areas-panel .circle-ring-custom-colour svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  pointer-events: none;
}

#travel-areas-panel .circle-ring-custom-colour-preview {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: var(--circle-custom-colour, #ffffff);
  box-shadow: none;
  pointer-events: none;
}

#travel-areas-panel .circle-ring-custom-colour input[type='color'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: none;
}

#travel-areas-panel .circle-ring-pattern-details {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid var(--circle-hairline);
  border-bottom: 1px solid var(--circle-hairline);
  padding: 8px 0;
}

#travel-areas-panel .circle-ring-pattern-details.is-solid > * {
  opacity: 0.46;
}

#travel-areas-panel .circle-ring-pattern-details.is-solid::after {
  color: #68778c;
  content: 'Choose a pattern to adjust the hatch lines.';
  font-size: 0.7rem;
  line-height: 1.35;
}

#travel-areas-panel .circle-ring-detail-hint {
  color: #68778c;
  font-size: 0.7rem;
}

#travel-areas-panel .circle-ring-range-row input {
  min-width: 0;
  flex: 1 1 auto;
  accent-color: var(--travel-primary);
}

#travel-areas-panel .circle-ring-range-row output {
  width: 42px;
  flex: 0 0 42px;
  color: #52627a;
  font-size: 0.72rem;
  font-weight: 650;
  text-align: right;
}

#travel-areas-panel .circle-ring-background-options {
  min-width: 0;
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--travel-border);
  border-radius: 7px;
}

#travel-areas-panel .circle-ring-background-options button {
  min-height: 26px;
  border: 0;
  border-left: 1px solid var(--travel-border);
  background: #ffffff;
  color: #52627a;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 650;
  padding: 5px 8px;
}

#travel-areas-panel .circle-ring-background-options button:first-child {
  border-left: 0;
}

#travel-areas-panel .circle-ring-background-options button.is-selected {
  background: #eef4ff;
  color: #244f9e;
}

/* Readability lift for the flat panels already completed. */
#app .tool-panel > .tool-panel-header h2,
#app #legend-panel > .tool-panel-header h2 {
  font-size: 1.16rem;
}

#app .tool-panel > .tool-panel-header .tool-panel-eyebrow {
  font-size: 0.68rem;
  line-height: 1.08;
}

.classic-themed-panel .control-group-header h3,
.classic-themed-panel .thematic-card-heading h3,
.classic-themed-panel .thematic-preview-heading strong,
#labels-panel :is(.map-heading-card-header, .label-card-header) h3 {
  font-size: 0.92rem;
  line-height: 1.22;
}

.classic-themed-panel .control-group-header p,
.classic-themed-panel .thematic-card-heading p,
#labels-panel :is(.map-heading-card-header, .label-card-header) p {
  font-size: 0.72rem;
  line-height: 1.38;
}

.classic-themed-panel :is(.form-field, .dataset-select-block, .thematic-field) > span,
.classic-themed-panel .slider-block > span,
.classic-themed-panel .tool-help,
#legend-panel .colouring-mode-panel > label > strong,
#legend-panel .coloured-areas-visibility-header strong,
#labels-panel :is(
  .map-heading-field-label,
  .map-heading-card-footer > strong,
  .label-zoom-copy strong,
  .map-heading-card-header .switch-row b,
  .label-card-header .switch-row b,
  .map-heading-footer-toggle b
) {
  font-size: 0.74rem;
}

#legend-panel .coloured-areas-visibility-header small {
  font-size: 0.7rem;
}

#labels-panel .map-heading-card-footer .map-heading-drag-hint {
  font-size: 0.68rem;
}

#labels-panel .label-card-header .label-priority-heading > .label-priority-move-button {
  font-size: 0.7rem;
}

#labels-panel .map-heading-entry-row > input[type='text'],
#labels-panel :is(
  .map-heading-size-control,
  .map-heading-opacity-control,
  .area-label-size-control,
  .label-zoom-stepper
),
#thematic-panel :is(
  .thematic-inline-help,
  .thematic-dataset-summary,
  .thematic-status,
  .thematic-field,
  .thematic-check-row,
  .thematic-class-row
) {
  font-size: 0.74rem;
}

#thematic-panel .thematic-palette-button span:last-child,
#thematic-panel .thematic-build-note {
  font-size: 0.7rem;
}

@media (max-width: 390px) {
  #travel-areas-panel .circle-ring-popover-row:not(.circle-ring-opacity-row) {
    flex-wrap: wrap;
  }

  #travel-areas-panel .circle-ring-popover-row:not(.circle-ring-opacity-row) .circle-ring-popover-label {
    width: 100%;
    flex-basis: 100%;
  }
}

/* Flat support-workflow family: Locations, Dots, Inset, Images, Tables,
   Import data and Statistics. Upload targets stay prominent; settings do not
   sit inside decorative cards. */
:is(
  #data-panel .data-import-panel-content,
  #statistics-panel .statistics-panel-content,
  #dots-panel .classic-themed-content,
  #locations-panel .classic-themed-content,
  #inset-panel .classic-themed-content,
  #images-panel .images-panel-content,
  #tables-panel .classic-themed-content
) {
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #eef1f7;
  padding: 11px 10px 15px;
  scrollbar-color: #9aa8bb transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

:is(
  #data-panel .data-import-panel-content,
  #statistics-panel .statistics-panel-content,
  #dots-panel .classic-themed-content,
  #locations-panel .classic-themed-content,
  #inset-panel .classic-themed-content,
  #images-panel .images-panel-content,
  #tables-panel .classic-themed-content
) > * {
  min-width: 0;
  flex: 0 0 auto;
}

:is(
  #data-panel .data-import-panel-content,
  #statistics-panel .statistics-panel-content,
  #dots-panel .classic-themed-content,
  #locations-panel .classic-themed-content,
  #inset-panel .classic-themed-content,
  #images-panel .images-panel-content,
  #tables-panel .classic-themed-content
)::-webkit-scrollbar {
  width: 7px;
}

:is(
  #data-panel .data-import-panel-content,
  #statistics-panel .statistics-panel-content,
  #dots-panel .classic-themed-content,
  #locations-panel .classic-themed-content,
  #inset-panel .classic-themed-content,
  #images-panel .images-panel-content,
  #tables-panel .classic-themed-content
)::-webkit-scrollbar-track {
  background: transparent;
}

:is(
  #data-panel .data-import-panel-content,
  #statistics-panel .statistics-panel-content,
  #dots-panel .classic-themed-content,
  #locations-panel .classic-themed-content,
  #inset-panel .classic-themed-content,
  #images-panel .images-panel-content,
  #tables-panel .classic-themed-content
)::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #9aa8bb;
}

/* Useful drop targets are the one deliberate card treatment in this family. */
:is(#data-panel, #statistics-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone,
#images-panel .workspace-upload-zone {
  min-height: 166px;
  gap: 7px;
  border: 2px dashed #326ae5;
  border-radius: 11px;
  background: #fff5c9;
  box-shadow: none;
  padding: 10px 12px 12px;
  transform: none;
}

:is(#data-panel, #statistics-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone:is(:hover, :focus-visible, .is-dragging, .is-drag-over),
#images-panel .workspace-upload-zone:is(:hover, :focus-visible, .is-dragging) {
  border-color: #7040c7;
  background: #ffefb5;
  box-shadow: inset 0 0 0 2px rgba(112, 64, 199, 0.08);
  outline: none;
  transform: none;
}

:is(#data-panel, #statistics-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone > img,
#images-panel .workspace-upload-zone > img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

:is(#data-panel, #statistics-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone > strong,
#data-panel .spreadsheet-upload-zone h4,
#images-panel .workspace-upload-zone > strong {
  color: #14213c;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.24;
}

:is(#data-panel, #statistics-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone > span,
#data-panel .spreadsheet-upload-zone p,
#images-panel .workspace-upload-zone > span {
  color: #536278;
  font-size: 0.72rem;
  line-height: 1.38;
}

/* Buttons use clear solid roles instead of gradients, raised edges or movement. */
:is(
  #data-panel,
  #statistics-panel,
  #dots-panel,
  #locations-panel,
  #inset-panel,
  #images-panel,
  #tables-panel
) .dataset-button {
  min-height: 36px;
  border-radius: 8px;
  box-shadow: none;
  filter: none;
  font-size: 0.75rem;
  font-weight: 650;
  transform: none;
}

:is(#data-panel, #statistics-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-button,
#images-panel .workspace-primary-button,
#dots-panel .circle-apply-button,
#inset-panel #inset-map-add {
  border-color: #326ae5;
  background: #326ae5;
  color: #ffffff;
  box-shadow: none;
}

:is(#data-panel, #statistics-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-button:hover:not(:disabled),
#images-panel .workspace-primary-button:hover:not(:disabled),
#dots-panel .circle-apply-button:hover:not(:disabled),
#inset-panel #inset-map-add:hover:not(:disabled) {
  border-color: #285ac5;
  background: #285ac5;
  box-shadow: none;
  filter: none;
  transform: none;
}

#data-panel .data-import-download-button,
#statistics-panel .statistics-template-button,
#statistics-panel .statistics-catalogue-button {
  border-color: #18865a;
  background: #18865a;
  color: #ffffff;
  box-shadow: none;
}

#data-panel .data-import-download-button:hover:not(:disabled),
#statistics-panel .statistics-template-button:hover:not(:disabled),
#statistics-panel .statistics-catalogue-button:hover:not(:disabled) {
  border-color: #126e49;
  background: #126e49;
  box-shadow: none;
  filter: none;
  transform: none;
}

:is(#dots-panel, #locations-panel, #inset-panel, #images-panel, #tables-panel) :is(
  .circle-clear-button,
  .page-image-remove,
  .metrics-remove-button
) {
  border-color: #dca4a4;
  background: #fff6f6;
  color: #a43b3b;
  box-shadow: none;
}

/* Flat, readable control sections. */
:is(#dots-panel, #locations-panel, #inset-panel, #images-panel, #tables-panel) .control-group,
#inset-panel .inset-map-empty,
#images-panel .workspace-settings-card {
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 10px;
}

:is(#dots-panel, #locations-panel, #inset-panel, #images-panel, #tables-panel) .control-group {
  gap: 9px;
}

:is(#dots-panel, #locations-panel, #inset-panel, #images-panel, #tables-panel) .control-group-header {
  align-items: center;
  gap: 9px;
}

:is(#dots-panel, #locations-panel, #inset-panel, #images-panel, #tables-panel) .control-group-header h3,
#images-panel .workspace-step-heading h3 {
  margin: 0;
  color: #14213c;
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.22;
}

:is(#dots-panel, #locations-panel, #inset-panel, #images-panel, #tables-panel) .control-group-header p,
#images-panel :is(.workspace-step-helper, .workspace-inline-status) {
  margin-top: 2px;
  color: #607086;
  font-size: 0.73rem;
  line-height: 1.38;
}

:is(#dots-panel, #locations-panel, #inset-panel, #images-panel, #tables-panel) :is(.form-field, .slider-block) > span,
:is(#dots-panel, #locations-panel, #inset-panel, #images-panel, #tables-panel) .switch-row b,
:is(#dots-panel, #locations-panel, #inset-panel, #images-panel, #tables-panel) .mini-checkbox {
  color: #34435a;
  font-size: 0.75rem;
  font-weight: 650;
}

:is(#dots-panel, #locations-panel, #inset-panel, #images-panel, #tables-panel) :is(
  .dataset-select,
  input[type='text'],
  input[type='number']
) {
  min-height: 36px;
  border-color: #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: none;
  font-size: 0.75rem;
}

:is(#dots-panel, #locations-panel, #inset-panel, #images-panel, #tables-panel) .slider-row output {
  min-width: 48px;
  border: 0;
  border-radius: 6px;
  background: #eaf0fa;
  color: #2856aa;
  padding: 5px 6px;
  font-size: 0.72rem;
  font-weight: 650;
}

:is(#dots-panel, #locations-panel, #inset-panel, #images-panel, #tables-panel) .circle-centre-status {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 2px 1px;
  color: #5b6c82;
  font-size: 0.72rem;
  line-height: 1.38;
}

:is(#dots-panel, #locations-panel, #inset-panel, #images-panel, #tables-panel) .panel-note {
  gap: 3px;
  border: 0;
  border-left: 3px solid #326ae5;
  border-radius: 0;
  background: #e8f0fb;
  box-shadow: none;
  padding: 8px 9px;
}

:is(#dots-panel, #locations-panel, #inset-panel, #images-panel, #tables-panel) .panel-note strong {
  color: #244b8f;
  font-size: 0.75rem;
  font-weight: 650;
}

:is(#dots-panel, #locations-panel, #inset-panel, #images-panel, #tables-panel) .panel-note span {
  color: #53657c;
  font-size: 0.7rem;
  line-height: 1.38;
}

/* Import data: retain the two purposeful steps without card-on-card styling. */
#data-panel .data-import-workflow {
  display: grid;
  gap: 14px;
}

#data-panel .data-import-step-heading,
#statistics-panel .statistics-step-heading,
#images-panel .workspace-step-heading {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  margin: 0 0 8px;
}

#data-panel .data-import-step-number,
#statistics-panel .statistics-step-number,
#images-panel .workspace-step-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #326ae5;
  box-shadow: none;
  font-size: 0.75rem;
}

#data-panel .data-import-step.is-upload .data-import-step-number,
#statistics-panel .statistics-step.is-upload .statistics-step-number,
#images-panel .workspace-panel-step.is-secondary .workspace-step-number {
  background: #7040c7;
}

#data-panel .data-import-step-heading h3,
#statistics-panel .statistics-step-heading h3 {
  color: #14213c;
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.22;
}

#data-panel .data-import-step-body,
#statistics-panel .statistics-step-body,
#images-panel .workspace-step-body {
  gap: 8px;
}

#data-panel .data-import-template-card {
  gap: 11px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 11px;
}

#data-panel .data-import-template-copy {
  grid-template-columns: 43px minmax(0, 1fr);
  gap: 10px;
}

#data-panel .data-import-template-icon,
#data-panel .data-import-template-icon img {
  width: 43px;
  height: 43px;
}

#data-panel .data-import-template-copy p {
  color: #34435a;
  font-size: 0.74rem;
  line-height: 1.46;
}

#data-panel .map-data-template-status {
  font-size: 0.7rem;
}

/* Statistics: catalogue, template, upload and active state read as one flow. */
#statistics-panel .statistics-map-context {
  margin: 0;
  color: #53657c;
  font-size: 0.73rem;
  line-height: 1.38;
}

#statistics-panel .statistics-workflow {
  display: grid;
  gap: 11px;
}

#statistics-panel .statistics-choice-divider {
  min-height: 18px;
  justify-content: center;
  color: #718096;
  font-size: 0.7rem;
  font-weight: 650;
}

#statistics-panel .statistics-choice-divider::before,
#statistics-panel .statistics-choice-divider::after {
  display: none;
}

#statistics-panel :is(
  .statistics-source-card,
  .statistics-template-card,
  .statistics-current-card
) {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 10px;
}

#statistics-panel .territory-data-card {
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

#statistics-panel .statistics-source-card {
  gap: 8px;
}

#statistics-panel .statistics-source-card > p:first-child,
#statistics-panel .statistics-dataset-description,
#statistics-panel .statistics-template-card > p:not(.map-data-template-status),
#statistics-panel :is(.circle-centre-status, .metrics-dataset-summary) {
  color: #596a80;
  font-size: 0.72rem;
  line-height: 1.4;
}

#statistics-panel .dataset-select-block > span {
  color: #34435a;
  font-size: 0.75rem;
  font-weight: 650;
}

#statistics-panel .dataset-select {
  min-height: 36px;
  border-radius: 7px;
  font-size: 0.75rem;
}

#statistics-panel .statistics-current-card {
  gap: 8px;
}

/* Images and Tables keep only meaningful editors and empty states. */
#images-panel .workspace-panel-step {
  min-width: 0;
}

#images-panel .workspace-panel-step + .workspace-panel-step {
  margin-top: 2px;
}

#images-panel .page-image-count-row,
#tables-panel .page-image-count-row {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  margin: 0;
  padding: 0 1px;
}

#images-panel .page-image-count-row strong,
#tables-panel .page-image-count-row strong {
  color: #34435a;
  font-size: 0.73rem;
  font-weight: 650;
}

#images-panel .page-image-count-row span,
#tables-panel .page-image-count-row span {
  color: #63738a;
  font-size: 0.69rem;
  line-height: 1.35;
}

#images-panel .page-image-empty {
  border: 1px dashed #bcc8d8;
  border-radius: 7px;
  background: #ffffff;
  padding: 9px;
  color: #65758a;
  font-size: 0.72rem;
}

#images-panel .page-image-frame-controls {
  border: 0;
  padding-top: 0;
}

#tables-panel .page-table-colour-grid {
  gap: 6px;
}

#tables-panel .page-table-colour-grid label {
  border: 1px solid #d7deea;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
  padding: 6px;
  font-size: 0.69rem;
}

/* Inset empty state and settings use the same flat bands as the other tools. */
#inset-panel .inset-map-empty {
  gap: 7px;
  text-align: left;
}

#inset-panel .inset-map-empty strong {
  color: #14213c;
  font-size: 0.94rem;
  font-weight: 650;
}

#inset-panel .inset-map-empty span {
  color: #5c6c82;
  font-size: 0.73rem;
  line-height: 1.4;
}

#inset-panel .inset-map-action-grid .dataset-button,
#images-panel :is(#page-image-reset-crop, #page-image-remove),
#tables-panel :is(#page-table-replace, #page-table-remove) {
  box-shadow: none;
  filter: none;
  transform: none;
}

@media (max-width: 520px), (max-height: 760px) {
  :is(
    #data-panel .data-import-panel-content,
    #statistics-panel .statistics-panel-content,
    #dots-panel .classic-themed-content,
    #locations-panel .classic-themed-content,
    #inset-panel .classic-themed-content,
    #images-panel .images-panel-content,
    #tables-panel .classic-themed-content
  ) {
    gap: 8px;
    padding: 9px 8px 12px;
  }

  :is(#data-panel, #statistics-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone,
  #images-panel .workspace-upload-zone {
    min-height: 148px;
  }

  :is(#data-panel, #statistics-panel, #dots-panel, #locations-panel, #tables-panel) .spreadsheet-upload-zone > img,
  #images-panel .workspace-upload-zone > img {
    width: 54px;
    height: 54px;
  }
}

/* Map Library v2 final cascade: keep catalogue content flat after legacy rules. */
#map-types-panel .tool-panel-content.classic-themed-content {
  gap: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #eef1f7;
  padding: 12px;
  scrollbar-gutter: auto;
}

#map-types-panel .map-type-browser,
#map-types-panel .boundary-overlays-card {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

#map-types-panel .map-type-browser {
  gap: 10px;
}

#map-types-panel .map-type-browser-title {
  color: #263548;
  font-size: 0.9rem;
}

#map-types-panel .map-type-search-field {
  min-height: 38px;
  border-color: #c8d2e1;
  box-shadow: none;
}

#map-types-panel .map-type-search-field input {
  font-size: 0.76rem;
}

#map-types-panel .map-type-geography-grid {
  gap: 8px;
}

#map-types-panel .map-type-geography-card {
  min-height: 102px;
  grid-template-rows: minmax(62px, 1fr) auto;
  border-radius: 9px;
  background: var(--map-card-surface);
  box-shadow: none;
}

#map-types-panel .map-type-geography-card:hover:not(:disabled) {
  box-shadow: none;
  transform: none;
}

#map-types-panel .map-type-geography-card.is-selected {
  box-shadow: none;
}

#map-types-panel .map-type-geography-card strong {
  font-size: 0.78rem;
}

#map-types-panel .map-type-country-control > span,
#map-types-panel .map-region-control .dataset-select-block > span {
  color: #34445a;
  font-size: 0.74rem;
}

#map-types-panel :is(.map-type-country-control, .map-region-control) .dataset-select {
  min-height: 36px;
  border-color: #c8d2e1;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 0.74rem;
  box-shadow: none;
}

#map-types-panel .map-type-section-heading h4,
#map-types-panel .boundary-overlays-heading h3 {
  color: #263548;
  font-size: 0.88rem;
  line-height: 1.25;
}

#map-types-panel .map-type-section-heading span {
  font-size: 0.69rem;
}

#map-types-panel .map-type-boundary-list {
  gap: 4px;
}

#map-types-panel .map-type-boundary-group {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#map-types-panel .map-type-boundary-group > summary {
  min-height: 40px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.86);
  padding: 7px 8px 7px 6px;
}

#map-types-panel .map-type-boundary-group > summary:hover,
#map-types-panel .map-type-boundary-group > summary:focus-visible {
  background: #f8faff;
}

#map-types-panel .map-type-boundary-group[open] > summary {
  border-bottom: 0;
  border-left-color: var(--tool-panel-active-red);
  background: #fbe9e7;
  color: #8d2826;
}

#map-types-panel .map-type-boundary-group-chevron {
  width: 24px;
  height: 24px;
  background: #edf2f8;
}

#map-types-panel .map-type-boundary-group[open] .map-type-boundary-group-chevron {
  background: #ffffff;
  color: #a72f2c;
}

#map-types-panel .map-type-boundary-group > summary strong {
  font-size: 0.76rem;
}

#map-types-panel .map-type-boundary-group > summary small {
  min-width: 25px;
  background: #eef2f7;
  padding: 2px 7px;
  color: #5f6f84;
  font-size: 0.66rem;
}

#map-types-panel .map-type-boundary-group[open] > summary small {
  background: #ffffff;
  color: #8d2826;
}

#map-types-panel .map-type-boundary-group-items {
  gap: 0;
  background: #ffffff;
  padding: 0;
}

#map-types-panel .map-type-boundary-group-items .map-type-boundary-option,
#map-types-panel .map-type-boundary-option {
  min-height: 43px;
  border: 0;
  border-bottom: 1px solid #e3e8f0;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 7px 7px 7px 8px;
  transform: none;
}

#map-types-panel .map-type-boundary-group-items .map-type-boundary-option:hover:not(:disabled),
#map-types-panel .map-type-boundary-group-items .map-type-boundary-option:focus-visible,
#map-types-panel .map-type-boundary-option:hover:not(:disabled),
#map-types-panel .map-type-boundary-option:focus-visible {
  border-color: #e3e8f0;
  border-left-color: #7699d9;
  background: #f6f9ff;
  transform: none;
}

#map-types-panel .map-type-boundary-group-items .map-type-boundary-option.is-selected,
#map-types-panel .map-type-boundary-option.is-selected {
  border: 0;
  border-bottom: 1px solid #e3e8f0;
  border-left: 3px solid #326ae5;
  border-radius: 0;
  background: #edf4ff;
  box-shadow: none;
  padding: 7px 7px 7px 8px;
}

#map-types-panel .map-type-boundary-copy strong {
  font-size: 0.76rem;
}

#map-types-panel .map-type-boundary-copy small {
  font-size: 0.68rem;
}

#map-types-panel .map-region-control {
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 8px;
}

#map-types-panel .map-region-breadcrumb {
  font-size: 0.7rem;
}

#map-types-panel .map-region-counterpart {
  min-height: 34px;
  background-image: none;
  box-shadow: none;
  font-size: 0.72rem;
}

/* Scoped boundary selector for maps that are intentionally delivered in small regions. */
#map-types-panel .map-multi-region-control {
  display: grid;
  gap: 9px;
  border: 1px solid #b9cbea;
  border-left: 4px solid #326ae5;
  background: #f7faff;
  padding: 10px;
}

#map-types-panel .map-multi-region-control[hidden] {
  display: none;
}

#map-types-panel .map-multi-region-heading {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

#map-types-panel .map-multi-region-step {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #326ae5;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
}

#map-types-panel .map-multi-region-heading h4,
#map-types-panel .map-multi-region-heading p {
  margin: 0;
}

#map-types-panel .map-multi-region-heading h4 {
  color: #1d2d45;
  font-size: 0.82rem;
  line-height: 1.25;
}

#map-types-panel .map-multi-region-heading p {
  margin-top: 2px;
  color: #65758a;
  font-size: 0.69rem;
  line-height: 1.35;
}

#map-types-panel .map-multi-region-heading > strong {
  border-radius: 999px;
  background: #e1ebff;
  padding: 3px 7px;
  color: #2453a6;
  font-size: 0.67rem;
  white-space: nowrap;
}

#map-types-panel .map-multi-region-selected {
  min-height: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

#map-types-panel .map-multi-region-selected button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #91acdc;
  border-radius: 999px;
  background: #ffffff;
  padding: 4px 8px 4px 10px;
  color: #244b94;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
}

#map-types-panel .map-multi-region-selected button:hover:not(:disabled),
#map-types-panel .map-multi-region-selected button:focus-visible {
  border-color: #326ae5;
  background: #edf4ff;
  outline: none;
}

#map-types-panel .map-multi-region-selected button:disabled {
  cursor: default;
  opacity: 1;
}

#map-types-panel .map-multi-region-selected svg {
  width: 14px;
  height: 14px;
}

#map-types-panel .map-multi-region-selected path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

#map-types-panel .map-multi-region-empty {
  color: #7a889a;
  font-size: 0.7rem;
}

#map-types-panel .map-multi-region-status {
  min-height: 1.2em;
  margin: 0;
  color: #5d6f86;
  font-size: 0.68rem;
  line-height: 1.35;
}

#map-types-panel .map-multi-region-status.is-warning {
  color: #9a4d15;
  font-weight: 650;
}

#map-types-panel .map-multi-region-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

#map-types-panel :is(.map-multi-region-secondary, .map-multi-region-primary) {
  min-height: 34px;
  border-radius: 7px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 720;
  cursor: pointer;
}

#map-types-panel .map-multi-region-secondary {
  margin-right: auto;
  border: 1px solid #c7d2e2;
  background: #ffffff;
  color: #40536b;
}

#map-types-panel .map-multi-region-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #275ccc;
  background: #326ae5;
  color: #ffffff;
}

#map-types-panel .map-multi-region-primary:hover:not(:disabled),
#map-types-panel .map-multi-region-primary:focus-visible {
  background: #2457c5;
  outline: 3px solid rgba(50, 106, 229, 0.17);
}

#map-types-panel .map-multi-region-primary svg {
  width: 16px;
  height: 16px;
}

#map-types-panel .map-multi-region-primary path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#map-types-panel :is(.map-multi-region-secondary, .map-multi-region-primary):disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

#map.is-choosing-map-regions,
#map.is-choosing-map-regions.is-hovering-feature {
  cursor: pointer;
}

#map-types-panel .map-type-current-summary,
#map-types-panel #boundary-overlays-summary {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 1px;
  color: #617187;
  font-size: 0.7rem;
}

#map-types-panel .map-type-complete-list {
  border: 0;
  padding: 0;
}

#map-types-panel .map-type-complete-list summary,
#map-types-panel .map-type-complete-list .dataset-select-block > span {
  font-size: 0.72rem;
}

#map-types-panel .boundary-overlays-card {
  gap: 7px;
}

#map-types-panel .boundary-overlays-heading {
  min-height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

#map-types-panel .boundary-overlays-heading p {
  color: #68778c;
  font-size: 0.7rem;
}

#map-types-panel :is(.boundary-overlay-add, .boundary-overlay-remove) {
  min-height: 34px;
  background-image: none;
  box-shadow: none;
  font-size: 0.72rem;
}

#map-types-panel .boundary-overlay-empty {
  border: 0;
  border-radius: 0;
  background: #ffffff;
  padding: 8px;
  font-size: 0.72rem;
}

#map-types-panel .boundary-overlay-item {
  border: 0;
  border-left: 3px solid #7699d9;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 8px;
}

#map-types-panel :is(
  .boundary-overlay-item-header strong,
  .boundary-overlay-item .dataset-select-block > span,
  .boundary-overlay-field,
  .boundary-overlay-inline,
  .boundary-overlay-status,
  .boundary-overlay-countries > summary
) {
  font-size: 0.71rem;
}

@media (max-width: 520px), (max-height: 760px) {
  #map-types-panel .tool-panel-content.classic-themed-content {
    gap: 9px;
    padding: 9px 8px 12px;
  }

  #map-types-panel .map-type-geography-card {
    min-height: 94px;
    grid-template-rows: minmax(55px, 1fr) auto;
  }
}

/* Progressive Map Library final cascade. */
#map-types-panel .tool-panel-content.classic-themed-content {
  gap: 9px;
  padding: 9px;
}

#map-types-panel .map-type-browser {
  gap: 8px;
}

#map-types-panel .map-type-boundary-list {
  gap: 0;
}

#map-types-panel .map-region-control {
  gap: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

#map-types-panel .boundary-overlays-card {
  gap: 6px;
  border-top: 1px solid #cfd7e3;
  padding-top: 8px;
}

#map-types-panel #boundary-overlays-summary {
  display: none;
}

@media (max-width: 420px), (max-height: 720px) {
  #map-types-panel .tool-panel-content.classic-themed-content {
    gap: 7px;
    padding: 7px;
  }
}

/* Dedicated Stripe checkout-return state. */
.subscription-checkout-result {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px 16px;
  border: 1px solid #b9d5c5;
  border-radius: 13px;
  background: #f1fbf5;
  color: #23553a;
  padding: 18px;
}

.subscription-checkout-result[hidden] {
  display: none;
}

.subscription-checkout-result[data-state='processing'] {
  border-color: #b8cbe5;
  background: #f2f7fd;
  color: #294f7c;
}

.subscription-checkout-result[data-state='pending'] {
  border-color: #e5ce8f;
  background: #fff9e9;
  color: #71520f;
}

.subscription-checkout-result-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: #d9f3e2;
}

.subscription-checkout-result-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #168a50;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.6;
}

.subscription-checkout-result[data-state='processing'] .subscription-checkout-result-icon {
  background: #dce9f8;
}

.subscription-checkout-result[data-state='processing'] .subscription-checkout-result-icon svg {
  animation: subscription-confirm-spin 900ms linear infinite;
  stroke: #3569ba;
}

.subscription-checkout-result[data-state='processing'] .subscription-checkout-result-icon path {
  display: none;
}

.subscription-checkout-result[data-state='pending'] .subscription-checkout-result-icon {
  background: #f7e9b9;
}

.subscription-checkout-result[data-state='pending'] .subscription-checkout-result-icon svg {
  stroke: #9a6c08;
}

.subscription-checkout-result h3,
.subscription-checkout-result p {
  margin: 0;
}

.subscription-checkout-result h3 {
  color: currentColor;
  font-size: 1rem;
}

.subscription-checkout-result p {
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.45;
}

.subscription-checkout-result-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid rgba(79, 111, 91, 0.18);
  padding-top: 13px;
}

.subscription-checkout-result-actions button {
  min-height: 40px;
}

@keyframes subscription-confirm-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .subscription-checkout-result[data-state='processing'] .subscription-checkout-result-icon svg {
    animation: none;
  }
}

/* Compact Territory Appearance editor. */
.territory-style-dialog {
  width: min(640px, calc(100vw - 28px));
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.territory-style-dialog .spreadsheet-modal-header {
  padding: 10px 14px 9px;
}

.territory-style-dialog .spreadsheet-modal-footer {
  gap: 8px;
  padding: 9px 12px;
}

.territory-style-title-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.territory-style-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
}

.territory-style-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border-bottom: 1px solid #dce5ee;
  background: #f4f7fa;
  padding: 6px 10px;
}

.territory-style-tabs button {
  position: relative;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #526274;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 750;
  padding: 6px 10px;
}

.territory-style-tabs button:hover {
  border-color: #c7d7e5;
  background: #fff;
  color: #214e70;
}

.territory-style-tabs button.is-selected {
  border-color: #8cb7d1;
  background: #fff;
  color: #176d9f;
  box-shadow: inset 0 -2px #176d9f;
}

.territory-style-tabs button.has-enabled-feature::after {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2e9b60;
  content: '';
}

.territory-style-tabs button:focus-visible {
  outline: 2px solid rgba(27, 111, 159, 0.28);
  outline-offset: 1px;
}

.territory-style-dialog .territory-style-body {
  display: block;
  padding: 10px 12px;
}

.territory-style-panel[hidden] {
  display: none;
}

.territory-style-dialog :is(.territory-fill-editor, .territory-boundary-editor, .territory-label-editor) {
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: #fff;
  padding: 0;
}

.territory-style-dialog .territory-fill-heading {
  gap: 10px;
  border-bottom: 1px solid #e4ebf2;
  padding-bottom: 8px;
}

.territory-style-dialog .territory-fill-heading h3,
.territory-style-dialog .territory-boundary-heading h3 {
  font-size: 0.85rem;
}

.territory-style-dialog .territory-fill-heading p,
.territory-style-dialog .territory-boundary-heading p {
  margin-top: 2px;
  font-size: 0.68rem;
  line-height: 1.3;
}

.territory-style-dialog .territory-style-preview {
  width: 104px;
  height: 46px;
  border-radius: 7px;
}

.territory-appearance-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.territory-appearance-label {
  width: 52px;
  flex: 0 0 52px;
  color: #526274;
  font-size: 0.68rem;
  font-weight: 700;
}

.territory-fill-colour-options,
.territory-style-dialog .territory-pattern-options {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.territory-fill-colour-options > button,
.territory-colour-well,
.territory-style-dialog .territory-pattern-options button {
  position: relative;
  width: 26px;
  height: 26px;
  min-width: 26px;
  flex: 0 0 26px;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 6px;
  background-color: #fff;
  cursor: pointer;
  padding: 0;
}

.territory-fill-colour-options > button:hover,
.territory-style-dialog .territory-pattern-options button:hover {
  border-color: #4f8eb6;
  transform: translateY(-1px);
}

.territory-fill-colour-options > button.is-selected,
.territory-custom-colour.is-selected,
.territory-style-dialog .territory-pattern-options button.is-selected {
  border: 2px solid #176d9f;
  background-color: #fff;
  box-shadow: 0 0 0 1px #fff inset;
}

.territory-style-dialog .territory-pattern-options button.is-selected::after {
  display: none;
}

.territory-style-dialog .territory-pattern-fieldset.territory-appearance-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.territory-style-dialog .territory-pattern-fieldset > .territory-appearance-label {
  position: static;
  width: 52px;
  height: auto;
  flex: 0 0 52px;
  overflow: visible;
  clip: auto;
  margin: 0;
  padding: 0;
}

.territory-style-dialog .territory-pattern-sample {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
}

.territory-custom-colour {
  color: #445468;
}

.territory-custom-colour svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  pointer-events: none;
}

.territory-custom-colour-preview {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: var(--territory-custom-colour, #8dbbd8);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.2);
  pointer-events: none;
}

.territory-custom-colour input[type='color'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.territory-colour-well:not(.territory-custom-colour) input[type='color'] {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.territory-colour-well:focus-within {
  outline: 2px solid rgba(27, 111, 159, 0.35);
  outline-offset: 2px;
}

.territory-style-dialog .territory-compact-pattern-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
  border-top: 1px solid #e4ebf2;
  padding-top: 8px;
}

.territory-compact-pattern-details .territory-hatch-colour-row,
.territory-compact-pattern-details .territory-background-row {
  grid-column: 1 / -1;
  min-height: 30px;
}

.territory-hatch-colour-row small {
  color: #6b7a8b;
  font-size: 0.67rem;
}

.territory-background-options {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #cad7e3;
  border-radius: 7px;
}

.territory-background-options button {
  min-height: 26px;
  border: 0;
  border-left: 1px solid #cad7e3;
  background: #fff;
  color: #45566a;
  cursor: pointer;
  font: inherit;
  font-size: 0.67rem;
  font-weight: 650;
  padding: 4px 9px;
}

.territory-background-options button:first-child {
  border-left: 0;
}

.territory-background-options button.is-selected {
  background: #e8f3fa;
  color: #176d9f;
}

.territory-background-options button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.territory-style-dialog .territory-pattern-detail-controls.is-solid {
  opacity: 0.48;
}

.territory-style-dialog .territory-boundary-heading {
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e4ebf2;
  padding-bottom: 8px;
}

.territory-style-dialog .switch-control {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.68rem;
}

.territory-style-dialog .territory-boundary-controls,
.territory-style-dialog .territory-label-controls {
  gap: 6px;
}

.territory-compact-two-column {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.territory-style-dialog .territory-style-colours {
  gap: 7px;
}

.territory-style-dialog .territory-label-source,
.territory-style-dialog .territory-label-minimum,
.territory-style-dialog .territory-boundary-line-style {
  min-height: 38px;
  border-radius: 8px;
  padding: 5px 7px;
}

.territory-style-dialog .territory-label-minimum {
  grid-template-columns: auto minmax(90px, 1fr);
}

.territory-style-dialog .territory-label-minimum select {
  min-width: 90px;
}

.territory-style-dialog .territory-label-options {
  gap: 6px;
}

.territory-style-dialog .territory-label-options .mini-checkbox {
  flex: 1 1 180px;
}

.territory-style-dialog .territory-label-apply-all {
  border-radius: 8px;
  padding: 6px 8px;
}

.territory-style-dialog .territory-label-apply-all > span {
  gap: 1px;
}

.territory-style-dialog .territory-boundary-status {
  min-height: 0;
  padding: 4px 7px;
  font-size: 0.64rem;
}

@media (max-width: 560px) {
  .territory-style-dialog {
    width: min(440px, calc(100vw - 18px));
  }

  .territory-style-tabs {
    padding-inline: 8px;
  }

  .territory-style-dialog .territory-style-preview {
    width: 86px;
  }

  .territory-style-dialog .territory-compact-pattern-details,
  .territory-compact-two-column,
  .territory-style-dialog .territory-style-colours {
    grid-template-columns: 1fr;
  }

  .territory-compact-pattern-details .territory-hatch-colour-row,
  .territory-compact-pattern-details .territory-background-row {
    grid-column: auto;
  }
}

/* Inset labels mirror the current Labels & Titles priority cards exactly. */
#inset-panel .tool-panel-content.classic-themed-content {
  gap: 12px;
  padding: 12px;
}

#inset-panel .inset-map-controls {
  gap: 12px;
}

#inset-panel .inset-label-priority-stack {
  gap: 12px;
}

#inset-panel .inset-label-card,
#inset-panel .inset-label-card.is-higher-priority,
#inset-panel .inset-label-card:not(.is-higher-priority) {
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  opacity: 1;
}

#inset-panel .inset-label-card.is-higher-priority {
  background: #ffffff;
  padding: 7px;
}

#inset-panel .inset-label-card-header {
  min-height: 34px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0 5px;
}

#inset-panel [data-inset-label-priority-card='areas'] .inset-label-card-header,
#inset-panel [data-inset-label-priority-card='settlements'] .inset-label-card-header {
  background: transparent;
}

#inset-panel .inset-label-card-header h3 {
  color: #263548;
  font-size: 0.76rem;
  font-weight: 720;
}

#inset-panel .inset-label-card-header .switch-row b {
  color: #46566c;
  font-size: 0.74rem;
  font-weight: 700;
}

#inset-panel .inset-label-card-header .switch-row > span {
  background: #cbd4e1;
  box-shadow: none;
}

#inset-panel .inset-label-card-header .switch-row input:checked + span {
  background: #326ae5;
}

#inset-panel .inset-label-card-header .label-priority-heading {
  gap: 7px;
}

#inset-panel .inset-label-card-header .label-priority-heading > div {
  order: 1;
}

#inset-panel .inset-label-card-header .label-priority-move-button {
  order: 2;
}

#inset-panel .label-priority-move-button {
  width: auto;
  height: 27px;
  min-width: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #c8d2e1;
  border-radius: 7px;
  background: #ffffff;
  color: #43639b;
  padding: 3px 6px 3px 5px;
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: none;
}

#inset-panel .label-priority-move-button:hover {
  border-color: #7699d9;
  background: #eef4ff;
  color: #244f9e;
}

#inset-panel .label-priority-move-button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

#inset-panel .inset-label-card-body,
#inset-panel [data-inset-label-priority-card='areas'] .inset-label-card-body,
#inset-panel [data-inset-label-priority-card='settlements'] .inset-label-card-body {
  display: grid;
  gap: 5px;
  background: transparent;
  padding: 0;
}

#inset-panel .area-label-field-row {
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 7px;
}

#inset-panel .area-label-field-control > span {
  color: #46566c;
  font-size: 0.7rem;
  font-weight: 700;
}

#inset-panel .area-label-field-control .dataset-select {
  min-height: 44px;
  border-color: #c8d2e1;
  border-radius: 9px;
  background: #ffffff;
  font-size: 0.74rem;
}

#inset-panel .area-label-field-row .label-colour-control {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  align-self: end;
  border-color: #c8d2e1;
  border-radius: 9px;
  background: #ffffff;
  padding: 3px;
}

#inset-panel .inset-area-label-settings {
  gap: 5px;
}

#inset-panel .inset-label-setting-row,
#inset-panel .inset-area-wrap-row {
  min-height: 44px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

#inset-panel .area-label-setting-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #d7dee9;
  border-radius: 7px;
  background: #f4f6fa;
  color: #526a91;
}

#inset-panel .area-label-setting-icon svg {
  width: 19px;
  height: 19px;
}

#inset-panel .area-label-setting-icon :is(path, circle) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#inset-panel .area-label-setting-title,
#inset-panel .inset-area-wrap-row .mini-checkbox span {
  color: #46566c;
  font-size: 0.74rem;
  font-weight: 700;
}

#inset-panel .inset-area-wrap-row .mini-checkbox {
  min-height: 32px;
  border: 0;
  background: transparent;
  padding: 0;
}

#inset-panel .area-label-size-control,
#inset-panel .label-zoom-stepper,
#inset-panel .settlement-filter-row .label-size-number {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  border-color: #c8d2e1;
  border-radius: 9px;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 0.74rem;
}

#inset-panel .area-label-size-control {
  width: 86px;
  justify-self: end;
}

#inset-panel .area-label-size-control input,
#inset-panel .settlement-filter-row .label-size-number input {
  width: 48px;
  height: 100%;
  min-height: 0;
  padding-left: 8px;
  font-weight: 700;
}

#inset-panel .area-label-wrap-length .dataset-select {
  width: 104px;
  min-height: 40px;
  height: 40px;
  border-color: #c8d2e1;
  border-radius: 9px;
  background: #ffffff;
  font-size: 0.7rem;
}

#inset-panel .settlement-filters {
  gap: 0;
}

#inset-panel .settlement-filter-row {
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) 40px 86px;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 2px 0;
  box-shadow: none;
}

#inset-panel .settlement-filter-row .mini-checkbox {
  min-height: 36px;
  gap: 7px;
  border: 0;
  background: transparent;
  padding: 0;
}

#inset-panel .settlement-category-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 40, 70, 0.18);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

#inset-panel .settlement-category-icon--city { background: #4269c8; }
#inset-panel .settlement-category-icon--town { background: #429887; }
#inset-panel .settlement-category-icon--village { background: #88a84c; }
#inset-panel .settlement-category-icon--landmark { background: #a26a2e; }

#inset-panel .settlement-category-name {
  color: #24334a;
  font-size: 0.74rem;
  font-weight: 700;
}

#inset-panel .settlement-filter-row .label-colour-control {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-color: #c8d2e1;
  border-radius: 9px;
  background: #ffffff;
  padding: 3px;
}

#inset-panel .settlement-filter-row .label-size-number {
  width: 86px;
}

#inset-panel .label-zoom-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 80px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #34445a;
  padding: 6px 0 0;
}

#inset-panel .label-zoom-icon {
  width: 36px;
  height: 36px;
  border: 1px solid #cbd5e3;
  border-radius: 999px;
  background: #ffffff;
  color: #526a91;
}

#inset-panel .label-zoom-copy strong {
  color: #34445a;
  font-size: 0.74rem;
  line-height: 1.2;
}

#inset-panel .label-zoom-stepper {
  width: 80px;
  justify-self: end;
}

#inset-panel .label-zoom-stepper input[type='number'] {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 2px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 420px) {
  #inset-panel .label-priority-move-button span {
    display: inline;
  }

  #inset-panel .label-priority-move-button {
    width: auto;
    padding: 3px 6px 3px 5px;
  }
}

/* Inset label cards use the established coloured Labels & Titles treatment. */
#inset-panel .tool-panel-content.classic-themed-content {
  gap: 10px;
  padding: 11px 10px 15px;
}

#inset-panel .inset-map-controls {
  gap: 8px;
}

#inset-panel .inset-label-priority-stack {
  gap: 8px;
}

#inset-panel .inset-label-card,
#inset-panel .inset-label-card.is-higher-priority,
#inset-panel .inset-label-card:not(.is-higher-priority) {
  gap: 0;
  overflow: hidden;
  border: 1px solid;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: none;
  padding: 0;
  opacity: 1;
}

#inset-panel .inset-label-card[data-inset-label-priority-card='areas'] {
  border-color: #dfa14b;
  background: #fffdfa;
}

#inset-panel .inset-label-card[data-inset-label-priority-card='settlements'] {
  border-color: #4b927e;
  background: #fbfefd;
}

#inset-panel .inset-label-card-header {
  min-height: 40px;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  padding: 6px 8px;
}

#inset-panel [data-inset-label-priority-card='areas'] .inset-label-card-header {
  background: #d19139;
}

#inset-panel [data-inset-label-priority-card='settlements'] .inset-label-card-header {
  background: #4f8979;
}

#inset-panel .inset-label-card-header h3,
#inset-panel .inset-label-card-header .switch-row b {
  color: #10284a;
}

#inset-panel .inset-label-card-header h3 {
  font-size: 0.92rem;
  font-weight: 720;
}

#inset-panel .inset-label-card-header .switch-row b {
  font-size: 0.74rem;
  font-weight: 700;
}

#inset-panel .inset-label-card-header .switch-row > span {
  background: rgba(15, 30, 55, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

#inset-panel .inset-label-card-header .switch-row input:checked + span {
  background: #284687;
}

#inset-panel .inset-label-card-header .label-priority-heading {
  gap: 6px;
}

#inset-panel .label-priority-move-button {
  width: auto;
  height: 27px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  padding: 3px 7px 3px 5px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

#inset-panel .label-priority-move-button span {
  display: inline-block;
  white-space: nowrap;
}

#inset-panel .label-priority-move-button:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

#inset-panel .inset-label-card-body,
#inset-panel [data-inset-label-priority-card='areas'] .inset-label-card-body,
#inset-panel [data-inset-label-priority-card='settlements'] .inset-label-card-body {
  display: grid;
  gap: 6px;
  padding: 7px;
}

#inset-panel [data-inset-label-priority-card='areas'] .inset-label-card-body {
  background: #fff9ef;
}

#inset-panel [data-inset-label-priority-card='settlements'] .inset-label-card-body {
  background: #f5fbf8;
}

#inset-panel .area-label-field-row {
  grid-template-columns: minmax(0, 1fr) 29px;
  gap: 6px;
}

#inset-panel .area-label-field-control > span {
  color: #5d4b38;
  font-size: 0.6rem;
}

#inset-panel .area-label-field-control .dataset-select {
  min-height: 30px;
  border-color: #c8d2e1;
  border-radius: 7px;
  background: #ffffff;
  font-size: 0.7rem;
}

#inset-panel .area-label-field-row .label-colour-control {
  width: 29px;
  height: 29px;
  flex-basis: 29px;
  border-color: #c8d2e1;
  border-radius: 6px;
  background: #ffffff;
  padding: 2px;
}

#inset-panel .inset-area-label-settings {
  gap: 3px;
}

#inset-panel .inset-label-setting-row,
#inset-panel .inset-area-wrap-row {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

#inset-panel .inset-label-setting-row > span:first-child,
#inset-panel .inset-area-wrap-row .mini-checkbox span {
  color: #5d4b38;
  font-size: 0.61rem;
  font-weight: 700;
}

#inset-panel .inset-area-wrap-row .mini-checkbox {
  min-height: 26px;
  border: 0;
  background: transparent;
  padding: 2px 0;
}

#inset-panel .area-label-size-control,
#inset-panel .label-zoom-stepper,
#inset-panel .settlement-filter-row .label-size-number {
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  border-color: #c8d2e1;
  border-radius: 6px;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 0.61rem;
}

#inset-panel .area-label-size-control {
  width: 62px;
}

#inset-panel .area-label-size-control input,
#inset-panel .settlement-filter-row .label-size-number input {
  width: 39px;
  height: 100%;
  min-height: 0;
  padding-left: 5px;
}

#inset-panel .area-label-wrap-length .dataset-select {
  width: 76px;
  min-height: 28px;
  height: 28px;
  border-color: #c8d2e1;
  border-radius: 6px;
  background: #ffffff;
  font-size: 0.62rem;
}

#inset-panel .settlement-filters {
  gap: 3px;
}

#inset-panel .settlement-filter-row {
  min-height: 29px;
  grid-template-columns: minmax(0, 1fr) 29px 58px;
  gap: 5px;
  border: 1px solid rgba(172, 195, 146, 0.44);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
  padding: 2px 4px;
  box-shadow: none;
}

#inset-panel .settlement-filter-row .mini-checkbox {
  min-height: 24px;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 1px 2px;
}

#inset-panel .settlement-category-icon {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  display: inline;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #314c76;
  box-shadow: none;
  font-size: 0.65rem;
  font-weight: 800;
}

#inset-panel .settlement-category-name {
  color: #24334a;
  font-size: 0.65rem;
  font-weight: 700;
}

#inset-panel .settlement-filter-row .label-colour-control {
  width: 29px;
  height: 29px;
  flex-basis: 29px;
  border-color: #c8d2e1;
  border-radius: 6px;
  background: #ffffff;
  padding: 2px;
}

#inset-panel .settlement-filter-row .label-size-number {
  width: 58px;
}

#inset-panel .label-zoom-footer {
  grid-template-columns: 24px minmax(0, 1fr) 57px;
  gap: 6px;
  border: 0;
  border-top: 1px solid rgba(113, 131, 157, 0.2);
  border-radius: 0;
  background: rgba(245, 247, 250, 0.72);
  padding: 5px 7px;
}

#inset-panel .label-zoom-icon {
  width: 24px;
  height: 24px;
  border-color: #cbd5e3;
  background: #ffffff;
  color: #526a91;
}

#inset-panel .label-zoom-copy strong {
  color: #34445a;
  font-size: 0.61rem;
}

#inset-panel .label-zoom-stepper {
  width: 57px;
}

/* Inset label controls mirror the current flat Labels & Titles cards. */
#inset-panel.has-inset-map {
  height: calc(100vh - var(--topbar-height) - var(--statusbar-height) - var(--workspace-quick-offset) - 10px);
  grid-template-rows: max-content minmax(0, 1fr);
}

#inset-panel.has-inset-map > .tool-panel-header {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

#inset-panel.has-inset-map > .tool-panel-content {
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
}

@media (max-width: 620px) {
  #inset-panel.has-inset-map {
    height: calc(100vh - var(--topbar-height) - var(--statusbar-height) - var(--workspace-quick-offset) - 8px);
  }
}

#inset-panel .tool-panel-content.classic-themed-content {
  gap: 12px;
  background: #eef1f7;
  padding: 12px;
}

#inset-panel .inset-map-controls,
#inset-panel .inset-label-priority-stack {
  gap: 12px;
}

#inset-panel .inset-label-card,
#inset-panel .inset-label-card.is-higher-priority,
#inset-panel .inset-label-card:not(.is-higher-priority) {
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  opacity: 1;
}

#inset-panel .inset-label-card.is-higher-priority {
  background: #ffffff;
  padding: 7px;
}

#inset-panel .inset-label-card-header {
  min-height: 34px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0 5px;
}

#inset-panel [data-inset-label-priority-card='areas'] .inset-label-card-header,
#inset-panel [data-inset-label-priority-card='settlements'] .inset-label-card-header {
  background: transparent;
}

#inset-panel .inset-label-card-header h3 {
  color: #263548;
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.22;
}

#inset-panel .inset-label-card-header .switch-row b {
  color: #46566c;
  font-size: 0.74rem;
  font-weight: 700;
}

#inset-panel .inset-label-card-header .switch-row > span {
  background: #cbd4e1;
  box-shadow: none;
}

#inset-panel .inset-label-card-header .switch-row input:checked + span {
  background: #326ae5;
}

#inset-panel .inset-label-card-header .label-priority-heading {
  gap: 7px;
}

#inset-panel .inset-label-card-header .label-priority-heading > div {
  order: 1;
}

#inset-panel .inset-label-card-header .label-priority-move-button {
  order: 2;
}

#inset-panel .label-priority-move-button {
  width: auto;
  height: 27px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #c8d2e1;
  border-radius: 7px;
  background: #ffffff;
  color: #43639b;
  padding: 3px 6px 3px 5px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

#inset-panel .label-priority-move-button:hover {
  border-color: #7699d9;
  background: #eef4ff;
  color: #244f9e;
}

#inset-panel .label-priority-move-button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

#inset-panel .inset-label-card-body,
#inset-panel [data-inset-label-priority-card='areas'] .inset-label-card-body,
#inset-panel [data-inset-label-priority-card='settlements'] .inset-label-card-body {
  display: grid;
  gap: 5px;
  background: transparent;
  padding: 0;
}

#inset-panel .area-label-field-row {
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: end;
  gap: 7px;
}

#inset-panel .area-label-field-control {
  gap: 3px;
}

#inset-panel .area-label-field-control > span {
  color: #46566c;
  font-size: 0.6rem;
  font-weight: 700;
}

#inset-panel .area-label-field-control .dataset-select {
  min-height: 32px;
  border-color: #c8d2e1;
  border-radius: 7px;
  background: #ffffff;
  font-size: 0.7rem;
}

#inset-panel .area-label-field-row .label-colour-control {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  align-self: end;
  border-color: #c8d2e1;
  border-radius: 7px;
  background: #ffffff;
  padding: 2px;
}

#inset-panel .inset-area-label-settings {
  display: grid;
  gap: 0;
}

#inset-panel .inset-label-setting-row,
#inset-panel .inset-area-wrap-row {
  min-height: 34px;
  display: grid;
  grid-template-columns: 27px 66px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 4px 0;
}

#inset-panel .area-label-setting-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid #d7dee9;
  border-radius: 6px;
  background: #f4f6fa;
  color: #526a91;
}

#inset-panel .area-label-setting-icon svg {
  width: 18px;
  height: 18px;
}

#inset-panel .area-label-setting-icon :is(path, circle) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#inset-panel .area-label-setting-title,
#inset-panel .inset-area-wrap-row .mini-checkbox span {
  color: #46566c;
  font-size: 0.61rem;
  font-weight: 700;
}

#inset-panel .inset-area-wrap-row .mini-checkbox {
  min-width: 0;
  min-height: 27px;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 1px 0;
}

#inset-panel .area-label-size-control,
#inset-panel .label-zoom-stepper,
#inset-panel .settlement-filter-row .label-size-number {
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  border-color: #c8d2e1;
  border-radius: 7px;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 0.74rem;
}

#inset-panel .area-label-size-control {
  width: 62px;
  justify-self: end;
}

#inset-panel .area-label-size-control input,
#inset-panel .settlement-filter-row .label-size-number input {
  height: 100%;
  min-height: 0;
  padding-left: 6px;
  font-weight: 700;
}

#inset-panel .area-label-wrap-length {
  min-width: 0;
}

#inset-panel .area-label-wrap-length .dataset-select {
  width: 75px;
  min-height: 30px;
  height: 30px;
  border-color: #c8d2e1;
  border-radius: 7px;
  background: #ffffff;
  font-size: 0.6rem;
}

#inset-panel .settlement-filters {
  display: grid;
  gap: 0;
}

#inset-panel .settlement-filter-row {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px 58px;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 3px 0;
  box-shadow: none;
}

#inset-panel .settlement-filter-row .mini-checkbox {
  min-height: 27px;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 1px 2px;
}

#inset-panel .settlement-filter-row .mini-checkbox input {
  accent-color: #274f9f;
}

#inset-panel .settlement-category-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 40, 70, 0.18);
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1;
}

#inset-panel .settlement-category-icon--city { background: var(--inset-settlement-city-badge) !important; }
#inset-panel .settlement-category-icon--town { background: var(--inset-settlement-town-badge) !important; }
#inset-panel .settlement-category-icon--village { background: var(--inset-settlement-village-badge) !important; }
#inset-panel .settlement-category-icon--landmark { background: var(--inset-settlement-landmark-badge) !important; }

/* Priority action text stays horizontal at the inset panel's compact width. */
#inset-panel .inset-label-card-header .label-priority-move-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

#inset-panel .inset-label-card-header .label-priority-move-button span {
  display: inline-block;
  white-space: nowrap;
}

#inset-panel .settlement-category-name {
  color: #24334a;
  font-size: 0.65rem;
  font-weight: 680;
}

#inset-panel .settlement-filter-row .label-colour-control {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
  border-color: #c8d2e1;
  border-radius: 7px;
  background: #ffffff;
  padding: 2px;
}

#inset-panel .settlement-filter-row .label-size-number {
  width: 58px;
}

#inset-panel .label-zoom-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #34445a;
  padding: 6px 0 0;
}

#inset-panel .label-zoom-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid #cbd5e3;
  border-radius: 999px;
  background: #ffffff;
  color: #526a91;
}

#inset-panel .label-zoom-icon svg {
  width: 16px;
  height: 16px;
}

#inset-panel .label-zoom-icon :is(circle, path) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

#inset-panel .label-zoom-copy strong {
  color: #34445a;
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.2;
}

#inset-panel .label-zoom-stepper {
  width: 58px;
  justify-self: end;
}

#inset-panel .label-zoom-stepper input[type='number'] {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 2px;
  font-weight: 700;
  text-align: center;
}