/* Stations & equipment, the map editor (D-MAP, approved 20 Oct 2026; design/brand/proposed/map/). Tokens only.
   Pakcu sits beside an area's heading and in the station header, never in a form, list row or dialog. */
.dmap { display: grid; gap: var(--g-space-24); min-width: 0; }
.dmap > * { min-width: 0; }
.dmap-title { font-size: var(--g-font-size-display); line-height: var(--g-line-height-heading); overflow-wrap: anywhere; }
.dmap h2, .dmap h3, .dmap p { margin: 0; }
.dmap-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-16); }
.dmap-back { display: inline-flex; align-items: center; min-height: var(--g-size-touch); padding: 0 var(--g-space-16); background: var(--g-color-white); border-radius: var(--g-radius-button); color: var(--g-color-navy); font-weight: 600; text-decoration: underline; text-underline-offset: var(--g-space-4); }
.breadcrumbs { font-size: var(--g-font-size-small); color: var(--g-color-muted); overflow-wrap: anywhere; }
.dmap-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-24); padding: var(--g-space-24); border-radius: var(--g-radius-hero); background: var(--g-color-mint); box-shadow: var(--g-shadow-card); }
.dmap-hero > div:first-child { min-width: 0; }
.dmap-hero p { margin-top: var(--g-space-8); overflow-wrap: anywhere; }
.dmap-hero .dmap-actions { margin-top: var(--g-space-16); }
.dmap-hero__art { width: calc(var(--g-space-48) * 2); height: auto; object-fit: contain; flex-shrink: 0; }
.dmap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-12); }
.dmap-actions form { margin: 0; }
.dmap-stats { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-24); }
.dmap-tables { display: flex; align-items: center; gap: var(--g-space-12); }
.dmap-tables p + p { font-size: var(--g-font-size-small); }
.dmap-icon { width: var(--g-size-primary); height: var(--g-size-primary); object-fit: contain; border-radius: var(--g-radius-input); flex-shrink: 0; }
.dmap-count { background: var(--g-color-white); border-radius: var(--g-radius-round); padding: var(--g-space-4) var(--g-space-12); font-size: var(--g-font-size-caption); }
.dmap-area { display: grid; gap: var(--g-space-16); }
.dmap-area__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-16); }
.dmap-area__title { display: flex; align-items: flex-end; gap: var(--g-space-16); min-width: 0; }
.dmap-area__title > div { min-width: 0; }
.dmap-area__title h2 { font-size: var(--g-font-size-heading); overflow-wrap: anywhere; }
.dmap-area__art { width: calc(var(--g-space-48) * 2); height: auto; object-fit: contain; flex-shrink: 0; }
.dmap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--g-space-8); }
.dmap-station { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--g-space-24); padding: var(--g-space-12) var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-ivory); }
.dmap-station > div { min-width: 0; }
.dmap-station h3 { font-size: var(--g-font-size-heading-small); margin-bottom: var(--g-space-4); overflow-wrap: anywhere; }
.dmap-counts { text-align: right; }
.dmap-counts strong, .dmap-counts span { display: block; }
.dmap-counts span, .dmap-muted { font-size: var(--g-font-size-small); color: var(--g-color-muted); }
.dmap .chip { white-space: normal; overflow-wrap: anywhere; }
.dmap-card { display: grid; gap: var(--g-space-16); }
.dmap-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-16); }
.dmap-card__head h2 { font-size: var(--g-font-size-heading); }
.dmap-help { font-size: var(--g-font-size-small); }
.dmap-type { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-16); padding: var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-ivory); }
.dmap-type__copy { flex: 1 1 50%; min-width: 0; overflow-wrap: anywhere; }
.dmap-type__copy h3 { font-size: var(--g-font-size-heading-small); }
.dmap-type__qty { font-size: var(--g-font-size-heading); font-weight: 700; }
.dmap-type .dmap-actions { width: 100%; }
.dmap-pieces { list-style: none; margin: var(--g-space-8) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--g-space-8); }
.dmap-pieces li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-4); padding-left: var(--g-space-12); background: var(--g-color-white); border-radius: var(--g-radius-round); min-width: 0; max-width: 100%; }
.dmap-pieces span { overflow-wrap: anywhere; min-width: 0; }
.dmap-box { display: grid; gap: var(--g-space-12); padding: var(--g-space-24); border-radius: var(--g-radius-card); background: var(--g-color-ivory); }
.dmap-box h3 { font-size: var(--g-font-size-heading-small); }
.dmap-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g-space-16); }
.dmap-fields .field { margin: 0; }
.dmap-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--g-space-48) * 4)), 1fr)); gap: var(--g-space-12); }
.dmap-tick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-12); min-height: var(--g-size-touch); }
.dmap-tick label { display: flex; align-items: center; gap: var(--g-space-12); font-weight: 600; }
.dmap-tick input[type=number] { width: calc(var(--g-space-48) * 2); }
.dmap details > summary { list-style: none; cursor: pointer; }
.dmap details > summary::-webkit-details-marker { display: none; }
.dmap-notice { padding: var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-mint); border-inline-start: var(--g-space-4) solid var(--g-color-teal); }
.dmap-empty { display: flex; align-items: center; gap: var(--g-space-24); padding: var(--g-space-24); border-radius: var(--g-radius-hero); background: var(--g-color-mint); }
.dmap-empty > div { display: grid; gap: var(--g-space-16); min-width: 0; }
.dmap-empty h2 { font-size: var(--g-font-size-heading-small); }
.dmap-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: var(--g-space-16); }
.dmap-filters .field { margin: 0; }
.dmap-task { display: grid; gap: var(--g-space-8); }
.dmap-task__head, .dmap-task__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-12); }
.dmap-task h2 { font-size: var(--g-font-size-heading-small); overflow-wrap: anywhere; }
.dmap-task__foot { font-size: var(--g-font-size-small); margin-top: var(--g-space-8); }
.dmap dialog ul { margin: var(--g-space-8) 0 0; padding-left: var(--g-space-24); }
.dmap dialog h2 { overflow-wrap: anywhere; }
@media (max-width: 780px) {
  .dmap-hero, .dmap-empty { padding: var(--g-space-18); gap: var(--g-space-12); }
  .dmap-hero__art, .dmap-area__art { width: calc(var(--g-space-24) * 3); }
  .dmap-station { grid-template-columns: minmax(0, 1fr) auto; gap: var(--g-space-12); padding: var(--g-space-16); }
  .dmap-station .dmap-counts { grid-column: 1; text-align: left; }
  .dmap-station > .btn { grid-column: 2; grid-row: 1 / 3; }
  .dmap-fields, .dmap-filters { grid-template-columns: minmax(0, 1fr); }
  .dmap-box { padding: var(--g-space-16); }
}
@media (max-width: 390px) { .dmap-empty { flex-direction: column; align-items: flex-start; } .dmap-actions > .btn { flex: 1 1 auto; } }
@media (max-width: 320px) { .dmap-hero { flex-wrap: wrap; } .dmap-hero__art { display: none; } }
.dmap-form-end { margin-top: var(--g-space-24); }
.dmap [aria-disabled=true] { pointer-events: none; background: var(--g-color-line); color: var(--g-color-navy); box-shadow: none; }
