/* ==========================================================================
   Landing page + playground layout.
   Requires design-tokens.css and ui.css.
   ========================================================================== */

.wrap {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--sp-6);
}
@media (max-width: 640px) { .wrap { padding-inline: var(--sp-4); } }

section { padding-block: var(--sp-24); }
@media (max-width: 768px) { section { padding-block: var(--sp-16); } }

.section-head { max-width: var(--container-text); margin-bottom: var(--sp-10); }
.section-head h2 { font-size: var(--fs-3xl); margin-bottom: var(--sp-3); }
.section-head p { font-size: var(--fs-lg); color: var(--text-body); }
.section-head--center { margin-inline: auto; text-align: center; }
@media (max-width: 768px) { .section-head h2 { font-size: var(--fs-2xl); } }

.eyebrow {
    display: inline-block;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-ink);
    margin-bottom: var(--sp-3);
}

/* --- Site header -------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(11, 17, 32, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    height: 64px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--text);
    font-weight: 700;
    font-size: var(--fs-md);
    white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand .logo-mark { width: 30px; height: 30px; flex: none; }

.site-nav { display: flex; align-items: center; gap: var(--sp-5); margin-left: auto; }
.site-nav a {
    color: var(--text-body);
    font-size: var(--fs-md);
    font-weight: 500;
}
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav .btn { color: #fff; }
.site-nav .btn--ghost { color: var(--text-body); }

.nav-toggle { display: none; margin-left: auto; }

@media (max-width: 900px) {
    .site-nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-2);
        padding: var(--sp-4);
        background: var(--surface-1);
        border-bottom: 1px solid var(--border);
    }
    .site-nav a { padding: var(--sp-3); border-radius: var(--r-md); }
    .site-nav a:hover { background: var(--surface-2); }
    .site-header[data-open="true"] .site-nav { display: flex; }
    .nav-toggle { display: inline-flex; }
}

/* --- Hero --------------------------------------------------------------- */
.hero { padding-block: var(--sp-24) var(--sp-16); }
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-12);
    align-items: center;
}
.hero h1 {
    font-size: var(--fs-hero);
    letter-spacing: -0.025em;
    margin-bottom: var(--sp-5);
}
.hero__lede {
    font-size: var(--fs-lg);
    color: var(--text-body);
    margin-bottom: var(--sp-8);
    max-width: 34rem;
}
.hero__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.hero__trust {
    font-size: var(--fs-md);
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
}
.hero__trust span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero__trust .icon { color: var(--success); }

@media (max-width: 1023px) {
    .hero__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
    .hero { padding-block: var(--sp-16) var(--sp-12); }
}

/* --- Code panel --------------------------------------------------------- */
.code-panel {
    background: var(--code-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-2);
}
.code-panel__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}
.code-panel__name {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.code-panel__copy { margin-left: auto; }
.code-panel pre {
    margin: 0;
    padding: var(--sp-5);
    overflow-x: auto;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: #dbe4f3;
    tab-size: 2;
}
.code-panel--min pre { padding: var(--sp-4); }

/* Syntax roles — one class per token type, no inline colours. */
/* #64748b is the faint token: fine for a placeholder, 3.8:1 for a comment
   you are meant to read. */
.tok-com { color: #8a97ab; font-style: italic; }
.tok-key { color: #c4b5fd; }
.tok-str { color: #6ee7b7; }
.tok-fn  { color: #fcd34d; }
.tok-prop{ color: #7dd3fc; }
.tok-num { color: #fca5a5; }

/* --- Language tabs ------------------------------------------------------ */
.tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.tabs [role="tab"] {
    padding: var(--sp-2) var(--sp-4);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    color: var(--text-muted);
    font: inherit;
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
}
.tabs [role="tab"]:hover { color: var(--text); background: var(--surface-1); }
.tabs [role="tab"][aria-selected="true"] {
    color: var(--text);
    background: var(--surface-2);
    border-color: var(--border-strong);
}
[role="tabpanel"][hidden] { display: none; }

/* --- Steps -------------------------------------------------------------- */
.steps { display: grid; gap: var(--sp-6); }
.step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.step__num {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brand-subtle);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: var(--brand-ink);
    font-weight: 700;
    font-size: var(--fs-md);
}
.step__title { font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--sp-3); }

/* --- Feature grid ------------------------------------------------------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--sp-5); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--sp-5); }

/* The flagship tier is four cards and wants to read as two pairs, not as a
   row of three with one stranded underneath. */
#flagshipGrid,
#primitivesGrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
@media (min-width: 900px) {
    #flagshipGrid,
    #primitivesGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--sp-5); }

.tile-icon {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--brand-ink);
    margin-bottom: var(--sp-4);
}
.feature { display: flex; flex-direction: column; }
.feature h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.feature p { font-size: var(--fs-md); color: var(--text-body); }
/* Capability caveats may wrap onto two lines rather than overflow the card. */
.feature .badge {
    margin-top: var(--sp-4);
    align-self: flex-start;
    white-space: normal;
}

/* --- Demo cards --------------------------------------------------------- */
.demo-card { display: flex; flex-direction: column; }
.demo-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.demo-card p { font-size: var(--fs-md); color: var(--text-body); flex: 1; }
.demo-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}
.demo-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 600;
    font-size: var(--fs-md);
    color: var(--brand-ink);
    white-space: nowrap;
}
.demo-card__link .icon { transition: transform var(--dur-fast) var(--ease); }
.demo-card:hover .demo-card__link .icon { transform: translateX(3px); }

.link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-top: var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
}
.link-row p { flex: 1 1 22rem; }

/* --- Diagram ------------------------------------------------------------ */
.diagram {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
}
.diagram svg { display: block; width: 100%; height: auto; }

/* --- Status block ------------------------------------------------------- */
.status-band {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--sp-10);
}
.limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--sp-5); margin-top: var(--sp-6); }
.limit__value { font-size: var(--fs-xl); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.limit__label { font-size: var(--fs-md); color: var(--text-muted); }

/* --- Final CTA ---------------------------------------------------------- */
.cta-band {
    text-align: center;
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl);
    padding: var(--sp-12) var(--sp-6);
}
.cta-band h2 { font-size: var(--fs-3xl); margin-bottom: var(--sp-3); }
.cta-band p { color: var(--text-body); margin-bottom: var(--sp-8); }
.cta-band__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); padding-block: var(--sp-12) var(--sp-8); }
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: var(--sp-8);
    margin-bottom: var(--sp-10);
}
.footer-col h3 {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-col a { color: var(--text-body); font-size: var(--fs-md); }
.footer-col a:hover { color: var(--text); }
.footer-about p { font-size: var(--fs-md); color: var(--text-muted); margin-top: var(--sp-4); max-width: 24rem; }
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
    .footer-about { grid-column: 1 / -1; }
}

/* --- Playground --------------------------------------------------------- */
.game-card { display: flex; flex-direction: column; }

/* Every entry carries a screenshot of itself with something actually
   happening in it — a game mid-round, a log with entries, a transfer that
   went through. The card's padding is cancelled so the picture reaches the
   card's edges, and the crop is anchored to the top because that is where an
   app puts the thing that identifies it. */
.entry-shot {
    margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-5);
    border-bottom: 1px solid var(--border);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    overflow: hidden;
    background: var(--surface-2);
}

.entry-shot img {
    display: block;
    width: 100%;
    /* The width/height attributes are there so the space is reserved before
       the picture arrives, but `height` is a presentational hint and a real
       declaration, so it beats aspect-ratio unless it is handed back. */
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
}
.game-card__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.game-card h3 { font-size: var(--fs-base); }
.game-card p { font-size: var(--fs-md); color: var(--text-body); flex: 1; }
.game-card__proves {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

/* --- Featured app showcase ---------------------------------------------- */
.showcase__head { max-width: var(--container-text); margin-bottom: var(--sp-8); }
.showcase__head h2 { font-size: var(--fs-3xl); margin-bottom: var(--sp-3); }
.showcase__head p { font-size: var(--fs-lg); color: var(--text-body); }

.showcase__media {
    position: relative;
    margin: 0 0 var(--sp-8);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--surface-1);
    box-shadow: var(--shadow-3);
}
.showcase__media img { display: block; width: 100%; height: auto; }
.showcase__caption {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
    background: var(--surface-1);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.showcase__caption .live {
    width: 7px; height: 7px;
    margin-top: 0.45em;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
    flex: none;
}

.showcase__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--sp-8);
    align-items: start;
}
.showcase__proof { display: grid; gap: var(--sp-4); margin: 0; list-style: none; padding: 0; }
.showcase__proof li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-md); }
.showcase__proof .icon { color: var(--brand-ink); margin-top: 0.15em; }
.showcase__proof strong { color: var(--text); }

.mode-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.showcase__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

@media (max-width: 768px) {
    .showcase__head h2 { font-size: var(--fs-2xl); }
}

/* Demo cards carry the same "what it proves" tags as the playground cards. */
.demo-card .demo-card__proves {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

/* ---- Playground: filter bar and entry cards -------------------------------
 * The cards already declared which primitive they prove; this makes that
 * claim navigable instead of decorative. Filtering is a class on the grid
 * parent plus one on each card, so it costs no layout thrash and works with
 * the auto-fit grid unchanged.
 */
.filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}

.filter-bar__label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    padding-right: var(--sp-1);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 34px;
    padding: 0.375rem 0.75rem;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    color: var(--text-body);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}

.filter-chip:hover { background: var(--surface-3); }
.filter-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.filter-chip.is-on {
    background: var(--brand);
    border-color: transparent;
    color: #fff;
}

/* A count is content, not a placeholder — --text-faint is below AA at 13px. */
.filter-chip__n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Full white, as the chip's own label is: dimming it was worth 0.2 of a
   contrast point and cost the count its legibility. */
.filter-chip.is-on .filter-chip__n { color: #fff; }
/* A primitive nothing proves is still worth showing — greyed, not hidden, so
   the gap in coverage stays visible rather than being quietly tidied away. */
.filter-chip.is-empty { opacity: 0.45; }

.filter-solo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.filter-solo input { accent-color: var(--brand); width: 16px; height: 16px; cursor: pointer; }

.filter-empty {
    margin-top: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
    color: var(--text-muted);
    font-size: var(--fs-md);
}

/* A card filtered out leaves the flow entirely, so the grid re-packs. */
.entry[hidden] { display: none !important; }

/* The whole card is the target. The overlay link sits under the card's own
   content so real links inside a card still win, and it is a real <a> so it
   keyboard-focuses and opens in a new tab the way a link should. */
.entry { position: relative; }

.entry-hit {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

.entry-hit:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.entry > *:not(.entry-hit) { position: relative; z-index: 1; pointer-events: none; }
/* The whole card is one click target, which is right until a card has a second
   destination — a "what it does" alongside "open it". Anything marked
   .entry-alt sits above the card-wide link and takes its own clicks. */
.entry .entry-alt { position: relative; z-index: 2; pointer-events: auto; }

.entry:hover { background: var(--surface-2); border-color: var(--border-strong); }
.entry:hover .demo-card__link { color: var(--accent-ink); }

/* "Can I try this right now?" — answered before the click rather than
   discovered by sitting alone in an empty room. */
.entry-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
}

.entry-players {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.entry-players--solo { color: var(--success); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ---------------------------------------------------------------------------
   Landing polish
   ------------------------------------------------------------------------ */

/* The header is sticky at 64px, and the nav links to #demos. Without this,
   every in-page jump parks the section heading underneath it. */
section[id] { scroll-margin-top: 80px; }

/* A card that behaves like a card: the whole thing is the target, not a 90px
   link inside it. Same pattern the playground already uses. */
.demo-card { position: relative; }

.demo-card .demo-card__hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

/* Real controls inside the card sit above the blanket hit area, so the
   secondary link and its focus ring still work. */
.demo-card__foot { position: relative; z-index: 2; }

.demo-card .demo-card__hit:focus-visible {
    outline: 2px solid var(--brand-hover);
    outline-offset: 2px;
}

/* A little lift on hover. Deliberately small: there are a dozen cards on this
   page and anything more reads as jitter. prefers-reduced-motion is handled
   globally in design-tokens.css. */
.card--interactive {
    transition: background var(--dur, 160ms) var(--ease, ease),
                border-color var(--dur, 160ms) var(--ease, ease),
                transform var(--dur, 160ms) var(--ease, ease),
                box-shadow var(--dur, 160ms) var(--ease, ease);
}

.card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}

/* One deliberate band, not a zebra: the flagship should look like the
   flagship, and the page gains a light/dark/light rhythm over nine screens. */
#featured {
    background: var(--surface-1);
    border-block: 1px solid var(--border);
}

/* A grid track sizes to its widest content unless told otherwise, so one long
   line inside the code panel — the endpoint URL in the hero snippet — stretched
   the whole hero column past the viewport and took the headline, lede and trust
   row with it. min-width:0 lets the track shrink and the <pre> scroll on its
   own, which is what its overflow-x was already there to do. */
.hero__grid > * { min-width: 0; }
.code-panel, .code-panel__bar { min-width: 0; max-width: 100%; }
.code-panel__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* --- Phone: a diagram scaled to 320px is a diagram nobody can read -------- */
/*
 * `width: 100%` on the SVG scales the whole drawing down with the viewport, so
 * labels authored at 10.5px render at about seven. Below this width the
 * diagram keeps its size and the container scrolls instead — the reader pans a
 * legible drawing rather than squinting at a complete one.
 */
@media (max-width: 700px) {
    .diagram {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .diagram svg {
        width: auto;
        min-width: 520px;
    }
}

/* --- Small phones (320px) ------------------------------------------------ */
/*
 * Two rows were built for a laptop and could not close up: the site header
 * (a long brand name beside the menu button) and a card's footer, where a
 * "About <app>" link and an "Open" link sat on one line that would not wrap.
 */
@media (max-width: 420px) {
    .site-header__inner { gap: var(--sp-3); }
    .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .entry-foot,
    .demo-card__foot { flex-wrap: wrap; }
    .entry-foot .btn,
    .demo-card__foot .btn { min-width: 0; }
}

/* --- The account chip, injected into every landing nav by profile-chip.js -- */
.site-nav .mp-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.site-nav .mp-chip__initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--brand-subtle, rgba(99, 102, 241, 0.16));
    color: var(--accent-ink, #818cf8);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* A display name can be anything, so it is allowed to truncate rather than
   push the nav wider than the page. */
.site-nav .mp-chip__name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }

/* --- The profile page ----------------------------------------------------- */

/* `[hidden]` is a UA rule of the same specificity as a class, and author
   styles win ties -- so `.mp-profile__card { display: flex }` silently makes
   the hidden attribute inert, and the signed-out form renders underneath the
   signed-in one. Restate it, narrowly, before anything sets display. */
.mp-profile [hidden] { display: none !important; }

.mp-profile { padding: 40px 0 80px; display: flex; flex-direction: column; gap: var(--sp-5); }
.mp-profile h1 { margin-bottom: var(--sp-2); }
.mp-profile__card { display: flex; flex-direction: column; gap: var(--sp-3); }
.mp-profile__lead { color: var(--text-body); font-size: var(--fs-md); line-height: 1.7; margin: 0; }
.mp-profile__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.mp-profile__error { color: #f87171; font-size: var(--fs-md); margin: 0; }
.mp-profile input[type="email"], .mp-profile input[type="password"], .mp-profile input[type="text"] {
    width: 100%; max-width: 380px; padding: 10px 12px;
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; font: inherit;
}
.mp-profile__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.mp-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    flex-wrap: wrap;
    padding: 12px 14px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 10px;
}
.mp-row__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-row__label { font-weight: 600; color: var(--text); }
/* The channel name decides which room you join, so it wraps rather than
   truncating -- a half-shown name is worse than a taller row. */
.mp-row__name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--fs-sm, 12px); color: var(--text-muted); overflow-wrap: anywhere; }
.mp-row__apps { font-size: var(--fs-sm, 12px); color: var(--text-muted); }
.mp-row__actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }

/* Sign-in controls on the profile, matching the connection modal and the
   Rooms gate — one account, so it should not be three different forms. */
.mp-profile .mp-subtabs {
    display: flex; gap: 4px; padding: 3px; max-width: 380px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
}
.mp-profile .mp-subtab {
    flex: 1; appearance: none; border: 0; border-radius: 6px; background: transparent;
    padding: 7px 10px; font: inherit; font-size: 13px; color: var(--text-muted); cursor: pointer;
}
.mp-profile .mp-subtab.is-active { background: var(--surface-1); color: var(--text); font-weight: 600; }
.mp-profile .mp-subtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mp-profile .mp-or {
    display: flex; align-items: center; gap: 10px; max-width: 380px;
    margin: 4px 0; color: var(--text-muted); font-size: 12px;
}
.mp-profile .mp-or::before, .mp-profile .mp-or::after {
    content: ""; flex: 1; height: 1px; background: var(--border);
}
.mp-profile .mp-google {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    max-width: 380px; width: 100%; padding: 10px 12px;
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.mp-profile .mp-google:hover { border-color: var(--border-strong); }
.mp-profile .mp-google__g {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: #4285f4; color: #fff; font-size: 11px; font-weight: 700;
}
.mp-profile__ok { color: #4ade80; font-size: var(--fs-md); margin: 0; }

/* The one control on the profile page that cannot be undone by anybody.
   Boxed and set apart from "Back up now" deliberately: the two do opposite
   things, and a misclick here is not recoverable. */
.mp-danger {
    margin-top: var(--sp-6);
    padding: var(--sp-4);
    border: 1px solid var(--danger, #b3261e);
    border-radius: var(--radius-md, 8px);
    background: color-mix(in srgb, var(--danger, #b3261e) 6%, transparent);
}
.mp-danger__title {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-md);
    color: var(--danger, #b3261e);
}
.mp-danger .btn { min-height: 44px; }