/* Network matrix (/tools/network-matrix). Uses the site tokens from site.css
   (snow, ink, ink-soft, line, fast, slow) and scopes everything else to .nm,
   so the shared frame is untouched. Hairlines, no shadows, no cards; pill
   buttons as on the ENDURE page. White is used only inside the matrix and
   the question callout. */

.nm-back { margin-top: 112px; font-size: 15px; }
.nm-back a { color: var(--ink-soft); }
.page__title.nm-title { margin-top: 24px; }
.nm-credit { margin-top: 16px; font-size: 15px; color: var(--ink-soft); max-width: 72ch; }
.nm-credit a { color: var(--ink-soft); }

.nm {
  --cell: #fff;
  --line-2: #9AA6AF;
  --tension: var(--fast);
  --accent: var(--slow);
  /* cluster colors: the fjord blue first, then four that sit beside it; red is kept for tension */
  --c1: #2A5C7A;
  --c2: #A8731A;
  --c3: #4E7A3E;
  --c4: #77507A;
  --c5: #2B7C77;
  --c6: #6B6F2A;
  margin-top: 56px;
  font-size: 17px;
  line-height: 1.45;
}
.nm [hidden] { display: none !important; }
.nm b { font-weight: 600; }
.nm h3 { font-weight: 600; }

.nm input[type=text],
.nm input[type=password],
.nm input[type=date],
.nm textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--cell);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 10px;
  min-width: 0;
}
.nm input[type=text]:hover, .nm textarea:hover { border-color: var(--line-2); }
.nm input[type=checkbox], .nm input[type=radio] { accent-color: var(--ink); margin: 0; }
.nm ::placeholder { color: #8A96A0; }

/* map name and moment */
.nm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.nm-meta label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nm-meta input { width: 280px; max-width: 100%; letter-spacing: 0; text-transform: none; }

/* two columns: inputs on the left, the live network on the right */
.nm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  margin-top: 40px;
  align-items: start;
}
.nm-right { position: sticky; top: 24px; }

/* tabs: underlined like the current nav item */
.nm .tabs { display: flex; flex-wrap: wrap; gap: 8px 20px; border-bottom: 1px solid var(--line); }
.nm .tab {
  font: inherit;
  font-size: 16px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0 0 12px;
  color: var(--ink-soft);
  cursor: pointer;
}
.nm .tab:hover { color: var(--ink); }
.nm .tab[aria-selected=true] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.nm .tab .n { font-variant-numeric: tabular-nums; margin-right: 8px; font-weight: 400; color: var(--ink-soft); }
.nm .pane { padding-top: 28px; }
.nm .lead { margin: 0 0 20px; color: var(--ink-soft); max-width: 56ch; }

/* buttons: the ENDURE page's pill */
.nm .btn {
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  color: var(--ink);
  cursor: pointer;
}
.nm .btn:hover { border-color: var(--ink); }
.nm .btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.nm .btn.warn { border-color: var(--tension); color: var(--tension); }
.nm .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.nm .muted { color: var(--ink-soft); }

/* the rating question: the site's one white callout */
.nm .question { background: var(--cell); border-left: 3px solid var(--accent); padding: 14px 20px; margin-bottom: 20px; }
.nm .question b { display: block; font-size: 19px; line-height: 1.3; }
.nm .question .pair { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 4px; min-height: 1.2em; }
.nm .question .pair[hidden] { display: block !important; visibility: hidden; }

/* what each rating means */
.nm .anchors { margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.nm .anchors > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.nm .anchors dt { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.nm .anchors dt .mk { flex: none; }
.nm .anchors dd { margin: 0; color: var(--ink-soft); }
.nm .rate-how { margin: 0 0 16px; font-size: 14px; color: var(--ink-soft); max-width: 60ch; }
.nm .question p { margin: 6px 0 0; font-size: 15px; color: var(--ink-soft); }

.nm .banner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  margin-bottom: 20px;
  font-size: 15px;
}
#compareBanner { margin: 20px 0 0; }

.nm .legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--ink-soft); margin: 0 0 14px; }
.nm .legend span { display: inline-flex; gap: 8px; align-items: center; }
.nm .mk { display: inline-block; width: 18px; height: 18px; border: 1px solid var(--line-2); background: var(--cell); position: relative; }
.nm .mk.w::after, .nm .mk.m::after, .nm .mk.s::after { content: ""; position: absolute; background: var(--ink); }
.nm .mk.w::after { inset: 6px; }
.nm .mk.m::after { inset: 4px; }
.nm .mk.s::after { inset: 2px; }

/* the matrix */
.nm .matrix-scroll { overflow-x: auto; padding: 2px 0 6px 2px; }
.nm table.mx { border-collapse: collapse; font-size: 14px; }
.nm table.mx th { font-weight: 400; color: var(--ink); white-space: nowrap; }
.nm table.mx th.rowh { text-align: right; padding: 0 10px 0 0; }
.nm table.mx th.colh { vertical-align: bottom; padding: 0 0 8px; height: 150px; }
.nm table.mx th.colh div { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto; max-height: 150px; overflow: hidden; text-overflow: ellipsis; }
.nm table.mx th.hl { color: var(--accent); font-weight: 600; }
.nm table.mx td { padding: 0; }
.nm .cell { width: 32px; height: 32px; display: block; border: 1px solid var(--line-2); background: var(--cell); margin: -1px 0 0 -1px; position: relative; cursor: pointer; padding: 0; border-radius: 0; }
.nm .cell::after { content: ""; position: absolute; background: var(--ink); }
.nm .cell[data-v="1"]::after { inset: 11px; }
.nm .cell[data-v="2"]::after { inset: 7px; }
.nm .cell[data-v="3"]::after { inset: 3px; }
.nm .cell.stu { background: #E7EBED; }
.nm .cell:hover { border-color: var(--ink); z-index: 1; }
.nm .cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; z-index: 2; }
.nm .cell.diff1 { box-shadow: inset 0 0 0 2px var(--tension); }
.nm .cell.diff2 { box-shadow: inset 0 0 0 3px var(--tension); background: #FBE9E5; }
.nm .cell .other { position: absolute; right: 2px; bottom: 1px; font-size: 9px; line-height: 1; color: var(--tension); font-weight: 700; font-variant-numeric: tabular-nums; }
.nm .foot { justify-content: space-between; margin-top: 16px; }
.nm .count { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* parties */
.nm .parties { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.nm .party { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.nm .party .ix { font-variant-numeric: tabular-nums; color: var(--ink-soft); text-align: right; font-size: 14px; }
.nm .party input { width: 100%; }
.nm .party.top { grid-template-columns: 28px minmax(0, 1fr) 9.5em auto; }
.nm .party.top .sub-btn { justify-self: stretch; }
.nm .pcard > div { flex: 1 1 280px; }
.nm .party .dc-tag { font-weight: 600; color: #fff; background: var(--ink); border-color: var(--ink); white-space: nowrap; justify-self: stretch; }
.nm .center-box .stepn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; margin-right: 8px; vertical-align: 1px; }
.nm .party .sub-btn { white-space: nowrap; }

/* sub-networks */
.nm .level-bar { margin: 24px 0 0; border-color: var(--accent); }
.nm .level-bar > span:first-child b { color: var(--accent); }
.nm .level-bar .new-from { flex-basis: 100%; font-size: 15px; }
.nm .level-bar .new-from p { margin: 0 0 10px; max-width: 60ch; }
.nm .pick-nodes { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; }
.nm .pick-nodes label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.nm.in-sub #loadExample, .nm.in-sub #exampleBanner { display: none; }

/* the design center: attribute groups and personas */
.nm .center-box { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 640px; }
.nm .center-box:empty { display: none; }
.nm .center-box h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 6px; }
.nm .center-box h4 { font-size: 16px; margin: 28px 0 6px; }
.nm .center-box .csel { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; font-size: 15px; }
.nm .center-box select { font: inherit; font-size: 16px; padding: 7px 8px; border: 1px solid var(--line); background: var(--cell); color: var(--ink); }
.nm .agroup { border: 1px solid var(--line); background: var(--cell); padding: 10px 12px; margin: 0 0 10px; }
.nm .agroup .ahead { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.nm .agroup .gname { flex: 1 1 200px; font-weight: 600; }
.nm .agroup .gone-l { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; }
.nm .aopts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.nm .aopt { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 4px 2px 10px; }
.nm .aopt button { border: 0; background: none; font: inherit; font-size: 16px; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 0 4px; }
.nm .aopt button:hover { color: var(--tension); }
.nm .aopts .newopt { flex: 1 1 180px; font-size: 14px; padding: 5px 8px; }
.nm .add-group input { flex: 1 1 220px; }
.nm .pform { border: 1px solid var(--line); background: var(--cell); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.nm .pform #pName { font-weight: 600; }
.nm .pgroup { border: 0; margin: 0; padding: 0; }
.nm .pgroup legend { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); padding: 0; margin-bottom: 6px; }
.nm .pgroup legend span { text-transform: none; letter-spacing: 0; }
.nm .plist { display: flex; flex-direction: column; margin-top: 14px; }
.nm .pcard { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; border-bottom: 1px solid var(--line); padding: 10px 0; font-size: 15px; }
.nm .pcard.editing { background: #E7EBED; }
.nm .pcard .pattrs { color: var(--ink-soft); margin-left: 6px; }
.nm .pcard p { margin: 4px 0 0; color: var(--ink-soft); }
.nm .btn.sm { padding: 4px 10px; font-size: 13px; }
.nm .add { margin-top: 16px; }
.nm .add input { width: 340px; max-width: 100%; }

/* exchanges */
.nm .filter { margin-bottom: 16px; gap: 20px; font-size: 15px; }
.nm .filter label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.nm .exlist { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.nm details.ex { border-bottom: 1px solid var(--line); }
.nm details.ex summary { cursor: pointer; padding: 14px 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; list-style: none; }
.nm details.ex summary::-webkit-details-marker { display: none; }
.nm details.ex summary::before { content: "+"; color: var(--ink-soft); width: 12px; }
.nm details.ex[open] summary::before { content: "–"; }
.nm .pairname { font-weight: 600; }
.nm .pill { font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; color: var(--ink-soft); }
.nm .pill.s { border-color: var(--ink); color: var(--ink); }
.nm .pill.t { border-color: var(--tension); color: var(--tension); }
.nm .pill.m { border-color: var(--accent); color: var(--accent); }
.nm .exbody { padding: 0 0 18px 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.nm .dir h4 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.nm .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.nm .chip { font: inherit; font-size: 13px; border: 1px solid var(--line); background: none; color: var(--ink); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.nm .chip:hover { border-color: var(--ink); }
.nm .chip[aria-pressed=true] { background: var(--ink); color: #fff; border-color: var(--ink); }
.nm .dir input { width: 100%; font-size: 15px; }
.nm .dir textarea.exmiss { display: block; width: 100%; font-size: 15px; line-height: 1.35; resize: vertical; }
.nm .dir label.miss { display: block; margin: 12px 0 6px; font-size: 14px; font-weight: 600; color: var(--accent); }
.nm .tension { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; }
.nm .tension input[type=text] { flex: 1 1 220px; font-size: 15px; }
.nm .tension label { display: flex; gap: 8px; align-items: center; color: var(--tension); font-weight: 600; font-size: 15px; cursor: pointer; }
.nm .tension input[type=checkbox] { accent-color: var(--tension); }

/* the network */
.nm .diagram { border-top: 1px solid var(--line); }
.nm .dtools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.nm .dtools label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.nm .dtools .sp { flex: 1; }
.nm .dtools .btn { font-size: 14px; padding: 6px 12px; }
.nm svg#net { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.nm .readout { padding: 20px 0 0; border-top: 1px solid var(--line); font-size: 15px; }
.nm .readout h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin: 20px 0 8px; }
.nm .readout h3:first-child { margin-top: 0; }
.nm .readout p { margin: 0; }
.nm .cl { display: flex; flex-wrap: wrap; gap: 6px; }
.nm .cltag { display: inline-flex; gap: 7px; align-items: baseline; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; }
.nm .cltag b { font-variant-numeric: tabular-nums; }
.nm .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; align-self: center; }
.nm .l2 { display: flex; flex-direction: column; gap: 6px; }
.nm .l2 div { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.nm .next { margin-top: 20px !important; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.nm .next b { color: var(--ink); }
.nm .imgout { padding: 20px 0 0; margin-top: 20px; border-top: 1px solid var(--line); font-size: 15px; }
.nm .imgout p { margin: 0 0 10px; color: var(--ink-soft); }
.nm .imgout img { width: 100%; border: 1px solid var(--line); }

/* segmented choices: how to rate, and which view of the diagram */
.nm .seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 999px; padding: 2px; gap: 2px; }
.nm .seg-b { font: inherit; font-size: 14px; line-height: 1.2; background: none; border: 0; border-radius: 999px; padding: 6px 14px; color: var(--ink-soft); cursor: pointer; }
.nm .seg-b:hover { color: var(--ink); }
.nm .seg-b[aria-pressed=true] { background: var(--ink); color: #fff; }
.nm .seg-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#rateMode { margin-bottom: 18px; }
.nm .views { margin-bottom: 4px; }

/* rating one node against the rest */
.nm .rate-one { margin-bottom: 8px; }
.nm .one-head { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; }
.nm .one-pick { display: inline-flex; gap: 10px; align-items: center; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.nm .one-pick select { font: inherit; font-size: 16px; letter-spacing: 0; text-transform: none; padding: 7px 8px; border: 1px solid var(--line); background: var(--cell); color: var(--ink); max-width: 260px; }
.nm .one-once { display: flex; gap: 8px; align-items: baseline; margin: 14px 0 4px; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.nm .one-count { margin: 0 0 8px; font-size: 14px; }
.nm .one-list { list-style: none; margin: 0 0 16px; padding: 0; border-bottom: 1px solid var(--line); }
.nm .one-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.nm .one-n { overflow-wrap: anywhere; }
.nm .one-o { font-size: 12px; color: var(--tension); margin-left: 6px; white-space: nowrap; }
.nm .one-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; gap: 2px; }
.nm .one-seg button { font: inherit; font-size: 14px; display: inline-flex; gap: 7px; align-items: center; background: none; border: 0; border-radius: 999px; padding: 4px 11px 4px 6px; color: var(--ink-soft); cursor: pointer; }
.nm .one-seg button .mk { width: 16px; height: 16px; }
.nm .one-seg button .mk.w::after { inset: 5px; }
.nm .one-seg button .mk.m::after { inset: 3.5px; }
.nm .one-seg button:hover { color: var(--ink); }
.nm .one-seg button[aria-checked=true] { background: var(--ink); color: #fff; }
.nm .one-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nm .one-done { margin: 12px 0 16px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-soft); max-width: 56ch; }

/* Step: replay how the clusters form */
.nm .stepper { padding: 16px 0 18px; border-top: 1px solid var(--line); font-size: 15px; }
.nm .stepper h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin: 0 0 10px; }
.nm .st-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.nm .st-row .btn { font-size: 14px; padding: 6px 12px; }
.nm .st-row .st-b { width: 36px; padding: 6px 0; font-size: 17px; line-height: 1; }
.nm .st-row .st-play { min-width: 76px; }
.nm .st-row .btn:disabled { opacity: 0.35; cursor: default; border-color: var(--line); }
.nm .st-row input[type=range] { flex: 1 1 140px; min-width: 120px; accent-color: var(--accent); }
.nm .st-n { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 7.5em; }
.nm .st-cap { margin: 10px 0 0; min-height: 2.9em; max-width: 62ch; }

/* the Sorted matrix */
.nm .sorted { padding: 14px 0 16px; }
.nm .sm-scroll { overflow-x: auto; }
.nm svg.sm { display: block; max-width: none; user-select: none; -webkit-user-select: none; }
.nm svg.sm .smc { cursor: pointer; }
.nm svg.sm .smc:hover { stroke: var(--ink); stroke-width: 1.5; }
.nm svg.sm text.hl { fill: var(--accent); font-weight: 700; }
.nm .sm-cap { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; min-height: 40px; margin-top: 10px; font-size: 15px; }
.nm .sm-rate { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.nm .sm-rate .btn { font-size: 14px; padding: 5px 12px; }
.nm .sm-key { margin: 8px 0 0; font-size: 14px; max-width: 62ch; }
.nm .sm-empty { margin: 8px 0 0; }

/* the Flow view */
.nm .flowbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 0 4px; }
.nm .fb-l { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.nm .fb-m { display: inline-flex; gap: 7px; align-items: center; font-size: 14px; margin-left: 8px; cursor: pointer; }
.nm .flowout { padding: 18px 0 0; border-top: 1px solid var(--line); font-size: 15px; }
.nm .flowout h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin: 18px 0 8px; }
.nm .flowout h3:first-child { margin-top: 0; }
.nm .flowout p { margin: 0 0 6px; max-width: 62ch; }
.nm .fo-miss { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-width: 62ch; }
.nm .fo-key { margin-top: 16px !important; font-size: 14px; }
.nm .fo-empty { margin-bottom: 12px !important; }

/* what the map is of */
.nm .kind { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 18px; }
.nm .kind-l { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

/* Circles */
.nm .venn { padding: 14px 0 16px; }
.nm svg.vn { display: block; width: 100%; height: auto; max-height: 640px; user-select: none; -webkit-user-select: none; }
.nm svg.vn .vc { cursor: pointer; }
.nm svg.vn .vc:hover { stroke-width: 2.6; }

/* Map */
.nm .mapv { padding: 14px 0 16px; }
.nm .mp-axes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.nm .mp-ax { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; align-items: center; }
.nm .mp-l { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.nm .mp-ends { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; font-size: 14px; color: var(--ink-soft); }
.nm .mp-ax input[type=text] { font-size: 15px; padding: 6px 8px; width: 100%; }
.nm .mp-plot svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.nm .mpn { cursor: grab; outline: none; }
.nm .mpn:focus-visible circle { stroke: var(--accent); stroke-width: 3; }
.nm .mp-tray { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; min-height: 32px; }
.nm .mp-tl { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.nm .mp-chip { cursor: grab; touch-action: none; }
.nm .mp-all { font-size: 13px; padding: 4px 11px; margin-left: 4px; }

/* Share: classes and workshops behind a fold */
.nm .share .note { font-size: 14px; color: var(--ink-soft); margin: 8px 0 0; }
.nm .share .open-code { margin-top: 10px; }
.nm details.groups { border-top: 1px solid var(--line); padding-top: 16px; }
.nm details.groups > summary { cursor: pointer; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; margin-bottom: 4px; }
.nm details.groups[open] > summary { margin-bottom: 24px; }
.nm details.groups h3 { font-size: 18px; }
.nm .hide-cv { margin: 0 0 16px; text-align: right; }
.nm .hide-cv .btn { font-size: 13px; padding: 4px 11px; color: var(--ink-soft); }

/* information structure (Owen's Figure 14) */
.nm .readout .tip { font-size: 14px; margin-bottom: 10px; max-width: 60ch; }
.nm .tree { overflow-x: auto; padding: 4px 0 8px; }
.nm .tree svg { display: block; max-width: none; }
.nm .tn { cursor: pointer; outline: none; }
.nm .tn rect { fill: var(--snow); stroke: var(--line); stroke-width: 1; }
.nm .tn text { fill: var(--tc, var(--ink)); }
.nm .tn:hover rect, .nm .tn:focus-visible rect { stroke: var(--accent); stroke-width: 1.6; }
.nm .tn.on rect { fill: var(--accent); stroke: var(--accent); }
.nm .tn.on text { fill: #fff; }
.nm .how { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-width: 62ch; }
.nm .solo { margin-top: 10px !important; }
.nm .pinned { margin-top: 16px !important; font-size: 14px; }

/* share and compare */
.nm .share section { margin-bottom: 32px; }
.nm .share h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 6px; }
.nm .share p { margin: 0 0 12px; max-width: 56ch; font-size: 15px; color: var(--ink-soft); }
.nm .share textarea { display: block; width: 100%; min-height: 90px; margin-bottom: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.nm .status { font-size: 14px; color: var(--accent); min-height: 1.2em; }

/* class links and class rooms */
.nm .link-banner, .nm .room-bar { margin: 24px 0 0; }
.nm .room-bar + .link-banner { margin-top: 12px; }
.nm .room-bar .status { flex-basis: 100%; }
.nm .share textarea.short { min-height: 64px; }
.nm .room-bar .board-status { flex-basis: 100%; font-size: 14px; color: var(--ink-soft); }
.nm .room-bar .board-status:empty { display: none; }
.nm .room-bar .board-status b { color: var(--tension); }
.nm .room-bar .board-status .btn { margin-left: 8px; }
.nm .preview-banner { margin: 0 0 20px; border-color: var(--tension); color: var(--tension); }
.nm .preview-banner b { font-weight: 700; }
.nm-meta .name-hint { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--accent); }
.nm .create-form { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 0 0 12px; }
.nm .create-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.nm .create-form input { letter-spacing: 0; text-transform: none; }
.nm .create-form input[type="text"] { width: 280px; max-width: 100%; }
#roomCreate .banner { margin: 12px 0 0; }

/* which sends count (teacher, in a class) */
.nm .in-room .paste-area { display: none; }
.nm .picker { margin: 0 0 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; }
.nm .picker summary { cursor: pointer; font-size: 16px; }
.nm .picker summary b { font-variant-numeric: tabular-nums; }
.nm .picker .cnote { margin-top: 10px; }
.nm .pick { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 5px 0; font-size: 15px; cursor: pointer; }
.nm .pick input { align-self: center; }
.nm .pick .who { font-weight: 600; min-width: 8ch; }
.nm .pick .when { color: var(--ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.nm .pick .tag { font-size: 13px; color: var(--tension); }

/* class view */
.nm .names-row { margin-top: 12px; gap: 6px 14px; font-size: 15px; }
.nm .names-row label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-weight: 600; }
.nm .names-row span { font-size: 14px; color: var(--ink-soft); }
.nm .class-view textarea { display: block; width: 100%; min-height: 120px; margin-bottom: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.nm .class-view h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; margin: 32px 0 6px; }
.nm .csum { margin: 24px 0 8px; font-size: 16px; }
.nm .csum b { font-variant-numeric: tabular-nums; }
.nm .cnote { margin: 0 0 12px; font-size: 15px; color: var(--ink-soft); max-width: 56ch; }
.nm .ccell { width: 32px; height: 32px; display: block; border: 1px solid var(--line-2); background: var(--cell); margin: -1px 0 0 -1px; position: relative; }
.nm .ccell::after { content: ""; position: absolute; background: var(--ink); }
.nm .ccell[data-v="1"]::after { inset: 11px; }
.nm .ccell[data-v="2"]::after { inset: 7px; }
.nm .ccell[data-v="3"]::after { inset: 3px; }
.nm .ccell.split { box-shadow: inset 0 0 0 3px var(--tension); background: #FBE9E5; }
.nm .ccell.loose { box-shadow: inset 0 0 0 2px var(--tension); }
.nm .contest { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px 14px; align-items: center; font-size: 15px; }
.nm .contest .pn { min-width: 0; }
.nm .dist { display: flex; height: 10px; border: 1px solid var(--line-2); background: var(--cell); }
.nm .dist i { display: block; height: 100%; }
.nm .dist .s { background: var(--ink); }
.nm .dist .m { background: var(--ink-soft); }
.nm .dist .w { background: var(--ink-soft); opacity: 0.45; }
.nm .contest .cn { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.nm .flows { font-size: 15px; display: flex; flex-direction: column; gap: 6px; }
.nm .flows b { font-weight: 600; margin-right: 6px; }
.nm .flows .ftension { color: var(--tension); }

/* about this tool */
.nm-about { scroll-margin-top: 24px; }
.nm-steps { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 14px; font-size: 19px; line-height: 1.5; max-width: 56ch; }
.nm-steps b { font-weight: 600; }
.nm-credits { display: flex; flex-direction: column; gap: 16px; }
.nm-about p { max-width: 56ch; }
.nm-note { margin-top: 20px; font-size: 17px; color: var(--ink-soft); }
.nm-credits .nm-note { margin-top: 4px; }
.nm-about + .nm-about { margin-top: 64px; }

@media (max-width: 980px) {
  .nm-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .nm-right { position: static; }
}

@media (max-width: 600px) {
  .nm-back { margin-top: 56px; }
  .page__title.nm-title { margin-top: 16px; }
  .nm { margin-top: 40px; font-size: 16px; }
  .nm-meta input { width: 100%; }
  .nm-meta label { flex: 1 1 100%; }
  .nm .tabs { gap: 4px 20px; }
  .nm .tab { font-size: 16px; padding-bottom: 10px; }
  .nm .exbody { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .nm .contest { grid-template-columns: minmax(0, 1fr) 80px; }
  .nm .contest .cn { grid-column: 1 / -1; margin: -4px 0 6px; }
  .nm .btn { min-height: 40px; }
  .nm .one-list li { grid-template-columns: minmax(0, 1fr); }
  .nm .one-seg { justify-self: start; }
  .nm .mp-ax { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .nm .seg-b { padding: 7px 12px; }
  .nm-steps { font-size: 17px; }
  .nm-about + .nm-about { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) { .nm * { transition: none !important; } }

/* the Teacher page (teacher.njk) */
.teacher { max-width: 820px; }
.teacher .t-h { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 12px; }
.teacher .t-top { justify-content: space-between; align-items: baseline; margin: 0 0 8px; }
.teacher .t-section { margin: 40px 0 0; }
.teacher .t-go { align-self: flex-end; }
.teacher .t-setup summary { cursor: pointer; font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.teacher .t-steps { margin: 0 0 16px; font-size: 15px; }
.teacher code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--cell); padding: 1px 4px; }
.teacher textarea.short { display: block; width: 100%; min-height: 64px; margin-bottom: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.teacher .t-class { border-top: 1px solid var(--line); padding: 16px 0; }
.teacher .t-class:last-child { border-bottom: 1px solid var(--line); }
.teacher .t-name { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.teacher input.t-rename { font-size: 19px; font-weight: 600; border: 1px solid transparent; padding: 4px 6px; margin-left: -7px; width: 100%; max-width: 520px; background: transparent; }
.teacher input.t-rename:hover, .teacher input.t-rename:focus { border-color: var(--line-2); background: var(--cell); }
.teacher .t-facts { font-size: 14px; color: var(--ink-soft); }
.teacher .t-warn { font-size: 14px; color: var(--tension); }
.teacher .t-actions { gap: 8px 10px; align-items: center; }
.teacher .t-actions .status { flex-basis: 100%; }
.teacher .t-end { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--ink-soft); }
.teacher select { font: inherit; font-size: 16px; padding: 8px; letter-spacing: 0; text-transform: none; }

/* the printed report (Print or save as PDF), built into #printReport by the tool's script */
#printReport { display: none; }
@media print {
  @page { margin: 14mm; }
  body.print-on > *:not(#printReport) { display: none !important; }
  body.print-on { background: #fff; }
  body.print-on #printReport { display: block; margin: 0; max-width: none; }
  .print-report { -webkit-print-color-adjust: exact; print-color-adjust: exact; color: var(--ink); font-size: 11pt; }
  .print-report .pr-head { border-bottom: 1px solid var(--line); padding-bottom: 8pt; margin-bottom: 10pt; }
  .print-report .pr-head h1 { font-size: 20pt; line-height: 1.15; margin: 0 0 3pt; }
  .print-report .pr-head p { margin: 0; color: var(--ink-soft); font-size: 10pt; }
  .print-report h2 { font-size: 13pt; margin: 0 0 6pt; break-after: avoid; }
  .print-report .pr-sec { margin: 0 0 14pt; }
  .print-report .pr-net { display: block; width: 100%; max-height: 105mm; }
  .print-report .readout { border-top: 0; padding-top: 0; font-size: 10pt; }
  .print-report .tree { overflow: visible; }
  .print-report .tree svg { max-width: 100%; height: auto; }
  .print-report .pr-clusters, .print-report .pr-ex { break-before: page; }
  .print-report table.mx { break-inside: avoid; font-size: 9pt; }
  .print-report .pr-matrix { break-inside: avoid; }
  .print-report table.mx th.colh { height: 150px; }
  .print-report table.mx th.colh div { max-height: 150px; }
  .print-report .ccell { width: 22px; height: 22px; }
  .print-report .ccell[data-v="1"]::after { inset: 8px; }
  .print-report .ccell[data-v="2"]::after { inset: 5px; }
  .print-report .ccell[data-v="3"]::after { inset: 2px; }
  .print-report .pr-note { color: var(--ink-soft); font-size: 10pt; margin: 0 0 6pt; }
  .print-report .pr-link { break-inside: avoid; border-top: 1px solid var(--line); padding: 7pt 0; }
  .print-report .pr-link h3 { font-size: 11.5pt; margin: 0 0 4pt; }
  .print-report .pr-link h3 span { font-weight: 400; color: var(--ink-soft); font-size: 10pt; margin-left: 6pt; }
  .print-report .pr-link h4 { font-size: 10.5pt; margin: 5pt 0 2pt; }
  .print-report .pr-dir { margin: 0 0 3pt 10pt; }
  .print-report .pr-dir dl { display: grid; grid-template-columns: 30mm 1fr; gap: 1pt 8pt; margin: 0; font-size: 10pt; }
  .print-report .pr-dir dt { color: var(--ink-soft); }
  .print-report .pr-dir dd { margin: 0; }
  .print-report .pr-tension { margin: 3pt 0 0 10pt; font-size: 10pt; color: var(--tension); }
  .print-report ul { margin: 2pt 0 4pt; padding-left: 14pt; font-size: 10pt; }
  .print-report .pr-by { color: var(--ink-soft); }
  .print-report .pr-foot { margin-top: 14pt; padding-top: 6pt; border-top: 1px solid var(--line); font-size: 9pt; color: var(--ink-soft); }
  .print-report .pr-center dl.pr-attrs { display: grid; grid-template-columns: 40mm 1fr; gap: 2pt 8pt; margin: 0 0 8pt; font-size: 10pt; }
  .print-report .pr-center dt { color: var(--ink-soft); }
  .print-report .pr-center dd { margin: 0; }
  .print-report .pr-center h3 { font-size: 11.5pt; margin: 6pt 0 3pt; }
  .print-report .pr-persona { font-size: 10pt; padding: 3pt 0; border-top: 1px solid var(--line); break-inside: avoid; }
  .print-report .pr-persona span { color: var(--ink-soft); margin-left: 4pt; }
  .print-report .pr-persona p { margin: 1pt 0 0; }
  .print-report .pr-subnet { break-before: page; }
  .print-report .pr-center { break-before: page; }
  .print-report .pr-center + .pr-clusters { break-before: auto; margin-top: 14pt; }
  .print-report .pr-subhead { font-size: 16pt; margin: 0 0 8pt; }
  .print-report .pr-sorted { break-inside: avoid; }
  .print-report .pr-sorted svg { display: block; max-width: 100%; height: auto; }
  .print-report .pr-flow { break-inside: avoid; }
  .print-report .pr-venn, .print-report .pr-map { break-inside: avoid; }
  .print-report .pr-venn svg { display: block; max-width: 100%; max-height: 120mm; height: auto; margin: 0 auto; }
  .print-report .pr-map svg { display: block; max-width: 100%; height: auto; }
  .print-report .pr-subhead span { font-size: 10pt; font-weight: 400; color: var(--ink-soft); margin-left: 6pt; }
  .print-report.py .board { border-top: 0; padding-top: 0; break-inside: avoid; }
  .print-report.py .pr-ex { break-before: page; }
}

/* narrow screens: the sub-network button or design center tag goes under the node's name */
@media (max-width: 560px) {
  .nm .party.top { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .nm .party.top .sub-btn, .nm .party.top .dc-tag { grid-column: 2; grid-row: 2; justify-self: start; }
  .nm .party.top > [data-del] { grid-column: 3; grid-row: 1; }
}