/* ── MATCH DESK (2026-10-10) ───────────────────────────────────────────────
   Loaded AFTER match.css and written on top of it. match.css is the blog:
   a hero, a question, three tall tiles, two explanatory cards, nine
   typefaces' worth of weights. The desk is one screen at 1440x900: the mark,
   four flat tiles that already carry the level, the ticket open on the right,
   positions docked underneath. One typeface (Geist). No new colour.

   Specificity: match.css restates half of its rules at :root x8 + !important
   (against density.css). Anything contested here is restated at the same
   weight with the selector suffixed by the view, so it wins by order. */

/* 1. the hero is gone; the strip takes its place ────────────────────────── */
.view[data-view="match"] .mm-hero{ display: none !important; }
.view[data-view="match"] .mm-desk{
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  margin: 18px 0 14px; padding: 0 0 10px; border-bottom: 1px solid var(--mm-rule);
  font-family: var(--geist, var(--sans)); color: var(--mm-ink);
}
.view[data-view="match"] .mm-desk-k{ font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.view[data-view="match"] .mm-desk-spot{
  font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--mm-ink);
}
.view[data-view="match"] .mm-desk-spot.is-wait{ color: var(--mm-mut); font-weight: 400; }
.view[data-view="match"] .mm-desk-house{ margin-left: auto; font-size: 13px; color: var(--mm-body); }

/* 2. one typeface: Geist for every string on this view ───────────────────── */
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-opt-tag,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-opt-choose,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-held,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-myview,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-match-eyebrow,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-box-k,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-box-v,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-stat-k,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-stat-v,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-payoff-k,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-payoff-note,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-payoff-labels,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-payoff-labels span,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-sec-k,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-badge,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-pos-status,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-pos-meta,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-pos-right,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-pos-line,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-pg-k,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-pg-v,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-pg-note,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-empty-k,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-empty-v,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-after-sub,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-continue,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-mkt button,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-proof *{
  font-family: var(--geist, var(--sans)) !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}
/* the small caps labels keep their size but lose the tracking; in Geist at
   11px they read fine without it */
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-box-k,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-stat-k,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-match-eyebrow,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-sec-k{
  font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.3px !important;
}

/* 3. tiles: flat rows that carry the level ───────────────────────────────── */
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-decision{
  padding: 18px 22px 20px !important;
}
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-options{ gap: 10px !important; }
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-opt,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-opt.is-compact,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-opt.is-chosen{
  min-height: 0 !important; padding: 12px 18px 12px 22px !important;
  grid-template-columns: minmax(0,1fr) auto !important; gap: 2px 16px !important;
  align-items: center !important;
}
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-opt .mm-opt-title,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-opt.is-compact .mm-opt-title{
  font-size: 16px !important; line-height: 22px !important; font-weight: 500 !important; letter-spacing: -0.1px !important;
}
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-opt .mm-opt-tag{
  font-size: 11px !important; line-height: 14px !important; color: var(--mm-mut) !important;
}
/* the live line: the engine's level and cycle, under the title */
.view[data-view="match"] .mm-opt-q{
  grid-column: 1; grid-row: 3; font-family: var(--geist, var(--sans)); font-size: 13px; line-height: 18px;
  color: var(--mm-body); font-variant-numeric: tabular-nums; position: relative; z-index: 1;
}
.view[data-view="match"] .mm-opt.is-chosen .mm-opt-q{ color: var(--mm-ink); }
/* right column: choose / my view / held, all on row 2 */
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-opt .mm-opt-choose,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-opt .mm-myview,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-opt .mm-held{
  grid-column: 2 !important; grid-row: 1 / span 3 !important; align-self: center !important;
  font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
}
/* the 96px watermark and the sweep are the blog's theatre */
.view[data-view="match"] .mm-opt-wm{ display: none !important; }
.view[data-view="match"] .mm-fx{ display: none !important; }
.view[data-view="match"] .mm-opt.is-compact{ background: #FFFEFB !important; }

/* 4. the matched grid, from first paint ──────────────────────────────────── */
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-stage.is-matched{
  grid-template-columns: minmax(0,1fr) 540px !important; gap: 0 16px !important;
  min-height: 0 !important;
}
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-stage.is-matched > .mm-decision,
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-stage.is-matched > .mm-match{
  min-height: 0 !important;
}
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-stage.is-matched .mm-match{
  padding: 18px 22px 20px !important;
}
.view[data-view="match"] .mm-match-eyebrow{ margin-bottom: 4px !important; }
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-match-title{
  font-size: 22px !important; line-height: 28px !important; font-weight: 500 !important; letter-spacing: -0.3px !important; margin: 0 0 6px !important;
}
.view[data-view="match"] .mm-payoff{ margin: 10px 0 0 !important; }
.view[data-view="match"] .mm-boxes{ margin: 14px 0 12px !important; }
.view[data-view="match"] .mm-box{ padding: 10px 14px !important; }
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-box-k{ margin-bottom: 4px !important; }
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-box-v{ font-size: 20px !important; font-weight: 500 !important; }
.view[data-view="match"] .mm-stats{ margin-bottom: 12px !important; gap: 10px !important; }
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-stat-v{
  font-size: 12px !important; text-transform: none !important; font-weight: 500 !important;
}
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-continue{
  padding: 13px 16px !important; font-size: 14px !important; font-weight: 600 !important; margin-top: 12px !important;
}
.view[data-view="match"] .mm-skeleton{ min-height: 0 !important; }

/* 5. where every coin goes: one row of chips ─────────────────────────────── */
.view[data-view="match"] .mm-flow{
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  margin: 0 0 4px; padding: 10px 0 0; border-top: 1px solid var(--mm-rule);
  font-family: var(--geist, var(--sans)); font-variant-numeric: tabular-nums;
}
.view[data-view="match"] .mm-flow-chip{
  display: inline-flex; flex-direction: column; gap: 1px; text-decoration: none; color: inherit; min-width: 0;
}
.view[data-view="match"] .mm-flow-chip i{ font-style: normal; font-size: 10px; line-height: 12px; color: var(--mm-mut); }
.view[data-view="match"] .mm-flow-chip b{ font-weight: 500; font-size: 13px; line-height: 16px; color: var(--mm-ink); white-space: nowrap; }
.view[data-view="match"] a.mm-flow-chip b{ color: var(--mm-orange); }
.view[data-view="match"] .mm-flow-sep{ color: var(--mm-mut); font-size: 13px; }
.view[data-view="match"] .mm-poscard .mm-flow{ margin-top: 10px; }

/* 6. the dock: positions as one row under the ticket ─────────────────────── */
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-after{
  display: flex !important; grid-template-columns: none !important; gap: 12px !important; margin-top: 12px !important;
}
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-after > *{ flex: 1 1 0 !important; }
.view[data-view="match"] .mm-dock{
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 12px 22px; border: 1px solid #E6BE9C; background: #FFFEFB;
  font-family: var(--geist, var(--sans)); color: var(--mm-body); font-size: 13px; line-height: 18px;
}
.view[data-view="match"] .mm-dock-k{ font-size: 11px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; color: var(--mm-mut); }
.view[data-view="match"] .mm-dock-t{ color: var(--mm-ink); font-weight: 500; }
.view[data-view="match"] .mm-dock-v{ flex: 1 1 320px; min-width: 0; }
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-dock-go{
  font: inherit; font-family: var(--geist, var(--sans)) !important; font-size: 12px !important; font-weight: 600 !important;
  color: var(--mm-orange) !important; background: none !important; border: 0 !important; padding: 0 !important; cursor: pointer;
  border-radius: 0 !important; margin-left: auto;
}
/* the position cards tighten to the same rhythm */
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-after .mm-card{
  padding: 14px 22px 16px !important;
}
.view[data-view="match"] .mm-card-head{ margin-bottom: 8px !important; }
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-after-title{
  font-family: var(--geist, var(--sans)) !important; font-size: 16px !important; font-weight: 500 !important; margin: 0 0 8px !important;
}
.view[data-view="match"] .mm-pos-grid{ gap: 10px 16px !important; margin-bottom: 8px !important; }
.view[data-view="match"] .mm-poscard{ padding: 12px 14px !important; }

/* 7. the roll: next cycle, one tap from the outcome ──────────────────────── */
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-roll{
  display: inline-block; margin-top: 10px; padding: 10px 14px !important;
  font: inherit; font-family: var(--geist, var(--sans)) !important; font-size: 13px !important; font-weight: 600 !important;
  color: #FFFEFB !important; background: var(--mm-orange) !important; border: 0 !important; border-radius: 0 !important; cursor: pointer;
}
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-roll:hover{ background: var(--tva-or-d, #a9521a) !important; }

/* 9. the view's own bottom padding was sized for a long page ─────────────── */
body[data-mm="1"] .view[data-view="match"]{ padding-bottom: 24px !important; }

/* phones: the desk stacks; the ticket follows the tiles ──────────────────── */
@media (max-width: 640px){
  .view[data-view="match"] .mm-desk-house{ margin-left: 0; flex: 1 1 100%; }
  :root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-stage.is-matched{ grid-template-columns: minmax(0,1fr) !important; }
  :root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-after{ flex-direction: column !important; }
}