/* ===================================================================
   PlatformsCode design system — local adjustments

   Load AFTER css/platformscode.css. The vendored file is kept a faithful
   copy of the published stylesheet so it can be re-pulled on upgrade;
   everything we need to change about it lives here instead.
   =================================================================== */

/* -------------------------------------------------------------------
   1. Focus and active states

   Upstream drives these from React: the component adds a .focus / .active
   class to the wrapper on focus and mousedown. With plain markup there is
   no such JS, so the states are re-expressed with :focus-within, which
   needs no script and also covers keyboard tabbing.
   ------------------------------------------------------------------- */
.input:focus-within::after,
.textarea:focus-within::after {
  width: 100%;
}

.input--lighter:focus-within,
.textarea--lighter:focus-within {
  border: 1px solid var(--colors-gray-neutral-400);
  background-color: var(--colors-base-white);
}

.input--darker:focus-within,
.textarea--darker:focus-within {
  border: 1px solid var(--colors-gray-neutral-400);
  background-color: var(--colors-base-white);
}

/* The DS shows focus only as a 2px underline growing along the bottom
   edge. That is a colour-and-thickness cue on one side, which is easy to
   miss; add a real ring so keyboard focus is unmistakable. */
.input:focus-within,
.textarea:focus-within {
  border-color: var(--colors-gray-neutral-950);
}

/* -------------------------------------------------------------------
   2. Error state on Textarea

   Upstream writes `.textarea--error{outline-color:...}` but never sets an
   `outline`, so the declaration has nothing to colour and the error state
   renders identically to the default one. (The matching `.input--error`
   correctly sets `border-color`.) Mirror the input's behaviour here.
   Remove this block if upstream fixes it.
   ------------------------------------------------------------------- */
.textarea--error,
.textarea--error:hover,
.textarea--error:focus-within {
  border-color: var(--colors-error-600);
}

/* -------------------------------------------------------------------
   3. Fluid width

   `.textarea` ships as a fixed 320px / max 332px block, sized for the
   component gallery. Every textarea on this site sits in a form column
   and is expected to fill it.
   ------------------------------------------------------------------- */
.textarea {
  width: 100%;
  max-width: none;
}