/* IB app styles. The IB app wears the Echelon IB Hub's look (theechelonhub.trade, dark mode):
   ib_tokens.css re-points the shared tokens at the hub palette, the "Hub skin" section below
   restyles the shared components (buttons, fields, chips, tables, figures) the way the hub draws
   them, and the rest of the file is IB page layout. The member app is unaffected: none of these
   files load there. Deviations from the member look are recorded in DESIGN.md (D-13, section 7). */

/* ======================= Hub skin ======================= */

body.app { font-size: 0.875rem; line-height: 1.55; letter-spacing: 0; }

/* Figures: Montserrat with tabular numerals (the hub has no mono face). */
.data, .tbl .num { font-variant-numeric: tabular-nums; }

/* --- Top bar: a floating, rounded navy bar with a gold edge --- */

.hub-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding: var(--space-2) var(--space-2) 0;
}
@media (min-width: 40rem) { .hub-nav { padding: var(--space-3) var(--space-3) 0; } }

.hub-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: var(--content);
  height: 3.5rem;
  margin-inline: auto;
  padding: 0 var(--space-3);
  background: linear-gradient(to bottom, var(--navy-top), var(--navy));
  border: 1.5px solid var(--gold-line);
  border-radius: var(--radius-bar);
  box-shadow: 0 10px 15px -3px #0000004d, 0 4px 6px -4px #0000004d;
}
@media (min-width: 40rem) { .hub-bar { height: 3.625rem; padding: 0 var(--space-4); } }

.hub-brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.625rem;
  margin-right: var(--space-2);
  color: #fff;
  text-decoration: none;
}
.hub-brand img { width: 2rem; height: 2rem; object-fit: contain; filter: drop-shadow(0 2px 8px #2f5bff73); }
.hub-brand-text { display: none; flex-direction: column; line-height: 1; }
@media (min-width: 40rem) { .hub-brand-text { display: flex; } }
.hub-brand-name { font-size: 0.84375rem; font-weight: 700; letter-spacing: 0.3em; }
.hub-brand-tag { margin-top: 3px; color: var(--gold-soft); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.hub-brand:hover { color: #fff; }

.hub-links { display: none; }
.hub-links ul { display: flex; align-items: center; gap: 2px; }
@media (min-width: 64rem) { .hub-links { display: block; } }

.hub-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.375rem 0.625rem;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--nav-foreground);
  font: 600 0.78125rem/1.5 var(--font-sans);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.hub-link:hover { color: var(--nav-foreground-hover); }
.hub-link[aria-current="page"], .hub-link.is-current { color: #fff; }
.hub-link[aria-current="page"]::after, .hub-link.is-current::after {
  content: "";
  position: absolute;
  inset-inline: 0.625rem;
  bottom: -0.25rem;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--gold);
}
.hub-link .icon { width: 1rem; height: 1rem; transition: transform var(--dur-fast) var(--ease-out-quart); }
.hub-pop-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* "More" lists the pages not in the bar; on narrow screens it is the whole menu ("Menu"). */
.hub-more-wide { display: none; }
@media (min-width: 64rem) {
  .hub-more-wide { display: inline; }
  .hub-more-narrow { display: none; }
  .hub-menu-bar-item { display: none; }
}
.hub-more .hub-pop-btn { min-height: 2.75rem; padding-inline: var(--space-3); border: 1px solid var(--hair-strong); background: var(--fill-quiet); color: var(--nav-foreground-hover); }
@media (min-width: 64rem) { .hub-more .hub-pop-btn { min-height: 0; padding-inline: 0.625rem; border-color: transparent; background: none; color: var(--nav-foreground); } }
.hub-more .hub-pop-btn:hover { background: var(--fill-hover); color: var(--nav-foreground-hover); }

.hub-pop { position: relative; }

.hub-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: var(--z-header);
  min-width: 13rem;
  padding: var(--space-1);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 6px -1px #0000001a, 0 12px 32px -8px #00000080;
  animation: hub-menu-in var(--dur-fast) var(--ease-out-quart);
}
.hub-menu--end { left: auto; right: 0; min-width: 15rem; }
@keyframes hub-menu-in { from { opacity: 0; transform: translateY(-4px); } }
.hub-menu ul { display: grid; gap: 1px; }
.hub-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--foreground);
  font-size: var(--text-sm);
  text-decoration: none;
}
.hub-menu-item:hover { background: var(--accent); color: var(--foreground); }
.hub-menu-item[aria-current="page"] { color: var(--gold-soft); font-weight: 600; }
.hub-menu-item .icon { width: 1rem; height: 1rem; }
.hub-menu-item--bad, .hub-menu-item--bad:hover { color: var(--bear); }

.hub-account { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-3); margin-bottom: var(--space-1); border-bottom: 1px solid var(--border); }
.hub-account dt { color: var(--muted-foreground); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; }
.hub-account dd { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.hub-right { display: flex; align-items: center; gap: var(--space-2); min-width: 0; margin-left: auto; }
.hub-role {
  display: none;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--gold-edge);
  border-radius: var(--radius-pill);
  background: var(--fill-hover);
  color: var(--gold);
  font-size: 0.65625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 48rem) { .hub-role { display: inline-flex; } }

.hub-avatar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.hub-avatar span {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--card);
  border: 1px solid #ffffff26;
  border-radius: 50%;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: border-color var(--dur-fast) ease;
}
.hub-avatar:hover span, .hub-avatar[aria-expanded="true"] span { border-color: var(--gold-line); }
.hub-avatar:focus-visible { outline-offset: 0; border-radius: 50%; }

.demo-banner { padding: var(--space-2) var(--space-4); text-align: center; background: var(--secondary); border-bottom: 1px solid var(--gold-line); }

/* --- Content column and page header --- */

.hub-main {
  width: 100%;
  max-width: var(--content);
  min-height: 60vh;
  margin-inline: auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
  outline: none;
}
@media (min-width: 48rem) { .hub-main { padding-inline: var(--space-5); } }

.app-head { align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-5); padding-bottom: 0; border-bottom: 0; }
.hub-eyebrow, .k-kicker {
  margin-bottom: 0.125rem;
  color: var(--primary-link);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hub-eyebrow:empty { display: none; }
.app-title { font-size: 1.5rem; font-weight: 800; line-height: 1.33; letter-spacing: -0.025em; }
.app-sub { margin-top: var(--space-1); font-size: var(--text-sm); line-height: 1.45; }

/* Section heads: 18px bold, as the hub's "Funding & account health". */
.sec-title { font-size: 1.125rem; font-weight: 700; line-height: 1.55; letter-spacing: 0; }
.sec-desc { margin-top: var(--space-1); }
.k { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; }

/* --- Footer: brand line and links, then the mandatory risk warning --- */

/* Same column as .hub-main, so the rule lines up with the content above it. */
.hub-foot { max-width: var(--content); margin-inline: auto; padding: 0 var(--space-4) var(--space-6); color: var(--muted-foreground); font-size: var(--text-xs); line-height: 1.6; }
.hub-foot-inner { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
@media (min-width: 48rem) { .hub-foot { padding-inline: var(--space-5); } }
.hub-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); }
.hub-foot-brand { color: var(--muted-foreground); }
.hub-foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.hub-foot-links a { display: inline-block; padding: var(--space-2) 0; color: var(--gold); font-weight: 500; text-decoration: none; }
.hub-foot-links a:hover { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 2px; }
.hub-foot strong { color: var(--foreground); font-weight: 700; }

/* --- Buttons: sentence case, 10px corners; the primary action is the hub's gold --- */

.btn {
  min-height: 2.25rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius);
  font: 600 0.8125rem/1.2 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}
@media (pointer: coarse) { .btn { min-height: 2.75rem; } }
.btn-primary {
  background: linear-gradient(to bottom, var(--gold-soft), var(--gold));
  color: var(--on-gold);
  font-weight: 700;
  box-shadow: 0 1px 2px #d8b65840;
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(to bottom, var(--gold-soft), var(--gold)); color: var(--on-gold); filter: brightness(1.05); box-shadow: 0 4px 10px -2px #d8b6584d; }
.btn-secondary { background: var(--fill-quiet); border-color: var(--hair-strong); }
.btn-secondary:hover:not(:disabled) { background: #5c85ff0d; border-color: #5c85ff66; }
.btn-gold { background: var(--gold-fill); border-color: #d8b65866; color: var(--gold-soft); }
.btn-gold:hover:not(:disabled) { background: #d8b65833; border-color: var(--gold); }
.link-btn { color: var(--primary-link); font-weight: 600; text-decoration: none; }
.link-btn:hover { color: var(--primary-link); text-decoration: underline; }
a { color: var(--primary-link); }

/* --- Fields: low fill, 14% border, 10px corners, small caps label --- */

.form-label { margin-bottom: 0.375rem; color: var(--muted-foreground); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; }
.form-input { min-height: 2.5rem; padding: 0.5rem 0.75rem; background: var(--fill-quiet); border-color: var(--hair-strong); border-radius: var(--radius); font-size: var(--text-sm); }
.form-input:hover { border-color: var(--border-hover); }
.form-input:focus-visible { outline: 3px solid #5c85ff80; outline-offset: 0; border-color: var(--ring); }
select.form-input { padding-right: 2.25rem; background-position: right 0.75rem center; }
@media (pointer: coarse) { .form-input { min-height: 2.75rem; font-size: var(--text-base); } }

/* --- Chips: the hub's status pill (tinted fill, dot, sentence case) --- */

.chip {
  gap: 0.375rem;
  padding: 0.1875rem 0.5rem;
  background: var(--fill-hover);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.33;
  text-transform: none;
}
.chip::before { width: 0.375rem; height: 0.375rem; border: 0; background: currentColor; }
.chip--good { background: #3fcf9c1a; color: var(--bull); }
.chip--bad { background: #f0708a1f; color: var(--bear); }
.chip--gold { background: var(--gold-fill); color: var(--gold-soft); }

.notice { border-radius: var(--radius); }
.notice--bad { color: var(--bear-text); background: #f0708a14; border-color: #f0708a59; }
.notice--good { color: var(--bull-text); background: #3fcf9c12; border-color: #3fcf9c59; }

/* --- Figures: separate rounded cards, value at 24px extra-bold --- */

.metrics, .metrics.ib-metrics, .metrics.ib-perf-kpis {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
}
/* (.metrics-prefixed: balance.css loads after this file on chart pages.) */
.metrics .metric { gap: var(--space-1); padding: var(--space-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.metrics .metric-value { margin-top: var(--space-1); font-size: 1.5rem; font-weight: 800; line-height: 1.33; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.metrics .metric-value--pair { font-size: 1.125rem; }
.metrics .metric-note { font-size: var(--text-xs); }

/* --- Tables: in a rounded box on the card surface, sentence-case headers --- */

main .table-scroll { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.tbl { font-size: var(--text-sm); }
.tbl th {
  height: 2.5rem;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.tbl td { padding: 0.625rem var(--space-3); border-bottom: 1px solid var(--border); }
.tbl tbody tr { transition: background-color var(--dur-fast) ease; }
.tbl tbody tr:hover { background: var(--row-hover); }
.tbl tbody tr:last-child > * { border-bottom: 0; }

/* --- Charts and dialogs pick up the card surface and radii from the tokens --- */

.chart { border-radius: var(--radius-lg); }
.chart .tick { font-family: var(--font-sans); }
.app-dialog, .auth-dialog { border-radius: var(--radius-lg); }

/* Empty state: the hub's quiet card. */
.empty { padding: var(--space-7) var(--space-6); }

/* --- Signed-out pages (ib/public.html): the hub's sign-in card on the navy backdrop --- */

body.ib-gate { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; font-size: var(--text-sm); line-height: 1.55; letter-spacing: 0; }
.gate-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(48rem 32rem at 50% 42%, #04091200, #0409128c 100%),
    radial-gradient(56rem 36rem at 0% 0%, #2f5bff24, transparent 62%),
    radial-gradient(48rem 32rem at 100% 100%, #d8b6581f, transparent 60%),
    var(--background);
}
.gate-head { display: flex; justify-content: center; padding: var(--space-7) var(--space-4) var(--space-5); }
.gate-brand { display: grid; justify-items: center; color: #fff; text-decoration: none; }
.gate-brand:hover { color: #fff; }
.gate-brand img { width: 3.5rem; height: 3.5rem; object-fit: contain; filter: drop-shadow(0 2px 8px #2f5bff80); }
.gate-brand-kicker { margin-top: 0.875rem; color: var(--gold-soft); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; }
.gate-brand-name { margin-top: var(--space-2); font-size: 1.375rem; font-weight: 800; line-height: 1.4; letter-spacing: 0.14em; }

.gate-main { flex: 1; display: grid; justify-items: center; align-content: start; padding: 0 var(--space-4) var(--space-6); outline: none; }
.ib-gate .auth-page { display: grid; justify-items: center; width: 100%; min-height: 0; padding: 0; overflow: visible; }
.ib-gate .auth-page-orn { display: none; }

.ib-gate .auth-card {
  width: min(24rem, 100%);
  padding: 2rem 1.875rem 1.875rem;
  background: var(--gate-card);
  border: 1px solid var(--gate-edge);
  border-radius: var(--radius-gate);
  box-shadow: 0 34px 90px #0000008c;
}
.ib-gate .auth-title { font-size: 1.25rem; font-weight: 800; line-height: 1.35; letter-spacing: -0.01em; text-align: center; }
.ib-gate .auth-card > .auth-lede, .ib-gate .auth-card > div > .auth-lede { margin: var(--space-2) 0 var(--space-5); text-align: center; color: var(--gate-lede); }
.ib-gate .form-input { min-height: 3rem; padding: 0.75rem 1rem; background: #ffffff0d; }
.ib-gate .btn { min-height: 2.875rem; font-size: 0.78125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.ib-gate .btn-primary { background: var(--gold-solid); color: var(--on-gold); box-shadow: none; }
.ib-gate .btn-primary:hover:not(:disabled) { background: var(--gold-solid-hover); color: var(--on-gold); filter: none; box-shadow: none; }
.ib-gate .btn-google { letter-spacing: 0.08em; }
.ib-gate .auth-note { text-align: center; }

.gate-notes { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.gate-notes h2 { margin-top: var(--space-3); font-size: 0.8125rem; font-weight: 700; }
.gate-notes h2:first-child { margin-top: 0; }
.gate-notes p { margin-top: var(--space-1); color: var(--muted-foreground); font-size: var(--text-xs); line-height: 1.6; }

.gate-foot { display: grid; justify-items: center; gap: var(--space-2); max-width: 44rem; margin-inline: auto; padding: var(--space-5) var(--space-4) var(--space-6); color: var(--muted-foreground); font-size: 0.6875rem; line-height: 1.6; text-align: center; }
.gate-foot-note { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.gate-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-4); }
.gate-foot-links a { display: inline-block; padding: var(--space-2) 0; color: var(--gold); font-weight: 500; text-decoration: none; }
.gate-foot-links a:hover { color: var(--gold-soft); text-decoration: underline; }
.gate-foot strong { color: var(--foreground); }

/* ======================= Pages ======================= */

/* Overview: who is signed in and over which part of the tree. */
.ib-scope { margin-bottom: var(--space-6); }
.ib-scope-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-7);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.ib-scope-list > div { display: grid; gap: var(--space-1); min-width: 0; }
.ib-scope-list dd { overflow-wrap: anywhere; font-weight: 600; }

/* --- Management pages (B-164, B-172): denser than the member app, same vocabulary:
   hairline-divided rows and tables, no nested cards, text on every status. --- */

.ib-flash { margin-bottom: var(--space-5); }
.ib-gap { margin-bottom: var(--space-5); }
.ib-next { margin-top: var(--space-5); }
.ib-code { margin-left: var(--space-2); color: var(--muted-foreground); font-size: var(--text-xs); }
.ib-count { margin-left: var(--space-2); color: var(--muted-foreground); font-size: var(--text-sm); font-weight: 400; }
.ib-sec-title { margin-bottom: var(--space-3); }
.ib-section { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--hair); }
.ib-none { color: var(--muted-foreground); font-size: var(--text-sm); }
.ib-more { margin-top: var(--space-3); font-size: var(--text-sm); }
.ib-more a, .ib-trail a, .ib-pager a, .ib-tree a, .ib-rows a, .ib-audit a { color: var(--primary-link); }
.ib-nowrap { white-space: nowrap; }
.ib-cell-sub { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: var(--text-xs); }
.ib-reason { max-width: 22rem; color: var(--muted-foreground); }
.ib-row-actions { white-space: nowrap; text-align: right; }
.ib-row-actions .link-btn + .link-btn { margin-left: var(--space-4); }

/* Tree table: the name cell is indented by level, with a quiet elbow mark. */
.ib-tree-name { font-weight: 500; text-align: left; padding-left: calc(var(--space-3) + var(--level, 0) * 1.25rem) !important; white-space: nowrap; }
.ib-tree-mark { display: inline-block; width: 0.6rem; height: 0.55rem; margin-right: var(--space-2); border-left: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair-strong); vertical-align: 0.2em; }
.ib-tree tr.is-off .ib-tree-name a { color: var(--muted-foreground); }
.ib-tree tbody tr:hover { background: var(--accent); }

/* Breadcrumb */
.ib-trail { margin-bottom: var(--space-5); font-size: var(--text-sm); }
.ib-trail ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.ib-trail li { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted-foreground); }
.ib-trail li + li::before { content: "/"; color: var(--hair-strong); }
.ib-trail [aria-current] { color: var(--foreground); }

/* Two lists side by side on wide screens. */
.ib-columns { display: grid; gap: 0 var(--space-7); }
@media (min-width: 64rem) { .ib-columns { grid-template-columns: 1fr 1fr; } }
.ib-rows { display: grid; }
.ib-rows li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--hair); font-size: var(--text-sm); }
.ib-row-meta { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted-foreground); font-size: var(--text-xs); }
.ib-subhead { margin: var(--space-5) 0 var(--space-1); }

/* Management forms: open blocks divided by hairlines (not cards). */
.ib-manage-grid { display: grid; gap: var(--space-6); }
@media (min-width: 64rem) { .ib-manage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-7); } }
.ib-form { display: grid; align-content: start; gap: var(--space-1); min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--hair); }
.ib-form .form-group { margin-bottom: var(--space-3); }
.ib-form > .btn { justify-self: start; margin-top: var(--space-2); }
.ib-form-title { margin-bottom: var(--space-3); font-size: var(--text-base); font-weight: 600; }
.ib-form--wide { border-top: 0; padding-top: 0; }
.ib-form-fields { display: grid; gap: 0 var(--space-5); }
@media (min-width: 48rem) { .ib-form-fields { grid-template-columns: 2fr 1fr 1.5fr; } }
.ib-form-status { margin: var(--space-2) 0; }
.ib-link-out { display: grid; gap: var(--space-2); margin: var(--space-2) 0; }
.ib-link-out[hidden] { display: none; }
.ib-copy { display: flex; gap: var(--space-2); }
.ib-copy .form-input { flex: 1; min-width: 0; }
@media (max-width: 30rem) { .ib-form > .btn { justify-self: stretch; } }
.app-head form { display: grid; justify-items: end; gap: var(--space-2); }

/* Audit log */
.ib-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 var(--space-4); align-items: end; margin-bottom: var(--space-5); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hair); }
.ib-filters .form-group { margin-bottom: var(--space-3); }
.ib-filter-actions { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.ib-filter-actions .btn { min-height: 2.5rem; }
.ib-audit td { vertical-align: top; }
.ib-changes summary { white-space: nowrap; color: var(--primary-link); cursor: pointer; font-size: var(--text-xs); font-weight: 600; }
.ib-changes dl { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.ib-changes dl > div { display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: var(--space-2); font-size: var(--text-xs); }
.ib-changes dt { color: var(--muted-foreground); }
.ib-changes dd { overflow-wrap: anywhere; }
.ib-pager { display: flex; gap: var(--space-5); margin-top: var(--space-5); font-size: var(--text-sm); }

/* Row headers in body rows read as names, not as column labels. */
.tbl tbody th { color: var(--foreground); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; text-transform: none; height: auto; padding-block: 0.625rem; }
/* Quieter than prose links, but still underlined: a link beside other text in a cell must not
   rely on colour alone (WCAG 1.4.1). */
.tbl a { font-weight: 500; text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 0.25em; }
.tbl a:hover { color: var(--primary-link); text-decoration-color: currentColor; }

/* --- Clients (B-167–B-173): list, client page, bulk and upload flows, onboarding. --- */

.ib-quiet { color: var(--muted-foreground); font-size: var(--text-xs); }
.ib-filter-wide { grid-column: 1 / -1; max-width: 32rem; }
.ib-filters--one { grid-template-columns: minmax(0, 24rem) auto; }
@media (max-width: 30rem) { .ib-filters--one { grid-template-columns: 1fr; } }
.ib-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.ib-check { width: 1.125rem; height: 1.125rem; accent-color: var(--primary); cursor: pointer; }
.ib-clients td, .ib-clients th { vertical-align: top; }
.ib-clients td:first-child { vertical-align: middle; }
.ib-clients tbody th a { color: var(--primary-link); }
.ib-head-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.ib-section--first { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 63.99rem) { .ib-columns > .ib-section--first + .ib-section--first { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--hair); } }
.ib-facts { display: grid; gap: 0; }
.ib-facts > div { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--hair); font-size: var(--text-sm); }
.ib-facts dt { color: var(--muted-foreground); }
.ib-facts dd { min-width: 0; overflow-wrap: anywhere; }
.ib-facts dd a, .ib-clients a, .ib-funnel a, .ib-flow a { color: var(--primary-link); }
.ib-facts--row { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 var(--space-5); margin-bottom: var(--space-4); }
.ib-facts--row > div { grid-template-columns: 1fr; gap: var(--space-1); }
@media (max-width: 30rem) { .ib-facts > div { grid-template-columns: 1fr; gap: var(--space-1); } }

.ib-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-2); }
.ib-actions form { display: grid; gap: var(--space-2); }
.ib-form--inline { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: end; gap: 0 var(--space-4); }
.ib-form--inline > .btn { margin-bottom: var(--space-3); }
.ib-charts { margin-top: var(--space-2); }
.ib-charts[hidden] { display: none; }

.ib-flow { display: grid; gap: var(--space-2); max-width: 60rem; }
.ib-fieldset { border: 0; margin: 0 0 var(--space-3); padding: 0; min-width: 0; }
.ib-fieldset > p { font-size: var(--text-sm); margin-top: var(--space-2); }
.ib-radios { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-2); }
.ib-radio { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; font-size: var(--text-sm); cursor: pointer; }
.ib-radio input { width: 1.125rem; height: 1.125rem; accent-color: var(--primary); }
.ib-summary { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.ib-summary .data { font-size: var(--text-lg); color: var(--foreground); }
[data-flow-summary]:focus { outline: none; }
.ib-inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.ib-inline-form .form-input { width: auto; min-width: 10rem; flex: 1; }

/* Onboarding: one series (stage reach), one colour; the numbers are in the table. */
.ib-funnel th[scope="row"] { min-width: 9rem; white-space: normal; }
@media (min-width: 48rem) { .ib-funnel th[scope="row"] { min-width: 14rem; } }
.ib-clients tbody th { white-space: normal; }
.ib-funnel-bar-col { width: 32%; min-width: 6rem; }
.ib-funnel-bar { display: block; height: 0.75rem; width: var(--w, 0%); min-width: 2px; background: var(--primary-link); border-radius: 0 4px 4px 0; }
.ib-funnel-bar--quiet { background: transparent; border: 1px dashed var(--primary-link); }
@media (max-width: 40rem) { .ib-funnel-bar-col { display: none; } }

/* --- Performance (B-177–B-181): one filter row above everything it scopes. The period and
   bucket links are the hub's tab track; the current choice is marked by aria-current and drawn
   as a raised, outlined tab (a shape cue, not colour alone). --- */
.ib-period { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; margin-bottom: var(--space-5); }
.ib-period nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ib-period-k { color: var(--muted-foreground); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.ib-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--secondary); border-radius: var(--radius); }
.ib-seg a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-tab);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
@media (pointer: coarse) { .ib-seg a { min-height: 2.75rem; } }
.ib-seg a:hover { color: var(--foreground); }
.ib-seg a[aria-current] { color: var(--foreground); background: var(--fill-quiet); border-color: var(--hair-strong); font-weight: 600; }
.ib-perf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); }
@media (min-width: 70rem) { .ib-perf-charts { grid-template-columns: 1fr 1fr; } .ib-perf-charts > :first-child { grid-column: 1 / -1; } }
.sw-box { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: var(--radius-mark); }
.sw-box--pos { background: var(--bull); }
.sw-box--neg { background: var(--bear); }
.ib-asof { color: var(--muted-foreground); font-size: var(--text-xs); }
.ib-rank td, .ib-rank th { vertical-align: middle; }
.ib-cmp { display: inline-block; vertical-align: middle; width: 6rem; height: 0.6rem; margin-right: var(--space-2); position: relative; background: linear-gradient(var(--hair-strong), var(--hair-strong)) center / 1px 100% no-repeat; }
.ib-cmp i { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-mark); }
.ib-cmp i.up { left: 50%; background: var(--bull); }
.ib-cmp i.down { right: 50%; background: var(--bear); }
@media (max-width: 40rem) { .ib-cmp { display: none; } }
.ib-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.ib-alerts { min-width: 40rem; }

/* --- Design pass (B-183, 2026-10-18) --- */

/* Short values never wrap in the client list: one line per fact keeps a row two lines tall
   (email + name). Long notes still wrap. */
.ib-clients td { white-space: nowrap; }
.ib-clients .ib-cell-note { max-width: 14rem; white-space: normal; }

/* A table wider than the column scrolls sideways (scroll_regions.js makes it a focusable
   region). Edge shadows say there is more, on the card surface these tables sit on. */
main .table-scroll[role="region"] {
  background:
    linear-gradient(90deg, var(--card) 40%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(270deg, var(--card) 40%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--hair-strong), transparent) left / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--hair-strong), transparent) right / 0.75rem 100% no-repeat scroll;
}

/* File pickers: the native button reads as old broker grey; give it the secondary button. */
.form-input[type="file"] { padding: var(--space-2); cursor: pointer; font-size: var(--text-sm); color: var(--muted-foreground); }
.form-input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  min-height: 2.25rem;
  padding: 0 var(--space-4);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--foreground);
  font: 700 0.72rem/1 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-quart);
}
.form-input[type="file"]:hover::file-selector-button { background: var(--accent); }

/* A help line under a legend is followed by fields: keep it off the next label. */
.ib-fieldset > p { margin-bottom: var(--space-4); }

/* A section heading sits directly above its charts: the charts' own top margin is for
   charts that follow figures. */
.ib-sec-title + .charts { margin-top: var(--space-4); }

/* Upload flows: grid children may shrink, so a wide preview table scrolls inside its own box
   instead of widening the page (found at 360 px). Detail text gets room to read. */
.ib-flow > * { min-width: 0; }
.ib-flow-detail { min-width: 12rem; }
.ib-metrics + .ib-asof { margin-top: var(--space-2); }

/* Phones: filters two to a row, so the list starts within the first screen or two. */
@media (max-width: 30rem) {
  .ib-filters:not(.ib-filters--one) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3); }
  .ib-filters .form-input { padding-left: var(--space-3); }
}