/* @media(min-width:900px) desktop sidebar + 640px reading column */

/* ============ DESKTOP / TABLET (roughly 2x the phone frame width) ============
   The drawer stops being an overlay and becomes a permanent sidebar; the
   hamburger and back arrow both disappear since the sidebar handles all
   navigation directly (including leaving the Saved Content detail view — just
   click "Saved Content" again). The phone-bezel treatment from the block above
   is dropped in favor of the app actually filling the browser. */
@media (min-width: 900px) {
  .device {
    max-width: 955px;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .scrim {
    display: none;
  }
  .drawer {
    position: static;
    transform: none;
    width: 300px;
    max-width: 300px;
    flex: none;
    border-right: 1px solid var(--border);
  }
  .drawer-header {
    display: none;
  }
  .drawer-scroll {
    padding-top: 1rem;
  }
  #accountRow {
    order: 1;
    border-bottom: none;
    border-top: 1px solid var(--border);
    padding: 0.9rem 1rem 1rem 1rem;
  }
  .menu-btn,
  .back-btn {
    display: none !important;
  }
  /* Top bar now spans the full device width (sidebar included). Reserve a
     sidebar-width gap on the left so the remaining space exactly matches
     content-pane's width, then align the title the same way .screen-body
     aligns its content (max-width + auto margins) so they land on the same
     left edge regardless of viewport width. The theme toggle is pulled out
     of the flex flow so it doesn't skew that calculation. */
  .topbar {
    padding-left: 300px;
    padding-right: 0;
  }
  .topbar-title-wrap {
    max-width: 640px;
    margin: 0 auto;
  }
  #themeBtn {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }
  /* Only on sub-pages (body.screen-detail) — Home's own title already says
     "Atomic Frontier", so showing it twice there would be redundant. */
  body.screen-detail .topbar-brand {
    display: block;
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Fredericka the Great";
    font-weight: normal;
    font-size: 1.4rem;
    color: var(--accent);
    white-space: nowrap;
  }
  #openAllBtn {
    display: none;
  }
  /* .screen-body itself stays full width here (not capped, no padding) so its
     scrollbar renders at the true right edge of the panel, matching normal
     scrollbar conventions, rather than hugging a narrow centered column
     stranded away from the frame. .home-banner sits directly in it, full-bleed;
     .inner-screen carries the padding and centers everything else to the
     reading column. */
  .inner-screen {
    max-width: 640px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .home-banner {
    max-width: 640px;
    width: 100%;
    margin: 0 auto 1rem auto;
  }
  .actionbar {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }
}