/* Terra Lens Gov — read-only viewer styles.
 * [hidden]-guard convention: any element toggled via the `hidden` attribute
 * never relies on an author `display` rule without a [hidden] companion.
 */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f4f2ec;
  color: #1f2a1f;
}

/* --- Lag banner (rule 1): persistent, prominent --- */
.lag-banner {
  background: #7a1f1f;
  color: #fff;
  border-bottom: 4px solid #d9a441;
}
.lag-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
}
.lag-badge {
  display: inline-block;
  background: #d9a441;
  color: #2b1a00;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  text-transform: uppercase;
}
.lag-banner h1 {
  font-size: 1.15rem;
  margin: 0.4rem 0 0.35rem;
}
.lag-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  font-size: 0.85rem;
}
.lag-facts li { white-space: nowrap; }
.state-regrown {
  font-weight: 700;
  color: #9fe3a1;
}
.lag-note {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  font-style: italic;
  opacity: 0.9;
}

/* --- Layout --- */
.layout {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  align-items: stretch;
}
.map {
  flex: 1 1 60%;
  min-height: 420px;
  height: 70vh;
  border: 1px solid #b9b39d;
  border-radius: 6px;
  background: #dfe8dc; /* offline: no tiles fetched */
}
.side {
  flex: 1 1 40%;
  min-width: 260px;
}
.side h2 { font-size: 1rem; margin: 0.4rem 0; }

/* --- Patch table --- */
.patch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  background: #fff;
}
.patch-table th, .patch-table td {
  text-align: left;
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid #e0dcc9;
}
.patch-table th { background: #ece8d8; }
.patch-table tr[role="button"] { cursor: pointer; }
.patch-table tbody tr:hover, .patch-table tbody tr:focus-visible { background: #f6f1de; }
.patch-table tbody tr.active { background: #f3e2b8; }

/* Touch-friendly row targets */
@media (pointer: coarse) {
  .patch-table th, .patch-table td { padding: 0.75rem 0.5rem; }
}

/* --- Previews --- */
.previews {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.previews figure {
  margin: 0;
  flex: 1 1 180px;
  max-width: 260px;
}
.previews img {
  width: 100%;
  height: auto;
  border: 1px solid #b9b39d;
  border-radius: 4px;
  background: #fff;
  /* [hidden]-guard: if a preview is ever toggled hidden, this rule yields */
}
.previews img[hidden] { display: none; }
.previews figcaption { font-size: 0.75rem; margin-top: 0.25rem; }

.hint { font-size: 0.78rem; color: #5a5a48; }

/* --- Observation coverage (W5-3): holes in the Tier-1 trajectory ------- */
.coverage { font-size: 0.78rem; line-height: 1.45; }
.coverage[hidden] { display: none; } /* [hidden]-guard convention */
.coverage .cov-hole {
  display: block;
  margin: 0.25rem 0;
  padding: 0.3rem 0.45rem;
  background: #fdf3e7;
  border: 1px solid #b3541e;
  border-radius: 4px;
}
.coverage .cov-note { color: #5a5a52; }

/* --- Footer --- */
.footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1rem 1.5rem;
  font-size: 0.78rem;
  color: #4a4a3c;
  border-top: 1px solid #d8d3bd;
}
.footer p { margin: 0.25rem 0; }

/* --- Patch popups --- */
.patch-popup { font-size: 0.82rem; line-height: 1.45; }

/* --- Responsive: stack map above the side panel on narrow screens --- */
@media (max-width: 760px) {
  .layout { flex-direction: column; padding: 0.5rem; }
  .map { height: 55vh; min-height: 300px; width: 100%; }
  .side { width: 100%; }
  .lag-facts { flex-direction: column; gap: 0.15rem; }
  .lag-facts li { white-space: normal; }
}

/* --- Land History Report page (M2-T00) ---------------------------------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1rem 0;
}
.topbar h1 { font-size: 1.3rem; margin: 0; }
.badge {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.8rem;
  border-radius: 4px;
  text-transform: uppercase;
}
.badge[hidden] { display: none; } /* [hidden]-guard convention */
.badge.ok { background: #2e4a2e; color: #fff; }
.badge.alert { background: #b3541e; color: #fff; }
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1rem 1.5rem;
  display: grid;
  gap: 0.75rem;
}
.card {
  background: #fff;
  border: 1px solid #b9b39d;
  border-radius: 6px;
  padding: 0.75rem 1rem;
}
.card[hidden] { display: none; } /* [hidden]-guard convention */
.card h2 { font-size: 1rem; margin: 0.2rem 0 0.5rem; }
.muted { color: #5a5a52; }
.small { font-size: 0.75rem; }
.timeline {
  display: flex;
  height: 18px;
  border: 1px solid #b9b39d;
  border-radius: 3px;
  overflow: hidden;
  margin: 0.5rem 0;
}
.timeline[hidden] { display: none; } /* [hidden]-guard convention */
.tl-obs { background: #2e4a2e; }
.tl-gap {
  background: repeating-linear-gradient(
    45deg, #fdf3e7, #fdf3e7 4px, #b3541e 4px, #b3541e 8px);
}
.gap-list { margin: 0.25rem 0 0; padding-left: 1.2rem; font-size: 0.78rem; }
.gap-list[hidden] { display: none; } /* [hidden]-guard convention */
.gap-list li { margin: 0.15rem 0; }
.before-after { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 0.5rem 0; }
.before-after figure { margin: 0; flex: 1 1 240px; max-width: 360px; }
.before-after img {
  width: 100%;
  height: auto;
  border: 1px solid #b9b39d;
  border-radius: 4px;
}
.grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 0.5rem 0;
}
.grid-table[hidden] { display: none; } /* [hidden]-guard convention */
.grid-table th, .grid-table td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #e0dcc9;
}
.grid-table th { background: #ece8d8; }
.warn-box {
  background: #fdf3e7;
  border: 1px solid #b3541e;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}
#ndvi-chart[hidden] { display: none; } /* [hidden]-guard convention */