/*
 * shodkk.css — the one shared stylesheet for every page of shodkk.myind.ai.
 *
 * The website is a continuation of the app, not a second product. Every value
 * below comes from lib/config/design_tokens.dart (cited per group). Pages may
 * add layout rules of their own, but colours, type, radii, buttons, inputs,
 * chips, cards, the header and the footer live here only.
 *
 * Fonts: each page loads Outfit + Noto Sans Devanagari from Google Fonts
 * (Devanagari is the fallback on every text style, as in lib/config/theme.dart).
 *
 * Phone only (owner, 2026-10-19): "our website is visible from the mobile view
 * only; for admin it's web view". Every public page is one phone column
 * (--phone, 480px) on every screen: on a laptop the column sits centred on a
 * plain --outside background, the header and footer are the column's width,
 * and the header nav is always hidden (as on a phone). There are no wide
 * layouts: .page.wide and .page.prose are the same column. website/admin/**
 * does not load this file and keeps its desktop layout.
 *
 * Dark mode: the app's dark theme is a green-tinted palette that the Kosh and
 * onboarding screens do not use; the site keeps the app's white surface in
 * both OS colour schemes (same rule kosh-app.css had).
 */
/* Layout shift (Lighthouse CLS 0.14 on /how-money-works, 2026-10-20): Outfit
 * arrives after the first paint and is narrower than the system sans, so every
 * paragraph re-wrapped. This local face is the system sans scaled to Outfit's
 * width (measured: Outfit 400 = 0.98 x Arial) with Outfit's vertical metrics
 * (ascender 1000, descender 260 per 1000), so the swap no longer moves text. */
@font-face {
  font-family: 'Outfit Fallback';
  src: local('Arial'), local('ArialMT'), local('Roboto'), local('Helvetica');
  size-adjust: 98%; ascent-override: 102%; descent-override: 26.5%; line-gap-override: 0%;
}
:root {
  /* design_tokens.dart:24-27 */
  --accent: #E8590C;
  --accent-dark: #C2410C;
  --accent-mid: #FED7AA;
  --accent-pale: #FFF4ED;
  /* WCAG AA (launch, 2026-10-20): the brand saffron #E8590C is 3.58:1 on
     white, below the 4.5:1 that small text needs. Text, links and filled
     buttons use the app's own darker saffron (design_tokens.dart:27,
     primaryAccentDark): 5.18:1 on white, 4.96:1 on --bg-sub, 4.79:1 on
     --accent-pale, and white on it is 5.18:1. --accent stays for borders,
     focus rings, spinners and other non-text marks. */
  --accent-ink: #C2410C;
  --accent-fill: #C2410C;
  --accent-fill-hover: #9A3412;
  /* Same rule for the status colours as text on their pale backgrounds:
     #DC2626 on --danger-bg is 4.41:1 and #16A34A on --success-bg 3.15:1. */
  --danger-ink: #B91C1C;   /* 5.91:1 on --danger-bg */
  --success-ink: #15803D;  /* 4.79:1 on --success-bg */
  --text-on-bone: #52525B; /* 7.03:1 on --bone (--text-sec there is 4.40:1) */
  /* :56-70 */
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --bg-sub: #FAFAFA;
  --bone: #F4F4F5;
  --border: #E4E4E7;
  --border-soft: #F0F0F0;
  --text: #111111;
  --text-sec: #71717A;
  --text-ter: #A1A1AA;
  /* :108-115 */
  --danger: #DC2626;
  --danger-bg: #FEF2F2;
  --danger-border: #FECACA;
  --success: #16A34A;
  --success-bg: #F0FDF4;
  --success-border: #BBF7D0;
  --warn: #92400E;
  --warn-bg: #FEF3E2; /* amberPale, design_tokens.dart:112 */
  --warn-border: #FDE68A;
  --amber: #C07000;      /* amber :111 */
  --green-alt: #4CAF50;  /* statusSuccessAlt :41 */
  --blue: #2563EB;       /* secondaryAccent :148 */
  /* radii :330-337 */
  --r-card: 16px;
  --r-card-sm: 12px;
  --r-button: 10px; /* AppPrimaryButton + OnboardingPrimaryButton use radiusInput (app_primary_button.dart:48) */
  --r-input: 10px;
  --r-chip: 20px;
  /* spacing: 4 / 8 / 12 / 16 / 24 / 32 */
  --gutter: 16px;
  /* Phone column and the plain area around it on a laptop. */
  --phone: 480px;
  --outside: #ECECEE;
  --font: 'Outfit', 'Outfit Fallback', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Aliases kept for pages written against kosh-app.css. */
  --saffron: var(--accent);
  --saffron-dark: var(--accent-dark);
  --pale: var(--accent-pale);
  --mid: var(--accent-mid);
  --border-med: var(--border);
  --good: var(--success);
}

/* One family per language (docs/design/kosh-simple-web-spec.md, the app's faces): Marathi and Hindi in
 * Noto Sans Devanagari — its own digits and Latin too, so a line never switches font — and English and
 * the Latin-letter Marathi / Hindi in Outfit. */
html[lang="mr"], html[lang="hi"] { --font: 'Noto Sans Devanagari', sans-serif; }
html[lang="en"], html[lang="mr-Latn"], html[lang="hi-Latn"] { --font: 'Outfit', 'Outfit Fallback', sans-serif; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; background: var(--outside); }
body {
  width: 100%; max-width: var(--phone); margin: 0 auto;
  box-shadow: 0 0 0 1px var(--border-soft);
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
/* A link inside running text must not rely on colour alone (WCAG 1.4.1,
   Lighthouse link-in-text-block). Buttons and nav links are not in-text. */
main p a:not(.btn), main li a:not(.btn), .note a, .hint a { text-decoration: underline; text-underline-offset: 2px; }
.hide, .hidden { display: none !important; }

/* ── Page canvas: one phone column, 16px gutters (no wide variants) ─────── */
.page, .page.wide, .page.prose { width: 100%; max-width: var(--phone); margin: 0 auto; padding: 8px var(--gutter) 40px; flex: 1; }
@media print {
  html { background: #fff; }
  body { max-width: none; box-shadow: none; }
}

/* ── Shared header (shodkk-shell.js fills #siteHeader) ──────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--border-soft);
  padding-top: env(safe-area-inset-top);
  /* Reserve the header row (10 + 36 + 10 px + border) before shodkk-shell.js
     fills it, so the page does not jump down (Lighthouse CLS, 2026-10-20). */
  min-height: calc(57px + env(safe-area-inset-top));
}
.site-header .in {
  max-width: var(--phone); margin: 0 auto; padding: 6px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* Wordmark: lowercase, Outfit 800, letter-spacing −1 (shodkk_home_screen.dart:499-505). */
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font-size: 24px; font-weight: 800; letter-spacing: -1px; color: var(--text); line-height: 1; }
.wordmark:hover { text-decoration: none; }
.site-header .right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.site-header .nav { display: none; gap: 18px; } /* phone nav on every width */
.site-header .nav a { color: var(--text-sec); font-size: 14px; font-weight: 600; }
.site-header .signin { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
/* Signed in (walk 81): avatar letter + first name → menu (Home, Sign out). */
.acct { position: relative; min-width: 0; }
.acct-btn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 150px; height: 36px; padding: 0 10px 0 4px;
  border-radius: 18px; border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit;
  font-size: 14px; font-weight: 700; cursor: pointer; }
.acct-av { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--accent-fill); color: #fff; font-size: 13px; font-weight: 800; }
.acct-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 160px; z-index: 20; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r-card-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 6px; }
.acct-menu a, .acct-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text); border-radius: 8px; cursor: pointer; }
.acct-menu a:hover, .acct-menu button:hover { background: var(--bone); text-decoration: none; }
/* Language: a 36 px globe button at the top-right (after Sign in) that opens
   one bottom sheet of the five languages, each in its own script (D13). */
.lang-btn {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--card); color: var(--text); border: 1px solid var(--border);
  cursor: pointer; padding: 0; position: relative;
}
/* The globe looks 36px like LanguageIconButton (size 36) but takes a 44px tap. */
.lang-btn::after { content: ''; position: absolute; inset: -4px; }
.lang-btn:hover { border-color: var(--accent-mid); color: var(--accent-dark); }
.lang-btn:focus-visible, .lang-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-host { position: fixed; inset: 0; z-index: 100; }
.lang-scrim { position: absolute; inset: 0; background: rgba(17, 17, 17, .45); }
.lang-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: var(--phone); margin: 0 auto; background: var(--card);
  border-radius: 20px 20px 0 0; padding: 8px 0 calc(24px + env(safe-area-inset-bottom));
}
.lang-sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 4px auto 12px; }
.lang-title { padding: 0 20px 8px; font-size: 16px; font-weight: 600; }
.lang-row {
  display: flex; width: 100%; align-items: center; gap: 12px; padding: 12px 20px; text-align: left;
  background: transparent; border: 0; font: inherit; color: var(--text); cursor: pointer;
}
.lang-row.on { background: var(--accent-pale); }
.lang-row .main { flex: 1; min-width: 0; }
.lang-row .n { display: block; font-size: 16px; font-weight: 600; }
.lang-row .s { display: block; font-size: 13px; color: var(--text-sec); }
.lang-row .tick { color: var(--accent-ink); font-weight: 800; font-size: 18px; }

/* ── Shared footer ──────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border-soft); background: var(--bg-sub); margin-top: 24px; }
.site-footer .in { max-width: var(--phone); margin: 0 auto; padding: 24px var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
.site-footer .stores { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px; }
.site-footer .stores .btn { width: auto; flex: 1 1 180px; }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.site-footer .links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-sec); font-size: 13px; font-weight: 500; }
.site-footer .copy { color: var(--text-sec); font-size: 12px; margin-top: 14px; }

/* ── Type ───────────────────────────────────────────────────────────────── */
/* Screen title as KoshHeader / fsTitleHero: left-aligned, 26 / w800. */
h1, .title { font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; color: var(--text); }
h2.section, .label, .section-label {
  display: block; color: var(--text-sec); font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; margin: 24px 0 8px;
}
h3 { font-size: 16px; font-weight: 700; }
.lede, .sub { color: var(--text-sec); font-size: 13px; line-height: 1.55; margin-top: 6px; }
.note, .hint, .small { color: var(--text-sec); font-size: 12px; line-height: 1.5; }
.muted { color: var(--text-sec); } /* --text-ter is 2.56:1 on white: borders/icons only */
/* Numbers stay in the page's one font (kosh-simple-web-spec: no monospace), with even digit widths. */
.mono { font-family: inherit; font-variant-numeric: tabular-nums; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px; }
.card.sm { border-radius: var(--r-card-sm); padding: 12px 14px; }
.card.sub { background: var(--bg-sub); }
.card.accent { background: var(--accent-pale); border-color: var(--accent-mid); }
.card + .card { margin-top: 12px; }

/* ── Buttons: AppPrimaryButton — 48px, flat, no shadow, 14px w700 ─────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 12px 18px;
  border-radius: var(--r-button); border: 1.5px solid transparent;
  background: var(--accent-fill); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: .3px;
  text-align: center; text-decoration: none; cursor: pointer; box-shadow: none;
}
.btn:hover { background: var(--accent-fill-hover); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn.outline, .btn.quiet, .btn.ghost { background: var(--card); color: var(--text); border-color: var(--border); }
.btn.outline:hover, .btn.quiet:hover, .btn.ghost:hover { border-color: var(--accent); background: var(--card); }
.btn.soft { background: var(--accent-pale); color: var(--accent-dark); border-color: var(--accent-mid); }
.btn.danger { background: var(--card); color: var(--danger); border-color: var(--danger-border); }
.btn.inline { width: auto; display: inline-flex; }
.btn + .btn { margin-top: 10px; }
.linkbtn { background: none; border: 0; color: var(--accent-ink); font: inherit; font-weight: 700; cursor: pointer; padding: 6px 0; min-height: 44px; }

/* ── Inputs: radius 10, border #E4E4E7 ──────────────────────────────────── */
label.field { display: block; font-size: 13px; font-weight: 700; margin: 14px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=file], textarea, select.input {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-input); padding: 12px 14px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
/* Password show / hide (shodkk-shell.js): the eye sits inside the field. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 52px; }
.pw-eye {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--r-input); color: var(--text-sec); cursor: pointer;
}
.pw-eye:hover { color: var(--text); }
.pw-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }


/* ── Chips / pills / status ─────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-chip); cursor: pointer;
}
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-pale); color: var(--accent-dark); }
.pill {
  /* AppStatusPill (app_components.dart:288-303): pad 8/3, text = the colour. */
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  font-size: 11px; font-weight: 700; border-radius: var(--r-chip);
  color: var(--accent); background: var(--accent-pale); border: 1px solid var(--accent-mid);
}
.pill.neutral { color: var(--text-on-bone); background: var(--bone); border-color: var(--border); }
.pill.good { color: var(--success-ink); background: var(--success-bg); border-color: var(--success-border); }
.pill.bad { color: var(--danger-ink); background: var(--danger-bg); border-color: var(--danger-border); }
.pill.warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }

/* ── Messages ───────────────────────────────────────────────────────────── */
.msg { margin-top: 12px; font-size: 13px; padding: 12px 14px; border-radius: var(--r-card-sm); }
.msg:empty { display: none; }
.msg.err { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-ink); }
.msg.ok { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-ink); }
.msg.warn { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn); }

/* ── Numbered steps (join, how-money-works) ─────────────────────────────── */
.steps { list-style: none; counter-reset: s; display: grid; gap: 10px; margin-top: 12px; }
.steps li {
  counter-increment: s; position: relative; padding: 12px 14px 12px 52px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card-sm);
}
.steps li::before {
  content: counter(s); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-pale); color: var(--accent-dark); border: 1px solid var(--accent-mid);
  font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.steps li b { display: block; font-size: 14px; }
.steps li span { display: block; color: var(--text-sec); font-size: 13px; }

/* ── "Join from your phone" (laptop only, shodkk-shell.js mountPhoneCard) ── */
.pc-on > :not(#phoneCard) { display: none !important; }
.phone-card { margin-top: 16px; text-align: center; }
.phone-card .pc-title { font-size: 22px; font-weight: 800; letter-spacing: -.3px; line-height: 1.25; }
.phone-card .sub { margin-top: 8px; }
.phone-card .pc-qr { width: 216px; margin: 16px auto 4px; background: #fff; border-radius: var(--r-card-sm); }
.phone-card .pc-qr svg { display: block; width: 216px; height: 216px; }
.phone-card .pc-skip { display: block; margin: 8px auto 0; font-size: 13px; color: var(--text-sec); font-weight: 600; }
/* o19: the three steps, the address to type, and the store buttons once listed. */
.phone-card .pc-steps { text-align: left; margin: 12px 0 0; }
.phone-card .pc-steps li b { font-weight: 600; }
.phone-card .pc-url { margin-top: 12px; font-size: 13px; color: var(--text-sec); overflow-wrap: anywhere; }
.phone-card .pc-url b { color: var(--text); font-size: 13px; }
.phone-card .pc-stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.phone-card .pc-stores .btn { flex: 1 1 160px; margin: 0; }

/* ── Spinner / skeleton ─────────────────────────────────────────────────── */
.spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent-mid); outline-offset: 2px;
}
/* Fields show focus the app's way: the accent border alone (theme.dart:57). */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); }

/* Devanagari has no capitals and breaks apart when letter-spaced: section
 * labels keep the app's look in Latin scripts only. */
html[lang="mr"] .label, html[lang="hi"] .label, html[lang="mr"] .section-label, html[lang="hi"] .section-label,
html[lang="mr"] h2.section, html[lang="hi"] h2.section { letter-spacing: 0; font-size: 12px; }

/* ── Install the web app (pwa.js) ─────────────────────────────────────────── */
.pwa-banner { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; }
.pwa-banner .pwa-ic { width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto; background: #fff; }
.pwa-banner .main { flex: 1; min-width: 0; }
.pwa-banner b { display: block; font-size: 15px; }
.pwa-banner .s { display: block; color: var(--text-sec); font-size: 13px; margin-top: 2px; }
.pwa-acts { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 10px; }
.pwa-acts .btn { margin: 0; min-height: 40px; padding: 8px 14px; font-size: 14px; }
.pwa-acts .linkbtn { color: var(--text-sec); font-size: 13px; min-height: 40px; }
.pwa-row { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border-soft); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pwa-body { padding: 0 20px; }
.pwa-body .btn { margin-top: 14px; }
.pwa-p { color: var(--text-sec); font-size: 14px; line-height: 1.5; }
.pwa-steps { list-style: none; display: grid; gap: 10px; }
.pwa-steps li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--bg-sub); border: 1px solid var(--border-soft); border-radius: var(--r-card-sm); }
.pwa-n { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; flex: 0 0 auto; }
.pwa-ill { width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; flex: 0 0 auto; }
.pwa-add-chip { color: #007AFF; font-weight: 700; font-size: 15px; font-family: inherit; }
.pwa-steps .main { flex: 1; min-width: 0; }
.pwa-steps b { display: block; font-size: 15px; }
.pwa-steps .s { display: block; color: var(--text-sec); font-size: 13px; }
.pwa-toast { display: flex; gap: 12px; align-items: center; justify-content: space-between; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.pwa-toast .btn { margin: 0; min-height: 36px; padding: 6px 14px; font-size: 14px; }
.phone-card .pc-install { display: block; margin: 12px auto 0; font-size: 14px; }
/* Pages without webapp.css (login, join…) still float the toast. */
.pwa-toast { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 31; max-width: calc(var(--phone) - 32px); margin: 0 auto; }
body.wa-app .pwa-toast { bottom: calc(72px + env(safe-area-inset-bottom)); }
/* Offline (pwa.js): the top bar, the saved-copy line, actions that wait for the internet. */
.pwa-offbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; max-width: var(--phone); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  padding: calc(7px + env(safe-area-inset-top)) 16px 7px; background: #2d2a26; color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1.35; }
.pwa-offbar .dot { width: 8px; height: 8px; border-radius: 50%; background: #f5a524; flex: 0 0 auto; }
.pwa-offbar .t { flex: 1; min-width: 0; }
.pwa-offbar .s { flex-basis: 100%; padding-left: 16px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.82); }
body.pwa-offline { padding-top: var(--pwa-off-h, 34px); }
body.pwa-offline .site-header, body.pwa-offline .wa-appbar, body.pwa-offline .wa-subtabs, body.pwa-offline .sm-pin { top: var(--pwa-off-h, 34px); }
body.pwa-offline .site-header { padding-top: 0; min-height: 57px; }
.pwa-offbtn, .pwa-offbtn[disabled] { opacity: .55; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) { .pwa-offbar { animation: pwaOffIn .2s ease-out; } }
@keyframes pwaOffIn { from { transform: translateY(-100%); } to { transform: none; } }
/* The forced install (pwa.js shouldForceInstall; PWA_FORCE_INSTALL is off). */
.pwa-gate { position: fixed; inset: 0; z-index: 200; background: var(--bg); overflow-y: auto;
  display: flex; align-items: center; justify-content: center; padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom)); }
.pwa-gate-in { width: 100%; max-width: 400px; text-align: center; }
.pwa-gate-in img { display: block; margin: 0 auto 20px; border-radius: 22px; }
.pwa-gate-in .btn { margin-top: 20px; }
.pwa-gate-in .pwa-hint { margin-top: 20px; font-size: 15px; color: var(--text); }

/* Place search under a city field (place-core.js, walk 81). In the page flow,
   not floating, so it never covers the next field on a phone. */
.place-list { list-style: none; margin: 4px 0 0; padding: 4px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card-sm); max-height: 260px; overflow-y: auto; }
.place-list li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1.3; }
.place-list li b { display: block; font-weight: 700; color: var(--text); }
.place-list li span { display: block; font-size: 12px; color: var(--text-sec); margin-top: 2px; }
.place-list li:hover { background: var(--bone); }
.place-list li.none { cursor: default; color: var(--text-sec); }
.place-list li.none:hover { background: none; }