/* Alive webapp — air around me. Pixel twin of the RN city-day surface:
   DelhiToday sheet + AirMapCard legend + TapReadout + DepartGraph.
   Numbers are tabular Satoshi (RN mono = same family, NUM variant);
   band hues only where they mean air; no emoji; lowercase. */

.num { font-variant-numeric: tabular-nums; font-family: var(--font); }

/* the sheet is a tall detent — the field + cards stay live above it */
.am-host .sheet { top: 42%; }

/* ── the band scale chip — colours + "good → severe" only, no caption.
   sits on the map just above the sheet, never over the live dot */
.am-chip { position: fixed; left: 10px; bottom: calc(58% + 10px); z-index: 40;
  display: flex; align-items: center; gap: 7px; padding: 5px 9px 5px 8px;
  background: rgba(255,255,255,.9); border-radius: 999px;
  border: .5px solid rgba(22,24,29,.06); box-shadow: 0 4px 12px rgba(59,52,35,.10);
  pointer-events: none; }
.amc-dots { display: flex; gap: 2px }
.amc-dots i { width: 9px; height: 6px; border-radius: 3px }
.amc-scale { font-size: 11px; color: var(--ink3); white-space: nowrap }

/* ── the hero — the air at your live spot, in its band colour ────── */
.am-spot { min-height: 64px }
.am-hero { padding: 18px 22px 16px }
.am-hlead { color: var(--ink2); font-size: 15px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis }
.am-hwait { color: var(--ink3); font-size: 15px; margin-top: 10px }
.am-hrow { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; flex-wrap: wrap }
.am-hnum { font-size: 72px; line-height: 78px; letter-spacing: -3px; font-weight: 300;
  margin-left: -2px }
.am-hunit { color: var(--ink2); font-size: 15px; font-weight: 500 }
.am-hband { font-size: 24px; font-weight: 500; letter-spacing: -.3px; margin-top: -4px }
.am-hspecies { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 2px;
  color: var(--ink2); font-size: 15px }
.am-hspecies b { font-weight: 500; color: var(--ink3); font-size: 13px; margin-right: 2px }
.am-hthin { color: var(--ink3); font-size: 13px; margin-top: 8px }
.am-why { margin: 2px 22px 0 }

/* ── the search composer — the Where To row's twin, floating over the
   map strip. One 44px bar under the mark; its list opens below it,
   never past the sheet. */
.am-scw { position: fixed; top: calc(56px + var(--sat)); left: 12px; right: 12px;
  z-index: 42; display: flex; flex-direction: column; gap: 4px; max-width: 560px }
.am-sc { display: flex; align-items: center; gap: 10px; height: 44px; flex: none;
  padding: 0 0 0 13px; background: var(--surface2); border-radius: 13px;
  box-shadow: var(--sh-card) }
.am-sc-dot { width: 10px; height: 10px; border-radius: 5px; background: var(--accent); flex: none }
.am-sc-in { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  outline: none; font-size: 16px; font-weight: 500; color: var(--ink); padding: 0 }
.am-sc-in::placeholder { color: var(--ink3); font-weight: 400 }
.am-sc-x { width: 44px; height: 44px; flex: none; display: flex;
  align-items: center; justify-content: center }
.am-sc-x svg { width: 18px; height: 18px; padding: 12px; box-sizing: content-box;
  border-radius: 50% }
.am-sc-x:active svg { transform: scale(.92); background: var(--ink10) }
.am-slist { background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-radius: 16px; box-shadow: var(--sh-float); border: .5px solid var(--hairc);
  overflow-y: auto; overflow-x: hidden; padding: 4px;
  max-height: calc(42vh - 70px - var(--sat)); -webkit-overflow-scrolling: touch }
.am-slist[hidden] { display: none }
.am-sprog { height: 2px; margin: 2px 12px 4px; border-radius: 1px; overflow: hidden;
  background: var(--ink10) }
.am-sprog i { display: block; width: 38%; height: 100%; border-radius: 1px;
  background: var(--accent); animation: amProg 1.05s cubic-bezier(.4,0,.2,1) infinite;
  will-change: transform }
@keyframes amProg { from { transform: translateX(-105%) } to { transform: translateX(270%) } }
.am-srow { display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 48px; padding: 6px 10px; text-align: left; border: 0;
  border-radius: 12px; background: transparent; color: inherit }
.am-srow:active { background: var(--surface2) }
.am-sgb { width: 34px; height: 34px; border-radius: 11px; background: var(--surface2);
  flex: none; display: flex; align-items: center; justify-content: center }
.am-srt { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-right: 8px }
.am-srt-t { font-size: 15px; font-weight: 500; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap }
.am-srt-t b { font-weight: 600 }
.am-sdim { color: var(--ink3); font-weight: 400 }
.am-srt-s { font-size: 12.5px; color: var(--ink3); margin-top: 1px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap }
.am-sdist { font-size: 12.5px; color: var(--ink3); flex: none; font-variant-numeric: tabular-nums }
.am-squiet { padding: 13px 14px; font-size: 13.5px; color: var(--ink3); line-height: 1.4 }
.am-ssec { font-size: 12px; font-weight: 500; color: var(--ink3); margin: 7px 12px 2px }

/* ── TapReadout — the tap's compact answer card, floating top-center
   under the composer bar */
.am-read { position: fixed; top: calc(112px + var(--sat)); bottom: auto; left: 50%; transform: translateX(-50%);
  z-index: 40; background: rgba(255,255,255,.86); border-radius: 16px;
  border: .5px solid rgba(22,24,29,.06); box-shadow: 0 8px 22px rgba(59,52,35,.12);
  padding: 9px 7px 9px 12px; max-width: 320px; display: flex; flex-direction: column; gap: 3px; }
.am-read[hidden] { display: none }
.amr-row { display: flex; align-items: center; gap: 8px }
.amr-read { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; flex-shrink: 1; min-width: 0 }
.amr-dot { width: 9px; height: 9px; border-radius: 5px; flex: none }
.amr-num { font-size: 17px; font-weight: 500; white-space: nowrap }
.amr-unit { font-size: 13px; font-weight: 400; color: var(--ink3) }
.amr-band { font-size: 17px; font-weight: 500 }
.amr-pm { font-size: 13px; color: var(--ink2); white-space: nowrap; padding-left: 2px }
.amr-pm b { font-weight: 500; color: var(--ink3); font-size: 11px; margin-right: 2px }
.amr-plain { font-size: 13px; font-weight: 500; color: var(--ink2); white-space: nowrap }
.amr-x { padding: 2px 2px 2px 8px; line-height: 1; flex: none; position: relative }
.amr-x::after { content: ''; position: absolute; inset: -11px -9px -11px -11px }
.amr-caption { font-size: 11px; color: var(--ink3); padding-left: 17px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis }

/* ── TapPin — the read pinned at the point: washed chip + dot ─────── */
.am-tappin { display: flex; flex-direction: column; align-items: center; pointer-events: none }
.am-tappin-chip { padding: 3px 7px; border-radius: 9px; border: .5px solid #E3E0D7 }
.am-tappin-num { font-size: 11px; font-weight: 500; white-space: nowrap }
.am-tappin-dot { width: 5px; height: 5px; border-radius: 3px; margin-top: 1.5px }

/* ── DelhiToday sheet content (Mobile/screens/DelhiToday.tsx) ─────── */
.dt-wait { color: var(--ink3); font-size: 13px; margin: 10px 18px }
.dt-center { display: flex; flex-direction: column; align-items: center; margin-top: 60px }
.dt-retry { margin-top: 12px; padding: 10px 22px; border-radius: 20px;
  background: var(--surface2); color: var(--accent); font-size: 15px; font-weight: 500 }
.dt-retry:active { opacity: .55 }

/* the hero — graded light of the day's band into paper, no card */
.dt-hero { padding: 22px 22px 18px }
.dt-herolead { color: var(--ink2); font-size: 17px; font-weight: 500 }
.dt-herorow { display: flex; align-items: baseline; margin-top: 4px; gap: 10px }
.dt-heronum { font-size: 96px; line-height: 102px; letter-spacing: -4px;
  font-weight: 300; margin-left: -3px }
.dt-herounit { color: var(--ink2); font-size: 17px; font-weight: 500;
  align-self: flex-end; padding-bottom: 18px }
.dt-herofelt { font-size: 30px; letter-spacing: -.4px; margin-top: -4px; font-weight: 500 }
.dt-heroref { color: var(--ink2); font-size: 15px; line-height: 21px; margin-top: 4px;
  white-space: pre-line }
.dt-scale { margin-top: 10px; max-width: 210px; height: 9px; position: relative }
.dt-scale-track { position: absolute; left: 0; right: 0; top: 2.5px; height: 4px;
  border-radius: 2px }
.dt-scale-seam { position: absolute; top: 0; height: 9px; border-radius: 4.5px;
  background: #FAFAF7 }
.dt-scale-pos { position: absolute; top: 1px; height: 7px; border-radius: 3.5px }
.dt-herorange { color: var(--ink2); font-size: 13px; margin-top: 4px }
.dt-whyhero { color: var(--ink2); font-size: 15px; line-height: 21px; margin-top: 10px;
  font-style: italic }
.dt-whynote { color: var(--ink2); font-size: 13px; line-height: 19px; margin-top: 8px }
.dt-whynotetag { color: var(--ink3) }

/* freshness chips */
.dt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 18px 0 }
.dt-chip { display: flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: 999px; background: var(--surface2); font-size: 13px; color: var(--ink2) }

/* section heads + ruled grids */
.dt-sec { color: var(--ink); font-size: 15px; font-weight: 600; margin: 24px 18px 6px }
.dt-grid { margin: 8px 16px 0; border-radius: 20px; background: var(--surface);
  box-shadow: 0 6px 18px rgba(59,52,35,.07); padding: 0 16px }
.dt-species { display: flex; align-items: center; padding: 12px 0 }
.dt-species.sep, .dt-crow.sep { border-top: .5px solid #E3E0D7 }
.dt-slab { flex: 1; color: var(--ink2); font-size: 15px; font-weight: 500 }
.dt-sval { font-size: 17px; font-weight: 500; min-width: 64px; text-align: right }
.dt-swho { color: var(--ink3); font-size: 13px; min-width: 84px; text-align: right }
.dt-note { color: var(--ink3); font-size: 13px; margin: 2px 18px 0 }

/* next-12h strip */
.dt-fcrow { display: flex; margin: 8px 18px 0; align-items: flex-end }
.dt-fccol { flex: 1; display: flex; flex-direction: column; align-items: center }
.dt-fcval { color: var(--ink2); font-size: 13px; height: 15px }
.dt-fcbar { width: 12px; border-radius: 6px; margin-top: 2px }
.dt-fchr { color: var(--ink3); font-size: 13px; height: 15px; margin-top: 3px }

/* fresh-install empty well + corridor rows + traveller lines */
.dt-ownempty { margin: 24px 18px 0; padding: 16px; border-radius: 20px; background: var(--surface2) }
.dt-ownline { color: var(--ink); font-size: 15px; line-height: 21px }
.dt-ownsub { color: var(--ink3); font-size: 13px; line-height: 19px; margin-top: 6px }
.dt-empty { color: var(--ink3); font-size: 15px; margin: 4px 18px 0; line-height: 21px }
.dt-crow { display: flex; align-items: center; min-height: 58px; padding: 10px 0 }
.dt-cglyph { width: 24px; display: flex; justify-content: center; margin-right: 12px; flex: none }
.dt-ctext { flex: 1; margin-right: 10px; min-width: 0 }
.dt-cname { color: var(--ink); font-size: 17px; font-weight: 500; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dt-csub { color: var(--ink3); font-size: 13px; margin-top: 1px; display: block }
.dt-crel { font-size: 13px; font-weight: 500; flex: none }
.dt-dayqual { color: var(--ink3); font-size: 13px; margin: -2px 18px 2px }
.dt-dayline { color: var(--ink2); font-size: 15px; margin: 4px 18px 0; line-height: 22px }

/* CityMoves card */
.dt-moves { margin: 16px 16px 0; padding: 16px; border-radius: 20px;
  background: var(--surface); box-shadow: 0 6px 18px rgba(59,52,35,.07) }
.dt-mvtitle { color: var(--ink); font-size: 17px; font-weight: 600 }
.dt-mvsub { color: var(--ink3); font-size: 13px; margin-top: 2px }
.dt-mvnote { color: var(--ink3); font-size: 13px; margin-top: 10px; line-height: 19px }
.dt-mvfoot { color: var(--ink3); font-size: 13px; margin-top: 12px; line-height: 18px }
.dt-mvbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  margin-top: 12px; gap: 2px; background: rgba(20,24,31,.08) }
.dt-mvbar i { min-width: 4px }
.dt-mvrow { display: flex; align-items: center; gap: 10px; min-height: 30px; margin-top: 6px }
.dt-mvname { color: var(--ink2); font-size: 15px; flex: 1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis }
.dt-mvpct { color: var(--ink); font-size: 15px; font-weight: 500 }
.dt-mvtrips { color: var(--ink3); font-size: 13px; width: 64px; text-align: right; flex: none }
.dt-mvbrow { display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; gap: 12px }
.dt-mvblab { color: var(--ink3); font-size: 15px; flex: 1 }
.dt-mvbvals { display: flex; flex-direction: column; align-items: flex-end }
.dt-mvbmid { color: var(--ink); font-size: 15px; font-weight: 500 }
.dt-mvbband { color: var(--ink3); font-size: 13px; margin-top: 1px }

/* go-out place row + card */
.am-place { width: 100%; text-align: left; margin: 8px 0 10px }
.am-place-label { flex: 1; font-size: 14px; font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.am-place-edit { font-size: 11.5px; color: var(--ink3); flex: none }
.am-verdict { font-size: 14.5px; font-weight: 500; color: var(--ink); margin: 6px 0 12px;
  line-height: 1.4 }
.am-bestworst { margin-top: 6px }
.am-bw { font-size: 13px; padding: 6px 0; border-bottom: .5px solid var(--ink10) }
.am-bw:last-child { border-bottom: 0 }
.am-bw .bw-l { color: var(--ink3); font-size: 11.5px; margin-right: 6px }
.am-meta { font-size: 11px; color: var(--ink3); margin-top: 6px }
.am-quick { display: flex; flex-direction: column; margin-bottom: 4px }
.am-rows { margin-bottom: 8px }

/* ── DepartGraph — candlestick dose strip (Mobile/components/DepartGraph) */
.dg-wrap { padding: 0 4px }
.dg-bars { display: flex; align-items: stretch; touch-action: none }
.dg-cell { flex: 1; min-width: 0; display: flex }
.dg-col { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; border-radius: 5px; position: relative }
.dg-col.sel { background: #E5E2DA }
.dg-bar { width: 58%; min-width: 4px; max-width: 11px; border-radius: 2px }
.dg-whisk { position: absolute; width: 3px; border-radius: 1.5px; align-self: center }
.dg-bestdot { position: absolute; top: 1px; width: 4px; height: 4px;
  border-radius: 2px; background: var(--accent); align-self: center }
.dg-axis { position: relative; height: 30px; margin-top: 3px }
.dg-tick { position: absolute; width: 48px; display: flex; flex-direction: column;
  align-items: center }
.dg-tickoff { font-size: 11px; color: var(--ink2); line-height: 13px; white-space: nowrap }
.dg-tickoff.best { color: var(--accent) }
.dg-tickclk { font-size: 11px; color: var(--ink3); line-height: 12px; white-space: nowrap }
.dg-caption { display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 4px; padding: 0 2px }
.dg-cap { font-size: 13px; color: var(--ink3) }
.dg-capval { font-size: 13px; color: var(--ink2) }

/* why-this-is-an-estimate expander */
.dt-whybtn { display: flex; align-items: center; gap: 8px; margin: 24px 18px 0;
  padding: 13px 14px; border-radius: 13px; background: var(--surface2); width: calc(100% - 36px);
  text-align: left }
.dt-whybtn:active { opacity: .7 }
.dt-whylabel { color: var(--ink); font-size: 15px; font-weight: 500; flex: 1 }
.dt-whychev { display: flex; transition: transform .2s var(--ease) }
.dt-whybody { margin: 10px 20px 0; display: flex; flex-direction: column; gap: 8px }
.dt-whyline { color: var(--ink2); font-size: 13px; line-height: 19px }

@media (min-width: 720px) {
  .am-host .sheet { top: 0 }
  .am-chip { bottom: auto; top: 72px }
  .am-read { left: auto; right: 480px; transform: none }
  .am-scw { right: 480px }
  .am-slist { max-height: min(60vh, 440px) }
}

/* attribution is fully covered by the open sheet — hide it while covered */
body:has(.am-host .sheet.on) .maplibregl-ctrl-attrib { visibility: hidden }