/* onboarding-internal.css — the Mesh door (#internalPage, route 'internal') and
 * the body.mesh-internal view mode. Owned by onboarding-owner. Tokens only.
 * Prefix: .mi-* (new classes only; rows reuse .su-* from onboarding-board.css).
 * Loaded after onboarding-board.css. */

/* ── Page shell (mirrors .su-page) ── */
.mi-page { flex: 1; display: none; flex-direction: column; overflow: hidden; background: var(--color-surface-0); }
.mi-page.active { display: flex; }

/* ── The "View as" link in either page's header ── */
.mi-head, .mi-hashead { position: relative; }
.mi-viewas { position: absolute; right: 0; top: var(--space-1); display: inline-flex; align-items: center; gap: var(--space-2);
  height: 26px; padding: 0 var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--color-surface-0); font-family: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }
.mi-viewas:hover { color: var(--color-text-strong); background: var(--color-surface-1); }

/* ── Client-status band ── */
.mi-band { padding: var(--space-2) var(--space-6); }
.mi-row { display: grid; grid-template-columns: 14px 150px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-surface-2); font-size: var(--text-sm); }
.mi-row:last-child { border-bottom: 0; }
.mi-row-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--color-border-strong); justify-self: center; }
.mi-row.is-done .mi-row-dot { background: var(--color-success); border-color: var(--color-success); }
.mi-row.is-now .mi-row-dot { background: var(--color-warning); border-color: var(--color-warning); }
.mi-row-l { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.mi-row-v { color: var(--color-text-strong); line-height: var(--leading-normal); }
.mi-row.is-todo .mi-row-v { color: var(--color-text-muted); }
/* a row Mesh has asked about: the question sits under the value until they reply */
.mi-row.is-asked .mi-row-dot { background: var(--color-warning); border-color: var(--color-warning); }
.mi-row-ask { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--color-warning); line-height: var(--leading-normal); }
.mi-row-ask.is-back { color: var(--color-text-muted); }
.mi-row-acts { display: flex; align-items: center; gap: var(--space-2); justify-self: end; white-space: nowrap; }
/* both actions stay on the row: the way in has to be findable, not hovered for */
.mi-band-btn { height: 24px; padding: 0 var(--space-3); }
.mi-band-btn[data-mi-act="bandview"] { color: var(--color-text-muted); }
.mi-band-btn[data-mi-act="bandview"]:hover { color: var(--color-text-strong); }
/* Ask for more — the note Mesh sends back with the task */
.up-modal.mi-ask-modal { width: 520px; }
.mi-ask-lbl { display: block; font-size: var(--text-xs2); font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-subtle); }
.mi-ask-note { margin-top: var(--space-2); }
.mi-ask-foot-s { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-subtle); }

/* ── Mesh tasks: one card per step — the header row (.su-row anatomy, so the
   owner / status / actions columns line up with the sub-rows) over its sub-tasks ── */
.mi-steps { display: flex; flex-direction: column; gap: var(--space-6); }
.mi-step-hd { background: var(--color-surface-1); }
.mi-step-hd .su-row-t { font-weight: var(--weight-semibold); }
.mi-step-hd .su-row-s { max-width: 64ch; }
.mi-step-hd .su-row-acts { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); }
.mi-step-prog { font-size: var(--text-xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* fold: a finished step is its header row only (T9); the chevron in the actions column reopens it */
.mi-step-fold { width: 26px; padding: 0; justify-content: center; }
.mi-step-fold > svg { transition: transform var(--dur-fast); }
.mi-step-hd.is-folded .mi-step-fold > svg { transform: rotate(-90deg); }
.mi-step.is-folded .mi-step-hd { border-bottom: 0; }
/* one line per sub-task: the title and the live line share it, ellipsized; the
   full text is on hover. The review items are not rendered here at all (they
   live on the screen that owns them), so the row cannot grow past its line. */
.mi-sub { padding-top: var(--space-3); padding-bottom: var(--space-3); align-items: center; }
.mi-sub .su-row-body { overflow: hidden; }
.mi-sub .onb-review-dot { margin-top: 0; }
.mi-sub-line { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.mi-sub-line .su-row-t { flex-shrink: 0; font-size: var(--text-sm); }
.mi-sub-s { margin-top: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-sub.is-open .mi-sub-line { flex-wrap: wrap; }
.mi-sub.is-open .mi-sub-s { white-space: normal; flex-basis: 100%; }
.mi-sub .su-row-own, .mi-sub .su-row-st, .mi-sub .su-row-acts { min-height: 26px; }

/* ── Reassignable owner chip ── */
.mi-ownwrap { position: relative; display: inline-flex; }
.mi-own { cursor: pointer; font-family: inherit; padding-right: var(--space-2); }
.mi-own:hover { border-color: var(--color-border-strong); background: var(--color-surface-1); }
.mi-own > svg { color: var(--color-text-subtle); flex-shrink: 0; }
.mi-ownmenu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 60; min-width: 180px; padding: var(--space-1);
  background: var(--color-surface-0); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); }
.mi-ownmenu-lbl { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-xs2); font-weight: var(--weight-semibold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-subtle); }
.mi-ownmenu-i { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-control); background: none; font-family: inherit; font-size: var(--text-xs);
  color: var(--color-text-strong); cursor: pointer; text-align: left; }
.mi-ownmenu-i:hover { background: var(--color-surface-2); }
.mi-ownmenu-i.is-on { background: var(--bg-info); }
.mi-ownmenu-i > svg { margin-left: auto; color: var(--color-brand-500); }

/* ── The "View as" row in the avatar popover ── */
.mi-rp-ico { color: var(--color-extra-reliable-blue); background: var(--bg-info); }
.rp-role.active .mi-rp-ico { background: var(--color-extra-reliable-blue); color: var(--color-pure-white); }

/* ── Readiness checks table (the .asn-table styling, inside a .ph-card) ── */
.mi-tbl-wrap { padding: 0; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.mi-tbl { border: 0; border-radius: 0; }
.mi-tbl th, .mi-tbl td { white-space: normal; vertical-align: middle; }
.mi-tbl thead th { position: static; }
.mi-check-t { font-weight: var(--weight-medium); color: var(--color-text-strong); }
.mi-check-s { margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-subtle); }
.mi-result { white-space: nowrap; }
.mi-result--notrun { color: var(--color-text-muted); background: var(--color-surface-2); }
.mi-acts { display: flex; gap: var(--space-2); justify-content: flex-end; white-space: nowrap; }
.mi-acts .su-btn.is-on { border-color: var(--color-success); color: var(--color-success); background: var(--bg-success); }
.mi-acts .su-btn.is-warn { border-color: var(--color-warning); color: var(--color-warning); background: var(--bg-warning); }

/* ── Notify hero ── */
.mi-hero { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-7); background: var(--bg-info); }
.mi-hero.is-sent { background: var(--bg-success); }
.mi-hero-body { flex: 1; min-width: 0; }
.mi-hero-t { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.mi-hero-s { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); max-width: 64ch; line-height: var(--leading-normal); }
.mi-hero-btn { height: 32px; padding: 0 var(--space-6); font-size: var(--text-sm); flex-shrink: 0; }
.mi-hero-btn:disabled { opacity: .45; cursor: default; }

/* ── On Northwind's page: the question row, and the ready hero fallback ── */
.mi-needs .su-row-t { color: var(--color-warning); }
.mi-ready-hero { margin-top: var(--space-6); }

/* ── One row per thing ───────────────────────────────────────────────────
   Audit, 09/14. The card used to hold two lists — the live Mesh tasks and,
   under them, the write-up's items — and in the mapping group they were the
   same three things twice. Now there is one list, on the page's own five
   tracks, so the number, the title, who does it, the status and the action
   line up straight down every card.

   Colour means status, and only status. Everything else is typographic. */
.mi-item { align-items: start; }
.mi-item > .onb-review-dot { width: 16px; height: 16px; margin-top: 2px; justify-self: center; }
.mi-item > .onb-review-dot.is-ok { border-color: var(--color-success); background: var(--color-success); color: var(--color-pure-white); }
/* the write-up's own number, as a citation rather than a position */
.mi-item-ref { margin-left: var(--space-3); font-size: var(--text-xs2); color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: 1px; }
.mi-item.is-gap .su-row-t, .mi-item.is-done .su-row-t { color: var(--color-text-muted); }
/* more of the work the row above already names: no status, no button, and the
   title steps back so the run reads as one task, not three */
.mi-item.is-under { border-top: 0; padding-top: 0; }
.mi-item.is-under .su-row-t { font-size: var(--text-sm); color: var(--color-text); }
/* what the product holds right now — the task's own live line */
.mi-item-live { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* why the step sits where it does — the slower line, always second */
.mi-item-why { color: var(--color-text-subtle); max-width: 68ch; }
/* a fact about the product, not a warning */
.mi-impl-tag { margin-left: var(--space-3); padding: 1px var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); font-size: var(--text-xs2); font-weight: var(--weight-normal);
  color: var(--color-text-subtle); white-space: nowrap; vertical-align: 1px; }
.mi-impl-subs { margin-top: var(--space-3); padding-left: var(--space-5); border-left: 1px solid var(--color-border); max-width: 68ch; }
.mi-impl-sub { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-2) 0; font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-normal); }
.mi-impl-sub-t { min-width: 0; }
.mi-impl-sub .mi-who { flex-shrink: 0; }
.mi-row-go { margin: 0; }
/* who does it: the machine side recedes, the human side holds its weight */
.mi-who { display: inline-block; font-size: var(--text-xs); color: var(--color-text-subtle); white-space: nowrap; }
.mi-who.is-yours { color: var(--color-text); font-weight: var(--weight-medium); }
/* the split, above the groups */
.mi-split { margin: calc(var(--space-4) * -1) 0 var(--space-6); font-size: var(--text-xs);
  color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }

/* Narrow: same move as the checklist rows — the fixed trailing tracks drop
   under the body rather than squeezing the title out of existence. */
@media (max-width: 1080px) {
  .mi-item, .mi-step-hd { grid-template-columns: 28px minmax(0, 1fr) auto auto; }
  .mi-item > .su-row-body, .mi-step-hd > .su-row-body { grid-column: 2 / -1; grid-row: 1; }
  .mi-item > .su-row-own, .mi-step-hd > .su-row-own { grid-column: 2; grid-row: 2; }
  .mi-item > .su-row-st,  .mi-step-hd > .su-row-st  { grid-column: 3; grid-row: 2; }
  .mi-item > .su-row-acts, .mi-step-hd > .su-row-acts { grid-column: 4; grid-row: 2; }
  .mi-item > .su-row-own, .mi-item > .su-row-st, .mi-item > .su-row-acts { align-self: center; }
  /* the band rows let their value column take the width back */
  .mi-row { grid-template-columns: 14px minmax(0, 1fr); row-gap: var(--space-2); }
  .mi-row-l { grid-column: 2; }
  .mi-row-v { grid-column: 2; }
  .mi-row-acts { grid-column: 2; justify-self: start; }
}