/* Hemkunt Foundation - Nepal missing-person tracing.

   No web fonts. Latin and Devanagari both render in the device's own family,
   which is faster on 2G than anything we could ship and better hinted. Every
   control clears 44px, because this is used with a thumb, on a phone, outdoors. */

:root {
  /* Brand, sampled from the Hemkunt mark. */
  --navy:       #2e3192;
  --blue:       #1b62ac;
  --blue-soft:  #7fa8d9;
  --orange:     #f58220;

  --ink:        #151823;
  --ink-2:      #4a5164;
  --ink-3:      #7b8398;
  --line:       #e3e6ed;
  --line-2:     #eef0f5;
  --bg:         #f4f6f9;
  --card:       #ffffff;

  /* Status. Grey for deceased is deliberate: alarm is the wrong register. */
  --missing:    #c62828;
  --safe:       #1c7a45;
  --injured:    #b26a00;
  --closed:     #6b7280;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r:    12px;
  --r-sm: 9px;
  --shadow:    0 1px 2px rgba(21, 24, 35, .05);
  --shadow-up: 0 6px 20px rgba(21, 24, 35, .10);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}

img { max-width: 100%; }

/* ------------------------------------------------------------------ header */

.masthead {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .5rem;
  padding: 1.1rem 1.25rem .9rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
/* Capped to a 150x150 box. The mark is a stacked lockup, so it fills that box
   almost square rather than running wide like a wordmark would. */
.masthead .logo {
  flex: 0 0 auto;
  width: 150px; height: 150px;
  object-fit: contain;
}
.masthead h1 {
  margin: 0;
  font-size: 1.15rem; font-weight: 700; line-height: 1.25;
  letter-spacing: -.01em; color: var(--navy);
}
.masthead h1 small { display: block; font-weight: 400; font-size: .85em; color: var(--ink-3); }
.masthead nav { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; }
.masthead nav a {
  padding: .45rem .8rem; border-radius: 999px;
  font-size: .92rem; font-weight: 500; color: var(--blue); text-decoration: none;
}
.masthead nav a:hover { background: var(--line-2); }

.wrap { max-width: 34rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.wrap-wide { max-width: 66rem; }

h2 { font-size: 1.5rem; line-height: 1.25; margin: .25rem 0 .5rem; letter-spacing: -.01em; }
h3 { margin: 0; }
.lede { color: var(--ink-2); margin: 0 0 1.5rem; max-width: 42rem; }

.err {
  background: #fdeceb; border: 1px solid #f2bab7; color: #8d1f1c;
  padding: .8rem 1rem; border-radius: var(--r); margin: 0 0 1.25rem;
}

/* ------------------------------------------------------------------- forms */

fieldset {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  padding: 1.1rem 1.1rem .35rem; margin: 0 0 1.25rem; box-shadow: var(--shadow);
}
legend { font-weight: 600; font-size: .95rem; padding: 0 .4rem; color: var(--navy); }

.f { margin-bottom: 1.35rem; }
.f label { display: block; font-weight: 600; margin-bottom: .4rem; }
.hint { display: block; font-weight: 400; font-size: .86rem; color: var(--ink-3); margin-top: .2rem; }

input[type=text], input[type=tel], input[type=number], input[type=date],
input[type=file], select, textarea {
  width: 100%; min-height: 48px; padding: .65rem .8rem;
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
textarea { min-height: 104px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px; border-color: var(--blue);
}

.choices { display: grid; gap: .5rem; }
.choice {
  display: flex; align-items: center; gap: .65rem; min-height: 48px;
  padding: .4rem .8rem; margin: 0; font-weight: 400;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.choice:hover { border-color: var(--blue-soft); }
.choice input { width: 21px; height: 21px; flex: 0 0 auto; accent-color: var(--blue); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.3rem;
  font: inherit; font-weight: 600; text-align: center; text-decoration: none;
  color: #fff; background: var(--blue); border: 1px solid var(--blue);
  border-radius: var(--r-sm); cursor: pointer;
}
.btn:hover { background: #17548f; border-color: #17548f; }
.btn-secondary { color: var(--blue); background: var(--card); border-color: var(--line); }
.btn-secondary:hover { background: var(--line-2); border-color: var(--blue-soft); }
.btn-sm { min-height: 40px; padding: .4rem .85rem; font-size: .9rem; }

/* ----------------------------------------------------------------- receipt */

.receipt {
  background: var(--card); border: 2px dashed var(--navy); border-radius: var(--r);
  padding: 1.6rem 1rem; text-align: center; margin: 0 0 1.5rem;
}
.receipt .label { font-size: .85rem; color: var(--ink-3); }
.receipt .code {
  font-family: var(--mono); font-size: 2.5rem; font-weight: 700;
  letter-spacing: .06em; margin: .4rem 0; color: var(--navy); word-break: break-all;
}
.receipt .keep { margin: 0; font-weight: 600; }

/* ---------------------------------------------------------------- the list */

.toolbar { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.1rem; }
.toolbar input[type=text] { flex: 1 1 13rem; width: auto; }
.toolbar select { flex: 0 1 11rem; width: auto; }

.count { color: var(--ink-3); font-size: .9rem; }
.live {
  display: inline-block; width: 7px; height: 7px; margin-right: .45rem;
  border-radius: 50%; background: var(--safe); vertical-align: middle;
}

/* Uniform cells on purpose: scanning a missing-persons list is a visual search,
   and a face larger than its neighbours reads as more important, which it is
   not. A square crop plus clamped text is what keeps the rows level. */
.rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 54rem) {
  .rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.person {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.person:hover { box-shadow: var(--shadow-up); transform: translateY(-2px); }

.shot { position: relative; background: var(--line-2); }
.shot img, .noshot { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.shot img { cursor: zoom-in; }
.noshot {
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; font-weight: 600; letter-spacing: .03em;
  color: #fff; background: linear-gradient(145deg, var(--blue-soft), var(--blue));
}
.shot .pill { position: absolute; left: .55rem; bottom: .55rem; }

.who { display: flex; flex-direction: column; flex: 1 1 auto; padding: .8rem .85rem .7rem; }
.who .nm {
  font-size: 1rem; font-weight: 650; line-height: 1.3; letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;                 /* two lines, always */
}
.who .alt { font-size: .87rem; color: var(--ink-3); margin-top: .1rem; }
.who .meta { color: var(--ink-2); font-size: .875rem; margin-top: .3rem; }
.who .seen {
  color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.5em;
}
.who .foot {
  display: flex; gap: .5rem; justify-content: space-between; align-items: baseline;
  margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line-2);
}
.who .foot .cid { font-size: .78rem; }
.who .foot .cid:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}

.nm { font-weight: 600; }
.cid { font-family: var(--mono); font-size: .82rem; color: var(--ink-3); }
.meta { color: var(--ink-2); font-size: .9rem; }
.top { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }

.pill {
  display: inline-block; font-size: .74rem; font-weight: 600;
  padding: .18rem .6rem; border-radius: 999px; color: #fff;
  background: var(--closed); white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.pill.s-missing       { background: var(--missing); }
.pill.s-found_safe    { background: var(--safe); }
.pill.s-found_injured { background: var(--injured); }
.pill.s-deceased      { background: var(--closed); }
.pill.s-closed        { background: var(--ink-3); }

.empty {
  grid-column: 1 / -1;
  background: var(--card); border: 1px dashed var(--line);
  border-radius: var(--r); padding: 2.5rem 1rem; text-align: center; color: var(--ink-3);
}

/* --------------------------------------------------------------- lightbox */

.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 1.5rem; background: rgba(12, 14, 20, .93);
}
.lightbox[hidden] { display: none; }
/* Scale to fit the viewport, never past the image's own size, never cropped. */
.lightbox img {
  max-width: 100%; max-height: 82vh;
  width: auto; height: auto;
  object-fit: contain; border-radius: var(--r);
}
.lb-cap { margin: 0; color: #fff; font-weight: 600; text-align: center; }
.lb-close {
  position: absolute; top: .75rem; right: .75rem; width: 48px; height: 48px;
  font-size: 1.9rem; line-height: 1; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .15); border: 0; border-radius: 50%;
}
.lb-close:hover { background: rgba(255, 255, 255, .28); }

/* ---------------------------------------------------------------- console */

.logo-block { text-align: center; margin-bottom: 1.5rem; }
.logo-block img { height: 76px; width: auto; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .6rem; margin-bottom: 1.25rem; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: .7rem .85rem; box-shadow: var(--shadow);
}
.stat b { display: block; font-size: 1.7rem; line-height: 1.1; letter-spacing: -.02em; }
.stat span { font-size: .78rem; color: var(--ink-3); }
.stat.alert { border-color: var(--orange); }
.stat.alert b { color: var(--orange); }

.admin-row {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: .75rem 1rem; margin-bottom: .6rem; box-shadow: var(--shadow);
}
.admin-row summary { cursor: pointer; list-style: none; }
.admin-row summary::-webkit-details-marker { display: none; }
.admin-body { border-top: 1px solid var(--line-2); margin-top: .75rem; padding-top: .75rem; }

/* Amber: two reports of one person. Blue: one incident, several people. */
.dupe {
  background: #fff7e8; border: 1px solid #ecc98d; border-radius: var(--r-sm);
  padding: .7rem .9rem; margin-bottom: .9rem; font-size: .92rem;
}
.cluster {
  background: #eaf2fb; border: 1px solid var(--blue-soft); border-radius: var(--r-sm);
  padding: .7rem .9rem; margin-bottom: .9rem; font-size: .92rem;
}

.kv { display: grid; grid-template-columns: 10rem 1fr; gap: .25rem .9rem; margin: 0 0 1rem; font-size: .92rem; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; }

.actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.actions select { width: auto; flex: 0 1 11rem; }
.actions .cid { display: flex; align-items: center; gap: .35rem; }
.actions input[type=checkbox] { width: 21px; height: 21px; accent-color: var(--blue); }

/* ----------------------------------------------------- posters for social */

.carousel { display: flex; align-items: center; gap: .5rem; }
.track {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .25rem; flex: 1 1 auto;
}
.slide {
  flex: 0 0 auto; width: min(24rem, 78vw); height: auto;
  scroll-snap-align: center;
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-up);
}
.cbtn {
  flex: 0 0 auto; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1;
  color: var(--blue); background: var(--card);
  border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
}
.cbtn:hover { background: var(--line-2); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 30rem) {
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt { margin-top: .5rem; }
  .rows { gap: .7rem; }
  .who { padding: .65rem .7rem .6rem; }
  .who .nm { font-size: .92rem; }
  .noshot { font-size: 1.9rem; }
  .masthead { padding: .6rem .9rem; gap: .7rem; }
  .masthead .logo { width: 72px; height: 72px; }
  .wrap { padding: 1.1rem .9rem 3rem; }
}

/* Console rows carry a face. Staff see every photo, including a child's: the
   withholding rule governs the public list, not the people doing the tracing. */
.admin-row summary { display: flex; align-items: flex-start; gap: .8rem; }
.admin-row .sum { flex: 1 1 auto; min-width: 0; }
.thumb {
  cursor: zoom-in;
  flex: 0 0 auto; width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--r-sm); background: var(--line-2);
}
.thumb-none {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 600; color: #fff;
  background: linear-gradient(145deg, var(--blue-soft), var(--blue));
}
.withheld { color: var(--orange); font-weight: 500; }

/* ------------------------------------------------------------ destructive */

/* Deletion is real here, so the control looks unlike every other button and
   never sits next to one you press routinely. */
.btn-danger { color: #fff; background: var(--missing); border-color: var(--missing); }
.btn-danger:hover { background: #a81f1f; border-color: #a81f1f; }

.upd {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  padding: .5rem 0; border-top: 1px solid rgba(0, 0, 0, .07);
}
.upd > div { flex: 1 1 14rem; min-width: 0; }
.upd form { margin: 0; }

.danger-zone { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--line); }

/* A reporter's refusal is a promise the form made to them in writing, so it is
   the loudest thing on the card - louder than a duplicate flag. */
.refused {
  background: #fdeceb; border: 1px solid #e8a6a2; border-left: 4px solid var(--missing);
  border-radius: var(--r-sm); padding: .7rem .9rem; margin-bottom: .9rem; font-size: .92rem;
}
.refused-tag { color: var(--missing); font-weight: 600; }

.saved {
  background: var(--green-dim, #e9f5ee); border: 1px solid #9ccdb1;
  border-left: 4px solid var(--safe);
  border-radius: var(--r-sm); padding: .8rem 1rem; margin-bottom: 1.25rem;
}