/* =========================================================
   Zeal Portal — Segmented toggle
   The canonical segmented control behind service filters,
   week / fortnight / month, calendar / list, pipeline / list.

   A hairline-bordered container (--r-soft) holding <button>
   segments (--r-1). The selected segment is an ink flood with
   paper text — a single contrast step, the same "black means
   selected" meaning used by tiles and filter chips.

   Markup:
     <div class="seg" role="group">
       <button class="is-on">all</button>
       <button>production</button>
       <button>design</button>
     </div>
   ========================================================= */

.seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--rule-3);
  border-radius: var(--r-soft);
  background: var(--paper);
}

.seg button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  border-radius: var(--r-1);
  padding: 5px 12px;
  font-family: var(--font-cd);
  font-size: var(--t-form);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-body);
  text-transform: lowercase;
  line-height: 1.4;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-std),
    color var(--dur-fast) var(--ease-std);
}
.seg button:hover { background: var(--warm); }

.seg button.is-on {
  background: var(--ink);
  color: var(--paper);
}
.seg button.is-on:hover { background: var(--ink); }

.seg button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}