/* Every Degree — the 7×7 interval grid, its rules, its outlier and its twin.
   Tokens only; every colour, size and radius comes from css/style.css.

   The grid is the chapter. Everything else on the page is a caption for it,
   so the grid gets the strong type and the rest stays quiet. */

#ch-matrix .mx-card { margin-top: 20px; }
#ch-matrix .mx-card:first-of-type { margin-top: 0; }

#ch-matrix .mx-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 14px 0 4px;
}
#ch-matrix .mx-lab {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft);
  max-width: 100%; min-width: 0;
}
#ch-matrix .mx-lab select { min-width: 0; max-width: 100%; }

/* ---------- the readout above the grid ---------- */

#ch-matrix .mx-readout {
  min-height: 74px; padding: 12px 0 14px;
  border-bottom: 1.5px dashed var(--line);
}
#ch-matrix .mx-ro-idle { font-size: 16px; color: var(--ink-soft); line-height: 1.6; }
#ch-matrix .mx-ro-idle .mono { color: var(--ink); font-size: 14.5px; }
#ch-matrix .mx-ro-name {
  font-family: var(--serif); font-weight: 700; font-size: 26px;
  color: var(--accent-ink); line-height: 1.15;
}
#ch-matrix .mx-ro-notes { font-size: 21px; margin-top: 2px; }
#ch-matrix .mx-ro-notes i { color: var(--ink-soft); font-style: normal; margin: 0 6px; }
#ch-matrix .mx-ro-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 8px; font-size: 13.5px; color: var(--ink-soft);
}

/* ---------- the grid ---------- */

#ch-matrix .mx-scroll {
  overflow-x: auto; overscroll-behavior-x: contain;
  margin: 14px 0 0; padding-bottom: 6px;
}
#ch-matrix .mx-grid {
  display: grid; grid-template-columns: 84px repeat(7, minmax(78px, 1fr));
  gap: 3px; min-width: 620px;
}

#ch-matrix .mx-corner {
  display: grid; place-items: end start; padding: 0 0 6px 2px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
}

#ch-matrix .mx-colhead,
#ch-matrix .mx-rowhead {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  background: transparent; border: none; cursor: pointer; color: var(--ink);
  padding: 5px 6px 7px; border-radius: 6px;
  transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
#ch-matrix .mx-colhead { align-items: center; text-align: center; }
#ch-matrix .mx-colhead:hover,
#ch-matrix .mx-rowhead:hover { background: var(--paper-tint); }
#ch-matrix .mx-colhead:focus-visible,
#ch-matrix .mx-rowhead:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#ch-matrix .mx-colhead.flat,
#ch-matrix .mx-rowhead.flat { cursor: default; }
#ch-matrix .mx-colhead.flat:hover,
#ch-matrix .mx-rowhead.flat:hover { background: transparent; }

#ch-matrix .mx-ch-n {
  font-family: var(--serif); font-weight: 700; font-size: 17.5px;
}
#ch-matrix .mx-ch-run {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft);
  opacity: 0; transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
#ch-matrix .mx-colhead:hover .mx-ch-run,
#ch-matrix .mx-colhead:focus-visible .mx-ch-run { opacity: 1; }

#ch-matrix .mx-rowhead { flex-direction: row; align-items: baseline; gap: 8px; }
#ch-matrix .mx-rh-deg {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft);
  min-width: 22px;
}
#ch-matrix .mx-rh-note { font-family: var(--serif); font-weight: 700; font-size: 19px; }
#ch-matrix .mx-rh-two { display: flex; flex-direction: column; line-height: 1.2; }
#ch-matrix .mx-rh-two b { font-family: var(--serif); font-size: 17.5px; }
#ch-matrix .mx-rh-two i {
  font-family: var(--serif); font-size: 14.5px; color: var(--ink-soft); font-style: normal;
}

/* A cell carries its family as a local variable so the marker hue paints the
   border and the ink twin paints the letters — the Two Inks Rule, per cell. */
#ch-matrix .mx-cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 9px 9px; cursor: pointer; text-align: left;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 6px;
  border-left-color: var(--fam, var(--line));
  transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
#ch-matrix .mx-cell:hover { border-color: var(--fam, var(--accent)); background: var(--paper-tint); }
#ch-matrix .mx-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#ch-matrix .mx-cell.on { border-color: var(--fam-ink); background: var(--paper-tint); }
#ch-matrix .mx-q {
  font-family: var(--mono); font-size: 13.5px; font-weight: 600;
  color: var(--fam-ink, var(--ink));
}
#ch-matrix .mx-n { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
#ch-matrix .mx-n i { font-style: normal; opacity: 0.55; margin: 0 2px; }

/* The outlier gets a drawn ring, not a fill — it is being pointed at, not chosen. */
#ch-matrix .mx-cell.odd { border-color: var(--fam); border-style: dashed; border-width: 1.8px; }

#ch-matrix .mx-legend {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin-top: 12px;
}
#ch-matrix .mx-swipe { display: none; }
@media (max-width: 760px) { #ch-matrix .mx-swipe { display: inline; font-style: italic; } }

/* ---------- the rules ---------- */

#ch-matrix .mx-rules { list-style: none; margin: 16px 0 0; }
#ch-matrix .mx-rules li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px;
  padding: 11px 0; border-bottom: 1.4px dashed var(--line);
}
#ch-matrix .mx-rules li:last-child { border-bottom: none; }
#ch-matrix .mx-rule-text { flex: 1 1 260px; min-width: 0; font-size: 16px; line-height: 1.55; }
#ch-matrix .mx-rule-tail {
  margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6;
  max-width: 68ch;
}

/* ---------- the odd one out ---------- */

#ch-matrix .mx-odd { margin-top: 16px; }
#ch-matrix .mx-odd-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding-bottom: 14px; border-bottom: 1.5px dashed var(--line);
}
#ch-matrix .mx-odd-pair {
  font-family: var(--serif); font-weight: 700; font-size: 42px;
  color: var(--accent-ink); line-height: 1;
}
#ch-matrix .mx-odd-pair i {
  font-style: normal; color: var(--ink-soft); margin: 0 8px; font-size: 26px;
  vertical-align: middle;
}
#ch-matrix .mx-odd-list { list-style: none; margin: 14px 0 0; }
#ch-matrix .mx-odd-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  padding: 9px 0;
}
#ch-matrix .mx-odd-iv {
  font-family: var(--serif); font-weight: 700; font-size: 19px;
  flex: 0 0 auto; min-width: 128px;
}
#ch-matrix .mx-odd-say { flex: 1 1 240px; min-width: 0; font-size: 14.5px; color: var(--ink-soft); }
#ch-matrix .mx-odd-say i { font-style: normal; opacity: 0.55; margin: 0 2px; }
#ch-matrix .mx-odd-inv,
#ch-matrix .mx-odd-ear,
#ch-matrix .mx-odd-more,
#ch-matrix .mx-odd-none {
  margin-top: 13px; font-size: 16px; line-height: 1.62; max-width: 68ch;
}
#ch-matrix .mx-odd-more,
#ch-matrix .mx-odd-none { font-size: 14.5px; color: var(--ink-soft); }
#ch-matrix .mx-odd-ear .mono { font-size: 13.5px; }

/* ---------- two fingerprints ---------- */

#ch-matrix .mx-cmp-say { font-size: 16px; line-height: 1.6; margin: 12px 0 0; max-width: 70ch; }
#ch-matrix .mx-grid-diff { grid-template-columns: 92px repeat(7, minmax(74px, 1fr)); }
#ch-matrix .mx-dcell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 9px; cursor: pointer; text-align: left;
  background: var(--card); color: var(--ink);
  border: 1.6px solid var(--accent); border-radius: 6px;
  transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
#ch-matrix .mx-dcell:hover { background: var(--paper-tint); }
#ch-matrix .mx-dcell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Agreement is the quiet state: hairline, muted, not clickable-looking. */
#ch-matrix .mx-dcell.same {
  border-color: var(--line); border-style: dashed; cursor: default; opacity: 0.6;
}
#ch-matrix .mx-dcell.same:hover { background: var(--card); }
#ch-matrix .mx-dq { font-family: var(--mono); font-size: 13.5px; font-weight: 600; }
#ch-matrix .mx-dq.a { color: var(--accent-ink); }
#ch-matrix .mx-dq.b { color: var(--ink-soft); }
#ch-matrix .mx-dq.b::before { content: '→ '; opacity: 0.5; }

#ch-matrix .mx-defs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px; margin-top: 20px; padding-top: 16px;
  border-top: 1.5px dashed var(--line);
}
#ch-matrix .mx-defs p { font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); }
#ch-matrix .mx-defs strong { color: var(--ink); }

/* ---------- the sevenths, stacked ---------- */

#ch-matrix .mx-sevens {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(148px, 100%), 1fr));
  gap: 9px; margin-top: 16px;
}
#ch-matrix .mx-seven {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 11px 13px 13px; cursor: pointer;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 9px;
  transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
#ch-matrix .mx-seven:hover { border-color: var(--accent); }
#ch-matrix .mx-seven:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#ch-matrix .mx-7deg {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--ink-soft);
}
#ch-matrix .mx-7name { font-family: var(--serif); font-weight: 700; font-size: 21px; line-height: 1.2; }
#ch-matrix .mx-7notes { font-size: 12.5px; color: var(--ink-soft); }
#ch-matrix .mx-7stack { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); }

#ch-matrix .mx-seven-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px;
}
#ch-matrix .mx-seven-note {
  flex: 1 1 240px; min-width: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  #ch-matrix .mx-cell, #ch-matrix .mx-dcell, #ch-matrix .mx-seven,
  #ch-matrix .mx-colhead, #ch-matrix .mx-rowhead, #ch-matrix .mx-ch-run { transition: none; }
  #ch-matrix .mx-ch-run { opacity: 1; }
}