.sect { margin:0 0 8px 4px; font-size:16px; line-height:1.3; color:var(--text); font-weight:600; text-wrap:balance; }
.note { margin:8px 4px 0; font-size:12px; color:var(--text-2); }
.soon { padding:18px 16px; border-radius:12px; background:var(--surface-2); color:var(--text-2); font-size:12px; text-align:center; }
.sub { margin:0; color:var(--text-2); font-size:13px; }
/* empty states and explanatory text sit on the panel itself, not on a nested surface */
.empty-note { margin:0 4px; font-size:13px; color:var(--text-2); line-height:1.5; max-width:60ch; text-wrap:pretty; }
.sect-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px 4px; }
.sect-head .sect { margin:0; }
.sect-head .sel { min-height:32px; }
.sect-head .input { width:auto; min-height:36px; }
.sect-head .sect-aside { margin-left:auto; }
.sect-head label.sect { align-self:center; }
.sect-head .btn.sm { min-height:32px; }
/* Biblioteca: pt-BR month stepper over the hidden YYYY-MM #docs-month */
.sect-head:has(#docs-month) { flex-wrap:wrap; row-gap:6px; }
.sect-head .form-actions:has(#docs-month) { flex-wrap:nowrap; align-items:center; gap:4px; }
/* Rotinas empty state: the actions follow the explanation; loading the Simples Nacional
   calendar is the main first-run choice, so it takes the primary style while the list is empty */
.rot-empty + .rows[hidden] + .note { margin-top:12px; }
.rot-empty:not([hidden]) ~ .note #obl-seed { background:var(--btn-bg); color:var(--btn-fg); box-shadow:none; }
.rot-empty:not([hidden]) ~ .note #obl-seed:hover { filter:brightness(1.08); }
.sect-aside { font-size:12px; color:var(--text-2); white-space:nowrap; }
.month-nav { display:inline-flex; align-items:center; gap:2px; }
.month-lbl { min-width:8.6em; text-align:center; font-size:12px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.px-head .sub:empty { display:none; }