/* App frame -------------------------------------------------------------- */
#app { display: flex; flex-direction: column; min-height: 100dvh; }

#view {
  flex: 1;
  padding-bottom: var(--tabbar-h);
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

#tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: 0 -6px 24px rgba(2, 8, 20, .06);
  padding-bottom: env(safe-area-inset-bottom);
}
html[data-theme="dark"] #tabbar { box-shadow: 0 -6px 24px rgba(0, 0, 0, .35); }
/* active tab: a small brand indicator dot above the icon */
#tabbar button { position: relative; }
#tabbar button.active::before {
  content: ""; position: absolute; top: 3px; left: 50%;
  width: 18px; height: 3px; border-radius: 3px;
  transform: translateX(-50%);
  background: var(--brand-grad);
}
#tabbar button {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: .45rem 0 .3rem;
  font-size: .62rem; font-weight: 600;
  color: var(--text-muted);
}
#tabbar button.active { color: var(--blue); }
#tabbar .tab-icon { width: 20px; height: 20px; }

.tab-head {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .8rem .8rem .4rem; flex-wrap: wrap;
}
.tab-body { padding: 0 .8rem .8rem; }

/* 3-column assignment layout (desktop only) ------------------------------- */
.cols { display: flex; flex-direction: column; gap: .8rem; }
.col { min-width: 0; }
.col-list .card, .col-detail .card, .col-pool .card { margin-bottom: .6rem; }

@media (min-width: 1024px) {
  .cols { display: grid; grid-template-columns: 280px 1fr 300px; align-items: start; }
  .col { position: sticky; top: .8rem; max-height: calc(100dvh - var(--tabbar-h) - 1.6rem); overflow-y: auto; }
  #tabbar { max-width: 1400px; margin: 0 auto; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
}

/* On phones, the detail pane is the main view; list + pool become pickers */
@media (max-width: 1023px) {
  .desktop-only { display: none !important; }
}
@media (min-width: 1024px) {
  .mobile-only { display: none !important; }
}

/* Master-detail (Campers tab, desktop) --------------------------------------- */
.master-detail {
  display: flex;
  height: calc(100dvh - var(--tabbar-h));
}
/* the profile pane runs to the viewport edge - no centered max-width here */
#view:has(.master-detail) { max-width: none; padding-bottom: 0; }
.md-sidebar {
  width: 320px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  background: var(--surface);
}
.md-side-head {
  padding: .8rem .8rem .5rem;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .45rem;
}
.md-list { flex: 1; overflow-y: auto; }
.md-list .list-row.active { background: var(--blue-soft); }
.md-pane {
  flex: 1; overflow-y: auto;
  padding: 1.2rem 1.4rem calc(1.2rem + var(--tabbar-h));
}
.md-pane .profile-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Filter pill / chips / popover ----------------------------------------------- */
.chips-row { display: flex; flex-wrap: wrap; gap: .3rem; }
.chips-row:empty { display: none; }
.chip svg { vertical-align: -1px; margin-left: .25rem; }
.filter-pop {
  /* position/size are set inline by desktopPopover(), clamped to the viewport */
  z-index: 60;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}

/* Profile ------------------------------------------------------------------ */
.profile-root { container-type: inline-size; }

/* view/edit field cards */
.field-card { position: relative; margin-top: .7rem; }
.field-card h3 { margin-bottom: .4rem; }
.edit-pencil {
  position: absolute; top: 2px; right: 2px;
  width: 44px; height: 44px;                /* full-size tap target */
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); opacity: .45;
  border-radius: var(--radius-sm);
}
.edit-pencil:hover, .edit-pencil:focus-visible { opacity: 1; color: var(--blue); }

/* family + emergency contacts pair: side by side when the PANE is wide enough
   (container query - the pane width varies with the sidebar, not the viewport);
   tops aligned, heights independent; an editing card takes the full row */
.profile-pair { display: grid; gap: .7rem; align-items: start; margin-top: .7rem; }
.profile-pair > .field-card { margin-top: 0; }
@container (min-width: 640px) {
  .profile-pair { grid-template-columns: 1fr 1fr; }
  .profile-pair > .field-card.editing { grid-column: 1 / -1; }
}

/* bunkmates / classmates mini-card grid */
.mini-grid {
  display: grid; gap: .45rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.mini-card {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: .55rem .4rem;
}
.mini-card:hover { border-color: var(--blue); }
.mini-card .mini-name {
  font-size: .78rem; font-weight: 600; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.profile-head { display: flex; gap: .9rem; align-items: center; margin-bottom: .8rem; }
.profile-head .who { flex: 1; min-width: 0; }
.profile-grid { display: grid; gap: .6rem; }
@media (min-width: 700px) { .profile-grid { grid-template-columns: 1fr 1fr; } }
.kv { display: flex; justify-content: space-between; gap: .8rem; padding: .3rem 0; font-size: .9rem; border-bottom: 1px dashed var(--border); }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--text-muted); flex-shrink: 0; }
.kv .v { text-align: right; overflow-wrap: anywhere; }
.kv .v a { color: var(--blue); text-decoration: none; }

.pill-list { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Import/Export field-selection tree ----------------------------------------- */
.field-tree { display: flex; flex-direction: column; gap: .3rem; margin: .5rem 0; }
.field-tree-entity {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: .35rem .55rem;
}
.field-tree-entity.disabled { opacity: .55; }
.field-tree-entity > summary {
  cursor: pointer; display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; font-size: .88rem; list-style-position: outside;
}
.field-tree-fields {
  display: flex; flex-wrap: wrap; gap: .15rem .9rem;
  padding: .45rem .2rem .25rem 1.3rem;
}
.field-check {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .84rem; white-space: nowrap; cursor: pointer;
}
.field-check input[type="checkbox"] { width: auto; min-height: 0; margin: 0; }

/* Settings master-detail ------------------------------------------------------ */
.settings-sidebar { width: 240px; }
.settings-pane-inner { max-width: 780px; display: flex; flex-direction: column; gap: .8rem; }

/* Unplaced-panel controls (Bunks / Kvutzah assignment views) ----------------- */
.pool-controls { display: flex; flex-direction: column; gap: .45rem; margin: .4rem 0 .35rem; }
.pool-controls input[type="search"] { font-size: .85rem; padding: .35rem .6rem; min-height: 0; }
.camper-chip .grow { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.camper-chip .chip-sub {
  font-size: .7rem; color: var(--text-muted);
  white-space: normal; text-align: left; line-height: 1.25;
}


/* Bunk Board ------------------------------------------------------------------ */
.board { display: flex; flex-direction: column; gap: .7rem; }
.board-toolbar { display: flex; flex-direction: column; gap: .5rem; }
.board-search { max-width: 340px; }
.board-legend {
  display: flex; flex-wrap: wrap; gap: .3rem .8rem;
  font-size: .74rem; color: var(--text-muted); align-items: center;
}
.lg-item { display: inline-flex; align-items: center; gap: .3rem; }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.board-pill {
  font-size: .6rem; font-weight: 800; border-radius: 4px; padding: 1px 5px;
  color: var(--on-color); letter-spacing: .3px; flex: 0 0 auto;
}
.board-pill.stay { background: var(--green); }
.board-pill.leave { background: var(--red); }
.board-pill.new { background: var(--blue); }
.stay-n { color: var(--green); }
.leave-n { color: var(--red); }
.new-n { color: var(--blue); }

.board-mm { display: flex; flex-wrap: wrap; gap: .45rem; }
.board-mm-card {
  width: 108px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  padding: 0; text-align: left; font: inherit; color: inherit;
}
.board-mm-card { transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.board-mm-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
/* text-bearing school surfaces: darken toward ink so white text passes
   WCAG on every palette color in both themes (worst case 4.6:1 at 65/35) */
.mm-head, .board-card-head { background: var(--sc, var(--surface-2)); }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .mm-head, .board-card-head { background: color-mix(in srgb, var(--sc, var(--surface-2)) 65%, #101828); }
  .board-unplaced-card .board-card-head { background: var(--surface-2); }
}
.mm-head { color: var(--on-color); font-size: .72rem; font-weight: 800; padding: 2px 7px; }
.mm-stats { display: flex; justify-content: space-between; padding: 3px 7px 4px; font-size: .7rem; }
.board-bar { display: flex; height: 5px; }

.board-div-head {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: .45rem .9rem; margin-top: .4rem;
}
.board-div-head h2 { font-size: 1rem; margin: 0; }
.board-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: .7rem;
}
.board-card { padding: 0; overflow: hidden; transition: opacity var(--dur-1) var(--ease); }
.board-card.dimmed { opacity: .3; }
.board-card-head {
  color: var(--on-color); padding: .5rem .8rem;
  display: flex; justify-content: space-between; align-items: baseline;
}
.board-card-head .bn { font-weight: 800; }
.board-card-head .bc { font-size: .75rem; opacity: .9; }
.board-why {
  padding: .45rem .8rem; font-size: .78rem; line-height: 1.4;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.board-stats {
  display: flex; gap: .9rem; flex-wrap: wrap; align-items: center;
  padding: .35rem .8rem; font-size: .76rem; border-bottom: 1px solid var(--border);
}
.board-fam {
  font-size: .66rem; background: var(--blue-soft); color: var(--text);
  border-radius: 4px; padding: 1px 6px; font-weight: 600;
}
.board-grp { padding: .4rem .8rem 0; }
.board-grp:last-child { padding-bottom: .6rem; }
.board-grp-h {
  display: flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 700;
}
.board-grp-note {
  font-size: .7rem; color: var(--text-muted); font-style: italic;
  margin: 1px 0 0 1.1rem;
}
.board-members { list-style: none; margin: 2px 0 4px; padding: 0 0 0 1.1rem; }
.board-members li {
  display: flex; align-items: center; gap: .5rem;
  padding: 2px 4px; font-size: .84rem; border-radius: 4px; cursor: pointer;
}
.board-members li:hover { background: var(--surface-2); }
.board-members li.hidden { display: none; }
.board-members .nm {
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.board-members li.leave-row .nm { color: var(--red); opacity: .85; }
.board-members .tch {
  color: var(--text-muted); font-size: .72rem; white-space: nowrap;
  flex: 1 1 auto; text-align: right;
}
@media (max-width: 640px) { .board-grid { grid-template-columns: 1fr; } }

/* Unplaced card on the board: same anatomy as a bunk card, visually "empty" */
.board-unplaced-card { border: 2px dashed var(--border); box-shadow: none; }
.board-unplaced-card .board-card-head {
  background: var(--surface-2); color: var(--text);
  border-bottom: 1px solid var(--border);
}
.board-unplaced-card .board-card-head .bc { color: var(--text-muted); opacity: 1; }
.board-unplaced-card { max-height: 640px; overflow-y: auto; }
.board-unplaced-card .board-card-head { position: sticky; top: 0; z-index: 1; }

/* Collapsible school groups in the unplaced card */
.board-grp-h.collapsible { cursor: pointer; user-select: none; }
.board-grp-h.collapsible:hover { color: var(--blue); }
.grp-caret {
  width: 0; height: 0; flex: 0 0 auto;
  border-left: 5px solid currentColor; border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; transition: transform var(--dur-1) var(--ease);
  transform: rotate(90deg);
}
.board-grp.collapsed .grp-caret { transform: rotate(0deg); }
.board-grp.collapsed .board-members,
.board-grp.collapsed .board-grp-note { display: none; }
.grp-tools { display: inline-flex; gap: .5rem; margin-left: auto; padding: 0 .6rem; }
.grp-tool {
  background: none; border: none; padding: 0; font: inherit; font-size: .68rem;
  color: var(--text-muted); cursor: pointer; text-decoration: underline;
}
.grp-tool:hover { color: var(--blue); }

/* Command palette --------------------------------------------------------------- */
.pal-backdrop {
  position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, .45);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 10vh 1rem 0;
}
.pal {
  animation: rise var(--dur-2) var(--ease);
  width: 560px; max-width: 100%; background: var(--surface);
  border-radius: var(--radius); box-shadow: var(--shadow-3);
  overflow: hidden; display: flex; flex-direction: column; max-height: 70vh;
}
.pal-inputwrap {
  display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem;
  border-bottom: 1px solid var(--border); color: var(--text-muted);
}
.pal-input {
  flex: 1; border: none; outline: none; background: none; font: inherit;
  font-size: 1.05rem; color: var(--text); min-height: 0; padding: 0;
}
.pal-list { overflow-y: auto; }
.pal-row {
  display: flex; align-items: center; gap: .7rem; padding: .45rem 1rem;
  cursor: pointer;
}
.pal-row.sel, .pal-row:hover { background: var(--surface-2); }
.pal-icon {
  width: var(--photo-size); height: var(--photo-size); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border-radius: 50%; color: var(--text-muted);
}
.pal-label { font-weight: 600; display: flex; align-items: center; gap: .45rem; }
.pal-sub { font-size: .78rem; color: var(--text-muted); }
.pal-type { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.pal-empty { padding: 1.2rem 1rem; color: var(--text-muted); }
.pal-hint {
  padding: .45rem 1rem; border-top: 1px solid var(--border);
  font-size: .72rem; color: var(--text-muted);
}

/* Quick-peek card ---------------------------------------------------------------- */
.peek-wrap { position: fixed; inset: 0; z-index: 80; background: rgba(15, 23, 42, .35);
  display: flex; align-items: flex-end; justify-content: center; }
.peek-wrap.anchored { background: none; pointer-events: none; }
.peek-card {
  animation: rise var(--dur-2) var(--ease);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-2);
  width: 340px; max-width: 100vw; pointer-events: auto;
  max-height: 80vh; overflow-y: auto;
}
.peek-wrap.anchored .peek-card { position: fixed; }
.peek-wrap:not(.anchored) .peek-card {
  width: 100%; border-radius: var(--radius) var(--radius) 0 0; border-bottom: none;
}
.peek-head { display: flex; gap: .7rem; padding: .8rem .9rem .5rem; align-items: flex-start; }
.peek-name { font-weight: 700; font-size: 1.05rem; }
.peek-badges { display: flex; gap: .35rem; margin-top: .25rem; flex-wrap: wrap; }
.peek-med {
  margin: 0 .9rem .1rem; padding: .45rem .6rem; font-size: .78rem; line-height: 1.4;
  background: var(--danger-soft); border: 1px solid var(--danger);
  border-radius: var(--radius-sm); color: var(--red);
}
.peek-body { padding: .4rem .9rem .2rem; }
.peek-row {
  display: flex; gap: .8rem; padding: .28rem 0; font-size: .85rem;
  border-bottom: 1px dashed var(--border);
}
.peek-row:last-child { border-bottom: none; }
.peek-lbl { color: var(--text-muted); flex: 0 0 92px; }
.peek-val { min-width: 0; overflow-wrap: anywhere; }
.peek-foot { display: flex; justify-content: flex-end; padding: .5rem .9rem .8rem; }

/* Bunk sizes settings grid + board capacity pill */
.bunk-size-grid {
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: .3rem .9rem; align-items: center; max-width: 480px;
}
.bsg-head { font-size: .72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.bsg-grade { grid-column: 1 / -1; font-weight: 700; font-size: .8rem; margin-top: .5rem; color: var(--text-muted); }
.board-pill.amber { background: var(--amber); }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .board-pill.amber { background: color-mix(in srgb, var(--warning) 70%, black); }
}

/* Section label inside sidebar lists (grade headings etc.) */
.list-section-lbl { padding: .6rem .2rem .2rem; font-weight: 700; }

/* Bunk sizes: occupancy mini-bars against targets */
.bsg-bar {
  position: relative; width: 74px; height: 1.1rem; border-radius: 999px;
  background: var(--surface-2); overflow: hidden;
  display: inline-flex; align-items: center;
}
.bsg-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  transition: width var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.bsg-n {
  position: relative; font-size: .68rem; font-weight: 700; line-height: 1;
  padding-left: 6px; color: var(--text);
}
.board-card-head .bn-sub {
  display: block; font-size: .7rem; font-weight: 600; opacity: .88; margin-top: 1px;
}

/* ---------------------------------------------------------------------------
   Desktop reimagined: the bottom tab bar becomes a left navigation rail.
   Phones keep the bottom bar. All bottom-offset math collapses via
   --tabbar-h: 0 on desktop.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root { --tabbar-h: 0px; --rail-w: 212px; }

  #app { padding-left: var(--rail-w); }

  #tabbar {
    top: 0; bottom: 0; right: auto; width: var(--rail-w);
    max-width: none; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 14px 10px calc(14px + env(safe-area-inset-bottom));
    border-top: none; border-left: none;
    border-right: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    box-shadow: none;
  }
  html[data-theme="dark"] #tabbar { box-shadow: none; }

  /* brand block at the top of the rail */
  #tabbar::before {
    content: "GAN 5786";
    display: block; padding: .4rem .7rem 1rem;
    font-size: 1.05rem; font-weight: 800; letter-spacing: .03em;
    background: var(--brand-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  #tabbar button {
    flex: 0 0 auto;
    flex-direction: row; justify-content: flex-start; gap: .65rem;
    padding: .5rem .7rem;
    border-radius: 10px;
    font-size: .875rem; font-weight: 600;
  }
  #tabbar button:hover { transform: none; background: var(--surface-2); color: var(--text); }
  #tabbar button.active {
    background: color-mix(in srgb, var(--brand-a) 11%, transparent);
    color: var(--blue);
  }
  html[data-theme="dark"] #tabbar button.active {
    background: color-mix(in srgb, var(--brand-a) 26%, transparent);
    color: #a5c0ff;
  }
  /* active indicator: a slim gradient bar on the left edge */
  #tabbar button.active::before {
    top: 50%; left: 0; transform: translateY(-50%);
    width: 3px; height: 18px;
  }
  #tabbar .tab-icon { width: 18px; height: 18px; }

  /* the search entry reads as a command hint */
  #open-palette { margin-bottom: .6rem; border: 1px solid var(--border); color: var(--text-muted); }
  #open-palette::after {
    content: "\2318K"; margin-left: auto;
    font-size: .68rem; font-weight: 700; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
    background: var(--surface);
  }

  /* settings sinks to the bottom of the rail */
  #tabbar button[data-tab="settings"] { margin-top: auto; }
}

/* ---------------------------------------------------------------------------
   Desktop refinements round 2:
   - app-shell scrolling: the page NEVER scrolls; #view is the one scroller
   - the rail is icon-only and expands over the content on hover
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root { --rail-w: 64px; --rail-w-max: 212px; }

  body { overflow: hidden; }
  #app { height: 100dvh; }
  #view { overflow-y: auto; }
  .master-detail { height: 100%; }
  #view:has(.master-detail) { overflow: hidden; }
  .col { max-height: calc(100dvh - 1.6rem); }

  #tabbar {
    width: var(--rail-w);
    overflow: hidden;
    transition: width var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
    z-index: 60;
  }
  #tabbar:hover { width: var(--rail-w-max); box-shadow: var(--shadow-3); }

  #tabbar::before { content: "G"; text-align: center; padding: .4rem 0 1rem; }
  #tabbar:hover::before { content: "GAN 5786"; text-align: left; padding: .4rem .7rem 1rem; }

  #tabbar button { justify-content: center; padding: .5rem 0; }
  #tabbar:hover button { justify-content: flex-start; padding: .5rem .7rem; }

  .tab-lbl { display: none; white-space: nowrap; }
  #tabbar:hover .tab-lbl { display: inline; animation: fadein var(--dur-2) var(--ease); }

  #open-palette::after { display: none; }
  #tabbar:hover #open-palette::after { display: inline-block; animation: fadein var(--dur-2) var(--ease); }
}

/* ---------------------------------------------------------------------------
   Installed home-screen app (iOS standalone): the webview runs under the
   notch/Dynamic Island and status bar. Pad the top by the device's reported
   safe area so nothing hides behind the clock/battery. Regular browser use
   is untouched (display-mode there is "browser", and env() is 0 anyway).
   --------------------------------------------------------------------------- */
@media (display-mode: standalone) {
  #view { padding-top: calc(env(safe-area-inset-top, 0px) + 2px); }
  .fullscreen-center, .skel-shell { padding-top: calc(env(safe-area-inset-top, 0px) + 1rem); }
  /* sheets that slide from the bottom already respect the bottom inset;
     full-height panes must not hide their tops either */
  .modal { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 40px); }
}

html.ios-standalone #view { padding-top: calc(env(safe-area-inset-top, 0px) + 2px); }
html.ios-standalone .fullscreen-center,
html.ios-standalone .skel-shell { padding-top: calc(env(safe-area-inset-top, 0px) + 1rem); }
html.ios-standalone .modal { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 40px); }

/* while any overlay is up, the page behind it must not scroll */
html.no-scroll, html.no-scroll body { overflow: hidden; }

/* Buses tab */
.trip-select { min-height: 34px; padding: .3rem .5rem; border-radius: var(--radius-sm); }
.bus-grp-h { cursor: grab; }
.bus-grp-h:active { cursor: grabbing; }
.bus-add {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 90px; color: var(--text-muted); border-style: dashed;
  font: inherit; font-weight: 600;
}
.bus-add:hover { color: var(--blue); border-color: var(--blue); }

/* Buses is a desktop planning tool - never in the mobile tab bar */
@media (max-width: 1023px) {
  #tabbar button[data-tab="buses"] { display: none !important; }
}