/* ============================================================ APPENDED: the phone top-bar overflow

   `bar-phone.js` builds the overflow sheet; these rules make it phone-only and give its rows the
   same touch targets as the workflow sheet it reuses. The DESKTOP bar is not touched by any of it:
   `.bar-more` and `.bar-sheet-wrap` are hidden by the base rules below and switched on only inside
   the phone media query.

   MEASURED before this: at 390x844 `.bar-tools` ran 131 -> 495 with a 390px viewport — Directory,
   Notifications and the theme toggle fitted, and Permissions sat entirely off-screen at 391 -> 495.
   `.bar-meta` has `overflow:hidden`, so the bar CLIPPED rather than the page scrolling, which is why
   this never showed up as an overflow in an audit. */
.bar-more { display: none; }
.bar-sheet-wrap { display: none; }

/* A row in the overflow sheet: the console's own `.wf-sheet-btn` look, wrapping the REAL control so
   its own handler fires. `pointer-events:none` on the wrapper keeps the child the target of the
   click — without it the wrapper is hit-tested first and the row looks dead. */
.bar-sheet-row { pointer-events: none; }
.bar-sheet-row > * { pointer-events: auto; }

@media (max-width: 720px), (max-width: 900px) and (max-height: 500px) {
  /* THE PHONE BAR IS THE MARK AND THE COUNT, AND ONE "MORE" BUTTON. Everything else lives behind
     that button, so a control added later makes the sheet longer rather than the bar wider. */
  .bar-more {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 44px; height: 44px; padding: 0;
    background: var(--raised); color: var(--ink);
    border: 1px solid var(--line-2); border-radius: var(--r-md);
    cursor: pointer;
  }
  .bar-more:active { background: var(--hover); }
  .bar-more[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

  .bar-sheet-wrap { display: block; position: fixed; inset: 0; z-index: 40; }
  .bar-sheet-wrap[hidden] { display: none; }

  /* The mark must not push the "More" button off: it is the part allowed to shrink, and its name
     already ellipsises. `min-width: 0` is what lets a flex child actually shrink — without it the
     text's own width is a floor and the button is pushed out, which is the defect in the first
     place, one level in. */
  .bar .mark { flex: 1 1 auto; min-width: 0; }
  .bar .mark-text { min-width: 0; overflow: hidden; }
  .bar-meta { flex: none; gap: var(--s2); }

  /* A sheet row is a touch target, not a toolbar: full width, tall enough to hit. */
  .bar-sheet-row {
    display: flex; align-items: center; width: 100%;
    min-height: 54px; padding: 0 var(--s2);
  }
  .bar-sheet-row .btn {
    flex: 1 1 auto; justify-content: flex-start;
    font-size: 16px; font-weight: 600; min-height: 46px; text-align: left;
  }
  /* An icon-only control (the theme toggle) has no text of its own, so in a list of labelled rows it
     read as a stray 46x46 square with nothing to explain it. MEASURED in the render. It is given its
     own accessible name as its label — `attr(aria-label)` — which the control already carries and
     which changes with its state ("System theme" / "Light theme" / "Dark theme"), so the row says
     what the button does without this file knowing anything about theming. */
  .bar-sheet-row .btn.icon { flex: 1 1 auto; width: auto; height: auto; min-height: 46px;
                             padding: 0 12px; text-align: left; }
  /* THE LABEL WRAPS RATHER THAN BEING CLIPPED. MEASURED in the render: "System theme — click for
     light theme" ran off the right edge at 390px. Truncating it with an ellipsis would hide which
     state the control is in, which is the one thing the row exists to say; wrapping keeps the whole
     sentence and lets the row grow. */
  .bar-sheet-row .btn.icon::after {
    content: attr(aria-label);
    margin-left: 10px; font-size: 16px; font-weight: 600;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.25;
  }
}