/* My builds: one row of folder tabs over the panel they open. The chosen tab joins the panel; the others stand behind its
   top edge. A row too long for its width scrolls sideways, and the tab cut off at its end shows there are more. Every
   value comes from the tokens. */

/* --tb-edge is the panel's border, which the chosen tab covers */
.tb-box { --tb-edge: 1px; display: grid; }
/* The row stands inside the panel's corners, on its straight top edge, and over that edge so the chosen tab can cover
   it. Its scroll bar stays hidden: the cut tab at the end is the sign */
.tb-list {
  display: flex;
  gap: var(--space-1);
  margin-inline: var(--space-6);
  margin-block-end: calc(-1 * var(--tb-edge));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tb-list::-webkit-scrollbar { display: none; }
.tb-list [role="tab"] {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  margin: 0;
  padding-block: var(--space-2);
  padding-inline: var(--space-5);
  border: var(--tb-edge) solid var(--line);
  border-block-end: 0;
  border-start-start-radius: var(--r-md);
  border-start-end-radius: var(--r-md);
  background: var(--sunk);
  color: var(--muted);
  font: inherit;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.tb-list [role="tab"]:hover { background: color-mix(in srgb, var(--surface) 55%, var(--sunk)); color: var(--text); }
/* The chosen tab stands over the panel's top edge, so the two read as one sheet */
.tb-list [role="tab"][aria-selected="true"] { z-index: 1; background: var(--surface); color: var(--text); }
.tb-list [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: calc(-1 * var(--space-0-5)); }
.tb-i {
  flex: none;
  inline-size: var(--space-4);
  block-size: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tb-panel {
  position: relative;
  display: grid;
  gap: var(--space-3);
  min-inline-size: 0;
  padding: var(--space-3);
  border: var(--tb-edge) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.tb-panel .bs-cap { max-inline-size: 64ch; padding-inline: var(--space-1); }
/* Inside the panel the views' corners follow its own: its radius less its padding */
.tb :is(.stage, .layer, .mf-stage, .sc) { border-radius: var(--r-sm); }

/* A phone: icon over name, four and a half tabs to the width, so the half one at the end shows the row goes on. A row
   with fewer tabs shares the width out */
@media (width < 640px) {
  .tb-list { gap: var(--space-0-5); margin-inline: var(--space-4); }
  .tb-list [role="tab"] {
    flex: 1 0 calc((100% - 4 * var(--space-0-5)) / 4.5);
    flex-direction: column;
    gap: var(--space-1);
    padding-inline: var(--space-1);
    border-start-start-radius: var(--r-sm);
    border-start-end-radius: var(--r-sm);
    font-size: var(--text-xs);
  }
  .tb-panel { padding: var(--space-2); border-radius: var(--r-md); }
}