/* ============================================================
   Orbita Publishing Portal – Responsive
   ============================================================ */

@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  :root { --sidebar-w: 0px; }

  /* orbita:ui - the close button sat on top of the logo once the drawer was
     open (Noah, 27/09/2026). It now moves out of the drawer and waits on the
     dimmed backdrop right beside it, where a thumb expects it; the drawer
     leaves room for it on narrow phones. */
  :root { --drawer-w: min(288px, calc(100vw - 66px)); }
  .sidebar {
    width: var(--drawer-w);
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease;
  }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }

  .sidebar-toggle { display: flex; transition: left var(--dur) var(--ease-out); }
  .sidebar-toggle.open { left: calc(var(--drawer-w) + 12px); }

  .main-content, .admin-main { margin-left: 0; }

  .topbar, .admin-topbar { padding-left: 68px; }
  .topbar-title .crumbs { display: none; }

  .container, .page-wrapper, .container.page-wrapper, .admin-content { padding: 22px 20px 32px; }
  .app-footer, .main-content > footer { padding: 16px 20px; }
  #ann-banner { padding: 12px 20px 0; }
}

@media (max-width: 900px) {
  /* orbita:redesign - the analytics tables carry a colgroup with fixed pixel
     widths, so table-layout:fixed lets them grow past their card: measured 502
     at a 390pt viewport. The card scrolls, the table keeps its column layout.
     The two column grid on that page also stayed two columns at 390. */
  /* the page defines .an-2col in its own style block, which comes after the
     stylesheets, so an equally specific rule here would lose. */
  .an-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-content .an-2col, .admin-content .cd-2col { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row { grid-template-columns: 1fr; row-gap: 16px; }
  .stat-value { font-size: 1.7rem; }
  .filterbar .form-group { min-width: 100%; }
}

@media (max-width: 640px) {
  body { font-size: 14.5px; }
  h1, .page-title { font-size: 1.4rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .card { padding: 18px; border-radius: var(--radius-md); }
  .stat-card { min-height: 96px; padding: 16px 18px; }
  /* The code stays: a globe alone does not say which language is on,
     and the pill was left 23 px wide with a gap meant for text. */
  .topbar-pill { padding: 0 9px; gap: 5px; font-size: 0.83rem; }
  .modal { padding: 20px; border-radius: var(--radius-lg); }
  .toast-container { right: 12px; left: 12px; bottom: 12px; max-width: none; }
  thead th, tbody td { padding: 12px 12px; }
  .btn { padding: 0 14px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1; }
  .app-footer, .main-content > footer { flex-direction: column; align-items: flex-start; }
  .app-footer--schmal { align-items: center; }
}

/* Empty-state row of a wide table. Centred across a colspan, the message sits
   in the middle of the table's min-width and ends up outside the visible part
   of the horizontal scroller on a phone. Left-aligned it starts where the
   reader looks. */
.table-empty { text-align: center; }
@media (max-width: 1180px) {
  .table-empty { text-align: left; }
}

/* ── Installed app: notch and home indicator (orbita:app) ──
   base.html sets viewport-fit=cover, so on an iPhone the page may reach
   under the rounded corners, the notch (landscape) and the home indicator.
   Everywhere else env() is 0 and nothing moves. The status bar style is
   "default" (components/favicons.html): the page starts below it, so the top
   inset stays 0 in portrait. At the end of this sheet, so the breakpoints
   above cannot undo it. */
.sidebar { padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); }
.sidebar-bottom { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.sidebar-toggle {
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
}
.main-content {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.toast-container { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 1024px) {
  .sidebar-toggle.open { left: calc(var(--drawer-w) + 12px + env(safe-area-inset-left, 0px)); }
}
@media (max-width: 640px) {
  .toast-container { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* orbita:ui 08.10.2026 - the notification panel hung from the bell with
   right: 0, but on a phone the bell is not the last icon: the panel ran out
   of the screen on the left (Noah). On narrow screens it hangs from the top
   bar instead, 12 px from both edges. */
@media (max-width: 640px) {
  .notif { position: static; }
  .notif-panel { left: 12px; right: 12px; width: auto; top: calc(100% + 6px); }
}