/* places page «أماكني» (js/pages/places.js) in two halves (the owner's layout, 2026-10-16). Owned by the "start"
   page builder (docs/UI_V4.md). The list half keeps the design's #1C1C1C cards (radius 24), #262626 inner tiles and
   the sidebar's place pin; the map half is the start page's dark map (css/pages/start.css: pins, tooltips, zoom) in a
   rounded card. The accent marks the chosen place, its «افتح» and the "add" action. */

/* ---------- Two halves: list (the start side: right in Arabic), map (the end side) ---------- */
.pl-split { display: flex; gap: 20px; align-items: flex-start; min-width: 0; }
.pl-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-section); }
.pl-mapbox {
  flex: 1 1 0; min-width: 0; position: sticky; top: var(--pl-top, 20px); /* --pl-top: set by places.js */
  height: calc(100vh - var(--pl-top, 20px) - 20px); height: calc(100dvh - var(--pl-top, 20px) - 20px);
  min-height: 420px; border-radius: var(--r-shell); overflow: hidden; background: #0b0b0b; isolation: isolate;
}
.pl-map { position: absolute; inset: 0; z-index: 0; }
.pl-map.leaflet-container { background: #0b0b0b; font-family: var(--font-ui); }

/* My places on the map: accent dots like the pulsing pin, without the pulse (the chosen one gets the pulse) */
.pl-mk {
  border-radius: 50%; background: var(--ac); border: 4px solid #000; box-shadow: 0 0 0 2px var(--ac);
  cursor: pointer; transition: opacity var(--t-fast), box-shadow var(--t-fast) var(--ease);
}
.pl-mk:hover { box-shadow: 0 0 0 2px var(--ac), 0 0 0 8px rgba(59, 227, 59, .3); }

/* Over the map: «كل الأماكن» (after a flight) and a short note */
.pl-map-all {
  position: absolute; top: 16px; inset-inline-end: 16px; z-index: 2; height: 44px; padding: 0 16px; border: none;
  border-radius: var(--r-pill); background: var(--card); color: var(--text); font: inherit; font-size: var(--fs-meta);
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  animation: m-rise var(--t-sheet) var(--ease) both;
}
.pl-map-all:hover { background: var(--card-hover); }
.pl-map-all .ph { font-size: 17px; }
.pl-map-note {
  position: absolute; top: 16px; inset-inline-start: 16px; z-index: 2; max-width: calc(100% - 32px); padding: 10px 16px;
  border-radius: var(--r-pill); background: var(--card); color: var(--soft); font-size: var(--fs-meta); line-height: 1.5;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5); animation: m-rise var(--t-sheet) var(--ease) both;
}
/* «كل الأماكن» showing: the note goes under it (on a narrow map one would cover the other) */
.pl-map-all:not([hidden]) ~ .pl-map-note { top: 68px; } /* 16 + 44 + 8 */

/* ---------- The list half ---------- */
.pl-quota { max-width: 560px; }
.pl-quota:empty { display: none; }
.pl-view { display: flex; flex-direction: column; gap: 14px; min-width: 0; animation: m-rise var(--t-sheet) var(--ease) both; }
/* 340px: a narrower card wraps its labels and its foot onto two lines (1440 with the thin sidebar made 2 columns);
   min(…, 100%): a list half narrower than that (tablet) keeps one column of its own width */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 14px; }
.pl-card {
  position: relative; display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; border: none;
  border-radius: var(--r-card); background: var(--card); color: var(--text); text-align: start; min-width: 0;
  font: inherit; transition: transform var(--t-fast) var(--ease), background var(--t-fast), box-shadow var(--t-fast);
}
.pl-card:hover { transform: translateY(-2px); background: var(--card-hover); color: var(--text); }
.pl-card.sel { box-shadow: inset 0 0 0 2px var(--ac); }
/* The whole card is one button (show on the map) under the content; «افتح» sits above it */
.pl-hit {
  position: absolute; inset: 0; z-index: 1; padding: 0; border: none; border-radius: inherit; background: transparent;
  cursor: pointer;
}
.pl-hit:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.pl-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-pin { width: 44px; height: 44px; }
.pl-name-box { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.pl-name { font-size: var(--fs-section); line-height: 1.35; overflow-wrap: anywhere; }
.pl-sub { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--muted-2); flex-wrap: wrap; }
/* «حذف»: a small round trash button before «افتح» (above the card's hit area, like it) */
.pl-del {
  position: relative; z-index: 2; flex: none; width: 40px; height: 40px; padding: 0; border: none; border-radius: var(--r-pill);
  background: var(--card-2); color: var(--muted-2); display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.pl-del:hover { background: var(--bad); color: var(--ink); }
.pl-del:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
/* the confirm sheet */
.pl-rm-text { margin: 0 0 12px; line-height: 1.7; }
.pl-rm-hold { display: flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: var(--fs-meta); }
.pl-rm-hold .ph { flex: none; font-size: 18px; }
.pl-rm-msg { color: var(--bad-text); font-size: var(--fs-meta); line-height: 1.6; }
.pl-rm-go { background: var(--bad); color: var(--ink); }
.pl-rm-go:hover { background: var(--bad); color: var(--ink); filter: brightness(1.08); }
.pl-go {
  position: relative; z-index: 2; flex: none; height: 40px; min-width: 40px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--card-2); color: var(--text); display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; text-decoration: none; font-size: var(--fs-meta);
  transition: background var(--t-fast), color var(--t-fast), padding var(--t-fast) var(--ease);
}
.pl-go .ph { font-size: 16px; }
.pl-go-text { display: none; }
.pl-go:hover, .pl-card.sel .pl-go { background: var(--ac); color: var(--ink); }
.pl-card.sel .pl-go { padding: 0 16px; }
.pl-card.sel .pl-go-text { display: inline; }
.pl-go:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.pl-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pl-num {
  background: var(--card-2); border-radius: var(--r-inner); padding: 12px 14px; display: flex; flex-direction: column;
  gap: 10px; min-width: 0;
}
.pl-num-label { font-size: var(--fs-small); color: var(--muted); }
.pl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pl-alerts { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--muted-2); }
.pl-alerts .ph { font-size: 15px; }
.pl-alerts.on { color: var(--good-text); }
.pl-add { align-items: flex-start; justify-content: center; background: var(--card-2); min-height: 200px; gap: 10px; cursor: pointer; }
.pl-add:hover { background: var(--raised); }
/* «جارٍ تحليل» above the list (the card itself: home.css .run-card) */
.pl-run:empty { display: none; }
/* Only part of the history read (places.js historyLine): one quiet line; «أكمل القراءة» sits above the card's button */
.pl-hist {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap;
  font-size: var(--fs-small); color: var(--muted); line-height: 1.6;
}
.pl-hist-text { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pl-hist-text .ph { font-size: 15px; flex: none; }
.pl-hist-ask { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; color: var(--text); }
.pl-hist-btn { position: relative; z-index: 2; flex: none; }
.pl-hist-btn .ph { font-size: 15px; }
.pl-hist-msg { flex-basis: 100%; color: var(--alert-amber-text); }
.pl-add-ic {
  width: 52px; height: 52px; border-radius: 50%; background: var(--ac); color: var(--ink); display: grid; place-items: center;
}
.pl-add-ic .ph { font-size: 22px; }

/* «حلّل مكاناً جديداً» in the list half: the start page's panel (css/pages/start.css) as a card */
.pl-addview { min-width: 0; }
.pl-add-top { display: flex; }
.pl-add-steps {
  display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--r-shell); background: var(--card);
}

/* ---------- Tablet (701-900px): the list half is only ~280-340px wide ---------- */
/* Step 2 was drawn for the 460px start panel: its range choice, the two buttons and the ★ of the rating tile ran out
   of the card and over the map. The map half gives the list a little more, and step 2 gets the phone's sizes. */
@media (min-width: 701px) and (max-width: 900px) {
  .pl-mapbox { flex-grow: .75; }
  .pl-add-steps { padding: 20px; }
  .pl-add-steps .st-tile { padding: 12px; min-height: 100px; }
  .pl-add-steps .st-tile-num { font-size: 28px; }
  .pl-add-steps .st-tile-num.long { font-size: 21px; }
  .pl-add-steps .st-choice .seg button { padding: 0 4px; font-size: var(--fs-small); }
  .pl-add-steps .st-btns { flex-wrap: wrap; }
  .pl-add-steps .st-btns .btn { flex: 1 1 auto; }
}

/* ---------- Phone: the title, the map (sticky: a press always shows the flight), then the list ---------- */
@media (max-width: 700px) {
  .pl-split { flex-direction: column; align-items: stretch; gap: 12px; }
  .pl-side { display: contents; }
  .pl-side > .page-head { order: 1; }
  .pl-quota, .pl-run { order: 2; max-width: none; }
  /* The first shadow fills the 8px above the stuck map (the cards scrolled through it, cut in half) and the 12px gap
     above it at the top of the page (nothing there to hide) */
  .pl-mapbox {
    order: 3; flex: none; position: sticky; top: 8px; z-index: 5; height: 36vh; height: 36dvh; min-height: 220px;
    border-radius: var(--r-tile); box-shadow: 0 -12px 0 var(--bg), 0 14px 30px rgba(0, 0, 0, .55);
  }
  .pl-mapbox .leaflet-control-zoom { display: none; }
  .pl-map-all { top: 10px; inset-inline-end: 10px; height: 40px; padding: 0 14px; }
  .pl-map-note { top: 10px; inset-inline-start: 10px; max-width: calc(100% - 20px); }
  .pl-map-all:not([hidden]) ~ .pl-map-note { top: 58px; } /* 10 + 40 + 8 */
  /* Scrolled into view (the add view, a card picked on the map): just under what the sticky map covers (its 8px top,
     its height and a 12px gap), and a card above the tab bar (its 62px pill, the space under it and a 12px gap) */
  .pl-view, .pl-card {
    scroll-margin-top: calc(max(36vh, 220px) + 20px); scroll-margin-top: calc(max(36dvh, 220px) + 20px);
  }
  .pl-view { order: 4; }

  .pl-grid { grid-template-columns: 1fr; gap: 10px; }
  .pl-card {
    padding: 16px 18px; border-radius: var(--r-tile); gap: 14px;
    scroll-margin-bottom: calc(74px + max(16px, env(safe-area-inset-bottom)));
  }
  .pl-name { font-size: var(--fs-body); }
  .pl-add { min-height: 0; }
  .pl-add-steps { padding: 20px; border-radius: var(--r-sheet); }
}