/* Small additions for the signed-in live pages (published as /assets/app/live.css). Daylight tokens from site.css only. */
.mv-muted{color:var(--ink-3);font-size:14px;margin-top:8px}
.mv-err{color:var(--lost);font-size:14px;margin-top:10px}
.mv-code{font:500 12px var(--mono);color:var(--ink-3)}
.mv-note{font-size:13px;margin-top:6px}
.mv-link{all:unset;cursor:pointer;color:var(--cobalt);text-decoration:underline;text-underline-offset:3px;margin-left:6px}
.mv-link:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.card .meta{flex-wrap:wrap}
.card .acts .mv-muted{margin:0}
/* /t/ — app frame: iframe when embeddable, otherwise a note pointing to the new tab */
.frame .chrome{flex-wrap:wrap}
.frame .chrome span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.frame .chrome .mv-newtab{margin-left:auto;font:600 12px var(--mono);color:var(--cobalt);text-decoration:none;white-space:nowrap}
.frame .chrome .mv-newtab:hover{text-decoration:underline}
.frame .app:has(iframe){padding:0}
.mv-app{display:block;width:100%;height:min(76vh,760px);border:0;background:#fff}
.mv-tabnote{max-width:520px;padding:12px 0 24px;font-family:var(--sans)}
.mv-tabnote h2{font:700 24px/1.15 var(--sans);letter-spacing:-.02em;margin-bottom:10px}
.mv-tabnote p{color:var(--ink-2);margin-bottom:16px}
.mv-tabnote .btn{margin-top:4px}
.frame.mv-tab .app{min-height:420px}
.paid .amt.mv-pending{color:var(--ink-3)}
.split{grid-template-columns:130px 1fr auto}
.split i{max-width:130px;min-width:2px}
/* /start/ — agent consent (OAuth) spans both columns */
.mv-oauth{grid-column:1/-1;border:1.5px solid var(--cobalt)}
/* /me/ */
.app .meta .switch{margin-left:auto}
.app .go{text-decoration:none}
.app .go:hover{text-decoration:underline}
.offer .o-main p{margin-top:4px}
@media (max-width:700px){
  .bar .wrap{gap:10px}
  .card{padding:24px 20px}
  .card h1{font-size:28px}
  .app .meta .switch{margin-left:0}
  .mv-app{height:70vh}
  table.tests{font-size:14px}
  table.tests th:nth-child(2),table.tests td:nth-child(2){display:none}
}
@media (max-width:800px){.frame.mv-tab .app{min-height:0;padding:22px 20px 8px}}
/* /me/: next to the 360px sidebar the app cards are narrow below ~1180px; stack them like the mock does on phones */
@media (max-width:1180px) and (min-width:701px){
  .app{grid-template-columns:44px minmax(0,1fr);padding:16px;gap:8px 14px}
  .app .mk{grid-row:1;width:44px;height:44px}
  .app .mk .ai{--s:44px!important}
  .app .nm{grid-row:1;grid-column:2}
  .app .what{grid-row:2;grid-column:1/-1}
  .app .meta{grid-row:3;grid-column:1/-1}
  .app .right{grid-row:4;grid-column:1/-1;flex-wrap:wrap;gap:16px;justify-content:space-between;padding-top:12px;border-top:1px solid var(--rule)}
}
/* /start/ at phone width: let the grid columns shrink (the mock's 1fr column was 384px wide at 375px) */
@media (max-width:1000px){.page{grid-template-columns:minmax(0,1fr)}.page>*{min-width:0}}
/* /start/: the country list has long names; the select and the step column must not widen the step at phone width */
.step{grid-template-columns:36px minmax(0,1fr)}
.step>div,.step .body>*{min-width:0}
#country{max-width:100%;min-width:0}
/* top page: the board table scrolls inside its panel at phone width */
.board .mv-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.board .bh{flex-wrap:wrap;gap:6px 16px}
/* top page: sample mode (src/lib/sample.js). Quiet tags on sample items, a chip on sections that show them. */
.mv-sample,.mv-chip{display:inline-block;font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule);border-radius:3px;padding:3px 5px 2px;vertical-align:middle;white-space:nowrap}
.mv-chip{font-size:10px;margin-left:8px;letter-spacing:.16em}
.board .mv-sample,.board .mv-chip,.home .mv-sample{color:var(--tile-dim);border-color:#3a3936}
.board td.app small .mv-sample{padding:2px 4px 1px;margin-right:4px;font-size:9px}
.board .bh .mv-chip{position:relative;top:-3px}
.feed small .mv-sample{margin-right:4px;font-size:9px;padding:2px 4px 1px}
.tip .mv-sample{color:var(--tile-dim);border-color:#3a3936;margin-left:6px}
.card .top span.mv-sample{font:600 10px/1 var(--mono);color:var(--ink-3);margin-left:6px}
.home .app .mv-sample{margin-left:8px}
.mv-sample-note{font-size:14px;color:var(--ink-3);margin:0 0 10px}
.stats .mv-live{display:flex;align-items:center;gap:5px;margin-top:3px;font:600 11px var(--mono);letter-spacing:.1em;color:var(--ink-2)}
.stats .mv-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pays)}

/* Phone nav: keep the devnet label on one line; drop the duplicate "Sign in" (Start signs in too). */
@media (max-width: 420px) {
  .nav .wrap { gap: 12px; }
  .nav .end { gap: 8px; }
  .nav .devnet { white-space: nowrap; font-size: 10px; padding: 3px 6px; letter-spacing: .04em; }
  .nav .end .btn { padding: 8px 11px; white-space: nowrap; }
  .nav .end .btn.ghost:not([aria-current]) { display: none; } /* "Start" leads to sign-in too */
}