/* Moneyness Match — view-to-position flow (figma XS142 · 1053:26292).
   Net-new surface, tab [7]. Uses the app's LIVE TVA-light palette so it
   matches every other view: orange #e07a2e (--tva-or/--accent), ink #1a1410
   (--ink), rules #ede4d8 (--line), Geist display + Geist Mono labels.

   ⚠ LOCAL REVIEW ONLY — DO NOT DEPLOY. Match is under a "stays hidden" hold;
   this file (and the Match tab) ship to moneyness.xyz only on Carlos's direct
   word. If you are reading this file cold: it is not live, by design. */
.view[data-view="match"]{
  --mm-orange: var(--tva-or, #e07a2e);
  --mm-ink:    var(--ink, #1a1410);
  --mm-body:   var(--tva-body, #6b5f55);
  --mm-mut:    var(--ink3, #8a7f74);
  --mm-rule:   var(--line, #ede4d8);
  --mm-peach:  #faf0e4;
  --mm-cream:  #fbf6ee;
  padding: 0;
}

/* The banner strip ("Moneyness Match: turn your view into a position") is GONE —
   removed with its markup on Carlos's call 2026-10-04. Its 56px bottom margin was
   the hero's top spacing, so the hero carries that gap itself now. */
.mm-hero{ margin-top: 56px; }

.mm-hero{ padding: 0; margin-bottom: 22px; }
.mm-eyebrow{
  font-family: var(--mono) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; color: var(--mm-orange); margin-bottom: 6px;
}
.mm-title{
  font-family: var(--geist) !important; font-size: 42px !important; line-height: 50px; font-weight: 500 !important;
  letter-spacing: -1.05px !important; color: var(--mm-ink); margin: 0;
}

/* decision card — a TVA panel, centred */
.view[data-view="match"] .mm-decision{ max-width: none; margin: 0; padding: 28px 30px 32px; }
.mm-card-eyebrow{
  font-family: var(--mono) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; color: var(--mm-orange); margin-bottom: 16px;
}
.mm-card-title{
  font-family: var(--geist) !important; font-size: 26px !important; font-weight: 500 !important; letter-spacing: -0.26px !important;
  color: var(--mm-ink); margin: 0 0 32px;
}

.mm-options{ display: flex; flex-direction: column; gap: 18px; }
.mm-opt{
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 6px 20px; padding: 15px 28px; min-height: 79px;
  background: #FFFEFB; border: 1px solid #E6BE9C; border-radius: 0;
  font: inherit;
  transition: background .12s ease, border-color .12s ease;
}
/* The always-on left rail and the four corner L-brackets: present in EVERY
   tile state, not just hover, despite the design naming them "hover rule". */
.mm-opt::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--mm-orange); z-index: 2; pointer-events: none;
}
.mm-opt.is-active{ background: #F7EFE4; border-color: var(--mm-orange); }
/* Hover lifts the BACKGROUND only. No black anywhere at rest: the frames use a
   thin orange border on every tile, and ink is for text. (Round 1 corrected an
   earlier note here that claimed the black left strip matched 1053:26293.) */


/* ── view-tile hover: grid + scanlines + CRT sweep ──────────────────────────
   700ms ease-in-out in, same out. Fill, border and corners do NOT move; only
   these three overlays. Figma "TVA Match / View tile", 12 variants. */
.mm-fx{ position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
/* Asymmetric on purpose. Arriving should answer the pointer; LEAVING should
   let go slowly — the tile you moved away from recedes rather than snapping
   off, so sliding across the three reads as one continuous surface. */
.mm-fx-grid, .mm-fx-scan{
  position: absolute; inset: 0; opacity: 0;
  will-change: opacity;
  /* LEAVING is linear and long on purpose. These layers sit at 14% and 5% alpha,
     so an eased tail falls under one 8-bit step almost immediately and the fade
     LOOKS finished at a third of its duration — the measured curve was right and
     the perceived one was abrupt. Linear spends the time where it can be seen. */
  transition: opacity 1.9s linear !important;
}
.mm-opt:hover .mm-fx-grid, .mm-opt:hover .mm-fx-scan{
  transition: opacity .8s cubic-bezier(.33,0,.2,1) !important;
}
.mm-fx-grid{
  background-image:
    repeating-linear-gradient(to right, rgba(224,122,46,.14) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(to bottom, transparent 0 18px, rgba(224,122,46,.14) 18px 19px);
  background-position: 0 0, 0 calc(100% - 76px);
  background-repeat: repeat, repeat-x;
  background-size: auto, 100% 76px;
}
.mm-fx-scan{
  background-image: repeating-linear-gradient(to bottom, rgba(224,122,46,.05) 0 1px, transparent 1px 3.4px);
}
/* THE BEAM SWEEPS, IT DOES NOT REWIND. As a transition it reversed on leave and
   travelled back across the tile right-to-left, which reads as a glitch rather
   than a release. An animation runs once per hover and simply stops, so leaving
   takes the beam with it while the grid behind it fades out on its own clock. */
.mm-fx-beam{
  position: absolute; top: 0; bottom: 0; left: 0; width: 140px;
  transform: translateX(-144px);
  will-change: transform;
  background: linear-gradient(to right,
    rgba(224,122,46,0) 0%, rgba(224,122,46,.08) 80%, rgba(224,122,46,.22) 97%, rgba(224,122,46,0) 100%);
  opacity: 0;
  transition: opacity .9s linear;
}
.mm-opt:hover .mm-fx-beam{
  opacity: 1;
  animation: mm-sweep 1.35s cubic-bezier(.33,0,.2,1) forwards;
}
@keyframes mm-sweep{
  from{ transform: translateX(-144px); }
  to  { transform: translateX(654px); }
}
/* the bright leading edge of the beam */
.mm-fx-beam::after{
  content: ""; position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 68px; background: rgba(224,122,46,.70);
}
.mm-opt:hover .mm-fx-grid, .mm-opt:hover .mm-fx-scan{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .mm-fx-grid, .mm-fx-scan{ transition: none !important; }
  .mm-fx-beam{ display: none; }
}
.mm-opt-tag{
  grid-column: 1; font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; color: var(--mm-mut);
}
.mm-opt-title{
  grid-column: 1; font-family: var(--geist) !important; font-size: 24px !important; font-weight: 500 !important;
  color: var(--mm-ink); letter-spacing: -0.4px !important;
}
.mm-opt-choose{
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-family: var(--mono) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; color: var(--mm-orange); white-space: nowrap;
}
.mm-opt-wm{
  display: none;   /* the frames carry no 01/02/03 watermark */
  position: absolute; right: 148px; bottom: -20px; z-index: 0;
  font-family: var(--geist) !important; font-size: 96px !important; font-weight: 700 !important; line-height: 1;
  color: rgba(26, 20, 16, .09); pointer-events: none;
}
.mm-opt > :not(.mm-opt-wm):not(.mm-fx){ position: relative; z-index: 1; }

/* ── stage: choose (centred) → matched (two columns) ──────────────────── */
.mm-stage{ max-width: none; margin: 0; padding: 0; }
.mm-stage.is-matched{
  max-width: none; display: grid;
  grid-template-columns: minmax(0,1fr) 480px; align-items: stretch; gap: 0 20px;
}
.mm-stage.is-matched .mm-decision{
  max-width: none; margin: 0; align-self: stretch; min-height: 440px;
  display: flex; flex-direction: column;
}
/* The PANEL BOX stretches to the ticket so the two bordered columns end on the
   same line — the tiles keep the height the component node gives them. Growing
   the tiles instead made the columns match by distorting the thing being
   matched, which is the wrong half to bend. */
.mm-stage.is-matched .mm-options{ flex: 0 0 auto; display: flex; flex-direction: column; gap: 14px; }

.mm-connector{ display: none; }
.mm-stage.is-matched .mm-connector{ display: none; }

.mm-match{ display: none; }
/* fixed height so the panel does not resize when switching Buy/Sell/Protect
   (their copy differs in length). Button pinned to the bottom. */
.mm-stage.is-matched .mm-match{
  display: flex; flex-direction: column; padding: 26px 30px 30px;
  align-self: stretch; box-sizing: border-box; min-height: 440px;
}
.mm-stage.is-matched .mm-match .mm-continue{ margin-top: auto; }

/* chosen option = solid orange bar with the MY VIEW chip */
.mm-myview{ display: none; }
/* HELD MARKER: the tile whose leg holds the wallet's open position says so,
   in every tile state. Replaces "Choose" on the idle tile; the chosen tile
   already says "My view" and the ticket says "Position active". */
.mm-held{ display: none; }
.mm-opt.is-held .mm-held{
  display: inline-flex; align-items: center; gap: 6px;
  grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap;
  color: var(--live, #2e8b57); border: 1px solid #bfe0cd; background: #FFFEFB;
  font-family: var(--mono) !important;
  font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.55px !important; text-transform: uppercase; padding: 6px 10px;
}
.mm-opt.is-held .mm-opt-choose{ display: none; }
.mm-opt.is-held.is-chosen .mm-held{ display: none; }
.mm-opt.is-chosen{ border-color: var(--mm-orange); }
/* .is-compact is an IDLE tile in the matched layout — it kept the selected
   border, so choosing one view made the other two look chosen too. */
.mm-opt.is-compact{ border-color: #E6BE9C; }
.mm-opt.is-chosen{
  background: #F7EFE4; border: 1px solid var(--mm-orange);
}
.mm-opt.is-chosen .mm-opt-tag{ color: var(--mm-orange); }
.mm-opt.is-chosen .mm-opt-title{ color: var(--mm-ink); }
.mm-opt.is-chosen .mm-opt-choose,
.mm-opt.is-chosen .mm-opt-wm{ display: none; }
.mm-opt.is-chosen .mm-myview{
  display: inline-flex; align-items: center; gap: 6px;
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  background: var(--mm-orange); color: #FFFEFB; border: 1px solid var(--mm-orange);
  font-family: var(--mono) !important;
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.55px !important; text-transform: uppercase; padding: 7px 13px;
}

/* the two non-chosen options collapse to compact rows */
.mm-opt.is-compact{ min-height: 62px; padding: 13px 28px; background: #FFFEFB; }
.mm-opt.is-compact .mm-opt-title{ font-size: 20px !important; }
.mm-opt.is-compact .mm-opt-wm{ display: none; }
.mm-opt.is-compact .mm-opt-choose{ font-size: 10px !important; color: var(--mm-mut); align-self: end; }

/* ── the match panel (right column, filled by match.js) ───────────────── */
.mm-match-eyebrow{
  display: inline-block; align-self: flex-start; background: var(--mm-orange); color: #fff;
  font-family: var(--mono) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; padding: 4px 10px; margin-bottom: 18px;
}
.mm-match-title{
  font-family: var(--geist) !important; font-size: 28px !important; font-weight: 400 !important; letter-spacing: -0.56px !important;
  color: var(--mm-ink); margin: 0 0 8px;
}

.mm-boxes{ display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--mm-rule); margin-bottom: 22px; }
.mm-box{ padding: 14px 16px; }
.mm-box + .mm-box{ border-left: 1px solid var(--mm-rule); }
.mm-box-k{ font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important; text-transform: uppercase; color: var(--mm-mut); margin-bottom: 8px; }
.mm-box-v{ font-family: var(--mono) !important; font-size: 22px !important; color: var(--mm-ink); }

.mm-stats{ display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 24px; }
.mm-stat-k{ font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important; text-transform: uppercase; color: var(--mm-mut); margin-bottom: 6px; }
.mm-stat-v{ font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important; text-transform: uppercase; color: var(--mm-ink); }

.mm-continue{
  display: block; width: 100%; background: var(--mm-orange); color: #fff; border: 0;
  padding: 16px; font-family: var(--sans) !important; font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: .6px !important; text-transform: uppercase; cursor: pointer; transition: background .12s ease;
}
.mm-continue:hover{ background: var(--tva-or-d, #a9521a); }

/* ── fund modal (connect / choose / edit / insufficient) ──────────────── */
.mm-modal-veil{ position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(255, 254, 251, .78); padding: 20px; }
.mm-modal-veil[hidden]{ display: none; }
.mm-modal.panel{ width: 480px; max-width: 100%; background: #fff !important;
  border: 1px solid var(--mm-orange) !important; border-radius: 0 !important; padding: 28px 30px 24px; }

.mm-modal-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mm-modal-eyebrow{ font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important; text-transform: uppercase; color: var(--mm-mut); }
.mm-modal-x{ background: none; border: 0; font-size: 15px !important; line-height: 1; color: var(--mm-mut); cursor: pointer; padding: 4px; }
.mm-modal-x:hover{ color: var(--mm-ink); }
.mm-modal-title{ font-family: var(--geist) !important; font-size: 26px !important; font-weight: 500 !important; letter-spacing: -.6px !important; color: var(--mm-ink); margin: 0 0 6px; }
.mm-modal-sub{ font-family: var(--sans) !important; font-size: 14px !important; color: var(--mm-body); margin: 0 0 22px; }

.mm-rows{ margin-bottom: 18px; }
.mm-row{ display: flex; align-items: center; justify-content: space-between; padding: 9px 0; }
.mm-row-k{ font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important; text-transform: uppercase; color: var(--mm-mut); }
.mm-row-v{ font-family: var(--mono) !important; font-size: 14px !important; color: var(--mm-ink); }
.mm-modal-rule{ border: 0; border-top: 1px solid var(--mm-rule); margin: 4px 0 16px; }

.mm-amount-input{ font-family: var(--mono) !important; font-size: 14px !important; color: var(--mm-ink); text-align: right;
  width: 130px; background: none; border: 0; border-bottom: 1px solid var(--mm-orange); padding: 2px 0; }
.mm-amount-input:focus{ outline: none; }
.mm-quickpick{ background: none; border: 0; font-family: var(--mono) !important; font-size: 14px !important; color: var(--mm-orange); cursor: pointer; padding: 0; }
.mm-quickpick:hover{ text-decoration: underline; }

.mm-sum{ display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 20px; }
.mm-sum-cell + .mm-sum-cell{ border-left: 1px solid var(--mm-rule); padding-left: 18px; }
.mm-sum-k{ font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important; text-transform: uppercase; color: var(--mm-orange); margin-bottom: 8px; }
.mm-sum-v{ font-family: var(--mono) !important; font-size: 22px !important; color: var(--mm-ink); }

/* The amount is a field, not a row: AVAILABLE rides inside it top-right and the
   quick picks are a strip along its bottom edge. Orange edge while focused. */
.mm-amountbox{ border: 1px solid var(--mm-rule); padding: 12px 14px 0; margin-bottom: 16px; }
.mm-amountbox.is-edit{ border-color: var(--mm-orange); }
.mm-ab-head{ display: flex; align-items: center; justify-content: space-between; }
.mm-ab-k, .mm-ab-avail, .mm-ab-pk, .mm-ab-min{ font-family: var(--mono) !important; font-size: 11px !important;
  letter-spacing: 0.55px !important; text-transform: uppercase; color: var(--mm-mut); }
.mm-ab-avail, .mm-ab-min{ opacity: .62; }
.mm-ab-main{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 12px; }
.mm-ab-input{ flex: 1 1 auto; min-width: 0; background: none; border: 0; padding: 0; text-align: left;
  font-family: var(--geist) !important; font-size: 30px !important; font-weight: 500 !important;
  letter-spacing: -.6px !important; color: var(--mm-ink); }
/* The focus ring belongs on the field, not inside it: a default outline on the
   input draws a second rectangle within the amount box. The box takes the
   affordance so keyboard focus stays visible. */
.mm-amountbox:focus-within{ border-color: var(--mm-orange); }
.mm-amountbox .mm-ab-input:focus,
.mm-amountbox .mm-ab-input:focus-visible{ outline: none !important; }
.mm-ab-token{ display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.mm-ab-token .mk{ display: block; }
.mm-ab-tokname{ font-family: var(--mono) !important; font-size: 12px !important; color: var(--mm-ink); }
.mm-ab-picks{ display: flex; align-items: center; gap: 10px; border-top: 1px dashed var(--mm-rule); padding: 9px 0; }
.mm-ab-pv{ font-family: var(--mono) !important; font-size: 12px !important; color: var(--mm-mut); }

.mm-cols{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  border-top: 1px solid var(--mm-rule); padding-top: 14px; margin-bottom: 20px; }
.mm-col-k{ font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; color: var(--mm-mut); margin-bottom: 6px; }
.mm-col-v{ font-family: var(--mono) !important; font-size: 13px !important; letter-spacing: .4px !important; color: var(--mm-ink); text-transform: uppercase; }

/* Review: the two outcomes sit ABOVE the details, and the details are a grid
   of three columns over two rows rather than a vertical list. */
.mm-outcomes{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.mm-outcome{ border: 1px solid var(--mm-rule); padding: 10px 12px; }
.mm-outcome-k{ font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; color: var(--mm-mut); margin-bottom: 6px; }
.mm-outcome-v{ font-family: var(--sans) !important; font-size: 13px !important; line-height: 1.45; color: var(--mm-ink); }
.mm-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; margin-bottom: 20px; }
.mm-grid-k{ font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; color: var(--mm-mut); margin-bottom: 6px; }
.mm-grid-v{ font-family: var(--mono) !important; font-size: 12px !important; line-height: 1.4; color: var(--mm-ink); text-transform: uppercase; }
.mm-grid-cell:nth-child(n+4){ border-top: 1px dashed var(--mm-rule); padding-top: 12px; }

.mm-modal-cta{ display: block; width: 100%; background: var(--mm-orange); color: #fff; border: 0;
  padding: 15px; font-family: var(--sans) !important; font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: .6px; text-transform: uppercase; cursor: pointer; margin-bottom: 10px; }
.mm-modal-cta:hover{ background: var(--tva-or-d, #a9521a); }
.mm-modal-cta.is-error{ background: #e2a877; cursor: not-allowed; }
.mm-modal-link{ display: block; width: 100%; background: none; border: 0; font-family: var(--sans) !important;
  font-size: 14px !important; font-weight: 400 !important; color: var(--mm-mut); cursor: pointer; padding: 6px; margin-bottom: 8px; }
.mm-modal-link:hover{ color: var(--mm-orange); }
.mm-modal-note{ text-align: center; font-family: var(--sans) !important; font-size: 13px !important; color: var(--mm-mut); }
.mm-modal-note.is-error{ color: var(--neg, #b42318); }

/* ── confirm: callout + in-progress CTA ─────────────────────────────── */
.mm-callout{ background: var(--mm-peach); padding: 12px 14px; margin: 0 0 16px; }
.mm-callout-k{ font-family: var(--mono) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; color: var(--mm-orange); margin-bottom: 6px; }
.mm-callout-v{ font-family: var(--sans) !important; font-size: 13px !important; line-height: 1.35; color: var(--mm-body); }
.mm-callout-bar{ height: 3px; margin-top: 10px; background: #ecd9c4; overflow: hidden; }
.mm-callout-bar::after{ content: ""; display: block; height: 100%; width: 40%; background: var(--mm-orange);
  animation: mm-quote 1.1s ease-in-out infinite; }
@keyframes mm-quote{ 0%{ margin-left: -40%; } 100%{ margin-left: 100%; } }
.mm-modal-cta.is-progress{ background: #e2a877; cursor: default; pointer-events: none; }
@media (prefers-reduced-motion: reduce){
  .mm-callout-bar::after{ animation: none; width: 100%; }
}

/* ── after matching: status button, tracker + proof cards ───────────── */
.mm-panel-status{ width: 100%; text-align: center; padding: 16px; font-family: var(--sans) !important;
  font-weight: 600 !important; font-size: 15px !important; color: var(--live, #2e8b57); background: #dcefe2; border: 0; }
.mm-after{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter, 24px); margin-top: 12px; align-items: stretch; }
.mm-after[hidden]{ display: none; }
@media (max-width: 1080px){ .mm-after{ grid-template-columns: 1fr; } }
.mm-card-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mm-sec-k{ font-family: var(--mono) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; color: var(--mm-orange); }
.mm-badge{ font-family: var(--mono) !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: .6px !important;
  text-transform: uppercase; color: var(--mm-mut); border: 1px solid var(--mm-rule, #ede4d8); padding: 3px 8px; }
.mm-badge.is-live{ color: var(--live, #2e8b57); border-color: #bfe0cd; }
.mm-after-title{ font-family: var(--geist) !important; font-size: 24px !important; font-weight: 500 !important;
  letter-spacing: -.5px !important; color: var(--mm-ink); margin: 0 0 8px; }
.mm-after-sub{ font-family: var(--sans) !important; font-size: 14px !important; color: var(--mm-body); margin: 0 0 18px; }
.mm-poscard{ border: 1px solid var(--mm-rule, #ede4d8); background: var(--mm-cream); padding: 16px; }
.mm-pos-top{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mm-pos-lhs{ display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mm-pos-dot{ width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50% !important; background: var(--live, #2e8b57); }
.mm-pos-dot.is-warn{ background: var(--mm-orange); }
.mm-pos-dot.is-done{ border-radius: 0 !important; background: var(--mm-ink); }
.mm-pos-status{ font-family: var(--mono) !important; font-size: 12px !important; font-weight: 600 !important; color: var(--mm-ink); }
.mm-pos-meta{ font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important; color: var(--mm-mut); }
.mm-pos-right{ font-family: var(--mono) !important; font-size: 12px !important; color: var(--mm-ink); white-space: nowrap; }
.mm-pos-bar{ height: 3px; margin: 10px 0 12px; background: #ecd9c4; }
.mm-pos-bar i{ display: block; height: 100%; background: var(--mm-orange); transition: width 1s linear; }
.mm-pos-line{ display: flex; justify-content: space-between; font-family: var(--mono) !important;
  font-size: 11px !important; letter-spacing: 0.55px !important; text-transform: uppercase; color: var(--mm-mut); margin-bottom: 14px; }
.mm-pos-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.mm-pos-k{ font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; color: var(--mm-mut); margin-bottom: 6px; }
.mm-pos-v{ font-family: var(--mono) !important; font-size: 15px !important; color: var(--mm-ink); margin-bottom: 4px; }
.mm-pos-note{ font-family: var(--sans) !important; font-size: 12px !important; color: var(--mm-body); }
.mm-feed-head, .mm-feed-row{ display: grid; grid-template-columns: 1fr 1.6fr 1fr 1fr; gap: 10px; }
.mm-feed-head{ font-family: var(--mono) !important; font-size: 9px !important; letter-spacing: .6px !important; text-transform: uppercase;
  color: var(--mm-mut); padding-bottom: 8px; border-bottom: 1px solid var(--mm-rule, #ede4d8); }
.mm-feed-row{ padding: 12px 0; border-bottom: 1px solid var(--mm-rule, #ede4d8); }
.mm-feed-row.is-data span{ font-family: var(--mono) !important; font-size: 11px !important; color: var(--mm-ink);
  align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* source separator inside the proof table: same voice as the column head */
.mm-feed-src{ font-family: var(--mono) !important; font-size: 9px !important; letter-spacing: .6px !important;
  text-transform: uppercase; color: var(--mm-mut); padding: 12px 0 2px; }

/* TYPE, MEASURED OFF THE NODES — and defended.
   density.css (`:root:root body …`, 0,2,2 + !important) and instrument.css
   (`body h1,h2,h3`) outrank a bare component class, so the card title came out
   w500/lh1.25 no matter what .mm-match-title asked for. Same family as the
   instrument.css trap: always check computed-vs-declared before adding more
   !important. These selectors are scoped to the Match view and win outright. */
:root:root body .view[data-view="match"] .mm-title{
  font-size: 42px !important; font-weight: 500 !important;
  letter-spacing: -1.05px !important; line-height: 50px !important;
}
:root:root body .view[data-view="match"] .mm-card-title{
  font-size: 26px !important; font-weight: 500 !important; letter-spacing: -0.26px !important;
}
:root:root body .view[data-view="match"] .mm-match-title{
  font-size: 28px !important; font-weight: 400 !important; letter-spacing: -0.56px !important;
}

/* B01 MATCHING — the ticket skeleton while the engine matches the view.
   Timings are app-landing's get_motion_context export off node 1387:17, not
   invented: 5 bars, 2s linear loop, opacity .22->1->.22, staggered +120ms.
   The design's "auto 0.8s" is a PROTOTYPE affordance; here the skeleton is bound
   to the real quote being in flight, because a fixed timer would advance the
   screen on a clock instead of on what actually happened. */
@keyframes mm-shimmer { 0%{opacity:.22} 7%{opacity:1} 28%{opacity:.22} 100%{opacity:.22} }
@keyframes mm-live-blink { 0%{opacity:1} 45%{opacity:.4} 90%{opacity:1} 100%{opacity:1} }

.mm-skel{ display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; justify-content: space-between; }
.mm-skel-bar{
  height: 14px; background: var(--mm-rule, #ede4d8);
  animation: mm-shimmer 2s linear infinite;
}
/* nth-OF-TYPE, not nth-child: .mm-skel-head is the first child, so nth-child
   shifted every bar by one and left the fifth with no delay at all. */
.mm-skel-bar:nth-of-type(1){ width: 46%; animation-delay: 0s; }
.mm-skel-bar:nth-of-type(2){ width: 78%; animation-delay: .12s; }
.mm-skel-bar:nth-of-type(3){ width: 62%; animation-delay: .24s; }
.mm-skel-bar:nth-of-type(4){ width: 88%; animation-delay: .36s; }
.mm-skel-bar:nth-of-type(5){ width: 54%; animation-delay: .48s; }
.mm-skel-head{ height: 28px; width: 58%; background: var(--mm-rule, #ede4d8);
  animation: mm-shimmer 2s linear infinite; margin-bottom: 6px; }
.mm-live{ animation: mm-live-blink 2s ease-in-out infinite; }
.mm-skel-note{
  font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; color: var(--mm-mut); margin-top: 18px;
}
@media (prefers-reduced-motion: reduce){
  .mm-skel-bar, .mm-skel-head, .mm-live{ animation: none !important; }
  .mm-skel-bar, .mm-skel-head{ opacity: .5; }
}

/* B03 positions panel */
.mm-pos-panel{ border: 1px solid var(--mm-rule); padding: 20px 22px; margin-top: 22px; }
.mm-emptybox{ border: 1px dashed var(--mm-rule); padding: 14px 16px; margin-top: 16px; }
.mm-continue.is-locked{ opacity: .55; cursor: default; }

/* TOASTS — timings from app-landing's prototype map: enter 280ms,
   auto-dismiss after 4s, pending pulse 500ms. Bound to real state only:
   a toast is raised by something that actually happened, never decoratively. */
@keyframes mm-toast-in { from{ opacity:0; transform: translateY(10px) } to{ opacity:1; transform:none } }
@keyframes mm-toast-out{ from{ opacity:1 } to{ opacity:0; transform: translateY(6px) } }
@keyframes mm-toast-pulse{ 0%{opacity:1} 50%{opacity:.55} 100%{opacity:1} }

.mm-toasts{
  position: fixed; right: 20px; bottom: 56px; z-index: 60;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.mm-toast{
  min-width: 300px; max-width: 420px; background: var(--mm-card, #fff);
  border: 1px solid var(--mm-rule, #ede4d8); border-left: 3px solid var(--mm-mut, #8a7f74);
  padding: 12px 14px; animation: mm-toast-in 280ms ease-out both;
  box-shadow: 0 6px 20px rgba(26,20,16,.08); pointer-events: auto;
}
.mm-toast.is-out{ animation: mm-toast-out 200ms ease-in both; }
.mm-toast.is-success{ border-left-color: var(--live, #2e8b57); }
.mm-toast.is-pending{ border-left-color: var(--mm-orange, #e07a2e); }
.mm-toast.is-failed { border-left-color: var(--neg, #b42318); }
.mm-toast.is-warning{ border-left-color: var(--mm-orange, #e07a2e); }
.mm-toast.is-pending .mm-toast-k{ animation: mm-toast-pulse 500ms ease-in-out infinite; }
.mm-toast-k{
  font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; color: var(--mm-mut); margin-bottom: 4px;
}
.mm-toast-v{ font-family: var(--geist) !important; font-size: 12px !important; color: var(--mm-ink); }
@media (prefers-reduced-motion: reduce){
  .mm-toast, .mm-toast.is-out, .mm-toast.is-pending .mm-toast-k{ animation: none !important; }
}

.mm-hero-sub{
  font-family: var(--geist) !important; font-size: 12px !important; color: var(--mm-body);
  margin: 6px 0 0; max-width: 62ch;
}

/* ROUND-1 findings 3, 5, 6 — container treatment the type pass never touched.
   Spec card token: 1px orange border + 14x2 corner brackets + soft warm shadow. */
.view[data-view="match"] .mm-decision,
.view[data-view="match"] .mm-match{
  border: 1px solid var(--mm-orange) !important;
  box-shadow: 0 8px 28px rgba(26,20,16,.06);
  position: relative;
}
/* corner brackets, 14x2 */
.view[data-view="match"] .mm-decision::before,
.view[data-view="match"] .mm-decision::after,
.view[data-view="match"] .mm-match::before,
.view[data-view="match"] .mm-match::after{
  content: ""; position: absolute; width: 14px; height: 2px; background: var(--mm-orange);
}
.view[data-view="match"] .mm-decision::before,
.view[data-view="match"] .mm-match::before{ top: -1px; left: -1px; }
.view[data-view="match"] .mm-decision::after,
.view[data-view="match"] .mm-match::after{ bottom: -1px; right: -1px; }

/* F2 — payoff strip. Horizontal orange band with the quoted target marked. */
.mm-payoff{ margin: 20px 0 0; }
.mm-payoff-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.mm-payoff-k{
  font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; color: var(--mm-ink);
}
.mm-payoff-note{
  font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; color: var(--mm-mut);
}
.mm-payoff-bar{
  position: relative; height: 8px; background: var(--tva-tab, #f7efe4);
  border: 1px solid var(--mm-orange);
}
.mm-payoff-fill{
  position: absolute; left: 0; top: 0; bottom: 0; width: 50%;
  background: var(--mm-orange); opacity: .28;
}
.mm-payoff-mark{
  position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px;
  background: var(--mm-orange); transform: translateX(-1px);
}
.mm-payoff-labels{
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.55px !important;
  text-transform: uppercase; color: var(--mm-mut);
}
.mm-payoff-mid{ color: var(--mm-ink); }
:root:root body .view[data-view="match"] .mm-payoff-labels,
:root:root body .view[data-view="match"] .mm-payoff-labels span{
  font-family: var(--mono) !important; font-size: 11px !important;
  letter-spacing: 0.55px !important; text-transform: uppercase;
}

/* R3 #3 — corner brackets on all FOUR corners of the ticket and the panel.
   The earlier pair only marked top-left and bottom-right, which reads as absent. */
.view[data-view="match"] .mm-decision > .mm-br,
.view[data-view="match"] .mm-match > .mm-br{
  position: absolute; width: 14px; height: 2px; background: var(--mm-orange); pointer-events: none;
}
.view[data-view="match"] .mm-br.tl{ top: -1px; left: -1px; }
.view[data-view="match"] .mm-br.tr{ top: -1px; right: -1px; }
.view[data-view="match"] .mm-br.bl{ bottom: -1px; left: -1px; }
.view[data-view="match"] .mm-br.br{ bottom: -1px; right: -1px; }
/* the positions card is its own card, spaced below the ticket */
.view[data-view="match"] .mm-pos-panel{ margin-top: 22px; }

/* B02/B04 — modals carry the same card token as the ticket: 1px orange border
   plus 14x2 brackets on all four corners. The border already existed; the
   brackets did not, so the modal and the ticket read as different components. */
.view[data-view="match"] .mm-modal{ position: relative; }
.view[data-view="match"] .mm-modal > .mm-br{
  position: absolute; width: 14px; height: 2px; background: var(--mm-orange); pointer-events: none;
}

/* CHOOSE PANEL ENCLOSURE — reopened finding 5.
   My earlier rule lost silently. tva-light.css carries
     :root:root:root:root:root:root:root:root body section.panel { border:0 !important }
   which is specificity 0,8,2 and beats `.view[data-view="match"] .mm-decision`
   (0,3,0). The ticket escaped only because it is not a section.panel. Matching
   that selector's weight plus one class is the smallest change that actually
   wins; the alternative is editing a shared sheet every other view depends on. */
:root:root:root:root:root:root:root:root body section.panel.mm-decision{
  border: 1px solid var(--mm-orange) !important;
  box-shadow: 0 8px 28px rgba(26, 20, 16, .06) !important;
}

/* panel top-right mark: two small squares ("squares" frame on the node) */
.mm-sq{ position: absolute; top: 14px; right: 16px; display: flex; gap: 3px; z-index: 2; }
.mm-sq i{ width: 5px; height: 5px; background: var(--mm-orange); display: block; }

/* header wallet button — Match only; 650ms hover, 240ms press per the motion
   table. Cream pill, orange rule, sharp corners and four corner brackets: the
   same frame language the tiles and cards use, so it reads as part of the set. */
.mm-wallet{
  display: none; position: relative; box-sizing: border-box;
  min-width: 176px; height: 36px; padding: 0 14px;
  font-family: var(--mono) !important; font-size: 11px !important;
  letter-spacing: .05em; text-transform: uppercase; color: var(--mm-orange);
  background: #FFFEFB; border: 1px solid var(--mm-orange); border-radius: 0 !important;
  cursor: pointer; white-space: nowrap;
  transition: background .65s cubic-bezier(.42,0,.58,1), color .65s cubic-bezier(.42,0,.58,1);
}
body[data-mm="1"] .mm-wallet{ display: inline-flex; align-items: center; justify-content: center; }
/* The header button lives OUTSIDE .view[data-view="match"], where --mm-orange is
   not defined — so `var(--mm-orange)` was invalid at computed-value time and took
   the whole `border` shorthand with it: measured border-top-width 0px and
   box-shadow none, i.e. the corner marks never drew. Same trap as the footer
   bracket. The token is declared locally here so every rule below resolves. */
.mm-wallet{ --mm-orange: var(--tva-or, #e07a2e); }
.mm-wallet::before, .mm-wallet::after{
  content: ""; position: absolute; width: 6px; height: 6px; pointer-events: none;
  border: 0 solid var(--mm-orange);
}
.mm-wallet::before{ left: 2px; top: 2px; border-left-width: 2px; border-top-width: 2px;
  box-shadow: 162px 0 0 -4px var(--mm-orange); }
.mm-wallet::after{ right: 2px; bottom: 2px; border-right-width: 2px; border-bottom-width: 2px; }
.mm-wallet:hover{ background: var(--mm-orange); color: #fffefb; }
.mm-wallet:active{ transition-duration: .24s; }
@media (prefers-reduced-motion: reduce){ .mm-wallet{ transition: none; } }

/* density.css forces 4px on every button at :root x6; the design's tiles are
   sharp, so this restates it at matching weight rather than loosening theirs. */
:root:root:root:root:root:root:root:root body .view[data-view="match"] button.mm-opt{
  border-radius: 0 !important;
}

/* THE BOTTOM-RIGHT CORNER IS THE FOOTER'S. Both first-load overlays pin
   themselves to right:16px bottom:16px, which is exactly where the byline chip
   and the page's bottom-right registration mark live — on arrival they covered
   both. They already stack against each other; this lifts the pair clear of the
   footer so the frame's own corner survives a first visit. The tour keeps its
   own offset from the notice (html.m-has-notice .ob), so raising the base here
   moves both together. */
body[data-mm="1"] > [role="status"]{ bottom: 86px !important; }
body[data-mm="1"] .ob{ bottom: 86px !important; }
html.m-has-notice body[data-mm="1"] .ob{ bottom: calc(102px + var(--m-notice-h, 86px)) !important; }

/* tile type, read off the component node's default variant */
.view[data-view="match"] .mm-opt .mm-opt-title{
  font-size: 22px !important; letter-spacing: 0 !important; line-height: 29px !important; font-weight: 500 !important;
}
.view[data-view="match"] .mm-opt .mm-opt-tag{ font-weight: 500 !important; line-height: 14px !important; }
.view[data-view="match"] .mm-opt .mm-opt-choose{ font-size: 10px !important; font-weight: 500 !important; }

/* density.css styles every button at :root x6 — it won the border colour and the
   radius here exactly as it did on the tiles. Restated at matching weight. */
:root:root:root:root:root:root:root:root body .mm-wallet{
  border: 1px solid #E07A2E !important; border-radius: 0 !important;
  background: #FFFEFB !important; color: #E07A2E !important;
  min-width: 176px !important; height: 36px !important; padding: 0 14px !important;
}
:root:root:root:root:root:root:root:root body .mm-wallet:hover{
  background: #E07A2E !important; color: #FFFEFB !important;
}

/* the two lower cards carry the same frame as the panel above them */
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-after .mm-card{
  border: 1px solid #E6BE9C !important; background: #FFFEFB !important; border-radius: 0 !important;
  padding: 26px 28px 28px !important; position: relative !important;
}
.mm-empty-k{ font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: .05em;
  text-transform: uppercase; color: var(--mm-mut); margin-bottom: 8px; }
.mm-empty-v{ font-family: var(--sans) !important; font-size: 14px !important; color: var(--mm-body); line-height: 1.5; }

/* ── THE PAGE'S GEOMETRY, DECLARED ONCE ────────────────────────────────────
   Everything below derives from these. They were hardcoded in four places as
   70 / 1300 / 1370 / 49 — numbers I had read off a screenshot, which means the
   next person to change the frame silently breaks the footer and the card row
   and finds out from a bug report. --measure already existed as "the page's
   real width"; the inset is simply what is left over. */
body[data-mm="1"]{
  --mm-measure: var(--measure, 1300px);
  --mm-inset: calc((100vw - var(--mm-measure)) / 2);
}

/* THE SHELL IS A FIXED-VIEWPORT APP: body is overflow:hidden at 100vh and .stage
   is the internal scroll region. Every other view is a dashboard that fits that
   shape. Match is a COMPOSITION — banner, hero, panel, two cards, footer — and
   at 1440x1108 its content runs past the stage, so the lower cards were clipped
   and the footer sat on top of them. Scoped to this view so no other surface
   changes: the document scrolls, and the pieces size to their content. */
body[data-mm="1"]{ overflow: auto !important; height: auto !important; min-height: 100vh !important; min-height: 100dvh !important;
  /* the frame override below positions against the body; the bottom padding is
     13px frame inset + the byline's clearance above the frame's bottom line.
     The Figma says 18px of clearance — Carlos wants the footer LOWER than the
     design, so this is 8px BY HIS CALL (2026-10-04), a recorded taste override
     and not a drift. Tightened again on his call to 3px ("still a small gap").
     It cannot go to 0: the byline must stay inside the frame or the corner
     doubles again. */
  position: relative !important; padding-bottom: 16px !important; }
body[data-mm="1"] .app{ height: auto !important; min-height: 0 !important; }
body[data-mm="1"] .stage{ height: auto !important; overflow: visible !important; }
body[data-mm="1"] .view[data-view="match"]{ padding-bottom: 40px; }

/* THE REGISTRATION FRAME FOLLOWS THE SCROLL MODEL. tva-light.css:85 draws it
   position:FIXED at inset 13px — correct on every dashboard view, where the body
   never scrolls and the viewport IS the page. In this shell mode the body is the
   scroll container, so a viewport-fixed frame stays glued to the glass while the
   page moves under it: its bottom brackets landed mid-content and crowded the
   byline at whatever offset you were scrolled to — seen three times as "two
   frames" / "the bottom doesn't match" / "brackets floating mid-page". One cause.
   Here the frame rides the DOCUMENT: absolute against the positioned body, same
   13px inset, so the bottom-right corner sits below and right of the byline and
   wraps it, on every scroll position. */
:root:root:root:root:root:root:root:root body[data-mm="1"]::after{
  position: absolute !important;
}

/* THE SHARED BYLINE CHIP IS NOT OWNED HERE AT ALL. tva-light.css:1359-1365 draws
   it (orange-10% fill, 1px orange-70% LEFT border, 260x48) and body::after draws
   the page's registration frame, whose FOUR corner brackets are already 22x4 +
   4x22 — including the bottom-right one that lands on this chip. A bracket added
   here stacked a second identical mark on top of the frame's, which is the
   "two frames on the byline" Carlos saw. The corner belongs to the frame. */

/* align-items:stretch is being lost to a more specific panel rule, so the row
   height is stated directly: in a grid row both items resolve 100% to the row,
   which is the ticket's height. */
:root:root:root:root:root:root:root:root body .mm-stage.is-matched > .mm-decision,
:root:root:root:root:root:root:root:root body .mm-stage.is-matched > .mm-match{
  height: 100% !important; align-self: stretch !important;
}

/* ── app-landing's systemic findings ────────────────────────────────────────

   S1. The modals had lost the frame language the doc gives cards: 1px orange,
   four corner brackets, a warm shadow. The .panel rule was overriding the
   border to #EDE4D8 and killing the shadow — the same override family that ate
   the tile corners and the wallet pill, three times now. */
:root:root:root:root:root:root:root:root body .mm-modal.mm-modal.panel{
  border: 1px solid #E07A2E !important; border-radius: 0 !important;
  box-shadow: 0 10px 34px rgba(26,20,16,.10) !important;
}
/* the four 14x2 brackets, drawn rather than added to the DOM so no markup moves */
.mm-modal.panel::before, .mm-modal.panel::after{
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 0 solid #E07A2E;
}
.mm-modal.panel{ position: relative; }
.mm-modal.panel::before{
  left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px;
  box-shadow: 453px 0 0 -12px #E07A2E;
}
.mm-modal.panel::after{
  right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px;
  box-shadow: -453px 0 0 -12px #E07A2E;
}

/* S2. The modal eyebrow is a filled orange chip with cream text, not plain mono. */
:root:root:root:root:root:root:root:root body .mm-modal .mm-modal-eyebrow{
  display: inline-block; background: #E07A2E !important; color: #FFFEFB !important;
  padding: 4px 9px !important; letter-spacing: .06em !important; font-weight: 500 !important;
}

/* hero rhythm: 6 eyebrow->title, 6 title->subline, 22 subline->panel */
.view[data-view="match"] .mm-title{ margin-bottom: 0 !important; }
.view[data-view="match"] .mm-hero-sub{ margin-top: 6px !important; margin-bottom: 0 !important; }

/* 1. "Position active" is a STATE, not an action. Orange is the action colour and
      the only filled button colour; an active position is the doc's success
      green — the after-card badge already uses it, the ticket button did not. */
:root:root:root:root:root:root:root:root body .mm-continue.is-active-state{
  background: rgba(46,139,87,.12) !important; color: #2E8B57 !important;
  border: 1px solid #2E8B57 !important;
}
:root:root:root:root:root:root:root:root body .mm-continue.is-active-state:hover{
  background: rgba(46,139,87,.12) !important;
}

/* THE FOOTER IS UNIVERSAL CHROME AND MUST NOT MOVE PER VIEW. There was a
   Match-only override here boxing .foot-bar to var(--mm-inset) so the byline chip
   sat inside the orange frame. It worked and it was wrong: the footer then sat at
   1300px wide on Match and 1440 everywhere else, so the whole bar shifted and the
   text re-centred the moment you opened Match. A chip near the frame edge is a
   smaller problem than a footer that moves between pages. No per-view footer
   geometry lives in this file. */

/* The STAGE reserves the tallest leg's height (--mm-matched-h, grown in JS) so
   the sections below never jump when you switch legs. The PANELS hug their own
   content and top-align, so each bracket frame is tight — the leftover sits below
   the panels as neutral spacing, not as empty space inside the frame. */
:root:root:root:root:root:root:root:root body .mm-stage.is-matched{
  align-items: start !important; align-content: start !important;
  min-height: var(--mm-matched-h, 490px) !important;
}
:root:root:root:root:root:root:root:root body .mm-stage.is-matched > .mm-decision,
:root:root:root:root:root:root:root:root body .mm-stage.is-matched > .mm-match{
  height: auto !important;
  align-self: start !important;
}
/* no nested scrollbar: the shared matched height is grown in JS (equalizeMatched)
   to the tallest leg's content, so the ticket never needs to clip. Visible, not
   auto — a fixed-height box that fits its content has nothing to scroll, and the
   earlier auto produced a 1px scrollbar on the leg that happened to be tallest. */
:root:root:root:root:root:root:root:root body .mm-stage.is-matched > .mm-match{
  overflow: visible !important;
}

/* the link's own margin is tva-light.css:1374's (0.3em). Not contested here:
   zeroing it from this file is what made "by" and the name collide once the text
   and link became one inline item. */

/* 2. the lower cards must share the panel's column: the row ended 55px short of
      the panel's right edge, so the three blocks did not line up. */
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-after{
  width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
}
/* The ROW was already the panel's width; the CARDS inside it were 520 in a 575
   cell, so the pair ended 55px short of the column above them. They fill their
   cells now, which lines all three blocks up on the same two edges. */
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-after > *{
  width: 100% !important; max-width: none !important;
  margin-left: 0 !important; margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* The lower row and the stage above it share one gutter, so the centre line of
   the page is the same in both. It was 105px below and 20px above — visibly
   different columns. */
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-after{
  gap: 12px 20px !important;
}

/* wallet picker (EIP-6963): one row per installed wallet — icon, name, and a
   "Detected" tag — the stormbit-app connect modal's shape in the tile idiom. */
.mm-pick{ display: flex; flex-direction: column; gap: 10px; margin: 18px 0 6px; }
.mm-pick-item{
  font: inherit; text-align: left; cursor: pointer; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  background: #FFFEFB; border: 1px solid #E6BE9C; border-radius: 0;
  color: var(--mm-ink, #1a1410); font-weight: 500;
  transition: background .12s ease, border-color .12s ease;
}
.mm-pick-item:hover{ background: #F7EFE4; border-color: var(--tva-or, #e07a2e); }
.mm-pick-icon{ width: 24px; height: 24px; flex: 0 0 auto; display: block; }
.mm-pick-icon.is-blank{ background: #F7EFE4; border: 1px solid #E6BE9C; }
.mm-pick-name{ flex: 1 1 auto; font-size: 15px; }
.mm-pick-tag{
  font-family: var(--mono) !important; font-size: 10px !important; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--tva-or, #e07a2e);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE (≤640px) — ADDITIVE. Every rule is inside this media query, so the
   desktop cascade is byte-for-byte unchanged. Scoped to the Match view. The
   three view cards become a horizontal scroll-snap deck you swipe (native, no
   JS); the shared ticket, modals and proof render below. Overrides carry the
   :root×8 prefix only where they must beat the equally-prefixed winners
   (stage min-height 746, matched grid 153, modal frame 694).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .view[data-view="match"]{ --mm-inset: 16px; }
  .view[data-view="match"] .mm-decision{ padding: 18px 16px !important; }

  /* kill the desktop min-height + 2-col matched grid that squeeze the column */
  :root:root:root:root:root:root:root:root body .mm-stage,
  :root:root:root:root:root:root:root:root body .mm-stage.is-matched{
    display: block !important; min-height: 0 !important; grid-template-columns: 1fr !important;
  }
  :root:root:root:root:root:root:root:root body .mm-stage.is-matched > .mm-decision,
  :root:root:root:root:root:root:root:root body .mm-stage.is-matched > .mm-match{
    height: auto !important; min-height: 0 !important; width: 100% !important; max-width: 100% !important;
    margin: 0 0 16px !important; align-self: start !important;
  }

  /* THE SWIPE DECK — the view picker scrolls horizontally, one card per screen */
  .view[data-view="match"] .mm-options,
  .mm-stage .mm-options{
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    gap: 12px !important; overflow-x: auto !important; overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important;
    scroll-padding-left: 2px; margin: 0 !important; padding: 2px 0 12px !important;
    scrollbar-width: none !important;
  }
  .view[data-view="match"] .mm-options::-webkit-scrollbar{ width: 0 !important; height: 0 !important; display: none !important; }
  .view[data-view="match"] .mm-opt{
    flex: 0 0 85% !important; scroll-snap-align: center !important;
    display: flex !important; flex-direction: column !important; min-height: 164px !important;
  }
  .view[data-view="match"] .mm-opt-choose{
    margin-top: auto !important; align-self: stretch !important; text-align: left !important; padding-top: 14px !important;
  }
  /* matched state: the chosen card fills the width, the two compacted ones drop */
  .mm-stage.is-matched .mm-opt.is-compact{ display: none !important; }
  .mm-stage.is-matched .mm-opt.is-chosen{ flex: 0 0 100% !important; }

  /* inner grids collapse to one column (keep the 3-up cols, just tighter) */
  .view[data-view="match"] .mm-boxes,
  .view[data-view="match"] .mm-outcomes,
  .view[data-view="match"] .mm-grid,
  .view[data-view="match"] .mm-pos-grid,
  .view[data-view="match"] .mm-sum,
  .view[data-view="match"] .mm-after{ grid-template-columns: 1fr !important; }
  .view[data-view="match"] .mm-cols{ grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }

  /* FULL-SCREEN MODALS — sheet from the bottom, scroll inside */
  .mm-modal-veil{ place-items: end stretch !important; }
  :root:root:root:root:root:root:root:root body .mm-modal.mm-modal.panel,
  .mm-modal.panel{
    width: 100% !important; max-width: 100% !important; max-height: 92vh !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch !important;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom)) !important;
  }
  .mm-modal.panel::before, .mm-modal.panel::after{ display: none !important; }

  /* corner brackets are positioned at desktop coordinates — they float on mobile */
  .view[data-view="match"] .mm-br{ display: none !important; }

  /* hero + titles scale down */
  :root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-title{
    font-size: 30px !important; line-height: 36px !important; letter-spacing: -.6px !important;
  }
  .view[data-view="match"] .mm-hero-sub{ font-size: 13px !important; max-width: none !important; }

  /* toasts span the width, clear of the thumb */
  .mm-toasts{ left: 12px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
  .mm-toast{ min-width: 0 !important; max-width: none !important; }

  /* ── mobile app-shell fix, scoped to the Match route via body[data-mm="1"]
     (route.js sets it on /match only). The app is a 100vh flex-column shell; its
     flex items keep the default min-width:auto and refuse to shrink below their
     content, shoving the page ~640px wide and the content off-centre. min-width:0
     down the flex chain lets it fit the phone. Other routes redirect to Match on
     mobile, so none of this touches them, and desktop never matches this query. ── */
  body[data-mm="1"]{ width: 100% !important; min-width: 0 !important;
    margin-inline: 0 !important; padding-inline: 0 !important;
    align-items: stretch !important; overflow-x: hidden !important; }
  body[data-mm="1"] > .app{ width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    margin-inline: 0 !important; padding-inline: 0 !important; box-sizing: border-box; }
  body[data-mm="1"] main.stage,
  body[data-mm="1"] .view[data-view="match"]{ min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
  /* side gutter: content must not touch the screen edges. The one source of the
     horizontal margin on the phone — inner blocks flatten their own side padding
     (below) so hero, headings and cards all line up at this 16px edge. */
  body[data-mm="1"] .view[data-view="match"]{ padding-left: 16px !important; padding-right: 16px !important; }
  /* the analytics status readout (CONNECTING…/contracts count) crowds the header on
     a phone and isn't needed here — hiding it lets the wordmark breathe. */
  :root:root:root:root:root:root:root:root body[data-mm="1"] header.top .status,
  :root:root:root:root:root:root:root:root body[data-mm="1"] header.top #status{ display: none !important; }

  /* CONTAIN THE SWIPE DECK. The carousel must scroll INSIDE .mm-decision; without
     min-width:0 + overflow:hidden the flex items grow to the cards' full row width
     (3×85%+gaps ≈ 640px) and expand the whole page instead of scrolling in place.
     Same containment for the footer bar so the byline can't push the page wide. */
  body[data-mm="1"] .mm-decision{ min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; }
  body[data-mm="1"] .mm-options{ min-width: 0 !important; max-width: 100% !important; width: 100% !important; }
  body[data-mm="1"] .foot-bar{ min-width: 0 !important; overflow: hidden !important; }

  /* header wraps to rows instead of overflowing; the section nav scrolls in-row */
  body[data-mm="1"] header.top{ flex-wrap: nowrap !important; min-height: 0 !important;
    padding: 8px 16px !important; column-gap: 12px !important; overflow: hidden !important; max-width: 100% !important; }
  body[data-mm="1"] header.top .brand{ flex: 1 1 auto !important; min-width: 0 !important; }
  body[data-mm="1"] header.top .topright{ margin-left: auto !important; flex: 0 0 auto !important; min-width: 0 !important; }
  /* the section-nav tabs are pointless on mobile — every other view redirects to
     Match — and half-clipped tabs look broken. Hide them (max specificity to beat
     topnav.css's :root-stacked rules). */
  :root:root:root:root:root:root:root:root body[data-mm="1"] header.top nav.rail.rail{ display: none !important; }
  body[data-mm="1"] header.top .brand .tag{ display: none !important; }

  /* the analytics footer (how-measured / feedback / byline) overlaps and is clutter
     on a phone — hide it on the Match mobile view. */
  :root:root:root:root:root:root:root:root body[data-mm="1"] footer,
  :root:root:root:root:root:root:root:root body[data-mm="1"] .foot-bar{ display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIMPLE MODE (Carlos: "i said simple"). Strip the instrument decoration on the
   Match MOBILE view — grid background, corner brackets, heavy frames, the status
   readout — for a clean, airy page: just text and cards. Scoped to body[data-mm="1"]
   inside @media(max-width:640px), so desktop is byte-for-byte untouched. Exact
   decoration owners identified by app-codex's review.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* 1. the faint grid background (tva-light.css body background-image) + the
     screen-corner bracket overlays (body::before / body::after) */
  :root:root:root:root:root:root:root:root body[data-mm="1"]{
    background-image: none !important; background-color: #fffefb !important;
  }
  :root:root:root:root:root:root:root:root body[data-mm="1"]::before,
  :root:root:root:root:root:root:root:root body[data-mm="1"]::after{
    content: none !important; display: none !important;
  }
  /* 2. header: drop the rule + shadow, breathe; hide the analytics readout only
     (NOT .topright — that holds the wallet — and NOT [role=status] tx feedback) */
  :root:root:root:root:root:root:root:root body[data-mm="1"] header.top{
    border-bottom: 0 !important; box-shadow: none !important; margin-bottom: 16px !important;
  }
  body[data-mm="1"] header.top #status{ display: none !important; }
  /* 3. all the decorative marks: bracket spans, fx layers, squares, watermark */
  body[data-mm="1"] .view[data-view="match"] :is(.mm-br, .mm-fx, .mm-sq, .mm-opt-wm){ display: none !important; }
  /* 4. the drawn corner brackets (::before/::after on panels, cards, wallet) */
  :root:root:root:root:root:root:root:root body[data-mm="1"] .view[data-view="match"] :is(.mm-decision, .mm-match, .mm-modal.panel, .mm-opt, .mm-card, .mm-after)::before,
  :root:root:root:root:root:root:root:root body[data-mm="1"] .view[data-view="match"] :is(.mm-decision, .mm-match, .mm-modal.panel, .mm-opt, .mm-card, .mm-after)::after,
  body[data-mm="1"] .mm-wallet::before,
  body[data-mm="1"] .mm-wallet::after{ content: none !important; display: none !important; }
  /* 5. drop the heavy frames + shadows; panels go frameless + transparent */
  :root:root:root:root:root:root:root:root body[data-mm="1"] .view[data-view="match"] :is(.mm-decision, .mm-match, .mm-after .mm-card, .mm-modal.panel){
    border: 0 !important; box-shadow: none !important;
  }
  :root:root:root:root:root:root:root:root body[data-mm="1"] .view[data-view="match"] :is(.mm-decision, .mm-match, .mm-after .mm-card){
    background: transparent !important; padding: 20px 0 !important;
  }
  /* 6. the swipe cards keep a soft fill for affordance, but lose the orange rail
     + hard border (replaced by a hairline + faint shadow so they read as cards) */
  :root:root:root:root:root:root:root:root body[data-mm="1"] .view[data-view="match"] .mm-opt{
    border: 1px solid #efe6da !important; box-shadow: 0 1px 3px rgba(26,20,16,.05) !important;
    background: #fff !important; border-radius: 10px !important;
  }
  :root:root:root:root:root:root:root:root body[data-mm="1"] .view[data-view="match"] .mm-after{
    gap: 24px !important; margin-top: 24px !important;
  }
}

/* ── Mobile-only quiet links at the foot of the Match view: the community
   Telegram, and the desktop-view escape for the analytics board. The dense
   analytics footer is hidden on a phone (above), so these two replace it.
   Hidden on desktop entirely — never shown off the Match route. ── */
.mm-mobile-foot{ display: none; }
@media (max-width: 640px) {
  body[data-mm="1"] .view[data-view="match"] .mm-mobile-foot{
    display: flex !important; flex-wrap: wrap !important; justify-content: center !important;
    gap: 10px 20px !important; padding-top: 22px !important;
    margin: 8px 0 calc(28px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #efe6da !important;
  }
  body[data-mm="1"] .view[data-view="match"] .mm-mf-link{
    font-size: 13px !important; line-height: 1 !important; color: #9a8f82 !important;
    text-decoration: none !important; white-space: nowrap !important;
  }
  body[data-mm="1"] .view[data-view="match"] .mm-mf-link:active{ color: #e07a2e !important; }
}

/* ── "Change your view" — the visible re-pick path on mobile. After a choice the
   other two options are hidden (is-compact), so without this a phone user is
   stuck on their first pick. Shown ONLY on mobile (≤640 + data-mm) in the matched
   state; desktop keeps the side-by-side cards and never shows it. ── */
.mm-change{ display: none; }
@media (max-width: 640px) {
  :root:root:root:root:root:root:root:root body[data-mm="1"] .mm-stage.is-matched .mm-change{
    display: inline-flex !important; align-items: center; gap: 7px; margin: 14px 0 2px; padding: 9px 15px;
    background: #fff !important; border: 1px solid #efe6da !important; border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(26,20,16,.05) !important;
    font-family: var(--mono), ui-monospace, monospace !important; font-size: 12px !important; font-weight: 600 !important;
    letter-spacing: .04em !important; text-transform: uppercase; color: #E07A2E !important; cursor: pointer;
  }
  :root:root:root:root:root:root:root:root body[data-mm="1"] .mm-stage.is-matched .mm-change:active{ background: #fff7ef !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARKET SWITCH (app-codex design) — a compact asset selector above the decision
   heading. HYPE is live; ZEC opens a restrained read-only "coming soon" PREVIEW.
   Editorial: cream ground, a fine baseline, compact coin marks, mono labels,
   square corners; the selected tab gets orange text + a short orange underline
   (solid orange stays reserved for the trading CTA). No new brackets/frames.
   ═══════════════════════════════════════════════════════════════════════════ */
/* one full-width neutral baseline carries BOTH the label and the tabs; the
   selected tab's orange underline sits ON that baseline (margin-bottom:-1px),
   not floating above it — so it reads as one editorial selector, not two pills. */
.mm-market{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px 16px; flex-wrap:wrap;
  margin:0 0 18px; border-bottom:1px solid var(--mm-rule,#ede4d8); }
.mm-market-label{ padding-bottom:9px; }
.mm-market-tabs{ display:inline-flex; gap:0; }
.mm-mkt{ display:inline-flex; align-items:center; gap:7px; background:none; border:0; border-bottom:2px solid transparent;
  padding:4px 14px 8px; margin:0 0 -1px; cursor:pointer; border-radius:0; }
.mm-mkt .mm-mkt-ic{ display:inline-flex; width:16px; height:16px; }
.mm-mkt .mm-mkt-ic svg{ width:16px; height:16px; display:block; }
.mm-mkt[aria-selected="true"]{ border-bottom-color:var(--mm-orange,#E07A2E); }
.mm-mkt:focus-visible{ outline:2px solid var(--mm-orange,#E07A2E); outline-offset:3px; }

.mm-preview{ display:none; }
.mm-decision.is-preview .mm-card-eyebrow,
.mm-decision.is-preview .mm-sq,
.mm-decision.is-preview .mm-card-title,
.mm-decision.is-preview .mm-options,
.mm-decision.is-preview .mm-change{ display:none !important; }
/* the quote panel + connector are SIBLINGS of .mm-decision — hide them too so a
   stale HYPE quote never shows beside the ZEC preview; collapse the matched grid
   to one column while previewing. */
.mm-decision.is-preview ~ .mm-connector,
.mm-decision.is-preview ~ .mm-match{ display:none !important; }
.mm-stage:has(> .mm-decision.is-preview){ display:block !important; }
/* the "after you enter / proof" sections explain the HYPE trade flow — hide them
   in the ZEC preview (ZEC isn't tradeable yet; nothing there should imply it is). */
.view[data-view="match"]:has(.mm-decision.is-preview) .mm-after{ display:none !important; }
.mm-decision.is-preview .mm-preview{ display:block; animation:mm-pv-in 120ms ease-out; }
@keyframes mm-pv-in{ from{opacity:0} to{opacity:1} }
@media (prefers-reduced-motion:reduce){ .mm-decision.is-preview .mm-preview{ animation:none; } }
.mm-pv-cta{ display:inline-block; margin-top:18px; background:none; border:1px solid var(--mm-rule,#ede4d8);
  border-radius:10px; padding:9px 16px; cursor:pointer; }
.mm-pv-cta:active{ background:#fff7ef; }
.mm-preview{ padding:6px 0 10px; }

/* TYPE — beat instrument.css body * !important (same winning tier as the rest) */
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-market-label{
  font-family:var(--mono),ui-monospace,monospace !important; font-size:10px !important; font-weight:600 !important;
  letter-spacing:.12em !important; text-transform:uppercase; color:var(--mm-mut,#9a8f82); }
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-mkt{
  font-family:var(--mono),ui-monospace,monospace !important; font-size:13px !important; font-weight:600 !important;
  letter-spacing:.03em !important; color:var(--mm-mut,#9a8f82); }
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-mkt[aria-selected="true"]{ color:var(--mm-orange,#E07A2E) !important; }
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-market-soon{
  font-family:var(--mono),ui-monospace,monospace !important; font-size:9px !important; font-weight:600 !important;
  letter-spacing:.08em !important; text-transform:uppercase; color:var(--mm-mut,#9a8f82) !important; }
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-pv-eyebrow{
  font-family:var(--mono),ui-monospace,monospace !important; font-size:11px !important; font-weight:600 !important;
  letter-spacing:.09em !important; text-transform:uppercase; color:var(--mm-orange,#E07A2E); margin-bottom:12px; }
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-pv-title{
  font-family:var(--sans),system-ui,sans-serif !important; font-size:clamp(22px,6vw,27px) !important; font-weight:600 !important;
  letter-spacing:-.3px !important; line-height:1.2 !important; color:#1a1410; margin:0 0 10px; }
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-pv-sub{
  font-family:var(--sans),system-ui,sans-serif !important; font-size:15px !important; font-weight:400 !important;
  letter-spacing:0 !important; color:var(--mm-mut,#9a8f82); margin:0; }
:root:root:root:root:root:root:root:root body .view[data-view="match"] .mm-pv-cta{
  font-family:var(--mono),ui-monospace,monospace !important; font-size:12px !important; font-weight:600 !important;
  letter-spacing:.04em !important; text-transform:uppercase; color:var(--mm-orange,#E07A2E); }

/* wallet-modal balance rows reuse the ticket shimmer at row scale. Placed
   after the B01 width ladder so the fixed size wins the nth-of-type tie. */
.mm-row-v .mm-skel-bar{ display: block; width: 84px; height: 12px; }