/* ─────────── desktop ─────────── */
@media (min-width: 56.25rem) {
  .on-phone { display: none; }
  .on-desktop { display: inline; }

  /* the shell caps out and centres rather than stretching to the monitor */
  body { display: flex; justify-content: center; }
  .app {
    width: 100%;
    max-width: 80rem;
    display: grid;
    grid-template-columns: 13.25rem minmax(0, 1fr) 15.5rem;
    grid-template-rows: auto 1fr;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
  /* the rail collapses on pages with no actions and content takes the width back */
  .app.no-action-rail { grid-template-columns: 13.25rem minmax(0, 1fr); }

  /* nav becomes a labelled sidebar */
  .nav {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    gap: 0.125rem;
    padding: 1rem 0.625rem;
    border-top: 0;
    border-right: 1px solid var(--line);
  }
  .nav-button { flex: 0 0 auto; justify-content: flex-start; gap: 0.75rem; height: 2.5rem; padding: 0 0.75rem; border-radius: 0.5625rem; }
  /* Beside an icon in a sidebar, not stacked under one in a tab bar, so it can
   * read at the size the action rail's items use rather than a tab bar's. */
  .nav-button .nav-label { display: inline; font-size: 0.875rem; }
  .nav-button.active { background: var(--raised); }
  .nav-button:hover:not(.active) { background: rgba(255, 255, 255, .04); }

  /* the screen bar moves to the top. Its right column is REMOVED, not hidden:
   * hiding the button leaves the grid column reserving its width, which shows
   * up as a gap beside the search field. */
  .screen-bar {
    grid-column: 2;
    grid-row: 1;
    height: 3.625rem;
    border-bottom: 1px solid var(--line);
    border-top: 0;
  }
  /* The rail carries the menu's actions here. Only the button goes; its slot
   * still holds the gold action, so nothing is left reserving empty width. */
  .screen-bar .icon-button[aria-label="More"] { display: none; }

  /* Tabs are cut down to fit a phone's bar, where several of them share its
   * width. There is room here, so they read at the size the rest of the bar
   * does rather than at the size the narrowest screen forced on them. */
  .screen-bar .tab { font-size: 0.75rem; letter-spacing: .06em; padding: 0 0.75rem; }

  /* The calendar is sized for a phone, where seven columns and a week gutter
   * have to fit across it and the day number is what has to give. The grid gets
   * wider here rather than denser, so every part of it steps up together: the
   * weekdays heading the columns, the numbers, the counts beside a day's pips,
   * and the legend that says what a pip means. */
  .weekday-row span { font-size: 0.6875rem; }
  .calendar-grid > * { font-size: 0.9375rem; }
  .legend { font-size: 0.6875rem; }
  /* The pips and the count beside them are the smallest things on the screen
   * and the ones carrying what a day holds, so they take the widest step. The
   * row grows with them: it is a fixed height, and a pip that outgrows it sits
   * off its own line. */
  .mark { width: 0.4375rem; height: 0.4375rem; }
  .mark + .mark { margin-left: 0.3125rem; }
  .mark-row { height: 0.5rem; }
  .mark-count { font-size: 0.6875rem; margin-left: 0.1875rem; }

  .scroll, .editor-wrapper { grid-column: 2; grid-row: 2; border-bottom: 0; }
  /* the ⋯ menu is replaced by an always-visible Actions rail, built from the
   * same source as the sheet so the two cannot drift */
  .action-rail {
    display: block;
    grid-column: 3;
    grid-row: 1 / 3;
    overflow-y: auto;
    border-left: 1px solid var(--line);
    padding: 1rem 0.625rem;
  }
  .no-action-rail .action-rail { display: none; }
  .action-rail-head { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 0.25rem 0.75rem 0.625rem; }
  .action-rail .sheet-item { padding: 0.625rem 0.75rem; border-radius: 0.5625rem; font-size: 0.875rem; gap: 0.75rem; }
  .action-rail .sheet-item:hover { background: rgba(255, 255, 255, .04); }
  .action-rail .sheet-item.danger { margin-top: 0.5rem; padding-top: 0.875rem; }

  /* long-form text keeps a reading measure */
  .prose { max-width: 43.75rem; }

  /* menus stop being bottom sheets */
  .sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -46%) scale(.98);
    width: 23.75rem;
    border-radius: 0.875rem;
    border: 1px solid var(--line-strong);
    padding: 0.75rem 0 0.625rem;
    opacity: 0;
    transition: opacity .16s ease, transform .16s ease;
  }
  .sheet.is-open { transform: translate(-50%, -50%); opacity: 1; }
  .grabber { display: none; }

  .toasts { left: auto; right: 1.5rem; bottom: 1.5rem; transform: none; }

  .row-title a:hover, .edge-item .edge-name a:hover { text-decoration: underline; text-underline-offset: 0.1875rem; }
  .pager-label { display: inline; }
  .notebook:hover { border-bottom-color: var(--line-strong); }
  .notebook.is-missing:hover { border-bottom-color: var(--unresolved); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}