/* BrandBrine Team Dashboard: components. Values come from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; margin: 0; letter-spacing: .005em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-base); }
p { margin: 0 0 var(--sp-3); }
a { color: var(--c-accent); text-underline-offset: 2px; }
a:hover { color: var(--c-accent-hover); }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
img, svg { max-width: 100%; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--sp-4); top: -60px; z-index: 50; background: var(--c-accent); color: var(--c-on-teal); padding: var(--sp-2) var(--sp-4); font-weight: 600; }
.skip-link:focus { top: var(--sp-4); }
.muted { color: var(--c-text-3); }
.text-2 { color: var(--c-text-2); }
.small { font-size: var(--fs-sm); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pre-line { white-space: pre-line; }
.danger-text { color: var(--c-danger); }
.warn-text { color: var(--c-warning); }
.ok-text { color: var(--c-success); }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--sp-6); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-4); }
.layout-main-side { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
@media (max-width: 1000px) { .layout-main-side { grid-template-columns: minmax(0, 1fr); } }

/* ---------- App shell ---------- */
.shell { min-height: 100vh; display: flex; }
.sidebar {
  width: var(--sidebar-w); flex: none; background: var(--c-bg-deep); border-right: var(--border);
  display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-6) var(--sp-4) var(--sp-5);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; flex-direction: column; gap: var(--sp-1); padding: 0 var(--sp-2); color: var(--c-text); text-decoration: none; }
.brand:hover { color: var(--c-text); }
.brand .logo-svg { width: 150px; height: auto; display: block; }
.brand .logo-img { max-width: 160px; max-height: 44px; object-fit: contain; }
.brand-sub { font-family: var(--font-button); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); }
.nav { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav a {
  display: flex; align-items: center; gap: var(--sp-3); padding: 9px var(--sp-3); color: var(--c-text-2);
  text-decoration: none; border-radius: var(--radius-sm); font-weight: 500; font-size: var(--fs-md);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a:hover { background: var(--c-hover); color: var(--c-text); }
.nav a[aria-current="page"] { background: var(--c-selected); color: var(--c-text); box-shadow: inset 3px 0 0 var(--c-accent); }
.nav a[aria-current="page"] svg { stroke: var(--c-accent); }
.nav svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.nav-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-3); padding: var(--sp-3) var(--sp-3) var(--sp-1); }
.nav .count { margin-left: auto; font-size: var(--fs-xs); background: var(--c-accent); color: var(--c-on-teal); padding: 0 7px; border-radius: var(--radius-pill); font-weight: 600; }
.sidebar-pattern { margin: auto calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5)); min-height: 150px; flex: none; background: url("../img/pattern-teal.svg") left bottom / 64px auto repeat; opacity: .3; -webkit-mask-image: linear-gradient(to top, #000 15%, transparent); mask-image: linear-gradient(to top, #000 15%, transparent); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-8); border-bottom: var(--border); min-height: 72px; }
.topbar .page-title { flex: 1; min-width: 0; }
.topbar .page-title h1 { font-size: var(--fs-xl); }
.topbar .date { font-size: var(--fs-sm); color: var(--c-text-3); }
.sidebar .menu-toggle { display: none; }
.content { padding: var(--sp-6) var(--sp-8) var(--sp-10); width: 100%; max-width: var(--content-max); }

.account { position: relative; }
.account summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2); height: 44px; padding: 0 var(--sp-3) 0 4px; border: var(--border); color: var(--c-text); }
.account summary::-webkit-details-marker { display: none; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--c-accent); color: var(--c-on-teal); font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); }
.account-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; background: var(--c-bg-deep); border: var(--border); padding: var(--sp-2); display: flex; flex-direction: column; }
.account-menu a, .account-menu button { display: block; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3); color: var(--c-text-2); background: none; border: 0; font: inherit; font-size: var(--fs-md); text-decoration: none; cursor: pointer; }
.account-menu a:hover, .account-menu button:hover { background: var(--c-hover); color: var(--c-text); }
.account-menu .who { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-bottom: var(--border); margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-3); }
.account-menu .who strong { display: block; color: var(--c-text); font-size: var(--fs-md); }

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); border-right: 0; border-bottom: var(--border); }
  .sidebar .menu-toggle { display: inline-flex; }
  .sidebar .nav-wrap { flex-basis: 100%; display: none; }
  .no-js .sidebar .nav-wrap, .sidebar.open .nav-wrap { display: block; }
  .sidebar-pattern { display: none; }
  .brand .logo-svg { width: 120px; }
  .topbar { padding: var(--sp-3) var(--sp-4); min-height: 0; flex-wrap: wrap; }
  .content { padding: var(--sp-4) var(--sp-4) var(--sp-8); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--control-h); padding: 0 var(--sp-4); border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font-button); font-weight: 600; font-size: var(--fs-sm); letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap; line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn svg { width: 13px; height: 11px; fill: currentColor; }
.btn-primary { background: var(--c-accent); color: var(--c-on-teal); }
.btn-primary:hover { background: var(--c-accent-hover); color: var(--c-on-teal); }
.btn-outline { background: transparent; color: var(--c-accent); border-color: var(--c-accent); }
.btn-outline:hover { background: var(--c-selected); color: var(--c-accent-soft); }
.btn-ghost { background: transparent; color: var(--c-text-2); border-color: var(--c-line); }
.btn-ghost:hover { color: var(--c-text); border-color: var(--c-text-3); }
.btn-danger { background: transparent; color: var(--c-danger); border-color: var(--c-danger-strong); }
.btn-danger:hover { background: rgba(232, 112, 95, .12); color: var(--c-danger); }
.btn-sm { min-height: 2rem; padding: 0 var(--sp-3); font-size: var(--fs-xs); }
.btn-link { background: none; border: 0; padding: 0; color: var(--c-accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: var(--border); color: var(--c-text); cursor: pointer; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- Panels ---------- */
.panel { border: var(--border); background: var(--c-surface); min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: var(--border); }
.panel-head h2 { font-size: var(--fs-lg); }
.panel-head .sub { font-size: var(--fs-sm); color: var(--c-text-3); }
.panel-body { padding: var(--sp-5); }
.panel-foot { padding: var(--sp-3) var(--sp-5); border-top: var(--border); font-size: var(--fs-sm); }
.panel-accent { border-color: var(--c-accent); }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.page-head .lead { color: var(--c-text-2); margin: var(--sp-1) 0 0; max-width: 70ch; }
.breadcrumb { font-size: var(--fs-sm); color: var(--c-text-3); margin-bottom: var(--sp-2); }
.breadcrumb a { color: var(--c-text-3); }

/* Teal summary band (brand section style) */
.band { position: relative; overflow: hidden; background: var(--c-accent); color: var(--c-on-teal); margin-bottom: var(--sp-6); }
.band-pattern { position: absolute; right: 0; bottom: 0; width: 420px; max-width: 60%; height: 100%; background: url("../img/corner-right-white.svg") right bottom / auto 150% no-repeat; opacity: .4; pointer-events: none; }
.band-inner { position: relative; padding: var(--sp-5) var(--sp-6); }
.band h2 { font-weight: 700; margin-bottom: var(--sp-3); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.stat { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-5) var(--sp-2) 0; margin-right: var(--sp-5); border-right: 1px solid rgba(13, 27, 42, .22); color: var(--c-on-teal); text-decoration: none; }
.stat:last-child { border-right: 0; }
.stat:hover { color: var(--c-on-teal); }
.stat:hover .stat-value { text-decoration: underline; text-decoration-thickness: 2px; }
.stat-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.stat-value { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-value.small-value { font-size: 1.35rem; }
.stat-note { font-size: var(--fs-sm); font-weight: 500; }
@media (max-width: 600px) { .stat { border-right: 0; border-bottom: 1px solid rgba(13, 27, 42, .22); margin-right: 0; padding: var(--sp-3) 0; } }

/* Outline stat cards (navy) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.kpi { border: var(--border); padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi .stat-value { color: var(--c-text); font-size: 1.5rem; }
.kpi .stat-label { color: var(--c-accent); }
.kpi .stat-note { color: var(--c-text-3); font-weight: 400; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.table th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); padding: var(--sp-3) var(--sp-5); border-bottom: var(--border); white-space: nowrap; }
.table th a { color: inherit; text-decoration: none; }
.table th a:hover { text-decoration: underline; }
.table th.num { text-align: right; }
.table td { padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--c-line-soft); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--c-hover); }
.table tfoot td { border-top: var(--border); font-weight: 600; padding: var(--sp-3) var(--sp-5); }
.table .title-cell a { color: var(--c-text); font-weight: 500; text-decoration: none; }
.table .title-cell a:hover { color: var(--c-accent); text-decoration: underline; }
.table .sub { display: block; font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 2px; }
.table-compact td, .table-compact th { padding: var(--sp-2) var(--sp-4); }
@media (max-width: 760px) {
  .table--stack thead { display: none; }
  .table--stack tr { display: block; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line-soft); }
  .table--stack td { display: block; padding: var(--sp-1) 0; border: 0; text-align: right; overflow: hidden; }
  .table--stack td::before { content: attr(data-label); float: left; margin-right: var(--sp-4); color: var(--c-text-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; text-align: left; line-height: 2; }
  .table--stack td:empty { display: none; }
  .table--stack td.title-cell { display: block; text-align: left; }
  .table--stack td.title-cell::before { content: none; }
  .table--stack td.num { text-align: right; }
}

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; font-size: var(--fs-xs); font-weight: 600; border: 1px solid currentColor; white-space: nowrap; line-height: 1.5; }
.badge--neutral { color: var(--c-text-2); }
.badge--muted { color: var(--c-text-3); border-color: var(--c-line); }
.badge--teal { color: var(--c-accent-soft); }
.badge--green { color: var(--c-support-soft); }
.badge--amber { color: var(--c-warning); }
.badge--coral { color: var(--c-danger); }
.badge--solid { background: var(--c-accent); color: var(--c-on-teal); border-color: var(--c-accent); }
.dot { width: 8px; height: 8px; transform: rotate(45deg); background: currentColor; display: inline-block; flex: none; }
.overdue { color: var(--c-danger); font-weight: 600; }
.flag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--c-support-soft); }

/* ---------- Forms ---------- */
.form { max-width: 760px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--sp-4) var(--sp-5); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
label, .label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-2); }
.req { color: var(--c-accent); }
.hint { font-size: var(--fs-xs); color: var(--c-text-3); margin: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"],
input[type="date"], input[type="month"], input[type="tel"], input[type="number"], input[type="file"], select, textarea {
  width: 100%; min-height: var(--control-h); padding: var(--sp-2) var(--sp-3);
  background: var(--c-bg-deep); color: var(--c-text); border: var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-md);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-text-3) 50%), linear-gradient(135deg, var(--c-text-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--c-danger-strong); }
input[type="date"], input[type="month"] { color-scheme: dark; }
input::placeholder, textarea::placeholder { color: #7D8F97; }
.field-error { color: var(--c-danger); font-size: var(--fs-sm); margin: 0; }
.check { display: flex; align-items: flex-start; gap: var(--sp-2); font-weight: 500; color: var(--c-text); font-size: var(--fs-md); }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--bb-teal); flex: none; }
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--sp-2) var(--sp-4); padding: var(--sp-3); border: var(--border); max-height: 280px; overflow-y: auto; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-6); }
fieldset { border: var(--border); padding: var(--sp-4); margin: 0; min-width: 0; }
legend { padding: 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-2); }
.input-prefix { display: flex; align-items: stretch; }
.input-prefix span { display: inline-flex; align-items: center; padding: 0 var(--sp-3); border: var(--border); border-right: 0; background: var(--c-bg-deep); color: var(--c-text-3); }

/* Filter bar */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; padding: var(--sp-4) var(--sp-5); border-bottom: var(--border); }
.filters .field { flex: 1 1 150px; max-width: 230px; }
.filters .field-wide { flex: 2 1 220px; max-width: 320px; }
.filters label { font-size: var(--fs-xs); }
.filters input, .filters select { min-height: 2.375rem; }

/* ---------- Alerts / flash ---------- */
.flash-stack { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.alert { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border: 1px solid; font-size: var(--fs-md); }
.alert--success { border-color: var(--c-accent); color: var(--c-text); background: rgba(62, 179, 148, .10); }
.alert--error { border-color: var(--c-danger-strong); color: var(--c-text); background: rgba(232, 112, 95, .10); }
.alert--info { border-color: var(--c-line); color: var(--c-text-2); background: var(--c-bg-deep); }
.alert--warning { border-color: var(--c-warning); color: var(--c-text); background: rgba(242, 193, 78, .08); }
.alert .dot { margin-top: 7px; }
.alert--success .dot { color: var(--c-accent); }
.alert--error .dot { color: var(--c-danger); }
.alert--warning .dot { color: var(--c-warning); }

/* ---------- Empty state ---------- */
.empty { padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--c-text-3); }
.empty svg { width: 54px; height: 54px; fill: none; stroke: var(--c-accent); stroke-opacity: .6; stroke-width: 1.2; margin-bottom: var(--sp-3); }
.empty p { margin: 0 auto var(--sp-3); max-width: 46ch; }

/* ---------- Lists, timeline, meta ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--c-line-soft); }
.list li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .when { flex: none; font-size: var(--fs-xs); color: var(--c-text-3); white-space: nowrap; }
.list .dot { margin-top: 8px; color: var(--c-accent); }
.meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-5); margin: 0; font-size: var(--fs-md); }
.meta dt { color: var(--c-text-3); }
.meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 var(--sp-5) var(--sp-6); border-left: 1px solid var(--c-line); margin-left: 6px; }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; transform: rotate(45deg); background: var(--c-line); }
.timeline li.t-status::before { background: var(--c-accent); }
.timeline .t-head { font-size: var(--fs-sm); color: var(--c-text-3); }
.timeline .t-head strong { color: var(--c-text); font-weight: 600; }
.timeline .t-body { margin-top: var(--sp-1); white-space: pre-line; overflow-wrap: anywhere; }
.links { list-style: none; margin: 0; padding: 0; }
.links li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line-soft); overflow-wrap: anywhere; }
.links li:last-child { border-bottom: 0; }
.prose { white-space: pre-line; overflow-wrap: anywhere; color: var(--c-text-2); }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-top: var(--border); font-size: var(--fs-sm); color: var(--c-text-3); }
.pagination .pages { display: flex; gap: var(--sp-1); }
.pagination a, .pagination span.cur { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--sp-2); border: var(--border); text-decoration: none; color: var(--c-text-2); }
.pagination span.cur { background: var(--c-accent); color: var(--c-on-teal); border-color: var(--c-accent); font-weight: 600; }

/* Pending work groups */
.client-group { border: var(--border); }
.client-group + .client-group { margin-top: var(--sp-4); }
.client-group > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-5); }
.client-group > summary::-webkit-details-marker { display: none; }
.client-group > summary:hover { background: var(--c-hover); }
.client-group[open] > summary { border-bottom: var(--border); }
.client-group .cg-name { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 600; }
.client-group .cg-num { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.client-group .cg-label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-3); }
@media (max-width: 760px) { .client-group > summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .client-group .cg-first { grid-column: 1 / -1; } }

/* Allocation */
.alloc-line { border-bottom: var(--border); }
.alloc-line:last-child { border-bottom: 0; }
.alloc-head { display: grid; grid-template-columns: minmax(0, 2fr) 90px minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-5); }
.alloc-head .name { font-weight: 600; }
.alloc-shares { padding: 0 var(--sp-5) var(--sp-4); }
.alloc-share { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0 var(--sp-1) var(--sp-4); border-left: 2px solid var(--c-line); font-size: var(--fs-md); }
.share-editor { padding: var(--sp-4) var(--sp-5); background: var(--c-bg-deep); border-top: var(--border); }
.share-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: var(--sp-3); margin-bottom: var(--sp-2); }
@media (max-width: 760px) { .alloc-head { grid-template-columns: 1fr 1fr; } }

/* Auth pages: navy brand panel on the left, teal sign-in panel on the right */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-side { position: relative; overflow: hidden; background: var(--bb-navy); color: var(--c-text); padding: var(--sp-10); display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-8); }
.auth-side .logo-svg { position: relative; z-index: 1; width: 190px; color: var(--bb-white); }
.auth-tagline { position: relative; z-index: 1; margin-bottom: 40vh; }
.auth-tagline h2 { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.12; color: var(--bb-white); }
.auth-tagline h2 > * { white-space: nowrap; }
.auth-tagline h2 span { display: block; }
.auth-tagline h2 .t2 { color: var(--c-accent); }
.auth-tagline p { margin: var(--sp-4) 0 0; font-family: var(--font-button); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--c-text-3); }
.auth-corner { position: absolute; left: 0; right: 0; bottom: 0; height: 36%; background: url("../img/corner-left-teal.svg") left bottom / auto 100% no-repeat; opacity: .55; pointer-events: none; }
.auth-main { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-5); background: var(--c-accent); color: var(--bb-navy); }
.auth-deco { position: absolute; right: -60px; top: -40px; width: 300px; height: 320px; background: url("../img/collaboration-navy.svg") center / contain no-repeat; opacity: .16; pointer-events: none; }
.auth-card { position: relative; z-index: 1; width: 100%; max-width: 420px; }
.auth-card h1 { margin-bottom: var(--sp-2); color: var(--bb-navy); }
.auth-card .lead { color: rgba(13, 27, 42, .82); margin-bottom: var(--sp-6); }
.auth-card .btn { width: 100%; }
.auth-card label, .auth-card .label { color: var(--bb-navy); }
.auth-card .req { color: var(--bb-navy); }
.auth-card .hint { color: rgba(13, 27, 42, .78); }
.auth-card a { color: var(--bb-navy); font-weight: 600; }
.auth-card input[type="text"], .auth-card input[type="email"], .auth-card input[type="password"] { background: var(--bb-white); color: var(--bb-navy); border-color: rgba(13, 27, 42, .28); }
.auth-card input:focus { border-color: var(--bb-navy); box-shadow: 0 0 0 1px var(--bb-navy); }
.auth-card input:-webkit-autofill { -webkit-text-fill-color: var(--bb-navy); box-shadow: 0 0 0 40px var(--bb-white) inset; }
.auth-card .btn-primary { background: var(--bb-navy); color: var(--bb-white); }
.auth-card .btn-primary:hover { background: var(--bb-slate); color: var(--bb-white); }
.auth-card .btn-outline { color: var(--bb-navy); border-color: var(--bb-navy); }
.auth-card .btn-outline:hover { background: rgba(13, 27, 42, .08); color: var(--bb-navy); }
.auth-card .alert { background: var(--bb-navy); color: var(--bb-white); border-color: var(--bb-navy); }
.auth-card .alert--error { border-left: 4px solid var(--c-danger-strong); }
.auth-card .alert code { color: var(--c-accent-soft); }
.auth-card .field-error { color: #7A1F12; font-weight: 600; }
.auth-card input[aria-invalid="true"] { border-color: #A3321F; }
.auth-card :focus-visible { outline-color: var(--bb-navy); }
@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-side { padding: var(--sp-6) var(--sp-5) var(--sp-8); gap: var(--sp-6); }
  .auth-side .logo-svg { width: 150px; }
  .auth-tagline { margin-bottom: 0; }
  .auth-tagline h2 { font-size: 1.7rem; }
  .auth-tagline h2 > * { white-space: normal; }
  .auth-corner { height: 100%; opacity: .25; background-position: right bottom; }
  .auth-deco { width: 200px; height: 210px; }
}

.copy-box { display: flex; gap: var(--sp-2); }
.copy-box input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-sm); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .sidebar, .topbar, .filters, .form-actions, .btn { display: none !important; } body { background: #fff; color: #000; } }

.inline-form { display: inline; }
.actions-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; }
.actions-bar details { flex-basis: 100%; }
.actions-bar details > summary { cursor: pointer; display: inline-flex; }
.note-form { margin-top: var(--sp-3); display: grid; gap: var(--sp-3); max-width: 560px; }
.section-gap { margin-top: var(--sp-6); }
.code-box { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--c-bg-deep); border: var(--border); padding: var(--sp-3) var(--sp-4); overflow-wrap: anywhere; }
.total-line { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 700; }
.report-item { border: var(--border); padding: var(--sp-4); }
.report-item + .report-item { margin-top: var(--sp-3); }

.list .sub { display: block; }
.table--stack td > .sub { margin-top: 0; }
@media (max-width: 760px) { .table--stack .title-cell .sub { display: block; } }
@media (max-width: 600px) { .topbar .date { display: none; } }

/* =====================================================================
   v1.1: avatars, notifications, feed, discussions, chat, team, charts
   ===================================================================== */
.sub { display: block; font-size: var(--fs-sm); color: var(--c-text-3); font-weight: 400; }
.strong { font-weight: 700; color: var(--c-text); }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: var(--fs-xs); font-weight: 700; background: var(--c-accent); color: var(--c-on-teal); border-radius: var(--radius-pill); }
.count[hidden], [data-badge][hidden] { display: none; }
.badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.field-error[hidden] { display: none; }

/* Avatars: photo or initials */
.avatar { flex: none; border-radius: 50%; overflow: hidden; object-fit: cover; line-height: 1; text-transform: uppercase; }
img.avatar { background: var(--c-bg-deep); }
.avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.avatar--md { width: 40px; height: 40px; font-size: var(--fs-sm); }
.avatar--lg { width: 72px; height: 72px; font-size: 1.4rem; }
.avatar--icon { background: var(--c-selected); color: var(--c-accent); }
.avatar--icon svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.account summary .avatar { width: 34px; height: 34px; }
.avatar-edit { display: flex; gap: var(--sp-5); align-items: flex-start; }
.avatar-edit .avatar--lg { width: 96px; height: 96px; font-size: 1.8rem; }
.avatar-edit form { flex: 1; min-width: 0; }
.avatar-edit input[type="file"] { width: 100%; padding: var(--sp-2); }
@media (max-width: 520px) { .avatar-edit { flex-direction: column; } }

/* Bell in the top bar */
.topbar .bell { position: relative; margin-left: auto; }
.topbar .bell + .account { margin-left: 0; }
.bell svg { width: 20px; height: 20px; }
.bell[aria-current="page"] { border-color: var(--c-accent); color: var(--c-accent); }
.bell-count { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--c-warning); color: var(--bb-navy); font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2px var(--c-bg); }

/* Tabs and segmented links */
.tabs, .seg { display: flex; gap: 2px; flex-wrap: wrap; }
.tabs a, .seg a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: 0 var(--sp-4); border: var(--border); color: var(--c-text-2); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
.tabs a:hover, .seg a:hover { background: var(--c-hover); color: var(--c-text); }
.tabs a[aria-current], .seg a[aria-current] { background: var(--c-selected); color: var(--c-text); border-color: var(--c-accent); }

/* Notifications inbox */
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list li + li { border-top: 1px solid var(--c-line-soft); }
.notif-list a { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4) var(--sp-5); color: var(--c-text-2); text-decoration: none; }
.notif-list a:hover { background: var(--c-hover); }
.notif-list .is-unread a { background: var(--c-selected); color: var(--c-text); }
.notif-list .is-unread a:hover { background: rgba(62, 179, 148, .17); }
.notif-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-text strong { color: var(--c-text); font-weight: 600; overflow-wrap: anywhere; }
.notif-list li:not(.is-unread) .notif-text strong { font-weight: 500; color: var(--c-text-2); }
.notif-type { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent); }
.notif-type svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.notif-body { font-size: var(--fs-sm); color: var(--c-text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.notif-list .when { flex: none; font-size: var(--fs-xs); color: var(--c-text-3); white-space: nowrap; }
.unread-dot { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--c-warning); }
@media (max-width: 600px) { .notif-list a { flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); } .notif-list .when { order: 3; flex-basis: 100%; padding-left: 52px; } }

/* Announcements on Overview */
.announce { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-accent); border-left-width: 4px; background: var(--c-selected); color: var(--c-text); text-decoration: none; }
.announce:hover { background: rgba(62, 179, 148, .18); color: var(--c-text); }
.announce-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--c-accent); stroke-width: 1.8; }
.announce-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.announce-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
.announce-body { font-size: var(--fs-sm); color: var(--c-text-2); }
.announce-go { color: var(--c-accent); }

/* Conversation text */
.post-body, .msg-body, .t-rich { white-space: normal; overflow-wrap: anywhere; line-height: 1.55; }
.post-body a, .msg-body a, .t-rich a { word-break: break-all; }
.mention { color: var(--c-accent-soft); font-weight: 600; background: rgba(62, 179, 148, .12); padding: 0 3px; border-radius: var(--radius-sm); }

/* Team feed */
.feed { max-width: 760px; }
.feed > * + * { margin-top: var(--sp-5); }
.feed-lead { max-width: 760px; }
.composer-panel .panel-body { display: grid; gap: var(--sp-4); }
.post { position: relative; }
.post--announcement { border-color: var(--c-accent); box-shadow: inset 4px 0 0 var(--c-accent); }
.post-flags { display: flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) 0; }
.post-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) 0; }
.post-head strong { display: block; color: var(--c-text); }
.post-head a.sub { text-decoration: none; }
.post-head a.sub:hover { text-decoration: underline; }
.post-menu { position: relative; }
.post-menu > summary { list-style: none; }
.post-menu > summary::-webkit-details-marker { display: none; }
.post-menu .account-menu form { margin: 0; }
.post-content { padding: var(--sp-4) var(--sp-5); }
.post-title { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.post-content .post-body { font-size: var(--fs-base); color: var(--c-text); }
.post-replies { border-top: var(--border); padding: var(--sp-3) var(--sp-5) var(--sp-4); background: var(--c-bg-deep); display: grid; gap: var(--sp-3); }
.reply-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.reply { display: flex; gap: var(--sp-3); align-items: flex-start; }
.reply-main { flex: 1; min-width: 0; }
.post-meta { font-size: var(--fs-sm); color: var(--c-text-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.post-meta strong { color: var(--c-text); font-weight: 600; }
.post-meta .inline-form { margin-left: auto; }
.reply .post-body { color: var(--c-text-2); font-size: var(--fs-md); }
.reply:target, .t-comment:target, .msg.is-target .msg-bubble, .msg:target .msg-bubble { outline: 1px solid var(--c-warning); outline-offset: 4px; }
.reply-inline { display: flex; align-items: flex-end; gap: var(--sp-3); }
.reply-inline .mention-wrap, .reply-inline > textarea { flex: 1; min-width: 0; }
.reply-inline textarea { min-height: 40px; resize: none; padding-top: 9px; }
.replies-title { font-size: var(--fs-md); color: var(--c-text-2); }
.reply-form { display: grid; gap: var(--sp-3); }
.composer-details > summary { list-style: none; cursor: pointer; }
.composer-details > summary::-webkit-details-marker { display: none; }
.composer-details[open] > summary { margin-bottom: var(--sp-2); }
details.composer-details:not(.panel-foot) > summary { display: inline-flex; color: var(--c-accent); font-weight: 600; font-size: var(--fs-sm); padding: var(--sp-3) var(--sp-5); }

/* Project discussions list */
.thread-list { list-style: none; margin: 0; padding: 0; }
.thread-list li { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-5); }
.thread-list li + li { border-top: 1px solid var(--c-line-soft); }
.thread-title { font-weight: 600; color: var(--c-text); text-decoration: none; }
.thread-title:hover { color: var(--c-accent); text-decoration: underline; }

/* Task comments with avatars */
.timeline li.t-comment { padding-left: var(--sp-6); }
.timeline .t-comment .t-head { display: flex; align-items: center; gap: var(--sp-2); }

/* @mention suggestions */
.mention-wrap { position: relative; }
.mention-wrap textarea { width: 100%; }
.mention-list { position: absolute; z-index: 40; left: 0; right: auto; top: 100%; min-width: 220px; max-width: 100%; margin: 4px 0 0; padding: var(--sp-1); list-style: none; background: var(--c-bg-deep); border: 1px solid var(--c-accent); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.chat-compose .mention-list { top: auto; bottom: 100%; margin: 0 0 4px; }
.mention-list li { padding: var(--sp-2) var(--sp-3); cursor: pointer; color: var(--c-text-2); font-size: var(--fs-md); }
.mention-list li[aria-selected="true"], .mention-list li:hover { background: var(--c-selected); color: var(--c-text); }

/* Chat */
.chat { display: grid; grid-template-columns: 280px minmax(0, 1fr); border: var(--border); height: calc(100vh - 72px - var(--sp-6) - var(--sp-10)); min-height: 480px; }
.chat-list { border-right: var(--border); overflow-y: auto; padding: var(--sp-2); background: var(--c-bg-deep); }
.chat-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); color: var(--c-text-2); text-decoration: none; border-radius: var(--radius-sm); }
.chat-item:hover { background: var(--c-hover); color: var(--c-text); }
.chat-item[aria-current="page"] { background: var(--c-selected); color: var(--c-text); box-shadow: inset 3px 0 0 var(--c-accent); }
.chat-item-text { flex: 1; min-width: 0; }
.chat-item-text strong { display: block; color: var(--c-text); font-weight: 600; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-text .sub { font-size: var(--fs-xs); }
.chat-list .nav-label { margin-top: var(--sp-3); }
.chat-list-empty { padding: var(--sp-3); }
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: var(--border); }
.chat-head h2 { font-size: var(--fs-base); }
.chat-head .sub { margin: 0; font-size: var(--fs-xs); }
.chat-back { display: none; }
.chat-log { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.chat-log:focus-visible { outline-offset: -2px; }
.chat-older { align-self: center; font-size: var(--fs-sm); }
.chat-empty { margin: auto; text-align: center; color: var(--c-text-3); }
.chat-empty svg { width: 46px; height: 46px; fill: none; stroke: var(--c-accent); stroke-width: 1.4; opacity: .7; }
.chat-day { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-text-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.msg { display: flex; gap: var(--sp-2); align-items: flex-end; max-width: 78%; }
.msg-bubble { position: relative; min-width: 0; padding: var(--sp-2) var(--sp-3); background: var(--c-bg-deep); border: var(--border); border-radius: 10px 10px 10px 2px; }
.msg--mine { align-self: flex-end; flex-direction: row-reverse; }
.msg--mine .msg-bubble { background: rgba(62, 179, 148, .16); border-color: rgba(62, 179, 148, .45); border-radius: 10px 10px 2px 10px; }
.msg-meta { font-size: var(--fs-xs); color: var(--c-text-3); margin-bottom: 2px; }
.msg-meta strong { color: var(--c-text-2); font-weight: 600; }
.msg-body { color: var(--c-text); font-size: var(--fs-md); }
.msg-removed { font-style: italic; color: var(--c-text-3); }
.msg-delete { display: none; margin-top: 2px; }
.msg:hover .msg-delete, .msg:focus-within .msg-delete { display: block; }
.chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: end; padding: var(--sp-3) var(--sp-5); border-top: var(--border); }
.chat-compose textarea { width: 100%; min-height: 44px; max-height: 320px; resize: none; }
.chat-compose .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.chat-compose .field-error { grid-column: 1 / -1; margin: 0; }
.chat-closed { padding: var(--sp-4) var(--sp-5); border-top: var(--border); color: var(--c-text-3); margin: 0; }
@media (hover: none) { .msg-delete { display: block; } }
@media (max-width: 900px) {
  .chat { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .chat-list { border-right: 0; border-bottom: var(--border); max-height: 220px; }
  .chat-main { height: calc(100vh - 140px); min-height: 420px; }
  .chat-head, .chat-log, .chat-compose { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .msg { max-width: 92%; }
  .chat-compose .btn span { display: none; }
}

/* Team page */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--sp-5); }
.team-card { display: flex; flex-direction: column; }
.team-card.is-inactive { opacity: .7; }
.team-card-top { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-5); border-bottom: var(--border); background: var(--c-bg-deep) url("../img/corner-right-teal.svg") right bottom / auto 70% no-repeat; }
.team-card-name { min-width: 0; }
.team-card-name h2 { font-size: var(--fs-lg); overflow-wrap: anywhere; }
.team-title { margin: 2px 0 var(--sp-2); color: var(--c-accent); font-weight: 600; font-size: var(--fs-md); }
.team-card-body { flex: 1; padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-2); align-content: start; }
.team-card-body .label { margin-top: var(--sp-2); text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-xs); color: var(--c-text-3); }
.team-card-body .label:first-child { margin-top: 0; }
.team-card-body .prose { margin: 0; font-size: var(--fs-md); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); font-size: var(--fs-md); }
.contact-list li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--sp-2); }
.contact-list a, .contact-list span { overflow-wrap: anywhere; }
.contact-label { color: var(--c-text-3); }
.team-card-foot { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-3) var(--sp-5); border-top: var(--border); }
.team-card-foot .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Monthly earnings */
.filters--bar { border: var(--border); margin-bottom: var(--sp-2); }
.presets { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; color: var(--c-text-3); margin-bottom: var(--sp-5); }
.table-wrap--wide { overflow-x: auto; }
.table--pivot { min-width: 100%; }
.table--pivot th, .table--pivot td { white-space: nowrap; }
.table--pivot tbody th, .table--pivot tfoot th { text-align: left; position: sticky; left: 0; background: var(--c-surface); z-index: 1; }
.table--pivot tfoot th, .table--pivot tfoot td, .table--stack tfoot td { border-top: 1px solid var(--c-line); font-weight: 600; color: var(--c-text); }
.panel > .small.muted { padding: var(--sp-3) var(--sp-5); margin: 0; }

/* Charts (colours validated for the navy surface) */
.chart { position: relative; margin: 0; padding: var(--sp-4) var(--sp-5) var(--sp-3); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: center; font-size: var(--fs-sm); color: var(--c-text-2); margin-bottom: var(--sp-3); }
.chart-key { display: inline-flex; align-items: center; gap: var(--sp-2); }
.chart-swatch { width: 12px; height: 12px; border-radius: 3px; }
.chart-unit { margin-left: auto; color: var(--c-text-3); font-size: var(--fs-xs); }
.chart-scroll { overflow-x: auto; }
.chart svg { display: block; width: 100%; min-width: 560px; height: auto; }
.chart-grid line { stroke: var(--c-line); stroke-width: 1; }
.chart-grid line.base { stroke: var(--c-text-3); stroke-opacity: .6; }
.chart text { fill: var(--c-text-3); font-size: 13px; font-family: var(--font-body); }
.chart .chart-year { fill: var(--c-text-3); opacity: .7; font-size: 11px; }
.chart-hit { fill: transparent; }
.chart-group { cursor: pointer; outline: none; }
.chart-group.is-active .chart-hit, .chart-group:focus-visible .chart-hit { fill: rgba(255, 255, 255, .05); }
.chart-group:focus-visible .chart-hit { stroke: var(--c-focus); stroke-width: 1.5; }
.chart-group.is-active .chart-x { fill: var(--c-text); }
.s-approved { fill: #2FA484; background: #2FA484; }
.s-paid { fill: #9A7AD6; background: #9A7AD6; }
.chart-tip { position: absolute; z-index: 5; pointer-events: none; display: grid; gap: 2px; min-width: 160px; padding: var(--sp-2) var(--sp-3); background: var(--c-bg-deep); border: 1px solid var(--c-line); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); font-size: var(--fs-sm); color: var(--c-text-2); }
.chart-tip strong { color: var(--c-text); }
.chart-tip[hidden] { display: none; }
@media (forced-colors: active) { .s-approved { fill: CanvasText; } .s-paid { fill: GrayText; } }

/* Error and "update in progress" pages on the teal sign-in panel */
.auth-card .panel { background: var(--bb-white); color: var(--bb-navy); border-color: rgba(13, 27, 42, .2); }
.auth-card .panel h1, .auth-card .panel h2 { color: var(--bb-navy); }
.auth-card .empty, .auth-card .muted, .auth-card .text-2, .auth-card .prose { color: rgba(13, 27, 42, .8); }
.auth-card .empty svg { stroke: var(--bb-navy); }
.auth-card code { background: rgba(13, 27, 42, .08); color: var(--bb-navy); padding: 1px 4px; }
.grow { flex: 1; min-width: 0; }
.composer-panel .post-head { padding: 0; }
.table--pivot tbody th { text-transform: none; letter-spacing: 0; font-size: var(--fs-md); font-weight: 600; color: var(--c-text); }
.table--pivot tfoot th { text-transform: none; letter-spacing: 0; font-size: var(--fs-md); color: var(--c-text); }
.timeline .t-body.t-rich { white-space: normal; }