/* Meaningful Change on the partner and staff pages (Phase 2C-6). The report's own visual
   semantics: the written words and the glyph carry the meaning — ▲ improved, ▼ worsened,
   ◆ changed, ◐ what we could see changed, ◇ assessment updated — colour only reinforces.
   Every surface that shows it is inside the partner or Central shell (.ci-shell) or the staff onboarding page (.staff),
   all dark, so the variables are the Calm Instrument tokens. (A light :root set of raw values for the long-gone light
   portal sat here, overridden everywhere it could apply; removed in the final cleanup.) */
:root {
  --mc-up: var(--progress); --mc-dn: var(--error); --mc-ch: var(--text-2); --mc-ev: var(--unknown); --mc-df: var(--text-2);
  --mc-ink: var(--text); --mc-mute: var(--muted); --mc-line: var(--line-strong);
  --mc-ev-bg: var(--tint-workflow); --mc-df-bg: var(--tint-unknown);
}
.cm { display: inline-flex; align-items: flex-start; gap: 6px; font-weight: 600; color: var(--mc-ink); }
.cm-g { width: 10px; height: 10px; flex: none; margin-top: .32em; }
.cm-up .cm-g { color: var(--mc-up); } .cm-dn .cm-g { color: var(--mc-dn); } .cm-ch .cm-g { color: var(--mc-ch); }
.cm-ev .cm-g { color: var(--mc-ev); } .cm-df .cm-g { color: var(--mc-df); }

.mcw { display: flex; flex-direction: column; gap: 12px; }
.mcw-band { list-style: none; margin: 0; padding: 10px 0; display: flex; flex-wrap: wrap; gap: 8px 28px; border-top: 1.5px solid var(--mc-ink); border-bottom: 1px solid var(--mc-line); }
.mcw-band li { display: flex; flex-direction: column; gap: 2px; }
.mcw-sub { color: var(--mc-mute); font-size: var(--fs-meta); font-weight: 500; }
.mcw-none { color: var(--mc-mute); margin: 0; }
.mcw-story { position: relative; padding: 2px 0 2px 16px; }
.mcw-story::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; border-left: 3px solid var(--mc-ch); }
.mcw-story.mcw-up::before { border-left-color: var(--mc-up); } .mcw-story.mcw-dn::before { border-left-color: var(--mc-dn); }
.mcw-story.mcw-ev::before { border-left: 3px dashed var(--mc-ev); } .mcw-story.mcw-df::before { border-left: 3px dotted var(--mc-df); }
.mcw-meta { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 4px; font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mc-mute); }
.mcw-meta .cm { font-size: var(--fs-label); letter-spacing: .1em; }
.mcw-story h3 { margin: 0 0 6px; font-size: 18px; color: var(--mc-ink); }
.mcw-tx { margin: 0 0 4px; font-weight: 600; color: var(--mc-ink); }
.mcw-body { margin: 4px 0 0; color: var(--mc-mute); line-height: 1.55; }
.mcw-cons, .mcw-roots { margin: 6px 0 0; padding-left: 18px; color: var(--mc-mute); font-size: var(--fs-sm); }
.mcw-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mc-line); }
.mcw-rows > li { border-bottom: 1px solid var(--mc-line); }
.mcw-row { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; padding: 9px 2px; }
.mcw-row:focus-visible { outline: 2px solid var(--mc-ev); outline-offset: 2px; }
.mcw-area { color: var(--mc-mute); font-size: var(--fs-meta); }
.mcw-short { color: var(--mc-mute); font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; }
.mcw-detail { padding: 0 2px 10px 18px; }
.mcw-group { margin: 6px 0 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mc-ink); display: flex; justify-content: space-between; }
.mcw-group span { letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--mc-mute); }
.mcw-q { padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--mc-line); }
.mcw-q p { margin: 4px 0 0; color: var(--mc-mute); }
.mcw-q-ev { background: var(--mc-ev-bg); } .mcw-q-df { background: var(--mc-df-bg); }
.mcw-score { margin: 4px 0 0; font-weight: 700; color: var(--mc-ink); }
.mcw-switch { display: inline-flex; border: 1px solid var(--mc-line); border-radius: var(--r-md); overflow: hidden; margin: 0 0 8px; }
.mcw-switch button { border: 0; background: transparent; padding: 7px 14px; font: inherit; font-weight: 600; color: var(--mc-mute); cursor: pointer; }
.mcw-switch button.on { background: var(--mc-ink); color: var(--mc-line); }
.staff .mcw-switch button.on, .ci-shell .mcw-switch button.on { color: var(--on-lime); }
.mcw-switch button:disabled { cursor: default; opacity: .55; }
.mcw-explain { margin: 0 0 12px; color: var(--mc-mute); font-size: var(--fs-sm); }
.mcw-hist { width: 100%; border-collapse: collapse; }
.mcw-hist td, .mcw-hist th { vertical-align: top; text-align: left; padding: 8px 8px; }
.mcw-hist td:nth-child(1), .mcw-hist td:nth-child(3), .mcw-hist td:nth-child(4) { white-space: nowrap; }
.mcw-hist td.ac { white-space: nowrap; text-align: right; }
.mcw-hist td.ac a, .mcw-hist td.ac .linkbtn { display: block; color: var(--mc-up); font-size: var(--fs-meta); line-height: 1.6; }
.mcw-hist td[data-th="What changed"] { min-width: 240px; }
.mcw-hist tbody tr:not(.mcw-expand):not(.mcw-boundary) { border-top: 1px solid var(--mc-line); }
.mcw-hist .num { text-align: right; white-space: nowrap; }
.mcw-dlv { color: var(--mc-up); font-weight: 600; } .mcw-int { color: var(--mc-mute); }
.mcw-link { all: unset; cursor: pointer; } .mcw-link:hover .cm span, .mcw-link:focus-visible .cm span { text-decoration: underline; }
.mcw-boundary td { font-size: var(--fs-meta); color: var(--mc-df); border-top: 1.5px dotted var(--mc-df); border-bottom: 1.5px dotted var(--mc-df); padding: 6px 4px; }
.mcw-expand td { padding: 12px 6px 18px; }
.mcw-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.mcw-filters button { border: 1px solid var(--mc-line); background: transparent; border-radius: var(--r-full); padding: 4px 11px; font: inherit; font-size: var(--fs-meta); color: var(--mc-mute); cursor: pointer; }
.mcw-filters button.on { border-color: var(--mc-ink); color: var(--mc-ink); font-weight: 600; }
.mcw-audit { font-size: var(--fs-sm); color: var(--mc-mute); }
@media (max-width: 640px) { .mcw-row { grid-template-columns: 1fr; gap: 2px; } }
.correct input[type="text"], .correct input:not([type]) { min-width: min(420px, 100%); }

/* Phase 3E: the assessment-history table at phone widths. Presentation only — every cell is still
   shown, labelled by its own column (data-th), one assessment per stacked card; nothing is clipped
   or hidden, and wider screens keep the table. Phase 5C-B: stacked up to 1100px — between 641 and 1100 the
   table was wider than the page beside the portal sidebar (found by the 5C-B browser matrix). */
@media (max-width: 1100px) {
  .mcw-hist, .mcw-hist tbody { display: block; width: 100%; }
  .mcw-hist thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mcw-hist tbody tr { display: block; padding: 10px 0 8px; }
  .mcw-hist tbody tr:not(.mcw-expand):not(.mcw-boundary) { border-top: 1px solid var(--mc-line); }
  .mcw-hist td, .mcw-hist td:nth-child(1), .mcw-hist td:nth-child(3), .mcw-hist td:nth-child(4), .mcw-hist td[data-th="What changed"] {
    display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 2px 10px; align-items: baseline;
    padding: 3px 0; min-width: 0; white-space: normal; text-align: left; overflow-wrap: anywhere; }
  .mcw-hist td[data-th]::before { content: attr(data-th); font-size: var(--fs-meta); color: var(--mc-mute); }
  .mcw-hist .num { text-align: left; }
  .mcw-hist td.ac { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 6px; text-align: left; }
  .mcw-hist td.ac a, .mcw-hist td.ac .linkbtn { display: inline; }
  .mcw-hist tr.mcw-expand td, .mcw-hist tr.mcw-boundary td { display: block; padding: 8px 0; }
}