/* Shared controls for Today and every module in its shell. Keep the existing class
   names as aliases so cards and framework builders use one set of states and sizes. */
:root {
  --control-height: 44px;
  --control-radius: 999px;
  --control-padding: 18px;
  --control-font-size: 15px;
  --control-press-scale: var(--ifl-press-scale, 0.97);
}
:is(.pill, .ifl-btn) {
  --control-fill: var(--tint-deep);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--control-height); min-width: 0; max-width: 100%; padding: 10px var(--control-padding); border-radius: var(--control-radius);
  font-size: var(--control-font-size); font-weight: 600; color: var(--text); background: var(--glass-ctl);
  box-shadow: var(--ifl-shadow-control, 0 1px 4px rgba(0, 0, 0, 0.08));
  text-align: center; line-height: 1.3; white-space: normal; overflow-wrap: anywhere;
  text-decoration: none; cursor: pointer; transition: transform var(--motion-release, 0.38s) var(--motion-spring, var(--ease-out)), background-color 0.18s;
}
.ifl-btn { --control-fill: var(--acc-fill); }
:is(.pill, .ifl-btn).primary {
  color: var(--ifl-on-accent, #10150d); background: var(--ifl-accent-gradient, linear-gradient(110deg, #24c872, #b8eb2b));
  box-shadow: var(--ifl-shadow-control, 0 1px 4px rgba(0, 0, 0, 0.08));
}
:is(.pill, .ifl-btn).destructive { color: var(--danger); }
:is(.pill, .ifl-btn):active:not(:disabled):not([aria-disabled="true"]) { transform: scale(var(--control-press-scale)); transition-duration: var(--motion-press, 0.1s); }
:is(.pill, .ifl-btn):is(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: default; }
:is(.pill, .ifl-btn)[aria-busy="true"] { cursor: progress; }
:is(.pill, .ifl-btn):focus-visible { outline: 2px solid var(--acc-ink, var(--tint-text)); outline-offset: 3px; }
.pill svg { flex: none; width: 17px; height: 17px; }
.ifl-btn .ifl-glyph svg { width: 18px; height: 18px; }
.ifl-btn.small { min-height: 36px; padding: 0 14px; }
.ifl-btn.small::after { content: ""; position: absolute; inset: -4px 0; }

.switch { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 51px; height: 31px; margin: 0;
  border: 0; border-radius: 999px; cursor: pointer; background: var(--switch-off); box-shadow: inset 0 0 0 0.5px var(--line);
  transition: background-color 0.3s; }
.switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: var(--knob); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  transition: transform var(--motion-release, 0.38s) var(--motion-spring, var(--ease-spring)); }
.switch:checked { background: var(--ifl-accent-fill, var(--good)); }
.switch:checked::before { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--acc-ink, var(--tint-text)); outline-offset: 3px; }
.switch:disabled { opacity: 0.45; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  :is(.pill, .ifl-btn), .switch, .switch::before { transition: none; }
  :is(.pill, .ifl-btn):active { transform: none !important; }
}
@media (forced-colors: active) {
  :is(.pill, .ifl-btn), .switch { border: 1px solid ButtonText; }
  :is(.pill, .ifl-btn).primary { background: Highlight; color: HighlightText; }
  .switch:checked { background: Highlight; }
  .switch::before { background: ButtonText; }
  .switch:checked::before { background: HighlightText; }
}