/* Public adaptation of the current suite controls: native fields and sliding views. */
:root { --public-control-radius: 6px; --public-control-target: 44px; }
body select:not([multiple]):is(:not([size]), [size='0'], [size='1']) {
  --public-resolved-accent: var(--public-control-accent, var(--bk-accent, var(--accent, #fe79cb)));
  box-sizing: border-box;
  appearance: auto !important;
  min-height: var(--public-control-target) !important;
  height: auto !important;
  max-width: 100%;
  min-width: 0;
  padding: 10px 12px !important;
  border: 1px solid var(--public-control-line, #708693) !important;
  border-radius: var(--public-control-radius) !important;
  color: var(--public-control-ink, #f6f5f1) !important;
  background-color: var(--public-control-surface, #142d3b) !important;
  background-image: none !important;
  box-shadow: none !important;
  font: 400 var(--public-control-type, 1rem)/1.35 'Source Sans 3', system-ui, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color-scheme: var(--public-control-colour-scheme, dark);
  transform: none !important;
}
body :is(input:not([type]), input[type='text'], input[type='search'], input[type='email'], input[type='tel'], input[type='url'], input[type='password'], input[type='number'], textarea) {
  --public-resolved-accent: var(--public-control-accent, var(--bk-accent, var(--accent, #fe79cb)));
  box-sizing: border-box;
  min-height: var(--public-control-target);
  max-width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--public-control-line, #708693);
  border-radius: var(--public-control-radius);
  color: var(--public-control-ink, #f6f5f1);
  background-color: var(--public-control-surface, #142d3b);
  box-shadow: none;
  font: 400 var(--public-control-type, 1rem)/1.35 'Source Sans 3', system-ui, sans-serif;
  color-scheme: var(--public-control-colour-scheme, dark);
}
body textarea { resize: vertical; }
body select option, body select optgroup { color: var(--public-control-ink, #f6f5f1); background-color: var(--public-control-surface, #142d3b); }
body select option:disabled { color: var(--public-control-disabled-ink, #aebcc5); }
body :is(select, input, textarea):focus-visible {
  outline: 3px solid var(--public-control-focus, var(--public-resolved-accent, var(--accent, #fe79cb))) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
body :is(select, input, textarea):focus:not(:focus-visible) { outline: none !important; }
body :is(select, input, textarea):is([aria-invalid='true'], :user-invalid) { border-color: var(--public-control-invalid, #f49c95) !important; }
body :is(select, input, textarea):disabled { color: var(--public-control-disabled-ink, #aebcc5) !important; opacity: 1; cursor: not-allowed; }
body [data-public-pills] {
  --public-resolved-accent: var(--public-control-accent, var(--bk-accent, var(--accent, #fe79cb)));
  --public-pill-count: 2;
  --public-pill-index: 0;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(var(--public-pill-count), minmax(0, 1fr));
  gap: 3px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--public-control-line, #627b8a);
  border-radius: 999px;
  background: var(--public-control-surface, #0b1e2a);
  box-shadow: 0 3px 12px #0002;
}
body [data-public-pills][data-public-pill-count='3'] { --public-pill-count: 3; }
body [data-public-pills][data-public-pill-index='1'] { --public-pill-index: 1; }
body [data-public-pills][data-public-pill-index='2'] { --public-pill-index: 2; }
body [data-public-pills]::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 3px auto 3px 3px;
  width: calc((100% - 6px - (var(--public-pill-count) - 1) * 3px) / var(--public-pill-count));
  border-radius: 999px;
  background: var(--public-resolved-accent);
  box-shadow: 0 2px 8px #0003;
  transform: translateX(calc(var(--public-pill-index) * (100% + 3px)));
  opacity: 0;
  transition: transform 220ms cubic-bezier(.22, .8, .24, 1), background-color 160ms ease;
  pointer-events: none;
}
body [data-public-pills].is-public-pills-ready::before { opacity: 1; }
body [data-public-pills] > [data-public-pill] {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent !important;
  color: var(--public-control-ink, #d7e1e7);
  box-shadow: none;
  font: 600 .92rem/1.25 'Source Sans 3', system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform: none;
  transition: color 160ms ease, background-color 160ms ease;
}
body [data-public-pills] > [data-public-pill]:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])) { color: var(--public-control-on-accent, #13202a); }
body [data-public-pills] > [data-public-pill]:hover { background: color-mix(in srgb, var(--public-resolved-accent) 14%, transparent) !important; color: var(--public-control-ink, #f6f5f1); }
body [data-public-pills] > [data-public-pill]:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])):hover { color: var(--public-control-on-accent, #13202a); }
body [data-public-pills] > [data-public-pill]:focus-visible { outline: 2px solid var(--public-control-focus, var(--public-resolved-accent)); outline-offset: -3px; }
body [data-public-pills] > [data-public-pill]:is([aria-selected='true'], [aria-pressed='true']):focus-visible { outline-color: var(--public-control-on-accent, #13202a); }
@media (any-pointer: coarse) {
  body select:not([multiple]):is(:not([size]), [size='0'], [size='1']) { min-height: 48px !important; }
  body :is(input:not([type]), input[type='text'], input[type='search'], input[type='email'], input[type='tel'], input[type='url'], input[type='password'], input[type='number'], textarea), body [data-public-pills] > [data-public-pill] { min-height: 48px; }
}
@media (max-width: 480px) {
  body [data-public-pills] > [data-public-pill] { padding-inline: 10px; font-size: .88rem; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  body [data-public-pills]::before, body [data-public-pills] > [data-public-pill] { transition: none; }
}
@media (forced-colors: active) {
  body select:not([multiple]):is(:not([size]), [size='0'], [size='1']), body :is(input:not([type]), input[type='text'], input[type='search'], input[type='email'], input[type='tel'], input[type='url'], input[type='password'], input[type='number'], textarea) { border-color: ButtonText !important; color: ButtonText !important; background: ButtonFace !important; forced-color-adjust: auto; }
  body :is(select, input, textarea):focus-visible { outline-color: Highlight !important; }
  body [data-public-pills] { border-color: ButtonText; background: ButtonFace; }
  body [data-public-pills]::before { background: Highlight; forced-color-adjust: none; }
  body [data-public-pills] > [data-public-pill] { color: ButtonText; }
  body [data-public-pills] > [data-public-pill]:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])) { color: HighlightText; text-decoration: underline; }
  body [data-public-pills] > [data-public-pill]:focus-visible { outline-color: Highlight; }
}
