/**
 * File:          /pwa/css/phone-header.css
 * Version:       0.1.0
 * Last Modified: 2026-10-24 10:55 AM ET
 * Changes:       New — iOS-style navigation bar. Phones (<=768px): no hamburger
 *                or drawer, centered 17px/600 title, no bottom border, icon
 *                action slots left/right, 34px large title for More. Desktop
 *                keeps the sidebar layout; action icons sit at the right.
 */

.header-action { color: var(--text-secondary); }
.header-action-right,
.header-back { color: var(--accent); }
.header-action .icon { width: 22px; height: 22px; }
.header-action-right .icon { width: 26px; height: 26px; stroke-width: 1.8; }

/* Desktop: keep the left title, put both actions on the right */
@media (min-width: 769px) {
  .header-action-left { order: 2; }
  .header-action-right { order: 3; }
}

@media (max-width: 768px) {
  /* No drawer on phones — the bottom tab bar + More view replace it */
  .mobile-menu-btn,
  .sidebar { display: none !important; }

  .view-header {
    position: relative;
    justify-content: center;
    min-height: 52px;
    padding: 8px 56px;
    border-bottom: none;
  }

  .view-header h1 {
    flex: 0 1 auto;
    font-size: var(--fs-nav-title);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-action {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
  }
  .header-action-left { left: 8px; }
  .header-action-right { right: 8px; }
  .header-back { left: 4px; width: auto; padding: 0 8px 0 4px; }
  .view-header:has(.header-back) { padding-left: 104px; padding-right: 104px; }
  .header-action:hover { background: transparent; }

  /* Large title (More): left aligned 34px bold, like a default iOS nav bar */
  .view-header.view-header-large {
    justify-content: flex-start;
    padding: 8px 20px 4px;
  }
  .view-header.view-header-large h1 {
    font-size: var(--fs-large-title);
    font-weight: 700;
    text-align: left;
    letter-spacing: -0.02em;
  }

  .view-content { padding: var(--gutter); }
}

/* === END OF FILE (FILENAME: /pwa/css/phone-header.css) === */