/* Shared right-side drawer contract for account and platform settings. */

body:is(.set-page, .prof-page, .sec-page, .team-page, .bill-page, .ntf-page, .api-page, .int-page, .inc-page) {
  --settings-drawer-inset: var(--spacing-lg, 16px);
  --settings-drawer-width: 480px;
  --settings-drawer-radius: var(--dialog-radius, 24px);
  --settings-drawer-surface: var(--dialog-surface, var(--dash-card, #111216));
  --settings-drawer-control: var(--dash-surface-hover, rgba(255, 255, 255, 0.055));
  --settings-drawer-field: color-mix(in srgb, var(--color-text-primary, #fff) 7%, var(--settings-drawer-surface));
  --settings-drawer-field-hover: color-mix(in srgb, var(--color-text-primary, #fff) 10%, var(--settings-drawer-surface));
}

/* Native task drawers inherit all geometry, surface layout and motion from
   components/dialog.css. Settings only customize their form controls. */

body:is(.set-page, .prof-page, .sec-page, .team-page, .bill-page, .api-page, .int-page, .inc-page)
  dialog.nv-dialog :is(.nv-dialog__close, button) {
  border: 0;
}

body:is(.set-page, .prof-page, .sec-page, .team-page, .bill-page, .api-page, .int-page, .inc-page)
  dialog.nv-dialog :is(
    input:not([type='checkbox']):not([type='radio']):not([type='file']),
    select,
    textarea,
    .nv-select__trigger
  ) {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background-color: var(--settings-drawer-field);
  box-shadow: none;
  transition-property: background-color;
  transition-duration: 120ms;
  transition-timing-function: ease-out;
}

body:is(.set-page, .prof-page, .sec-page, .team-page, .bill-page, .api-page, .int-page, .inc-page)
  dialog.nv-dialog :is(
    input:not([type='checkbox']):not([type='radio']):not([type='file']),
    select,
    textarea,
    .nv-select__trigger
  ):hover {
  background-color: var(--settings-drawer-field-hover);
}

body:is(.set-page, .prof-page, .sec-page, .team-page, .bill-page, .api-page, .int-page, .inc-page)
  dialog.nv-dialog :is(.nv-button--secondary, .set-btn--ghost, .prof-btn--ghost, .sec-btn--secondary, .team-btn--ghost, .bill-btn--secondary, .int-btn--ghost) {
  background: var(--settings-drawer-control);
  box-shadow: none;
}

/* The API, integration, and destructive flows use custom dialog hosts. */
body:is(.api-page, .int-page) :is(.capi-root, .cint-root, .cdel-root) {
  align-items: stretch;
  justify-content: flex-end;
  padding: var(--settings-drawer-inset);
}

body:is(.api-page, .int-page) :is(.capi-backdrop, .cint-backdrop, .cdel-backdrop) {
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.api-page .capi-shell,
body.int-page .cint-shell {
  width: min(640px, calc(100vw - (var(--settings-drawer-inset) * 2)));
  height: calc(100svh - (var(--settings-drawer-inset) * 2));
  max-width: none;
  gap: 0;
  align-items: stretch;
  justify-content: stretch;
  transform: translateX(16px);
}

body.api-page .capi-root.is-open .capi-shell,
body.int-page .cint-root.is-open .cint-shell {
  transform: translateX(0);
}

body.api-page .capi-wizard,
body.int-page .cint-wizard {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: var(--settings-drawer-radius);
  box-shadow: none;
  overscroll-behavior: contain;
}

body.api-page .capi-summary-panel,
body.int-page .cint-summary-panel {
  display: none;
}

body.api-page :is(.capi-close, .capi-btn),
body.int-page :is(.cint-close, .cint-btn),
body:is(.api-page, .int-page) :is(.cdel-btn) {
  border: 0;
}

body.api-page :is(.capi-close, .capi-btn--secondary),
body.int-page :is(.cint-close, .cint-btn--secondary),
body:is(.api-page, .int-page) :is(.cdel-btn--secondary, .cdel-btn--outline) {
  background: var(--settings-drawer-control);
  box-shadow: none;
}

body:is(.api-page, .int-page) .cdel-modal {
  position: relative;
  width: min(var(--settings-drawer-width), calc(100vw - (var(--settings-drawer-inset) * 2)));
  height: calc(100svh - (var(--settings-drawer-inset) * 2));
  max-width: none;
  max-height: none;
  padding: 28px;
  border: 0;
  border-radius: var(--settings-drawer-radius);
  background: var(--settings-drawer-surface);
  box-shadow: none;
  transform: translateX(16px);
  overscroll-behavior: contain;
}

body:is(.api-page, .int-page) .cdel-root.is-open .cdel-modal {
  transform: translateX(0);
}

@media (max-width: 640px) {
  body:is(.set-page, .prof-page, .sec-page, .team-page, .bill-page, .ntf-page, .api-page, .int-page, .inc-page) {
    --settings-drawer-inset: 8px;
    --settings-drawer-radius: 20px;
  }

  body:is(.api-page, .int-page) .cdel-modal {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.api-page .capi-shell,
  body.int-page .cint-shell,
  body:is(.api-page, .int-page) .cdel-modal {
    transition: opacity 120ms ease;
    transform: none;
  }
}