/* SkiWeather P1215 — canonical component and rhythm contract.
 *
 * Loaded as a late postlude. Surface paint remains owned by skiweather-surface.css
 * and typography by skiweather-type-governance.css. This file owns reusable
 * component geometry/rhythm only, so route/page CSS can focus on composition.
 */

/* --------------------------------------------------------------------------
   Family rhythm
   -------------------------------------------------------------------------- */
body.sw-page-shell {
  --sw-composition-gap: var(--sw-family-card-gap, var(--sw-grid-gap-standard));
  --sw-composition-gap-compact: var(--sw-grid-gap-compact);
  --sw-composition-gap-relaxed: var(--sw-grid-gap-relaxed);
  --sw-composition-pad: var(--sw-family-panel-pad, var(--sw-panel-pad));
  --sw-composition-head-gap: var(--sw-section-head-gap);
  --sw-card-padding: var(--sw-family-card-pad, var(--sw-card-pad-default));
  --sw-card-gap: var(--sw-family-card-gap, var(--sw-grid-gap-standard));
  --sw-card-gap-x: var(--sw-card-gap);
  --sw-card-gap-y: var(--sw-card-gap);
  --sw-content-gap: var(--sw-family-card-gap, var(--sw-grid-gap-standard));
  --sw-section-gap: var(--sw-family-section-gap, var(--sw-section-gap-standard));
  --sw-control-radius: var(--sw-control-radius-canonical);
  --sw-control-padding-x: var(--sw-control-pad-x-canonical);
  --sw-control-padding-y: var(--sw-control-pad-y-canonical);
  --sw-action-padding-x: var(--sw-action-pad-x-canonical);
  --sw-action-padding-y: var(--sw-action-pad-y-canonical);
}

body.sw-page-shell :where(.sw-family-stack, .sw-layout-stack, [data-sw-layout="stack"]) {
  gap: var(--sw-family-section-gap);
}
body.sw-page-shell :where(.sw-layout-grid, .sw-card-grid, .sw-cards-grid, .sw-family-grid) {
  gap: var(--sw-family-card-gap);
}
body.sw-page-shell :where(.sw-family-section-head, .sw-section-heading) {
  gap: var(--sw-section-head-gap);
}

/* --------------------------------------------------------------------------
   Canonical card variants
   -------------------------------------------------------------------------- */
body.sw-page-shell :where(.sw-card, [data-sw-component="card"], [data-sw-component="card-surface"]) {
  --sw-card-pad-current: var(--sw-card-pad-default);
  --sw-card-radius-current: var(--sw-card-radius-default);
  --sw-surface-radius-local: var(--sw-card-radius-current);
  min-width: 0;
}
body.sw-page-shell :where(.sw-card, [data-sw-component="card"], [data-sw-component="card-surface"]) > :where(.sw-card__body, .card-body) {
  padding: var(--sw-card-pad-current) !important;
}
body.sw-page-shell :where(.sw-card-titlebar) {
  gap: var(--sw-card-title-gap);
}
/* Metric surface paint is also used by standalone tiles. A canonical card
 * already has an inner body, so keep outer metric padding at zero and let the
 * card presentation token own the inset once. */
body.sw-page-shell :where(.sw-card.sw-surface--metric, .sw-card[data-sw-surface-variant="metric"]) {
  padding: 0;
}

body.sw-page-shell :where(
  .sw-card--feature,
  [data-sw-card-presentation="feature"],
  [data-sw-card-variant="surface-strong"],
  [data-sw-card-variant="tool"]
) {
  --sw-card-pad-current: var(--sw-card-pad-feature);
  --sw-card-radius-current: var(--sw-card-radius-feature);
}
body.sw-page-shell :where(
  .sw-card--compact,
  .sw-compact-card,
  [data-sw-card-presentation="compact"]
) {
  --sw-card-pad-current: var(--sw-card-pad-compact);
  --sw-card-radius-current: var(--sw-card-radius-compact);
}
body.sw-page-shell :where(
  .sw-card--metric,
  [data-sw-card-presentation="metric"],
  [data-sw-card-variant="metric"],
  [data-sw-card-variant="data"],
  .sw-family-metric
) {
  --sw-card-pad-current: var(--sw-card-pad-metric);
  --sw-card-radius-current: var(--sw-card-radius-metric);
}
body.sw-page-shell :where(
  .sw-card--light,
  [data-sw-card-presentation="light"],
  [data-sw-card-variant="light-result"],
  [data-sw-light-surface]
) {
  --sw-card-pad-current: var(--sw-card-pad-light);
}
body.sw-page-shell[data-sw-family-density="compact"] :where(
  .sw-card:not(.sw-card--feature),
  [data-sw-component="card"]:not([data-sw-card-presentation="feature"]),
  [data-sw-component="card-surface"]:not([data-sw-card-presentation="feature"])
) {
  --sw-card-pad-current: var(--sw-card-pad-compact);
}

/* --------------------------------------------------------------------------
   Controls, actions and toolbars
   -------------------------------------------------------------------------- */
body.sw-page-shell :where(.sw-actions, .sw-card-actions, .sw-form-actions, .sw-family-toolbar, .sw-dt-toolbar__controls) {
  gap: var(--sw-toolbar-gap);
}
body.sw-page-shell :where(.sw-control, .sw-form-control, .sw-filter-control, [data-sw-form-control]) {
  min-height: var(--sw-control-height);
  padding-block: var(--sw-control-padding-y);
  padding-inline: var(--sw-control-padding-x);
  border-radius: var(--sw-control-radius);
}
body.sw-page-shell :where(.sw-action, .sw-card-action) {
  min-height: var(--sw-action-height, 2.2rem);
  padding-block: var(--sw-action-padding-y);
  padding-inline: var(--sw-action-padding-x);
  border-radius: var(--sw-action-radius, var(--sw-action-radius-canonical));
}
body.sw-page-shell :where(.sw-action--compact, .sw-actions--compact .sw-action) {
  min-height: var(--sw-action-height-compact, 1.82rem);
  padding-block: .30rem;
  padding-inline: .58rem;
}
body.sw-page-shell :where(.sw-action--large) {
  min-height: var(--sw-action-height-large, 2.75rem);
  padding-block: .62rem;
  padding-inline: 1rem;
}

/* --------------------------------------------------------------------------
   Pills/tags/status labels: one compact geometry, semantic paint remains local.
   -------------------------------------------------------------------------- */
body.sw-page-shell :where(
  .sw-pill,
  .sw-chip,
  .sw-tag,
  .sw-small-tag,
  .sw-signal-pill,
  .sw-status-indicator,
  .sw-meta-chip,
  [data-sw-ui-role="pill"]
) {
  min-height: var(--sw-pill-min-height);
  gap: var(--sw-pill-gap);
  padding-block: var(--sw-pill-pad-y);
  padding-inline: var(--sw-pill-pad-x);
  border-radius: var(--sw-pill-radius, 999px);
}

/* --------------------------------------------------------------------------
   Form/filter internal rhythm
   -------------------------------------------------------------------------- */
body.sw-page-shell .sw-form-grid {
  gap: var(--sw-family-card-gap);
}
body.sw-page-shell :where(.sw-form-label-row, .sw-form-range-card__head) {
  gap: var(--sw-control-gap);
}
body.sw-page-shell .sw-form-range-card {
  padding: var(--sw-card-pad-compact);
  border-radius: var(--sw-card-radius-compact);
}
body.sw-page-shell .sw-form-actions {
  margin-top: var(--sw-rhythm-7);
  padding-top: var(--sw-rhythm-6);
}
body.sw-page-shell .sw-filter-panel__header,
body.sw-page-shell .sw-filter-panel__footer {
  gap: var(--sw-control-gap);
  padding: var(--sw-card-pad-compact) var(--sw-card-pad-default);
}
body.sw-page-shell .sw-filter-panel__content {
  padding: var(--sw-card-pad-default);
}
body.sw-page-shell .sw-filter-group + .sw-filter-group {
  margin-top: var(--sw-stack-gap);
}

/* --------------------------------------------------------------------------
   Tables. Table typography/color stays in skiweather-data-table.css and the
   type governance postlude; only cell rhythm is centralized here.
   -------------------------------------------------------------------------- */
body.sw-page-datatable .sw-dt-table-frame table.dataTable thead tr:first-child th,
body.sw-page-datatable .sw-dt-table-frame table.dataTable thead tr:nth-child(2) th,
body.sw-page-datatable .sw-dt-table-frame table.dataTable thead tr:only-child th {
  padding: var(--sw-table-head-py) var(--sw-table-head-px) !important;
}
body.sw-page-datatable .sw-dt-table-frame table.dataTable tbody td {
  padding: var(--sw-table-cell-py) var(--sw-table-cell-px) !important;
}
body.sw-page-datatable .sw-datatable-card[data-sw-dt-density="compact"] .sw-dt-table-frame table.dataTable thead tr:first-child th,
body.sw-page-datatable .sw-datatable-card[data-sw-dt-density="compact"] .sw-dt-table-frame table.dataTable thead tr:nth-child(2) th,
body.sw-page-datatable .sw-datatable-card[data-sw-dt-density="compact"] .sw-dt-table-frame table.dataTable thead tr:only-child th {
  padding: var(--sw-table-head-py-compact) var(--sw-table-head-px-compact) !important;
}
body.sw-page-datatable .sw-datatable-card[data-sw-dt-density="compact"] .sw-dt-table-frame table.dataTable tbody td {
  padding: var(--sw-table-cell-py-compact) var(--sw-table-cell-px-compact) !important;
}

/* --------------------------------------------------------------------------
   Hero + floating geometry aliases
   -------------------------------------------------------------------------- */
body.sw-page-shell .sw-clean-slant-hero__grid {
  gap: var(--sw-hero-content-gap);
}
body.sw-page-shell :where(.sw-clean-slant-hero__copy, .sw-hero-copy) {
  row-gap: var(--sw-hero-copy-gap);
}
body.sw-page-shell :where(.sw-floating-control, .sw-floating-action, [data-sw-floating-control]) {
  border-radius: var(--sw-action-radius-canonical);
}

@media (max-width: 767.98px), (pointer: coarse) {
  body.sw-page-shell {
    --sw-card-pad-default: .82rem;
    --sw-card-pad-feature: .94rem;
    --sw-card-pad-light: .82rem;
    --sw-table-cell-px: .42rem;
    --sw-table-cell-py: .34rem;
    --sw-table-head-px: .42rem;
    --sw-table-head-py: .33rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sw-page-shell :where(.sw-card, .sw-action, .sw-control, .sw-filter-control) {
    transition-duration: 0s !important;
  }
}