/* ============================================================
   FUNDRAISE.CSS
   Phase 4 private fundraising workspace.

   Kept in its own file rather than appended to discovery.css because
   this is a different surface with a different lifetime: discovery is
   public research, this is private workflow. They will diverge, and
   one stylesheet growing without limit is how cascade collisions
   start.

   The visual language is the existing one and deliberately so. A
   founder should not feel they have left the research product and
   entered a CRM. Thin borders, restrained green, high density, data
   as the design. No pipeline confetti.
   ============================================================ */

.fr-wrap { max-width: 940px; }

/* Header entry point, beside the alerts bell. Account-scoped, so it
   is hidden entirely when signed out - an empty workspace nobody can
   open is a dead control, the same reasoning as the bell. */
.pb-raise-btn {
  position: relative; display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-left: 6px; flex: 0 0 auto;
  border: 1px solid var(--hairline-strong); border-radius: 8px;
  background: var(--bg); color: var(--ink-dim); text-decoration: none;
}
.pb-raise-btn:hover { color: var(--ink); border-color: var(--accent); }
.pb-raise-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-raise-btn svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- list ---- */

.fr-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 22px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline);
}
.fr-bar-count {
  font: 500 12.5px/1 var(--sans); color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.fr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.fr-card {
  border: 1px solid var(--hairline-strong); background: var(--bg);
  padding: 16px 18px;
}
/* The active raise is marked with a single left rule, not a coloured
   panel. One signal, the same device the unread alert rail uses. */
.fr-card.is-active { border-left: 3px solid var(--accent); padding-left: 15px; }
.fr-card.is-archived { background: var(--surface); border-color: var(--hairline); }
.fr-card.is-archived .fr-name { color: var(--ink-dim); }

.fr-card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.fr-name {
  font: 600 17px/1.3 var(--sans); color: var(--ink); letter-spacing: -0.01em;
}
.fr-flag {
  font: 600 9.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 3px;
  background: var(--accent-pale); color: var(--accent-bright);
}
.fr-flag-quiet { background: var(--surface-raised); color: var(--ink-muted); }

.fr-company {
  display: flex; align-items: baseline; gap: 8px; margin-top: 4px;
  font: 500 13px/1.4 var(--sans); color: var(--ink-dim);
}
.fr-linked {
  font: 600 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--hairline-strong);
  border-radius: 3px; padding: 2px 5px;
}

/* Facts read as a data strip, not as cards. Tabular figures so the
   amounts line up down a list of raises. */
.fr-facts {
  display: flex; flex-wrap: wrap; gap: 0 26px; margin: 12px 0 0;
}
.fr-facts div { display: flex; flex-direction: column; gap: 2px; }
.fr-facts dt {
  font: 600 9.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted);
}
.fr-facts dd {
  margin: 0; font: 600 14px/1.3 var(--sans); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fr-facts-none {
  margin-top: 10px; font: 400 13px/1.5 var(--sans); color: var(--ink-muted);
}

.fr-desc {
  margin: 12px 0 0; font: 400 13.5px/1.55 var(--sans); color: var(--ink-dim);
  max-width: 66ch;
}
.fr-ctx {
  margin-top: 10px; font: 400 12.5px/1.4 var(--sans); color: var(--ink-muted);
  padding-left: 10px; border-left: 2px solid var(--hairline-strong);
}

.fr-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }

.fr-archived { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.fr-sub {
  font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 6px;
}
.fr-sub-note {
  font: 400 13px/1.5 var(--sans); color: var(--ink-dim);
  margin: 0 0 14px; max-width: 64ch;
}

/* ---- empty state ---- */

.fr-empty {
  border: 1px solid var(--hairline-strong); background: var(--surface);
  padding: 24px; margin-top: 20px; max-width: 62ch;
}
.fr-empty strong { display: block; font: 600 16px/1.4 var(--sans); color: var(--ink); }
.fr-empty p {
  margin: 8px 0 16px; font: 400 14px/1.55 var(--sans); color: var(--ink-dim);
}

/* ---- form ---- */

.fr-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.fr-field-wide { flex: 1 1 auto; }
.fr-label {
  font: 600 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-dim);
}
.fr-optional {
  font-family: var(--sans); letter-spacing: 0; text-transform: none;
  font-weight: 400; color: var(--ink-muted); margin-left: 6px; font-size: 11px;
}
/* minmax(0) so a long select cannot push the row wider than the
   panel; 1fr alone is minmax(auto,1fr) and will not shrink. */
.fr-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.fr-textarea { resize: vertical; min-height: 68px; font-family: var(--sans); }

.fr-note {
  margin: -8px 0 14px; font: 400 12px/1.5 var(--sans); color: var(--ink-muted);
  max-width: 58ch;
}

.fr-ctx-box {
  border: 1px solid var(--hairline); background: var(--surface);
  padding: 12px 14px; margin-bottom: 16px;
}
.fr-ctx-val {
  margin-top: 5px; font: 500 13px/1.45 var(--sans); color: var(--ink);
}
.fr-ctx-box .fr-note { margin: 6px 0 0; }

.fr-form-actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.fr-form-err {
  margin-top: 10px; font: 500 13px/1.5 var(--sans); color: var(--red);
  min-height: 0;
}
.fr-form-err:empty { display: none; }

@media (max-width: 640px) {
  .fr-row { grid-template-columns: minmax(0, 1fr); }
  .fr-facts { gap: 0 18px; }
  .fr-card { padding: 14px; }
  .fr-card.is-active { padding-left: 11px; }
}

/* ---- Add to Raise toast action (Phase 4B) ----
   The toast carries a link because "already in this raise" is only
   useful if you can get to the thing it is talking about. */
.ss-toast-act {
  margin-left: 14px; color: var(--accent); font-weight: 600;
  text-decoration: none; border-bottom: 1px solid currentColor;
}
.ss-toast-act:hover { color: var(--accent-bright); }

/* ============================================================
   RAISE PIPELINE (Phase 4C)

   An institutional table. Density is the product: a founder should
   see stage, contact, relationship and last activity for twenty
   investors without scrolling. No stage colours, no card shadows,
   no progress bars - the stage IS the data, and a select states it
   more precisely than a colour ever could.
   ============================================================ */

.pl-wrap { max-width: 1180px; }

.pl-raise-line {
  font: 500 14px/1.4 var(--sans); color: var(--ink-dim);
  margin: 0 0 20px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.pl-dot { color: var(--ink-muted); }

/* Stage counts double as filters. One click narrows to that stage,
   a second clears it. */
.pl-summary {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--hairline);
}
.pl-stat {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 8px 12px; min-width: 82px; cursor: pointer;
  border: 1px solid var(--hairline-strong); background: var(--bg);
  border-radius: 3px;
}
.pl-stat:hover { border-color: var(--ink-muted); }
.pl-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pl-stat.is-on { border-color: var(--accent); background: var(--accent-pale); }
.pl-stat-n {
  font: 600 19px/1 var(--sans); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pl-stat-l {
  font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted);
}
.pl-stat.is-on .pl-stat-l { color: var(--accent-bright); }

.pl-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px;
}
.pl-search { flex: 1 1 220px; min-width: 0; max-width: 320px; }
.pl-sel { flex: 0 0 auto; }
.pl-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font: 400 13px/1 var(--sans); color: var(--ink-dim); cursor: pointer;
}
.pl-toggle input { accent-color: var(--accent); }
.pl-count {
  margin-left: auto; font: 500 12.5px/1 var(--sans); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* The table scrolls inside its own box so the page never scrolls
   sideways on a narrow screen. */
.pl-tablewrap { overflow-x: auto; border: 1px solid var(--hairline-strong); }
.pl-table {
  width: 100%; border-collapse: collapse; min-width: 940px;
  font: 400 13.5px/1.4 var(--sans);
}
.pl-table thead th {
  text-align: left; padding: 10px 12px; background: var(--surface);
  border-bottom: 1px solid var(--hairline-strong);
  font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); white-space: nowrap;
}
.pl-sort {
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.pl-sort:hover { color: var(--ink); }
.pl-sort.is-on { color: var(--accent-bright); }
.pl-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pl-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.pl-table tbody td {
  padding: 9px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle;
}
.pl-row:hover td { background: var(--surface); }
.pl-row.is-passed td { color: var(--ink-muted); }
.pl-row.is-passed .pl-name a { color: var(--ink-dim); }

.pl-name { min-width: 200px; }
.pl-name a {
  font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pl-name a:hover { border-bottom-color: var(--accent); color: var(--accent-bright); }
.pl-committed {
  display: inline-block; margin-left: 8px;
  font: 600 11px/1 var(--mono); color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}
.pl-reason {
  display: block; margin-top: 3px;
  font: 400 11.5px/1.3 var(--sans); color: var(--ink-muted);
}
.pl-type, .pl-last { white-space: nowrap; color: var(--ink-dim); }
.pl-last { font-variant-numeric: tabular-nums; }
.pl-contact, .pl-fit { color: var(--ink-dim); }
.pl-more {
  margin-left: 6px; font: 600 10.5px/1 var(--mono); color: var(--ink-muted);
}
.pl-none { color: var(--ink-muted); }

/* Selects sit flush in the cell so the table stays dense, and grow a
   border only on interaction. */
.pl-stage-sel, .pl-rel-sel {
  font: 500 12.5px/1.2 var(--sans); color: var(--ink);
  background: var(--bg); border: 1px solid transparent; border-radius: 3px;
  padding: 4px 6px; max-width: 150px; cursor: pointer;
}
.pl-stage-sel:hover, .pl-rel-sel:hover { border-color: var(--hairline-strong); }
.pl-stage-sel:focus-visible, .pl-rel-sel:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.pl-actions { white-space: nowrap; text-align: right; }

@media (max-width: 640px) {
  .pl-summary { gap: 6px; }
  .pl-stat { min-width: 68px; padding: 7px 9px; }
  .pl-stat-n { font-size: 16px; }
  .pl-count { margin-left: 0; width: 100%; }
}

/* ---- Tags, priority and the detail panel (Phase 4D) ---- */

.pl-tag {
  display: inline-block; margin: 0 4px 2px 0; padding: 2px 6px;
  border: 1px solid var(--hairline-strong); border-radius: 3px;
  font: 500 11px/1.3 var(--sans); color: var(--ink-dim); background: var(--bg);
}
.pl-tags { max-width: 190px; }

/* Priority is a small mark, not a coloured row. A pipeline where four
   rows are shouting is a pipeline nobody scans. */
.pl-pri {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; flex: 0 0 auto;
}
.pl-pri-high   { background: var(--accent); }
.pl-pri-medium { background: var(--ink-muted); }
.pl-pri-low    { background: var(--hairline-strong); }

.pd-panel { max-width: 620px; }
.pd-head { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.pd-type, .pd-stage {
  font: 600 9.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 3px;
  background: var(--surface-raised); color: var(--ink-muted);
}
.pd-stage { background: var(--accent-pale); color: var(--accent-bright); }

.pd-sec { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.pd-sec:first-of-type { border-top: 0; padding-top: 0; }
.pd-h {
  font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 12px;
}
.pd-empty { font: 400 13px/1.5 var(--sans); color: var(--ink-muted); margin: 0; max-width: 56ch; }

.pd-contacts { list-style: none; margin: 0; padding: 0; }
.pd-contacts li {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--hairline);
  font: 400 13.5px/1.4 var(--sans);
}
.pd-contacts li:last-child { border-bottom: 0; }
.pd-contacts a { font-weight: 600; color: var(--ink); text-decoration: none; }
.pd-contacts a:hover { color: var(--accent-bright); }
.pd-title { color: var(--ink-muted); font-size: 12.5px; }
.pd-primary {
  font: 600 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-bright); background: var(--accent-pale);
  padding: 3px 5px; border-radius: 3px;
}

.pd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pd-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 8px;
  border: 1px solid var(--hairline-strong); border-radius: 3px;
  font: 500 12px/1.3 var(--sans); color: var(--ink);
}
.pd-tag button {
  background: none; border: 0; padding: 0; cursor: pointer; line-height: 1;
  color: var(--ink-muted); font-size: 13px;
}
.pd-tag button:hover { color: var(--red); }
.pd-tag button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-tagadd { display: flex; gap: 8px; align-items: center; }
.pd-tagadd input { flex: 1 1 auto; min-width: 0; }

.pd-notes { list-style: none; margin: 16px 0 0; padding: 0; }
.pd-note { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.pd-note:last-child { border-bottom: 0; }
.pd-note-body {
  font: 400 13.5px/1.6 var(--sans); color: var(--ink);
  white-space: pre-wrap; word-break: break-word; max-width: 62ch;
}
.pd-note-foot {
  display: flex; align-items: baseline; gap: 14px; margin-top: 7px;
  font: 400 11.5px/1 var(--sans); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.pd-err { margin-top: 12px; font: 500 13px/1.5 var(--sans); color: var(--red); }
.pd-err:empty { display: none; }

@media (max-width: 640px) {
  .pl-tags { max-width: 130px; }
}

/* ---- Next actions and activity timeline (Phase 4E) ---- */

.pl-next { max-width: 210px; }
.pl-next-body {
  display: block; font: 400 12.5px/1.35 var(--sans); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Overdue is the only state that gets a colour, because it is the
   only one a founder scans this column for. */
.pl-next-due {
  display: inline-block; margin-top: 2px;
  font: 500 11px/1 var(--mono); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.pl-next-due.is-overdue { color: var(--red); font-weight: 600; }

.pa-new, .pa-log { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pa-new input[data-pa-body] { flex: 1 1 220px; min-width: 0; }
.pa-log input[data-pa-title] { flex: 1 1 180px; min-width: 0; }
.pa-date { flex: 0 0 auto; width: 152px; }
.pa-att-in { margin-top: 8px; width: 100%; }

.pa-open {
  border: 1px solid var(--hairline-strong); border-left: 3px solid var(--accent);
  padding: 12px 14px; background: var(--bg);
}
.pa-open.is-overdue { border-left-color: var(--red); }
.pa-open-body {
  font: 500 14px/1.45 var(--sans); color: var(--ink); max-width: 56ch;
}
.pa-open-foot {
  display: flex; align-items: baseline; gap: 14px; margin-top: 8px;
}
.pa-due {
  font: 500 11.5px/1 var(--mono); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.pa-due.is-overdue { color: var(--red); font-weight: 600; }

.pd-timeline { margin-top: 16px; }
.pa-timeline { list-style: none; margin: 0; padding: 0; }
.pa-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px;
  padding: 9px 0 9px 13px; border-bottom: 1px solid var(--hairline);
  border-left: 2px solid var(--hairline-strong);
}
.pa-item:last-child { border-bottom: 0; }
/* Manually logged events are marked so the founder can tell what they
   asserted from what the system recorded. */
.pa-item.is-manual { border-left-color: var(--accent); }
.pa-kind {
  grid-column: 1; font: 600 9.5px/1.4 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.pa-when {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font: 400 11.5px/1.4 var(--sans); color: var(--ink-muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pa-sum {
  grid-column: 1; font: 400 13.5px/1.5 var(--sans); color: var(--ink);
  word-break: break-word;
}
.pa-att {
  grid-column: 1; font: 400 12px/1.4 var(--sans); color: var(--ink-muted);
}

@media (max-width: 640px) {
  .pl-next { max-width: 150px; }
  .pa-date { width: 100%; }
  .pa-item { grid-template-columns: minmax(0, 1fr); }
  .pa-when { grid-column: 1; grid-row: auto; }
}

/* ============================================================
   MY POWER BOARD (Phase 4F)

   Five answers in reading order, each a plain section. No cards with
   shadows, no charts where a number will do. A founder opening this
   at 9am should be able to act in about ten seconds.
   ============================================================ */

.mb-wrap { max-width: 1000px; }

.mb-raise {
  border: 1px solid var(--hairline-strong); border-left: 3px solid var(--accent);
  padding: 18px 20px; margin-bottom: 26px;
}
.mb-raise-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.mb-raise-name {
  font: 600 20px/1.25 var(--sans); color: var(--ink);
  letter-spacing: -0.015em; margin: 0;
}

.mb-commit {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline);
}
.mb-commit-row {
  display: flex; align-items: baseline; gap: 12px; padding: 3px 0;
}
.mb-commit-label {
  font: 600 9.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted); min-width: 128px;
}
.mb-commit-n, .mb-commit-amt {
  font: 600 15px/1.3 var(--sans); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mb-commit-amt { color: var(--accent-bright); }
/* The caveat is body text, not fine print. It is the sentence that
   stops the number above being misread. */
.mb-commit-note {
  margin: 8px 0 0; font: 400 13px/1.5 var(--sans); color: var(--ink-dim);
  max-width: 64ch;
}
.mb-bar {
  height: 6px; background: var(--surface-raised); margin-top: 12px;
  border-radius: 3px; overflow: hidden;
}
.mb-bar span { display: block; height: 100%; background: var(--accent); }

.mb-sec { margin-bottom: 30px; }
.mb-sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-bottom: 9px; margin-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.mb-h {
  font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0;
}
.mb-overdue-n {
  font: 600 11.5px/1 var(--sans); color: var(--red);
  font-variant-numeric: tabular-nums;
}
.mb-empty {
  font: 400 13.5px/1.55 var(--sans); color: var(--ink-muted);
  margin: 0; max-width: 64ch;
}

.mb-summary { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.mb-summary .pl-stat { text-decoration: none; }

.mb-att-group { margin-bottom: 16px; }
.mb-att-group:last-child { margin-bottom: 0; }
.mb-att-label {
  font: 600 9.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 7px;
}
.mb-att-group.is-overdue .mb-att-label { color: var(--red); }
.mb-att-list { list-style: none; margin: 0; padding: 0; }
.mb-att-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--hairline);
}
.mb-att-list li:last-child { border-bottom: 0; }
.mb-att-list a {
  display: flex; align-items: baseline; gap: 12px; min-width: 0;
  text-decoration: none; flex-wrap: wrap;
}
.mb-att-who { font: 600 13.5px/1.4 var(--sans); color: var(--ink); }
.mb-att-what {
  font: 400 13px/1.4 var(--sans); color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch;
}
.mb-att-list a:hover .mb-att-who { color: var(--accent-bright); }
.mb-att-due {
  font: 500 11.5px/1 var(--mono); color: var(--ink-muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.mb-att-group.is-overdue .mb-att-due { color: var(--red); font-weight: 600; }
.mb-att-more { font: 400 12px/1 var(--sans); color: var(--ink-muted); padding-top: 6px; }

.mb-activity, .mb-alerts { list-style: none; margin: 0; padding: 0; }
.mb-activity li, .mb-alerts li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--hairline);
}
.mb-activity li:last-child, .mb-alerts li:last-child { border-bottom: 0; }
.mb-act-sum, .mb-alert-sum {
  font: 400 13.5px/1.45 var(--sans); color: var(--ink); min-width: 0;
}
.mb-act-when {
  font: 400 11.5px/1 var(--sans); color: var(--ink-muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.mb-alerts a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; width: 100%; text-decoration: none; flex-wrap: wrap;
}
.mb-alert-tag {
  font: 600 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-bright); background: var(--accent-pale);
  padding: 3px 5px; border-radius: 3px; white-space: nowrap;
}

.mb-links { display: flex; flex-wrap: wrap; gap: 10px; }
.mb-link {
  display: flex; flex-direction: column; gap: 3px; flex: 1 1 200px; min-width: 0;
  border: 1px solid var(--hairline-strong); padding: 13px 15px;
  text-decoration: none; background: var(--bg);
}
.mb-link:hover { border-color: var(--accent); }
.mb-link-n {
  font: 600 20px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums;
}
.mb-link-l { font: 600 12.5px/1.3 var(--sans); color: var(--ink); }
.mb-link-h { font: 400 12px/1.4 var(--sans); color: var(--ink-muted); }

.mb-steps {
  margin: 22px 0 0; padding-left: 20px; max-width: 62ch;
}
.mb-steps li {
  font: 400 14px/1.6 var(--sans); color: var(--ink-dim); margin-bottom: 7px;
}
.mb-steps strong { color: var(--ink); font-weight: 600; }

@media (max-width: 640px) {
  .mb-commit-label { min-width: 0; }
  .mb-commit-row { flex-direction: column; gap: 2px; }
  .mb-att-what { max-width: 100%; }
}

/* ============================================================
   ADD TO RAISE (Phase 4G)

   The control appears on surfaces that are already dense, so it is
   deliberately quiet: a bordered text button that reads as an action,
   never a coloured call-to-action competing with the data.
   ============================================================ */

.ar-btn {
  font: 500 11.5px/1 var(--sans); color: var(--ink-dim);
  background: var(--bg); border: 1px solid var(--hairline-strong);
  border-radius: 3px; padding: 5px 9px; cursor: pointer; white-space: nowrap;
}
.ar-btn:hover { color: var(--accent-bright); border-color: var(--accent); }
.ar-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ar-btn:disabled { opacity: .6; cursor: default; }
/* Once added, the button states the outcome instead of resetting -
   "did that work" is the question right after pressing it. */
.ar-btn.is-done {
  color: var(--accent-bright); border-color: var(--accent);
  background: var(--accent-pale); cursor: default;
}
.ar-btn-quiet { font-size: 11px; padding: 4px 8px; }
.ar-btn-primary { font-size: 12.5px; padding: 7px 12px; font-weight: 600; }

.ar-bar { margin: 0 0 16px; }
.ar-inline { margin-top: 10px; }

/* Rows that are themselves links get wrapped so the button can sit
   beside them: a button cannot live inside an anchor. */
.ar-row { display: flex; align-items: center; gap: 10px; }
.ar-row > a { flex: 1 1 auto; min-width: 0; }

.ar-th, .ar-td { width: 30px; padding-left: 10px !important; padding-right: 0 !important; }
.ar-check { accent-color: var(--accent); cursor: pointer; }
.ar-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The bulk bar only exists while something is ticked, so it never
   sits over the table asking to be dismissed. */
.ar-bulk {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px; z-index: 990;
  background: var(--bg); border: 1px solid var(--accent);
  border-radius: 6px; padding: 11px 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .10);
  max-width: calc(100% - 32px);
}
.ar-bulk-n {
  font: 600 13px/1 var(--sans); color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (max-width: 640px) {
  .ar-row { flex-wrap: wrap; }
  .ar-bulk { bottom: 12px; gap: 10px; padding: 10px 12px; }
}