/* Mental Models. mental-models.css
 * BRIEF-172. Built entirely on tokens.css custom properties and the
 * bench.css primitives (bench-card, bench-btn, bench-btn-plain,
 * bench-textarea, bench-error). Only what is unique to this Thing lives
 * here: the catalogue grids, the model detail layout, the fluency
 * tracker, the Ask thread, the story checker, and the originals list.
 */

.mm-wrap { display: block; }

/* The Bench's default stage is 760px, which leaves about 696px inside
   the panel. Three shelf cards need roughly 844px, so the third card
   wrapped to its own row and the shelf read as two plus a stray. The
   whole point of the shelf is seeing all three choices at once, so
   desktop gets the room to do that. This class sits on the same
   element as bench-stage-inner and loads after it, so it wins without
   needing extra specificity. */
@media (min-width: 900px) {
  .mm-wrap { max-width: 1000px; }
}

/* ── Screen panel ───────────────────────────────────────────────────────────
 * Every screen sits inside one recessed tray, not loose on the page
 * background, so browsing the catalogue reads as its own bounded space
 * within The Drawer rather than more site navigation. The individual
 * bench-cards inside it (category tiles, model cards, section cards)
 * stay raised against this sunken ground, the same relationship
 * bench-card already has with the page everywhere else on the site,
 * just nested one level deeper here.
 */

.mm-screen-panel {
  background: var(--ground-sunk);
  border: var(--border-w-heavy) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--s4);
  margin-bottom: var(--s3);
}

@media (max-width: 599px) {
  .mm-screen-panel { padding: var(--s3); }
}

/* ── Bursts ─────────────────────────────────────────────────────────────────
 * Timed recognition rounds. The run screen wants one thing legible at a
 * glance under a short clock, so the scenario carries display type and
 * everything else stays quiet around it.
 */

.mm-bursts-card { margin-bottom: var(--s2); }

.mm-bursts-lead {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 var(--s3);
}

.mm-bursts-go { margin-bottom: var(--s2); }

.mm-bursts-pool,
.mm-bursts-thin {
  font-size: var(--t-small);
  color: var(--ink-faint);
  margin: 0;
}

.mm-bursts-family { margin-bottom: var(--s2); }

/* Run screen */

.mm-bursts-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s2);
  min-height: 20px;
}

.mm-bursts-streak {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.mm-bursts-lives { display: flex; gap: 6px; }

.mm-bursts-life {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: var(--border-w) solid var(--line-strong);
  background: transparent;
}

.mm-bursts-life.is-on { background: var(--accent); border-color: var(--accent); }

.mm-bursts-clock {
  height: 6px;
  background: var(--ground-sunk);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--s3);
}

.mm-bursts-clock-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
}

.mm-bursts-kind {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
  margin: 0 0 var(--s2);
}

.mm-bursts-scenario {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 var(--s3);
}

.mm-bursts-label {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
  background: var(--ground-sunk);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 0 0 var(--s3);
}

.mm-bursts-choices {
  display: grid;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.mm-bursts-choice {
  font: inherit;
  font-size: var(--t-body);
  text-align: left;
  color: var(--ink);
  background: var(--panel);
  border: var(--border-w-heavy) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  cursor: pointer;
  min-height: 52px;
}

.mm-bursts-choice:hover:not(:disabled) { border-color: var(--accent); }
.mm-bursts-choice:active:not(:disabled) { transform: var(--press); }
.mm-bursts-choice:disabled { opacity: .55; cursor: default; }

.mm-bursts-choice--judge { text-align: center; font-weight: 500; }

.mm-bursts-feedback {
  font-size: var(--t-small);
  min-height: 20px;
  margin: 0 0 var(--s3);
  color: var(--ink-faint);
}

.mm-bursts-feedback.is-win  { color: var(--good); font-weight: 500; }
.mm-bursts-feedback.is-miss { color: var(--stop); }

.mm-bursts-quit {
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink-faint);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.mm-bursts-quit:hover { color: var(--ink); }

/* Run summary */

.mm-bursts-score-card { margin-bottom: var(--s2); }

.mm-bursts-score-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.mm-bursts-score-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.mm-bursts-score-label {
  font-size: var(--t-small);
  color: var(--ink-faint);
}

.mm-bursts-score-sub {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: var(--s2) 0 0;
}

.mm-bursts-miss-card { margin-bottom: var(--s2); }

.mm-bursts-miss-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mm-bursts-miss-item {
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink);
  background: var(--ground-sunk);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  cursor: pointer;
}

.mm-bursts-miss-item:hover { border-color: var(--accent); }

.mm-bursts-signedout { margin: 0 0 var(--s2); }

/* ── The shelf ──────────────────────────────────────────────────────────────
 * Three cards a day. State A withholds the title so the scenario is the
 * loudest thing on the card, and Take it and Let it go are the same
 * height, border weight and shadow so neither reads as the answer.
 * Every transition is a hard cut: this register does not blur.
 */

.mm-shelf-eyebrow {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-weight: 500;
  color: var(--accent);
  margin: 0 0 var(--s2);
}

.mm-shelf-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s2);
}

.mm-shelf-lead {
  font-size: var(--t-lead);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 58ch;
  margin: 0 0 var(--s4);
}

.mm-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.mm-shelf-card {
  display: flex;
  flex-direction: column;
  min-height: 290px;
  padding: var(--s3);
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: var(--border-w) solid var(--line-strong);
  box-shadow: var(--shadow);
  transition: border-color .12s steps(1), box-shadow .12s steps(1);
}

.mm-shelf-card.is-taken {
  border: var(--border-w-heavy) solid var(--accent);
  box-shadow: var(--shadow-lift);
}

.mm-shelf-card.is-gone {
  background: transparent;
  border: var(--border-w) dashed var(--line-strong);
  box-shadow: none;
  opacity: .72;
}

.mm-shelf-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.mm-shelf-tile {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  border: var(--border-w) solid var(--line-strong);
  background: var(--accent-soft);
  color: var(--accent);
}

.mm-shelf-tile svg { width: 60%; height: 60%; }

.mm-shelf-card.is-taken .mm-shelf-tile { background: var(--accent); color: var(--accent-ink); }

.mm-shelf-card.is-gone .mm-shelf-tile {
  border-style: dashed;
  background: transparent;
  color: var(--ink-faint);
  opacity: .55;
}

.mm-shelf-stamp {
  position: absolute;
  right: -9px;
  top: -9px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--good);
  color: var(--ground-sunk);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  border: var(--border-w) solid var(--line-strong);
  animation: mmTakeStamp .34s cubic-bezier(.3, 1.5, .5, 1) both;
}

@keyframes mmTakeStamp {
  0%   { transform: scale(.4) rotate(-14deg); opacity: 0; }
  55%  { transform: scale(1.12) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.mm-shelf-state {
  margin-left: auto;
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-weight: 500;
  color: var(--ink-faint);
}

.mm-shelf-state.is-taken { color: var(--good); }

.mm-shelf-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.04;
  color: var(--ink);
  margin: 0 0 10px;
  animation: mmRevealTitle .4s ease-out both;
}

@keyframes mmRevealTitle {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.mm-shelf-scenario {
  margin: 0 0 var(--s3);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}

.mm-shelf-scenario.is-secondary { font-size: 15px; color: var(--ink-soft); }
.mm-shelf-card.is-gone .mm-shelf-scenario { color: var(--ink-faint); }

.mm-shelf-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
}

/* Same height, same border, same shadow. Neither is the answer. */
.mm-shelf-take,
.mm-shelf-drop {
  min-height: var(--tap);
  padding: 0 14px;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
}

.mm-shelf-take { background: var(--accent); color: var(--accent-ink); }
.mm-shelf-drop { background: transparent; color: var(--ink); }

.mm-shelf-take:active,
.mm-shelf-drop:active { transform: var(--press); box-shadow: none; }

.mm-shelf-open {
  margin-top: auto;
  align-self: flex-start;
  min-height: 44px;
  font: inherit;
  font-size: 15px;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.mm-shelf-open:hover { color: var(--ink); }

.mm-shelf-gone-note {
  margin: auto 0 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--ink-faint);
}

.mm-shelf-footer {
  margin: 0 0 var(--s3);
  font-size: var(--t-small);
  color: var(--ink-faint);
}

/* ── The case ───────────────────────────────────────────────────────────────
 * Unproved tiles keep full size and full stroke and drop to 26%, rather
 * than shrinking or greying to nothing, so the field reads as a thing
 * you own that is mostly unfinished. No number anywhere on this screen.
 */

.mm-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.mm-case-tile {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  border: var(--border-w) dashed var(--line-strong);
  background: transparent;
  color: var(--ink-faint);
  opacity: .26;
  cursor: pointer;
  padding: 0;
}

.mm-case-tile svg { width: 62%; height: 62%; }

.mm-case-tile.is-proved {
  border: var(--border-w) solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: var(--shadow);
  opacity: 1;
}

.mm-case-tile:hover { opacity: .5; }
.mm-case-tile.is-proved:hover { opacity: 1; border-color: var(--accent); }

.mm-case-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.mm-case-legend-item { display: flex; align-items: center; gap: 8px; }

.mm-case-legend-swatch {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: var(--radius);
  border: var(--border-w) dashed var(--line-strong);
  opacity: .26;
}

.mm-case-legend-swatch.is-proved {
  border: var(--border-w) solid var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow);
  opacity: 1;
}

/* Workshop's dim tiles sit lower than Office's, matching the design. */
[data-skin="office"] .mm-case-tile { opacity: .42; }
[data-skin="office"] .mm-case-legend-swatch { opacity: .42; }
[data-skin="office"] .mm-case-tile.is-proved,
[data-skin="office"] .mm-case-legend-swatch.is-proved { opacity: 1; }

/* ── Header ─────────────────────────────────────────────────────────────────── */

.mm-header { margin-bottom: var(--s3); }

.mm-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}

/* ── Home ───────────────────────────────────────────────────────────────────── */

.mm-home-card { margin-bottom: var(--s2); }

.mm-frame-line {
  font-size: var(--t-body);
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 var(--s3);
}

.mm-home-signed-in-block {
  background: var(--ground-sunk);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: var(--s3);
}

.mm-nudge-line {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink);
}

.mm-home-actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  align-items: center;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────────
 * The full path, not just one step back, so any ancestor is one tap
 * away instead of several taps of "back" in a row. Wraps rather than
 * scrolls on narrow screens: every level stays visible and reachable
 * without a swipe gesture to discover it.
 */

.mm-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-bottom: var(--s2);
}

.mm-breadcrumb-link {
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink-faint);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
}

.mm-breadcrumb-link:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.mm-breadcrumb-current {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
}

.mm-breadcrumb-sep {
  font-size: var(--t-small);
  color: var(--ink-faint);
}

.mm-screen-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 6px;
}

.mm-screen-desc {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 var(--s3);
}

/* ── Category / discipline card grids ─────────────────────────────────────── */

.mm-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.mm-clickable-card {
  text-align: left;
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.mm-clickable-card:hover { border-color: var(--accent); }
.mm-clickable-card:active { transform: var(--press); }

.mm-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 6px;
}

.mm-card-desc {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

/* ── Model list ─────────────────────────────────────────────────────────────── */

.mm-model-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.mm-model-item-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.mm-model-item-num {
  font-size: var(--t-micro);
  color: var(--ink-faint);
}

.mm-model-item-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  margin: 0;
  flex: 1;
  min-width: 140px;
}

.mm-model-item-author {
  font-size: var(--t-micro);
  color: var(--ink-faint);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  margin: 0 0 6px;
}

.mm-model-item-tease {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

.mm-fluency-badges {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.mm-fluency-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: var(--border-w) solid var(--line-strong);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--ink-faint);
  background: var(--panel);
}

.mm-fluency-badge.is-done {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* ── Model detail ───────────────────────────────────────────────────────────── */

.mm-model-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.mm-model-num {
  font-size: var(--t-small);
  color: var(--ink-faint);
}

.mm-model-title { margin: 0; }

.mm-model-author {
  font-size: var(--t-small);
  color: var(--ink-faint);
  margin: 0 0 var(--s2);
  width: 100%;
}

.mm-tease {
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 var(--s3);
}

.mm-html-card { margin-bottom: var(--s2); }

.mm-html-card p {
  margin: 0 0 12px;
  color: var(--ink);
  line-height: 1.65;
}

.mm-html-card p:last-child { margin-bottom: 0; }

.mm-card-label { margin: 0 0 10px; }

.mm-widget-card { margin-bottom: var(--s2); }

/* ── Fluency tracker ───────────────────────────────────────────────────────── */

.mm-fluency-card {
  margin-bottom: var(--s2);
  display: grid;
  gap: var(--s2);
}

.mm-fluency-item {
  border-top: 1px dotted var(--line);
  padding-top: var(--s2);
}

.mm-fluency-item:first-of-type { border-top: 0; padding-top: 0; }

.mm-fluency-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-body);
  color: var(--ink);
  cursor: pointer;
}

.mm-fluency-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.mm-fluency-check input:disabled { opacity: .5; cursor: default; }

.mm-fluency-context {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.mm-fluency-context textarea { margin: 0; }

.mm-fluency-context-view {
  margin: 8px 0 0;
  font-size: var(--t-small);
  font-style: italic;
  color: var(--ink-soft);
}

.mm-fluency-note {
  margin: var(--s1) 0 0;
  font-size: var(--t-small);
  color: var(--ink-faint);
}

/* ── Ask panel ──────────────────────────────────────────────────────────────── */

.mm-ask-card { margin-bottom: var(--s2); }

.mm-ask-toggle {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

.mm-ask-toggle:hover { color: var(--accent); }

.mm-ask-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: var(--s2) 0;
  max-height: 320px;
  overflow-y: auto;
}

.mm-ask-msg {
  max-width: 85%;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: var(--t-small);
  line-height: 1.5;
}

.mm-ask-msg--user {
  align-self: flex-end;
  background: var(--ground-sunk);
  color: var(--ink);
}

.mm-ask-msg--assistant {
  align-self: flex-start;
  background: var(--accent-soft);
  color: var(--ink);
}

.mm-ask-card .bench-textarea { margin-bottom: var(--s2); }

/* ── Story checker ──────────────────────────────────────────────────────────── */

.mm-story-card,
.mm-stories-card { margin-bottom: var(--s2); }

.mm-story-lead {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 var(--s2);
}

.mm-story-card .bench-textarea { margin-bottom: var(--s2); }

.mm-context-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--s2);
}

.mm-chip {
  font: inherit;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.mm-chip:hover { color: var(--ink); }

.mm-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.mm-verdict { margin-top: var(--s2); }

.mm-verdict-text {
  font-size: var(--t-body);
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 var(--s2);
}

.mm-verdict-sub {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 var(--s2);
}

.mm-verdict-fyi {
  background: var(--ground-sunk);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 0 0 var(--s2);
}

.mm-verdict-fyi-title {
  margin: 0 0 4px;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
}

.mm-verdict-fyi-desc {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.mm-verdict-note {
  font-size: var(--t-micro);
  color: var(--ink-faint);
  margin: 0 0 var(--s2);
}

.mm-verdict-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* ── Stories list (original pattern detail) ───────────────────────────────── */

.mm-story-item {
  padding: 10px 0;
  border-top: 1px dotted var(--line);
}

.mm-story-item:first-child { border-top: 0; padding-top: 0; }

.mm-story-meta {
  font-size: var(--t-micro);
  color: var(--ink-faint);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  margin: 0 0 4px;
}

.mm-story-body {
  font-size: var(--t-small);
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
}

.mm-empty-note {
  font-size: var(--t-small);
  color: var(--ink-faint);
  margin: var(--s2) 0;
}

@media (max-width: 899px) {
  .mm-card-grid { grid-template-columns: 1fr; }
}