/* RISE Softball — brand polish for form controls.
 *
 * The forms on this site are built from UIkit's .uk-input / .uk-textarea /
 * .uk-select / .uk-form-label, which is the only form CSS actually loaded on the
 * clone pages. UIkit's defaults are fine but generic, and its focus state turns
 * the border #1e87f0 — a stock blue that appears nowhere else in this design.
 * This file does three things and nothing else:
 *
 *   1. a teal focus ring, matching the one already used by the roster filters in
 *      views/class-live.ejs (outline 2px #0b6d68);
 *   2. teal-grey resting borders instead of UIkit's flat #e5e5e5;
 *   3. a brand look for .uk-form-label and the required marker.
 *
 * SELF-SUFFICIENT BY DESIGN. /css/rise.css is NOT loaded on the clone pages, so
 * nothing here may depend on it — no custom properties, no shared resets.
 * Everything is a literal value.
 *
 * SPECIFICITY. Every rule is a plain class selector and no rule uses !important,
 * so a style attribute in a pages row still wins. That is intentional: page
 * bodies are authored in the admin WYSIWYG and their inline styles must remain
 * the last word.
 *
 * WHERE THIS IS LOADED
 * --------------------
 * views/page-simple.ejs — so /about, /directors, /partners and /profile-sheet.
 *
 * NOT loaded on the clone-chrome pages (views/page-render.ejs), which is where
 * /our-mission/contact-us/ lives. Those pages get their brand colour from inline
 * styles on the labels/panel/button instead, and rely on UIkit's own focus state.
 * To bring them in, add one line to views/page-render.ejs alongside the existing
 * conditional asset blocks:
 *
 *   <% if (String(page.body || '').indexOf('uk-form-stacked') !== -1) { %>
 *     <link rel="stylesheet" href="/css/rse-forms.css?v=<%= v %>">
 *   <% } %>
 *
 * page-render.ejs is outside this agent's file ownership, so that line is left
 * for whoever owns the views to add.
 */

/* ---- resting state ---- */
.uk-input,
.uk-select,
.uk-textarea {
  border: 1px solid #cfe0df;
  border-radius: 6px;
  background-color: #fff;
  color: #1c2b2a;
  transition: border-color .12s ease-in-out, box-shadow .12s ease-in-out;
}

.uk-textarea {
  padding: 8px 10px;
  line-height: 1.5;
  /* A textarea that can be dragged wider than its grid cell breaks the layout on
     every viewport. Vertical only. */
  resize: vertical;
}

.uk-input:hover,
.uk-select:hover,
.uk-textarea:hover {
  border-color: #9ec9c6;
}

/* ---- focus ---- */
/* Border colour alone is too quiet to serve as the only focus signal, and it is
   invisible to anyone who cannot distinguish the two greens. The outline is the
   real indicator; the border change is decoration. Not :focus-visible — these
   are text controls, where a pointer user clicking in also wants the signal. */
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
  border-color: #0b6d68;
  outline: 2px solid #0b6d68;
  outline-offset: 1px;
  background-color: #fff;
}

/* ---- invalid ---- */
/* :invalid on its own is wrong: it matches every empty required field the moment
   the page loads, so /profile-sheet opened with two fields already outlined in
   error red before the visitor had typed anything. (That is not hypothetical —
   the first version of this file did it, via :not(:placeholder-shown):invalid,
   which fails whenever the input has no placeholder attribute at all: with no
   placeholder there is nothing to be shown, so :placeholder-shown never matches
   and the negation is always true.)
   :user-invalid is the primitive that actually means "the user has interacted
   with this and it is still wrong". Browsers that do not know it simply drop the
   rule, which leaves the field looking normal — the right way to fail. */
.uk-input:user-invalid,
.uk-select:user-invalid,
.uk-textarea:user-invalid {
  border-color: #cd1f36;
}

.uk-input:user-invalid:focus,
.uk-select:user-invalid:focus,
.uk-textarea:user-invalid:focus {
  border-color: #cd1f36;
  outline-color: #cd1f36;
}

/* ---- labels ---- */
.uk-form-label {
  color: #064443;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: .01em;
}

.uk-form-stacked .uk-form-label {
  margin-bottom: 5px;
}

/* ---- placeholders ---- */
/* UIkit ships #999 on white: 2.85:1, under the 4.5:1 minimum. */
.uk-input::placeholder,
.uk-textarea::placeholder {
  color: #6b7a79;
  opacity: 1;
}

/* ---- disabled ---- */
.uk-input:disabled,
.uk-select:disabled,
.uk-textarea:disabled {
  background-color: #f2f6f6;
  border-color: #dde8e7;
  color: #8a9695;
}

/* ---- the form notes the pages rows carry ---- */
/* These live in the page body with inline styles so they survive on pages this
   stylesheet does not reach. Repeated here without !important so the inline
   values stay authoritative; this only adds what an attribute cannot express. */
[data-rse-formnote],
[data-rse-formerr] {
  font-size: 0.9375rem;
  line-height: 1.45;
}