/* The app's palette (mobile/lib/theme.dart), light and dark. */
:root {
  color-scheme: light;
  --bg: #F1F6F4; --card: #FFFFFF; --edge: #E1EAE7; --inset: #EDF3F1;
  --text: #10233A; --dim: #5B6B7A; --faint: #9AA8B3;
  --accent: #00B978; --accent-soft: #DDF5EC; --accent-deep: #00875A;
  --warm: #F28A36; --warm-soft: #FDEBDD; --bad: #D9433A;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #081622; --card: #112230; --edge: #1E3342; --inset: #192D3C;
    --text: #F4F7FA; --dim: #9FB0BF; --faint: #5F7384;
    --accent: #16C79A; --accent-soft: #113B36; --accent-deep: #7FE3C6;
    --warm: #FF9A3D; --warm-soft: #3A2A1A; --bad: #F0625C;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top, 0) 16px env(safe-area-inset-bottom, 0);
}
main { max-width: 560px; margin: 0 auto; padding-block: 18px 32px; display: flex; flex-direction: column; gap: 14px; }
header h1 { font-size: 26px; margin: 0; letter-spacing: -0.01em; }
.dim { color: var(--dim); margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.small { font-size: 12.5px; }
.note { background: var(--warm-soft); color: var(--text); border-radius: 14px; padding: 12px 14px; margin: 0; }
.card { background: var(--card); border: 1px solid var(--edge); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.place-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.place-head h2 { font-size: 19px; margin: 0; }
.state { display: flex; align-items: center; gap: 10px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; }
.dot.open { background: var(--warm); }
.state strong { font-size: 22px; }
.lock { width: 22px; height: 22px; fill: none; stroke: var(--accent-deep); stroke-width: 2; stroke-linecap: round; flex: none; }
.lock.open { stroke: var(--warm); }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: var(--inset); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.chip.tried { background: var(--warm-soft); }
.events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.day { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); margin: 10px 0 4px; }
.ev { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--edge); }
.ev time { color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev .name { font-weight: 600; }
.ev .detail { grid-column: 2; color: var(--dim); font-size: 13px; }
.ev.tried .name { color: var(--warm); }
.health { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
footer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
button { font: inherit; background: var(--text); color: var(--bg); border: 0; border-radius: 999px; padding: 10px 18px; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }