/* ----------------------------------------
   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, button shape, link color, table/<dl> rules: KEPT as
     the .pw-layout baseline so non-componentized views (which still
     exist) continue to render reasonably.
   - 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-orange-base);
  text-decoration: none;
}

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

/* --- Buttons --- */
.pw-layout button,
.pw-layout [type="button"],
.pw-layout [type="submit"],
.pw-layout [type="reset"],
.pw-layout [role="button"] {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-2);
  font-family: var(--pw-font-sans);
  font-size: var(--pw-text-base);
  font-weight: var(--pw-weight-medium);
  padding: 0.45rem 1.25rem;
  border: 1px solid var(--pw-color-orange-base);
  border-radius: var(--pw-radius-full);
  background: var(--pw-color-orange-base);
  color: var(--pw-color-text-inverse);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pw-layout button:hover,
.pw-layout [type="button"]:hover,
.pw-layout [type="submit"]:hover,
.pw-layout [type="reset"]:hover,
.pw-layout [role="button"]:hover {
  background: var(--pw-color-orange-deep);
  border-color: var(--pw-color-orange-deep);
  color: var(--pw-color-text-inverse);
}

.pw-layout :is(button, [type="button"], [type="submit"], [type="reset"], [role="button"]).outline {
  background: transparent;
  border-color: var(--pw-color-orange-base);
  color: var(--pw-color-orange-base);
}

.pw-layout :is(button, [type="button"], [type="submit"], [type="reset"], [role="button"]).outline:hover {
  background: transparent;
  border-color: var(--pw-color-orange-deep);
  color: var(--pw-color-orange-deep);
}

/* --- 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);
}