/* Component appearance lives here; page styles only set layout or variants. */
.button {
  --button-bg: var(--surface);
  --button-hover: var(--raised);
  --button-border: var(--edge);
  --button-hover-border: var(--button-border);
  --button-text: var(--text);
  min-height: var(--button-height, var(--control-height));
  padding: var(--button-padding, 12px 22px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--button-border);
  border-radius: var(--button-radius, var(--control-radius));
  background: var(--button-bg);
  color: var(--button-text);
  font-size: var(--button-font-size, 15px);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}
.button:where(:not(:disabled):not([aria-disabled=true])):hover {
  background: var(--button-hover);
  border-color: var(--button-hover-border);
  text-decoration: none;
  box-shadow: none;
}
.button.primary {
  --button-bg: var(--accent);
  --button-hover: var(--accent-hover);
  --button-border: var(--accent);
  --button-hover-border: var(--accent-hover);
  --button-text: var(--accent-text);
}
.button.compact {
  --button-height: var(--control-height-compact);
  --button-padding: 10px 16px;
  --button-font-size: 14px;
  --button-bg: var(--page);
  width: auto;
  white-space: nowrap;
  flex: none;
}
.button:disabled, .button[aria-disabled=true] {
  background: var(--button-disabled-bg, var(--raised));
  border-color: var(--button-disabled-border, var(--edge));
  color: var(--button-disabled-text, var(--muted));
  cursor: not-allowed;
  box-shadow: none;
}
.button > svg {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: none;
}
.icon-button {
  width: var(--control-height-compact);
  height: var(--control-height-compact);
  display: inline-grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--icon-color, var(--text));
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}
.icon-button:where(:not(:disabled):not([aria-disabled=true])):hover {
  background: var(--icon-hover, var(--raised));
  color: var(--icon-hover-color, var(--icon-color, var(--text)));
  text-decoration: none;
}
.icon-button > svg { width: var(--icon-size); height: var(--icon-size); }
.icon-button:disabled, .icon-button[aria-disabled=true] {
  color: var(--muted);
  cursor: not-allowed;
}
:is(button,input).button[data-xdesk-submit-disabled] {
  opacity: 1;
  color: var(--text);
  width: var(--pending-width);
  max-width: 100%;
  padding-inline: 8px;
  gap: 6px;
  white-space: nowrap;
  cursor: wait;
}
/* Keep primary actions blue, with their theme foreground, while submitting. */
:is(button,input).button.primary[data-xdesk-submit-disabled] {
  background: var(--button-bg);
  border-color: var(--button-border);
  color: var(--button-text);
}
.button-spinner {
  width: 16px;
  height: 16px;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spin 800ms linear infinite;
}
@keyframes button-spin { to { transform: rotate(360deg); } }

/* Text entry keeps its border, padding and content width when focused. */
:is(.auth-card, .account-form, .password-prompt) input:not([type=hidden], [type=checkbox], [type=radio], [type=submit]) {
  width: 100%;
  min-width: 0;
  height: var(--control-height);
  padding: 0 16px;
  border: 1px solid var(--edge);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  line-height: 24px;
  outline: none;
  box-shadow: none;
  transition: border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}
:is(.auth-card, .account-form, .password-prompt) input:not([type=hidden], [type=checkbox], [type=radio], [type=submit]):focus {
  border-color: var(--focus);
  box-shadow: inset 0 0 0 1px var(--focus);
  outline: none;
}
:is(.auth-card, .account-form) input:disabled { color: var(--muted); cursor: not-allowed; }
:is(.auth-card, .account-form, .password-prompt) .password-field input { padding-inline-end: 54px; }
.password-field .icon-button {
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  transform: translateY(-50%);
  --icon-color: var(--muted);
}
/* The hint belongs to its field, including when a password eye wraps the input. */
:is(.auth-card, .account-form) .field-hint {
  margin: 6px 0 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  overflow-wrap: anywhere;
}
:is(.auth-card form, .account-form) input:has(+ .field-hint),
:is(.auth-card, .account-form) .password-field:has(+ .field-hint) {
  margin-bottom: 0;
}
/* Shared inline error presentation; the error is also described in words. */
:is(.auth-card, .account-form) .field-error {
  margin: 6px 0 22px;
  color: var(--error);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
:is(.auth-card form, .account-form) input:has(+ .field-error:not([hidden])),
:is(.auth-card, .account-form) .password-field:has(+ .field-error:not([hidden])),
:is(.auth-card, .account-form) .field-hint:has(+ .field-error:not([hidden])) { margin-bottom: 0; }
:is(.auth-card, .account-form) input[aria-invalid=true] { border-color: var(--error); }
:is(.auth-card, .account-form) input[aria-invalid=true]:focus {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}
/* Equal-width exclusive choices; native radios keep keyboard semantics. */
:is(.segmented-control, .theme-options) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  margin: 0;
  min-width: 0;
  border: 1px solid var(--edge);
  border-radius: var(--control-radius);
  background: var(--page);
}
:is(.segmented-control, .theme-options) label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height-compact);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
:is(.segmented-control, .theme-options) input { position: absolute; opacity: 0; width: 1px; height: 1px; }
:is(.segmented-control, .theme-options) label:hover { background: var(--raised); }
:is(.segmented-control, .theme-options) label:has(input:checked) { background: var(--accent); color: var(--accent-text); }
:is(.segmented-control, .theme-options) label:has(input:checked):hover { background: var(--accent-hover); }
:is(.segmented-control, .theme-options) label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .button-spinner { animation: none; }
  :is(.segmented-control, .theme-options) label { transition: none; }
  .button, .icon-button, :is(.auth-card, .account-form) input { transition: none; }
}

/* Standalone text actions share a touch target; prose links keep inline flow. */
button.text-link{border:0;background:transparent;padding:0;cursor:pointer}
button.copy-link{min-width:80px;justify-content:center}
.copy-status:not(.visually-hidden){flex-basis:100%;font-size:13px;line-height:1.6;color:var(--muted)}
:is(.text-link, .back-link, .release-link, .help-permalink, .field-heading a) {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-compact);
  gap: 6px;
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.5;
  text-decoration: none;
  text-underline-offset: 4px;
}
:is(.back-link, .help-permalink, .field-heading a) { color: var(--muted); }
:is(.text-link, .back-link, .release-link, .help-permalink, .field-heading a):hover {
  text-decoration: underline;
}
:is(.text-link, .back-link, .release-link, .help-permalink, .field-heading a):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
:is(.text-link, .back-link, .release-link, .help-permalink, .field-heading a) > svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Search matches preserve readable foreground colors in both themes. */
mark.search-match {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: inherit;
  border-radius: 3px;
  font-weight: 700;
}

/* In-page navigation is shared by product and information pages. */
:is(.section-nav, .plans-jump) {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  padding: 5px;
  border: 1px solid var(--edge);
  border-radius: 100px;
  background: var(--surface);
}
:is(.section-nav, .plans-jump) a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-height-compact);
  padding: 8px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 550;
}
:is(.section-nav, .plans-jump) a:hover { background: var(--raised); }
:is(.section-nav, .plans-jump) a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
:is(.section-nav, .plans-jump) svg { width: 20px; height: 20px; }
@media (max-width: 600px) {
  :is(.section-nav, .plans-jump) a { padding: 8px 17px; }
}

/* Status and plan labels stay readable at every breakpoint. */
:is(.plan-badge, .status-badge, .offer-tag, .detail-status, .planned-value, .billing-saving) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--badge-border, var(--edge));
  border-radius: 7px;
  background: var(--badge-bg, var(--page));
  color: var(--badge-text, var(--muted));
  font-size: 12px;
  font-weight: 550;
  line-height: 18px;
  vertical-align: middle;
  white-space: nowrap;
}