/* One screen, read once, on a phone held at a car. Large type, high contrast,
   nothing that needs a second look. */
:root {
  --ink: #0f2942; --muted: #5b6b7c; --line: rgba(15,41,66,.12);
  --bg: #f7f8fa; --surface: #fff; --accent: #c5a572;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; gap: 16px;
}
.card {
  width: 100%; max-width: 420px; background: var(--surface); border-radius: 18px;
  border: 1px solid var(--line); padding: 28px 24px; text-align: center;
}
.venue { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.headline { font-size: 1.65rem; font-weight: 800; line-height: 1.2; margin: 10px 0 0; }
.car { margin-top: 14px; font-size: 1.05rem; color: var(--ink); }
.since { margin-top: 6px; font-size: .95rem; color: var(--muted); }
.detail { margin-top: 10px; font-size: 1rem; color: var(--muted); }
.cardno { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
          font-size: .85rem; letter-spacing: .04em; color: var(--muted); }
.foot { font-size: .8rem; color: var(--muted); text-align: center; max-width: 420px; }

/* The alarm is a change of treatment, never an appearance — the element is
   always there, so nothing on the page moves as the state changes. */
.tone-calm .headline    { color: var(--ink); }
.tone-active .headline  { color: #8a5a12; }
.tone-arrived           { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(197,165,114,.25); }
.tone-arrived .headline { color: #7a5a1c; }
.tone-muted .headline   { color: var(--muted); font-weight: 700; }

.ask { margin-top: 18px; padding: 14px; border-radius: 12px; background: #f3f5f8;
       border: 1px solid var(--line); font-size: .95rem; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .card { transition: box-shadow .2s ease, border-color .2s ease; }
}

/* The one action on the page. 60px like every primary in this product. */
.request { margin-top: 20px; width: 100%; min-height: 60px; border: none; border-radius: 12px;
           background: var(--accent); color: #0f2942; font-size: 1.1rem; font-weight: 800; }
.request:disabled { opacity: .6; }