/* Shared page structure, surfaces, and composition patterns. */

.stack-page {
  display: grid;
  gap: var(--space-5);
}

.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  gap: var(--space-4);
  align-items: start;
}

.page-grid-balanced {
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
}

.stack-section,
.stack,
.content-stack {
  display: grid;
  gap: var(--space-4);
}

.page-grid + .stack,
.page-grid + .content-stack {
  margin-top: var(--space-5);
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}

.page-title-group {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.page-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--app-brand-700);
}

.page-subtitle {
  margin: 0;
  font-size: 0.82rem;

  /* 4.44:1 on the page grey with the bare token; a touch darker clears AA. */
  color: color-mix(in srgb, var(--app-text-muted) 88%, var(--app-text-strong));
}

.page-kicker {
  margin: 0 0 0.1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--app-text-muted);
}

.page-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 0.35rem;
}

.page-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--app-text-muted) 88%, var(--app-text-strong));
  text-decoration: none;
  margin-bottom: 0.15rem;
}

.page-back-link:hover,
.page-back-link:focus {
  color: var(--app-brand-700);
  text-decoration: underline;
}

.page-back-link i {
  font-size: 0.95rem;
}

.page-actions,
.action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}

.section-head {
  display: grid;
  gap: var(--space-1);
}

.section-head-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

.section-title-group {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.section-title,
.section-head h2 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--app-text-strong);
  letter-spacing: 0.01em;
}

.section-summary {
  margin: 0;
  font-size: 0.82rem;
}

.section-summary,
.section-head .helper-text {
  color: var(--app-text-muted);
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
}

.surface,
.detail-card,
.form-card,
.table-surface,
.panel {
  width: 100%;
  background: var(--app-surface-panel);
  border: 1px solid var(--app-border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.surface-detail,
.detail-card {
  overflow: hidden;
}

.surface-form,
.form-card {
  padding: var(--space-5) var(--space-6);
  max-width: none;
}

.surface-table,
.table-surface {
  overflow: hidden;
}

.surface-panel,
.panel {
  padding: var(--space-4) 1.2rem;
}

/* .form-card / .panel carry their own internal card padding (see above), so
   their section-heads are already inset by the card — they need only a bottom
   gap. */
.form-card > .section-head,
.form-card > .section-head-split,
.panel > .section-head,
.panel > .section-head-split {
  margin-bottom: var(--space-4);
}

/* .detail-card has NO internal padding (overflow:hidden only) and its
   .detail-body is independently inset, so a .section-head direct child renders
   FLUSH against the card border unless it carries its own gutter. That omission
   is exactly what shipped the flush "Labour by Activity" header (v1.4). Default
   the gutter INTO the primitive so a new detail-card section can NEVER be flush;
   per-section rules in pages.css keep only genuine deltas (alignment, body
   spacing), not their own padding. Tokenized so 07_check-ui-dimensions can
   assert it and the section-head invariant probe (A5) stays green. (A4 / G02) */
.detail-card > .section-head,
.detail-card > .section-head-split {
  padding: var(--space-4) var(--space-5) var(--space-2);
  margin-bottom: 0;
}

.stack > .section-head:not(:first-child),
.content-stack > .section-head:not(:first-child) {
  margin-top: 0.35rem;
}

/* The teal detail-header band was retired in the UI-consistency pass
   (2026-05-28, G01). Detail pages now surface their entity identity in the
   neutral page_header (h1.page-title) and their status as a page_header badge —
   matching the jobs/labor/payroll/supplier pattern. No loud brand chrome.
   (Selector intentionally not named here so the G01 grep guard resolves empty.) */

.detail-body {
  padding: 1.25rem var(--space-5);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4) var(--space-6);
}

.detail-field label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--app-text-muted);
  display: block;
  margin-bottom: 0.15rem;
}

.detail-field .value {
  font-size: 0.925rem;
  color: var(--app-text-strong);
  font-weight: 500;
}

.detail-field.full-width {
  grid-column: 1 / -1;
}

.detail-actions {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--app-border-default);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
  align-items: center;
  background: var(--app-surface-page);
}

.detail-meta {
  margin-right: auto;
  margin-left: 0;
  font-size: 0.8rem;
  color: var(--app-text-muted);
}

@media (width <= 768px) {
  .page-grid {
    grid-template-columns: 1fr;
  }

  .page-header,
  .section-head-split {
    flex-direction: column;
    align-items: stretch;
  }

  .page-actions,
  .section-actions {
    justify-content: flex-start;
  }
}

@media (width <= 480px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

/* A <button> does not inherit the page font; an <a class="btn"> does. Without
   this, two buttons side by side render in two typefaces (2026-10-04 walk).
   Here, not in primitives.css: the kiosk shares that file and its look is
   pinned (TR-099). */
.btn {
  font-family: inherit;
}