@font-face {
  font-family: "ZukaiMap IPA Gothic";
  src: url("/assets/ipag.ttf") format("truetype");
  font-display: block;
}

:root {
  font-family: "ZukaiMap IPA Gothic", sans-serif;
  color: #292720;
  background: #ded6c5;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; }
button, input, select, textarea { font: inherit; }

.viewer-shell {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  width: 100%;
  height: 100%;
}

.panel {
  z-index: 2;
  overflow-y: auto;
  padding: 22px;
  background: #f7f3ea;
  border-right: 1px solid #c8bea9;
  box-shadow: 3px 0 18px rgb(50 42 28 / 12%);
}

.panel section { padding: 17px 0; border-top: 1px solid #d9d0bf; }
.eyebrow { margin: 0 0 6px; color: #766c5a; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
h1 { margin: 0; font-size: 1.55rem; line-height: 1.25; }
h2 { margin: 0 0 10px; font-size: 0.92rem; }
.summary, .hint, .warning p, footer { color: #5f5749; font-size: 0.78rem; line-height: 1.55; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
button { padding: 8px 12px; color: #fff; background: #264d76; border: 0; border-radius: 5px; cursor: pointer; }
button:hover, button:focus-visible { background: #173956; outline: 2px solid #86a9c8; outline-offset: 2px; }
button:disabled { cursor: default; opacity: .62; }
button.secondary { color: #264d76; background: #e2eaf0; }
button.secondary:hover, button.secondary:focus-visible { background: #d0dde7; }
.field-label { display: block; margin-bottom: 5px; color: #5f5749; font-size: 0.76rem; font-weight: 700; }
.text-input, #aoi-id, select { width: 100%; padding: 7px 8px; color: #292720; background: #fff; border: 1px solid #b9ae99; border-radius: 4px; font-size: 0.78rem; }
#aoi-id, #selection-id, .mono-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.text-input:focus-visible, #aoi-id:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #86a9c8; outline-offset: 1px; }
textarea, input[type="number"] { width: 100%; padding: 7px 8px; color: #292720; background: #fff; border: 1px solid #b9ae99; border-radius: 4px; font-size: 0.78rem; resize: vertical; }
.aoi-actions { margin-top: 8px; }
output { display: block; margin-top: 9px; color: #655c4d; font: 0.72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.candidate-filters { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 7px; margin-top: 8px; }
.candidate-list { max-height: 290px; margin-top: 8px; overflow-y: auto; border: 1px solid #d0c6b3; border-radius: 5px; background: #fff; }
.candidate-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 7px 8px; border-bottom: 1px solid #ece5d8; cursor: pointer; }
.candidate-item:last-child { border-bottom: 0; }
.candidate-item:hover { background: #f4f7f9; }
.candidate-item input { margin-top: 2px; }
.candidate-name, .candidate-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.candidate-name { font-size: 0.8rem; }
.candidate-meta { margin-top: 2px; color: #766c5a; font: 0.66rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.place-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.place-search-results { max-height: 220px; margin-top: 8px; overflow-y: auto; border-radius: 5px; }
.place-search-item { display: block; width: 100%; padding: 8px; color: #292720; text-align: left; background: #fff; border-bottom: 1px solid #ece5d8; border-radius: 0; }
.place-search-item:first-child { border-radius: 5px 5px 0 0; }
.place-search-item:last-child { border-bottom: 0; border-radius: 0 0 5px 5px; }
.place-search-item:only-child { border-radius: 5px; }
.place-search-item:hover, .place-search-item:focus-visible { color: #173956; background: #e2eaf0; }
.selection-actions { margin-top: 9px; }
.patch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 9px; }
.patch-grid label { color: #5f5749; font-size: 0.76rem; font-weight: 700; }
.patch-grid select, .patch-grid input { margin-top: 5px; }
#patch-value-fields > .field-label, #patch-controls > .field-label { margin-top: 9px; }
.full-button { width: 100%; margin-top: 7px; }
.patch-actions { margin-top: 10px; }
.annotation-preview-host { width: 0; height: 0; overflow: visible; pointer-events: none; }
.annotation-preview { position: absolute; display: flex; align-items: center; gap: 5px; white-space: pre; color: #172c42; font-size: 13px; font-weight: 700; filter: drop-shadow(0 1px 1px rgb(255 255 255 / 90%)); }
.annotation-preview::before { flex: 0 0 auto; width: 9px; height: 9px; content: ""; background: #d53d2c; border: 2px solid #fffaf0; border-radius: 50%; }
.annotation-preview[data-kind="markers"] span { display: none; }
.annotation-preview[data-kind="callouts"] { padding: 5px 7px; color: #fff; background: #264d76; border-radius: 4px; }
.annotation-preview[data-kind="callouts"]::after { position: absolute; right: 100%; width: 24px; border-top: 2px solid #264d76; content: ""; }
.annotation-preview[data-placement="N"] { transform: translate(-50%, -42px); }
.annotation-preview[data-placement="NE"] { transform: translate(18px, -34px); }
.annotation-preview[data-placement="E"], .annotation-preview[data-placement="auto"] { transform: translate(18px, -50%); }
.annotation-preview[data-placement="SE"] { transform: translate(18px, 20px); }
.annotation-preview[data-placement="S"] { transform: translate(-50%, 25px); }
.annotation-preview[data-placement="SW"] { transform: translate(calc(-100% - 18px), 20px); }
.annotation-preview[data-placement="W"] { transform: translate(calc(-100% - 18px), -50%); }
.annotation-preview[data-placement="NW"] { transform: translate(calc(-100% - 18px), -34px); }
.selection-popup { min-width: 260px; }
.selection-popup h3 { margin: 0 0 7px; font-size: 0.82rem; }
.selection-popup label { display: grid; grid-template-columns: auto 1fr; gap: 7px; padding: 4px 0; font-size: 0.75rem; }
.layer-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 0.84rem; }
.layer-controls label { display: flex; gap: 7px; align-items: center; }
.warning { margin: 3px -9px 0; padding: 14px 9px !important; background: #fff1d4; border: 1px solid #ddbd7e !important; border-radius: 6px; }
.warning ul { margin: 0; padding-left: 1.25rem; font-size: 0.82rem; }
.warning p { margin-bottom: 0; }
footer { padding-top: 12px; }
footer p { margin: 4px 0; }
#viewer-status[data-kind="ready"] { color: #2c674a; }
#viewer-status[data-kind="error"] { color: #a02f28; font-weight: 700; }
.map-region, #map { min-width: 0; width: 100%; height: 100%; }
.capture-mode .viewer-shell { display: block; }
.capture-mode .panel { display: none; }
.capture-mode .map-region { width: 100vw; height: 100vh; }
.feature-popup { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 0.76rem; }
.feature-popup dt { color: #6c6252; font-weight: 700; }
.feature-popup dd { margin: 0; overflow-wrap: anywhere; }
.maplibregl-ctrl-attrib { font-size: 10px; }

@media (max-width: 720px) {
  body { overflow: auto; }
  .viewer-shell { grid-template-columns: 1fr; grid-template-rows: auto 70vh; height: auto; min-height: 100%; }
  .panel { border-right: 0; border-bottom: 1px solid #c8bea9; }
}