/* =============================================================================
   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:700; 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:700;
}
.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:700; }
.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:700; 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:600; 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:700; }
.hub-save-label{ font-weight:700; 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-fieldset.hub-material-row{ display:block; }
.hub-field-span2{ grid-column:1/-1; }
.hub-date-time-grid{ display:grid; grid-template-columns:minmax(180px,1fr) minmax(180px,1fr); gap:.7rem; }
.hub-file-input{ padding:.45rem .55rem; height:auto; }
.hub-attachment-current{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  margin-top:.4rem; padding:.45rem .55rem; border:1px solid var(--line,#e2e8f0);
  border-radius:8px; background:#f8fafc; font-size:12px; overflow-wrap:anywhere;
}
.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-date-time-grid{ grid-template-columns:1fr; }
  .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; }
/* A GRID of label+control cells, not a row of loose siblings. Cells size themselves
   between a readable minimum and an equal share, so the bar reflows to one, two or
   four columns without a media query per breakpoint. */
.hub-sess-bar{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.7rem .8rem;
  align-items:end;
  border:1px solid var(--line,#e2e8f0); border-radius:12px; padding:.8rem .9rem; background:#f8fafc;
}
.hub-filter{ display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.hub-filter-wide{ grid-column:span 2; }
.hub-sess-bar .hub-label-static{ margin:0; font-size:11.5px; }
.hub-sess-bar .hub-input{ width:100%; }
.hub-filter-acts{ display:flex; gap:.5rem; align-items:end; justify-content:flex-end; }
.hub-filter-acts .hub-btn{ flex:0 0 auto; }
/* The scope sentence sits on its own full-width row under the controls. */
.hub-filter-scope{
  grid-column:1/-1; margin:.15rem 0 0; font-size:11.5px; color:var(--text2,#64748b);
}
.hub-sess-filter{ min-width:0; }

.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:600; 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{ grid-template-columns:1fr; }
  .hub-filter-wide{ grid-column:auto; }
  .hub-filter-acts{ justify-content:stretch; }
  .hub-filter-acts .hub-btn{ flex:1 1 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; }
/* When it is a LINK it is a control, and a control needs the WCAG 2.2 24px minimum.
   As plain inline text a material link measured 22px on the review record. */
a.hub-detail-strong{ display:inline-flex; align-items:center; min-height:26px; padding:2px 0; }
.hub-detail-sub{ font-size:12px; color:var(--text2); overflow-wrap:anywhere; }
.hub-material-download-row{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin-top:.2rem; }
.hub-material-download{ align-self:flex-start; }
.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-family:var(--font-num); font-size:26px; font-weight:700; 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; }
}

/* ============================================================================
   REDESIGN — consultation wizard (hub-tracker.js)

   The form is now a six-step guided workflow. These rules style the progress
   rail, the step body and the read-back summary. Everything else in the form
   reuses the primitives in styles.css and the .hub-sec/.hub-field rules above.
   ============================================================================ */

/* ---- progress rail -------------------------------------------------------- */
.hub-wiz-rail{
  display:flex; flex-wrap:wrap; gap:.35rem;
  list-style:none; margin:0 0 var(--s5); padding:0;
  counter-reset:none;
}
.hub-wiz-step{ flex:1 1 auto; min-width:0; }
.hub-wiz-btn{
  display:flex; align-items:center; gap:.5rem; width:100%;
  padding:.5rem .7rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--ink-2);
  font:inherit; font-size:var(--fs-sm); font-weight:600; text-align:left;
  cursor:pointer; transition:background .12s, border-color .12s, color .12s;
}
.hub-wiz-btn:hover{ background:var(--canvas-2); border-color:var(--nd-navy-300); }
.hub-wiz-num{
  flex:0 0 20px; width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--canvas-2); color:var(--ink-2);
  font-size:11px; font-weight:700;
}
.hub-wiz-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* current step: fill + weight + aria-current, never colour alone */
.hub-wiz-step.is-current .hub-wiz-btn{
  background:var(--nd-navy); border-color:var(--nd-navy); color:#fff;
}
.hub-wiz-step.is-current .hub-wiz-num{ background:var(--nd-gold); color:var(--nd-navy); }
/* a completed step keeps a check mark as well as the tint */
.hub-wiz-step.is-done .hub-wiz-btn{ border-color:#b7ded9; color:var(--teal); }
.hub-wiz-step.is-done .hub-wiz-num{ background:var(--teal-100); color:var(--teal); }
.hub-wiz-step.is-done .hub-wiz-num::after{ content:"\2713"; }
.hub-wiz-step.is-done .hub-wiz-num{ font-size:0; }
.hub-wiz-step.is-done .hub-wiz-num::after{ font-size:11px; }
.hub-wiz-step.has-problem .hub-wiz-btn{ border-color:#eed6b4; }
.hub-wiz-flag{ margin-left:auto; }

/* ---- step body ------------------------------------------------------------ */
.hub-wiz-body{ display:flex; flex-direction:column; gap:1.1rem; }
.hub-wiz-title{
  margin:0; font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
}
.hub-wiz-title:focus-visible{ outline:2px solid var(--nd-gold); outline-offset:3px; }
.hub-wiz-nav{
  display:flex; gap:.5rem; justify-content:space-between; align-items:center;
  padding-top:var(--s4); border-top:1px solid var(--line-2);
}
.hub-wiz-nav .hub-btn-primary{ margin-left:auto; }

/* ---- the 80-Steps guardrail ----------------------------------------------
   Deliberately the loudest thing on the step. Bad step data flows straight into
   grant metrics, so this warning is not decoration. */
.hub-guardrail{
  margin:0 0 var(--s4); padding:.7rem .9rem;
  background:var(--red-100); border-left:4px solid var(--red);
  border-radius:var(--r);
  color:#7d1b22; font-size:var(--fs-md); font-weight:600; line-height:1.5;
}

/* ---- review-and-submit read-back ------------------------------------------ */
.hub-sum-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 var(--s6);
}
.hub-sum-row{
  display:flex; justify-content:space-between; gap:var(--s4);
  padding:.5rem 0; border-bottom:1px solid var(--line-2);
}
.hub-sum-k{ color:var(--ink-3); font-size:var(--fs-sm); }
.hub-sum-v{ color:var(--nd-navy); font-weight:600; font-size:var(--fs-sm); text-align:right; }

@media(max-width:820px){
  .hub-wiz-rail{ gap:.25rem; }
  .hub-wiz-label{ display:none; }          /* numbers only on narrow screens */
  .hub-wiz-btn{ justify-content:center; padding:.45rem; }
  .hub-wiz-step{ flex:0 0 auto; }
  .hub-sum-grid{ grid-template-columns:minmax(0,1fr); }
}

/* ============================================================================
   REDESIGN — the five product screens

   Layout comes from the primitives in styles.css (.hub-card, .hub-metric,
   .hub-table, .hub-grid-*, .hub-badge, .hub-empty, .hub-status-banner). The
   rules below are typography, spacing and the few screen-specific compositions.
   Namespaced .hub-home-* / .hub-dir-* / .hub-prof-* / .hub-ins-* so nothing
   here can collide with a global selector.
   ============================================================================ */

.hub-home, .hub-dir, .hub-prof, .hub-reporting { display:block; }

/* ---- HOME ----------------------------------------------------------------- */
.hub-home-context{ color:var(--ink-2); font-size:var(--fs-md); max-width:70ch; }
.hub-home-find{ display:block; }
.hub-home-act-titles{ min-width:0; }
button.hub-home-browse{
  display:inline-flex; width:auto; min-height:24px; margin-top:var(--s1); padding:2px 0;
  justify-content:flex-start; border:0; border-radius:0; background:transparent;
  color:var(--accent-2,#0f766e); font-family:inherit; font-size:12px; font-weight:600;
  line-height:1.4; cursor:pointer;
}
button.hub-home-browse:hover{
  border:0; background:transparent; color:#115e59;
  text-decoration:underline; text-underline-offset:3px;
}
.hub-home-search{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s2); align-items:end;
}
.hub-home-search .hub-field,
.hub-home-q{ min-width:0; margin-bottom:0; }
.hub-home-search .hub-field{ position:relative; }
.hub-home-search .hub-btn{ min-height:44px; }
.hub-home-suggest-popover{
  position:absolute; z-index:30; left:0; right:0; top:100%; margin-top:var(--s1);
}
.hub-home-suggestions{
  list-style:none; margin:0; padding:var(--s1); max-height:310px; overflow-y:auto;
  border:1px solid var(--line,#e2e8f0); border-radius:12px; background:#fff;
  box-shadow:0 16px 36px rgba(15,23,42,.16);
}
.hub-home-suggest-item{
  display:flex; flex-direction:column; gap:2px; min-height:44px; padding:9px 11px;
  border-radius:8px; color:var(--ink,#0f172a); cursor:pointer;
}
.hub-home-suggest-item:hover,
.hub-home-suggest-item[aria-selected="true"]{ background:#ecfdf9; }
.hub-home-suggest-name{ font-size:13px; font-weight:700; }
.hub-home-suggest-meta{ color:var(--ink-3,#64748b); font-size:12px; }
.hub-home-suggest-status{
  margin:0; padding:9px 11px; border:1px solid var(--line,#e2e8f0);
  border-radius:10px; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.1);
  color:var(--ink-3,#64748b); font-size:12px;
}
.hub-home-suggest-status.is-error{ color:var(--red,#b42318); }
.hub-home-search-note:empty,
.hub-home-find-note:empty{ display:none; }
.hub-home-search-note,
.hub-home-find-note{ flex:1 1 100%; font-size:var(--fs-sm); color:var(--amber); margin-top:var(--s2); }
.hub-home-callout-list{ list-style:none; margin:var(--s2) 0 0; padding:0; display:flex;
  flex-direction:column; gap:var(--s1); }
.hub-home-callout-list .hub-table-row-btn{ color:#7a4400; }
.hub-home-callout-list .hub-table-row-btn:hover{ color:#5c3300; }
.hub-home-note{
  margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--line-2);
  font-size:var(--fs-sm); color:var(--ink-3); max-width:78ch;
}

/* ---- ENTREPRENEUR DIRECTORY ----------------------------------------------- */
.hub-dir-bar{ display:flex; gap:var(--s3); align-items:flex-end; flex-wrap:wrap;
  margin-bottom:var(--s5); }
.hub-dir-field{ flex:1 1 220px; margin-bottom:0; }
.hub-dir-cohort{ flex:0 1 200px; margin-bottom:0; }
.hub-dir-field-act{ flex:0 0 auto; display:flex; gap:var(--s2); }
.hub-dir-lead{ color:var(--ink-2); font-size:var(--fs-md); max-width:70ch; margin-bottom:var(--s4); }
.hub-dir-note{ margin-top:var(--s3); font-size:var(--fs-sm); color:var(--ink-3); max-width:78ch; }
.hub-dir-name{ font-weight:600; }
.hub-dir-cohort-cell{ white-space:nowrap; }
.hub-dir-empty-act{ margin-top:var(--s4); display:flex; gap:var(--s2); justify-content:center; }
.hub-dir-search{ display:contents; }
.hub-dir-body{ display:block; }

/* ---- ENTREPRENEUR PROFILE -------------------------------------------------- */
.hub-prof-bar{ display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap;
  margin-bottom:var(--s5); }

/* The header is a SUMMARY BAND: identity on the left, the one primary action on
   the right, and a quiet information strip below — no coloured top rule, no
   floating KPI cards, no badge repeating what the shell already establishes. */
.hub-prof-head{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s5) var(--s6); margin-bottom:var(--s6);
}
.hub-prof-head-top{ display:flex; gap:var(--s4); align-items:flex-start;
  justify-content:space-between; flex-wrap:wrap; }
.hub-prof-ident{ min-width:0; }
.hub-prof-name{ font-family:var(--font-head); font-size:20px; font-weight:700;
  color:var(--ink); letter-spacing:-.02em; margin:0; }
.hub-prof-subline{ color:var(--ink-2); font-size:var(--fs-md); margin-top:2px; }
.hub-prof-head-actions{ display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; }
.hub-iconbtn{ padding:0; width:30px; height:30px; display:inline-flex;
  align-items:center; justify-content:center; }

/* The information strip: label-over-value pairs in one row that wraps. Plain,
   equal, and uncoloured — none of the three-cards-with-coloured-top-rules look. */
.hub-prof-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:var(--s3) var(--s5); margin:var(--s4) 0 0; padding-top:var(--s4);
  border-top:1px solid var(--line-2); }
.hub-prof-strip-item{ min-width:0; }
.hub-prof-strip dt{ font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); }
.hub-prof-strip dd{ margin:2px 0 0; font-size:var(--fs-md); font-weight:600;
  color:var(--ink); overflow-wrap:anywhere; }
.hub-prof-strip-inline{ border-top:0; padding-top:0; margin:0 0 var(--s3);
  grid-template-columns:repeat(auto-fit, minmax(130px, max-content)); }

/* A section is a division of the page: hairline rule above, title, content. The
   old treatment (each section a floating white card with its own source pill)
   is what made the profile read as a template. Provenance now lives in the one
   "About this information" disclosure at the foot of the page. */
.hub-prof-sec{ border-top:1px solid var(--line); padding-top:var(--s5);
  margin-bottom:var(--s6); }
.hub-prof-secbody{ margin-top:var(--s3); }

/* First-visit ready state: purposeful and compact — a statement, two lines of
   guidance, and the action. Not a billboard. */
.hub-prof-ready{ border-left:3px solid var(--accent); background:var(--surface2);
  border-radius:var(--r-sm); padding:var(--s4) var(--s5); }
.hub-prof-ready-t{ margin:0; font-size:var(--fs-md); font-weight:600; color:var(--ink); }
.hub-prof-ready-s{ margin:4px 0 0; font-size:var(--fs-sm); color:var(--ink-2);
  max-width:64ch; }
.hub-prof-ready .hub-btn{ margin-top:var(--s3); }

/* The provenance disclosure. Small, closed by default, and the only place the
   page talks about its own data model. */
.hub-prof-about{ border-top:1px solid var(--line); padding-top:var(--s4);
  margin-bottom:var(--s6); font-size:var(--fs-sm); color:var(--ink-3); }
.hub-prof-about summary{ cursor:pointer; font-weight:600; color:var(--ink-2);
  font-size:var(--fs-sm); }
.hub-prof-about-body{ margin-top:var(--s3); max-width:78ch; }
.hub-prof-about-body ul{ margin:0; padding-left:1.1rem; }
.hub-prof-about-body li{ margin-bottom:var(--s2); line-height:1.55; }
.hub-prof-sub-h{ font-size:var(--fs-sm); font-weight:700; color:var(--ink-2);
  letter-spacing:.04em; text-transform:uppercase; margin:var(--s4) 0 var(--s2); }

.hub-prof-list{ list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:var(--s2); }
.hub-prof-item{
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  padding:var(--s3); background:var(--canvas); border:1px solid var(--line-2);
  border-radius:var(--r);
}
.hub-prof-item-main{ flex:1 1 260px; min-width:0; font-size:var(--fs-md); color:var(--ink); }
.hub-prof-item-meta{ display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap;
  font-size:var(--fs-sm); color:var(--ink-3); }
.hub-prof-desc{ color:var(--ink-2); font-size:var(--fs-md); line-height:1.6;
  max-width:76ch; margin-top:var(--s2); }

.hub-prof-needs-list{ display:flex; flex-direction:column; gap:var(--s3); }
.hub-prof-need-head{ display:flex; justify-content:space-between; gap:var(--s3);
  margin-bottom:5px; }
.hub-prof-need-label{ font-size:var(--fs-md); color:var(--ink); }
.hub-prof-need-count{ font-size:var(--fs-sm); color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Sections 6 and 7 must never be mistaken for each other. 6 is the shared UPBI
   record; 7 is what Hub consultants recorded. Different left rule, different tint. */
.hub-prof-official-lead{
  padding:var(--s3) var(--s4); margin-bottom:var(--s4);
  background:#e9f0fa; border-left:3px solid var(--nd-navy);
  border-radius:var(--r); color:var(--nd-navy-700); font-size:var(--fs-md);
}
.hub-prof-deliv-caption{
  padding:var(--s3) var(--s4); margin-bottom:var(--s4);
  background:var(--teal-100); border-left:3px solid var(--teal);
  border-radius:var(--r); color:#0b5b55; font-size:var(--fs-md);
}
/* Honest, and QUIET: two left-aligned lines saying a read is not enabled yet, not
   a centred dashed billboard announcing it. */
.hub-prof-notconnected{
  padding:var(--s3) var(--s4); text-align:left;
  background:var(--surface2); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ink-3); font-size:var(--fs-sm); max-width:74ch;
}
.hub-prof-notconnected strong{ display:block; color:var(--ink-2); margin-bottom:var(--s2); }

.hub-prof-links{ list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:var(--s2); }
.hub-prof-link{ display:flex; gap:var(--s2); align-items:baseline; flex-wrap:wrap;
  font-size:var(--fs-md); }
.hub-prof-record{ margin-top:var(--s4); }
.hub-prof-choose{ padding:var(--s9) var(--s6); text-align:center; }

/* ---- INSIGHTS -------------------------------------------------------------- */
.hub-ins-body{ display:block; }
/* A GRID, so the four controls line up on one row and their explanatory notes hang
   beneath their own control. As a flex row with align-items:flex-end, a cell carrying
   a four-line note dragged its neighbours out of alignment and the bar rendered as a
   staircase of misplaced labels. */
.hub-ins-filters{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--s3); align-items:start;
}
.hub-ins-filter, .hub-ins-from, .hub-ins-to, .hub-ins-cohort, .hub-ins-consultant{
  display:flex; flex-direction:column; gap:4px; min-width:0; margin-bottom:0;
}
.hub-ins-filters .hub-input, .hub-ins-filters .hub-select{ width:100%; }
.hub-ins-filter-actions{ flex-direction:row; align-items:end; gap:var(--s2); }
.hub-ins-filter-actions .hub-btn{ flex:1 1 0; }
.hub-ins-cohort-note, .hub-ins-consultant-note, .hub-ins-export-note{
  flex:1 1 100%; font-size:var(--fs-sm); color:var(--ink-3); margin-top:var(--s2);
}
.hub-ins-note, .hub-ins-scope{ font-size:var(--fs-sm); color:var(--ink-3);
  max-width:80ch; margin-bottom:var(--s4); }
/* Inside the control grid the note belongs to ONE control, so it stays in that
   column and does not set the row height for its neighbours. */
.hub-ins-filters .hub-ins-note{ margin:0; font-size:var(--fs-xs); line-height:1.45; }
.hub-ins-bars{ display:flex; flex-direction:column; gap:var(--s3); }
.hub-ins-row{ display:grid; grid-template-columns:minmax(120px,1.1fr) 3fr auto;
  gap:var(--s3); align-items:center; }
.hub-ins-row-label{ font-size:var(--fs-md); color:var(--ink); min-width:0;
  overflow:hidden; text-overflow:ellipsis; }
/* Same 24px-minimum target rule as the table row buttons: this is how a reader
   opens a category's subcategories, and at padding:0 it was a 20px strip. */
button.hub-ins-row-label{ background:none; border:0; margin:0; padding:4px 0;
  min-height:26px; max-width:100%; display:inline-flex; align-items:center; font:inherit;
  color:var(--nd-navy-700); font-weight:600; text-align:left; cursor:pointer; }
button.hub-ins-row-label:hover{ text-decoration:underline; }
.hub-ins-row-val{ font-size:var(--fs-sm); color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.hub-ins-move{ display:flex; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s3); }
.hub-ins-move-item{ flex:1 1 180px; padding:var(--s3); background:var(--canvas);
  border:1px solid var(--line-2); border-radius:var(--r); font-size:var(--fs-sm);
  color:var(--ink-2); }
.hub-ins-move-delta{ display:block; font-size:var(--fs-xl); font-weight:600;
  color:var(--teal); font-variant-numeric:tabular-nums; }
.hub-ins-cols{ margin:var(--s3) 0 0; padding-left:1.2rem; color:var(--ink-2);
  font-size:var(--fs-sm); columns:2; column-gap:var(--s7); }
.hub-ins-cols li{ break-inside:avoid; margin-bottom:3px; }
.hub-ins-export{ display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; }
.hub-ins-foot{ margin-top:var(--s6); padding-top:var(--s4);
  border-top:1px solid var(--line-2); font-size:var(--fs-sm); color:var(--ink-3);
  max-width:80ch; }

/* ---- responsive ------------------------------------------------------------ */
@media(max-width:900px){
  .hub-prof-strip{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hub-prof-facts{ grid-template-columns:minmax(0,1fr); }
  .hub-ins-cols{ columns:1; }
}
@media(max-width:640px){
  .hub-home-search{ grid-template-columns:minmax(0,1fr); }
  .hub-home-search .hub-btn{ width:100%; }
  .hub-prof-strip{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hub-prof-head{ padding:var(--s4) var(--s5); }
  .hub-prof-head-actions .hub-btn-primary{ width:100%; }
  .hub-prof-name{ font-size:var(--fs-xl); }
  .hub-ins-row{ grid-template-columns:1fr auto; }
  .hub-ins-row .hub-bar{ display:none; }   /* label + count survive; the bar is decorative */
  .hub-dir-field, .hub-dir-cohort, .hub-dir-field-act{ flex:1 1 100%; }
}

/* Section hooks — the profile numbers its nine sections so a test (and a reviewer)
   can address one directly. No visual weight of their own; spacing comes from
   .hub-prof-sec, which each of them also carries. */
.hub-prof-s1, .hub-prof-s2, .hub-prof-s3, .hub-prof-s4, .hub-prof-s5,
.hub-prof-s6, .hub-prof-s7, .hub-prof-s8, .hub-prof-s9{ display:block; }
.hub-prof-needs{ display:block; }
.hub-prof-need{ display:block; }
.hub-sum{ display:block; }

/* ---- directory table fit -------------------------------------------------
   Nine columns in ~1130px. Without these the Stage cell wrapped to three lines
   on every row and the row action was pushed past the card's scroll edge, so
   the primary action on the page was invisible. */
.hub-dir .hub-table th, .hub-dir .hub-table td { padding-left: 10px; padding-right: 10px; }
.hub-dir .hub-table td:first-child { font-weight: 600; }
.hub-dir-act { text-align: right; white-space: nowrap; width: 1%; }
.hub-dir-act .hub-btn, .hub-dir-act .pa { white-space: nowrap; }
.hub-dir-cohort-cell { min-width: 118px; }

/* Home's row-level action COLUMN. Named -rowact, not -act: .hub-home-act is already
   the "Start a consultation" CARD, and styling both with white-space:nowrap stopped
   that card's paragraph wrapping, which widened it until the two-column grid pushed
   the whole page into a horizontal scroll at every width. */
.hub-home-rowact { text-align: right; white-space: nowrap; width: 1%; }

/* -- Profile: "What needs doing" -------------------------------------------
   The immediate-action band under the identity card. One row per outstanding
   thing, each ending in the control that resolves it. Tone is carried by the
   left rule and the mark, never by colour alone. */
.hub-prof-todos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hub-prof-todo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface);
}
.hub-prof-todo.is-warn { border-left: 3px solid var(--warn); }
.hub-prof-todo.is-info { border-left: 3px solid var(--accent); }
.hub-prof-todo-mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700;
  background: var(--accent-bg); color: var(--navy);
}
.hub-prof-todo.is-warn .hub-prof-todo-mark { background: var(--warn-bg); color: var(--warn); }
.hub-prof-todo-body { flex: 1 1 auto; min-width: 0; }
.hub-prof-todo-title { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.hub-prof-todo-sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }
.hub-prof-todo .hub-btn { flex: none; }
@media (max-width: 640px) {
  .hub-prof-todo { flex-wrap: wrap; }
  .hub-prof-todo .hub-btn { width: 100%; }
}

/* The submit bar while the consultant is still moving through the wizard: present,
   so submission is never hidden, but visibly not the action of this step. */
.hub-submit-bar.is-quiet { background: var(--surface2); border-style: dashed; }

/* The review queue is worked top to bottom and can hold thirty submissions, so its
   rows are tighter than the browsable Consultations list they share markup with. */
#hub-review .hub-sess-row{ padding:.55rem .8rem; }
#hub-review .hub-sess-biz{ margin-top:0; }

/* ---- USERS & ACCESS -------------------------------------------------------
   Reuses the shared .hub-section / .hub-card / .hub-table / .hub-badge / .hub-btn
   system. Only the two things this screen adds get rules: the add-consultant
   form grid and the row-action cell. */
.hub-users{ display:block; }
.hub-users-form{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s3) var(--s4); align-items:end;
}
.hub-users-form .hub-filter{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.hub-users-form .hub-filter-wide{ grid-column:span 2; }
.hub-users-form .hub-input{ width:100%; }
.hub-users-form .hub-filter-acts{ display:flex; align-items:end; }
.hub-users-form .hub-filter-acts .hub-btn{ white-space:nowrap; }
.hub-users-name{ font-weight:600; color:var(--ink); }
.hub-users-email{ overflow-wrap:anywhere; }
.hub-users-acts{ text-align:right; white-space:nowrap; }
.hub-users-acts .hub-btn{ margin-left:6px; }
@media (max-width:640px){
  .hub-users-form .hub-filter-wide{ grid-column:auto; }
  .hub-users-acts{ text-align:left; white-space:normal; }
  .hub-users-acts .hub-btn{ margin:4px 6px 0 0; }
}

/* ---- DEMO CONTROL BAR (mock only) buttons --------------------------------- */
.hub-dev-btn{
  font:inherit; font-weight:700; font-size:11px; padding:.3rem .55rem; border-radius:8px;
  border:1px solid #fdba74; background:#fff; color:#7c2d12; cursor:pointer; min-height:32px;
}
.hub-dev-btn:hover{ background:#fff7ed; }

/* ---- PRODUCT TOUR overlay (demo only) ------------------------------------- */
.hub-tour-scrim{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:rgba(7,29,51,.55); padding:var(--s5);
}
.hub-tour-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); max-width:560px; width:100%; max-height:88vh; overflow:auto;
  padding:var(--s6);
}
.hub-tour-card h2{ font-family:var(--font-head); font-size:18px; font-weight:700; margin:0 0 var(--s4); }
.hub-tour-list{ margin:0; padding:0; list-style:none; display:grid; gap:var(--s3); }
.hub-tour-list li{ font-size:var(--fs-md); color:var(--ink-2); line-height:1.5; }
.hub-tour-step{
  display:inline-block; font-weight:700; color:var(--ink); margin-right:6px;
}
.hub-tour-foot{ margin-top:var(--s5); display:flex; justify-content:flex-end; }