.maps-head,
.maps-toolbar,
.maps-controls {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  flex-wrap: wrap;
}
.maps-head {
  justify-content: space-between;
}
.maps-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.maps-card {
  border: 1px solid var(--mc-border, #ccdcd5);
  border-radius: 24px;
  padding: 1.3rem;
  background: linear-gradient(145deg, #ffffffdb, #e4f3eedb);
  box-shadow: 0 12px 36px #164c4310;
  /* Reading cards stay sharp without a blur layer per template. */
  backdrop-filter: none;
  text-align: left;
  color: #153e39;
  cursor: pointer;
}
.maps-card:hover {
  box-shadow: 0 14px 40px #164c4325;
}
.maps-preview {
  height: 125px;
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse, #d3e9e680, transparent);
  margin-bottom: 1rem;
}
.maps-preview span {
  padding: 0.45rem 0.7rem;
  border-radius: 12px;
  background: #ffffffc9;
  border: 1px solid #74978d;
  z-index: 1;
  font-size: 0.85rem;
}
.maps-preview i {
  position: absolute;
  width: 38%;
  height: 1px;
  background: currentColor;
  transform: rotate(30deg);
}
.maps-preview i:nth-child(2) {
  transform: rotate(-30deg);
}
.maps-card h2 {
  font-size: 1.15rem;
}
.maps-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 1rem;
  margin-top: 1rem;
}
.maps-tree-tools {padding:14px;margin-bottom:18px;border:1px solid var(--mc-line,#c4d9d3);border-radius:18px;background:var(--mc-surface,#f4faf7);}
.maps-tree-tools h2 {margin:0 0 6px;font-size:1rem;}
.maps-tree-tools p {margin:0 0 12px;font-size:.8rem;line-height:1.5;}
.maps-tree-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.maps-inspector .maps-tree-actions > .mc-button {min-height:44px;min-width:0;width:100%;padding:10px 8px;font-size:.8rem;white-space:normal;}
.maps-tree-actions button:first-child {grid-column:1/-1;}
.maps-tree-tools .maps-tree-hint {margin:10px 0 0;font-size:.75rem;}
.maps-tree-actions button:focus-visible {outline:3px solid #3c68c4;outline-offset:2px;}
.maps-stage {
  height: 65vh;
  min-height: 380px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid #c4d9d3;
  position: relative;
  background: radial-gradient(circle at 50% 40%, #d9f1ec, #f4f8f6);
  touch-action: none;
}
.maps-stage:focus-visible {
  outline: 3px solid #166d68;
}
.maps-world {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
}
.maps-world svg {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
.maps-node {
  position: absolute;
  width: 170px;
  min-height: 64px;
  border-radius: 18px;
  border: 1px solid #769c90;
  background: #ffffffef;
  box-shadow: 0 8px 24px #1e5a4c18;
  color: #123e36;
  padding: 0.7rem;
  transform: translate(-50%, -50%);
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: grab;
  touch-action: none;
  font: inherit;
}
.maps-node[aria-pressed="true"] {
  outline: 3px solid #216f67;
}
.maps-node.root {
  background: #145c55;
  color: white;
}
.maps-node small {
  display: block;
  font-size: 0.75rem;
  opacity: 0.9;
}
.maps-inspector {
  background: #ffffffd9;
  border: 1px solid #c4d9d3;
  border-radius: 24px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-self: start;
}
.maps-inspector label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.maps-inspector input,
.maps-inspector textarea,
.maps-controls input,
.maps-controls select {
  padding: 0.65rem;
  border: 1px solid #87a99e;
  border-radius: 10px;
  background: #fff;
  color: #153e39;
  font: inherit;
  max-width: 100%;
}
.maps-inspector textarea {
  min-height: 100px;
}
.maps-inspector label.maps-check {
  flex-direction: row;
}
.maps-help {
  padding: 1rem;
  background: #e0eee9;
  border-radius: 16px;
  margin: 1rem 0;
}
.maps-result {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 400px;
  overflow: auto;
}
.maps-status {
  min-height: 1.5em;
  color: #235b51;
}
.maps-list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.maps-progress {
  accent-color: #166d68;
  width: 100%;
  height: 6px;
}
.maps-outline {
  max-height: 65vh;
  overflow: auto;
  padding: 1rem;
}
.maps-outline button {
  display: block;
  margin: 0.4rem 0;
  padding: 0.7rem;
  border-radius: 12px;
  border: 1px solid #769c90;
  background: white;
  color: #153e39;
  text-align: left;
  font: inherit;
}
.maps-card:focus-visible,
.maps-toolbar button:focus-visible {
  outline: 3px solid #166d68;
  outline-offset: 3px;
}
@media (max-width: 800px) {
  .maps-editor {
    grid-template-columns: 1fr;
  }
  .maps-stage {
    height: 50vh;
  }
  .maps-inspector {
    width: 100%;
  }
  .maps-node {
    width: 155px;
  }
  .maps-toolbar .mc-button {
    padding: 0.6rem;
  }
  .maps-inspector input {
    font-size: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-view="maps"] * {
    transition: none !important;
    animation: none !important;
  }
}
@media print {
  body * {
    visibility: hidden;
  }
  [data-view="maps"],
  [data-view="maps"] * {
    visibility: visible;
  }
  [data-view="maps"] {
    position: absolute;
    inset: 0;
  }
  .maps-toolbar,
  .maps-help,
  .maps-inspector {
    display: none !important;
  }
  .maps-editor {
    display: block;
  }
  .maps-stage {
    height: 85vh;
  }
}

/* Shared semantic tokens also follow MindCoda's existing dark preference. */
.maps-card,
.maps-node,
.maps-inspector,
.maps-outline button {
  color: var(--mc-text-primary, #153e39);
  border-color: var(--mc-border-subtle, #c4d9d3);
  background: var(--mc-glass-strong, #ffffffef);
  box-shadow: var(--mc-shadow-card, 0 8px 24px #1e5a4c18);
}
.maps-stage {
  background: var(--mc-background-primary, radial-gradient(circle, #d9f1ec, #f4f8f6));
  border-color: var(--mc-border-subtle, #c4d9d3);
}
.maps-card {
  background: linear-gradient(
    145deg,
    var(--mc-glass-strong, #fff),
    var(--mc-surface-elevated, #e4f3ee)
  );
}
.maps-node.root {
  background: var(--mc-accent-secondary, #145c55);
  color: var(--mc-on-accent, white);
}
.maps-preview span,
.maps-inspector input,
.maps-inspector textarea,
.maps-controls input,
.maps-controls select,
.maps-inspector select {
  color: var(--mc-text-primary, #153e39);
  background: var(--mc-surface-primary, white);
  border-color: var(--mc-border-subtle, #87a99e);
}
.maps-help {
  background: var(--mc-surface-elevated, #e0eee9);
  color: var(--mc-text-primary, #153e39);
}
.maps-status {
  color: var(--mc-text-secondary, #235b51);
}
.maps-menu {
  position: relative;
}
.maps-menu summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  border: 1px solid var(--mc-border-subtle, #87a99e);
  border-radius: 14px;
  font-weight: 600;
}
.maps-menu[open] {
  padding: 0.5rem;
  background: var(--mc-surface-primary, white);
  border-radius: 16px;
  box-shadow: var(--mc-shadow-card, 0 10px 28px #164c4320);
  z-index: 2;
}
.maps-menu[open] button {
  margin: 0.3rem;
}
@media (prefers-reduced-transparency: reduce) {
  .maps-card,
  .maps-inspector,
  .maps-node {
    backdrop-filter: none;
    background: var(--mc-surface-primary, white);
  }
}

/* Quiet surfaces, precise edges, and glass only on floating controls. */
.maps-card {
  padding: 1.5rem;
  box-shadow: 0 2px 8px #102c3506, inset 0 1px 0 #ffffff70;
}
.maps-card:hover {
  border-color: var(--mc-accent-secondary, #166d68);
  box-shadow: 0 6px 20px #102c3510;
}
.maps-card h2 { letter-spacing: -0.025em; margin: 0 0 0.5rem; }
.maps-card p { color: var(--mc-text-secondary, #235b51); line-height: 1.5; }
.maps-preview { background: none; height: 140px; }
.maps-preview i { width: 70%; opacity: 0.3; }
.maps-preview span { max-width: 65%; text-align: center; box-shadow: 0 3px 12px #102c3508; }
.maps-preview::before,
.maps-preview::after {
  content: "";
  position: absolute;
  inset: 18px auto auto 12%;
  width: 26px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 6px;
  opacity: 0.45;
  background: var(--mc-surface-primary, white);
}
.maps-preview::after { inset: auto 12% 18px auto; }
.maps-inspector { box-shadow: 0 2px 12px #102c3508; }
.maps-node { box-shadow: 0 3px 12px #102c3510; }
.maps-node[aria-pressed="true"] { outline-width: 2px; outline-offset: 3px; }
.maps-toolbar { padding: 0.5rem 0; gap: 0.5rem; }
.maps-menu summary {
  background: var(--mc-glass-strong, #fffffff0);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 #ffffff60;
}
@media (prefers-reduced-transparency: reduce) {
  .maps-menu summary { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--mc-surface-primary, white); }
}

@media (max-width: 1000px) { .maps-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .maps-gallery { grid-template-columns: minmax(0, 1fr); } }
.maps-course-entry{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.75rem;border:1px solid var(--mc-border-subtle);border-radius:16px}.maps-course-entry strong{flex:1 1 180px}.maps-course-entry small{opacity:.8}.maps-course-entry button{min-height:44px}

/* Document learning maps use the same semantic glass, not another blur layer. */
.maps-document-start,.maps-walkthrough {display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 1.2rem;border:1px solid var(--mc-border-subtle,#c4d9d3);border-radius:20px;background:var(--mc-glass-strong,#ffffffef);}
.maps-document-start {margin:1rem 0;}
.maps-walkthrough span {flex:1 1 12rem;color:var(--mc-text-primary,#153e39);}
.maps-walkthrough button,.maps-toolbar button {min-height:44px;}
.maps-world.is-depth .maps-node {cursor:pointer;box-shadow:0 12px 24px #071a2c20,inset 0 1px 0 #ffffff70;border-color:var(--mc-border-subtle,#b1d1e0);}
.maps-world.is-depth .maps-node[aria-pressed="true"] {outline-color:var(--mc-accent-primary,#426dcc);box-shadow:0 16px 32px #071a2c30,inset 0 1px 0 #ffffff80;}
.maps-reading h2 {font-size:1.2rem;line-height:1.35;margin:0 0 .75rem;overflow-wrap:anywhere;}
.maps-reading p,.maps-reading blockquote {line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;}
.maps-reading blockquote {margin:.75rem 0;padding-left:.8rem;border-left:2px solid var(--mc-accent-secondary,#166d68);}
.maps-reading small {display:block;color:var(--mc-text-secondary,#235b51);line-height:1.5;margin-top:.75rem;}
.maps-reading summary,.maps-edit-details summary,.maps-camera summary {cursor:pointer;min-height:44px;padding:.65rem 0;}
.maps-edit-details[open] {display:flex;flex-direction:column;gap:.8rem;}
.maps-edit-details[open]>* {margin-bottom:.6rem;}
.maps-camera label {display:flex;align-items:center;gap:.8rem;padding:.5rem;}
.maps-camera input {min-height:44px;max-width:140px;}
.maps-source-dialog {max-width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--mc-border-subtle,#c4d9d3);border-radius:24px;background:var(--mc-surface-primary,#fff);color:var(--mc-text-primary,#153e39);}
.maps-source-form {display:flex;flex-direction:column;gap:1rem;max-height:calc(100dvh - 28px);overflow:auto;padding:clamp(1rem,4vw,2rem);}
.maps-source-form h2 {margin:0;font-size:1.65rem;letter-spacing:-.03em;}
.maps-source-form p {line-height:1.55;}
.maps-source-form label {display:flex;flex-direction:column;gap:.45rem;}
.maps-source-form input:not([type="checkbox"]),.maps-source-form select {width:100%;min-height:48px;border-radius:12px;border:1px solid var(--mc-border-subtle,#c4d9d3);background:var(--mc-surface-primary,#fff);color:inherit;padding:.65rem;font:inherit;}
.maps-source-list {min-width:0;border:0;padding:0;}
.maps-source-list legend {font-weight:650;margin-bottom:.65rem;}
.maps-source-row {padding:.65rem .8rem;border:1px solid var(--mc-border-subtle,#c4d9d3);border-radius:14px;margin:.5rem 0;}
.maps-source-row label {flex-direction:row;align-items:center;min-height:44px;overflow-wrap:anywhere;}
.maps-source-row input {width:22px;height:22px;flex-shrink:0;}
.maps-source-row summary {min-height:44px;padding:.6rem 0;cursor:pointer;color:var(--mc-text-secondary,#235b51);}
.maps-source-row p {white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9rem;}
.maps-document-preview {border-top:1px solid var(--mc-border-subtle,#c4d9d3);padding-top:1rem;}
.maps-source-form small {line-height:1.5;color:var(--mc-text-secondary,#235b51);}
.maps-source-form button {min-height:48px;}
.maps-source-form [hidden] {display:none!important;}
.maps-source-form button:focus-visible,.maps-source-form summary:focus-visible,.maps-node:focus-visible,.maps-reading summary:focus-visible {outline:3px solid var(--mc-accent-primary,#426dcc);outline-offset:3px;}
@media(max-width:600px){.maps-document-start button{width:100%;}.maps-walkthrough{gap:.5rem;padding:.75rem;}.maps-walkthrough span{order:-1;flex-basis:100%;}.maps-source-form{padding:1rem;}.maps-camera[open]{width:100%;}.maps-reading{scroll-margin-top:1rem;}}
.maps-creation-stage{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--mc-text-secondary,#526a70);margin:.25rem 0}.maps-focus-options summary{min-height:44px;display:flex;align-items:center;cursor:pointer}.maps-focus-options label{padding:.5rem 0}.maps-source-form .maps-document-preview{padding:1rem;border:1px solid var(--mc-border-subtle,#c4d9d3);border-radius:18px}.maps-source-form .maps-document-preview h3{margin-top:0}.maps-source-form .maps-document-preview h4{margin-bottom:.4rem}.maps-source-form .maps-document-preview p{margin-top:.4rem}