@import url('./brand-tokens.css');

.maqam-map-page {
  --map-family-color: var(--family-bayati);
  --map-node-color: var(--art-lapis-light);
  --family-key-color: var(--family-bayati);
}

.map-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr);
  align-items: end;
}

.map-hero .page-heading-copy { min-width: 0; }

.map-reading-note {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-lapis);
}

.map-reading-note strong { color: var(--cream); }
.map-reading-note p { margin: 0; color: var(--gray-light); font-size: .86rem; }

.map-controls {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(220px, 1fr) auto auto;
  gap: 12px;
  align-items: end;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.map-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.map-field span,
.map-control-label {
  color: var(--gray-light);
  font-size: .76rem;
  font-weight: 800;
}

.map-field select,
.map-device-select {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--cream);
  background: var(--paper-deep);
}

.map-direction-control { display: grid; gap: 6px; }

.map-segmented {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-deep);
}

.map-segmented button {
  min-width: 82px;
  padding-inline: 13px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: var(--gray-light);
  background: transparent;
  font-weight: 800;
}

.map-segmented button[aria-pressed='true'] { color: var(--cream); background: var(--art-lapis); }

.map-family-key {
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0 2px 8px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.map-family-key button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 39px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  cursor: pointer;
  color: var(--gray-light);
  background: rgba(var(--cream-rgb), .035);
  white-space: nowrap;
}

.map-family-key button::before {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border: 2px solid var(--family-key-color, var(--art-lapis-light));
  border-radius: 50%;
  content: '';
}

.map-family-key button[aria-pressed='true'] { border-color: var(--family-key-color, var(--art-lapis-light)); color: var(--cream); background: var(--surface-hover); }
.map-family-key button[aria-pressed='true']::before { background: var(--family-key-color, var(--art-lapis-light)); }

.map-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}

.map-stage-card,
.map-live-card,
.map-reference-card,
.map-relations-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.map-stage-card { min-width: 0; overflow: hidden; }

.map-stage-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 8px;
}

.map-stage-head h2 { margin-bottom: 4px; }
.map-stage-head p { margin: 0; color: var(--gray-light); font-size: .86rem; }

.map-shape-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid var(--map-family-color);
  border-radius: 99px;
  color: var(--cream);
  background: var(--surface-hover);
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}

.map-svg-scroll {
  max-width: 100%;
  padding: 0 10px;
  overflow-x: auto;
  scrollbar-color: var(--art-lapis) transparent;
}

.maqam-map-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

.map-connection-line {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.6;
  stroke-dasharray: 7 7;
  vector-effect: non-scaling-stroke;
  transition: stroke .22s ease, stroke-width .22s ease;
}

.map-connection-line.is-suggested { stroke: var(--byan-gold-light); stroke-width: 4; stroke-dasharray: 3 5; }
.map-connection-line[data-relation-types~='comparison'] { stroke-dasharray: 3 5; }
.map-connection-line[data-relation-types~='shared_jins'] { stroke-dasharray: 11 5 2 5; }

.map-scale-path,
.map-shape-closure {
  fill: none;
  stroke: var(--map-family-color);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.map-shape-closure { stroke-width: 2; stroke-dasharray: 8 7; stroke-opacity: .62; }

.map-interval-label {
  fill: var(--gray-light);
  stroke: var(--paper-deep);
  stroke-width: 8;
  paint-order: stroke;
  font-family: var(--font-mono);
  font-size: 13px;
  text-anchor: middle;
}

.map-degree-node { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .18s ease; }
.map-degree-node:hover { transform: scale(1.07); }
.map-degree-node:focus { outline: none; }
.map-degree-node:focus .map-degree-halo { stroke: var(--focus); stroke-width: 5; }
.map-degree-halo { fill: var(--paper-deep); stroke: var(--map-family-color); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.map-degree-dot { fill: var(--surface-lapis); stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map-degree-number { fill: var(--byan-gold-light); font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-anchor: middle; }
.map-degree-name { fill: var(--cream); font-family: var(--font-ui); font-size: 14px; font-weight: 800; text-anchor: middle; }

.map-register-mark circle { fill: var(--paper-deep); stroke: var(--cream); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.map-register-mark text { fill: var(--cream); font-family: var(--font-ui); font-size: 8px; font-weight: 900; text-anchor: middle; }
.map-register-mark.is-reference circle { stroke: var(--gray-light); stroke-dasharray: 2 2; }
.map-register-mark.is-reference text { fill: var(--gray-light); }
.map-register-mark.is-heard circle { fill: var(--byan-gold); stroke: var(--cream); stroke-width: 3; }
.map-register-mark.is-octave-equivalent circle { fill: var(--warning-surface); stroke: var(--byan-gold-light); stroke-dasharray: 3 2; }

.map-degree-node.is-heard .map-degree-halo { fill: var(--map-family-color); stroke: var(--cream); stroke-width: 4; }
.map-degree-node.is-heard .map-degree-dot { fill: var(--byan-dark); stroke: var(--cream); }
.map-degree-node.is-near .map-degree-halo { fill: var(--warning-surface); stroke: var(--byan-gold-light); stroke-dasharray: 4 3; }

.map-center-label text { fill: var(--cream); font-family: var(--font-ui); font-size: 26px; font-weight: 800; text-anchor: middle; }
.map-center-label .map-center-shape { fill: var(--gray-light); font-size: 14px; font-weight: 700; }
.map-center-label .map-center-direction { fill: var(--byan-gold-light); font-size: 12px; }

.map-orbit-node { cursor: pointer; text-decoration: none; }
.map-orbit-node:focus { outline: none; }
.map-orbit-halo { fill: none; stroke: transparent; stroke-width: 3; vector-effect: non-scaling-stroke; }
.map-orbit-dot { fill: var(--paper-deep); stroke: var(--map-node-color); stroke-width: 3; vector-effect: non-scaling-stroke; transition: fill .2s ease, stroke-width .2s ease; }
.map-orbit-name { fill: var(--cream); font-family: var(--font-ui); font-size: 13px; font-weight: 800; text-anchor: middle; }
.map-orbit-kind { fill: var(--gray-light); font-family: var(--font-ui); font-size: 8px; font-weight: 700; text-anchor: middle; }
.map-orbit-node:hover .map-orbit-dot { fill: var(--surface-raised); stroke-width: 5; }
.map-orbit-node:focus .map-orbit-halo { stroke: var(--focus); stroke-width: 5; }
.map-orbit-node.is-suggested .map-orbit-halo { stroke: var(--byan-gold-light); stroke-width: 6; stroke-dasharray: 4 4; }
.map-orbit-node.is-suggested .map-orbit-dot { fill: var(--surface-raised); stroke-width: 6; }

.map-passing-node { cursor: pointer; }
.map-passing-node .map-passing-hit { fill: transparent; stroke: transparent; }
.map-passing-node rect:not(.map-passing-hit) { fill: var(--paper-deep); stroke: var(--byan-gold-light); stroke-width: 2; vector-effect: non-scaling-stroke; }
.map-passing-node text { fill: var(--cream); font-family: var(--font-ui); font-size: 9px; font-weight: 800; text-anchor: middle; }
.map-passing-node:hover rect:not(.map-passing-hit),
.map-passing-node:focus rect:not(.map-passing-hit),
.map-passing-node.is-heard rect:not(.map-passing-hit) { fill: var(--byan-gold); stroke: var(--cream); stroke-width: 4; }
.map-passing-node:focus { outline: none; }

.map-visual-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 6px 22px 18px;
  color: var(--gray-light);
  font-size: .72rem;
}

.map-visual-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-line { display: inline-block; width: 23px; border-top: 3px solid var(--map-family-color); }
.legend-line-dashed { border-top-style: dashed; border-top-width: 2px; }
.legend-passing { width: 12px; height: 12px; border: 2px solid var(--byan-gold-light); border-radius: 3px; transform: rotate(45deg); }
.legend-register { display: grid; width: 20px; height: 20px; place-items: center; border: 2px solid var(--cream); border-radius: 50%; color: var(--cream); font-style: normal; font-weight: 900; }
.legend-register-reference { border-color: var(--gray-light); border-style: dashed; color: var(--gray-light); }

.map-close-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr) auto;
  gap: 16px;
  align-items: center;
  margin: 2px 20px 20px;
  padding: 16px;
  border: 1px solid var(--byan-gold-light);
  border-radius: 15px;
  background: var(--warning-surface);
}

.map-close-pair h3 { margin: 2px 0 5px; color: var(--cream); }
.map-close-pair p { margin: 0; color: var(--warning-text); font-size: .78rem; }
.map-close-pair .eyebrow { color: var(--byan-gold-light); }
.map-close-pair ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.map-close-pair li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--cream); background: var(--paper-deep); font-size: .73rem; }
.map-close-pair li bdi { color: var(--byan-gold-light); font-weight: 900; }
.map-close-pair li.is-alternative { border-style: dashed; color: var(--gray-light); }
.map-close-pair .button { min-width: 190px; }

.map-layer-reference,
.map-route-reference { border-top: 1px solid var(--line); }

.map-layer-reference > header,
.map-route-reference > header { padding: 18px 20px 8px; }
.map-layer-reference > header h3,
.map-route-reference > header h3 { margin: 2px 0 4px; color: var(--cream); }
.map-layer-reference > header p:not(.eyebrow),
.map-route-reference > header p:not(.eyebrow) { margin: 0; color: var(--gray-light); font-size: .76rem; }

.map-layer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 10px 20px 22px;
  list-style: none;
}

.map-layer-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(var(--cream-rgb), .025);
}

.map-layer-card > header { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; }
.map-layer-card > header strong { display: block; color: var(--cream); }
.map-layer-card > header small { display: block; color: var(--gray-light); font-size: .65rem; }
.map-layer-card.is-heard,
.map-layer-card[aria-current='true'] { border-color: var(--map-family-color); box-shadow: inset 0 0 0 2px var(--map-family-color); }
.map-layer-card.is-near { border-style: dashed; border-color: var(--byan-gold-light); }
.map-layer-card.is-octave-equivalent { border-style: dashed; border-color: var(--byan-gold-light); }

.map-accidental-badge { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--byan-gold-light); background: var(--paper-deep); font-family: var(--font-mono); font-weight: 900; }
.map-register-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }

.map-register-button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  color: var(--cream);
  background: var(--paper-deep);
  text-align: right;
}

.map-register-button.is-reference { border-style: dashed; }
.map-register-button:hover,
.map-register-button:focus { border-color: var(--map-family-color); background: var(--surface-hover); }
.map-register-button.is-heard,
.map-register-button[aria-current='true'] { border-color: var(--map-family-color); box-shadow: inset 0 0 0 2px var(--map-family-color); }
.map-register-button.is-octave-equivalent { border-style: dashed; border-color: var(--byan-gold-light); }
.map-register-name { color: var(--byan-gold-light); font-weight: 900; }
.map-register-frequency { overflow: hidden; color: var(--cream); font-family: var(--font-mono); font-size: .73rem; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.map-register-button small,
.map-register-button em { grid-column: 1 / -1; overflow: hidden; color: var(--gray-light); font-size: .61rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.map-register-button em { color: var(--warning-text); }

.map-degree-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 16px 20px 22px;
  border-top: 1px solid var(--line);
  list-style: none;
}

.map-degree-list li { display: grid; gap: 4px; min-width: 0; }

.map-degree-card {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  color: var(--cream);
  background: rgba(var(--cream-rgb), .035);
  text-align: right;
}

.map-degree-card:hover { border-color: var(--map-family-color); background: var(--surface-hover); }
.map-degree-card[aria-current='true'] { border-color: var(--map-family-color); box-shadow: inset 0 0 0 2px var(--map-family-color); }
.map-degree-card.is-heard { border-color: var(--map-family-color); box-shadow: inset 0 0 0 2px var(--map-family-color); }
.map-degree-card.is-near { border-style: dashed; border-color: var(--byan-gold-light); }
.map-degree-card-index { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: var(--byan-gold-light); background: var(--paper-deep); font-family: var(--font-mono); font-size: .72rem; }
.map-degree-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-degree-card small { display: block; color: var(--gray-light); font-size: .66rem; }
.map-degree-interval { color: var(--gray-light); font-family: var(--font-mono); font-size: .66rem; white-space: nowrap; }
.map-passing-note { min-height: 34px; padding: 5px 7px; border: 1px dashed var(--byan-gold-light); border-radius: 9px; cursor: pointer; color: var(--warning-text); background: transparent; font-family: inherit; font-size: .68rem; text-align: right; }
.map-passing-note:hover,
.map-passing-note:focus,
.map-passing-note[aria-current='true'] { color: var(--cream); background: var(--warning-surface); }

.map-live-card {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
  padding: 20px;
  overflow: hidden;
}

.map-live-card::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 5px;
  content: '';
  background: var(--map-family-color);
}

.map-live-card h2 { margin-bottom: 4px; }
.map-live-card > header p { margin: 0; color: var(--gray-light); font-size: .83rem; }

.map-mic-actions { display: grid; gap: 9px; }
.map-mic-actions .button { width: 100%; }
.map-mic-button.is-live { color: var(--cream); background: var(--success-solid); }
.map-device-select { display: none; }
.map-device-select.is-visible { display: block; }

.map-live-readout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--paper-deep);
}

.map-live-readout strong { display: block; color: var(--cream); font-size: 1.45rem; }
.map-live-readout span { color: var(--gray-light); font-family: var(--font-mono); font-size: .75rem; }
.map-live-indicator { display: grid; width: 44px; height: 44px; place-items: center; border: 2px solid var(--line-strong); border-radius: 50%; color: var(--gray-light); font-weight: 800; }
.map-live-indicator[data-state='correct'] { border-color: var(--success-text); color: var(--success-text); }
.map-live-indicator[data-state='near'] { border-style: dashed; border-color: var(--warning-text); color: var(--warning-text); }
.map-live-indicator[data-state='connection'] { border-color: var(--byan-gold-light); color: var(--byan-gold-light); }
.map-live-indicator[data-state='passing'] { border-style: dashed; border-color: var(--byan-gold-light); color: var(--byan-gold-light); }
.map-live-indicator[data-state='octave-equivalent'] { border-style: dashed; border-color: var(--byan-gold-light); color: var(--byan-gold-light); }
.map-live-indicator[data-state='outside'] { border-color: var(--danger-text); color: var(--danger-text); }

.map-status {
  min-height: 48px;
  margin: 0;
  color: var(--gray-light);
  font-size: .82rem;
}

.map-status[data-tone='success'] { color: var(--success-text); }
.map-status[data-tone='warning'] { color: var(--warning-text); }
.map-status[data-tone='danger'] { color: var(--danger-text); }

.map-privacy-note { margin: 0; padding: 12px; border-radius: 12px; color: var(--success-text); background: var(--success-surface); font-size: .73rem; }
.map-wake-status { margin: 0; color: var(--gray-light); font-size: .72rem; }

.map-reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.map-reference-card { padding: clamp(20px, 3vw, 28px); }
.map-reference-card > p:last-child { margin-bottom: 0; }
.map-reference-card .meta-grid { grid-template-columns: repeat(3, 1fr); }

.map-expression-summary {
  padding: 15px;
  border-right: 4px solid var(--map-family-color);
  border-radius: 12px;
  background: var(--paper-deep);
}

.map-expression-summary strong { display: block; margin-bottom: 4px; color: var(--cream); }
.map-expression-summary p { margin: 0; color: var(--gray-light); }

.map-expression-list { display: grid; gap: 9px; margin: 18px 0; padding: 0; list-style: none; }
.map-expression-cue { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--cream-rgb), .025); }
.map-cue-marker { width: 10px; height: 10px; margin-top: 6px; border: 2px solid var(--map-family-color); border-radius: 50%; }
.map-expression-cue strong { display: block; color: var(--cream); }
.map-expression-cue small { display: block; margin-top: 3px; color: var(--gray-light); font-size: .72rem; }
.map-disclaimer { padding-top: 12px; border-top: 1px solid var(--line); color: var(--gray-light); font-size: .73rem; }

.map-relations-section { margin-top: 20px; padding: clamp(20px, 3vw, 28px); }
.map-relations-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.map-relations-head p { max-width: 680px; margin: 0; color: var(--gray-light); }
.map-relation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }

.map-relation-card {
  position: relative;
  display: flex;
  min-height: 225px;
  flex-direction: column;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--cream);
  background: var(--paper-deep);
  text-decoration: none;
}

.map-relation-card::before { position: absolute; top: 0; right: 0; bottom: 0; width: 4px; content: ''; background: var(--map-node-color); }
.map-relation-card:hover { border-color: var(--map-node-color); color: var(--cream); background: var(--surface-raised); }
.map-relation-card .micro-label { color: var(--byan-gold-light); }
.map-relation-card[data-relation-types~='comparison']::before { width: 7px; background: repeating-linear-gradient(to bottom, var(--map-node-color) 0 9px, transparent 9px 14px); }
.map-relation-card[data-relation-types~='shared_jins']::before { width: 6px; opacity: .72; }
.map-relation-card h3 { margin: 5px 0 7px; }
.map-relation-card p { margin-bottom: 11px; color: var(--gray-light); font-size: .82rem; }
.map-relation-method { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); color: var(--cream); font-size: .78rem; }
.map-pivot-label { display: inline-flex; width: fit-content; margin-top: 7px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 99px; color: var(--gray-light); font-size: .68rem; }

.map-reference-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.map-offline-help { display: none; }
.map-offline-help.is-visible { display: block; }

@media (max-width: 1050px) {
  .map-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-relation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-close-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-close-pair .button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 900px) {
  .map-hero,
  .map-workspace { grid-template-columns: 1fr; }
  .map-live-card { position: static; grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr); }
  .map-live-card::before { right: 0; bottom: auto; left: 0; width: auto; height: 5px; }
  .map-live-card > header,
  .map-live-card .map-privacy-note { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .map-controls,
  .map-reference-grid,
  .map-live-card,
  .map-relation-grid { grid-template-columns: 1fr; }
  .map-stage-head,
  .map-relations-head { align-items: start; flex-direction: column; }
  .map-stage-head { padding-inline: 16px; }
  .map-svg-scroll { direction: ltr; padding-inline: 0; }
  .maqam-map-svg { width: 680px; max-width: none; }
  .map-visual-legend { padding-inline: 16px; }
  .map-close-pair { grid-template-columns: 1fr; margin-inline: 14px; }
  .map-close-pair .button { grid-column: auto; }
  .map-layer-list { grid-template-columns: 1fr; padding-inline: 14px; }
  .map-layer-reference > header,
  .map-route-reference > header { padding-inline: 14px; }
  .map-degree-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 14px; }
  .map-reference-card .meta-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
  .map-register-actions { grid-template-columns: 1fr; }
  .map-degree-list { grid-template-columns: 1fr; }
  .map-reference-card .meta-grid { grid-template-columns: 1fr; }
  .map-reference-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .map-connection-line,
  .map-degree-node,
  .map-orbit-dot { transition-duration: .01ms !important; }
}

@media print {
  .map-controls,
  .map-family-key,
  .map-live-card,
  .map-reference-actions { display: none !important; }
  .map-workspace,
  .map-reference-grid { grid-template-columns: 1fr; }
  .map-stage-card,
  .map-reference-card,
  .map-relations-section { break-inside: avoid; box-shadow: none; }
}