/* mobile.css — Layout B adaptive overrides for screens ≤ 680px */
/* Desktop and tablet layouts are unchanged — this file only activates on mobile */

@media (max-width: 680px) {

  /* ── Nav ─────────────────────────────────────────────────────────────── */
  nav {
    padding: 14px 16px;
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--paper);
  }

  /* Hide desktop nav links — replaced by drawer */
  .nav-links    { display: none; }
  .nav-tag      { display: none; }

  /* Hamburger button */
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-right: 8px;
    flex-shrink: 0;
  }
  .nav-hamburger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--ink);
    transition: transform 0.2s, opacity 0.2s;
  }
  .nav-hamburger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* ── Slide-over drawer ────────────────────────────────────────────────── */
  .mobile-drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: 260px;
    height: 100%;
    background: var(--paper);
    border-right: 1px solid var(--rule);
    z-index: 300;
    display: flex;
    flex-direction: column;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: env(safe-area-inset-top, 0);
  }
  .mobile-drawer.open { left: 0; }

  .mobile-drawer-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .mobile-drawer-logo {
    font-family: var(--serif);
    font-size: 18px;
    color: var(--ink);
    text-decoration: none;
  }
  .mobile-drawer-logo em { font-style: italic; color: var(--mid); }
  .mobile-drawer-close {
    background: none;
    border: none;
    font-family: var(--mono);
    font-size: 18px;
    color: var(--mid);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
  }

  .mobile-drawer-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: none;
    padding: 12px 0;
    position: static;
    z-index: unset;
  }
  .mobile-drawer-link {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mid);
    text-decoration: none;
    padding: 14px 20px;
    border-bottom: 1px solid var(--rule);
    transition: background 0.12s, color 0.12s;
  }
  .mobile-drawer-link:hover,
  .mobile-drawer-link.active { background: var(--cream); color: var(--ink); }

  .mobile-drawer-footer {
    border-top: 1px solid var(--rule);
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
  }
  .mobile-drawer-user {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 10px;
  }
  .mobile-drawer-signout {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mid);
    text-decoration: none;
    border: 1px solid var(--rule);
    padding: 6px 12px;
    border-radius: 2px;
    transition: all 0.15s;
  }
  .mobile-drawer-signout:hover { border-color: var(--ink); color: var(--ink); }

  /* Overlay behind open drawer */
  .mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 250;
  }
  .mobile-overlay.open { display: block; }

  /* ── Composer page (app.css grid → single column) ─────────────────── */
  body:has(.composer) {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
  }

  .composer {
    grid-column: unset;
    padding: 20px 16px;
    border-right: none;
  }

  /* Hide circulation log on mobile */
  .history-panel { display: none !important; }

  /* ── Main pages (archive, settings, queue, feed) ─────────────────── */
  main {
    padding: 20px 16px;
    max-width: 100%;
  }

  h1 { font-size: 1.4rem; }

  /* Tabs bar (feed page) */
  .tabs-bar { padding: 0 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab      { padding: 12px 12px; font-size: 10px; white-space: nowrap; }

  /* Search bar */
  .search-bar { gap: 0; }
  .search-bar input  { font-size: 14px; }
  .search-bar button { padding: 10px 14px; font-size: 11px; }

  /* Post cards */
  .post-card    { padding: 16px 0; }
  .post-actions { gap: 6px; }

  /* Platform card (settings) */
  .pcard-body { padding: 16px; }
  .actions    { flex-wrap: wrap; gap: 8px; }

  /* Queue items */
  .qitem { padding: 14px 16px; }

  /* Feed cards */
  .card { padding: 14px 0; }
  .card-body { gap: 6px; }

  /* Char bars — 2-column on narrow */
  .char-bars { grid-template-columns: repeat(2, 1fr); }
  .char-bar:nth-child(2) { border-right: none; }

  /* Platform toggles — 2-column on narrow */
  .platform-row    { flex-wrap: wrap; }
  .ptoggle         { flex: 0 0 50%; border-bottom: 1px solid var(--rule); }
  .ptoggle:nth-child(odd)  { border-right: 1px solid var(--rule); }
  .ptoggle:nth-child(even) { border-right: none; }
  .ptoggle:nth-last-child(-n+2) { border-bottom: none; }

  /* Schedule row */
  .schedule-row { flex-wrap: wrap; gap: 8px; }
  input[type="datetime-local"].visible { font-size: 13px; }

  /* Theme footer */
  .theme-footer { padding: 12px 16px; flex-wrap: wrap; gap: 4px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)); }

  /* OG card — stack vertically on mobile (already has @media 640px but reinforce) */
  .og-card { flex-direction: column; }
  .og-image { width: 100%; border-right: none; border-bottom: 1px solid var(--rule); }

  /* Hide canvas ripple on mobile (performance) */
  #nav-ripple { display: none; }

}