/* Design: a postal waiting room at night. Warm charcoal keeps long
   reading easy on the eyes; mail-van yellow marks actions and post-box
   red appears only as a thin accent. Pinned by the brief:
   -apple-system body, green / red / amber verdicts. The one bold element
   is the postmark verdict. */
:root {
  --night: #1a1817;
  --slate: #24211f;
  --slate-deep: #1f1c1a;
  --line: #3a3532;
  --paper: #ece6df;
  --paper-muted: #b8afa6;
  --faint: #948a82;
  --postbox: #c8372d;
  --accent: #f2c14e;
  --accent-strong: #f7d57f;
  --ink-green: #3fb96b;
  --ink-red: #ec4e4b;
  --ink-amber: #f2a93b;
  --whatsapp: #25d366;
  --display: "Barlow Condensed", "Arial Narrow", -apple-system, BlinkMacSystemFont, sans-serif;
  --stamp: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Nirmala UI", "Noto Sans Devanagari", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ink: var(--paper);
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.page { max-width: 1120px; margin: 0 auto; padding: 40px 16px 56px; }

/* ---------- Workbench: input left, verdict right ---------- */
.workbench { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }

.masthead { margin-bottom: 28px; }
h1 {
  margin: 0 0 16px;
  max-width: 15ch;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(48px, 11vw, 84px);
  line-height: .92;
  letter-spacing: -0.005em;
  color: var(--paper);
  text-wrap: balance;
}
.lede { margin: 0 0 8px; max-width: 32em; font-size: 19px; line-height: 1.5; color: var(--paper-muted); }
.assurance { margin: 0; font-size: 14px; color: var(--faint); }

/* ---------- Intake panel ---------- */
.intake-panel {
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 20px 20px;
}

.tabs {
  display: flex;
  gap: 4px;
  margin: 0 -20px 20px;
  padding: 0 10px;
  box-shadow: inset 0 -1px 0 var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  appearance: none;
  flex: none;
  padding: 16px 10px 13px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--paper-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.tab:hover { color: var(--paper); }
.tab[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--postbox); }
.tab:focus-visible { outline-offset: -4px; border-radius: 6px; }

.panel[hidden], .quick-row[hidden], .photo-preview[hidden], .ocr-status[hidden], .ocr-note[hidden] { display: none; }

.label-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin-bottom: 10px; }
.field-label { font-weight: 650; font-size: 16px; }
.samples { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; color: var(--faint); }
.chip {
  appearance: none;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  color: var(--paper-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.chip:hover { color: var(--paper); border-color: var(--faint); }

textarea {
  display: block;
  width: 100%;
  min-height: 200px;
  resize: vertical;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--night);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
}
textarea::placeholder { color: var(--faint); }
textarea:focus { outline: none; border-color: var(--accent); }

.hint { margin: 10px 0 0; font-size: 14px; color: var(--faint); max-width: 60ch; }
.hint strong { color: var(--paper-muted); font-weight: 600; }
.ocr-note { color: var(--accent); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .75; cursor: progress; }

.btn-primary { flex: 1 1 220px; background: var(--accent); color: var(--night); }
.btn-primary:hover { background: var(--accent-strong); }
.panel > .btn-primary { width: 100%; margin-top: 18px; }

.btn-quiet { background: none; color: var(--paper-muted); border: 1px solid var(--line); }
.btn-quiet:hover { color: var(--paper); border-color: var(--faint); }

.spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2.5px solid rgba(26, 24, 23, .3);
  border-top-color: var(--night);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.loading .spinner { display: inline-block; }

.panel-intro { margin: 0 0 14px; color: var(--paper-muted); }

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 170px;
  padding: 24px 16px;
  border: 2px dashed var(--line);
  border-radius: 10px;
  background: var(--night);
  color: var(--faint);
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}
.dropzone strong { color: var(--paper); font-size: 17px; font-weight: 650; }
.dropzone:hover, .dropzone.dragover, .dropzone:focus-within { border-color: var(--accent); }

.photo-preview { display: block; max-width: 100%; max-height: 220px; margin: 14px 0 0; border-radius: 8px; border: 1px solid var(--line); }
.ocr-status { margin-top: 14px; }
.ocr-status p { margin: 0 0 6px; font-size: 14px; color: var(--paper-muted); }
.meter { height: 6px; border-radius: 3px; background: var(--night); overflow: hidden; }
.ocr-fill { height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }

.tips { margin: 16px 0 0; padding-left: 18px; font-size: 14px; color: var(--faint); }
.tips li + li { margin-top: 4px; }
.tips strong { color: var(--paper-muted); font-weight: 600; }

.options { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.options legend { margin-bottom: 10px; padding: 0; font-weight: 650; font-size: 16px; }
.option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--slate-deep);
  cursor: pointer;
}
.option:hover { border-color: var(--faint); }
.option:has(input:checked) { border-color: var(--accent); }
.option input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.option strong { display: block; font-size: 15px; font-weight: 600; }
.option small { font-size: 13px; color: var(--faint); }

.quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.quick-row label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--paper-muted); }
.quick-row input, .quick-row select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--night);
  color: var(--paper);
  font: inherit;
  font-size: 16px;
  color-scheme: dark;
}
.quick-row input:focus, .quick-row select:focus { outline: none; border-color: var(--accent); }

.error {
  display: none;
  margin-top: 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--ink-red);
  border-radius: 0 6px 6px 0;
  background: rgba(236, 78, 75, .1);
  color: #ffd0cd;
  font-size: 15px;
}
.error.show { display: block; }

.privacy { margin: 16px 0 0; font-size: 13px; color: var(--faint); }

/* ---------- Verdict column ---------- */
.stamp-placeholder { display: none; }

.result { display: none; }
.result.show { display: block; animation: fadeIn .35s ease-out; }

.verdict-card {
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--slate);
}
.verdict-card.yes { --ink: var(--ink-green); }
.verdict-card.no { --ink: var(--ink-red); }
.verdict-card.maybe { --ink: var(--ink-amber); }

.stamp-row { display: flex; align-items: center; }
.postmark {
  flex: none;
  width: 196px;
  height: 196px;
  color: var(--ink);
  transform: rotate(-8deg);
}
.result.show .postmark { animation: stamp .45s cubic-bezier(.2, .9, .3, 1.15) .1s both; }
.ring-text { font-family: var(--stamp); font-weight: 700; font-size: 15px; letter-spacing: .12em; fill: currentColor; }
.stamp-word { font-family: var(--stamp); font-weight: 800; font-size: 60px; letter-spacing: .01em; fill: currentColor; }
.maybe .stamp-word { font-size: 44px; }
.stamp-conf { font-family: var(--stamp); font-weight: 700; font-size: 19px; letter-spacing: .08em; fill: currentColor; }
.cancel { flex: 1 1 0; width: 0; min-width: 0; height: 84px; margin-left: -22px; color: var(--ink); opacity: .6; }

.verdict-headline {
  margin: 18px 0 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  color: var(--paper);
}
.verdict-reason { margin: 0; color: var(--paper-muted); }

.evidence { margin-top: 20px; }
.evidence-label { margin: 0 0 6px; font-size: 14px; color: var(--faint); }
.evidence-line {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--ink);
  border-radius: 0 6px 6px 0;
  background: var(--night);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.evidence ul { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--faint); }

.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn-whatsapp { flex: 1 1 220px; background: var(--whatsapp); color: #052e16; }
.btn-whatsapp:hover { filter: brightness(1.06); }
.btn-whatsapp svg { width: 22px; height: 22px; flex: none; }

/* ---------- Route: how the log is read ---------- */
h2.section-title {
  margin: 0 0 28px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 42px);
  line-height: 1.05;
  color: var(--paper);
}
.route-section { margin-top: 72px; }
.route { position: relative; margin: 0; padding: 0; list-style: none; }
.stop { position: relative; padding: 0 0 28px 36px; }
.stop::before {
  content: "";
  position: absolute;
  left: 7px; top: 20px; bottom: 0;
  width: 2px;
  background: var(--line);
}
.stop:last-child::before { display: none; }
.stop-dot {
  position: absolute;
  left: 0; top: 5px;
  width: 16px; height: 16px;
  border: 3px solid var(--dot);
  border-radius: 50%;
  background: var(--night);
}
.stop.hub { --dot: var(--ink-red); }
.stop.office { --dot: var(--ink-amber); }
.stop.out { --dot: var(--ink-green); }
.stop h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.15; }
.stop-codes { margin: 2px 0 8px; font-size: 14px; color: var(--faint); }
.stop p:last-child { margin: 0; max-width: 34em; color: var(--paper-muted); }

/* ---------- Tracking terms glossary ---------- */
.glossary { margin-top: 64px; max-width: 860px; }
.glossary .section-title { margin-bottom: 10px; }
.section-intro { margin: 0 0 24px; max-width: 60ch; color: var(--paper-muted); }
.terms { margin: 0; }
.term { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.term:last-child { border-bottom: 1px solid var(--line); }
.term dt { font-weight: 650; }
.term dt small { display: block; font-size: 14px; font-weight: 400; color: var(--faint); }
.term dd { margin: 0; max-width: 62ch; color: var(--paper-muted); }
@media (min-width: 760px) {
  .term { grid-template-columns: 260px minmax(0, 1fr); gap: 28px; }
}

/* ---------- FAQ ---------- */
.faq { margin-top: 64px; max-width: 760px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  padding: 18px 40px 18px 0;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--faint);
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 0 20px; max-width: 65ch; color: var(--paper-muted); }

footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }
footer p { margin: 4px 0; max-width: 70ch; }

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

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(-16deg) scale(1.45); }
  60% { opacity: 1; transform: rotate(-7deg) scale(.96); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 640px) {
  .page { padding: 56px 24px 72px; }
  .intake-panel { padding: 0 24px 24px; }
  .tabs { margin: 0 -24px 22px; padding: 0 14px; }
  .verdict-card { padding: 28px; }
  .postmark { width: 220px; height: 220px; }
}

@media (min-width: 760px) {
  .route { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .stop { padding: 34px 0 0; }
  .stop::before { left: 16px; right: -32px; top: 7px; bottom: auto; width: auto; height: 2px; }
  .stop-dot { top: 0; }
}

@media (min-width: 960px) {
  .workbench { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 48px; align-items: start; }
  .verdict-col { position: sticky; top: 24px; padding-top: 8px; }
  body:not(.has-result) .stamp-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 240px;
    margin: 120px auto 0;
    padding: 40px;
    border: 2px dashed var(--line);
    border-radius: 50%;
    color: var(--faint);
    font-size: 15px;
    text-align: center;
    transform: rotate(-8deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ---------- Wordmark + language switch ---------- */
.masthead-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 16px; }
.wordmark { margin: 0; font-family: var(--stamp); font-weight: 700; font-size: 22px; letter-spacing: .04em; color: var(--paper-muted); }
.wordmark::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--postbox);
  vertical-align: 1px;
}
.lang-switch { margin: 0; font-size: 15px; }
.lang-switch a { color: var(--accent); font-weight: 600; text-decoration: none; }
.lang-switch a:hover { text-decoration: underline; }

/* ---------- Hindi page ----------
   Mukta covers Devanagari for headings and text; Devanagari needs more
   line height than the condensed Latin headline. The postmark keeps Barlow. */
:root:lang(hi) {
  --display: "Mukta", "Nirmala UI", "Noto Sans Devanagari", sans-serif;
  --body: "Mukta", -apple-system, BlinkMacSystemFont, "Segoe UI", "Nirmala UI", "Noto Sans Devanagari", sans-serif;
}
:lang(hi) h1 { max-width: 13em; font-size: clamp(40px, 8.5vw, 70px); line-height: 1.12; font-weight: 800; letter-spacing: 0; }
:lang(hi) .verdict-headline, :lang(hi) h2.section-title, :lang(hi) .stop h3 { line-height: 1.3; }
:lang(hi) body, body:lang(hi) { line-height: 1.65; }