/* 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: 14px; }
.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; }
.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: .2px !important; 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-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; 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; 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: 600 !important; color: var(--mm-ink); 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-btn-ghost{ font-family: var(--sans) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--mm-ink);
  background: none; border: 1px solid var(--mm-rule, #ede4d8); padding: 9px 16px; cursor: pointer; }
.mm-btn-ghost:hover{ border-color: var(--mm-orange); }
.mm-feed-head{ display: grid; grid-template-columns: 1fr 1.6fr 1fr 1fr; gap: 10px;
  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{ display: grid; grid-template-columns: 1fr 1.6fr 1fr 1fr; gap: 10px; padding: 12px 0;
  border-bottom: 1px solid var(--mm-rule, #ede4d8); }
.mm-feed-row i{ display: block; height: 9px; background: #f0e7dc; }
.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; }

/* 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-emptybox-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-emptybox-v{
  font-family: var(--geist) !important; font-size: 12px !important; color: var(--mm-body);
  margin: 0; max-width: 56ch;
}
.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); }

/* 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);
}