:root {
  --parchment: #f2e8d0;
  --parchment-pale: #f8f1de;
  --parchment-deep: #e7d9ba;
  --ink: #3a2a1a;
  --sepia: #8a6a4a;
  --oxblood: #6b1d18;
  --gold: #c9a24a;
  --plate-shadow: inset 0 0 0 2px rgba(248, 241, 222, 0.85), 0 1px 0 rgba(58, 42, 26, 0.18);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--parchment);
  /* A single scanned sheet, not a tile, so it is sized to cover rather than
     repeated, and pinned to the viewport so the grain runs unbroken behind the
     header and the map frame. The wash is there only to lift the sheet's dark
     vignetted edges back above readable contrast at portrait aspect ratios. */
  background-image:
    linear-gradient(rgba(242, 232, 208, 0.2), rgba(242, 232, 208, 0.2)),
    url("assets/paper.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  margin: 0;
}

.title {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  letter-spacing: 0.01em;
}

h2 { font-size: 1.45rem; }

p { margin: 0; }

/* ------------------------------------------------------------- screens */

.screen { min-height: 100%; }

.screen-centred {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

/* The logged-out and onboarding screens sit on the old world map, washed
   back with parchment so the engraving still reads through. */
#screen-auth,
#screen-profile {
  background-image:
    linear-gradient(rgba(242, 232, 208, 0.35), rgba(242, 232, 208, 0.35)),
    url("assets/world-map.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card {
  width: min(28rem, 100%);
  padding: 2rem clamp(1.25rem, 4vw, 2.25rem) 2.25rem;
  background: var(--parchment);
  border: 1px solid var(--ink);
  border-radius: 2px;
  box-shadow: 0 10px 34px rgba(42, 30, 18, 0.38);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.card::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--sepia);
  pointer-events: none;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.stack > .plate { align-self: flex-start; }

/* -------------------------------------------------------------- fields */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.field > span,
.field > label {
  font-family: Georgia, serif;
  font-size: 1rem;
  color: var(--ink);
}

input[type="email"],
input[type="text"],
input[type="number"] {
  font-family: Georgia, serif;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--parchment-pale);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 0.5rem 0.65rem;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

input::placeholder { color: rgba(58, 42, 26, 0.65); }

input:focus-visible {
  outline: 2px solid var(--sepia);
  outline-offset: 1px;
}

input.wants-year {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  background: #fbf3dc;
}

/* ------------------------------------------------------- engraved plate */

.plate {
  font-family: Georgia, serif;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--ink);
  background: var(--parchment-pale);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  box-shadow: var(--plate-shadow);
}

.plate:hover { background: var(--parchment); }

.plate:active,
.plate.is-active {
  background: var(--oxblood);
  color: var(--parchment-pale);
  box-shadow: inset 0 0 0 2px rgba(248, 241, 222, 0.3);
}

.plate-quiet { box-shadow: none; }

.plate-compact {
  padding: 0.28rem 0.6rem;
}

.plate-square {
  width: 2.35rem;
  padding: 0.4rem 0;
  text-align: center;
  font-size: 1.15rem;
}

/* -------------------------------------------------------------- topbar */

.screen-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding: 0.75rem clamp(0.75rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--sepia);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.modes { display: flex; }

.modes .plate:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.modes .plate:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}

/* ----------------------------------------------------------------- map */

.mapwrap {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: clamp(0.5rem, 1.5vw, 1rem);
}

.frame {
  position: relative;
  height: 100%;
  border: 1px solid var(--ink);
  border-radius: 2px;
  overflow: hidden;
}

.frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--sepia);
  pointer-events: none;
  z-index: 3;
}

#map {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

#map:active { cursor: grabbing; }

.country {
  fill: var(--parchment);
  stroke: var(--sepia);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

.country:hover {
  stroke: var(--ink);
  stroke-width: 1.4;
  filter: brightness(1.14);
}

.country.is-selected {
  stroke: var(--gold);
  stroke-width: 3;
}

.country.is-pulsing {
  animation: country-pulse 620ms ease-out;
}

@keyframes country-pulse {
  0%   { stroke-width: 9; stroke-opacity: 0.55; }
  45%  { stroke-width: 4.5; stroke-opacity: 1; }
  70%  { stroke-width: 6; stroke-opacity: 0.85; }
  100% { stroke-width: 3; stroke-opacity: 1; }
}

.sphere {
  fill: #c3dbd3;
  stroke: var(--sepia);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}

/* Containers used only by the phone layout; app.js moves nodes into them. */
.search-bar,
.below-map,
.map-controls { display: none; }

/* --------------------------------------------------- map overlay bits */

.map-tools {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}

.search {
  width: 280px;
  max-width: 100%;
}

.search input {
  background: var(--parchment);
  border: 1px solid var(--ink);
  box-shadow: var(--plate-shadow);
  padding: 0.55rem 0.7rem;
}

.zoomers {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

/* The bottom strip of the frame: readouts at the left, "Whole world" pushed to
   the right. It spans the frame so the button stays in the corner at any width,
   so the strip itself must not swallow drags meant for the map. */
.map-readout {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  pointer-events: none;
}

.map-readout > * { pointer-events: auto; }

.readout {
  padding: 0.45rem 0.75rem;
  background: rgba(248, 241, 222, 0.88);
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-size: 1rem;
  color: var(--ink);
}

#whole-world { margin-left: auto; }

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.legend i {
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--ink);
  display: inline-block;
}

/* ----------------------------------------------------------- typeahead */

.typeahead { position: relative; }

.typeahead-list {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 18rem;
  overflow-y: auto;
  background: var(--parchment-pale);
  border: 1px solid var(--ink);
  border-radius: 2px;
}

.typeahead-list li {
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  font-size: 1rem;
}

.typeahead-list li.is-active,
.typeahead-list li:hover {
  background: var(--oxblood);
  color: var(--parchment-pale);
}

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

.panel {
  position: absolute;
  top: clamp(0.5rem, 1.5vw, 1rem);
  left: clamp(0.5rem, 1.5vw, 1rem);
  z-index: 6;
  width: min(21rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow-y: auto;
  padding: 1.25rem;
  background: var(--parchment-pale);
  border: 1px solid var(--ink);
  border-radius: 2px;
  box-shadow: 0 2px 14px rgba(58, 42, 26, 0.22);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.panel-close { align-self: flex-end; }

#panel-title { font-size: 1.6rem; }

.visit-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.visit-buttons .plate { min-width: 2.8rem; text-align: center; }

/* ---------------------------------------------------------- responsive */

@media (max-width: 640px) {
  html { height: auto; min-height: 100%; }

  body {
    font-size: 16px;
    height: auto;
    min-height: 100%;
  }

  /* The phone layout is a scrolling document, not a fixed-height app shell. */
  .screen-app {
    height: auto;
    min-height: 100%;
  }

  /* ---- header: title, then a full-width two-up toggle ---- */

  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 0.75rem 0;
    border-bottom: 0;
  }

  .toolbar { width: 100%; }
  .modes { width: 100%; }
  .modes .plate { flex: 1 1 50%; text-align: center; }

  /* ---- search above the frame; its dropdown still falls over the map ---- */

  .search-bar {
    display: block;
    padding: 12px 0.75rem 0;
  }

  .search-bar .search { width: 100%; }

  /* ---- the frame is exactly as tall as the map needs ---- */

  .mapwrap {
    flex: none;
    padding: 12px 0.75rem 0;
  }

  .frame { height: auto; }        /* app.js sets the pixel height */

  .frame::after { inset: 3px; }

  .map-tools { display: none; }   /* emptied by applyLayout */

  .map-controls {
    display: flex;
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    flex-direction: row;
    align-items: stretch;
    gap: 0.25rem;
  }

  .map-controls .zoomers {
    flex-direction: row;
    align-items: stretch;
    gap: 0.25rem;
  }

  .map-controls .plate { padding: 0.2rem 0.45rem; }
  .map-controls .plate-square { width: 1.75rem; padding: 0.2rem 0; }
  .map-controls #whole-world { margin-left: 0; }

  /* ---- rows below the map ---- */

  .below-map {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0.75rem calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* Tally and legend become full-width blocks in the same 12px rhythm, so
     every block on the page shares one left and right edge. */
  .below-map .map-readout {
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    pointer-events: auto;
  }

  .below-map .legend { justify-content: space-between; }

  .actions { display: flex; gap: 8px; }
  .actions .plate { flex: 1 1 50%; text-align: center; }

  .readout {
    font-size: 0.95rem;
    padding: 0.35rem 0.6rem;
  }

  .legend { gap: 0.7rem; }

  /* ---- the panel stays a bottom sheet ---- */

  .panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 72vh;
    border-radius: 6px 6px 0 0;
    border-width: 1px 0 0;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}