/* A modal that asks one thing stacks its answers full width, the main one first. */
.cs-modal__actions--stack { display: flex; flex-direction: column; gap: 0.5rem; }

/* v5: the modal is a 3xl sheet one step above the page, with a hairline and no shadow (the page is darkened by the veil,
   never by a shadow). */
html[data-visual="v5"] .cs-modal {
  border-color: var(--ds-border-elevated);
  border-radius: var(--ds-modal-radius);
  background: var(--ds-bg-elevated);
  box-shadow: none;
}

html[data-visual="v5"] .cs-modal::backdrop { background: var(--ds-scrim); }

/* Its edge is the modal's one pad on the four sides, not the uneven 28/24/22 of today's look. */
html[data-visual="v5"] .cs-modal:where(:not(.cs-modal--form, .cs-modal--swap)) > .cs-modal__panel { padding: var(--ds-modal-pad); }

/* What paints a step of the page (a field, a pill button, a rail, a hover) sank into the sheet in the dark, so on it each
   one reads the elevated step instead. The tokens stay one :root block: the repaint is here, per piece (the segmented
   rail's is in ds_tabs.css, the one file that styles tabs). */
html[data-visual="v5"] .cs-modal {
  & :is(.cs-btn--ghost, .cs-btn--danger):not(.cs-btn--icon),
  & .input:not(.input--box, textarea, .input--transparent, .input--invisible) { background-color: var(--ds-fill-elevated); }
  & .cs-search { background-color: var(--ds-field-elevated); }
  & .ds-radio__input:not(:checked) + .ds-radio__box { background: var(--ds-field-elevated); }
  & .input--box { --input-background: var(--ds-field-elevated); --input-border-color: var(--ds-field-border-elevated); }
  & .ds-chip:not(.ds-chip--color, .ds-chip--dot, [aria-pressed="true"], [aria-current="true"]) { background: var(--ds-fill-elevated); }
  & .cs-modal__list { background: none; }
  /* The picker inside a step is the step's list, not a menu floating over it: no graphite box of its own. */
  & .ds-user-picker--inline { padding: 0; border: 0; background: none; }
  & :where(.ds-options--rows > li + li) { border-color: var(--ds-border-elevated); }
  & :where(.ds-list--divided > * + *) { border-color: var(--ds-border-elevated); }
}

@media (any-hover: hover) {
  html[data-visual="v5"] .cs-modal {
    & :is(.cs-btn--ghost, .cs-btn--danger):not(.cs-btn--icon):hover,
    & :is(.ds-option, .cs-modal__choice, .cs-search-clear):hover,
    & :is(.ds-chip--filter, a.ds-chip):not(.ds-chip--color, .ds-chip--dot, [aria-pressed="true"], [aria-current="true"]):hover { background-color: var(--ds-fill-hover-elevated); }
  }
}

/* A step that needs room asks for it (data-modal-width), and the one modal widens while that step is in it. */
html[data-visual="v5"] .cs-modal:has([data-modal-width="medium"]) { inline-size: min(600px, 94vw); }

html[data-visual="v5"] .cs-modal__title { font-size: var(--ds-font-size-base); font-weight: var(--ds-weight-semibold); }
html[data-visual="v5"] :is(.cs-modal__text, .cs-modal__hint) { font-size: var(--ds-font-size-compact); }

/* A choice is a row that lights on hover, with its icon loose in the account's text green instead of a tinted block. */
html[data-visual="v5"] .cs-modal__choice { border-color: var(--ds-border-elevated); border-radius: var(--ds-radius-xl); }
html[data-visual="v5"] .cs-modal__choice-icon { background: none; color: var(--ds-on-cta-soft); }

@media (any-hover: hover) {
  html[data-visual="v5"] .cs-modal__choice:hover { background: var(--ds-fill-hover-elevated); border-color: var(--ds-border-elevated); }
}

/* A confirmation that explains or asks why reads as a small sheet: left aligned, the optional field under the text, and
   small buttons at the right with the answer at the edge. The plain question stays centered. */
.ds-confirm--sheet .cs-modal__panel { text-align: start; }
.ds-confirm--sheet .cs-modal__title { text-wrap: balance; }
.ds-confirm--sheet .cs-modal__text { margin: 0; max-inline-size: none; }
.ds-confirm__reason { margin-block-start: var(--ds-space-4); }
.ds-confirm__reason .cs-form-field__label { color: var(--ds-text-muted); font-size: var(--ds-font-size-compact); font-weight: var(--ds-weight-medium); }
.ds-confirm__reason .input { inline-size: 100%; resize: none; }
.ds-confirm--sheet .cs-modal__actions { display: flex; justify-content: flex-end; gap: var(--ds-space-2); margin-block-start: var(--ds-space-4); }

/* v5: the sheet's answers sit under a full-bleed hairline, and stay in sight while a long step scrolls above them. */
html[data-visual="v5"] .ds-confirm--sheet .cs-modal__panel { padding: var(--ds-modal-pad) var(--ds-modal-pad) 0; }
/* A step with no answers has no foot to close it, so its bottom edge is the pad like the top. */
html[data-visual="v5"] .ds-confirm--sheet .cs-modal__panel:not(:has(.cs-modal__actions)) { padding-block-end: var(--ds-modal-pad); }
html[data-visual="v5"] .ds-confirm--sheet .cs-modal__actions {
  position: sticky;
  inset-block-end: 0;
  z-index: var(--ds-z-raised);
  margin-inline: calc(-1 * var(--ds-modal-pad));
  padding: var(--ds-modal-gap) var(--ds-modal-pad) var(--ds-modal-pad);
  border-block-start: 1px solid var(--ds-border-elevated);
  background: var(--ds-bg-elevated);
}

/* A sheet that clips gives its panel its own room (its cap, or what is left under a held top), so the foot is never cut. */
.cs-modal[open]:is(.cs-modal--form, .cs-modal--wide), html[data-visual="v5"] .cs-modal[open].cs-profile-modal { display: flex; flex-direction: column; }
.cs-modal:is(.cs-modal--form, .cs-modal--wide) > .cs-modal__panel,
html[data-visual="v5"] .cs-profile-modal > .cs-modal__panel { flex: 0 1 auto; min-block-size: 0; }

/* The close stays in its corner on a touch screen, where every icon button turns relative for its 44 px target. */
html[data-visual="v5"] .cs-modal__close.cs-btn--icon { position: absolute; }

/* One place for the close in every modal: in the corner, at the modal's edge less the room around its icon. */
.cs-modal .cs-modal__close { inset-block-start: calc(var(--ds-modal-pad) - 0.35rem); inset-inline-end: calc(var(--ds-modal-pad) - 0.35rem); }

/* The form modal (cs-modal--form): a form with a long list. Head, a body that scrolls and a foot with the actions, on the
   modal's one pad (--ds-modal-pad) on the four edges and its one gap (--ds-modal-gap) between everything stacked. It opens
   at its final size (85% of the screen, the whole screen on a phone) and the list inside is what takes the height. */
.cs-modal.cs-modal--form {
  inline-size: min(600px, calc(100vw - 2 * var(--ds-space-4)));
  block-size: fit-content;
  max-inline-size: none;
  max-block-size: 85dvh;
  overflow: hidden;
}
/* Only a list holds the whole cap (also while it loads), so its first page lands without moving the box; a form with no
   list, or a search that answered, takes its own height under the same cap. */
.cs-modal.cs-modal--form:has(.cs-picker:not([data-searched]), [aria-busy="true"]) { block-size: 85dvh; }
.cs-modal--form > .cs-modal__panel { display: flex; flex-direction: column; block-size: 100%; padding: 0; text-align: start; }
.cs-modal--form .cs-modal__text { margin: 0; max-inline-size: none; }
.cs-modal__head { flex: none; margin: 0; padding: var(--ds-modal-pad) calc(var(--ds-modal-pad) + 2rem) var(--ds-modal-gap) var(--ds-modal-pad); }
.cs-modal__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--ds-modal-gap);
  min-block-size: 0;
  padding: 0 var(--ds-modal-pad);
  overflow-y: auto;
}
.cs-modal__foot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-space-2);
  padding: var(--ds-modal-gap) var(--ds-modal-pad) var(--ds-modal-pad);
  border-block-start: 1px solid var(--ds-border-elevated);
  background: var(--ds-bg-elevated);
}
/* A list in the body grows into the height left and scrolls by itself, glued to its search by the same gap. */
.cs-modal__body .cs-picker { flex: 1; gap: var(--ds-modal-gap); min-block-size: 0; }
.cs-modal__body .cs-picker .ds-menu__find { margin-block-end: 0; }
.cs-modal__body .cs-picker__scroll { flex: 1; min-block-size: 0; max-height: none; padding: 0; }

@media (max-width: 639px) {
  .cs-modal.cs-modal--form, html[data-visual="v5"] .cs-modal.cs-modal--form, .cs-modal.cs-modal--form:has(.cs-picker:not([data-searched]), [aria-busy="true"]) {
    inline-size: 100vw; block-size: 100dvh; max-block-size: none; margin: 0; border-radius: 0;
  }
}