/* The phone tab bar's overflow — module 31.
 *
 * `beach.css` draws the bar itself (`C · Tabs`) and is at the 500-line limit, so
 * this is a seventh file rather than thirty more lines in it — the split module
 * 26 made with `tasks.css` and module 29 made with `handled.css`, for the same
 * reason and with the same consequence: `tests/app/test_layouts.py` discovers
 * every stylesheet in this directory, so a file that is not linked from the
 * shell, from the offline page and from the service worker fails there rather
 * than on his phone.
 *
 * Everything here is `beach.css`'s tokens and `.tab`'s own drawing. There is no
 * colour in this file that is not a palette variable, and no new one.
 *
 * Phone only: at 900px `beach.css` hides `.tabs` outright and the sidebar shows
 * all eight sections, which is why this control does not exist on a desk. */

/* The last tab. A `<details>`, so opening it is the browser's job and not a
 * script's — the same choice the draft screen's edit and reject panels make. */
.tab-more { position: relative; display: grid; }
.tab-more > summary { list-style: none; cursor: pointer; }
.tab-more > summary::-webkit-details-marker { display: none; }
.tab-more[open] > summary { background: var(--accent-soft); color: var(--accent); }

/* The sheet opens upward, over the page rather than pushing the bar off the
 * bottom of it, and is anchored to the end of the bar the control sits at. It
 * carries the bar's own lift, because it is the same floating chrome. */
.tab-sheet {
  position: absolute;
  right: -5px;
  bottom: calc(100% + 12px);
  z-index: 21;
  display: grid;
  gap: 2px;
  min-width: 172px;
  padding: 6px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--lift);
}

/* A row in the sheet is the sidebar's link at a thumb's size: 44px tall, label
 * beside the glyph rather than under it, since there is width here and there is
 * none in the bar. */
.tab-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--t-sub);
  font-weight: 500;
}
.tab-link .ic { color: var(--muted); }
.tab-link.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tab-link.is-on .ic { color: var(--accent); }