/* Grupo Join — shared presentation layer. Local latin fonts include Portuguese. */
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/albert-sans-latin-400-normal.681bd262ba7e.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/albert-sans-latin-500-normal.3440286b50b6.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/albert-sans-latin-600-normal.1a44f6e7a116.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/albert-sans-latin-700-normal.dd3f33469e4a.woff2") format("woff2"); }

:root {
  --font-sans: "Albert Sans", sans-serif;
  --color-primary: #003367;
  --color-primary-hover: oklch(26% .09 254);
  --color-brand-red: #dd1015;
  --color-paper: #fff;
  --color-canvas: #f1f5fa;
  --color-surface-alt: #e3eaf3;
  --color-line: oklch(89% .016 254);
  --color-ink: #12243a;
  --color-muted: #3b4f67;
  --color-faint: #718092;
  --focus-ring: oklch(55% .16 255);
  --error-bg: oklch(96% .015 25);
  --error-border: oklch(76% .09 25);
  --error-text: oklch(38% .13 25);
  --warning-bg: oklch(97% .035 85);
  --warning-border: oklch(80% .10 80);
  --warning-text: oklch(37% .07 65);
  --success-bg: oklch(96% .03 150);
  --success-border: oklch(84% .06 150);
  --success-text: oklch(36% .09 150);
  --info-bg: oklch(95% .02 255);
  --info-border: oklch(81% .05 255);
  --field-border: oklch(70% .025 255);
  --field-hover: oklch(50% .04 255);
  /* Aliases retained for existing form and chart hooks. */
  --bg: var(--color-canvas); --card: var(--color-paper); --surface: var(--color-paper);
  --surface-soft: var(--color-canvas); --surface-strong: var(--color-paper);
  --line: var(--color-line); --border-soft: var(--color-line); --border-strong: var(--field-border);
  --text: var(--color-ink); --muted: var(--color-muted); --brand: var(--color-primary);
  --danger: var(--error-text); --warning: var(--warning-text); --success: var(--success-text);
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
body { margin: 0; background: var(--color-canvas); color: var(--color-ink); font-family: var(--font-sans); font-size: .9375rem; font-weight: 400; line-height: 1.6; }
button, input, select, textarea { font-family: var(--font-sans); }
button, a, input, select, textarea, label { -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea { transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease; }
:focus-visible { outline: 3px solid var(--focus-ring) !important; outline-offset: 3px !important; box-shadow: none !important; }
a { color: var(--color-primary); text-underline-offset: .2em; }
a:hover { text-decoration: underline; }
button { cursor: pointer; min-width: 2.75rem; min-height: 2.75rem; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 2.75rem; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 100; padding: .75rem 1rem; border: 1px solid var(--color-line); border-radius: .375rem; background: var(--color-paper); color: var(--color-primary); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
button:disabled { opacity: .55; cursor: not-allowed; }
h1, h2, h3, h4 { color: var(--color-primary); }
h1, .page-title { font-size: 2.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
h3, h4 { font-size: 1rem; font-weight: 600; line-height: 1.3; }
p { max-width: 70ch; }
strong { font-weight: 600; }
.font-display, .font-mono { font-family: var(--font-sans); }
.font-extrabold, .font-bold { font-weight: 700; }
.font-extrabold { font-weight: 600; }
.text-base { font-size: .9375rem; line-height: 1.6; }
.text-xs { font-size: .8125rem; }
.leading-7 { line-height: 1.6; }
.shadow-sm, .shadow-soft { box-shadow: none; }
.rounded-2xl, .rounded-xl { border-radius: .5rem; }
h2[class] { font-size: 1.375rem; font-weight: 600; line-height: 1.2; color: var(--color-primary); }
h3[class], h4[class] { font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--color-primary); letter-spacing: normal; text-transform: none; }
.eyebrow i { display: none; }
.field-label i, .batch-file i { color: var(--color-primary); }
.text-ink { color: var(--color-ink); }
.text-muted { color: var(--color-muted); }
.text-primary { color: var(--color-primary); }
.border-line { border-color: var(--color-line); }
.bg-canvas { background: var(--color-canvas); }
.bg-surface-alt { background: var(--color-surface-alt); }
.eyebrow, .query-kicker, .contacts-filter-kicker { display: block; margin: 0; color: var(--color-primary); font-size: .6875rem; font-weight: 600; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; }
.app-name { display: flex; align-items: center; gap: .75rem; color: var(--color-primary); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; white-space: nowrap; }
.app-name::before { content: ''; width: .375rem; height: 1.1em; background: var(--color-brand-red); transform: skewX(-14deg); flex-shrink: 0; }
.group-wordmark { color: var(--color-primary); font-weight: 700; font-size: .9375rem; letter-spacing: -.02em; white-space: nowrap; }
.join-entry-panel { padding: 4.5rem 1.5rem 1.5rem; border-radius: .5rem; background-color: var(--color-primary); color: oklch(96% .015 255); background-image: linear-gradient(to bottom, transparent 35%, var(--color-primary) 70%), repeating-linear-gradient(to bottom, transparent 0 2.4375rem, oklch(100% 0 0 / .06) 2.4375rem 2.5rem); background-size: 100% 4rem; background-repeat: no-repeat; }
.join-entry-panel__title { font-size: 1.375rem; font-weight: 600; }
.join-entry-panel__signature { margin-top: .375rem; color: oklch(82% .05 255); }
.join-entry-panel__steps { display: grid; gap: .875rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid oklch(82% .05 255); font-size: .8125rem; }
.join-entry-panel__steps p { display: flex; gap: .75rem; color: oklch(82% .05 255); font-variant-numeric: tabular-nums; }
.join-entry-panel__steps span { color: oklch(96% .015 255); }

/* Shell: white navigation, clear grouping, quiet canvas. */
.app-bg, .app-shell { min-height: 100vh; }
.app-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
.shell-sidebar { display: none; }
.shell-main { min-width: 0; }
.shell-sidebar__brand { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: 2rem; }
.shell-brand { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; }
.shell-brand:hover { text-decoration: none; }
.shell-brand__copy { display: grid; gap: .35rem; }
.shell-brand__copy small { padding-left: 1.125rem; }
.shell-nav, .shell-nav-group { display: grid; }
.shell-nav { gap: 1.75rem; }
.shell-nav-group { gap: .375rem; }
.shell-nav-group__label { padding: 0 .75rem; margin: 0 0 .25rem; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--color-muted); }
.shell-nav-item { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .625rem .75rem; border: 1px solid transparent; border-radius: .375rem; color: var(--color-muted); font-size: .875rem; text-decoration: none; }
.shell-nav-item i { width: 1rem; text-align: center; }
.shell-nav-item:hover { background: var(--color-canvas); color: var(--color-primary); text-decoration: none; }
.shell-nav-item.is-active, .shell-nav-item[aria-current="page"] { color: var(--color-primary); background: oklch(95% .025 255); font-weight: 600; }
.shell-icon-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-line); border-radius: .375rem; background: var(--color-paper); color: var(--color-primary); }
.shell-icon-button:hover { background: var(--color-canvas); }
.top-commandbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding: .75rem 2rem; border-bottom: 1px solid var(--color-line); background: var(--color-paper); }
.top-commandbar__left, .top-commandbar__right { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--color-muted); }
.breadcrumbs strong { color: var(--color-primary); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.page-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; width: 100%; min-width: 0; padding: 2rem; }
/* Shrink layout items, not their tables: intrinsic table/SVG widths belong only
   to the scroll regions below, never to a page-level grid's automatic minimum. */
.page-shell > * { min-width: 0; max-width: 100%; }
.page-shell :where(.grid, .flex, .query-form, .query-row, .contacts-filter-grid, .contacts-filter-row, .query-header, .contacts-filter-header) > * { min-width: 0; }
.page-messages { display: grid; gap: .75rem; }
.shell-drawer { position: fixed; inset: 0; z-index: 60; }
.shell-scrim { position: absolute; inset: 0; border: 0; background: color-mix(in srgb, var(--color-ink) 30%, transparent); }
.shell-drawer__panel { position: relative; width: min(90vw, 22rem); height: 100%; padding: 1.5rem; border-right: 1px solid var(--color-line); background: var(--color-paper); overflow-y: auto; }

/* Surfaces stay flat; nested information is separated by spacing and rules. */
.app-card, .table-shell, .filter-shell, .chart-shell, .agency-card { position: relative; min-width: 0; max-width: 100%; border: 1px solid var(--color-line); border-radius: .5rem; background: var(--color-paper); }
.app-card { overflow: hidden; }
.table-shell, .chart-shell { overflow: hidden; }
.query-panel, .contacts-filter-panel { padding: 1.5rem; }
.table-toolbar { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-line); background: var(--color-paper); }
.hero-card, .upload-hero-panel, .batch-hero-panel, .agency-hero-panel { padding: 1.75rem; }
.upload-hero-grid, .batch-hero-grid, .agency-hero-grid { display: grid; gap: 1.5rem; }
.upload-hero-grid { grid-template-columns: 1fr; }
.metric-band, .upload-metric-grid { display: grid; gap: 1rem; }
.upload-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Fit metrics to their actual column, including inside XL split headers.
   Specificity intentionally supersedes legacy xl:min-w-* utility classes. */
.page-shell .metric-band { width: 100%; min-width: 0; max-width: 100%; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.metric-card { display: grid; align-content: start; gap: .375rem; padding: .5rem 0; min-width: 0; border: 0; background: transparent; }
.metric-card > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.metric-card span, .status-label, .stat-label { font-size: .8125rem; font-weight: 500; color: var(--color-muted); }
.metric-card strong { color: var(--color-primary); font-size: 1.375rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.meta-strip { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding-top: 1rem; border-top: 1px solid var(--color-line); }
.field-chip, .context-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--color-muted); }
.note-box { display: grid; gap: .375rem; padding: 1rem 0; color: var(--color-muted); border: 0; border-top: 1px solid var(--color-line); border-radius: 0; background: transparent; }
.note-box strong { color: var(--color-primary); }
.empty-state { display: grid; justify-items: start; gap: 1rem; text-align: left; padding: 1rem; }
.empty-state-icon { display: none; }
.empty-mini { padding: 1rem; background: var(--color-canvas); color: var(--color-muted); font-size: .8125rem; border-radius: .375rem; }

/* Buttons and fields. */
.btn-primary, .btn-secondary, .btn-danger, .nav-chip { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .625rem 1rem; border: 1px solid var(--color-line); border-radius: .375rem; font-size: .875rem; font-weight: 600; line-height: 1.4; text-decoration: none; cursor: pointer; }
.btn-primary { color: var(--color-paper); background: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { color: var(--color-paper); background: var(--color-primary-hover); border-color: var(--color-primary-hover); text-decoration: none; }
.btn-secondary, .nav-chip { color: var(--color-primary); background: var(--color-paper); }
.btn-secondary:hover, .nav-chip:hover { background: var(--color-canvas); text-decoration: none; }
.btn-danger { color: var(--error-text); background: var(--color-paper); border-color: var(--error-border); }
.btn-danger:hover { background: var(--error-bg); text-decoration: none; }
.btn-primary:disabled { cursor: progress; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { min-height: 2.75rem; max-width: 100%; min-width: 0; padding: .625rem .75rem; border: 1px solid var(--field-border); border-radius: .375rem; background: var(--color-paper); color: var(--color-ink); font-size: 1rem; line-height: 1.5; box-shadow: none; }
input:hover, select:hover, textarea:hover { border-color: var(--field-hover); }
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { width: 1.125rem; height: 1.125rem; margin-top: .15rem; accent-color: var(--color-primary); flex-shrink: 0; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error-border); }
.field-label { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-primary); font-size: .875rem; font-weight: 600; }
.field-meta, .field-help, .field-error, .contacts-filter-help { font-size: .8125rem; line-height: 1.6; }
.field-meta, .field-help, .contacts-filter-help { color: var(--color-muted); }
.field-error { color: var(--error-text); }
.upload-field { display: grid; gap: .5rem; min-width: 0; align-content: start; }
.upload-form-grid, .agency-form-grid { display: grid; gap: 1.5rem; }
.upload-form-panel, .agency-form-panel { overflow: visible; }
.upload-source-card { display: grid; gap: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--color-line); }
.upload-source-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.file-dropzone { display: grid; align-content: center; gap: 1rem; min-height: 9rem; padding: 1rem; border: 1px dashed var(--field-border); border-radius: .375rem; background: var(--color-paper); cursor: pointer; }
.file-dropzone:hover { background: var(--color-canvas); border-color: var(--field-hover); }
.file-dropzone:focus-within, .check-option:focus-within, .query-chip:focus-within, .contacts-filter-chip:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.dropzone-copy { display: flex; align-items: flex-start; gap: .75rem; }
.dropzone-copy > i { margin-top: .25rem; color: var(--color-primary); }
.dropzone-title { color: var(--color-primary); font-weight: 600; }
.dropzone-help, .dropzone-file { color: var(--color-muted); font-size: .8125rem; }
.dropzone-file { border-top: 1px solid var(--color-line); padding-top: .75rem; overflow-wrap: anywhere; }
.upload-submit-bar { display: flex; flex-direction: column; gap: 1.25rem; border-top: 1px solid var(--color-line); }
.upload-submit-bar .btn-primary { flex-shrink: 0; }
.upload-side-stack { display: grid; gap: 1.5rem; }
.upload-side-divider { height: 1px; background: var(--color-line); }
.upload-latest-grid { display: grid; gap: .75rem; }
.upload-latest-row { display: flex; justify-content: space-between; gap: 1rem; }
.check-item { display: flex; gap: .625rem; align-items: flex-start; }
.check-item i { color: var(--color-primary); margin-top: .35rem; }

/* Shared filter controls: native, visible selection and generous hit areas. */
.query-form, .contacts-filter-grid, .query-row, .contacts-filter-row, .query-subpanel, .contacts-filter-products { display: grid; gap: 1.25rem; }
.query-header, .contacts-filter-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.query-title, .contacts-filter-title { margin-top: .375rem; font-size: 1rem; font-weight: 600; color: var(--color-primary); }
.query-summary, .contacts-filter-summary { font-size: .8125rem; color: var(--color-muted); white-space: nowrap; }
.query-field, .query-fieldset, .contacts-filter-field { min-width: 0; }
.query-subpanel, .contacts-filter-products { padding-top: 1rem; border-top: 1px solid var(--color-line); }
.query-subpanel legend, .query-fieldset legend { padding: 0; }
.query-chip-grid, .contacts-filter-chip-grid, .check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.query-chip, .contacts-filter-chip, .check-option { display: flex; align-items: flex-start; gap: .625rem; min-height: 2.75rem; min-width: 0; padding: .625rem .75rem; border: 1px solid var(--color-line); border-radius: .375rem; background: var(--color-paper); cursor: pointer; }
.query-chip input, .contacts-filter-chip input { position: static; opacity: 1; pointer-events: auto; }
.query-chip span, .contacts-filter-chip span { font-size: .8125rem; line-height: 1.5; color: var(--color-muted); min-width: 0; overflow-wrap: anywhere; }
.query-chip span strong, .query-chip span small, .check-option strong, .check-option small { display: block; }
.query-chip small, .contacts-filter-chip small { font-size: .8125rem; font-weight: 400; }
.query-chip:has(input:checked), .contacts-filter-chip:has(input:checked), .check-option:has(input:checked) { background: var(--info-bg); border-color: var(--info-border); }
.query-chip:has(input:checked) span, .contacts-filter-chip:has(input:checked) span { color: var(--color-primary); font-weight: 600; }
.query-chip:hover, .contacts-filter-chip:hover, .check-option:hover { border-color: var(--field-hover); }
.query-toggle { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; color: var(--color-primary); font-size: .875rem; cursor: pointer; }
.query-toggle input { margin: 0; }
.query-actions, .query-buttons, .contacts-filter-actions { display: flex; justify-content: flex-end; gap: .75rem; }
.query-actions--snapshot { justify-content: space-between; align-items: center; }
.query-legend, .contacts-filter-selected { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.contacts-filter-products-head { display: flex; justify-content: space-between; gap: .75rem; }
.contacts-filter-chip-grid { max-height: 13rem; overflow-y: auto; padding: .25rem; }
.check-option small { color: var(--color-muted); font-size: .8125rem; }

/* Semantic feedback: brand red is never used here. */
.flash, .upload-warning-banner { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; border: 1px solid var(--info-border); border-radius: .5rem; background: var(--info-bg); color: var(--color-primary); }
.flash i, .upload-warning-banner > i { margin-top: .3rem; }
.flash p { margin: 0; }
.flash-error, .bg-error { background: var(--error-bg); }
.flash-error, .text-error { color: var(--error-text); }
.flash-error, .border-error { border-color: var(--error-border); }
.flash-warning, .upload-warning-banner, .bg-warning { background: var(--warning-bg); }
.flash-warning, .upload-warning-banner, .text-warning { color: var(--warning-text); }
.flash-warning, .upload-warning-banner, .border-warning { border-color: var(--warning-border); }
.flash-success, .bg-success { background: var(--success-bg); }
.flash-success, .text-success { color: var(--success-text); }
.flash-success, .border-success { border-color: var(--success-border); }
.upload-warning-banner { flex-wrap: wrap; }
.upload-warning-banner p { margin-top: .25rem; font-size: .875rem; }
.pill { display: inline-flex; align-items: center; gap: .375rem; width: fit-content; max-width: 100%; min-height: 1.75rem; padding: .25rem .5rem; border: 1px solid var(--color-line); border-radius: .375rem; font-size: .8125rem; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
.pill-neutral { background: var(--color-canvas); color: var(--color-muted); }
.pill-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.pill-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.pill-danger { background: var(--error-bg); border-color: var(--error-border); color: var(--error-text); }
.money-positive { color: var(--success-text); font-weight: 600; }
.money-negative { color: var(--error-text); font-weight: 600; }
.money-neutral { color: var(--color-ink); }

/* Tables retain every field and scroll within their own surface on small screens. */
.table-scroll, .info-faixa-table-scroll, .contacts-faixa-table-scroll { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.app-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: auto; font-variant-numeric: tabular-nums; }
.table-scroll > table { min-width: 100%; width: max-content; }
.app-table thead th { padding: 1rem; border-bottom: 1px solid var(--color-line); background: var(--color-surface-alt); color: var(--color-primary); text-align: left; font-size: .8125rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.app-table thead th > span { display: block; }
.app-table tbody td, .app-table tfoot td, .app-table tfoot th { padding: 1rem; border-bottom: 1px solid var(--color-line); font-size: .875rem; line-height: 1.6; vertical-align: top; }
.app-table tfoot td, .app-table tfoot th { background: var(--color-canvas); font-weight: 600; }
.app-table tbody tr:hover, .app-table tbody tr:focus-within { background: var(--info-bg); }
.app-table .text-right { text-align: right; }
.col-id, .col-money, .tabular-nums, .metric-card strong, .batch-stat strong { font-variant-numeric: tabular-nums; }
.col-money, .col-id { white-space: nowrap; }
.cell-clip, .table-clip > span { display: block; white-space: normal; overflow-wrap: anywhere; max-width: 32ch; }
.table-clip { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; }
.table-clip > i { flex-shrink: 0; margin-top: .3rem; color: var(--color-primary); }
.summary-link, .contract-copy { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--color-primary); font-weight: 600; font-size: .875rem; text-decoration: none; }
.summary-link:hover, .contract-copy:hover { text-decoration: underline; }
.contract-copy { padding: .375rem .5rem; border-radius: .375rem; }
.contract-copy:hover { background: var(--info-bg); }
.contract-copy-status, .contract-copy small { color: var(--success-text); }
.contract-copy small { font-size: .8125rem; }
.cell-clip--with-status { display: inline-flex; align-items: center; gap: .5rem; }
.row-warning { background: var(--warning-bg); }
.row-alt { background: var(--color-canvas); }
.informacoes-faixa-table { min-width: 72rem !important; }
.contacts-faixa-table { min-width: 78rem !important; }
.snapshot-table { min-width: 100rem !important; }

/* History and agency records are rows, not a grid of identical cards. */
.batch-list, .agency-grid { display: grid; gap: 0; }
.batch-card { padding: 1.5rem; border-bottom: 1px solid var(--color-line); background: var(--color-paper); }
.batch-card:last-child { border-bottom: 0; }
.batch-card-grid, .batch-card-files, .batch-card-block { display: grid; gap: .75rem; min-width: 0; }
.batch-card-files { gap: 1.25rem; }
.batch-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.batch-stat { padding: .25rem 0; }
.batch-stat strong { display: block; color: var(--color-primary); }
.batch-actions { display: grid; gap: .5rem; align-content: start; }
.batch-actions a, .batch-actions button { min-height: 2.75rem; }
.batch-delete-panel, .agency-delete-panel { display: grid; gap: 1rem; padding: 1.25rem; border: 1px solid var(--error-border); border-radius: .5rem; background: var(--error-bg); }
.batch-delete-panel { max-width: 48rem; }
.stack-tight { display: grid; gap: .5rem; }
.stack-tight p, .batch-notes p { margin: 0; overflow-wrap: anywhere; }
.agency-grid { gap: 1rem; grid-template-columns: 1fr; }
.agency-card { display: grid; gap: 1.5rem; padding: 1.5rem; }
.agency-card-top, .agency-card-id, .agency-card-status { display: grid; gap: .75rem; }
.agency-card-status { align-content: start; }
.agency-card-actions, .agency-hero-actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.agency-delete-shell, .agency-delete-form, .agency-password-card { display: grid; gap: 1rem; }
.agency-delete-shell { max-width: 32rem; }
.agency-delete-lock, .agency-password-card { padding-top: 1rem; border-top: 1px solid var(--color-line); }
.agency-form-actions { display: flex; gap: .75rem; }

/* Charts use the same family, navy series and a dashed comparison. */
.chart-frame { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; padding: 1rem; }
.chart-svg { display: block; width: 100%; min-width: 760px; height: auto; font-family: var(--font-sans); }
.chart-gridline { stroke: var(--color-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-axis { stroke: var(--field-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-y-label, .chart-x-label { fill: var(--color-muted); font-size: .8125rem; font-weight: 500; }
.chart-y-label { text-anchor: end; dominant-baseline: middle; }
.chart-x-label { text-anchor: middle; }
.chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-line-current { stroke: var(--color-primary); }
.chart-line-previous { stroke: var(--color-muted); stroke-dasharray: 7 7; }
.chart-dot { stroke: var(--color-paper); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart-dot-current { fill: var(--color-primary); }
.chart-dot-previous { fill: var(--color-muted); }
.chart-legend { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; color: var(--color-muted); font-size: .8125rem; }
.chart-legend div { display: flex; align-items: center; gap: .5rem; }
.chart-legend-swatch { width: 1.5rem; height: .1875rem; flex-shrink: 0; background: var(--color-primary); }
.chart-legend-swatch-previous { height: 0; border-top: 3px dashed var(--color-muted); background: transparent; }
.chart-legend-swatch-axis { background: var(--field-border); }

@keyframes page-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.page-shell > :not(.page-messages) { animation: page-enter 520ms cubic-bezier(.22,1,.36,1) both; }
.page-shell > :nth-child(2) { animation-delay: 70ms; }
.page-shell > :nth-child(3) { animation-delay: 140ms; }
.page-shell > .space-y-6 { animation: none; }
.page-shell > .space-y-6 > section { animation: page-enter 520ms cubic-bezier(.22,1,.36,1) both; }
.page-shell > .space-y-6 > section:nth-child(2) { animation-delay: 70ms; }
.page-shell > .space-y-6 > section:nth-child(3) { animation-delay: 140ms; }

@media (min-width: 640px) {
  .agency-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agency-card-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .batch-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .upload-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upload-submit-bar { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1024px) {
  .app-shell { grid-template-columns: 18rem minmax(0, 1fr); }
  .app-shell--collapsed { grid-template-columns: 5rem minmax(0, 1fr); }
  .shell-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; padding: 1.5rem 1rem; border-right: 1px solid var(--color-line); background: var(--color-paper); }
  .shell-sidebar__brand { flex-wrap: wrap; }
  .shell-sidebar__brand > .shell-icon-button { margin-left: auto; }
  .shell-sidebar--collapsed { padding-inline: .75rem; }
  .shell-sidebar--collapsed .shell-brand, .shell-sidebar--collapsed .shell-nav-group__label, .shell-sidebar--collapsed .shell-nav-item span { display: none; }
  .shell-sidebar--collapsed .shell-sidebar__brand { justify-content: center; }
  .shell-sidebar--collapsed .shell-sidebar__brand > .shell-icon-button { margin: 0; }
  .shell-sidebar--collapsed .shell-nav-item { justify-content: center; padding-inline: 0; }
  .agency-hero-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .batch-hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(12rem, .7fr); }
  .query-row--summary, .query-row--charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .query-row--snapshot { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .query-row--info, .contacts-filter-row { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .contacts-filter-chip-grid, .query-chip-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  .batch-card-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .75fr) minmax(0, .65fr) minmax(0, .6fr) minmax(0, 1.8fr) auto; }
}
@media (max-width: 767px) {
  .top-commandbar { padding-inline: 1rem; gap: .5rem; }
  .top-commandbar__right .group-wordmark { font-size: .8125rem; }
  .page-shell { padding: 1rem; gap: 1rem; }
  .app-card, .hero-card, .upload-hero-panel, .batch-hero-panel, .agency-hero-panel, .query-panel, .contacts-filter-panel { padding: 1.25rem; }
  .table-shell { padding: 0; }
  .table-toolbar, .batch-card, .agency-card { padding: 1.25rem; }
  .upload-warning-banner .btn-secondary { width: 100%; }
}
@media (max-width: 639px) {
  .query-header, .contacts-filter-header { flex-direction: column; gap: .5rem; }
  .query-summary, .contacts-filter-summary { white-space: normal; }
  .query-chip-grid, .contacts-filter-chip-grid, .check-grid { grid-template-columns: 1fr; }
  .contacts-filter-chip-grid { max-height: none; }
  .query-actions, .query-buttons, .contacts-filter-actions, .agency-form-actions { flex-direction: column; align-items: stretch; }
  .query-actions--snapshot { align-items: stretch; }
  .agency-card-actions { flex-direction: column; align-items: stretch; }
  .agency-delete-shell { max-width: none; }
  .batch-stat-grid { gap: .5rem; }
  .batch-stat strong { font-size: .875rem; }
  .app-table th, .app-table td { min-width: 7rem; }
  .top-commandbar__right { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}