/* The panel with a stack: each step slides over the one before, in the same sheet, with back and close on its header. */
.ds-panel-stack {
  position: relative;
  flex: 1;
  min-block-size: 0;
  overflow: hidden;
  background: inherit;
}

.ds-panel-stack__pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: inherit;
}
.ds-panel-stack__pane[hidden] { display: none; }

.ds-panel-stack__body { display: flex; flex-direction: column; flex: 1; min-block-size: 0; }
.ds-panel-stack__body > :is(turbo-frame, .ds-panel-stack__frame) { display: block; }
.ds-panel-stack__left-behind { display: contents; }

/* A sheet that holds a stack scrolls in its panes, never as a whole. */
.cs-contact-panel__sheet:has(> .ds-panel-stack) { overflow: hidden; padding-block-end: 0; }
.cs-contact-panel__sheet > .ds-panel-stack > .ds-panel-stack__pane { padding-block-end: var(--ds-space-6); }

/* One scroll per pane, with the thin bar of the v5 menus (ds_menu.css). Chrome lets the standard scrollbar-width win over
   ::-webkit-scrollbar and then draws its own bar with arrows, so where the pseudo-elements exist they draw it alone. */
:is(aside.cs-contact-panel__sheet, .ds-panel-stack > .ds-panel-stack__pane) {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--ds-text) 24%, transparent) transparent;
}
@supports selector(::-webkit-scrollbar) {
  :is(aside.cs-contact-panel__sheet, .ds-panel-stack > .ds-panel-stack__pane) { scrollbar-width: auto; scrollbar-color: auto; }
  :is(aside.cs-contact-panel__sheet, .ds-panel-stack > .ds-panel-stack__pane)::-webkit-scrollbar { inline-size: 10px; }
  :is(aside.cs-contact-panel__sheet, .ds-panel-stack > .ds-panel-stack__pane)::-webkit-scrollbar-button { display: none; }
  :is(aside.cs-contact-panel__sheet, .ds-panel-stack > .ds-panel-stack__pane)::-webkit-scrollbar-track { background: transparent; }
  :is(aside.cs-contact-panel__sheet, .ds-panel-stack > .ds-panel-stack__pane)::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: var(--ds-radius-full);
    background: color-mix(in oklch, var(--ds-text) 24%, transparent) padding-box;
  }
  :is(aside.cs-contact-panel__sheet, .ds-panel-stack > .ds-panel-stack__pane)::-webkit-scrollbar-thumb:hover { background-color: color-mix(in oklch, var(--ds-text) 40%, transparent); }
}

/* The bar takes its room only when there is something to scroll, and on a touch screen none at all: a pane scrolled by the
   finger needs no bar, and the room kept for one cut the bands between the sections 10 px short of the edge. */
.ds-panel-stack > .ds-panel-stack__pane { scrollbar-gutter: auto; }
@media (pointer: coarse) {
  .ds-panel-stack > .ds-panel-stack__pane { scrollbar-width: none; }
  .ds-panel-stack > .ds-panel-stack__pane::-webkit-scrollbar { display: none; }
}

/* The step's header: back on the left in the box of the root's close, the close on the right. */
.ds-panel-stack__pane--step > .ds-panel-header { position: sticky; inset-block-start: 0; z-index: 2; }

/* The row that opens a step: the section's name in the info type's title (ds_info_line.css), the count and the chevron on
   the right. */
.ds-panel-stack__opener {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  inline-size: calc(100% + 2 * var(--ds-space-2));
  margin: calc(-1 * var(--ds-space-2));
  padding: var(--ds-space-2);
  border: 0;
  border-radius: var(--ds-radius-lg);
  background: none;
  color: var(--ds-text-muted);
  font: inherit;
  font-size: var(--ds-info-title);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-info-leading);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.ds-panel-stack__opener-label { flex: 1; min-inline-size: 0; }
.ds-panel-stack__opener-count { font-variant-numeric: tabular-nums; }
.ds-panel-stack__opener > svg { flex-shrink: 0; }
.ds-panel-stack__opener:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
@media (any-hover: hover) {
  .ds-panel-stack__opener:hover { background: var(--ds-hover); }
}

/* What a step shows from the panel itself (the history, the atendimentos) sits on the step's ruler like every other step. */
.ds-panel-stack__body > .ds-panel-stack__source { padding: var(--ds-space-4) var(--step-inset, var(--ds-space-6)); }

/* A form opened as a step lies on the panel's surface: full width, no card, its sections split by the root's band, its
   labels and fields on the step's 16 px ruler; the buttons follow the last field with no band, small, Salvar at the right
   edge. The person's kind is one segmented row across the step, each half the same width and the word alone (the icon
   would push "Pessoa jurídica" past its half), so it never wraps at 340 px. */
:where(html[data-visual="v5"]) .ds-panel-stack .ds-panel-stack__body > #cs_contact_form.cs-contact-flow { padding: 0 0 var(--ds-space-6); }
:where(html[data-visual="v5"]) .ds-panel-stack .cs-contact-form { gap: 0; }
:where(html[data-visual="v5"]) .ds-panel-stack .cs-contact-form .cs-contact-form__card {
  padding: var(--ds-space-4) var(--step-inset);
  border: 0;
  border-radius: 0;
  background: none;
}
:where(html[data-visual="v5"]) .ds-panel-stack .cs-contact-form .cs-contact-form__card + .cs-contact-form__card {
  padding-block-start: var(--ds-space-4);
  border-block-start: var(--ds-space-2) solid var(--ds-panel-band);
}
:where(html[data-visual="v5"]) .ds-panel-stack .cs-contact-form .cs-contact-form__actions {
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: var(--ds-space-2);
  padding: 0 var(--step-inset);
  border-block-start: 0;
}

/* A step's ruler: its text, fields and buttons start 16 px in from the sheet's edges, the gallery's inset; a row with a
   hover pill sits in a list 8 px in, with 8 px inside the pill, so its content lands on the same 16 px and its pill
   never touches the sheet's edges, as in the v5 menus. */
.ds-panel-stack__pane--step { --step-inset: var(--ds-space-4); --step-pill-inset: var(--ds-space-2); }

:where(html[data-visual="v5"]) .ds-panel-stack .ds-panel-stack__body > #cs_contact_form.cs-contact-flow:has(> .ds-options) { padding-block-start: var(--ds-space-3); }
.ds-panel-stack__pane--step .ds-options { gap: var(--ds-space-1); padding-inline: var(--step-pill-inset); }
.ds-panel-stack__pane--step .ds-options__title { padding-inline: var(--step-inset); }
.ds-panel-stack__pane--step .ds-option { padding-inline: calc(var(--step-inset) - var(--step-pill-inset)); }

/* A search step (the person to tie the number to, who speaks for a company): the hint and the sidebar's search pill on the
   step's ruler, and the results as rows of the option list (icon, name with PF or PJ, the document under it, the hover a
   pill), flowing in the pane's one scroll instead of a box of their own. */
:where(html[data-visual="v5"]) .ds-panel-stack .ds-panel-stack__body > #cs_contact_form.cs-contact-flow:has(> .cs-contact-flow__intro) { padding-block-start: var(--ds-space-3); }
.ds-panel-stack .ds-panel-stack__pane--step .cs-contact-flow__intro { margin: 0 0 var(--ds-space-3); padding-inline: var(--step-inset); }
.ds-panel-stack .ds-panel-stack__pane--step .cs-contact-flow__intro .cs-modal__text { font-size: var(--ds-font-size-compact); line-height: 1.4; color: var(--ds-text-muted); }
.ds-panel-stack .ds-panel-stack__pane--step :is(.cs-modal__search, .cs-modal__hint) { padding-inline: var(--step-inset); }
.ds-panel-stack .ds-panel-stack__pane--step .cs-modal__list {
  gap: var(--ds-space-1);
  max-block-size: none;
  margin-block-start: var(--ds-space-3);
  padding-inline: var(--step-pill-inset);
  overflow: visible;
}
.ds-panel-stack .ds-panel-stack__pane--step .cs-modal__choice {
  gap: var(--ds-space-3);
  min-block-size: 56px;
  padding: var(--ds-space-2) calc(var(--step-inset) - var(--step-pill-inset));
  border: 0;
  border-radius: var(--ds-radius-xl);
  background: transparent;
}
@media (any-hover: hover) {
  .ds-panel-stack .ds-panel-stack__pane--step .cs-modal__choice:hover { background: var(--ds-fill-hover); }
}
.ds-panel-stack .ds-panel-stack__pane--step .cs-modal__choice:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.ds-panel-stack .ds-panel-stack__pane--step .cs-modal__choice-icon { inline-size: 20px; block-size: auto; background: none; color: var(--ds-text-muted); }
.ds-panel-stack .ds-panel-stack__pane--step .cs-modal__choice-title { font-size: var(--ds-font-size-sm); font-weight: var(--ds-weight-regular); line-height: 1.3; }
.ds-panel-stack .ds-panel-stack__pane--step .cs-modal__choice-hint { font-size: var(--ds-font-size-compact); line-height: 1.35; color: var(--ds-text-muted); }
@media (min-width: 100ch) {
  .ds-panel-stack .ds-panel-stack__pane--step .cs-modal__choice-hint { font-size: var(--ds-font-size-2xs); }
}

/* Who speaks for a company: the same ruler, its link on it and Salvar small at the right edge. */
.ds-panel-stack .ds-panel-stack__pane--step .cs-contact-speakers-form .cs-modal__list { margin-block-start: 0; }
.ds-panel-stack .ds-panel-stack__pane--step .cs-contact-speakers-form__tie { margin-inline: var(--step-inset); }
.ds-panel-stack .ds-panel-stack__pane--step .cs-contact-speakers-form .cs-modal__actions { justify-content: flex-end; margin-block-start: 0; padding-inline: var(--step-inset); }