/* Shared components (Design Contract v2). Tokens only; loaded after blackforge.css, before art.css. */

/* StateHeader: eyebrow, one serif line that states the situation, one action. No image, no gradient. */
.state-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;padding:32px 0 24px}
.state-header__copy{min-width:0;flex:1 1 420px;max-width:760px}
.state-header__eyebrow{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.state-header__title{margin:0;font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.18;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-wrap:balance}
.state-header__detail{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.state-header__coverage{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.state-header__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;flex:0 0 auto}
.state-header__actions .button{font-size:14px;min-height:44px}

/* A filter row that used to sit inside a hero (report period) now sits under the header. */
.state-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 24px}

/* The Vakta conversation page: header over the conversation, no stage column beside it. */
.page.copilot-page{display:block;min-height:0;padding-top:0}
.page.copilot-page>.copilot{max-width:760px;min-height:560px}

/* The bank benefits row used to space the footer note from the account cards. */
.bank-page .bank-cards+.bank-footer-note{margin-top:24px}

@media(max-width:700px){
  .state-header{display:block;padding:24px 0 16px}
  .state-header__title{font-size:26px}
  .state-header__detail{font-size:14px}
  .state-header__actions{margin-top:16px}
  .state-header__actions .button{width:100%;font-size:14px;min-height:44px}
  .state-toolbar{margin-bottom:16px}
  /* The title takes ~64px, so the conversation gives that back to keep the composer above the nav. */
  .page.copilot-page>.state-header{padding:16px 0 0}
  .page.copilot-page>.copilot{min-height:calc(100svh - 214px);height:calc(100svh - 214px)}
}
@media(prefers-reduced-motion:reduce){
  .state-header,.state-header *{animation:none!important;transition:none!important}
}