/* ===== Bottom sheet (phone) =====
   #3968: the shared phone bottom sheet; values from the #3928 Call Log sheet
   (calls-toolbox-sheet.css .ctb-sheet). First user: the user/account menu
   (shared-admin-nav.js), on every page that has it.

   Its own small file, linked with a plain <link> by every page that renders
   the menu (never a CSS import rule: assetVersions content-hashes only HTML
   link tags).
   Tokens only: pages without design-system.css link design-tokens.css BEFORE
   their own stylesheet, so their same-named variables still win.

   Stacking: scrim 9400 / sheet 9401 sit over the bottom tab bar
   (#mobile-panel-tabs, 9000); the feedback bubble and the toast-history
   button (10001+) still float above, so the sheet keeps
   --floating-widget-clearance (feedback-widget.js; 78px fallback) under its
   last row, the invoice modal footer's rule (#3603). 3.5rem was measured
   short: the 50px bubble at bottom 20px reaches 70px up, over the last row. */
.ds-sheet-scrim {
  position: fixed; inset: 0; z-index: 9400; background: rgba(0, 0, 0, 0.45);
}
.ds-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9401;
  background: var(--bg-card); color: var(--text);
  border-radius: 14px 14px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
  padding: 0.4rem 1rem 0;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--chrome-ios-measured-offset-bottom, 0px) + var(--floating-widget-clearance, 78px));
  max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain;
  box-sizing: border-box; font-family: inherit; text-align: left;
}
.ds-sheet:focus { outline: none; }
.ds-sheet-grab {
  width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong);
  margin: 0.2rem auto 0.5rem;
}
.ds-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem;
}
.ds-sheet-title {
  margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--text-muted);
  min-width: 0; overflow-wrap: anywhere;
}
.ds-sheet-close {
  flex: 0 0 auto; width: 44px; height: 44px; border: 0; background: none; padding: 0;
  color: var(--text-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 50%;
}
.ds-sheet-close:hover { background: var(--bg-hover); color: var(--text); }
.ds-sheet-list { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
/* ~ not +: the moved divider (hidden) sits between two lists */
.ds-sheet-list ~ .ds-sheet-list { margin-top: 0.75rem; }
.ds-sheet-item {
  display: flex; align-items: center; gap: 0.75rem; min-height: 44px; box-sizing: border-box;
  padding: 0.7rem 0.8rem; font-size: 0.95rem; background: var(--bg-card); color: var(--text);
  cursor: pointer; border-radius: 0; text-decoration: none;
}
.ds-sheet-item + .ds-sheet-item { border-top: 1px solid var(--border); }
/* #3990: a row can be a <button> (the storage spot sheet): fill the list, no native border, left-aligned, the page's font family.
   font-family/line-height, not the font shorthand, so the item's own font-size stays. */
button.ds-sheet-item { width: 100%; border: 0; text-align: left; font-family: inherit; line-height: inherit; }
.ds-sheet-item:hover { background: var(--bg-hover); }
.ds-sheet-item.ds-sheet-item-danger { color: var(--error-text); }
html.ds-sheet-open, html.ds-sheet-open body { overflow: hidden; }