/* static/css/components/field.css
   The form-field component (input/select). Reads component tokens (--field-*)
   defined on :root below, which resolve from tokens.css. Never hardcode a value
   in this file. (Pre-teardown these were re-pointed per-page by compat.css;
   that layer is gone as of Phase-D slice 4c — there is one brand now.)

   Selectors are kept identical to the legacy rule they replace (the retired
   styles.css, pre-Phase-3) so every existing <input>/<select> inside a <form>
   keeps its look automatically — no new class required. A `.th-field` class is added
   for NEW markup (see templates/components/field.html) that isn't already
   covered by these element selectors. */
:root{
  --field-bg:var(--color-surface);
  /* The field's ink, and the reason the shared rule below declares `color` at
     all. A surface that changes the field's ground re-points this token rather
     than overriding `color` on `.th-field`: pages/about.css's navy ask panel
     (--th-white) and pages/login.css's `.login-hero .th-field` (--th-ink) are
     the two consumers. A custom property declared on the element wins whatever
     the weight of the rule below, so neither page has to out-weigh it.
     ⚠️ Adding the declaration was not a no-op *by inheritance* everywhere: on
     `/login` the fields sit inside `.hero-content`/`.dark-glass-backdrop`, which
     set `color:var(--th-white)`, so before this existed their inherited ink was
     white on a white fill, rescued only by a plain `color:var(--th-ink)` that
     won on selector weight. Declaring `color` here takes inheritance out of the
     question for every field in the app: whatever the ancestors say, a field
     resolves this token, defaulting to --color-text. That removed the cliff --
     there is no longer a page whose readability depends on a rule that reads as
     redundant. */
  --field-fg:var(--color-text);
  --field-border-color:var(--color-border);
  --field-radius:var(--radius-xs);
  --field-pad:var(--space-2xs);
  --field-fs:var(--fs-base);
  --field-width:100%;
  --field-focus-border:var(--color-action);
  --field-transition:border-color var(--dur-quick) var(--ease);
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="date"],
form select,
.th-field{
  padding:var(--field-pad);
  border:1px solid var(--field-border-color);
  border-radius:var(--field-radius);
  font-size:var(--field-fs);
  width:var(--field-width);
  box-sizing:border-box;
  background-color:var(--field-bg);
  color:var(--field-fg);
  transition:var(--field-transition);
}

/* Mobile field shrink (moved verbatim from the retired styles.css, the
   `form input[...]:not(select)` block inside @media max-width:768px). Must come
   AFTER the base rule above — a @media wrapper adds no specificity, so source
   order is what makes it win at <768px.
   It also dropped a `padding: var(--space-2xs)` declaration at Phase-D slice 4c:
   that is the exact value `--field-pad` already resolves to, so it had been a
   no-op ever since the central brand flip removed compat.css's `--field-*`
   re-pointing (2026-07-06) — the comment claiming it fought "the desktop
   12px/16px legacy values" was stale, not load-bearing.
   Deliberately excludes `form select`, which never had a mobile override. */
@media (max-width:768px){
  form input[type="text"],
  form input[type="email"],
  form input[type="password"],
  form input[type="date"]{
    font-size: var(--fs-xs);
  }
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form input[type="date"]:focus,
form select:focus,
.th-field:focus{
  border-color:var(--field-focus-border);
  outline:none;
}

.th-field--textarea{
  resize:vertical;
}

/* Select: strip native chrome and draw a tokenized chevron via a wrapper
   ::after. (A <select> is a replaced element and can't host ::after itself.)
   Wrap the select: <div class="th-select-wrap"><select class="th-field">…</select></div>.
   The data-URI is used as a MASK (alpha only) — colour comes from
   background-color:var(--color-heading), so it stays tokenized. */
:root{
  --field-select-arrow: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 1L6 6L11 1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.th-select-wrap{ position:relative; display:block; }
.th-select-wrap > select{
  appearance:none; -webkit-appearance:none;
  padding-right:var(--space-xl);
}
.th-select-wrap::after{
  content:""; position:absolute; right:var(--space-xs); top:0; bottom:0;
  margin-block:auto;
  width:0.75em; height:0.5em;
  pointer-events:none;
  background-color:var(--color-heading);
  -webkit-mask:var(--field-select-arrow) center / contain no-repeat;
  mask:var(--field-select-arrow) center / contain no-repeat;
}