/* Class E Prep app shell.
   Own stylesheet, deliberately separate from the site's public/css/app.css:
   this is the mobile app surface, not the marketing site.
   Every value here comes from the design handoff tokens. */

:root {
  --bg-page: #EFEBE2;
  --bg-app: #F4F1EA;
  --surface: #FFFFFF;

  --ink: #15221C;
  --ink-muted: #6B7A72;
  --ink-faint: #8B978F;
  --ink-disabled: #9AA5A0;
  --ink-body: #4A5A52;
  --ink-explain: #2C3A33;

  --line: #E6E2D8;
  --line-soft: #EFEBE2;
  --line-dashed: #D9D4C8;
  --line-track: #E1DDD2;

  --primary: #0B6B4F;
  --primary-dark: #084C39;
  --primary-pressed: #0B2A20;
  --primary-tint: #E6F0EB;
  --primary-wash: #F0F7F3;
  --primary-ring: #7FD1A8;
  --primary-line: #CBE3D7;

  --accent: #E4652A;
  --accent-tint: #FCEBE1;
  --accent-line: #F0D3C3;
  --accent-ink: #8A5A3E;
  --accent-chev: #C98A64;

  --danger: #C0392B;
  --danger-deep: #B32C2C;
  --danger-soft: #B0554A;
  --danger-wash: #FDF0EE;
  --danger-line: #F2D5D0;
  --danger-tint: #FBE3E0;

  --chevron: #B9C3BC;
  --disabled-fill: #CBD4CE;
  --input-fill: #FAF9F5;

  --topic-rules: #E1EAF4;
  --topic-dui: #F1E7F2;

  --gutter: 20px;
  --mono: ui-monospace, Menlo, Consolas, monospace;

  /* Safe-area aware chrome padding. */
  --top-inset: env(safe-area-inset-top, 0px);
  --bottom-inset: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  background: var(--bg-page);
  color: var(--ink);
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

p, h1, h2, h3 { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input { font: inherit; }

/* ── App frame ───────────────────────────────────────────────
   Phone-first. On tablet and desktop the column caps at 460px and
   centres rather than letting rows stretch. */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 460px;
  margin: 0 auto;
  background: var(--bg-app);
  position: relative;
}
@media (min-width: 500px) {
  body { background: radial-gradient(1200px 600px at 50% -10%, #E3EDE7 0%, #EFEBE2 60%); }
  .app { box-shadow: 0 0 0 1px var(--line); }
}

.scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pad {
  padding: 18px var(--gutter) 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pad.g16 { gap: 16px; }
.pad.g14 { gap: 14px; }
.pad.g10 { gap: 10px; }

/* ── Type ──────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.mono { font-family: var(--mono); }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.center { text-align: center; }

/* ── Header bar ────────────────────────────────────────────── */
.hdr {
  flex: none;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: calc(var(--top-inset) + 14px) var(--gutter) 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hdr-left { flex: 1; min-width: 0; }
.hdr-title {
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.lang-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-app);
  font-size: 12px;
  font-weight: 650;
  color: var(--ink-muted);
}
.lang-chip:hover { border-color: var(--primary); }
.lang-chip .flag { font-size: 13px; }

/* ── Tab bar ───────────────────────────────────────────────── */
.tabs {
  flex: none;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 9px 8px calc(var(--bottom-inset) + 12px);
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  color: var(--ink-disabled);
  font-size: 10px;
  font-weight: 600;
}
.tab.on { color: var(--primary); font-weight: 750; }
.tab svg { width: 18px; height: 18px; }

/* ── Cards and rows ────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 16px;
}
.card.tap:hover { border-color: var(--primary); }
.row { display: flex; align-items: center; gap: 12px; }
.row-top { display: flex; align-items: flex-start; gap: 12px; }
.fill { flex: 1; min-width: 0; }
.col { display: flex; flex-direction: column; }

.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 15px;
  width: 100%;
  text-align: left;
}
.list-row:hover { border-color: var(--primary); }
.list-title { font-size: 14.5px; font-weight: 720; letter-spacing: -0.01em; }
.list-meta { font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }

.isq {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
}
.isq svg { display: block; }

.chev { flex: none; color: var(--chevron); }

/* ── Progress bars ─────────────────────────────────────────── */
.bar {
  height: 5px;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  transition: width 0.4s ease;
}
.bar.low > i { background: var(--accent); }
.bar.h8 { height: 8px; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 13px;
  padding: 15px 16px;
  font-size: 14.5px;
  font-weight: 750;
  text-align: center;
  width: 100%;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:active { background: var(--primary-dark); }
.btn-primary[disabled], .btn-primary.off { background: var(--disabled-fill); cursor: default; }
.btn-outline { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--primary); }
.btn-white { background: #fff; color: var(--primary); border-radius: 14px; padding: 16px; font-size: 15.5px; }
.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  border-radius: 14px;
  padding: 16px;
  font-size: 15.5px;
}
.btn-text {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 13px;
  font-weight: 650;
  color: var(--primary);
  text-align: center;
}
.btn-text.danger { color: var(--danger-soft); }
.btn-text.left { text-align: left; }

/* ── Welcome ───────────────────────────────────────────────── */
.welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--primary);
  color: #fff;
  padding: calc(var(--top-inset) + 40px) 26px calc(var(--bottom-inset) + 40px);
}
.welcome .brand-sq {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: #fff;
  color: var(--primary);
  display: grid; place-items: center;
  font-size: 19px; font-weight: 800;
}
.welcome .lang-chip {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.welcome .pitch { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.welcome .pitch .eyebrow { color: rgba(255,255,255,.7); }
.welcome h1 { font-size: 36px; font-weight: 780; letter-spacing: -0.03em; line-height: 1.08; }
.welcome .sub { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 300px; }
.stats { display: flex; gap: 10px; margin-bottom: 22px; }
.stat {
  flex: 1;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 13px;
}
.stat b { display: block; font-size: 22px; font-weight: 750; letter-spacing: -0.02em; }
.stat span { display: block; font-size: 10.5px; line-height: 1.3; color: rgba(255,255,255,.7); margin-top: 2px; }
.disclaimer { font-size: 11px; color: rgba(255,255,255,.6); text-align: center; line-height: 1.5; margin-top: 4px; }

/* ── Auth ──────────────────────────────────────────────────── */
.auth {
  flex: 1;
  background: var(--surface);
  padding: calc(var(--top-inset) + 20px) 24px calc(var(--bottom-inset) + 24px);
  overflow-y: auto;
}
.auth h1 { font-size: 28px; font-weight: 770; letter-spacing: -0.025em; line-height: 1.15; }
.auth .sub { font-size: 14px; color: var(--ink-muted); line-height: 1.5; margin: 6px 0 22px; }
.fields { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: var(--ink-muted); }
.field input {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  font-size: 15px;
  background: var(--input-fill);
  color: var(--ink);
}
.field input:focus { outline: none; border-color: var(--primary); }
.field.bad input { border-color: var(--danger); }
.err { font-size: 11.5px; color: var(--danger); }
.divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.divider i { flex: 1; height: 1px; background: var(--line); }
.divider span { font-size: 11px; color: var(--ink-faint); }

/* ── Home ──────────────────────────────────────────────────── */
.hero {
  background: var(--primary);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #fff;
  animation: fl-in .35s ease both;
}
.ring {
  flex: none;
  width: 88px; height: 88px;
  border-radius: 50%;
  display: grid; place-items: center;
  position: relative;
}
.ring::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--primary);
}
.ring > div { position: relative; z-index: 1; text-align: center; }
.ring b { display: block; font-size: 23px; font-weight: 780; letter-spacing: -0.02em; }
.ring span {
  display: block;
  font-family: var(--mono);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .8;
}
.hero h2 { font-size: 17px; font-weight: 730; }
.hero p { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.82); margin-top: 4px; }

.metrics { display: flex; gap: 10px; }
.metric {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
}
.metric b { display: block; font-size: 19px; font-weight: 750; letter-spacing: -0.02em; }
.metric b.accent { color: var(--accent); }
.metric span { display: block; font-size: 10.5px; color: var(--ink-muted); margin-top: 2px; }

.cta-dark {
  background: var(--ink);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  width: 100%;
  text-align: left;
}
.cta-dark:hover { background: var(--primary-pressed); }
.cta-dark .isq { background: rgba(255,255,255,.12); width: 44px; height: 44px; }
.cta-dark h3 { font-size: 15.5px; font-weight: 730; }
.cta-dark p { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 3px; }
.cta-dark.stacked { flex-direction: column; align-items: stretch; gap: 12px; }
.cta-dark .meta {
  display: flex;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.7);
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}
.tile:hover { border-color: var(--primary); transform: translateY(-1px); }
.tile h3 { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.tile .meta { font-size: 10.5px; color: var(--ink-muted); }

.mistakes {
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  padding: 15px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
}
.mistakes .isq { background: var(--accent); width: 38px; height: 38px; }
.mistakes h3 { font-size: 14.5px; font-weight: 720; color: var(--ink); }
.mistakes p { font-size: 12px; color: var(--accent-ink); margin-top: 3px; line-height: 1.4; }

/* ── Quiz ──────────────────────────────────────────────────── */
/* The quiz page swaps between three full-height views. */
#view-quiz, #view-result, #view-review {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
[hidden] { display: none !important; }

.quiz-top {
  flex: none;
  z-index: 5;
  background: var(--bg-app);
  padding: calc(var(--top-inset) + 14px) var(--gutter) 12px;
  border-bottom: 1px solid var(--line);
}
.quiz-top .line { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.quit { font-size: 12.5px; font-weight: 650; color: var(--ink-muted); padding: 6px 0; }
.counter { margin-left: auto; font-family: var(--mono); font-size: 11.5px; font-weight: 650; color: var(--ink-muted); }
.timer {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 650;
  border-radius: 7px;
  padding: 4px 8px;
  background: var(--primary-tint);
  color: var(--primary);
}
.timer.low { background: var(--danger-tint); color: var(--danger-deep); }
.quiz-track { height: 5px; border-radius: 999px; background: var(--line-track); overflow: hidden; }
.quiz-track > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .4s ease; }

.qbody { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.topic-chip {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
}
.sign-plate {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  display: grid;
  place-items: center;
}
.qtext { font-size: 19.5px; font-weight: 720; letter-spacing: -0.02em; line-height: 1.35; }

.opts { display: flex; flex-direction: column; gap: 9px; }
.opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 15px;
  background: var(--surface);
  transition: background .15s ease, border-color .15s ease;
}
.opt .badge {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--line-soft);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 750;
}
.opt .txt { flex: 1; font-size: 14.5px; line-height: 1.4; }
.opt .mark { flex: none; width: 16px; text-align: right; font-weight: 800; }
.opt.sel { border-color: var(--primary); background: var(--primary-wash); }
.opt.sel .badge { background: var(--primary); color: #fff; }
.opt.ok { border-color: var(--primary); background: var(--primary-wash); }
.opt.ok .badge { background: var(--primary); color: #fff; }
.opt.ok .mark { color: var(--primary); }
.opt.no { border-color: var(--danger); background: var(--danger-wash); }
.opt.no .badge { background: var(--danger); color: #fff; }
.opt.no .mark { color: var(--danger); }

.explain {
  border-radius: 14px;
  padding: 15px 16px;
  animation: fl-pop .22s ease both;
}
.explain.ok { background: var(--primary-wash); border: 1px solid var(--primary-line); }
.explain.no { background: var(--danger-wash); border: 1px solid var(--danger-line); }
.explain h4 { font-size: 13px; font-weight: 750; margin-bottom: 5px; }
.explain.ok h4 { color: var(--primary); }
.explain.no h4 { color: var(--danger); }
.explain p { font-size: 13px; line-height: 1.55; color: var(--ink-explain); }

.qfoot { display: flex; gap: 10px; }
.qfoot .back {
  flex: none;
  width: 52px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  display: grid;
  place-items: center;
}
.qfoot .next { flex: 1; }

/* ── Result ────────────────────────────────────────────────── */
.result-head {
  padding: calc(var(--top-inset) + 20px) 22px 26px;
  background: var(--primary);
  color: #fff;
}
.result-head.fail { background: var(--danger-soft); }
.result-head .eyebrow { color: rgba(255,255,255,.7); }
.result-head h1 { font-size: 34px; font-weight: 780; letter-spacing: -0.03em; margin: 6px 0 10px; }
.result-head .score {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.result-head .pct { font-family: var(--mono); font-size: 56px; font-weight: 800; letter-spacing: -0.04em; line-height: .9; }
.result-head .of { font-size: 13px; color: rgba(255,255,255,.82); line-height: 1.4; }
.result-head .note { font-size: 13.5px; color: rgba(255,255,255,.82); line-height: 1.5; margin-top: 12px; }

.trow { display: flex; align-items: center; gap: 12px; }
.trow .name { font-size: 13.5px; font-weight: 700; }
.trow .val { flex: none; font-family: var(--mono); font-size: 11.5px; font-weight: 650; color: var(--ink-muted); }

/* ── Review ────────────────────────────────────────────────── */
.rev {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 14px;
  padding: 15px 16px;
}
.rev.no { border-left-color: var(--danger); }
.rev .hd { display: flex; gap: 8px; align-items: baseline; margin-bottom: 7px; }
.rev .num { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.rev .verdict { font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); }
.rev.no .verdict { color: var(--danger); }
.rev .q { font-size: 14px; font-weight: 650; line-height: 1.4; }
.rev .ans { font-size: 12.5px; color: var(--ink-muted); margin-top: 7px; }
.rev .right { font-size: 12.5px; font-weight: 650; color: var(--primary); margin-top: 3px; }
.rev .exp { font-size: 12.5px; color: var(--ink-body); line-height: 1.55; border-top: 1px solid var(--line-soft); padding-top: 9px; margin-top: 9px; }

/* ── Progress tab ──────────────────────────────────────────── */
.ready-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
}
.ready-card .big { font-size: 40px; font-weight: 790; letter-spacing: -0.04em; }
.ready-card .tag { font-size: 12px; color: var(--ink-muted); }
.axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 6px;
}
.hist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.hist-row:first-child { border-top: 0; }
.pill {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--primary-tint);
  color: var(--primary);
}
.pill.fail { background: var(--danger-tint); color: var(--danger-deep); }
.empty {
  border: 1px dashed var(--line-dashed);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.5;
}
.empty img {
  display: block;
  width: 160px;
  height: auto;
  margin: 0 auto 12px;
  mix-blend-mode: multiply; /* the art ships on bone, this drops it onto the card */
}

/* ── Checklist ─────────────────────────────────────────────── */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 15px;
  width: 100%;
  text-align: left;
}
.box {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line-dashed);
  display: grid; place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  margin-top: 1px;
}
.check-row.done .box { background: var(--primary); box-shadow: none; }
.check-row.done .list-title { text-decoration: line-through; color: var(--ink-faint); }
.note-block {
  background: var(--line-soft);
  border-radius: 12px;
  padding: 13px;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.55;
}

/* ── Steps ─────────────────────────────────────────────────── */
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  gap: 14px;
}
.step .n {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px;
  font-weight: 750;
}
.step h3 { font-size: 14.5px; font-weight: 730; }
.step p { font-size: 12.5px; line-height: 1.55; color: var(--ink-body); margin-top: 4px; }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq-card {
  display: block; /* a button box otherwise centres and shrink-wraps its rows */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 16px;
  width: 100%;
  text-align: left;
}
.faq-card .q { display: flex; align-items: flex-start; gap: 10px; }
.faq-card .q span { flex: 1; font-size: 13.5px; font-weight: 720; line-height: 1.4; }
.faq-card .q i { flex: none; font-size: 16px; color: var(--ink-faint); font-style: normal; line-height: 1.2; }
.faq-card .a {
  display: block; /* a span will not honour max-height while inline */
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-body);
  transition: max-height .25s ease, margin-top .25s ease;
}
.faq-card.open .a { max-height: 400px; margin-top: 9px; }

/* ── DMV ───────────────────────────────────────────────────── */
.map-ph {
  height: 150px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: repeating-linear-gradient(45deg, #DDE7DF 0 10px, #D5E1D8 10px 20px);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-muted);
  text-align: center;
  padding: 0 20px;
}
.office .nm { font-size: 14px; font-weight: 720; }
.office .dist { flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--primary); }
.office .addr { font-size: 12.5px; color: var(--ink-muted); margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.chip { font-size: 10.5px; border-radius: 8px; padding: 4px 9px; background: var(--line-soft); color: var(--ink-muted); }
.chip.green { background: var(--primary-tint); color: var(--primary); }

/* ── Language picker ───────────────────────────────────────── */
.lang-screen { padding: calc(var(--top-inset) + 28px) var(--gutter) 26px; display: flex; flex-direction: column; gap: 10px; }
.lang-screen h1 { font-size: 24px; font-weight: 770; letter-spacing: -0.025em; }
.lang-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  width: 100%;
  text-align: left;
}
.lang-row.on { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(11,107,79,.14); }
.lang-row .flag { font-size: 17px; }
.lang-row .nat { font-size: 14px; font-weight: 700; }
.lang-row .eng { font-size: 11px; color: var(--ink-muted); margin-top: 1px; }
.badge-full { font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 4px 8px; background: var(--primary-tint); color: var(--primary); }
.badge-en { font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 4px 8px; background: var(--line-soft); color: var(--ink-faint); }

/* ── Guide detail ──────────────────────────────────────────── */
.guide-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 15px;
}
.guide-row h3 { font-size: 13.5px; font-weight: 730; }
.guide-row p { font-size: 12.5px; line-height: 1.55; color: var(--ink-body); margin-top: 4px; }

/* ── Sign plates ───────────────────────────────────────────── */
.sign { position: relative; flex: none; display: grid; }
.sign .shape { position: absolute; inset: 0; }
.sign .lab {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  text-align: center;
  padding: 0 2px;
}
.sign.tri-down .lab { align-items: start; padding-top: 22%; }
.sign.pentagon .lab { align-items: end; padding-bottom: 18%; }

/* ── Toast ─────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-inset) + 84px);
  transform: translate(-50%, 12px);
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  border-radius: 999px;
  padding: 10px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 40;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── Install prompt ────────────────────────────────────────── */
.install {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--primary-tint);
  border: 1px solid var(--primary-line);
  border-radius: 16px;
  padding: 14px 15px;
}
.install p { font-size: 12.5px; color: var(--primary-dark); line-height: 1.45; }
.install .go {
  flex: none;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
}

@keyframes fl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fl-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* Reduced motion: kill transitions outright rather than shrink their duration.
   A near-zero transition-duration still starts a transition, and Chrome can
   leave the computed value pinned at the start - which silently froze the FAQ
   accordion open-height at 0. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}