/* Saathi · offline-first safety companion (/saathi/)
 *
 * Loaded after /assets/site.css (design system 2.0), so every colour, radius and font here is a
 * shared token: black by default, and the light set when the Day view button sets
 * html[data-theme="day"] for reading in bright sun. Large type, 48 px touch targets, status as a
 * word plus colour, no animation.
 */

/* Type: Latin text in Anek Latin (about 100 kB, kept on the phone by the worker). Hindi, Bengali,
   Assamese, Tamil and Gujarati use the phone's own fonts (Noto on Android): the Anek files for those
   scripts are 190 to 710 kB each, which is too much for a first visit on patchy signal, and Indic
   text then looks the same with and without signal. */
.saathi {
  --sa-gutter: 16px;
  --sa-font: "Anek Latin", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari",
    "Noto Sans Bengali", "Noto Sans Tamil", "Noto Sans Gujarati", "Nirmala UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sa-font);
  font-size: 1.125rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}
.saathi * { min-width: 0; }
.saathi svg.sa-g { flex: none; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.saathi :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.saathi a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.saathi a:hover { color: var(--ink); }
.saathi h1, .saathi h2, .saathi h3 { color: var(--ink); text-transform: none; letter-spacing: -0.01em; }
.saathi [hidden] { display: none !important; }
.saathi .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sa-skip { position: absolute; left: 8px; top: -100px; z-index: var(--z-overlay); background: var(--accent); color: var(--on-accent) !important; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 650; text-decoration: none !important; }
.sa-skip:focus { top: 8px; }

/* ── top bar ─────────────────────────────────────────────────── */

.sa-top { border-bottom: 1px solid var(--line); background: var(--bg); }
.sa-top-in, .sa-main, .sa-foot, .sa-banner-in { width: min(46rem, 100%); margin: 0 auto; padding-left: var(--sa-gutter); padding-right: var(--sa-gutter); }
.sa-top-in { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
.sa-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink) !important; text-decoration: none !important; min-height: 44px; }
.sa-brand svg { width: 28px; height: 28px; color: var(--accent); }
.sa-word { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.sa-deva { font-size: 1.125rem; color: var(--ink-3); }
.sa-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sa-lang { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 550; color: var(--ink-2); }
.sa-lang select, .sa-search input {
  font: inherit; font-size: 1.0625rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); min-height: 48px; padding: 0 12px;
}
.sa-lang select { padding-right: 8px; cursor: pointer; }
.sa-search input::placeholder { color: var(--ink-3); }
.sa-theme {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
  font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer;
}
.sa-theme:hover { color: var(--ink); background: var(--surface-3); }
.sa-theme[aria-pressed="true"] { background: var(--accent-wash); border-color: transparent; color: var(--accent-ink); }

/* ── offline banner, translation note ────────────────────────── */

.sa-banner { background: var(--watch-wash); border-bottom: 1px solid color-mix(in oklch, var(--watch) 35%, transparent); color: var(--ink); }
.sa-banner-in { display: flex; align-items: center; gap: 10px; padding-top: 12px; padding-bottom: 12px; font-weight: 600; font-size: 1.0625rem; }
.sa-banner-in svg { color: var(--watch); }
.sa-draft { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; font-size: 0.9375rem; color: var(--ink-2); }
.sa-draft svg { margin-top: 0.15em; color: var(--ink-3); }

/* ── main column ─────────────────────────────────────────────── */

.sa-main { padding-top: 20px; padding-bottom: 36px; outline: none; }
.sa-main h1 { font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.375rem); line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; margin: 4px 0 8px; outline: none; }
.sa-lead { color: var(--ink-2); font-size: 1.0625rem; margin: 0 0 20px; max-width: 60ch; }
.sa-note { color: var(--ink-3); font-size: 0.9375rem; margin-top: 8px; }
.sa-msg { margin-top: 8px; font-weight: 600; }
.sa-msg:empty { display: none; }
.sa-empty { padding: 24px 16px; text-align: center; color: var(--ink-2); border: 1px dashed var(--line-strong); border-radius: var(--r-md); }

/* buttons */
.sa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--accent); color: var(--on-accent); font: inherit; font-size: 1.0625rem; font-weight: 650;
  cursor: pointer; text-decoration: none; text-align: center;
}
.sa-btn:hover { background: var(--accent-ink); }
.saathi a.sa-btn { text-decoration: none; color: var(--on-accent); }
.saathi a.sa-btn.ghost { color: var(--ink); }
.sa-btn.ghost { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.sa-btn.ghost:hover { background: var(--surface-3); }
.sa-btn.small { min-height: 44px; padding: 0 16px; font-size: 1rem; }
.sa-btn[disabled] { opacity: 0.6; cursor: progress; }

/* emergency call */
.sa-sos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; margin: 0 0 24px; border-radius: var(--r-md); background: var(--danger-wash); border: 1px solid color-mix(in oklch, var(--danger) 30%, transparent); }
.sa-sos-call {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 18px;
  border-radius: var(--r-pill); background: var(--danger); color: var(--bg) !important; text-decoration: none !important;
  font-size: 1.25rem; font-weight: 700; letter-spacing: 0.005em;
}
.sa-sos-call:hover { filter: brightness(0.94); }
.sa-sos-what { flex: 1 1 14rem; margin: 0; color: var(--ink); font-size: 1rem; font-weight: 550; }

/* ── place picker ────────────────────────────────────────────── */

.sa-back { margin: 0 0 14px; }
.sa-locate { margin: 4px 0 24px; }
.sa-search { margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.sa-search label { font-size: 1rem; font-weight: 600; color: var(--ink); }
.sa-search input { width: 100%; }
.sa-count { font-size: 0.9375rem; color: var(--ink-3); margin: 0; }
.sa-groups { margin-top: 8px; }
.sa-group { border-top: 1px solid var(--line); }
.sa-group:last-of-type { border-bottom: 1px solid var(--line); }
.sa-group > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 4px; cursor: pointer; }
.sa-group > summary::-webkit-details-marker { display: none; }
.sa-group > summary h2 { flex: 1 1 auto; margin: 0; font-size: 1.1875rem; font-weight: 650; color: var(--ink); }
.sa-group > summary .c { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: 0.9375rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.sa-group > summary .chev { color: var(--ink-3); transform: rotate(90deg); }
.sa-group[open] > summary .chev { transform: rotate(-90deg); }
.sa-group > summary:hover h2 { color: var(--accent-ink); }
.sa-group > .sa-list { padding: 2px 0 18px; }
.sa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sa-pick {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; width: 100%;
  min-height: 60px; padding: 12px 14px; text-align: left; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer;
}
.sa-pick:hover { background: var(--surface-2); border-color: var(--line-strong); }
.sa-pick.is-current { border-color: var(--accent); background: var(--accent-wash); }
.sa-pick .n { font-size: 1.125rem; font-weight: 650; line-height: 1.25; }
.sa-pick .s { grid-column: 1; font-size: 0.9375rem; color: var(--ink-3); line-height: 1.35; }
.sa-pick .tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sa-pick .chev { grid-row: 1 / span 2; grid-column: 2; color: var(--ink-3); }
.sa-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: 0.875rem; font-weight: 600; }
.sa-index { margin: 22px 0 0; font-size: 0.875rem; color: var(--ink-3); }

/* ── one place ───────────────────────────────────────────────── */

.sa-place-head { margin-bottom: 16px; }
.sa-place-sub { color: var(--ink-2); font-size: 1.0625rem; margin: 0 0 16px; }
.sa-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sa-status { margin-top: 10px; font-size: 0.9375rem; color: var(--ink-3); }
.sa-status:empty { display: none; }
.sa-summary { font-size: 1.1875rem; font-weight: 650; line-height: 1.6; margin: 20px 0 16px; }
.sa-summary .sa-lvl { margin: 0 2px; vertical-align: 0.1em; }
.sa-summary:empty { display: none; }
.sa-missing { color: var(--ink-3); font-size: 0.9375rem; margin: 8px 0 0; }
.sa-cards { display: grid; gap: 16px; }

/* Level pill: word plus colour, dot first. The text is the level colour pulled towards the ink, so
   it keeps AA contrast on its tint in the black and the Day appearance alike. */
.sa-lvl {
  --sa-l: var(--ink-3);
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px 0 10px; border-radius: var(--r-pill);
  background: color-mix(in oklch, var(--sa-l) 14%, transparent); color: color-mix(in oklab, var(--sa-l) 72%, var(--ink));
  font-size: 0.9375rem; font-weight: 700; white-space: nowrap; line-height: 1;
}
.sa-lvl::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sa-l); flex: none; }
.lv-normal { --sa-l: var(--ok); }
.lv-watch { --sa-l: var(--watch); }
.lv-warning { --sa-l: var(--warn); }
.lv-danger { --sa-l: var(--danger); }
.lv-unknown { --sa-l: var(--ink-3); }
.sa-sim { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--r-pill); border: 1px dashed var(--ink-3); color: var(--ink-2); font-size: 0.875rem; font-weight: 600; }

/* cards */
.sa-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 18px 14px; }
.sa-card.lv-warning { border-color: color-mix(in oklch, var(--warn) 45%, transparent); }
.sa-card.lv-danger { border-color: color-mix(in oklch, var(--danger) 60%, transparent); border-width: 2px; }
/* Title and level share a row while they fit; with large text the level wraps below the title. */
.sa-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
.sa-card-head h2 { flex: 1 1 11rem; }
.sa-card-head h2 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 650; line-height: 1.25; margin: 3px 0 0; }
.sa-card-head h2 svg { color: var(--accent); }
.sa-card-sub { color: var(--ink-2); font-size: 1rem; margin: 4px 0 0; }
.sa-head-line { font-size: 1.1875rem; font-weight: 650; line-height: 1.4; margin: 14px 0 0; }
.sa-lines { list-style: none; margin: 8px 0 0; padding: 0; }
.sa-lines li { padding: 3px 0; font-size: 1.0625rem; line-height: 1.5; }
.sa-days { display: grid; gap: 10px; margin-top: 14px; }
@media (min-width: 40rem) { .sa-days.two { grid-template-columns: 1fr 1fr; } }
.sa-day { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; }
.sa-day h3 { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 8px; font-size: 1.0625rem; font-weight: 650; margin: 0 0 6px; }
.sa-day h3 > span:first-child { flex: 1 1 8rem; padding-top: 3px; }
.sa-days + .sa-lines { margin-top: 12px; }
.sa-day .sa-lines { margin-top: 0; }
.sa-day .sa-lines li:first-child { font-weight: 650; }
.sa-do { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--accent-wash); color: var(--ink); }
.sa-do h3 { font-size: 0.9375rem; font-weight: 650; color: var(--accent-ink); margin: 0 0 4px; }
.sa-do p { font-size: 1.0625rem; font-weight: 600; line-height: 1.5; margin: 0; }
.sa-do p + p { margin-top: 6px; }
.sa-notes { list-style: none; margin: 12px 0 0; padding: 0; color: var(--ink-2); font-size: 0.9375rem; }
.sa-notes li { padding: 2px 0; }
.sa-prov { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-3); }
.sa-prov .src { color: var(--ink-2); font-weight: 600; }
.sa-card.is-old .sa-prov { color: color-mix(in oklab, var(--warn) 72%, var(--ink)); }

/* official alerts and road items */
.sa-items { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.sa-item { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; }
.sa-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sa-item-head b + .sa-lvl { margin-left: auto; }
.sa-item-head b { font-size: 1.0625rem; font-weight: 650; }
.sa-official { margin: 8px 0 0; font-size: 1.0625rem; line-height: 1.5; }
.sa-official + .sa-official { margin-top: 4px; }
.sa-official.quiet { color: var(--ink-2); font-size: 1rem; }
.sa-meta { margin: 8px 0 0; font-size: 0.9375rem; color: var(--ink-3); }
.sa-item a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.sa-item details { margin-top: 6px; }
.sa-item summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--accent-ink); }

/* ── emergency numbers ───────────────────────────────────────── */

.sa-numbers { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.sa-numbers h2 { font-size: 1.375rem; font-weight: 650; margin: 0 0 12px; }
.sa-num-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sa-num { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.sa-num-call {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 6.5rem; min-height: 52px; padding: 0 16px;
  border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent) !important; text-decoration: none !important;
  font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sa-num-call.sos { background: var(--danger); color: var(--bg) !important; }
.sa-num p { margin: 0; font-size: 1.0625rem; font-weight: 550; }
.sa-num .src { font-size: 0.875rem; font-weight: 400; color: var(--ink-3); margin-top: 2px; }
.sa-num .src a { color: var(--ink-2); }

/* ── footer ──────────────────────────────────────────────────── */

.sa-foot { padding-bottom: 40px; color: var(--ink-2); font-size: 0.9375rem; }
.sa-foot::before { content: ""; display: block; border-top: 1px solid var(--line); margin-bottom: 20px; }
.sa-foot p { margin: 0 0 8px; max-width: 64ch; }
.sa-review { color: var(--ink); font-weight: 600; background: var(--watch-wash); border-radius: var(--r-sm); padding: 10px 12px; }
.sa-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 12px !important; }
.sa-foot-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.sa-callout { padding: 14px 16px; border-radius: var(--r-md); background: var(--danger-wash); font-weight: 600; }

/* ── about page ──────────────────────────────────────────────── */

.sa-prose h1 { margin-top: 8px; }
.sa-prose > p, .sa-prose > ul, .sa-prose .sa-lead { max-width: 66ch; }
.sa-prose h2 { font-size: 1.375rem; font-weight: 650; margin: 36px 0 10px; }
.sa-prose h3 { font-size: 1.125rem; font-weight: 650; margin: 20px 0 6px; }
.sa-prose p, .sa-prose li { font-size: 1.0625rem; line-height: 1.6; }
.sa-prose p + p { margin-top: 10px; }
.sa-prose ul { margin: 8px 0 0; padding-left: 1.2em; }
.sa-prose li + li { margin-top: 6px; }
.sa-prose .sa-table-wrap { overflow-x: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.sa-prose table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.sa-prose th, .sa-prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sa-prose th { font-weight: 650; color: var(--ink-2); background: var(--surface); }
.sa-prose tr:last-child td { border-bottom: 0; }
@media (max-width: 40rem) {
  .sa-prose .sa-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sa-prose .sa-stack, .sa-prose .sa-stack tbody, .sa-prose .sa-stack tr, .sa-prose .sa-stack td { display: block; width: 100%; }
  .sa-prose .sa-stack tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .sa-prose .sa-stack tr:last-child { border-bottom: 0; }
  .sa-prose .sa-stack td { border: 0; padding: 3px 0; }
  .sa-prose .sa-stack td::before { content: attr(data-label); display: block; font-size: 0.8125rem; font-weight: 650; color: var(--ink-3); }
}
.sa-langs { display: grid; gap: 10px; margin: 20px 0 4px; }
.sa-langs h2 { margin-top: 0; font-size: 1.125rem; }
.sa-langs section { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface); }
.sa-langs h3 { margin: 0 0 4px; font-size: 1rem; }
.sa-langs p { margin: 0; }
.sa-langs p + p { margin-top: 8px; }

@media (max-width: 30rem) {
  .sa-num { grid-template-columns: minmax(0, 1fr); }
  .sa-num-call { justify-self: start; }
  .sa-sos-call { width: 100%; justify-content: center; }
}

@media (forced-colors: active) {
  .sa-lvl, .sa-tag, .sa-sim, .sa-btn, .sa-sos-call, .sa-num-call, .sa-theme { border: 1px solid CanvasText; }
  .sa-lvl::before { background: CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .saathi *, .saathi *::before, .saathi *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .sa-top, .sa-actions, .sa-theme, .sa-foot-links, .sa-locate, .sa-search { display: none !important; }
}