/* BhuBharati Explorer, visual system */

:root {
  --ink: #1b4332;
  --ink-soft: #4c6157;
  --ink-faint: #5a6a60;
  --ink-mute: #5f7065;
  --paper: #f5f3ec;
  --paper-raised: #fcfbf7;
  --paper-sunk: #efebe0;
  --surface: #ffffff;
  --line: #d8d2c2;
  --line-soft: #e4dfd1;

  --brand: #1b4332;
  --brand-dark: #123c35;
  --brand-light: #2c5c46;
  --brand-tint: #dce8df;

  --accent: #9c4221;
  --accent-dark: #7a3419;
  --accent-tint: #f4e7dc;

  /* Bright amber reserved for dark map surfaces, where rust has no contrast. */
  --map-accent: #f6c874;

  --danger: #b3452f;
  --danger-tint: #fbe9e4;

  --content-width: min(96vw, 1760px);
  --radius-pill: 999px;
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-card:
    0 1px 2px rgba(27, 67, 50, 0.05), 0 12px 32px -18px rgba(27, 67, 50, 0.22);
  --shadow-pop: 0 24px 60px -28px rgba(27, 67, 50, 0.45);

  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-body:
    "Instrument Sans", "Noto Sans Telugu", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  /* Telugu-first stack: used wherever record data may be Telugu script. */
  --font-telugu: "Noto Sans Telugu", "Instrument Sans", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--brand-dark);
  margin: 0;
  line-height: 1.15;
}

p {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--brand);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 1300; /* must clear the sticky header when focused */
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  /* Above Leaflet's own chrome, which sits at 800 (controls) and 1000 (the
     top bar). A sticky header that loses to the zoom buttons reads as the map
     escaping its box. Order from here up: header 1100, toast 1200, skip link
     1300, see those rules. */
  z-index: 1100;
  background: rgba(246, 244, 238, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}

.header-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--brand-dark);
}

/* The mark is the favicon artwork itself, so the tab icon and the header
   badge can never drift apart. */
.brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: block;
}

.brand-mark-lg {
  width: 56px;
  height: 56px;
}

.brand strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.15;
}

.brand small {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-weight: 500;
}

.brand small.brand-by {
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  opacity: 1;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.header-nav a {
  text-decoration: none;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
}

.header-nav a:hover {
  background: var(--brand-tint);
  color: var(--brand-dark);
}

.header-nav a[aria-current="page"] {
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-weight: 600;
}

.nav-button {
  background: none;
  border: none;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
}

.nav-button:hover {
  background: var(--brand-tint);
  color: var(--brand-dark);
}

.api-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-left: 0.35rem;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.api-status[data-status="online"] .status-dot {
  background: #2f8f5b;
}

.api-status[data-status="online"] {
  color: #267548;
  border-color: #cfe8da;
}

.api-status[data-status="offline"] .status-dot {
  background: var(--danger);
}

.api-status[data-status="offline"] {
  color: var(--danger);
  border-color: #edcfc6;
}

.read-only-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.65rem;
  white-space: nowrap;
}

.read-only-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.lang-toggle {
  display: inline-flex;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}

.lang-toggle button {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-telugu);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  line-height: 1.4;
  min-height: 32px;
  min-width: 38px;
}

.lang-toggle button[aria-pressed="true"] {
  background: var(--brand);
  color: var(--paper-raised);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}

.hero-grid {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 3rem;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.hero-copy .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}

.hero-copy .eyebrow > span:first-child {
  width: 22px;
  height: 1px;
  flex: none;
  background: var(--line);
}

.hero-copy h1 {
  color: var(--ink);
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.04;
  margin-bottom: 1rem;
}

.hero-copy h1 em {
  font-style: italic;
  color: var(--accent);
}

.hero-lead {
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 1.6rem;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
}

@media (max-width: 438px) {
  .hero-actions {
    flex-direction: column;
  }
}

.hero-note {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-card);
}

.hero-note .note-kicker {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}

.hero-note ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.hero-note li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.hero-note li:first-child {
  padding-top: 0;
}

.hero-note li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.hero-note li span {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--paper-raised);
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
}

.hero-note li strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.hero-note li small {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}

.button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-primary {
  background: var(--brand);
  color: var(--paper-raised);
}

.button-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--brand-dark);
  box-shadow: 0 10px 24px -12px rgba(27, 67, 50, 0.55);
}

.button-primary:disabled {
  background: #cdc6b6;
  color: #7d7767;
  cursor: not-allowed;
}

.button-danger {
  background: var(--danger-tint);
  color: var(--danger);
  border-color: #edcfc6;
}

.button-danger:hover {
  background: #f6ddd4;
}

.button-outline {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
}

.button-outline:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

/* Secondary action alongside the primary, on the paper hero. */
.button-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--brand);
}

.button-ghost:hover {
  background: var(--paper-sunk);
  border-color: var(--brand);
}

.button-dark {
  background: var(--brand-dark);
  color: #f7f5ee;
}

.button-dark:hover {
  background: var(--brand);
}

/* ── Trust strip ──────────────────────────────────────────────────────── */

.trust-strip {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1.4rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  border-bottom: 1px solid var(--line);
}

.trust-strip div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--line);
}

.trust-strip div:first-child {
  padding-left: 0;
  border-left: none;
}

.trust-strip strong {
  font-size: 0.85rem;
  color: var(--brand-dark);
}

.trust-strip span {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* ── Workspace / explorer panel ───────────────────────────────────────── */

.workspace {
  max-width: var(--content-width);
  margin: 0 auto;
  padding-top: 1.6rem;
}

.explorer-panel {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 1.8rem;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.section-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.panel-heading h2 {
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
}

.panel-heading p:not(.section-label) {
  font-size: 0.85rem;
  color: var(--ink-faint);
  max-width: 48ch;
}

.icon-button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.icon-button:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Stepper ──────────────────────────────────────────────────────────── */

.stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
  overflow-x: auto;
}

.step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.step span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--line-soft);
  color: var(--ink-faint);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.step small {
  font-size: 0.82rem;
  color: var(--ink-faint);
  font-weight: 600;
}

.step.is-complete span {
  background: var(--brand);
  color: var(--paper-raised);
}

.step.is-active span {
  background: var(--brand);
  color: var(--paper-raised);
}

.step.is-active small,
.step.is-complete small {
  color: var(--brand-dark);
}

.stepper i {
  flex: 1;
  min-width: 20px;
  height: 2px;
  background: var(--line);
  font-style: normal;
  transition: background 0.15s ease;
}

.step.is-complete + i {
  background: var(--brand);
}

/* ── Location form ────────────────────────────────────────────────────── */

.location-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.location-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

/* The field captions only, buttons in this form carry their own label
   spans, which must not be turned into eyebrows. */
.location-form label > span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
  font-weight: 600;
}

.location-form select {
  appearance: none;
  background: var(--paper)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233f5650' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 0.85rem center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem 2.2rem 0.65rem 0.85rem;
  font-size: 0.88rem;
  color: var(--ink);
  min-width: 0;
  min-height: 48px;
  width: 100%;
  font-family: inherit;
  transition:
    border-color 0.15s ease,
    background-color 0.4s ease;
}

.location-form select:disabled {
  color: var(--ink-faint);
  cursor: not-allowed;
}

.location-form select.is-loading {
  color: transparent;
  background-image: none;
  background-color: var(--line-soft);
  background-size: 200% 100%;
  background-image: linear-gradient(
    90deg,
    var(--line-soft) 0%,
    #f8f6ec 50%,
    var(--line-soft) 100%
  );
  animation: select-shimmer 1.3s ease-in-out infinite;
}

.location-form select.is-error {
  border-color: #e3b6a6;
  color: var(--danger);
  background-color: var(--danger-tint);
}

@keyframes select-shimmer {
  0% {
    background-position: 160% 0;
  }
  100% {
    background-position: -60% 0;
  }
}

.location-form select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.location-form small {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.form-action {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

#fetch-hint {
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* ── Progress card ────────────────────────────────────────────────────── */

.progress-card {
  animation: panel-in 0.35s ease both;
  margin-top: 1.4rem;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius-md);
  background: var(--brand-tint);
  scroll-margin-top: 5.5rem;
  border: 1px solid #cfe0da;
}

.progress-card.is-error {
  background: var(--danger-tint);
  border-color: #edcfc6;
}

.progress-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}

.progress-heading > div {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.progress-heading .progress-label,
.progress-heading .progress-percent {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-dark);
}

.progress-card.is-error .progress-heading .progress-label {
  color: var(--danger);
}

.spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #cfe0da;
  border-top-color: var(--brand);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

.progress-card.is-complete .spinner,
.progress-card.is-error .spinner {
  animation: none;
  border-color: transparent;
}

.progress-card.is-complete .spinner {
  background: var(--brand);
  mask: none;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.progress-track {
  height: 6px;
  border-radius: 999px;
  background: #d8e6e0;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.progress-track span {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.progress-card.is-error .progress-track span {
  background: var(--danger);
}

.progress-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.progress-metrics .metric-value {
  font-weight: 700;
  color: var(--brand-dark);
}

/* ── Welcome state ────────────────────────────────────────────────────── */

.welcome-state {
  animation: panel-in 0.3s ease both;
  margin-top: 1.6rem;
  padding: 2.4rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 15rem;
}

/* Desktop only. `hover: hover` is the other half of the phone-and-tablet rule
   further down: it keeps this off an iPad, which would otherwise take it on
   width alone. */
@media (min-width: 860px) and (hover: hover) {
  .welcome-state {
    min-height: 18rem;
  }
}

.contour-art {
  width: 180px;
  margin: 0 auto 1rem;
  opacity: 0.55;
}

.contour-art svg {
  width: 100%;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.4;
}

.contour-art circle {
  fill: var(--accent-dark);
  stroke: none;
}

.welcome-state h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.welcome-state p {
  font-size: 0.85rem;
  color: var(--ink-faint);
  max-width: 40ch;
  margin: 0 auto;
}

/* ── Results ──────────────────────────────────────────────────────────── */

.results {
  animation: panel-in 0.4s ease both;
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.results-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.results-heading h3 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}

#results-breadcrumb {
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.export-menu {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
  margin-bottom: 1.3rem;
}

.stats-grid article {
  background: rgba(246, 244, 238, 0.1);
  border: 1px solid rgba(246, 244, 238, 0.14);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.stats-grid span {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(246, 244, 238, 0.7);
  font-weight: 600;
}

.stats-grid .stat-value {
  font-size: 1.35rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--paper-raised);
  font-variant-numeric: tabular-nums;
}

.stats-grid small {
  font-size: 0.72rem;
  color: rgba(246, 244, 238, 0.7);
  line-height: 1.3;
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */

.results-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}

/* A tablet takes the phone layout, so it takes the phone's measure with it:
   stretched over an iPad in landscape, a one-column layout runs to 150
   characters a line. Portrait is nearly full width at this cap; landscape is a
   centred column, which is the same page, not a different one. */
@media (pointer: coarse) and (min-width: 700px) and (max-width: 1366px) {
  :root {
    --content-width: min(94vw, 820px);
  }
}

/* The phone layout, and every tablet with it: an iPad is a touch device held
   in two hands, not a small desktop, so the second half of these queries hands
   it the phone layout up to the widest iPad there is — 1366px, the 12.9" in
   landscape. `pointer: coarse` is what keeps a laptop out of it, including a
   laptop with a touchscreen, whose primary pointer is still a mouse. */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px) {
  .results-toolbar {
    grid-template-columns: 1fr;
  }
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.search-field svg {
  position: absolute;
  left: 0.8rem;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 2;
  pointer-events: none;
}

.search-field input {
  width: 100%;
  padding: 0.75rem 0.9rem 0.75rem 2.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-family: var(--font-telugu);
  color: var(--ink);
  background: var(--surface);
}

.search-field input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.compact-field select {
  appearance: none;
  background: var(--paper-raised)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233f5650' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 0.7rem center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.75rem 2rem 0.75rem 0.9rem;
  font-size: 0.85rem;
  color: var(--ink);
}

.search-help a {
  color: var(--brand-dark);
  text-underline-offset: 3px;
}

.search-help {
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}

/* ── Table ────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  min-height: 20rem;
}
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px) {
  .table-wrap {
    border: none;
    border-radius: 0;
  }
  .explorer-panel {
    padding: 1.2rem;
  }
  .compact-field select {
    width: 100%;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 760px;
}

thead th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  background: var(--paper);
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}

tbody td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  color: var(--ink-soft);
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--brand-tint);
}

.mono {
  font-variant-numeric: tabular-nums;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.8rem;
}

.owner-cell strong {
  display: block;
  font-family: var(--font-telugu);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-cell small {
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-faint);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-size: 0.75rem;
  font-weight: 600;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-text {
  font-size: 0.78rem;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 220px;
}

.record-action {
  text-align: right;
}

.view-record {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    transform 0.12s ease;
}

.view-record:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--paper-raised);
  transform: translateX(1px);
}

.view-record .view-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.no-results {
  padding: 2rem;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.88rem;
}

/* ── Pagination ───────────────────────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.pagination > div {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.page-button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
}

.page-button:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.page-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Utility ──────────────────────────────────────────────────────────── */

.is-hidden {
  display: none !important;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

/* ── SEO / About & FAQ ────────────────────────────────────────────────── */

.seo-content {
  margin-top: 15px;
  margin-bottom: 15px;
  border-top: 1px solid var(--line);
  background: var(--paper-raised);
}

.seo-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 3.5rem;
}

.seo-inner h2 {
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}

.seo-inner > p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.faq-list {
  margin-top: 2.5rem;
  display: grid;
  gap: 0.75rem;
}

.faq-list details {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  background: var(--paper);
}

.faq-list summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--brand-dark);
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  float: right;
  color: var(--ink-faint);
}

.faq-list details[open] summary::after {
  content: "\2212";
}

.faq-list details p {
  margin-top: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

footer {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  border-top: 1px solid var(--line);
}

footer strong {
  display: block;
  font-family: var(--font-display);
  color: var(--brand-dark);
  margin-bottom: 0.3rem;
}

footer p {
  font-size: 0.8rem;
  color: var(--ink-faint);
  max-width: 44ch;
}

footer > div:last-child {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

footer a,
footer button {
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--line);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
}

footer a:hover,
footer button:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

/* ── Dialogs ──────────────────────────────────────────────────────────── */

dialog.modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  width: min(640px, 92vw);
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: var(--shadow-pop);
  color: var(--ink);
}

dialog.modal::backdrop {
  background: rgba(11, 42, 37, 0.55);
  backdrop-filter: blur(2px);
}

.modal-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.modal-heading h2 {
  font-size: 1.15rem;
}

.close-button {
  background: var(--paper);
  border: 1px solid var(--line);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.close-button:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.record-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.2rem;
}

.record-detail-grid div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line-soft);
}

.record-detail-grid div:last-child {
  border-bottom: none;
}

@media (min-width: 640px) and (hover: hover) {
  .record-detail-grid {
    grid-template-columns: 1fr 1fr;
  }

  .record-detail-grid div {
    border-right: 1px solid var(--line-soft);
  }

  .record-detail-grid div:nth-child(2n) {
    border-right: none;
  }

  .record-detail-grid div:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

.record-detail-grid dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-weight: 700;
}

.record-detail-grid dd {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink);
}

.modal-note {
  font-size: 0.78rem;
  color: var(--ink-faint);
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
}

.info-modal h3 {
  font-size: 0.95rem;
  margin: 1rem 0 0.4rem;
  color: var(--brand-dark);
}

.info-modal p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.info-modal code {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
  font-size: 0.8rem;
}

.info-modal pre {
  background: var(--brand-dark);
  color: #dcece6;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  overflow-x: auto;
}

.modal-subnote {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}

.landholder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 50vh;
  overflow-y: auto;
}

.landholder-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "rank name extent";
  align-items: center;
  gap: 0.35rem 0.8rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}

.landholder-list li.is-top {
  border-color: var(--accent-dark);
  background: var(--accent-tint);
}

.landholder-rank {
  grid-area: rank;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-dark);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.landholder-name {
  grid-area: name;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.landholder-name strong {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.landholder-name small {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

.landholder-extent {
  grid-area: extent;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.landholder-extent strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-dark);
  white-space: nowrap;
}

.landholder-extent small {
  font-size: 0.72rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

.landholder-empty {
  text-align: center;
  padding: 1.5rem;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  .landholder-modal {
    padding: 1rem 0.9rem 1.1rem;
    width: min(640px, 96vw);
  }

  .landholder-modal .modal-heading {
    margin-bottom: 0.7rem;
  }

  .landholder-modal .modal-heading h2 {
    font-size: 1.02rem;
  }

  .landholder-modal .modal-subnote {
    font-size: 0.74rem;
    line-height: 1.45;
    margin-bottom: 0.75rem;
  }

  .landholder-list {
    max-height: none;
    gap: 0.4rem;
  }

  .landholder-list li {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    grid-template-areas:
      "rank name"
      ".    extent";
    align-items: start;
    gap: 0.15rem 0.55rem;
    padding: 0.5rem 0.6rem;
  }

  .landholder-rank {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.7rem;
  }

  .landholder-name {
    padding-top: 0.15rem;
  }

  .landholder-name strong {
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .landholder-name small {
    font-size: 0.72rem;
    line-height: 1.3;
  }

  .landholder-extent {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.35rem;
    text-align: left;
  }

  .landholder-extent strong {
    font-size: 0.78rem;
  }

  .landholder-extent small {
    font-size: 0.7rem;
    white-space: normal;
  }

  .landholder-extent small::before {
    content: "·";
    margin-right: 0.35rem;
  }
}

/* ── Toast ────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  transform: translateY(12px);
  background: var(--brand-dark);
  color: #f2efe4;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  box-shadow: var(--shadow-pop);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 1200; /* over both the map and the sticky header */
  max-width: min(90vw, 460px);
}

.toast span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fd6ab;
  flex-shrink: 0;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 860px), (pointer: coarse) and (max-width: 1366px) {
  /* The sample entry is an illustration of the output, not a step in the
     journey. Stacked under the hero it just pushes the real content down,
     so on a phone the tool cards below carry that job instead. */
  .sample-record {
    display: none;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .location-form {
    grid-template-columns: 1fr;
  }

  /* Stacked, the vertical rules become stray indents. */
  .trust-strip {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .trust-strip div {
    padding-left: 0;
    border-left: none;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line-soft);
  }

  .trust-strip div:first-child {
    padding-top: 0;
    border-top: none;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid span {
    font-size: 0.66rem;
    letter-spacing: 0.02em;
  }

  .results-toolbar {
    grid-template-columns: 1fr;
  }

  .record-detail-grid {
    grid-template-columns: 1fr;
  }

  .header-nav a,
  .header-nav .nav-button {
    display: none;
  }

  .header-nav .api-status,
  .header-nav .read-only-pill {
    display: none;
  }

  .brand small {
    white-space: nowrap;
  }

  .brand strong {
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  .stepper {
    display: grid;
    grid-template-columns: 1fr 12px 1fr 12px 1fr 12px 1fr;
    gap: 0.2rem;
    overflow: visible;
  }

  .step {
    min-width: 0;
    flex-direction: column;
    gap: 0.3rem;
  }

  .step small {
    font-size: 0.7rem;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .stepper i {
    min-width: 0;
    width: 100%;
    align-self: start;
    margin-top: 13px;
  }

  .table-wrap {
    min-height: 0;
  }

  table,
  thead,
  tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  thead {
    display: none;
  }

  tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 0.85rem;
    background: var(--paper-raised);
  }

  tbody td {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
  }
  tbody td:nth-child(odd) {
    border-right: 1px solid var(--line);
  }

  tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    font-weight: 700;
  }

  .owner-cell,
  td[data-label="Land status"],
  .record-action {
    grid-column: 1 / -1;
  }

  .owner-cell strong,
  .owner-cell small {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .owner-cell strong {
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .record-action {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
  }

  .view-record {
    display: inline-flex;
    flex-direction: row;
    width: auto;
    height: auto;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    gap: 0.3rem;
  }

  .view-record .view-label {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }
}

/* ── Documentation / policy pages ────────────────────────────────────── */

.doc-hero {
  border-bottom: 1px solid var(--line);
  background: var(--brand-tint);
}

.doc-hero-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 3.2rem 1.5rem 2.4rem;
}

.doc-hero .section-label {
  color: var(--brand-dark);
}

.doc-hero h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0.3rem 0 0.7rem;
}

.doc-hero p {
  color: var(--ink-soft);
  max-width: 62ch;
  font-size: 1rem;
}

.doc-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

.doc-shell {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2.8rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.doc-toc {
  position: sticky;
  top: 1.5rem;
  display: grid;
  gap: 0.15rem;
  font-size: 0.85rem;
}

.doc-toc p {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

.doc-toc a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.35rem 0;
  border-left: 2px solid transparent;
  padding-left: 0.7rem;
}

.doc-toc a:hover {
  color: var(--brand-dark);
  border-left-color: var(--accent-dark);
}

.doc-content {
  min-width: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.65;
}

.doc-content section {
  margin-bottom: 2.4rem;
  scroll-margin-top: 1.5rem;
}

.doc-content h2 {
  font-size: 1.25rem;
  margin-bottom: 0.7rem;
}

.doc-content h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  margin: 1.3rem 0 0.5rem;
}

.doc-content p {
  color: var(--ink-soft);
  margin-bottom: 0.85rem;
}

.doc-content ul,
.doc-content ol {
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.4rem;
}

.doc-content li strong {
  color: var(--ink);
}

.doc-content a {
  color: var(--brand-dark);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.doc-content a:hover {
  text-decoration-color: var(--brand-dark);
}

.doc-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1.2rem;
  font-size: 0.9rem;
}

.doc-content th,
.doc-content td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  vertical-align: top;
}

.doc-content th {
  background: var(--paper-raised);
  color: var(--brand-dark);
  font-weight: 700;
}

.doc-content td {
  color: var(--ink-soft);
}

.doc-callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-dark);
  background: var(--paper-raised);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.2rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.doc-callout strong {
  color: var(--ink);
}

.doc-cross-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.doc-cross-links a {
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
}

.doc-cross-links a:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.footer-legal {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}

.footer-legal a {
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--ink-faint);
}

.footer-legal a:hover {
  color: var(--brand-dark);
  text-decoration: underline;
}

@media (max-width: 860px), (pointer: coarse) and (max-width: 1366px) {
  .doc-shell {
    grid-template-columns: 1fr;
  }

  .doc-toc {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1rem;
  }

  .doc-toc a {
    border-left: none;
    padding-left: 0;
  }
}

/* ── Survey map ───────────────────────────────────────────────────────────
 * Parcel boundaries sit on satellite imagery, so the surface under the map is
 * dark while the rest of the page is paper. The card keeps that switch
 * contained.
 */

.survey-map-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  padding: 1rem 1.1rem;
  margin-bottom: 1.3rem;
}

.survey-map-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.survey-map-heading h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin: 0.2rem 0 0.35rem;
}

#survey-map-note {
  font-size: 0.8rem;
  color: var(--ink-faint);
  max-width: 62ch;
  margin: 0;
}

.survey-map-body {
  margin-top: 1rem;
}

.survey-map-status {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}

.survey-map-status[data-tone="busy"] {
  color: var(--ink-faint);
}

.survey-map-status[data-tone="warn"] {
  color: var(--accent-dark);
}

.survey-map-status[data-tone="error"] {
  color: var(--danger);
}

.survey-map {
  height: clamp(320px, 55vh, 620px);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--brand-dark);
}

.survey-map-footer {
  margin-top: 0.7rem;
  display: grid;
  gap: 0.4rem;
}

#survey-map-selection {
  font-size: 0.85rem;
  color: var(--ink);
  margin: 0;
}

.survey-map-disclaimer {
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin: 0;
  max-width: 78ch;
}

/* Leaflet ships its own type and chrome, grey canvas, white control boxes,
 * #0078A8 links, and a flag icon beside its own credit. None of it belongs on
 * a dark satellite map in this palette.
 *
 * Every rule below is anchored on .survey-map.leaflet-container on purpose.
 * leaflet.css is injected into <head> at runtime, so it lands *after* this
 * stylesheet and wins any tie on source order, and its own chrome rules are
 * already two classes deep (".leaflet-container .leaflet-control-attribution").
 * Anchoring on the container's two classes makes each of these three, which
 * settles the cascade regardless of when leaflet.css loads.
 *
 * The attribution text itself stays. Esri's and OpenStreetMap's tile terms
 * both require the credit, and TGRAC is owed it for the boundaries. */

.survey-map.leaflet-container {
  font-family: var(--font-body);
  background: var(--brand-dark);
}

.survey-map.leaflet-container .leaflet-control-attribution {
  background: rgba(11, 42, 37, 0.72);
  color: rgba(247, 245, 238, 0.75);
  font-size: 0.66rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm) 0 0 0;
}

.survey-map.leaflet-container .leaflet-control-attribution a {
  color: var(--map-accent);
  text-decoration: none;
}

.survey-map.leaflet-container .leaflet-control-attribution a:hover {
  text-decoration: underline;
}

/* Leaflet's own flag glyph, the one piece of its credit that is decoration
   rather than attribution. */
.survey-map.leaflet-container .leaflet-attribution-flag {
  display: none !important;
}

.survey-map.leaflet-container .leaflet-bar,
.survey-map.leaflet-container .leaflet-control-layers {
  border: 1px solid rgba(247, 245, 238, 0.18);
  box-shadow: 0 1px 6px rgba(11, 42, 37, 0.5);
  background: rgba(11, 42, 37, 0.82);
}

.survey-map.leaflet-container .leaflet-bar a,
.survey-map.leaflet-container .leaflet-control-layers-toggle {
  background-color: transparent;
  color: var(--paper);
  border-bottom-color: rgba(247, 245, 238, 0.18);
}

.survey-map.leaflet-container .leaflet-bar a:hover,
.survey-map.leaflet-container .leaflet-bar a:focus {
  background-color: rgba(247, 245, 238, 0.12);
  color: var(--map-accent);
}

/* The layers icon is a dark PNG; invert it so it reads on the dark control. */
.survey-map.leaflet-container .leaflet-control-layers-toggle {
  filter: invert(1) brightness(1.4);
}

.survey-map.leaflet-container .leaflet-control-layers-expanded {
  color: var(--paper);
  padding: 0.45rem 0.7rem 0.45rem 0.5rem;
}

.survey-map.leaflet-container
  .leaflet-control-layers-expanded
  .leaflet-control-layers-toggle {
  filter: none;
}

/* Clicking a parcel focuses its SVG path, and the browser paints its default
   focus ring over it, a blue box with a white inner edge, straight across the
   boundary you just selected. The parcel already shows it is selected by going
   white and filling, so the ring is suppressed for pointer clicks. Keyboard
   focus keeps a ring, in the palette, because nothing else marks it there. */
.survey-map.leaflet-container path.leaflet-interactive:focus,
.survey-map.leaflet-container:focus {
  outline: none;
}

.survey-map.leaflet-container path.leaflet-interactive:focus-visible {
  outline: 2px solid var(--map-accent);
  outline-offset: 2px;
}

.survey-map.leaflet-container:focus-visible {
  outline: 2px solid var(--map-accent);
  outline-offset: -2px;
}

.survey-map.leaflet-container .parcel-tooltip {
  background: rgba(11, 42, 37, 0.88);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--map-accent);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  box-shadow: none;
}

.survey-map.leaflet-container .parcel-tooltip::before {
  display: none;
}

/* ── Row and dialog map actions ──────────────────────────────────────── */

.record-action-buttons {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.map-record {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-dark);
  cursor: pointer;
}

.map-record:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.9rem 0;
}

@media (max-width: 900px), (pointer: coarse) and (max-width: 1366px) {
  .survey-map-card {
    padding: 0.9rem;
  }

  .survey-map-heading {
    flex-direction: column;
    align-items: stretch;
  }

  #survey-map-toggle {
    width: 100%;
  }

  /* The mobile card lays each cell out as label-above-value; the two actions
     stay together on the right of that row rather than being spread apart. */
  .record-action {
    justify-content: space-between;
  }
}

/* ── Redesign: village band, chips, record cards, bottom nav ──────────── */

/* The results header becomes a deep-green band carrying the village
   identity and its four summary tiles, per the redesign. */
.village-band {
  background: var(--brand);
  color: var(--paper-raised);
  border-radius: var(--radius-xl);
  padding: 1.15rem 1.35rem 1.25rem;
  margin-bottom: 1.2rem;
}

.village-band .back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.8rem;
  color: rgba(246, 244, 238, 0.72);
  margin-bottom: 0.5rem;
}

.village-band .back-link:hover {
  color: var(--paper-raised);
}

.village-band .results-heading {
  align-items: flex-end;
  margin-bottom: 1rem;
}

.village-band .section-label {
  color: rgba(246, 244, 238, 0.6);
}

.village-band h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--paper-raised);
  margin-bottom: 0.2rem;
}

.village-band #results-breadcrumb {
  font-size: 0.8rem;
  color: rgba(246, 244, 238, 0.72);
}

.village-band .stats-grid {
  margin-bottom: 0;
}

/* Export buttons sit on the dark band, so they need their own outline. */
.village-band .button-outline {
  border-color: rgba(246, 244, 238, 0.32);
  color: var(--paper-raised);
}

.village-band .button-outline:hover {
  border-color: var(--paper-raised);
  background: rgba(246, 244, 238, 0.12);
  color: var(--paper-raised);
}

.village-band .button-dark {
  background: var(--paper-raised);
  color: var(--brand-dark);
}

.village-band .button-dark:hover {
  background: #fff;
}

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px) {
  .village-band {
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem 1.1rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
}

/* ── Filter chips ─────────────────────────────────────────────────────── */

.filter-chips {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.15rem;
  margin-bottom: 0.65rem;
}

.filter-chips::-webkit-scrollbar {
  display: none;
}

.chip {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.79rem;
  font-weight: 600;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-telugu);
}

.chip:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.chip[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--paper-raised);
}

/* ── Mobile record cards ──────────────────────────────────────────────── */

/* Below the table breakpoint the six-column grid stops being readable, so
   the same records render as cards. Both views are built from the same
   record objects and both keep the → arrow that opens the full entry. */
.record-cards {
  display: none;
  flex-direction: column;
  gap: 0.55rem;
}

.record-card {
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 0.9rem;
  font: inherit;
  color: inherit;
  display: block;
}

.record-card:hover,
.record-card:focus-visible {
  border-color: var(--brand);
}

.record-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.record-card-id {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
  font-weight: 600;
}

.record-card-owner {
  font-family: var(--font-telugu);
  font-size: 1.03rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.2rem;
  color: var(--ink);
}

.record-card-rel {
  font-size: 0.79rem;
  color: var(--ink-soft);
  margin-top: 0.1rem;
}

.record-card-extent {
  text-align: right;
  flex-shrink: 0;
}

.record-card-extent b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  display: block;
  color: var(--ink);
}

.record-card-extent small {
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  display: block;
  margin-top: 0.15rem;
}

.record-card-tags {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}

.tag {
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  background: var(--paper-sunk);
  color: var(--ink-soft);
  font-family: var(--font-telugu);
}

.tag-ag {
  background: #e3eadf;
  color: var(--brand);
}

.tag-nonag {
  background: var(--accent-tint);
  color: var(--accent);
}

.tag-signed {
  background: var(--brand-tint);
  color: var(--brand);
}

.record-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line-soft);
}

.record-card .view-record {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  width: auto;
  height: auto;
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
  border-color: var(--brand);
  background: var(--brand);
  color: var(--paper-raised);
}

.record-card .view-record:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: none;
}

.record-card .map-record {
  margin-right: auto;
}

.record-card .view-record .view-label {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
}

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px) {
  .record-cards {
    display: flex;
  }

  #results .table-wrap {
    display: none;
  }
}

/* ── Mobile bottom navigation ─────────────────────────────────────────── */

.bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Above the map picker (1060) and the parcel sheet (1050), under the
     sticky header (1100) and the toast (1200). */
  z-index: 1070;
  grid-template-columns: repeat(4, 1fr);
  background: var(--paper-raised);
  border-top: 1px solid var(--line-soft);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 58px;
  text-decoration: none;
  color: var(--ink-mute);
  font-size: 0.66rem;
  font-weight: 600;
  font-family: var(--font-telugu);
}

.bottom-nav a[aria-current="page"] {
  color: var(--brand);
  background: var(--paper-sunk);
}

.bottom-nav svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1000px), (pointer: coarse) and (max-width: 1366px) {
  .header-nav > :is(a, .nav-button, .api-status, .read-only-pill) {
    display: none;
  }

  .toast {
    bottom: calc(74px + env(safe-area-inset-bottom));
  }

  .bottom-nav {
    display: grid;
  }

  /* Keep the last of the page clear of the fixed bar. */
  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }
}

/* ── Records page intro ───────────────────────────────────────────────── */

/* /records opens straight into the explorer, so it gets a short band rather
   than the landing page's full hero. */
.records-intro {
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}

.records-page[data-stage="setup"] {
  --content-width: min(94vw, 1120px);
}

.records-intro-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2.2rem 1.5rem 1.8rem;
}

.records-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--ink);
  margin: 0.2rem 0 0.5rem;
}

.records-intro p:not(.section-label) {
  color: var(--ink-soft);
  max-width: 62ch;
  font-size: 0.95rem;
  text-wrap: pretty;
}

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px) {
  .records-intro-inner {
    padding: 1.5rem 1.1rem 1.2rem;
  }
}

/* ── Records page: two stages ─────────────────────────────────────────────
 * Step 1 is the village picker and says so. What follows is the village's
 * records, titled by the village, not by a step number, so the picker gets
 * out of the way rather than sitting above a table it no longer governs.
 */

[data-stage="setup"] [data-stage-only="results"],
[data-stage="results"] [data-stage-only="setup"] {
  display: none;
}

/* With the picker hidden there is nothing above the results to rule off. */
[data-stage="results"] .results {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

[data-stage="results"] .explorer-panel {
  padding: 1.1rem;
}

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px) {
  [data-stage="results"] .explorer-panel {
    padding: 0.75rem;
  }
}

/* ── Landing page ─────────────────────────────────────────────────────────
 * The homepage has to answer "what is this" before it asks for a click, so
 * it runs hero → what you can do → how it works → what comes back → About.
 * Backgrounds alternate paper / raised / deep green to give it a spine.
 */

.hero-meta {
  margin-top: 1.1rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* A real entry, rendered the way the app renders it, so the hero shows the
   output instead of describing it. */
.sample-record {
  margin: 0;
}

.sample-caption {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}

.sample-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  padding: 1.15rem 1.25rem 1.25rem;
  box-shadow: var(--shadow-card);
}

.sample-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.sample-extent {
  text-align: right;
  flex-shrink: 0;
}

.sample-extent b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}

.sample-extent small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.sample-fields {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 0.55rem;
}

.sample-fields div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.sample-fields dt {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.sample-fields dd {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: right;
  color: var(--ink);
}

/* ── What you can do ──────────────────────────────────────────────────── */

.tools {
  background: var(--paper-raised);
  border-bottom: 1px solid var(--line-soft);
}

.tools-inner,
.fields-inner,
.how-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 3.4rem 1.5rem;
}

.tools h2,
.how h2,
.fields h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 1.8rem;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.tool-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.4rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.tool-card:hover,
.tool-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: var(--shadow-card);
}

.tool-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--brand-tint);
  color: var(--brand);
  display: grid;
  place-items: center;
  margin-bottom: 0.4rem;
}

.tool-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-card h3 {
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
}

.tool-card p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.tool-cta {
  margin-top: auto;
  padding-top: 0.8rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--accent);
}

/* ── How it works ─────────────────────────────────────────────────────── */

/* The one dark band on the page: it anchors the middle and echoes the
   village header the records view opens with. */
.how {
  background: var(--brand);
  color: var(--paper-raised);
}

.how h2 {
  color: var(--paper-raised);
}

.how .section-label {
  color: rgba(246, 244, 238, 0.6);
}

.how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.how-steps li {
  border-top: 1px solid rgba(246, 244, 238, 0.22);
  padding-top: 1rem;
}

.how-num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: rgba(246, 244, 238, 0.55);
}

.how-steps h3 {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--paper-raised);
  margin-top: 0.3rem;
}

.how-sub {
  font-size: 0.8rem;
  color: rgba(246, 244, 238, 0.6);
  margin-top: 0.15rem;
}

.how-steps li > p:last-child {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(246, 244, 238, 0.82);
  text-wrap: pretty;
}

/* ── What comes back ──────────────────────────────────────────────────── */

.fields {
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}

.fields-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 2.5rem;
  align-items: start;
}

.fields-copy h2 {
  margin-bottom: 0.9rem;
}

.fields-copy p:not(.section-label) {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 44ch;
  text-wrap: pretty;
}

.field-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.field-list li {
  padding: 0.8rem 1.1rem;
  font-size: 0.86rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-telugu);
}

.field-list li:nth-child(odd) {
  border-right: 1px solid var(--line-soft);
}

.field-list li:nth-last-child(-n + 2) {
  border-bottom: none;
}

@media (max-width: 900px), (pointer: coarse) and (max-width: 1366px) {
  .tool-grid,
  .how-steps {
    grid-template-columns: 1fr;
  }

  .how-steps {
    gap: 1.1rem;
  }

  .fields-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .tools-inner,
  .fields-inner,
  .how-inner {
    padding: 2.4rem 1.1rem;
  }
}

@media (max-width: 480px) {
  .field-list {
    grid-template-columns: 1fr;
  }

  .field-list li:nth-child(odd) {
    border-right: none;
  }

  .field-list li:nth-last-child(2) {
    border-bottom: 1px solid var(--line-soft);
  }
}