/* =============================================================================
   UPBI Hub Operations — scoped styles (Phase 2, C1 foundation)

   Every rule is namespaced under .hub-* and is additive. Nothing here overrides
   a global .card / .btn / table / modal / nav / typography / form definition —
   existing dashboard pages must render identically with this file loaded.
   Reuses the dashboard's existing CSS custom properties (--navy, --text2, ...).
   ============================================================================= */

/* ---- development-only banner (localhost + explicit selector only) ---------- */
.hub-dev-banner{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin:0 0 1.1rem; padding:.7rem .9rem; border-radius:12px;
  background:#fff7ed; border:1px solid #fdba74; color:#7c2d12;
  font-size:12.5px; font-weight:700; letter-spacing:.01em;
}
.hub-dev-banner .hub-dev-tag{
  display:inline-flex; align-items:center; gap:.35rem;
  background:#7c2d12; color:#fff; border-radius:999px;
  padding:.16rem .55rem; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.hub-dev-banner select{
  font:inherit; font-weight:600; padding:.35rem .5rem; border-radius:8px;
  border:1px solid #fdba74; background:#fff; color:#7c2d12; max-width:100%;
  min-width:0;       /* a long scenario label must not force the dev banner (mock-only) to overflow */
  min-height:34px;   /* comfortable tap target for the dev control */
}
.hub-dev-banner label{ font-weight:700; }
.hub-dev-desc{ flex:1 1 100%; font-weight:500; color:#9a3412; font-size:12px; }

/* ---- page header ---------------------------------------------------------- */
.hub-page-header{ margin-bottom:1.25rem; }
.hub-page-header h2{ font-size:24px; letter-spacing:-.02em; margin:0; }
.hub-page-header p{ font-size:13px; color:var(--text2); margin-top:5px; max-width:70ch; }

/* ---- status banner (icon + text; never colour alone) ---------------------- */
.hub-status-banner{
  display:flex; align-items:flex-start; gap:.65rem;
  padding:.8rem .95rem; border-radius:12px; margin-bottom:1.1rem;
  border:1px solid var(--line, #e2e8f0); background:#f8fafc; font-size:13px;
}
.hub-status-banner .hub-status-ic{ flex:0 0 auto; font-size:14px; line-height:1.3; }
.hub-status-banner .hub-status-label{ font-weight:800; margin-right:.35rem; }
.hub-status-banner.is-info{ background:#f0f9ff; border-color:#bae6fd; color:#0c4a6e; }
.hub-status-banner.is-warn{ background:#fffbeb; border-color:#fcd34d; color:#78350f; }
.hub-status-banner.is-error{ background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }
.hub-status-banner.is-ok{ background:#f0fdf4; border-color:#bbf7d0; color:#14532d; }

/* ---- state card (loading / denied / unavailable / empty) ------------------ */
.hub-state-card{
  border:1px solid var(--line, #e2e8f0); border-radius:16px; background:#fff;
  padding:2.2rem 1.6rem; text-align:center; max-width:640px; margin:0 auto;
}
.hub-state-card .hub-state-ic{
  width:44px; height:44px; margin:0 auto .8rem; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:#f1f5f9; color:#475569; font-size:19px; font-weight:800;
}
.hub-state-card h3{ font-size:16px; margin:0 0 .4rem; letter-spacing:-.01em; }
.hub-state-card p{ font-size:13px; color:var(--text2); margin:0 auto; max-width:52ch; line-height:1.55; }
.hub-state-card .hub-state-actions{ margin-top:1.1rem; display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; }

/* ---- empty state (inline, smaller) ---------------------------------------- */
.hub-empty-state{
  border:1px dashed var(--line, #e2e8f0); border-radius:14px;
  padding:1.6rem 1.2rem; text-align:center; color:var(--text2); font-size:13px; background:#fcfcfd;
}

/* ---- permission summary --------------------------------------------------- */
.hub-permission-summary{
  border:1px solid var(--line, #e2e8f0); border-radius:14px; background:#fff;
  padding:1rem 1.1rem; margin-bottom:1.2rem;
}
.hub-permission-summary h3{
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text2); margin:0 0 .7rem;
}
.hub-perm-grid{ display:flex; flex-wrap:wrap; gap:.4rem; }
.hub-perm-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  border-radius:999px; padding:.25rem .6rem; font-size:11.5px; font-weight:700;
  border:1px solid var(--line, #e2e8f0); background:#f8fafc; color:#334155;
}
.hub-perm-chip.is-on{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.hub-perm-chip.is-off{ background:#f8fafc; border-color:#e2e8f0; color:#64748b; }
.hub-perm-chip .hub-perm-mark{ font-weight:900; }
.hub-scope-line{ margin-top:.7rem; font-size:12px; color:var(--text2); }

/* ---- placeholder grid (C1 shells; replaced by real content in C2/C3) ------ */
.hub-placeholder-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.9rem;
}
.hub-placeholder-card{
  border:1px dashed var(--line, #e2e8f0); border-radius:14px; padding:1rem;
  background:#fcfcfd; min-height:96px;
}
.hub-placeholder-card h4{ font-size:12.5px; margin:0 0 .3rem; color:#334155; }
.hub-placeholder-card p{ font-size:12px; color:var(--text2); margin:0; line-height:1.5; }
.hub-placeholder-note{
  margin-top:1rem; font-size:12px; color:var(--text2);
  border-left:3px solid var(--line, #e2e8f0); padding-left:.7rem;
}

/* ---- shell ---------------------------------------------------------------- */
.hub-shell{ max-width:100%; }
.hub-shell [hidden]{ display:none !important; }

/* ---- responsive ----------------------------------------------------------- */
@media(max-width:900px){
  .hub-page-header h2{ font-size:20px; }
  .hub-state-card{ padding:1.6rem 1.1rem; }
  .hub-placeholder-grid{ grid-template-columns:1fr; }
  .hub-dev-banner{ font-size:12px; }
}

/* ---- accessibility: visible focus, honouring reduced motion --------------- */
.hub-shell :focus-visible,
.hub-dev-banner :focus-visible{
  outline:2px solid #0ea5e9; outline-offset:2px; border-radius:6px;
}
@media(prefers-reduced-motion:reduce){
  .hub-shell *{ animation:none !important; transition:none !important; }
}

/* ---- scoped screen-reader-only text (the dashboard has no global .sr-only) -- */
.hub-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;
}

/* =============================================================================
   C2a — New Hub Session Tracker form. All scoped under .hub-*; nothing here
   overrides a global .card/.btn/table/modal/nav/typography/form definition.
   ============================================================================= */

/* ---- sections ------------------------------------------------------------- */
.hub-tracker{ display:flex; flex-direction:column; gap:1.1rem; }
.hub-sec{
  border:1px solid var(--line,#e2e8f0); border-radius:16px; background:#fff; padding:1.15rem 1.2rem;
}
.hub-sec-h{ font-size:14px; margin:0 0 .9rem; letter-spacing:-.01em; color:#0f172a; }
.hub-deferred{ background:#fcfcfd; border-style:dashed; }

/* ---- fields --------------------------------------------------------------- */
.hub-field{ margin-bottom:.9rem; }
.hub-field label,.hub-label-static{
  display:block; font-size:12.5px; font-weight:700; color:#334155; margin-bottom:.32rem;
}
.hub-input{
  width:100%; font:inherit; font-size:13px; padding:.5rem .6rem; border-radius:10px;
  border:1px solid var(--line,#cbd5e1); background:#fff; color:#0f172a; min-height:38px;
}
.hub-input:disabled{ background:#f1f5f9; color:#64748b; }
.hub-textarea{ resize:vertical; min-height:120px; line-height:1.55; }
.hub-help{ font-size:12px; color:var(--text2,#64748b); margin:.3rem 0 0; line-height:1.5; }
.hub-readonly{ font-size:13px; color:#0f172a; margin:0; padding:.45rem 0; font-weight:600; }
.hub-grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 1rem; }

/* ---- fieldsets / choices -------------------------------------------------- */
.hub-fieldset{ border:1px solid var(--line,#e2e8f0); border-radius:12px; padding:.8rem .9rem; margin:0 0 .9rem; }
.hub-fieldset legend{ font-size:12.5px; font-weight:800; color:#334155; padding:0 .35rem; }
.hub-radio,.hub-check{ display:flex; align-items:flex-start; gap:.5rem; padding:.32rem 0; }
.hub-radio input,.hub-check input{ margin-top:.2rem; width:17px; height:17px; flex:0 0 auto; }
.hub-radio label,.hub-check label{
  margin:0; font-weight:600; font-size:13px; color:#0f172a; cursor:pointer;
  display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
}
.hub-subs{ margin-top:.6rem; background:#fcfcfd; }
.hub-other{ margin:.4rem 0 .2rem 1.6rem; }
.hub-need{ border-bottom:1px solid #f1f5f9; padding:.35rem 0; }
.hub-need:last-child{ border-bottom:0; }

/* ---- chips (status = mark + text, never colour alone) --------------------- */
.hub-chip{
  display:inline-flex; align-items:center; gap:.3rem; border-radius:999px;
  padding:.16rem .5rem; font-size:11px; font-weight:700; border:1px solid var(--line,#e2e8f0);
  background:#f8fafc; color:#475569;
}
.hub-chip.is-ok{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.hub-chip.is-warn{ background:#fffbeb; border-color:#fcd34d; color:#78350f; }

/* ---- search results ------------------------------------------------------- */
.hub-results{ list-style:none; margin:.8rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.hub-result{
  width:100%; text-align:left; display:flex; flex-direction:column; gap:.15rem;
  border:1px solid var(--line,#e2e8f0); border-radius:12px; padding:.7rem .8rem;
  background:#fff; cursor:pointer; font:inherit; min-height:44px;
}
.hub-result:hover{ background:#f8fafc; border-color:#cbd5e1; }
.hub-result-name{ font-weight:800; font-size:13px; color:#0f172a; }
.hub-result-biz{ font-size:12.5px; color:#334155; }
.hub-result-meta{ font-size:11.5px; color:var(--text2,#64748b); word-break:break-word; }

/* ---- selected participant -------------------------------------------------- */
.hub-selected-participant{
  display:flex; gap:1rem; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;
  border:1px solid #bae6fd; background:#f0f9ff; border-radius:14px; padding:.9rem 1rem;
}
.hub-sp-main{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.hub-sp-biz{ font-size:13px; color:#334155; }
.hub-sp-meta{ font-size:11.5px; color:var(--text2,#64748b); word-break:break-word; }

/* ---- save bar ------------------------------------------------------------- */
.hub-save-bar{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  border:1px solid var(--line,#e2e8f0); border-radius:12px; padding:.6rem .8rem; background:#f8fafc;
  position:sticky; top:0; z-index:5;
}
.hub-save-bar.is-ok{ background:#f0fdf4; border-color:#bbf7d0; }
.hub-save-bar.is-warn{ background:#fffbeb; border-color:#fcd34d; }
.hub-save-bar.is-error{ background:#fef2f2; border-color:#fecaca; }
.hub-save-bar.is-info{ background:#f0f9ff; border-color:#bae6fd; }
.hub-save-ic{ font-weight:900; }
.hub-save-label{ font-weight:800; font-size:12.5px; }
.hub-save-dirty{ font-size:11.5px; color:#78350f; font-weight:700; }
.hub-save-bar .hub-btn{ margin-left:auto; }

/* ---- buttons (scoped; the dashboard's .btn is untouched) ------------------ */
.hub-btn{
  font:inherit; font-size:12.5px; font-weight:700; padding:.5rem .85rem; border-radius:10px;
  border:1px solid var(--line,#cbd5e1); background:#fff; color:#0f172a; cursor:pointer; min-height:38px;
}
.hub-btn:hover{ background:#f8fafc; }
.hub-btn-primary{ background:#0f766e; border-color:#0f766e; color:#fff; }
.hub-btn-primary:hover{ background:#115e59; }
.hub-btn[disabled],.hub-btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }

/* ---- error summary -------------------------------------------------------- */
.hub-error-summary{
  border:1px solid #fecaca; background:#fef2f2; border-radius:12px; padding:.85rem 1rem; color:#7f1d1d;
}
.hub-error-summary h4{ margin:0 0 .4rem; font-size:13px; }
.hub-error-summary ul{ margin:0; padding-left:1.1rem; font-size:12.5px; line-height:1.6; }
.hub-err-link{
  background:none; border:0; padding:0; font:inherit; color:inherit;
  text-align:left; text-decoration:underline; cursor:pointer;
}
.hub-err-link:hover{ text-decoration:none; }
.hub-err-link:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
.hub-input[aria-invalid="true"]{ border-color:#b42318; box-shadow:0 0 0 1px #b42318 inset; }

/* ---- responsive ----------------------------------------------------------- */
@media(max-width:900px){
  .hub-sec{ padding:1rem .9rem; }
  .hub-grid2{ grid-template-columns:1fr; }
  .hub-selected-participant{ flex-direction:column; }
  .hub-selected-participant .hub-btn{ width:100%; }
  .hub-save-bar{ position:static; }
  .hub-save-bar .hub-btn{ margin-left:0; width:100%; }
}

/* ---- C2b1: steps, actions, assessment, materials ------------------------- */
.hub-callout{
  margin:0 0 .7rem; padding:.55rem .7rem; font-size:12.5px; line-height:1.5;
  border-left:3px solid currentColor; background:rgba(127,127,127,.08); border-radius:0 4px 4px 0;
}
.hub-check{ display:flex; align-items:flex-start; gap:.45rem; font-size:13px; cursor:pointer; }
.hub-check input{ margin-top:.15rem; flex:0 0 auto; }
.hub-nostep{ margin:.6rem 0 .8rem; }

.hub-step-list{ list-style:none; margin:.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.hub-step-card{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; align-items:flex-start;
  padding:.6rem .7rem; border:1px solid rgba(127,127,127,.3); border-radius:6px;
}
.hub-step-main{ flex:1 1 320px; min-width:0; }
.hub-step-head{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.hub-step-code{ font-size:13px; }
.hub-step-desc{ margin:.25rem 0; font-size:12.5px; line-height:1.5; overflow-wrap:anywhere; }
.hub-step-state{ margin:.15rem 0 0; font-size:11.5px; }
.hub-step-acts{ display:flex; flex-wrap:wrap; gap:.35rem; flex:0 1 auto; }
.hub-btn.is-on{ border-color:currentColor; font-weight:600; }
.hub-btn-danger{ color:#b42318; }

.hub-row{ margin:.5rem 0; }
.hub-radio{ display:flex; align-items:center; gap:.4rem; margin:.2rem 0; font-size:13px; }
.hub-field-error{ margin:.25rem 0 0; font-size:11.5px; color:#b42318; }
.hub-input[aria-invalid="true"]{ border-color:#b42318; }

.hub-save-summary-box{
  margin-top:.5rem; padding:.55rem .7rem; border:1px solid rgba(127,127,127,.3); border-radius:6px;
}
.hub-save-summary-box h4{ margin:0 0 .3rem; font-size:12.5px; }
.hub-save-summary{ list-style:none; margin:0; padding:0; font-size:12px; line-height:1.7; }
.hub-save-summary li{ display:flex; align-items:center; gap:.4rem; }
.hub-sum-mark{ flex:0 0 auto; }
.hub-save-summary li.is-error{ color:#b42318; }

@media (max-width:640px){
  .hub-step-card{ flex-direction:column; }
  .hub-step-acts{ width:100%; }
  .hub-step-acts .hub-btn{ flex:1 1 auto; }
}

/* ---- C2b2: Hub Sessions list --------------------------------------------- */
.hub-sessions{ display:flex; flex-direction:column; gap:1rem; }
.hub-sess-bar{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  border:1px solid var(--line,#e2e8f0); border-radius:12px; padding:.6rem .8rem; background:#f8fafc;
}
.hub-sess-bar .hub-label-static{ margin:0; }
.hub-sess-filter{ width:auto; min-width:190px; }
.hub-sess-bar [data-refresh]{ margin-left:auto; }

.hub-sess-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.hub-sess-row{
  display:flex; gap:.8rem; justify-content:space-between; align-items:center; flex-wrap:wrap;
  border:1px solid var(--line,#e2e8f0); border-radius:12px; padding:.7rem .8rem; background:#fff;
}
.hub-sess-main{ min-width:0; flex:1 1 320px; }
.hub-sess-name{ font-weight:800; font-size:13px; color:#0f172a; margin:0; }
.hub-sess-biz{ font-size:12.5px; color:#334155; margin:.1rem 0 0; }
.hub-sess-meta{ font-size:11.5px; color:var(--text2,#64748b); margin:.15rem 0 0; overflow-wrap:anywhere; }
.hub-sess-chips{ display:flex; gap:.35rem; flex-wrap:wrap; margin:.4rem 0 0; }
.hub-sess-acts{ flex:0 0 auto; }

.hub-pager{ display:flex; align-items:center; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.hub-pager-at{ font-size:12px; color:var(--text2,#64748b); font-weight:600; }

@media (max-width:640px){
  .hub-sess-bar [data-refresh]{ margin-left:0; }
  .hub-sess-filter{ flex:1 1 100%; min-width:0; }
  .hub-sess-row{ flex-direction:column; align-items:stretch; }
  .hub-sess-acts .hub-btn{ width:100%; }
}

/* ---- C2b2: lifecycle chrome + submission ---------------------------------- */
.hub-lifecycle-chrome{ display:flex; flex-direction:column; gap:.6rem; }
.hub-return-note{
  border:1px solid #fcd34d; background:#fffbeb; border-radius:12px; padding:.85rem 1rem;
}
.hub-return-note h4{ margin:0 0 .35rem; font-size:12.5px; color:#78350f; }
.hub-return-note-body{
  margin:0; font-size:13px; line-height:1.6; color:#0f172a; white-space:pre-wrap; overflow-wrap:anywhere;
}

.hub-submit-bar{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:space-between;
  border:1px solid var(--line,#e2e8f0); border-radius:14px; padding:.9rem 1rem; background:#f8fafc;
}
.hub-submit-copy{ min-width:0; flex:1 1 320px; }
.hub-submit-lead{ margin:0; font-size:13px; font-weight:700; color:#0f172a; }
.hub-submit-copy .hub-help{ margin-top:.25rem; }
.hub-submit-bar .hub-btn{ flex:0 0 auto; }

/* A locked session must LOOK locked, not just behave that way. */
.hub-sec :disabled,
.hub-sec [aria-disabled="true"]{ cursor:not-allowed; }

@media (max-width:640px){
  .hub-submit-bar{ flex-direction:column; align-items:stretch; }
  .hub-submit-bar .hub-btn{ width:100%; }
}

/* ---- C3a: shared read-only session detail (HubSessionDetail) --------------- */
.hub-detail{ max-width:840px; }
.hub-detail-backbar{ margin-bottom:.6rem; }
.hub-detail-status{ display:flex; gap:.4rem; flex-wrap:wrap; margin:.35rem 0 0; }
.hub-detail-dl{ margin:.2rem 0 0; display:grid; grid-template-columns:190px 1fr; gap:.35rem .9rem; }
.hub-detail-row{ display:contents; }
.hub-detail-k{ font-weight:700; color:#334155; font-size:12.5px; margin:0; }
.hub-detail-v{ color:var(--text); margin:0; min-width:0; overflow-wrap:anywhere; }
.hub-detail-block{ margin-top:.9rem; }
.hub-detail-block .hub-detail-k{ margin-bottom:.25rem; }
.hub-detail-list{ list-style:none; margin:.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.hub-detail-li{ display:flex; flex-direction:column; gap:.15rem; padding:.5rem .65rem;
  border:1px solid var(--line); border-radius:10px; background:#fff; }
.hub-detail-strong{ font-weight:600; overflow-wrap:anywhere; }
.hub-detail-sub{ font-size:12px; color:var(--text2); overflow-wrap:anywhere; }
.hub-detail-decision{ margin:.35rem 0 0; display:flex; flex-direction:column; gap:.1rem; }

/* ---- C3a: review history timeline ----------------------------------------- */
.hub-timeline{ list-style:none; margin:.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.hub-tl-item{ padding-left:.85rem; border-left:2px solid var(--line); }
.hub-tl-head{ margin:0; font-size:12.5px; }
.hub-tl-event{ font-weight:700; }
.hub-tl-by{ color:var(--text2); }
.hub-tl-note{ margin:.3rem 0 0; padding:.5rem .65rem; background:#f8fafc;
  border:1px solid var(--line); border-radius:8px; white-space:pre-wrap; overflow-wrap:anywhere; }

/* ---- C3a: supervisor review action bar ------------------------------------ */
.hub-review-bar{ margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--line); }
.hub-review-bar .hub-textarea{ min-height:80px; margin-bottom:.5rem; }
.hub-review-acts{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.2rem 0 .6rem; }

@media(max-width:640px){
  .hub-detail-dl{ grid-template-columns:1fr; gap:.15rem .9rem; }
  .hub-detail-row{ display:block; margin-bottom:.55rem; }
  .hub-detail-k{ margin-bottom:.1rem; }
  .hub-review-acts .hub-btn{ flex:1 1 auto; }
}

/* The mock-only dev scenario banner must never force the page wide at small widths (its long
   scenario labels + tag would otherwise overflow ≤ 640px). Production renders no banner. On a
   narrow screen it stacks as a block so no flex min-content can push the shell column wide. */
.hub-dev-banner{ min-width:0; }
.hub-dev-banner > *{ min-width:0; max-width:100%; }
.hub-dev-tag{ white-space:normal; overflow-wrap:anywhere; }
@media(max-width:640px){
  .hub-dev-banner{ display:block; }
  .hub-dev-banner > *{ display:block; width:100%; margin:0 0 .4rem; }
  .hub-dev-banner select{ width:100%; }
  .hub-dev-desc{ margin-bottom:0; }
}

/* =============================================================================
   C3b — Hub Reporting (role-scoped consultation activity). Read-only; additive;
   scoped under .hub-rep-*. Reuses .hub-sess-bar (filters), .hub-status-banner,
   .hub-empty-state, .hub-sec-h, .hub-help, .hub-btn, .hub-input, .hub-label-static.
   ============================================================================= */
.hub-reporting{ display:flex; flex-direction:column; gap:1rem; }
.hub-rep-note{ max-width:82ch; margin-top:0; }
.hub-rep-body{ display:flex; flex-direction:column; gap:1.1rem; }
.hub-rep-sec{
  border:1px solid var(--line,#e2e8f0); border-radius:16px; background:#fff; padding:1.15rem 1.2rem;
}
.hub-rep-sec .hub-sec-h{ margin-bottom:.7rem; }

/* headline stat cards (approved sessions / entrepreneurs / workload) */
.hub-rep-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.9rem; }
.hub-rep-stat{
  border:1px solid var(--line,#e2e8f0); border-radius:14px; background:#f8fafc; padding:1rem 1.1rem;
}
.hub-rep-stat-val{ font-size:30px; font-weight:800; letter-spacing:-.02em; color:#0f172a; margin:0; line-height:1.05; }
.hub-rep-stat-label{ font-size:12.5px; font-weight:700; color:#334155; margin:.4rem 0 0; }
.hub-rep-stat-sub{ font-size:11.5px; color:var(--text2,#64748b); margin:.2rem 0 0; line-height:1.45; }

/* proportion rows: label · bar · count. The bar is decorative (aria-hidden); the count/percentage
   text is the accessible value. Bar widths come from the fixed .hub-rep-w-* utilities below, because
   style-src is 'self' with no 'unsafe-inline' — an inline width style attribute would be blocked. */
.hub-rep-bars{ list-style:none; margin:.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.hub-rep-row{ display:grid; grid-template-columns:minmax(7rem,13rem) 1fr auto; align-items:center; gap:.7rem; }
.hub-rep-row-label{ font-size:12.5px; font-weight:600; color:#334155; overflow-wrap:anywhere; }
.hub-rep-track{ height:10px; background:#eef2f7; border-radius:999px; overflow:hidden; }
.hub-rep-fill{ display:block; height:100%; background:#0f766e; border-radius:999px; }
.hub-rep-row-count{ font-size:12px; font-weight:700; color:#0f172a; white-space:nowrap; }
.hub-rep-row-pct{ font-weight:500; color:var(--text2,#64748b); }
.hub-rep-foot{ margin-top:.2rem; border-left:3px solid var(--line,#e2e8f0); padding-left:.7rem; max-width:80ch; }

/* fixed bar-width utilities (5% steps) — no inline styles under the CSP */
.hub-rep-w-0{ width:0; }      .hub-rep-w-5{ width:5%; }    .hub-rep-w-10{ width:10%; }
.hub-rep-w-15{ width:15%; }   .hub-rep-w-20{ width:20%; }  .hub-rep-w-25{ width:25%; }
.hub-rep-w-30{ width:30%; }   .hub-rep-w-35{ width:35%; }  .hub-rep-w-40{ width:40%; }
.hub-rep-w-45{ width:45%; }   .hub-rep-w-50{ width:50%; }  .hub-rep-w-55{ width:55%; }
.hub-rep-w-60{ width:60%; }   .hub-rep-w-65{ width:65%; }  .hub-rep-w-70{ width:70%; }
.hub-rep-w-75{ width:75%; }   .hub-rep-w-80{ width:80%; }  .hub-rep-w-85{ width:85%; }
.hub-rep-w-90{ width:90%; }   .hub-rep-w-95{ width:95%; }  .hub-rep-w-100{ width:100%; }

@media(max-width:640px){
  .hub-rep-stat-val{ font-size:26px; }
  /* the decorative bar drops on narrow screens; label + count remain */
  .hub-rep-row{ grid-template-columns:1fr auto; }
  .hub-rep-track{ display:none; }
}