:root {
  --navy: #1c3358;
  --bar: #3a5796;
  --ink: #172033;
  --line: rgba(215, 222, 232, 0.95);
  --card: rgba(247, 248, 250, 0.94);
  --ok: #1f7a4d;
  --down: #8a3d32;
}

* { box-sizing: border-box; }

html, body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  color: var(--ink);
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #d5dde6;
}

#map { position: absolute; inset: 0; }

.top, .tools, .add-point, .notice { pointer-events: auto; }

.top {
  position: absolute;
  z-index: 2;
  top: calc(12px + env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.logo {
  display: block;
  height: 54px;
  width: auto;
  background: transparent;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.9));
  pointer-events: auto;
}

.workspace-head {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: min(250px, 62vw);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 8px 18px rgba(28, 51, 88, 0.12);
  pointer-events: auto;
}

.workspace-copy {
  min-width: 0;
  flex: 1;
}

#workspace-name {
  margin: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-copy hr {
  margin: 6px 0;
  border: 0;
  border-top: 1px solid #d7dee8;
}

#workspace-button {
  display: grid;
  width: 42px;
  flex: none;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--navy);
  color: #f7f8fa;
}

#workspace-button svg { width: 20px; height: 20px; }

.count {
  margin: 0;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
}

.reticle {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.reticle svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.85));
}

.tools {
  position: absolute;
  z-index: 2;
  top: calc(96px + env(safe-area-inset-top));
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool, .add-point, .list-bar button, .row-button, .workspace-form button {
  border: 0;
  background: var(--navy);
  color: #f7f8fa;
  font: inherit;
  font-weight: 700;
}

.tool {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(28, 51, 88, 0.18);
}

.tool svg, .add-point svg, .sheet-heading svg, .actions svg, .square svg {
  width: 22px;
  height: 22px;
}

.tool[aria-pressed="true"],
.row-button.is-active {
  border-color: var(--navy);
  background: var(--navy);
  color: #f7f8fa;
}

.dock-left {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zoom-pair {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(28, 51, 88, 0.18);
}

.zoom-pair .tool {
  border-radius: 0;
  box-shadow: none;
}

.zoom-pair .tool:first-child { border-radius: 12px 12px 0 0; }
.zoom-pair .tool:last-child { border-radius: 0 0 12px 12px; }

.zoom-pair .tool + .tool {
  border-top: 1px solid rgba(247, 248, 250, 0.22);
}

.mark {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

#help-button .mark {
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: 0;
}

#compass-button { touch-action: none; }

#compass-button .needle {
  width: 28px;
  height: 28px;
  transform-origin: 50% 50%;
}

#toggle-3d[aria-pressed="true"],
#help-button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px #fff, 0 8px 18px rgba(28, 51, 88, 0.18);
}

.corner {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.locate, .add-point {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--navy);
  color: #f7f8fa;
  box-shadow: 0 10px 24px rgba(28, 51, 88, 0.22);
}

.locate svg, .add-point svg { width: 34px; height: 34px; }

.locate {
  border: 0;
  border-radius: 18px;
  background: var(--navy);
  color: #f7f8fa;
  box-shadow: 0 10px 24px rgba(28, 51, 88, 0.22);
}

.notice {
  position: absolute;
  z-index: 3;
  top: calc(72px + env(safe-area-inset-top));
  left: 12px;
  max-width: min(220px, calc(100% - 80px));
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--navy);
  font-size: 0.85rem;
  box-shadow: 0 8px 18px rgba(28, 51, 88, 0.12);
}

.menu {
  position: absolute;
  z-index: 4;
  background: #f7f8fa;
  transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.24, 1), bottom 0.25s ease, visibility 0.38s;
  transform: translateY(105%);
  visibility: hidden;
  pointer-events: none;
}

.menu.is-open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.basemap-sheet, .sheet, .workspace-sheet {
  right: 0;
  bottom: var(--keyboard, 0px);
  left: 0;
  max-height: calc(100dvh - var(--keyboard, 0px) - 16px);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 32px rgba(28, 51, 88, 0.18);
}

.basemap-sheet {
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 0 0 calc(12px + env(safe-area-inset-bottom));
}
.basemap-sheet h2, .sheet h2, .list-bar h2 { margin: 0; color: var(--navy); }

.basemap-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 12px 16px 0;
}

.basemap-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 14px;
  background: #d5dde6;
}

.basemap-option[aria-pressed="true"] .thumb { border-color: var(--navy); }
.thumb .maplibregl-map { position: absolute; inset: 0; }

.sheet {
  z-index: 4;
  max-height: calc(100dvh - var(--keyboard, 0px) - 12px);
  overflow: auto;
  padding: 18px 16px 0;
}

.sheet-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
}

.coords, .area-line, .sheet label, .form-error { margin: 0; }

.area-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 700;
}

.area-line svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.coords {
  margin-top: 4px;
  color: #5c6778;
  font-size: 0.85rem;
}

.sheet label {
  display: block;
  margin-top: 14px;
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 700;
}

textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid #d7dee8;
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  resize: vertical;
}

.photo-squares {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.square {
  display: flex;
  width: 104px;
  height: 104px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #d7dee8;
  border-radius: 18px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(28, 51, 88, 0.08);
}

.photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

#preview, .point-popup img {
  display: block;
  width: 100%;
  max-height: 28dvh;
  margin-top: 12px;
  border-radius: 12px;
  object-fit: cover;
  background: #e8eef6;
}

#photo-clear {
  display: block;
  margin: 8px auto 0;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--down);
  font: inherit;
  font-weight: 700;
}

.form-error {
  margin-top: 10px;
  color: var(--down);
  font-size: 0.9rem;
}

.actions {
  position: static;
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0 0 calc(12px + env(safe-area-inset-bottom));
  background: transparent;
}

.actions button {
  display: inline-flex;
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
}

#cancel {
  border: 1px solid #d7dee8;
  background: #fff;
  color: var(--navy);
}

#save {
  border: 0;
  background: var(--navy);
  color: #f7f8fa;
}

.point-popup { width: min(260px, 72vw); }
.point-popup p { margin: 0; white-space: pre-wrap; line-height: 1.35; }
.point-popup .popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.point-popup .popup-actions button {
  flex: 1;
  min-height: 40px;
  border: 1px solid #d7dee8;
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
}
.point-popup .popup-actions .danger {
  border-color: #d92d20;
  background: #d92d20;
  color: #fff;
}

.maplibregl-popup-content {
  padding: 12px;
  border-radius: 16px;
  color: var(--ink);
  font-family: "Segoe UI", system-ui, sans-serif;
}

.maplibregl-ctrl-attrib, .maplibregl-ctrl-logo { display: none !important; }

.maplibregl-ctrl-group {
  border-radius: 14px;
  background: var(--navy);
  box-shadow: 0 10px 24px rgba(28, 51, 88, 0.22);
  overflow: hidden;
}

.maplibregl-ctrl-group button {
  width: 44px;
  height: 44px;
  background-color: var(--navy);
}

.maplibregl-ctrl-group button + button {
  border-top: 1px solid rgba(247, 248, 250, 0.22);
}

.maplibregl-ctrl-group button span {
  filter: brightness(0) invert(1);
}

.maplibregl-ctrl-group button:focus {
  box-shadow: none;
}

.point-list, .workspace-sheet.menu {
  z-index: 5;
}

.point-list {
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}

.workspace-sheet {
  max-height: calc(100dvh - var(--keyboard, 0px) - 12px);
  display: flex;
  flex-direction: column;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.workspace-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px 0;
}

.workspace-form input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #d7dee8;
  border-radius: 12px;
  font: inherit;
}

.workspace-form button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 12px;
}

.workspace-form button svg {
  width: 18px;
  height: 18px;
}

#workspace-items {
  max-height: calc(100dvh - var(--keyboard, 0px) - 150px);
  margin: 8px 0 0;
  padding: 0 12px 12px;
  overflow: auto;
  list-style: none;
}

.workspace-row-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #e4e9f0;
  border-radius: 14px;
  background: #fff;
}

.workspace-row-item.is-active {
  border-color: #c5d4ea;
  background: #f4f7fb;
}

.workspace-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.workspace-name-cell span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.badge {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.workspace-select {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--navy);
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.workspace-select:disabled {
  border-color: #d7dee8;
  background: #eef2f6;
  color: #8b95a5;
}

.workspace-count {
  color: #5c6778;
  font-size: 0.85rem;
  font-weight: 700;
}

.workspace-row-item .row-button {
  width: 40px;
  height: 40px;
}

.list-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #d7dee8;
}

.list-bar h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list-bar h2 svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.list-bar button {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
}

#point-items {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  margin: 0;
  padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
  overflow: auto;
  list-style: none;
  background: #eef2f6;
}

.point-row {
  display: grid;
  grid-template-columns: 80px 32px minmax(0, 1fr);
  grid-template-areas:
    "photo seq note"
    "photo actions actions";
  gap: 8px 10px;
  align-items: center;
  margin: 0;
  padding: 10px;
  border: 1px solid #e4e9f0;
  border-radius: 16px;
  background: #fff;
}

.seq {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #e8eef6;
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 750;
}

.point-row .seq { grid-area: seq; }

.point-row p {
  grid-area: note;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.35;
  white-space: normal;
}

.row-photo {
  display: grid;
  grid-area: photo;
  width: 80px;
  height: 80px;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: #e8eef6;
}

.row-photo:not(:has(img))::before {
  content: "";
  width: 26px;
  height: 26px;
  opacity: 0.45;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c3358' stroke-width='1.6'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='m7 15 3.2-3.2a1 1 0 0 1 1.4 0L16 16' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='9' r='1' fill='%231c3358' stroke='none'/%3E%3C/svg%3E");
}

.row-photo img { width: 100%; height: 100%; object-fit: cover; }

.point-row .row-actions {
  grid-area: actions;
  flex-direction: row;
  justify-content: flex-start;
}

.row-actions { display: flex; gap: 6px; align-items: center; }

.row-button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border-radius: 10px;
}

.row-button svg { width: 18px; height: 18px; }

.row-button.danger {
  background: #d92d20;
  color: #fff;
}
.empty-list { padding: 28px 8px; color: #5c6778; }

.tool,
.locate,
.add-point,
#workspace-button {
  position: relative;
}

body.tips [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(28, 51, 88, 0.16);
  pointer-events: none;
}

.tools [data-tip]::after,
.corner [data-tip]::after,
#workspace-button[data-tip]::after {
  right: calc(100% + 8px);
}

.dock-left [data-tip]::after {
  left: calc(100% + 8px);
}

button:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--bar);
  outline-offset: 2px;
}

.readout {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  max-width: calc(100% - 188px);
  margin: 0;
  padding: 4px 2px;
  transform: translateX(-50%);
  border: 1px solid #d7dee8;
  border-radius: 12px;
  background: #f7f8fa;
  box-shadow: 0 8px 18px rgba(28, 51, 88, 0.12);
  pointer-events: none;
}

.readout b {
  padding: 0 7px;
  color: var(--navy);
  font-size: 0.66rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.readout b + b { border-left: 1px solid #d7dee8; }

html:not(.unlocked),
html:not(.unlocked) body {
  background: #1c3358;
}

html:not(.unlocked) body > :not(#gate) {
  visibility: hidden;
}

.gate {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(56px + env(safe-area-inset-top)) 24px 24px;
  overflow: hidden;
  background: #1c3358;
}

.gate::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 100vh;
  background: #1c3358;
}

html.unlocked .gate { display: none; }

.gate form {
  width: min(320px, 100%);
  padding: 28px 20px 20px;
  border-radius: 22px;
  background: #f7f8fa;
  box-shadow: 0 16px 40px rgba(12, 24, 44, 0.28);
}

.gate-logo {
  display: block;
  height: 54px;
  width: auto;
  margin: 0 auto 18px;
}

.gate label {
  display: block;
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 700;
}

.gate input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  padding: 0 12px;
  border: 1px solid #d7dee8;
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.gate button {
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  border: 0;
  border-radius: 12px;
  background: var(--navy);
  color: #f7f8fa;
  font: inherit;
  font-weight: 700;
}

.gate-error {
  margin: 8px 0 0;
  color: #d92d20;
  font-size: 0.9rem;
  font-weight: 700;
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
}