/* Shared functionality and responsive layout: classic + modern. */
.archive-type-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.archive-type-tab { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); background: #0c151b; text-decoration: none; transition: border-color var(--motion-fast), background var(--motion-fast); }
.archive-type-tab > span { font-size: 26px; color: var(--accent); }
.archive-type-tab small { margin-left: auto; color: var(--muted); }
.archive-type-tab:hover, .archive-type-tab.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, #0c151b); }
.map-dialog { position: fixed; inset: 16px; z-index: 120; display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: #091118; color: #e6eff1; border: 1px solid #34494f; border-radius: 16px; box-shadow: 0 0 0 100vmax #020608d9, 0 24px 80px #000b; overflow: hidden; animation: modal-enter var(--motion-normal) var(--motion-ease) both; }
.map-dialog:fullscreen { inset: 0; border-radius: 0; }
.map-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid #25353d; }
.map-header h2 { margin: 2px 0 0; font-size: 20px; overflow-wrap: anywhere; }
.map-header small { font-size: 10px; letter-spacing: .13em; color: var(--accent); }
.map-header-actions, .map-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.map-header-actions { flex-shrink: 0; }
.map-toolbar { padding: 9px 14px; border-bottom: 1px solid #25353d; }
.map-toolbar button { font-size: 12px; padding: 7px 10px; min-height: 34px; }
.map-toolbar output { min-width: 48px; font-size: 12px; color: #a5bcc5; text-align: center; }
.map-snap-option { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; padding: 6px; cursor: pointer; }
.map-snap-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.map-tool[aria-pressed="true"] { background: var(--accent); color: #061016; border-color: var(--accent); }
.map-workspace { min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 290px; }
.map-stage { min-height: 0; min-width: 0; position: relative; overflow: hidden; background-color: #050b0f; background-image: linear-gradient(#1b2b343b 1px, transparent 1px), linear-gradient(90deg, #1b2b343b 1px, transparent 1px); background-size: 28px 28px; }
.map-canvas-host { position: absolute; inset: 0; }
.map-canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.map-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.map-canvas[data-tool="pan"] { cursor: grab; }
.map-canvas:not([data-tool="select"]):not([data-tool="pan"]) { cursor: crosshair; }
.map-element { cursor: pointer; }
.map-element:focus { outline: none; }
.map-element.selected, .map-element:focus-visible { filter: drop-shadow(0 0 3px #fff); }
.map-element.no-glow { filter: none; }
.map-label { paint-order: stroke; stroke: #061016; stroke-width: 3px; stroke-linejoin: round; }
.map-label[data-selected="true"][data-glow="true"] { filter: drop-shadow(0 0 3px #fff); }
.map-label { cursor: pointer; }
.map-canvas[data-editable="true"][data-tool="select"] [data-map-label] { cursor: move; }
[data-map-resize="nw"], [data-map-resize="se"] { cursor: nwse-resize; }
[data-map-resize="ne"], [data-map-resize="sw"] { cursor: nesw-resize; }
[data-map-vertex] { cursor: move; }
.map-sidebar { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-width: 0; padding: 12px; border-left: 1px solid #25353d; background: #101b22; }
.map-sidebar > * { flex-shrink: 0; }
.map-sidebar details { padding-bottom: 12px; border-bottom: 1px solid #2a3c43; margin-bottom: 12px; }
.map-sidebar summary { cursor: pointer; font-weight: 700; margin-bottom: 10px; }
.map-sidebar input:not([type="checkbox"]), .map-sidebar textarea, .map-sidebar select { width: 100%; min-width: 0; padding: 8px; color: #e6eff1; border: 1px solid #34474f; border-radius: 6px; background: #091219; font: inherit; font-size: 13px; }
.map-sidebar input[type="color"] { height: 36px; padding: 3px; }
.map-sidebar input[type="checkbox"] { accent-color: var(--accent); flex: 0 0 auto; }
.map-sidebar textarea { resize: vertical; }
.map-sidebar button { font-size: 12px; }
.map-inspector { display: grid; gap: 10px; order: -1; }
.map-inspector label { display: grid; gap: 5px; font-size: 12px; color: #b1c7cf; }
.map-inspector h3 { font-size: 17px; margin: 0 0 5px; overflow-wrap: anywhere; }
.map-inspector label.map-check { display: flex; align-items: center; gap: 7px; }
.map-property-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.map-property-pair button { padding: 8px; }
.map-help, .map-description { font-size: 13px; line-height: 1.6; color: #b1c7cf; overflow-wrap: anywhere; margin: 0; }
.map-description { white-space: pre-wrap; color: #e6eff1; }
.map-layer { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; padding: 5px; margin: 3px 0; border: 1px solid transparent; border-radius: 6px; }
.map-layer.active { border-color: #49616b; background: #1d303b; }
.map-layer label { display: flex; align-items: center; gap: 5px; flex: 1 1 100%; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.map-layer button { padding: 3px 7px; background: #101b22; color: #bdcfd5; border-radius: 4px; min-width: 27px; }
[data-map-list] { max-height: 180px; overflow-y: auto; margin-top: 7px; }
.map-object { display: block; width: 100%; text-align: left; background: transparent; color: #c9dbe1; padding: 7px; border-radius: 4px; overflow-wrap: anywhere; }
.map-object:hover, .map-object.active { background: #27404a; }
.map-status { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 12px; margin: 0; font-size: 12px; color: #d2e5ea; background: #071218de; pointer-events: none; }
.map-status:empty { display: none; }
.map-status.error { color: #ffab9d; }
.map-draw-hint { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 8px; background: #08121ee8; border: 1px solid #526271; border-radius: 9px; padding: 7px; font-size: 13px; }
.map-draw-hint[hidden], #editor-modal[hidden], [data-new-category][hidden], [data-ocr-label][hidden], [data-map-help][hidden] { display: none !important; }
.map-legend-list { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.map-legend-list li { display: flex; gap: 8px; align-items: center; }
.map-legend-list li > span { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.map-dialog button:focus-visible, .archive-type-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) {
  .archive-type-tabs { gap: 7px; }
  .archive-type-tab { gap: 6px; padding: 12px 9px; }
  .archive-type-tab > span { font-size: 19px; }
  .map-dialog { inset: 0; border-radius: 0; height: 100dvh; }
  .map-header { padding: 8px; gap: 8px; }
  .map-header h2 { font-size: 15px; }
  .map-header small { font-size: 8px; }
  .map-header-actions { gap: 4px; max-width: 56%; }
  .map-header-actions button { font-size: 11px; padding: 8px; }
  .map-toolbar { flex-wrap: nowrap; overflow-x: auto; padding: 6px; }
  .map-toolbar > * { flex: 0 0 auto; white-space: nowrap; }
  .map-workspace { grid-template-columns: 1fr; grid-template-rows: minmax(180px, 1fr) minmax(130px, 33%); }
  .map-sidebar { border-left: 0; border-top: 1px solid #34494f; padding: 10px; }
  .map-sidebar details { margin-bottom: 7px; padding-bottom: 7px; }
  .map-draw-hint { top: 6px; left: 6px; gap: 5px; font-size: 11px; }
  .map-draw-hint button { padding: 7px; font-size: 11px; }
}