/* =========================================================================
   The shared MCP pieces — the promise, the assistant grid, what you could
   ask, the read levels and the offer. Rendered in the app (the picker, a
   guide) AND on the marketing feature page. 2026-10-12,
   docs/redesign/mcp-communication-plan.md §5.

   ⚠️ **LOADED BY TWO SHELLS THAT SHARE NO TOKENS** — the same constraint as
   components/explainer.css, and the same answer: every token carries the
   app's light value as its fallback, so a rule applies on marketing (which
   has no dark mode) and follows the app's theme where it has one.
   ⛔ Except `--text-muted`, which both themes declare: a fallback for it is
   a hardcoded hex that tests/core/test_ux_components.py turns red.

   ⭐ **IN THE GRAMMAR** (docs/admin/design_system.md): a tile is a CARD
   because she picks it to open a guide; a question and a read level are
   ROWS on one list surface, a sentence or a name with a fact; every run has
   a section heading on the ground above it. As in explainer.css the rungs
   are restated as VALUES under these names, never as the shared selectors,
   because the marketing shell links neither type.css nor cards.css:

       section heading   20 / 500 / Outfit / ink   type.css .section-heading
       item title        16 / 600 / Outfit / ink   cards.css .item__title
       body              15 / 400 / secondary      cards.css .item__desc
       meta              12 / 400 / muted          type.css .meta
       list surface      white, hairline, 20px radius, 44px rows
       card              white, hairline, 20px radius, 20px padding
   ========================================================================= */

/* ⭐ **THE MEASURE, THE SAME AS THE EXPLAINER BESIDE IT** (2026-10-12). On
   /features/mcp/ these runs sit directly above the explainer, whose surfaces
   stop at `--measure-page`; these ran the full container, so the page had two
   right edges (Gabriel, on staging: "divs with different sizes"). Same token,
   same fallback — the marketing shell does not load themes/default.css, so
   without the fallback `max-width` falls back to `none` there
   (components/explainer.css explains, and test_css_extraction.py holds the
   fallback equal to the token). */
.mcp-grid__list,
.mcp-list,
.mcp-offer,
.mcp-controls-picture img,
.mcp-grid__trademarks {
    max-width: var(--measure-page, 52rem);
}

.mcp-pieces + .mcp-pieces,
.mcp-promise + .mcp-pieces {
    margin-top: var(--space-2xl, 2rem);
}

/* ── The name of a run, on the ground ─────────────────────────────────── */
.mcp-pieces__heading {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs, 0.25rem) var(--space-md, 0.75rem);
    margin: 0 0 var(--space-md, 0.75rem);
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: var(--text-xl, 1.25rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--text-primary, #232820);
}

.mcp-pieces__heading-name {
    flex-shrink: 0;
}

.mcp-pieces__heading-rule {
    flex: 1;
    min-width: var(--space-2xl, 2rem);
    height: var(--border-width, 1px);
    background: var(--border-color, rgba(35, 40, 32, 0.09));
    align-self: center;
}

/* ── The promise: her words on the ground, no box ─────────────────────── */
.mcp-promise__line {
    margin: 0 0 var(--space-md, 0.75rem);
    max-width: 30ch;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-primary, #232820);
    text-wrap: balance;
}

/* ⭐ Under a page's own h1 the promise is the LEDE, not a second heading of the
   same size — the Free picker uses it this way. */
.mcp-promise--lede .mcp-promise__line {
    max-width: 60ch;
    font-family: inherit;
    font-size: var(--text-lg, 1.125rem);
    letter-spacing: 0;
    line-height: 1.6;
}

.mcp-promise__points {
    display: grid;
    gap: var(--space-xs, 0.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mcp-promise__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs, 0.5rem);
    max-width: 60ch;
    color: var(--text-secondary, #4A5448);
    font-size: var(--text-base, 1rem);
    line-height: 1.5;
}

.mcp-promise__tick {
    flex-shrink: 0;
    margin-top: 0.2em;
    color: var(--primary, #5C6B59);
}

/* ── The grid: one card per assistant ─────────────────────────────────── */
.mcp-grid__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-md, 0.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mcp-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs, 0.25rem);
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    border: var(--border-width, 1px) solid var(--border-color, rgba(35, 40, 32, 0.09));
    border-radius: 20px;
    background: var(--surface-raised, #FFFFFF);
    color: inherit;
    text-decoration: none;
}

a.mcp-tile:hover {
    border-color: var(--primary, #5C6B59);
}

a.mcp-tile:focus-visible {
    outline: 2px solid var(--primary, #5C6B59);
    outline-offset: 2px;
}

.mcp-tile__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs, 0.5rem);
}

/* The mark sits before the name, at the name's height. Public pages only. */
.mcp-tile__mark {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: var(--space-xs, 0.5rem);
    vertical-align: -0.25rem;
    object-fit: contain;
}

.mcp-tile__name {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #232820);
}

/* ⚠️ The badge is META, not a status tone: words are never painted in a
   status colour (the static guard in measure-contrast). The testing tone only
   dims the card's border, it does not colour the text. */
.mcp-tile__badge {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.mcp-tile__how {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-secondary, #4A5448);
}

.mcp-tile--testing {
    border-style: dashed;
}

/* The trademark line under a PUBLIC grid — meta rung, never a heading. */
.mcp-grid__trademarks {
    margin: var(--space-md, 0.75rem) 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ── One list surface: questions, read levels ─────────────────────────── */
.mcp-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: var(--border-width, 1px) solid var(--border-color, rgba(35, 40, 32, 0.09));
    border-radius: 20px;
    background: var(--surface-raised, #FFFFFF);
    overflow: hidden;
}

.mcp-list__row {
    min-height: 44px;
    box-sizing: border-box;
    padding: var(--space-sm, 0.5rem) 20px;
    display: flex;
    align-items: center;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-primary, #232820);
}

.mcp-list__row + .mcp-list__row {
    border-top: var(--border-width, 1px) solid var(--border-color, rgba(35, 40, 32, 0.09));
}

.mcp-list__row--pair {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs, 0.25rem);
    padding-block: var(--space-md, 0.75rem);
}

.mcp-list__name {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-weight: 600;
}

.mcp-list__note {
    color: var(--text-secondary, #4A5448);
}

/* ── The controls picture: a generated capture of the Connected apps row ── */
.mcp-controls-picture {
    margin-inline: 0;
}

.mcp-controls-picture img {
    display: block;
    width: 100%;
    height: auto;
    border: var(--border-width, 1px) solid var(--border-color, rgba(35, 40, 32, 0.09));
    border-radius: 20px;
}

.mcp-controls-picture__caption {
    margin-top: var(--space-xs, 0.5rem);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── The offer: one card, one button — an offer, not a warning ────────── */
.mcp-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md, 0.75rem);
    padding: 20px;
    border: var(--border-width, 1px) solid var(--border-color, rgba(35, 40, 32, 0.09));
    border-radius: 20px;
    background: var(--surface-raised, #FFFFFF);
}

.mcp-offer__text {
    display: grid;
    gap: var(--space-2xs, 0.25rem);
    min-width: 0;
}

.mcp-offer__title {
    margin: 0;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #232820);
}

.mcp-offer__body {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-secondary, #4A5448);
}

/* ── The Free picker: the pieces in order, then her count and the offer ── */
.mcp-free__size {
    margin: 0 0 var(--space-md, 0.75rem);
    font-size: var(--text-base, 1rem);
    line-height: 1.5;
    color: var(--text-primary, #232820);
}

/* ── /mcp opened in a browser ─────────────────────────────────────────── */
.mcp-browser {
    max-width: 760px;
}

.mcp-browser__title {
    margin: 0 0 var(--space-xs, 0.5rem);
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-primary, #232820);
}

.mcp-browser__lede,
.mcp-browser__note {
    max-width: 60ch;
    color: var(--text-secondary, #4A5448);
    line-height: 1.6;
}

.mcp-browser__address-label {
    margin: var(--space-xl, 1.5rem) 0 var(--space-2xs, 0.25rem);
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-weight: 600;
    color: var(--text-primary, #232820);
}

/* ⭐ Selectable in one click or tap: the shell has no Copy controller. */
.mcp-address {
    display: inline-block;
    max-width: 100%;
    padding: var(--space-xs, 0.5rem) var(--space-sm, 0.5rem);
    border: var(--border-width, 1px) solid var(--border-color, rgba(35, 40, 32, 0.09));
    border-radius: 12px;
    background: var(--surface-raised, #FFFFFF);
    font-size: 1rem;
    overflow-wrap: anywhere;
    user-select: all;
    -webkit-user-select: all;
}

.mcp-browser__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 0.5rem);
    margin-top: var(--space-xl, 1.5rem);
}

.mcp-browser__note + .mcp-pieces {
    margin-top: var(--space-2xl, 2rem);
}