/*
 * لوين؟ — the app frame of the map pages (layouts/shell.blade.php):
 * a slim navy header, one navigation that is a bottom tab bar on phones and
 * header links from 900px, and the shared bottom sheet (js/sheet.js) that
 * becomes a side panel from 900px. Loaded after app.css; pages add their own
 * CSS after this file ('page_styles'). No inline styles (CSP).
 *
 * The motif is the brand's: a line between stops. The active header link is
 * a teal line with a yellow stop; the wordmark uses the landing's display face
 * (its @font-face is in app.css, shared with the landing page).
 */

/* ── Frame: header, main, tab bar; the page itself never scrolls ── */

.shell {
  --shell-bar-h: 52px;
  --shell-tabs-h: 60px;
  --shell-teal-deep: #0B6F64; /* teal text on white: 6.1:1 */
  --shell-display: "Baloo Bhaijaan 2", var(--font);
  --shell-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html:has(> body.shell) { height: 100%; overflow: hidden; }

body.shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  /* Room for the fixed tab bar; the main area ends above it. */
  padding-bottom: calc(var(--shell-tabs-h) + env(safe-area-inset-bottom, 0px));
}

.shell-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.shell-main:focus { outline: none; }

/* ── Header ── */

.shell-bar {
  position: relative;
  z-index: 1400; /* above the map, its controls and the sheet */
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: var(--shell-bar-h);
  padding-block: 0;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  background: var(--navy);
  color: var(--white);
}

.shell-bar .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline-end: 2px;
  border-radius: 12px;
  color: var(--white);
  text-decoration: none;
}
.shell-bar .brand:hover { color: var(--white); }
.shell-logo { height: 34px; }

.shell-beta {
  flex: none;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--teal);
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}

/* «ثبّت التطبيق»: a 44px target around a slimmer pill. */
.shell-install {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-inline-start: auto;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--white);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.shell-install::before {
  content: "";
  position: absolute;
  inset: 5px 0;
  z-index: -1;
  border: 1.5px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  transition: border-color 0.2s, background-color 0.2s;
}
.shell-install:hover::before { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }
.shell-install .icon { width: 18px; height: 18px; }

.shell-bar .brand:focus-visible,
.shell-install:focus-visible { outline-color: var(--yellow); outline-offset: 0; }

/* ── Navigation: a bottom tab bar on phones ── */

.shell-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  height: calc(var(--shell-tabs-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--border);
  background: var(--white);
  box-shadow: 0 -4px 16px rgba(20, 45, 78, 0.06);
}
.shell-nav__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 100%;
  margin: 0;
  padding: 0 4px;
  list-style: none;
}
.shell-nav__item { display: flex; min-width: 0; }
.shell-nav__link {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 48px;
  padding: 4px 2px;
  border-radius: 14px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.shell-nav__link:hover { color: var(--navy); }
.shell-nav__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 30px;
  border-radius: 999px;
  transition: background-color 0.2s var(--shell-ease);
}
.shell-nav__mark .icon { width: 22px; height: 22px; }
.shell-nav__link:hover .shell-nav__mark { background: var(--surface); }
.shell-nav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The current section: a filled pill and bold teal text (not colour alone). */
.shell-nav__link[aria-current="page"] { color: var(--shell-teal-deep); font-weight: 700; }
.shell-nav__link[aria-current="page"] .shell-nav__mark { background: var(--teal-50); }
.shell-nav__link:focus-visible { outline-offset: -3px; }

/* ── Privacy link (the shell has no footer) ── */

.shell-privacy { margin: 16px 0 0; font-size: 0.8125rem; }
.shell-privacy a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }

/* «ثبّت لوين؟ على جهازك»: on the map pages only when asked for (the header button), and just under
   the header, so it never covers the sheet, the tab bar or the map tools at the bottom. */
.shell .pwa-banner { top: calc(var(--shell-bar-h) + 8px); bottom: auto; z-index: 1350; }

/* ── Map stage and the shared sheet (pattern A of the layout) ── */

.shell-stage {
  --sheet-top: 0px;      /* where the full sheet stops, from the top of the stage */
  --sheet-visible: 0px;  /* set by js/sheet.js: the part of the sheet on screen */
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  overflow: clip; /* nothing may scroll the stage (that would shift the map under the sheet) */
}
.shell-stage__map { position: absolute; inset: 0; }
.shell-stage__map > .map { width: 100%; height: 100%; min-height: 0; max-height: none; border-radius: 0; }
/* Leaflet's bottom controls (attribution) ride on top of the sheet. */
.shell-stage .leaflet-bottom { bottom: var(--sheet-visible); transition: bottom 0.28s var(--shell-ease); }
.shell-stage.is-dragging .leaflet-bottom { transition: none; }

.shell-sheet {
  position: absolute;
  inset-inline: 0;
  top: var(--sheet-top);
  bottom: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  border-radius: 20px 20px 0 0;
  background: var(--white);
  box-shadow: 0 -1px 2px rgba(20, 45, 78, 0.06), 0 -6px 24px rgba(20, 45, 78, 0.14);
}
/* Only once js/sheet.js runs (it sets [data-sheet-ready]): the sheet starts off screen and slides in.
   Without JS it stays an ordinary, scrollable panel over the map. */
.shell-sheet[data-sheet-ready] {
  transform: translateY(100%);
  transition: transform 0.28s var(--shell-ease);
}
/* With JS on (phones), the sheet waits off screen from the first paint until js/sheet.js takes it
   over, so a slow load never shows a full sheet first. If sheet.js never runs (it failed to load),
   the wait ends after 8 s and the sheet slides in as that ordinary panel. JS off: a panel at once. */
@media (scripting: enabled) and (max-width: 899.98px) {
  .shell-sheet:not([data-sheet-ready]) { animation: shell-sheet-wait 0.28s var(--shell-ease) 8s both; }
}
@keyframes shell-sheet-wait {
  from { transform: translateY(100%); }
  to { transform: none; }
}
.shell-stage.is-dragging .shell-sheet { transition: none; }
.shell-sheet:focus { outline: none; }

.shell-sheet__head {
  flex: none;
  padding: 0 16px 12px;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.shell-sheet__grip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin: 0 0 -8px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: grab;
}
.shell-sheet__grip span { width: 44px; height: 5px; border-radius: 999px; background: var(--border-strong); }
.shell-sheet__grip:focus-visible { outline-offset: -3px; }
/* A line that only makes sense while the sheet is low (e.g. «74 خطًا»). */
.shell-sheet__peek { margin-top: 4px; }
.shell-sheet:not([data-snap="peek"]) .shell-sheet__peek { display: none; }

.shell-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 16px 24px;
}
.shell-sheet[data-sheet-ready][data-snap="peek"] .shell-sheet__body { visibility: hidden; }
/* Below «full» the lower part of the sheet is off screen (--sheet-hidden, from js/sheet.js): the body
   ends that much lower and keeps focus above it, so at «half» every row can be scrolled or tabbed
   into the part that shows (the browser alone counts that hidden part as visible). */
@media (max-width: 899.98px) {
  .shell-sheet[data-sheet-ready] .shell-sheet__body { scroll-padding-bottom: var(--sheet-hidden, 0px); }
  .shell-sheet[data-sheet-ready] .shell-sheet__body::after { content: ""; display: block; height: var(--sheet-hidden, 0px); }
}

/* ── Plain content in the frame (pattern B pages without a map: thanks, privacy, errors) and the
   plain frame (layouts.app: offline, 500, 503 — the header without navigation) ── */

body.shell--plain { padding-bottom: 0; } /* no tab bar */
.shell-page { width: 100%; max-width: 40rem; margin: 0 auto; padding: 16px 16px 24px; }
/* Page titles in the brand's display face, like the sheet titles of the map pages. */
.shell-page h1 { font-family: var(--shell-display); font-weight: 800; line-height: 1.3; }

/* Error pages: the code, and a dashed route (as an unconfirmed line on the map) between a start and an end. */
.error-page { text-align: center; }
.error-page__code { margin: 4px 0 0; font: 800 3.5rem/1 var(--shell-display); color: var(--navy); }
.error-page__route {
  position: relative;
  display: block;
  width: 160px;
  height: 16px;
  margin: 12px auto 16px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 14px) center / calc(100% - 36px) 3px no-repeat;
}
.error-page__route::before,
.error-page__route::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 14px;
  height: 14px;
  border: 2.5px solid var(--navy);
}
.error-page__route::before { inset-inline-start: 0; border-radius: 999px; background: var(--yellow); }
.error-page__route::after { inset-inline-end: 0; border-radius: 4px; background: var(--teal); }
.error-page__actions { margin: 20px 0 4px; }

/* ── Short screens (phones on their side): a slimmer bar and tab bar ── */

@media (max-width: 899.98px) and (max-height: 32em) {
  .shell { --shell-bar-h: 44px; --shell-tabs-h: 48px; }
  .shell-nav__link { flex-direction: row; gap: 6px; min-height: 44px; }
  .shell-nav__mark { width: 40px; height: 28px; }
}

/* ── Narrow phones ── */

@media (max-width: 22.5em) {
  .shell-bar { gap: 6px; }
  .shell-install { padding: 0 12px; }
  /* Icon only; the text stays its accessible name. */
  .shell-install__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ── From 900px: header links, side panel ── */

@media (min-width: 900px) {
  .shell { --shell-bar-h: 60px; }
  body.shell { padding-bottom: 0; }
  .shell-bar { gap: 12px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .shell-logo { height: 40px; }

  .shell-nav {
    position: static;
    align-self: stretch;
    height: auto;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .shell-nav__list { display: flex; gap: 2px; padding: 0; }
  .shell-nav__link {
    flex-direction: row;
    gap: 8px;
    min-height: 0;
    padding: 0 14px;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9375rem;
  }
  .shell-nav__link:hover { color: var(--white); }
  .shell-nav__mark,
  .shell-nav__link:hover .shell-nav__mark,
  .shell-nav__link[aria-current="page"] .shell-nav__mark { width: auto; height: auto; background: none; }
  .shell-nav__mark .icon { width: 20px; height: 20px; }
  /* The current section: a teal line along the bottom of the bar, with a yellow stop at its start. */
  .shell-nav__link[aria-current="page"] { color: var(--white); }
  .shell-nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline: 14px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--teal);
  }
  .shell-nav__link[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-inline-start: 10px;
    bottom: -3px;
    z-index: 1;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--yellow);
    box-shadow: 0 0 0 2px var(--navy);
  }
  .shell-nav__link:focus-visible { outline-color: var(--yellow); outline-offset: -4px; border-radius: 10px; }

  /* The install button (when shown) and the section links sit together at the end, in DOM order. */
  .shell-install:not([hidden]) + .shell-nav { margin-inline-start: 4px; }

  /* The sheet becomes a side panel at the start (right); the map fills the rest. */
  .shell-stage { display: grid; grid-template-columns: 24rem minmax(0, 1fr); }
  .shell-sheet {
    position: relative;
    inset: auto;
    z-index: 1100;
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    border-inline-end: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
  }
  .shell-sheet,
  .shell-sheet[data-sheet-ready] {
    transform: none;
    transition: none;
  }
  .shell-stage__map { position: relative; inset: auto; grid-column: 2; grid-row: 1; min-width: 0; }
  .shell-stage .leaflet-bottom { bottom: 0; }
  .shell-sheet__head { padding: 16px 20px 8px; cursor: auto; touch-action: auto; -webkit-user-select: auto; user-select: auto; }
  .shell-sheet__grip,
  .shell-sheet__peek { display: none; }
  .shell-sheet[data-sheet-ready][data-snap="peek"] .shell-sheet__body { visibility: visible; }
  .shell-sheet__body { padding-inline: 20px; }
}

@media (min-width: 1200px) {
  .shell-stage { grid-template-columns: 26rem minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .shell-sheet,
  .shell-sheet[data-sheet-ready],
  .shell-stage .leaflet-bottom,
  .shell-nav__mark,
  .shell-install::before { transition: none; }
}

/* app.css turns every animation off here; the wait above must still end (a jump, no motion). */
@media (scripting: enabled) and (max-width: 899.98px) and (prefers-reduced-motion: reduce) {
  .shell-sheet:not([data-sheet-ready]) { animation: shell-sheet-wait 1ms linear 8s both !important; }
}

@media (forced-colors: active) {
  .shell-beta { border: 1px solid CanvasText; }
  .shell-nav__link[aria-current="page"] .shell-nav__mark { outline: 2px solid CanvasText; }
  .shell-nav__link[aria-current="page"]::after { background: CanvasText; }
  .shell-install::before { border-color: CanvasText; }
}