/* ─────────────────────────────────────────────────────────────────
   The month-by-month figure (partials/monthly.ejs), shared by Home,
   How it works and the demo market. Linked by each page that includes
   the partial, after its own stylesheet.

   Ink for the medians, slate for single runs, blue only for a read that
   moved (DESIGN.md: blue is new or changed). No teal: nothing here is a
   confirmation. Hairlines, no shadows. Plex Mono only for the figures
   and the axis, which are instrument chrome.

   Every class is prefixed mm- so nothing here leaks into a page.
   ───────────────────────────────────────────────────────────────── */

.mm-key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px;
  color: var(--muted);
}
.mm-key span { display: inline-flex; align-items: center; gap: 8px; }
.mm-key svg { flex: none; }
.mm-k-pt { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.mm-k-run { fill: var(--slate); }
.mm-k-moved { fill: var(--blue); }
.mm-k-live { fill: var(--surface); stroke: var(--ink); stroke-width: 1.4; }
.mm-k-floor { stroke: var(--slate); stroke-width: 1; stroke-dasharray: 3 3; }
.mm-k-ev { fill: var(--surface); stroke: var(--ink); stroke-width: 1; }
.mm-key text { font: 600 8px var(--display); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }

/* ── One bank ───────────────────────────────────────────────────── */

.mm-bank {
  display: grid;
  grid-template-columns: minmax(240px, 310px) 1fr;
  gap: 20px 44px;
  padding: 34px 0;
  border-bottom: 1px solid var(--rule);
}
.mm-bank h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.mm-place { margin: 2px 0 12px; font-size: 13.5px; color: var(--muted); }
.mm-story { margin: 0 0 16px; font-size: 15.5px; line-height: 1.55; color: var(--body); }

.mm-events { list-style: none; margin: 0; padding: 0; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.mm-events li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0 10px;
  padding: 7px 0;
  border-top: 1px solid var(--rule);
}
.mm-n {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font: 600 12px/18px var(--display);
  text-align: center;
  color: var(--ink);
}
.mm-n.is-before { border-color: var(--slate); color: var(--muted); }
.mm-events time { display: block; font: 500 12px/1.5 var(--mono); color: var(--muted); }
.mm-events a {
  margin-left: 2px;
  font-size: 13.5px;
  color: var(--body);
  text-decoration: underline;
  text-decoration-color: var(--slate);
  text-underline-offset: 3px;
}
.mm-events a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.mm-events a:focus-visible,
.mm-hit:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── The two panels ─────────────────────────────────────────────── */

.mm-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-self: start; }
.mm-panel { min-width: 0; }
.mm-panel-title {
  margin: 2px 0 10px;
  font: 600 13px/1.3 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.mm-panel-title small {
  margin-left: 8px;
  font: 400 13px/1.3 var(--text);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.mm-chart { display: block; width: 100%; height: auto; overflow: visible; }
.mm-grid line { stroke: var(--rule); stroke-width: 1; }
.mm-grid text,
.mm-axis text,
.mm-floor-l { font: 500 11.5px var(--mono); fill: var(--muted); }
.mm-axis line { stroke: var(--slate); stroke-width: 1; }
.mm-quarter path { fill: none; stroke: var(--slate); stroke-width: 1; }
.mm-quarter text { font: 600 10.5px var(--text); letter-spacing: 0.06em; text-transform: uppercase; fill: var(--muted); }
.mm-floor { stroke: var(--slate); stroke-width: 1; stroke-dasharray: 3 3; }
.mm-evline { stroke: var(--ink); stroke-width: 1; stroke-opacity: 0.28; }
.mm-evbadge circle { fill: var(--surface); stroke: var(--ink); stroke-width: 1; }
.mm-evbadge text { font: 600 10px var(--display); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.mm-run { fill: var(--slate); }
.mm-seg { fill: none; stroke: var(--body); stroke-width: 2; stroke-linecap: round; }
.mm-seg.is-moved { stroke: var(--blue); }
.mm-pt { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.mm-pt.is-moved { fill: var(--blue); stroke: var(--surface); }
.mm-live { fill: var(--surface); stroke: var(--ink); stroke-width: 1.4; }
.mm-val { font: 600 13px var(--display); fill: var(--ink); }
.mm-val.is-moved { fill: var(--blue-deep); }
.mm-val-live { font-weight: 500; font-size: 12px; fill: var(--muted); }
.mm-hit { fill: transparent; }
.mm-col { fill: var(--tint); opacity: 0; }
.mm-col.is-on { opacity: 1; }

/* ── Tooltip ────────────────────────────────────────────────────── */

.mm-tip {
  position: fixed;
  z-index: 20;
  max-width: 300px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body);
  pointer-events: none;
  opacity: 0;
  transition: opacity 80ms ease-out;
}
.mm-tip.is-on { opacity: 1; }
.mm-tip b { display: block; margin-bottom: 6px; font: 600 14.5px/1.3 var(--display); color: var(--ink); }
.mm-tip-row { display: flex; justify-content: space-between; gap: 18px; font: 500 12.5px/1.7 var(--mono); color: var(--body); }
.mm-tip-row i { font-style: normal; color: var(--muted); }
.mm-tip-moved { font-style: normal; color: var(--blue-deep); }
.mm-tip-note { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }

/* ── Caption and table ──────────────────────────────────────────── */

.mm-caption { max-width: 80ch; margin: 22px 0 0; font-size: 14.5px; line-height: 1.58; color: var(--muted); }

.mm-details { margin-top: 20px; font-size: 14.5px; }
.mm-details summary { cursor: pointer; font-weight: 600; color: var(--body); }
.mm-details summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.mm-table-wrap { overflow-x: auto; }
.mm-table { width: 100%; margin-top: 12px; border-collapse: collapse; font: 500 12.5px/1.5 var(--mono); color: var(--body); }
.mm-table th,
.mm-table td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.mm-table thead th { font: 600 11.5px var(--text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.mm-table tbody th { font: 600 13.5px var(--display); color: var(--ink); white-space: nowrap; }
.mm-td-n { white-space: nowrap; color: var(--ink); }
.mm-td-n.is-moved { color: var(--blue-deep); }
.mm-td-n span { font-family: var(--text); font-size: 12px; }
.mm-td-runs { white-space: nowrap; color: var(--muted); }
.mm-td-note { min-width: 22ch; font-family: var(--text); font-size: 13px; }

@media (max-width: 900px) {
  .mm-bank { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .mm-panels { grid-template-columns: 1fr; gap: 22px; }
  .mm-key { gap: 8px 18px; font-size: 13px; }
  .mm-bank { padding: 28px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-tip { transition: none; }
}