/* Achromatic ledger (design-taste-frontend app style): ink chrome, one data hue (sea teal) on the atlas only,
   flat opaque panels with a 1px edge, no glass, no gradients, no tracked capitals. */
:root {
  --ground: #f4f3f1; --surface: #ffffff; --raised: #eeeeee; --border: #e6e6e6; --rule: #f0f0f0; --control: #d4d4d4;
  --text: #0a0a0a; --muted: #6b6b6b; --accent: #141414; --hue: #0e6b6b;
  --radius-card: 8px; --radius-control: 6px; --gap: 12px; --pad: 20px; --control-height: 36px;
  --fs-title: 24px; --fs-section: 16px; --fs-body: 14px; --fs-small: 12px;
  --ease: cubic-bezier(.2, .7, .15, 1);
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--ground); color: var(--text); font: 400 var(--fs-body)/1.45 Geist, Inter, system-ui, sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--hue); outline-offset: 2px; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#view:active { cursor: grabbing; }

/* loader: the ground colour, the name, a progress line */
#veil { position: fixed; inset: 0; background: var(--ground); display: grid; place-items: center; z-index: 10; transition: opacity .8s var(--ease); }
#veil.dip { transition-duration: .35s; }
#veil.off { opacity: 0; pointer-events: none; }
.mark-load { display: grid; gap: 6px; justify-items: start; }
.mark-load h1 { font-size: 32px; font-weight: 500; letter-spacing: -.02em; }
.mark-load p { color: var(--muted); }
.bar { width: 220px; height: 2px; background: var(--border); margin-top: 18px; display: block; border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s var(--ease); }
#veil.dip .mark-load { display: none; }

/* panels: opaque white, a 1px edge, a faint lift because they float over the scene */
.panel { position: fixed; z-index: 3; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 1px 6px rgba(0, 0, 0, .06); }

#brand { left: 16px; top: 16px; display: flex; gap: 12px; align-items: center; padding: 10px 16px 10px 10px; }
#brand .mark { width: 32px; height: 32px; flex: none; }
#brand h1 { font-size: var(--fs-section); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
#brand p { font-size: var(--fs-small); color: var(--muted); }

/* the control row: time (segmented), weather, theme */
#controls { right: 16px; top: 16px; display: flex; gap: 8px; align-items: center; padding: 6px; }
.seg { display: flex; background: var(--raised); border-radius: var(--radius-control); padding: 3px; }
.seg button { height: 30px; padding: 0 12px; border-radius: 4px; color: var(--muted); transition: color .2s, background .2s; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button[aria-checked=true] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--control); }
.pair { display: flex; gap: 6px; }
.drop { position: relative; }
.menu-btn { height: var(--control-height); padding: 0 12px; border-radius: var(--radius-control); background: #e5e5e5; white-space: nowrap; transition: background .2s; }
.menu-btn:hover, .menu-btn[aria-expanded=true] { background: #dadada; }
.menu-btn .lab { color: var(--muted); margin-right: 4px; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12); padding: 6px; display: grid; gap: 2px; transform-origin: top right; animation: pop .22s var(--ease); }
.menu[hidden] { display: none; }
.menu.wide { min-width: 280px; }
.menu p { font-size: var(--fs-small); color: var(--muted); padding: 8px 10px 4px; }
.menu button { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: left; padding: 8px 10px; border-radius: var(--radius-control); }
.menu button:hover { background: var(--raised); }
.menu button small { color: var(--muted); font-size: var(--fs-small); }
.menu button[aria-checked=true] { background: var(--raised); font-weight: 500; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* the atlas */
#atlas { left: 16px; bottom: 16px; padding: 14px; display: grid; gap: 10px; }
.atlas-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.atlas-head h2 { font-size: var(--fs-section); font-weight: 500; }
.atlas-head p { font-size: var(--fs-small); color: var(--muted); }
.atlas-body { display: flex; gap: 14px; align-items: flex-start; }
.map { border-radius: var(--radius-control); overflow: hidden; border: 1px solid var(--border); line-height: 0; }
.places { list-style: none; padding: 0; display: grid; align-content: start; width: 214px; }
.places button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 3px 8px; border-radius: var(--radius-control); text-align: left; transition: background .2s; }
.places button:hover { background: var(--raised); }
.places button small { color: var(--muted); font-size: var(--fs-small); }
.places button[aria-current=true] { background: var(--raised); font-weight: 500; }
.places button[aria-current=true] span { color: var(--hue); }
.places .fold { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--rule); }
.places .fold small { color: var(--hue); }
.places .hid { display: none; }
.places.open .hid { display: block; }

/* the place card */
#card { right: 16px; bottom: 16px; width: 340px; padding: var(--pad); display: grid; gap: 8px; }
#card.in > * { animation: rise .5s var(--ease) both; }
#card.in > *:nth-child(2) { animation-delay: .06s; } #card.in > *:nth-child(3) { animation-delay: .12s; }
#card.in > *:nth-child(4) { animation-delay: .18s; } #card.in > *:nth-child(5) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
#card .kind { font-size: var(--fs-small); color: var(--muted); }
#card h2 { font-size: var(--fs-title); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
#card dl { display: grid; margin-top: 4px; }
#card dl div { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--rule); font-size: var(--fs-small); }
#card dt { color: var(--muted); }
#card dd { font-variant-numeric: tabular-nums; }
.acts { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.acts button { height: var(--control-height); padding: 0 14px; border-radius: var(--radius-control); transition: background .2s, transform .15s; }
.acts button:active { transform: scale(.97); }
.acts .primary { background: var(--accent); color: #fff; }
.acts .primary:hover { background: #2b2b2b; }
.acts .secondary { background: #e5e5e5; }
.acts .secondary:hover { background: #dadada; }
.acts .link { margin-left: auto; padding: 0 4px; color: var(--muted); }
.acts .link:hover { color: var(--text); }

@media (max-width: 1180px) { .places { display: none; } }
@media (max-width: 720px) {
  #brand { left: 12px; top: 12px; padding: 8px 12px 8px 8px; }
  #brand p { display: none; }
  #controls { left: 12px; right: 12px; top: 64px; justify-content: space-between; }
  .seg button { padding: 0 7px; font-size: 12px; }
  .menu-btn { padding: 0 10px; }
  .menu-btn .lab { display: none; }
  #atlas { display: none; }
  #card { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { #card.in > *, .menu { animation: none; } }