@import url("tokens.css?v=db5093bc6432");

/* UI do app (A04.5, ADR 0002; identidade E&A Taxes v2 desde EA-O01/DUN-4759). Só var(--...) de web/tokens.css: nenhuma cor
   literal aqui (teste). Manrope local via tokens.css. Direção de referência: docs/e-a-taxes-app-direction/. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-regular); line-height: var(--leading-body); color: var(--text); background: var(--surface-page); overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: var(--weight-semibold); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--text-heading); }
h1 { text-wrap: balance; }
h2 { letter-spacing: -0.012em; }
h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-4); }

/* EA-S04 + DUN-4967 (direction of 2026-11-01): Sora 500 is the display face of the v3 identity. The titles of the public and
   pre-login pages, the explicit opt-in class and the page title of the staff shell use it; every control, table and body text
   stays on Manrope. */
.type-display,
.public h1,
.portal h1,
.shell-staff h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
}
h2 { font-size: var(--text-h2); margin: 0 0 var(--space-3); }  /* lote C: 20 px */
h3 { font-size: var(--text-md); margin: 0 0 var(--space-2); letter-spacing: 0; }
strong, b { font-weight: var(--weight-bold); }
::selection { color: var(--text-selected); background: var(--surface-selected); }
p { margin: 0 0 var(--space-3); }
a { color: var(--link); }
:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
[data-autofocus]:focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.sr-only { position: absolute; left: 0; top: 0; width: 1px !important; height: 1px !important; min-height: 0 !important; max-width: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.skip { position: absolute; left: var(--space-2); top: -80px; z-index: 30; padding: var(--space-3) var(--space-4); background: var(--surface); color: var(--link); border: 2px solid var(--action-primary); border-radius: var(--radius-md); }
.skip:focus { top: var(--space-2); }

/* Faixa provisória, topo e barra de contexto fixa */
.banner { padding: var(--space-1) var(--space-4); text-align: center; font-size: var(--text-sm); font-weight: 700; color: var(--status-warning-fg); background: var(--status-warning-bg); border-bottom: 1px solid var(--border-strong); }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-4); color: var(--text-on-header); background: var(--surface-header); }
.topbar a { color: var(--text-on-header); display: inline-flex; align-items: center; min-height: var(--target-min); }
.topbar :focus-visible { outline-color: var(--focus-ring-on-dark); }
.topbar .signout { display: inline-flex; margin: 0; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-bold); margin-inline-end: auto; min-width: 0; }

/* Tenant logo: configured content-addressed asset; preserve its aspect ratio. */
.brand-logo { display: block; flex: none; width: auto; max-width: 100%; object-fit: contain; }
.brand-logo-regular { height: 48px; }
.brand-logo-large { height: 56px; }
.brand-icon { display: block; flex: none; width: 32px; height: 32px; }
.brand-link { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; min-height: var(--target-min); border-radius: var(--radius-md); }
.firm-identity { font-weight: var(--weight-semibold); min-width: 0; }
.firm-identity:empty { display: none; }
.contextbar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); padding: var(--space-2) var(--space-4); background: var(--surface); border-bottom: 2px solid var(--border-strong); }
.ctx-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); min-width: 0; }
.ctx-label { color: var(--text-secondary); }
.ctx-value { font-weight: 700; color: var(--text); }

/* Shells: ver a seção EA-O03 no fim do arquivo (lateral navy, subnavegação do módulo, portal, público) */
main { padding: var(--space-5); min-width: 0; }
main:focus { outline: none; }
.simple-main { max-width: 720px; margin: 0 auto; }

/* Wizard: stepper à esquerda, formulário central (<= 720px), resumo do checklist à direita */
.wizard { display: grid; grid-template-columns: 220px minmax(0, 720px) minmax(200px, 260px); gap: var(--space-5); align-items: start; }
.wizard-form { min-width: 0; }
.wizard-aside { min-width: 0; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); font-size: var(--text-sm); }
.wizard-aside h2 { font-size: var(--text-md); }
.page-narrow { max-width: 720px; }
.page-wide { max-width: 1180px; }

/* Stepper (texto + ícone por passo; aria-current="step" no atual) */
.stepper ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.stepper-menu > summary { display: none; }
.stepper a, .stepper li > span { display: flex; flex-direction: column; justify-content: center; min-height: var(--target-min); padding: var(--space-2) var(--space-3); color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.stepper a:hover { background: var(--surface-subtle); }
.stepper .step-status { font-size: var(--text-sm); color: var(--text-secondary); }
.stepper .step-done a, .stepper .step-done > span { color: var(--status-success-fg); background: var(--status-success-bg); }
.stepper .step-done .step-status { color: var(--status-success-fg); }
.stepper .step-blocked a, .stepper .step-blocked > span { color: var(--status-danger-fg); background: var(--status-danger-bg); }
.stepper .step-blocked .step-status { color: var(--status-danger-fg); }
.stepper [aria-current="step"], .stepper .step-done [aria-current="step"] { color: var(--text-on-primary); background: var(--action-primary); border-color: var(--action-primary); font-weight: 700; }
.stepper [aria-current="step"] .step-status { color: var(--text-on-primary); }

/* Controles */
/* Botões (EA-O02): primário navy, secundário branco com borda >= 3:1, ghost em azul de apoio, perigo; alvo >= 44px sempre */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--target-min); min-width: var(--target-min); padding: 0 var(--space-4); font: inherit; font-weight: var(--weight-semibold); line-height: 1.2; text-align: center; text-decoration: none; color: var(--text-heading); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--duration-state), border-color var(--duration-state), color var(--duration-state); }
.btn:hover { background: var(--surface-subtle); }
.btn:active { background: var(--surface-selected); }
.btn .icon { flex: none; }
.btn-primary { color: var(--text-on-primary); background: var(--action-primary); border-color: var(--action-primary); }
.btn-primary:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
.btn-primary:active { background: var(--action-primary-hover); }
.btn-secondary { color: var(--text-heading); }
.btn-quiet, .btn-ghost { padding: 0 var(--space-3); color: var(--link); background: transparent; border-color: transparent; }
.btn-quiet:hover, .btn-ghost:hover { color: var(--text-heading); background: var(--surface-hover); }
.btn-quiet { border-color: var(--border-strong); }
.btn-icon { padding: 0; width: var(--target-min); }
.btn-on-dark { color: var(--text-heading); background: var(--surface); border-color: var(--surface); }
.btn-on-dark:hover { background: var(--surface-selected); }
.btn-on-dark:focus-visible { outline-color: var(--focus-ring-on-dark); }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before { content: ""; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .btn[aria-busy="true"]::before { animation: ea-spin 0.8s linear infinite; }
  @keyframes ea-spin { to { transform: rotate(360deg); } }
}
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) 0; margin-top: var(--space-4); border-top: 1px solid var(--border); }
.form-actions .spacer { flex: 1 1 auto; }

/* Campos */
form { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: var(--space-2); font-weight: 700; }
/* EA-O08: a legend of a bordered fieldset (card, vault-box) sits inside the box as a title, never astride the border */
fieldset.card > legend, fieldset.vault-box > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-3); font-size: var(--text-lg); color: var(--text-heading); }
fieldset.card > legend + *, fieldset.vault-box > legend + * { clear: both; }
label { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); margin-bottom: var(--space-2); }
.field { margin-bottom: var(--space-4); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 var(--space-4); }
.hint { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); font-weight: 400; }
.error { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--status-danger-fg); font-weight: 700; }
/* Campos (EA-O02): TODO input/select/textarea em 16px (inclusive desktop), alvo >= 44px, borda >= 3:1, desabilitado com fundo próprio */
input[type="text"], input[type="email"], input[type="date"], input[type="tel"], input[type="url"], input[type="file"], input[type="search"], input[type="password"], input[type="number"], input[type="month"], input[type="time"], input[type="datetime-local"], select, textarea { width: 100%; max-width: 100%; min-height: var(--target-min); padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-md); line-height: var(--leading-body); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--text-secondary); }
.has-error :is(input, select, textarea), :is(input, select, textarea)[aria-invalid="true"] { border: 2px solid var(--status-danger-fg); }
input:disabled, select:disabled, textarea:disabled { color: var(--disabled-fg); background: var(--disabled-bg); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input[type="file"]::file-selector-button { min-height: 36px; margin-inline-end: var(--space-3); padding: 0 var(--space-3); font: inherit; font-weight: var(--weight-semibold); color: var(--text-heading); background: var(--surface-subtle); border: 1px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer; }
input[type="checkbox"], input[type="radio"] { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--action-primary); }
.choices { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.choice { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); margin: 0; font-weight: 400; }
.check { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.check label { flex: 1 1 0; min-width: 0; margin: 0; font-weight: 400; }
.check .hint { flex: 1 1 100%; }
.tristate { padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.tristate > legend, .responsible > legend { float: left; width: 100%; }
.tristate > legend + *, .responsible > legend + * { clear: both; }
/* Panel / Card (EA-O02 + bs-slate-admin-console): superfície branca, borda hairline, raio 10px, sombra sutil */
.card { padding: var(--space-5); margin-bottom: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.card > h2 { font-size: var(--text-h2); }
.readonly, .facts { margin: 0 0 var(--space-4); }  /* .facts: the staff invitation's firm and e-mail (Deploy D2) */
.readonly dt, .facts dt { font-weight: 600; color: var(--text-secondary); font-size: var(--text-sm); }
.readonly dd, .facts dd { margin: 0 0 var(--space-2); }
.responsible { padding: var(--space-3); margin-bottom: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }

/* Chips e painéis de estado (ícone + texto + cor) */
.muted { color: var(--text-muted); font-size: var(--text-sm); }
/* StatusChip (EA-O02): badge discreto (não pílula), texto + ícone + tom; 12px é o piso */
.chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.4; border-radius: var(--radius-sm); border: 1px solid transparent; vertical-align: middle; white-space: nowrap; }
.chip .icon { width: 14px; height: 14px; }
.tone-success { color: var(--status-success-fg); background: var(--status-success-bg); }
.tone-warning { color: var(--status-warning-fg); background: var(--status-warning-bg); }
.tone-danger { color: var(--status-danger-fg); background: var(--status-danger-bg); }
.tone-info { color: var(--status-info-fg); background: var(--status-info-bg); }
.tone-review { color: var(--status-review-fg); background: var(--status-review-bg); }
.tone-neutral { color: var(--status-neutral-fg); background: var(--status-neutral-bg); }
/* Estado de tela (state_banner): ícone + título + detalhe + ação; borda neutra, tom no fundo e no texto */
.panel { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); margin-bottom: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); }
.panel .icon { flex: none; font-weight: 700; font-size: var(--text-lg); line-height: 1.2; }
.panel-title { font-size: var(--text-md); font-weight: 700; margin: 0 0 var(--space-1); }
.panel p { margin-bottom: var(--space-2); }
.panel ul { margin: 0; padding-inline-start: var(--space-5); }
.panel a:not(.btn) { color: inherit; }
.notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); color: var(--status-info-fg); background: var(--status-info-bg); border: 1px solid transparent; border-radius: var(--radius-md); }
.notice > .icon { flex: none; margin-top: 2px; }
.notice p { margin: 0 0 var(--space-1); }
.notice p:last-child { margin-bottom: 0; }
.notice-title { font-weight: var(--weight-bold); }
.notice.tone-success { color: var(--status-success-fg); background: var(--status-success-bg); }
.notice.tone-warning { color: var(--status-warning-fg); background: var(--status-warning-bg); }
.notice.tone-danger { color: var(--status-danger-fg); background: var(--status-danger-bg); }
.notice.tone-info { color: var(--status-info-fg); background: var(--status-info-bg); }
.notice.tone-neutral { border-color: var(--border); }

/* Tabelas (cartões em 390) */
.table-wrap { max-width: 100%; overflow-x: auto; margin-bottom: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-xs); }
/* DataTable (EA-O02 + bs-slate-admin-console): cabeçalho em superfície alternativa, linhas com hover, números à direita em tabular-nums */
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
caption { text-align: start; padding: var(--space-3) var(--space-4); font-weight: var(--weight-bold); color: var(--text-heading); }
th, td { padding: var(--space-3) var(--space-4); text-align: start; border-bottom: 1px solid var(--border); vertical-align: middle; }
thead th { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.01em; color: var(--text-secondary); background: var(--surface-selected); overflow-wrap: normal; }  /* lote C: cabeçalho de tabela em gelo (papelaria pp. 5–6) */
tbody tr:last-child > th, tbody tr:last-child > td { border-bottom: 0; }
tbody tr:hover > th, tbody tr:hover > td { background: var(--surface-hover); }
td.num, th.num { text-align: end; }
.checklist-waiver-disclosure { max-width: 100%; vertical-align: top; }
.checklist-waiver { width: 22rem; max-width: 100%; text-align: start; margin-top: var(--space-2); }
.checklist { list-style: none; margin: 0 0 var(--space-4); padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.checklist li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3); border-bottom: 1px solid var(--border); }
.checklist li:last-child { border-bottom: 0; }
.checklist .grow { flex: 1 1 260px; min-width: 0; }
.summary-list { list-style: none; margin: 0; padding: 0; }
.summary-list li { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; border-bottom: 1px solid var(--border); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: var(--space-2) 0 var(--space-2) var(--space-3); border-inline-start: 2px solid var(--border-strong); margin-bottom: var(--space-2); font-size: var(--text-sm); }

/* E-mail (A37.6): caixa de saída com filtros laterais, detalhe em cartões, prévias isoladas (iframe sandbox) */
code { font-family: var(--font-numeric); font-size: var(--text-sm); overflow-wrap: anywhere; }
/* Registros DNS do remetente (DUN-4975): host e valor legíveis, diagnóstico quebra linha em vez de cortar a tabela */
.dns-records { table-layout: fixed; }
.dns-records thead th:nth-child(1) { width: 76px; }
.dns-records thead th:nth-child(2) { width: 23%; }
.dns-records thead th:nth-child(3) { width: 25%; }
.dns-records thead th:nth-child(4) { width: 136px; }
.dns-records .hint { margin: var(--space-1) 0 0; white-space: normal; }
.dns-records .chip { white-space: normal; }
/* The side menu takes width from 801 px up, so the table narrows as the window grows: the room it has decides, not the window. */
.dns-records-area { container: dns-records / inline-size; }
@container dns-records (max-width: 641px) {
  .dns-records-area .table-wrap { border: 0; background: transparent; overflow: visible; }
  .dns-records-area table, .dns-records-area tbody, .dns-records-area tr, .dns-records-area th, .dns-records-area td { display: block; width: 100%; }
  .dns-records-area thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dns-records-area tr { margin-bottom: var(--space-3); padding: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
  .dns-records-area th, .dns-records-area td { border-bottom: 0; padding: var(--space-1) var(--space-2); text-align: start; }
  .dns-records-area th[data-label]::before, .dns-records-area td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
  .dns-records-area caption { display: block; width: auto; padding-inline: 0; }
}
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.outbox { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.outbox > aside.filters.card { padding: var(--space-4); }
.outbox-list { min-width: 0; }
.outbox-list > [data-stale] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
.outbox-list > [data-stale] .inline-form { margin-top: 0; }
.outbox-list > section[aria-labelledby^="cat-"] { margin-bottom: var(--space-5); }
.outbox-list > section[aria-labelledby^="cat-"] > h2 { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--text-md); }
.filters-menu > summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--target-min); font-weight: 700; cursor: pointer; list-style: none; }
.filters-menu > summary::-webkit-details-marker { display: none; }
.filters-menu > summary::after { content: "▾"; font-size: var(--text-xs); color: var(--text-secondary); }
.filters-menu[open] > summary { margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
div.detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 var(--space-4); }  /* e-mail (A37.6); the inbox panel is aside.detail */
.action-form { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.action-form:last-child { border-bottom: 0; }
.confirm-disclosure { margin-top: var(--space-2); }  /* DUN-4979: an action that explains itself before it happens */
.confirm-disclosure > summary { display: inline-flex; align-items: center; min-height: var(--target-min); font-weight: 600; color: var(--link); cursor: pointer; }
.confirm-disclosure[open] > summary { color: var(--text-heading); }
.confirm-disclosure > .hint { max-width: 72ch; margin: var(--space-2) 0 var(--space-3); }
.inline-form > summary { display: inline-flex; align-items: center; min-height: var(--target-min); font-weight: 600; color: var(--link); cursor: pointer; }
.previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.preview { margin: 0 0 var(--space-4); min-width: 0; }
.preview figcaption { font-weight: 600; margin-bottom: var(--space-2); }
.preview iframe { display: block; width: 100%; height: 640px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); }
.preview-mobile iframe { max-width: 390px; }
/* DUN-4976: the desktop preview is one column with an iframe of at least 640 px, so the e-mail's own media query (max-width: 620px)
   stays off and the header, signature logo and two-column footer show as on a desktop client; the mobile one is exactly 390 px
   wide, so the mobile rules do fire. A narrow screen scrolls the preview inside its figure, never the page. */
.previews-desktop { grid-template-columns: minmax(0, 1fr); }
.previews-desktop .preview { overflow-x: auto; }
.previews-desktop .preview iframe { min-width: 650px; } /* 640 of content + the 1 px borders */
.preview-single:not(.preview-mobile) { overflow-x: auto; }
.preview-single:not(.preview-mobile) iframe { min-width: 650px; }
.previews-mobile { display: flex; flex-wrap: wrap; } /* each 390 px preview shrinks to a narrower screen: never a page scroll */
.previews-mobile .preview { flex: 0 1 390px; min-width: 0; max-width: 100%; }
.preview-single.preview-mobile iframe, .preview-mobile iframe { width: 390px; max-width: 100%; }
@media (max-width: 767px) {
  .preview-single.preview-responsive iframe { min-width: 0; width: 100%; }
}
.logo-preview { max-width: 100%; height: auto; max-height: 120px; padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }

/* Diálogo de impacto */
dialog.dialog { position: static; width: 100%; max-width: 640px; margin: 0 0 var(--space-4); padding: var(--space-5); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-panel); }
dialog.dialog[data-modal] { position: fixed; margin: auto; max-height: 90vh; overflow-y: auto; border-color: var(--border); box-shadow: var(--shadow-elevated); }
dialog::backdrop { background: var(--surface-scrim); }
.impact-list { margin: 0 0 var(--space-3); padding-inline-start: var(--space-5); }

/* Carregando (esqueleto do passo durante a requisição htmx) */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
.skeleton { display: block; height: 16px; margin-bottom: var(--space-2); background: var(--surface-subtle); border: 0; border-radius: var(--radius-sm); }
.skeleton.tall { height: 64px; }
.skeleton.short { width: 40%; }
[aria-busy="true"] .wizard-fields { opacity: 0.6; }

@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: ui-pulse 1.4s var(--duration-fast) infinite alternate; }
  @keyframes ui-pulse { from { opacity: 1; } to { opacity: 0.5; } }
}

/* Inbox (A05.7): envio e fila à esquerda, documentos à direita, painel de detalhe deslizante à direita */
.inbox-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.inbox-intake, .inbox-documents { min-width: 0; }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 120px; padding: var(--space-4); text-align: center; font-weight: 600; background: var(--surface); border: 2px dashed var(--border-strong); border-radius: var(--radius-md); cursor: pointer; }
.dropzone:hover, .dropzone.is-over { background: var(--surface-subtle); border-color: var(--action-primary); }
.dropzone-icon { font-size: var(--text-xl); }
.upload-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.upload-mobile { display: none; }
.upload-message:not(:empty) { padding: var(--space-2) var(--space-3); font-weight: 600; border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.queue { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.queue-title { margin-top: var(--space-4); }
.queue-item { padding: var(--space-3); margin-bottom: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.queue-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-1); }
.queue-name { font-weight: 700; min-width: 0; }
.queue-progress { display: block; width: 100%; height: 10px; margin: var(--space-1) 0; accent-color: var(--action-primary); }
.queue-stage { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-1); padding: 0 var(--space-2); font-size: var(--text-sm); font-weight: 700; border-radius: var(--radius-sm); }
.queue-detail { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.queue-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.queue-actions form { display: inline; }
/* Abas (EA-O02): sublinhado navy no item atual, rótulo sempre visível, rolagem própria se faltar espaço */
.tabs ul, .tabs-nav ul { list-style: none; display: flex; gap: var(--space-5); margin: 0 0 var(--space-4); padding: 0; overflow-x: auto; border-bottom: 1px solid var(--border); }
.tabs a, .tabs-nav a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); padding: 0 var(--space-1); white-space: nowrap; font-weight: var(--weight-semibold); color: var(--text-secondary); text-decoration: none; background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
.tabs a:hover, .tabs-nav a:hover { color: var(--text-heading); }
.tabs a[aria-current="page"], .tabs-nav a[aria-current="page"] { font-weight: var(--weight-bold); color: var(--text-heading); background: transparent; border-bottom-color: var(--action-primary); }
.filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 var(--space-3); }
.filters { margin-bottom: var(--space-3); }
.filters .field { margin-bottom: var(--space-2); }
input[type="month"] { width: 100%; max-width: 100%; min-height: var(--target-min); padding: var(--space-2) var(--space-3); font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.menu { position: relative; display: inline-block; margin-bottom: var(--space-3); }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-items { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-2); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.select-cell { width: 48px; }
.documents thead th { overflow-wrap: normal; white-space: nowrap; }
.inbox-grid .chips, aside.detail .chips { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }  /* inbox (A05.7); the e-mail chips keep theirs */
.row-note { display: block; margin-top: var(--space-1); font-size: var(--text-sm); }
.row-conflict th, .row-conflict td { border-top: 2px solid var(--status-warning-fg); border-bottom: 2px solid var(--status-warning-fg); }
.results { margin: 0 0 var(--space-2); }
aside.detail { position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; width: min(520px, 100%); overflow-y: auto; padding: var(--space-5); background: var(--surface); border-inline-start: 2px solid var(--border-strong); }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.detail-head h2 { min-width: 0; }
.detail-head .btn { flex: none; white-space: nowrap; }
.versions { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.version { padding: var(--space-3); margin-bottom: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.version-head, .version-sub { margin: 0 0 var(--space-2); }
.hash { font-family: var(--font-numeric); font-size: var(--text-sm); }

/* Assinatura eletrônica (A32.6): admin (/app/esign) e páginas públicas (/sign, /verify). Mesmos tokens; sujeito ao A03. */
.plain { list-style: none; margin: 0; padding: 0; }
.tabs-nav { margin-bottom: var(--space-4); }
.tabs-nav ul { margin-bottom: 0; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-4); align-items: start; }
.action-list { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.action-off { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.action-off .hint { margin: 0; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; color: var(--disabled-fg); background: var(--disabled-bg); border-color: var(--border); }
.btn-danger { color: var(--text-on-primary); background: var(--status-danger-fg); border-color: var(--status-danger-fg); }
.btn-danger:hover { color: var(--status-danger-fg); background: var(--status-danger-bg); }
code, .mono, .hash { font-family: var(--font-numeric); }
.hash { overflow-wrap: anywhere; word-break: break-all; }
.mono { font-size: var(--text-sm); line-height: 1.5; }
textarea { width: 100%; max-width: 100%; padding: var(--space-2) var(--space-3); font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
textarea.mono { font-family: var(--font-numeric); font-size: var(--text-sm); tab-size: 2; }
.has-error textarea { border: 2px solid var(--status-danger-fg); }
.chips[role="group"] { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }  /* the template editor (A32.6); the inbox chips keep theirs */
.chip-insert { font-family: var(--font-numeric); font-weight: 400; }
.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.preview-frame { display: block; width: 100%; height: 640px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); }
.comments { list-style: none; margin: 0; padding: 0; }
.comment { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.comment-meta { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-1); }
.comment-text { white-space: pre-wrap; }
.comment blockquote { margin: 0 0 var(--space-2); padding-inline-start: var(--space-3); border-inline-start: 3px solid var(--border-strong); color: var(--text-secondary); }
.reply { margin-inline-start: var(--space-4); padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--border); }
.reply-form > summary { list-style: none; display: inline-flex; margin-bottom: var(--space-2); }
.reply-form > summary::-webkit-details-marker { display: none; }
.intent-box { margin: var(--space-4) 0; padding: var(--space-4); color: var(--text); background: var(--status-info-bg); border: 2px solid var(--action-primary); border-radius: var(--radius-md); }
.intent-label { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 700; color: var(--status-info-fg); }
.intent-text { margin: 0; font-weight: 600; }
.public-main { max-width: 760px; margin: 0 auto; }
.signer-title { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.signer-doc { margin-bottom: var(--space-3); }
.signer-steps { margin-bottom: var(--space-4); }
.step-position { margin: 0 0 var(--space-2); font-weight: 700; color: var(--text-secondary); }
.signer-steps ol { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; }
.signer-steps li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.signer-steps li.done { color: var(--status-success-fg); background: var(--status-success-bg); }
.signer-steps li[aria-current="step"] { color: var(--text-on-primary); background: var(--action-primary); border-color: var(--action-primary); font-weight: 700; }
.step-number { font-weight: 700; }
.signer-alert:empty { display: none; }
.signer-alert { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); color: var(--status-danger-fg); background: var(--status-danger-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-weight: 700; }
.step-panel h2 { font-size: var(--text-lg); }
.step-panel h2:focus { outline: none; }
.step-panel h2:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.code-input { max-width: 12ch; font-family: var(--font-numeric); font-size: var(--text-lg); letter-spacing: 0.2em; }
.disclosure { max-height: 50vh; overflow-y: auto; padding: var(--space-4); margin-bottom: var(--space-4); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.disclosure h3 { margin-top: var(--space-3); }
.format-check { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.format-check p { margin: 0; }
.format-canvas { border: 1px solid var(--border); background: var(--surface); }
.viewer-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.zoom-select { width: auto; min-width: 7ch; }
.viewer-toolbar .btn { min-width: var(--target-min); }
.viewer, .text-view { max-height: 70vh; overflow: auto; padding: var(--space-3); margin-bottom: var(--space-4); background: var(--surface-subtle); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.pdf-page { display: block; margin: 0 auto var(--space-3); background: var(--surface); border: 1px solid var(--border); }
.doc-text { margin: 0; white-space: pre-wrap; font-family: var(--font-sans); font-size: var(--text-md); color: var(--text); }
.review-box > summary { cursor: pointer; font-weight: 700; min-height: var(--target-min); display: flex; align-items: center; }
.sign-tabs { display: flex; gap: var(--space-1); margin: var(--space-3) 0 0; border-bottom: 2px solid var(--border); }
.tab { min-height: var(--target-min); padding: 0 var(--space-4); font: inherit; font-weight: 600; color: var(--text); background: var(--surface-page); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; cursor: pointer; }
.tab[aria-selected="true"] { color: var(--text-on-primary); background: var(--action-primary); border-color: var(--action-primary); }
.tabpanel { padding: var(--space-3) 0; }
.typed-preview { min-height: 64px; margin: 0 0 var(--space-2); padding: var(--space-3); font-family: var(--font-sans); font-size: var(--text-2xl); font-style: italic; color: var(--text); background: var(--surface); border-bottom: 2px solid var(--border-strong); }
.sign-canvas { display: block; width: 100%; max-width: 600px; height: auto; aspect-ratio: 3 / 1; color: var(--text); background: var(--surface); border: 2px dashed var(--border-strong); border-radius: var(--radius-md); touch-action: none; }
.verify-result { font-weight: 700; }
.verify-result[data-verdict="match_sealed"], .verify-result[data-verdict="match_original"] { color: var(--status-success-fg); }
.verify-result[data-verdict="mismatch"], .verify-result[data-verdict="unsupported"] { color: var(--status-danger-fg); }
.file-input { display: block; max-width: 100%; min-height: var(--target-min); margin-bottom: var(--space-3); }
.hashes dd { margin-bottom: var(--space-3); }

/* 1440 → 390: sem rolagem horizontal da página; menu "Passo N de M"; botões no rodapé; contas em cartões */
@media (max-width: 1100px) {
  .wizard { grid-template-columns: 200px minmax(0, 1fr); }
  .wizard-aside { grid-column: 2; }
}
@media (max-width: 768px) {
  main { padding: var(--space-4); }
  h1 { font-size: var(--text-title-mobile); }
  .wizard { display: block; }
  .wizard-aside { margin-top: var(--space-4); }
  .stepper { margin-bottom: var(--space-4); }
  .stepper-menu > summary { display: flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-3); font-weight: 700; cursor: pointer; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
  .stepper-menu[open] > summary { margin-bottom: var(--space-2); }
  .form-actions { position: sticky; bottom: 0; z-index: 5; padding: var(--space-3) 0; background: var(--surface-page); }
  .form-actions .btn { flex: 1 1 140px; }
  .form-actions .spacer { display: none; }
  .cards-on-mobile { border: 0; background: transparent; overflow: visible; }
  .cards-on-mobile table, .cards-on-mobile tbody, .cards-on-mobile tr, .cards-on-mobile th, .cards-on-mobile td { display: block; width: 100%; }
  .cards-on-mobile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cards-on-mobile tr { margin-bottom: var(--space-3); padding: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
  .cards-on-mobile th, .cards-on-mobile td { border-bottom: 0; padding: var(--space-1) var(--space-2); text-align: start; }
  .cards-on-mobile th[data-label]::before, .cards-on-mobile td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
  .cards-on-mobile caption { display: block; width: auto; padding-inline: 0; }
  dialog.dialog { padding: var(--space-4); }
  .outbox { display: block; }
  .filters { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); }
  .preview iframe { height: 520px; }
  .inbox-grid { display: block; }
  .dropzone { display: none; }
  .upload-mobile { display: inline-flex; flex: 1 1 100%; }
  .upload-folder { display: none; }
  aside.detail { width: 100%; padding: var(--space-4); border-inline-start: 0; }
  .select-cell { width: auto; }
}

/* CRM (A29.5): kanban com 8 raias roláveis dentro do quadro (1440), lista por raia com seletor no topo (390), ficha do cliente
   em duas colunas. Sujeito à validação do A03. Layout de referência: web/wireframes/admin/{pipeline,cliente}.html. */
input[type="tel"], textarea { width: 100%; max-width: 100%; min-height: var(--target-min); padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-md); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.has-error textarea { border: 2px solid var(--status-danger-fg); }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.page-head h1 { margin: 0; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-3); padding: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--text-muted); }
.crumbs a { color: var(--text-secondary); }
.crumbs [aria-current="page"] { font-weight: var(--weight-semibold); color: var(--text-heading); }
.lane-picker { display: none; margin-bottom: var(--space-4); }
.lane-picker-row { display: flex; gap: var(--space-2); align-items: center; }
.lane-picker-row select { flex: 1 1 auto; min-width: 0; }
.lane-picker-row .btn { flex: none; white-space: nowrap; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(224px, 1fr); gap: var(--space-3); max-width: 100%; overflow-x: auto; padding-bottom: var(--space-2); align-items: start; }
.lane { min-width: 0; padding: var(--space-3); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
.lane-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-md); }
.lane-count { font-weight: 400; }
.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lead-card { padding: var(--space-3); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.lead-card:focus-visible, .lead-card:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.card-name { font-size: var(--text-md); margin: 0 0 var(--space-2); }
.card-meta { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.card-meta div { margin-bottom: var(--space-1); }
.card-meta dt, .card-meta dd { display: inline; }
.card-meta dt { color: var(--text-secondary); }
.card-meta dt::after { content: ": "; }
.card-meta dt.sr-only::after { content: none; }
.card-meta dd { margin: 0; }
.move { position: relative; font-size: var(--text-sm); }
.move > summary, .action-box > summary { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-3); font-weight: 600; color: var(--link); cursor: pointer; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.move-list { list-style: none; margin: var(--space-1) 0 0; padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.move-target { width: 100%; justify-content: flex-start; }
.more { list-style: none; }
.inline-form { margin-top: var(--space-3); }
.crm-client .client-main .tabs ul { flex-wrap: wrap; gap: 0 var(--space-2); overflow: visible; }
.crm-client .client-main .tabs a { padding: 0 var(--space-2); }  /* eight tabs: tight, and a second row rather than a hidden tab */
.client-embed > .card:first-child { margin-top: 0; }
.client-embed .page-wide { max-width: 100%; }
.client-summary { margin: 0; }
.lead-item .readonly { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--space-3); }
.lead-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-3); }
.action-box[open] { flex: 1 1 100%; padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.action-box[open] > summary { margin-bottom: var(--space-3); }
.suggestion { padding: var(--space-3); margin-bottom: var(--space-3); background: var(--surface); border: 1px solid var(--border-strong); border-inline-start: 4px solid var(--action-primary); border-radius: var(--radius-md); }
.note-text { white-space: pre-wrap; }
.params { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.timeline .params li { padding: 0; margin: 0; border: 0; }
.candidates { list-style: none; margin: 0; padding: 0; }
.force-new { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.filter-form { margin-bottom: var(--space-4); max-width: 480px; }
@media (max-width: 1100px) {
}
@media (max-width: 768px) {
  .lane-picker { display: block; }
  .board { display: block; overflow-x: visible; }
  .board .lane { margin-bottom: var(--space-3); }
  .board-filtered .lane:not([data-selected]) { display: none; }
  .tabs ul, .tabs-nav ul { gap: var(--space-4); }
  .lead-item .readonly { display: block; }
  .editor-grid { grid-template-columns: minmax(0, 1fr); }
  .preview-frame { height: 420px; }
  .signer-steps ol { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); }
  .signer-steps .step-label { display: none; }
  .signer-steps li { align-items: center; padding: var(--space-2) 0; }
  .tab { flex: 1 1 0; padding: 0 var(--space-2); }
}

/* Intake (A30.6): página pública sem o shell do operador (cabeçalho da firma, progresso, lista de passos à esquerda em 1440,
   um passo por tela em 390) e a revisão da firma. Sujeito à validação do A03. Referência: web/wireframes/publico/intake.html. */
.public-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface); border-bottom: 2px solid var(--border-strong); }
.public-head .lang { display: inline-flex; align-items: center; min-height: var(--target-min); margin-inline-start: auto; color: var(--link); }
.tenant-brand { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 700; font-size: var(--text-lg); }
.tenant-mark { color: var(--action-primary); }
.public-main { max-width: 1180px; margin: 0 auto; }
.intake-progress { margin-bottom: var(--space-4); }
.progress-label { margin: 0 0 var(--space-1); font-weight: 600; font-size: var(--text-sm); }
.progress progress { display: block; width: 100%; height: 12px; accent-color: var(--action-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.progress progress::-webkit-progress-bar { background: var(--surface-subtle); border-radius: var(--radius-sm); }
.progress progress::-webkit-progress-value { background: var(--action-primary); border-radius: var(--radius-sm); }
.progress progress::-moz-progress-bar { background: var(--action-primary); }
.intake-layout { display: grid; grid-template-columns: 260px minmax(0, 720px); gap: var(--space-5); align-items: start; }
.intake-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.intake-steps a { display: flex; flex-direction: column; justify-content: center; min-height: var(--target-min); padding: var(--space-2) var(--space-3); color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.intake-steps a:hover { background: var(--surface-subtle); }
.intake-steps .step-status { font-size: var(--text-sm); color: var(--text-secondary); }
.istep-complete a { color: var(--status-success-fg); background: var(--status-success-bg); }
.istep-complete .step-status { color: var(--status-success-fg); }
.istep-pending_unknown a { color: var(--status-warning-fg); background: var(--status-warning-bg); }
.istep-pending_unknown .step-status { color: var(--status-warning-fg); }
.istep-requested a { border: 2px solid var(--status-warning-fg); }
.intake-steps [aria-current="step"] { color: var(--text-on-primary); background: var(--action-primary); border-color: var(--action-primary); font-weight: 700; }
.intake-steps [aria-current="step"] .step-status { color: var(--text-on-primary); }
.intake-steps .stepper-menu > summary { display: none; }
.intake-step { min-width: 0; }
.step-position { margin-bottom: var(--space-1); }
.choices.stacked { flex-direction: column; gap: var(--space-1); }
.ifield { padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.ifield.requested { border: 2px solid var(--status-warning-fg); border-inline-start-width: 6px; }
.ifield.is-unknown > label, .ifield.is-unknown > legend { color: var(--text-secondary); }
.unknown-box { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--border); }
.unknown-box label { font-weight: 600; }
.ifield.is-assist > label, .ifield.is-assist > legend { color: var(--status-info-fg, var(--text)); }
.autosave-status { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); min-height: 1.25em; }
.owner-row { margin: 0 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.owner-row > legend { font-weight: 700; }
.consent-channel { margin-bottom: var(--space-3); }
.saved-secret { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--status-success-fg); font-weight: 600; }
.default-submit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.documents { margin: var(--space-4) 0; }
.doc-list .doc-row { align-items: flex-start; }
.doc-row.requested { border-inline-start: 6px solid var(--status-warning-fg); }
.doc-name { margin-bottom: var(--space-1); }
.upload-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); flex: 1 1 260px; }
.upload-controls .field { margin-bottom: 0; }
.upload-controls input[type="file"] { max-width: 100%; min-height: var(--target-min); font: inherit; }
.upload-status { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.upload-status:empty { display: none; }
.only-mobile { display: none; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.review-head h2 { margin: 0; }
.review-section .readonly, .review-meta { display: grid; grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); gap: var(--space-1) var(--space-3); }
.review-section .readonly dd, .review-meta dd { margin: 0; }
.client-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.finalize { margin: var(--space-4) 0; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.intake-done { max-width: 720px; }
.expired-panel { max-width: 720px; margin: var(--space-6) auto; }
.expired-panel h1 { font-size: var(--text-lg); }
.intake-box { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-2) 0 var(--space-3); }
.intake-box p { margin: 0; }
.copy-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.copy-row input { flex: 1 1 280px; min-width: 0; min-height: var(--target-min); padding: var(--space-2) var(--space-3); font: inherit; font-family: var(--font-numeric); background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.intake-review-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: var(--space-5); align-items: start; }
.review-actions { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.review-actions .action-box[open] { padding: var(--space-3); }
.revealed-value { font-family: var(--font-numeric); font-size: var(--text-xl); font-weight: 700; letter-spacing: 0.08em; }
@media (max-width: 1100px) {
  .intake-review-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .intake-layout { display: block; }
  .intake-steps { margin-bottom: var(--space-4); }
  .intake-steps .stepper-menu > summary { display: flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-3); font-weight: 700; cursor: pointer; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
  .intake-steps .stepper-menu[open] > summary { margin-bottom: var(--space-2); }
  .only-mobile { display: block; }
  .review-section .readonly, .review-meta { display: block; }
  .public-head { padding: var(--space-2) var(--space-4); }
}
@media (max-width: 768px) {
  .step-position { display: none; } /* "Passo N de M" is the step list's own summary at 390 */
}

/* Portal do cliente (A33.7): shell com a marca da firma, coluna única nas telas de acesso, seletor empresa/ano.
   Só var(--...) de web/tokens.css; regras e estados em texto + ícone, nunca só cor. Sujeito à validação do A03. */
.portal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-4); color: var(--text); background: var(--surface); border-bottom: 2px solid var(--border-strong); }
.tenant-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.tenant-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; font-weight: 700; color: var(--text-on-primary); background: var(--action-primary); border-radius: var(--radius-md); }
.tenant-name { font-weight: 700; font-size: var(--text-lg); min-width: 0; }
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.head-actions a { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-2); color: var(--link); }
.head-actions a[aria-current="page"] { font-weight: 700; }
.inline-form { display: inline-flex; margin: 0; }
.scope-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-subtle); border-bottom: 1px solid var(--border); }
.scope-field { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; max-width: 360px; }
.scope-field label { margin-bottom: var(--space-1); font-size: var(--text-sm); }
.scope-none { display: flex; align-items: center; min-height: var(--target-min); margin: 0; color: var(--text-secondary); }
.public-main { width: 100%; max-width: 960px; margin: 0 auto; }
.form-card { max-width: 560px; margin: 0 auto; padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.stack-page { max-width: 760px; margin: 0 auto; }
.actions.stack { flex-direction: column; align-items: stretch; }
.actions.stack .btn { width: 100%; }
.text-link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min); color: var(--link); }
input[type="password"], .code-input { width: 100%; max-width: 100%; min-height: var(--target-min); padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-md); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.code-input { font-family: var(--font-numeric); letter-spacing: 0.1em; max-width: 16rem; }
.password-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: stretch; }
.password-row input { flex: 1 1 220px; }
.password-row .btn { flex: none; }
.has-error input[type="password"], .has-error .code-input { border: 2px solid var(--status-danger-fg); }
.rules { list-style: none; margin: var(--space-2) 0 0; padding: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.rules li { display: block; }
.rules li[data-state="met"] { color: var(--status-success-fg); }
.rule-icon { font-weight: 700; }
.rule-state { font-weight: 700; }
.setup-steps { margin: 0 0 var(--space-4); padding-inline-start: var(--space-5); }
.setup-steps > li { margin-bottom: var(--space-4); }
.qr { display: block; width: 200px; height: 200px; max-width: 100%; padding: var(--space-2); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.key-groups { display: flex; flex-wrap: wrap; gap: var(--space-2); font-family: var(--font-numeric); font-size: var(--text-lg); }
.key-group { padding: var(--space-1) var(--space-2); color: var(--text); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); padding-inline-start: var(--space-5); font-family: var(--font-numeric); font-size: var(--text-md); }
.is-disabled { color: var(--text-muted); background: var(--surface-subtle); border-color: var(--border-strong); cursor: not-allowed; }
.disclosure { margin-top: var(--space-3); }
.disclosure > summary { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-3); color: var(--link); font-weight: 600; cursor: pointer; border: 2px solid var(--action-primary); border-radius: var(--radius-md); }
.disclosure[open] > summary { margin-bottom: var(--space-3); }
.session-list, .access-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.session-item, .access-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.session-item .grow, .access-item .grow { flex: 1 1 280px; min-width: 0; }
.session-device, .access-name { margin: 0 0 var(--space-1); font-weight: 600; }
.session-item p, .access-item p { margin-bottom: var(--space-1); }
.access-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.access-actions .disclosure { margin-top: 0; }
/* An opened row/task disclosure (Stripe rotations): the summary stays a normal button and the form takes the full row, instead of the
   inline-flex .inline-form squeezing the summary into a tall narrow box beside it (DUN-4969 R1-02 captures at 390px). */
.actions > details.inline-form[open] { display: block; flex: 1 1 100%; min-width: 0; }
.actions > details.inline-form[open] > summary { margin-bottom: var(--space-3); }
/* Equipe (DUN-4969 R1-03): long synthetic names/e-mails wrap instead of widening the page. Below 1280px the table has no room for six
   columns without chopping words ("Admini/strado"), so every member is a card (the cards-on-mobile pattern, widened for this table):
   role, access and 2FA stay visible and the row actions are full-size (44px) targets in a wrapping row. */
/* (.page-wide table td resets overflow-wrap further down; the extra class keeps this one winning) */
.page-wide .team-roster table th, .page-wide .team-roster table td, .team-roster th, .team-roster td { overflow-wrap: anywhere; }
@media (min-width: 1280px) {
  .team-roster table { table-layout: fixed; width: 100%; }
  .team-roster th:nth-child(1), .team-roster td:nth-child(1) { width: 17%; }
  .team-roster th:nth-child(2), .team-roster td:nth-child(2) { width: 24%; }
  .team-roster th:nth-child(3), .team-roster td:nth-child(3) { width: 14%; }
  .team-roster th:nth-child(4), .team-roster td:nth-child(4) { width: 13%; }
  .team-roster th:nth-child(5), .team-roster td:nth-child(5) { width: 9%; }
  .team-roster th:nth-child(6), .team-roster td:nth-child(6) { width: 23%; }
}
@media (max-width: 1279px) {
  .team-roster { border: 0; background: transparent; overflow: visible; box-shadow: none; }
  .team-roster table, .team-roster tbody, .team-roster tr, .team-roster th, .team-roster td { display: block; width: 100%; }
  .team-roster thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .team-roster tr { margin-bottom: var(--space-3); padding: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
  .team-roster th, .team-roster td { border-bottom: 0; padding: var(--space-1) var(--space-2); text-align: start; }
  .team-roster th[data-label]::before, .team-roster td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
  .team-roster .team-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
  .team-roster .team-actions > .panel, .team-roster .team-actions > .disclosure[open] { flex: 1 1 100%; min-width: 0; max-width: 100%; margin-top: 0; }
  .team-roster .team-actions > .disclosure:not([open]) { flex: 0 0 auto; width: auto; margin-top: 0; padding: 0; border: 0; background: transparent; }
  .team-roster .team-actions > .disclosure:not([open]) > summary { display: inline-flex; width: auto; }
  .team-roster .team-actions .inline-form { flex: 0 1 auto; }
  .team-roster .team-actions .inline-form .btn { flex: 0 1 auto; }
  .team-roster .team-actions .disclosure[open] > summary { display: flex; width: 100%; }
  .team-roster .disclosure input:not([type="checkbox"]), .team-roster .disclosure select { width: 100%; max-width: 100%; }
}
.choices.column { flex-direction: column; }
.vault-box { padding: var(--space-3); background: var(--surface-subtle); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.vault-box .hint { color: var(--text-secondary); }

@media (max-width: 768px) {
  .portal-head { padding: var(--space-2) var(--space-3); }
  .form-card { padding: var(--space-4); border: 0; }
  .scope-field { max-width: none; }
  .scope-bar .btn { flex: 1 1 100%; }
}

/* Propostas (A31.6): quadro (reusa .board/.lane/.lead-card do CRM), composer em duas colunas (1440) e uma (390), página do cliente
   em coluna única. Só var(--…). Sujeito à validação do A03. Texto digitado (título, escopo, itens, termos, mensagem) é .user-text:
   isolado para que caracteres de direção (bidi) não reordenem o texto ao redor. */
.user-text { unicode-bidi: isolate; overflow-wrap: anywhere; }
.column-total { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.proposal-card .card-name a { color: var(--link); }
.composer-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: var(--space-5); align-items: start; }
.composer-main, .composer-side { min-width: 0; }
.composer-side > .totals { position: sticky; top: calc(var(--target-min) + var(--space-5)); }
.proposal-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 var(--space-4); }
.proposal-meta > div { margin-bottom: var(--space-2); }
.proposal-composer textarea { resize: vertical; }
.section-row { padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.insert-template { align-items: end; }
.field-button { align-self: end; }
.pay-group { padding: var(--space-4); }
.pay-group > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-3); font-weight: 700; }
.pay-group > legend + * { clear: both; }
#items-table td input, #items-table td textarea { min-width: 8ch; }
#items-table td.num input { text-align: end; }
.total-line { font-size: var(--text-lg); }
.numeric { font-family: var(--font-numeric); }
.link-box { max-width: 100%; font-family: var(--font-numeric); }
.terms-item { margin-bottom: var(--space-3); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.terms-item > summary { cursor: pointer; font-weight: 600; min-height: var(--target-min); display: flex; align-items: center; }
.terms-preview > summary { cursor: pointer; font-weight: 600; min-height: var(--target-min); display: flex; align-items: center; }
.decision-item { padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.proposal-public { max-width: 760px; margin: 0 auto; }
.proposal-head h1 { margin-bottom: var(--space-2); }
.proposal-head h1:focus, #result:focus { outline: none; }
.proposal-head h1:focus-visible, #result:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.terms-text { padding: var(--space-4); background: var(--surface-subtle); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.decision-form { margin-bottom: var(--space-4); }
.decision-form fieldset { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.decision-form legend { padding: 0 var(--space-2); }
.proposal-state { padding: var(--space-5) 0; }
@media (max-width: 1100px) {
  .composer-layout { display: block; }
  .composer-side > .totals { position: static; }
}
@media (max-width: 768px) {
  .proposal-public .decision-form .actions { position: sticky; bottom: 0; z-index: 4; margin: 0; padding: var(--space-3) 0; background: var(--surface); }
  .proposal-public .decision-form .btn { flex: 1 1 100%; }
  #items-table td input { width: 100%; }
}
#items-table th, #schedule th, #price-table th { white-space: nowrap; }
#items-table .btn, #items-table td.num, #schedule td.num, #price-table td.num { white-space: nowrap; }
#items-table td input[name^="item_description"] { min-width: 18ch; }
#items-table td input[name^="item_service"] { min-width: 14ch; }
@media (max-width: 768px) {
  #items-table td, #schedule td, #price-table td { white-space: normal; }
}

/* Início do portal e Avisos do admin (A34.4): cartões por exercício, sempre ícone + texto, nunca só cor. Só var(--...). Sujeito à validação do A03. */
.public-main.wide { max-width: 1180px; }
.scope-sheet { background: var(--surface-subtle); border-bottom: 1px solid var(--border); }
.scope-sheet > .scope-bar { border-bottom: 0; }
.dash-context { margin: 0 0 var(--space-1); font-size: var(--text-lg); font-weight: 700; }
.dash-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); }
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.dash-card, .dash-next, .dash-year { margin-bottom: 0; }
.dash-next { background: var(--surface-hover); border: 1px solid var(--border); border-inline-start: 4px solid var(--action-primary); }  /* EA-O05: the one thing to do, first */
.dash-next .dash-title { font-size: var(--text-xl); line-height: var(--leading-heading); color: var(--text-heading); }
.dash-title { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 700; }
.dash-count { margin: 0 0 var(--space-2); font-weight: 700; }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-item { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.dash-item:first-child { border-top: 0; padding-top: 0; }
.dash-item p { margin-bottom: var(--space-1); }
.dash-item-title { font-weight: 600; }
.dash-facts { margin: 0 0 var(--space-3); }
.dash-facts > div { padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.dash-facts > div:first-child { border-top: 0; }
.dash-facts dt { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 600; }
.dash-facts dd { margin: 0; }
.money-line { display: block; font-variant-numeric: tabular-nums; }
.state-line { margin: 0 0 var(--space-2); }
.card-foot { margin: var(--space-3) 0 0; }
.plain { white-space: pre-line; overflow-wrap: anywhere; }
.unchecked { margin: 0 0 var(--space-3); padding: 0; list-style: none; font-size: var(--text-sm); }
.unchecked li { margin-bottom: var(--space-1); }
.dash-steps { display: flex; gap: var(--space-3); list-style: none; margin: var(--space-3) 0 0; padding: 0; }
/* EA-O05: the year as a track of stages (bar + name + state), not a row of boxes; a column on phones */
.dash-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) 0 0; border-top: 4px solid var(--border-strong); }
.dash-step > [aria-hidden="true"] { display: none; }
.dash-step .step-name { font-weight: var(--weight-semibold); color: var(--text-heading); }
.dash-step.is-done { border-top-color: var(--status-success-fg); }
.dash-step.is-done .step-status { color: var(--status-success-fg); }
.dash-step.is-current { border-top-color: var(--action-primary); }
.dash-step.is-current .step-name { font-weight: var(--weight-bold); }
.dash-step.is-current .step-status { color: var(--text-heading); font-weight: var(--weight-semibold); }
.dash-step .step-status { font-size: var(--text-sm); color: var(--text-secondary); }
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-steps { flex-direction: column; gap: 0; }
  .dash-step { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-3); padding: var(--space-2) 0 var(--space-2) var(--space-3); border-top: 0; border-inline-start: 4px solid var(--border-strong); }
  .dash-step.is-done { border-inline-start-color: var(--status-success-fg); }
  .dash-step.is-current { border-inline-start-color: var(--action-primary); background: var(--surface-hover); }
  .scope-sheet { padding: var(--space-2) var(--space-3); }
  .scope-sheet > summary { width: 100%; }
}

/* Mensagens e suporte (A36.5): conversa, pedidos, fila e compositor da firma. Texto da mensagem sempre como texto puro. */
.thread { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.msg { max-width: 46rem; margin-bottom: var(--space-3); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.msg-mine, .msg-client { margin-inline-start: var(--space-6); background: var(--surface-subtle); }
.msg-meta { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--text-secondary); }
.msg-meta strong { color: var(--text); }
.msg-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: isolate; }
.msg-files { margin: var(--space-2) 0 0; padding-inline-start: var(--space-4); font-size: var(--text-sm); }
.msg-internal { background: var(--status-warning-bg); border: 2px dashed var(--status-warning-fg); }
.internal-label { color: var(--status-warning-fg); font-weight: 700; }
.lock { vertical-align: -2px; margin-inline-end: var(--space-1); flex: none; }
.tickets { list-style: none; margin: 0; padding: 0; }
.ticket { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.ticket .grow { flex: 1 1 260px; min-width: 0; }
.ticket .grow .muted { display: block; }
.ticket-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.open-ticket > summary { min-height: var(--target-min); display: flex; align-items: center; font-weight: 700; color: var(--link); cursor: pointer; }
.composer textarea { display: block; width: 100%; max-width: 46rem; min-height: 7rem; padding: var(--space-2) var(--space-3); font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); resize: vertical; }
.composer select { max-width: 30rem; }
.visibility { border: 0; padding: 0; margin: 0 0 var(--space-3); }
.visibility legend { padding: 0; margin-bottom: var(--space-2); font-weight: 700; }
.vis-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); max-width: 46rem; }
.vis-option { display: flex; align-items: flex-start; gap: var(--space-2); min-height: var(--target-min); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--duration-state), background-color var(--duration-state); }
.vis-option:hover { border-color: var(--action-primary); }
.vis-option:has(input:checked) { border-color: var(--action-primary); background: var(--surface-selected); }
.vis-option input { margin-top: var(--space-1); flex: none; width: 1.5rem; height: 1.5rem; }
.vis-internal { border-width: 2px; border-style: dashed; border-color: var(--status-warning-fg); background: var(--status-warning-bg); }
.vis-internal:has(input:checked) { border-color: var(--status-warning-fg); background: var(--status-warning-bg); }
.vis-text { display: flex; flex-direction: column; gap: var(--space-1); }
.support-ticket > .card { margin-bottom: var(--space-4); }
.support-ticket > .card > h2, .support-thread > .card > h2 { margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.support-ticket .readonly { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3) var(--space-4); margin: var(--space-3) 0 var(--space-4); }
.support-ticket .readonly > div { padding: var(--space-2) var(--space-3); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
.support-ticket .readonly dt { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-secondary); margin-bottom: 2px; }
.support-ticket .readonly dd { margin: 0; font-weight: var(--weight-semibold); color: var(--text); }
.support-ticket .readonly .text-link { min-height: 0; font-weight: var(--weight-semibold); }
.ticket-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.ticket-actions .inline-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.ticket-actions .inline-form-row select { min-width: 220px; }
.ticket-actions .field, .ticket-actions .actions { margin: 0; }
.ticket-actions #resolve-box > summary { color: var(--text-on-primary); background: var(--action-primary); border-color: var(--action-primary); }
.ticket-actions #resolve-box > summary:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
.card form.inline-action + .action-box, .card .inline-action + .action-box { margin-top: var(--space-3); }
.card :is(.lead-actions, .ticket-actions) form.inline-action + .action-box, .card :is(.lead-actions, .ticket-actions) .inline-action + .action-box { margin-top: 0; }
.history { list-style: none; margin: 0; padding: 0; }
.history:empty::after { content: "—"; display: block; color: var(--text-muted); font-size: var(--text-sm); }
.history li { position: relative; padding: var(--space-1) 0 var(--space-2) var(--space-4); margin-bottom: var(--space-1); border-inline-start: 2px solid var(--border-strong); font-size: var(--text-sm); }
.history li::before { content: ""; position: absolute; inset-inline-start: -5px; top: 10px; width: 8px; height: 8px; background: var(--surface); border: 2px solid var(--action-primary); border-radius: 50%; }
.history li time { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); color: var(--text-heading); }
.support-queue .filter-form { max-width: none; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.support-queue .filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.support-queue .filter-row > .field:not(.check) { flex: 1 1 170px; min-width: 0; margin-bottom: 0; }
.support-queue .filter-row > .field.check { flex: 0 1 auto; min-height: var(--target-min); margin-bottom: 0; padding: 0 var(--space-2); }
.support-queue .filter-row > .actions { flex: 0 0 auto; margin-top: 0; }
.page-wide > form.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.page-wide > form.filters > .field-row { flex: 1 1 360px; margin: 0; gap: var(--space-3); }
.page-wide > form.filters .field { margin-bottom: 0; }
.page-wide > form.filters > .actions { margin-top: 0; }
.page-narrow > dl.readonly { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
.page-narrow > dl.readonly dd { margin: 0; font-weight: var(--weight-semibold); }
@media (min-width: 769px) {
  .support-queue .field.check { flex: 0 0 auto; }
  .support-queue .field.check label { white-space: nowrap; }
  .support-queue table th, .support-queue table td, .page-wide table th, .page-wide table td { overflow-wrap: normal; word-break: normal; }
  .support-queue table th[scope="row"], .support-queue table td:nth-child(3), .support-queue table td:nth-child(6), .support-queue table td:nth-child(7), .page-wide table td:nth-child(5) { white-space: nowrap; }
  .support-queue table td:nth-child(6) { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
}
@media (max-width: 768px) {
  .composer-sticky { position: sticky; bottom: 0; z-index: 5; margin-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; border-color: var(--border-strong); }  /* 390: the composer stays at the foot */
  .composer-sticky textarea { height: 4rem; min-height: 3.5rem; }
  .composer-sticky > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* the label says it */
  .composer-sticky .hint { display: none; }
  .composer-sticky .panel { padding: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-sm); }
  .composer-sticky .field { margin-bottom: var(--space-2); }
  .composer-sticky .actions { margin: 0; }
  .msg-mine, .msg-client { margin-inline-start: 0; }
  .vis-choices { grid-template-columns: 1fr; }
}

/* M8 (integração do M1 completo): seletores que o A06.7/A07.6 também usavam no CRM, no intake e nas propostas
   (.page-head, .inline-form, .candidates, .review-head, .review-meta) ficam com escopo na raiz das telas do A06/A07. */
/* Extração (A06.7): lista, revisão documento | linhas (divisor por teclado), editor assistido e preview de mapeamento */
.numeric { font-variant-numeric: tabular-nums; }
td.numeric, .nowrap, .preview-table thead th, .extraction-table thead th { white-space: nowrap; overflow-wrap: normal; }
.review .review-head { display: block; margin-bottom: var(--space-3); }
.review-head h1 { margin-bottom: var(--space-1); }
:is(.review, .mapping) .review-meta { display: block; color: var(--text-secondary); font-size: var(--text-sm); }
.split { display: grid; grid-template-columns: minmax(0, var(--doc-width, 32%)) 14px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.pane-doc { grid-column: 1; position: sticky; top: var(--space-8); max-height: calc(100vh - var(--space-8)); overflow-y: auto; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.splitter { grid-column: 2; align-self: stretch; min-height: 120px; cursor: col-resize; background: var(--surface-subtle); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); touch-action: none; }
.splitter:hover, .splitter:focus-visible { background: var(--border-strong); }
.pane-stack { grid-column: 3; min-width: 0; }
.pane { min-width: 0; margin-bottom: var(--space-4); }
.pane-tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-3); }
.pane-tabs [role="tab"] { flex: 1 1 0; min-height: var(--target-min); font: inherit; font-weight: 600; color: var(--link); background: var(--surface); border: 2px solid var(--action-primary); border-radius: var(--radius-md); cursor: pointer; }
.pane-tabs [role="tab"][aria-selected="true"] { color: var(--text-on-primary); background: var(--action-primary); }
.source-where { font-weight: 700; }
.source-lines { list-style: none; margin: 0 0 var(--space-3); padding: 0; font-family: var(--font-numeric); font-size: var(--text-sm); }
.source-line { display: flex; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-inline-start: 4px solid var(--surface); }
.source-line.is-selected { font-weight: 700; border-inline-start-color: var(--action-primary); }
.source-no { flex: none; min-width: 3ch; text-align: end; color: var(--text-secondary); }
.source-line.is-selected .source-no { color: inherit; }
.source-text { min-width: 0; white-space: pre-wrap; }
.header-values { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--space-3); }
.header-values dd { margin: 0 0 var(--space-1); }
:is(.accounts, .coverage, .mapping, .review) .inline-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: 0; margin-bottom: var(--space-3); }
:is(.accounts, .coverage, .mapping, .review) .inline-form input[type="text"] { width: auto; flex: 1 1 160px; }
.check-list, .exceptions, .proposal-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.check-item { padding: var(--space-1) var(--space-2); margin-bottom: var(--space-1); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; }
.exception { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--status-danger-fg); border-radius: var(--radius-md); }
.exception-text { margin: 0 0 var(--space-1); font-weight: 600; }
.exception a { display: inline-flex; align-items: center; min-height: var(--target-min); }
.equation dd { font-weight: 700; }
.component-group { margin-bottom: var(--space-5); }
.totals { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-2); }
.totals dt { font-size: var(--text-sm); color: var(--text-secondary); }
.totals dd { margin: 0; font-weight: 700; }
.total-state { display: inline-block; padding: 0 var(--space-2); font-size: var(--text-sm); font-weight: 700; border-radius: var(--radius-sm); }
.lines tr.is-selected th, .lines tr.is-selected td { color: var(--status-info-fg); background: var(--status-info-bg); }
.lines tr.is-selected:focus { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.lines thead th, .lines td.numeric, .lines td.nowrap, .lines th[scope="row"] { white-space: nowrap; overflow-wrap: normal; }
.line-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); }
.line-actions .btn { white-space: nowrap; }
.lines .description { display: inline-block; min-width: 14ch; }
.lines abbr[title] { text-decoration: none; }
.proposal .diff-line { font-weight: 700; }
.proposal-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.proposal-actions form { flex: 1 1 240px; }
.correct-field { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.correct-field > legend { float: left; width: 100%; }
.correct-field > legend + * { clear: both; }
.current { margin-bottom: var(--space-2); }
.current-label { font-weight: 600; color: var(--text-secondary); }
.original { margin-bottom: var(--space-4); }
.diff { padding: var(--space-3); margin-bottom: var(--space-3); border: 2px solid var(--border-strong); border-radius: var(--radius-md); }
.diff ul { margin: 0; padding-inline-start: var(--space-5); }
.preview-table th.is-chosen { color: var(--status-info-fg); background: var(--status-info-bg); }
@media (max-width: 768px) {
  .split { display: block; }
  .pane-doc { position: static; max-height: none; }
  .splitter { display: none; }
  .cards-on-mobile td.numeric { text-align: end; }
  .line-actions { flex-direction: row; flex-wrap: wrap; }
  .lines td.nowrap, .lines th[scope="row"] { white-space: normal; }
  .header-values { display: block; }
}

/* Contas e cobertura (A07.6): inventário, fila de decisões, matriz conta × ciclo (rolagem só dentro da grade) e lista de 390 */
.page-actions { margin-top: 0; }
.page-actions .inline-form { margin-bottom: 0; }
.account-name { display: block; font-weight: 700; }
.inventory-table thead th { white-space: nowrap; overflow-wrap: normal; }
.inventory-table th, .inventory-table td { overflow-wrap: normal; word-break: normal; }
.inventory-table th[scope="row"] { min-width: 200px; }
.inventory-table [data-masked], .alias-timeline li { white-space: nowrap; }
/* M10: .row-actions também é do A39.6 (prazos); aqui só nas telas do A07.6 */
.accounts .row-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.accounts .row-actions .btn { white-space: nowrap; }
.alias-timeline { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.alias-timeline li { margin-bottom: var(--space-1); }
.alias-timeline .arrow { font-weight: 700; }
.folder-block .inline-form input[type="text"] { max-width: 320px; }
.decision-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.decision-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.observed { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--space-3); margin: 0 0 var(--space-3); }
.observed dt { font-weight: 600; color: var(--text-secondary); font-size: var(--text-sm); }
.observed dd { margin: 0 0 var(--space-1); }
.accounts .candidates { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-3); padding: 0; }
.candidate { min-width: 0; padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.candidate-name { margin: 0 0 var(--space-1); font-weight: 700; }
.coverage-list { display: none; }
.grid-wrap { max-width: 100%; overflow-x: auto; margin-bottom: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); }
.coverage-grid { width: auto; min-width: 100%; }
.coverage-grid th, .coverage-grid td { padding: var(--space-1); vertical-align: top; }
.coverage-grid thead th { position: sticky; top: 0; z-index: 2; white-space: nowrap; }
.coverage-grid .grid-account, .coverage-grid .grid-corner { position: sticky; inset-inline-start: 0; z-index: 3; min-width: 220px; max-width: 280px; background: var(--surface); border-inline-end: 2px solid var(--border-strong); }
.coverage-grid .grid-corner { background: var(--surface-subtle); }
.cell-link { display: flex; flex-direction: column; gap: 2px; min-width: 128px; min-height: var(--target-min); padding: var(--space-1) var(--space-2); text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cell-link:hover { text-decoration: underline; }
.cell-link:focus-visible, .cell-link[data-dialog-opener] { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.cell-link.is-listed { border-style: dashed; }
.cell-interval { font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-state { font-weight: 700; font-size: var(--text-sm); }
.cell-marker { display: block; font-size: var(--text-xs); }
.cell-empty { display: block; min-width: 128px; text-align: center; color: var(--text-muted); }
.account-cycles { margin-bottom: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.account-cycles > summary { padding: var(--space-3); cursor: pointer; min-height: var(--target-min); }
.cycle-rows { list-style: none; margin: 0; padding: 0 var(--space-3) var(--space-2); }
.cycle-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.cycle-link { display: inline-flex; align-items: center; min-height: var(--target-min); font-weight: 600; font-variant-numeric: tabular-nums; }
.cycle-row .row-note { flex: 1 1 100%; margin-top: 0; }
.panel-close { display: flex; justify-content: flex-end; margin: 0; }
.cell-head { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.panel-links { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.panel-links a { display: inline-flex; align-items: center; min-height: var(--target-min); }
.panel-form { padding: var(--space-3); margin-bottom: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.draft textarea { font: inherit; }
@media (max-width: 768px) {
  .coverage-matrix { display: none; }
  .coverage-list { display: block; }
  .accounts .row-actions { flex-direction: row; flex-wrap: wrap; }
  .observed { display: block; }
  .page-actions { width: 100%; }
}

/* Catálogo de e-mails (A38.5): editor em duas colunas (blocos | prévia), blocos reordenáveis, contador do WhatsApp */
.editor { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: var(--space-5); align-items: start; }
.editor-main, .editor-side { min-width: 0; }
.editor-side { position: sticky; top: var(--space-3); }
.editor-tabs { display: none; }
.editor fieldset.card { margin: 0 0 var(--space-4); }
.blocks { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.block { margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-subtle); }
.block:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.block-head h3 { margin: 0; font-size: var(--text-md); }
.block-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.variables { margin-bottom: var(--space-4); background: var(--surface-subtle); }
.wa-counter { margin: var(--space-2) 0; font-family: var(--font-numeric); font-weight: 700; }
.wa-counter.warn { color: var(--status-warning-fg); }
.wa-counter.over { color: var(--status-danger-fg); }
.wa-example { margin: 0 0 var(--space-3); padding: var(--space-3); border-inline-start: 4px solid var(--border-strong); background: var(--surface-subtle); white-space: pre-wrap; overflow-wrap: anywhere; }
.preview-controls { gap: var(--space-4); }
.preview-controls .btn { align-self: flex-end; }
.preview-single iframe { height: 560px; }
.versions li { margin-bottom: var(--space-2); }
.versions li[aria-current="true"] { font-weight: 700; }
.readonly.compact { margin: 0; font-size: var(--text-sm); }
.whatsapp-share { display: inline-block; }
[data-wa-result] textarea { width: 100%; font-family: var(--font-numeric); }
@media (max-width: 1100px) {
  .editor { display: block; }
  .editor-side { position: static; }
}
@media (max-width: 768px) {
  .editor-tabs { display: block; position: sticky; top: 0; z-index: 3; background: var(--surface); }
  .block-actions .btn { flex: 1 1 auto; }
  .preview-single iframe { height: 420px; }
}

/* Telas de prazos (A39.6): ações do prazo (cada uma um <details> com formulário; folha inferior no celular), chips de lembrete, widget do cliente */
.row-actions { list-style: none; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); margin: 0; padding: 0; }
.row-actions > li { margin: 0; }
details.act > summary { list-style: none; cursor: pointer; }
details.act > summary::-webkit-details-marker { display: none; }
details.act > summary:focus-visible, details.inline-form > summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
details.act[open] > .sheet { max-width: 360px; margin-top: var(--space-2); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.sheet h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.why { margin: var(--space-1) 0 0; padding-inline-start: var(--space-4); }
ul.chips { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
input[type="number"] { width: 100%; max-width: 160px; min-height: var(--target-min); padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-md); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.chip-toggle { min-height: var(--target-min); margin: 0; cursor: pointer; }
.chip-toggle input { margin: 0; }
.chip-toggle:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.deadlines-widget .deadline-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.deadlines-widget .deadline-list li { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.deadlines-widget .deadline-list p { margin: 0 0 var(--space-1); }
@media (max-width: 768px) {
  details.act[open] > .sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 20; max-width: none; max-height: 85vh; overflow-y: auto; border-width: 2px 0 0; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .row-actions .btn { min-height: var(--target-min); }
}

td .chip, td .numeric { white-space: nowrap; }

/* Próximos 90 dias (A39.7): em telas largas as palavras não quebram no meio ("cumprid/o"). O corpo permite quebra em qualquer ponto
   (overflow-wrap: anywhere), o que zera a largura mínima das colunas e corta palavras; aqui as células quebram só entre palavras e os
   botões de ação quebram o rótulo entre palavras (sem nowrap, para a tabela caber sem rolagem). No celular (cartões) vale a regra do corpo. */
@media (min-width: 769px) {
  .deadlines-table th, .deadlines-table td { overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .deadlines-table th, .deadlines-table td { padding-inline: var(--space-2); }
  .deadlines-table .row-actions .btn { text-align: center; padding-inline: var(--space-2); }
}
.deadlines-table .form-code { white-space: nowrap; }

/* Documentos do portal e do admin (A35.7): checklist por grupo, fila de envio fixa no rodapé, cartão da pasta Drive. Ícone + texto, nunca só cor. Só var(--...). Sujeito à validação do A03. */
.docs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-4); align-items: start; }
.docs-side { position: sticky; top: var(--space-4); }
.doc-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.doc-group { margin-bottom: 0; }
.doc-group > summary { display: flex; align-items: center; min-height: var(--target-min); cursor: pointer; list-style: none; }
.doc-group > summary::-webkit-details-marker { display: none; }
.doc-group > summary::before { content: "▸"; margin-inline-end: var(--space-2); }
.doc-group[open] > summary::before { content: "▾"; }
.doc-group-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-md); }
.doc-items { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.doc-item { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.doc-item:first-child { border-top: 0; }
.doc-item.is-over { background: var(--status-info-bg); outline: 2px dashed var(--action-primary); }
.doc-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); }
.doc-item-title { font-weight: 700; overflow-wrap: anywhere; unicode-bidi: isolate; }
.doc-filename { overflow-wrap: anywhere; unicode-bidi: isolate; }
.doc-meta { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.doc-meta div { display: inline; margin-inline-end: var(--space-3); }
.doc-meta dt, .doc-meta dd { display: inline; margin: 0; }
.doc-meta dt { color: var(--text-secondary); }
.doc-meta dt::after { content: ": "; }
.doc-meta dt.sr-only::after { content: none; }
.doc-instructions { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.doc-declared { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.doc-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.doc-actions .field { margin-bottom: 0; flex: 1 1 16rem; }
.doc-menu { margin-bottom: 0; }
.doc-menu > summary { display: inline-flex; }
.docs-dropcard .dropzone { margin-bottom: var(--space-2); }
.mobile-only { display: none; }
.queue-sticky { position: sticky; bottom: 0; z-index: 5; max-height: 40vh; overflow: auto; margin-bottom: 0; border-color: var(--border-strong); }
.queue-sticky > h2 { font-size: var(--text-md); }
.queue-sticky .queue { margin-bottom: 0; }
.drive-card .panel { margin-bottom: var(--space-3); }
.client-docs .table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); }
.client-docs .table th, .client-docs .table td { padding: var(--space-2); text-align: start; border-bottom: 1px solid var(--border); vertical-align: top; }
.client-docs .menu-items .field { margin-bottom: var(--space-2); }
.review-form { align-items: flex-end; }
@media (max-width: 1100px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .docs-side { position: static; }
  .doc-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .mobile-only { display: inline-flex; }
  .docs-dropzone { display: none; }
  .docs-layout { gap: var(--space-3); }
  .doc-actions .btn { flex: 1 1 auto; }
  .client-docs .table, .client-docs .table thead, .client-docs .table tbody, .client-docs .table tr, .client-docs .table th, .client-docs .table td { display: block; }
  .client-docs .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .client-docs .table tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
  .client-docs .table td { border: 0; padding: var(--space-1) 0; }
}

/* ===================================================================================================================
   EA-O02 (DUN-4760) · famílias de componentes E&A Taxes v2: macros em templates/components/ui.html.j2 e icon.html.j2,
   contrato em docs/design/ea-tax-redesign-components.md. Só var(--…). Alvos >= 44px em todas as larguras.
   =================================================================================================================== */
.icon { display: inline-block; flex: none; vertical-align: middle; }

/* PageHeader e SectionHeader */
.page-header { width: 100%; flex: 1 1 100%; margin-bottom: var(--space-5); }
.eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }  /* lote A: overline da papelaria acima do título */
/* One grid for every staff page: the title and the subtitle keep their line even when a page has no subtitle (the tabs row never
   jumps between sibling tabs), the title is never pushed down by the actions, and every header action has the same height and the
   same width, flush with the right edge (New lead, New proposal, View clients...). On phones the actions go under the text, share
   the row, and keep the height. */
.page-header { --header-action-height: var(--target-min); --header-action-width: 180px; }
.page-header-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.page-header-text { min-width: 0; flex: 1 1 320px; min-height: calc(var(--text-2xl) * var(--leading-heading) + var(--space-2) + var(--text-sm) * var(--leading-body)); }
.page-header h1 { margin: 0; }
.page-desc { margin: var(--space-2) 0 0; max-width: 67ch; color: var(--text-secondary); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.page-actions .subnav-actions { padding-block: 0; }
.page-intro { max-width: 72ch; margin: calc(-1 * var(--space-2)) 0 var(--space-5); color: var(--text-secondary); }  /* the long explanation of a page, under its one row of tabs; the subtitle stays one line */
.page-header .page-actions > .btn, .page-header .page-actions .subnav-actions > .btn, .page-header .page-actions > form > .btn { min-width: var(--header-action-width); min-height: var(--header-action-height); padding-inline: var(--space-4); white-space: nowrap; }  /* outranks the compact-density `.shell-staff main .btn` */
.page-header-date { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--header-action-height); padding: 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); }
@media (min-width: 801px) {
  .page-header-row { flex-wrap: nowrap; }
  .page-header-text { flex: 1 1 auto; min-width: 240px; }
  .page-actions { flex: 0 0 auto; max-width: calc(100% - 240px - var(--space-4)); }  /* the title gives way first (down to 240px); only then the actions wrap, right-aligned */
}
.workbook-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: calc(-1 * var(--space-2)) 0 var(--space-5); }
.workbook-toolbar .inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.workbook-toolbar select { width: auto; min-width: 200px; }
@media (max-width: 800px) {
  .page-header-text { min-height: calc(var(--text-title-mobile) * var(--leading-heading) + var(--space-2) + var(--text-sm) * var(--leading-body)); }
  .page-actions, .page-actions .subnav-actions { width: 100%; }
  .page-header .page-actions > .btn, .page-header .page-actions .subnav-actions > .btn, .page-header .page-actions > form > .btn { flex: 1 1 var(--header-action-width); }
  .page-header .page-actions > form { display: flex; flex: 1 1 var(--header-action-width); }
  .page-actions .page-header-date { flex: 1 1 100%; }
}
.page-header .subnav-bar { margin-top: var(--space-4); padding: 0; background: transparent; border-bottom: 1px solid var(--border); }
.page-header .subnav { padding: 0; background: transparent; border-bottom: 0; }
.page-header > .subnav:not(.subnav-local) { margin-top: var(--space-4); border-bottom: 1px solid var(--border); }
.page-header .subnav-local { margin-top: var(--space-2); padding: 0; background: transparent; border-bottom: 1px solid var(--border); }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.section-head > h2, .section-head > h3 { margin: 0; }
.section-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--target-min); font-weight: var(--weight-semibold); text-decoration: none; }
.section-link:hover { text-decoration: underline; }

/* Layout: pilha e grades que caem para uma coluna */
.stack > * + * { margin-top: var(--space-5); }
.grid-main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr); gap: var(--space-5); align-items: start; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.grid-main > .card, .grid-2 > .card { margin-bottom: 0; }

/* Toolbar, SearchField e filtros */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.toolbar .field { margin-bottom: 0; flex: 0 1 220px; }
.search-field { flex: 1 1 260px; min-width: 0; }
.search-input { position: relative; }
.search-field .search-icon { position: absolute; inset-inline-start: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.search-field input[type="search"] { padding-inline-start: calc(var(--space-3) + 28px); }

/* Switch: checkbox real com role=switch; a linha inteira é o alvo */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--target-min); margin: 0; cursor: pointer; }
.switch-text { font-weight: var(--weight-semibold); }
input.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; background: var(--border-strong); border: 0; border-radius: 13px; cursor: pointer; transition: background-color var(--duration-state); }
input.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; background: var(--surface); border-radius: 50%; transition: transform var(--duration-state); }
input.switch:checked { background: var(--action-primary); }
input.switch:checked::after { transform: translateX(18px); }
input.switch:disabled { background: var(--disabled-bg); cursor: not-allowed; }

/* FormActions + DirtyStateGuard */
.dirty-note { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: var(--weight-semibold); color: var(--status-warning-fg); }
.dirty-note[hidden] { display: none; }

/* InlineNotice, Toast, EmptyState, FlagOff, PermissionBoundary */
.toast-region { position: fixed; inset-inline-end: var(--space-4); bottom: var(--space-4); z-index: 40; max-width: min(420px, calc(100vw - 2 * var(--space-4))); }
.toast { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); }
.toast > .icon { margin-top: 12px; }
.toast p { flex: 1 1 auto; margin: 0; padding-top: 10px; font-weight: var(--weight-semibold); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); text-align: center; color: var(--text-secondary); }
.empty-state .icon { color: var(--text-muted); }
.empty-title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-heading); }
.empty-detail { margin: 0 0 var(--space-2); max-width: 52ch; }

/* Identidade: Avatar e ClientIdentity (empresa e contato em linhas distintas) */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--link); background: var(--surface-selected); border-radius: 10px; }
.avatar-lg { width: 48px; height: 48px; font-size: var(--text-sm); border-radius: 12px; }
.client-identity { display: inline-flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.client-identity-text { display: flex; flex-direction: column; min-width: 0; }
.client-name { font-weight: var(--weight-bold); color: var(--text-heading); }
a.client-name { text-decoration: none; }
a.client-name:hover { text-decoration: underline; }
.client-contact, .client-meta { font-size: var(--text-sm); color: var(--text-secondary); }

/* Métricas (EA-O02 + bs-slate-admin-console): faixa horizontal unificada de KPIs com divisórias de 1px, valor tabular e fonte real */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 var(--space-5); padding: 0; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--shadow-xs); overflow: hidden; }
.metric { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--space-4) var(--space-5); background: var(--surface); border: 0; border-radius: 0; box-shadow: none; overflow: hidden; transition: background-color var(--duration-state); }
@media (min-width: 1200px) {
  .metrics > .metric:last-child:nth-child(4n + 1) { grid-column: span 4; }
  .metrics > .metric:last-child:nth-child(4n + 2) { grid-column: span 3; }
  .metrics > .metric:last-child:nth-child(4n + 3) { grid-column: span 2; }
}
.metric:has(.metric-value a:hover), .metric:has(.metric-value a:focus-visible) { background: var(--surface-subtle); }
.metric dt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 0; margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.35; color: var(--text-heading); }
.metric dt .icon { width: 15px; height: 15px; color: var(--text-muted); flex: none; }
.metric dd { margin: 0; }
.metric-value { padding-bottom: var(--space-1); font-size: 28px; font-weight: var(--weight-bold); line-height: 1.15; letter-spacing: -0.02em; color: var(--text-heading); }
.metric-value a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }  /* EA-O08: the figure reads as a figure (kit); the link shows on hover/focus and covers the card */
.metric-value a::after { content: ""; position: absolute; inset: 0; }
.metric-value a:hover, .metric-value a:focus-visible { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.metric-missing { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.metric-note { margin-bottom: 2px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-secondary); }
.metric-source { margin: auto 0 0; padding: var(--space-1) 0 0; background: transparent; font-size: var(--text-xs); line-height: 1.4; color: var(--text-secondary); }
.kpi-spark { display: block; height: 42px; margin: 0 calc(-1 * var(--space-4)); overflow: hidden; }
.kpi-spark svg { display: block; width: 100%; height: 100%; }
.spark-line { fill: none; stroke: var(--chart-1); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.spark-area { fill: var(--surface-selected); opacity: 0.65; }
.spark-tone-1 .spark-line { stroke: var(--chart-1); }
.spark-tone-1 .spark-area { fill: var(--surface-selected); }
.spark-tone-2 .spark-line { stroke: var(--chart-2); }
.spark-tone-2 .spark-area { fill: var(--status-success-bg); }
.spark-tone-3 .spark-line { stroke: var(--chart-3); }
.spark-tone-3 .spark-area { fill: var(--status-review-bg); }
.spark-tone-4 .spark-line { stroke: var(--chart-4); }
.spark-tone-4 .spark-area { fill: var(--status-warning-bg); }

/* NextActionCard: bloco navy com texto branco e botão branco */
.next-action { padding: var(--space-5) var(--space-5) var(--space-5); margin-bottom: var(--space-5); color: var(--text-on-emphasis); background: var(--surface-emphasis); border-radius: var(--radius-panel); }
.next-action :focus-visible { outline-color: var(--focus-ring-on-dark); }
.next-action-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-on-nav-muted); }
.next-action h2 { margin: 0 0 var(--space-2); font-size: var(--text-xl); color: var(--text-on-emphasis); }
.next-action-detail { max-width: 57ch; margin: 0 0 var(--space-4); color: var(--text-on-nav-muted); }
.next-action-meta { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--text-on-nav-muted); }
@media (min-width: 801px) {
  .overview-focus .next-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-5); padding: var(--space-4) var(--space-5); }
  .overview-focus .next-action-eyebrow, .overview-focus .next-action h2, .overview-focus .next-action-detail { grid-column: 1; }
  .overview-focus .next-action h2 { margin-bottom: var(--space-1); font-size: var(--text-lg); }
  .overview-focus .next-action-detail { margin-bottom: 0; font-size: var(--text-sm); }
  .overview-focus .next-action .btn { grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: center; }
  .overview-focus .next-action-meta { grid-column: 2; grid-row: 3; justify-self: end; margin: var(--space-1) 0 0; }
}

/* WorkQueue */
.work-queue { list-style: none; margin: 0; padding: 0; }
.wq-item { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto auto; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.wq-item:first-child { padding-top: 0; }
.wq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.wq-item .client-identity { align-items: center; }
.wq-item .client-name { overflow-wrap: normal; hyphens: manual; }
.wq-item a.client-name { display: inline-flex; align-items: center; min-height: 28px; }
.wq-task { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.wq-title { margin: 0; font-weight: var(--weight-medium); color: var(--text-heading); }
.wq-due { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; }
.wq-item > .btn.btn-ghost { padding: 0 var(--space-3); background: var(--surface-subtle); border: 1px solid var(--border); color: var(--text-heading); }
.wq-item > .btn.btn-ghost:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text-heading); }

/* Timeline (ator humano/agente/sistema sempre escrito) */
.ea-timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { position: relative; padding: 0 0 var(--space-4) var(--space-5); border-inline-start: 2px solid var(--border); }
.tl-item::before { content: ""; position: absolute; inset-inline-start: -6px; top: 4px; width: 10px; height: 10px; background: var(--surface); border: 2px solid var(--border-strong); border-radius: 50%; }
.tl-agent::before { border-color: var(--status-review-fg); }
.tl-meta { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--text-secondary); }
.tl-text { margin: 0; white-space: pre-wrap; }

/* Pagination e MobileRecordList */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.pagination-pos { font-size: var(--text-sm); color: var(--text-secondary); }
.record-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.record { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.record:last-child { border-bottom: 0; }
.record-main { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.record-title { font-weight: var(--weight-bold); color: var(--text-heading); }
a.record-title { display: inline-flex; align-items: center; min-height: var(--target-min); text-decoration: none; }
a.record-title:hover { text-decoration: underline; }
.record-subtitle, .record-meta { font-size: var(--text-sm); color: var(--text-secondary); }
.only-desktop { display: block; }
.only-phone { display: none; }

/* Chart: barras SVG + tabela equivalente sempre visível */
.chart { margin: 0; }
.chart figcaption { margin-bottom: var(--space-2); font-weight: var(--weight-semibold); }
.chart-bars { display: block; width: 100%; height: auto; max-height: 160px; margin-bottom: var(--space-2); background: var(--surface-subtle); border-radius: var(--radius-sm); }
.series-1 { fill: var(--chart-1); background: var(--chart-1); }
.series-2 { fill: var(--chart-2); background: var(--chart-2); }
.series-3 { fill: var(--chart-3); background: var(--chart-3); }
.series-4 { fill: var(--chart-4); background: var(--chart-4); }
.chart-table th, .chart-table td { padding: var(--space-2) 0; }
.chart-table tbody tr:hover > th, .chart-table tbody tr:hover > td { background: transparent; }
.legend-swatch { display: inline-block; width: 12px; height: 12px; margin-inline-end: var(--space-2); vertical-align: -1px; border-radius: 2px; }

/* Upload: escolher arquivo é o caminho principal; arrastar é opcional */
.upload-zone { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5); text-align: center; background: var(--surface); border: 2px dashed var(--border-strong); border-radius: var(--radius-panel); }
.upload-zone.is-over { background: var(--surface-selected); border-color: var(--action-primary); }
.upload-zone .icon { color: var(--link); }
.upload-zone-title { margin: 0; font-weight: var(--weight-semibold); }
.upload-zone-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.upload-zone label.btn { margin: 0; font-size: inherit; }
.upload-camera { display: none; }
.upload-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.upload-item { list-style: none; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.upload-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.upload-name { flex: 1 1 160px; min-width: 0; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.upload-item progress { display: block; width: 100%; height: 8px; margin-top: var(--space-2); accent-color: var(--action-primary); }
.upload-item-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.file-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.file-row:last-child { border-bottom: 0; }
.file-row > .icon { color: var(--link); }
.file-row-text { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.file-name { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.file-meta { font-size: var(--text-sm); color: var(--text-secondary); }
.source-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--target-min); font-weight: var(--weight-semibold); }

/* Mensagens: externa x nota interna inequívocas; nota interna nunca chega ao portal (regra do servidor) */
.conv-list { list-style: none; margin: 0; padding: 0; }
.conv-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); min-height: var(--target-min); padding: var(--space-3) var(--space-4); color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.conv-link:hover { background: var(--surface-hover); }
.conv-link[aria-current="page"] { background: var(--surface-selected); }
.conv-title { font-weight: var(--weight-semibold); color: var(--text-heading); }
.is-unread .conv-title { font-weight: var(--weight-bold); }
.conv-when { font-size: var(--text-xs); color: var(--text-secondary); }
.conv-preview { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-unread { justify-self: start; }
.ea-thread { list-style: none; margin: 0; padding: 0; }
.ea-msg { max-width: 46rem; margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.ea-msg-mine { margin-inline-start: auto; background: var(--surface-selected); border-color: var(--surface-selected); }
.ea-msg-internal { background: var(--status-warning-bg); border: 2px dashed var(--status-warning-fg); }
.ea-msg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--text-secondary); }
.ea-msg-meta strong { color: var(--text); }
.ea-msg-text { margin: 0; white-space: pre-wrap; }
.ea-msg-files { list-style: none; margin: var(--space-2) 0 0; padding: 0; font-size: var(--text-sm); }
.internal-tag { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-bold); color: var(--status-warning-fg); }

/* Cobrança: valor neutro (nunca colorido), estado em chip separado */
.invoice-list { list-style: none; margin: 0; padding: 0; }
.invoice-row { display: grid; grid-template-columns: minmax(0, 1.5fr) auto auto auto; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.invoice-row:last-child { border-bottom: 0; }
.invoice-main { display: flex; flex-direction: column; min-width: 0; }
.invoice-number { font-weight: var(--weight-bold); }
.invoice-client { font-size: var(--text-sm); color: var(--text-secondary); }
.invoice-amount { font-weight: var(--weight-semibold); color: var(--text); text-align: end; }
.invoice-due { font-size: var(--text-sm); color: var(--text-secondary); }

/* Agenda: slot real com fuso; compromisso com data compacta */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.slot { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: var(--target-min); padding: var(--space-2) var(--space-3); margin: 0; font-weight: var(--weight-regular); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer; }
.slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slot:has(input:checked) { color: var(--text-on-primary); background: var(--action-primary); border-color: var(--action-primary); }
.slot:has(input:focus-visible) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.slot.is-disabled { color: var(--disabled-fg); background: var(--disabled-bg); cursor: not-allowed; }
.slot-time { font-weight: var(--weight-bold); }
.slot-duration { font-size: var(--text-sm); }
.appointments { list-style: none; margin: 0; padding: 0; }
.appointment { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.appointment:last-child { border-bottom: 0; }
.appt-date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 48px; height: 52px; background: var(--surface-selected); border-radius: 10px; }
.appt-month { font-size: var(--text-xs); text-transform: uppercase; color: var(--link); }
.appt-day { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-heading); line-height: 1.1; }
.appt-text { display: flex; flex-direction: column; min-width: 0; }
.appt-time, .appt-meta { font-size: var(--text-sm); color: var(--text-secondary); }
.appt-title { font-weight: var(--weight-bold); color: var(--text-heading); }

/* Drawer: <dialog> modal nativo (fundo inerte, Esc, retorno do foco) */
dialog.drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; inset-inline-end: auto; width: min(320px, 88vw); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; color: var(--text); background: var(--surface); border: 0; box-shadow: var(--shadow-elevated); }
dialog.drawer-end { inset-inline-start: auto; inset-inline-end: 0; }
dialog.drawer[open] { display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.drawer-title { margin: 0; font-size: var(--text-lg); }
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-3) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom)); }

@media (max-width: 1100px) {
  .grid-main { grid-template-columns: minmax(0, 1.4fr) minmax(250px, 1fr); gap: var(--space-4); }
}
@media (min-width: 801px) and (max-width: 1199px) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* EA-O04: six figures as 3+3, never 4+2 */
  .metrics > .metric:last-child:nth-child(3n + 1) { grid-column: span 3; }
  .metrics > .metric:last-child:nth-child(3n + 2) { grid-column: span 2; }
}
@media (max-width: 800px) {
  .grid-main, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
  .metric { padding: var(--space-3); }
  .metric dt { min-height: 0; }
  .metric dt, .metric-note, .metric-source { font-size: var(--text-sm); }
  .metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .metric-value { font-size: var(--text-lg); }
  .metric-value a { min-width: var(--target-min); min-height: var(--target-min); }
  .wq-item { grid-template-columns: minmax(0, 1fr) auto; }
  .wq-item a.client-name { min-width: var(--target-min); min-height: var(--target-min); }
  .wq-task { grid-column: 1 / -1; grid-row: 2; }
  .wq-due { grid-column: 1; grid-row: 3; }
  .wq-item > .btn { grid-column: 2; grid-row: 3; justify-self: end; }
  .invoice-row { grid-template-columns: minmax(0, 1fr) auto; }
  .invoice-due { grid-column: 1; }
  .only-desktop { display: none; }
  .only-phone { display: block; }
  .upload-camera { display: inline-flex; }
  .next-action .btn { width: 100%; }
  .toast-region { inset-inline: var(--space-3); bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); max-width: none; }
}
@media (max-width: 360px) {
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .wq-item .client-name { overflow-wrap: break-word; }
}
@media print {
  .next-action { color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); }
  .next-action h2, .next-action-detail, .next-action-eyebrow, .next-action-meta { color: var(--text); }
  .toast-region, dialog.drawer, .btn-icon { display: none; }
}

/* Catálogo de desenvolvimento (EA-O02): amostras de cor por alias semântico */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.swatch { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-xs); }
.swatch-chip { display: block; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.sw-surface-page { background: var(--surface-page); }
.sw-surface { background: var(--surface); }
.sw-surface-subtle { background: var(--surface-subtle); }
.sw-surface-nav { background: var(--surface-nav); }
.sw-action-primary { background: var(--action-primary); }
.sw-action-primary-hover { background: var(--action-primary-hover); }
.sw-link { background: var(--link); }
.sw-focus-ring { background: var(--focus-ring); }
.sw-border { background: var(--border); }
.sw-border-strong { background: var(--border-strong); }
.sw-text { background: var(--text); }
.sw-text-secondary { background: var(--text-secondary); }
.catalog-section { scroll-margin-top: var(--space-5); }
.catalog-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.catalog-row:last-child { margin-bottom: 0; }
.catalog-contract { margin: 0 0 var(--space-4); }
.catalog-nav-panel { margin: 0 0 var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); overflow: hidden; }
.catalog-tabs { margin: 0; padding: 0 var(--space-4); border-bottom: 1px solid var(--border); }
.catalog-tabs ul { gap: var(--space-4); margin: 0; border-bottom: 0; }
.catalog-tabs a { padding: var(--space-2) var(--space-1); }
.catalog-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-heading); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.catalog-tabs a[aria-current="page"] .catalog-tab-count { color: var(--text-selected); background: var(--surface-selected); border-color: var(--action-primary); }
.catalog-subnav { padding: var(--space-3) var(--space-4); background: var(--surface-subtle); }
.catalog-subtabs { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; overflow-x: auto; }
.catalog-subtab { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--target-min); padding: 0 var(--space-3); white-space: nowrap; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-heading); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; transition: background-color var(--duration-state), border-color var(--duration-state); }
.catalog-subtab:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.catalog-subtab[aria-current="page"] { font-weight: var(--weight-bold); color: var(--text-on-primary); background: var(--action-primary); border-color: var(--action-primary); }
.catalog-group { margin: 0 0 var(--space-6); }
.catalog-group-head { margin: var(--space-5) 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.catalog-group > .catalog-group-head:first-child { margin-top: 0; }
.catalog-group-head .section-head { margin-bottom: 0; }
.catalog-card { margin: 0 0 var(--space-4); }
.catalog-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.catalog-card-head h3 { margin: 0; font-size: var(--text-lg); color: var(--text-heading); }
.catalog-card-desc { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); }
.catalog-macro { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); font-family: var(--font-numeric); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-heading); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.catalog-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.catalog-subblock { margin-top: var(--space-3); padding: var(--space-4); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
.catalog-subblock:first-child { margin-top: 0; }

/* ===================================================================================================================
   EA-O03 (DUN-4761) · shells E&A Taxes v2: staff (lateral navy + topo claro + subnavegação do módulo), operador (barra de
   contexto), portal (lateral clara; barra inferior de 4 no celular) e público (só cabeçalho). Contrato:
   docs/design/ea-tax-redesign-shells.md. Breakpoints: >= 1200 lateral 232 px; 801–1199 lateral 210 px; <= 800 drawer + barra
   inferior. Sem rolagem horizontal da página.
   =================================================================================================================== */
.banner { padding: var(--space-1) var(--space-4); font-size: var(--text-xs); font-weight: var(--weight-semibold); border-bottom: 1px solid var(--border); }

/* Staff (EA-O03 + bs-slate-admin-console: lateral clara Slate com item ativo em cartão branco + painel principal arredondado) */
.shell-staff { background: var(--surface-page); }
.staff-grid { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
/* Deploy D2: access pages without the sidebar. Two classes, so it outranks the 801–1199 px `.staff-grid` rule below at
   every width (one class lost to it by source order and squeezed the page into the 210 px sidebar track). */
.staff-grid.staff-grid-bare { grid-template-columns: minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--space-3); height: 100vh; height: 100dvh; overflow-y: auto; padding: var(--space-3); color: var(--text); background: var(--surface-page); }
.sidebar :focus-visible { outline-color: var(--focus-ring); }
.sidebar-brand { padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); }
.sidebar-brand .brand-link { color: var(--text-heading); font-weight: var(--weight-bold); }
.sidebar-firm { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: var(--space-2) var(--space-3); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
.sidebar-firm-name { font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--text-heading); }
.sidebar-firm-sub { font-size: var(--text-xs); color: var(--text-secondary); }
.global-nav { flex: 1 1 auto; }
.nav-group-title { margin: var(--space-3) var(--space-3) var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.nav-group-title:first-child { margin-top: var(--space-1); }
.nav-list, .nav-sub { list-style: none; margin: 0; padding: 0; }
.nav-item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); padding: 0 var(--space-3); margin: 2px 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-md); transition: background-color var(--duration-state), color var(--duration-state), box-shadow var(--duration-state), border-color var(--duration-state); }
.nav-item .icon { color: var(--text-secondary); transition: color var(--duration-state); }
.nav-item:hover { color: var(--text-heading); background: var(--surface-subtle); }
.nav-item:hover .icon { color: var(--text-heading); }
.nav-item[aria-current] { color: var(--text-heading); font-weight: var(--weight-bold); background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-active-nav); }
.nav-item[aria-current] .icon { color: var(--text-heading); }
.nav-sub { margin: var(--space-1) 0 var(--space-2) var(--space-5); padding-inline-start: var(--space-2); border-inline-start: 1px solid var(--border-strong); }
.nav-subitem { display: flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-md); transition: background-color var(--duration-state), color var(--duration-state); }
.nav-subitem:hover { color: var(--text-heading); background: var(--surface-subtle); }
.nav-subitem[aria-current] { font-weight: var(--weight-bold); color: var(--text-selected); background: var(--surface-selected); }
.sidebar-viewer { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); }
.sidebar-viewer > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.viewer-name { font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--text-heading); }
.viewer-role { font-size: var(--text-xs); color: var(--text-secondary); }
.sidebar-close { display: none; }
.staff-main { min-width: 0; display: flex; flex-direction: column; margin: var(--space-2) var(--space-2) var(--space-2) 0; background: var(--surface-page); /* lote A: névoa é o papel; os cartões são o branco */ border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); overflow: clip; }
.staff-grid-bare .staff-main { margin: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.shell-staff .topbar { position: static; display: flex; align-items: center; gap: var(--space-2) var(--space-3); min-height: 52px; padding: var(--space-2) var(--space-6); color: var(--text); background: var(--surface); border-bottom: 1px solid var(--border); }
.shell-staff .topbar :focus-visible { outline-color: var(--focus-ring); }
.shell-staff .topbar a.topbar-menu { color: var(--text-heading); }
.topbar-brand, .shell-staff .topbar .topbar-menu { display: none; }
.staff-grid-bare .topbar-brand { display: inline-flex; }  /* the access pages have no sidebar: the logo goes in the top bar */
.topbar-spacer { flex: 1 1 auto; }
.topbar-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); padding: 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--link); text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-md); transition: background-color var(--duration-state), border-color var(--duration-state); }
.shell-staff .topbar a.topbar-link { color: var(--link); }
.topbar-link:hover { background: var(--surface-hover); border-color: var(--border); }
.sidenav { min-width: 0; }
.subnav { padding: 0 var(--space-6); background: var(--surface); border-bottom: 1px solid var(--border); }
.subnav ul { list-style: none; display: flex; gap: var(--space-5); margin: 0; padding: 0; overflow-x: auto; }
.subnav a { display: inline-flex; align-items: center; min-height: var(--target-min); white-space: nowrap; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--text-heading); }
.subnav a[aria-current] { color: var(--text-heading); font-weight: var(--weight-bold); border-bottom-color: var(--action-primary); }
/* EA-S05 (DUN-4968): the registry's rows. Sub-destinations and, below them, the local tabs of the section; the contextual action
   (Novo lead) sits at the end of the first row and wraps under it when the row is narrow. */
.subnav-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); padding-inline-end: var(--space-6); background: var(--surface); border-bottom: 1px solid var(--border); }
.subnav-bar .subnav { flex: 1 1 320px; min-width: 0; border-bottom: 0; }
.subnav-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-1); }
/* 2026-11-09: the sub-destinations moved into the sidebar, so the local row is a page's only row and reads as the primary one */
.subnav-local { background: transparent; }
.subnav-local a { font-weight: var(--weight-semibold); }
.subnav-local a[aria-current] { font-weight: var(--weight-bold); }
.nav-sub { list-style: none; margin: 2px 0 var(--space-2); padding: 0 0 0 calc(var(--space-3) + 20px + var(--space-2)); display: flex; flex-direction: column; gap: 2px; }
.nav-sub .nav-subitem { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-md); }
.slate-filter-pills ul { list-style: none; display: contents; margin: 0; padding: 0; }
.nav-item span { overflow-wrap: normal; word-break: normal; hyphens: manual; }  /* "Mensagens e E-mail" broke into "E-/mail" in the 210 px sidebar */
.shell-staff main { width: 100%; max-width: var(--content-max-admin); margin: 0 auto; padding: var(--space-5) var(--space-6) var(--space-7); }
.shell-staff .staff-grid:not(.staff-grid-bare) main { margin: 0; }
.shell-staff .staff-grid:not(.staff-grid-bare) div.page-narrow { max-width: 100%; }
.shell-staff .staff-grid:not(.staff-grid-bare) div.page-narrow > :not(.page-header) { max-width: 720px; }
.shell-staff { font-size: var(--text-sm); }  /* densidade do escritório: corpo 14px; inputs continuam 16px */
.shell-staff :is(input, select, textarea) { font-size: var(--text-md); }

/* Barra de contexto do operador */
.contextbar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); padding: var(--space-2) var(--space-6); background: var(--surface-subtle); border-bottom: 1px solid var(--border); }
.ctx-item { font-size: var(--text-sm); }

/* Barra inferior (celular) */
.bottom-nav { display: none; }
.bottom-item { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 56px; padding: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-md); }
.bottom-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-item[aria-current] { color: var(--text-heading); font-weight: var(--weight-bold); }
.bottom-item[aria-current] .icon { stroke-width: 2.3; }

@media (max-width: 1199px) {
  .staff-grid { grid-template-columns: var(--sidebar-width-compact) minmax(0, 1fr); }
  .shell-staff main, .shell-staff .topbar, .subnav, .contextbar { padding-inline: var(--space-5); }
}
@media (max-width: 800px) {
  .staff-grid { display: block; }
  .staff-main { margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .sidebar { display: none; }
  .sidebar:target { position: fixed; inset: 0 auto 0 0; z-index: 45; display: flex; width: min(300px, 88vw); height: 100dvh; box-shadow: var(--shadow-elevated); }
  .sidebar:target .sidebar-close { display: inline-flex; color: var(--text-heading); }
  .topbar-brand, .shell-staff .topbar .topbar-menu { display: inline-flex; }
  .topbar-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar-link { width: var(--target-min); justify-content: center; padding: 0; }
  .shell-staff .topbar { padding: var(--space-1) var(--space-3); min-height: 56px; }
  .subnav, .contextbar { padding-inline: var(--space-4); }
  .subnav-bar { padding-inline-end: var(--space-4); }
  .shell-staff main { padding: var(--space-5) var(--space-4) var(--space-7); }
  .bottom-nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: flex; gap: var(--space-1); padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
  .has-bottom-nav main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .has-bottom-nav .form-actions, .has-bottom-nav .composer-sticky, .has-bottom-nav .queue-sticky { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .drawer .global-nav { color: var(--text); }
}
/* EA-S05 / R0 F-09: at 200 % zoom a 390 px phone has a 195 px viewport (and a landscape phone is under 440 px tall): the sticky context bar
   (about half of the screen once its fields wrap) and the fixed bottom bar left no room for the page. Below these effective sizes the
   context bar scrolls with the page and the bottom bar keeps only its icons (the visible text stays in the accessible name). */
@media (max-width: 320px), (max-height: 440px) {
  .contextbar { position: static; }
}
@media (max-width: 320px) {
  /* R1 F-09: the operator's five 44 px destinations do not fit 195 px. The bar used to scroll sideways, but Chromium does not scroll a
     fixed bar to the item that takes keyboard focus (the fifth stayed at 232 px of a 195 px screen, neither by Tab nor by focus()), so
     a keyboard user could not see where focus was. The items wrap into a second row instead: nothing is hidden, nothing scrolls.
     Sides 4 px and gaps 2 px also fit the staff's three shortcuts + Menu (4 x 44 px) in one row (it was 204 px: Menu 1 px past the edge). */
  .bottom-nav { flex-wrap: wrap; justify-content: center; gap: 2px; padding-inline: var(--space-1); }
  .bottom-item { min-height: var(--target-min); }
  .bottom-item span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .has-bottom-nav main { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }  /* room for two rows of the bar */
}
@media print {
  .sidebar, .topbar, .subnav, .subnav-bar, .bottom-nav, .banner, .skip { display: none !important; }
  .staff-grid { display: block; }
}

/* Drawer de navegação do escritório: mesma superfície Slate da lateral */
dialog.drawer-nav { color: var(--text); background: var(--surface-page); }
dialog.drawer-nav .drawer-head { background: var(--surface); border-bottom-color: var(--border); }
dialog.drawer-nav .drawer-title { color: var(--text-heading); }
dialog.drawer-nav .btn-ghost { color: var(--text-heading); }
dialog.drawer-nav .btn-ghost:hover { background: var(--surface-hover); }
dialog.drawer-nav :focus-visible { outline-color: var(--focus-ring); }

/* Portal: lateral clara no desktop, cabeçalho leve, 4 destinos na barra inferior do celular */
.portal { background: var(--surface-page); }
.portal-grid { display: block; min-height: 100vh; min-height: 100dvh; }
.portal-inside .portal-grid { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.portal-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--space-4); height: 100vh; height: 100dvh; overflow-y: auto; padding: var(--space-5) var(--space-4) var(--space-4); background: var(--surface); border-inline-end: 1px solid var(--border); }
.portal-side .tenant-brand { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.portal-context { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--space-2); margin: 0; padding: var(--space-3); font-size: var(--text-sm); background: var(--surface-subtle); border-radius: var(--radius-md); }
.portal-context-label { color: var(--text-secondary); }
.portal-nav-list { list-style: none; margin: 0; padding: 0; }
.portal-nav-item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); padding: 0 var(--space-3); margin: 2px 0; font-weight: var(--weight-semibold); color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-md); }
.portal-nav-item:hover { color: var(--text-heading); background: var(--surface-hover); }
.portal-nav-item[aria-current="page"] { color: var(--text-selected); background: var(--surface-selected); }
.portal-side-foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border); }
.portal-side-close { display: none; }  /* only in the no-JS phone overlay (below) */
.portal-main { min-width: 0; }
.portal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-height: 64px; padding: var(--space-2) var(--space-5); background: var(--surface); border-bottom: 1px solid var(--border); }
.portal-inside .portal-head-brand { display: none; }
.portal-inside .portal-head { justify-content: flex-end; }
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.portal .tenant-name { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-heading); }
.scope-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-5); font-size: var(--text-sm); color: var(--text-secondary); background: var(--surface-subtle); border-bottom: 1px solid var(--border); }
.scope-sheet > .scope-bar { padding-inline: var(--space-5); }
.portal main { width: 100%; max-width: var(--content-max-portal); margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-7); }
.portal-inside main { margin: 0; }
.portal-bottom { display: none; }

/* Público: cabeçalho claro com o logo, sem lateral */
.public-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-height: 64px; padding: var(--space-2) var(--space-5); background: var(--surface); border-bottom: 1px solid var(--border); }
.public-head .tenant-brand { gap: var(--space-3); }

@media (max-width: 800px) {
  .portal-inside .portal-grid { display: block; }
  .portal-side { display: none; }
  .portal-side:target { position: fixed; inset: 0 0 0 auto; z-index: 45; display: flex; width: min(320px, 88vw); height: 100dvh; box-shadow: var(--shadow-elevated); }
  .portal-side:target .portal-side-close { display: inline-flex; align-self: flex-end; }
  .portal-inside .portal-head-brand { display: flex; }
  .portal-inside .portal-head { justify-content: space-between; }
  .portal-head, .public-head { padding: var(--space-1) var(--space-3); min-height: 64px; }
  .portal .head-actions .topbar-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .portal .head-actions .topbar-link { width: var(--target-min); justify-content: center; padding: 0; }
  .portal main { padding: var(--space-5) var(--space-4) var(--space-7); }
  .portal-inside main { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .portal-bottom { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: flex; gap: var(--space-1); padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
  .portal-inside .form-actions, .portal-inside .composer-sticky, .portal-inside .queue-sticky { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .scope-line { padding-inline: var(--space-4); }
  .scope-sheet > summary { gap: var(--space-2); }
}
@media print {
  .portal-side, .portal-bottom, .portal-head .head-actions { display: none !important; }
  .portal-inside .portal-grid { display: block; }
}

/* EA-O04 + bs-slate-admin-console: visão geral (seletor segmentado, barra empilhada e lista de fontes) */
.slate-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
.slate-seg-item { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); text-decoration: none; border-radius: 6px; transition: background-color var(--duration-state), color var(--duration-state), box-shadow var(--duration-state); }
.slate-seg-item:hover { color: var(--text-heading); }
.slate-seg-item.is-active, .slate-seg-item[aria-current="page"] { color: var(--text-heading); background: var(--surface); box-shadow: var(--shadow-xs); }
.stackbar { display: grid; grid-template-columns: 2fr 1.5fr 1.2fr 1fr; gap: 3px; height: 10px; margin: 0 0 var(--space-3); padding: 0; border-radius: var(--radius-full); overflow: hidden; background: var(--surface-subtle); }
.stackbar-seg { display: block; height: 100%; border-radius: 2px; }
.queue-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); }
.queue-filters { flex-wrap: wrap; max-width: 100%; }
.queue-summary { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
@media (max-width: 800px), (pointer: coarse) {
  .queue-filters .slate-seg-item { min-height: var(--target-min); min-width: var(--target-min); font-size: var(--text-sm); }
}
.source-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
:is(#queue, #sources, #pending) > .section-head { padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.overview-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.source-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); padding-inline: var(--space-2); border-bottom: 1px solid var(--border); border-radius: var(--radius-sm); transition: background-color var(--duration-state); }
.source-row:hover { background: var(--surface-subtle); }
.source-row:last-child { border-bottom: 0; }
.source-row > .icon { flex: none; color: var(--text-secondary); }
.source-row > span:not(.source-dot) { flex: 1 1 auto; font-weight: var(--weight-medium); color: var(--text-heading); } /* DUN-4967: the 8px dot is a span too and was stretched into a pill */
.source-row a { display: inline-flex; align-items: center; justify-content: flex-end; min-width: var(--target-min); min-height: var(--target-min); padding-inline: var(--space-2); font-weight: var(--weight-semibold); }
#pending > .hint { margin: 0 0 var(--space-3); }
#pending .overview-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: 0; }
#pending .overview-list > li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); background: var(--surface-subtle); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
#pending .overview-list > li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
/* EA-O04 + bs-slate-admin-console: lista de clientes */
.client-filters { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); }
.client-filters .search-field { flex: 1.5 1 180px; min-width: 0; }
.client-filters .field:not(.search-field) { flex: 1 1 110px; min-width: 0; }
.client-filters select, .client-filters input { width: 100%; min-width: 0; }
.client-filters .btn { flex: 0 0 auto; }
.client-filter-options { flex: 1 0 100%; min-width: 0; }
.client-filter-options > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); cursor: pointer; color: var(--link); font-weight: var(--weight-semibold); }
.client-filter-options .disclosure-chevron { margin-inline-start: auto; }
.client-filter-options[open] .disclosure-chevron { transform: rotate(180deg); }
.client-filter-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: end; gap: var(--space-3); padding-block: var(--space-2); }
.client-status-tabs,
.deadlines-status-tabs {
  margin-bottom: var(--space-3);
}
@media (max-width: 800px) {
  .slate-filter-pills .slate-filter-pill {
    min-height: var(--target-min);
    min-width: var(--target-min);
  }
}

.results { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.audit-event-label { font-weight: var(--weight-medium); margin-inline-end: var(--space-2); }
.audit-event-code { font-size: var(--text-xs); color: var(--text-secondary); }
.clients-table td, .clients-table th { vertical-align: middle; }
.clients-table td:first-child { min-width: 18ch; }  /* DUN-4967: the client's name never breaks inside a word; the wrapper scrolls */
.clients-table .client-name { overflow-wrap: normal; hyphens: manual; }
/* EA-O04: pipeline (kanban) e novo lead */
.crm-pipeline #move-hint { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); color: var(--text-secondary); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
.crm-pipeline .board { grid-auto-columns: minmax(256px, 1fr); gap: var(--space-3); padding-bottom: var(--space-3); }
.crm-pipeline .lane { padding: var(--space-3); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.crm-pipeline .lane-title { justify-content: space-between; margin: 0 0 var(--space-3); padding-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); border-bottom: 1px solid var(--border); }
.crm-pipeline .lead-card { padding: var(--space-3) var(--space-4); transition: border-color var(--duration-state), background-color var(--duration-state); }
.crm-pipeline .lead-card:hover { border-color: var(--action-primary); }
.crm-pipeline .card-name { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-bold); }
.crm-pipeline .card-name a { color: var(--text-heading); text-decoration: none; }
.crm-pipeline .card-name a:hover { color: var(--link); text-decoration: underline; }
.crm-pipeline .card-meta { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.crm-pipeline .card-meta div { margin-bottom: 0; }
.crm-pipeline .card-meta dd { font-weight: var(--weight-semibold); color: var(--text); }
.crm-pipeline .move > summary { width: 100%; justify-content: space-between; font-size: var(--text-xs); background: var(--surface); }
.crm-pipeline .move > summary::after { content: "▾"; color: var(--text-secondary); }
#lead-form fieldset.card > legend { padding-bottom: var(--space-2); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
/* EA-O04: ficha do cliente */
.client-head { margin-bottom: var(--space-4); }
.client-title { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.client-title h1 { margin: 0; }
.crm-client .tabs a[data-count]::after { content: attr(data-count); display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 3px; font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-secondary); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.crm-client .tabs a[aria-current="page"][data-count]::after { color: var(--text-selected); background: var(--surface-selected); border-color: var(--action-primary); }
.summary-grid { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.summary-pair { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.summary-pair dd { margin: 0; font-weight: var(--weight-medium); color: var(--text); }
.summary-contact-name { font-weight: var(--weight-semibold); color: var(--text-heading); }
.summary-contact-line { display: block; font-size: var(--text-xs); margin-top: 2px; }
.contacts-directory-card { margin-bottom: var(--space-4); }
.contacts-directory-card .section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.contacts-directory-card .section-head h3 { margin: 0; font-size: var(--text-lg); }
.contacts-directory-card .table-wrap { margin-bottom: 0; }
.crm-client .filter-form { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); max-width: none; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
.crm-client ol.timeline { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.crm-client .timeline > li[data-activity] { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.crm-client .timeline > li[data-activity="stage_change_proposed"], .crm-client .timeline > li[data-activity="note_proposed"] { border-color: var(--status-review-fg); background: var(--status-review-bg); }
.crm-client .timeline > li[data-activity] > p { margin: 0 0 var(--space-1); }
.crm-client .timeline > li[data-activity] > p:last-child { margin-bottom: 0; }
.areas-title { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.area-links { list-style: none; margin: 0; padding: 0; }
.area-links a { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); font-weight: var(--weight-semibold); text-decoration: none; }
.area-links a:hover { text-decoration: underline; }
.area-links-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-2) var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.area-links-row li a { padding: 0 var(--space-3); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
.area-links-row li a:hover { background: var(--surface-hover); border-color: var(--border-strong); text-decoration: none; }
.engagement-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.engagement-item { margin-bottom: 0; }
.engagement-item .section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-1); }
.engagement-title-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.engagement-title-group h3 { margin: 0; font-size: var(--text-lg); }
.lead-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.lead-head h3 { margin: 0; font-size: var(--text-lg); }
.lead-stage-track { margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.lead-convert-box { margin-bottom: var(--space-3); }
.lead-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.lead-actions .inline-action { display: flex; align-items: center; margin: 0; }
.lead-actions .action-box { display: block; margin: 0; }
.lead-actions .action-box[open] { display: block; }
.lead-actions-forward { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.lead-actions-outcomes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px dashed var(--border); }
.action-box-outcome > summary { font-weight: var(--weight-medium); color: var(--text-secondary); background: var(--surface-subtle); border-color: var(--border); }
.action-box-outcome > summary:hover { color: var(--text-heading); border-color: var(--border-strong); }
.inbox-intake h2, .inbox-documents h2 { margin-top: 0; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.support-thread > .card { margin-bottom: var(--space-4); }
.client-docs #folder-panel h3 { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--text-md); }
#delivery-overview-page .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
#delivery-overview-page .metrics > div { padding: var(--space-3); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
#delivery-overview-page .metrics dt { font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: 2px; }
#delivery-overview-page .metrics dd { margin: 0; font-weight: var(--weight-semibold); color: var(--text); }

/* EA-O05: acesso do portal (deslogado) — painel de marca navy + cartão do formulário (direção "Acesso"); telefone: só o cartão */
.auth-brand { display: none; }
.auth-card { max-width: 440px; margin: var(--space-6) auto; padding: var(--space-6); }
.auth-card h1 { margin-bottom: var(--space-3); }
.auth-card .actions.stack .btn { width: 100%; justify-content: center; }
@media (min-width: 1024px) {
  .portal:not(.portal-inside) .portal-grid { display: grid; grid-template-columns: minmax(360px, 5fr) minmax(0, 7fr); }
  .auth-brand { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-7); height: 100vh; height: 100dvh; padding: var(--space-8) 10%; color: var(--text-on-emphasis); background: var(--surface-emphasis); }
  .auth-brand .brand-logo { width: 150px; height: auto; }
  .portal .auth-brand .tenant-name { color: var(--text-on-emphasis); font-size: var(--text-xl); }
  .auth-brand-title { max-width: 14ch; margin: 0 0 var(--space-4); font-size: 40px; font-weight: var(--weight-bold); line-height: 1.2; letter-spacing: var(--tracking-heading); }
  .auth-brand-copy p:not(.auth-brand-title), .auth-brand-note { max-width: 38ch; margin: 0; color: var(--text-on-nav-muted); }
  .auth-brand-note { font-size: var(--text-sm); }
  .portal:not(.portal-inside) .portal-head .tenant-brand { display: none; }
  .portal:not(.portal-inside) .portal-head { justify-content: flex-end; border-bottom: 0; background: transparent; }
  .portal:not(.portal-inside) main { display: flex; align-items: flex-start; justify-content: center; }
  .auth-card { width: 100%; margin-top: var(--space-7); }
}
@media (max-width: 768px) {
  .auth-card { margin: 0 auto; padding: var(--space-2) 0 0; border: 0; background: transparent; }
}
@media print { .auth-brand { display: none !important; } }

/* EA-O06: operador — visão do exercício, reconciliação (equação, fechamento, diferenças) e mesa de revisão (fila | origem | decisão).
   Denso como o escritório (corpo 14 px, inputs 16 px), dinheiro à direita e tabular; uma coluna até 800 px, na ordem do DOM. */
.exercise-steps { margin-top: var(--space-2); }
.recon-equation { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.recon-difference.is-open .metric-value { color: var(--status-danger-fg); }
.recon-close { margin-bottom: var(--space-5); }
.recon-close-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.recon-status-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.recon-close-form { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); max-width: 360px; }
.recon-close-form .hint { text-align: end; }
.recon-reopen > summary { list-style: none; }
.recon-reopen[open] form { margin-top: var(--space-3); min-width: min(360px, 100%); }
.recon-sides { margin-bottom: var(--space-5); }
@media (max-width: 1599px) { .recon-sides { grid-template-columns: minmax(0, 1fr); } }  /* side by side only when both tables fit */
.recon-sides td:not(.user-text), .recon-sides th { white-space: nowrap; }
.recon-sides .table-wrap { max-height: 28rem; overflow: auto; }
.recon-sides .card h2 .count, .card h2 .count { font-weight: var(--weight-regular); color: var(--text-secondary); }
.recon-differences { list-style: none; margin: 0; padding: 0; }
.recon-diff { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.recon-diff:first-child { border-top: 0; }
.recon-diff-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.recon-diff-amount { font-weight: var(--weight-semibold); }
.recon-explain { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.recon-explain .field { flex: 1 1 280px; margin: 0; }
.numeric, td.num { font-variant-numeric: tabular-nums; }

.batch-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.batch-summary { margin: 0; font-weight: var(--weight-semibold); }
.review-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.review-queue h2 { font-size: var(--text-lg); }
.review-queue-list { list-style: none; margin: 0; padding: 0; max-height: 36rem; overflow-y: auto; }
.review-queue-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--space-2); min-height: var(--target-min); padding: var(--space-2); color: var(--text); text-decoration: none; border-radius: var(--radius-md); }
.review-queue-item .chip { grid-column: 2; justify-self: start; }
.review-queue-item:hover { background: var(--surface-hover); }
.review-queue-item[aria-current="true"] { background: var(--surface-selected); color: var(--text-selected); box-shadow: inset 3px 0 0 var(--action-primary); }
.review-queue-n { color: var(--text-secondary); }
.review-queue-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.split-screen-desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-5); align-items: start; }
.split-screen-desk > .card { margin-bottom: 0; }
.review-amount { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-heading); }
.review-desc { font-weight: var(--weight-semibold); }
.review-question { padding: var(--space-3); background: var(--surface-subtle); border-radius: var(--radius-md); }
.empty-evidence { padding: var(--space-4); text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.suggestion-box { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--status-review-bg); border-inline-start: 4px solid var(--status-review-fg); border-radius: var(--radius-md); }
.suggestion-head { margin: 0 0 var(--space-1); }
.flags-fieldset { margin: 0; padding: 0; border: 0; }
.flags-fieldset legend { margin-bottom: var(--space-2); font-weight: var(--weight-semibold); }
.flags-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-3); }
.check-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); }
.check-row input { width: 20px; height: 20px; }
.split-labels { display: flex; justify-content: space-between; margin: 0 0 var(--space-1); }
.split-slider-container input[type="range"] { width: 100%; min-height: var(--target-min); accent-color: var(--action-primary); }
.decision-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

@media (max-width: 1100px) {
  .split-screen-desk { grid-template-columns: minmax(0, 1fr); }
  .recon-equation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .review-layout { grid-template-columns: minmax(0, 1fr); }
  .review-queue-list { max-height: 16rem; }
  .recon-close-form { align-items: stretch; max-width: none; }
  .recon-close-form .hint { text-align: start; }
  .flags-grid { grid-template-columns: minmax(0, 1fr); }
  .recon-sides { grid-template-columns: minmax(0, 1fr); }
}

/* EA-O06: five operator destinations in the bottom bar (360–430 px): widths follow the labels (12 px floor kept) so none is cut;
   EA-S05: the same for the staff's three shortcuts and Menu ("Comunicação" was cut at 360 px with four equal columns) */
.bottom-nav .bottom-item:first-child:nth-last-child(n+4), .bottom-nav .bottom-item:first-child:nth-last-child(n+4) ~ .bottom-item { flex: 1 1 auto; min-width: var(--target-min); padding-inline: 2px; }

/* DUN-4844 / DUN-4846: compact button variant and shared structural classes across engagement, billing, CRM, and observations templates */
.btn-sm { min-height: var(--target-min); padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn-label { display: inline; }
.btn-outline { color: var(--text); background: var(--surface); border-color: var(--border-strong); }
.btn-outline-danger { color: var(--status-danger-fg); background: var(--status-danger-bg); border-color: var(--status-danger-fg); }
.inline { display: inline-block; }
.back-link { margin-bottom: var(--space-3); }
.event-summary, .section-block, .events-section, .proposals-section, .observations-page, .documents-region { margin-bottom: var(--space-4); }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin: 0; }
.filters-bar { margin-bottom: var(--space-4); }
.filters-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.field-inline { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.table-actions { white-space: nowrap; }
.table-actions-wrap { white-space: normal; }
.table-actions-wrap .btn { margin: var(--space-1) var(--space-2) var(--space-1) 0; }
.table-responsive { max-width: 100%; overflow-x: auto; }
.subhead, .text-muted { color: var(--text-secondary); }
.card-head, .proposal-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.proposals-list { display: flex; flex-direction: column; gap: var(--space-3); }
.side-by-side-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.side-col { min-width: 0; }
.input-sm, .input-xs { min-height: var(--target-min); padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); border-radius: var(--radius-sm); color: var(--text); background: var(--surface-subtle); border: 1px solid var(--border); }
.badge-outline, .badge-superseded { color: var(--text-secondary); background: var(--surface-subtle); border-color: var(--border-strong); }
.badge-warning, .badge-suggested { color: var(--status-warning-fg); background: var(--status-warning-bg); border-color: var(--status-warning-fg); }
.badge-approved { color: var(--status-success-fg); background: var(--status-success-bg); border-color: var(--status-success-fg); }
.row-superseded { color: var(--text-secondary); }
.sources-cell { display: flex; flex-direction: column; gap: var(--space-1); }
.sources-count { font-size: var(--text-xs); color: var(--text-secondary); }
.source-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.source-desc { min-width: 0; }
.source-ref { font-size: var(--text-xs); }
.unmerge-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------------------------------------------------------------------------------------------------------- EA-O08 (DUN-4781)
   G02-1: the older desks (ledger, backfill, dossiers, export, owner, schedules, verification, cards) were written with a small set
   of utility classes that no stylesheet defined, so they rendered unstyled (no flex, no sizes, no spacing). The utilities now exist,
   each one mapped to a token (never a raw value), so those desks pick up the E&A scale without a rewrite. Scope: the names in use. */
.text-xs { font-size: var(--text-xs); }
.text-sm, .font-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.font-bold { font-weight: var(--weight-bold); }
.font-semibold, .font-medium { font-weight: var(--weight-semibold); }
.font-mono { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
.uppercase { text-transform: uppercase; letter-spacing: 0.04em; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-right { text-align: end; }
.text-center { text-align: center; }
.text-secondary, .text-muted { color: var(--text-secondary); }
.text-primary { color: var(--text-heading); }
.text-success, .text-green-700 { color: var(--status-success-fg); }
.text-warning { color: var(--status-warning-fg); }
.text-danger { color: var(--status-danger-fg); }
.flex { display: flex; }
.flex-1 { flex: 1 1 0; min-width: 0; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2; }
.col-span-4 { grid-column: 1 / -1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.space-x-2 > * + * { margin-inline-start: var(--space-2); }
.w-full { width: 100%; }
.max-w-xs { max-width: 20rem; }
.max-h-80 { max-height: 20rem; }
.overflow-y-auto { overflow-y: auto; }
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.py-2 { padding-block: var(--space-2); }
.py-4 { padding-block: var(--space-4); }
.pt-4 { padding-top: var(--space-4); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.ml-1 { margin-inline-start: var(--space-1); }
.ml-2 { margin-inline-start: var(--space-2); }
.ml-4 { margin-inline-start: var(--space-4); }
.mr-2 { margin-inline-end: var(--space-2); }
.rounded { border-radius: var(--radius-md); }
.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.border-t-4 { border-top: 1px solid var(--border-strong); }
.border-l-4 { border-inline-start: 1px solid var(--border-strong); }
.border-l-danger { border-color: var(--status-danger-border); }
.bg-white, .bg-surface { background: var(--surface); }
.bg-light, .bg-surface-subtle, .bg-gray-50 { background: var(--surface-subtle); }
.cursor-pointer { cursor: pointer; }
.list-disc { list-style: disc; padding-inline-start: var(--space-5); }
.list-inside { list-style-position: inside; padding-inline-start: 0; }
/* the small chips and badges of those desks: the same shape as .chip, the state by text + colour */
.chip-xs, .chip-sm, .badge-success, .badge-info, .badge-muted, .badge-primary, .badge-danger, .badge-error, .chip-outline { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.4; border-radius: var(--radius-sm); border: 1px solid transparent; vertical-align: middle; white-space: nowrap; color: var(--status-neutral-fg); background: var(--status-neutral-bg); }
.chip-success, .badge-success { color: var(--status-success-fg); background: var(--status-success-bg); }
.chip-warning { color: var(--status-warning-fg); background: var(--status-warning-bg); }
.chip-danger, .badge-danger, .badge-error { color: var(--status-danger-fg); background: var(--status-danger-bg); }
.chip-info, .badge-info, .badge-primary { color: var(--status-info-fg); background: var(--status-info-bg); }
.chip-muted, .badge-muted { color: var(--status-neutral-fg); background: var(--status-neutral-bg); }
.chip-outline { background: transparent; border-color: var(--border-strong); }
.btn-xs { min-height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn-warning { color: var(--status-warning-fg); background: var(--status-warning-bg); border-color: var(--status-warning-fg); }
.metric-card { padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.metric-label { font-size: var(--text-sm); color: var(--text-secondary); }
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin-bottom: var(--space-5); background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--shadow-xs); overflow: hidden; }
.alert, .alert-warning, .alert-error { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); color: var(--status-info-fg); background: var(--status-info-bg); }
.alert-warning { color: var(--status-warning-fg); background: var(--status-warning-bg); }
.alert-error { color: var(--status-danger-fg); background: var(--status-danger-bg); }
/* G02-2: the "no rows" line of a DataTable is one centred cell, never a card with a missing label on the phone */
.table-empty td { padding: var(--space-5) var(--space-4); text-align: center; color: var(--text-secondary); }
@media (max-width: 639px) {
  .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-span-2 { grid-column: span 2; }
}

/* ============================================================================
   MANAGEMENT, PROPOSALS & KANBAN DRAG-AND-DROP POLISH (21 Laws of UX & Impeccable)
   ============================================================================ */
/* 1. Kanban Drag-and-Drop & Visually Hidden "Move to…" (Fitts's Law, Occam's Razor) */
.lead-card {
  position: relative;
}
details.move {
  position: static;
}
details.move:not([open]) {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
details.move[open] {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
details.move > summary,
.crm-pipeline details.move > summary {
  position: absolute;
  top: var(--space-2);
  inset-inline-end: var(--space-2);
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  list-style: none;
  z-index: 2;
}
details.move > summary::-webkit-details-marker,
.crm-pipeline details.move > summary::-webkit-details-marker {
  display: none;
}
details.move > summary::marker,
.crm-pipeline details.move > summary::marker {
  content: "";
}
details.move > summary::after,
.crm-pipeline details.move > summary::after {
  content: none;
}
details.move > summary::before,
.crm-pipeline details.move > summary::before {
  content: "⋮⋮";
  font-size: var(--text-sm);
  line-height: 1;
  letter-spacing: -1px;
  color: var(--text-muted);
}
details.move > summary:hover,
.crm-pipeline details.move > summary:hover {
  background: var(--surface-subtle);
  border-color: var(--border);
}
details.move > summary:hover::before,
.crm-pipeline details.move > summary:hover::before {
  color: var(--text-secondary);
}
.lead-card[draggable="true"] {
  cursor: grab;
  user-select: none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.lead-card .card-name {
  padding-inline-end: var(--space-6);
}
.lead-card.is-dragging {
  opacity: 0.55;
  cursor: grabbing;
  transform: scale(0.98);
  box-shadow: var(--shadow-md);
  border-color: var(--action-primary);
}
.lane.is-drop-target {
  border-color: var(--action-primary) !important;
  background: var(--surface-selected) !important;
  box-shadow: inset 0 0 0 2px var(--action-primary);
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

/* 2. Proposals Board 5-Column Grid & Card Anatomy (Law of Common Region, Law of Proximity) */
@media (min-width: 1101px) {
  .proposals-board .board:not(.board-filtered) {
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow-x: visible;
  }
}
.proposals-board .lane {
  display: flex;
  flex-direction: column;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.proposals-board .lane-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  min-height: 3.6rem;
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.proposals-board .column-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.proposals-board .proposal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.proposals-board .proposal-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.proposals-board .proposal-card .card-meta {
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}
.proposals-board .proposal-card .card-meta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 2px 0;
}
.proposals-board .proposal-card .card-meta dt {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  flex-shrink: 0;
}
.proposals-board .proposal-card .card-meta dd {
  margin: 0;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* 3. Billing, Stripe, Deadlines & E-Sign Sub-tabs Polish */
nav.crumbs > ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.btn-danger,
a.btn-danger,  /* as specific as `.head-actions a`, whose link colour would otherwise win on the red */
.inline-form > summary.btn-danger {
  color: var(--text-on-primary);
  background: var(--status-danger-fg);
  border-color: var(--status-danger-fg);
}
.btn-danger:hover,
.inline-form > summary.btn-danger:hover {
  color: var(--text-on-primary);
  background: var(--status-danger-fg);
  border-color: var(--status-danger-fg);
  opacity: 0.92;
}
.metrics-grid .metric-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.metrics-grid .metric-card .metric-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
}
.filters-bar {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.filters-bar .filters-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}
.filters-bar .field-inline {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.filters-bar .field-inline label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.connection-status > .webhook-section,
.connection-status > .permissions-section,
.connection-status > .stripe-actions {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.connection-status .code-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
#rule-tools {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
#rule-tools > h2 {
  margin-bottom: 0;
}
#rule-tools #clone-year > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  background: var(--surface-subtle);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}
#rule-tools #clone-year[open] > form {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
details.terms-item {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-state), background-color var(--duration-state);
}
details.terms-item:hover {
  border-color: var(--border-strong);
}
details.terms-item > summary {
  display: block;
  position: relative;
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-6) var(--space-2) 0;
  line-height: 1.5;
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  cursor: pointer;
  list-style: none;
}
details.terms-item > summary::-webkit-details-marker {
  display: none;
}
details.terms-item > summary::after {
  content: "▾";
  position: absolute;
  inset-inline-end: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-md);
  color: var(--text-secondary);
  transition: transform var(--duration-state);
}
details.terms-item[open] > summary {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
details.terms-item[open] > summary::after {
  transform: translateY(-50%) rotate(180deg);
}
details.terms-item .doc-text {
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* 4. Proposals (New, Composer, Terms) & Signatures (E-Sign Requests & Templates) High-Craft Polish */
/* Side-by-side .field-row alignment when one field has a .hint and the sibling does not */
.field-row > .field {
  display: flex;
  flex-direction: column;
}
.field-row > .field > input,
.field-row > .field > select,
.field-row > .field > textarea,
.field-row > .field > .btn {
  margin-top: auto;
}

/* New Proposal (/app/proposals/new) & Narrow Form Cards */
.page-narrow form > .card,
.page-narrow form > fieldset.card {
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-xs);
}
fieldset.card > legend {
  float: left;
  width: 100%;
  padding: 0 0 var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  border-bottom: 1px solid var(--border);
}
fieldset.card > legend + * {
  clear: both;
}

/* Terms (/app/proposals/terms) & Page-Wide Stacked Cards */
.page-wide > section.card + section.card,
.detail-grid + section.card {
  margin-top: var(--space-5);
}
section.card > .notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--action-primary);
  border-radius: var(--radius-md);
}

/* Proposal Composer (/app/proposals/{id}) */
.proposal-composer > .page-head {
  display: block;
  margin-bottom: var(--space-4);
}
.proposal-composer #proposal-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-xs);
}
.proposal-composer #proposal-meta > div {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.proposal-composer #proposal-meta dt {
  margin-bottom: 2px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.proposal-composer #proposal-meta dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
}
.proposal-composer .composer-main fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.proposal-composer .composer-main fieldset > .card {
  margin-bottom: var(--space-4);
  padding: var(--space-5);
}
.proposal-composer .composer-main fieldset > .card > h2 {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  font-size: var(--text-lg);
  border-bottom: 1px solid var(--border);
}
.proposal-composer .composer-side > #totals {
  display: block;
  padding: var(--space-5);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.proposal-composer #items-table th,
.proposal-composer #items-table td {
  padding-inline: var(--space-2);
}
.proposal-composer #items-table td input[name^="item_description"] {
  min-width: 12ch;
}
.proposal-composer #items-table td input[name^="item_service"] {
  min-width: 10ch;
}
.proposal-composer #items-table td input[name^="item_quantity"] {
  max-width: 6.5ch;
}
.proposal-composer #items-table td input[name^="item_unit_price"] {
  max-width: 11ch;
}
.proposal-composer .composer-side > #totals > h2 {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  font-size: var(--text-lg);
  border-bottom: 1px solid var(--border);
}
.proposal-composer #totals dl.readonly {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
}
.proposal-composer #totals dl.readonly > div {
  display: contents;
}
.proposal-composer #totals dl.readonly dt {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}
.proposal-composer #totals dl.readonly dd {
  margin: 0;
  text-align: end;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.proposal-composer #totals dl.readonly > div.total-line dt,
.proposal-composer #totals dl.readonly > div.total-line dd {
  padding-top: var(--space-2);
  border-top: 2px solid var(--border-strong);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
}

/* Signatures / E-Sign (/app/esign/requests, /app/esign/templates) */
.detail-grid > section.card > h2,
.page-wide > section.card > h2 {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  font-size: var(--text-lg);
  border-bottom: 1px solid var(--border);
}
.detail-grid dl.readonly {
  display: grid;
  grid-template-columns: minmax(130px, max-content) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
}
.detail-grid dl.readonly dt {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.detail-grid dl.readonly dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text);
}
.action-list > .action-off {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
/* ── Management Billing & Sub-tabs (EA-M06 / EA-G03) ── */
.breadcrumb {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
.breadcrumb a:hover {
  color: var(--link);
  text-decoration: underline;
}
.split-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.split-head > .page-header {
  flex: 1 1 100%;
  margin-bottom: 0;
}
.split-head h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-1);
}
.split-head h1 code {
  font-size: inherit;
  font-weight: inherit;
}
.metrics-grid .metric-card {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-1);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.metrics-grid .metric-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.metrics-grid .metric-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
}
.invoice-lines-section > h2,
.payment-activity-section > h2,
.firm-finance-section > h2,
.timeline-section > h2 {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  font-size: var(--text-lg);
  border-bottom: 1px solid var(--border);
}
.invoice-lines-section .table-wrap,
.contacts-directory-card .table-wrap {
  margin-bottom: 0;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: none;
  background: transparent;
}
ol.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline-item {
  position: relative;
  padding: 0 0 var(--space-4) var(--space-5);
  margin: 0;
  border-inline-start: 2px solid var(--border-strong);
}
.timeline-item:last-child {
  padding-bottom: 0;
  border-inline-start-color: transparent;
}
.timeline-marker {
  position: absolute;
  inset-inline-start: -6px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--action-primary);
}
.timeline-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-bottom: 2px;
}
.timeline-header time {
  font-family: var(--font-numeric);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.timeline-detail {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text);
}
#plan-composer-form {
  max-width: 780px;
}
#plan-preview.panel {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5);
}
#plan-preview h2 {
  margin: 0;
  font-size: var(--text-md);
}
#plan-preview p {
  margin: 0;
}
#reminders-form .input-sm {
  max-width: 140px;
}
#steps-table input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--action-primary);
  cursor: pointer;
}
#calendar-preview-box.panel {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
#calendar-preview-box h3 {
  margin: 0;
  font-size: var(--text-md);
  color: var(--text-heading);
}
#calendar-preview-box p {
  margin: 0;
}
#preview-items-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
}
#preview-items-list .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-family: var(--font-numeric);
  color: var(--text-heading);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}
#stripe-connection-card > h2,
.event-summary > h2,
.run-summary > h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.connection-details,
.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.connection-details > p,
.meta-grid > p {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.permissions-section .tone-danger,
.permissions-section .tone-success {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
}
#stripe-connection-card > .actions {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
#stripe-connection-card details.inline-form[open] {
  flex: 1 1 100%;
  margin-top: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
#stripe-connection-card details.inline-form[open] > summary {
  margin-bottom: var(--space-3);
}
.resolve-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.resolve-form label,
.resolve-form textarea {
  flex: 1 1 100%;
  min-width: 0;
}
.resolve-form textarea {
  resize: vertical;
}
.resolved-note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 768px) {
  .page-narrow form > .form-actions,
  .page-wide section.card form > .form-actions {
    position: static;
  }
  .detail-grid dl.readonly {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
  .detail-grid dl.readonly dd {
    margin-bottom: var(--space-2);
  }
}

/* ==========================================================================
   QuickBooks-Style Financial Hub, COA Badges & Financial Statements
   ========================================================================== */
.fin-hub {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.fin-top-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.fin-mode-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--surface-subtle);
  border-radius: var(--radius-card);
}
.fin-mode-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.fin-mode-tab:hover {
  color: var(--text-heading);
}
.fin-mode-tab.is-active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-heading);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-xs);
}
.qb-toolbar {
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 0;
}
.qb-toolbar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: flex-end;
}
.qb-toolbar-grid .field {
  flex: 0 1 auto;
  min-width: 130px;
  margin-bottom: 0;
}
.qb-toolbar-grid .field label {
  margin-bottom: 4px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
.qb-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* Densidade slate (32px, 13.5px) só no desktop com mouse. Toque e celular ficam em 44px e inputs em 16px. */
@media (min-width: 769px) and (pointer: fine) {
.fin-mode-tab { min-height: 32px; }
.fin-hub .btn {
  min-height: 32px;
  min-width: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.fin-hub .btn-primary {
  font-weight: var(--weight-semibold);
}
.fin-hub select,
.fin-hub input:is([type="text"], [type="date"], [type="number"], [type="search"]) {
  width: auto;
  min-height: 32px;
  padding: 4px var(--space-2);
  font-size: var(--text-sm);
}
}
.fin-hub .fin-editor-grid select,
.fin-hub .fin-editor-grid input:is([type="text"], [type="date"], [type="number"]) {
  width: 100%;
}
.fin-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.fin-kpi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4) 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.fin-kpi-card dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.fin-kpi-card .metric-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.fin-kpi-card .kpi-spark {
  margin-top: var(--space-2);
}
.fin-visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}
.fin-chart-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 0;
}
.fin-chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.fin-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--weight-medium);
}
.fin-bars-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 190px;
}
.fin-bar-gridline {
  stroke: var(--border);
  stroke-dasharray: 3 3;
  stroke-width: 1;
}
.fin-bar-axis-label {
  fill: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
}
.fin-mix-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.fin-mix-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.fin-mix-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.fin-mix-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.fin-mix-bar {
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface-subtle);
  accent-color: var(--action-primary);
  overflow: hidden;
}
.fin-coa-pill,
.fin-coa-badge,
.badge.fin-coa-pill,
.badge.fin-coa-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
  word-break: normal;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--text-secondary);
}
/* DUN-4967 / F-10: a standalone badge may wrap (long account names at 390px); the pill in a table cell keeps one line. */
.fin-coa-badge,
.badge.fin-coa-badge {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.fin-kpi-card dt .fin-coa-pill,
.fin-kpi-card dt .badge.fin-coa-pill {
  white-space: nowrap;
  flex-shrink: 0;
}
.fin-panel .table td:first-child {
  min-width: 190px;
}
.fin-panel .table .fin-coa-pill,
.fin-panel .table .badge.fin-coa-pill {
  max-width: 220px;
}
.fin-coa-pill.tone-income,
.fin-coa-badge.tone-income {
  background: var(--status-success-bg);
  border-color: var(--status-success-fg);
  color: var(--status-success-fg);
}
.fin-coa-pill.tone-cogs,
.fin-coa-badge.tone-cogs {
  background: var(--status-warning-bg);
  border-color: var(--status-warning-fg);
  color: var(--status-warning-fg);
}
.fin-coa-pill.tone-expense,
.fin-coa-badge.tone-expense,
.fin-coa-pill.tone-liability,
.fin-coa-badge.tone-liability {
  background: var(--status-danger-bg);
  border-color: var(--status-danger-fg);
  color: var(--status-danger-fg);
}
.fin-coa-pill.tone-asset,
.fin-coa-badge.tone-asset,
.fin-coa-pill.tone-equity,
.fin-coa-badge.tone-equity {
  background: var(--status-info-bg);
  border-color: var(--status-info-fg);
  color: var(--status-info-fg);
}
.fin-grid-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(620px, 1fr));
  gap: var(--space-4);
}
#fin-top-services,
#fin-who-paid {
  grid-column: 1 / -1;
}
/* Tabelas dentro dos cartões do Financial Hub: badges quebram linha em vez de forçar scroll interno */
.fin-panel .table-wrap .fin-coa-badge {
  white-space: normal;
  line-height: 1.35;
}
.fin-panel .table-wrap {
  margin-bottom: 0;
}
.fin-panel .table-wrap td,
.fin-panel .table-wrap th {
  padding: var(--space-2) var(--space-3);
}
/* Nomes de cliente quebram por palavra, nunca por letra */
.fin-panel .table-wrap td:first-child {
  min-width: 150px;
}
.fin-panel .table-wrap .user-text {
  overflow-wrap: break-word;
  word-break: normal;
}
.fin-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.fin-aging-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.fin-aging-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fin-aging-label {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
.fin-aging-val {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.fin-pct-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.fin-progress {
  width: 72px;
  height: 6px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  accent-color: var(--accent);
  overflow: hidden;
}
.qb-statement-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-top: 3px solid var(--accent);
}
.qb-statement-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.qb-report-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.qb-statement-table tr.qb-row-section td {
  padding-top: var(--space-4);
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border);
}
.qb-section-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-secondary);
}
.qb-detail-label {
  padding-left: var(--space-4);
}
.qb-statement-table tr.qb-row-subtotal td {
  border-top: 1px solid var(--border-strong);
  background: var(--surface-subtle);
}
.qb-statement-table tr.qb-row-total td {
  border-top: 2px solid var(--ink);
  border-bottom: 3px double var(--ink);
  background: var(--surface-muted);
  font-size: var(--text-base);
}
.fin-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.fin-catalog-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.fin-catalog-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}
.item-coa-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}
/* Account attribution needs a full row even when zoom leaves little space. */
.proposal-composer #totals dl.coa-rollup-list {
  display: block;
}
.proposal-composer #totals dl.coa-rollup-list > div {
  display: flex;
}
/* Account names remain fully readable in the proposal editor and its totals. */
.proposal-composer .fin-coa-badge {
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.coa-totals-block {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.coa-totals-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.coa-rollup-list > div,
.summary-list.coa-rollup-list > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--border);
}
.coa-rollup-list dd,
.summary-list.coa-rollup-list dd {
  align-self: flex-end;
}
.fin-subtabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: 1px solid var(--border);
}
.fin-subtab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.fin-subtab:hover {
  background: var(--surface-hover);
  color: var(--text-heading);
}
.fin-subtab.is-active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-heading);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-xs);
}
.fin-subtab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
}
.fin-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.fin-action-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.fin-hub .notice .btn { white-space: nowrap; }
.fin-hub .notice .fin-action-group { flex-shrink: 0; }
.fin-row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.fin-row-actions .btn {
  white-space: nowrap;
  min-height: var(--target-min);
  padding: 4px var(--space-2);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}
.fin-bundle-form {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
}
.fin-bundle-form select {
  width: auto;
  min-width: 220px;
  max-width: 300px;
  min-height: var(--target-min);
}
.fin-editor-details {
  margin: var(--space-3) 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.fin-editor-details > summary,
.fin-editor-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-subtle);
  list-style: none;
}
.fin-editor-details[open] > summary,
.fin-editor-details[open] > .fin-editor-summary {
  border-bottom: 1px solid var(--border);
}
.fin-editor-summary-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.fin-editor-card {
  padding: var(--space-4);
  margin: 0;
  background: var(--surface);
}
.fin-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.fin-editor-grid .field {
  margin-bottom: 0;
}
.fin-sub-hint-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.fin-field-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.fin-field-head > label:first-child {
  margin-bottom: 0;
}
.fin-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: 0;
}
.fin-inline-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
}
.fin-help-card,
.fin-preview-section {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--text);
}
.fin-help-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.fin-help-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.fin-editor-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.fin-subaccount-cell {
  padding-left: var(--space-3);
  border-left: 2px solid var(--border-strong);
}
.fin-depth-0 {
  padding-left: 0;
}
.fin-depth-1 {
  padding-left: 20px;
}
.fin-depth-2 {
  padding-left: 40px;
}
.fin-depth-3 {
  padding-left: 60px;
}
.fin-depth-4 {
  padding-left: 80px;
}
.fin-full-path {
  display: inline-block;
  font-size: var(--text-xs);
}
.fin-name-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.fin-name-main.fin-coa-name-row {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
}
.fin-name-text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.fin-name-tag {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  margin-inline-start: auto;
}
.fin-name-desc {
  margin-top: 2px;
  font-size: var(--text-xs);
}
.fin-filter-bar {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) minmax(180px, 1.2fr) minmax(130px, 0.8fr) auto;
  align-items: end;
  gap: var(--space-3);
  padding: var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.fin-filter-bar .field {
  margin: 0;
}
.fin-filter-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
}
.fin-check-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  margin: 0;
}
.fin-check-pill input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
}
.fin-check-field {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
}
.fin-check-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-weight: var(--weight-medium);
  color: var(--text);
}
.fin-coa-modal-2col {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.fin-coa-form-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.fin-type-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.fin-type-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fin-type-group-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.fin-type-card-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fin-type-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 6px var(--space-2);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  min-height: 36px;
  transition: border-color 120ms ease, background 120ms ease;
}
.fin-type-card:hover {
  background: var(--surface-subtle);
  border-color: var(--border-strong);
}
.fin-type-card.is-selected {
  background: var(--status-info-bg);
  border-color: var(--action-primary);
  box-shadow: 0 0 0 1px var(--action-primary);
}
.fin-type-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  font-size: var(--text-xs);
}
.fin-report-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  flex-shrink: 0;
}
.fin-report-badge.tone-bal {
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}
.fin-report-badge.tone-pl {
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}
.fin-archive-box {
  padding: var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.fin-live-preview {
  position: sticky;
  top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.fin-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.fin-preview-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.fin-preview-accent {
  height: 4px;
  width: 100%;
}
.fin-preview-accent.tone-bal {
  background: var(--status-info-fg);
}
.fin-preview-accent.tone-pl {
  background: var(--status-success-fg);
}
.fin-preview-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.fin-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
}
.fin-preview-title {
  font-size: var(--text-base);
  color: var(--text-heading);
}
.fin-preview-path {
  font-size: var(--text-xs);
}
.fin-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.fin-bulk-controls {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.fin-bulk-label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
}
.fin-bulk-controls select {
  width: auto;
  min-width: 180px;
  max-width: 240px;
  min-height: 38px;
}
.fin-coa-table,
.fin-services-table {
  width: 100%;
}
.fin-coa-table th,
.fin-coa-table td,
.fin-services-table th,
.fin-services-table td {
  vertical-align: middle;
  padding-left: 6px;
  padding-right: 6px;
}
.fin-coa-table thead th {
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.fin-services-table thead th {
  white-space: normal;
  line-height: 1.2;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.fin-coa-table tbody tr:hover,
.fin-services-table tbody tr:hover {
  background: var(--surface-subtle);
}
.fin-coa-table .col-check {
  width: 34px;
  text-align: center;
  padding-left: var(--space-2);
  padding-right: var(--space-1);
}
.fin-coa-table .col-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
}
.fin-coa-table .col-code {
  width: 58px;
  white-space: nowrap;
}
.fin-coa-table .col-name {
  min-width: 192px;
  max-width: 275px;
}
.fin-services-table .col-name {
  min-width: 118px;
  max-width: 156px;
}
.fin-services-table th.col-coa-map {
  max-width: 88px;
}
.fin-services-table th.col-balance,
.fin-services-table th.col-markup {
  max-width: 64px;
}
.fin-services-table .fin-sort-link {
  white-space: normal;
  line-height: 1.2;
}
.fin-coa-table .col-type,
.fin-coa-table .col-report,
.fin-coa-table .col-side,
.fin-coa-table .col-balance,
.fin-services-table .col-type,
.fin-services-table td.col-balance,
.fin-services-table td.col-markup {
  white-space: nowrap;
}
.fin-coa-table .col-side {
  font-size: var(--text-xs);
}
.fin-coa-table .col-detail {
  max-width: 130px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
@media (min-width: 769px) {
  .fin-services-table .col-coa-map .fin-coa-badge {
    max-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
}
@media (min-width: 1440px) {
  .fin-services-table .col-coa-map .fin-coa-badge {
    max-width: 155px;
  }
}
.fin-density-compact td,
.fin-density-compact th {
  padding-top: 6px;
  padding-bottom: 6px;
}
.fin-density-cozy td,
.fin-density-cozy th {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.fin-sort-link {
  display: inline-flex;
  align-items: center;
  color: var(--text-heading);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.fin-sort-link:hover {
  text-decoration: underline;
}
.fin-tx-form {
  margin-top: var(--space-3);
}
.code-input {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.field-hint {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.fin-row-deleted td {
  opacity: 0.78;
}
@media (max-width: 960px) {
  .fin-visual-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .fin-filter-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (max-width: 768px) {
  .fin-visual-grid,
  .fin-grid-2col,
  .fin-coa-modal-2col,
  .fin-filter-bar {
    grid-template-columns: minmax(0, 1fr);
  }
  .fin-bundle-form {
    flex-wrap: wrap;
  }
  .qb-detail-label {
    padding-left: 0;
  }
}

/* ==========================================================================
   bs-slate-admin-console: Customers Drawer, Calendar View & Settings Layout
   ========================================================================== */
dialog.slate-detail-drawer {
  width: min(440px, 92vw);
  border-inline-start: 1px solid var(--border);
}
.slate-filter-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  margin-bottom: var(--space-3);
}
.slate-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 36px;
  min-width: 36px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background var(--duration-state) ease, border-color var(--duration-state) ease;
}
.slate-filter-pill:hover {
  background: var(--surface-hover);
  color: var(--text-heading);
  text-decoration: none;
}
.slate-filter-pill:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.slate-filter-pill.is-active {
  background: var(--surface-selected);
  color: var(--text-selected);
  border-color: var(--action-primary);
  font-weight: var(--weight-semibold);
}
.slate-drawer-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.slate-drawer-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.slate-drawer-kpi {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}
.slate-drawer-kpi-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.slate-drawer-kpi-val {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
}
.slate-drawer-spark {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.slate-drawer-spark-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}
.slate-drawer-spark svg {
  display: block;
  width: 100%;
  height: 44px;
}
.slate-drawer-dl {
  display: grid;
  grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4) 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  font-size: var(--text-sm);
}
.slate-drawer-dl dt {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}
.slate-drawer-dl dd {
  margin: 0;
  color: var(--text-heading);
  font-weight: var(--weight-medium);
  text-align: right;
  word-break: break-word;
}
.slate-drawer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.slate-drawer-shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}
.col-quick-view {
  width: 48px;
  text-align: right;
}

.slate-calendar-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  align-items: start;
}
.slate-calendar-card,
.slate-upcoming-card {
  margin-bottom: 0;
}
.slate-cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.slate-cal-week {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.slate-cal-week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.slate-cal-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.slate-cal-pill {
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--chart-1);
  font-size: var(--text-xs);
  color: var(--text-heading);
}
.slate-cal-pill-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
  transition: background var(--duration-state) ease;
}
.slate-cal-pill-link:hover {
  background: var(--surface-hover);
  text-decoration: none;
}
.slate-cal-pill-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.slate-cal-pill.tone-danger {
  border-inline-start-color: var(--status-danger-border);
}
.slate-cal-pill.tone-warning {
  border-inline-start-color: var(--status-warning-border);
}
.slate-cal-pill.tone-success {
  border-inline-start-color: var(--status-success-border);
}
.slate-cal-pill-title {
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slate-cal-pill-date {
  color: var(--text-secondary);
  font-family: var(--font-numeric);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.slate-upcoming-list {
  list-style: none;
  margin: var(--space-2) 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.slate-upcoming-item {
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--chart-1);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}
.slate-upcoming-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
  transition: background var(--duration-state) ease;
}
.slate-upcoming-link:hover {
  background: var(--surface-hover);
  text-decoration: none;
}
.slate-upcoming-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.slate-upcoming-item.tone-danger {
  border-inline-start-color: var(--status-danger-border);
}
.slate-upcoming-item.tone-warning {
  border-inline-start-color: var(--status-warning-border);
}
.slate-upcoming-item.tone-success {
  border-inline-start-color: var(--status-success-border);
}
.slate-upcoming-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  margin: 0;
}
.slate-upcoming-meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.deadlines-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
.deadlines-meta-bar .list-count {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.stale-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
}
.deadlines-meta-bar .stale-line {
  margin: 0;
}
.stale-line .stale-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
}
.deadlines-table tbody tr {
  scroll-margin-top: var(--space-6);
}
.deadlines-table tbody tr:target {
  background: var(--surface-selected);
  outline: 2px solid var(--action-primary);
  outline-offset: -2px;
}
.deadlines-table .client-link {
  color: var(--link);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.deadlines-table .client-link:hover {
  text-decoration: underline;
}

@media (max-width: 960px) {
  .slate-calendar-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 800px) {
  .slate-filter-pill {
    min-height: var(--target-min);
    min-width: var(--target-min);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
  }
  .slate-cal-week-head,
  .slate-cal-pill,
  .slate-cal-pill-date,
  .slate-upcoming-meta {
    font-size: var(--text-sm);
  }
  .slate-cal-pill-link {
    min-height: var(--target-min);
    align-items: flex-start;
  }
  .slate-cal-pill-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .slate-upcoming-link {
    min-height: var(--target-min);
    justify-content: center;
  }
  .stale-line .stale-refresh {
    min-height: var(--target-min);
    min-width: var(--target-min);
    padding-inline: var(--space-3);
  }
  .deadlines-table .client-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slate-filter-pill,
  .slate-cal-pill-link,
  .slate-upcoming-link {
    transition: none;
  }
}

.section-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.section-jumps .subnav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.section-jumps .subnav-link:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.hub-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .hub-groups {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.hub-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.hub-group-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

#hub-dir ul.area-links {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  margin: 0;
}

#hub-dir ul.area-links > li {
  padding: 0;
  border: 0;
  background: transparent;
}

#hub-dir ul.area-links > li > a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

#hub-dir ul.area-links > li > a:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.audit-tech-disclosure {
  margin: 0;
}

.audit-tech-disclosure > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-1) var(--space-2);
  color: var(--link);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.audit-tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  font-size: var(--text-xs);
}

.audit-tech-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* ============================================================================
   BS-SLATE-ADMIN-CONSOLE · TABS, SUB-TABS, KANBAN BOARDS, METRIC CARDS & WORKSPACE
   ============================================================================ */
.subnav ul {
  gap: var(--space-4);
}
.subnav a {
  position: relative;
  padding: 0 var(--space-2);
  transition: color var(--duration-state), border-color var(--duration-state);
}
.tabs ul,
.tabs-nav ul {
  gap: var(--space-4);
}
.tabs a,
.tabs-nav a {
  padding: 0 var(--space-2);
  transition: color var(--duration-state), border-color var(--duration-state);
}
.tabs-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 var(--space-2);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}
.tabs a[aria-current="page"] .tabs-count,
.tabs-nav a[aria-current="page"] .tabs-count {
  color: var(--text-selected);
  background: var(--surface-selected);
  border-color: var(--action-primary);
}
.board .lane {
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-3);
}
.board .lane-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  border-bottom: 1px solid var(--border);
}
.board .lane-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 var(--space-2);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}
.board .lead-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
.board .lead-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.column-total {
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.metrics-grid {
  gap: 1px;
  margin-bottom: var(--space-4);
}
.metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.metric-card .metric-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.metric-card .metric-value {
  padding-bottom: 0;
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
}
.outbox > aside.filters.card,
.support-queue .filter-form,
.page-wide > form.filters,
.filters-bar.card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
@media (min-width: 1024px) {
  .outbox > aside.filters.card {
    position: sticky;
    top: var(--space-4);
  }
}
.contextbar {
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border);
}
.contextbar .ctx-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
.contextbar .ctx-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}


/* ===== Financial Organization: full-width ledger table (Services/COA settings) ===== */
/* Data-dense settings pages escape the 1180px reading cap and use the whole viewport. */
.page-fluid { max-width: min(1760px, 100%); }
.fin-services-table th,
.fin-services-table td { vertical-align: top; }
.fin-services-table tbody td { padding-block: var(--space-3); }
/* Grouped header tier: Item | Account Mapping (4000/5000/6000) | Pricing */
.fin-colgroup-row th.fin-colgroup {
  padding: var(--space-2) var(--space-4);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: var(--surface-subtle);
  border-bottom: 0;
}
.fin-services-table thead tr:nth-child(2) th {
  border-top: 1px solid var(--border);
}
/* Column sectors: a hairline spine between the three groups */
@media (min-width: 769px) {
  .fin-services-table .fin-group-start { border-left: 1px solid var(--border); }
  .fin-services-table td:first-child { min-width: 220px; max-width: 340px; }
}
/* Account badges wrap instead of forcing horizontal scroll */
.fin-services-table .fin-coa-badge {
  white-space: normal;
  line-height: 1.35;
  max-width: 100%;
}
.fin-item-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.fin-item-meta {
  margin-top: 2px;
  font-size: var(--text-xs);
}
/* Icon-only row actions: tooltip carries the label */
.fin-row-actions { flex-wrap: nowrap; }
.fin-row-actions .btn.btn-icon-only {
  width: 32px;
  min-width: 32px;
  padding: 4px;
  justify-content: center;
}
.fin-row-actions .btn.btn-icon-only svg { flex-shrink: 0; }

/* ===== Filtros compactos app-wide (densidade slate; desktop apenas, alvos 44px preservados no mobile) ===== */
@media (min-width: 769px) {
  form.filters .btn,
  .filters .btn {
    min-height: 32px;
    min-width: 32px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
  }
  form.filters select,
  form.filters input:is([type="text"], [type="search"], [type="date"], [type="number"], [type="email"], [type="month"]),
  .filters select,
  .filters input:is([type="text"], [type="search"], [type="date"], [type="number"], [type="email"], [type="month"]) {
    min-height: 32px;
    padding: 4px var(--space-2);
    font-size: var(--text-sm);
  }
  form.filters .field label,
  .filters .field label {
    margin-bottom: 4px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
  }
}

/* EA-R0: identity of the book stays next to source quality, including missing metadata. */
.finance-context {
  padding: var(--space-4);
  margin-block-end: var(--space-4);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-wrap: anywhere;
}
.finance-context h2 { margin: 0; color: var(--text-heading); }
.finance-context-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.finance-context-meta > div { min-width: 0; flex: 1 1 10rem; }
.finance-context-meta dt { color: var(--text-secondary); }
.finance-context-meta dd { margin: 0; }
.finance-context .btn { min-height: var(--target-min); }
/* DUN-4966: native, keyboard-operable language and independent formatting preferences. */
.language-picker { position: relative; flex-shrink: 0; }
.language-picker > summary { cursor: pointer; min-height: 44px; list-style: none; }
.language-picker > summary::-webkit-details-marker { display: none; }
.language-picker > summary.lang-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 54px; padding-inline: var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.04em; color: var(--text-heading); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
.language-picker > summary.lang-trigger:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.language-picker[open] > summary.lang-trigger { border-color: var(--action-primary); box-shadow: 0 0 0 2px var(--surface-selected); }
.lang-code { font-weight: var(--weight-bold); }
.lang-chevron { transition: transform var(--duration-state); }
.language-picker[open] > summary .lang-chevron { transform: rotate(180deg); }
.topbar-link.topbar-icon-btn { width: var(--target-min); min-width: var(--target-min); justify-content: center; padding: 0; }
.language-panel { position: absolute; z-index: 50; inset-inline-end: 0; width: 12.5rem; max-width: calc(100vw - 2rem); max-height: 75dvh; overflow-y: auto; padding: 6px; margin-top: 4px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-elevated); }
.language-panel form,
.language-panel form.language-prefs { display: grid; gap: var(--space-2); }
.language-panel form.language-prefs { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.language-panel select, .language-panel button { min-height: 44px; width: 100%; }
.locale-notice { margin-block: var(--space-4); padding: var(--space-4); background: var(--surface-page); border: 1px solid var(--border); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.locale-notice p { margin-block: 0 var(--space-2); }
@media (max-width: 800px) {
  .topbar, .portal-head, .public-head { flex-wrap: wrap; height: auto; min-height: 64px; }
  .head-actions { flex-wrap: wrap; }
}
/* Keep the explicit language label readable under the mobile icon-only link rules. */
.language-picker > summary.topbar-link,
.head-actions .language-picker > summary.topbar-link { width: auto; max-width: 100%; padding-inline: var(--space-3); white-space: nowrap; }
.language-picker > summary.topbar-link span:not(.sr-only),
.portal .head-actions .language-picker > summary.topbar-link span:not(.sr-only),
.language-panel a.topbar-link span:not(.sr-only),
.portal .head-actions .language-panel a.topbar-link span:not(.sr-only) { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; }
/* The access form used a horizontal main at desktop widths. Its translation notice is a separate row. */
.portal:not(.portal-inside) main:has(> .locale-notice) { flex-direction: column; align-items: stretch; }
.language-panel nav, nav.language-panel, .lang-menu { display: flex; flex-direction: column; gap: 2px; }
/* Anchor the panel to the header so a wrapped mobile control cannot open beyond the screen's left edge. */
.language-picker { position: static; }
.topbar:has(.language-picker), .shell-staff .topbar:has(.language-picker),
.portal-head:has(.language-picker), .public-head:has(.language-picker) { position: relative; }
.language-panel { inset-block-start: 100%; inset-inline-end: var(--space-4); }
/* The payment header is navy; its expanded panel is a light surface. */
.public .topbar .language-picker > summary.topbar-link { color: var(--text-on-header); background: transparent; border-color: var(--border-strong); }
.topbar .language-panel a.topbar-link { color: var(--text-heading); }
.language-panel a.topbar-link,
.language-panel a.lang-option { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--text-heading); text-decoration: none; }
.language-panel a.lang-option:hover { background: var(--surface-hover); border-color: transparent; }
.language-panel a.lang-option.is-active,
.language-panel a.lang-option[aria-current="true"] { background: var(--surface-selected); color: var(--text-selected); }
.lang-option[lang="en"] { order: 1; }
.lang-option[lang="pt-BR"] { order: 2; }
.lang-option[lang="es"] { order: 3; }
.lang-option-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.lang-option-code { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.04em; color: var(--text-secondary); }
.field-error { margin: var(--space-1) 0 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--status-danger-fg); }

/* DUN-4978: the announcements' choices and states. */
.choice { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); font-weight: 400; }
.choice-scroll { max-height: 18rem; overflow-y: auto; padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.state-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0; }
/* The detail is a whole sentence: it wraps in its own column and the client's name keeps whole words. */
table.delivery-table td:first-child { min-width: 16ch; }
table.delivery-table td:last-child { min-width: 30ch; white-space: normal; }
.prewrap { white-space: pre-wrap; }
.disclosure-full { max-height: none; }

/* Autopay authorization inherits the E&A shell; all proof text remains readable. */
.autopay { max-width: 48rem; min-width: 0; overflow-wrap: anywhere; }
.autopay h1 { margin-block-end: var(--space-4); }
.autopay-terms, .autopay-record, .autopay-form { padding-block: var(--space-5); border-block-end: 1px solid var(--border); }
.autopay-facts { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.autopay-facts dd { margin: 0; font-weight: 600; }
.autopay dt { color: var(--text-secondary); }
.autopay-form { display: grid; gap: var(--space-3); }
.autopay-form select { width: 100%; min-height: 44px; }
.autopay-charges { padding-block: var(--space-5); border-block-end: 1px solid var(--border); }
.autopay-charge-list { list-style: none; margin: 0; padding: 0; }
.autopay-charge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.autopay-review { display: grid; gap: var(--space-3); flex-basis: 100%; justify-items: start; }
.autopay-consent { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 44px; cursor: pointer; }
.autopay-consent input { flex: 0 0 24px; width: 24px; height: 24px; margin-block: 10px; }
.autopay-consent span { padding-block: 8px; }
.autopay .btn, .autopay summary { min-height: 44px; white-space: normal; height: auto; }
.autopay .btn { max-width: 100%; text-align: center; }
.autopay-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-5); }
.autopay-record summary { cursor: pointer; padding-block: var(--space-3); }
.autopay-record code { overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 48rem) { .autopay-actions, .autopay-facts { flex-direction: column; } .autopay-actions .btn { width: 100%; } }

.autopay > .chip { max-width: 100%; white-space: normal; height: auto; }

/* S08: canonical journal details remain readable at narrow widths and zoom. */
#firm-ledger { margin-top: var(--space-5); overflow-wrap: anywhere; }
.firm-ledger-form .fin-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.firm-ledger-form [data-ledger-when][hidden] { display: none; }
.firm-ledger-form button { margin-top: var(--space-3); }
#firm-ledger .fin-editor-details > summary { min-height: var(--target-min); }
#firm-ledger .fin-editor-details > p { padding-inline: var(--space-4); }
@media (max-width: 600px) {
  .firm-ledger-form .fin-editor-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Selected operation and ISO date remain fully readable under narrow CSS zoom. */
.firm-ledger-form output { display: block; white-space: normal; overflow-wrap: anywhere; margin-top: var(--space-2); }
.firm-ledger-form input, .firm-ledger-form select { width: 100%; min-width: 0; box-sizing: border-box; }
.firm-ledger-form #ledger-date { padding-inline: var(--space-2); }
.firm-ledger-form .field { min-width: 0; }

.firm-ledger-form button { padding-inline: var(--space-2); overflow-wrap: normal; word-break: normal; }

.firm-ledger-form #ledger-kind { padding-inline: var(--space-2); }

/* S09: source identity and journal drilldown at narrow widths and 200% zoom. */
.canonical-report { min-width: 0; }
.canonical-fingerprint { overflow-wrap: anywhere; }
.finance-context summary { min-height: var(--target-min); padding-block: var(--space-3); cursor: pointer; }
.canonical-report td, .canonical-report th { overflow-wrap: anywhere; }
.canonical-report details { min-width: 0; }
.canonical-report summary { min-height: var(--target-min); padding-block: var(--space-3); cursor: pointer; }
.canonical-report .btn { white-space: normal; overflow-wrap: anywhere; text-align: start; }
.canonical-report .table-wrap { max-width: 100%; }
.canonical-report table { min-inline-size: 36rem; }
.canonical-report .finance-context-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
.canonical-report .finance-context-meta > div:first-child { grid-column: 1 / -1; }
.canonical-report .qb-statement-table { min-inline-size: 40rem; table-layout: fixed; }
.canonical-report .qb-statement-table tr:not(.qb-row-section) > th { width: clamp(10rem, 25vw, 20rem); white-space: normal; }
.firm-statement .qb-statement-table { min-inline-size: 0; width: 100%; }
.firm-statement .qb-statement-table tr:not(.qb-row-section) > th { width: 58%; }
.firm-statement .qb-statement-table td { white-space: normal; }
.canonical-report .notice { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: start; overflow-wrap: anywhere; }
.canonical-report .notice ul { padding-inline-start: var(--space-4); }
.canonical-report .notice > * { min-width: 0; }
.canonical-report .notice .btn { justify-self: start; max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .canonical-report .finance-context-meta > div:first-child { grid-column: auto; }
}
/* DUN-4981 · the agenda (month, week, list, availability, conflicts). Tokens only; 44px targets; the grid is >= 769px, a list below. */
.agenda .agenda-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.agenda-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.agenda-title { margin: 0 var(--space-2); font-size: var(--text-lg); min-width: 8ch; }
.agenda-views ul { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.agenda-views .btn { min-height: var(--target-min); }
.agenda-filters { margin-bottom: var(--space-3); }
.agenda-filters summary { min-height: var(--target-min); display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-weight: var(--weight-semibold); }
.agenda-zone { margin: var(--space-2) 0 var(--space-3); }
.agenda-grid-wrap { margin-bottom: var(--space-4); overflow-x: auto; }
.agenda-grid { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--surface); }
.agenda-grid th { padding: var(--space-2); text-align: left; font-size: var(--text-xs); text-transform: none; border-bottom: 1px solid var(--border); background: var(--surface-subtle); color: var(--text-secondary); }
.agenda-dow-short { display: none; }
.agenda-day { vertical-align: top; padding: var(--space-1) var(--space-2) var(--space-2); min-height: 96px; border: 1px solid var(--border); overflow: hidden; }
.agenda-month .agenda-day { height: 112px; }
.agenda-week .agenda-day { height: 320px; }
.agenda-day.is-outside { background: var(--surface-subtle); color: var(--text-muted); }
.agenda-day.is-today { box-shadow: inset 0 0 0 2px var(--action-primary); }
.agenda-day-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.agenda-add { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target-min); min-height: var(--target-min); margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0; border-radius: var(--radius-sm); color: var(--link); text-decoration: none; font-size: var(--text-lg); }
.agenda-add:hover, .agenda-add:focus-visible { background: var(--surface-hover); }
.agenda-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.agenda-line { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-2); align-items: baseline; min-height: var(--target-min); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border-left: 3px solid var(--action-primary); background: var(--surface-subtle); color: var(--text); text-decoration: none; font-size: var(--text-sm); }
.agenda-line:hover, .agenda-line:focus-visible { background: var(--surface-hover); }
.agenda-line.is-cancelled .agenda-line-title { text-decoration: line-through; color: var(--text-muted); }
.agenda-line.is-tentative { border-left-style: dashed; }
.agenda-line.is-overlap { border-left-color: var(--status-warning-fg); }
.agenda-line.is-fiscal { border-left-color: var(--status-info-fg); }
.agenda-line-time { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }
.agenda-line-title { font-weight: var(--weight-semibold); white-space: normal; overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.agenda-grid .agenda-line { grid-template-columns: minmax(0, 1fr); padding: var(--space-1); }  /* a day cell is narrow: the time sits above the title, the title wraps by word */
.agenda-grid .agenda-line-time { white-space: normal; overflow-wrap: break-word; }
.agenda .chip { white-space: normal; max-width: 100%; }
.agenda-line-zone { grid-column: 1 / -1; font-size: var(--text-xs); }
.agenda-line-flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.agenda-sync { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.agenda-list-day { margin-bottom: var(--space-3); }
.agenda-list-day h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.agenda-cal { display: block; font-size: var(--text-xs); padding-left: var(--space-2); }
.agenda-facts { display: grid; gap: var(--space-3); margin: var(--space-3) 0; }
.agenda-facts dt { font-size: var(--text-xs); color: var(--text-secondary); font-weight: var(--weight-semibold); }
.agenda-facts dd { margin: 0; overflow-wrap: anywhere; }
.agenda-prewrap { white-space: pre-wrap; }
.agenda-guests, .agenda-overlaps, .agenda-changes, .agenda-vals, .agenda-failed, .agenda-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.agenda-slots { grid-auto-flow: column; justify-content: start; flex-wrap: wrap; }
.agenda-slots li .btn { min-height: var(--target-min); }
.agenda-failed li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.agenda-avail { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.agenda-avail-day h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.agenda-avail-day.is-off { background: var(--surface-subtle); }
.agenda-avail-day.is-today { box-shadow: inset 0 0 0 2px var(--action-primary); }
.agenda-timeline { display: block; width: 100%; height: 20px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.agenda-track { fill: var(--surface-muted); }
.agenda-bar.is-busy { fill: var(--status-danger-fg); opacity: .85; }
.agenda-bar.is-free { fill: var(--status-success-bg); stroke: var(--status-success-fg); stroke-width: .3; vector-effect: non-scaling-stroke; }
.agenda-ticks { display: flex; justify-content: space-between; margin: var(--space-1) 0 var(--space-2); font-size: var(--text-xs); }
.agenda-avail-lists { display: grid; gap: var(--space-2); margin: 0; }
.agenda-avail-lists > div { display: grid; grid-template-columns: 8ch 1fr; gap: var(--space-2); align-items: start; }
.agenda-avail-lists dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); padding-top: var(--space-1); }
.agenda-avail-lists dd { margin: 0; }
.agenda-units td, .agenda-units th { vertical-align: top; }
.agenda-choice { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.agenda-vals { gap: var(--space-1); }
.agenda-form .field-row { align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }  /* at 200% zoom one column is narrower than 160px */
.agenda .choice { min-height: var(--target-min); display: flex; align-items: center; gap: var(--space-2); }
.agenda .choices { display: grid; gap: var(--space-1); }
.hint.block { display: block; }
@media (max-width: 768px) {
  .agenda-grid-wrap { display: none; }
  .agenda-list-wrap.is-phone-only { display: block; }
  .agenda .agenda-toolbar { align-items: stretch; }
  .agenda-views ul { flex-wrap: wrap; }
  .agenda-avail-lists > div { grid-template-columns: 1fr; }
}
@media (min-width: 769px) {
  .agenda-list-wrap.is-phone-only { display: none; }
}
@media (max-width: 1100px) and (min-width: 769px) {
  .agenda-dow-long { display: none; }
  .agenda-dow-short { display: inline; }
  .agenda-month .agenda-day { height: 128px; }
  .agenda-line-flags .chip { display: none; }
}

/* ===== Densidade slate nas telas da equipe (admin, contador, bookkeeper). Só desktop com mouse: toque mantém --target-min. ===== */
.shell-staff .page-wide { max-width: min(1760px, 100%); }
.btn.btn-icon-only { padding: 4px; justify-content: center; }
.btn.btn-icon-only svg { flex-shrink: 0; }
@media (min-width: 769px) and (pointer: fine) {
  .shell-staff main .btn {
    min-height: 36px;
    min-width: 36px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
  }
  .shell-staff main .btn-primary { font-weight: var(--weight-semibold); }
  .shell-staff main .page-actions .btn,
  .shell-staff main .subnav-actions .btn { min-height: var(--target-min); padding: var(--space-2) var(--space-4); }
  .shell-staff main td .btn {
    min-height: 32px;
    min-width: 32px;
    padding: 0 var(--space-2);
  }
  .shell-staff main .btn.btn-icon-only { width: 32px; min-height: 32px; min-width: 32px; padding: 4px; }
  .shell-staff main :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select) {
    min-height: 36px;
    padding: 4px var(--space-2);
    font-size: var(--text-sm);
  }
  .shell-staff main textarea { font-size: var(--text-sm); }
  .shell-staff main .search-field input[type="search"] { padding-inline-start: calc(var(--space-3) + 28px); }
  .subnav ul { flex-wrap: wrap; gap: 0 var(--space-4); overflow-x: visible; }
  .subnav a { min-height: 36px; font-weight: var(--weight-medium); }
  .subnav a[aria-current="page"] { font-weight: var(--weight-semibold); }
}
/* Em notebooks a tabela de serviços cabe inteira: células e coluna do item mais estreitas */
@media (min-width: 769px) and (max-width: 1500px) {
  .fin-services-table th,
  .fin-services-table td { padding-inline: var(--space-2); }
  .fin-services-table td:first-child { min-width: 150px; }
  .fin-services-table .fin-row-actions { gap: 0; }
}
/* No celular o nome da conta quebra linha em vez de empurrar a página para o lado */
@media (max-width: 768px) {
  .fin-coa-badge, .badge.fin-coa-badge { white-space: normal; max-width: 100%; }
}

/* DUN-4974: payment activity, firm-finance status and the invoice/overdue actions stay readable at phone width and 200% zoom. */
.payment-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.payment-activity li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; }
#payment-notice { margin-block: var(--space-4); overflow-wrap: anywhere; }
#payment-notice p { margin: 0; }
#firm-finance .btn, #qb-financial-statement .btn { min-height: var(--target-min); min-width: var(--target-min); }
.head-actions a.btn-primary, .head-actions a.btn-danger { color: var(--text-on-primary); }
.head-actions a.btn-danger:hover { color: var(--text-on-primary); }
.head-actions a.btn[aria-disabled="true"], .head-actions a.btn[aria-disabled="true"]:hover { color: var(--disabled-fg); background: var(--disabled-bg); border-color: var(--border); opacity: 1; }
#authorized-msg { white-space: normal; overflow-wrap: anywhere; }
.cards-on-mobile .table-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); white-space: normal; }
[data-activity-state] { margin-inline-start: var(--space-2); }
[data-hold] { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
#firm-finance .btn { margin-block-start: var(--space-3); }

/* Approved E&A Tax visual system, shared across application levels (2026-11-02).
   The navy navigation is a brand surface; it does not enable global dark mode. */
.theme-ea-tax .sidebar,.theme-ea-tax #side-drawer{
  --surface:var(--surface-nav);--surface-subtle:var(--surface-nav-hover);
  --text:var(--text-on-nav);--text-heading:var(--text-on-nav);
  --text-secondary:var(--text-on-nav-muted);--border:var(--ea-navy-700);
  color:var(--text-on-nav-muted);background:var(--surface-nav);
}
.theme-ea-tax .sidebar-brand,.theme-ea-tax .sidebar-firm,.theme-ea-tax .sidebar-viewer{box-shadow:none;border-color:var(--ea-navy-700)}
.theme-ea-tax .sidebar .nav-item,.theme-ea-tax #side-drawer .nav-item{color:var(--text-on-nav-muted)}
.theme-ea-tax .sidebar .nav-item:hover,.theme-ea-tax #side-drawer .nav-item:hover{background:var(--surface-nav-hover);color:var(--text-on-nav)}
.theme-ea-tax .sidebar .nav-item[aria-current],.theme-ea-tax #side-drawer .nav-item[aria-current]{background:var(--surface-nav-active);color:var(--text-nav-active);border-color:rgba(255,255,255,0.22);box-shadow:0 1px 2px rgba(7,17,31,0.24)}
.theme-ea-tax .sidebar .nav-item[aria-current] .icon,.theme-ea-tax #side-drawer .nav-item[aria-current] .icon{color:var(--text-nav-active)}

.theme-ea-tax .sidebar :focus-visible,.theme-ea-tax #side-drawer :focus-visible{outline-color:var(--focus-ring-on-dark)}
.theme-ea-tax .sidebar-brand .brand-logo-large{height:auto;width:136px;max-height:36px;max-width:100%;object-fit:contain;object-position:left center}

/* Sidebar order (Samuel, 2026-11-01, after the Dunamis Tech console): the head row holds the brand and the collapse control, the
   firm box and the menu groups stack from the top, and the viewer is pinned alone at the foot of the column. */
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--ea-navy-700); }
.sidebar-head .sidebar-brand { flex: 1 1 auto; min-width: 0; padding-block: var(--space-1); }
.sidebar-viewer, .sidebar-viewer-menu { margin-top: auto; }
.sidebar-viewer-menu { position: relative; width: 100%; }
.sidebar-viewer-menu > summary.sidebar-viewer { list-style: none; cursor: pointer; user-select: none; min-height: var(--target-min); transition: background-color var(--duration-state); }
.sidebar-viewer-menu > summary.sidebar-viewer::-webkit-details-marker { display: none; }
.theme-ea-tax .sidebar-brand { background: transparent; border: 0; padding-inline: var(--space-2); }
.theme-ea-tax .sidebar-viewer { background: transparent; border: 0; border-top: 1px solid var(--ea-navy-700); border-radius: 0; padding: var(--space-3) var(--space-2) var(--space-1); }
.theme-ea-tax .sidebar-viewer-menu > summary.sidebar-viewer:hover { background: var(--surface-nav-hover); border-radius: var(--radius-md); }
.sidebar-viewer-panel { padding-top: var(--space-2); }
.sidebar-viewer-panel .signout { display: block; width: 100%; margin: 0; }
.sidebar-signout { width: 100%; justify-content: flex-start; min-height: var(--target-min); gap: var(--space-2); color: var(--text-on-nav); background: var(--surface-nav-hover); border: 1px solid var(--ea-navy-700); }
.sidebar-signout:hover { background: var(--surface-nav-active); color: var(--text-nav-active); }
.theme-ea-tax .sidebar-viewer .avatar { color: var(--text-nav-active); background: var(--surface-nav-active); }
.theme-ea-tax .viewer-name { color: var(--text-on-nav); }
/* Lote A (4.1): the client portal of the themed firm shares the navy sidebar of the mockup (client-desktop); the header, the
   content and the phone bar stay light. */
.theme-ea-tax .portal-side { --surface: var(--surface-nav); --surface-subtle: var(--surface-nav-hover); --surface-hover: var(--surface-nav-hover); --text: var(--text-on-nav); --text-heading: var(--text-on-nav); --text-secondary: var(--text-on-nav-muted); --border: var(--ea-navy-700); --link: var(--text-on-nav); color: var(--text-on-nav-muted); background: var(--surface-nav); border-inline-end: 0; }
.theme-ea-tax .portal-side .portal-nav-item[aria-current="page"] { color: var(--text-nav-active); background: var(--surface-nav-active); }
.theme-ea-tax .portal-side .btn-ghost { color: var(--text-on-nav); }
.theme-ea-tax .portal-side :focus-visible { outline-color: var(--focus-ring-on-dark); }
.theme-ea-tax .portal-side .brand-logo-large { width: 160px; height: auto; max-width: 100%; }
.theme-ea-tax .viewer-role, .theme-ea-tax .sidebar-firm-sub { color: var(--text-on-nav-muted); }
/* lote C 3.1 (mock team-desktop "E&A TAX · ADMINISTRAÇÃO"): rótulo em caixa alta, sem cartão; a identificação do escritório é a logo */
.theme-ea-tax .sidebar-firm { gap: 2px; padding: 0 var(--space-3); background: transparent; border: 0; box-shadow: none; }
.theme-ea-tax .sidebar-firm-sub { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
/* lote C 3.4: os três pilares da marca acima do usuário, só no tema E&A (DIRECAO.md: Trabalho, Amor, Descanso) */
.sidebar-pillars { margin: auto 0 0; padding: var(--space-3) var(--space-3) var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; color: var(--text-on-nav-muted); }
.sidebar-pillars + .sidebar-viewer, .sidebar-pillars + .sidebar-viewer-menu { margin-top: 0; }
.sidebar-collapsed .sidebar-pillars { display: none; }
.theme-ea-tax .sidebar-firm-name { color: var(--text-on-nav); }

/* DUN-4967 (Samuel, 2026-11-01): the navy column runs from the top to the bottom of the page, whatever the page's height; the
   sticky sidebar only covers the viewport. Painted on the grid so the band is exactly the sidebar track at every width. */
.theme-ea-tax .staff-grid:not(.staff-grid-bare) { background: linear-gradient(to right, var(--surface-nav) 0 var(--sidebar-width), transparent var(--sidebar-width)); }
.theme-ea-tax .staff-grid:not(.staff-grid-bare).sidebar-collapsed { background: linear-gradient(to right, var(--surface-nav) 0 var(--sidebar-width-rail), transparent var(--sidebar-width-rail)); }
@media (max-width: 1199px) {
  .theme-ea-tax .staff-grid:not(.staff-grid-bare) { background: linear-gradient(to right, var(--surface-nav) 0 var(--sidebar-width-compact), transparent var(--sidebar-width-compact)); }
  .theme-ea-tax .staff-grid:not(.staff-grid-bare).sidebar-collapsed { background: linear-gradient(to right, var(--surface-nav) 0 var(--sidebar-width-rail), transparent var(--sidebar-width-rail)); }
}
@media (max-width: 800px) { .theme-ea-tax .staff-grid:not(.staff-grid-bare), .theme-ea-tax .staff-grid:not(.staff-grid-bare).sidebar-collapsed { background: none; } }

/* Collapsible sidebar (desktop ≥ 801 px; nav-collapse.js). Collapsed: an icon rail of --sidebar-width-rail, the item labels become
   the links' titles, the brand shows its rail mark. The choice persists per browser; narrow desktops start collapsed unless the
   person chose otherwise. Phones keep the drawer. */
.sidebar-collapse { display: none; }
.sidebar-rail-mark { display: none; }
@media (min-width: 801px) {
  .sidebar-collapse { display: inline-flex; flex: none; color: var(--text-secondary); }
  .sidebar-collapse .icon { transition: transform var(--duration-state); }
  .sidebar-collapsed { grid-template-columns: var(--sidebar-width-rail) minmax(0, 1fr); }
  .sidebar-collapsed .sidebar { padding-inline: var(--space-2); align-items: center; overflow: visible; z-index: 35; }
  .sidebar-collapsed .sidebar-head { flex-direction: column; align-items: center; width: 100%; padding-bottom: var(--space-2); border-bottom: 1px solid var(--ea-navy-700); }
  .sidebar-collapsed .sidebar-collapse { align-self: center; }
  .sidebar-collapsed .sidebar-collapse .icon { transform: rotate(180deg); }
  .sidebar-collapsed .sidebar-brand { width: 100%; padding: var(--space-1) 0; text-align: center; }
  .sidebar-collapsed .sidebar-brand .brand-logo, .sidebar-collapsed .sidebar-brand .tenant-name { display: none; }
  .sidebar-collapsed .sidebar-brand .brand-link { display: inline-flex; justify-content: center; width: 100%; }
  .sidebar-collapsed .sidebar-rail-mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--text-heading); background: var(--surface-nav-hover); border: 1px solid var(--ea-navy-700); border-radius: 12px; overflow: hidden; }
  .sidebar-collapsed .sidebar-rail-mark img { display: block; width: 36px; height: 36px; object-fit: contain; }
  .sidebar-collapsed .sidebar-rail-mark[data-initial]::before { content: attr(data-initial); }
  .sidebar-collapsed .nav-sub, .sidebar-collapsed .sidebar-firm, .sidebar-collapsed .nav-group-title, .sidebar-collapsed .nav-item span, .sidebar-collapsed .sidebar-viewer > span:last-child { display: none; }
  .sidebar-collapsed .global-nav { width: 100%; }
  .sidebar-collapsed .nav-list + .nav-group-title + .nav-list { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--ea-navy-700); }
  .sidebar-collapsed .nav-item { justify-content: center; width: 44px; min-height: 44px; margin-inline: auto; padding-inline: 0; border-radius: 12px; }
  .sidebar-collapsed .sidebar-viewer { justify-content: center; width: 100%; padding-inline: 0; }
  .sidebar-collapsed .sidebar-viewer-panel { position: absolute; inset-inline-start: calc(100% + 8px); bottom: 0; z-index: 60; min-width: 160px; padding: var(--space-1); background: var(--ea-navy-950); border: 1px solid var(--ea-navy-700); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); }
  .sidebar-collapsed .sidebar [data-rail-tooltip] { position: relative; }
  .sidebar-collapsed .sidebar [data-rail-tooltip]:is(:hover, :focus-visible)::after {
    content: attr(data-rail-tooltip);
    position: absolute;
    inset-inline-start: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    padding: 6px 12px;
    white-space: nowrap;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    color: var(--text-on-nav);
    background: var(--ea-navy-950);
    border: 1px solid var(--ea-navy-700);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
    pointer-events: none;
  }
  .theme-ea-tax .sidebar-collapse { color: var(--text-on-nav-muted); }
  .theme-ea-tax .sidebar-collapse:hover { color: var(--text-on-nav); background: var(--surface-nav-hover); }
  .theme-ea-tax .sidebar-collapsed .sidebar-rail-mark { color: var(--text-on-nav); }
}
@media (prefers-reduced-motion: reduce) { .sidebar-collapse .icon { transition: none; } }

/* lote B (papelaria × app, 01/11/2026): planos de azul que dividem as seções.
   Callout informativo unificado (proposta p. 5): fundo gelo, filete navy de 3 px à esquerda, texto navy; o ícone herda a cor.
   Vale para o aviso informativo (`notice.tone-info`), o painel de estado `info` e a próxima ação do portal (`dash-next`). */
.notice.tone-info, .panel.tone-info, .dash-next { color: var(--text-heading); background: var(--surface-selected); border: 0; border-inline-start: 3px solid var(--text-heading); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.notice.tone-info a:not(.btn), .panel.tone-info a:not(.btn) { color: var(--text-heading); }
.dash-next .dash-title, .dash-next h2 { color: var(--text-heading); }
/* Bloco navy de fechamento (capa p. 4, pasta p. 8, mock "Cada atendimento tem seu ritmo"): no máximo um por página; botão em gelo. */
.closing-block { padding: var(--space-5); margin-bottom: 0; color: var(--text-on-emphasis); background: var(--surface-emphasis); border-radius: var(--radius-panel); }
.closing-block h2, .closing-block h3 { margin: 0 0 var(--space-2); color: var(--text-on-emphasis); }
.closing-block p, .closing-block li { color: var(--text-on-nav-muted); }
.closing-block p:last-child { margin-bottom: 0; }
.closing-block ul { margin: var(--space-3) 0 0; padding-inline-start: var(--space-5); }
.closing-block .btn { margin-top: var(--space-4); color: var(--text-heading); background: var(--surface-selected); border-color: transparent; }
.closing-block .btn:hover { background: var(--surface); }
.closing-block :focus-visible { outline-color: var(--focus-ring-on-dark); }
.closing-block#pending { color: var(--text); background: var(--surface-subtle); border: 1px solid var(--border); }  /* recessed secondary surface so unbuilt modules never outshout urgent work */
.closing-block#pending h2, .closing-block#pending h3 { color: var(--text-heading); }
.closing-block#pending p { color: var(--text-secondary); }
.closing-block#pending :focus-visible { outline-color: var(--focus-ring); }
.closing-block#pending .overview-list { padding-inline-start: 0; }
.closing-block#pending .overview-list > li { color: var(--text-secondary); background: var(--surface); border: 1px dashed var(--border-strong); }
.closing-block#pending .overview-list > li::before { background: var(--border-strong); }
@media print { .closing-block { color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); } .closing-block h2, .closing-block p, .closing-block li { color: var(--text); } }
/* Trilha na barra superior (mock team-desktop: "E&A Tax / Visão da equipe" à esquerda): o caminho do menu sobe para a barra em
   telas largas; o cabeçalho da página só mantém a trilha quando acrescenta o registro aberto ("pai / registro", `.crumbs-tail`). */
.topbar-crumbs { display: none; min-width: 0; }
.topbar-crumbs .crumbs { margin: 0; }
.topbar-crumbs .crumbs li { min-height: var(--target-min); white-space: nowrap; }
.shell-staff .page-header > .crumbs-nav:not(.crumbs-tail) { display: none; }
/* Acesso ao portal (mock access-desktop): as barras da marca como grafismo no painel navy, só no tema E&A; nunca sobre o texto. */
@media (min-width: 1024px) {
  .theme-ea-tax .auth-brand { overflow: hidden; isolation: isolate; }
  .theme-ea-tax .auth-brand > * { position: relative; z-index: 1; }
  .theme-ea-tax .auth-brand::before, .theme-ea-tax .auth-brand::after { content: ""; position: absolute; inset-inline: 10%; z-index: 0; opacity: 0.32; pointer-events: none; }
  .theme-ea-tax .auth-brand::before { bottom: calc(18% + 44px); height: 76px; background: linear-gradient(90deg, var(--ea-navy-700) 0 31.4%, transparent 31.4% 34.3%, var(--ea-navy-700) 34.3% 65.7%, transparent 65.7% 68.6%, var(--ea-navy-700) 68.6% 100%); }
  .theme-ea-tax .auth-brand::after { bottom: 18%; height: 30px; background: var(--ea-navy-700); }
  .theme-ea-tax .auth-brand-note { padding-top: var(--space-6); }
}

/* DUN-5046: preserve the worksheet's readable category column inside its scroll container. */
.efraim-summary-table { min-width: 44rem; }
.efraim-summary-table th[scope="row"] { min-width: 22rem; font-weight: var(--weight-medium); }

/* Optional individual-return questions use native disclosure and the existing form spacing. */
.intake-individual { display: block; margin-block: var(--space-4); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); }
.intake-individual > summary { cursor: pointer; font-weight: 700; font-size: var(--text-md); }
.intake-individual[open] > summary { margin-bottom: var(--space-3); }
.intake-individual > .hint { margin-bottom: var(--space-4); }

/* A custom firm mark keeps its approved colors on a white plate within navy navigation. */
.theme-ea-tax:not(.brand-ea-tax) :is(.sidebar, .portal-side) .brand-logo {
  background: var(--ea-surface);
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

/* Local E&A mailbox: the familiar folder/list/reading hierarchy within the shared staff shell. */
.mail-message-meta,.mail-row-meta,.mail-list-caption { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.mail-account-bar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); background:var(--surface-selected); border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--space-4); margin-bottom:var(--space-5); font-size:var(--text-sm); }
.mail-status-dot { width:8px; height:8px; border-radius:50%; background:var(--action-primary); }
.mail-account-note { margin-inline-start:auto; color:var(--text-secondary); }
.mail-workspace { display:grid; grid-template-columns:180px minmax(0,1fr); gap:var(--space-5); align-items:start; }
.mail-folders nav { display:flex; flex-direction:column; gap:var(--space-1); margin-top:var(--space-4); }
.mail-folders nav a { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:var(--space-3); text-decoration:none; border-radius:var(--radius-md); color:var(--text-secondary); }
.mail-folders nav a:hover { background:var(--surface-hover); }
.mail-folders nav a[aria-current] { background:var(--surface-selected); color:var(--text-heading); font-weight:var(--weight-bold); }
.mail-compose-link { width:100%; }
.mail-content { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; min-width:0; }
.mail-search { display:flex; gap:var(--space-2); padding:var(--space-4); border-bottom:1px solid var(--border); }
.mail-search input { min-width:0; }
.mail-search .btn { flex-shrink:0; white-space:nowrap; }
.mail-list-caption { padding:var(--space-4); }
.mail-list-caption h2 { margin:0; font-size:var(--text-md); }
.mail-row { display:flex; gap:var(--space-3); padding:var(--space-4); border-top:1px solid var(--border); text-decoration:none; color:var(--text); }
.mail-row:hover { background:var(--surface-hover); }
.mail-row.is-unread { background:var(--surface-page); }
.mail-row-content { display:flex; flex:1; flex-direction:column; gap:var(--space-2); min-width:0; font-size:var(--text-sm); }
.mail-row-meta strong { font-weight:var(--weight-medium); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-row.is-unread strong,.mail-row.is-unread .mail-row-subject { font-weight:var(--weight-bold); }
.mail-row-meta time { flex-shrink:0; font-size:var(--text-xs); color:var(--text-secondary); }
.mail-row-avatar { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; background:var(--surface-selected); color:var(--text-heading); border-radius:50%; }
.mail-row-preview { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-secondary); }
.mail-row-subject { display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap; }
.mail-unread-label { font-size:var(--text-xs); color:var(--link); }
.mail-editor,.mail-reading,.mail-empty { padding:var(--space-5); }
.mail-editor .field { margin-bottom:var(--space-4); }
.mail-editor-actions,.mail-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-block:var(--space-4); }
.mail-reading > h2 { margin-top:var(--space-5); }
.mail-thread-message { border-top:1px solid var(--border); padding-block:var(--space-5); }
.mail-message-meta { flex-wrap:wrap; font-size:var(--text-sm); }
.mail-message-meta time { color:var(--text-secondary); font-size:var(--text-xs); }
.mail-message-body { white-space:pre-wrap; overflow-wrap:anywhere; max-width:70ch; }
.mail-account-detail { max-width:760px; }
.mail-account-detail dl { display:grid; grid-template-columns:140px minmax(0,1fr); gap:var(--space-3); }
.mail-account-detail dd { margin:0; }
@media(max-width:800px) {
 .mail-workspace { grid-template-columns:minmax(0,1fr); gap:var(--space-3); }
 .mail-folders nav { flex-direction:row; overflow-x:auto; margin-top:var(--space-2); }
 .mail-folders nav a { flex-shrink:0; gap:var(--space-3); }
 .mail-account-note { margin-inline-start:0; }
 .mail-account-bar { gap:var(--space-2); }
 .mail-editor,.mail-reading { padding:var(--space-4); }
 .mail-account-detail dl { grid-template-columns:1fr; gap:var(--space-2); }
}

/* Give the outgoing HTML room to breathe. The page scrolls vertically as one document. */
.mail-workspace.is-composing { grid-template-columns:minmax(0,1fr); }
.mail-workspace.is-composing .mail-folders { display:none; }
.mail-workspace.is-composing .mail-content { overflow:visible; }
.mail-composer { display:grid; grid-template-columns:minmax(0,1fr); }
.mail-preview { min-width:0; padding:var(--space-5); background:var(--surface-page); border-radius:var(--radius-card); }
.mail-preview-head { display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.mail-preview-head h2 { margin:0; }
.mail-preview-devices { display:flex; gap:var(--space-1); }
.mail-preview-devices [aria-pressed=true] { background:var(--surface-selected); color:var(--text-heading); }
.mail-preview [role=status] { font-size:var(--text-xs); margin-block:var(--space-3); }
.mail-preview-subject { display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-4); background:var(--surface-selected); border-radius:var(--radius-md); font-size:var(--text-sm); }
.mail-preview-subject > span { color:var(--text-secondary); }
.mail-preview-paper { width:100%; margin-block:var(--space-4); }
.mail-preview-paper iframe { display:block; width:100%; border:0; min-height:200px; background:var(--surface-page); }
.mail-preview-paper.is-mobile { max-width:390px; margin-inline:auto; }
@media(min-width:1280px) {
 .mail-composer { grid-template-columns:minmax(280px,0.8fr) minmax(0,1.6fr); align-items:start; }
 .mail-editor { position:sticky; top:var(--space-4); }
}
@media(max-width:600px) {
 .mail-preview { padding:var(--space-3); }
 .mail-preview-head { gap:var(--space-2); }
}

.mail-split{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2fr);min-width:0}.mail-split>*{min-width:0}.mail-reading-list{border-right:1px solid var(--border)}.mail-reading-list .mail-row-content{display:grid}.mail-sent-preview{width:100%;height:950px;border:0}.mail-editor fieldset{min-width:0;overflow-wrap:anywhere}.mail-editor input[type=file]{max-width:100%}@media(max-width:900px){.mail-split{display:block}.mail-reading-list{display:none}}

.mail-mobile-switch{display:none}@media(max-width:1279px){.mail-mobile-switch{display:flex;gap:8px;padding:16px}.mail-composer[data-compose-mode=edit] .mail-preview{display:none}.mail-composer[data-compose-mode=preview] .mail-editor{display:none}}

/* E&A composition desk: one task at a time, with the document always alongside. */
.mail-composition-summary{font-size:var(--text-xs);color:var(--text-secondary);margin:8px 0 20px;overflow-wrap:anywhere}
.mail-editor-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px}
.mail-editor-tabs button{font:inherit;font-size:var(--text-sm);background:transparent;border:0;border-bottom:3px solid transparent;padding:12px 8px;cursor:pointer;color:var(--text-secondary);min-height:44px}
.mail-editor-tabs button[aria-selected=true]{color:var(--text-heading);border-bottom-color:var(--text-heading);font-weight:700}
.mail-editor-tabs span{font-size:var(--text-xs);padding:2px 5px;background:var(--surface-selected);border-radius:var(--radius-md)}
.mail-editor-panels [hidden]{display:none!important}.mail-editor-panels{min-width:0}
.mail-editor-panels h3{font-size:var(--text-md);margin-top:0}
.mail-editor-panels .field{margin-block:12px}.mail-editor-panels .field label{font-size:var(--text-sm)}
.mail-editor-panels .mail-template-picker{margin:0;padding:0;border:0}.mail-template-picker legend{display:none}
.mail-template-picker>p.muted{font-size:var(--text-xs);line-height:1.5}
.mail-template-picker [data-template-status]{font-size:var(--text-xs);overflow-wrap:anywhere}
.mail-secondary{border-top:1px solid var(--border);margin-block:12px;padding-block:10px;font-size:var(--text-sm)}
.mail-secondary summary{cursor:pointer;min-height:28px;font-weight:700}.mail-secondary fieldset{padding:12px 0;border:0}
.mail-secondary [data-upload-status]{font-size:var(--text-xs)}
.mail-editor textarea[name=body]{min-height:220px;resize:vertical}
.mail-editor [data-template-fields]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.mail-editor [data-template-fields] input{width:100%;min-width:0}
.mail-editor-actions{border-top:1px solid var(--border);padding-top:16px;margin-bottom:0}
.mail-editor-actions+p{font-size:var(--text-xs);margin-bottom:0}
@media(min-width:1280px){.mail-composer{grid-template-columns:minmax(360px,1fr) minmax(0,1.65fr)}.mail-editor{position:sticky;top:16px}.mail-editor-panels{max-height:calc(100dvh - 350px);min-height:300px;overflow-y:auto;scrollbar-gutter:stable;padding-right:8px;overscroll-behavior:contain}}
@media(max-width:600px){.mail-editor [data-template-fields]{grid-template-columns:minmax(0,1fr)}.mail-editor-tabs button{padding-inline:6px;font-size:12px}.mail-editor-panels{min-height:300px}}

@media (max-width: 767px) {
  .export-create-form { grid-template-columns: minmax(0, 1fr); }
}

/* Firm & brand (Settings, 2026-11-09): four short cards and, on wide screens, the phone-size preview beside them, one language at
   a time. The desktop size needs 650 px, so that option draws the preview under the form (.brand-layout-wide). */
.brand-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.brand-main { min-width: 0; }
.brand-side { min-width: 0; }
.brand-card-head { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.brand-card-head h2 { margin: 0 0 var(--space-1); font-size: var(--text-h2); }
.brand-card-head .hint { margin: 0; }
.brand-logo-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); }
.brand-logo-slot { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: var(--space-3); background: var(--surface-page); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.brand-logo-slot .logo-preview { padding: 0; border: 0; background: transparent; }
.brand-logo-none { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; text-align: center; }
.brand-logo-field { margin-bottom: 0; }
.brand-logo-upload { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.brand-logo-upload input[type="file"] { flex: 1 1 240px; width: auto; }
.brand-logo-upload .btn { flex: 0 0 auto; }
.brand-address { margin-bottom: 0; }
.brand-address > legend { margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.brand-pair { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.brand-triple { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.brand-card > .field-row:last-child > .field, .brand-card > .field:last-child { margin-bottom: 0; }
.brand-lang-switch { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-4); padding: 0; border: 0; }
.brand-lang-pill { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 36px; margin: 0; padding: 0 var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; }
.brand-lang-pill:hover { background: var(--surface-hover); color: var(--text-heading); }
.brand-lang-switch input:checked + .brand-lang-pill { background: var(--surface-selected); color: var(--text-selected); border-color: var(--action-primary); font-weight: var(--weight-semibold); }
.brand-lang-switch input:focus-visible + .brand-lang-pill { outline: 2px solid var(--focus-ring, var(--action-primary)); outline-offset: 2px; }
.brand-lang-optional { font-weight: var(--weight-regular); color: var(--text-secondary); }
.brand-lang-panel { display: none; }
.brand-texts:has(#texts-lang-pt:checked) .brand-lang-panel[data-lang="pt"], .brand-texts:has(#texts-lang-en:checked) .brand-lang-panel[data-lang="en"], .brand-texts:has(#texts-lang-es:checked) .brand-lang-panel[data-lang="es"] { display: block; }
.brand-texts:not(:has(input[name="texts_lang"]:checked)) .brand-lang-panel { display: block; }
.brand-preview-card { margin-bottom: 0; }
.brand-preview-controls { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.brand-preview-controls .brand-lang-switch { margin: 0; }
.brand-device-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.brand-device-form .field { margin: 0; }
.brand-device-form .choices { gap: var(--space-2) var(--space-3); }
.brand-stage.previews-mobile, .brand-stage.previews-desktop { display: grid; grid-template-columns: minmax(0, 1fr); }
.brand-stage .preview { grid-area: 1 / 1; margin: 0; visibility: hidden; }
.brand-preview-card:has(#preview-lang-pt-BR:checked) .preview[data-lang="pt-BR"], .brand-preview-card:has(#preview-lang-en:checked) .preview[data-lang="en"], .brand-preview-card:has(#preview-lang-es:checked) .preview[data-lang="es"] { visibility: visible; }
.brand-preview-card:not(:has(input[name="preview_lang"]:checked)) .preview:first-child { visibility: visible; }
.brand-stage.previews-mobile .preview { flex: none; max-width: 100%; }
.brand-stage.previews-mobile .preview iframe { height: 720px; }
@media (min-width: 801px) {
  .brand-logo-row { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
}
@media (min-width: 1240px) {
  .brand-layout:not(.brand-layout-wide):has(.brand-side):not(:has(.previews-desktop)) { grid-template-columns: minmax(0, 1fr) 440px; }
  .brand-layout:not(.brand-layout-wide):has(.brand-side):not(:has(.previews-desktop)) .brand-side { position: sticky; top: var(--space-5); }
  .brand-layout:not(.brand-layout-wide):has(.brand-side):not(:has(.previews-desktop)) .brand-stage.previews-mobile .preview iframe { height: calc(100vh - 320px); min-height: 480px; }
  .brand-layout:not(:has(.brand-side)) .brand-main { max-width: none; }
  .brand-layout:has(.previews-desktop) { grid-template-columns: minmax(0, 1fr); }
}

/* Invoices › New invoice (2026-11-09): the composer (one column, Preview is a button) and the invoice on paper. */
.compose-layout { max-width: 980px; }
.compose-main, .compose-side { min-width: 0; }
.compose-card .field-row > .field:last-child { margin-bottom: 0; }
.compose-lines { margin: 0; padding: 0; border: 0; }
.compose-table { width: 100%; }
.compose-table th, .compose-table td { padding: var(--space-2) var(--space-2); vertical-align: middle; }
.compose-table th.num, .compose-table td.num { text-align: end; }
.compose-table td.num input { text-align: end; }
.compose-table input, .compose-table select { min-height: 40px; padding-block: var(--space-1); }
.compose-table .line-what { min-width: 200px; }
.compose-table .line-what select { margin-bottom: var(--space-1); font-size: var(--text-sm); color: var(--text-secondary); }
.compose-table td.num input { width: 100%; min-width: 0; padding-inline: var(--space-2); }
.compose-table th:nth-child(2), .compose-table td:nth-child(2) { width: 64px; }
.compose-table th:nth-child(3), .compose-table td:nth-child(3) { width: 104px; }
.compose-table th:nth-child(4), .compose-table td:nth-child(4), .compose-table th:nth-child(5), .compose-table td:nth-child(5) { width: 80px; }
.compose-table .line-amount { width: 96px; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); }
.compose-table td.line-remove { width: 44px; padding-inline: 0; }
.compose-lines-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.compose-lines-head .brand-card-head { flex: 1 1 260px; min-width: 0; }
.compose-totals { width: min(100%, 320px); margin: var(--space-4) 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.compose-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) var(--space-4); }
.compose-totals dt { color: var(--text-secondary); }
.compose-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.compose-totals .compose-totals-total { padding-block: var(--space-3); background: var(--surface-selected); border-top: 1px solid var(--border); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-heading); }
.compose-totals .compose-totals-total dt { color: var(--text-heading); }
.compose-actions { justify-content: flex-end; }

/* The invoice on the E&A stationery (layout of docs/ea-taxes-stationery/letterhead; the paper keeps its own colours in both themes). */
.paper { --paper-navy: #10243A; --paper-blue: #31577C; --paper-ice: #EAF0F6; --paper-ice-50: #F4F7FA; --paper-line: #D7DFE8; --paper-ink: #15191F; --paper-muted: #5B6B7C;
  display: flex; flex-direction: column; min-height: 880px; background: #fff; color: var(--paper-ink); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; font-size: 14px; line-height: 1.45; text-align: start; }
.paper-band { height: 12px; background: var(--paper-navy); }
.paper-body { flex: 1 1 auto; padding: 32px 44px 36px; }
.paper-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: 36px; }
.paper-brand { display: flex; align-items: center; min-height: 48px; }
.paper-logo { display: block; max-height: 56px; max-width: 220px; width: auto; height: auto; }
.paper-firm { font-size: 20px; font-weight: var(--weight-bold); color: var(--paper-navy); }
.paper-id { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; }
.paper-kicker { font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-blue); }
.paper-id-number { font-size: 14px; font-weight: var(--weight-semibold); color: var(--paper-navy); font-variant-numeric: tabular-nums; }
.paper-draft { margin-top: 2px; padding: 1px 8px; border: 1px solid var(--paper-blue); border-radius: var(--radius-full); font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-blue); }
.paper-title { margin: 0; font-size: 34px; line-height: 1.1; font-weight: var(--weight-bold); letter-spacing: -0.01em; color: var(--paper-navy); }
.paper-subline { margin: 6px 0 24px; color: var(--paper-muted); }
.paper-accent { margin-bottom: 28px; padding: 16px 20px; background: var(--paper-ice); border-inline-start: 4px solid var(--paper-navy); }
.paper-meta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px 28px; margin: 0; }
.paper-meta dt { margin: 0 0 2px; font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-blue); }
.paper-meta dd { margin: 0; font-weight: var(--weight-medium); color: var(--paper-ink); overflow-wrap: anywhere; }
.paper-muted { display: block; color: var(--paper-muted); font-weight: var(--weight-regular); }
.paper-lines { width: 100%; border-collapse: collapse; }
.paper-lines th, .paper-lines td { padding: 10px 12px; text-align: start; vertical-align: top; border: 0; }
.paper-lines .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.paper-lines thead th { background: var(--paper-navy); color: #fff; font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; }
.paper-lines tbody td { color: var(--paper-ink); background: #fff; border-bottom: 1px solid var(--paper-line); }
.paper-lines tbody tr:nth-child(even) td { background: var(--paper-ice-50); }
.paper-lines td:first-child { overflow-wrap: anywhere; }
.paper-lines tfoot td { height: 0; padding: 0; border: 0; background: none; }
.paper-empty td { text-align: center; color: var(--paper-muted); }
.paper-totals { width: min(100%, 300px); margin: 20px 0 0 auto; }
.paper-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 12px; border-bottom: 1px solid var(--paper-line); }
.paper-totals dt { color: var(--paper-muted); }
.paper-totals dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--paper-ink); }
.paper-totals .paper-total-due { padding-block: 11px; background: var(--paper-navy); border-bottom: 0; }
.paper-totals .paper-total-due dt, .paper-totals .paper-total-due dd { color: #fff; font-weight: var(--weight-bold); }
.paper-totals .paper-total-due dd { font-size: 16px; }
.paper-payment { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 28px; padding: 14px 18px; background: var(--paper-ice); color: var(--paper-ink); }
.paper-payment strong { color: var(--paper-navy); }
.paper-foot { display: flex; flex-direction: column; gap: 2px; padding: 18px 44px; background: var(--paper-navy); border-top: 4px solid var(--paper-blue); color: #C9D6E3; font-size: 12px; }
.paper-foot strong { color: #fff; font-size: 13px; }
.paper-skipped { margin: var(--space-2) 0 0; }
.invoice-doc { margin-bottom: var(--space-5); }

/* Row "…" menu (invoices and other lists). */
.row-menu { position: relative; display: inline-block; }
.row-menu > summary { list-style: none; cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu .menu-items { position: absolute; inset-inline-end: 0; z-index: 6; min-width: 220px; margin: var(--space-1) 0 0; padding: var(--space-1); text-align: start; box-shadow: var(--shadow-elevated); }
.row-menu.menu-up .menu-items { top: auto; bottom: 100%; margin: 0 0 var(--space-1); }
.row-menu .menu-items .btn, .row-menu .menu-items form { width: 100%; }
.row-menu .menu-items .btn { justify-content: flex-start; gap: var(--space-2); min-height: 38px; padding-inline: var(--space-3); border: 0; background: none; box-shadow: none; font-weight: var(--weight-regular); color: var(--text); border-radius: var(--radius-sm); }
.row-menu .menu-items .btn:hover, .row-menu .menu-items .btn:focus-visible { background: var(--surface-hover); }
.row-menu .menu-items .btn-danger-text { color: var(--status-danger-fg); }
.row-menu .menu-items .menu-sep { margin-top: var(--space-1); }
.row-menu .menu-items form.menu-sep, .row-menu .menu-items a.menu-sep { border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding-top: var(--space-1); }
.row-menu .menu-items a.menu-sep { padding-top: 0; }

/* Invoices list (2026-11-09): KPI cards, search, table with a status dot, side panel and preview dialog. */
.inv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-2); }
.inv-kpi { padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); min-width: 0; }
.inv-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.inv-kpi-label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.inv-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--text-secondary); flex: none; }
.inv-kpi-value { margin: var(--space-3) 0 2px; font-size: var(--text-2xl); line-height: 1.15; font-weight: var(--weight-bold); color: var(--text-heading); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.inv-kpi-hint { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.inv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--status-neutral-fg); flex: none; }
.inv-kpi[data-tone="info"] .inv-dot, .inv-dot[data-status="issued"], .inv-dot[data-status="open"], .inv-dot[data-status="partially_paid"] { background: var(--status-info-fg); }
.inv-kpi[data-tone="danger"] .inv-dot, .inv-dot[data-status="overdue"], .inv-dot[data-status="uncollectible"] { background: var(--status-danger-fg); }
.inv-kpi[data-tone="success"] .inv-dot, .inv-dot[data-status="paid"] { background: var(--status-success-fg); }
.inv-kpi[data-tone="warning"] .inv-dot, .inv-dot[data-status="refunded"], .inv-dot[data-status="partially_refunded"] { background: var(--status-warning-fg); }
.inv-kpi[data-tone="danger"] .inv-kpi-icon { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.inv-kpi[data-tone="success"] .inv-kpi-icon { background: var(--status-success-bg); color: var(--status-success-fg); }
.inv-kpi[data-tone="info"] .inv-kpi-icon { background: var(--status-info-bg); color: var(--status-info-fg); }
.inv-kpi[data-tone="warning"] .inv-kpi-icon { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.inv-scope { margin: 0 0 var(--space-4); }
.inv-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.inv-toolbar .search-field { flex: 1 1 280px; max-width: 420px; margin: 0; }
.inv-toolbar .inv-filter { margin: 0 0 0 auto; }
.inv-table thead th { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
.inv-table td { vertical-align: middle; }
.inv-number { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; text-decoration: none; color: var(--text-heading); font-weight: var(--weight-semibold); }
.inv-number code { background: none; padding: 0; font-size: var(--text-sm); color: inherit; }
.inv-number:hover code { text-decoration: underline; }
.inv-client { display: block; font-weight: var(--weight-medium); color: var(--text-heading); }
.inv-sub { display: block; font-size: var(--text-xs); color: var(--text-muted); }
a.inv-sub:hover { color: var(--text-secondary); }
.inv-amount { display: block; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; color: var(--text-heading); }
.inv-col-menu { width: 52px; text-align: end; }
@media (min-width: 801px) {
  .inv-table-wrap { overflow: visible; }
  .inv-table-wrap thead th:first-child { border-start-start-radius: var(--radius-card); }
  .inv-table-wrap thead th:last-child { border-start-end-radius: var(--radius-card); }
}
dialog.inv-drawer { width: min(460px, 100vw); }
dialog.inv-drawer::backdrop, dialog.inv-preview::backdrop { background: rgb(16 36 58 / 0.45); }
.inv-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; }
.inv-loading { padding: var(--space-5); }
.inv-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); }
.inv-panel-id { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.inv-panel-number { margin: 0; font-size: var(--text-lg); font-family: var(--font-mono, ui-monospace, monospace); color: var(--text-heading); }
.inv-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5); }
.inv-panel-scroll > section { margin-bottom: var(--space-4); }
.inv-eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.inv-panel-total { padding: var(--space-4); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-card); }
.inv-panel-amount { margin: 0; font-size: var(--text-2xl); line-height: 1.15; font-weight: var(--weight-bold); color: var(--text-heading); font-variant-numeric: tabular-nums; }
.inv-panel-owed { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.inv-panel-box { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); }
.inv-rows { margin: 0; }
.inv-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) 0; }
.inv-rows dt { color: var(--text-secondary); }
.inv-rows dd { margin: 0; font-variant-numeric: tabular-nums; }
.inv-rows .inv-rows-strong { margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--border); font-weight: var(--weight-semibold); color: var(--text-heading); }
.inv-rows .inv-rows-strong dt { color: var(--text-heading); }
.inv-items { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-card); }
.inv-items li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.inv-items li + li { border-top: 1px solid var(--border); }
.inv-item-what { min-width: 0; overflow-wrap: anywhere; }
.inv-item-what .inv-sub { margin-top: 2px; }
.inv-item-amount { font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-details { margin: 0; }
.inv-details > div { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; color: var(--text-muted); }
.inv-details > div + div { border-top: 1px solid var(--border); }
.inv-details dt { color: var(--text-secondary); }
.inv-details dd { margin: 0; text-align: end; color: var(--text-heading); overflow-wrap: anywhere; }
.inv-panel-more { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.inv-panel-foot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.inv-panel-foot .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; }
.inv-panel-foot .btn-icon { flex: 0 0 auto; }
dialog.inv-preview { width: min(900px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; color: var(--text); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--shadow-elevated); overflow: hidden; }
dialog.inv-preview[open] { display: flex; flex-direction: column; }
.inv-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); background: var(--surface); border-bottom: 1px solid var(--border); }
.inv-preview-title { margin: 0; font-size: var(--text-lg); }
.inv-preview-bar .hint { margin: 2px 0 0; }
.inv-preview-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.inv-preview-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-5); }
.inv-preview-body .paper { max-width: 760px; margin-inline: auto; }
@media (max-width: 1100px) { .inv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .compose-table td.line-remove { width: auto; }
  .compose-table th:nth-child(n), .compose-table td:nth-child(n) { width: auto; }
  .compose-table td.num input { max-width: 180px; }
  .compose-lines-head .btn { width: 100%; justify-content: center; }
  .compose-totals { width: 100%; }
  .paper { min-height: 0; font-size: 13px; }
  .paper-body { padding: 20px 18px 24px; }
  .paper-head { margin-bottom: 24px; }
  .paper-logo { max-height: 40px; max-width: 150px; }
  .paper-title { font-size: 26px; }
  .paper-accent { padding: 12px 14px; }
  .paper-meta { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .paper-lines th, .paper-lines td { padding: 8px 6px; font-size: 12px; }
  .paper-lines thead th { font-size: 9px; letter-spacing: 0.06em; }
  .paper-foot { padding: 14px 18px; }
  .inv-toolbar .search-field { max-width: none; flex-basis: 100%; }
  .inv-toolbar .inv-filter { margin: 0; width: 100%; }
  .inv-col-menu { width: auto; }
  .cards-on-mobile .row-menu { display: block; }
  .cards-on-mobile .row-menu .menu-items { position: static; min-width: 0; box-shadow: none; }
  .inv-preview-body { padding: var(--space-3); }
  .inv-preview-bar .hint { display: none; }
  dialog.inv-preview { width: 100vw; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
}
@media (max-width: 480px) { .inv-kpis { grid-template-columns: 1fr 1fr; gap: var(--space-2); } .inv-kpi { padding: var(--space-3); } .inv-kpi-icon { display: none; } .inv-kpi-value { font-size: var(--text-lg); } }
@media print {
  body:has(dialog.inv-preview[open]) > :not(dialog.inv-preview) { display: none !important; }
  dialog.inv-preview[open] { position: static; display: block; width: auto; max-height: none; height: auto; border: 0; box-shadow: none; background: #fff; overflow: visible; }
  dialog.inv-preview::backdrop { background: none; }
  .inv-preview-bar, .paper-skipped { display: none !important; }
  .inv-preview-body { padding: 0; overflow: visible; }
  .inv-preview-body .paper { max-width: none; min-height: 0; border: 0; box-shadow: none; }
  .paper, .paper * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Invoices polish (2026-11-09): one toolbar row, cards that fill the row, the menu cell on the row's rule, quantity under the description. */
.inv-kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.inv-item-what > span { display: block; }
.inv-item-what > .muted { margin-top: 2px; font-size: var(--text-sm); }
.inv-table td.inv-col-menu { display: table-cell; }
.compose-lines-head { align-items: flex-end; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.compose-lines-head .brand-card-head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
@media (min-width: 801px) {
  .inv-toolbar { flex-wrap: nowrap; align-items: center; }
  .inv-toolbar .inv-filter { flex: 0 0 auto; flex-wrap: nowrap; align-items: center; width: auto; }
  .inv-toolbar .inv-filter select { width: auto; min-width: 200px; margin: 0; }
  .inv-toolbar .inv-filter .btn { margin: 0; }
}
@media (max-width: 800px) { .cards-on-mobile .inv-table td.inv-col-menu { display: flex; } }
@media (max-width: 480px) { .inv-kpis { grid-template-columns: 1fr 1fr; } }
#invoice-compose .compose-card .field > select { margin-top: 0; }

/* Composer spacing polish (owner request 2026-11-09): the form uses the page width, the four terms sit on one row, a line is one
   row (service beside description) and the number columns have room for their headers and values. */
.compose-layout { max-width: 1440px; }
.compose-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); }
.compose-terms #f-methods { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
.compose-terms #f-methods .choices { min-height: var(--target-min); align-items: center; }
.compose-card { padding: var(--space-5) var(--space-6); }
.compose-layout .compose-card + .compose-card { margin-top: var(--space-5); }
.compose-table th { white-space: nowrap; padding-block: var(--space-3); }
.compose-table th, .compose-table td { padding-inline: var(--space-3); }
.compose-table td { padding-block: var(--space-3); }
.compose-table th:first-child, .compose-table td:first-child { padding-inline-start: var(--space-4); }
.line-what-pair { display: grid; gap: var(--space-2); }
.compose-table .line-what .line-what-pair select { margin: 0; font-size: inherit; color: var(--text); }
.compose-table th:nth-child(2), .compose-table td:nth-child(2) { width: 92px; }
.compose-table th:nth-child(3), .compose-table td:nth-child(3) { width: 140px; }
.compose-table th:nth-child(4), .compose-table td:nth-child(4), .compose-table th:nth-child(5), .compose-table td:nth-child(5) { width: 124px; }
.compose-table .line-amount { width: 150px; font-size: var(--text-md, 1rem); }
.compose-table td.line-remove { width: 56px; padding-inline: 0 var(--space-2); text-align: center; }
.compose-totals { width: min(100%, 400px); margin-top: var(--space-5); }
.compose-totals > div { padding: var(--space-3) var(--space-4); }
.compose-layout .compose-actions { margin-top: var(--space-5); }
@media (min-width: 1280px) {
  .compose-terms { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(170px, 0.7fr) max-content; }
  .compose-terms > .field { margin-bottom: 0; }
  .line-what-pair { grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .compose-terms { grid-template-columns: 1fr; }
  .compose-card { padding: var(--space-4); }
  .compose-table th:nth-child(n), .compose-table td:nth-child(n) { width: auto; }
  .compose-table td.line-remove { width: auto; }
  .line-what-pair { flex: 1 1 100%; width: 100%; }
}
#invoice-compose .compose-card .field > input { margin-top: 0; }
@media (min-width: 801px) and (max-width: 1279px) {
  .compose-table th, .compose-table td { padding-inline: var(--space-2); }
  .compose-table th:nth-child(2), .compose-table td:nth-child(2) { width: 68px; }
  .compose-table th:nth-child(3), .compose-table td:nth-child(3) { width: 108px; }
  .compose-table th:nth-child(4), .compose-table td:nth-child(4), .compose-table th:nth-child(5), .compose-table td:nth-child(5) { width: 92px; }
  .compose-table .line-amount { width: 112px; }
  .compose-table td.line-remove { width: 44px; }
}
@media (max-width: 800px) {
  .cards-on-mobile .compose-table tr.line-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: end; }
  .cards-on-mobile .compose-table tr.line-row > td { padding: 0; border: 0; min-width: 0; }
  .cards-on-mobile .compose-table tr.line-row > td.line-what { grid-column: 1 / -1; }
  .cards-on-mobile .compose-table tr.line-row > td.num { text-align: start; align-items: stretch; }
  .cards-on-mobile .compose-table tr.line-row > td.num input { max-width: none; width: 100%; text-align: start; }
  .cards-on-mobile .compose-table tr.line-row > td.line-amount { font-size: var(--text-lg); }
  .cards-on-mobile .compose-table tr.line-row > td.line-remove { justify-content: flex-end; align-items: flex-end; }
}
@media (min-width: 1280px) and (max-width: 1679px) {
  .compose-table th:nth-child(2), .compose-table td:nth-child(2) { width: 76px; }
  .compose-table th:nth-child(3), .compose-table td:nth-child(3) { width: 120px; }
  .compose-table th:nth-child(4), .compose-table td:nth-child(4), .compose-table th:nth-child(5), .compose-table td:nth-child(5) { width: 100px; }
  .compose-table .line-amount { width: 128px; }
  .compose-table td.line-remove { width: 48px; }
  .line-what-pair { grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr); }
}
/* Printing the invoice preview (owner report 2026-11-09): the sheet is the whole page, as in the PDF. The page has no browser
   margin, the navy band runs edge to edge at the top and the footer closes the last page instead of floating under the text.
   Browsers without named pages keep their own margins and the plain flow. */
@page invoice-sheet { size: letter; margin: 0; }
@media print {
  @supports (page: invoice-sheet) {
    html:has(dialog.inv-preview[open]), body:has(dialog.inv-preview[open]) { margin: 0; padding: 0; background: #fff; }
    dialog.inv-preview[open] { page: invoice-sheet; margin: 0; padding: 0; max-width: none; border-radius: 0; }
    .inv-preview-body .paper { min-height: 100vh; margin: 0; overflow: visible; font-size: 11pt; }
    .inv-preview-body .paper-band { height: 0.22in; }
    .inv-preview-body .paper-body { padding: 0.5in 0.75in 0.4in; }
    .inv-preview-body .paper-foot { padding: 0.3in 0.75in 0.35in; font-size: 9.5pt; break-inside: avoid; }
    .inv-preview-body .paper-foot strong { font-size: 10.5pt; }
    /* A long invoice crosses pages with no page margin to lean on: the header row repeats with a clear strip above it and an
       empty footer row keeps the last line of each page off the edge. */
    .inv-preview-body .paper-lines { margin-top: -0.45in; }
    .inv-preview-body .paper-lines thead { display: table-header-group; }
    .inv-preview-body .paper-lines thead th { border-top: 0.45in solid transparent; background-clip: padding-box; }
    .inv-preview-body .paper-lines tfoot { display: table-footer-group; }
    .inv-preview-body .paper-lines tfoot td { height: 0.45in; }
    /* Totals and payment close the document as one piece: on a new page they start under a clear strip, never at the edge. */
    .inv-preview-body .paper-close { break-inside: avoid; margin-top: -0.75in; padding-top: 0.45in; }
    .inv-preview-body .paper-lines tr, .inv-preview-body .paper-totals, .inv-preview-body .paper-payment, .inv-preview-body .paper-accent { break-inside: avoid; }
  }
}
.inv-search-empty { margin: 0; padding: var(--space-4); }

/* Finance › Summary (2026-11-09): the firm's executive panel. Tokens only; every chart is SVG sized by attributes the server
   computed (no inline style), series colours are --chart-1..4 in a stable order, money stays in --text. */
.fin-sum { display: flex; flex-direction: column; gap: var(--space-5); }
.fin-sum > * { margin: 0; }
.fin-sum-filters { padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--shadow-xs); }
.fin-sum-filter-row { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); }  /* two fixed rows: nothing moves when a filter changes */
.fin-sum-periods { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.fin-sum-label { width: 100%; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.fin-sum-custom { position: relative; }
.fin-sum-custom > summary { gap: var(--space-1); list-style: none; cursor: pointer; border: 1px solid var(--border); }
.fin-sum-custom > summary::-webkit-details-marker { display: none; }
.fin-sum-custom-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.fin-sum-selects { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.fin-field { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.fin-field select { width: 230px; }
.fin-field input { min-width: 160px; }
.fin-sum-filter-actions { display: flex; gap: var(--space-2); }
.fin-sum-context { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-heading); }
.fin-sum-context .icon { width: 16px; height: 16px; vertical-align: -3px; color: var(--text-muted); }
.fin-sum-context-cmp { color: var(--text-secondary); }

.fin-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fin-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fin-kpi { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--space-5) var(--space-5) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--shadow-xs); overflow: hidden; }
.fin-kpi.is-attention { border-color: var(--status-warning-border); }
.fin-kpi p { margin: 0; }
.fin-kpi-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-heading); }
.fin-kpi-asof { font-weight: var(--weight-medium); color: var(--text-secondary); }
.fin-kpi-value { margin-top: var(--space-2) !important; font-size: 30px; font-weight: var(--weight-bold); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.fin-kpi-value a { color: inherit; text-decoration: none; }
.fin-kpi-value a:hover, .fin-kpi-value a:focus-visible { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.fin-kpi-delta { margin-top: var(--space-1) !important; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-heading); }
.fin-kpi-note { margin-top: 2px !important; font-size: var(--text-xs); color: var(--text-secondary); }
.fin-kpi-read { margin-top: var(--space-3) !important; min-height: 18px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-heading); }
.fin-kpi-spark { margin: var(--space-1) 0 0; height: 44px; border-radius: var(--radius-sm); }
.spark-hit { fill: transparent; cursor: crosshair; }
.spark-cursor { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark-line { vector-effect: non-scaling-stroke; }
.fin-kpi-source { margin-top: auto !important; padding-top: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }

.fin-health { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; }
.fin-health-item { min-width: 0; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.fin-health dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.fin-health dd { margin: 0; }
.fin-health-value { margin-top: var(--space-1); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text); }
.fin-health-value a { color: inherit; text-decoration: none; }
.fin-health-value a:hover, .fin-health-value a:focus-visible { color: var(--link); text-decoration: underline; }
.fin-health-note { margin-top: 2px; font-size: var(--text-xs); color: var(--text-secondary); }

.fin-sum-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--space-5); align-items: start; }
.fin-sum-main, .fin-sum-side { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.fin-sum-main > .card, .fin-sum-side > .card, .fin-pair > .card { margin: 0; }
.fin-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.fin-pair:empty { display: none; }
.fin-panel .section-head h2 { font-size: var(--text-lg); }
.fin-panel-sub { margin: calc(-1 * var(--space-2)) 0 var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); }
.fin-big { margin: 0 0 var(--space-3); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text); }
.fin-sub-title { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-heading); }

.fin-trend { margin: 0; }
.fin-legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.fin-legend { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-heading); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-full); cursor: pointer; }
.fin-legend:hover { background: var(--surface-hover); }
.fin-legend[aria-pressed="false"] { color: var(--text-secondary); border-style: dashed; }
.fin-legend[aria-pressed="false"] .legend-swatch { opacity: 0.3; }
.fin-legend-note { display: inline-flex; align-items: center; margin-inline-start: auto; font-size: var(--text-xs); color: var(--text-secondary); }
.fin-swatch-line { height: 3px; vertical-align: 3px; background: var(--chart-3); }
.fin-swatch-band { background: var(--surface-selected); border: 1px solid var(--border-strong); }
.fin-swatch-open { background: var(--border-strong); }
.fin-trend-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--space-4); align-items: start; }
.fin-trend-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fin-band { fill: var(--surface-selected); }
.fin-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.fin-grid.is-base { stroke: var(--border-strong); stroke-dasharray: none; }
.fin-axis { fill: var(--text-secondary); font-family: var(--font-numeric); font-size: 13px; font-variant-numeric: tabular-nums; }
.fin-year { font-size: 10px; font-weight: var(--weight-semibold); }
.fin-bar { transition: opacity var(--duration-fast); }
.fin-line { fill: none; stroke: var(--chart-3); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.fin-dot { fill: var(--surface); stroke: var(--chart-3); stroke-width: 2; }
.fin-hit { fill: transparent; cursor: crosshair; outline: none; }
.fin-hit:focus-visible { stroke: var(--focus-ring); stroke-width: 2; }
.fin-trend.is-hovering .fin-col:not(.is-active) .fin-bar { opacity: 0.35; }
.fin-col.is-active .fin-month { fill: var(--text-heading); font-weight: var(--weight-bold); }
.fin-trend.hide-billed [data-s="billed"], .fin-trend.hide-collected [data-s="collected"], .fin-trend.hide-expenses [data-s="expenses"] { display: none; }
.fin-readout-wrap { padding: var(--space-3) var(--space-4); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-card); }
.fin-readout-title { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-heading); }
.fin-readout dl { margin: 0; }
.fin-readout dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; border-bottom: 1px solid var(--border); }
.fin-readout dl > div:last-child { border-bottom: 0; }
.fin-readout dt { font-size: var(--text-xs); color: var(--text-secondary); }
.fin-readout dd { margin: 0; white-space: nowrap; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.fin-readout-hint { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-secondary); }
.fin-table { margin-top: var(--space-3); }
.fin-table > summary { min-height: 32px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--link); cursor: pointer; }
.fin-table .table-wrap { margin: var(--space-2) 0 0; }

.fin-agebar { display: block; width: 100%; height: 14px; margin-bottom: var(--space-3); border-radius: var(--radius-full); overflow: hidden; }
.fin-age-1 { fill: var(--chart-2); background: var(--chart-2); }
.fin-age-2 { fill: var(--chart-1); background: var(--chart-1); }
.fin-age-3 { fill: var(--chart-4); background: var(--chart-4); }
.fin-age-4 { fill: var(--status-warning-fg); background: var(--status-warning-fg); }
.fin-age-5 { fill: var(--status-danger-fg); background: var(--status-danger-fg); }
.fin-age-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.fin-age-legend li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: var(--space-2); border-top: 1px solid var(--border); }
.fin-age-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-heading); }
.fin-age-amount { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text); }
.fin-age-meta { font-size: var(--text-xs); color: var(--text-secondary); }

.fin-rows { margin: 0; padding: 0; list-style: none; }
.fin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.fin-row:last-child { border-bottom: 0; }
.fin-row-name { min-width: 0; overflow: hidden; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-heading); text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
a.fin-row-name:hover, a.fin-row-name:focus-visible { color: var(--link); text-decoration: underline; }
.fin-row-amount { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.fin-row-meta { display: block; font-size: var(--text-xs); color: var(--text-secondary); }

.fin-attention { margin: 0; padding: 0; list-style: none; }
.fin-attention-item { border-bottom: 1px solid var(--border); }
.fin-attention-item:last-child { border-bottom: 0; }
.fin-attention-item > a, .fin-attention-item > .fin-attention-label { text-decoration: none; }
.fin-attention-item > a, .fin-attention-item:not(:has(a)) { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 40px; padding: 0 var(--space-1); }
.fin-attention-item > a { color: var(--text-heading); border-radius: var(--radius-sm); }
.fin-attention-item > a:hover { background: var(--surface-hover); }
.fin-attention-label { font-size: var(--text-sm); color: var(--text-heading); }
.fin-attention-item:not(.has-items) .fin-attention-label, .fin-attention-item:not(.has-items) .fin-attention-count { color: var(--text-secondary); }
.fin-attention-count { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.fin-weeks-title { margin-top: 0; }
.fin-weeks li { padding: var(--space-1) 0; }
.fin-rank { margin: 0; padding: 0; list-style: none; }
.fin-rank li { padding: var(--space-2) 0; }
.fin-rank-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.fin-rank-head .fin-row-amount { grid-row: auto; }
.fin-rank-bar { display: block; width: 100%; height: 6px; margin: var(--space-1) 0; }
.fin-track { fill: var(--surface-subtle); }

.fin-facts { display: grid; gap: var(--space-3); margin: 0; }
.fin-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--space-3); }
.fin-facts dt { font-size: var(--text-sm); color: var(--text-secondary); }
.fin-facts dd { margin: 0; text-align: end; font-weight: var(--weight-semibold); color: var(--text); }
.fin-facts dd.fin-row-meta { grid-column: 1 / -1; text-align: start; font-weight: var(--weight-medium); }
.fin-facts-rows { gap: 0; margin-bottom: var(--space-3); }
.fin-facts-rows > div { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.fin-facts-rows > .is-total { border-bottom: 0; }
.fin-facts-rows > .is-total dt, .fin-facts-rows > .is-total dd { font-weight: var(--weight-bold); color: var(--text-heading); }
.fin-books-note { display: flex; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-heading); }
.fin-books .btn { margin-top: var(--space-3); }
.fin-person { display: block; font-weight: var(--weight-semibold); color: var(--text-heading); }

@media (max-width: 1280px) {
  .fin-health { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fin-kpis, .fin-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .fin-sum-grid { grid-template-columns: minmax(0, 1fr); }
  .fin-trend-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .fin-pair { grid-template-columns: minmax(0, 1fr); }
  .fin-age-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-health { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-sum-selects, .fin-sum-filter-actions { width: 100%; }
  .fin-field { flex: 1 1 140px; }
  .fin-field select, .fin-field input { min-width: 0; width: 100%; }
}
@media (max-width: 520px) {
  .fin-kpis, .fin-kpis-4 { grid-template-columns: minmax(0, 1fr); }
  .fin-sum-filters { padding: var(--space-3); }
  .fin-legend-note { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) { .fin-bar { transition: none; } }

/* Invoice composer (2026-11-09): "Add item" under the last line on the left, the totals on the right of the same row. */
.compose-lines-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); }
.compose-lines-foot .compose-totals { margin-top: 0; }
.compose-table input[name="line_unit"] { text-align: end; font-variant-numeric: tabular-nums; }
#items #add_item { margin-top: var(--space-3); }
@media (max-width: 800px) { .compose-lines-foot .btn { width: 100%; justify-content: center; } }

/* Review and send (2026-11-09): a wide dialog with the fields on the left and the e-mail the client receives on the right; the
   header and the footer stay put and the two columns scroll. Tokens only. */
dialog.send-dialog { max-width: none; width: min(1180px, calc(100vw - 32px)); padding: 0; }
dialog.send-dialog[data-modal] { max-height: calc(100dvh - 32px); overflow: hidden; }
dialog.send-dialog[data-modal][open] { display: flex; }
.send-form { display: flex; flex-direction: column; min-height: 0; width: 100%; margin: 0; }
.send-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--border); }
.send-head h2 { margin: 0 0 var(--space-1); font-size: var(--text-h2); }
.send-head p { margin: 0; color: var(--text-secondary); }
.send-summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); }
.send-summary-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--text-heading); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
.send-summary-what { display: flex; flex-direction: column; min-width: 0; }
.send-summary-what strong { color: var(--text-heading); }
.send-summary-what span, .send-summary-amount span { font-size: var(--text-sm); color: var(--text-secondary); }
.send-summary-amount { display: flex; flex-direction: column; align-items: flex-end; margin-inline-start: auto; }
.send-summary-amount strong { font-size: var(--text-lg); color: var(--text); }
.send-body { flex: 1 1 auto; min-height: 0; padding: var(--space-4) var(--space-5); overflow-y: auto; }
.send-grid { display: grid; grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr); gap: var(--space-6); align-items: start; }
.send-fields { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.send-fields section, .send-preview section { margin: 0; }
.send-fields section + section { padding-top: var(--space-5); border-top: 1px solid var(--border); }
.send-fields h3, .send-preview h3 { margin: 0 0 var(--space-3); font-size: var(--text-md); color: var(--text-heading); }
.send-fields .field { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-3); }
.send-fields .field > span { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-heading); }
.send-fields .field input, .send-fields .field select, .send-fields .field textarea { width: 100%; }
.send-fields .hint { margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
.send-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.send-methods { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.send-preview { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.send-page { padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.send-page p { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.send-page a { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-semibold); }
.send-preview-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.send-preview-head h3 { margin-bottom: var(--space-1); }
.send-preview-head .hint { margin: 0; }
.send-preview-head .slate-seg-item { border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.send-preview-head .slate-seg-item.is-active { background: var(--surface); }
.send-envelope { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-card); font-size: var(--text-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
.send-envelope strong { font-size: var(--text-md); color: var(--text-heading); }
.send-frame-wrap { padding: var(--space-3); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-card); }
.send-frame { display: block; width: 100%; height: 560px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.send-frame-wrap.is-mobile .send-frame { width: min(100%, 390px); }
.send-refresh { margin-top: var(--space-3); }
.send-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--surface-subtle); border-top: 1px solid var(--border); }
.send-foot .choice { margin: 0; font-weight: var(--weight-semibold); color: var(--text-heading); }
.send-foot .actions { display: flex; gap: var(--space-2); margin: 0; }
@media (max-width: 900px) {
  .send-grid { grid-template-columns: minmax(0, 1fr); }
  .send-preview { position: static; }
  .send-frame { height: 440px; }
  .send-preview-head .slate-seg-item { min-height: 44px; }  /* touch target on the phone (the desktop keeps the compact 36px) */
  dialog.send-dialog { width: 100vw; }
  dialog.send-dialog[data-modal] { max-height: 100dvh; height: 100dvh; border-radius: 0; }
}

/* Team › clients of a member (2026-11-09): one checkbox per client in columns that wrap. */
.team-client-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
.team-clients .choice { margin: 0; }
.team-clients > .choice { margin-bottom: var(--space-4); }
.team-clients-link { margin-top: var(--space-1); }

/* Paid invoice on the stationery (2026-11-10): the stamp beside the number and the note with the date and the amount. Status
   tokens (success for paid, warning for partially paid), always with the word. */
.paper-stamp { margin-top: 4px; padding: 3px 12px; border: 2px solid var(--status-success-fg); border-radius: var(--radius-sm); font-size: 13px; font-weight: var(--weight-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--status-success-fg); background: var(--status-success-bg); }
.paper-stamp.is-partial { border-color: var(--status-warning-fg); color: var(--status-warning-fg); background: var(--status-warning-bg); }
.paper-paid-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 18px; padding: 12px 18px; border-inline-start: 4px solid var(--status-success-fg); color: var(--text); background: var(--status-success-bg); }
.paper-paid-note strong { letter-spacing: 0.1em; color: var(--status-success-fg); }
.paper-paid-note.is-partial { border-color: var(--status-warning-fg); background: var(--status-warning-bg); }
.paper-paid-note.is-partial strong { color: var(--status-warning-fg); }

/* Signature template editor (2026-11-10): the editor card is one column (it used to inherit the two-column .editor grid of
   another screen, which squeezed the form to the right), and the preview on the stationery stays in view while typing. */
.editor-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-5); }
.tpl-editor h2, .tpl-preview h2 { margin: 0 0 var(--space-4); font-size: var(--text-lg); }
.tpl-editor .field input[type="text"], .tpl-editor textarea { width: 100%; }
.tpl-editor .chips[role="group"] { gap: var(--space-1); margin-bottom: var(--space-3); }
@media (min-width: 769px) and (pointer: fine) { .tpl-editor .chip-insert { min-height: 32px; padding: 0 var(--space-2); font-size: var(--text-xs); } }
.tpl-editor textarea.mono { min-height: 360px; resize: vertical; line-height: 1.5; }
.tpl-editor .form-actions { margin-bottom: var(--space-4); }
.tpl-preview { position: sticky; top: var(--space-3); }
.tpl-preview .preview-frame { height: min(820px, calc(100vh - 220px)); min-height: 520px; background: var(--surface-subtle); }
.tpl-preview h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-md); }
@media (max-width: 1100px) { .editor-grid { grid-template-columns: minmax(0, 1fr); } .tpl-preview { position: static; } }

/* FilterBar (owner decision 2026-11-10): one filter bar for the staff lists, as on Clients: a card across the page with the
   search row, then the disclosure with the page's own fields in one row that wraps, closed by Filter and "Clear filters".
   The list below takes the full width (the old filter column on the left is gone). */
.outbox { display: block; }
.outbox > aside.filters.card.filter-bar, aside.filters.card.filter-bar { padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); }
.filter-bar form { margin: 0; }
.filter-bar-search { display: flex; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-1); }
.filter-bar-search .search-field { flex: 1 1 auto; min-width: 0; margin: 0; }
.filter-bar-search .search-field input { width: 100%; }
.filter-bar-search .btn { flex: 0 0 auto; }
.filter-bar-more > summary { display: flex; align-items: center; min-height: var(--target-min); cursor: pointer; list-style: none; }
.filter-bar-more > summary::-webkit-details-marker { display: none; }
.filter-bar details > summary { justify-content: flex-start; gap: var(--space-2); color: var(--link); font-weight: var(--weight-semibold); }
.filter-bar details > summary::after { content: none; }
.filter-bar details > summary .disclosure-chevron { margin-inline-start: auto; transition: transform var(--duration-state); }
.filter-bar details[open] > summary { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.filter-bar details[open] > summary .disclosure-chevron { transform: rotate(180deg); }
.filter-bar-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; gap: var(--space-3); padding-block: var(--space-2); }
.filter-bar-fields .field, .filter-bar-fields .field-row { margin: 0; min-width: 0; }
.filter-bar-fields .field-row { display: contents; }
.filter-bar-fields select, .filter-bar-fields input { width: 100%; min-width: 0; }
.filter-bar-actions { display: flex; gap: var(--space-2); }
.filter-bar-actions .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 600px) { .filter-bar-search { flex-wrap: wrap; } .filter-bar-search .btn { width: 100%; justify-content: center; } }
.filter-bar form.filters-form { display: block; }

/* Templates list (2026-11-10): six columns of fixed share, so every category's table lines up with the one above it. */
.comms-catalog-meta { display: block; margin-top: var(--space-1); font-size: var(--text-xs); overflow-wrap: anywhere; }
.comms-catalog-meta code { font-size: inherit; color: inherit; background: none; padding: 0; }
@media (min-width: 769px) {
  .comms-catalog-table { table-layout: fixed; width: 100%; }
  .comms-catalog-table .col-name { width: 33%; }
  .comms-catalog-table .col-trigger { width: 18%; }
  .comms-catalog-table .col-text { width: 12%; }
  .comms-catalog-table .col-automation { width: 11%; }
  .comms-catalog-table .col-run { width: 18%; }
  .comms-catalog-table .col-actions { width: 8%; text-align: right; }
  .comms-catalog-table td { white-space: normal; overflow-wrap: anywhere; }
}

/* Queue triage destinations refine (2026-11-11): Invoice Detail & Client Record hierarchy, back-links, and touch targets. */
.invoice-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.invoice-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
}
.invoice-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
}
.invoice-crumbs a:first-child {
  margin-inline-start: calc(-1 * var(--space-2));
}
.invoice-crumb-sep {
  color: var(--text-secondary);
  user-select: none;
}
.invoice-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.invoice-meta-line strong {
  color: var(--text-heading);
}
.invoice-meta-line a {
  color: var(--link);
  text-decoration: none;
}
.invoice-meta-line a:hover {
  text-decoration: underline;
}
.invoice-meta-line a strong {
  color: inherit;
}
.invoice-meta-sep {
  color: var(--text-secondary);
  user-select: none;
}
.invoice-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.invoice-actions .inline {
  display: inline-flex;
  margin: 0;
}
.invoice-actions-sep {
  width: 1px;
  height: 24px;
  margin-inline: var(--space-1);
  background: var(--border-strong);
}
.btn.btn-danger-text {
  color: var(--status-danger-fg);
  border-color: var(--border-strong);
}
.btn.btn-danger-text:hover {
  color: var(--status-danger-fg);
  background: var(--status-danger-bg);
  border-color: var(--status-danger-fg);
}
.metrics-grid .metric-card-overdue .metric-value {
  color: var(--status-danger-fg);
}
.metrics-grid .metric-sub {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--status-danger-fg);
}
.crm-client .client-main .tabs ul {
  flex-wrap: wrap;
  gap: 0 2px;
  overflow: visible;
}
.crm-client .client-main .tabs a {
  padding: 0 6px;
  gap: 4px;
  font-size: var(--text-sm);
}
.summary-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.summary-links a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: 0 var(--space-2);
  margin-inline: calc(-1 * var(--space-2));
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--link);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color var(--duration-state), color var(--duration-state);
}
.summary-links a:hover {
  color: var(--text-heading);
  background: var(--surface-hover);
  text-decoration: none;
}
.col-nowrap {
  white-space: nowrap;
}
@media (max-width: 800px) {
  .summary-contact-line {
    font-size: var(--text-sm);
  }
  .invoice-meta-line a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
  }
  .invoice-actions-sep {
    display: none;
  }
}
@media (max-width: 768px) {
  .cards-on-mobile td.num,
  .cards-on-mobile th.num {
    text-align: start;
  }
  .cards-on-mobile .col-nowrap {
    white-space: normal;
  }
}
@media (prefers-reduced-motion: reduce) {
  .summary-links a {
    transition: none;
  }
}

/* ===== Support Tickets & Proposals Triage Refinements (clarify · harden · adapt) ===== */
.tickets-triage-bar,
.ticket-triage-bar,
.proposals-triage-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.proposals-triage-bar {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-3);
}
.proposals-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.proposals-kpi-pill {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-1);
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--duration-state), background-color var(--duration-state);
}
.proposals-kpi-pill:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  text-decoration: none;
}
.proposals-kpi-pill.is-active {
  background: var(--surface-selected);
  border-color: var(--action-primary);
}
.proposals-kpi-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.proposals-kpi-val {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-md);
  color: var(--text-heading);
}
.triage-nav-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.triage-summary-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.triage-back-link,
.triage-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color var(--duration-state), border-color var(--duration-state), color var(--duration-state);
}
.triage-back-link {
  font-weight: var(--weight-semibold);
  color: var(--link);
  background: var(--surface);
}
.triage-back-link:hover,
.triage-pill:hover {
  color: var(--text-heading);
  background: var(--surface-hover);
  border-color: var(--border-strong);
  text-decoration: none;
}
.triage-pill[aria-current="page"] {
  font-weight: var(--weight-semibold);
  color: var(--text-on-primary);
  background: var(--action-primary);
  border-color: var(--action-primary);
}
.support-queue .ticket-num-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}
.scope-client-link {
  color: var(--link);
  font-weight: var(--weight-semibold);
}
.support-queue .field.check label,
.support-ticket .field.check label {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  cursor: pointer;
}
.ticket-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.ticket-scope-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-1);
}
.support-ticket .readonly .text-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 36px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.ticket-actions[data-ticket-status="open"] #resolve-box > summary,
.ticket-actions[data-ticket-status="waiting_firm"] #resolve-box > summary {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-strong);
}
.ticket-actions[data-ticket-status="open"] #resolve-box > summary:hover,
.ticket-actions[data-ticket-status="waiting_firm"] #resolve-box > summary:hover {
  color: var(--text-heading);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.support-ticket .thread,
.support-thread .thread {
  max-width: 66ch;
}
.support-ticket .msg,
.support-thread .msg {
  max-width: 64ch;
}
.support-ticket .msg-text,
.support-thread .msg-text {
  max-width: 62ch;
}

/* Proposals board 5-column & card anatomy refinement */
@media (min-width: 769px) and (max-width: 1199px) {
  .proposals-board .board:not(.board-filtered) {
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    overflow-x: visible;
  }
}
@media (min-width: 1200px) {
  .proposals-board .board:not(.board-filtered) {
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow-x: visible;
  }
}
.proposals-board .lane-title {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-1);
  min-height: 4.5rem;
}
.lane-title-text {
  display: block;
}
.proposals-board .lane-count {
  white-space: nowrap;
}
.proposals-board .column-total {
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2);
}
.proposals-board .column-total strong,
.proposal-money,
.proposal-date,
.proposal-num {
  white-space: nowrap;
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}
.proposals-board .proposal-card .card-name {
  padding-inline-end: 0;
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
.proposal-client-ref {
  margin: 0 0 var(--space-1);
}
.proposal-client-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
}
.proposal-client-link:hover {
  color: var(--link);
  text-decoration: underline;
}
.proposals-board .proposal-card .card-meta {
  margin: var(--space-2) 0;
  padding: var(--space-2) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.proposals-board .proposal-card .card-meta > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-1) 0;
  margin: 0;
}
.proposals-board .proposal-card .card-meta dd {
  text-align: start;
  min-width: 0;
  max-width: 100%;
}
.proposals-board .proposal-card .card-meta .chip,
.proposal-validity-chip {
  white-space: normal;
  max-width: 100%;
  height: auto;
  line-height: 1.25;
  padding-block: var(--space-1);
}
.proposal-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.proposals-board .proposal-card .card-send {
  width: 100%;
  min-height: 36px;
  padding: var(--space-1) var(--space-2);
  justify-content: center;
  font-size: var(--text-xs);
  line-height: 1.25;
  text-align: center;
}
.proposals-board details.move > summary {
  position: static;
  width: 100%;
  min-width: var(--target-min);
  height: auto;
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--text);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.proposals-board details.move > summary::before {
  content: none;
}
.proposals-board details.move > summary::after {
  content: "▾";
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
.proposals-board details.move > summary:hover {
  color: var(--text-heading);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.move-summary-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 800px) {
  .triage-back-link,
  .triage-pill,
  .support-queue .ticket-num-link,
  .support-ticket .readonly .text-link,
  .proposal-client-link,
  .proposals-board .proposal-card .card-send,
  .proposals-board details.move > summary {
    min-height: var(--target-min);
    min-width: var(--target-min);
  }
  .proposals-board .proposal-card .card-send,
  .proposals-board details.move > summary,
  .proposal-client-link {
    font-size: var(--text-sm);
  }
  .scope-client-link,
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
  }
  .proposals-board .proposal-card .card-name a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
    width: 100%;
  }
}
@media (max-width: 768px) {
  .msg-meta .chip {
    font-size: var(--text-sm);
    white-space: normal;
    height: auto;
    max-width: 100%;
    line-height: 1.3;
    padding-block: var(--space-1);
  }
  .proposals-board .lane-title {
    flex-direction: row;
    align-items: center;
    min-height: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .proposals-kpi-pill,
  .triage-back-link,
  .triage-pill,
  .overdue-kpi-pill,
  .composer-back-link {
    transition: none;
  }
}

/* Full-app UX review & refinement (Waves 1–5): disclosures, pipeline triage, composer context, finance summary, overdue queue, reading measure, and mobile ergonomics */
details.inline-form:not([open]) > *:not(summary),
details.fin-editor-details:not([open]) > *:not(summary) {
  display: none;
}
details.inline-form[open] {
  display: block;
  width: 100%;
  flex: 1 1 100%;
  min-width: 0;
}
details.inline-form[open] > summary {
  margin-bottom: var(--space-3);
}

/* CRM Pipeline triage summary & quick stage pills */
.pipeline-triage-bar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-xs);
}
.pipeline-stage-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.pipeline-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 var(--space-1);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: inherit;
  opacity: 0.85;
}
.crm-pipeline #move-hint {
  font-size: var(--text-sm);
}
.crm-pipeline details.move > summary {
  min-width: 32px;
  width: 32px;
  min-height: 32px;
  height: 32px;
  border-color: var(--border);
  background: var(--surface);
}

/* Proposal composer context bar */
.composer-context-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.composer-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Billing overdue triage strip & code wrapping */
.overdue-triage-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.overdue-kpi-pill {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
.overdue-kpi-pill[data-tone="danger"] {
  border-color: var(--status-danger-border);
}
.overdue-kpi-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.overdue-kpi-value {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
}
.overdue-kpi-pill[data-tone="danger"] .overdue-kpi-value {
  color: var(--status-danger-fg);
}
.overdue-client-link {
  color: var(--text-heading);
  text-decoration: none;
}
.overdue-client-link:hover,
.overdue-client-link:focus-visible {
  color: var(--link);
  text-decoration: underline;
}
#overdue-table code {
  white-space: nowrap;
}

/* Finance summary segmented control & brand logo file input */
.slate-seg {
  flex-wrap: wrap;
}
.slate-seg-item {
  white-space: nowrap;
}
.brand-logo-upload {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.brand-logo-upload input[type="file"] {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}
.suppressions-filter-row {
  margin: 0 0 var(--space-3);
}

/* Desktop reading measure & 2-column availability week grid */
#firm-ledger-help,
#fiscal-authority p,
#calendar-access li,
#calendar-access p,
.section-head p.muted {
  max-width: 66ch;
}
@media (min-width: 1024px) {
  ol.agenda-avail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  ol.agenda-avail > li.agenda-avail-day {
    margin-bottom: 0;
  }
}

/* Mobile touch targets & readable secondary type across all screens */
@media (max-width: 640px) {
  .fin-coa-badge,
  .badge.fin-coa-badge,
  .fin-kpi-read,
  .fin-kpi-note,
  .fin-health-note,
  .fin-readout-hint,
  .fin-row-meta,
  .field-hint,
  .fin-help-meta,
  .chip-toggle,
  .chip-toggle .sr-only {
    font-size: var(--text-sm);
  }
  .proposal-composer #proposal-meta dd a,
  .crm-pipeline .card-name > a,
  .fin-kpi-value > a,
  .fin-health-value > a,
  .fin-sum details > summary,
  #fin-attention a,
  a.fin-row-name,
  a.inv-number,
  a.inv-sub,
  #overdue-table td a,
  #overdue-table th a,
  [data-stale] a,
  .field.check > label,
  label.choice,
  .brand-lang-pill,
  .btn-sm,
  .shell-staff main table tbody th a:not(.btn),
  .shell-staff main table tbody td > a:not(.btn) {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
    min-width: var(--target-min);
  }
  .crm-pipeline details.move > summary {
    width: var(--target-min);
    min-width: var(--target-min);
    height: var(--target-min);
    min-height: var(--target-min);
  }
  .slate-seg-item,
  details.fin-sum-custom > summary.slate-seg-item,
  .slate-filter-pill,
  .slate-filter-pills .slate-filter-pill,
  .fin-legend,
  .fin-subtab,
  .fin-sort-link,
  .fin-inline-check,
  .fin-type-card,
  .fin-check-pill {
    min-height: var(--target-min);
    min-width: var(--target-min);
    font-size: var(--text-sm);
  }
  .fin-sum-selects {
    flex-direction: column;
    align-items: stretch;
  }
}

/* 21 Laws of UX & Impeccable Craft Floor standardization across all screens */
html {
  scrollbar-color: var(--border-strong) transparent;
}
input,
textarea,
[contenteditable="true"] {
  caret-color: var(--action-primary);
}
h2,
h3 {
  text-wrap: balance;
}
.numeric,
td.numeric,
th.numeric,
.metric-value,
.inv-kpi-value,
.fin-kpi-value,
.fin-health-value,
.fin-row-amount {
  font-variant-numeric: tabular-nums;
}
.btn[aria-busy="true"],
button[aria-busy="true"] {
  opacity: 0.78;
  cursor: progress;
}
@media (prefers-reduced-motion: no-preference) {
  .btn:active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(1px);
  }
}
.agenda-views ul {
  padding: 2px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.agenda-views .btn {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.agenda-views .btn.btn-view-active {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
  font-weight: var(--weight-semibold);
}
.invoice-actions {
  align-items: center;
  gap: var(--space-2);
}
.invoice-action-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.invoice-action-group-subtle {
  padding: 2px var(--space-2);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.proposal-stage-track,
.invoice-stage-track {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
.settings-coa-page.stack > * + * {
  margin-top: var(--space-3);
}
.settings-coa-page > .page-header {
  margin-bottom: 0;
}
.settings-coa-page > .page-header .page-header-text {
  min-height: 0;
}
.settings-coa-page > .page-header > .subnav:not(.subnav-local) {
  margin-top: var(--space-2);
}
.settings-coa-page > .fin-hub {
  margin-top: var(--space-3);
  gap: var(--space-4);
}
.fin-catalog-meta-footer {
  display: grid;
  gap: var(--space-3);
}
.fin-catalog-meta-footer .finance-context {
  margin-block-end: 0;
}
.fin-catalog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.fin-title-stack {
  display: flex;
  flex-direction: column;
  flex: 1 1 210px;
  gap: 2px;
  min-width: 0;
}
.fin-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.fin-title-row h2 {
  margin: 0;
}
.fin-title-stack > .muted {
  margin: 0;
}
.fin-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 0 auto;
  margin-inline-start: auto;
  gap: var(--space-2);
}
@media (min-width: 1180px) {
  .fin-catalog-head {
    flex-wrap: nowrap;
  }
  .fin-head-actions {
    flex-wrap: nowrap;
  }
}
.slate-filter-pills.fin-subtabs {
  padding: 0;
  border-bottom: 0;
  margin-bottom: var(--space-3);
}
.fin-header-menu {
  position: relative;
}
.fin-header-menu > summary {
  list-style: none;
  cursor: pointer;
}
.fin-header-menu > summary::-webkit-details-marker {
  display: none;
}
.fin-header-menu[open] > summary .disclosure-chevron {
  transform: rotate(180deg);
}
details.fin-header-menu:not([open]) > *:not(summary),
details.fin-row-more:not([open]) > *:not(summary),
details.fin-editor-details:not([open]) > *:not(summary),
details.client-filter-options:not([open]) > *:not(summary) {
  display: none;
}
.fin-header-menu-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: min(360px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-elevated);
}
.fin-header-menu-panel .fin-bundle-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.fin-header-menu-panel .fin-bundle-form label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  margin: 0;
}
.fin-header-menu-panel .fin-bundle-form select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.fin-hub .fin-std-filters {
  margin-bottom: var(--space-3);
  background: var(--surface);
}
.fin-services-table code.hash {
  max-inline-size: none;
}
@media (max-width: 800px) {
  .fin-name-desc,
  .fin-name-desc code {
    font-size: var(--text-sm);
  }
}
.fin-hub .fin-std-filters .search-field {
  flex: 1.8 1 240px;
}
.fin-hub .fin-std-filters select,
.fin-hub .fin-std-filters input:is([type="text"], [type="date"], [type="number"], [type="search"]) {
  width: 100%;
  min-height: var(--target-min);
  background: var(--surface);
  color: var(--text);
}
.fin-hub .fin-std-filters .search-field input[type="search"] {
  padding-inline-start: calc(var(--space-3) + 28px);
}
@media (min-width: 769px) and (pointer: fine) {
  .fin-hub .fin-std-filters select,
  .fin-hub .fin-std-filters input:is([type="text"], [type="date"], [type="number"], [type="search"]),
  .fin-hub .fin-std-filters .btn {
    min-height: 36px;
  }
}
.fin-editor-details:not([open]) {
  border-style: dashed;
  border-color: var(--border);
  margin: 0 0 var(--space-3);
}
.fin-editor-details:not([open]) > summary {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}
.fin-editor-summary-end {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.fin-editor-details[open] > summary .disclosure-chevron {
  transform: rotate(180deg);
}
.fin-table-utility-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  padding: var(--space-1) 0;
}
.fin-results-count {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.slate-filter-pills.fin-density-pills {
  margin-bottom: 0;
}
.fin-bulk-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.fin-bulk-inline select {
  width: auto;
  min-width: 150px;
  max-width: 220px;
}
.fin-row-check-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-min);
  min-height: var(--target-min);
  cursor: pointer;
  margin: 0;
}
@media (min-width: 769px) and (pointer: fine) {
  .fin-row-check-label {
    min-width: 28px;
    min-height: 28px;
  }
}
.fin-coa-table .col-actions,
.fin-services-table .col-actions {
  width: 1%;
  min-width: 0;
  white-space: nowrap;
  text-align: end;
  padding-inline-end: var(--space-2);
}
.fin-coa-table .fin-row-actions,
.fin-services-table .fin-row-actions,
.fin-icon-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
}
.fin-icon-actions .inline-form {
  display: inline-flex;
  flex: 0 0 auto;
  margin: 0;
}
.fin-row-actions.fin-icon-actions .btn.btn-icon-only.fin-icon-btn,
.fin-icon-actions .fin-icon-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  min-width: var(--target-min);
  height: var(--target-min);
  min-height: var(--target-min);
  padding: 0;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}
.fin-row-actions.fin-icon-actions .btn.btn-icon-only.fin-icon-btn:hover,
.fin-icon-actions .fin-icon-btn:hover {
  color: var(--text-heading);
  background: var(--surface-hover);
}
.fin-row-actions.fin-icon-actions .btn.btn-icon-only.fin-icon-btn-danger:hover,
.fin-icon-actions .fin-icon-btn-danger:hover {
  color: var(--status-danger-fg);
  background: var(--status-danger-bg);
}
@media (min-width: 769px) and (pointer: fine) {
  .shell-staff main .fin-row-actions.fin-icon-actions .btn.btn-icon-only.fin-icon-btn,
  .shell-staff main .fin-coa-table .fin-icon-actions .fin-icon-btn,
  .shell-staff main .fin-services-table .fin-icon-actions .fin-icon-btn,
  .shell-staff main .fin-icon-actions .fin-icon-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
  }
}
.fin-row-more {
  position: relative;
  display: inline-flex;
}
.fin-row-more > summary {
  list-style: none;
  cursor: pointer;
}
.fin-row-more > summary::-webkit-details-marker {
  display: none;
}
.fin-row-more-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 4px);
  z-index: 25;
  min-width: 176px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  text-align: start;
}
.fin-row-more-form {
  display: contents;
}
.fin-row-more-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--target-min);
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}
.fin-row-more-item:hover {
  background: var(--surface-hover);
  color: var(--text-heading);
  text-decoration: none;
}
@media (min-width: 769px) and (pointer: fine) {
  .fin-row-more-item {
    min-height: 34px;
  }
}
#catalog-recovery li {
  max-inline-size: 65ch;
}

/* ===== App-Wide UI/UX Refinements (Settings, Finance, Comms, Schedule, Engagement) ===== */

/* Closed .disclosure elements render as single clean buttons without a double outer box */
details.disclosure:not([open]) {
  padding: 0;
  margin-bottom: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.team-roster .team-actions > details.disclosure:not([open]) {
  margin-top: 0;
}
.team-roster .disclosure > summary {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-heading);
  font-size: var(--text-sm);
}
.team-roster .disclosure > summary:hover {
  background: var(--surface-hover);
}

/* Portal settings section jump pills */
.section-jumps .subnav-link {
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
}
.section-jumps .subnav-link:hover {
  color: var(--text-heading);
  background: var(--surface-hover);
}
@media (min-width: 769px) and (pointer: fine) {
  .section-jumps .subnav-link {
    min-height: 34px;
  }
}

/* Standardize compact filter_bar actions & single-row filter bars (Recurring, Payment events, etc.) */
.filter-bar:not(:has(.filter-bar-search)) .filter-bar-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding-block: 0;
}
.filter-bar:not(:has(.filter-bar-search)) .filter-bar-fields > .field {
  flex: 1 1 200px;
  max-width: 300px;
}
@media (min-width: 601px) {
  .filter-bar-actions {
    justify-self: start;
  }
  .filter-bar-actions .btn {
    flex: 0 0 auto;
  }
}

/* Invoices: single-row header actions on desktop + visible-label Clients-style toolbar */
@media (min-width: 1120px) {
  .split-head .page-header-row {
    flex-wrap: nowrap;
  }
  .split-head .page-actions {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  .split-head .page-actions .btn {
    white-space: nowrap;
  }
}
.inv-toolbar .field {
  margin: 0;
}
@media (min-width: 801px) {
  .inv-toolbar {
    align-items: flex-end;
  }
  .inv-toolbar .inv-filter {
    align-items: flex-end;
    gap: var(--space-2);
  }
}

/* Subscription pricing: structured cards, horizontal filter bar & multi-column form grids */
.pricing-workspace {
  display: grid;
  gap: var(--space-4);
}
.pricing-ref-note {
  margin: 0;
}
.pricing-card {
  display: grid;
  gap: var(--space-3);
}
.pricing-section-head h2 {
  margin: 0;
  font-size: var(--text-lg);
}
.pricing-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.pricing-filter-bar > .field {
  flex: 1 1 220px;
  margin: 0;
}
.pricing-filter-actions {
  flex: 0 0 auto;
}
.pricing-empty {
  margin: 0;
}
.pricing-editor-disclosure {
  margin: 0;
}
.pricing-editor-form {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.pricing-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: var(--space-3);
}
.pricing-form-grid .field,
.pricing-quote-grid .field,
.pricing-quote-form > .pricing-fieldset > .field {
  margin: 0;
  min-width: 0;
}
.pricing-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: grid;
  gap: var(--space-3);
}
.pricing-quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--space-3);
}
.pricing-result-card {
  background: var(--surface-subtle);
}

/* Support tickets: aligned triage chips & carded filter toolbar */
.tickets-triage-bar .triage-nav-pills {
  flex: 1 1 auto;
  min-width: 0;
}
.tickets-triage-bar .triage-pill,
.tickets-triage-bar .triage-back-link {
  padding-inline: var(--space-2);
  font-size: var(--text-xs);
}
.tickets-triage-bar .triage-summary-chips {
  flex: 0 0 auto;
  margin-inline-start: auto;
}
.support-queue .filter-form {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.support-queue .filter-form .filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}
.support-queue .filter-form .field:not(.check) {
  flex: 1 1 160px;
  min-width: 0;
  margin: 0;
}
.support-queue .filter-form .field.check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  margin: 0;
  padding-inline: var(--space-1);
}
.support-queue .filter-form .field.check label {
  margin: 0;
}
.support-queue .filter-form .actions {
  margin: 0;
  flex: 0 0 auto;
}

/* Schedule: right-anchored New event CTA, non-truncating Availability filter bar, compact Fiscal note */
@media (min-width: 769px) {
  .agenda .agenda-toolbar > .btn-primary {
    margin-inline-start: auto;
  }
}
form.agenda-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
form.agenda-filters > .field-row {
  flex: 1 1 680px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(175px, 100%), 1fr));
  gap: var(--space-3);
  margin: 0;
}
form.agenda-filters .field {
  margin: 0;
  min-width: 0;
}
form.agenda-filters > .actions {
  margin: 0;
  flex: 0 0 auto;
}
#fiscal-authority {
  padding-block: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Engagement: Verification workspace (replacing non-existent utility classes with design tokens) */
.verif-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.verif-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.verif-kpi-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.verif-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--text-muted);
  flex: 0 0 auto;
}
.verif-kpi[data-tone="success"] .verif-dot {
  background: var(--status-success-fg);
}
.verif-kpi[data-tone="info"] .verif-dot {
  background: var(--status-info-fg);
}
.verif-kpi-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.verif-kpi-amount {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.verif-kpi-desc {
  margin: var(--space-1) 0 0;
}
.verif-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--surface-subtle);
}
.verif-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
}
.verif-stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  font-variant-numeric: tabular-nums;
}
.verif-stat[data-tone="danger"] strong {
  color: var(--status-danger-fg);
}
.verif-stat[data-tone="warning"] strong {
  color: var(--status-warning-fg);
}
.verif-stat[data-tone="info"] strong {
  color: var(--status-info-fg);
}
.verif-ingest-card {
  margin-bottom: var(--space-4);
}
.verif-ingest-summary {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.verif-ingest-form {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-3);
}
.verif-ingest-form .field {
  margin: 0;
}
.verif-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.verif-ingest-actions {
  justify-content: flex-end;
  margin: 0;
}
.verif-receipts-card {
  padding: 0;
  overflow: hidden;
}
.verif-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.verif-card-title {
  margin: 0;
  font-size: var(--text-md);
}
.verif-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.verif-empty p {
  margin: 0 auto;
}
.verif-attest-details {
  margin-top: var(--space-2);
}
.verif-attest-details > summary {
  font-size: var(--text-xs);
  cursor: pointer;
  color: var(--link);
}
.verif-attest-form {
  margin-top: var(--space-2);
  display: grid;
  gap: var(--space-2);
}

/* Engagement Inbox: clean aligned document filter bar */
.documents-region form.filters {
  padding: var(--space-3) var(--space-4);
  margin-block: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}
.documents-region form.filters .filter-row {
  flex: 1 1 560px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(165px, 100%), 1fr));
  gap: var(--space-3);
  margin: 0;
}
.documents-region form.filters .field {
  margin: 0;
  min-width: 0;
}
.documents-region form.filters .actions {
  margin: 0;
  flex: 0 0 auto;
}

/* ===== Client record, 2026-11-11 (distill · space): tabs right under the header, every fact once, one row of next steps ===== */
.crm-client .client-main .tabs ul { gap: 0 var(--space-4); margin-bottom: var(--space-5); }
.crm-client .client-main .tabs a { padding: 0 2px; font-size: var(--text-md); }
.record-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: var(--space-5); align-items: start; }
.record-overview > .record-leads { grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.record-overview > .client-summary { grid-column: 2; grid-row: 1; margin: 0; padding: var(--space-5); }
.record-leads > .card { margin: 0; }
.client-summary > h3 { margin: 0 0 var(--space-4); font-size: var(--text-lg); }
.client-summary .summary-grid { gap: var(--space-4); }
.client-summary .summary-pair dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.client-summary .summary-pair dd { overflow-wrap: anywhere; }
.client-summary .summary-contact-line { font-size: var(--text-sm); font-weight: var(--weight-regular, 400); color: var(--text-secondary); }
.client-summary .summary-links { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.crm-client .lead-item { padding: var(--space-5); }
.crm-client .lead-head { align-items: baseline; padding-bottom: 0; margin-bottom: var(--space-4); border-bottom: 0; }
.lead-days { font-size: var(--text-sm); }
.crm-client .lead-stage-track { margin: 0 0 var(--space-5); }
.crm-client .lead-item .lead-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4) var(--space-5); margin: 0 0 var(--space-5); }
.lead-fact dd { overflow-wrap: anywhere; }
.lead-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lead-fact dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.lead-fact dd { margin: 0; font-weight: var(--weight-semibold); color: var(--text); }
.lead-fact dd .muted { font-weight: var(--weight-regular, 400); }
.lead-fact dd .chip { margin-inline-start: var(--space-1); }
.lead-next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.lead-next > .lead-intake-line { flex: 1 1 100%; margin: 0 0 var(--space-1); }
.lead-next .lead-actions, .lead-next .lead-actions-forward { display: contents; }
.lead-next .lead-convert-box, .lead-next .action-box { margin: 0; }
.lead-next .action-box[open] { flex: 1 1 100%; order: 2; }
.lead-next .lead-actions-outcomes { margin-inline-start: auto; padding-top: 0; border-top: 0; gap: var(--space-1); }
.lead-next .lead-actions-outcomes:has(.action-box[open]) { flex: 1 1 100%; }
.lead-next .action-box-outcome > summary { background: transparent; border-color: transparent; }
.lead-next .action-box-outcome > summary:hover { background: var(--surface-hover); }
.crm-client .suggestion { margin-bottom: var(--space-4); }
/* timeline: the note first (the frequent action), then one quiet list */
.note-composer { padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-5); }
.note-composer .field { margin-bottom: var(--space-3); }
.note-composer textarea { width: 100%; }
.note-composer-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.note-composer-foot .field { margin: 0; }
.note-composer-foot .actions { margin: 0; margin-inline-start: auto; align-items: center; }
.crm-client .timeline-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-3); padding: 0; margin: 0 0 var(--space-3); background: transparent; border: 0; }
.crm-client .timeline-filter label { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.crm-client .timeline-filter .lane-picker-row select { flex: none; width: auto; min-width: 200px; }
.crm-client ol.timeline.card { padding: 0 var(--space-5); margin: 0 0 var(--space-4); }
.crm-client .timeline.card > li[data-activity] { padding: var(--space-4) 0; margin: 0; background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.crm-client .timeline.card > li[data-activity]:last-child { border-bottom: 0; }
.crm-client .timeline.card > li.more { padding: var(--space-3) 0; margin: 0; border: 0; }
.tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.tl-type { font-weight: var(--weight-bold); color: var(--text-heading); }
.tl-when { margin-inline-start: auto; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
/* contacts: the directory, and the form only when asked for */
.crm-client .contacts-directory-card { padding: var(--space-2) var(--space-4); }
.contact-add { padding: 0; }
.contact-add > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); padding: var(--space-2) var(--space-5); font-weight: var(--weight-semibold); color: var(--link); cursor: pointer; list-style: none; }
.contact-add > summary::-webkit-details-marker { display: none; }
.contact-add > summary:hover { color: var(--text-heading); }
.contact-add[open] > summary { color: var(--text-heading); border-bottom: 1px solid var(--border); }
.contact-add > form { padding: var(--space-4) var(--space-5) var(--space-5); }
/* tax years: one row per year, its areas as plain links */
.crm-client .engagement-item { padding: var(--space-4) var(--space-5); }
.crm-client .engagement-item .section-head { margin-bottom: var(--space-1); }
.crm-client .area-links-row { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin-top: var(--space-3); padding-top: var(--space-2); }
.crm-client .area-links-row li a { padding: 0; background: transparent; border: 0; }
.crm-client .area-links-row li a:hover { background: transparent; text-decoration: underline; }
/* pipeline card: name, where it stands, who has it, and the next action; no box inside the card */
.crm-pipeline .card-meta { gap: 2px; padding: 0; margin: 0; background: transparent; border: 0; }
.crm-pipeline .card-meta dd { font-weight: var(--weight-regular, 400); }
.crm-pipeline .card-meta .card-sub { font-size: var(--text-xs); color: var(--text-secondary); }
.crm-pipeline .card-meta .card-sub dd { color: var(--text-secondary); }
.crm-pipeline .card-meta .card-next { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.crm-pipeline .card-meta .card-next dt { display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.crm-pipeline .card-meta .card-next dt::after { content: none; }
.crm-pipeline .card-meta .card-next dd { font-weight: var(--weight-semibold); color: var(--text-heading); }
@media (max-width: 960px) {
  .record-overview { grid-template-columns: minmax(0, 1fr); }
  .record-overview > .client-summary { grid-column: 1; grid-row: 2; }
  .crm-client .client-main .tabs ul { flex-wrap: nowrap; overflow-x: auto; }
  .lead-next .lead-actions-outcomes { flex: 1 1 100%; margin-inline-start: 0; }
  .crm-client .timeline-filter { justify-content: flex-start; }
  .tl-when { flex: 1 1 100%; margin-inline-start: 0; }
}
.crm-pipeline .card-meta .card-sub dd ~ dd::before { content: " · "; }
/* the invoices of one client, inside its record: the client is the page, so its filter line and its column say nothing new */
#embed-invoices .inv-client-filter { display: none; }
#embed-invoices table tr > :nth-child(2):not([colspan]) { display: none; }

/* Pipeline page, 2026-11-11 (distill): the lane pills carry the counts, so the bar is only the pills; the keyboard hint is a
   quiet line; a lane with no card takes little width so the eight lanes fit one screen. On a phone the lane selector does
   the filtering, so the pills and the drag hint leave. */
.crm-pipeline .pipeline-triage-bar { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.crm-pipeline #move-hint { margin: 0 0 var(--space-3); padding: 0; font-size: var(--text-xs); color: var(--text-secondary); background: transparent; border: 0; }
@media (min-width: 769px) {
  .crm-pipeline .board { display: flex; align-items: flex-start; }
  .crm-pipeline .board > .lane { flex: 1 0 256px; }
  .crm-pipeline .board > .lane:has(> .cards):not(:has(.lead-card)) { flex: 0 0 112px; }
}
@media (max-width: 768px) {
  .crm-pipeline .pipeline-triage-bar, .crm-pipeline #move-hint { display: none; }
}

/* Tax years list, 2026-11-11: status pills and the year selector on one line above the table (the year wraps under on a phone). */
.tax-years-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-4); }
.tax-years-bar .slate-filter-pills { margin: 0; }
.tax-years-year { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.tax-years-year label { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.tax-years-year select { width: auto; min-width: 140px; }
.tax-years-table .col-open { text-align: end; white-space: nowrap; }