/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* hub-input-padding (2026-08-19) — base padding/touch-target sizing for
   form controls, applied once instead of at each call site.
   The Tailwind forms plugin is not installed and, before this, no file
   under app/assets/stylesheets/ or app/assets/tailwind/ set any default
   input padding — 71 of 73 form-field call sites across app/views had no
   px-/py-/p- utility of their own, so every text field (most visibly the
   hub note composer's textarea) rendered at the browser's ~1px UA default.

   This rule lives inside `@layer base`. shared/_head.html.erb loads
   `tailwind` (app/assets/builds/tailwind.css) before this file, and that
   build already declares the cascade layer order — base, then components,
   then utilities — by being the first stylesheet to introduce each layer
   name. Joining the already-established `base` layer here (from a
   different, later-loaded stylesheet) does not change that order: any
   call site's own Tailwind utility (px-, py-, p-, min-h-, all emitted
   into `@layer utilities`) still wins on the cascade regardless of
   selector specificity, so a field that already sets its own padding
   (e.g. devise/sessions/new.html.erb's px-3 py-2.5, or the deliberately
   compact py-1 px-2 on installs/_dongle_provision_form.html.erb and
   support/households/show.html.erb) is never double-padded or fought —
   it simply keeps its own value, exactly as before this change.

   Values mirror --spacing (0.25rem, from Tailwind's own @theme) at the
   same multiples this app already uses: padding-inline 3 (0.75rem, ==
   px-3) and padding-block 2.5 (0.625rem, == py-2.5) matches the pattern
   devise's auth forms already established; min-height 11 (2.75rem ==
   44px) matches this app's existing min-h-11 touch-target convention
   (see shared/_consumer_page_header.html.erb, hub/_composer.html.erb).

   Excluded — inputs that already have their own control styling and
   would be visually damaged by text-field padding: checkbox, radio,
   range and file inputs (native control chrome, not a text box), hidden
   inputs (never rendered), and submit/button inputs plus <button>
   itself (both styled per call site with their own px-/py- already). */
@layer base {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
  textarea,
  select {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    min-height: calc(var(--spacing) * 11);
  }
}