/* The fields of the site and of the panel, one family (owner, 2026-10-28: «input های text موقع نوشتن نارنجی میشن ...
   بقیه input ها هم یک شکل نیستند»; DECISIONS 36.1). Written by hand, with the tokens of form-field only; checked by
   design/_tools/check_web_css.py as a component's sheet is. */

/* One field (owner, 2026-10-30: like elements have one look; DECISIONS 36.16): as high, as round and with the same outline
   everywhere, whatever the frame of the page measured (43 to 47.2 on a phone), in the middle of the box a page gives it.
   The small field is the one of the ticket form; a field of several lines is as high as its box. */
.field-box {
  --field-height: var(--outlined-field-height);
  --field-rest: var(--color-gray-81);
  block-size: var(--field-height);
  margin-block-start: calc((var(--box-height) - var(--field-height)) / 2);
  border-radius: var(--outlined-field-radius);
  --outline: var(--outlined-field-border) solid var(--field-rest);
}

.field-box.small {
  --field-height: var(--outlined-field-small-height);
}

.field-box.multi {
  block-size: var(--box-height);
  margin-block-start: 0;
}

/* A field that opens a sheet (the date, the hours, an address): what it says and its drawing stand in the middle of its
   height, as in a field that takes a text. */
.field-box > .field-text,
.field-box > img {
  inset-block: 0;
  block-size: fit-content;
  margin-block: auto;
}

@media (max-width: 767.98px) {
  .mobile .field-box {
    --field-rest: var(--color-gray-45);
  }
}

/* No field shows the focus ring of the system, whose colour is the accent of the computer (orange on some): the box of
   the field shows the focus, in the colour of the role. The caret and the ticks and circles of the browser take that
   colour too. */
input,
select,
textarea {
  outline: none;
  caret-color: var(--theme-to);
  accent-color: var(--theme-to);
}

/* What is not a field keeps a ring for the keyboard, in the colour of the role. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: var(--form-field-focus-border) solid var(--theme-to);
  outline-offset: var(--form-field-border);
}

/* What the browser fills in by itself keeps the colours of the field. */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-gray-19);
  box-shadow: inset 0 0 0 var(--form-field-autofill) var(--color-white);
}

/* A select draws one chevron, the same everywhere, at its end; a select that draws its own sets its background. */
:where(select) {
  appearance: none;
  background: var(--form-field-chevron) no-repeat left var(--form-field-chevron-inset) center / var(--form-field-chevron-size);
  padding-inline-end: var(--form-field-chevron-space);
}

/* A text field with suggestions opens the same list as a select (select-list.js), and shows it by the same chevron; the
   arrow and the list of the browser are gone. */
:where(input[list], input[data-list]) {
  background: var(--form-field-chevron) no-repeat left var(--form-field-chevron-inset) center / var(--form-field-chevron-size);
  padding-inline-end: var(--form-field-chevron-space);
}

input::-webkit-calendar-picker-indicator {
  display: none;
}

/* What the browser adds to a number and to a search: a number is written, and a search is emptied by hand. */
input[type="number"],
input[type="search"] {
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  appearance: none;
}

/* A box to tick and a radio that a design does not draw (`drawn-control` lies over TickMark or ChoiceRing) look the same as
   those: the panel and the sheets of the site have no second kind. */
input[type="checkbox"]:not(.drawn-control),
input[type="radio"]:not(.drawn-control) {
  position: relative;
  flex: none;
  inline-size: var(--tick-mark-size);
  aspect-ratio: 1;
  block-size: auto;
  margin: 0;
  border-radius: var(--tick-mark-radius);
  box-shadow: inset 0 0 0 var(--tick-mark-border) var(--color-gray-60);
  appearance: none;
  cursor: pointer;
}

input[type="radio"]:not(.drawn-control) {
  border-radius: 50%;
}

input[type="checkbox"]:not(.drawn-control):checked {
  box-shadow: none;
  background: var(--gradient-theme-vertical);
}

input[type="checkbox"]:not(.drawn-control):checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-white);
  mask: url("/assets/icons/tick-mark-check.svg") center / var(--tick-mark-mark) no-repeat;
  -webkit-mask: url("/assets/icons/tick-mark-check.svg") center / var(--tick-mark-mark) no-repeat;
}

input[type="radio"]:not(.drawn-control):checked {
  box-shadow: inset 0 0 0 var(--tick-mark-border) var(--theme-to);
}

input[type="radio"]:not(.drawn-control):checked::after {
  content: "";
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: var(--theme-to);
}

input[type="checkbox"]:not(.drawn-control):disabled,
input[type="radio"]:not(.drawn-control):disabled {
  box-shadow: inset 0 0 0 var(--tick-mark-border) var(--color-gray-81);
  cursor: default;
}

input[type="checkbox"]:not(.drawn-control):checked:disabled {
  background: var(--color-gray-81);
}

/* The outlined boxes of the design (OutlinedField, the fields of the sign-in, of the request and of the sheets): the
   field inside that has the focus colours the outline in the colour of the role, with a soft ring. */
.outlined:has(:is(input, select, textarea):focus) {
  --outline: var(--form-field-focus-border) solid var(--theme-to);
  --outline-effect: drop-shadow(0 0 var(--form-field-ring) var(--theme-field-ring));
}

/* A field whose value was refused (a wrong number, a missing value) is red, focused or not, until it changes (owner,
   2026-10-28: «مواقعی که ولیدیشنشون هم اگر مشکل داشت میشه رنگ سبز رو کرد قرمز»). OutlinedField and TextField take
   Invalid; a field of the panel takes aria-invalid. */
/* (the class twice: above the component's own outline, which its sheet sets after this one) */
.outlined.outlined.invalid,
.outlined.outlined.invalid:has(:is(input, select, textarea):focus) {
  --outline: var(--form-field-focus-border) solid var(--color-red);
  --outline-effect: drop-shadow(0 0 var(--form-field-ring) var(--form-field-ring-invalid));
}

:is(input, select, textarea)[aria-invalid="true"] {
  caret-color: var(--color-red);
}