/* ============================================================
   FIELD — text / select / time
   ------------------------------------------------------------
       <label class="ice-field">
         <svg class="ice-field__icon">…</svg>
         <input class="ice-field__input" value="08:00">
         <svg class="ice-field__icon">…</svg>
       </label>

   THE CONTAINER IS A <label>, ALWAYS. That single choice is what
   makes the whole box the input: a click on the icon, on the
   padding, on the empty space between the two icons all land on the
   control, because that is what a label does. No JavaScript, no
   click handler, no invisible overlay. The <input> carries no box of
   its own — no border, no background, no padding, no outline — so
   there is never a field inside the field.

   Three sizes, four states. Every state is an elevation, so the
   field never declares a fill, a shadow or a blur of its own —
   only its stroke, which is the one thing it does not share with
   the surfaces — and unlike the surfaces, that stroke is ONE flat
   colour, not a lit/shaded pair. Figma 67:3350. Dropdowns use the
   same recipe.
   ============================================================ */

.ice-field {
  display: flex;
  align-items: center;
  /* Default = md. */
  block-size: var(--height-l);
  padding-inline: var(--space-20);
  gap: var(--space-12);
  border-radius: var(--radius-12);
  border: var(--border-w) solid var(--_bd);

  font-size: var(--type-h6-size);
  line-height: var(--type-h6-leading);
  letter-spacing: var(--type-h6-track);

  background-image: var(--_img);
  box-shadow: var(--_sh);
  backdrop-filter: blur(var(--_blur));
  -webkit-backdrop-filter: blur(var(--_blur));

  color: var(--fg-high);
  cursor: text;
  transition: background-image var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);

  /* Empty and at rest: elevation 2, the quietest glass. */
  --_img:    var(--elev-primary-2-image);
  --_sh:     var(--shadow-xs);
  --_blur:   var(--shadow-xs-blur);
  --_bd:     var(--field-border);
}

/* --- Sizes — Figma 67:3350 --- */
.ice-field[data-size="sm"] {
  block-size: var(--height-m);
  padding-inline: var(--space-16);
  gap: var(--space-10);
  border-radius: var(--radius-9);
  font-size: var(--type-h7-size);
  line-height: var(--type-h7-leading);
  letter-spacing: var(--type-h7-track);
}
.ice-field[data-size="sm"] .ice-field__icon { inline-size: var(--icon-s); block-size: var(--icon-s); }
.ice-field[data-size="md"] {
  block-size: var(--height-l);
  padding-inline: var(--space-20);
  gap: var(--space-12);
  border-radius: var(--radius-12);
  font-size: var(--type-h6-size);
  line-height: var(--type-h6-leading);
  letter-spacing: var(--type-h6-track);
}
.ice-field[data-size="md"] .ice-field__icon { inline-size: var(--icon-m); block-size: var(--icon-m); }
.ice-field[data-size="lg"] {
  block-size: var(--height-xl);
  padding-inline: var(--space-24);
  gap: var(--space-16);
  border-radius: var(--radius-16);
  font-size: var(--type-h5-size);
  line-height: var(--type-h5-leading);
  letter-spacing: var(--type-h5-track);
}
.ice-field[data-size="lg"] .ice-field__icon { inline-size: var(--icon-l); block-size: var(--icon-l); }

/* --- States -------------------------------------------------
   Four, and each is an elevation. Filled is detected from the
   markup: put data-filled on the field when it carries a value.

     empty         elevation 2, ice-grey-400 30%, shadow XS
     filled        elevation 3, ice-grey-500 50%, shadow M
     focus         elevation 4, vivid-blue-500,   shadow highlight

   Focus is a single state, identical whether the field carries a
   value or not. The icon and the label follow the VALUE, not the
   focus. Figma 67:3350 and 68:4577.                             */
.ice-field[data-filled] {
  --_img:    var(--elev-primary-3-image);
  --_sh:     var(--shadow-m);
  --_blur:   var(--shadow-m-blur);
  --_bd:     var(--field-border-filled);
}
/* Focus is ONE state — empty and filled are drawn identically. */
.ice-field:focus-within {
  --_img:    var(--elev-primary-4-image);
  --_sh:     var(--shadow-highlight);
  --_blur:   var(--shadow-highlight-blur);
  --_bd:     var(--field-border-focus);
}

/* The input has no box of its own — the field IS the box. Both
   background longhands, because the UA gives every control an opaque
   `field` colour and clearing only the image leaves a white slab
   sitting inside the glass. */
.ice-field__input {
  flex: 1 0 0;
  align-self: stretch;          /* the whole row is the text target */
  min-inline-size: 0;
  border: none;
  background-color: transparent;
  background-image: none;
  outline: none;
  padding: 0;
  font-size: var(--type-h6-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-h6-leading);
  letter-spacing: var(--type-h6-track);
  color: var(--fg-high);
}
/* The focus ring is the FIELD, not the input: the box changes
   elevation, shadow and stroke on :focus-within. The reset's
   :focus-visible ring would draw a second one inside it — and a text
   input is focus-visible even on a mouse click, so it showed every
   time. */
.ice-field__input:focus-visible { box-shadow: none; }

.ice-field__input::placeholder {
  color: var(--field-placeholder);
  font-weight: var(--weight-regular);
  opacity: .8;
}

/* Native select needs its own chrome removed. */
select.ice-field__input { appearance: none; cursor: pointer; }

/* The icon states, Figma 68:4577. Focus changes nothing here —
   only whether the field carries a value does. */
.ice-field__icon {
  inline-size: var(--icon-m);
  block-size:  var(--icon-m);
  flex-shrink: 0;
  color: var(--field-icon);
  opacity: .5;
}
.ice-field[data-filled] .ice-field__icon {
  color: var(--field-icon-filled);
  opacity: .8;
}

.ice-field[data-disabled] { opacity: .5; pointer-events: none; }

/* --- Multiline ----------------------------------------------
   Onboarding step 1's "Décrivez votre activité". Same box, taller,
   content aligned to the top.                                    */
.ice-field[data-multiline] {
  block-size: auto;
  min-block-size: var(--w-150);
  align-items: flex-start;
  padding-block: var(--space-12);
  cursor: text;
}
.ice-field[data-multiline] .ice-field__input {
  font-size: var(--type-body-m-size);
  align-self: stretch;
  resize: none;
  line-height: var(--type-body-m-leading);
  font-weight: var(--weight-medium);
}

/* An action sitting inside the field (clear ✕, reveal password).
   It is a normal .ice-icon-btn — the field just stops forcing the
   text cursor over it. */
.ice-field > .ice-icon-btn { cursor: pointer; margin-inline-end: calc(var(--space-8) * -1); }

/* Nothing to clear on an empty field, so nothing to click. */
.ice-field:not([data-filled]) > .ice-icon-btn[aria-label="Effacer"] { display: none; }

/* --- Group: label above, hint below -------------------------- */
.ice-field-group { display: flex; flex-direction: column; gap: var(--space-2); }
.ice-field-group > .ice-caps-m {
  padding-inline: var(--space-20);
  padding-block: var(--space-4);
  color: var(--fg-medium);
  opacity: .7;
}

.ice-field-hint {
  align-self: flex-end;
  padding-inline: var(--space-20);
  padding-block-start: var(--space-8);
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-leading);
  letter-spacing: var(--type-body-s-track);
  color: var(--fg-low);
  opacity: .8;
}
.ice-field-hint[data-tone="success"] { color: var(--fg-success); }

/* --- Featured group -----------------------------------------
   The panel wrapping the website field in onboarding step 1. It
   is a field group that has been promoted, not a new component.

   At rest it is bare — 12 of padding and nothing else. That
   padding is why the panel is 24 wider than the column it sits in
   (500 → 524): the field inside stays flush with everything below
   it. The overhang itself belongs to the page, not the component —
   see .ice-onboarding__col in layout/_onboarding.css.

   The ring is reserved transparent so lighting it on success
   cannot move the field by a pixel. Figma 87:18634.              */
.ice-field-group[data-featured] {
  gap: var(--space-4);
  padding: var(--space-12);
  border-radius: var(--radius-16);
  border: var(--border-w) solid transparent;
}

/* Once the site has been read, the panel says so: it takes the
   success elevation whole — fill, stroke and all — over shadow S.
   Figma 26:6416. */
.ice-field-group[data-featured][data-state="success"] {
  border-color: var(--elev-success-border-lit) var(--elev-success-border-lit)
                var(--elev-success-border)     var(--elev-success-border);
  background-image: var(--elev-success-glows), var(--elev-success-image);
  box-shadow: var(--shadow-s);
  backdrop-filter: blur(var(--shadow-s-blur));
  -webkit-backdrop-filter: blur(var(--shadow-s-blur));
}

/* The two buttons under the website field: right-aligned, and
   nothing else in the system stacks buttons this tight. */
.ice-field-group__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-6);
  padding-block-start: var(--space-8);
}