/* Dotsie — app layout only.
 * Look and components come from the design system (design-system/tokens.css, components.css);
 * this file places them on the screen. */

html, body { height: 100%; }
body { display: flow-root; } /* so the sign-in card's top margin doesn't push the page into scrolling */

/* A phone-width column by default; the trip screen always takes the whole window. */
#app { max-width: var(--wt-size-column); margin: 0 auto; min-height: 100dvh; background: var(--wt-surface-raised); position: relative; }
#app[data-page="trip"] { max-width: none; }
@media (min-width: 520px) { #app:not([data-page="trip"]) { box-shadow: 0 0 0 1px var(--wt-border-default); } }

/* ---------- Wide screens: Home's trips are a grid of cards on the page, New trip is in the header; sign-in is a card ---------- */
@media (min-width: 768px) {
  #app[data-page="home"] { max-width: 1040px; padding: 0 var(--wt-space-6); background: none; box-shadow: none; }
  #app[data-page="home"] .home-head { padding: var(--wt-space-10) 0 var(--wt-space-6); }
  #app[data-page="home"] .home { padding: 0 0 var(--wt-space-10); }
  #app[data-page="home"] .home-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--wt-space-4); }
  #app[data-page="home"] .home-guest { justify-self: start; width: auto; }
  #app[data-page="home"] .home-new { display: inline-flex; }
  .home-add { display: none; }

  #app[data-page="signin"] { max-width: 420px; min-height: 0; margin: max(var(--wt-space-10), 12vh) auto var(--wt-space-10); padding: var(--wt-space-3) var(--wt-space-3) 0; border-radius: var(--wt-radius-lg); }
}

/* ---------- Home: the app name and the account, the trips under UPCOMING and PAST, and New trip ----------
   On the grey of the trip's list sheet, with white cards on it. On a phone, New trip is at the bottom, where Add stop is
   on the trip screen; from 768px wide it's in the header. */
#app[data-page="home"] { display: flex; flex-direction: column; background: var(--wt-surface-sheet); }
.home-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wt-space-3); padding: var(--wt-space-6) var(--wt-space-4) var(--wt-space-4); }
.home-head h1 { margin: 0; font: var(--wt-type-display); letter-spacing: var(--wt-tracking-display); }
.home-head__actions { display: flex; align-items: center; gap: var(--wt-space-2); margin-right: calc(-1 * var(--wt-space-2)); }
.home-new { display: none; }
.home { flex: 1; display: grid; align-content: start; gap: var(--wt-space-6); padding: 0 var(--wt-space-4) var(--wt-space-6); }
.home-group { display: grid; gap: var(--wt-space-2); }
/* As the day headings in All days */
.home-group__title {
  margin: 0; padding: 0 var(--wt-space-1); color: var(--wt-text-secondary);
  font: var(--wt-type-overline); letter-spacing: var(--wt-tracking-caps); text-transform: uppercase;
}
.home-grid { display: grid; gap: var(--wt-space-3); }
.home-add { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -1px 0 var(--wt-border-default); }

/* ---------- Sign in: one choice per step ---------- */
.signin { display: grid; gap: var(--wt-space-3); padding: var(--wt-space-1) var(--wt-space-4) var(--wt-space-8); }
.wt-modal .signin { padding: 0; }
/* In Account's Keep your trips, a step's title sits under the section's, so it's no bigger */
.wt-section .signin__title { font: var(--wt-type-heading); }
.signin form { display: grid; gap: var(--wt-space-3); }
.signin__text { margin: 0; color: var(--wt-text-secondary); overflow-wrap: anywhere; }
.signin__head { display: flex; align-items: center; gap: var(--wt-space-1); margin-left: calc(-1 * var(--wt-space-3)); }
.signin__title { margin: 0; font: var(--wt-type-title); }
.signin__hint { margin: calc(-1 * var(--wt-space-1)) 0 0; font: var(--wt-type-caption); color: var(--wt-text-secondary); }
.signin__hint--center { margin-top: 0; text-align: center; }
.signin__error { margin: 0; font: var(--wt-type-caption); color: var(--wt-text-danger); }
.signin__link { font: inherit; color: var(--wt-text-link); background: none; border: 0; padding: 0; cursor: pointer; }
.signin__pw { position: relative; }
.signin__pw .wt-input { padding-right: 72px; }
.signin__show {
  position: absolute; right: var(--wt-space-1); top: 50%; transform: translateY(-50%);
  padding: var(--wt-space-2); font: var(--wt-type-label); color: var(--wt-text-secondary);
  background: none; border: 0; cursor: pointer;
}
.home-guest { color: var(--wt-text-secondary); }

/* ---------- Account and trip settings: sections (.wt-section in the design system) ---------- */
/* Account's connected assistants: one row each, under a hairline, with Disconnect on the right */
.account-mcp__list { list-style: none; padding: 0; }
.account-mcp__item { display: flex; align-items: center; justify-content: space-between; gap: var(--wt-space-3); min-height: 56px; padding: var(--wt-space-2) 0; border-top: 1px solid var(--wt-border-subtle); }
.account-mcp__item:last-child { padding-bottom: 0; }
.account-mcp__name { display: grid; min-width: 0; overflow-wrap: anywhere; }
.account-mcp__meta { font: var(--wt-type-caption); color: var(--wt-text-secondary); }

/* ---------- Trip: full-screen map with the list sheet on top ---------- */
/* From 768px wide the sheet is a side panel (see the design system's wt-trip container), and the map sits beside it. */
/* Pinned to the window, not sized by 100dvh: Chrome on iPhone kept the page scrolled from Home (or sized dvh for
   collapsed toolbars), which hid the header under the address bar and left a gap under the sheet. The page itself
   never scrolls while a trip is open. */
.trip { position: fixed; inset: 0; overflow: hidden; container: wt-trip / inline-size; }
html:has(#app[data-page="trip"]), html:has(#app[data-page="trip"]) body { overflow: hidden; overscroll-behavior: none; }
/* On a phone a toast shows just below the trip header, not over it, so Home and settings stay in reach while it's up.
   From 768px the header is in the side panel and the toast is clear of it at the top. */
@media (max-width: 767.98px) { html:has(#app[data-page="trip"]) { --wt-toast-top: calc(var(--wt-space-2) + var(--wt-size-trip-head) + var(--wt-space-2)); } }
/* On a phone the map fills the screen, under the floating header card; from 768px wide the header tops the side panel, and the map sits beside it. */
#map { position: absolute; inset: 0; background: var(--wt-surface-map); }
@container wt-trip (min-width: 768px) { #map { left: var(--wt-size-panel); } }
/* While a stop is open on a phone, its sheet takes the list's place at the bottom, and the map shows above it. */
.trip.is-editing .wt-sheet { visibility: hidden; }
/* The app moves the sheet itself, frame by frame, so the list's scroll can move with it (sheet motion in app.js):
   no height transition. */
.trip .wt-sheet { transition: border-radius var(--wt-duration-base); }
/* While the sheet moves, room for the list to scroll past its last row (the app sets --sheet-room; see setRoom), so the
   browser never cuts the list's scroll short part way through and the rows move evenly with the sheet. */
.trip .wt-sheet__body::after { content: ''; display: block; height: var(--sheet-room, 0px); }
/* The app keeps the list's scroll (listTop in app.js): no scroll anchoring moving it when its rows change. */
.trip .wt-sheet__body { overflow-anchor: none; }
/* At the top of the whole day, a pull down shrinks the sheet (the list's touchmove in app.js), so the list doesn't bounce
   there: the app leaves the start of a touch to the browser, so a swipe up from the top always scrolls. */
.trip .wt-sheet.is-full .wt-sheet__body:not(.is-more-above) { overscroll-behavior-y: none; }
/* Whole day sits at the map's bottom right: just above the list on a phone, riding up and down with it (the app sets
   its --bottom-h with each frame of the sheet), and tucked under the sheet when it's dragged over. Disabled, not hidden, while the map shows the whole day; not there while a stop is open. */
.trip-fit {
  position: absolute; z-index: calc(var(--wt-z-sheet) - 1); right: var(--wt-space-3); bottom: calc(var(--bottom-h, 0px) + var(--wt-space-3));
  transition: background var(--wt-duration-fast);
}
.trip.is-editing .trip-fit { display: none; }
/* The selected sight's bigger marker, and a hovered sight's name (see .wt-sight), come in front of the other sights. */
.wt-sight-marker:has(.wt-sight.is-selected), .wt-sight-marker:has(.wt-sight:hover) { z-index: 9 !important; } /* still behind the pins (PIN_Z in map.js) */
/* A sight's card (openSight in app.js): like a stop's sheet on a phone, it takes the list's place at the bottom. Its type
   sits beside the sight's own marker, then what Wikipedia says (.wt-about), then Add to trip. */
.trip.has-card .wt-sheet { visibility: hidden; }
.trip.has-card .trip-fit { display: none; }
.sight-type { display: flex; align-items: center; gap: var(--wt-space-2); }
.sight-type + .sight-add { margin-top: var(--wt-space-2); }
/* With no map (no WebGL, or MapLibre couldn't load): why, where the map would be. The plan works as ever. */
.wt-map-none { margin: 0; padding: calc(var(--wt-space-8) + 44px) var(--wt-space-5) 0; text-align: center; font: var(--wt-type-caption); color: var(--wt-text-secondary); }
@container wt-trip (min-width: 768px) { .wt-map-none { padding-top: var(--wt-space-8); } }
/* A pin or a sight on the map (addMarker in map.js): a point, its look centered on it. A keyboard's focus on a pin
   shows as a ring (a sight's marker grows instead, see .wt-sight). */
.wt-map-marker { width: 0; height: 0; }
.wt-map-marker:focus-visible { outline: none; }
.wt-map-marker:focus-visible > .wt-pin { outline: 2px solid var(--wt-border-focus); outline-offset: 2px; }