/*
 * Form controls (README "Inputs"):
 *   .field            label (13px/700, required asterisk #8a2a1d) + control + help (12.5px) / error
 *   .input            48px pill, 1.5px border text 16%, bg, 14.5px. textarea radius 20px.
 *   .input--filled    surface fill, no border (auth screens D-01–D-04)
 *   .input--readonly  transparent with a divider border (D-02 email)
 *   error             2px #b5402c border + 12.5px/700 message (S-11)
 *   .input-wrap       leading icon / trailing action ("Show") around an input
 *   .choice           radio card (A-07 "Who can see it", A-13)
 *   .switch           on/off toggle (A-07 Acknowledgment)
 *   .check            checkbox row
 *   .rules            live password rules (D-02, D-04)
 *   .file-drop        drop zone (A-07, A-05 · add)
 */
@layer components {
  .form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
  }
  .form-grid > .field--wide { grid-column: 1 / -1; }

  .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  .field__label,
  .field > label:first-child {
    font-size: 13px;
    font-weight: 700;
  }
  .field__req { color: var(--color-err-text); }

  .field__help {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--color-neutral-700);
  }

  .field__error {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-err-text);
  }

  .input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    border: 1.5px solid var(--color-input-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 14.5px;
    line-height: 1.5;
    transition: border-color 120ms ease;
  }
  .input::placeholder { color: var(--color-neutral-700); opacity: 1; }
  .input:hover { border-color: color-mix(in srgb, var(--color-text) 30%, transparent); }
  .input:focus,
  .input:focus-visible {
    outline: none;
    border-color: var(--color-blue);
  }

  textarea.input {
    min-height: 84px;
    padding: 14px 18px;
    border-radius: 20px;
    resize: vertical;
  }

  select.input {
    padding-right: 46px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201e1d' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 16px 16px;
    cursor: pointer;
  }

  input[type="date"].input,
  input[type="month"].input { padding-right: 14px; }

  .input--filled {
    border-color: transparent;
    background-color: var(--color-surface);
  }
  .input--filled:hover { border-color: transparent; }
  .input--filled:focus { border-color: var(--color-blue); background-color: var(--color-bg); }

  .input--readonly,
  .input[readonly] {
    border-color: var(--color-divider);
    background-color: transparent;
  }

  .input[aria-invalid="true"],
  .field--error .input {
    padding-left: 17.5px;
    border: 2px solid var(--color-err);
  }

  .input:disabled { color: var(--color-neutral-700); cursor: not-allowed; }

  /* Leading icon / trailing action */
  .input-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
  .input-wrap__icon {
    position: absolute;
    left: 18px;
    font-size: 16px;
    color: var(--color-neutral-700);
    pointer-events: none;
  }
  .input-wrap__icon + .input { padding-left: 44px; }
  /* A leading calendar icon replaces the native date-picker glyph (the picker still opens on click). */
  .input-wrap__icon + .input::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
  .input-wrap__action {
    position: absolute;
    right: 10px;
    height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--color-blue-deep); /* AA on the filled (surface) inputs too */
    font-size: 13px;
    font-weight: 700;
  }
  .input-wrap__action:hover { text-decoration: underline; }
  .input-wrap:has(.input-wrap__action) .input { padding-right: 72px; }
  .input-wrap__end {
    position: absolute;
    right: 18px;
    font-size: 16px;
    color: var(--color-accent-2-700);
    pointer-events: none;
  }

  /* Radio cards -------------------------------------------------------------------------- */
  .choices { display: flex; gap: 10px; }

  .choice {
    position: relative;
    flex: 1;
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    border: 1.5px solid var(--color-divider);
    border-radius: var(--radius-row);
    background: var(--color-bg);
    cursor: pointer;
  }
  .choice:hover { border-color: color-mix(in srgb, var(--color-text) 30%, transparent); }
  .choice:has(input:checked) {
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--color-blue);
  }
  .choice:has(input:focus-visible) { outline: 2px solid var(--color-blue); outline-offset: 3px; }
  .choice:has(input:disabled) { opacity: 0.6; cursor: not-allowed; }

  .choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .choice__dot {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 1px;
    border: 2px solid var(--color-neutral-500);
    border-radius: 50%;
  }
  .choice:has(input:checked) .choice__dot {
    border: 0;
    background: var(--color-blue);
    box-shadow: inset 0 0 0 5px var(--color-bg), 0 0 0 2px var(--color-blue);
  }

  .choice__text { display: flex; flex-direction: column; gap: 2px; }
  .choice__title { font-size: 14.5px; font-weight: 700; }
  .choice__hint { font-size: 12.5px; color: var(--color-neutral-700); }

  /* Switch ------------------------------------------------------------------------------- */
  .switch-row {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .switch-row__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
  .switch-row__title { font-size: 14.5px; font-weight: 700; }
  .switch-row__hint { font-size: 13px; color: var(--color-neutral-700); }

  .switch {
    position: relative;
    width: 44px;
    height: 26px;
    flex: none;
    display: inline-flex;
    padding: 3px;
    border-radius: var(--radius-pill);
    background: var(--color-neutral-400);
    cursor: pointer;
    transition: background-color 120ms ease;
  }
  .switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .switch__knob {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform 120ms ease;
    pointer-events: none;
  }
  .switch:has(input:checked) { background: var(--color-blue); }
  .switch:has(input:checked) .switch__knob { transform: translateX(18px); }
  .switch:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-blue); }
  .switch:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }

  /* Checkbox row ------------------------------------------------------------------------- */
  .check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
  }
  .check input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--color-blue);
  }

  /* Checklist ("Before publishing") */
  .checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    list-style: none;
    font-size: 14px;
  }
  .checklist__item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-neutral-700);
  }
  .checklist__item .icon { font-size: 16px; }
  .checklist__item.is-done { color: var(--color-text); }
  .checklist__item.is-done .icon { color: var(--color-accent-2-700); }

  /* Password rules ----------------------------------------------------------------------- */
  .rules {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 12px;
    padding: 0 6px;
    list-style: none;
  }
  .rule {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-neutral-700);
    font-size: 13px;
  }
  .rule .icon { font-size: 14px; }
  .rule__met { display: none; }
  .rule.is-met {
    color: var(--color-accent-2-800);
    font-weight: 700;
  }
  .rule.is-met .rule__met { display: flex; }
  .rule.is-met .rule__unmet { display: none; }

  /* File drop zone ----------------------------------------------------------------------- */
  .file-drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 72px;
    padding: 12px 18px;
    border: 2px dashed var(--color-neutral-400);
    border-radius: var(--radius-row);
    color: var(--color-neutral-700);
    font-size: 14px;
    text-align: center;
    /* A long list of types wraps into even lines, never a lone "MB". */
    text-wrap: balance;
    cursor: pointer;
  }
  .file-drop .icon { font-size: 18px; }
  .file-drop:hover,
  .file-drop.is-over {
    border-color: var(--color-blue);
    background: color-mix(in srgb, var(--color-blue) 6%, transparent);
  }
  .file-drop:focus-within { outline: 2px solid var(--color-blue); outline-offset: 2px; }
  .file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  .file-drop__name { color: var(--color-text); font-weight: 700; }
  .file-drop__error { flex-basis: 100%; color: var(--color-err-text); font-size: 12.5px; font-weight: 700; }
  .file-drop.is-invalid { border-color: var(--color-err); background: var(--color-err-soft); }

  @media (max-width: 767px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .choices { flex-direction: column; }
    .rules { grid-template-columns: minmax(0, 1fr); }
  }
}