/* Kothapalle Panchayat Sevak: the volunteers' portal (ledger V2). A phone's screen first: sky blue behind, leaf green
 * words, white cards, a rail of three tabs at the bottom (four for a candidate). */
:root {
  --sky: #87ceeb;
  --sky-deep: #6cbfe2;
  --leaf: #1b5e20;          /* words on the sky: 4.5:1 */
  --leaf-2: #2e7d32;        /* buttons, with white words: 5.1:1 */
  --leaf-soft: #e3f3e6;
  --ink: #14301a;
  --muted: #4d6354;
  --line: #cfe3d5;
  --card: #fff;
  --err: #b3261e;
  --mine: #1565c0;
  --one: #c77700;
  --est: #78909c;
  --home: #7b1fa2;          /* their own home on the map (the map's paint says it again: sevak.js) */
  --radius: 16px;
  --rail-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: only light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--sky);
  color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; color: var(--leaf); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 .6em; }
a { color: var(--leaf-2); }
.small { font-size: .875rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
.err { color: var(--err); }
.ok { color: var(--leaf); }

/* ---- the load and sign-in screens */
.splash {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px calc(24px + var(--safe-b));
  gap: 20px;
}
.brand {
  margin: 0;
  color: var(--leaf);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-align: center;
  line-height: 1.15;
}
.splash-msg { color: var(--leaf); font-weight: 600; text-align: center; max-width: 30em; }
.splash .card { width: 100%; max-width: 400px; }

/* ---- cards, fields, buttons */
.card {
  display: block;
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 0 12px;
  box-shadow: 0 1px 2px rgba(20, 48, 26, .12), 0 4px 14px rgba(20, 48, 26, .08);
  color: var(--ink);
  text-decoration: none;
}
.field { display: block; margin: 0 0 14px; }
.field > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; color: var(--leaf); }
input[type=text], input[type=password], input[type=search], textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid #9bbfa8;
  border-radius: 12px;
  padding: 11px 12px;
  min-height: 48px;
}
textarea { resize: vertical; min-height: 96px; }
input:focus, textarea:focus { outline: 3px solid rgba(46, 125, 50, .35); border-color: var(--leaf-2); }
fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
legend { font-weight: 700; color: var(--leaf); margin-bottom: 8px; padding: 0; }
button, .button {
  font: inherit;
  font-weight: 600;
  border-radius: 999px;
  min-height: 46px;
  padding: 10px 18px;
  border: 1.5px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  text-align: center;
}
.primary { background: var(--leaf-2); color: #fff; }
.primary:active { background: var(--leaf); }
.secondary { background: #fff; color: var(--leaf); border-color: var(--leaf-2); }
.secondary:active { background: var(--leaf-soft); }
.danger { background: #fff; color: var(--err); border-color: #e3b3ae; }
.link-btn { background: none; color: var(--leaf-2); border: 0; text-decoration: underline; min-height: 40px; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, .button:focus-visible, a:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }
.wide { width: 100%; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.col { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.msg { min-height: 1.4em; margin: 10px 0 0; font-weight: 600; }
.msg.err { color: var(--err); }
.msg.ok { color: var(--leaf); }
.note {
  background: var(--leaf-soft);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: .9rem;
  margin: 8px 0;
}

/* ---- the app: a bar, the screens, the rail */
.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--sky);
  padding: 12px 16px 8px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}
.bar-title { color: var(--leaf); font-weight: 800; font-size: 1.08rem; }
.screens { padding: 4px 16px calc(var(--rail-h) + var(--safe-b) + 24px); max-width: 560px; margin: 0 auto; }
.screen-title { color: var(--leaf); font-size: 1.45rem; font-weight: 800; margin: 6px 0 12px; }
.list-title { margin: 18px 0 10px; }
.rail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: space-around;
  background: #fff;
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-b);
  box-shadow: 0 -2px 10px rgba(20, 48, 26, .08);
}
.rail a {
  flex: 1;
  max-width: 180px;
  height: var(--rail-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--muted);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 600;
}
.rail svg { width: 26px; height: 26px; fill: currentColor; padding: 2px 14px; box-sizing: content-box; border-radius: 999px; }
.rail a[aria-current] { color: var(--leaf); }
.rail a[aria-current] svg { background: var(--leaf-soft); }

/* ---- home */
.me { background: linear-gradient(160deg, #fff 55%, #eef8f0); }
.hello { color: var(--muted); font-weight: 600; margin: 0; }
.me-name { font-size: 1.55rem; font-weight: 800; margin: 2px 0 2px; }
.me-name-te { color: var(--muted); margin: 0 0 10px; }
.me-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 8px 0 0; }
.me-facts dt { color: var(--muted); font-size: .9rem; }
.me-facts dd { margin: 0; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .82rem;
  font-weight: 700;
  background: #fff4d6;
  color: #6b4500;
  border: 1.5px solid #f0c64a;
}
.badge.next { background: #fff; color: var(--muted); border-style: dashed; border-color: #b9c9bf; font-weight: 600; }
.stat-line { font-weight: 600; }
/* a candidate's card: indigo, with a gold star (ledger V3.3) */
.me.cand { background: linear-gradient(160deg, #fff 50%, #ecebfb); box-shadow: inset 0 0 0 2px #4b45c6, 0 4px 14px rgba(20, 48, 26, .08); }
.cand-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; }
.cand-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px;
             background: #4b45c6; color: #fff; font-weight: 700; font-size: .92rem; }
.cand-pill svg { width: 20px; height: 20px; flex: none; }
.cand-line a { color: #4b45c6; font-weight: 700; }

/* ---- a candidate's numbers */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.tile { display: flex; flex-direction: column; background: var(--card); border-radius: var(--radius); padding: 12px 14px;
        box-shadow: 0 1px 2px rgba(20, 48, 26, .12), 0 4px 14px rgba(20, 48, 26, .08); }
.tile-n { font-size: 1.5rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile-k { color: var(--muted); font-weight: 600; font-size: .9rem; }
.tile-sub { color: var(--muted); font-size: .8rem; }
/* the leanings: one bar, a 2px gap between its parts, in the team map's light steps */
.lbar { display: flex; gap: 2px; height: 14px; margin: 6px 0 10px; }
.lbar span { min-width: 3px; }
.lbar span:first-child { border-radius: 4px 0 0 4px; }
.lbar span:last-child { border-radius: 0 4px 4px 0; }
.lbar span:only-child { border-radius: 4px; }
.lb-supporter { background: #2a78d6; }
.lb-neutral { background: #a3a29b; }
.lb-against { background: #e34948; }
.lb-unmarked { background: #e3e7eb; }
.lkey { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.lkey li { display: flex; align-items: center; gap: 8px; }
.lkey li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.lk { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.table-scroll { overflow-x: auto; }
table.counts { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
table.counts th, table.counts td { padding: 6px 6px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
table.counts th { color: var(--muted); font-size: .8rem; font-weight: 700; }
table.counts th:first-child, table.counts td:first-child { text-align: left; white-space: normal; }

/* ---- surveys */
.survey-card { position: relative; }
.survey-card::after { content: '\203A'; position: absolute; right: 16px; top: 12px; font-size: 1.6rem; color: var(--leaf-2); }
.survey-card h3 { display: flex; align-items: center; gap: 10px; margin-top: 0; padding-right: 24px; }
.sv-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex: none;
           background: var(--leaf-soft); }
.sv-icon svg { width: 22px; height: 22px; fill: var(--leaf); }
.sv-icon.warn { background: #fdecea; }
.sv-icon.warn svg { fill: var(--err); }
/* a survey's bar: the doors anyone has tagged, and the doors on the map green within them (ledger V4.3.1) */
.meter { position: relative; height: 10px; border-radius: 999px; background: #dcefe3; overflow: hidden; margin: 8px 0 6px; }
.meter > span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--leaf-2); border-radius: 999px;
                transition: width .4s; }
.meter > span.tagged { background: #66bb6a; }
/* the door to tag next (ledger V4.3.4) */
.next-door { border: 2px solid var(--leaf-2); border-radius: 12px; padding: 10px 12px 4px; margin: 10px 0 12px;
             background: var(--leaf-soft); }
.next-head { margin: 0 0 .2em; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.next-name { margin: 0 0 .3em; }
.next-name .big-door { font-size: 1.6rem; }
.step h3 { display: flex; align-items: center; gap: 8px; }
.step-no {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--leaf-2);
  color: #fff;
  font-size: .9rem;
  flex: none;
}
.step.done .step-no { background: var(--mine); }
.big-door { font-size: 1.25rem; font-weight: 800; color: var(--leaf); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.chip {
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  border: 1.5px solid #b9c9bf;
  font-weight: 700;
  font-size: .95rem;
}
.chip:active { background: var(--leaf-soft); }
.list-head { margin: 14px 0 2px; font-size: .95rem; }
.list-note { margin: 0 0 4px; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; border: 2px solid transparent; }
.dot.placed { background: var(--leaf-2); }
.dot.mine { background: var(--mine); }
.dot.home { background: var(--home); }
/* Half filled, one tag of the two a door needs: amber beside green is hard to tell apart for a red-green colour-blind
   eye (OKLab ΔE 5.4 for protanopia, dataviz validator, 2026-10-31), so the fill says it as well as the colour. */
.dot.one { background: linear-gradient(90deg, var(--one) 50%, #fff 50%); border-color: var(--one); }
.dot.none { background: #fff; border-color: var(--est); }
.dot.est { background: #fff; border-color: var(--est); border-style: dashed; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--muted); margin-top: 12px; }
.legend .key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ---- problems */
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kind { position: relative; }
.kind input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.kind span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 8px;
  border-radius: 12px;
  border: 1.5px solid #b9c9bf;
  font-weight: 700;
  background: #fff;
}
.kind input:checked + span { background: var(--leaf-2); border-color: var(--leaf-2); color: #fff; }
.kind input:focus-visible + span { outline: 3px solid var(--leaf); outline-offset: 2px; }
.photo-box img { display: block; width: 100%; max-height: 260px; object-fit: contain; background: #eef4f0; border-radius: 12px; }
.where-says { font-weight: 600; }
.problem { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: start; }
.thumb {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  object-fit: cover;
  background: #eef4f0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: .75rem;
  text-align: center;
  padding: 0;
  border: 0;
}
button.thumb { min-height: 0; border-radius: 12px; overflow: hidden; }
button.thumb img { width: 100%; height: 100%; object-fit: cover; }
.problem h4 { margin: 0 0 2px; color: var(--ink); font-size: 1rem; }
.problem .desc { margin: 4px 0 6px; overflow-wrap: anywhere; white-space: pre-wrap; }
.status { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 700; }
.status.s-new { background: #e8eef7; color: #2b4a75; }
.status.s-seen { background: #fff4d6; color: #6b4500; }
.status.s-fixed { background: var(--leaf-soft); color: var(--leaf); }

/* ---- the map */
.mapview { position: fixed; inset: 0; z-index: 50; background: #dfe9e3; display: flex; flex-direction: column; }
body.map-open { overflow: hidden; }
.map-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: var(--sky);
}
.map-title { flex: 1; font-weight: 800; color: var(--leaf); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: #fff; color: var(--leaf); font-size: 1.1rem; }
.chip-btn { min-height: 38px; padding: 4px 14px; background: #fff; color: var(--leaf); border-color: var(--leaf-2); font-size: .9rem; }
.map-wrap { flex: 1; position: relative; }
/* By its id: MapLibre's stylesheet, loaded after this one, gives .maplibregl-map position: relative and overflow:
   hidden, which outranked a class here and folded the map to no height, every point and label clipped away. */
#map { position: absolute; inset: 0; }
.crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  pointer-events: none;
  z-index: 3;
}
.crosshair::before, .crosshair::after {
  content: '';
  position: absolute;
  background: #fff;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55);
}
.crosshair::before { left: 21px; top: 0; width: 2px; height: 44px; }
.crosshair::after { top: 21px; left: 0; height: 2px; width: 44px; }
.map-sheet {
  background: #fff;
  padding: 12px 16px calc(12px + var(--safe-b));
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
  z-index: 4;
}
.map-sheet p { margin: 0 0 6px; }
.map-sheet .row { margin: 6px 0 0; }
.door-label {
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  border-radius: 6px;
  padding: 0 5px;
  font: 700 12px/18px system-ui, sans-serif;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  cursor: pointer;
}
.door-label.mine { color: var(--mine); }
.door-label.home { color: var(--home); }

/* ---- sheets (dialogs from the bottom) and the toast */
dialog.sheet {
  margin: auto auto 0;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 20px 16px calc(16px + var(--safe-b));
  color: var(--ink);
  background: #fff;
}
dialog.sheet::backdrop { background: rgba(10, 30, 15, .4); }
dialog.photo { margin: auto; padding: 8px; border: 0; border-radius: 12px; max-width: 96vw; max-height: 92vh; background: #111; }
dialog.photo img { display: block; max-width: calc(96vw - 16px); max-height: calc(92vh - 70px); margin: 0 auto; }
dialog.photo::backdrop { background: rgba(0, 0, 0, .7); }
dialog.photo .link-btn { color: #fff; display: block; margin: 4px auto 0; }
.fix-acc { font-size: 2rem; font-weight: 800; color: var(--leaf); margin: 4px 0; }
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--rail-h) + var(--safe-b) + 14px);
  z-index: 80;
  max-width: calc(100vw - 32px);
  width: max-content;
  background: var(--leaf);
  color: #fff;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.toast.err { background: var(--err); }
body.map-open .toast { bottom: calc(150px + var(--safe-b)); }