/* Desktop composition (1024 px and wider): summary first, equal-height card grids, one reading width. Phone rules live with each page's own stylesheet. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }

/* Body text keeps a readable line; headings, tables and chips are not limited. */
main .panel p, main .card p, main .manage-card p { max-width: 88ch; }

/* ---------- Chips (headline numbers) ---------- */
.report-metrics { gap: 8px; }
.report-metrics > span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid var(--line, #e2e7ee); border-radius: 20px; background: #f7f9fb; }
.chip-count { flex: none; padding: 2px 9px; border-radius: 20px; background: var(--amber-tint, #fdf3e1); color: var(--amber, #a8650c); font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ---------- Overview ---------- */
/* One grid: stat row, then the work queue and "Waiting for you" on the left with quick actions and module progress beside them; the cards stretch to a shared height. */
#overview { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 20px; align-items: stretch; }
#overview > * { margin: 0 !important; min-width: 0; }
#overview > .kpi-grid { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0 !important; }
#overview .content-grid { display: contents; }
#overview .content-grid > .panel { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; }
#overview .content-grid > .right-column { grid-column: 2; grid-row: 2 / span 2; display: grid; grid-template-rows: auto 1fr; gap: 20px; }
#overview > #staff-waiting { grid-column: 1; grid-row: 3; }
#overview > .overview-report { grid-column: 1 / -1; }
#overview .content-grid > .panel > #overview-queue { flex: 1; display: flex; flex-direction: column; }
#overview .queue-note { margin-top: auto; padding: 14px 20px; border-top: 1px solid var(--line-soft, #eef1f5); font-size: 13px; color: var(--muted, #5d6c7e); }
#overview .right-column > .panel { margin: 0; }
#overview .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#overview .quick-actions .secondary { min-height: 44px; font-size: 13.5px; text-align: left; line-height: 1.25; }
#overview .quick-actions .secondary:last-child:nth-child(odd) { grid-column: 1 / -1; }
#overview .source-panel { display: flex; flex-direction: column; }
#overview .source-panel .module-row:first-of-type { margin-top: 12px; }
#overview .source-panel #overview-modules { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }

/* ---------- Workload summary ---------- */
.wl-asof { font-size: 13px; }
.wl-table { white-space: normal; }
.wl-table th, .wl-table td { padding: 10px 14px; }
.wl-table thead th { white-space: nowrap; }
.wl-table th[scope=row] { position: static; background: none; border-bottom: 0; border-top: 1px solid var(--line-soft, #eef1f5); color: var(--ink, #0f1b2d); font-size: 14px; letter-spacing: 0; text-transform: none; }
.report-hub .table-wrap { margin-top: 10px; border: 1px solid var(--line, #e2e7ee); border-radius: 8px; }
.report-hub .wl-filter { margin-top: 14px; max-width: 100%; }
.wl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 28px; }
@media (min-width: 1280px) { .wl-grid { grid-template-columns: minmax(380px, 5fr) minmax(0, 7fr); } }
.wl-grid h4 { margin-top: 16px; }
.wl-issues { display: grid; gap: 8px; margin-top: 10px; }
.wl-issue, .wl-more { margin: 0; }
.wl-more { border: 0; background: none; padding: 0; margin-top: 10px; }
.wl-more[open] { padding-bottom: 0; }
.wl-more > summary { color: var(--green-dark, #086350); }
.wl-issue > summary { justify-content: space-between; }
.wl-issue > summary > span:first-child { flex: 1; min-width: 0; }
.wl-issue > summary::before { order: -1; }
.wl-clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 20px; }
.report-hub .wl-clients li { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line-soft, #eef1f5); font-size: 14px; color: var(--ink, #0f1b2d); font-weight: 600; }
.wl-clients small { font-weight: 400; }
.report-hub .wl-clients button { margin: 0; flex: none; }

/* ---------- Documents ---------- */
.doc-layout { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; }
.doc-upload { position: sticky; top: 76px; }
.doc-tools { display: flex; gap: 12px; margin: 14px 0 12px; }
.doc-tools input { flex: 1; min-width: 0; margin: 0; }
.doc-tools select { flex: none; width: 230px; margin: 0; }
.doc-table { white-space: normal; }
.doc-table .doc-name a { font-weight: 600; overflow-wrap: anywhere; }
.doc-table td { vertical-align: top; }
.doc-table th.num, .doc-table td.num { white-space: nowrap; }
.doc-act { text-align: right; white-space: nowrap; }
.doc-detail td { padding: 10px 16px 14px; background: #fbfcfd; }
.doc-detail td > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.doc-detail span { font-size: 12.5px; color: var(--muted, #5d6c7e); min-width: 0; }
.doc-detail code { display: block; margin-top: 3px; color: var(--ink, #0f1b2d); font-size: 12px; overflow-wrap: anywhere; }
.doc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted, #5d6c7e); }
.doc-vault .table-wrap { border: 1px solid var(--line, #e2e7ee); border-radius: 8px; overflow: auto; }

@media (min-width: 1024px) {
  main { max-width: 1400px; }
}
@media (max-width: 1023px) {
  #overview { display: block; }
  #overview > * + * { margin-top: 20px !important; }
  #overview .content-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .doc-layout { grid-template-columns: 1fr; }
  .doc-upload { position: static; }
  .doc-tools { flex-wrap: wrap; }
  .doc-tools select { width: 100%; }
}
@media (max-width: 600px) {
  #overview .quick-actions { grid-template-columns: 1fr; }
  .doc-detail td > div { flex-wrap: wrap; }
  .wl-clients { grid-template-columns: 1fr; }
}
.doc-table td:nth-child(5) { white-space: nowrap; }

/* ---------- Team and access: one compact row per person, client logins folded ---------- */
#team-members > div[data-member], #team-members .team-clients > div[data-member] { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 10px 0; font-weight: 600; color: var(--ink, #0f1b2d); }
#team-members small { flex-basis: 100%; order: 5; }
#team-members .member-actions { order: 4; margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 4px; }
#team-members .team-detail { flex-basis: 100%; order: 6; }
.team-sub { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; }
.team-clients { margin-top: 14px; }

/* ---------- Operations: health cards side by side ---------- */
@media (min-width: 1280px) {
  #operations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  #operations > * { margin: 0 !important; min-width: 0; }
}

/* ---------- Client portal, desktop ---------- */
@media (min-width: 1400px) {
  body:has(#portal) main { max-width: 1280px; }
  :is(#refund, #home, #advice) *:has(> .rf-point) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .rf-point { margin: 0; padding: 18px; border: 1px solid var(--line, #e2e7ee); border-radius: 12px; }
}
.rf-point > p, .rf-point .rf-figure p { max-width: 70ch; }

/* Client Home: two balanced columns so the page is not one long stack. */
@media (min-width: 1360px) {
  body:has(#portal) main { max-width: 1280px; }
  #home { column-count: 2; column-gap: 20px; }
  #home > * { break-inside: avoid; margin-bottom: 20px; }
  #home > .setup-line, #home > .setup-prompt { column-span: all; }
  #home > .card { margin-bottom: 20px; }
  #home > .two-col { display: block; }
  #home > .two-col > .card { break-inside: avoid; }
  #home > .shortcuts { display: block; }
  #home > .shortcuts > .card { display: block; width: 100%; margin-bottom: 16px; }
}