/* Generated by schema/theme (docs/06 TK2). Do not edit. */
:root {

  /* color */
  --mg-ink: #191919;
  --mg-ink-secondary: #6F6F6F;
  --mg-ink-faint: #9E9E9E;
  --mg-ground: #FFFFFF;
  --mg-ground-sunken: #FAFAFA;
  --mg-ground-selected: #F2F2F2;
  --mg-hairline: #E8E8E8;
  --mg-provenance: #2E5CE6;
  --mg-provenance-wash: #F5F8FF;
  --mg-danger: #C43D3D;
  --mg-positive: #3D8C5C;
  --mg-label-a: #A78BFA;
  --mg-label-b: #F59E0B;
  --mg-label-c: #3B82F6;

  /* type */
  --mg-font-family: "Inter", sans-serif;
  --mg-font-features: "tnum" 1;
  --mg-size-display: 28px;
  --mg-line-display: 34px;
  --mg-weight-display: 650;
  --mg-size-title: 20px;
  --mg-line-title: 26px;
  --mg-weight-title: 650;
  --mg-size-body: 14px;
  --mg-line-body: 22px;
  --mg-weight-body: 400;
  --mg-size-body-strong: 14px;
  --mg-line-body-strong: 22px;
  --mg-weight-body-strong: 550;
  --mg-size-small: 12.5px;
  --mg-line-small: 18px;
  --mg-weight-small: 400;
  --mg-size-micro: 11px;
  --mg-line-micro: 14px;
  --mg-weight-micro: 550;
  --mg-tracking-micro: 0.08em;

  /* space */
  --mg-space-1: 4px;
  --mg-space-2: 8px;
  --mg-space-3: 12px;
  --mg-space-4: 16px;
  --mg-space-5: 24px;
  --mg-space-6: 32px;
  --mg-space-7: 48px;
  --mg-space-8: 64px;

  /* shape */
  --mg-radius-small: 6px;
  --mg-radius-large: 10px;
  --mg-radius-pill: 999px;
  --mg-hairline-width: 1px;
  --mg-shadow: 0 1px 2px rgb(0 0 0 / 5%);

  /* control */
  --mg-control-regular: 32px;
  --mg-control-compact: 26px;
  --mg-control-tiny: 22px;
  --mg-dialog-narrow: 400px;
  --mg-dialog-wide: 640px;

  /* motion */
  --mg-motion: 140ms ease-out;

  /* frame */
  --mg-rail-width: 56px;
  --mg-sidebar-width: 300px;
  --mg-content-max-width: 720px;
  --mg-form-max-width: 520px;
  --mg-column-left-width: 270px;
  --mg-column-right-width: 376px;
  --mg-top-bar-height: 45px;
  --mg-tab-row-height: 44px;
  --mg-nest-width: 354px;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/web/fonts/InterVariable.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--mg-ground);
  color: var(--mg-ink);
  font-family: var(--mg-font-family);
  font-feature-settings: var(--mg-font-features);
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Micro eyebrow (docs/06 TY3): names a region so the region needs no box. */
.mm-eyebrow {
  margin: 0;
  font-size: var(--mg-size-micro);
  line-height: var(--mg-line-micro);
  font-weight: var(--mg-weight-micro);
  letter-spacing: var(--mg-tracking-micro);
  text-transform: uppercase;
  color: var(--mg-ink-faint);
}

/* One Display per screen (docs/06 TY2). */
.mm-display {
  margin: 0;
  font-size: var(--mg-size-display);
  line-height: var(--mg-line-display);
  font-weight: var(--mg-weight-display);
  color: var(--mg-ink);
}

.mm-helper {
  margin: 0;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary);
}

.mm-label {
  display: flex;
  align-items: baseline;
  gap: var(--mg-space-2);
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  font-weight: var(--mg-weight-body-strong);
  color: var(--mg-ink);
}

/* The inline InkFaint qualifier of docs/06 CO2: "optional", "one or more". */
.mm-qualifier {
  font-size: var(--mg-size-micro);
  line-height: var(--mg-line-micro);
  font-weight: var(--mg-weight-body);
  color: var(--mg-ink-faint);
}

.mm-input {
  display: flex;
  align-items: center;
  gap: var(--mg-space-2);
  width: 100%;
  height: 46px;
  padding: 0 var(--mg-space-4);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-large);
  font-family: inherit;
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  color: var(--mg-ink);
}

.mm-input::placeholder { color: var(--mg-ink-faint); }

/* Focus is a 1dp Ink border — no glow, no blue (docs/06 CO2). */
.mm-input:focus,
.mm-input:focus-within {
  outline: none;
  border-color: var(--mg-ink);
}

/* Elevation is a border, not a shadow (docs/06 SP2). */
.mm-card {
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-large);
  padding: var(--mg-space-4);
}

/* At most one per screen, and only for first-person system statements
   (docs/06 CO4): it is a promise, not an alert component. */
.mm-note-strip {
  display: flex;
  align-items: flex-start;
  gap: var(--mg-space-3);
  width: 100%;
  padding: var(--mg-space-3) var(--mg-space-4);
  background: var(--mg-provenance-wash);
  border-radius: var(--mg-radius-large);
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-provenance);
}

.mm-note-mark { flex: none; color: var(--mg-provenance); }

/* The one sanctioned use of Positive: the verification check glyph
   (docs/06 CL4). Never a fill, never a badge background. */
.mm-check { color: var(--mg-positive); }

/* State, not animation, is authoritative (docs/06 EP3). */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

:root { --mm-num: var(--mg-space-6); }

/* ---- focus and motion ----------------------------------------------------- */

:focus-visible {
  outline: var(--mg-hairline-width) solid var(--mg-ink);
  outline-offset: var(--mg-hairline-width);
}

/* ---- button --------------------------------------------------------------- */

.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mg-space-2);
  flex: none;
  height: var(--mg-control-regular);
  padding: 0 var(--mg-space-4);
  background: var(--mg-ink);
  color: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-ink);
  border-radius: var(--mg-radius-pill);
  font-family: inherit;
  font-size: var(--mg-size-body);
  font-weight: var(--mg-weight-body-strong);
  line-height: var(--mg-line-body);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--mg-motion), border-color var(--mg-motion),
    color var(--mg-motion), filter var(--mg-motion);
}
.mm-btn:hover:not(:disabled) { filter: brightness(0.82); }

.mm-btn-secondary { background: var(--mg-ground); color: var(--mg-ink); border-color: var(--mg-hairline); }
.mm-btn-secondary:hover:not(:disabled) { filter: none; background: var(--mg-ground-sunken); }

.mm-btn-quiet { background: none; color: var(--mg-ink-secondary); border-color: transparent; font-weight: var(--mg-weight-body); }
.mm-btn-quiet:hover:not(:disabled) { filter: none; background: var(--mg-ground-sunken); color: var(--mg-ink); }

.mm-btn-compact { height: var(--mg-control-compact); padding: 0 var(--mg-space-3); font-size: var(--mg-size-small); line-height: var(--mg-line-small); }
.mm-btn-tiny { height: var(--mg-control-tiny); padding: 0 var(--mg-space-2); gap: var(--mg-space-1); font-size: var(--mg-size-small); line-height: var(--mg-line-small); }

/* Icon-only: square at its own height. */
.mm-btn-icon { width: var(--mg-control-regular); padding: 0; }
.mm-btn-compact.mm-btn-icon { width: var(--mg-control-compact); }
.mm-btn-tiny.mm-btn-icon { width: var(--mg-control-tiny); }
.mm-btn-glyph { display: inline-flex; }
.mm-btn-glyph svg { width: var(--mg-size-body); height: var(--mg-size-body); display: block; }

/* Disabled is InkFaint on GroundSunken with a Hairline border, never opacity
   (docs/06 CL3): opacity stacks unpredictably over the engine canvas. */
.mm-btn:disabled {
  background: var(--mg-ground-sunken);
  border-color: var(--mg-hairline);
  color: var(--mg-ink-faint);
  cursor: default;
  filter: none;
}
.mm-btn-quiet:disabled { background: none; border-color: transparent; }

/* Inert: drawn, not hidden — the product's map with the territory missing.
   It keeps its own ground so it reads as "not yet" rather than "not now". */
.mm-btn-inert,
.mm-btn-inert:disabled { background: var(--mg-ground); border-color: var(--mg-hairline); color: var(--mg-ink-faint); }
.mm-btn-quiet.mm-btn-inert { background: none; border-color: transparent; }

/* Tertiary: bare Provenance text (docs/06 CO1). Resets button chrome because
   half the links in this product dispatch rather than navigate. */
.mm-link {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-provenance);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.mm-link:hover:not(:disabled) { text-decoration: underline; }
/* A link that navigates nowhere and states nothing is never blue (CL1). */
.mm-link-quiet { color: var(--mg-ink-secondary); }
.mm-link:disabled { color: var(--mg-ink-faint); cursor: default; }

/* ---- chip ----------------------------------------------------------------- */

.mm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-1);
  flex: none;
  min-height: var(--mg-control-tiny);
  padding: 0 var(--mg-space-2);
  background: var(--mg-ground-sunken);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  font-family: inherit;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--mg-motion), border-color var(--mg-motion), color var(--mg-motion);
}
a.mm-chip, button.mm-chip { cursor: pointer; }
a.mm-chip:hover, button.mm-chip:hover:not(:disabled) { background: var(--mg-ground-selected); }
.mm-chip-on,
a.mm-chip-on:hover,
button.mm-chip-on:hover:not(:disabled) { background: var(--mg-ink); border-color: var(--mg-ink); color: var(--mg-ground); }
button.mm-chip:disabled { color: var(--mg-ink-faint); cursor: default; }

/* The label's dot. The label ramp is not spent here: the chip's name is what
   tells labels apart, and the dot marks it as a label rather than a value. */
.mm-chip-dot { flex: none; width: 6px; height: 6px; border-radius: var(--mg-radius-pill); background: var(--mg-ink-faint); }
.mm-chip-on .mm-chip-dot { background: var(--mg-ground); }
.mm-chip-trail { color: var(--mg-ink-faint); font-size: var(--mg-size-micro); }
.mm-chip-on .mm-chip-trail { color: var(--mg-ground); }

.mm-chip-remove {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--mg-size-small);
  line-height: 1;
  color: var(--mg-ink-faint);
  cursor: pointer;
  transition: color var(--mg-motion);
}
.mm-chip-remove:hover { color: var(--mg-ink); }
.mm-chip-on .mm-chip-remove { color: var(--mg-ground); }

/* ---- badge ---------------------------------------------------------------- */

/* A state label, not a control: Micro, tracked, upper case (TY3), in the
   status badge's pill. The proc-state tones are status.go's; these are the
   static ones. */
.mm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-1);
  flex: none;
  padding: calc(var(--mg-space-1) / 2) var(--mg-space-2);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-pill);
  font-size: var(--mg-size-micro);
  line-height: var(--mg-line-micro);
  font-weight: var(--mg-weight-micro);
  letter-spacing: var(--mg-tracking-micro);
  text-transform: uppercase;
  color: var(--mg-ink-secondary);
  white-space: nowrap;
}
.mm-badge-faint { color: var(--mg-ink-faint); }
.mm-badge-ink { color: var(--mg-ink); border-color: var(--mg-ink); }
/* Dashed means not yet real: a draft, a suggestion. */
.mm-badge-draft { color: var(--mg-ink-faint); border-style: dashed; }

/* ---- switch --------------------------------------------------------------- */

/* The control is the button around the track, so the label is part of what
   is pressed and the track needs no focus ring of its own. */
.mm-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-2);
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.mm-toggle:disabled { cursor: default; }
.mm-toggle-label { font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-secondary); }
.mm-toggle:disabled .mm-toggle-label { color: var(--mg-ink-faint); }

/* 36x20 track, 16 knob, 2 inset. */
.mm-switch {
  flex: none;
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 20px;
  padding: 2px;
  border-radius: var(--mg-radius-pill);
  background: var(--mg-hairline);
  transition: background-color var(--mg-motion);
}
.mm-switch-knob {
  width: 16px;
  height: 16px;
  border-radius: var(--mg-radius-pill);
  background: var(--mg-ground);
  transition: transform var(--mg-motion);
}
.mm-switch-on { background: var(--mg-ink); }
.mm-switch-on .mm-switch-knob { transform: translateX(16px); }
.mm-toggle:disabled .mm-switch-on { background: var(--mg-ink-faint); }

/* ---- segmented control ---------------------------------------------------- */

.mm-seg {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: var(--mg-hairline-width);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-pill);
}
.mm-seg-item {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mg-space-1);
  height: calc(var(--mg-control-compact) - 4 * var(--mg-hairline-width));
  padding: 0 var(--mg-space-3);
  border: 0;
  border-radius: var(--mg-radius-pill);
  background: none;
  font-family: inherit;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--mg-motion), color var(--mg-motion);
}
.mm-seg-item:hover:not(:disabled) { color: var(--mg-ink); }
.mm-seg-item-active { background: var(--mg-ground-selected); color: var(--mg-ink); font-weight: var(--mg-weight-body-strong); }
.mm-seg-item:disabled { color: var(--mg-ink-faint); cursor: default; }
.mm-seg-item svg { width: var(--mg-size-body); height: var(--mg-size-body); display: block; }

/* ---- tree row (D1) -------------------------------------------------------- */

/* Full-bleed selection: the row fills the 270 column edge to edge, so the
   selected row reads as the column's own state and not as a card in it. */
.mm-tree { display: flex; flex-direction: column; }
.mm-tree-group, .mm-tree-children { display: flex; flex-direction: column; }
.mm-tree-row {
  display: flex;
  align-items: center;
  gap: var(--mg-space-2);
  min-height: var(--mg-control-regular);
  padding: 0 var(--mg-space-4);
  color: var(--mg-ink);
  text-decoration: none;
  transition: background-color var(--mg-motion);
}
a.mm-tree-row:hover { background: var(--mg-ground-sunken); }
.mm-tree-row-active, a.mm-tree-row-active:hover { background: var(--mg-ground-selected); }
.mm-tree-num {
  flex: 0 0 var(--mm-num);
  font-size: var(--mg-size-small);
  color: var(--mg-ink-faint);
  font-variant-numeric: tabular-nums;
}
.mm-tree-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--mg-size-body);
  font-weight: var(--mg-weight-body-strong);
}
.mm-tree-count, .mm-tree-note {
  flex: 0 0 auto;
  font-size: var(--mg-size-small);
  color: var(--mg-ink-faint);
  font-variant-numeric: tabular-nums;
}
.mm-tree-chevron {
  flex: 0 0 var(--mg-space-3);
  text-align: center;
  font-size: var(--mg-size-small);
  color: var(--mg-ink-faint);
}
.mm-tree-toggle {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--mg-motion);
}
.mm-tree-toggle:hover { color: var(--mg-ink); }

/* A section opened in place: its items one step in, one step shorter, and
   quieter until one of them is the selection. */
.mm-tree-children .mm-tree-row { min-height: var(--mg-control-compact); padding-left: var(--mg-space-6); }
.mm-tree-children .mm-tree-label { font-weight: var(--mg-weight-body); color: var(--mg-ink-secondary); }
.mm-tree-children .mm-tree-row-active .mm-tree-label { color: var(--mg-ink); }

.mm-tree-add {
  appearance: none;
  display: block;
  padding: var(--mg-space-2) var(--mg-space-4);
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--mg-size-small);
  text-align: left;
  text-decoration: none;
  color: var(--mg-ink-faint);
  cursor: pointer;
  transition: color var(--mg-motion);
}
.mm-tree-add:hover { color: var(--mg-ink); }
/* Drawn and inert, like the rail's unbuilt destinations. */
.mm-tree-add-inert, .mm-tree-add-inert:hover { color: var(--mg-hairline); cursor: default; }

/* ---- list row (D2) -------------------------------------------------------- */

/* One ruled line. The selection is a fill and never a border, so the rule
   never moves; a row that opens something takes a hover, a static one
   (docs/06 SP5) does not. */
.mm-list { display: flex; flex-direction: column; }
.mm-list-row {
  display: flex;
  align-items: center;
  gap: var(--mg-space-3);
  min-height: var(--mg-control-compact);
  padding: 0 var(--mg-space-2);
  border-bottom: var(--mg-hairline-width) solid var(--mg-hairline);
  color: var(--mg-ink);
  text-decoration: none;
  transition: background-color var(--mg-motion);
}
a.mm-list-row:hover, .mm-list-row:has(> .mm-list-hit):hover { background: var(--mg-ground-sunken); }
.mm-list-row-active,
a.mm-list-row-active:hover,
.mm-list-row-active:has(> .mm-list-hit):hover { background: var(--mg-ground-selected); }
/* The link inside a row that also carries controls: a button inside an
   anchor is a click that does two things, so the link is a sibling that
   takes the rest of the row. */
.mm-list-hit {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--mg-space-3);
  color: inherit;
  text-decoration: none;
}
.mm-list-num {
  flex: 0 0 var(--mm-num);
  font-size: var(--mg-size-small);
  color: var(--mg-ink-faint);
  font-variant-numeric: tabular-nums;
}
.mm-list-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--mg-size-body);
}
.mm-list-aside { flex: none; font-size: var(--mg-size-small); color: var(--mg-ink-faint); white-space: nowrap; }

/* ---- dialog --------------------------------------------------------------- */

.mm-scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mg-space-5);
}
/* The scrim is a button so a pointer can dismiss it, and a sibling of the
   panel rather than its parent so a click inside the panel never reaches it.
   No token covers a scrim and a fourth grey is what CL2 forbids, so it is
   mixed from Ink. */
.mm-scrim-hit {
  position: absolute;
  inset: 0;
  appearance: none;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--mg-ink) 22%, transparent);
  cursor: default;
}
.mm-dialog {
  position: relative;
  width: 100%;
  max-width: var(--mg-form-max-width);
  max-height: calc(100vh - 2 * var(--mg-space-5));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-4);
  padding: var(--mg-space-5);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-large);
  box-shadow: var(--mg-shadow);
}
.mm-dialog-narrow { max-width: var(--mg-dialog-narrow); }
.mm-dialog-wide { max-width: var(--mg-dialog-wide); }
.mm-dialog-head { display: flex; flex-direction: column; gap: var(--mg-space-1); }
.mm-dialog-title {
  margin: 0;
  font-size: var(--mg-size-title);
  line-height: var(--mg-line-title);
  font-weight: var(--mg-weight-title);
  color: var(--mg-ink);
}
.mm-dialog-sub { margin: 0; font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-secondary); }
.mm-dialog-body { margin: 0; font-size: var(--mg-size-body); line-height: var(--mg-line-body); color: var(--mg-ink); }
/* The way out on the left, the consequence on the right. */
.mm-dialog-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--mg-space-2); }

/* ---- composer ------------------------------------------------------------- */

.mm-composer {
  display: flex;
  align-items: center;
  gap: var(--mg-space-2);
  padding: 0 var(--mg-space-1) 0 var(--mg-space-3);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  transition: border-color var(--mg-motion);
}
/* Focus is the box going Ink (CO2), so the field inside draws no ring. */
.mm-composer:focus-within { border-color: var(--mg-ink); }
.mm-composer-input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--mg-control-regular);
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: var(--mg-size-small);
  color: var(--mg-ink);
}
.mm-composer-input::placeholder { color: var(--mg-ink-faint); }

/* ---- drop zone ------------------------------------------------------------ */

/* docs/06 CO5. Inline by default — one line of a card or a dialog — and tall
   where it is the centre of the page. */
.mm-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mg-space-3);
  padding: var(--mg-space-2) var(--mg-space-2) var(--mg-space-2) var(--mg-space-3);
  background: var(--mg-ground-sunken);
  border: var(--mg-hairline-width) dashed var(--mg-hairline);
  border-radius: var(--mg-radius-large);
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary);
  transition: border-color var(--mg-motion);
}
.mm-drop-over { border-color: var(--mg-ink); }
.mm-drop-mark { display: inline-flex; flex: none; color: var(--mg-ink-faint); }
.mm-drop-mark svg { width: var(--mg-size-body); height: var(--mg-size-body); display: block; }
.mm-drop-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mm-drop-title { margin: 0; font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-secondary); }
.mm-drop-note { margin: 0; font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-faint); }
.mm-drop-actions { display: flex; align-items: center; gap: var(--mg-space-2); flex: none; }
.mm-drop-tall {
  flex-direction: column;
  justify-content: center;
  gap: var(--mg-space-2);
  min-height: calc(2 * var(--mg-space-8));
  padding: var(--mg-space-6);
  text-align: center;
}
.mm-drop-tall .mm-drop-text { flex: none; align-items: center; gap: var(--mg-space-1); }
.mm-drop-tall .mm-drop-title {
  font-size: var(--mg-size-body-strong);
  line-height: var(--mg-line-body-strong);
  font-weight: var(--mg-weight-body-strong);
  color: var(--mg-ink);
}
.mm-drop-tall .mm-drop-note { color: var(--mg-ink-secondary); }

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

.mm-empty { margin: 0; font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-faint); }
/* The shape of a thing that is not there yet: a dashed slot where it goes. */
.mm-empty-slot {
  padding: var(--mg-space-3) var(--mg-space-4);
  border: var(--mg-hairline-width) dashed var(--mg-hairline);
  border-radius: var(--mg-radius-small);
}

/* ---- avatar --------------------------------------------------------------- */

.mm-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mg-control-tiny);
  height: var(--mg-control-tiny);
  border-radius: var(--mg-radius-pill);
  background: var(--mg-ink);
  color: var(--mg-ground);
  font-size: var(--mg-size-micro);
  line-height: 1;
  font-weight: var(--mg-weight-micro);
  letter-spacing: 0;
}
/* Colleagues and system marks: read for what was said, not who said it. */
.mm-avatar-quiet { background: var(--mg-ground-selected); color: var(--mg-ink-secondary); }
.mm-avatar-blank { background: var(--mg-hairline); }
.mm-avatar svg { width: var(--mg-size-small); height: var(--mg-size-small); display: block; }

/* The badge's shape is the kit's (.mm-badge, kit_style.go); these are its
   proc-state tones and the mark. */
.mm-badge-mark, .mm-mark, .mm-spin { font-size: 1em; font-style: normal; }
.mm-badge-working { color: var(--mg-ink); border-color: var(--mg-ink); }
.mm-badge-done { color: var(--mg-ink-secondary); }
.mm-badge-done .mm-badge-mark, .mm-mark-done { color: var(--mg-positive); }
.mm-badge-failed { color: var(--mg-danger); border-color: var(--mg-danger); }
.mm-badge-failed .mm-badge-mark, .mm-mark-failed { color: var(--mg-danger); }
.mm-badge-stalled { color: var(--mg-ink-secondary); border-style: dashed; }
.mm-badge-waiting { color: var(--mg-ink-faint); }
.mm-badge-idle { color: var(--mg-ink-faint); border-color: transparent; }
.mm-mark-working { color: var(--mg-provenance); }
.mm-mark-waiting, .mm-mark-idle { color: var(--mg-ink-faint); }

/* Motion means working, and only working — plus the slower turn of a link we
   have lost sight of, which is the one other state that is still changing. A
   spinner that keeps going after a thing has finished is the animation that
   taught everyone to stop trusting spinners. */
.mm-badge-working .mm-badge-mark, .mm-mark-working, .mm-spin { display: inline-block; animation: mm-spin-frames 1.1s linear infinite; }
.mm-badge-stalled .mm-badge-mark, .mm-mark-stalled { display: inline-block; animation: mm-spin-frames 2.4s linear infinite; }
@keyframes mm-spin-frames { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mm-badge-working .mm-badge-mark, .mm-badge-stalled .mm-badge-mark,
  .mm-mark-working, .mm-mark-stalled, .mm-spin { animation: none; }
}
.mm-badge-waiting .mm-badge-mark::before, .mm-mark-waiting::before { content: "◌"; }
.mm-badge-working .mm-badge-mark::before, .mm-mark-working::before { content: "◐"; }
.mm-badge-done .mm-badge-mark::before, .mm-mark-done::before { content: "✓"; }
.mm-badge-failed .mm-badge-mark::before, .mm-mark-failed::before { content: "✕"; }
.mm-badge-stalled .mm-badge-mark::before, .mm-mark-stalled::before { content: "⟳"; }
.mm-badge-idle .mm-badge-mark::before, .mm-mark-idle::before { content: "·"; }
.mm-spin::before { content: "◐"; }

/* ---- the Documents tab --------------------------------------------------- */
.ws-docs { max-width: var(--mg-content-max-width); padding: var(--mg-space-5) var(--mg-space-6); display: flex; flex-direction: column; gap: var(--mg-space-5); }
.ws-dropzone { display: flex; align-items: center; gap: var(--mg-space-3); padding: var(--mg-space-4); border: var(--mg-hairline-width) dashed var(--mg-hairline); border-radius: var(--mg-radius-large); color: var(--mg-ink-secondary); }
.ws-dropzone-over { border-color: var(--mg-ink); }
.ws-drop-glyph { font-size: var(--mg-size-title); color: var(--mg-ink-faint); }
.ws-drop-lead { flex: 1 1 auto; }
.ws-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ws-docs-note { margin: 0; color: var(--mg-ink-secondary); font-size: var(--mg-size-small); }
.ws-docs-list { display: flex; flex-direction: column; gap: var(--mg-space-2); }
.ws-docs-row { padding: var(--mg-space-2) 0; }
.ws-docs-head { display: flex; align-items: baseline; gap: var(--mg-space-3); }
.ws-docs-lead { font-weight: var(--mg-weight-body-strong); }
.ws-docs-sub { flex: 1 1 auto; color: var(--mg-ink-secondary); font-size: var(--mg-size-small); }
.ws-track { height: 3px; margin-top: var(--mg-space-2); background: var(--mg-hairline); border-radius: 2px; overflow: hidden; }
.ws-fill { height: 100%; background: var(--mg-ink); transition: width 300ms ease-out; }
.ws-docrow { display: flex; align-items: baseline; gap: var(--mg-space-3); padding: var(--mg-space-2) 0; border-bottom: var(--mg-hairline-width) solid var(--mg-hairline); }
.ws-docrow-head { border-bottom: none; padding-bottom: 0; }
.ws-docrow-head .ws-doc-state, .ws-docrow-head .ws-doc-read { font-size: var(--mg-size-caption); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mg-ink-faint); }
.ws-doc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-doc-state { flex: 0 0 180px; color: var(--mg-ink-faint); font-size: var(--mg-size-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-doc-read { flex: 0 0 200px; color: var(--mg-ink-faint); font-size: var(--mg-size-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ws-doc-read-live { color: var(--mg-ink-secondary); }
.ws-doc-read-done { color: var(--mg-ink); }
.ws-track { position: relative; }
.ws-fill-converted { position: absolute; inset: 0 auto 0 0; background: var(--mg-ink-faint); }
.ws-fill-read { position: absolute; inset: 0 auto 0 0; background: var(--mg-ink); }
.ws-agent { padding: var(--mg-space-4); border: var(--mg-hairline-width) solid var(--mg-hairline); border-radius: var(--mg-radius-large); }
.ws-agent-head { display: flex; align-items: baseline; justify-content: space-between; }
.ws-agent-state { color: var(--mg-ink-faint); font-size: var(--mg-size-small); }
.ws-agent-log { margin: var(--mg-space-3) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--mg-space-1); }
.ws-agent-row { display: flex; gap: var(--mg-space-3); font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }
.ws-agent-steer { display: flex; gap: var(--mg-space-2); align-items: center; margin-top: var(--mg-space-3); }
.ws-agent-steer .mm-input { flex: 1; }
.ws-agent-time { flex: 0 0 40px; color: var(--mg-ink-faint); font-variant-numeric: tabular-nums; }
.ws-agent-row-intent .ws-agent-text, .ws-agent-row-done .ws-agent-text { color: var(--mg-ink); }
.ws-agent-row-error .ws-agent-text { color: var(--mg-danger); }
.ws-doc-read-failed { color: var(--mg-danger); }
.ws-readers { display: flex; flex-direction: column; gap: var(--mg-space-2); margin-top: var(--mg-space-3); }
.ws-reader { display: flex; flex-direction: column; gap: var(--mg-space-1); padding: var(--mg-space-2) var(--mg-space-3); border: var(--mg-hairline-width) solid var(--mg-hairline); border-radius: var(--mg-radius-small); cursor: pointer; }
.ws-reader-selected { border-color: var(--mg-ink); }
.ws-reader-row { display: flex; align-items: baseline; gap: var(--mg-space-3); }
.ws-reader-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-reader-state { color: var(--mg-ink-secondary); font-size: var(--mg-size-small); white-space: nowrap; }
.ws-reader-state-failed { color: var(--mg-danger); }
.ws-reader-meta { color: var(--mg-ink-faint); font-size: var(--mg-size-small); font-variant-numeric: tabular-nums; }
.ws-reader-actions { display: flex; gap: var(--mg-space-2); align-items: center; }
.ws-reader-intent { margin: var(--mg-space-1) 0 0; font-size: var(--mg-size-small); color: var(--mg-ink); }
.ws-reader-note { margin: 0; font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }

/* ---- the Canon surface ---------------------------------------------------

   The canvas host fills the pane less the bar at the foot. Ebitengine's js
   backend sizes its canvas to the whole document, so the surface offsets it
   to line up with the page and draws only inside this box; overflow:hidden is
   the clip that makes the overhang invisible. Hidden by visibility rather than
   display, because a display:none box measures zero and the surface positions
   itself from this element. */
.ws-canvas { position: absolute; inset: 0 0 40px 0; z-index: 0; overflow: hidden; }
.ws-canvas-off { visibility: hidden; pointer-events: none; }

.ws-canon { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; z-index: 1; }
.ws-canon-bar {
  display: flex; align-items: center; gap: var(--mg-space-3); height: 100%;
  padding: 0 var(--mg-space-3); background: var(--mg-ground-sunken);
  border-top: var(--mg-hairline-width) solid var(--mg-hairline);
  font-size: var(--mg-size-micro); line-height: var(--mg-line-micro); color: var(--mg-ink-faint);
}
.ws-canon-keys { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-find { flex: 0 0 auto; display: flex; align-items: center; gap: var(--mg-space-2); }
/* 34, the height of the .mm-btn-secondary beside it: two controls on one line
   of a 40dp bar share a height or read as two different bars. */
.ws-find-input { width: 260px; height: 34px; padding: 0 var(--mg-space-2); font-size: var(--mg-size-small); }
.ws-find-note { color: var(--mg-ink-secondary); font-size: var(--mg-size-micro); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-canon-refresh { flex: 0 0 auto; background: none; border: 0; padding: 0; color: var(--mg-ink-faint); font-family: inherit; font-size: var(--mg-size-micro); cursor: pointer; }
.ws-canon-refresh:hover { color: var(--mg-ink); }
/* ---- the source viewer --------------------------------------------------- */

/* A sheet over the right of the pane rather than a modal over the screen: the
   analyst is checking a claim against its passage, and the table it came from
   should stay visible behind it. */
.ws-source {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: min(560px, 60%);
  display: flex;
  flex-direction: column;
  background: var(--mg-ground);
  border-left: var(--mg-hairline-width) solid var(--mg-hairline);
  padding: var(--mg-space-4);
  gap: var(--mg-space-3);
  overflow: hidden;
}

.ws-source-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: var(--mg-space-3);
}

.ws-source-where {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary);
  overflow-wrap: anywhere;
}

.ws-source-close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0;
  color: var(--mg-ink-faint);
  font-family: inherit;
  font-size: var(--mg-size-body);
  cursor: pointer;
  transition: color 140ms ease-out;
}

.ws-source-close:hover { color: var(--mg-ink); }

.ws-source-claim {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  font-weight: var(--mg-weight-body-strong);
}

.ws-source-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.ws-source-shards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-2);
  margin-bottom: var(--mg-space-3);
}

.ws-source-shard {
  padding: 0 var(--mg-space-2);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  font-size: var(--mg-size-micro);
  line-height: var(--mg-line-micro);
  color: var(--mg-ink-secondary);
}

.ws-source-note {
  margin: 0 0 var(--mg-space-3);
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-faint);
}

/* The passage as extracted, wrapped but not reflowed: a table's text was laid
   out in columns and re-wrapping it as prose would misrepresent what the
   document says. */
.ws-source-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary);
}

/* The cited span in the provenance wash — the one place in the product where a
   colour means "this is where the claim came from" (docs/06). */
.ws-source-cited {
  background: var(--mg-provenance-wash);
  color: var(--mg-ink);
}

.home-landing {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--mg-space-3);
  background: var(--mg-ground);
}
.home-landing-name {
  margin: 0; color: var(--mg-ink-faint);
  font-size: var(--mg-size-small); letter-spacing: 0.04em;
}

/* ---- the frame ----------------------------------------------------------- */

.mgc-frame { display: flex; height: 100vh; overflow: hidden; background: var(--mg-ground); }
.mgc-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* The Nest's reservation. E floats over D, so D has to leave it room — and
   it does that once, here, rather than each screen guessing at the overlay's
   size. --mg-nest-reserve is the height the Nest takes from the foot of the
   screen, gaps included: the closed bar by default, the open panel when the
   Nest carries mgc-nest-open. The right column pads its foot by it and the
   middle column ends with a spacer of it (D, below), so a composer pinned to
   the foot of a column sits clear of the Nest in either shape, on every tab,
   and no screen knows the Nest exists. A screen with some other bottom-pinned
   thing outside those columns pads by the same property.

   The two sizes are set here rather than in schema/theme because they are the
   Nest's own shapes, not frame geometry: one control-height bar (36, the
   docs/06 CO2 input height) and a panel that never takes more than a little
   under half the window. */
.mgc-frame {
  --mgc-nest-gap: var(--mg-space-3);
  --mgc-nest-bar-height: 36px;
  --mgc-nest-open-height: min(46vh, 440px);
  --mg-nest-reserve: calc(var(--mgc-nest-bar-height) + 2 * var(--mgc-nest-gap));
}
.mgc-frame:has(> .mgc-nest-open) {
  --mg-nest-reserve: calc(var(--mgc-nest-open-height) + 2 * var(--mgc-nest-gap));
}

/* ---- A · the navigation rail --------------------------------------------- */

/* The rail is the only region with a sunken ground, which is what makes the
   whole of the rest of the screen read as one sheet. */
.mgc-rail {
  flex: 0 0 var(--mg-rail-width);
  width: var(--mg-rail-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--mg-ground-sunken);
  border-right: var(--mg-hairline-width) solid var(--mg-hairline);
}

.mgc-rail-top { display: flex; flex-direction: column; align-items: center; gap: var(--mg-space-1); padding: var(--mg-space-4) 0 var(--mg-space-3); }

/* 40dp at radius 10 — the board draws it at x=8,y=16 in a 56 rail. */
.mgc-monogram {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mg-ink); color: var(--mg-ground);
  border-radius: var(--mg-radius-large);
  font-size: var(--mg-size-small); font-weight: var(--mg-weight-body-strong);
  letter-spacing: 0.02em;
}

.mgc-mode {
  font-size: var(--mg-size-micro); line-height: var(--mg-line-micro);
  font-weight: var(--mg-weight-micro); letter-spacing: var(--mg-tracking-micro);
  color: var(--mg-ink-faint);
}

/* 34dp boxes on a 46dp pitch, which is what the board measures between icon
   centres — a 12dp gap rather than a taller box, so the lit background stays
   the size of the glyph and not the size of the gap. */
.mgc-rail-nav {
  display: flex; flex-direction: column; align-items: center; gap: var(--mg-space-3);
  width: 100%; padding-top: var(--mg-space-3);
  border-top: var(--mg-hairline-width) solid var(--mg-hairline);
}

.mgc-rail-item {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--mg-radius-large);
  color: var(--mg-ink-secondary);
  text-decoration: none;
  transition: background 140ms ease-out, color 140ms ease-out;
}
.mgc-rail-item svg { width: 20px; height: 20px; display: block; }
.mgc-rail-item:hover { color: var(--mg-ink); }
.mgc-rail-item-active { background: var(--mg-ground-selected); color: var(--mg-ink); }
/* Drawn, not hidden: the product's map with the territory missing. */
.mgc-rail-item-inert { color: var(--mg-ink-faint); cursor: default; }
.mgc-rail-item-inert:hover { color: var(--mg-ink-faint); }

.mgc-rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; padding-bottom: var(--mg-space-4); }
.mgc-mark {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mg-ink); color: var(--mg-ground);
  border-radius: var(--mg-radius-small);
  font-size: var(--mg-size-small); font-weight: var(--mg-weight-body-strong);
}

/* ---- B · the top bar and C · the tab row ---------------------------------- */

/* One block, one rule under it. The rule starts where the rail ends, which is
   why it is on the header and not on the frame. */
.mgc-header {
  flex: 0 0 auto;
  border-bottom: var(--mg-hairline-width) solid var(--mg-hairline);
}

.mgc-topbar {
  height: var(--mg-top-bar-height);
  display: flex; align-items: center; gap: var(--mg-space-2);
  padding: 0 var(--mg-space-5);
}
.mgc-trail { color: var(--mg-ink-secondary); font-size: var(--mg-size-small); text-decoration: none; }
a.mgc-trail:hover { color: var(--mg-ink); }
.mgc-trail-sep { color: var(--mg-ink-faint); font-size: var(--mg-size-small); }
.mgc-here { font-size: var(--mg-size-body-strong); font-weight: var(--mg-weight-body-strong); color: var(--mg-ink); }

.mgc-tabs {
  height: var(--mg-tab-row-height);
  display: flex; align-items: center; gap: var(--mg-space-1);
  padding: 0 var(--mg-space-5);
}
.mgc-tab {
  flex: none;
  padding: var(--mg-space-1) var(--mg-space-3);
  border-radius: var(--mg-radius-small);
  font-size: var(--mg-size-small);
  color: var(--mg-ink-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--mg-motion), color var(--mg-motion);
}
a.mgc-tab:hover { background: var(--mg-ground-sunken); color: var(--mg-ink); }
.mgc-tab-active { background: var(--mg-ground-selected); color: var(--mg-ink); font-weight: var(--mg-weight-body-strong); }
/* Greyed because it is coming, not because it is broken (docs/06 CL3: the
   disabled state is this ink, never opacity). */
.mgc-tab-planned { color: var(--mg-ink-faint); cursor: default; }

.mgc-day { margin-left: auto; color: var(--mg-ink-faint); font-size: var(--mg-size-small); font-variant-numeric: tabular-nums; }

/* ---- D · the main working space ------------------------------------------ */

/* Two fixed columns and one elastic one. A wider window widens the list; the
   chrome never moves, which is what lets the eye keep its place in D1 while
   D3 fills and empties. */
.mgc-columns { flex: 1 1 auto; display: flex; min-height: 0; }
.mgc-col { min-height: 0; overflow-y: auto; }
.mgc-col-left {
  flex: 0 0 var(--mg-column-left-width); width: var(--mg-column-left-width);
  border-right: var(--mg-hairline-width) solid var(--mg-hairline);
}
.mgc-col-middle { flex: 1 1 auto; min-width: 0; }
/* A spacer rather than padding: a middle pane that fills the column (the Room)
   keeps its full height, and a list that scrolls can still scroll its last row
   clear of the Nest. */
.mgc-col-middle::after { content: ""; display: block; height: var(--mg-nest-reserve); }
.mgc-col-right {
  flex: 0 0 var(--mg-column-right-width); width: var(--mg-column-right-width);
  border-left: var(--mg-hairline-width) solid var(--mg-hairline);
  /* The Nest is pinned over the foot of this column on every board, so the
     column's own content stops short of it rather than scrolling under it. */
  padding-bottom: var(--mg-nest-reserve);
}

/* The one-column layouts (FrameView.Layout). The frame draws only D2 in them,
   so there are no empty columns to fold away and no hairlines to hide. A
   sheet scrolls like any column; a canvas is clipped, because the surface
   inside sizes and scrolls itself and anything it paints past the edge must
   not show. */
.mgc-layout-canvas > .mgc-col-middle { overflow: hidden; }

.mgc-col-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--mg-space-3);
  padding: var(--mg-space-4) var(--mg-space-4) var(--mg-space-2);
}
.mgc-col-aside { font-size: var(--mg-size-small); color: var(--mg-ink-faint); }
.mgc-col-empty { margin: 0; padding: var(--mg-space-1) var(--mg-space-4); font-size: var(--mg-size-small); color: var(--mg-ink-faint); }

/* The column's own content box. Every tab draws D2 and D3 at the same
   margins and titles them at the same step, so the padding and the two
   headings are set here once rather than once per screen: 16 above, 24 at
   the sides of the list and 16 at the sides of the detail, and space-8 at the
   foot so the last row clears the Nest. */
.mgc-pane {
  display: flex; flex-direction: column; gap: var(--mg-space-4);
  min-width: 0;
  padding: var(--mg-space-4) var(--mg-space-5) var(--mg-space-8);
}
.mgc-col-right .mgc-pane { padding: var(--mg-space-4) var(--mg-space-4) var(--mg-space-8); }
/* D2's heading is the one Title in the column; D3's is a BodyStrong line,
   because the detail column is 376 wide and a Title there shouts over the
   list it belongs to. */
.mgc-pane-title {
  margin: 0;
  font-size: var(--mg-size-title); line-height: var(--mg-line-title);
  font-weight: var(--mg-weight-title); color: var(--mg-ink);
}
.mgc-panel-title {
  margin: 0;
  font-size: var(--mg-size-body-strong); line-height: var(--mg-line-body-strong);
  font-weight: var(--mg-weight-body-strong); color: var(--mg-ink);
}
.mgc-pane-sub { margin: var(--mg-space-1) 0 0; font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-secondary); }

/* ---- the loading gate ------------------------------------------------------ */

/* A column whose contents are on their way: bars where the lines will be, on
   the column's own insets so nothing shifts sideways when the words arrive.
   They are the hairline ink laid flat — the frame's quietest mark, not a grey
   of their own — and they do not shimmer: a pulse is a spinner by another
   name, and the frame is not asking to be watched.

   They also wait before they appear. Most reads land inside the delay, and
   then the reader sees the frame and then the page, with no placeholder in
   between; only a slow read earns the bars. */
.mgc-pending {
  display: flex; flex-direction: column; gap: var(--mg-space-3);
  padding: var(--mg-space-5) var(--mg-space-4);
  animation: mgc-pending-in 240ms ease-out 360ms both;
}
.mgc-skeleton {
  display: block;
  height: var(--mg-line-small);
  width: 72%;
  border-radius: var(--mg-radius-small);
  background: var(--mg-hairline);
}
.mgc-skeleton-title { height: var(--mg-line-display); width: 44%; margin-bottom: var(--mg-space-2); }
.mgc-skeleton-short { width: 52%; }
/* The name's place in the top bar: one line of the name's own height, about
   as wide as an alias, so "Diligence /" leads somewhere. */
.mgc-skeleton-here {
  display: inline-block; height: var(--mg-line-body); width: 128px;
  animation: mgc-pending-in 240ms ease-out 360ms both;
}
@keyframes mgc-pending-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mgc-pending, .mgc-skeleton-here { animation: none; }
}

/* ---- D1 · the section list ------------------------------------------------ */

.mgc-sections { display: flex; flex-direction: column; }
/* The rows are the kit's tree (.mm-tree, kit_style.go): the same row on every
   tab, so the D1 of one tab cannot drift from the D1 of the next. */

/* ---- E · the Nest --------------------------------------------------------- */

/* Fixed, bottom-right, over every surface and inside no column. It overlaps
   the right column on the boards rather than sitting in it, which is the
   whole reason it is drawn last and positioned against the viewport.

   Two shapes, both a fixed size so the reservation above is exact rather than
   a guess: closed, a bar the height of one control; open, a panel of a set
   height whose conversation scrolls inside it. */
.mgc-nest {
  position: fixed;
  right: var(--mgc-nest-gap);
  bottom: var(--mgc-nest-gap);
  z-index: 10;
  background: var(--mg-ground-sunken);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  box-shadow: var(--mg-shadow);
}

.mgc-nest-closed { border-radius: var(--mg-radius-pill); }
.mgc-nest-bar {
  appearance: none; border: 0; background: none; font-family: inherit; cursor: pointer;
  height: var(--mgc-nest-bar-height);
  display: flex; align-items: center; gap: var(--mg-space-2);
  padding: 0 var(--mg-space-2) 0 var(--mg-space-3);
  border-radius: var(--mg-radius-pill);
  color: var(--mg-ink);
}
.mgc-nest-bar:hover .mgc-nest-bar-glyph { color: var(--mg-ink); }
.mgc-nest-bar-hint { font-size: var(--mg-size-small); color: var(--mg-ink-faint); }
.mgc-nest-bar-glyph { display: flex; color: var(--mg-ink-faint); }
.mgc-nest-bar-glyph svg, .mgc-nest-collapse svg { width: 16px; height: 16px; display: block; }

.mgc-nest-open {
  width: var(--mg-nest-width);
  height: var(--mgc-nest-open-height);
  display: flex; flex-direction: column;
  border-radius: var(--mg-radius-large);
  overflow: hidden;
}

.mgc-nest-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--mg-space-2);
  padding: var(--mg-space-3) var(--mg-space-2) var(--mg-space-1) var(--mg-space-3);
}
.mgc-nest-title {
  flex: 1 1 auto;
  font-size: var(--mg-size-micro); line-height: var(--mg-line-micro);
  font-weight: var(--mg-weight-micro); letter-spacing: var(--mg-tracking-micro);
  text-transform: uppercase; color: var(--mg-ink);
}
.mgc-nest-pager { display: flex; align-items: center; gap: var(--mg-space-1); }
.mgc-nest-step {
  appearance: none; border: 0; background: none; padding: 0 var(--mg-space-1);
  font-family: inherit; font-size: var(--mg-size-small); color: var(--mg-ink-faint); cursor: pointer;
}
.mgc-nest-step:hover:not(:disabled) { color: var(--mg-ink); }
.mgc-nest-step:disabled { color: var(--mg-hairline); cursor: default; }
.mgc-nest-count { font-size: var(--mg-size-small); color: var(--mg-ink-faint); font-variant-numeric: tabular-nums; }
.mgc-nest-collapse {
  flex: none;
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: var(--mg-space-1); border-radius: var(--mg-radius-small);
  display: flex; color: var(--mg-ink-faint);
}
.mgc-nest-collapse:hover { color: var(--mg-ink); background: var(--mg-ground-selected); }

.mgc-nest-label {
  flex: 0 0 auto;
  padding: 0 var(--mg-space-3) var(--mg-space-2);
  font-size: var(--mg-size-micro); line-height: var(--mg-line-micro);
  font-weight: var(--mg-weight-micro); letter-spacing: var(--mg-tracking-micro);
  text-transform: uppercase; color: var(--mg-ink-faint);
}

.mgc-nest-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--mg-space-3); display: flex; flex-direction: column; }
.mgc-nest-para { margin: 0 0 var(--mg-space-3); font-size: var(--mg-size-body); line-height: var(--mg-line-body); color: var(--mg-ink); }

/* The designed empty state: one faint line, set in the middle of the panel
   rather than at its top, so the panel reads as waiting and not as broken. */
.mgc-nest-empty {
  margin: auto 0; padding: var(--mg-space-4) var(--mg-space-2);
  text-align: center;
  font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-faint);
}

.mgc-nest-conversation { display: flex; flex-direction: column; gap: var(--mg-space-3); padding-bottom: var(--mg-space-3); overflow-wrap: anywhere; }
.mgc-nest-exchange { display: flex; flex-direction: column; gap: var(--mg-space-3); }

/* A speaker row: the frame's Micro eyebrow naming who spoke, over what they
   said. The analyst's own words sit in the secondary ink — they know what
   they asked; Magpie's answer is what they came to read. */
.mgc-nest-turn { display: flex; flex-direction: column; gap: var(--mg-space-1); }
.mgc-nest-speaker {
  font-size: var(--mg-size-micro); line-height: var(--mg-line-micro);
  font-weight: var(--mg-weight-micro); letter-spacing: var(--mg-tracking-micro);
  text-transform: uppercase; color: var(--mg-ink-faint);
}
.mgc-nest-said { font-size: var(--mg-size-body); line-height: var(--mg-line-body); color: var(--mg-ink); }
.mgc-nest-plain { margin: 0; white-space: pre-wrap; }
.mgc-nest-turn-you .mgc-nest-said { color: var(--mg-ink-secondary); }

/* Markdown, as renderMarkdown draws it. Tight: the panel is 354 wide and a
   reply is read, not skimmed like a page. */
.mgc-nest-said > :first-child { margin-top: 0; }
.mgc-nest-said > :last-child { margin-bottom: 0; }
.mgc-nest-md-p { margin: 0 0 var(--mg-space-2); }
.mgc-nest-md-h {
  margin: var(--mg-space-3) 0 var(--mg-space-1);
  font-size: var(--mg-size-body-strong); line-height: var(--mg-line-body-strong);
  font-weight: var(--mg-weight-body-strong); color: var(--mg-ink);
}
.mgc-nest-md-list { margin: 0 0 var(--mg-space-2); padding-left: var(--mg-space-5); }
.mgc-nest-md-list > li { margin-bottom: var(--mg-space-1); }
.mgc-nest-md-list > li::marker { color: var(--mg-ink-faint); }
.mgc-nest-said strong { font-weight: var(--mg-weight-body-strong); }
.mgc-nest-md-code {
  padding: 0 var(--mg-space-1);
  background: var(--mg-ground-selected); border-radius: var(--mg-radius-small);
  font-size: var(--mg-size-small);
}
.mgc-nest-md-pre {
  margin: 0 0 var(--mg-space-2); padding: var(--mg-space-2);
  background: var(--mg-ground); border-radius: var(--mg-radius-small);
  font-size: var(--mg-size-small); line-height: var(--mg-line-small);
  white-space: pre-wrap;
}
.mgc-nest-md-hr { border: 0; border-top: var(--mg-hairline-width) solid var(--mg-hairline); margin: var(--mg-space-3) 0; }

/* What the product did, not what anyone said: no speaker, quieter ink. */
.mgc-nest-system { margin: 0; font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-faint); }
/* The line under a working request: what and how long, then the promise
   that nothing lands until the end, a step quieter. */
.mgc-nest-progress p { margin: 0; }
.mgc-nest-progress { color: var(--mg-ink-secondary); }
.mgc-nest-assure { color: var(--mg-ink-faint); }
.mgc-nest-alert {
  display: flex; gap: var(--mg-space-2); align-items: baseline;
  padding: var(--mg-space-2) var(--mg-space-3);
  background: var(--mg-ground);
  border-left: 2px solid var(--mg-danger);
  border-radius: var(--mg-radius-small);
  font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink);
}
.mgc-nest-alert-label { flex: none; font-weight: var(--mg-weight-body-strong); color: var(--mg-danger); }

/* The reply field is a docs/06 CO2 input: hairline at rest, 1dp Ink when
   focused, no glow. The border is on the box rather than the field so the
   send button sits inside the ring. */
.mgc-nest-reply {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--mg-space-2);
  margin: 0 var(--mg-space-3) var(--mg-space-3);
  padding: 0 var(--mg-space-2) 0 var(--mg-space-3);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
}
.mgc-nest-reply:focus-within { border-color: var(--mg-ink); }
.mgc-nest-input {
  flex: 1 1 auto; min-width: 0;
  appearance: none; border: 0; background: none; outline: none;
  height: 34px; font-family: inherit;
  font-size: var(--mg-size-small); color: var(--mg-ink);
}
.mgc-nest-input::placeholder { color: var(--mg-ink-faint); }
.mgc-nest-send {
  flex: 0 0 auto;
  appearance: none; border: 0; background: none; padding: var(--mg-space-1);
  display: flex; align-items: center; color: var(--mg-ink); cursor: pointer;
}
.mgc-nest-send svg { width: 14px; height: 14px; display: block; }
.mgc-nest-send:disabled { color: var(--mg-ink-faint); cursor: default; }


body { background: var(--mg-ground) !important; }
body > canvas { display: none !important; }

.agents { display: flex; flex-direction: column; gap: var(--mg-space-5); max-width: 880px; padding: var(--mg-space-6) var(--mg-space-5) var(--mg-nest-reserve); }
.agents > .mm-eyebrow { margin-bottom: calc(-1 * var(--mg-space-4)); }
.agents-totals { display: flex; flex-direction: column; gap: var(--mg-space-1); }
.agents-figures { margin: 0; font-size: var(--mg-size-body); color: var(--mg-ink-secondary); }
.agents-section { display: flex; flex-direction: column; gap: var(--mg-space-3); }
.agents-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mg-space-2); }
.agents-row { display: flex; flex-direction: column; gap: var(--mg-space-1); padding: var(--mg-space-3) var(--mg-space-4); }
.agents-row-head { display: flex; align-items: center; gap: var(--mg-space-3); flex-wrap: wrap; }
.agents-who { font-weight: var(--mg-weight-body-strong); }
.agents-key { margin-left: auto; font-size: var(--mg-size-micro); color: var(--mg-ink-faint); font-family: ui-monospace, monospace; }
.agents-facts { margin: 0; font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-secondary); }
.agents-kinds-head { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-3); flex-wrap: wrap; }
.agents-kind { display: flex; flex-direction: column; gap: var(--mg-space-1); padding: var(--mg-space-3) 0; border-bottom: var(--mg-hairline-width) solid var(--mg-hairline); }
.agents-decider { font-size: var(--mg-size-micro); }
.agents-error { margin: 0; font-size: var(--mg-size-small); color: var(--mg-danger); overflow-wrap: anywhere; }
.agents-detail summary { cursor: pointer; font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }
.agents-detail pre { margin: var(--mg-space-2) 0 0; padding: var(--mg-space-3); max-height: 320px; overflow: auto; background: var(--mg-ground-sunken); border-radius: var(--mg-radius-small); font-size: var(--mg-size-micro); line-height: var(--mg-line-micro); white-space: pre-wrap; overflow-wrap: anywhere; }


/* ---- D2 · the open section ------------------------------------------------ */

/* The column's padding, title and sub-line are the frame's (.mgc-pane,
   .mgc-pane-title, .mgc-pane-sub). The lede wraps at the width the board
   wraps it: two lines, not four. */
.canon-screen { gap: 0; }
.canon-screen-lede { max-width: 660px; }

.canon-screen-actions {
  display: flex;
  align-items: flex-start;
  gap: var(--mg-space-5);
  margin: var(--mg-space-4) 0 var(--mg-space-5);
}

/* Each action is a control with its consequence written under it. The note is
   the reason the row is three buttons wide and not a menu: the analyst is
   choosing between three different promises, and each one says what it does
   before it is pressed. */
.canon-screen-action {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-2);
  max-width: 180px;
}
.canon-screen-action-note {
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-faint);
}

/* The three actions are kit buttons at the regular height; an unwired one is
   the kit's inert button, drawn, not hidden (the rail's rule). */

/* ---- an answer ------------------------------------------------------------ */

.canon-screen-fields { display: flex; flex-direction: column; gap: var(--mg-space-4); }

/* Label and answer, centered on each other: the board centers the label
   against a two-line empty box as well as a one-line filled one. */
.canon-screen-field {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: var(--mg-space-4);
  align-items: center;
}
.canon-screen-field-label {
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  color: var(--mg-ink);
}
/* An answer I do not have fades its label too. */
.canon-screen-field-blank .canon-screen-field-label { color: var(--mg-ink-faint); }

.canon-screen-answer {
  display: flex;
  align-items: center;
  gap: var(--mg-space-3);
  min-height: 40px;
  padding: var(--mg-space-2) var(--mg-space-3);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-large);
  transition: border-color var(--mg-motion), box-shadow var(--mg-motion);
}

/* Empty: the same box, dashed and sunken, with the dash where the value goes
   and the promise under it. */
.canon-screen-answer-blank {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mg-space-1);
  background: var(--mg-ground-sunken);
  border-style: dashed;
}
.canon-screen-dash { color: var(--mg-ink-faint); }
.canon-screen-note {
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-faint);
}

.canon-screen-value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  color: var(--mg-ink);
}

/* The masked qualifier: the gap made visible rather than theoretical
   (figma/canon/state_3_note.svg). */
.canon-screen-masked {
  flex: none;
  font-size: var(--mg-size-micro);
  line-height: var(--mg-line-micro);
  font-weight: var(--mg-weight-micro);
  letter-spacing: var(--mg-tracking-micro);
  text-transform: uppercase;
  color: var(--mg-ink-faint);
}

.canon-screen-answer-live { cursor: pointer; }
.canon-screen-answer-live:hover { border-color: var(--mg-ink-faint); }
/* Selection is the hairline gone ink and doubled with a ring of itself. */
.canon-screen-answer-open,
.canon-screen-answer-open:hover {
  border-color: var(--mg-ink);
  box-shadow: inset 0 0 0 var(--mg-hairline-width) var(--mg-ink);
}

/* ---- a list answer -------------------------------------------------------- */

/* One box, rows inside it: the board does not give each group entity its own
   card, because they are one answer with several parts. */
.canon-screen-entries {
  display: flex;
  flex-direction: column;
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-large);
}
.canon-screen-entry {
  display: flex;
  align-items: center;
  gap: var(--mg-space-3);
  padding: var(--mg-space-2) var(--mg-space-3);
  min-height: 52px;
  border-top: var(--mg-hairline-width) solid var(--mg-hairline);
}
.canon-screen-entry:first-child { border-top: 0; }
.canon-screen-entry-open { background: var(--mg-ground-selected); }
.canon-screen-entry-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.canon-screen-entry-title {
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  font-weight: var(--mg-weight-body-strong);
  color: var(--mg-ink);
}
.canon-screen-entry-detail {
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-faint);
}

.canon-screen-add {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--mg-space-2);
  width: 100%;
  min-height: 40px;
  padding: var(--mg-space-2) var(--mg-space-3);
  border: 0;
  border-top: var(--mg-hairline-width) solid var(--mg-hairline);
  background: none;
  font-family: inherit;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-faint);
  text-align: left;
  cursor: pointer;
}
.canon-screen-add:hover:not(:disabled) { color: var(--mg-ink); }
.canon-screen-add:disabled { cursor: default; }
.canon-screen-add-mark { font-size: var(--mg-size-body); line-height: var(--mg-line-small); }

/* ---- the three marks ------------------------------------------------------ */

.canon-screen-marks {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--mg-space-2);
}

/* "vs": two sources disagree. A badge (.mm-badge) rather than a glyph, because
   it has to read as a state of the row and not as a letter in the value. */

/* The analyst's mark: empty circle until a person says yes, ink once they
   have. Never the same shape as the verification check. */
.canon-screen-dot {
  appearance: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-pill);
  background: var(--mg-ground);
  font-family: inherit;
  font-size: var(--mg-size-micro);
  line-height: 1;
  color: var(--mg-ground);
  cursor: pointer;
  transition: border-color var(--mg-motion), background-color var(--mg-motion);
}
.canon-screen-dot:hover:not(:disabled) { border-color: var(--mg-ink); }
/* go-app writes a true attribute as its bare name in the pre-rendered HTML
   and as the string in the browser, so the pressed state is matched in both
   spellings rather than only the one the wasm build produces. */
.canon-screen-dot[aria-pressed="true"],
.canon-screen-dot[aria-pressed=""] {
  background: var(--mg-ink);
  border-color: var(--mg-ink);
  color: var(--mg-ground);
}
.canon-screen-dot:disabled { cursor: default; }

/* My mark: checked at source. Grey here; the green one is D3's, once. */
.canon-screen-verified {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  color: var(--mg-ink-secondary);
  font-size: var(--mg-size-micro);
  line-height: 1;
}

/* ---- D3 · the source ------------------------------------------------------ */

.canon-screen-source-body { padding: 0 var(--mg-space-4); }

.canon-screen-source-label {
  margin: 0;
  font-size: var(--mg-size-body-strong);
  line-height: var(--mg-line-body-strong);
  font-weight: var(--mg-weight-body-strong);
  color: var(--mg-ink);
}
.canon-screen-source-value {
  margin: 0 0 var(--mg-space-4);
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  color: var(--mg-ink-faint);
}

.canon-screen-source-item {
  display: flex;
  align-items: flex-start;
  gap: var(--mg-space-2);
  padding: var(--mg-space-2) 0;
}
.canon-screen-source-mark { flex: 0 0 14px; line-height: var(--mg-line-body); }
.canon-screen-source-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.canon-screen-source-link {
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  color: var(--mg-provenance);
  text-decoration: none;
}
.canon-screen-source-link:hover { text-decoration: underline; }
.canon-screen-source-title {
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  color: var(--mg-ink);
}
.canon-screen-source-detail {
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-faint);
}
.canon-screen-source-out { flex: none; color: var(--mg-ink-faint); }

/* The note is the first-person line under the rule: why this answer's source
   is what it is. */
.canon-screen-source-note {
  margin: var(--mg-space-3) 0 0;
  padding-top: var(--mg-space-3);
  border-top: var(--mg-hairline-width) solid var(--mg-hairline);
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-faint);
}

/* D2 with a failure above it. One line in Danger, above the section, so the
   rows below carry on showing what is stored — that part is still true. */
.canon-screen-middle { display: flex; flex-direction: column; min-height: 0; }
.canon-screen-error {
  margin: var(--mg-space-5) var(--mg-space-5) 0;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-danger);
}


/* ---- the columns ---------------------------------------------------------- */

/* The columns' margins and titles are the frame's (.mgc-pane); D2 on this
   tab only spaces its blocks a step wider. */
.data-pane { gap: var(--mg-space-5); }

/* A block is an eyebrow and the rows under it — the docs/06 TY3 device, which
   is why not one of them has a border. */
.data-block { display: flex; flex-direction: column; gap: var(--mg-space-2); }
.data-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--mg-space-3);
}
.data-block-link {
  appearance: none; border: 0; background: none; padding: 0;
  font-family: inherit; font-size: var(--mg-size-small);
  color: var(--mg-provenance); text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.data-block-link:hover { text-decoration: underline; }

.data-standing { margin: 0; font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-secondary); }
.data-foot { margin: 0; font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-faint); }

/* ---- the marks ------------------------------------------------------------ */

/* figma/data/note_2.svg: "Squares are ink only. Shaded, hatched (45° lines at
   1px), dot inside, hollow." Four patterns, one 12dp square, drawn in CSS
   because they are one shape with four fills. */
.data-mark {
  flex: 0 0 auto;
  width: 12px; height: 12px;
  border-radius: 2px;
  display: inline-block;
}
.data-mark-none { background: none; }
.data-mark-shaded { background: var(--mg-ink); }
.data-mark-hatched {
  border: var(--mg-hairline-width) solid var(--mg-ink);
  background: repeating-linear-gradient(45deg,
    var(--mg-ink) 0 1px, var(--mg-ground) 1px 4px);
}
.data-mark-dotted {
  border: var(--mg-hairline-width) solid var(--mg-ink);
  background:
    radial-gradient(circle at 50% 50%, var(--mg-ink) 0 2px, var(--mg-ground) 2px);
}
.data-mark-hollow { border: var(--mg-hairline-width) solid var(--mg-ink); }

/* The disagreement mark. Amber on the boards; there is no amber token and a
   screen workspace may not add one, so it is ink and the gap is reported. */
.data-dot {
  flex: 0 0 auto;
  width: 6px; height: 6px; border-radius: var(--mg-radius-pill);
  background: var(--mg-ink);
  display: inline-block;
}

/* Magpie's own glyph, which is the one thing on these boards that is allowed
   to be blue: docs/06 CL1 reserves Provenance for a first-person system
   statement, and "I suggested this" is exactly one. */
.data-spark { flex: 0 0 auto; display: inline-flex; color: var(--mg-provenance); }
.data-spark svg { width: 11px; height: 11px; display: block; }

/* ---- controls ------------------------------------------------------------- */

.data-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--mg-space-3); flex-wrap: wrap;
}
.data-actions-left { display: flex; align-items: center; gap: var(--mg-space-2); }

/* The audience control. A pill group, not a field: it states who the row is
   for, and states are not settings. */
.data-labels-block { display: flex; flex-direction: column; gap: var(--mg-space-2); }
.data-labels {
  display: inline-flex; align-items: center; gap: var(--mg-space-2);
  align-self: flex-start;
  padding: var(--mg-space-1) var(--mg-space-2);
  background: var(--mg-ground-sunken);
  border-radius: var(--mg-radius-pill);
}
.data-labels-who { display: inline-flex; color: var(--mg-ink-faint); }
.data-labels-who svg { width: 14px; height: 14px; display: block; }
.data-add { align-self: flex-start; }

.data-note-field { height: 36px; border-radius: var(--mg-radius-small); font-size: var(--mg-size-small); }

/* ---- the Overview --------------------------------------------------------- */

.data-stats {
  display: flex; flex-wrap: wrap; gap: var(--mg-space-6);
  padding-bottom: var(--mg-space-1);
}
.data-stat { display: flex; flex-direction: column; gap: var(--mg-space-1); }
.data-stat-n {
  font-size: var(--mg-size-title); line-height: var(--mg-line-title);
  font-weight: var(--mg-weight-title); color: var(--mg-ink);
  font-variant-numeric: tabular-nums;
}

.data-dis-list { display: flex; flex-direction: column; }
.data-dis {
  display: flex; flex-direction: column; gap: var(--mg-space-1);
  padding: var(--mg-space-3) 0;
  border-bottom: var(--mg-hairline-width) solid var(--mg-hairline);
}
.data-dis:last-child { border-bottom: 0; }
.data-dis-head { display: flex; align-items: center; gap: var(--mg-space-2); }
.data-dis-term {
  font-size: var(--mg-size-body-strong); font-weight: var(--mg-weight-body-strong);
  color: var(--mg-ink);
}
.data-dis-explore { margin-left: auto; font-size: var(--mg-size-small); color: var(--mg-provenance); text-decoration: none; }
.data-dis-explore:hover { text-decoration: underline; }
.data-dis-line { margin: 0; font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-secondary); }

/* Two cards, side by side, each a count and what to do about it. They wrap
   rather than shrink: the sentence under the number is the point. */
.data-needs { display: flex; flex-wrap: wrap; gap: var(--mg-space-3); }
.data-need {
  flex: 1 1 240px;
  display: flex; flex-direction: column; gap: var(--mg-space-1);
  padding: var(--mg-space-4);
  background: var(--mg-ground-sunken);
  border-radius: var(--mg-radius-large);
}
.data-need-n {
  font-size: var(--mg-size-display); line-height: var(--mg-line-display);
  font-weight: var(--mg-weight-display); color: var(--mg-ink);
  font-variant-numeric: tabular-nums;
}
.data-need-body { margin: var(--mg-space-1) 0 0; font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-secondary); }
.data-need-action { margin-top: var(--mg-space-2); font-size: var(--mg-size-small); color: var(--mg-provenance); text-decoration: none; }
.data-need-action:hover { text-decoration: underline; }

/* ---- Files and Working docs ----------------------------------------------- */

/* The note strip at the top of Working docs. It is a strip and not a card
   because it is a condition on the whole list under it. */
.data-note {
  display: flex; align-items: center; gap: var(--mg-space-2);
  padding: var(--mg-space-2) var(--mg-space-3);
  background: var(--mg-ground-sunken);
  border-radius: var(--mg-radius-small);
}
.data-note-text { font-size: var(--mg-size-small); color: var(--mg-ink); }

.data-groups { display: flex; flex-direction: column; gap: var(--mg-space-5); }
.data-group { display: flex; flex-direction: column; gap: var(--mg-space-2); }
.data-group-head { display: flex; align-items: baseline; gap: var(--mg-space-3); }
.data-group-num { flex: 0 0 24px; font-size: var(--mg-size-small); color: var(--mg-ink-faint); font-variant-numeric: tabular-nums; }
.data-group-label { flex: 1 1 auto; min-width: 0; font-size: var(--mg-size-body); color: var(--mg-ink); }
.data-group-label-open { text-decoration: underline; text-underline-offset: 3px; }
.data-group-link { flex: 0 0 auto; font-size: var(--mg-size-small); color: var(--mg-provenance); text-decoration: none; white-space: nowrap; }
.data-group-link:hover { text-decoration: underline; }

.data-file-list { display: flex; flex-direction: column; gap: var(--mg-space-2); }
.data-file {
  display: flex; align-items: center; gap: var(--mg-space-3);
  padding: var(--mg-space-2) var(--mg-space-3);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  color: var(--mg-ink); text-decoration: none;
  transition: background-color var(--mg-motion);
}
a.data-file:hover { background: var(--mg-ground-sunken); }
.data-file-open { background: var(--mg-ground-selected); }
.data-file-tick { flex: 0 0 auto; accent-color: var(--mg-ink); margin: 0; }
/* A row in a selection is a box holding a tick and a link, not a link with a
   tick inside it, so the link takes the rest of the row. */
.data-file-open-area {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--mg-space-3);
  color: var(--mg-ink); text-decoration: none;
}
.data-file-ref {
  flex: 0 0 54px;
  font-size: var(--mg-size-small); color: var(--mg-ink-faint);
  font-variant-numeric: tabular-nums;
}
.data-file-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.data-file-name {
  font-size: var(--mg-size-body-strong); font-weight: var(--mg-weight-body-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.data-file-meta { font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-faint); }
.data-file-aside { flex: 0 0 auto; font-size: var(--mg-size-small); color: var(--mg-ink-faint); white-space: nowrap; }

/* ---- the detail columns --------------------------------------------------- */

.data-detail-head { display: flex; align-items: center; gap: var(--mg-space-2); }
.data-detail-body { margin: 0; font-size: var(--mg-size-body); line-height: var(--mg-line-body); color: var(--mg-ink); }
.data-detail-actions { display: flex; align-items: center; gap: var(--mg-space-2); flex-wrap: wrap; }

/* The definition box. Drawn even when empty, because an undefined term is the
   state most worth showing. */
.data-def {
  padding: var(--mg-space-3);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
}
.data-def-text { margin: 0; font-size: var(--mg-size-body); line-height: var(--mg-line-body); color: var(--mg-ink); }
.data-def-empty { color: var(--mg-ink-faint); font-size: var(--mg-size-small); }

.data-row-muted .data-row-mid { color: var(--mg-ink-faint); }
.data-row-lead { flex: 0 0 var(--mg-space-5); font-size: var(--mg-size-body-strong); font-weight: var(--mg-weight-body-strong); }
.data-row-links { flex: 0 0 auto; display: flex; gap: var(--mg-space-3); }
.data-term-mid { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--mg-space-2); }
.data-term-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--mg-size-body); }

.data-acts { display: flex; flex-direction: column; gap: var(--mg-space-2); }
.data-act { display: flex; align-items: baseline; gap: var(--mg-space-2); }
.data-act-dot { flex: 0 0 auto; width: 4px; height: 4px; border-radius: var(--mg-radius-pill); background: var(--mg-ink-faint); }
.data-act-line { flex: 1 1 auto; min-width: 0; font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-secondary); }
.data-act-when { flex: 0 0 auto; font-size: var(--mg-size-small); color: var(--mg-ink-faint); font-variant-numeric: tabular-nums; }

.data-byline { display: flex; align-items: center; gap: var(--mg-space-2); }
.data-byline-text { font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }

/* ---- the Matrix ----------------------------------------------------------- */

/* The scroller. TERM, VALUE and SOURCES are sticky inside it, so they stay
   while the sources walk past; the page itself never scrolls sideways, which
   is the whole reason the overflow is here and not on the column.

   One scroller rather than two synchronised lists: one scroller keeps a row a
   row, so it hovers, selects and lines up as a unit without script. */
.data-mx {
  --data-mx-term: 156px;
  --data-mx-value: 120px;
  --data-mx-sources: 72px;
  min-width: 0;
}
.data-mx-scroll {
  overflow-x: auto;
  border-top: var(--mg-hairline-width) solid var(--mg-hairline);
}
.data-mx-group { display: flex; flex-direction: column; }

.data-mx-row {
  display: flex; align-items: center;
  width: max-content; min-width: 100%;
  min-height: 26px;
  border-bottom: var(--mg-hairline-width) solid var(--mg-hairline);
}
.data-mx-term, .data-mx-value, .data-mx-sources {
  position: sticky; z-index: 1;
  display: flex; align-items: center; gap: var(--mg-space-2);
  align-self: stretch;
  background: var(--mg-ground);
}
.data-mx-term { left: 0; flex: 0 0 var(--data-mx-term); width: var(--data-mx-term); padding-left: var(--mg-space-1); }
.data-mx-value { left: var(--data-mx-term); flex: 0 0 var(--data-mx-value); width: var(--data-mx-value); }
.data-mx-sources {
  left: calc(var(--data-mx-term) + var(--data-mx-value));
  flex: 0 0 var(--data-mx-sources); width: var(--data-mx-sources);
  justify-content: flex-end; padding-right: var(--mg-space-3);
}
.data-mx-term-row:hover .data-mx-term,
.data-mx-term-row:hover .data-mx-value,
.data-mx-term-row:hover .data-mx-sources { background: var(--mg-ground-sunken); }
.data-mx-term-row:hover { background: var(--mg-ground-sunken); }
.data-mx-row-open,
.data-mx-row-open .data-mx-term,
.data-mx-row-open .data-mx-value,
.data-mx-row-open .data-mx-sources { background: var(--mg-ground-selected); }

/* The rotated headers. The board gives them y=280 to the TERM baseline at
   y=432; 208dp is what the same names need at this type size, and the strip
   is sized to the names rather than the names clipped to the strip — a
   source column whose name is cut off is a column nobody can identify.
   vertical-rl turned through a half turn is the 90° counter-clockwise the
   board draws, and it puts the reference at the foot of the label, which is
   where the board has it. */
.data-mx-head { align-items: flex-end; border-bottom: var(--mg-hairline-width) solid var(--mg-hairline); }
.data-mx-head .data-mx-term,
.data-mx-head .data-mx-value,
.data-mx-head .data-mx-sources { align-items: flex-end; padding-bottom: var(--mg-space-1); }
.data-mx-cell-head { height: 208px; align-items: flex-end; justify-content: center; }
.data-mx-caption {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: inline-flex; align-items: center; gap: var(--mg-space-2);
  white-space: nowrap;
  max-height: 204px;
  overflow: hidden;
  font-size: var(--mg-size-small);
}
.data-mx-caption-ref { color: var(--mg-ink-faint); font-variant-numeric: tabular-nums; }
.data-mx-caption-name { color: var(--mg-ink-secondary); }

.data-mx-cells { display: flex; align-items: stretch; }
.data-mx-band { display: flex; align-items: stretch; }
/* The fund's columns are a group of their own behind a rule, so a figure the
   fund computed is never read as one the company asserted. */
.data-mx-band-fund { position: relative; padding-left: var(--mg-space-3); margin-left: var(--mg-space-3); }
.data-mx-head .data-mx-band-fund { border-left: var(--mg-hairline-width) solid var(--mg-hairline); }
.data-mx-bandname { position: absolute; top: 0; right: 0; white-space: nowrap; }

/* 24dp columns: the board's marks are at x=678, 702, 726 — a 24 pitch. */
.data-mx-cell {
  flex: 0 0 24px; width: 24px;
  display: flex; align-items: center; justify-content: center;
}

.data-mx-grouphead { border-bottom: var(--mg-hairline-width) solid var(--mg-hairline); }
.data-mx-groupname { font-size: var(--mg-size-body-strong); font-weight: var(--mg-weight-body-strong); color: var(--mg-ink); }
.data-mx-row-nested .data-mx-term { padding-left: var(--mg-space-4); }
.data-mx-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--mg-size-body); color: var(--mg-ink); text-decoration: none;
}
a.data-mx-name:hover { text-decoration: underline; }
.data-mx-figure { font-size: var(--mg-size-body); color: var(--mg-ink); font-variant-numeric: tabular-nums; }
.data-mx-count { font-size: var(--mg-size-small); color: var(--mg-ink-secondary); font-variant-numeric: tabular-nums; }

.data-value-row { display: flex; align-items: center; gap: var(--mg-space-2); }
.data-value-input { flex: 1 1 auto; min-width: 0; height: 36px; border-radius: var(--mg-radius-small); font-size: var(--mg-size-small); }
.data-value-block { display: flex; flex-direction: column; gap: var(--mg-space-2); padding-top: var(--mg-space-2); }
.data-value-head { display: flex; align-items: center; gap: var(--mg-space-2); }
.data-value-label { font-size: var(--mg-size-body-strong); font-weight: var(--mg-weight-body-strong); color: var(--mg-ink); }

/* A quote is evidence. The source line and the words are the same size, and
   nothing here paraphrases either. */
.data-quote {
  display: flex; flex-direction: column; gap: var(--mg-space-1);
  padding: var(--mg-space-2) var(--mg-space-3);
  border-radius: var(--mg-radius-small);
  color: var(--mg-ink); text-decoration: none;
}
a.data-quote:hover { background: var(--mg-ground-sunken); }
.data-quote-open { background: var(--mg-ground-selected); }
.data-quote-src { display: flex; align-items: baseline; gap: var(--mg-space-2); }
.data-quote-ref { flex: 1 1 auto; min-width: 0; font-size: var(--mg-size-small); color: var(--mg-ink-faint); }
.data-quote-text { margin: 0; font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink); }
.data-quote-note { margin: 0; font-size: var(--mg-size-small); color: var(--mg-ink-faint); }

/* ---- Investigations -------------------------------------------------------- */

.data-claims { display: flex; flex-direction: column; }
.data-claim {
  display: flex; align-items: center; gap: var(--mg-space-3);
  min-height: 34px;
  color: var(--mg-ink); text-decoration: none;
  border-bottom: var(--mg-hairline-width) solid var(--mg-hairline);
  transition: background-color var(--mg-motion);
}
a.data-claim:hover { background: var(--mg-ground-sunken); }
.data-claim-open { background: var(--mg-ground-selected); }
.data-claim-head { border-bottom: var(--mg-hairline-width) solid var(--mg-hairline); min-height: 26px; }
.data-claim-text { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--mg-space-2); }
.data-claim-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--mg-size-body); }
.data-claim-by { flex: 0 0 150px; display: flex; align-items: center; gap: var(--mg-space-2); }
.data-claim-who { font-size: var(--mg-size-small); color: var(--mg-ink-secondary); white-space: nowrap; }
.data-claim-srcs { flex: 0 0 170px; display: flex; align-items: center; }
.data-claim-marks { display: flex; align-items: center; gap: var(--mg-space-1); }
.data-claim-none { font-size: var(--mg-size-small); color: var(--mg-ink-faint); }

.data-claim-src {
  display: flex; flex-direction: column; gap: var(--mg-space-2);
  padding-bottom: var(--mg-space-3);
}
.data-claim-hl { padding-left: var(--mg-space-2); }

.data-hl { display: flex; flex-direction: column; gap: var(--mg-space-1); padding-left: var(--mg-space-2); }
.data-hl-head { display: flex; align-items: center; gap: var(--mg-space-1); }
.data-hl-locus { font-size: var(--mg-size-small); color: var(--mg-ink-faint); }
.data-hl-text {
  margin: 0;
  padding: var(--mg-space-2);
  background: var(--mg-ground-sunken);
  border-radius: var(--mg-radius-small);
  font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink);
}
/* The words the document says and the argument about them are kept apart: a
   card sits on the ground, inside a border, and can be edited; the quote
   above it cannot. */
.data-card {
  display: flex; flex-direction: column; gap: var(--mg-space-1);
  padding: var(--mg-space-2);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
}
.data-card-text { margin: 0; font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink); }

/* A write that did not land says so above the list it did not change. It is
   the one place this tab spends Danger: the sentence is about something the
   analyst has just done and believes has happened. */
.data-pane-wrap { display: flex; flex-direction: column; min-height: 0; }
.data-trouble {
  margin: 0;
  padding: var(--mg-space-3) var(--mg-space-4) 0;
  font-size: var(--mg-size-small); line-height: var(--mg-line-small);
  color: var(--mg-danger);
}


.evidence-workspace{display:grid;grid-template-columns:230px minmax(350px,1fr) 310px;min-height:100%}
.evidence-index,.evidence-notes{padding:24px;border-right:1px solid var(--mg-hairline);min-width:0}.evidence-notes{border-left:1px solid var(--mg-hairline);padding-bottom:140px}.evidence-main{padding:24px;min-width:0}
.evidence-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.evidence-toolbar h2{flex:1 1 100%;font-size:18px}.evidence-workspace h3{font-size:13px;margin:18px 0 10px}.evidence-workspace h4{font-size:12px;margin:16px 0 8px}.evidence-workspace p{font-size:13px;line-height:1.5}
.evidence-workspace button,.evidence-workspace select{padding:8px 12px;border:1px solid var(--mg-hairline);border-radius:6px;background:var(--mg-ground);color:inherit;cursor:pointer}.evidence-workspace button:disabled{opacity:.5;cursor:default}.evidence-workspace button[aria-pressed=true]{background:var(--mg-ground-sunken)}
.evidence-columns{display:flex;gap:18px;overflow-x:auto;padding-top:20px;align-items:flex-start}.evidence-file{flex:1 0 170px;min-width:170px;max-width:260px}.evidence-file h3{position:sticky;top:0;background:var(--mg-ground);margin-top:0;overflow-wrap:anywhere}
.evidence-page{display:block;width:100%;margin-bottom:12px;text-align:left;min-height:120px}.evidence-page img{width:100%;height:auto}.evidence-page-marked{border-color:var(--mg-ink-secondary)!important}.evidence-page-selected{outline:2px solid var(--mg-provenance)}.evidence-value{display:block;padding:5px;background:var(--mg-ground-sunken);margin-top:6px;font-size:12px}.evidence-page-meta{color:var(--mg-ink-secondary)}.evidence-mark{display:block;margin:5px 0;width:100%;text-align:left;font-size:12px}
.evidence-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.6;max-height:440px;overflow:auto;border:1px solid var(--mg-hairline);padding:12px}.evidence-note{border:1px solid var(--mg-hairline);border-radius:8px;padding:12px;margin-bottom:10px}.evidence-workspace textarea{width:100%;min-height:100px;padding:10px;border:1px solid var(--mg-hairline);border-radius:6px}.evidence-workspace select{width:100%;margin:8px 0}
@media(max-width:1100px){.evidence-workspace{grid-template-columns:180px minmax(300px,1fr)}.evidence-notes{grid-column:1/-1}}@media(max-width:700px){.evidence-workspace{display:block}.evidence-index{border-bottom:1px solid var(--mg-hairline)}}


/* The tab wraps the frame so the upload confirmation can sit beside it as a
   sibling rather than inside a scrolling column. It must add no box of its
   own: the frame is the layout. */
.eval { display: contents; }

/* ---- D1 · the locked foot ------------------------------------------------ */

/* A locked set takes no new questions, so "+ add" is replaced by the reason.
   It is a statement: no hover, no pointer, nothing that suggests pressing. */
.eval-locked-foot {
  display: flex; align-items: center; gap: var(--mg-space-2);
  padding: var(--mg-space-2) var(--mg-space-4);
  font-size: var(--mg-size-small); line-height: var(--mg-line-small);
  color: var(--mg-ink-faint);
}
.eval-locked-foot svg { width: 13px; height: 13px; flex: none; display: block; }

/* ---- D2 · the Overview document ------------------------------------------ */

.eval-actions { display: flex; align-items: center; gap: var(--mg-space-2); }

/* The lock and its switch are one object, pushed to the far right of the row
   because the lock is about the whole sheet and not about either command. */
.eval-lock { margin-left: auto; display: flex; align-items: center; gap: var(--mg-space-2); }
.eval-lock-icon { display: flex; color: var(--mg-ink); }
.eval-lock-icon svg { width: 14px; height: 14px; display: block; }

/* The Overview is the artefact that gets exported as a PDF, so it is the one
   place in the tab drawn as a sheet. An open question has no card. */
.eval-sheet {
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-large);
  padding: var(--mg-space-6) var(--mg-space-5) var(--mg-space-5);
}
.eval-byline {
  margin: var(--mg-space-1) 0 0;
  font-size: var(--mg-size-small); line-height: var(--mg-line-small);
  color: var(--mg-ink-faint);
}
.eval-sheet-rule {
  height: var(--mg-hairline-width);
  margin: var(--mg-space-4) 0 var(--mg-space-5);
  background: var(--mg-hairline);
}

.eval-set { margin-bottom: var(--mg-space-5); }
.eval-set:last-child { margin-bottom: 0; }
.eval-set-head {
  margin: 0 0 var(--mg-space-2);
  font-size: var(--mg-size-body); line-height: var(--mg-line-body);
  font-weight: var(--mg-weight-body-strong); color: var(--mg-ink);
}

/* The section heading and the acts that belong to the section, on one line,
   so the heading keeps its place in the document whether the pointer is over
   it or not. */
.eval-set-head-row { display: flex; align-items: baseline; gap: var(--mg-space-3); }
.eval-set-head-row .eval-set-head { flex: 1 1 auto; min-width: 0; }

.eval-row-marks { flex: 0 0 auto; display: flex; align-items: center; gap: var(--mg-space-2); }

/* ---- D3 · the team's comments -------------------------------------------- */

/* The composer is pinned to the foot of the column, which is why the column
   is a flex box that fills its height rather than a list that ends. */
.mgc-pane.eval-comments, .mgc-pane.eval-aside { min-height: 100%; padding-bottom: 0; }

.eval-aside-head {
  flex: 0 0 auto;
  padding-bottom: var(--mg-space-3);
  border-bottom: var(--mg-hairline-width) solid var(--mg-hairline);
}

.eval-comment-list { flex: 1 1 auto; padding-top: var(--mg-space-3); }

.eval-comment { display: flex; gap: var(--mg-space-2); padding-bottom: var(--mg-space-4); }
.eval-comment-body { flex: 1 1 auto; min-width: 0; }
.eval-comment-head { display: flex; align-items: baseline; gap: var(--mg-space-2); }
.eval-comment-who {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--mg-size-small); font-weight: var(--mg-weight-body-strong); color: var(--mg-ink);
}
.eval-comment-when { flex: none; font-size: var(--mg-size-small); color: var(--mg-ink-faint); }
.eval-comment-text {
  margin: var(--mg-space-1) 0 0;
  font-size: var(--mg-size-small); line-height: var(--mg-line-small);
  color: var(--mg-ink);
}
/* The lock's own entry is a record of something the product did, so it is set
   in the quieter ink: it is there to be found, not to be read first. */
.eval-comment-system .eval-comment-text { color: var(--mg-ink-faint); }
/* Pinned to the foot of the column. It clears the Nest because the frame pads
   the column by --mg-nest-reserve (chromeCSS), not because it knows the Nest
   is there. */
.eval-composer {
  flex: 0 0 auto;
  margin-top: auto;
  margin-bottom: var(--mg-space-4);
  display: flex; align-items: center; gap: var(--mg-space-2);
  padding: 0 var(--mg-space-2) 0 var(--mg-space-3);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-large);
}

/* ---- the upload confirmation --------------------------------------------- */

/* The docs/04 C4 confirmation: three consequences stated plainly. Danger is
   ink on the heading only — CL4 bars it from being a fill or a badge — so the
   block itself is the sunken ground. */
.eval-warning {
  padding: var(--mg-space-3) var(--mg-space-4);
  background: var(--mg-ground-sunken);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
}
.eval-warning-head {
  margin: 0 0 var(--mg-space-1);
  font-size: var(--mg-size-small); line-height: var(--mg-line-small);
  font-weight: var(--mg-weight-body-strong); color: var(--mg-danger);
}
.eval-warning-line {
  margin: 0;
  font-size: var(--mg-size-small); line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary);
}

/* ---- D2 · one question open ---------------------------------------------- */

.eval-qhead { display: flex; align-items: flex-start; gap: var(--mg-space-4); }
.eval-qhead-text { flex: 1 1 auto; min-width: 0; }
.eval-qhead-acts {
  flex: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--mg-space-2);
}
.eval-qhead-row { display: flex; align-items: center; gap: var(--mg-space-2); }
/* The lock in a question's header is one control among three, so it does not
   take the Overview's auto margin. */
.eval-qhead-row .eval-lock { margin-left: 0; margin-right: var(--mg-space-1); }

/* "Show on this page" hangs off the filter button, so it needs a positioned
   ancestor that is not the column (which scrolls). */
.eval-filter-anchor { position: relative; }
.eval-popup {
  position: absolute; top: calc(100% + var(--mg-space-1)); right: 0; z-index: 15;
  min-width: 200px;
  display: flex; flex-direction: column;
  padding: var(--mg-space-2);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-large);
  box-shadow: var(--mg-shadow);
}
.eval-popup-head {
  margin: 0 0 var(--mg-space-1);
  padding: var(--mg-space-1) var(--mg-space-2);
  font-size: var(--mg-size-small); color: var(--mg-ink-faint);
}
.eval-check-row {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--mg-space-2);
  padding: var(--mg-space-1) var(--mg-space-2);
  border-radius: var(--mg-radius-small);
  font-family: inherit; font-size: var(--mg-size-body); color: var(--mg-ink);
  text-align: left;
}
.eval-check-row:hover { background: var(--mg-ground-sunken); }
.eval-checkbox {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  background: var(--mg-ground); color: var(--mg-ground);
}
.eval-checkbox-on { background: var(--mg-ink); border-color: var(--mg-ink); }
.eval-checkbox svg { width: 10px; height: 10px; display: block; }

.eval-fields {
  display: flex; flex-direction: column; gap: var(--mg-space-1);
  padding: var(--mg-space-4) 0 var(--mg-space-4);
  border-bottom: var(--mg-hairline-width) solid var(--mg-hairline);
}
.eval-field { display: flex; align-items: center; gap: var(--mg-space-3); }
.eval-field-label {
  flex: 0 0 calc(var(--mg-space-8) + var(--mg-space-3));
  font-size: var(--mg-size-small); color: var(--mg-ink-secondary);
}
/* Both are controls that open a picker, so both wear the field's ground —
   the difference between them is what they hold, not what they are. */
.eval-field-control {
  display: inline-flex; align-items: center; gap: var(--mg-space-2);
  min-height: var(--mg-control-compact); padding: 0 var(--mg-space-2);
  background: var(--mg-ground-sunken);
  border-radius: var(--mg-radius-small);
  font-size: var(--mg-size-small); color: var(--mg-ink);
  cursor: pointer;
}
.eval-assignee { display: inline-flex; align-items: center; gap: var(--mg-space-2); }
.eval-field-empty { color: var(--mg-ink-faint); }
.eval-field-caret { display: flex; color: var(--mg-ink-faint); }
.eval-field-caret svg { width: 10px; height: 10px; display: block; }

.eval-panel { padding-top: var(--mg-space-2); }
.eval-panel > .mm-eyebrow { margin-bottom: var(--mg-space-2); }

.eval-detail {
  margin: 0 0 var(--mg-space-1);
  font-size: var(--mg-size-body); line-height: var(--mg-line-body);
  color: var(--mg-ink);
}

/* ---- items requested ------------------------------------------------------ */

.eval-group-block { padding-bottom: var(--mg-space-3); }
.eval-group {
  margin: 0 0 var(--mg-space-1);
  padding-left: var(--mg-space-2);
  font-size: var(--mg-size-small); line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary);
}

/* No arrow, no open affordance: "the row highlights on hover and a click
   opens the item in the IRL". */
.eval-item {
  display: flex; align-items: flex-start; gap: var(--mg-space-3);
  padding: var(--mg-space-2);
  border-radius: var(--mg-radius-small);
  color: var(--mg-ink); text-decoration: none;
  transition: background-color var(--mg-motion);
}
a.eval-item:hover { background: var(--mg-ground-sunken); }
.eval-item-text { flex: 1 1 auto; min-width: 0; }
.eval-item-title {
  margin: 0;
  font-size: var(--mg-size-body); line-height: var(--mg-line-body);
}
.eval-item-period {
  margin: 0;
  font-size: var(--mg-size-small); line-height: var(--mg-line-small);
  color: var(--mg-ink-faint);
}
.eval-item-block { padding-bottom: var(--mg-space-2); }
/* Indented to the item title above them, which is what says these files came
   back against that item rather than against the group. */
.eval-files {
  display: flex; flex-direction: column; gap: var(--mg-space-1);
  padding: 0 var(--mg-space-2) var(--mg-space-1) var(--mg-space-4);
}
.eval-file {
  display: flex; align-items: center; gap: var(--mg-space-2);
  font-size: var(--mg-size-small); line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary); text-decoration: none;
}
a.eval-file:hover { color: var(--mg-ink); }
.eval-file-mark { display: flex; color: var(--mg-ink-faint); }
.eval-file-mark svg { width: 12px; height: 12px; display: block; }

.eval-setlink { display: inline-flex; align-items: center; gap: var(--mg-space-1); padding-left: var(--mg-space-2); }
.eval-ext { display: inline-flex; }
.eval-ext svg { width: 11px; height: 11px; display: block; }

/* ---- working documents ---------------------------------------------------- */

.eval-doc {
  display: flex; align-items: flex-start; gap: var(--mg-space-3);
  padding: var(--mg-space-2);
  border-radius: var(--mg-radius-small);
  color: var(--mg-ink); text-decoration: none;
}
a.eval-doc:hover { background: var(--mg-ground-sunken); }
.eval-doc-mark {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--mg-radius-small);
  background: var(--mg-ground-selected); color: var(--mg-ink-secondary);
}
.eval-doc-mark svg { width: 13px; height: 13px; display: block; }
.eval-doc-text { flex: 1 1 auto; min-width: 0; }
.eval-doc-name { margin: 0; font-size: var(--mg-size-body); line-height: var(--mg-line-body); }
.eval-doc-meta {
  margin: 0;
  font-size: var(--mg-size-small); line-height: var(--mg-line-small);
  color: var(--mg-ink-faint);
}

/* ---- thought cards, mentions and Trinkets --------------------------------- */

.eval-note {
  display: block;
  margin-bottom: var(--mg-space-2);
  padding: var(--mg-space-3) var(--mg-space-4);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-large);
}
.eval-note-head { display: flex; align-items: flex-start; gap: var(--mg-space-3); }
.eval-note-title {
  flex: 1 1 auto; margin: 0;
  font-size: var(--mg-size-body); line-height: var(--mg-line-body);
  font-weight: var(--mg-weight-body-strong); color: var(--mg-ink);
}
.eval-note-body {
  margin: var(--mg-space-1) 0 0;
  font-size: var(--mg-size-small); line-height: var(--mg-line-body);
  color: var(--mg-ink-secondary);
}
.eval-note-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--mg-space-3);
  padding-top: var(--mg-space-2);
}
.eval-note-byline { font-size: var(--mg-size-small); color: var(--mg-ink-faint); }

/* A mention is a chip inside a sentence: it has to sit on the text baseline
   and wrap with the prose, which is why it is inline-flex and not a block. */
.eval-mention {
  display: inline-flex; align-items: center; gap: var(--mg-space-1);
  margin: 0 var(--mg-space-1);
  padding: 0 var(--mg-space-1);
  background: var(--mg-ground-selected);
  border-radius: var(--mg-radius-small);
  color: var(--mg-ink); text-decoration: none;
  white-space: nowrap;
}
a.eval-mention:hover { background: var(--mg-hairline); }
.eval-mention-mark { display: inline-flex; color: var(--mg-ink-secondary); }
.eval-mention-mark svg { width: 11px; height: 11px; display: block; }
.eval-mention-at { color: var(--mg-ink-secondary); }

/* Dashed blue on a washed ground, "so nobody mistakes Magpie's suggestion for
   something a colleague wrote" (Note 2.1). Provenance is load-bearing here:
   everything inside is a first-person system statement. */
.eval-trinket {
  margin-bottom: var(--mg-space-2);
  padding: var(--mg-space-3) var(--mg-space-4);
  background: var(--mg-provenance-wash);
  border: var(--mg-hairline-width) dashed var(--mg-provenance);
  border-radius: var(--mg-radius-large);
}
.eval-trinket-head {
  display: flex; align-items: center; gap: var(--mg-space-2);
  font-size: var(--mg-size-small); color: var(--mg-provenance);
}
.eval-trinket-mark { display: flex; }
.eval-trinket-mark svg { width: 12px; height: 12px; display: block; }
.eval-trinket-body {
  margin: var(--mg-space-2) 0 0;
  font-size: var(--mg-size-small); line-height: var(--mg-line-body);
  color: var(--mg-ink);
}
/* Blue and underlined so nobody mistakes it for a caption, and nothing
   explanatory beside it: the link is the evidence. */
.eval-source {
  display: inline-flex; align-items: center; gap: var(--mg-space-1);
  margin-top: var(--mg-space-2);
  font-size: var(--mg-size-small);
  color: var(--mg-provenance); text-decoration: underline;
}
.eval-trinket-acts {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--mg-space-3);
  padding-top: var(--mg-space-2);
}

.eval-add {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: block; padding: var(--mg-space-2) 0;
  font-family: inherit; font-size: var(--mg-size-small); color: var(--mg-ink-faint);
  text-align: left;
}
.eval-add:hover { color: var(--mg-ink); }

/* ---- the memo section draft ----------------------------------------------- */

.eval-memo {
  display: block; width: 100%;
  min-height: var(--mg-space-8);
  height: 104px;
  padding: var(--mg-space-3) var(--mg-space-4);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-large);
  font-family: inherit;
  font-size: var(--mg-size-body); line-height: var(--mg-line-body);
  color: var(--mg-ink);
  resize: vertical;
}
.eval-memo::placeholder { color: var(--mg-ink-faint); }
.eval-memo:focus { outline: none; border-color: var(--mg-ink); }
/* Under the Trinket, or directly under the box when there is none, and never
   inside it (Note 2). */
.eval-memo-out { display: flex; justify-content: flex-end; padding-top: var(--mg-space-1); }
.eval-memo-out .mm-link { display: inline-flex; align-items: center; gap: var(--mg-space-1); }

/* ---- D3 · my notes, then activity ----------------------------------------- */

.eval-aside-body { flex: 0 0 auto; padding-top: var(--mg-space-3); }
.eval-activity { flex: 1 1 auto; padding-top: var(--mg-space-5); padding-bottom: var(--mg-space-8); }
.eval-activity > .mm-eyebrow { margin-bottom: var(--mg-space-2); }

.eval-activity-row { display: flex; gap: var(--mg-space-2); padding-bottom: var(--mg-space-3); }
.eval-activity-text {
  margin: 0;
  font-size: var(--mg-size-small); line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary);
}
.eval-activity-who { font-weight: var(--mg-weight-body-strong); color: var(--mg-ink); }
.eval-activity-when { color: var(--mg-ink-faint); }

/* ---- writing: the acts, the composers, and what did not land -------------- */

/* The quiet controls that appear under the pointer. They are deliberately
   almost invisible until then: the Overview is a document first, and a row of
   controls down its right-hand edge would turn it into a table. Focus reveals
   them too, so a keyboard reaches everything a pointer does. */
.eval-acts {
  flex: none;
  display: flex; align-items: center; gap: var(--mg-space-1);
  opacity: 0;
  transition: opacity var(--mg-motion);
}
.eval-row:hover .eval-acts,
.eval-set-head-row:hover .eval-acts,
.eval-note:hover .eval-acts,
.eval-acts:focus-within { opacity: 1; }

/* Retyping in place, and typing something for the first time, are the same
   shape: the text where the text will be, and the two ways out beneath it.
   There is no Save button in the row itself because there is no mode to
   leave — Enter keeps it, Escape leaves it alone. */
.eval-inline {
  display: flex; flex-direction: column; gap: var(--mg-space-2);
  padding: var(--mg-space-2) 0;
}
.eval-inline-input {
  width: 100%;
  appearance: none;
  padding: var(--mg-space-1) var(--mg-space-2);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  font-family: inherit;
  font-size: var(--mg-size-body); line-height: var(--mg-line-body);
  color: var(--mg-ink);
}
.eval-inline-input::placeholder { color: var(--mg-ink-faint); }
.eval-inline-input:focus { outline: none; border-color: var(--mg-ink); }
.eval-inline-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--mg-space-3); }

/* The tag field's input sits inside the field's own ground, so it carries no
   box of its own — the control it is inside is already the box. */
.eval-field-control .eval-inline-input {
  width: auto; min-width: var(--mg-space-8);
  padding: 0; background: none; border: 0;
  font-size: var(--mg-size-small);
}

/* What a write could not do, in the product's voice, where the act was. It is
   set in Danger ink and nothing else is: CL4 keeps Danger off fills and
   badges, and a failed save is exactly the consequence it is reserved for. */
.eval-error {
  margin: var(--mg-space-2) 0 0;
  font-size: var(--mg-size-small); line-height: var(--mg-line-small);
  color: var(--mg-danger);
}

.eval-work{padding:20px 0;border-top:1px solid var(--mg-ground-sunken)}.eval-work h3{font-size:11px;color:var(--mg-ink-secondary);letter-spacing:.06em}.eval-work textarea{width:100%;min-height:110px;padding:12px;border:1px solid var(--mg-hairline);border-radius:6px;font:inherit}.eval-work input{padding:8px;border:1px solid var(--mg-hairline);border-radius:5px;margin:8px 0;width:100%}.eval-work-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}.eval-work button{padding:7px 12px;border:1px solid var(--mg-hairline);border-radius:6px;background:var(--mg-ground);cursor:pointer}.eval-work button:disabled{opacity:.5}.eval-work-actions span{font-size:12px;color:var(--mg-ink-secondary)}

/* ---- the tab -------------------------------------------------------------- */

.irls { display: contents; }
.irls-left { display: block; }

/* The caret after a select that opens a menu. */
.irls-caret { font-size: var(--mg-size-micro); color: var(--mg-ink-faint); }

/* ---- the action row ------------------------------------------------------- */

.irls-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-3); }
.irls-action-buttons { display: flex; align-items: center; gap: var(--mg-space-2); }

/* ---- the Guests box ------------------------------------------------------- */

.irls-guests {
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  padding-bottom: var(--mg-space-4);
}
.irls-guest-rows { display: flex; flex-direction: column; }
.irls-guest {
  display: flex; align-items: center; gap: var(--mg-space-3);
  min-height: var(--mg-control-regular); padding: 0 var(--mg-space-4);
}
.irls-guest-name { flex: 1 1 auto; min-width: 0; font-size: var(--mg-size-body); color: var(--mg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.irls-guest-add {
  display: flex; align-items: center; gap: var(--mg-space-2);
  margin: var(--mg-space-2) var(--mg-space-4) 0;
  padding: var(--mg-space-1) var(--mg-space-2) var(--mg-space-1) var(--mg-space-3);
  background: var(--mg-ground-sunken);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
}
.irls-guest-input {
  flex: 1 1 auto; min-width: 0; height: var(--mg-control-compact);
  appearance: none; border: 0; background: none; outline: none; font-family: inherit;
  font-size: var(--mg-size-small); color: var(--mg-ink);
}
.irls-guest-input::placeholder { color: var(--mg-ink-faint); }
/* The field draws no ring of its own: the box around it goes Ink (CO2). */
.irls-guest-add:focus-within { border-color: var(--mg-ink); }

/* ---- the label filter ----------------------------------------------------- */

.irls-filter { display: flex; align-items: center; gap: var(--mg-space-3); }
.irls-filter-count { flex: 1 1 auto; font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }

/* ---- the document --------------------------------------------------------- */

.irls-doc {
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  padding: var(--mg-space-5);
  display: flex; flex-direction: column; gap: var(--mg-space-4);
}
.irls-doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mg-space-4); }
.irls-doc-heading { min-width: 0; }

.irls-tiles { display: flex; gap: var(--mg-space-3); }
.irls-tile {
  flex: 1 1 0; min-width: 0;
  padding: var(--mg-space-3) var(--mg-space-4);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
}
.irls-tile-value { font-size: var(--mg-size-title); line-height: var(--mg-line-title); font-weight: var(--mg-weight-title); color: var(--mg-ink); font-variant-numeric: tabular-nums; }
.irls-tile-label { font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }

.irls-sets { display: flex; align-items: center; gap: var(--mg-space-2); flex-wrap: wrap; }
.irls-sets-aside { margin-left: auto; font-size: var(--mg-size-small); color: var(--mg-ink-faint); }

.irls-doc-body { display: flex; flex-direction: column; }
.irls-doc-section { padding-top: var(--mg-space-4); }
.irls-doc-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--mg-space-3);
  padding: 0 var(--mg-space-2) var(--mg-space-1);
}
.irls-doc-section-name { font-size: var(--mg-size-body-strong); font-weight: var(--mg-weight-body-strong); color: var(--mg-ink); }
.irls-doc-section-count { font-size: var(--mg-size-small); color: var(--mg-ink-faint); font-variant-numeric: tabular-nums; }

.irls-row-labels { flex: none; display: flex; align-items: center; gap: var(--mg-space-1); }

/* ---- status --------------------------------------------------------------- */

/* The word on a line is the kit's badge (irlScreenStatusChip). */

/* The same fact as a control. It carries a dot because the panel is scanned
   and the chip is read. */
.irls-status-pill {
  appearance: none; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--mg-space-2);
  padding: var(--mg-space-1) var(--mg-space-3);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  font-size: var(--mg-size-body); color: var(--mg-ink);
  text-transform: none; letter-spacing: 0;
}
.irls-status-pill:hover:not(:disabled) { background: var(--mg-ground-sunken); }
/* A guest's pill: the status read, not set. */
.irls-status-pill:disabled { cursor: default; }
.irls-status-dot { width: 7px; height: 7px; border-radius: var(--mg-radius-pill); background: var(--mg-ink-faint); }
/* Positive is sanctioned for exactly this: the small mark on a thing that
   has arrived (docs/06 CL4). */
.irls-status-received .irls-status-dot { background: var(--mg-positive); }
.irls-status-partial .irls-status-dot { background: var(--mg-ink-secondary); }

/* ---- the access box ------------------------------------------------------- */

.irls-access {
  display: inline-flex; align-items: center; gap: var(--mg-space-2);
  align-self: flex-start;
  padding: var(--mg-space-1) var(--mg-space-2);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
}
.irls-access-glyph { display: inline-flex; color: var(--mg-ink-secondary); }
.irls-access-glyph svg { width: var(--mg-size-body); height: var(--mg-size-body); display: block; }

/* ---- a section in D2 ------------------------------------------------------ */

.irls-section-summary { margin: 0; font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }

.irls-cards { display: flex; flex-direction: column; gap: var(--mg-space-2); }
.irls-card {
  display: block; padding: var(--mg-space-3) var(--mg-space-4);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  color: var(--mg-ink); text-decoration: none;
}
.irls-card:hover { background: var(--mg-ground-sunken); }
/* The open card is outlined in ink, not filled: D3 is already showing its
   contents, so the card's job is to say which one D3 is showing. */
.irls-card-open { border-color: var(--mg-ink); background: var(--mg-ground); }
.irls-card-row { display: flex; align-items: center; gap: var(--mg-space-3); }
/* The link inside the card, not the card itself: what is at the right of a
   row is a control, and a button inside an anchor is a click that does two
   things. The link still fills the row, so the card reads as one target. */
.irls-card-hit {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--mg-space-3);
  color: inherit; text-decoration: none;
}
.irls-card-text { flex: 1 1 auto; min-width: 0; }
.irls-card-title { font-size: var(--mg-size-body-strong); font-weight: var(--mg-weight-body-strong); }
.irls-card-line { font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }
.irls-card-actions { flex: none; display: flex; align-items: center; gap: var(--mg-space-3); }

/* A Trinket is a suggestion and not yet part of the list: dashed, washed,
   and carrying its own eyebrow. Provenance is exactly right here — it is
   Magpie speaking in the first person (docs/06 CL1). */
.irls-card-trinket {
  background: var(--mg-provenance-wash);
  border-style: dashed; border-color: var(--mg-provenance);
}
.irls-card-trinket:hover { background: var(--mg-provenance-wash); }
.irls-trinket-eyebrow {
  margin-bottom: var(--mg-space-1);
  font-size: var(--mg-size-micro); line-height: var(--mg-line-micro);
  font-weight: var(--mg-weight-micro); color: var(--mg-provenance);
}

/* An act is the apprentice speaking in the first person too, but about
   something already done: one line in the periphery of the card, in the
   provenance colour at micro size, with its Undo beside it. It never takes
   the card's wash or border -- the line is the analyst's, not a suggestion. */
.irls-card-act {
  display: flex; align-items: baseline; gap: var(--mg-space-2);
  margin-top: var(--mg-space-1);
  font-size: var(--mg-size-micro); line-height: var(--mg-line-micro);
  color: var(--mg-provenance);
}

/* The library under the composer: the analyst asked to add a line, so these
   are an answer, not an interruption. Quiet rows, the wording first and
   where it came from after, in the provenance colour because it is sourced. */
.irls-library {
  display: flex; flex-direction: column; gap: var(--mg-space-1);
  margin-top: var(--mg-space-2);
  border-top: var(--mg-hairline-width) solid var(--mg-hairline); padding-top: var(--mg-space-2);
}
.irls-library-eyebrow {
  font-size: var(--mg-size-micro); line-height: var(--mg-line-micro);
  color: var(--mg-ink-faint);
}
.irls-library-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--mg-space-3);
  padding: var(--mg-space-1) var(--mg-space-2); text-align: left;
  background: none; border: 0; border-radius: var(--mg-radius-small);
  color: var(--mg-ink); font-size: var(--mg-size-small); cursor: pointer;
}
.irls-library-row:hover { background: var(--mg-ground-sunken); }
.irls-library-from { flex: none; font-size: var(--mg-size-micro); color: var(--mg-provenance); }

/* The ledger: a link at the foot of the section list and the dialog it opens. */
.irls-ledger-link { margin-top: var(--mg-space-3); font-size: var(--mg-size-small); }
.irls-ledger-block { margin-top: var(--mg-space-3); }
.irls-ledger-head {
  font-size: var(--mg-size-micro); line-height: var(--mg-line-micro);
  color: var(--mg-ink-faint); margin-bottom: var(--mg-space-1);
}
.irls-ledger-line { margin: 0 0 var(--mg-space-1); font-size: var(--mg-size-small); color: var(--mg-ink); }
.irls-ledger-note { font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }

/* ---- the read-only connections block -------------------------------------- */

.irls-conns { display: flex; flex-direction: column; gap: var(--mg-space-3); }
.irls-conns .mgc-col-head { padding: 0; }
.irls-conn-group { display: flex; align-items: flex-start; gap: var(--mg-space-4); }
.irls-conn-name { flex: 0 0 140px; }
.irls-conn-kindname { font-size: var(--mg-size-body-strong); font-weight: var(--mg-weight-body-strong); color: var(--mg-ink); }
.irls-conn-required { display: flex; align-items: center; gap: var(--mg-space-2); margin-top: var(--mg-space-1); font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }
.irls-conn-cards { flex: 1 1 auto; display: flex; gap: var(--mg-space-3); flex-wrap: wrap; }
.irls-conn {
  flex: 1 1 200px; min-width: 0;
  display: flex; flex-direction: column; gap: var(--mg-space-2);
  padding: var(--mg-space-3);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
}
.irls-conn-head { display: flex; align-items: center; gap: var(--mg-space-2); }
.irls-conn-icon { display: inline-flex; color: var(--mg-ink-secondary); }
.irls-conn-icon svg { width: var(--mg-size-body); height: var(--mg-size-body); display: block; }
.irls-conn-title { flex: 1 1 auto; min-width: 0; font-size: var(--mg-size-body-strong); font-weight: var(--mg-weight-body-strong); }
/* Connect is the kit's button, stretched to the card. */
.irls-conn-connect { width: 100%; }

/* ---- D3 · the comment feeds ----------------------------------------------- */

/* Layout and padding come from the frame's .mgc-pane. The comments fill the
   column so the box below can pin to its foot. */
.irls-comments { min-height: 100%; }
.irls-comments-head { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-3); }

.irls-feed { display: flex; flex-direction: column; gap: var(--mg-space-4); }
.irls-comment { display: flex; gap: var(--mg-space-2); }
.irls-comment-body { flex: 1 1 auto; min-width: 0; }
.irls-comment-head { display: flex; align-items: baseline; gap: var(--mg-space-2); }
.irls-comment-author { flex: 0 1 auto; font-size: var(--mg-size-body-strong); font-weight: var(--mg-weight-body-strong); color: var(--mg-ink); }
.irls-comment-when { margin-left: auto; flex: none; font-size: var(--mg-size-small); color: var(--mg-ink-faint); font-variant-numeric: tabular-nums; }
.irls-comment-text { margin: var(--mg-space-1) 0 0; font-size: var(--mg-size-body); line-height: var(--mg-line-body); color: var(--mg-ink); }

/* The box is pinned to the foot of the column on the boards. It clears the
   Nest because the frame pads the column by --mg-nest-reserve (chromeCSS). */
.irls-commentbox {
  display: flex; align-items: center; gap: var(--mg-space-2);
  margin-top: auto;
  padding: 0 var(--mg-space-2) 0 var(--mg-space-3);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
}

/* ---- D3 · the open item --------------------------------------------------- */

.irls-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mg-space-3); }
.irls-panel-heading { min-width: 0; }
.irls-panel-desc { margin: 0; font-size: var(--mg-size-body); line-height: var(--mg-line-body); color: var(--mg-ink); }

.irls-field { display: flex; flex-direction: column; gap: var(--mg-space-2); align-items: flex-start; }
/* A rule above a field is how the panel separates the analyst's controls
   from the record underneath them (docs/06 SP2: elevation is a border). */
.irls-field-ruled { border-top: var(--mg-hairline-width) solid var(--mg-hairline); padding-top: var(--mg-space-4); }
.irls-field-note { margin: 0; font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink-faint); }

.irls-select {
  appearance: none; font-family: inherit; cursor: pointer; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2);
  padding: var(--mg-space-2) var(--mg-space-3);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  font-size: var(--mg-size-body); color: var(--mg-ink); text-align: left;
}
/* Greyed, never disabled. The analyst may still change a sent item's period;
   the grey says it costs something, which is true, where disabled would say
   it cannot be done, which is not. */
.irls-select-locked { background: var(--mg-ground-sunken); color: var(--mg-ink-faint); }
.irls-select-new { border-color: var(--mg-ink); color: var(--mg-ink); }

.irls-related {
  display: flex; align-items: flex-start; gap: var(--mg-space-2); width: 100%;
  padding: var(--mg-space-2) 0;
  border-bottom: var(--mg-hairline-width) solid var(--mg-hairline);
  text-decoration: none;
}
.irls-related-text { flex: 1 1 auto; min-width: 0; }
.irls-related-title { font-size: var(--mg-size-body); color: var(--mg-provenance); }
.irls-related:hover .irls-related-title { text-decoration: underline; }
.irls-related-section { font-size: var(--mg-size-small); color: var(--mg-ink-faint); }
.irls-related-jump { flex: none; font-size: var(--mg-size-small); color: var(--mg-ink-faint); }

/* Nobody at the fund wrote this, so it is washed rather than ruled. The
   amber of the boards has no token; ground-sunken is the nearest role. */
.irls-note {
  width: 100%;
  padding: var(--mg-space-3);
  background: var(--mg-ground-sunken);
  border-radius: var(--mg-radius-small);
}
.irls-note-head { font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }
.irls-note-body { margin: var(--mg-space-1) 0 0; font-size: var(--mg-size-body); line-height: var(--mg-line-body); color: var(--mg-ink); }

.irls-dates { display: flex; flex-direction: column; gap: var(--mg-space-1); }
.irls-date { display: flex; align-items: baseline; gap: var(--mg-space-3); }
.irls-date .mm-eyebrow { flex: 0 0 120px; }
.irls-date-value { font-size: var(--mg-size-body); color: var(--mg-ink); font-variant-numeric: tabular-nums; }

.irls-file { display: flex; align-items: center; gap: var(--mg-space-2); text-decoration: none; }
.irls-file-icon { display: inline-flex; color: var(--mg-ink-faint); }
.irls-file-icon svg { width: 13px; height: 13px; display: block; }
.irls-file-name { font-size: var(--mg-size-body); color: var(--mg-provenance); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irls-file:hover .irls-file-name { text-decoration: underline; }

/* One timeline, oldest first, with the comments inside it. */
.irls-timeline { display: flex; flex-direction: column; gap: var(--mg-space-3); width: 100%; }
.irls-event { display: flex; align-items: baseline; gap: var(--mg-space-2); }
.irls-event-dot {
  flex: 0 0 var(--mg-control-tiny); align-self: flex-start; margin-top: var(--mg-space-1);
  height: 5px; width: 5px; margin-left: var(--mg-space-2);
  border-radius: var(--mg-radius-pill); background: var(--mg-hairline);
}
.irls-event-text { flex: 1 1 auto; min-width: 0; font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }
.irls-event-when { flex: none; margin-left: auto; font-size: var(--mg-size-small); color: var(--mg-ink-faint); font-variant-numeric: tabular-nums; }
.irls-event-said { align-items: flex-start; }
.irls-event-body { flex: 1 1 auto; min-width: 0; }
.irls-event-head { display: flex; align-items: baseline; gap: var(--mg-space-2); }

/* ---- the dialogs ---------------------------------------------------------- */

/* The dialogs are the kit's (renderDialog). The period dialog is the one with
   a × in its head, so it lays out its own head row. */
.irls-period-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mg-space-3); }

.irls-ticks { display: flex; flex-direction: column; gap: var(--mg-space-3); }
.irls-tick, .irls-choice { display: flex; align-items: flex-start; gap: var(--mg-space-3); cursor: pointer; }
.irls-tick-box, .irls-choice-dot { flex: none; margin: 3px 0 0; accent-color: var(--mg-ink); }
.irls-tick-text { min-width: 0; }
.irls-tick-label { font-size: var(--mg-size-body); color: var(--mg-ink); }
/* The count is the fact the decision turns on, so it is under the label and
   not folded into it. */
.irls-tick-note { font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }

.irls-upload-file {
  display: flex; align-items: center; gap: var(--mg-space-3);
  padding: var(--mg-space-3);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
}
.irls-upload-file-text { flex: 1 1 auto; min-width: 0; }
.irls-upload-file-name { font-size: var(--mg-size-body-strong); font-weight: var(--mg-weight-body-strong); }
.irls-upload-file-meta { font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }

.irls-labelfield { position: relative; width: 100%; }
.irls-labelfield-box {
  display: flex; align-items: center; gap: var(--mg-space-2); flex-wrap: wrap;
  padding: var(--mg-space-2) var(--mg-space-3);
  border: var(--mg-hairline-width) solid var(--mg-ink);
  border-radius: var(--mg-radius-small);
}
.irls-labelfield-input {
  flex: 1 1 120px; min-width: 0;
  appearance: none; border: 0; background: none; font-family: inherit;
  font-size: var(--mg-size-body); color: var(--mg-ink);
}
.irls-labelfield-input::placeholder { color: var(--mg-ink-faint); }
/* Typeable Linear-style: the list always ends in a create row, because a
   label that does not exist yet is made by typing it. */
.irls-labelmenu {
  position: absolute; left: 0; top: calc(100% + var(--mg-space-1)); z-index: 1;
  width: 260px; padding: var(--mg-space-2);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  box-shadow: var(--mg-shadow);
}
.irls-labelmenu-row {
  appearance: none; border: 0; background: none; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: var(--mg-space-2); width: 100%;
  padding: var(--mg-space-1) var(--mg-space-2);
  border-radius: var(--mg-radius-small);
  font-size: var(--mg-size-body); color: var(--mg-ink); text-align: left;
}
.irls-labelmenu-row:hover:not(:disabled) { background: var(--mg-ground-sunken); }
.irls-labelmenu-row:disabled { color: var(--mg-ink-faint); cursor: default; }
.irls-labelmenu-create { display: block; margin-top: var(--mg-space-2); padding: var(--mg-space-1) var(--mg-space-2); }

.irls-period-change { display: flex; align-items: center; gap: var(--mg-space-3); }
.irls-period-change .irls-select { width: auto; }
.irls-period-arrow { color: var(--mg-ink-faint); }

/* ---- Preview Send · the page the company receives ------------------------- */

/* It covers the frame entirely because it is a different screen and not a
   panel of this one. */
.irls-received {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  background: var(--mg-ground-sunken);
}
.irls-received-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--mg-space-3);
  height: var(--mg-top-bar-height); padding: 0 var(--mg-space-5);
  background: var(--mg-ground);
  border-bottom: var(--mg-hairline-width) solid var(--mg-hairline);
}
.irls-received-brand { display: flex; align-items: center; gap: var(--mg-space-2); }
.irls-received-brandname { font-size: var(--mg-size-body-strong); font-weight: var(--mg-weight-body-strong); color: var(--mg-ink); }
.irls-received-trail { font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }
/* The recipient's own address, because the first question on an email is
   whether it was meant for you. */
.irls-received-who { margin-left: auto; font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }

.irls-received-page {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  width: 100%; max-width: var(--mg-content-max-width);
  margin: 0 auto; padding: var(--mg-space-6) var(--mg-space-5) var(--mg-space-8);
  display: flex; flex-direction: column; gap: var(--mg-space-5);
}
.irls-received-intro { display: flex; flex-direction: column; gap: var(--mg-space-1); }
.irls-received-eyebrow { margin: 0; font-size: var(--mg-size-small); color: var(--mg-ink-faint); }
/* The one Display on the page, and it is a sentence: the company is told
   what is wanted before they are shown any machinery. */
.irls-received-headline { margin: 0; font-size: var(--mg-size-display); line-height: var(--mg-line-display); font-weight: var(--mg-weight-display); color: var(--mg-ink); }
.irls-received-standfirst { margin: 0; font-size: var(--mg-size-body); line-height: var(--mg-line-body); color: var(--mg-ink-secondary); }

/* A hairline with a word in it: neither route is required, so neither gets
   a heading. */
.irls-rule { display: flex; align-items: center; gap: var(--mg-space-3); }
.irls-rule::before, .irls-rule::after {
  content: ""; flex: 1 1 auto; height: var(--mg-hairline-width); background: var(--mg-hairline);
}
.irls-rule-label { flex: none; font-size: var(--mg-size-small); color: var(--mg-ink-faint); }

.irls-received-conns { display: flex; gap: var(--mg-space-3); align-items: flex-start; }
.irls-received-conn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--mg-space-2); }

.irls-assurance { display: flex; align-items: center; gap: var(--mg-space-2); }
.irls-assurance-mark { color: var(--mg-provenance); }
.irls-assurance-text { flex: 1 1 auto; font-size: var(--mg-size-small); color: var(--mg-provenance); }
.irls-assurance-link { flex: none; }

.irls-received-list {
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  overflow: hidden;
}
.irls-received-section-head {
  display: flex; align-items: baseline; gap: var(--mg-space-3);
  padding: var(--mg-space-2) var(--mg-space-4);
  background: var(--mg-ground-sunken);
  border-bottom: var(--mg-hairline-width) solid var(--mg-hairline);
}
.irls-received-row {
  display: flex; align-items: center; gap: var(--mg-space-3);
  min-height: var(--mg-control-regular); padding: var(--mg-space-1) var(--mg-space-4);
  border-bottom: var(--mg-hairline-width) solid var(--mg-hairline);
}
.irls-received-row:last-child { border-bottom: 0; }
.irls-received-more {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-3);
  padding: var(--mg-space-2) var(--mg-space-4);
}
.irls-received-more-note { font-size: var(--mg-size-small); color: var(--mg-ink-faint); }

.irls-received-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--mg-space-2);
  padding: var(--mg-space-3) var(--mg-space-5);
  background: var(--mg-ground);
  border-top: var(--mg-hairline-width) solid var(--mg-hairline);
}

/* ---- the list as something you change ------------------------------------- */

/* Editing is not a mode, so nothing below draws one. A field that renames
   something looks exactly like the heading it replaced until it is hovered or
   focused, and what a row can do appears on that row's hover rather than in a
   toolbar that is always there. */

/* What went wrong, said once, at the top of the column the analyst was
   working in. Danger is the mark and not the ground: a wall of red for a
   failed save is louder than the failure (docs/06 CL3). */
.irls-trouble {
  display: flex; align-items: flex-start; gap: var(--mg-space-2);
  padding: var(--mg-space-2) var(--mg-space-3);
  background: var(--mg-ground-sunken);
  border-left: 2px solid var(--mg-danger);
  border-radius: var(--mg-radius-small);
}
.irls-trouble-text {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--mg-size-small); line-height: var(--mg-line-small); color: var(--mg-ink);
}

/* The one-field row every "add" in this tab uses. */
.irls-compose { display: flex; align-items: center; gap: var(--mg-space-2); }
.irls-compose-input {
  flex: 1 1 auto; min-width: 0; height: var(--mg-control-regular);
  appearance: none; font-family: inherit; outline: none;
  padding: 0 var(--mg-space-3);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  font-size: var(--mg-size-small); color: var(--mg-ink);
}
.irls-compose-input:focus { border-color: var(--mg-ink); }
.irls-compose-input::placeholder { color: var(--mg-ink-faint); }

.irls-additem { align-self: flex-start; }

/* A heading that is a field. It keeps the type of the thing it replaced and
   none of the furniture, so nothing moves when it takes focus. */
.irls-heading-input {
  width: 100%; min-width: 0;
  appearance: none; font-family: inherit; outline: none;
  margin: 0; padding: var(--mg-space-1) var(--mg-space-2);
  background: none; border: var(--mg-hairline-width) solid transparent;
  border-radius: var(--mg-radius-small);
}
.irls-heading-input:hover { background: var(--mg-ground-sunken); }
.irls-heading-input:focus { background: var(--mg-ground); border-color: var(--mg-ink); }

.irls-section-head { display: flex; align-items: center; gap: var(--mg-space-1); }
.irls-section-number {
  flex: none; font-size: var(--mg-size-title); line-height: var(--mg-line-title);
  font-weight: var(--mg-weight-title); color: var(--mg-ink-faint);
}
.irls-section-remove { flex: none; opacity: 0; }
.irls-section-head:hover .irls-section-remove,
.irls-section-remove:focus { opacity: 1; }

/* The period, typed. The same box as the select it replaces, so the panel's
   fields stay one column of one width. */
.irls-select-input {
  display: block; appearance: none; outline: none;
  font-family: inherit; cursor: text;
}
.irls-select-input:focus { border-color: var(--mg-ink); }
.irls-select-input::placeholder { color: var(--mg-ink-faint); }

/* The status menu hangs off the pill, which is why its field is the
   positioned ancestor and not the panel. */
.irls-field-menu { position: relative; }
.irls-statusmenu {
  position: absolute; top: 100%; left: 0; z-index: 2;
  min-width: 160px; margin-top: var(--mg-space-1);
  display: flex; flex-direction: column;
  padding: var(--mg-space-1);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  box-shadow: var(--mg-shadow);
}
.irls-statusmenu-row {
  appearance: none; border: 0; background: none; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: var(--mg-space-2);
  padding: var(--mg-space-1) var(--mg-space-2);
  border-radius: var(--mg-radius-small);
  font-size: var(--mg-size-body); color: var(--mg-ink); text-align: left;
}
.irls-statusmenu-row:hover { background: var(--mg-ground-sunken); }
.irls-statusmenu-row-on { background: var(--mg-ground-selected); }

/* The arrows that reorder a section. They sit inside a card, which is a link,
   so they stay quiet until the card is hovered: the order is not what the
   analyst is usually looking at. */
.irls-move { flex: none; display: inline-flex; gap: var(--mg-space-1); opacity: 0; }
.irls-card:hover .irls-move,
.irls-move:focus-within { opacity: 1; }

/* Removal is at the foot and under a rule: it is the one thing on the panel
   that cannot be undone, and it must not sit beside the controls that can. */
.irls-panel-foot {
  padding-top: var(--mg-space-3);
  border-top: var(--mg-hairline-width) solid var(--mg-hairline);
}
.irls-remove:hover { color: var(--mg-danger); }


/* ---- the bare page -------------------------------------------------------- */

/* No rail, no header block, no Nest: the app shell arrives at kick-off, not
   here, because there is no fund yet (figma/onboarding/state_3_note.svg). */
.onb-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--mg-ground);
}

/* 28dp mark at x=24,y=16 in a 60dp bar — the board's own coordinates. */
.onb-topbar {
  display: flex;
  align-items: center;
  gap: var(--mg-space-3);
  height: 60px;
  padding: 0 var(--mg-space-5);
}

.onb-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--mg-radius-small);
  background: var(--mg-ink);
  color: var(--mg-ground);
  font-size: var(--mg-size-small);
  font-weight: var(--mg-weight-body-strong);
}

.onb-wordmark {
  font-size: var(--mg-size-small);
  font-weight: var(--mg-weight-body-strong);
  color: var(--mg-ink);
}

.onb-crumb-sep { font-size: var(--mg-size-small); color: var(--mg-ink-faint); }
.onb-crumb { font-size: var(--mg-size-small); color: var(--mg-ink-secondary); }

/* The signed-in address, top right. Absent until a session supplies one. */
.onb-account {
  margin-left: auto;
  font-size: var(--mg-size-micro);
  line-height: var(--mg-line-micro);
  color: var(--mg-ink-faint);
}

.onb-body {
  display: flex;
  flex: 1;
  justify-content: center;
  padding: var(--mg-space-5) var(--mg-space-5) var(--mg-space-8);
}

/* state_1 is short enough to sit on the vertical centre; the two wide steps
   fill the board and start at the top. */
.onb-body-center { align-items: center; }

.onb-col { display: flex; flex-direction: column; width: 100%; }
.onb-col-narrow { max-width: 560px; }
.onb-col-wide { max-width: 940px; }

.onb-head {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-2);
  margin-bottom: var(--mg-space-6);
}

/* The wide steps put their first block closer to the heading (board: 25dp
   from the sub-line to the dropzone, against 36 on state_1). */
.onb-col-wide .onb-head { margin-bottom: var(--mg-space-5); }

.onb-sub {
  margin: 0;
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  color: var(--mg-ink-secondary);
}

.onb-arrow { font-size: var(--mg-size-small); }

/* ---- state 1 · start a new diligence project ------------------------------ */

.onb-fields { display: flex; flex-direction: column; gap: var(--mg-space-5); }
.onb-field { display: flex; flex-direction: column; gap: var(--mg-space-2); }

/* The domain field grows with its chips instead of scrolling them out of
   sight: a domain you cannot see is a promise you cannot check. */
.onb-domains {
  flex-wrap: wrap;
  height: auto;
  min-height: 46px;
  padding: var(--mg-space-1) var(--mg-space-3);
}

.onb-domain-entry {
  flex: 1 1 140px;
  min-width: 140px;
  height: 36px;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  color: var(--mg-ink);
}

.onb-domain-entry::placeholder { color: var(--mg-ink-faint); }

/* The shared strip sets every word in Provenance. Both boards draw the strip's
   sentence in the secondary ink and keep the blue for the ◈ mark and for the
   one link — which is the CO1 reading of the colour anyway: blue is a
   navigable reference or the system's own voice marker, and the promise is
   carried by the wash the sentence sits on. */
.onb-note { margin-top: var(--mg-space-5); color: var(--mg-ink-secondary); }

.onb-cta { margin-top: var(--mg-space-5); }
.onb-cta .mm-btn { align-self: flex-start; }

/* What the server said when it would not do the thing. Never colour alone
   (docs/06 G2): it is a sentence, and the sentence is the server's own. */
.onb-error {
  margin: var(--mg-space-4) 0 0;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-danger);
}

/* ---- state 2 · where should I look? --------------------------------------- */

/* The dropzone is first and largest on purpose: files are what the product
   actually needs, and connectors are how it fetches them for you
   (figma/onboarding/state_2_note.svg). It is the kit's tall drop zone
   (.mm-drop-tall), with the kit's compact secondary buttons in it. */

/* The real file input, reachable by keyboard through its label but never
   drawn: browsers will not restyle it and the board draws a button. */
.onb-files {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Every file the browser could not read and every one the server would not
   take, in the words each of them used. A refusal is shown, never counted
   away: a file missing from the room is a hole in the diligence. */
.onb-refused {
  margin-top: var(--mg-space-3);
  padding: var(--mg-space-3);
  background: var(--mg-ground-sunken);
  border-radius: var(--mg-radius-small);
}

.onb-refused-head {
  margin: 0 0 var(--mg-space-2);
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  font-weight: var(--mg-weight-body-strong);
  color: var(--mg-danger);
}

.onb-refused-line {
  margin: 0;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary);
  overflow-wrap: anywhere;
}

/* The grid says "coming soon" six times over; this says it once, in a
   sentence, before the reader has to infer it from six pills. */
.onb-soon {
  margin: 0 0 var(--mg-space-4);
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary);
}

/* A label between two hairlines: the board runs the rules 250→647.5 and
   792.5→1190, which is what the two flexible pseudo-elements reproduce. */
.onb-divider {
  display: flex;
  align-items: center;
  gap: var(--mg-space-4);
  margin: var(--mg-space-6) 0 var(--mg-space-5);
}

.onb-divider::before,
.onb-divider::after {
  content: "";
  flex: 1;
  height: var(--mg-hairline-width);
  background: var(--mg-hairline);
}

.onb-divider-label { flex: none; }

.onb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mg-space-4);
}

/* 303 x 167 at radius 10.5, 13.5 of padding. Elevation is a border, never a
   shadow (docs/06 SP2). min-height keeps the two rows on the board's height
   even when one card's copy is a line shorter. */
.onb-card {
  display: flex;
  flex-direction: column;
  min-height: 166px;
  padding: var(--mg-space-3);
  background: var(--mg-ground);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-large);
}

/* Drawn, not hidden: the product's map with the territory still missing
   (docs/06 SP4). */
.onb-card-soon { background: var(--mg-ground-sunken); }
.onb-card-soon .onb-card-name,
.onb-card-soon .onb-card-copy { color: var(--mg-ink-faint); }
.onb-card-soon .onb-card-icon { color: var(--mg-ink-faint); }

.onb-card-head { display: flex; align-items: center; gap: var(--mg-space-2); }

.onb-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--mg-radius-small);
  background: var(--mg-ground-selected);
  color: var(--mg-ink);
}

.onb-card-icon svg { width: 16px; height: 16px; display: block; }

.onb-card-name {
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  font-weight: var(--mg-weight-body-strong);
  color: var(--mg-ink);
}

/* The standing read-only promise, on the card face rather than on a separate
   scope sheet (figma/onboarding/state_2_note.svg): a faint kit badge. */
.onb-card-head .mm-badge { margin-left: auto; }

.onb-card-copy {
  margin: var(--mg-space-3) 0 0;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary);
}

.onb-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mg-space-4);
  margin-top: var(--mg-space-5);
}

/* state_3 draws one rule across the 940 column above its footer. */
.onb-foot-ruled {
  margin-top: var(--mg-space-6);
  padding-top: var(--mg-space-5);
  border-top: var(--mg-hairline-width) solid var(--mg-hairline);
}

.onb-foot-right { display: flex; align-items: center; gap: var(--mg-space-4); }

/* Why the primary is dead, said next to it rather than inside a tooltip. */
.onb-hint {
  margin: 0;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-faint);
}

.onb-back {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-2);
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary);
  cursor: pointer;
  transition: color var(--mg-motion);
}

.onb-back:hover { color: var(--mg-ink); }

/* ---- state 3 · here's what I found ---------------------------------------- */

/* 560 | 20 | 360 on the board. The list is the elastic side; the review
   column is fixed, because its cards hold addresses that must not rewrap. */
.onb-found {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--mg-space-5);
}

.onb-sources, .onb-review { display: flex; flex-direction: column; }

/* SOURCES goes straight into its first row; FOR REVIEW has a sub-line under
   the eyebrow that says what the column is for, so it sits tighter. */
.onb-sources > .mm-eyebrow { margin-bottom: var(--mg-space-5); }
.onb-review > .mm-eyebrow { margin-bottom: var(--mg-space-2); }

.onb-review-sub {
  margin: 0 0 var(--mg-space-3);
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary);
}

/* An empty column says it is empty (.mm-empty). A designed empty state, not a
   blank box (docs/06) — though the "connected, found nothing" state the
   state 3 note asks for is a bigger response than this and has not been
   drawn. */

.onb-source + .onb-source { margin-top: var(--mg-space-5); }

.onb-source-row { display: flex; align-items: center; gap: var(--mg-space-3); }

.onb-source-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--mg-radius-small);
  background: var(--mg-ground-selected);
  color: var(--mg-ink-secondary);
}

.onb-source-icon svg { width: 14px; height: 14px; display: block; }

.onb-source-text { flex: 1; min-width: 0; }

.onb-source-label {
  margin: 0;
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  font-weight: var(--mg-weight-body-strong);
  color: var(--mg-ink);
}

.onb-source-detail {
  margin: 0;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary);
}

.onb-source-mark { flex: none; }

/* 3dp, the full 560 of the column. The track is the shape of the work; the
   check glyph beside it is what says the work is done. */
.onb-track {
  height: 3px;
  margin-top: var(--mg-space-2);
  background: var(--mg-ground-selected);
  border-radius: var(--mg-radius-pill);
  overflow: hidden;
}

.onb-track-fill {
  display: block;
  height: 100%;
  background: var(--mg-provenance);
  border-radius: var(--mg-radius-pill);
  transition: width var(--mg-motion);
}

/* Finished: quiet. See the divergence note at the top of this file. */
.onb-track-done { background: var(--mg-hairline); }

/* The FOR REVIEW column's proposal card is not drawn. Nothing on the server
   produces a proposal — there is no mailbox to find one in — so the column's
   empty line is the whole of it, and the card's rules went with the rows they
   would have styled. They come back with the connector that earns them. */

/* ---- narrow windows ------------------------------------------------------- */

/* The boards are drawn at 1440. Below the width the 940 column needs, the
   card grid and the two-column result fold rather than scroll sideways: this
   flow is the first thing a new user sees and it is the one place the product
   cannot afford to look broken. */
@media (max-width: 1000px) {
  .onb-grid { grid-template-columns: repeat(2, 1fr); }
  .onb-found { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .onb-grid { grid-template-columns: minmax(0, 1fr); }
  .onb-foot { flex-wrap: wrap; }
}


/* ---- the sheet ------------------------------------------------------------ */

/* The Project board is one wide sheet, not three columns: the screen asks the
   frame for LayoutSheet, which draws D2 alone, so there is nothing to fold
   away here. */
.project-screen {
  padding: var(--mg-space-5) var(--mg-space-6) var(--mg-space-8);
}

/* One Title per page, at the frame's D2 heading step (.mgc-pane-title): the
   board sets the project's name at 20, not at the Display step, because the
   breadcrumb above it is already saying it. */
.project-screen-title { margin-bottom: var(--mg-space-4); }

/* Two columns: About across the top, Team and the key document down the left,
   Deal down the right against both of them, then Scope and the counts across
   the full width. Deal is placed rather than flowed because it spans the two
   left-hand cards without stretching to their combined height. */
.project-screen-sheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mg-space-4);
  align-items: start;
  max-width: 980px;
}
.project-screen-about,
.project-screen-scope,
.project-screen-found { grid-column: 1 / -1; }
.project-screen-deal { grid-column: 2; grid-row: span 2; align-self: start; }

/* ---- a card --------------------------------------------------------------- */

.project-screen-card { padding: var(--mg-space-4); }

.project-screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mg-space-3);
  margin-bottom: var(--mg-space-3);
}
.project-screen-body { display: flex; flex-direction: column; }

/* Faint is the one state this page has for "nothing here yet". */
.project-screen-blank { color: var(--mg-ink-faint); }

/* ---- ABOUT ---------------------------------------------------------------- */

.project-screen-about-text {
  margin: 0;
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  color: var(--mg-ink);
}

/* ---- TEAM ----------------------------------------------------------------- */

/* 32dp rows, which is the board's pitch: a list of four people should read in
   one glance and not as four cards. */
.project-screen-member {
  display: flex;
  align-items: center;
  gap: var(--mg-space-3);
  min-height: 32px;
}
.project-screen-member-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  color: var(--mg-ink);
}

/* The role reads as a chip (.mm-chip) whether or not it opens. When it opens it
   is a real select with the caret drawn beside it, because the native arrow is
   a different shape in every browser and this one has to match the board. */
.project-screen-role::after { content: "▾"; font-size: var(--mg-size-micro); color: var(--mg-ink-faint); }
.project-screen-role-select {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-secondary);
  cursor: pointer;
}
.project-screen-role-select:disabled { color: var(--mg-ink-faint); cursor: default; }

/* The add row is dashed for the same reason the empty answers on the Canon
   board are: it is the shape of a row that does not exist yet. */
.project-screen-add {
  display: flex;
  align-items: center;
  gap: var(--mg-space-2);
  margin-top: var(--mg-space-2);
  padding: 0 var(--mg-space-2) 0 var(--mg-space-3);
  min-height: 34px;
  border: var(--mg-hairline-width) dashed var(--mg-hairline);
  border-radius: var(--mg-radius-small);
}
/* The field inside draws no ring of its own: the dashed row goes Ink. */
.project-screen-add:focus-within { border-color: var(--mg-ink); }
.project-screen-add-input {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  border: 0;
  background: none;
  outline: none;
  height: 32px;
  font-family: inherit;
  font-size: var(--mg-size-small);
  color: var(--mg-ink);
}
.project-screen-add-input::placeholder { color: var(--mg-ink-faint); }

/* ---- DEAL ----------------------------------------------------------------- */

.project-screen-deal-fund {
  margin: 0 0 var(--mg-space-3);
  font-size: var(--mg-size-body-strong);
  line-height: var(--mg-line-body-strong);
  font-weight: var(--mg-weight-body-strong);
  color: var(--mg-ink);
}

.project-screen-terms { display: flex; flex-direction: column; }
/* Label and answer on one 34dp row, the answer at a fixed offset so that
   seven of them read as a column of figures rather than as seven sentences. */
.project-screen-term {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: var(--mg-space-3);
  align-items: baseline;
  min-height: 34px;
}
.project-screen-term-label {
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  color: var(--mg-ink-secondary);
}
.project-screen-term-blank .project-screen-term-label { color: var(--mg-ink-faint); }
.project-screen-term-value {
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  color: var(--mg-ink);
}

/* ---- KEY DOCUMENT --------------------------------------------------------- */

.project-screen-doc { display: flex; align-items: center; gap: var(--mg-space-3); }
.project-screen-doc-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--mg-radius-small);
  background: var(--mg-ground-selected);
  color: var(--mg-ink-secondary);
  font-size: var(--mg-size-small);
  line-height: 1;
}
.project-screen-doc-text { display: flex; flex-direction: column; min-width: 0; }
.project-screen-doc-name {
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  font-weight: var(--mg-weight-body-strong);
  color: var(--mg-ink);
}
.project-screen-doc-link { color: var(--mg-provenance); text-decoration: none; }
.project-screen-doc-link:hover { text-decoration: underline; }
.project-screen-doc-meta {
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink-faint);
}

/* The key document's drop zone is the kit's (.mm-drop), one line of the card. */
.project-screen-upload { margin-top: var(--mg-space-3); }

/* ---- SCOPE ---------------------------------------------------------------- */

.project-screen-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mg-space-3);
}
/* Chosen: a filled row on the sunken ground. Unchosen: the same row, dashed
   and faint — drawn, because the scopes nobody picked are half of what the
   card says. */
.project-screen-scope-item {
  display: flex;
  align-items: center;
  gap: var(--mg-space-2);
  min-height: 36px;
  padding: 0 var(--mg-space-3) 0 0;
  background: var(--mg-ground-sunken);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
}
.project-screen-scope-item-off {
  background: var(--mg-ground);
  border-style: dashed;
}
/* "Other" is named in a field with no ring of its own, so the row goes Ink. */
.project-screen-scope-item:focus-within { border-color: var(--mg-ink); }
.project-screen-scope-box {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--mg-space-3);
  padding: 0 var(--mg-space-3);
  height: 34px;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.project-screen-scope-box:disabled { cursor: default; }
.project-screen-box {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  background: var(--mg-ground);
  font-size: var(--mg-size-micro);
  line-height: 1;
  color: var(--mg-ground);
}
/* Both spellings of a true attribute: the bare name the pre-render writes,
   and the string the browser sets once the wasm has booted. */
.project-screen-scope-box[aria-pressed="true"] .project-screen-box,
.project-screen-scope-box[aria-pressed=""] .project-screen-box {
  background: var(--mg-ink);
  border-color: var(--mg-ink);
  color: var(--mg-ground);
}
.project-screen-scope-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  color: var(--mg-ink);
}
.project-screen-scope-item-off .project-screen-scope-label { color: var(--mg-ink-faint); }
/* "Other" is named where it is chosen: the field is the rest of the row. */
.project-screen-scope-name {
  flex: 0 1 auto;
  min-width: 0;
  appearance: none;
  border: 0;
  background: none;
  outline: none;
  height: 32px;
  font-family: inherit;
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-ink);
  text-align: right;
}
.project-screen-scope-name::placeholder { color: var(--mg-ink-faint); }

/* ---- WHAT I'VE FOUND ------------------------------------------------------ */

.project-screen-found-head { display: flex; align-items: center; gap: var(--mg-space-2); }
/* The total (a kit badge) is its own figure beside the eyebrow, not a seventh
   tile: it counts what I picked up, and the tiles count what became canon. */

.project-screen-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--mg-space-3);
}
.project-screen-tile {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-1);
  padding: var(--mg-space-3);
  min-height: 62px;
  background: var(--mg-ground-sunken);
  border-radius: var(--mg-radius-large);
}
/* A zero is the same size as a ten and only quieter. */
.project-screen-tile-zero { background: var(--mg-ground); }
.project-screen-tile-n {
  font-size: var(--mg-size-title);
  line-height: var(--mg-line-title);
  font-weight: var(--mg-weight-title);
  color: var(--mg-ink);
  font-variant-numeric: tabular-nums;
}
.project-screen-tile-zero .project-screen-tile-n { color: var(--mg-ink-faint); }
.project-screen-tile-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The qualifier beside the trinket count: how much of what I picked up
   disagrees with itself. */
.project-screen-found-note { margin-left: var(--mg-space-3); }

/* ---- settling a card ------------------------------------------------------ */

/* The pencil is a toggle, so it has to read as held down while the card is
   open. Nothing else about the card changes: the fields inside it are already
   saying which one is being written in. */
.project-screen-edit[aria-pressed="true"],
.project-screen-edit[aria-pressed=""] { color: var(--mg-ink); }

/* One line above the sheet when the server would not take a change. It is
   deliberately not the promise strip — that is reserved for first-person
   system statements (docs/06 CO4) — so it is one line in Danger. */
.project-screen-error {
  margin: 0 0 var(--mg-space-4);
  font-size: var(--mg-size-small);
  line-height: var(--mg-line-small);
  color: var(--mg-danger);
}

/* The blurb while it is being written. It keeps the paragraph's own height
   rather than the input's fixed one, because it is the same paragraph. */
.project-screen-about-field {
  height: auto;
  min-height: 92px;
  padding: var(--mg-space-3) var(--mg-space-4);
  resize: vertical;
}

/* A term's field sits in the row the term already had: the label does not
   move and only the answer becomes writable, so the card does not reflow when
   the pencil is picked up. */
.project-screen-term-input {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 0 var(--mg-space-2);
  background: var(--mg-ground-sunken);
  border: var(--mg-hairline-width) solid var(--mg-hairline);
  border-radius: var(--mg-radius-small);
  font-family: inherit;
  font-size: var(--mg-size-body);
  line-height: var(--mg-line-body);
  color: var(--mg-ink);
  text-align: right;
}
.project-screen-term-input:focus { outline: none; border-color: var(--mg-ink); }
.project-screen-term-input::placeholder { color: var(--mg-ink-faint); }

.project-screen-remove { flex: none; margin-left: var(--mg-space-2); }