/* Command Center: phone layout.
   Loaded after style.css and only applies under 840px wide, so the Mac app
   (min window 900px) never sees it. iPad portrait gets this layout too;
   iPad landscape keeps the desktop rail. */

@media (max-width: 840px) {
  .shell {
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
  }

  /* ---------- bottom tab bar (was the left rail) ---------- */
  .sidebar {
    order: 2;
    width: 100%;
    flex: none;
    flex-direction: row;
    align-items: stretch;
    border-right: none;
    border-top: 1px solid var(--hairline);
    background: rgba(10, 10, 10, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .side-label, .side-status, .nav-index { display: none; }
  .side-nav {
    flex-direction: row;
    width: 100%;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .nav-item {
    flex: 1 0 auto;
    justify-content: center;
    gap: 6px;
    border-left: none;
    border-top: 2px solid transparent;
    padding: 12px 12px 10px;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-align: center;
    transition: color 0.15s;
  }
  .nav-item:hover { background: none; }
  .nav-item.active {
    border-left-color: transparent;
    border-top-color: var(--ink);
    background: none;
  }
  .nav-badge { margin-left: 0; }

  /* ---------- content scrolls as one column ---------- */
  .content {
    order: 1;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(10px + env(safe-area-inset-top)) 12px 18px;
    gap: 12px;
  }
  .topbar { padding: 2px 2px 0; }
  .wordmark { font-size: 22px; }
  .topdate { font-size: 11px; letter-spacing: 0.18em; }
  .digi-digit { height: 34px; width: 19px; }
  .digi-colon { gap: 6px; }
  .digi-colon i { width: 4px; height: 4px; }

  .page { flex: none; }
  .page.active { flex: none; display: block; }
  .page.active > * { flex: none; min-height: auto; }
  .subpage.active { display: block; }
  .page.active .subtabs { margin-bottom: 12px; }

  /* every grid becomes a single stacked column */
  .home-grid, .mach10-grid, .kanban, .personal-grid, .finance-grid,
  .team-grid, .news-grid, .portfolio-grid {
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 12px;
  }
  .panel-invoices, .panel-chart { grid-column: auto; }
  .panel-chart { height: 230px; }
  .panel { min-height: 0; }
  .panel-body {
    flex: none;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .panel-head { padding: 12px 14px 10px; }

  /* sub-tabs scroll sideways instead of wrapping */
  .subtabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtab, .newstab { flex: none; padding: 8px 12px 10px; font-size: 11px; }

  /* month calendar and full calendar size to content */
  .month-body { overflow: visible; }
  .cal-grid { height: auto; grid-auto-rows: minmax(40px, auto); }
  .cal-controls { flex-wrap: wrap; }
  .cal-hint { display: none; }
  .fullcal {
    height: auto;
    overflow: visible;
    grid-auto-rows: minmax(64px, auto);
    gap: 3px;
  }
  .fc-day { padding: 5px 5px; }

  /* news: two-up heroes, titles wrap */
  .news-heroes { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-card { height: 136px; }
  .news-row { align-items: flex-start; flex-wrap: wrap; row-gap: 3px; }
  .news-src { min-width: 0; }
  .news-title { flex: 1 1 100%; order: 3; white-space: normal; line-height: 1.35; }
  .news-time { margin-left: auto; }

  /* email reader and event modal become bottom sheets */
  .overlay { align-items: flex-end; }
  .reader {
    width: 100%;
    max-height: 94%;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
  }
  #email-overlay .reader { height: 94%; }
  .reader-reply { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .event-form { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }

  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); max-width: 92vw; text-align: center; }

  /* 16px inputs stop iOS zooming the page on focus */
  .quick-add input, .post-add input, .add-form input, .add-form select,
  .event-form input, .event-form select, .reader-reply textarea, #lock-input {
    font-size: 16px;
  }
  .add-form .form-row, .event-form .form-row { flex-wrap: wrap; }
}

/* Touch screens have no hover: keep the delete and action controls visible. */
@media (hover: none) {
  .todo-del, .project-actions { opacity: 0.6; }
  .todo-del:active, .project-actions button:active { color: var(--ink); }
}