:root {
  --bg: #f5f7fa;
  --fg: #1f2630;
  --muted: #5a6475;
  --accent: #0b6cc9;
  --accent-weak: #e2edf9;
  --border: #dbe1e8;
  --danger: #b3261e;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.5;
  font-size: 15px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.site-header .brand { font-weight: 700; font-size: 1.05rem; color: inherit; }
.site-header nav { display: flex; gap: 1rem; }
.site-header nav a { color: var(--muted); font-weight: 500; }
.site-header nav a.active { color: var(--accent); }

.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
.container--wide { max-width: none; }
.site-footer { padding: 1rem 1.5rem; color: var(--muted); }

.muted { color: var(--muted); }

.hero h1 { margin-bottom: 0.25rem; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.card {
  display: block;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: inherit;
}
.card:hover { border-color: var(--accent); text-decoration: none; }
.card h2 { margin: 0 0 0.5rem; }
.card p { margin: 0; color: var(--muted); }

/* ------- forms ------- */

.chart-form { margin-top: 1rem; }

.toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  background: var(--bg);
}
.toolbar .spacer { flex: 1; }
.toolbar button,
.chart-group-head button {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--fg);
}
.toolbar button[type="submit"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.toolbar button[type="submit"]:hover { background: #0958a9; }
.selected-count {
  color: var(--muted);
  font-size: 0.9rem;
}

.chart-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
}
.chart-list li {
  display: grid;
  grid-template-columns: 1.25rem 5rem 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--border);
}
.chart-list--no-select li {
  grid-template-columns: 5rem 1fr auto;
}
.chart-list li:last-child { border-bottom: none; }
.chart-list li:hover { background: #fff; }
.chart-list input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
}
.chart-code {
  color: var(--muted);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.chart-label { font-weight: 500; }
.chart-link {
  display: inline-block;
  padding: 0.1rem 0;
  color: var(--accent);
  text-decoration: none;
}
.chart-link:hover { text-decoration: underline; }
.chart-meta { color: var(--muted); font-size: 0.85rem; }

.geotiff-link {
  font-size: 0.78rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: #eef5fd;
  color: var(--accent);
  border: 1px solid var(--accent-weak);
}
.geotiff-link:hover { text-decoration: none; background: #dceafb; }

.sectional-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.95rem;
}
.sectional-table th,
.sectional-table td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.sectional-table thead th {
  background: #fff;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}
.sectional-table tbody tr:hover { background: #fff; }
.sectional-table td a + a { margin-left: 0.5rem; }
.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  background: #eee;
  color: #555;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge.ok { background: #d6f0d4; color: #275d24; }
.badge.building { background: #fdf0d5; color: #8a5a00; font-weight: 500; }

/* Plain action button used in the chart table (座標編集 / ダウンロード). */
.btn {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--accent);
  padding: 0.25rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-weak); }

/* <details> as a dropdown: the format choices only appear once pressed. */
.dl-menu { position: relative; display: inline-block; }
.dl-menu > summary { list-style: none; }
.dl-menu > summary::-webkit-details-marker { display: none; }
.dl-menu > summary::after { content: ' ▾'; color: var(--muted); }
.dl-menu-items {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 13rem;
  display: grid;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  padding: 0.25rem;
}
.dl-menu-items a,
.dl-menu-items span {
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  font-size: 0.85rem;
}
.dl-menu-items a:hover { text-decoration: none; background: var(--accent-weak); }
.sectional-table td .dl-menu-items a + a { margin-left: 0; }

.charts-section { margin-top: 2rem; }
.charts-section:first-of-type { margin-top: 1rem; }
.charts-section h2 { margin: 0; font-size: 1.15rem; }
.charts-count { font-size: 0.85rem; font-weight: normal; }
.sectional-table .chart-meta { display: block; font-size: 0.8rem; margin-top: 2px; }


.tag-georef {
  display: inline-block;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 4px;
  background: #e2f3e8;
  color: #1f7a44;
  font-weight: 600;
  font-size: 0.75rem;
  border: 1px solid #bde0c9;
}

/* ------- airport grid ------- */

/* Bulk TripKit download banner above the airport list. */
.tripkit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--accent-weak);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.tripkit-body { flex: 1 1 340px; }
.tripkit h2 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.tripkit p { margin: 0; }
.tripkit .tripkit-detail { margin-top: 0.35rem; font-size: 0.85rem; }
.tripkit code {
  padding: 0 0.2rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.tripkit-dl {
  flex: 0 0 auto;
  padding: 0.6rem 1.1rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
}
.tripkit-dl:hover { text-decoration: none; filter: brightness(1.08); }

.airport-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
#airport-filter {
  flex: 1 1 240px;
  max-width: 360px;
  padding: 0.55rem 0.75rem;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.airport-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.airport-sort select {
  padding: 0.4rem 0.5rem;
  font-size: 0.95rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
}

.airport-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem;
}
.airport-grid a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: inherit;
}
.airport-grid a:hover { border-color: var(--accent); text-decoration: none; }
.airport-grid .ap-head { display: flex; flex-direction: column; min-width: 0; }
.airport-grid .icao { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; }
.airport-grid .ap-name {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.airport-grid .count { color: var(--muted); font-size: 0.85rem; flex-shrink: 0; }

/* ------- recent updates on home page ------- */

.recent-updates { margin-top: 2rem; }
.recent-updates h2 { font-size: 1.1rem; margin: 0 0 0.25rem; }
.recent-updates .run { margin-top: 1rem; }
.recent-updates .run-head { margin-bottom: 0.4rem; font-size: 0.9rem; }
.update-list { list-style: none; padding: 0; margin: 0; }
.update-list li {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.4rem 0.25rem;
  border-bottom: 1px solid var(--border);
}
.update-list li:last-child { border-bottom: none; }
.update-label { font-size: 0.92rem; }
.update-actions { display: flex; gap: 0.35rem; }
.action-badge {
  display: inline-block;
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
}
.action-added { background: #e2f3e8; color: #1f7a44; border: 1px solid #bde0c9; }
.action-updated { background: #fdf2d6; color: #8a5a00; border: 1px solid #f0dba7; }

/* ------- chart groups on airport page ------- */
.chart-group { margin: 1rem 0 1.5rem; }
.chart-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}
.chart-group-head h2 {
  font-size: 1.05rem;
  margin: 0;
}
.chart-group-head h2.group-toggle {
  cursor: pointer;
  user-select: none;
  padding: 0.2rem 0;
}
.chart-group-head h2.group-toggle:hover {
  color: var(--accent);
}
.chart-group-head h2.group-toggle::before {
  content: "▸ ";
  color: var(--muted);
}
.chart-group-head small {
  color: var(--muted);
  font-weight: 400;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* ------- login state in the site header (all pages) ------- */

.site-header .site-user { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; }
.site-user-name { color: var(--fg); font-weight: 500; }
.site-user-form { display: inline; }
.site-user-form button { border: 1px solid var(--border); background: #fff; color: var(--muted); border-radius: 6px; padding: 0.25rem 0.6rem; cursor: pointer; font: inherit; font-size: 0.85rem; }
.site-user-form button:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 720px) {
  .site-header { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .site-header nav { flex-wrap: wrap; gap: 0.5rem 0.8rem; }
}

/* ------- Airports: static Japan basemap with anchored dots ------- */

.jpmap-section { margin: 0 0 1.5rem; }

/* The legend doubles as the category filter: each swatch is a checkbox. */
.jpmap-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
}
.jpmap-key {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem 0.2rem 0.4rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}
.jpmap-key input { margin: 0; cursor: pointer; }
.jpmap-key i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.jpmap-key:has(input:checked) { border-color: currentColor; }
.jpmap-key:has(input:not(:checked)) { color: var(--muted); background: transparent; }
.jpmap-key-n { color: var(--muted); font-size: 0.78rem; }

/* Category colours, shared by the legend swatches, the dots and the list tags. */
.cat-civil { color: #0b6cc9; }
.cat-private { color: #0f8a6a; }
.cat-joint { color: #b26a00; }
.cat-military { color: #b3261e; }
.cat-heliport { color: #6d3fb3; }

.jpmap {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: #eef3f8;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  /* Panning must not start a text selection or a native image/link drag —
     both swallow the pointerup and strand the drag. */
  user-select: none;
  -webkit-user-select: none;
}
/* Plain positioning context for the picture and the dots. Deliberately no
   transform and no will-change: app.js zooms by re-laying out the image width
   and the dot offsets, which keeps the coastline and the labels sharp. A
   composited transform would stretch one rasterised bitmap and blur both. */
.jpmap-stage {
  position: absolute;
  inset: 0;
}
.jpmap.is-zoomed { cursor: grab; }
.jpmap.is-zoomed:active { cursor: grabbing; }
.jpmap-img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Each dot is an <a> anchored at the airport's projected position; the pin and
   the label hang off that point so the anchor itself needs no size. The colour
   comes from the .cat-* class, which the pin picks up via currentColor — so do
   not set `color` here, it has the same specificity and would win by order. */
.jpmap-dot {
  position: absolute;
  width: 0;
  height: 0;
}
.jpmap-dot.is-hidden { display: none; }
/* The anchor's own box is 0x0 and the label ignores the pointer, so without
   this the only clickable thing is the 11 px pin. Transparent, so the map still
   looks the same. */
.jpmap-dot::before {
  content: "";
  position: absolute;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.jpmap-pin {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}
.jpmap-label {
  position: absolute;
  left: 7px;
  top: -0.65em;
  padding: 0 2px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.78);
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
}
.jpmap-dot:hover { z-index: 5; text-decoration: none; }
.jpmap-dot:hover .jpmap-pin {
  width: 12px;
  height: 12px;
  left: -6px;
  top: -6px;
}
.jpmap-dot:hover .jpmap-label {
  visibility: visible !important;
  background: #fff;
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.jpmap-off { margin-top: 0.6rem; font-size: 0.85rem; }
.jpmap-offlink { font-family: ui-monospace, Menlo, Consolas, monospace; }
.jpmap-off a + a { margin-left: 0; }
.jpmap-offlink.is-hidden { display: none; }

.ap-cat {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0 5px;
  border-radius: 3px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.ap-cat.cat-civil { display: none; }
.jpmap-src { margin-top: 1rem; font-size: 0.82rem; }

@media (max-width: 720px) {
  .jpmap-label { font-size: 9px; }
}

/* ---- Chart viewer (Leaflet) ----
 * The map fills whatever is left under the site header, so the page is a
 * column flexbox instead of the usual scrolling .container. */
body.viewer-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.container--viewer {
  max-width: none; margin: 0; padding: 0;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
.viewer-bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.viewer-bar select {
  max-width: 420px;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.3rem 0.5rem;
  font: inherit; font-size: 0.9rem;
  background: #fff; color: var(--fg);
}
.viewer-status { color: var(--muted); font-size: 0.85rem; }
.viewer-status .warn { color: #b26a00; }
.viewer-bar .spacer { flex: 1; }
.viewer-manage {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.3rem 0.8rem;
  color: var(--muted); background: #fff;
  font-size: 0.9rem; font-weight: 500;
}
.viewer-manage:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* Map on the left, control panel on the right. */
.viewer-stage { display: flex; flex: 1 1 auto; min-height: 0; }
.viewer-map-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.viewer-map-wrap #map { position: absolute; inset: 0; background: #fff; }
.viewer-map-wrap #coords {
  position: absolute; bottom: 10px; left: 10px; z-index: 1000;
  background: rgba(255,255,255,0.95); color: #111;
  border-radius: 6px; padding: 6px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  font: 13px ui-monospace, Menlo, Consolas, monospace;
}

.viewer-panel {
  flex: 0 0 290px;
  overflow-y: auto;
  background: #fff;
  border-left: 1px solid var(--border);
  padding: 0.75rem 0.85rem 1.5rem;
  font-size: 0.9rem;
}
body.panel-hidden .viewer-panel { display: none; }

.vp-section { margin-bottom: 1.1rem; }
.vp-section h3 {
  margin: 0 0 0.4rem;
  font-size: 0.82rem; font-weight: 600;
  color: var(--muted); letter-spacing: 0.04em;
}
.vp-section h3 small { font-weight: normal; letter-spacing: 0; }

.vp-radios, .vp-checks { display: grid; gap: 0.2rem; }
.vp-radios label, .vp-check {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.15rem 0.2rem; border-radius: 4px; cursor: pointer;
}
.vp-radios label:hover, .vp-check:hover { background: var(--accent-weak); }
.vp-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.vp-check-n { margin-left: auto; color: var(--muted); font-size: 0.78rem; }

.vp-group {
  margin: 0.6rem 0 0.25rem;
  font-size: 0.75rem; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.vp-group:first-child { margin-top: 0; }

.vp-row {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.2rem 0.25rem;
  background: #fff;
}
.vp-row.on { border-color: var(--border); background: #fbfdff; }
.vp-row.dragging { opacity: 0.45; }
.vp-row-top { display: flex; align-items: center; gap: 0.35rem; }
.vp-grip { cursor: grab; color: var(--muted); flex: none; user-select: none; }
.vp-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.85rem;
}
.vp-zoom {
  flex: none; border: 1px solid var(--border); border-radius: 4px;
  background: #fff; color: var(--muted);
  padding: 0 0.35rem; font-size: 0.85rem; cursor: pointer; line-height: 1.4;
}
.vp-zoom:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 720px) {
  .viewer-stage { flex-direction: column; }
  .viewer-panel { flex: 0 0 auto; max-height: 45%; border-left: none; border-top: 1px solid var(--border); }
}

/* Airport popup on the chart viewer. */
.ap-popup { font-size: 0.9rem; }
.ap-popup-code { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; }
.ap-popup-name { color: var(--muted); margin-bottom: 0.5rem; }
.ap-popup-label { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.2rem; }
.ap-popup-charts ul { list-style: none; margin: 0; padding: 0; max-height: 170px; overflow-y: auto; }
.ap-popup-charts li { display: flex; gap: 0.4rem; align-items: baseline; padding: 1px 0; }
.ap-popup-type {
  flex: none; min-width: 5.5em;
  font-size: 0.72rem; color: var(--muted);
}
.ap-popup-more { display: inline-block; margin-top: 0.5rem; font-weight: 500; }
.leaflet-popup-content { margin: 0.7rem 0.9rem; }