/* Composição das páginas. Tokens/controles básicos permanecem em tokens e app.css. */
.page-heading { margin-bottom: var(--space-6); min-width: 0; }
.page-heading-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4); margin-bottom: var(--space-3); }
.page-area { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .1em; text-transform: uppercase; }
.page-heading-context .link-nav { color: var(--color-text-muted); font-size: var(--text-sm); }
.page-heading-context .link-nav:hover { color: var(--color-accent-ink); }
.page-heading-main { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.page-heading-copy { min-width: 0; flex: 1 1 20rem; }
.page-heading h1 { letter-spacing: -.035em; text-wrap: balance; overflow-wrap: anywhere; }
.page-heading .lead { margin: 0; max-width: 72ch; text-wrap: pretty; }
.page-heading-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.page-heading + .lead { margin-top: calc(-1 * var(--space-4)); }

.collection { margin-block: var(--space-5) var(--space-6); min-width: 0; }
.collection-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-3); }
.collection-search { position: relative; flex: 1 1 16rem; max-width: 30rem; min-width: 0; }
.collection-search input { width: 100%; min-height: var(--touch-target); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-7); border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); font: inherit; }
.collection-search svg { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--color-text-muted); stroke-width: 1.8; pointer-events: none; }
.collection-count { color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.collection-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-4) var(--space-5); }
.collection-filters button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.collection-filters button[aria-pressed="true"] { color: var(--color-accent-ink); border-color: var(--color-accent-ink); background: var(--brand-soft); font-weight: var(--weight-semibold); }
.collection-filters button:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.collection-filters button span { font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
.collection-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space-4); }
.collection-item { --item-bg: var(--color-surface); --item-edge: var(--color-border); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--item-edge); border-radius: var(--radius-lg); background: var(--item-bg); position: relative; }
.collection-item[data-tone="planned"] { --item-bg: var(--hr-planned-bg); --item-edge: var(--hr-planned-border); }
.collection-item[data-tone="active"] { --item-bg: var(--hr-active-bg); --item-edge: var(--hr-active-border); }
.collection-item[data-tone="done"] { --item-bg: var(--hr-done-bg); --item-edge: var(--hr-done-border); }
.collection-item[data-tone="attention"] { --item-bg: color-mix(in srgb, var(--warn-ink) 7%, var(--color-surface)); --item-edge: color-mix(in srgb, var(--warn-ink) 45%, var(--color-border)); }
.collection-item h2, .collection-item h3, .collection-item p { margin: 0; }
.collection-item h2, .collection-item h3 { font-size: var(--text-lg); line-height: 1.4; letter-spacing: -.015em; }
.collection-item > .link-title, .collection-item > .journey-name { font-size: var(--text-lg); line-height: 1.4; min-height: var(--touch-target); display: flex; align-items: center; }
.collection-item > .muted, .collection-item .item-meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.collection-item .item-topline { width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.collection-item > .link-nav:last-child, .collection-item > .btn:last-child { margin-top: auto; }
.collection-item details { width: 100%; }
.collection-item:focus-within { border-color: var(--color-focus-ring); }
.preparation-copies { margin-block: var(--space-4) var(--space-5); }

.empty-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
.empty-state > svg { width: 48px; height: 48px; color: var(--color-accent-ink); stroke: currentColor; stroke-width: 1.5; fill: var(--brand-soft); flex: none; }
.empty-state > div { flex: 1 1 14rem; min-width: 0; }
.empty-state p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.empty-state .empty-state-title { margin-bottom: var(--space-1); font-size: var(--text-base); color: var(--color-text); font-weight: var(--weight-semibold); }

.destination-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); margin-block: var(--space-5) var(--space-6); }
.destination { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); min-width: 0; }
.destination p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.destination .link-nav { color: var(--color-text); font-weight: var(--weight-semibold); }
.destination:focus-within, .destination:hover { border-color: var(--color-accent-ink); }
.destination[data-tone="planned"] { background: var(--hr-planned-bg); border-color: var(--hr-planned-border); }
.destination[data-tone="active"] { background: var(--hr-active-bg); border-color: var(--hr-active-border); }
.destination[data-tone="done"] { background: var(--hr-done-bg); border-color: var(--hr-done-border); }

.step-progress { display: flex; flex-wrap: wrap; list-style: none; gap: var(--space-3); margin: 0 0 var(--space-5); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.step-progress li { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 8rem; color: var(--color-text-muted); font-size: var(--text-sm); }
.step-number { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--color-border-strong); border-radius: 50%; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.step-progress [aria-current="step"] { color: var(--color-accent-ink); font-weight: var(--weight-semibold); }
.step-progress [aria-current="step"] .step-number { background: var(--brand-soft); border-color: var(--color-accent-ink); }
.step-progress [data-complete="true"] .step-number { color: var(--ok-ink); background: var(--hr-done-bg); border-color: var(--hr-done-border); }
.workflow-form { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); margin-block: var(--space-4) var(--space-5); }
.section-caption { margin-block: var(--space-6) var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-semibold); }
.editor-panel { border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-block: var(--space-5); background: var(--color-surface); }
.editor-panel > summary { cursor: pointer; min-height: 60px; padding: var(--space-4) var(--space-5); font-weight: var(--weight-semibold); }
.editor-panel > summary span { display: block; font-size: var(--text-sm); font-weight: normal; color: var(--color-text-muted); margin-top: var(--space-1); }
.editor-panel .workflow-form { border: 0; border-top: 1px solid var(--color-border); border-radius: 0; margin: 0; }
.review-sequence { counter-reset: question; }
.review-sequence > li { counter-increment: question; border-left: 3px solid var(--hr-planned-border); }
.review-sequence > li::before { content: "Etapa " counter(question); display: block; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.timeline-list { list-style: none; padding-left: var(--space-5); border-left: 2px solid var(--hr-active-border); display: grid; gap: var(--space-4); }
.timeline-list > li { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); }
.timeline-list > li::before { content: ""; position: absolute; width: 10px; height: 10px; left: calc(-1 * var(--space-5) - 7px); top: var(--space-5); border: 2px solid var(--color-accent-ink); border-radius: 50%; background: var(--color-bg); }
.audience-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-3); }
.audience-metrics .card-row { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-sunken); }
.audience-metrics strong { font-size: var(--text-2xl); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.audience-metrics .stat-ok { background: var(--hr-done-bg); border-color: var(--hr-done-border); }
.audience-metrics .stat-bad { border-color: var(--danger-ink); }

@media (min-width: 56rem) { .page-heading h1 { font-size: var(--text-3xl); } }
@media (max-width: 30rem) {
  .page-heading { margin-bottom: var(--space-5); }
  .page-heading-context { align-items: flex-start; flex-direction: column; }
  .collection-item, .destination, .workflow-form, .empty-state { padding: var(--space-4); }
  .step-progress { gap: var(--space-2); }
  .step-progress li { flex-basis: 7rem; }
}
@media print {
  .page-heading-context, .page-heading-actions, .collection-toolbar, .collection-filters { display: none; }
  .collection-items { display: block; }
  .collection-item { break-inside: avoid; margin-bottom: var(--space-3); }
}