/* ----------------------------------------
   BASE ELEMENT STYLES
   Default styling for HTML elements using design tokens.
   Only applies within views that have opted into the new design system.
   Scoped under .pw-layout — non-.pw-layout views get the unscoped backstop
   in app.css instead. (Pico was removed in PR #144; the comment used to
   reference Pico-based views — the modern split is .pw-layout vs. global.)

   PWP-194 disposition (M2 close-out):
   - Bare-input + required-field-indicator + .field_with_errors blocks
     RETIRED in PWP-197 / PR #239. FormFieldComponent owns those now.
   - Heading scale, link color, table/<dl> rules: KEPT as the .pw-layout
     baseline so non-componentized views (which still exist) continue to
     render reasonably.
   - Button rules: MOVED to app.css's global BUTTONS section in PWP-213,
     so every layout shares one set. Keep button selectors out of this
     file (spec/css_debt_spec.rb guards it).
   - Table and <dl> absorption into DataTableComponent /
     DefinitionListComponent: DEFERRED to M(tail). The roughly 16+
     bare-<table> consumer views (member fundraisers, allocations,
     transactions, fulfillment_orders, booth_sales; admin form partials
     in reconciliations, allocations, balances, booth_sales) make this
     project-sized rather than opportunistic.
   - Future cuts should land in the same shape: delete the .pw-layout
     rule when its component owner exists AND has absorbed every
     consumer; never half-migrate.
---------------------------------------- */

.pw-layout {
  font-family: var(--pw-font-sans);
  color: var(--pw-color-text);
  background: var(--pw-color-surface-base);
  line-height: var(--pw-leading-normal);
}

/* Override Pico's .container padding reset at breakpoints */
main.pw-layout {
  padding: var(--pw-space-4) var(--pw-space-6) var(--pw-space-7);
}

.pw-layout h1,
.pw-layout h2,
.pw-layout h3 {
  font-weight: var(--pw-weight-semibold);
  letter-spacing: var(--pw-tracking-tight);
  line-height: var(--pw-leading-tight);
}

.pw-layout h1 { font-size: var(--pw-text-3xl); }
.pw-layout h2 { font-size: var(--pw-text-xl); }
.pw-layout h3 { font-size: var(--pw-text-lg); }

.pw-layout a {
  color: var(--pw-color-link);
  text-decoration: none;
}

.pw-layout a:hover {
  color: var(--pw-color-link-hover);
  text-decoration: underline;
}

/* --- Form fields ---
   Input/select/textarea styling lives in FormFieldComponent's sidecar.
   Every input under .pw-layout flows through FormFieldComponent except for
   inline-widget patterns (target-toggle radios, nested-line-item table
   rows, the sign-in-link readonly display, small inline-form selects);
   those continue to pick up styling from app.css's unscoped backstop. See
   PWP-197 for the full inline-exception list. */
.pw-layout label {
  display: block;
  font-size: var(--pw-text-base);
  font-weight: var(--pw-weight-medium);
  margin-bottom: var(--pw-space-1);
}

/* --- Tables --- */
.pw-layout table {
  width: 100%;
  border-collapse: collapse;
}

.pw-layout th {
  text-align: left;
  font-size: var(--pw-text-sm);
  font-weight: var(--pw-weight-medium);
  color: var(--pw-color-text-muted);
  padding: var(--pw-space-2) var(--pw-space-3);
  border-bottom: 2px solid var(--pw-color-border);
}

.pw-layout td {
  padding: var(--pw-space-3);
  border-bottom: 1px solid var(--pw-color-border);
  font-size: var(--pw-text-base);
}

.pw-layout tbody tr:last-child td {
  border-bottom: none;
}

/* --- Description lists --- */
.pw-layout dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.25rem;
}

.pw-layout dt {
  color: var(--pw-color-text-muted);
  font-size: var(--pw-text-base);
  font-weight: var(--pw-weight-medium);
  padding-top: 0.1rem;
}

.pw-layout dd {
  margin: 0;
}

/* --- Utility --- */
.pw-layout .text-muted {
  color: var(--pw-color-text-muted);
}