* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* position:fixed here, not just overflow:hidden, because the collapsed
     sidebar (translated fully off-screen) still exists as an oversized box
     in the document's layout — and plain overflow:hidden is known to not
     fully suppress mobile WebKit's elastic rubber-band overscroll, which
     can briefly pan/bounce into that off-screen area on a real touch drag.
     A position:fixed html/body has no scrollport for the browser to pan at
     all, regardless of what's overflowing inside it. */
  position: fixed;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

#map {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hidden { display: none !important; }

/* ---------- Top-left stack (site title + admin panel) ---------- */

/* Both boxes stack here in normal flex flow rather than each carrying its
   own absolute top/left — so the admin panel (only shown when logged in)
   never has to know the site title box's height to sit below it without
   overlapping. */
.top-left-stack {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* ---------- Site title box ---------- */

.site-title-box {
  background: var(--parchment);
  padding: 10px 16px 12px 16px;
  border-radius: 0;
  box-shadow:
    0 0 0 1px #a9b8c2,
    0 0 0 6px var(--parchment),
    0 2px 10px rgba(0,0,0,0.2);
  max-width: 220px;
}

.site-title-name {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.5px;
  line-height: 1.2;
  color: var(--navy);
  white-space: nowrap;
}

.site-title-rule {
  width: 100%;
  height: 1px;
  background: var(--maroon);
  margin: 8px 0;
}

.site-title-about-link {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  font-family: Lora, serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--maroon);
  cursor: pointer;
}

.site-title-about-link:hover {
  text-decoration: underline;
}

/* ---------- Admin panel ---------- */

#admin-panel {
  background: rgba(255, 255, 255, 0.97);
  padding: 10px 12px;
  border-radius: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 320px;
}

#admin-panel button {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

#admin-panel button:hover { background: #1d4ed8; }
#admin-panel button:disabled { background: #94a3b8; cursor: not-allowed; }

#confirm-draw-btn { background: #16a34a; }
#confirm-draw-btn:hover { background: #15803d; }

#cancel-draw-btn { background: #dc2626; }
#cancel-draw-btn:hover { background: #b91c1c; }

.logout-btn {
  background: #475569 !important;
  margin-left: auto;
}

#draw-hint {
  font-size: 12px;
  color: #334155;
  width: 100%;
}

/* ---------- Modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: #fff;
  padding: 22px;
  border-radius: 0;
  width: 340px;
  max-width: 90vw;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.modal-content h3 {
  margin: 0 0 14px 0;
}

.modal-content label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 12px;
}

.modal-content input[type="text"],
.modal-content input[type="password"],
.modal-content textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 0;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.modal-content input[type="color"] {
  display: block;
  margin-top: 4px;
  width: 60px;
  height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 0;
  padding: 2px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.modal-content button {
  padding: 8px 14px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  background: #2563eb;
  color: #fff;
}

.modal-content button.secondary {
  background: #e2e8f0;
  color: #334155;
}

/* ---------- Post modal ---------- */

.post-modal-content {
  width: 440px;
  max-height: 85vh;
  overflow-y: auto;
}

#post-thumbnail-preview {
  display: block;
  margin-top: 8px;
  max-width: 100%;
  max-height: 160px;
  border-radius: 0;
  object-fit: cover;
}

.marker-section {
  border: 1px dashed #cbd5e1;
  border-radius: 0;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.marker-status {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}

.marker-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.marker-controls button {
  flex: 1 1 auto;
}

/* ---------- Zoomed-out marker + label ---------- */

:root {
  --area-marker-red: #a3283a;
}

.area-marker-icon-wrapper {
  background: transparent;
  border: none;
}

.area-marker-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}

.area-marker-circle {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  border: 2px solid var(--marker-color, var(--area-marker-red));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}

.area-marker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--marker-color, var(--area-marker-red));
  transition: background-color 0.15s ease;
}

.area-marker-text {
  display: flex;
  flex-direction: column;
}

.area-marker-title {
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 13px;
  color: var(--marker-color, var(--area-marker-red));
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transition: color 0.15s ease;
}

.area-marker-line {
  height: 1px;
  background: var(--marker-color, var(--area-marker-red));
  margin: 3px 0;
  width: 100%;
  box-shadow: 0 0 3px #fff;
  transition: background-color 0.15s ease;
}

.area-marker-coords {
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 11px;
  color: var(--marker-color, var(--area-marker-red));
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transition: color 0.15s ease;
}

.area-marker-highlighted {
  --marker-color: #2563eb;
}

/* ---------- Login page ---------- */

.login-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
}

#login-form {
  background: #fff;
  padding: 28px;
  border-radius: 0;
  width: 300px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

#login-form h2 {
  margin: 0 0 16px 0;
  text-align: center;
}

#login-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 12px;
}

#login-form input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 0;
  font-size: 14px;
}

#login-form button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 0;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}

.error { color: #dc2626; font-size: 13px; margin-top: 10px; text-align: center; }

.leaflet-control-attribution {
  display: none;
}

/* ---------- Sidebar (Expeditions) ---------- */

.sidebar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  width: 340px;
  background: var(--parchment);
  /* Thin grey hairline + cream fringe framing effect, drawn as box-shadow
     rings rather than an inner stripe element. Only the left ring is ever
     visible: the other three sides of this box already sit flush against
     the true viewport edge (top/right/bottom all at 0), so their rings
     draw off-screen. */
  box-shadow:
    0 0 0 1px #a9b8c2,
    0 0 0 6px var(--parchment),
    -2px 0 10px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.25s ease;
  /* Force a dedicated compositor layer. Without this, some mobile WebKit
     builds rasterize a transformed element on the main thread every frame
     instead of the GPU — especially when it sits inside an overflow:hidden
     ancestor (as .sidebar does, via html/body) — which can drop enough
     frames that a 250ms slide reads as an instant jump on real hardware,
     even though it animates correctly in desktop/emulated testing. */
  will-change: transform;
  backface-visibility: hidden;
}

@media (max-width: 600px) {
  /* Stretch to fill via left+right instead of an explicit 100vw width —
     100vw is notorious for being computed slightly wider than the actual
     visible screen on mobile browsers (it accounts for scrollbar gutter
     space that mobile doesn't even render), which pushed the sidebar's box
     past the real edge and created a phantom horizontal scroll. left:0
     with no explicit width matches the real viewport exactly, same as
     how #map already fills the screen via inset:0. */
  .sidebar {
    left: 0;
    width: auto;
  }
}

.sidebar.collapsed {
  transform: translateX(100%);
}

/* Pinned at a fixed screen corner — deliberately NOT tied to the sidebar's
   own box or --sidebar-width. A side-edge tab has no reachable position
   once the sidebar is full-width on mobile (there's no screen space left
   of it to poke into), and even on desktop a vertically-centered edge tab
   sits in the OS's edge-swipe-back gesture zone. A fixed top corner avoids
   both problems and needs no separate mobile treatment: same spot whether
   the sidebar is open (sits on the panel's corner) or collapsed (floats
   over the map). */
.sidebar-tab {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1001;
  width: 40px;
  height: 40px;
  background: var(--parchment);
  border: none;
  border-radius: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  color: var(--maroon);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-tab:hover {
  background: #e5ded0;
}

.sidebar-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#post-card-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#add-post-btn {
  width: 100%;
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 12px;
}

#add-post-btn:hover { background: #1d4ed8; }

#posts-empty {
  font-size: 13px;
  color: #64748b;
  text-align: center;
  padding: 24px 8px;
}

/* ---------- Expedition card ---------- */

:root {
  --parchment: #f0ebdb;
  --maroon: #7a2331;
  --navy: #1a2332;
}

.post-card {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.post-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 4px 18px 16px 18px;
}

.post-card-label {
  font-family: Lora, serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--maroon);
}

.post-card-rule {
  width: 42px;
  height: 2px;
  background: var(--maroon);
  margin: 6px 0 12px 0;
}

.post-card-title {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 1.5px;
  line-height: 1.1;
  color: var(--navy);
  margin: 0;
  text-transform: uppercase;
}

.post-card-subtitle {
  font-family: Lora, serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--maroon);
  margin: 6px 0 14px 0;
}

.post-card-thumb {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 0;
  margin-bottom: 14px;
}

.post-card-desc {
  font-family: Lora, serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: #3f3f3f;
  margin: 0 0 14px 0;
}

.post-card-divider {
  height: 1px;
  background: #ddd8c8;
  margin: 14px 0;
  flex: 0 0 auto;
}

.post-card-divider-bottom {
  margin-top: auto;
}

.post-card-meta {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 14px;
}

.post-card-meta .meta-sep {
  color: #b8b2a0;
  margin: 0 2px;
}

.post-card-watch-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: var(--maroon);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 12px;
  border-radius: 0;
}

.post-card-watch-btn:hover { background: #611b26; }

.post-card-fieldnotes-toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  color: var(--maroon);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 12px;
  padding: 4px;
}

.post-card-fieldnotes {
  font-family: Lora, serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
  color: #3f3f3f;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #ddd8c8;
}

.post-card-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.post-card-arrow {
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--navy);
  color: var(--navy);
  width: 30px;
  height: 30px;
  border-radius: 0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-card-arrow:hover { background: var(--navy); color: #fff; }

.post-card-nav-track {
  flex: 1 1 auto;
  height: 1px;
  background: #ccc4ac;
}

.post-card-admin-actions {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}

.post-card-admin-actions button {
  flex: 1 1 auto;
  border: none;
  padding: 6px 10px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

#post-card-edit-btn { background: #2563eb; color: #fff; }
#post-card-delete-btn { background: #dc2626; color: #fff; }

/* ---------- About box ---------- */

/* Positioned as a padded inset box rather than a dimmed full-screen modal,
   so the map stays visible around it. top/left/bottom/right are set
   inline by updateAboutBoxInset() in app.js — right in particular has to
   track the sidebar's actual live edge (open or collapsed, desktop or
   mobile-full-width) rather than a hardcoded width. */
.about-box {
  position: fixed;
  z-index: 1500;
  background: var(--parchment);
  border-radius: 0;
  box-shadow:
    0 0 0 1px #a9b8c2,
    0 0 0 6px var(--parchment),
    0 10px 40px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  transition: right 0.25s ease;
}

.about-box.hidden {
  display: none;
}

.about-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-close-btn:hover {
  background: rgba(0,0,0,0.06);
}

.about-box-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 26px 30px 28px 34px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.about-text {
  font-family: Lora, serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: #3f3f3f;
}

.about-text > *:first-child { margin-top: 0; }
.about-text > *:last-child { margin-bottom: 0; }

.about-text h1,
.about-text h2,
.about-text h3 {
  font-family: 'Playfair Display', serif;
  color: var(--navy);
  line-height: 1.25;
  margin: 0 0 12px 0;
}

.about-text a {
  color: var(--maroon);
}

.about-text strong { color: var(--navy); }

.about-text ul,
.about-text ol {
  margin: 0 0 1em 0;
  padding-left: 22px;
}

.about-text blockquote {
  margin: 0 0 1em 0;
  padding-left: 12px;
  border-left: 3px solid #ccc4ac;
  color: #5b5b5b;
  font-style: italic;
}

.about-text code {
  background: #e5ded0;
  padding: 1px 4px;
  font-size: 13px;
}

.about-markdown-hint {
  font-size: 11px;
  color: #8a8a8a;
  margin-top: 6px;
  font-style: italic;
}

.about-textarea {
  flex: 1 1 auto;
  width: 100%;
  font-family: Lora, serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: #3f3f3f;
  border: 1px solid #cbd5e1;
  border-radius: 0;
  padding: 12px;
  resize: none;
  min-height: 160px;
}

.about-admin-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex: 0 0 auto;
}

.about-btn {
  border: none;
  padding: 8px 16px;
  border-radius: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--maroon);
  color: #fff;
}

.about-btn:hover {
  background: #611b26;
}

.about-btn.secondary {
  background: #e2e8f0;
  color: #334155;
}

.about-btn.secondary:hover {
  background: #cbd5e1;
}