/* Consultant app components. Loads after tokens.css. */

/* ---- App shell ---- */
body.app { display: flex; height: 100vh; overflow: hidden; }
#sidebar {
  width: 230px; flex: 0 0 230px; background: var(--ink); color: var(--on-ink);
  display: flex; flex-direction: column; padding: 22px 16px; gap: 6px;
}
#sidebar .lockup { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
#sidebar .lockup .mark { width: 40px; color: var(--signal); }
#sidebar .lockup .name { font-family: var(--serif); font-size: 19px; color: #fff; line-height: 1; }
#sidebar .lockup .by { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; color: var(--on-ink-dim); text-transform: uppercase; }
#sidebar .navitem {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r);
  color: var(--on-ink); font-size: 14px; cursor: pointer; border: 0; background: none; width: 100%; text-align: left;
}
#sidebar .navitem:hover:not(.disabled) { background: rgba(255,255,255,.06); text-decoration: none; }
#sidebar .navitem.active { background: rgba(255,255,255,.10); color: #fff; }
#sidebar .navitem.disabled { color: var(--on-ink-dim); cursor: default; }
#sidebar .navitem svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: .85; }
#sidebar .navitem > span:not(.nav-count) { flex: 0 1 auto; }
#sidebar .navitem .nav-count {
  margin-left: auto; background: var(--amber); color: #fff; font-family: var(--mono);
  font-size: 11px; border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center;
}
#sidebar .navitem .nav-count:empty { display: none; }
#sidebar .navregion { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
#sidebar .sidebar-foot { flex: 0 0 auto; }
#sidebar .usercard { display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--ink-line); margin-top: 8px; }
.usercard .t-avatar.person { width: 34px; height: 34px; flex-basis: 34px; }
/* consultantChip's who-sub defaults to --slate, sized for the light rows it
   was written for; against the sidebar's dark ground that is ~2.9:1, under
   the 4.5:1 floor for 12px text. --on-ink-dim is the sidebar's own token for
   this exact job (already carrying .lockup .by and .navitem.disabled). */
#sidebar .usercard .who-sub { color: var(--on-ink-dim); }
#sidebar .logout-btn { width: 100%; margin-top: 8px; background: none; border: 1px solid var(--ink-line); color: var(--on-ink); border-radius: var(--r); padding: 8px 10px; font-family: var(--sans); font-size: 13px; cursor: pointer; }
#sidebar .logout-btn:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; border-bottom: 1px solid var(--line); background: #fff; }
#topbar .section { font-size: 14px; color: var(--slate); }
#topbar .section a { color: var(--slate); }
#topbar .section a:hover { text-decoration: underline; }
#topbar .section .crumb-sep { margin: 0 8px; color: var(--slate); }
#topbar .section .crumb-cur { color: var(--ink); font-weight: 500; }
#view { flex: 1; min-height: 0; padding: 28px 32px 60px; overflow-y: auto; }
.view-wrap { max-width: 1100px; margin: 0 auto; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--signal); color: #fff; border: 0; border-radius: var(--r); padding: 9px 16px; font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--signal-ink); text-decoration: none; }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.hidden { display: none; }

/* ---- List header + controls ---- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 6px 0 18px; }
.page-head h1 { font-size: 30px; }
.controls { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.search { flex: 1; max-width: 420px; position: relative; }
.search .search-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--slate); pointer-events: none; }
.search input { width: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 12px 9px 34px; font-family: var(--sans); font-size: 14px; background: #fff; }
/* List filter buttons (not page tabs): tinted track, white active pill.
   Used by the engagements-list filters and the Stage 4 claim flag filters. */
.filter-bar { display: inline-flex; align-items: center; background: var(--slate-bg); border: 1px solid var(--line); border-radius: var(--r); padding: 2px; }
.filter-bar .filter-btn { border: 0; background: none; padding: 5px 12px; border-radius: var(--r-sm); font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--slate); cursor: pointer; }
.filter-bar .filter-btn.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(21,33,43,.10); }
.filter-bar .filter-btn .count { margin-left: 6px; background: var(--amber); color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-family: var(--mono); }
.filter-bar .filter-btn .count:empty { display: none; }

/* ---- Engagement table ---- */
.eng-table { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.eng-table .thead, .eng-row { display: grid; grid-template-columns: 1.8fr 1.4fr 1.3fr 1.1fr 1.4fr 0.9fr; align-items: center; gap: 14px; padding: 15px 18px; }
.eng-table .thead { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); border-bottom: 1px solid var(--line); }
.att-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--amber); margin-right: 10px; vertical-align: 1px; }
.att-dot.spacer { background: transparent; }
.thead .sortable { cursor: pointer; user-select: none; }
.thead .sortable:hover { color: var(--ink); }
.thead .sorted { color: var(--ink); font-weight: 600; }
.eng-row { border-top: 1px solid var(--line); color: var(--ink); }
.eng-row:first-of-type { border-top: 0; }
.eng-row:hover { background: var(--paper); text-decoration: none; }
.eng-row .client { font-weight: 600; }
.eng-row .sub { color: var(--slate); font-size: 13px; }
.eng-row .engagement { color: var(--ink); }
.eng-row .last { color: var(--slate); font-size: 13px; }
.empty { padding: 40px; text-align: center; color: var(--slate); }

/* ---- Status pill ---- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; border-radius: 999px; padding: 3px 10px; font-weight: 500; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pill.signal { background: var(--signal-bg); color: var(--signal-ink); }
.pill.sage   { background: var(--sage-bg);   color: var(--sage); }
.pill.held   { background: var(--held-bg);   color: var(--held); }
.pill.slate  { background: var(--slate-bg);  color: var(--slate); }
.pill.amber  { background: var(--amber-bg);  color: var(--amber); }
.pill.rust   { background: #fde8e8;          color: #b91c1c; }
/* Document visibility. The class names the setting, so the palette can change
   here without touching a line of JavaScript (issue #145). */
.pill.vis-privileged       { background: var(--vis-privileged-bg);   color: var(--vis-privileged); }
.pill.vis-organisation-only { background: var(--vis-organisation-bg); color: var(--vis-organisation); }
.pill.vis-participant-wide { background: var(--vis-participant-bg);  color: var(--vis-participant); }
.pill.vis-unset            { background: var(--slate-bg);            color: var(--slate); }

#needs-refresh.hidden { display: none; }

/* ---- Engagements list: Needs you cell ----
   Flagged rows get a count badge and a verb, styled as a button so the eye
   lands on it; it is a span, because the whole row is already a link. Quiet
   rows get a ring and the words "On track", which should recede. */
.needs-you .action {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(200, 121, 28, .35); background: var(--amber-bg);
  color: var(--amber); font-family: var(--sans); font-size: 12px;
  font-weight: 600; padding: 5px 10px; border-radius: var(--r);
}
.eng-row:hover .needs-you .action { border-color: var(--amber); }
.needs-you .action .count {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--amber); color: #fff; font-family: var(--mono);
  font-size: 10.5px; line-height: 17px; font-weight: 500; text-align: center;
}
.needs-you .ontrack {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--slate);
}
.needs-you .ontrack .ring {
  width: 13px; height: 13px; border-radius: 999px;
  border: 1.5px solid var(--signal-soft);
}

/* ---- Stage bar ---- */
.stagebar { display: flex; align-items: center; gap: 6px; }
.stagebar .seg { width: 14px; height: 6px; border-radius: 2px; background: var(--line); }
.stagebar .seg.on { background: var(--signal); }
.stagebar .seg.on.cur { background: var(--signal-soft); }
.stagebar .lbl { font-family: var(--mono); font-size: 12px; color: var(--slate); margin-left: 4px; }
/* Attention rows: the current stage segment + count read amber */
.stagebar.att .seg.on.cur { background: var(--amber); }
.stagebar.att .lbl { color: var(--amber); font-weight: 600; }

/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
/* .hidden sets display:none well above this, so the display:flex would win on
   source order and leave an empty picker showing over an empty field. */
.field.hidden { display: none; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.field input, .field select, .field textarea { border: 1px solid var(--line); border-radius: var(--r); padding: 9px 12px; font-family: var(--sans); font-size: 14px; background: #fff; color: var(--ink); }
.field textarea { min-height: 96px; resize: vertical; }
.form-wrap { max-width: 620px; }
.msg { font-size: 13px; min-height: 18px; margin: 8px 0; }
.msg.error { color: var(--held); }
.msg.ok { color: var(--signal-ink); font-weight: 600; background: var(--signal-bg); border-radius: var(--r-sm); padding: 6px 10px; display: inline-block; }

/* ---- Detail ---- */
/* Engagement page: the "Velocity Engagement" design. Extra tokens that would
   live in tokens.css sit in :root here because that file is edit-protected. */
:root { --paper-2: #ECEFEC; --paper-3: #E2E6E2; --line-2: #C5CCC6; }
body[data-page="detail"] .view-wrap { max-width: 1240px; }
.detail-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 8px; flex-wrap: wrap; }
.detail-head h1 { font-size: 31px; letter-spacing: -.01em; }
/* Rewind (issue #191): the confirm-once panel under the engagement head.
   .hidden is restated below because the panel's own display:flex would
   otherwise beat it on source order. */
.rewind-panel { flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.rewind-panel.hidden { display: none; }
.rewind-panel .dim-cell { flex-basis: 100%; font-size: 13px; color: var(--slate); }
.rewind-panel .rw-why { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; font-family: var(--sans); font-size: 13px; background: #fff; flex: 1; min-width: 220px; }
.edit-panel { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.edit-panel.hidden { display: none; }
.edit-panel .ed-field { display: flex; flex-direction: column; gap: 4px; }
.edit-panel .ed-field input, .edit-panel .ed-field select { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; font-family: var(--sans); font-size: 13px; background: #fff; }
.edit-panel .ed-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.detail-meta { margin: 16px 0 28px; }
.detail-people { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.detail-people .grp { display: flex; align-items: center; gap: 9px; }
.detail-people .grp-label { font-family: var(--mono); font-size: 10.5px; color: var(--slate); text-transform: uppercase; letter-spacing: .08em; }
.detail-people .person { display: flex; align-items: center; gap: 9px; }
.av { width: 30px; height: 30px; border-radius: 99px; flex: 0 0 30px; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 600; background: var(--ink); color: #fff; }
.av.sponsor { background: var(--amber); }
.detail-people .person .nm { font-size: 14px; font-weight: 500; line-height: 1.2; }
.detail-people .team { display: flex; gap: 6px; }
.detail-metaline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 26px; margin-top: 20px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; }
.detail-metaline .fact { display: inline-flex; align-items: baseline; gap: 7px; }
.detail-metaline .fl { font-family: var(--mono); font-size: 11px; color: var(--slate); text-transform: uppercase; letter-spacing: .08em; }
.detail-metaline .fv { color: var(--ink); font-weight: 500; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 22px; max-width: 640px; }
.card h2 { font-size: 18px; margin-bottom: 10px; }

/* Documents: collapsible add panel with a drag-and-drop zone. Participants
   and the Stage 4 ask panel share .add-panel. */
.add-panel { margin-bottom: 20px; }
.add-panel .sub { margin-bottom: 12px; }
.ask-text { margin-bottom: 12px; }
.ask-text .k { margin-bottom: 6px; }
.ask-text .k .badge { margin-left: 6px; }
.ask-text textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 12px; font-family: var(--sans); font-size: 14px; background: #fff; color: var(--ink); min-height: 96px; resize: vertical; }
.dropzone { border: 1.5px dashed var(--line); border-radius: var(--r); padding: 24px 18px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone:focus-visible { border-color: var(--signal); background: var(--paper); outline: none; }
.dropzone.dragover { border-color: var(--signal); background: var(--signal-bg); }
.dropzone .dz-icon { font-size: 22px; }
.dropzone .dz-main { font-size: 14px; color: var(--ink); margin-top: 6px; }
.dropzone .dz-link { color: var(--signal); font-weight: 600; text-decoration: underline; }
.dropzone .dz-hint { font-size: 12px; color: var(--slate); margin-top: 6px; }

/* ---- Login (dark, standalone) ---- */
body.login { background: var(--ink); display: flex; align-items: center; justify-content: center; }
.login-shell { width: 100%; max-width: 380px; padding: 24px; }
.login-shell .lockup { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 22px; }
.login-shell .lockup .mark { width: 26px; height: 26px; color: var(--signal); }
.login-shell .lockup .name { font-family: var(--serif); font-size: 24px; color: #fff; }
.login-shell .lockup .by { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; color: var(--on-ink-dim); text-transform: uppercase; }
.login-card { background: #1B2A35; border: 1px solid var(--ink-line); border-radius: var(--r-lg); padding: 26px; }
.login-card h1 { color: #fff; font-size: 22px; margin-bottom: 4px; }
.login-card .tagline { font-family: var(--mono); font-size: 12px; color: var(--on-ink-dim); margin-bottom: 20px; }
.login-card .field label { color: var(--on-ink-dim); }
.login-card .field input { background: #15212B; border-color: var(--ink-line); color: #fff; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 6px; }
.login-card .foot { font-family: var(--mono); font-size: 11px; color: var(--on-ink-dim); margin-top: 16px; text-align: center; }
.login-card .msg.error { color: #FF9B8A; }

@media (max-width: 720px) {
  body.app { flex-direction: column; }
  #sidebar { width: 100%; flex: none; flex-direction: row; flex-wrap: wrap; padding: 12px; }
  #sidebar .navregion { flex-direction: row; flex-wrap: wrap; overflow: visible; min-height: 0; }
  #sidebar .sidebar-foot { width: 100%; }
  .eng-table .thead, .eng-row { grid-template-columns: 1.6fr 1fr 1fr; }
  .eng-row .engagement, .eng-row .stage-cell, .eng-row .last { display: none; }
}

/* ---- Charter review ---- */
/* Issue #19: the charter card spans the view, like the review panel above it. */
#charter.card { max-width: none; padding: 22px 24px; }
.charter-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.charter-head h2 { font-size: 20px; }
.charter-sub { margin: 12px 0; font-size: 15px; }
.charter-sub > div { text-wrap: pretty; }
.charter-sub .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--slate); display: block; margin: 15px 0 3px; }
/* Short facts (timeframe, stakes) share one row on the full-width card. */
.charter-sub > .charter-facts { display: flex; gap: 48px; flex-wrap: wrap; }
.charter-content { white-space: pre-wrap; font-family: var(--mono); font-size: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; overflow-x: auto; margin: 6px 0 0; }
.charter-rendered { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 22px; margin: 6px 0 0; font-size: 17px; line-height: 1.6; }
/* The charter is a reading document: its prose wraps across the full-width
   card (no measure cap) and its type runs a step above the shared .md scale;
   the double class outranks the .md rules further down. */
.md.charter-rendered h1 { font-size: 24px; }
.md.charter-rendered h2 { font-size: 19px; }
.md.charter-rendered h3 { font-size: 17px; }
.md.charter-rendered h4, .md.charter-rendered h5, .md.charter-rendered h6 { font-size: 15px; }
.md.charter-rendered code { font-size: 15px; }
.md.charter-rendered th, .md.charter-rendered td { font-size: 15px; }

/* Rendered-markdown typography (.md), sized to sit inside a card. */
.md h1 { font-size: 20px; margin: 4px 0 12px; }
.md h2 { font-size: 16px; margin: 18px 0 8px; }
.md h3 { font-size: 14px; margin: 14px 0 6px; }
.md h4, .md h5, .md h6 { font-size: 13px; margin: 12px 0 6px; }
.md p { margin: 8px 0; }
.md ul, .md ol { margin: 8px 0; padding-left: 22px; }
.md li { margin: 4px 0; }
.md code { font-family: var(--mono); font-size: 12.5px; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; }
.md pre { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; overflow-x: auto; margin: 8px 0; }
.md pre code { border: 0; padding: 0; background: none; }
.md table { border-collapse: collapse; margin: 10px 0; max-width: 100%; }
.md th, .md td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; font-size: 13px; }
.md th { background: #fff; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); }
.md blockquote { border-left: 3px solid var(--line); margin: 8px 0; padding: 2px 0 2px 12px; color: var(--slate); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.md a { color: inherit; }
.decision { margin-top: 14px; font-size: 14px; padding: 10px 12px; border-radius: var(--r); }
.decision.signed { background: var(--sage-bg); color: var(--sage); }
.decision.rejected { background: var(--held-bg); color: var(--held); }
.decision-actions { display: flex; gap: 10px; margin-top: 16px; }
.charter-actions { display: flex; gap: 10px; margin-top: 16px; }
.charter-history { margin-top: 14px; font-size: 14px; }
.charter-history summary { cursor: pointer; font-weight: 600; }
.charter-history ul { margin: 8px 0 0; padding-left: 18px; }
.charter-history .why { color: var(--slate); }
#edit-reason { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 12px; font-family: var(--sans); font-size: 14px; }
#revise-note { width: 100%; min-height: 80px; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 12px; font-family: var(--sans); font-size: 14px; }

/* ---- Participants ---- */
.ptable { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ptable .pthead, .prow { display: grid; grid-template-columns: 1.3fr 1.1fr 1fr 1.4fr 1fr 0.5fr 0.8fr 1.1fr; align-items: center; gap: 12px; padding: 14px 16px; }
.prow .dim-cell { font-size: 13px; color: var(--slate); overflow-wrap: anywhere; }
.ptable .pthead { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); border-bottom: 1px solid var(--line); }
.prow { border-top: 1px solid var(--line); }
.ptable .pthead + .prow { border-top: 0; }
.prow .sub { font-size: 13px; color: var(--slate); margin-top: 4px; }
.prow .sub.nudge { color: var(--amber); }
.prow .sub.stakeholder { color: var(--slate); font-size: 13px; }
/* Fresh reissued link shown inside the participant's own row */
.prow .row-issued { grid-column: 1 / -1; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.row-issued .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); }
/* Human-referral note: spans the whole row so a paragraph of reason text isn't
   squashed into the status column. */
.prow .row-note { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; background: var(--paper); border-radius: var(--r-sm); padding: 8px 12px; font-size: 13px; line-height: 1.5; color: var(--slate); }
.prow .row-note .row-note-why { overflow-wrap: anywhere; }
.prow .row-note .k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); margin-right: 8px; }
.prow .row-note-action { flex-shrink: 0; }
.prow .row-note-handled { color: var(--slate); }
/* ---- Tasks (boundary review; issues #84, #110-#112; Tasks v2 design) ---- */
.head-actions { display: flex; gap: 10px; }
body[data-page="tasks"] .view-wrap { max-width: 1180px; }
/* Summary card (issue #187): the plan's state and its two decisions on top,
   three figures beneath. */
.summary-card { max-width: none; padding: 20px 24px; margin-bottom: 22px; }
.sum-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sum-left, .sum-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sum-note { color: var(--slate); font-size: 14px; }
.sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px; padding-top: 16px; }
.sum-cell { display: flex; flex-direction: column; gap: 6px; padding: 0 20px 0 24px; border-left: 1px solid var(--line); }
.sum-cell:first-child { padding-left: 0; border-left: 0; }
.sum-num { display: flex; align-items: baseline; gap: 6px; }
.sum-num strong { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.sum-num span, .sum-sub { font-size: 13px; color: var(--slate); }
.sum-dots { display: flex; gap: 5px; }
.sum-dot { flex: 1 1 0; max-width: 34px; height: 6px; border-radius: 999px; background: var(--slate-bg); }
.sum-dot.ok { background: var(--signal); }
.sum-dot.warn { background: var(--amber); }
.sum-dot.bad { background: var(--held); }
.icon-btn { padding: 6px 9px; }
.doc-rendered { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 24px; font-size: 16px; line-height: 1.6; }
.doc-plain { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 24px; white-space: pre-wrap; font-family: var(--mono); font-size: 13px; }
/* The quoted words a consultant arrived at from a claim card (issue #58). */
mark.quote-hit { background: var(--amber-bg); padding: 1px 2px; border-radius: 3px; }
/* On a card the quote itself is the link, so it stays reading as a quote. */
.evidence-quote { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.evidence-quote:hover { text-decoration-style: solid; }
.evidence-source { opacity: 0.7; font-size: 0.9em; }
/* The quote behind one side of a contradiction (issue #58). */
.contradiction-quote { margin: 4px 0 0; font-size: 0.9em; opacity: 0.85; }
.override-form { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 0 4px; }
.override-form .ov-select, .override-form .ov-why { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; font-family: var(--sans); font-size: 13px; background: #fff; }
.override-form .ov-why { flex: 1; min-width: 220px; }
.gate-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 0 2px; }
.gate-confirm .gc-list { margin: 0 0 4px; padding-left: 18px; color: var(--slate); font-size: 13px; flex-basis: 100%; }
.gate-confirm .gc-why { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; font-family: var(--sans); font-size: 13px; background: #fff; flex: 1; min-width: 220px; }
.gate-confirm .gc-hint { flex-basis: 100%; font-size: 13px; margin: 0 0 2px; }
.linklike { background: none; border: 0; color: var(--slate); cursor: pointer; font-family: var(--sans); font-size: 13px; padding: 6px 4px; }
.linklike:hover { color: var(--ink); text-decoration: underline; }
.avatar-cell { display: flex; align-items: center; gap: 10px; }
.t-avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.t-avatar.person { border-radius: 999px; background: var(--slate-bg); color: var(--slate); }
.t-avatar.velocity { background: var(--ink); }
.t-avatar.velocity .mark { width: 22px; }
.t-avatar.person { font-size: 13px; font-weight: 600; }
.who-sub { font-size: 12px; color: var(--slate); overflow-wrap: anywhere; }
.actions-cell { display: flex; align-items: flex-end; gap: 8px; justify-content: flex-end; flex-wrap: wrap; flex-direction: column; }
.task-tray { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; margin-top: 10px; }
/* Goal blocks (issue #187): a gutter with the goal's number, and a card
   carrying the verdict, the evidence, the controls, the task-progress
   strip and the rows. The accent is a solid line in the verdict's colour. */
.btn.dashed { border-style: dashed; color: var(--slate); }
.btn.dashed:hover { border-color: var(--signal); color: var(--signal-ink); background: #fff; }
.goal-block { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; margin: 8px 0 16px; }
.goal-gutter { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; text-align: right; padding-top: 26px; }
.goal-card { max-width: none; padding: 0; overflow: hidden; }
.goal-accent { height: 3px; background: var(--slate-bg); }
.goal-accent.ok { background: var(--signal); }
.goal-accent.warn { background: var(--amber); }
.goal-accent.bad { background: var(--held); }
.goal-body { padding: 20px 24px 8px; display: flex; flex-direction: column; gap: 14px; }
.goal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.goal-title { display: flex; flex-direction: column; gap: 6px; max-width: 630px; }
.goal-title h2 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -.01em; display: inline; margin: 0 8px 0 0; }
.goal-verdict { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600; vertical-align: 2px; white-space: nowrap; }
.goal-verdict.ok { background: var(--signal-bg); color: var(--signal-ink); }
.goal-verdict.warn { background: var(--amber-bg); color: var(--amber); }
.goal-verdict.bad { background: var(--held-bg); color: var(--held); }
.goal-evidence { margin: 0; font-size: 14px; line-height: 1.5; color: var(--slate); }
.goal-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.goal-progress { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 5px 5px; border-radius: var(--r-lg); background: var(--paper); }
.gp-bar { flex: 1; min-width: 180px; display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--slate-bg); }
.gp-bar span { display: block; height: 100%; transition: width .35s ease; }
.gp-bar .gp-done { background: var(--signal-ink); }
.gp-bar .gp-active { background: var(--signal); }
.gp-legend { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--ink-line); }
.gp-legend span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.gp-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line); display: inline-block; }
.gp-dot.signal { background: var(--signal); }
.gp-dot.ink { background: var(--signal-ink); }
.goal-progress .g-collapse { margin-left: auto; padding: 7px 13px; font-size: 13px; color: var(--signal-ink); }
.goal-rows { display: flex; flex-direction: column; }
.goal-empty { padding: 14px 4px 10px; border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .goal-block { grid-template-columns: 1fr; gap: 6px; }
  .goal-gutter { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 12px; padding-top: 0; text-align: left; }
}
.t-also { font-size: 12px; margin-top: 4px; }
/* Rows inside a goal's card (issue #187): mark, title and why, owner, state,
   actions, wrapping onto a second line on a narrow screen. */
.trow { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 12px; align-items: center; padding: 16px 4px; border-top: 1px solid var(--line); }
.trow .t-main { display: flex; gap: 12px; align-items: flex-start; flex: 1 1 450px; min-width: 260px; }
.trow .t-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.trow .t-text strong { font-size: 14.5px; line-height: 1.35; }
.trow .dim-cell { font-size: 13px; color: var(--slate); overflow-wrap: anywhere; max-width: 520px; }
.t-mark { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; border-radius: 5px; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }
.t-mark.done { background: var(--signal); border-color: var(--signal); }
.t-mark.declined { background: var(--held); border-color: var(--held); }
.trow .t-who { flex: 0 0 auto; min-width: 170px; }
.trow .t-state { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; min-width: 120px; }
.t-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--slate); }
.t-status .t-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.t-status.signal { color: var(--signal-ink); }
.t-status.sage { color: var(--sage); }
.t-status.amber { color: var(--amber); }
.t-status.rust { color: #b91c1c; }
.trow .t-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex: 1 0 auto; margin-left: auto; flex-wrap: wrap; }
.trow .task-tray { flex-basis: 100%; margin-top: 0; }
.trow.task-sub .t-main { padding-left: 22px; }
.trow.task-sub.sub-d2 .t-main { padding-left: 44px; }
.trow.declined { opacity: .55; }
.trow.declined .t-text strong { text-decoration: line-through; }
/* The inline add form under a goal (issue #187). */
.add-form { margin: 12px 0 10px; padding: 18px; border: 1px solid var(--signal-bg); border-radius: var(--r-lg); background: #f7f9f7; display: flex; flex-direction: column; gap: 12px; }
.add-form input, .add-form textarea, .add-form select { width: 100%; box-sizing: border-box; padding: 10px 13px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; font-family: var(--sans); font-size: 14px; color: var(--ink); }
.add-form #t-title { font-weight: 600; }
.add-form textarea { resize: vertical; line-height: 1.5; }
.add-row { display: flex; gap: 12px; flex-wrap: wrap; }
.add-row select, .add-row input { flex: 1 1 220px; width: auto; }
.add-row input.hidden { display: none; }
.add-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* tokens.css strips anchor underlines, which left the result links reading
   as plain text; the produced work has to look openable at rest. */
.res-link { text-decoration: underline; text-underline-offset: 2px; }
.run-spinner { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; color: var(--slate); font-size: 16px; }
.run-spinner.hidden { display: none; }   /* compound selector beats .run-spinner so the hidden class wins */
.run-spinner .ti { animation: run-spin 0.9s linear infinite; }
@keyframes run-spin { to { transform: rotate(360deg); } }
/* The stage gate is the page's footer (issue #187): what is outstanding on
   the left, the one button on the right, the confirmation panel beneath. */
.stage-gate-card { max-width: none; margin-top: 16px; padding: 20px 26px; }
.stage-gate-card .gate-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.stage-gate-card .gate-body { flex: 1 1 320px; min-width: 0; }
.stage-gate-card .actions-cell { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.stage-gate-card .t-proceed { padding: 12px 22px; font-size: 14.5px; }
/* The card's text sits behind an information icon in every state (27 Aug):
   the footer is the icon and the button. */
.stage-gate-card .gate-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.stage-gate-card .gate-info { color: var(--slate); padding: 2px 4px; font-size: 18px; line-height: 1; }
.stage-gate-card .gate-info:hover { color: var(--signal-ink); text-decoration: none; }
.stage-gate-card .gate-detail { flex-basis: 100%; margin-top: 4px; }
.stage-gate-card .gate-body > .dim-cell, .stage-gate-card .gate-confirm, .stage-gate-card .gate-progress { flex-basis: 100%; }
.gate-progress:not(:empty) { margin-top: 4px; }
.stage-gate-card .gate-msg { flex-basis: 100%; margin: 0; }
.stage-gate-card .gate-msg:empty { display: none; }
#stage-gate-box .stage-gate-card { margin-top: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.reassign-form { align-items: center; }
.reassign-form .rs-select, .reassign-form .rs-email { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; font-family: var(--sans); font-size: 13px; background: #fff; }
.reassign-form .rs-select { max-width: 420px; }
.rs-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); }
.sub-ico { color: var(--slate); margin-right: 4px; margin-top: 3px; }
.sub-toggle { background: none; border: 0; padding: 0 2px; margin-right: 4px; cursor: pointer; color: var(--slate); font-size: 14px; }
.sub-toggle:hover { color: var(--ink); }
.sub-toggle .sub-count { font-family: var(--mono); font-size: 11px; margin-left: 2px; }
/* The per-task chat: a pop-up over the page, not a panel at its foot.
   Padding lives on the inner box so a click on the dialog element itself
   can only be a backdrop click. */
.chat-modal { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; width: min(560px, 92vw); box-shadow: 0 18px 50px rgba(15, 26, 36, .25); }
.chat-modal::backdrop { background: rgba(15, 26, 36, .45); }
.chat-box { padding: 20px 22px; }
.chat-box h2 { margin-top: 0; }
#chat-turns { max-height: 50vh; overflow-y: auto; }
.chat-modal.wide { width: min(960px, 96vw); }
.chat-modal.wide #chat-turns { max-height: 70vh; }
.chat-box .chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; }
.chat-box .chat-head h2 { margin: 2px 0 0; font-size: 18px; }
.chat-head-btns { display: flex; gap: 6px; }
.turn-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.turn-wrap.mine { align-items: flex-end; }
.turn-name { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); display: inline-flex; align-items: center; gap: 4px; }
.turn-name .mark { width: 12px; height: 12px; }
#chat-form { display: flex; gap: 8px; margin-top: 12px; }
#chat-form #chat-text { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font-family: var(--sans); font-size: 14px; }
.chat-send { border-radius: 999px; }
#chat-form { display: flex; gap: 8px; margin-top: 10px; }
#chat-form input { flex: 1; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; }
.copy-row { display: flex; gap: 8px; margin-top: 6px; }
.copy-row input { flex: 1; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; font-family: var(--mono); font-size: 13px; background: var(--paper); }
#issued .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); }

/* ---- Outreach approval ---- */
.ch-card, .ov-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 12px; }
.ch-card .ch-type { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); margin-bottom: 6px; }
.ch-card .sub, .ov-card .sub { font-size: 13px; color: var(--slate); margin-top: 4px; }
.ch-card .sub .k, .ov-card .sub .k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: var(--slate); margin-right: 6px; }
.ov-head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.ov-draft { width: 100%; min-height: 360px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font-family: var(--sans); font-size: 14px; margin-top: 10px; resize: vertical; }
.ov-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
/* Reject note gets its own full-width row (it was browser-default tiny inline) */
.ov-note { flex: 1 1 100%; width: 100%; min-height: 160px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font-family: var(--sans); font-size: 14px; resize: vertical; }

/* ---- Investigation stepper ---- */
.invest { margin: 20px 0 0; }
.invest-head { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin: 0; }
/* Stage meter: shared by the rail ("Stage N of 6") and the completeness strip. */
.meter { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--slate); }
.meter .meter-lbl { color: var(--ink); font-weight: 500; }
.bars { display: flex; gap: 3px; }
.bars i { width: 22px; height: 5px; border-radius: 99px; background: var(--line); }
.bars i.f { background: var(--signal); }
.invest > .meter { margin: 12px 0 10px; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps .step { display: flex; align-items: flex-start; gap: 11px; padding: 9px 10px; border-radius: var(--r); position: relative; }
.steps .step .node { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11.5px; background: var(--paper); border: 1.5px solid var(--line-2); color: var(--slate); position: relative; z-index: 1; }
.steps .step:not(:last-child)::before { content: ""; position: absolute; left: 22.5px; top: 36px; bottom: -2px; width: 1.5px; background: var(--line); }
.steps .step.done:not(:last-child)::before { background: var(--signal); }
.steps .step.done .node { background: var(--signal); border-color: var(--signal); color: #fff; }
.steps .step.current .node { border-color: var(--signal); color: var(--signal); background: #fff; }
.steps .step .step-title { font-weight: 600; color: var(--ink); }
.steps .step.current .step-title { color: var(--signal); }
.steps .step.current .step-status { color: var(--signal); }
.steps .step.todo .step-title { color: var(--slate); font-weight: 500; }
.steps .step .step-status { font-size: 12.5px; color: var(--slate); margin-top: 1px; }
.steps a.step-title:hover { text-decoration: underline; }

/* ---- Investigation layout + stage focus card ---- */
.invest-layout { display: grid; grid-template-columns: 280px 1fr; gap: 34px; align-items: start; margin-top: 24px; }
.invest-layout .invest { margin-top: 0; }
.stage-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Stage 1 detail (review + charter) spans the full page width below the grid. */
#stage-detail-1 { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
#stage-detail-1.hidden { display: none; }
.ptable.doc-table .pthead, .ptable.doc-table .prow { grid-template-columns: 1.6fr 1.1fr 0.9fr 1fr 1.1fr; }
.prow.withdrawn { opacity: .55; }
.prow.withdrawn a { text-decoration: line-through; }
/* Documents table: file-type icons, source badges, alignment and wrapping.
   Scoped to .doc-table so the shared .ptable/.prow roster styles are untouched.
   --surface-muted/--text-muted would normally live in tokens.css; declared here
   because that file is edit-protected. */
:root { --surface-muted: #F1EFE8; --text-muted: #888780; }
.ptable.doc-table .prow > div { display: flex; align-items: center; gap: 8px; }
.ptable.doc-table .prow > div:first-child { min-width: 0; word-break: break-all; overflow-wrap: anywhere; }
.ptable.doc-table .prow > div:first-child a { word-break: break-all; overflow-wrap: anywhere; }
.doc-file-icon { font-size: 18px; flex-shrink: 0; color: var(--text-muted); }
.icon-pdf  { color: #E03131; }
.icon-docx { color: #1971C2; }
.icon-xlsx { color: #2F9E44; }
.icon-pptx { color: #F59F00; }
.icon-csv  { color: #085041; }
.icon-txt  { color: #495057; }
.icon-img  { color: #9C36B5; }
/* Global badge base; variants below set only their own size, padding and colour. */
.badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; white-space: nowrap; font-size: 12px; padding: 3px 8px; border-radius: var(--r); }
.badge i { font-size: 14px; }
.badge--source { flex-shrink: 0; font-size: 11px; padding: 2px 6px; border-radius: 5px; background: var(--surface-muted); color: var(--text-muted); }
.badge--source i { font-size: 12px; }

/* Stage 4 durable-claim cards: type badge + title, confidence/status flags,
   summary, and evidence rows carrying source badges (reused from documents). */
:root {
  --type-role-bg: #E6F1FB;       --type-role-text: #0C447C;
  --type-process-bg: #EEEDFE;    --type-process-text: #3C3489;
  --type-system-bg: #EAF3DE;     --type-system-text: #27500A;
  --type-policy-bg: #FAECE7;     --type-policy-text: #4A1B0C;
  --type-painpoint-bg: #FCEBEB;  --type-painpoint-text: #791F1F;
  --type-bottleneck-bg: #FAEEDA; --type-bottleneck-text: #633806;
  --type-costitem-bg: #E1F5EE;   --type-costitem-text: #085041;
  --type-void-bg: #F1EFE8;       --type-void-text: #444441;
  --type-handoff-bg: #FBEAF0;    --type-handoff-text: #72243E;
}
/* Shared card structure (claim + validation cards). */
/* In-page section tabs (Stage 4 Living Model): underline tab bar + switched panels. */
.section-tabs-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; border-bottom: 2px solid var(--line); }
.section-tabs-nav.hidden { display: none; }
.section-tab-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 16px 12px; margin-bottom: -2px; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--slate); cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.section-tab-btn:hover { color: var(--ink); }
.section-tab-btn.active { color: var(--signal-ink); border-bottom-color: var(--signal); font-weight: 600; }
.section-tab-btn .tab-badge { background: var(--slate-bg); color: var(--slate); font-family: var(--mono); font-size: 11px; border-radius: 999px; padding: 2px 8px; }
.section-tab-btn.active .tab-badge { background: var(--signal-bg); color: var(--signal-ink); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* Living Model items fill the page; the base .card 640px cap suits prose pages,
   not rows sitting under a full-width toolbar. Outranks .card on specificity. */
.tab-panel .card { max-width: none; }

.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.card-title { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.45; margin: 0; }
.claim-card .card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.claim-card__head-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.claim-card__flags { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.claim-card__summary { font-size: 13px; color: var(--slate); margin: 8px 0 0; }
.claim-card__evidence { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.evidence-row { display: flex; gap: 8px; align-items: flex-start; }
.evidence-row p { font-size: 13px; color: var(--ink); margin: 0; line-height: 1.5; }
/* Numbered evidence (Stage 5 themes): an <ol> with the same class gets a
   reference number per row, 0-based so the Critic's "anchor [n]" points align. */
ol.claim-card__evidence { list-style: none; margin: 0; padding: 8px 0 0 0; counter-reset: evidence -1; }
ol.claim-card__evidence .evidence-row { counter-increment: evidence; }
ol.claim-card__evidence .evidence-row::before { content: counter(evidence); flex-shrink: 0; width: 16px; height: 16px; border-radius: 999px; background: var(--slate-bg); color: var(--slate); font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }

/* Stage 5 Synthesis: a theme sits beside its paired Critic's challenge. */
.theme-critique-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
@media (max-width: 640px) { .theme-critique-grid { grid-template-columns: 1fr; } }
/* Theme leads the pair: reuse the card base plus the role-blue tint + rail. */
.theme-card { background: var(--type-role-bg); border-left: 3px solid var(--type-role-text); }
/* In the narrow two-column grid the head stacks: title (full width) then flags
   below, so long theme names wrap naturally instead of one word per line. */
.theme-card .card-head, .critique-card .card-head { flex-wrap: wrap; }
.theme-card .claim-card__head-left, .critique-card .claim-card__head-left { flex: 1 1 100%; align-items: flex-start; }
.theme-card .card-title, .critique-card .card-title { white-space: normal; }
/* Critique recedes to commentary: default card, quieter title. */
.critique-card .card-title { color: var(--slate); }
.critique-note { font-size: 13px; margin: 6px 0 0; line-height: 1.5; color: var(--ink); }
.critique-note strong { color: var(--slate); font-weight: 600; }
/* Neutral meta chip (theme number, signal share): reuses the global .badge base. */
.badge--meta { background: var(--slate-bg); color: var(--slate); }
.badge--type-role       { background: var(--type-role-bg);       color: var(--type-role-text); }
.badge--type-process    { background: var(--type-process-bg);    color: var(--type-process-text); }
.badge--type-system     { background: var(--type-system-bg);     color: var(--type-system-text); }
.badge--type-policy     { background: var(--type-policy-bg);     color: var(--type-policy-text); }
.badge--type-painpoint  { background: var(--type-painpoint-bg);  color: var(--type-painpoint-text); }
.badge--type-bottleneck { background: var(--type-bottleneck-bg); color: var(--type-bottleneck-text); }
.badge--type-costitem   { background: var(--type-costitem-bg);   color: var(--type-costitem-text); }
.badge--type-void       { background: var(--type-void-bg);       color: var(--type-void-text); }
.badge--type-handoff    { background: var(--type-handoff-bg);    color: var(--type-handoff-text); }

/* Search / filter / sort toolbar. Shared by the Living Model's durable-claims
   and validation-requests panels. */
.list-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.list-controls .search { flex: 1 1 240px; max-width: 420px; }
.list-controls select { border: 1px solid var(--line); border-radius: var(--r); padding: 9px 12px; font-family: var(--sans); font-size: 14px; background: #fff; color: var(--ink); cursor: pointer; }
/* .hidden sets display:none well above this, so the display:flex would win on
   source order and leave an empty toolbar over an empty panel. */
.list-controls.hidden { display: none; }

/* Reusable: a <select> sitting inside a table row. Based on .list-controls
   select, with tighter padding to fit a cell. */
.ptable select { border: 1px solid var(--line); border-radius: var(--r); padding: 4px 8px; font-family: var(--sans); font-size: 14px; background: #fff; color: var(--ink); cursor: pointer; }
/* Visibility select takes the colour of the chosen audience (issue #145): the
   vis-* class (set in app.js, same palette as .pill.vis-*) tints the control.
   vis-unset stays neutral, reading as "choose one" rather than a set value. */
.ptable select.vis-privileged        { background: var(--vis-privileged-bg);   color: var(--vis-privileged);   border-color: var(--vis-privileged-bg); }
.ptable select.vis-organisation-only { background: var(--vis-organisation-bg); color: var(--vis-organisation); border-color: var(--vis-organisation-bg); }
.ptable select.vis-participant-wide  { background: var(--vis-participant-bg);  color: var(--vis-participant);  border-color: var(--vis-participant-bg); }
/* Flag filters reuse the engagements-list filter buttons (.filter-bar / .filter-btn),
   but toggle independently (OR), so more than one .filter-btn may be .active at once. */

/* ---- Contradictions Section Styling ---- */
.contradiction-card { display: flex; flex-direction: column; gap: 12px; margin-bottom:10px; }
.contradiction-body { display: flex; align-items: flex-start; gap: 12px; }
.contradiction-statement { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); font-size: 13.5px; color: var(--ink); line-height: 1.45; height: 100%; }
.contradiction-statement .badge--source { margin-top: auto; }
.contradiction-vs { flex: 0 0 auto; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--slate); text-transform: uppercase; background: var(--slate-bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; align-self: center; }
.card-foot { display: flex; align-items: center; justify-content: flex-end; }
.contradiction-why { line-height: 1.45; }
.contradiction-card .card-foot { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
@media (max-width: 720px) {
 .contradiction-body { flex-direction: column;  align-items: stretch; }
 .contradiction-vs { align-self: center; }
}
/* Validation card: container is .card + this modifier; head/title/foot are shared. */
.validation-card { margin-bottom: 12px; }
.badge--group { padding: 4px 10px; background: var(--type-role-bg, #E6F1FB); color: var(--type-role-text, #0C447C); border: 1px solid rgba(12, 68, 124, 0.15); flex-shrink: 0; }
.validation-card-body { font-size: 13px; }
.val-tray { border-top: 1px solid var(--line); margin-top: 10px; padding: 10px 14px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.v-controls .v-text { width: 100%; }
.v-verb.selected { border-color: var(--sage); }
.btn.v-submit { background: var(--sage); color: #fff; }
.btn.v-submit[disabled] { opacity: 0.5; cursor: not-allowed; }
.v-line { margin-top: 4px; }

.validation-card { display: flex; gap: 10px; }
.validation-card.picked { border-color: var(--sage); background: #FBFCF8; }
.v-pickcol { flex: 0 0 auto; display: flex; align-items: flex-start; padding-top: 4px; }
.v-pickcol input { accent-color: var(--sage); width: 15px; height: 15px; }
/* Master tickbox and counter in the validation toolbar (issue #169). The label
   is for screen readers only; sighted users read the counter beside the box. */
.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; }
.v-selectall { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px; }
.v-selectall input { accent-color: var(--sage); width: 16px; height: 16px; margin: 0; cursor: pointer; }
.v-selectall input:disabled { cursor: not-allowed; }
.v-selectall .count { font-size: 13px; color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
.validation-card-main { flex: 1 1 auto; min-width: 0; }
.invite-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.invite-row .who { font-weight: 600; }

.steps .step { cursor: pointer; }
.steps .step:hover { background: rgba(20, 106, 94, .05); }
.steps .step.selected { background: var(--paper-2); }
.steps .step.review .node { border-color: var(--amber); color: var(--amber); }
.steps .step.review .step-title { color: var(--amber); }
.steps .step.revision .node { border-color: var(--held); color: var(--held); }
.steps .step.revision .step-title { color: var(--held); }
/* The stage card carries its own inner padding per section (head / body /
   strip / actions) so the completeness strip's rule can span edge to edge. */
.stage-focus { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; }
.stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 0; }
.sf-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.sf-title { font-family: var(--serif); font-size: 25px; font-weight: 600; margin: 6px 0 0; }
.sf-body { padding: 14px 24px 0; }
.sf-narrative { color: var(--slate); margin: 0; }
.sf-metrics { display: flex; gap: 28px; margin: 14px 0 0; }
.sf-metric { display: flex; flex-direction: column; }
.sf-metric .sf-num { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.sf-metric .sf-lbl { font-size: 12px; color: var(--slate); margin-top: 4px; }
.sf-gate { border-left: 3px solid var(--amber); background: var(--amber-bg); padding: 10px 14px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink); margin: 16px 0 0; }
/* Completeness strip: meter, check chips and figures inside the stage card. */
.sf-strip { margin: 18px 24px 0; border-top: 1px solid var(--line); padding-top: 16px; }
.sf-strip .meter { margin-bottom: 12px; }
.checks { display: flex; flex-wrap: wrap; gap: 7px; }
.chk { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--paper); border-radius: 99px; padding: 5px 12px 5px 9px; font-size: 12.5px; }
.chk .m { font-size: 11px; width: 14px; text-align: center; }
.chk.yes { border-color: #C6D6C4; background: var(--sage-bg); color: #3F5722; }
.chk.yes .m { color: var(--sage); }
.chk.no { color: var(--slate); }
.stats { display: flex; gap: 28px; margin-top: 14px; }
.stat .n { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.1; }
.stat .l { font-size: 12px; color: var(--slate); }
/* Actions row along the card's bottom edge. */
.sf-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 20px 24px 22px; }
.sf-acts:empty { padding: 0 0 22px; }
.sf-acts .msg:empty { display: none; }
@media (max-width: 720px) { .invest-layout { grid-template-columns: 1fr; } }

/* ---- Sponsor conversation ---- */
#email-btn[disabled] { opacity: .5; cursor: not-allowed; }
.lead-in { border-left: 3px solid var(--line); padding: 4px 0 4px 14px; margin-bottom: 16px; color: var(--ink); }
.lead-in .k, .captured .k, .shared-docs .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); margin-bottom: 6px; }
.handoff { background: #fff7e6; border: 1px solid var(--amber); border-radius: var(--r); padding: 10px 12px; margin-bottom: 16px; font-size: 14px; }
.captured { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.cap-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 4px 0; font-size: 14px; }
.cap-row .cap-k { color: var(--slate); }

/* ---- Charter edit + Stage 1 secondary link ---- */
#edit-content { width: 100%; min-height: 220px; font-family: var(--mono); font-size: 13px; }
.sf-secondary { font-size: 13.5px; color: var(--signal-ink); }
.sf-secondary:hover { text-decoration: underline; }

/* Documents / Tasks strips: one-line cards under the stage card. */
.stage-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 24px; }
.stage-strip.hidden { display: none; }
.stage-strip .strip-title { font-family: var(--serif); font-size: 19px; font-weight: 600; margin: 0 0 2px; }
.stage-strip .strip-sub { margin: 0; color: var(--slate); font-size: 13px; }
.stage-strip .strip-side { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.stage-strip .count { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.stage-strip .count-lbl { color: var(--slate); font-size: 13px; }

/* Senior consultant review, collapsed: a quiet row when there are no flags. */
.review-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 13px 18px; border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: var(--r); background: var(--paper-2); font-size: 13.5px; color: var(--slate); }
.review-row b { color: var(--ink); font-weight: 600; }

/* Senior-consultant sensitivity flags (Stage 1) */
#sensitivity:empty { display: none; }
.sensitivity {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  padding: 18px 20px;
}
.sensitivity .sensitivity-note { color: var(--slate); font-size: 13px; margin: 6px 0 14px; }
.sensitivity .flag-list { list-style: none; padding: 0; margin: 0; }
.sensitivity .flag { padding: 12px 0; border-top: 1px solid var(--line); }
.sensitivity .flag:first-child { border-top: 0; }
.sensitivity .flag-topic { font-weight: 600; color: var(--ink); }
.sensitivity .flag-evidence {
  margin: 6px 0; padding-left: 12px; border-left: 2px solid var(--line);
  color: var(--ink); font-style: italic;
}
.sensitivity .flag-when { font-size: 12px; color: var(--slate); }
.sensitivity .flag-review { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* Sponsor shared documents (Stage 1 attachments) */
.shared-docs { margin-top: 16px; }
.shared-docs .doc { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; margin: 6px 0; }
.shared-docs .doc summary { cursor: pointer; font-weight: 600; }
.shared-docs .doc .at { color: var(--slate); font-weight: 400; font-size: 12px; }
.shared-docs .doc pre { white-space: pre-wrap; margin: 8px 0 0; font-size: 13px; }

/* Participant conversation transcript (read-only) */
.chat-messages { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.chat-messages .bubble { max-width: 80%; padding: 10px 14px; border-radius: var(--r); font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.chat-messages .bubble.agent { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.chat-messages .bubble.participant { align-self: flex-end; background: var(--signal); color: #fff; }
/* Quiet per-turn timestamp footer: no "who said what" header, but the time
   survives. Muted slate on the white agent bubble, muted white on the green. */
.chat-messages .bubble .at { display: block; margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .02em; }
.chat-messages .bubble.agent .at { color: var(--slate); opacity: .8; text-align: left; }
.chat-messages .bubble.participant .at { color: #fff; opacity: .75; text-align: right; }
/* Issue #47: agent turns render markdown; the bubble is pre-wrap for plain
   text, so the rendered container reverts to normal whitespace. */
.chat-messages .bubble .md { white-space: normal; }
.chat-messages .bubble .md > :first-child { margin-top: 0; }
.chat-messages .bubble .md > :last-child { margin-bottom: 0; }
.chat-messages .bubble .md blockquote { border-left-color: var(--signal); }
.chat-messages .bubble .md h1, .chat-messages .bubble .md h2,
.chat-messages .bubble .md h3 { font-size: 14px; margin: 10px 0 4px; }
.proposal-card { border: 1px solid var(--signal); border-radius: var(--r); padding: 10px 12px; margin-top: 6px; max-width: 80%; background: var(--paper); }
.pc-summary { font-weight: 600; margin-bottom: 2px; }
.pc-row { font-size: 13px; margin-top: 4px; }
.pc-k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); margin-right: 6px; }
.pc-actions { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.pc-state { font-size: 13px; color: var(--slate); }
.pc-msg { margin: 6px 0 0; }

/* Living Model (Stage 4) */
.muted { color: var(--slate); }
.claim-supports { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink); }
.claim-supports li { margin: 2px 0; }

/* ---- Indeterminate progress (long-running pipeline runs) ---- */
.progress-track { position: relative; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 10px; }
.progress-fill { position: absolute; top: 0; bottom: 0; width: 35%; border-radius: 999px; background: var(--signal); animation: progress-sweep 1.4s ease-in-out infinite; }
@keyframes progress-sweep { 0% { left: -35%; } 100% { left: 100%; } }
.progress-status { font-size: 12.5px; color: var(--slate); margin-top: 6px; }
.progress-detail { font-size: 12.5px; color: var(--slate); margin-top: 2px; }

/* ---- Stage 6 figure provenance ---- */
.prov-table { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.prov-table .prov-head, .prov-table .prov-row { display: grid; grid-template-columns: 1fr 2.6fr 0.8fr 0.9fr; align-items: start; gap: 12px; padding: 10px 14px; }
.prov-table .prov-head { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); border-bottom: 1px solid var(--line); }
.prov-table .prov-row { border-top: 1px solid var(--line); }
.prov-table .prov-head + .prov-row { border-top: 0; }
.prov-table .prov-kind { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); }
.prov-table .code { font-family: var(--mono); font-size: 13px; }
.prov-table .sub { font-size: 13px; color: var(--slate); margin-top: 2px; }

/* ---- Stage 2 stakeholder map (issue #115) ---- */
.sm-h { font-size: 13px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin: 14px 0 6px; }
.ptable.sm-table { margin-bottom: 4px; }
.ptable.sm-table .pthead, .ptable.sm-table .prow { grid-template-columns: minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.5fr) minmax(0,0.9fr) minmax(0,0.8fr) minmax(0,0.7fr); gap: 12px; padding: 10px 14px; }
.ptable.sm-table .prow.sm-note { grid-template-columns: 1fr; border-top: 0; padding-top: 0; font-size: 13px; color: var(--slate); }
.sm-info { color: var(--slate); padding: 0 2px; font-size: 15px; line-height: 1; vertical-align: middle; }
.sm-info:hover { color: var(--signal-ink); text-decoration: none; }
.sm-issues { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
.ptable.sm-table.sm-informal .pthead, .ptable.sm-table.sm-informal .prow { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,2.2fr) minmax(0,0.6fr); }
.ptable.sm-table .prow > div { min-width: 0; overflow-wrap: anywhere; }
.sm-table input.sm-sens { width: 16px; height: 16px; accent-color: #b91c1c; cursor: pointer; }
.sm-snowball { color: var(--ink); font-size: 14px; margin: 4px 0 0; padding-left: 18px; }
.sm-snowball .muted { color: var(--slate); }

/* ---- Stage 2 validators tab + inline edits (issues #173/#189) ---- */
.ptable.sm-table.sm-validators .pthead, .ptable.sm-table.sm-validators .prow { grid-template-columns: minmax(0,1.6fr) minmax(0,0.7fr) minmax(0,1.2fr) minmax(0,1.5fr) minmax(0,0.8fr) minmax(0,1.2fr); }
.ptable .pthead .sortable { cursor: pointer; user-select: none; }
.ptable .pthead .sortable:hover, .ptable .pthead .sortable.sorted { color: var(--ink); }
.ptable .pthead + .prow-group > .prow:first-child { border-top: 0; }
.ptable.sm-table .prow.sm-rationale { grid-template-columns: 1fr; border-top: 0; padding-top: 0; font-size: 13px; color: var(--slate); }
.sm-validators .sv-action { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.confirmed-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--sage); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ie { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.ie .ie-val { overflow-wrap: anywhere; }
.ie .ie-val.placeholder { color: var(--slate); font-style: italic; }
.ie .ie-edit { color: var(--slate); padding: 2px 4px; font-size: 15px; line-height: 1; opacity: .7; }
.ie .ie-edit:hover { color: var(--signal-ink); opacity: 1; text-decoration: none; }
.ie .ie-input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r); padding: 4px 8px; font-family: var(--sans); font-size: 13.5px; background: #fff; color: var(--ink); }
.ie .ie-save { padding: 4px 8px; font-size: 14px; line-height: 1; }

/* Stage 2 charts (issue #39) */
.chart-block { margin: 12px 0 18px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart-head .sm-h { margin: 0; }
.mermaid-host { overflow-x: auto; padding: 8px 0; }
.mermaid-host svg { max-width: 100%; height: auto; }
.mermaid-src { white-space: pre-wrap; font-size: 12px; background: #f6f6f4; padding: 10px; border-radius: 6px; }
.ptable.sm-table.ch-structure .pthead, .ptable.sm-table.ch-structure .prow { grid-template-columns: 1.5fr 1.5fr minmax(90px,0.7fr) minmax(90px,0.8fr); }
.ptable.sm-table.ch-influence .pthead, .ptable.sm-table.ch-influence .prow { grid-template-columns: 2fr 0.5fr 2fr minmax(100px,0.5fr) minmax(100px,0.5fr) minmax(100px,0.5fr); }
.ptable.sm-table.ch-positions .pthead, .ptable.sm-table.ch-positions .prow { grid-template-columns: 2fr 1fr 1fr 2fr; }
.ch-weight, .ch-power, .ch-interest, #ch-add-weight { width: 5.5em; }
.ch-promote-box { display: inline-flex; gap: 6px; margin-left: 8px; align-items: center; }
.ch-promote-box input { width: 9em; }
.chart-legend { margin: 4px 0 12px; }

/* Hypothesis cards (issue #161) */
.hypothesis-card { margin-bottom: 10px; }
.hypothesis-card details { margin-top: 6px; }
.hypothesis-card summary { cursor: pointer; }
.hypo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }