/* The chevron in the page's muted grey, one per theme: a background image can't read light-dark(). */
:root {
  --field-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(50%25 0.015 145)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] {
  --field-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(76%25 0.006 145)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"], [data-theme="dark"]) {
    --field-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(76%25 0.006 145)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }
}

/* A field has two shapes: the pill acts on a list, the box is a form; the radius rides the variable .input reads. */
.input--box { --input-border-radius: var(--ds-radius-xl); }

.cs-form-field__success {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  margin: 0;
  color: var(--ds-on-cta-soft);
  font-size: var(--ds-font-size-compact);
  font-weight: var(--ds-weight-semibold);

  > svg { flex-shrink: 0; }
}

/* v5: what a lookup filled is a fine line under the field (the notice's inline line), in the muted ink; only the check carries
   the green, so a long sentence does not turn into a green bold paragraph. */
:where(html[data-visual="v5"]) .cs-form-field__success {
  align-items: flex-start;
  color: var(--ds-text-muted);
  font-size: var(--ds-status-font-sm);
  font-weight: var(--ds-weight-regular);
  line-height: 1.35;

  > svg { margin-block-start: 1px; color: var(--ds-on-cta-soft); }
}

/* v5: a field's hint keeps the status line's 12 px floor on a phone's 16 px root, and today's 0.7rem where the root grows. */
:where(html[data-visual="v5"]) .cs-form-field__hint { font-size: max(var(--ds-status-font-sm), 0.7rem); }

/* Busy: the ring turns inside the field, at the end, while the lookup answers. */
.ds-field__control { position: relative; display: block; }
.ds-field__control > .cs-spinner { position: absolute; inset-block: 0; inset-inline-end: 0.875em; margin-block: auto; }
.ds-field__control > .cs-spinner[hidden] { display: none; }
.cs-form-field--busy .input { padding-inline-end: 2.5em; }

/* Lead: a face or an icon at the start of the box. The room comes out of the padding, never the font; the text starts
   after it and a long one ends in an ellipsis instead of running under it. A press on it lands in the field. In px, not em:
   the wrapper and the input carry different font sizes, and the gap has to be the same in a compact box and a full one. */
.ds-field__control {
  --field-lead-inset: 10px;
  --field-lead-size: 24px;
  --field-lead-gap: 8px;
}
.ds-field__control > .ds-field__lead {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--field-lead-inset);
  display: grid;
  place-items: center;
  block-size: max-content;
  margin-block: auto;
  pointer-events: none;
}
/* The field's hover filter lifts it into a layer of its own, which would paint it over the lead. */
.ds-field__control > .ds-field__lead { z-index: 1; }
.ds-field__control > .ds-field__lead[hidden] { display: none; }
.ds-field__control:has(> .ds-field__lead:not([hidden])) > .input {
  padding-inline-start: calc(var(--field-lead-inset) + var(--field-lead-size) + var(--field-lead-gap));
  text-overflow: ellipsis;
}

/* A field's own action (Não sei o CEP) sits at the end of its label's line, never inside the box, a label's gap above the control. */
.ds-field--action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem var(--ds-space-2); }
.ds-field--action > * { grid-column: 1 / -1; }
.ds-field--action > :first-child { grid-column: 1; align-self: center; }
/* The action is the DS secondary action of a modal (cs-btn--ghost cs-btn--small, see ds_button.css), on the label's line. */
.ds-field--action > .ds-field__action { grid-column: 2; grid-row: 1; align-self: center; }
/* On touch the small button's 44 px tap reaches past its box, so the label's line grows to hold it: the tap covers
   neither the dialog's close above nor the control below. */
@media (pointer: coarse) {
  .ds-field--action { grid-template-rows: 44px; }
  .ds-field--action > :is(:first-child, .ds-field__action) { align-self: center; margin-block: 0; }
}

/* v5, behind the switch until the screens migrate: 44 px on the panel in the control border, focus as an outline. */
:where(html[data-visual="v5"]) textarea.input { --input-border-radius: var(--ds-radius-xl); }

/* No hover ring: the box answers the mouse with nothing and the focus with its outline, as in the catalog. */
:where(html[data-visual="v5"]) .input--box {
  --hover-size: 0;
  --input-border-color: var(--ds-border-strong);
  --input-background: var(--ds-field);
  --input-padding: 0.625em 0.875em;
  min-block-size: 44px;

  &::placeholder { color: var(--ds-text-muted); }
}

/* A settings form paints its fields with the app's border (.cs-settings .input); the box's control border wins it back. */
:where(html[data-visual="v5"]) :is(.cs-settings, .cs-panel) .input--box { --input-border-color: var(--ds-border-strong); }

:where(html[data-visual="v5"]) .input.input--box:focus {
  --input-border-color: var(--ds-border-strong);
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
  box-shadow: none;
}

:where(html[data-visual="v5"]) .input.input--box:disabled { color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-form-field--error .input { border-color: var(--ds-negative); }

/* v5: the pill field is a pill, a solid fill with no outline; only the box, a form's rectangle, keeps its border. Both sit in
   the field's neutral well, the same as the search, so a field never reads as a green patch of the page. */
:where(html[data-visual="v5"]) .input:not(.input--box, textarea, .input--transparent, .input--invisible, .input--actor .input) {
  border-color: transparent;
  background-color: var(--ds-field);
}

/* A field with suggestions (a datalist) wears the select's chevron; the native arrow stays clickable, invisible, over it. */
:where(html[data-visual="v5"]) :is(select.input--box:not([multiple], [size]:not([size="1"])), input.input--box[list]) {
  --select-chevron-size: 1.25em;
  --select-chevron-inset: 0.75em;
  padding-inline-end: calc(var(--select-chevron-inset) + var(--select-chevron-size) + 0.5em);
  background-image: var(--field-chevron);
  background-position: right var(--select-chevron-inset) center;
  background-size: var(--select-chevron-size);
  background-repeat: no-repeat;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* A select left on its empty option ("Não informado") reads as a placeholder, in the muted tone; its list keeps the text colour. */
:where(html[data-visual="v5"]) select.input--box:has(option[value=""]:checked) {
  color: var(--ds-text-muted);

  & option { color: var(--ds-text); }
}

:where(html[data-visual="v5"]) input.input--box[list]::-webkit-calendar-picker-indicator {
  inline-size: var(--select-chevron-size);
  margin-inline-end: calc(-1 * (var(--select-chevron-size) + 0.5em));
  opacity: 0;
  cursor: pointer;
}

/* The compact box of a form inside a popover or panel (Criar tarefa): the menu's text size, regular weight, 36 px, the same
   outline focus; a compact textarea grows with its text, from one line up to six. Every box of the Atendimento's pages
   (cs-settings), of the quick replies' panel and of the profile's modal is this one: the 50 px box of today's forms is gone from the v5. */
:where(html[data-visual="v5"]) :is(.input--box.input--compact, .cs-settings .input--box, .cs-quick-reply-modal .input--box, .cs-profile-modal .input--box) {
  --input-padding: 7px 12px;
  min-block-size: 36px;
  font-size: var(--ds-font-size-compact);
  font-weight: var(--ds-weight-regular);
}

:where(html[data-visual="v5"]) textarea.input--box.input--compact {
  field-sizing: content;
  min-block-size: 36px;
  max-block-size: calc(6lh + 0.875rem);
  line-height: 1.4;
}

@media (pointer: coarse) {
  :where(html[data-visual="v5"]) :is(.input--box.input--compact, .cs-settings .input--box, .cs-quick-reply-modal .input--box, .cs-profile-modal .input--box) { font-size: max(16px, var(--ds-font-size-compact)); }
}

/* A field focused by the opening of its popover, not by the person: the caret without the focus line, until they type,
   click in it or come back to it. */
[data-quiet-focus] .input.input--box:focus { outline: none; }