/*
 * THE FIELD SURFACE — one box, one owner. The box belongs to the CONTROL inside,
 * and moves HERE only where the surface must hold something beside it; the
 * control then surrenders its border and its inset and this file pays both.
 * Hovering is the BORDER and never a wash, as every other input in the kit does.
 *
 * The ring has exactly one owner: the FIELD, on `:focus-visible` of whatever is
 * in its value SLOT — `:focus-within` would ring it for an `InlineButton` riding
 * beside that slot too, and two rings on one box is the shape §2.3 forbids.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-field-surface {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }


  .lotics-field-surface__field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-6);
    min-width: 0;
    min-height: var(--lotics-control-height);
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
    border-radius: var(--lotics-radius-control);
    background-color: var(--card);
    transition: border-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  /* A value nothing can change must not promise a press, so it gives up the
     frame whatever else it wears. */
  .lotics-field-surface__field[data-disabled],
  .lotics-field-surface__field[data-inert] {
    background-color: transparent;
    border-color: transparent;
  }

  /* Open (a popover showing): the resting surface plus the active ring, identical
     to a focused input. */
  .lotics-field-surface__field[data-active] {
    border-color: var(--border);
    background-color: var(--card);
    box-shadow: 0 0 0 var(--lotics-ring-width) var(--ring);
  }

  .lotics-field-surface__field:not([data-active]):not([data-disabled]):not([data-inert]):hover {
    border-color: var(--lotics-border-hover);
  }

  /* The ring has ONE owner: the box a reader perceives as the field. The `:has`
     reaches into the SLOT rather than the whole field, which stands the ring down
     for a verb riding inside (§2.3). */
  .lotics-field-surface__view:not([data-actions]):focus-visible,
  .lotics-field-surface__field[data-actions]:has(.lotics-field-surface__slot :focus-visible) {
    border-color: var(--border);
    box-shadow: 0 0 0 var(--lotics-ring-width) var(--ring);
  }

  /* The verbs sit ON the surface's own right edge, with the air a `Chip`'s
     dismiss gets, and the value runs flush up to them. */
  .lotics-field-surface__field[data-actions] {
    padding-right: var(--lotics-space-4);
  }

  /* THE SURFACE OWNS THE TEXT INSET wherever the control in its slot draws none;
     on the trigger arm the `view` below carries it instead. */
  .lotics-field-surface__field[data-inset] {
    padding-left: var(--lotics-control-pad-x);
  }

  /* WITH VERBS the trigger surrenders every property the surface owns — and
     states them, or a `<button>` takes the UA's own border and ground. */
  .lotics-field-surface__view[data-actions] {
    padding-right: 0;
    border: 0 solid var(--border);
    border-radius: 0;
    background-color: transparent;
  }

  /* The control's own slot: it takes the slack so the verbs keep the right edge,
     and the saving spinner is positioned against it. */
  .lotics-field-surface__slot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex: 1;
    min-width: 0;
    align-self: stretch;
    position: relative;
  }


  .lotics-field-surface__view {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-6);
    flex: 1;
    min-width: 0;
    align-self: stretch;
    margin: 0;
    padding-inline: var(--lotics-control-pad-x);
    padding-block: var(--lotics-control-pad-y);
    appearance: none;
    text-align: start;
    font-family: var(--font-sans);
    font-size: var(--lotics-input-text);
    line-height: var(--lotics-input-leading);
    letter-spacing: var(--lotics-input-tracking);
    font-weight: var(--lotics-input-weight);
    color: var(--lotics-ink-default);
    /* THE POINTER, like every other control in the kit: the arrow reads as INERT
       and the I-beam promises a caret `user-select: none` denies. */
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* The FIELD paints the ring; a second one here would draw a box tight around
       the value. */
    outline-style: none;
  }

  /* ...and the cursor is half of the press promise, so a field keeping neither
     goes back to the page cursor. */
  .lotics-field-surface__view[data-disabled],
  .lotics-field-surface__view[data-inert] {
    cursor: default;
  }

  /* A NODE states its own alignment: the trigger is a button, whose UA rule
     centres strings. */
  .lotics-field-surface__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    text-align: start;
  }

  /* A value a reader has to read WHOLE reserves the editor's full height, off the
     input rung at the CURRENT width rather than the desktop pair at every one. */
  .lotics-field-surface__field[data-lines] {
    align-items: flex-start;
    min-height: calc(
      var(--lotics-input-leading) * var(--lotics-field-surface-lines) + var(--lotics-space-16)
    );
  }

  .lotics-field-surface__view[data-lines] {
    align-items: flex-start;
    padding-block: var(--lotics-space-8);
  }

  /* THE GLYPH ANSWERS THE SAME GESTURE THE EDGE DOES. The slot deals the ink as
     the ICON's own property so it inherits: an `Icon` given a `color` sets that
     property inline, which no sheet can beat. */
  .lotics-field-surface__trailing {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    --lotics-icon-color: var(--lotics-ink-inactive);
  }

  .lotics-field-surface__field:not([data-disabled]):not([data-inert]):hover
    .lotics-field-surface__trailing,
  .lotics-field-surface__field:not([data-disabled]):not([data-inert]):focus-within
    .lotics-field-surface__trailing {
    --lotics-icon-color: var(--lotics-ink-default);
  }


  /* `align-self: stretch` because a field takes its width from the COLUMN it sits
     in: an `<input>`'s intrinsic width does not shrink and spills leftward. */
  .lotics-field-surface__row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--lotics-space-6);
    align-self: stretch;
    min-width: 0;
  }

  .lotics-field-surface__control {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    position: relative;
  }

  /* The spinner floats inside the control's right edge — it must never push or
     resize the control. */
  .lotics-field-surface__saving {
    position: absolute;
    right: var(--lotics-control-pad-x);
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    pointer-events: none;
  }

  .lotics-field-surface__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* The field beside them gives way; a commit control squeezed to a sliver is a
       target nobody can hit. */
    flex-shrink: 0;
    gap: var(--lotics-space-6);
    height: var(--lotics-control-height);
  }

  .lotics-field-surface__error {
    margin-top: var(--lotics-space-4);
    font-family: var(--font-sans);
    font-size: var(--lotics-text-xs);
    line-height: var(--lotics-leading-xs);
    letter-spacing: var(--lotics-tracking-xs);
    font-weight: var(--lotics-weight-regular);
    color: var(--lotics-ink-danger);
  }
}