/* Campi dei moduli: campo di testo, area di testo, select, selettore a pillole (switch), caselle, consenso,
   campo con etichetta ed errori (.vf, components/form_field.html), errore generale del modulo.
   Tutti alti --field-h, a pillola, su fondo --tint; il focus e' un anello --accent. */

@layer components {
  /* Etichetta sopra un controllo */
  .label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--step-small);
    font-weight: 500;
    color: var(--ink-soft);
  }

  /* ---------- Campo di testo, con icona facoltativa a sinistra ---------- */
  .field {
    position: relative;
    display: block;

    & > .icon {
      position: absolute;
      left: 14px;
      top: 50%;
      translate: 0 -50%;
      width: 18px;
      height: 18px;
      color: var(--accent);
      pointer-events: none;
    }

    & input {
      width: 100%;
      height: var(--field-h);
      padding: 0 16px;
      border: 0;
      border-radius: var(--r-pill);
      background: var(--tint);
      color: var(--ink);
      font: 500 var(--step-small) var(--font);
      box-shadow: inset 0 0 0 1px transparent;
      transition: box-shadow var(--dur-fast) var(--ease);
    }
    & > .icon + input { padding-left: 40px; }

    & input::placeholder { color: var(--ink-soft); font-weight: 400; }
    & input:hover { box-shadow: inset 0 0 0 1px var(--line); }
    & input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
    & input:user-invalid { box-shadow: inset 0 0 0 2px var(--heart); }
  }

  /* ---------- Area di testo: come il campo, ma con gli angoli del pannello ---------- */
  .field textarea {
    display: block;
    width: 100%;
    min-height: 112px;
    padding: 14px 16px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--tint);
    color: var(--ink);
    font: 500 var(--step-small)/var(--lh-text) var(--font);
    resize: vertical;
    box-shadow: inset 0 0 0 1px transparent;
    transition: box-shadow var(--dur-fast) var(--ease);

    &::placeholder { color: var(--ink-soft); font-weight: 400; }
    &:hover { box-shadow: inset 0 0 0 1px var(--line); }
    &:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
  }

  /* ---------- Campo con etichetta ed errori (components/form_field.html) ---------- */
  .vf {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;

    & .select { width: 100%; }
    & .label { padding: 0; }
  }
  .vf-error { margin-top: 6px; color: var(--heart); font-size: var(--step-small); font-weight: 500; }
  .vf-hint { margin-top: 6px; color: var(--ink-soft); font-size: var(--step-small); }
  .vf.has-error :is(.field input, .field textarea, .select) { box-shadow: inset 0 0 0 2px var(--heart); }

  /* Errore generale del modulo, sopra i campi */
  .form-error {
    padding: 14px 18px;
    border-radius: var(--r-md);
    background: var(--ground);
    box-shadow: inset 0 0 0 2px var(--heart);
    font-size: var(--step-small);
    font-weight: 500;
  }

  /* ---------- Casella a pillola: la casella resta (accessibile), la pillola si accende quando e' spuntata ----------
     <div class="checks-list"><label class="check"><input type="checkbox"> <span>Testo</span></label>...</div>
     Il gruppo da un campo a scelta multipla: components/check_group.html */
  .checks-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .checks legend { padding: 0; }
  .check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--field-h);
    padding: 8px 18px 8px 14px;
    border-radius: var(--r-pill);
    background: var(--tint);
    font-size: var(--step-small);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);

    &:hover { box-shadow: inset 0 0 0 1px var(--line); }
    &:has(input:checked) { background: var(--accent-soft); }
    &:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent); }
    & input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
  }

  /* ---------- Consenso: casella e testo lungo, con il link all'informativa. panel = su un riquadro --tint ---------- */
  .consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--step-small);
    line-height: var(--lh-text);

    & input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
    & label { cursor: pointer; }
    & a { color: var(--accent); font-weight: 500; text-underline-offset: 3px; }
    &.has-error input { outline: 2px solid var(--heart); outline-offset: 2px; }

    &.panel { padding: 16px 18px; border-radius: var(--r-md); background: var(--tint); }
    &.panel.has-error { box-shadow: inset 0 0 0 2px var(--heart); }
    &.panel.has-error input { outline: 0; }
  }

  /* ---------- Select ----------
     Dove il browser lo permette (appearance: base-select) la tendina e' disegnata da noi;
     altrove resta la tendina di sistema, con la stessa pillola chiusa. */
  /* Campi, caselle e select disattivi: sbiaditi come i bottoni */
  .field:has(:is(input, textarea):disabled), .check:has(input:disabled), .select:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
  .check:has(input:disabled) input, .field :disabled { cursor: not-allowed; }

  .select {
    --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2310291F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    appearance: none;
    height: var(--field-h);
    padding: 0 40px 0 16px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--tint) var(--chev) no-repeat right 16px center / 11px 7px;
    color: var(--ink);
    font: 500 var(--step-small) var(--font);
    box-shadow: inset 0 0 0 1px transparent;
    cursor: pointer;
    transition: box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);

    &:hover { box-shadow: inset 0 0 0 1px var(--line); }
    &:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
    &.is-set { background-color: var(--accent-soft); } /* un valore diverso da "tutti" */
  }

  @supports (appearance: base-select) {
    .select, .select::picker(select) { appearance: base-select; }

    .select {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-right: 16px;
      background-image: none;

      /* il testo prende lo spazio che c'e': la freccia sta al bordo destro della pillola, a qualunque larghezza */
      & > button {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        font: inherit;
        text-align: start;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: inherit;
      }

      &::picker-icon {
        content: "";
        flex: none;
        width: 11px;
        height: 7px;
        margin-left: auto;
        background: var(--chev) center / contain no-repeat;
        transition: transform var(--dur) var(--ease);
      }
      &:open { box-shadow: inset 0 0 0 2px var(--ink); }
      &:open::picker-icon { transform: rotate(180deg); }

      &::picker(select) {
        min-width: 220px;
        max-height: 340px;
        margin-top: 6px;
        padding: 6px;
        border: 0;
        border-radius: 16px;
        background: var(--ground);
        box-shadow: var(--shadow-menu);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--line) transparent;
        opacity: 0;
        transform: translateY(-6px) scale(.98);
        transform-origin: top center;
        transition: opacity var(--dur-fast) var(--ease), transform .25s var(--ease), overlay .25s allow-discrete, display .25s allow-discrete;
      }
      &::picker(select):popover-open { opacity: 1; transform: none; }

      & option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        color: var(--ink);
        font: 500 var(--step-small) var(--font);
        cursor: pointer;
      }
      & option:is(:hover, :focus-visible) { background: var(--tint); outline: none; }
      & option:checked { background: var(--accent-soft); font-weight: 600; }
      & option::checkmark { order: 1; margin-left: auto; content: "✓"; color: var(--accent); }
    }

    @starting-style {
      .select::picker(select):popover-open { opacity: 0; transform: translateY(-6px) scale(.98); }
    }
  }

  /* ---------- Selettore a pillole: radio nascosti + etichette, la pillola verde chiaro (--accent-soft) scorre ----------
     <div class="switch"> input+label ripetuti (da 2 a 5), poi <span class="switch-thumb"></span> */
  .switch {
    --n: 3;
    --i: 0;

    position: relative;
    isolation: isolate;
    display: inline-grid;
    grid-template-columns: repeat(var(--n), 1fr);
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--tint);

    &.light { background: var(--ground); } /* su un pannello --tint */
    &.block { display: grid; }
    &.compact label { min-width: 36px; padding: 0 10px; } /* voci brevi: 1, 2, 3, 4+ */
    /* colonne larghe quanto il loro testo, per le barre strette: la voce scelta si colora senza la pillola che scorre */
    &.fit { grid-template-columns: repeat(var(--n), auto); }
    &.fit .switch-thumb { display: none; }
    &.fit input:checked + label { background: var(--accent-soft); }

    & input { position: absolute; opacity: 0; width: 1px; height: 1px; }

    & label {
      position: relative;
      z-index: 1;
      display: grid;
      grid-auto-flow: column;
      gap: 8px;
      place-items: center;
      min-width: var(--field-h);
      height: 36px;
      padding: 0 16px;
      border-radius: var(--r-pill);
      color: var(--ink);
      font-size: var(--step-small);
      font-weight: 500;
      white-space: nowrap;
      user-select: none;
      cursor: pointer;
      transition: color var(--dur) var(--ease);
    }
    & label .icon { width: 16px; height: 16px; }
    & input:checked + label { color: var(--ink); }
    & input:not(:checked) + label:hover { background: var(--tint-2); }
    & input:disabled + label { opacity: var(--disabled-opacity); color: var(--ink); cursor: not-allowed; }
    & input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }

    /* quante voci: contate dal CSS, nessuno stile in linea */
    &:has(> input:nth-of-type(2):last-of-type) { --n: 2; }
    &:has(> input:nth-of-type(4):last-of-type) { --n: 4; }
    &:has(> input:nth-of-type(5):last-of-type) { --n: 5; }

    &:has(> input:nth-of-type(2):checked) { --i: 1; }
    &:has(> input:nth-of-type(3):checked) { --i: 2; }
    &:has(> input:nth-of-type(4):checked) { --i: 3; }
    &:has(> input:nth-of-type(5):checked) { --i: 4; }
  }

  .switch-thumb {
    position: absolute;
    z-index: 0;
    inset-block: 4px;
    left: 4px;
    width: calc((100% - 8px) / var(--n));
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    transform: translateX(calc(100% * var(--i)));
    transition: transform .5s var(--ease-spring), opacity .25s var(--ease), scale .25s var(--ease);
  }
  .switch:not(:has(> input:checked)) .switch-thumb { opacity: 0; scale: .6; }

  @media (prefers-reduced-motion: reduce) {
    .switch-thumb { transition: none; }
  }
}

/* Senza :has() la pillola non scorre: l'etichetta scelta prende il verde chiaro da sola */
@supports not selector(:has(*)) {
  @layer components {
    .switch input:checked + label { background: var(--accent-soft); }
    .switch-thumb { display: none; }
  }
}