/* GENERATED from design/scopeToggle/scopeToggle.css by design/syncDesign.mjs --write. Do not edit here: edit design/ and run --write. */
/* THE SEGMENTED TOGGLE (design/scopeToggle/; rules in design/cardsAndInfographics.md, "Box 1 corner control", code 3). One track, one sliding wash, one button for each option. It began as Wad's
   Liquid Cash scope control (ported from the reference Flutter dashboard's "View / Mark" toggle, recoloured onto the tokens) and became the shared unit when Muscle's Calories card needed it
  : written here once, copied into each app by design/syncDesign.mjs --write, never edited in an app.
   The track is the bar's own height (`--bar-height`, 21px) with a 14px corner, because at the bar's height a full capsule reads visibly shorter than the bar. The options are sized to their own WORDS, not
   equal parts (equal thirds of "Untagged" would make the control too wide to sit beside a title on an iPhone SE), so the wash's offset and width follow the pressed option's measured box: scopeToggle.mjs
   sets them. `--surface-2` is the track and an ink-tinted wash the indicator: a subtle highlight that inverts correctly in both themes. Type is Inter (Kanit is for hero numbers only). */
.seg-toggle{
  position:relative; display:flex; width:auto; height:var(--bar-height);
  background:var(--surface-2); border-radius:14px; padding:3px;
  border:none; cursor:default; flex-shrink:0;
}
.seg-indicator{
  position:absolute; top:3px; left:3px;
  width:calc(50% - 3px); height:calc(100% - 6px);
  background:rgba(var(--ink-rgb),0.08); border-radius:11px;
  transition:transform .1s ease-in-out, width .1s ease-in-out;
}
.seg-opt{
  position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:0 6px;
  background:none; border:0; margin:0; font-family:inherit; cursor:pointer;
  font-size:10px; font-weight:400; color:var(--muted);
  transition:color .1s ease-in-out;
}
.seg-opt[aria-pressed="true"]{ color:var(--ink); }