/* ============================================================
   clearable.css — Field Portal "clear ×" affix.
   Self-contained module (pairs with assets/js/clearable.js). A small ×
   appears at the RIGHT end of a free-type text field ONLY when it holds a
   value; tapping it wipes the field. The field's right EDGE never moves —
   the × sits just inside the field's reserved right padding.

   Brand law: square corners (border-radius:0), no circles. Desktop = small
   + unobtrusive; mobile (≤640px) = a full 44px thumb target.

   SCOPE (owner-confirmed): text .input + textarea.input only. NOT selects,
   date/time, or anything in the photos
   step (.wr-photos-step / .tt-photos-step). The JS enforces the same scope.
   ============================================================ */

/* ---- WRAPPER --------------------------------------------------------------
   clearable.js wraps each eligible field in <span class="clearable">. The
   span is a transparent positioning context that must inherit the field's
   old layout role in whatever parent it sits in. */
.clearable {
  position: relative;
  display: block;            /* block + grid parents: fills width like the input did */
  min-width: 0;              /* let it shrink inside flex / grid tracks */
}
/* Flex line rows (repeatable items): the wrapper takes the input's old
   flex:1 1 auto so it still stretches next to the remove handle. */
.repeat-row-inner > .clearable { flex: 1 1 auto; }

/* Reserve room at the right so typed text never runs under the ×. Reserved
   ALWAYS (even when empty) → the × can toggle with zero layout shift. */
.clearable > .input { padding-right: 38px; }

/* ---- THE CLEAR BUTTON -----------------------------------------------------
   Absolutely placed inside the field's right padding. right:0 == the input's
   right edge, so the edge stays exactly where the layout put it. */
.clearable > .clear {
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;               /* desktop: small hit area, glyph centred in the pad */
  height: 100%;              /* full field height → glyph vertically centred */
  display: none;             /* hidden until the field carries a value */
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;          /* brand: square corners, never a circle */
  background: transparent;
  color: var(--text-3, #8D8D8D);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color var(--dur, 0.2s) var(--ease-out, ease);
  z-index: 2;
}
.clearable.has-value > .clear { display: flex; }

.clearable > .clear svg {
  width: 15px;
  height: 15px;
  display: block;
  pointer-events: none;      /* clicks always resolve to the button, not the glyph */
}

/* Affordance — darken on hover / focus (no shape change, stays square). */
.clearable > .clear:hover,
.clearable > .clear:focus-visible { color: var(--text, #1A1A1A); }
.clearable > .clear:focus-visible {
  outline: 2px solid var(--text-3, #8D8D8D);
  outline-offset: -2px;
}

/* Textareas are tall — pin the × to the TOP-right corner (clear of the
   bottom-right resize grip) instead of vertically centring it. */
.clearable--area > .clear {
  top: 4px;
  height: 34px;
}

/* ---- META-GRID BASELINE PIN (mirrored) -----------------------------------
   The Site/Project input is pinned to the bottom of its meta-grid cell via
   `.field > .input { margin-top:auto }` (weekly-report.css / toolbox-talk.css).
   Wrapping it moves the input out of that direct-child match, so the wrapper
   must carry the pin instead — keeping the cell baselines aligned. */
.wr-meta-grid .field > .clearable,
.tt-meta-grid .field > .clearable { margin-top: auto; }

/* ---- MOBILE ≤640px — 44px thumb target ------------------------------------ */
@media (max-width: 640px) {
  .clearable > .input { padding-right: 46px; }
  .clearable > .clear { width: 44px; }
  .clearable > .clear svg { width: 17px; height: 17px; }
  .clearable--area > .clear { top: 2px; height: 44px; }

  /* Single-column meta grid drops the baseline pin (mirrors the page CSS). */
  .wr-meta-grid .field > .clearable,
  .tt-meta-grid .field > .clearable { margin-top: 0; }
}

/* ---- PRINT — the affix never appears in the exported PDF ------------------ */
@media print {
  .clearable > .clear { display: none !important; }
  .clearable > .input { padding-right: 12px; }
  .wr-meta-grid .field > .clearable,
  .tt-meta-grid .field > .clearable { margin-top: 0; }
}