/* ============================================================
   Twilight Garden — shared form kit (assets/forms.css).
   Inputs, selects, textareas, labels + two buttons, styled to
   the design language (docs/design_language.md) off the tokens
   in assets/tokens.css. Link this AFTER tokens.css; every var()
   carries a literal fallback (house `var(--plum, #4a2a3f)`
   pattern) so the kit degrades sanely without the token layer.

   SCOPING CHOICE — `.tg-form` wrapper, zero-class specificity.
   Every field rule is scoped under a `.tg-form` wrapper class,
   but the wrapper lives inside `:where()` so each selector keeps
   plain ELEMENT-level specificity (0,0,1). Two consequences,
   both deliberate:
     1. Nothing leaks. A page must opt a container in with
        class="tg-form"; linking this file can never restyle an
        existing page's inputs by accident.
     2. Any page rule wins. Even a single-class page override
        (e.g. guild.html's monospace `.sync-row input`) beats the
        kit without `!important`, so pages keep small layout or
        font tweaks on top.
   The two buttons (`.btn-primary` / `.btn-quiet`) are ordinary
   classes usable anywhere — applying them is already the opt-in,
   so they don't need the wrapper.

   Layout stays with the page: the kit deliberately avoids
   margins / flex / min-width on fields, so a page's `.foo input
   { flex: 1; min-width: 10rem; }` row plumbing keeps working.
   (`width: 100%` is safe — flexed items ignore it.)
   ============================================================ */

/* ---- text-ish fields ------------------------------------- */
:where(.tg-form) input[type="text"],
:where(.tg-form) input[type="search"],
:where(.tg-form) input[type="number"],
:where(.tg-form) input[type="date"],
:where(.tg-form) textarea,
:where(.tg-form) select {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.5rem 0.7rem;
  color: var(--ink, #3a2230);
  background: var(--paper-2, #fffaf6);
  border: 1px solid var(--blush, #e89ab4);
  border-radius: 10px;
  transition: border-color 0.12s, box-shadow 0.12s;
}

:where(.tg-form) input::placeholder,
:where(.tg-form) textarea::placeholder {
  color: var(--ink-soft, #8a6b7a);
  opacity: 0.8;
}

/* Focus ring — same 2px rose ring as the nav search box. */
:where(.tg-form) input:focus,
:where(.tg-form) textarea:focus,
:where(.tg-form) select:focus {
  outline: none;
  border-color: var(--rose, #b8395f);
  box-shadow: 0 0 0 2px var(--rose, #b8395f);
}

:where(.tg-form) textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.5;
}

:where(.tg-form) input:disabled,
:where(.tg-form) textarea:disabled,
:where(.tg-form) select:disabled {
  background: var(--paper, #faf3ee);
  color: var(--ink-soft, #8a6b7a);
  cursor: not-allowed;
}

/* ---- labels ------------------------------------------------
   Stacked-field label: small, plum, sits on its own line above
   the control. Inline label layouts (label wrapping a checkbox,
   flex rows) should keep their own page rule — it wins. */
:where(.tg-form) label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--plum-deep, #6b2548);
  margin: 0 0 0.3rem;
}

/* ---- buttons ----------------------------------------------
   .btn-primary — plum-filled pill, the one main action.
   .btn-quiet   — outline pill for secondary / tertiary actions. */
.btn-primary,
.btn-quiet {
  display: inline-block;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1.2rem;
  min-height: 44px; /* comfortable thumb target */
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.btn-primary {
  background: var(--plum-deep, #6b2548);
  color: #fff;
  border: 1px solid var(--plum-deep, #6b2548);
}
.btn-primary:hover {
  background: var(--plum, #4a2a3f);
  border-color: var(--plum, #4a2a3f);
}

.btn-quiet {
  background: var(--card, #ffffff);
  color: var(--plum-deep, #6b2548);
  border: 1px solid var(--blush, #e89ab4);
}
.btn-quiet:hover {
  background: var(--pink-wash, #fde7f0);
  border-color: var(--rose, #b8395f);
}

.btn-primary[disabled],
.btn-quiet[disabled] {
  opacity: 0.6;
  cursor: default;
}

.btn-primary:focus-visible,
.btn-quiet:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--paper, #faf3ee), 0 0 0 4px var(--rose, #b8395f);
}