/* poop-tracker.org -- public landing page
   Dependency-light on purpose: no framework, no build step. Leaflet is the only
   external script (pinned 1.9.4, loaded from unpkg in index.html). */

:root{
  --bg:#f4f1ea;
  --card:#fff;
  --ink:#222;
  --muted:#776;
  --accent:#7a4a1c;
  --link:#2a6fa8;
  --shadow:0 1px 3px rgba(0,0,0,.15);
  --radius:12px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
}
main{max-width:900px;margin:0 auto;padding:0 16px 32px}
h1,h2{line-height:1.2}
a{color:var(--link)}
.muted{color:var(--muted)}

/* --- masthead: plain title block, no map behind it --- */
.masthead{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:28px 16px 8px;
}
/* The banner reads as an equation: a photo of the real unit, plus a van, equals the
   name. It wraps to two rows on narrow screens rather than shrinking to illegibility. */
.equation{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.eq-item{margin:0;flex:0 0 auto}
.eq-item img{
  display:block;
  width:92px;
  height:122px;
  object-fit:cover;
  border-radius:10px;
  box-shadow:var(--shadow);
}
.eq-van svg{
  display:block;
  width:118px;
  height:70px;
  color:var(--accent);
}
.eq-op{
  font-size:1.8em;
  font-weight:600;
  color:var(--muted);
  line-height:1;
}
.eq-title{flex:1 1 260px;min-width:0}
.masthead h1{
  margin:0 0 .2em;
  font-size:clamp(1.6em,5vw,2.4em);
}
.masthead .tagline{
  margin:0;
  max-width:46em;
  color:var(--muted);
  font-size:clamp(.95em,2.2vw,1.1em);
}
.lang-switch{
  position:absolute;
  top:22px;
  right:16px;
  background:var(--card);
  border-radius:8px;
  overflow:hidden;
  box-shadow:var(--shadow);
  font-size:.85em;
}
.lang-switch a{
  display:inline-block;
  padding:6px 10px;
  color:var(--ink);
  text-decoration:none;
}
.lang-switch a[aria-current="page"]{
  background:var(--accent);
  color:#fff;
  font-weight:600;
}
.lang-switch a:hover{background:rgba(127,127,127,.18)}

/* Layout switch: same pill as the language one, directly beneath it. */
.layout-switch{
  position:absolute;
  top:58px;
  right:16px;
  background:var(--card);
  border-radius:8px;
  overflow:hidden;
  box-shadow:var(--shadow);
  font-size:.85em;
  display:flex;
}
.layout-switch button{
  border:0;
  background:none;
  font:inherit;
  color:var(--ink);
  padding:6px 10px;
  cursor:pointer;
}
.layout-switch button[aria-pressed="true"]{
  background:var(--accent);
  color:#fff;
  font-weight:600;
}
.layout-switch button:hover{background:rgba(127,127,127,.18)}
/* Below the layout breakpoint both layouts render identically, so the control
   would be a button that visibly does nothing. */
@media (max-width:899px){.layout-switch{display:none}}

/* --- the map, as a tool rather than a hero image --- */
.map-card #map{
  height:min(60vh,460px);
  min-height:280px;
  border-radius:8px;
  overflow:hidden;
  background:#cdd;
}

/* --- counters row --- */
.counters{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1px;
  background:var(--bg);
  max-width:900px;
  margin:0 auto;
  padding:0 16px;
}
.counter{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin:8px 4px;
  padding:14px 10px;
  text-align:center;
}
.counter b{
  display:block;
  font-size:1.6em;
  color:var(--accent);
}
.counter span{
  display:block;
  font-size:.82em;
  color:var(--muted);
}
.counter small{
  display:block;
  font-size:.7em;
  color:var(--muted);
  margin-top:4px;
}
.counters-note{
  grid-column:1/-1;
  margin:0 4px 8px;
  text-align:center;
}
.counters-note small{
  font-size:.7em;
  color:var(--muted);
}

/* --- generic cards (log, story, gallery) --- */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 20px;
  margin:20px 0;
}
.card h2{margin-top:0}

table{width:100%;border-collapse:collapse;font-size:.9em}
td,th{text-align:left;padding:6px 6px;border-bottom:1px solid #eee;white-space:nowrap}
th{position:sticky;top:0;background:var(--card)}
.wrap{max-height:420px;overflow:auto;margin-top:8px}

.story p{margin:0 0 1em}
.story p:last-child{margin-bottom:0}

.gallery{text-align:center}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:8px;
  margin-top:8px;
}
.gallery-thumb{
  position:relative;
  padding:0;
  border:0;
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:1/1;
  background:#ddd;
}
.gallery-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.gallery-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6em;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  background:rgba(0,0,0,.15);
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:10;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.85);
}
.lightbox:not([hidden]){display:flex}
.lightbox-body{max-width:min(92vw,1100px);max-height:88vh}
.lightbox-body img,.lightbox-body video{
  display:block;
  max-width:100%;
  max-height:80vh;
  border-radius:4px;
}
.lightbox-caption{color:#eee;text-align:center;margin:8px 0 0;font-size:.9em}
.lightbox-close{
  position:absolute;
  top:14px;
  right:18px;
  font-size:2em;
  line-height:1;
  color:#fff;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:4px 10px;
}

footer{padding:8px 0 24px;text-align:center}

@media (max-width:560px){
  .eq-item img{width:70px;height:92px}
  .eq-van svg{width:90px;height:54px}
  .eq-op{font-size:1.4em}
}
@media (max-width:480px){
  .map-card #map{height:50vh}
  .card{padding:14px 14px}
  td,th{padding:5px 4px}
}

/* --- layout C: story left, map and log right, on wide screens only ---
   Same markup, same content, different arrangement. Selected with ?layout=c, which
   the server stamps onto <body> so the page never paints layout A first.
   Below 900px this collapses back to the single column of layout A, so the mobile
   experience is identical in both. --- */
@media (min-width:900px){
  body[data-layout="c"] main{
    display:grid;
    /* minmax(0,...) on purpose: a bare `fr` floors at the content's min-content
       width, and the log table plus the map are wide enough to squeeze the story
       column to a third of its share. */
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:0 18px;
    align-items:start;
  }
  /* Rows are explicit. Left to auto-placement the four cards land in four separate
     rows, so the story starts level with the bottom of the log instead of the top
     of the map. */
  body[data-layout="c"] .story{grid-column:1;grid-row:1}
  body[data-layout="c"] .gallery{grid-column:1;grid-row:2}
  body[data-layout="c"] .map-card{grid-column:2;grid-row:1}
  body[data-layout="c"] .log{grid-column:2;grid-row:2}
  body[data-layout="c"] main > *{min-width:0}
  /* The map was sticky here so it would follow the reader down the story. Removed:
     a sticky grid item is only supposed to move inside its own grid area, but once
     the map card is the tallest thing in row 1 it stayed pinned past the end of the
     row and the log card in row 2 slid underneath it -- 342px of overlap at a 950px
     viewport, with the log's header drawn across the map. Plain flow instead. */
  body[data-layout="c"] .map-card #map{height:min(46vh,380px)}
  /* The log is tall; its own scroll area keeps the two columns roughly level
     instead of letting the table run far past the gallery. */
  body[data-layout="c"] .log .wrap{max-height:360px;overflow:auto}
  body[data-layout="c"] footer{grid-column:1/-1;grid-row:3}
}

/* --- dark mode: respect the visitor's preference, no toggle needed --- */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1b1a16;
    --card:#262420;
    --ink:#eee8da;
    --muted:#a69a85;
    --accent:#e2a356;
    --link:#7cb6ea;
    --shadow:0 1px 4px rgba(0,0,0,.5);
  }
  th{background:var(--card)}
  td,th{border-bottom:1px solid #3a3730}
}