/* ===== NYC Walking Challenge =====
   Plain CSS. No framework, no build step.
   Restrained on purpose - this is structure, not a finished look. */

:root {
  --ink: #1a1a1a;
  --bg: #ffffff;
  --muted: #666666;
  --rule: #e4e4e4;
  --accent: #2f5d3a;
  --panel: #f7f7f5;
  --max-width: 42rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- header */
.site-header {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.site-title { font-weight: 700; text-decoration: none; color: var(--ink); }

.site-nav a { margin-left: 1rem; color: var(--muted); text-decoration: none; }
.site-nav a:hover,
.site-nav a:focus { color: var(--ink); text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ main */
main { max-width: var(--max-width); margin: 0 auto; }

section { padding: 2.5rem 0; border-bottom: 1px solid var(--rule); }
section:last-child { border-bottom: 0; }

.hero { padding: 4rem 0 2.5rem; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.15; margin: 0 0 1rem; }

.lede { font-size: 1.125rem; color: var(--ink); margin: 0; max-width: 34rem; }

h2 { font-size: 1.25rem; margin: 0 0 1rem; }
h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
p  { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- walks */
.walk {
  background: var(--panel);
  border-left: 3px solid var(--accent);
  padding: 1.25rem;
  margin: 0 0 1.25rem;
}

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

.walk-status {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  font-weight: 600;
}

.note { color: var(--muted); font-size: .95rem; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: .9rem;
}

/* ------------------------------------------------------------ challenges */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 .5rem;
}

.walk h3 a { color: var(--ink); text-decoration: none; }
.walk h3 a:hover,
.walk h3 a:focus { text-decoration: underline; }

/* A challenge that does not exist yet reads as greyed out, not clickable. */
.walk.is-planned { border-left-color: var(--rule); opacity: .75; }
.walk.is-planned .walk-status { color: var(--muted); }

/* ---------------------------------------------------------------- graves */
.progress {
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 1rem;
}

.graves { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.grave {
  border-top: 1px solid var(--rule);
  padding: 1rem 0;
}
.grave:last-child { border-bottom: 1px solid var(--rule); }

.grave-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .6rem;
}

.grave-head input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent);
  flex: none;
  /* nudge the box onto the text baseline */
  position: relative;
  top: .2rem;
}

.grave-name {
  font-weight: 600;
  cursor: pointer;
  /* take the remaining width so the date sits at the end of the row */
  flex: 1 1 auto;
}

.grave-date {
  font-size: .8rem;
  color: var(--accent);
  white-space: nowrap;
}

.grave-facts {
  margin: .5rem 0 0 1.75rem;
  padding: 0 0 0 1rem;
  color: var(--muted);
  font-size: .95rem;
}
.grave-facts li { margin: .2rem 0; }

/* Visited graves recede so the ones still to find stand out. */
.grave.is-done .grave-name { color: var(--muted); text-decoration: line-through; }
.grave.is-done .grave-facts { opacity: .6; }

/* A button that reads as a link - used for destructive-ish minor actions. */
.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
.linkish:hover, .linkish:focus { color: var(--ink); }

.site-footer a { color: var(--muted); }

/* ==================================================== map challenge page */
/* The map page needs more room than the reading pages. */
main.wide { max-width: 64rem; }

.map-section { padding-top: 1.5rem; }

.map-split {
  display: grid;
  grid-template-columns: 1fr 21rem;
  gap: 1rem;
  align-items: start;
}

/* ------------------------------------------------------------- map pane */
.map {
  height: 30rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}

.map-note { font-size: .85rem; color: var(--muted); margin: .5rem 0 0; }
.map-fail { padding: 2rem; color: var(--muted); text-align: center; }

/* Markers are plain divs, styled here rather than by the map library. */
.pin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  cursor: pointer;
}
.pin--grave    { background: var(--accent); }
.pin--cemetery { background: #8a6d3b; width: 22px; height: 22px; cursor: default; }
.pin.is-done   { background: var(--muted); }

/* ------------------------------------------------------------ list pane */
.list-pane {
  border: 1px solid var(--rule);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  max-height: 30rem;
  overflow: hidden;
}

.list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.list-head h2 { font-size: .95rem; margin: 0; }
.list-head .progress { font-size: .8rem; margin: 0; }

#gravePanel { overflow-y: auto; flex: 1 1 auto; }

.glist { list-style: none; margin: 0; padding: 0; }

.glist-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--rule);
}
.glist-row:last-child { border-bottom: 0; }

.glist-num {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--panel);
  color: var(--muted);
  font-size: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The name is a button so it is keyboard reachable, but reads as text. */
.glist-name {
  flex: 1 1 auto;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.glist-name:hover, .glist-name:focus { text-decoration: underline; }

.glist-flag {
  display: block;
  font-weight: 400;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.tick {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--rule);
  cursor: pointer;
  line-height: 1;
}
.tick:hover { border-color: var(--accent); color: var(--accent); }
.tick.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.glist-row.is-done .glist-name { color: var(--muted); text-decoration: line-through; }

/* --------------------------------------------------------------- detail */
.gdetail { padding: 1rem; }
.gdetail h3 { margin: .75rem 0 .15rem; font-size: 1.1rem; }
.gdetail-cem { font-size: .8rem; color: var(--muted); margin: 0 0 .75rem; }
.gdetail .grave-facts { margin-left: 0; }

.tickbtn {
  font: inherit;
  padding: .5rem .9rem;
  border-radius: 4px;
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
  cursor: pointer;
}
.tickbtn.is-on { background: var(--accent); color: #fff; }

/* ----------------------------------------------------------- narrow screens */
@media (max-width: 820px) {
  .map-split { grid-template-columns: 1fr; }
  .map { height: 20rem; }
  .list-pane { max-height: none; }
}

/* One block per cemetery, stacked down the page. */
.cemetery-block { padding: 2rem 0; border-bottom: 1px solid var(--rule); }
.cemetery-block .cem-name { font-size: 1.15rem; margin: 0 0 .15rem; }
.cemetery-block .cem-address { margin: 0 0 1rem; }

.reset-section { padding: 1.5rem 0 0; border-bottom: 0; }

.gdetail h4 { margin: .75rem 0 .15rem; font-size: 1.1rem; }

/* Borough label above each cemetery heading. */
.cem-borough {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 .1rem;
}