/* ================================================================
   Responsive: narrow windows (owner 2026-10-05: "This app should look good on smaller screens too")
================================================================
   Wide (> 960px): the three columns, side panels 300px each (css/13-ctx-gami.css #app-wrapper).
   Compact (<= 960px): the middle column (Studio or feed) takes the whole width. The side columns become
   DRAWERS that slide in over it from their own edge: the left one is the Studio's #left-col or, in the feed,
   #feed-left-stack (Space caps + Mojo M); the right one is the Wordbank (#vocab-panel). Each opens from a small
   edge tab (.drawer-tab, icons only: user-facing text must be palindromes) and closes on a press outside it or
   Escape (js/06a-overlays-init.js layoutDrawer). The top and bottom corner boxes shrink to their content.
   The old rules here targeted a layout that no longer exists (#studio-body, #segment-bar...) and the
   "best on a desktop browser" screen hid the whole app below 768px in plain prose; both are gone. */

.drawer-tab { display: none; }

@media (max-width: 960px) {
  #app-wrapper { grid-template-columns: 0 minmax(0, 1fr) 0; }

  /* ── Drawers ── */
  #left-col,
  #vocab-panel,
  #feed-panel.active #feed-left-stack {
    position: fixed;
    top: 52px; bottom: 52px;
    width: min(300px, calc(100vw - 56px));
    height: auto; max-height: none;
    margin: 0;
    z-index: 400;
    transition: transform 0.22s cubic-bezier(.2,.7,.3,1), visibility 0s linear 0.22s;
    visibility: hidden;
  }
  #left-col, #feed-panel.active #feed-left-stack { left: 8px; transform: translateX(calc(-100% - 16px)); }
  #vocab-panel { right: 8px; left: auto; transform: translateX(calc(100% + 16px)); }
  #left-col { padding: 0; }
  #feed-panel.active #feed-left-stack > #feed-sidebar { width: auto; min-width: 0; }
  body.drawer-left #left-col,
  body.drawer-left #feed-panel.active #feed-left-stack,
  body.drawer-right #vocab-panel {
    transform: none; visibility: visible;
    transition: transform 0.22s cubic-bezier(.2,.7,.3,1), visibility 0s;
    box-shadow: 0 8px 40px rgba(0,0,0,0.28);
  }
  /* In the feed the Studio's left column is not used: never slide it in there. */
  body.feed-active #left-col { display: none; }

  /* ── Edge tabs ── */
  .drawer-tab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 50%; z-index: 401;
    width: 22px; height: 56px; margin-top: -28px; padding: 0;
    border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--dim);
    box-shadow: var(--glass-shadow); cursor: pointer;
    transition: color 0.12s, transform 0.22s cubic-bezier(.2,.7,.3,1);
  }
  .drawer-tab:hover { color: var(--txt); }
  .drawer-tab .ico { width: 14px; height: 14px; }
  #drawer-tab-left  { left: 0;  border-left: none;  border-radius: 0 10px 10px 0; }
  #drawer-tab-right { right: 0; border-right: none; border-radius: 10px 0 0 10px; }
  body.drawer-left  #drawer-tab-left,
  body.drawer-right #drawer-tab-right { color: var(--theme, var(--blue)); }
  /* An open drawer's tab rides on its outer edge (a handle to close it), never over the drawer's own content. */
  body.drawer-left  #drawer-tab-left  { transform: translateX(calc(min(300px, 100vw - 56px) + 8px)); }
  body.drawer-right #drawer-tab-right { transform: translateX(calc(-1 * (min(300px, 100vw - 56px) + 8px))); }

  /* ── The middle column starts below the top bar and ends above the bottom bar: on a wide window its top row
        (the Studio's workspace tabs, the feed's tabs) sits BETWEEN the corner boxes, which here would cover it. ── */
  #studio-panel, #feed-panel { padding-top: 52px; padding-bottom: 50px; }

  /* ── The bottom bars of the middle column: the five storage slots, the main button and the Nibs Bin each get their
        own place instead of being pinned over one another (the slots covered "+ Add a..." / "Stir writs"). The
        hover-only definition boxes beside the Studio button have no room here. ── */
  #segments-list-footer > .seg-slots { position: static; transform: none; grid-column: 1; justify-self: start; }
  #segments-list-footer > #tb-trash  { position: static; transform: none; grid-column: 3; justify-self: end; }
  #segments-list-footer > .tb-post-sop-style { grid-column: 2; grid-row: 1; }
  #segments-list-footer > .word-def-box { display: none; }
  #segments-list-footer { padding: 8px 10px; gap: 8px; }
  #feed-float-post-wrap { justify-content: space-between; gap: 8px; padding: 8px 10px; }
  #feed-float-post-wrap > .seg-slots { position: static; transform: none; }

  /* ── Top and bottom corner boxes: content-sized ── */
  #header-left, #header-right, .tb-left, .tb-right { width: auto; max-width: calc(50vw - 8px); }
  /* The bottom bar's three boxes flow side by side instead of being pinned on top of one another (the identity box
     covered the centre bar's drop slots); the centre one gives way and scrolls sideways if it must. */
  #bottom-toolbar { justify-content: space-between; gap: 6px; }
  #bottom-toolbar > .tb-left, #bottom-toolbar > .tb-center, #bottom-toolbar > .tb-right { position: relative; left: auto; right: auto; transform: none; }
  #bottom-toolbar > .tb-center { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 0 10px; }
  #bottom-toolbar > .tb-left, #bottom-toolbar > .tb-right { flex: 0 0 auto; }
  #header-left { padding: 0 8px; }
  #header-right { padding: 0 10px; }
  .tb-left, .tb-right { padding: 0 10px; }
  /* "Set sate tastes": its icon alone (the label has no room; no non-palindrome stand-in either). */
  #btn-prefs-header .vba-seg { font-size: 0; gap: 0; }
  #btn-prefs-header .vba-seg .ico { width: 15px; height: 15px; margin: 0; }
}

/* Phones: the name/@handle beside the avatar in the bottom-left box and the "- View" part of the switch go; the
   avatar and the icons stay. */
@media (max-width: 520px) {
  /* Only once signed in (the @handle is filled): signed out, "Go Log" stays as the way in (Opus review). */
  #auth-identity:has(#auth-handle-label:not(:empty)) :is(#auth-btn-label, #auth-handle-label),
  #btn-feed-header .fst-view { display: none; }
  .seg-slots { gap: 3px; }
  .seg-slot { width: 24px; height: 24px; border-radius: 7px; }
  .seg-slot .seg-slot-ico { width: 16px; height: 16px; }
  #tb-trash { padding: 4px 7px; font-size: 0; gap: 0; }   /* the bin icon alone */
  /* A post's date + #number: no room to reserve beside the name, so it takes its own line under it. */
  :is(#feed-scroll,#pp-posts-list) .fp-date { position: static; display: block; text-align: left; margin: 1px 0 2px; }
  :is(#feed-scroll,#pp-posts-list) .fp-card-content:has(> .fp-date) > .fp-display-name,
  :is(#feed-scroll,#pp-posts-list) .fp-reply-item .fp-display-name { padding-right: 0; }
}

::-webkit-scrollbar-track { background: rgba(220, 217, 213, 0.30); }
::-webkit-scrollbar-thumb { background: rgba(160, 155, 148, 0.55); border-radius: 2px; }