/*
 * App mode layout (app-shell.js). Every rule is scoped to html.app-shell, so the website is untouched.
 * Layers, bottom to top: map, favorites button, tray, full-list Map button, header, panels, tab bar;
 * the filters drawer, popups, cookie banner and route bar keep their own (higher) layers.
 */
html.app-shell {
  --shell-safe-top: env(safe-area-inset-top, 0px);
  --shell-safe-bottom: env(safe-area-inset-bottom, 0px);
  --shell-tabs-h: calc(62px + var(--shell-safe-bottom));
  --shell-header-h: 132px;                              /* measured and updated by app-shell.js */
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
html.app-shell body { height: 100%; overflow: hidden; overscroll-behavior: none; }

/* What the app doesn't use from the website */
html.app-shell .header-brand,
html.app-shell .auth-wrap,
html.app-shell .nav-menu-wrap,
html.app-shell .home-footer,
html.app-shell .home-places,
html.app-shell .home-about,
html.app-shell .home-reports,
html.app-shell .controls-row,
html.app-shell .floating-list-actions,
html.app-shell #mapCloseBtn,
html.app-shell .datetime-bar > label { display: none !important; }

/* --- Header: two rows, fixed ------------------------------------------------------------------------- */
html.app-shell header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: calc(8px + var(--shell-safe-top)) 12px 10px;
  background: transparent; border: 0;
  pointer-events: none;                                 /* the map stays usable between the floating controls */
}
html.app-shell header > * { pointer-events: auto; }
/* The four round-cornered buttons floating on the map - filters, search, GPS, and the favorites heart below
   them - wear the date card's cream and edge, each the same 40 px square with its icon centred */
html.app-shell header .shell-row1 .filters-toggle-btn,
html.app-shell header .shell-row1 .locate-btn,
html.app-shell header .shell-row1 #searchBtn,
html.app-shell .shell-fav-float {
  width: 40px; height: 40px; min-width: 40px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; box-shadow: 0 3px 12px rgba(22, 48, 63, 0.16);
  /* !important: the website's .locate-btn (search and GPS) forces its own transparent look and padding */
  padding: 0 !important; border: 1px solid #F5D9B3 !important; background: #FFFBF3 !important;
}
/* Icons only, at any width: the website adds the "Filters" label from 481 px up, which pushed the icon out of the square */
html.app-shell header .shell-row1 .filters-toggle-btn .btn-label { display: none; }
/* ...and its grey hover, which on a phone sticks after a tap */
html.app-shell header .shell-row1 .locate-btn:hover { background: #FFFBF3 !important; }
html.app-shell .shell-row1 .search-bar input { background: white; box-shadow: 0 3px 12px rgba(22, 48, 63, 0.18); }
html.app-shell .shell-row1 .search-bar { pointer-events: none; }
html.app-shell .shell-row1 .search-bar > * { pointer-events: auto; }
html.app-shell .shell-row1 { display: flex; align-items: center; gap: 8px; }
html.app-shell .shell-row1 .search-bar { flex: 1; order: 0; display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; }
html.app-shell .shell-row1 .search-input-wrap { display: none; }
html.app-shell.shell-search-open .shell-row1 .search-input-wrap { display: block; flex: 1; }
html.app-shell #searchBtn { display: flex !important; }
html.app-shell .shell-row1 .filters-toggle-btn { display: inline-flex; }
html.app-shell .shell-row1 .search-bar input { font-size: 16px; padding: 10px 44px 10px 14px; }   /* 16px: iOS doesn't zoom; room on the right for the ✕ */

/* Row 2: the date/time controls sit inside the "sunny terraces through the day" timeline - one compact card
   wearing the timeline's own look (its inner panel gives up its border and padding). */
html.app-shell .shell-time-card {
  background: rgba(255, 251, 243, 0.92); border: 1px solid #F5D9B3; border-radius: 14px; padding: 8px 10px 4px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 4px 14px rgba(22, 48, 63, 0.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Row 2 folds away while the map is in use (app-shell.js); a small pull tab under row 1 brings it back */
html.app-shell.shell-row2-collapsed .shell-row2 { display: none; }
html.app-shell .shell-row2-tab { display: none; }
html.app-shell.shell-row2-collapsed .shell-row2-tab {
  display: inline-flex; align-self: center; align-items: center; margin-top: -2px;
  min-height: 40px; padding: 8px 20px 9px; border-radius: 999px; border: 1px solid #F5D9B3;
  background: rgba(255, 251, 243, 0.95); color: var(--shade-900);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; touch-action: none; gap: 8px;
  box-shadow: 0 3px 12px rgba(22, 48, 63, 0.18);
}
html.app-shell .shell-row2-chev { font-size: 17px; line-height: 1; margin-top: -4px; color: var(--sun-700); }
html.app-shell .shell-row2-summary:empty { display: none; }
html.app-shell .shell-time-card .datetime-bar { margin: 0; padding: 0; border: 0; background: none; gap: 6px; flex-wrap: nowrap; }
html.app-shell .shell-time-card .datetime-bar input { padding: 6px 8px; font-size: 14px; min-height: 0; height: 34px; }
html.app-shell .shell-time-card .datetime-bar button { height: 34px; min-width: 34px; padding: 0 10px; }
html.app-shell .shell-time-card .day-scrub { margin: 0; padding: 0; max-width: none; }
html.app-shell .shell-time-card .ds-panel { padding: 0; border: 0; background: none; }
html.app-shell .shell-time-card .ds-time { font-size: 15px; }
html.app-shell .shell-time-card .ds-track { height: 40px; margin-top: 4px; }
html.app-shell .shell-row1 .filters-toggle-btn, html.app-shell .shell-row1 .locate-btn { height: 40px; min-width: 40px; }

/* The "only favorites" heart floats over the map, just under the header */
html.app-shell .shell-fav-float { position: fixed; z-index: 20; left: 12px; top: calc(var(--shell-header-h) + 10px); }
html.app-shell .shell-fav-float.active { background: var(--sun-700) !important; border-color: var(--sun-700) !important; }

/* --- Map: full screen, the header floats over it ---------------------------------------------------------------- */
html.app-shell .map-view,
html.app-shell .map-view.open {
  display: block !important; position: fixed; z-index: 1; left: 0; right: 0; bottom: 0;
  top: 0; margin: 0; padding: 0; max-width: none; width: auto;       /* under the see-through header */
}
html.app-shell #mapContainer { height: 100%; border-radius: 0; border: 0; }

/* --- Tray ------------------------------------------------------------------------------------------------- */
html.app-shell .shell-tray {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; top: var(--shell-header-h);
  display: flex; flex-direction: column;
  background: var(--cream); border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 24px rgba(22, 48, 63, 0.16);
  transition: transform 0.38s cubic-bezier(0.2, 0.9, 0.25, 1);
  will-change: transform;
}
html.app-shell .shell-tray-handle {
  flex: none; min-height: 34px; padding: 12px 16px 12px; cursor: grab; touch-action: none; user-select: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
/* Peek shows the handle alone (app-shell.js sizes the strip to it), the phone's safe area under it */
html.app-shell.shell-tray--peek .shell-tray-handle { padding-bottom: calc(14px + var(--shell-safe-bottom)); }
html.app-shell .shell-grabber { width: 44px; height: 5px; border-radius: 3px; background: #C9C1B0; }
html.app-shell .shell-tray-handle .status-line { display: none; }   /* the search helper text isn't shown in the app */
html.app-shell .shell-tray-hint { font-size: 12px; color: var(--muted); }
html.app-shell .shell-tray-hint:empty { display: none; }
html.app-shell .shell-tray-body {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  /* The tray slides down to show only its top part: pad by what's below the screen, so the last card still scrolls clear */
  padding: 0 12px calc(var(--shell-tray-offset, 0px) + var(--shell-tabs-h) + 12px);
}
html.app-shell.shell-tray--full .shell-tray-body { padding-bottom: calc(var(--shell-tabs-h) + 76px); }
html.app-shell .shell-tray-body .feed { margin: 0; padding-bottom: 0; max-width: none; }   /* the tray's full width on tablets too (the site caps it at 640px); the tray pads itself below */
/* Loading: the turning sun stands in for the list's own "Loading..." text */
html.app-shell .shell-loading { display: none; }
html.app-shell.shell-loading-on .shell-loading {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px;
  color: var(--sun-700); font-size: 14px; font-weight: 600;
}
html.app-shell .shell-loading-text { color: var(--muted); }
html.app-shell .shell-loading-sun { animation: shell-sun-turn 2.4s linear infinite; }
@keyframes shell-sun-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.app-shell .shell-loading-sun { animation-duration: 8s; } }
html.app-shell .shell-tray-body .feed > .loading { display: none; }
html.app-shell .shell-tray-body .card { scroll-margin-top: 10px; }   /* a card scrolled to the top keeps its outline in view */

/* Full list: a Map button in the middle, back to the map */
html.app-shell .shell-map-btn {
  display: none; position: fixed; z-index: 45; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--shell-tabs-h) + 14px);
  align-items: center; gap: 7px; padding: 11px 18px; border-radius: 999px; border: 0;
  background: var(--shade-900); color: white; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(22, 48, 63, 0.28);
}
html.app-shell.shell-tray--full:not(.shell-on-panel) .shell-map-btn { display: inline-flex; }

/* --- Tab bar (app-tabs.css draws it) ------------------------------------------------------------------------ */
/* Peek: the map gets the whole screen - the tab bar steps aside with the list */
html.app-shell.shell-tray--peek:not(.shell-on-panel) .shell-tabs { transform: translateY(100%); }

/* --- Panels (Favorites, Profile) -------------------------------------------------------------------------- */
html.app-shell .shell-panel:not([hidden]) {
  position: fixed; z-index: 70; inset: 0; bottom: var(--shell-tabs-h);
  display: flex; flex-direction: column; background: var(--cream);
}
html.app-shell .shell-panel-head { padding: calc(14px + var(--shell-safe-top)) 16px 12px; background: var(--header-bg); border-bottom: 1px solid var(--card-border); }
html.app-shell .shell-panel-head h1 { margin: 0; font-size: 20px; color: var(--shade-900); }
html.app-shell .shell-panel-body { flex: 1; overflow-y: auto; padding: 16px; }
html.app-shell .shell-note { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
html.app-shell .shell-note--tight { margin: 0; font-size: 13px; }
html.app-shell .shell-fav-offline { padding-top: 48px; }
html.app-shell .shell-fav-offline .load-error-icon { width: 150px; }
html.app-shell .shell-card { background: white; border: 1px solid var(--card-border); border-radius: 14px; padding: 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
html.app-shell .shell-card h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
html.app-shell .shell-user { display: flex; flex-direction: column; gap: 2px; }
html.app-shell .shell-user-row { display: flex; align-items: center; gap: 14px; }
html.app-shell .shell-user-name { font-weight: 700; color: var(--shade-900); font-size: 16px; }
html.app-shell .shell-user-email { color: var(--muted); font-size: 13px; }
html.app-shell .shell-primary, html.app-shell .shell-secondary {
  font: inherit; font-size: 15px; font-weight: 700; padding: 11px 18px; border-radius: 12px; cursor: pointer;
}
html.app-shell .shell-primary { background: var(--shade-900); color: white; border: 1px solid var(--shade-900); }
html.app-shell .shell-secondary { background: white; color: var(--shade-900); border: 1px solid var(--card-border); }
html.app-shell .shell-link-danger { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--bad, #B03A2E); text-decoration: underline; cursor: pointer; }
html.app-shell .shell-lang { display: flex; gap: 8px; }
html.app-shell .shell-links { gap: 0; align-items: stretch; padding-bottom: 6px; }
html.app-shell .shell-links h2 { margin-bottom: 6px; }
html.app-shell .shell-link-row {
  display: flex; justify-content: space-between; align-items: center; padding: 11px 0;
  color: var(--shade-900); font-size: 15px; font-weight: 600; text-decoration: none;
}
html.app-shell .shell-link-row + .shell-link-row { border-top: 1px solid var(--card-border); }
html.app-shell .shell-link-row span { color: var(--muted); font-size: 22px; line-height: 1; }
html.app-shell .shell-danger-zone { margin-top: 28px; padding: 8px 0 4px; text-align: center; }
html.app-shell .shell-lang button { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--card-border); background: white; color: var(--shade-900); cursor: pointer; }
html.app-shell .shell-lang button[aria-pressed="true"] { background: var(--shade-900); border-color: var(--shade-900); color: white; }
/* Favorites: the list's own cards, each with a round arrow in its bottom-left corner to see it on Home - level
   with the route and Maps buttons on the right (a favourite has no distance there), clear of the heart up top */
html.app-shell .shell-fav-feed { margin: 0; padding: 0; }
html.app-shell .shell-fav-card { position: relative; }
html.app-shell .shell-fav-go {
  position: absolute; bottom: 15px; left: 15px; z-index: 2;   /* the card's 14 px padding + its border */
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid #F5D9B3; background: white; color: var(--sun-700); cursor: pointer; padding: 0;
  box-shadow: 0 2px 8px rgba(22, 48, 63, 0.12);
}

/* "Couldn't find your location": under the header, over the map */
html.app-shell .shell-toast { top: calc(var(--shell-header-h) + 12px); bottom: auto; left: 16px; right: 16px; transform: none; max-width: none; text-align: center; }
html.app-shell .shell-toast.is-on { pointer-events: auto; cursor: pointer; }   /* a tap dismisses it */

/* Other floating parts, clear of the tab bar */
html.app-shell .route-bar { bottom: calc(var(--shell-tabs-h) + 12px); }
html.app-shell.shell-tray--peek .route-bar { bottom: calc(var(--shell-safe-bottom) + 88px); }
html.app-shell.shell-tray--full .route-bar { bottom: calc(var(--shell-tabs-h) + 70px); }   /* above the Map button */
/* Favorites builds routes too (its cards have the route button): the bar shows there, above the tab bar,
   and the list keeps room for it; Profile has no venues, so no bar */
html.app-shell.shell-on-panel .route-bar { bottom: calc(var(--shell-tabs-h) + 12px); }
html.app-shell.shell-on-profile .route-bar { display: none; }
html.app-shell body.has-route-bar .shell-panel-body { padding-bottom: 84px; }

/* The map runs under the header: its own corner controls start below it */
html.app-shell .maplibregl-ctrl-top-left,
html.app-shell .maplibregl-ctrl-top-right { top: var(--shell-header-h); transition: top 0.2s ease; }

/* The map's own floating buttons: "Search this area" beside the favorites heart, under the header;
   "Recenter" just above the list, wherever the tray is (app-shell.js keeps --shell-tray-visible) */
html.app-shell .map-search-area-btn { position: fixed; top: calc(var(--shell-header-h) + 10px); left: 64px; }
html.app-shell .map-searching-pill { position: fixed; top: calc(var(--shell-header-h) + 58px); }
html.app-shell .map-recenter-btn { position: fixed; left: 12px; bottom: calc(var(--shell-tray-visible, 90px) + 12px); transition: bottom 0.38s cubic-bezier(0.2, 0.9, 0.25, 1); }
html.app-shell.shell-tray--full .map-recenter-btn,
html.app-shell.shell-on-panel .map-recenter-btn,
html.app-shell.shell-on-panel .map-search-area-btn { display: none !important; }

/* One venue shown (a favorite, a shared link): no timeline, but the way back to every terrace nearby */
html.app-shell .shell-all-nearby { display: none; }
html.app-shell.shell-single .shell-all-nearby {
  display: block; margin: 2px 0 4px; padding: 8px 12px; border-radius: 10px; border: 1px solid #F5D9B3;
  background: white; color: var(--sun-700); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}

/* The filters stay a slide-out panel at every width in the app layout. On a wide screen the website turns them into
   a permanent sidebar (styles.css, min-width: 1060px) unless its map is open - a check the app's layout doesn't
   meet, since it moves the map out of .home-layout - so the panel's own drawer look is restored here. */
html.app-shell .filters-backdrop { display: block; }
html.app-shell .filters-drawer {
  position: fixed; grid-area: unset; align-self: auto; top: 0; left: 0; height: 100vh; max-height: none;
  width: min(320px, 85vw); background: var(--cream); border: none; border-radius: 0;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); transform: translateX(-100%); z-index: 1101;
}
html.app-shell .filters-drawer.open { transform: translateX(0); }
html.app-shell .filters-close-btn { display: block; }