/* MFA setup uses the same quiet authentication card at every viewport. */
#mfaSetupView { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
[data-mfa-codes] { width: 100%; font-family: var(--font-mono); resize: vertical; }
[data-required-mfa] .form-grid { grid-template-columns: minmax(0, 1fr); }
[data-required-mfa] .set-mfa-btn { margin: 8px 0; }

/* ═══════════════════════════════════════════════════════════════════
   NARROW — below 900px the rail becomes a drawer: a fixed top bar carries
   the categories menu and the primary action, and #sidebar is an overlay.
   The board keeps its stored layout down to 640px (columns just narrow);
   below that it stacks (see "phone" further down). */
:root { --mobilebar-h: 52px; }

#mobileBar { display: none; }
#navScrim { display: none; }

@media (max-width: 900px) {
  #mobileBar {
    display: flex; align-items: center; gap: 8px;
    position: fixed; inset: 0 0 auto 0; z-index: 110;
    height: var(--mobilebar-h);
    padding: 0 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .mb-btn {
    flex: none;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text); cursor: pointer;
  }
  .mb-btn:hover { background: var(--surface-2); }
  .mb-btn[aria-expanded="true"] { background: var(--surface-2); }
  .mb-title {
    flex: 1; min-width: 0;
    font-family: var(--font-display); font-size: 15px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mb-add {
    flex: none;
    background: var(--accent); color: var(--on-accent);
    border: 1px solid transparent; border-radius: var(--radius);
    padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer;
  }
  #navScrim {
    display: block;
    position: fixed; inset: 0; z-index: 115;
    background: rgba(9, 10, 16, .5);
    opacity: 0; pointer-events: none;
    transition: opacity 220ms ease;
  }
  #navScrim.is-open { opacity: 1; pointer-events: auto; }

  #mainRow { padding-top: var(--mobilebar-h); }

  /* the drawer — out of flow, off-canvas until summoned. Width is owned by
     syncSidebarWidth() in drawer mode; this is the no-JS fallback.
     The shadow belongs to .is-open only: with the box parked at x = -300 a
     `0 0 48px` spread reaches 48px INTO the board and leaves a grey band
     along the left edge of the screen while the drawer is closed. */
  #sidebar {
    position: fixed; inset: 0 auto 0 0;
    z-index: 120;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
    width: min(300px, 86vw);
  }
  #sidebar.is-open {
    transform: translateX(0);
    box-shadow: 0 0 48px rgba(9, 10, 16, .45);
  }

}

/* ── phone: one column ──
   Below 640px the columns are too narrow to read, so the board stacks: band cards full width in reading order (top row first, then left
   to right; grid.js sets style.order), bookmark tiles four to a row. Heights
   keep their row count. No resizing; cards move by touchMove() (grid.js). */
@media (max-width: 640px) {
  .content { padding: 12px; }
  .card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row dense;
    --grid-row-height: 104px !important;
    gap: 12px; padding: 0; min-height: 0;
    background-image: none;
  }
  .card-grid:not(.is-search) > :is(.card, .card-tile) { grid-row: auto / span var(--span-h) !important; }
  .card-grid > .card { grid-column: 1 / -1 !important; }
  .card-grid > .card-tile { grid-column: auto / span 1 !important; }
  .card-grid .card-resize-handle { display: none !important; }
  /* a hold lifts a card for touchMove() (grid.js), never an iOS drag, link
     preview or text magnifier; inputs in a header stay editable */
  .card-grid > :is(.card, .card-tile) { -webkit-user-drag: none; }
  .card-grid > .card-tile, .card-grid .card-head {
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  }
  .card-grid .card-head :is(input, textarea, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; }
  .card-grid > .is-lifted {
    z-index: 50 !important; pointer-events: none; scale: 1.03;   /* over the inline stored z */
    box-shadow: 0 14px 36px rgba(9, 10, 16, .35); transition: scale 120ms ease;
  }
  .card-grid > .swap-target { outline: 3px dashed var(--accent); outline-offset: 3px; }
  .grid-insert-line { position: fixed; z-index: 60; pointer-events: none; background: var(--accent); border-radius: 2px; }
}

/* ── touch: nothing may be hover-revealed ──
   On a pointer device these controls surface on hover and the resting card
   stays quiet — a deliberate v0.3 choice. A phone has no hover at all, so the
   same controls would be permanently invisible, including every card's delete
   and theme toggle and every table's row ✕. Here they are simply always on.
   (.rss-dot is deliberately NOT in this list: its hiding is state, not hover.) */
@media (hover: none), (any-pointer: coarse) {
  .card-action { display: inline-flex; }
  .card-head .card-badge {
    max-width: 14ch; opacity: 1;
    padding: 1px 6px; border-width: 1px; margin-right: 0;
  }
  .nav-more { display: inline-flex; }
  .col-del, .row-del, .row-add, .check-del, .check-add-btn, .cred-mini,
  .cred-kid-top .cred-unnest, .cred-kid-row .cred-mini {
    visibility: visible;
    opacity: 1;
  }
  /* hold a row for its menu or to drag it: no OS text callout or selection */
  .nav-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .term-keys { display: flex; }
}

/* Large boards expose totals and an explicit bounded-page action. */
.entry-paging { display:flex; align-items:center; gap:12px; padding:10px 16px; color:var(--text); }
.entry-paging[hidden] { display:none; }
.entry-paging button { border:1px solid var(--border); border-radius:var(--radius,4px); background:var(--surface-2); color:var(--text); padding:6px 10px; cursor:pointer; }