/* The switch: one control for choosing one of a few things, wherever the app has one.

   The board's Tasks/Tickets, the two main tabs, the ticket filter, the dashboard's period
   and report and severity choices, and the one-or-two-columns pair are all this, and nothing else draws a control
   like it. It is a row of buttons with no box around it: the pressed (or selected) button is a white pill with a gold
   edge -- not a gold fill, which is kept for the one thing to press on a screen. A control that only chooses a view
   or a period does not get a filled tray: a filled box behind a control reads as the heaviest thing on the row, and
   the choice is not (DESIGN.md, "The switch").

   The design gate (tests/design-scale.json, "switch") holds every switch to what is written here: the same fill,
   tray, height, radius and type. Change this file and that one together, or the gate will say which switch is not it.

   Two stylesheets load this, board and dashboard, and the tokens it uses are the ones both declare (:root in
   styles.css and ops.css). A page that needs a switch to be a different width or to sit somewhere else says so with
   its own class; it does not restyle the switch. */

.switch {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  max-inline-size: 100%;
  border-radius: var(--r-lg);
  background: transparent;
  /* No fill and no edge. The row is 44px, the height of every other control beside it, and each button fills all of
     it, so the target a finger finds is the whole 44px. */
}

/* One size, wherever a switch is: the segments are equal, each as wide as the longest label in its own switch plus
   the button's padding (the grid above does that: equal columns, sized by the widest content), and the switch is exactly
   as wide as its segments. On a phone it runs the width of the screen, where the thumb reaches it; on a desk it sits at
   the start of its row rather than stretching across a grid or a column.
   A segment's width comes from its label alone: a count on a segment is drawn over it (.switch__count), so the
   same Tasks/Tickets pair is the same size on the board, where it has a count, and on the dashboard, where it has none.
   Nothing that uses a switch sets its width; the design gate (R6) fails a switch that is not this wide. */
@media (max-width: 639px) {
  .switch { display: grid; inline-size: 100%; }
}
@media (min-width: 640px) {
  .switch { inline-size: max-content; justify-self: start; }
}

.switch__btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: var(--control-h);
  padding-inline: 1rem;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--sage-mute);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}

/* The chosen one is a white pill set into the tray, 4px in from its edges: it reads about 36px tall, and the button
   around it, which is what a finger presses, is the full 44. */
.switch__btn::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: var(--r-md);
  background: transparent;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

/* A count beside a label: at the segment's end, out of the flow, so it never widens the segment. */
.switch__count {
  position: absolute;
  inset-block-start: 0.25rem;
  inset-inline-end: 0.5rem;
  /* K-10: the same pill as the count on the main tabs (.tab-count), not a second way of showing a number. */
  padding: 0.125rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold-300);
  background: var(--gold-900);
  border-radius: var(--r-pill);
}

@media (hover: hover) and (pointer: fine) {
  .switch__btn:hover { color: var(--ink); }
}

.switch__btn[aria-pressed="true"],
.switch__btn[aria-selected="true"] {
  color: var(--ink-strong);
}

.switch__btn[aria-pressed="true"]::before,
.switch__btn[aria-selected="true"]::before {
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--gold-edge);
}

.switch__btn:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: -2px;
}