.sal-wide { max-inline-size: 76rem; }
.sal-narrow { max-inline-size: 42rem; }

/* Danger reads in the text, not in a red frame: drop once cs-btn--danger itself does so. */
.sal-screen .cs-btn--danger { border-color: var(--border-strong); }
.sal-screen .cs-btn--danger:hover { background-color: var(--hover); }
.sal-screen .cs-modal { box-shadow: none; }
.sal-screen .cs-modal :where(button, summary, input), .sal-person-orders :where(button, summary, input) { --hover-size: 0; }

.sal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.sal-head__actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sal-head__actions > .cs-btn { flex: none; }
.sal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.sal-filter__customer { position: relative; flex: 1 1 14rem; min-inline-size: 0; }
.sal-filter__date { display: flex; align-items: center; gap: 0.4rem; color: var(--txt-muted); font-size: 0.85rem; }
.sal-filter__date .ds-date-field { inline-size: 9.5rem; }
.sal-filter__clear[aria-hidden="true"] { visibility: hidden; }
/* The periods and Limpar move as one: when the strip is short they take the second line together, never one apart. */
.sal-filter__periods { display: flex; flex: none; align-items: center; gap: 0.75rem; }

/* The lists sit on the design system's sheet (ds-list--divided cs-settings__sheet); here only their columns. */
.sal-orders, .sal-rows { container-type: inline-size; }
/* The page keeps one step between its blocks; the search and filters sit right on the list they search. */
.sal-screen .cs-settings__container { gap: var(--ds-space-4); }
.sal-browse { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.sal-orders .sal-order {
  display: grid;
  grid-template-columns: 5rem 3.5rem minmax(0, 1fr) 6rem 6rem;
  gap: var(--ds-space-2);
  align-items: center;
  min-block-size: 40px;
  padding: var(--ds-space-1) var(--ds-space-2);
  font-size: var(--ds-font-size-sm);
  color: inherit;
  text-decoration: none;
}
@media (pointer: coarse) { .sal-orders .sal-order { min-block-size: 44px; } }
.sal-orders--range .sal-order { grid-template-columns: 5rem 6.5rem minmax(0, 1fr) 6rem 6rem; }
.sal-order__time { color: var(--ds-text-muted); font-size: var(--ds-font-size-compact); }
.sal-order__total { text-align: end; font-weight: 600; }
.sal-order__who { display: flex; align-items: center; gap: var(--ds-space-2); min-inline-size: 0; }
.sal-order__customer { min-inline-size: 0; font-weight: var(--ds-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sal-facts { margin-block: 1rem; }

@media (max-width: 40rem) {
  .sal-orders .sal-order, .sal-orders--range .sal-order { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.15rem; }
  .sal-order__total { grid-column: 2; }
}

.sal-form { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 42rem; margin-block-start: 1rem; text-align: start; }
.sal-product-modal__frame, .sal-product-modal__form { display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; }
.sal-product-modal .cs-modal__body, .sal-address .cs-modal__body { flex-basis: auto; padding-block-end: var(--ds-modal-gap); }
.sal-product-modal .sal-form__problem { margin: 0 0 var(--ds-modal-gap); padding-inline: var(--ds-modal-pad); }
.sal-form__submit { align-self: start; margin-block-start: 0.5rem; }
.sal-form__problem { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-block-start: 1rem; }
.sal-entry { display: grid; grid-template-columns: 8rem 9rem auto minmax(0, 1fr); gap: var(--ds-space-2); align-items: end; }
.sal-entry__description { grid-column: 1 / -1; }
.sal-entry__error[hidden] { display: none; }
/* The row is as tall as the restore button whether it shows or not, so nothing under it jumps; on touch, as tall as
   the button's 44 px tap, which then lands on the hint alone. */
.sal-entry__hint { display: flex; align-items: center; gap: var(--ds-space-2); min-block-size: 24px; }
@media (pointer: coarse) {
  .sal-entry__hint { min-block-size: 44px; }
}
:is(.sal-entry__money, .sal-picked__money) { text-align: end; font-variant-numeric: tabular-nums; }

.sal-items:not(.sal-items--filled) :is(.sal-picked, .sal-picked__head) { display: none; }
.sal-picked { margin: 0; }
.sal-picked__head,
.sal-picked__row { display: grid; grid-template-columns: minmax(0, 1fr) 8rem 9rem 24px; gap: var(--ds-space-2); align-items: center; }
.sal-picked__head { margin-block-start: var(--ds-space-3); padding-inline: var(--ds-space-3); color: var(--ds-text-muted); font-size: var(--ds-font-size-sm); }
.sal-picked__row { padding: var(--ds-space-2) var(--ds-space-3); }
.sal-picked__item { display: flex; flex-direction: column; gap: 0.1rem; min-inline-size: 0; }
.sal-picked__rate { color: var(--ds-text-muted); font-size: var(--ds-font-size-sm); font-variant-numeric: tabular-nums; }
.sal-picked__rate:empty { display: none; }
.sal-picked__cell { display: flex; flex-direction: column; gap: var(--ds-space-1); min-inline-size: 0; }
.sal-picked__cell-label { color: var(--ds-text-muted); font-size: var(--ds-font-size-sm); }
.sal-picked__sum { display: flex; gap: 0.5rem; justify-content: flex-end; margin: 0.6rem 0 0; color: var(--txt-muted); }
.sal-items:not(.sal-items--filled) .sal-picked__sum { display: none; }

.sal-search { flex: 1 1 14rem; min-inline-size: 0; }
.sal-row { gap: var(--ds-space-2); padding: 0; }
.sal-row__link {
  display: grid;
  flex: 1;
  align-items: center;
  gap: 0 var(--ds-space-2);
  min-inline-size: 0;
  padding: var(--ds-space-1) var(--ds-space-2);
}
.sal-row--person .sal-row__link { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "face name last" "face details details"; row-gap: 0; }
.sal-row--person .sal-row__link > :first-child { grid-area: face; }
.sal-row--person .sal-row__name-cell { grid-area: name; }
.sal-row--person .sal-row__last { grid-area: last; font-variant-numeric: tabular-nums; }
.sal-row--person .sal-row__details { grid-area: details; display: flex; min-inline-size: 0; overflow: hidden; white-space: nowrap; }
.sal-row__details > * { flex: none; }
.sal-row__details > * + *::before { content: "·"; margin-inline: 0.35em; }
.sal-row__details > :is(.sal-row__requester, .sal-row__usual) { flex: 0 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.sal-row__phone-short { display: none; }
.sal-row--product .sal-row__link { grid-template-columns: 4rem minmax(0, 1fr) auto; }
.sal-row__name-cell { display: flex; align-items: center; gap: 0.5rem; min-inline-size: 0; }

.sal-row__last, .sal-row__price { text-align: end; }
.sal-row__price { font-size: var(--ds-font-size-sm); font-weight: var(--ds-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sal-row__unit { color: var(--ds-text-muted); font-weight: var(--ds-weight-regular); }
.sal-head__hint { margin: 0.35rem 0 0; color: var(--ds-text-muted); font-size: var(--ds-font-size-sm); }

@container (max-width: 44rem) {
  .sal-row--person .sal-row__last-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sal-row--person :is(.sal-row__document, .sal-row__number, .sal-row__phone-full) { display: none; }
  .sal-row--person .sal-row__requester ~ .sal-row__kind,
  .sal-row--person .sal-row__kind ~ .sal-row__usual { display: none; }
  .sal-row__phone-short { display: inline; }
}

@container (max-width: 30rem) {
  .sal-row--product .sal-row__link { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.15rem; }
  .sal-row--product .sal-row__code { grid-column: 1; grid-row: 2; }
  .sal-row--product .sal-row__price { grid-column: 2; grid-row: 1 / span 2; }
}

.sal-days { display: flex; align-items: center; gap: 0.5rem; min-block-size: 30px; margin-block-start: 0.75rem; }
.sal-days--period { margin-block-end: 0; font-weight: var(--ds-weight-semibold); }
.sal-days__current { font-weight: 600; }

.sal-options-holder { position: relative; }
.sal-option { justify-content: space-between; padding-block: 0.55rem; }
.sal-option--person { justify-content: flex-start; }
.sal-option__name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sal-option__aside { flex-shrink: 0; color: var(--ds-text-muted); font-size: var(--ds-font-size-sm); white-space: nowrap; }

.sal-party { display: flex; flex-direction: column; gap: 1rem; }
.sal-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 40rem) {
  .sal-pair { grid-template-columns: minmax(0, 1fr); }
}

.sal-customer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
.sal-form__actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

@media (max-width: 40rem) {
  .sal-customer { grid-template-columns: minmax(0, 1fr); }
}

.sal-usual__hint { margin: 0 0 1rem; color: var(--ds-text-muted); font-size: var(--ds-font-size-sm); }
.sal-usual__form { display: grid; grid-template-columns: minmax(0, 1fr) 5rem auto; gap: 0.5rem; align-items: center; }
.sal-usual__list { margin-block-start: 1rem; }
.sal-usual__row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 7rem auto; gap: 0.5rem; align-items: center; }
.sal-usual__quantity, .sal-usual__mark { color: var(--ds-text-muted); font-variant-numeric: tabular-nums; }
.sal-usual__price { text-align: end; font-weight: var(--ds-weight-semibold); font-variant-numeric: tabular-nums; }

@media (max-width: 40rem) {
  .sal-usual__form { grid-template-columns: minmax(0, 1fr); }
  .sal-usual__row { grid-template-columns: 3rem minmax(0, 1fr) auto; }
}

.sal-paper { background: var(--bg-pure); color: var(--txt); }
.sal-print { max-inline-size: 48rem; margin: 2rem auto; padding: 2rem; font-size: 0.95rem; }
.sal-print__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding-block-end: 1rem; border-block-end: 2px solid var(--txt); }
.sal-print__shop { margin: 0; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.04em; }
.sal-print__logo { display: block; max-inline-size: 15rem; max-block-size: 4.5rem; object-fit: contain; }
.sal-print__issued { margin: 0.25rem 0 0; color: var(--txt-muted); font-size: 0.85rem; }
.sal-print__number { text-align: end; }
.sal-print__number span { display: block; color: var(--txt-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.sal-print__number strong { font-size: 1.6rem; }

.sal-print__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.5rem; margin-block: 1.5rem; }
.sal-print__facts div { display: flex; flex-direction: column; gap: 0.15rem; }
.sal-print__label { color: var(--txt-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }

.sal-print__items { inline-size: 100%; border-collapse: collapse; margin-block-end: 1.5rem; }
.sal-print__items th, .sal-print__items td { padding: 0.5rem 0.4rem; border-block-end: 1px solid var(--border-strong); text-align: start; }
.sal-print__items thead th { color: var(--txt-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.sal-print__items tfoot th { border-block-end: 0; border-block-start: 2px solid var(--txt); font-size: 1.05rem; }
.sal-print__items .sal-print__right { text-align: end; }

.sal-print__foot { margin-block-start: 3rem; }
.sal-print__signature { margin: 0; color: var(--txt-muted); font-size: 0.85rem; }
.sal-print__actions { display: flex; gap: 0.5rem; margin-block-start: 2rem; }

@media print {
  .sal-print { margin: 0; padding: 0; }
  .sal-print__actions { display: none; }
  @page { margin: 1.5cm; }
}
.sal-order__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1rem; }
.sal-order__items { margin-block: 1rem 1.5rem; font-variant-numeric: tabular-nums; }
.sal-order__items .sal-order__money { text-align: end; white-space: nowrap; }
.sal-order__origin { margin: 0.3rem 0 0; font-size: 0.9rem; }

/* On a phone the column heads go and each field of a row carries its own visible label. */
@media (max-width: 40rem) {
  .sal-entry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sal-entry__add { grid-column: 1 / -1; }
  .sal-picked__head { display: none; }
  /* The remove sits at the end of the name's line, so the two fields below split the row in halves, as the entry's do. */
  .sal-picked__row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .sal-picked__item { grid-area: 1 / 1 / 2 / -1; padding-inline-end: calc(24px + var(--ds-space-2)); }
  .sal-picked__row > .cs-btn { grid-area: 1 / 2; justify-self: end; align-self: start; }
  .sal-picked__cell-label.for-screen-reader { position: static; inline-size: auto; block-size: auto; clip-path: none; white-space: normal; }
}

@media (max-width: 40rem) {
  .sal-head__actions { margin-inline-start: 0; inline-size: 100%; }
}

/* Below 100ch the mobile header already carries the way back and the title. */
@media (width < 100ch) {
  .sal-screen .sup-back { display: none; }
  /* A header left with only the way back and the title is empty here, and would still hold its gap. */
  .sal-screen .cs-settings__header:not(:has(.sal-head)),
  .sal-screen .cs-settings__title {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .sal-screen .cs-settings__header:not(:has(.sal-head)) + .sal-form { margin-block-start: 0; }
}

.sal-facts__aside { margin-inline-start: 0.5rem; color: var(--ds-text-muted); font-size: var(--ds-font-size-sm); font-weight: var(--ds-weight-regular); }
.sal-print__requester { display: block; }

.sal-person-orders { margin-block-start: 1.5rem; }
:where(html[data-visual="v5"]) .cs-profile .sal-person-orders { margin-block-start: 0; }
.sal-person-order {
  display: grid;
  grid-template-columns: 4.5rem 6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  color: var(--txt);
  font-size: 13px;
  text-decoration: none;
}
.sal-person-order:hover { background-color: var(--hover); }
.sal-person-order__day, .sal-person-order__role { color: var(--txt-muted); }
.sal-person-order__role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sal-person-order__total { font-weight: 600; font-variant-numeric: tabular-nums; }
.sal-person-usual { margin-block-start: 0.75rem; }
@media (max-width: 40rem) {
  .sal-person-order { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
  .sal-person-order__role { grid-column: 1 / -1; grid-row: 2; }
}

.sal-address { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.sal-address__add { align-self: flex-start; }
/* The typed address with no saved ones to choose among: the pin stands where a radio's circle would. */
.sal-address__typed { display: flex; align-items: flex-start; gap: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-3); color: var(--ds-text); font-size: var(--ds-font-size-sm); }
.sal-address__pin { flex-shrink: 0; color: var(--ds-text-muted); }

.sal-day-total { display: flex; justify-content: flex-end; gap: var(--ds-space-2); margin: 0; color: var(--ds-text-muted); }
.sal-day-total strong { color: var(--ds-text); font-variant-numeric: tabular-nums; }
.sal-order__canceled { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; color: var(--txt-muted); font-size: 0.9rem; }
s.sal-order__total { color: var(--txt-muted); }
.sal-print__canceled { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

.sal-requester { display: flex; flex-direction: column; gap: var(--ds-space-1); }
.sal-requester__line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.sal-requester__people { margin-block: var(--ds-space-3); }