/*
 * BCG XII design system — form controls v1
 *
 * This is the canonical source. Runtime copies live beside each isolated app
 * because the applications are deployed independently. Keep those copies byte
 * identical; tests enforce that contract.
 */
:root {
  --bcg-control-block-size: 48px;
  --bcg-control-font-size: 16px;
  --bcg-control-padding-inline: 15px;
  --bcg-control-radius: 10px;
  --bcg-form-action-block-size: 48px;
  --bcg-form-action-font-size: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
input,
select,
textarea {
  min-inline-size: 0;
  max-inline-size: 100%;
  font: inherit;
}

input:is(
  [type="date"],
  [type="datetime-local"],
  [type="time"],
  [type="month"]
) {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  block-size: var(--bcg-control-block-size);
  min-block-size: var(--bcg-control-block-size);
  padding-block: 0;
  padding-inline: var(--bcg-control-padding-inline);
  border-radius: var(--bcg-control-radius);
  font-size: var(--bcg-control-font-size);
  line-height: 1.2;
  text-align: start;
  font-variant-numeric: tabular-nums;
  appearance: auto;
  -webkit-appearance: auto;
}

input:is(
  [type="date"],
  [type="datetime-local"],
  [type="time"],
  [type="month"]
)::-webkit-date-and-time-value {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  text-align: start;
}

input:is(
  [type="date"],
  [type="datetime-local"],
  [type="time"],
  [type="month"]
)::-webkit-datetime-edit {
  min-inline-size: 0;
  padding: 0;
  text-align: start;
}

label:has(> input:is(
  [type="date"],
  [type="datetime-local"],
  [type="time"],
  [type="month"]
)),
.bcg-temporal-field {
  min-inline-size: 0;
  max-inline-size: 100%;
  block-size: fit-content;
  align-self: start;
}

.bcg-form-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: var(--bcg-form-action-block-size);
  padding-block: 0;
  padding-inline: var(--bcg-control-padding-inline);
  border-radius: var(--bcg-control-radius);
  font-size: var(--bcg-form-action-font-size);
  line-height: 1.2;
}

/* Safari owns the value box of temporal controls. Move the horizontal inset
   into that native box so width:100% remains inside the containing grid. */
@supports (-webkit-touch-callout: none) {
  input:is(
    [type="date"],
    [type="datetime-local"],
    [type="time"],
    [type="month"]
  ) {
    display: inline-flex;
    padding-inline: 0;
  }

  input:is(
    [type="date"],
    [type="datetime-local"],
    [type="time"],
    [type="month"]
  )::-webkit-date-and-time-value {
    padding-inline: var(--bcg-control-padding-inline);
  }
}