/* ============================================================
   NUCLEUX — RESPONSIVE LAYER (pages)

   Loaded LAST on every non-Components page, after each page's own
   <style> blocks, so it wins on order at matching specificity.
   Shared chrome (header, menu sheet, search, launcher) lives in
   styles.css because the Components pages use it too; this file
   recomposes page content.

   Breakpoints match the site's existing ones:
     ≤ 1100 tablet · ≤ 900 pin/rail switch · ≤ 720 phone ·
     ≤ 390 compact phone · landscape phone (max-height: 500px)

   Principle: the same page, recomposed. Content, routes, CTAs and
   live interactions all stay; layout, order, density, interaction
   mechanism and motion range adapt.

   Motion classes used below:
     ESSENTIAL (state, transition)        kept everywhere
     AMBIENT (brand drift, glows, reveals) kept, range and cost reduced
     POINTER (follows the mouse)           removed on touch, replaced
                                           by a pressed state
   ============================================================ */


/* ============================================================
   0 · SHARED PAGE PRIMITIVES
   ============================================================ */

/* Card lifts are hover affordances. On touch a tap leaves :hover
   applied until the next tap elsewhere, so a lifted card would stay
   lifted. Touch gets a pressed state instead. */
@media (hover: none) {
  .practice:hover, .fw-stage:hover, .scn-card:hover, .px-card:hover,
  .docs-card:hover, .mcp-card:hover, .scenario-tile:hover {
    transform: none;
  }
}

/* long words and URLs never widen a phone */
@media (max-width: 720px) {
  h1, h2, h3, h4, p, li, dd, dt, td, th, figcaption, blockquote { overflow-wrap: break-word; }
  img, video, iframe, canvas, svg { max-width: 100%; }
  img, video { height: auto; }
  .btn { min-height: 48px; }
}


/* ============================================================
   1 · HOME (index-v2.html)
   Section order is the desktop narrative: hero → four moments →
   a real scenario → Labs → the makers → footer. Nothing is
   reordered; each section is recomposed for one column.
   ============================================================ */

/* — atmosphere: the desktop blooms are 480–720px blurred discs.
     On a phone they are scaled to the screen and drift less. — */
@media (max-width: 720px) {
  .hero::before { width: 360px; height: 360px; left: -30%; filter: blur(50px); }
  .hero::after  { width: 280px; height: 280px; right: 4%; filter: blur(44px); }
  .hero { overflow-x: clip; }
  .framework::before, .framework::after,
  .practices::before, .practices::after,
  .foot::before, .foot::after { width: 320px; height: 320px; filter: blur(48px); }
  .ag-hero-media__aurora span:nth-child(1) { width: 92vw; height: 92vw; }
  .ag-hero-media__aurora span:nth-child(2) { width: 80vw; height: 80vw; }
  .ag-hero-media__aurora span:nth-child(3) { width: 84vw; height: 84vw; }
  body.landing-light .ag-hero-media__aurora { filter: blur(48px) saturate(126%); }
}

/* — HERO — */
@media (max-width: 720px) {
  /* The hero hugs its content on a phone. On desktop it holds a full
     screen for the typed intro; here that left ~200px of empty band
     under the CTA, so every seam on the page is now the same 80px
     (40 below one section + 40 above the next). */
  /* Same sequence as desktop: while the headline types itself, the
     hero owns the whole first screen and nothing from section 2 shows.
     When the intro finishes (html.hero-intro-done — set immediately
     for reduced motion and for visitors returning from sign-in) the
     hero relaxes to its content height, so section 2 rises into view
     on the hero's own 900ms min-height transition, and every seam on
     the page settles at the same 80px (40 + 40). */
  body.landing-light .hero {
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100svh - var(--nav-h));
    padding-top: 40px;
    padding-bottom: 40px;
  }
  /* --hero-rest is the hero's own content height (measured in
     index-v2.html). Settling on that rather than on 0 means the whole
     duration is spent on visible travel — easing to 0 used up the
     motion in the first ~250ms and read as a jump. */
  html.hero-intro-done body.landing-light .hero { min-height: var(--hero-rest, 0px); }
  /* a touch slower than desktop (1.2s vs 900ms): on a phone section 2
     travels most of a screen */
  body.landing-light .hero { transition: min-height 1200ms cubic-bezier(.3, 0, .2, 1); }
  body.landing-light .hero__title {
    font-size: clamp(34px, 9.6vw, 46px);
    line-height: 1.06;
    letter-spacing: -0.038em;
    max-width: none;
  }
  body.landing-light .hero__sub {
    font-size: 17px;
    line-height: 1.5;
    margin-top: 20px;
    max-width: 34ch;
  }
  /* styles.css centres this column on small screens; the page reads
     left-aligned, so the CTA lines up with the copy above it */
  body.landing-light .hero__content { align-items: flex-start; }
  body.landing-light .hero__actions {
    margin-top: 28px;
    justify-content: flex-start;
  }
  body.landing-light .hero__actions .btn {
    flex: 0 0 auto;
    min-height: 52px;
    padding-inline: 24px;
    font-size: 15px;
  }
  /* no particle field on a phone: the hero is the type, the aurora and
     the CTA. landing.js sees the canvas is not rendered and stops
     drawing it, so it costs nothing while hidden. */
  .scene__bg { display: none; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  body.landing-light .hero { transition: none; }
}
@media (max-width: 390px) {
  body.landing-light .hero__title { font-size: clamp(32px, 9.4vw, 36px); }
}
/* landscape phone: the hero must not swallow a screen and a half */
@media (orientation: landscape) and (max-height: 500px) {
  body.landing-light .hero,
  html.hero-intro-done body.landing-light .hero { min-height: 0; padding-top: 28px; padding-bottom: 28px; }
  body.landing-light .hero__title { font-size: clamp(30px, 5.2vw, 40px); }
  body.landing-light .hero__sub { max-width: 60ch; }
}

/* — SECTION SEAMS: 55 + 55 on desktop, 40 + 40 on a phone — */
@media (max-width: 720px) {
  body.landing-light .framework { padding-top: 40px; padding-bottom: 40px; }
  body.landing-dark.landing-light #practices,
  body.landing-dark.landing-light #labs,
  body.landing-light .foot { padding-top: 40px; padding-bottom: 40px; }
}

/* — FOUR MOMENTS: a vertical stage sequence —
     The stages are chronological, so on one column they read as a
     numbered sequence (01 → 04) rather than four detached cards with
     empty bottoms. */
@media (max-width: 720px) {
  body.landing-light .framework__head { margin-bottom: 0; }
  .framework__inner { gap: 28px; }
  body.landing-light .framework__title {
    font-size: clamp(26px, 7.2vw, 32px);
    line-height: 1.12;
    max-width: none;
    text-wrap: pretty;   /* balance broke it into four short lines on a phone */
  }
  body.landing-light .framework__sub { font-size: 15.5px; margin-top: 14px; }

  body.landing-dark .framework .framework__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    counter-reset: nx-stage;
  }
  body.landing-light .framework .fw-stage {
    counter-increment: nx-stage;
    min-height: 0;
    padding: 16px 56px 16px 64px;
    gap: 4px;
    border-radius: 20px;
  }
  .fw-stage__name { font-size: 19px; line-height: 1.25; }
  .fw-stage__name::before {
    content: counter(nx-stage, decimal-leading-zero);
    position: absolute;
    left: -48px; top: -3px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    color: #5b21b6;
    background: color-mix(in oklab, #8B57C7 12%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, #8B57C7 22%, transparent);
  }
  .fw-stage__desc { font-size: 14px; line-height: 1.5; }
  .fw-stage__meta {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
    font-size: 12.5px;
  }
  .fw-stage__arrow {
    top: 50%;
    right: 14px;
    width: 32px; height: 32px;
    margin-top: -16px;
  }
}
/* the card spotlight follows the mouse — on touch it would sit frozen
   in a corner, so touch gets a press instead */
@media (hover: none) {
  .fw-stage::before, .fw-stage::after { display: none; }
  body.landing-dark .framework .fw-stage:hover,
  body.landing-light .framework .fw-stage:hover,
  body.landing-dark .framework .fw-stage.is-live:hover,
  body.landing-light .framework .fw-stage.is-live:hover { transform: none; }
  body.landing-dark .framework .fw-stage:active,
  body.landing-light .framework .fw-stage:active,
  body.landing-light .framework .fw-stage.is-live:active { transform: scale(.985); }
}

/* — SCENARIO: the screen first, then the four patterns it uses —
     On desktop the patterns float as callouts around the screenshot.
     There is no room around a 360px image, so they become a list
     directly beneath it — the same four destinations, in the same
     order, each still a link to its pattern. */
@media (max-width: 768px) {
  body.landing-dark.landing-light #practices .practices__title {
    font-size: clamp(27px, 7.4vw, 34px);
    line-height: 1.1;
  }
  /* the two phrases are nowrap for the desktop line breaks */
  #practices .practices__title > span { white-space: normal !important; }
  body.landing-dark.landing-light #practices .practices__sub { font-size: 15.5px; margin-top: 16px; }
  body.landing-dark #practices .practices__head { margin-bottom: 24px; }

  .practices__scenario-img { padding: 0; margin: 0; }
  .scenario-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 24px;
  }
  .scenario-wrap img {
    border-radius: 16px;
    box-shadow: 0 0 0 1px var(--border), var(--shadow-2);
    margin-bottom: 12px;
  }
  .scenario-wrap .scenario-connector { display: none; }
  .scenario-wrap .scenario-tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    grid-template-areas: "crumb go" "name go" "desc go";
    column-gap: 12px;
    align-items: center;
    position: relative;
    inset: auto !important;
    width: auto;
    padding: 14px 14px 14px 16px;
    border-radius: 18px;
    box-shadow: none;
    border: 1px solid var(--border);
    -webkit-tap-highlight-color: transparent;
    transition: background var(--dur-1) var(--ease), border-radius 260ms cubic-bezier(.22, 1, .36, 1);
  }
  .scenario-tile__breadcrumb { grid-area: crumb; justify-self: start; margin-bottom: 6px; font-size: 11px; }
  .scenario-tile__name { grid-area: name; font-size: 16px; margin-bottom: 2px; }
  .scenario-tile__desc { grid-area: desc; font-size: 13.5px; margin-bottom: 0; }
  /* "View Pattern" stays in the link's accessible name; visually it
     becomes the row's go-arrow */
  .scenario-tile__btn {
    grid-area: go;
    width: 36px; height: 36px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    color: transparent;
    border: 1px solid var(--border);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230c0c0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
  }
  .scenario-wrap .scenario-tile:active { background: var(--ink-50); border-radius: 12px; }

  /* two CTAs: stacked, full width, primary (the live demo) first */
  body.landing-light #practices .practices__more {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px !important;
  }
  #practices .practices__more .btn { justify-content: center; min-height: 52px; }
}

/* — LABS: a swipeable rail (index-v2 now builds it at every width) — */
@media (max-width: 900px) {
  body.landing-dark.landing-light #labs .practices__head { margin-bottom: 28px; }
  #labs .practices__grid.ag-rail {
    gap: 12px;
    padding: 18px var(--gutter) 22px;
    margin: -18px calc(var(--gutter) * -1) -10px;
    scroll-padding-left: var(--gutter);
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  #labs .practices__grid.ag-rail > * {
    flex: 0 0 min(76%, 300px);
    min-height: 196px;
  }
  /* full-bleed rail: the fades sit on the screen edges */
  body.landing-light #labs .ag-rail-wrap::after { right: calc(var(--gutter) * -1); width: 48px; }
  body.landing-light #labs .ag-rail-wrap::before { left: calc(var(--gutter) * -1); width: 48px; }
  /* the progress bars double as controls — give each a real target */
  body.landing-dark #labs .ag-rail-bars { margin-top: 14px; margin-bottom: 8px; gap: 2px; }

  body.landing-dark #labs .practices__more { margin-top: 20px; }
}
/* rail progress bars as touch controls: the 3px line is drawn by a
   pseudo-element inside a taller, transparent button */
@media (max-width: 900px), (pointer: coarse) {
  body.landing-light .ag-rail-bar,
  body.landing-light .ag-rail-bar.is-on {
    position: relative;
    width: 34px;
    height: 44px;
    background: transparent;
  }
  body.landing-light .ag-rail-bar.is-on { width: 52px; }
  .ag-rail-bar::before {
    content: "";
    position: absolute;
    left: 4px; right: 4px; top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 999px;
    background: rgba(12, 12, 10, .16);
    transition: background .4s var(--ag-ease, ease);
  }
  .ag-rail-bar.is-on::before { background: #7c3aed; }
}
@media (max-width: 720px) {
  body.landing-dark.landing-light #labs .practices__title { font-size: clamp(27px, 7.4vw, 34px); line-height: 1.1; }
  body.landing-dark.landing-light #labs .practices__sub { font-size: 15.5px; margin-top: 16px; }
  #labs .practice { padding: 18px; }
  #labs .practice__name { font-size: 17px; }
  #labs .practice__desc { font-size: 13.5px; }
}
@media (hover: none) {
  #labs .practice:hover { transform: none; }
  #labs .practice:active { transform: scale(.985); }
}

/* — MAKERS + FOOTER — */
@media (max-width: 720px) {
  .makers { min-height: 0; aspect-ratio: auto; padding-bottom: 180px; border-radius: 20px; margin-bottom: 28px; }
  .makers__bg-img { object-position: 50% 100%; }
  body.landing-dark.landing-light .makers__bigword {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.08;
    padding: 28px 20px 0;
    max-width: none;
  }
  body.landing-dark.landing-light .makers__pitch {
    font-size: 15px;
    line-height: 1.6;
    margin: 16px 0 0;
    padding: 0 20px;
  }
}

/* footer bottom row, every page: brand line, then the links as
   full-size targets rather than a wrapped strip of small text */
@media (max-width: 720px) {
  .foot__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .foot__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 4px;
    margin-left: -10px;
  }
  .foot__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 12px;
  }
  .foot__links a:active { background: var(--ink-50); }
}


/* ============================================================
   2 · SCENARIOS LISTING (practices.html)
   ============================================================ */

/* — "Shape your product idea" carousel —
     Phone: the product's screen leads (it is what identifies the
     product at a glance), its story follows. Slides are swiped (see
     practices.html) and the arrows move down beside the dots instead
     of floating over the copy. */
@media (max-width: 720px) {
  .shape { padding: 32px 0 24px; }
  .shape__head { margin-bottom: 20px; }
  .shape__title { font-size: clamp(30px, 8.4vw, 38px); line-height: 1.08; }
  .shape__lede { font-size: 15.5px; }

  .shape__viewport { border-radius: 20px; touch-action: pan-y; }
  .shape__slide {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 4px 2px 8px;
    align-items: start;
  }
  .shape__visual { order: -1; }
  .shape__frame { padding: 18px 10px 10px; border-radius: 16px; }
  .shape__copy { max-width: none; gap: 10px; }
  .shape__product { font-size: 22px; line-height: 1.2; }
  .shape__desc { font-size: 15px; }
  .shape__bullets li { font-size: 14px; }
  .shape__ctas { gap: 8px; }
  .shape__cta {
    flex: 1 1 140px;
    min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center;
  }

  .shape__dots { margin-top: 16px; min-height: 44px; align-items: center; }
  .shape__dot { position: relative; }
  /* a 7px dot, a 44px target */
  .shape__dot::after { content: ""; position: absolute; inset: -18px -8px; }
  .shape__arrow {
    top: auto;
    bottom: 0;
    transform: none;
    width: 44px; height: 44px;
  }
  .shape__arrow:hover { transform: none; }
  .shape__arrow--prev { left: 0; }
  .shape__arrow--next { right: 0; }
}

/* — scenario cards — */
@media (max-width: 640px) {
  .px-grid { padding-block: 8px 48px; }
  .scn-grid { gap: 14px; }
  .scn { border-radius: 20px; }
  .scn__media { aspect-ratio: 16 / 9; }
  .scn__body { padding: 16px 16px 18px; gap: 8px; }
  .scn__name { font-size: 19px; }
  .scn__desc { font-size: 14.5px; }
  .scn__actions { margin-top: 8px; padding-top: 12px; gap: 8px; }
  .scn__action { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .scn__actions .scn__action { flex: 1 1 auto; justify-content: center; }
}
@media (hover: none) {
  .scn:hover { transform: none; box-shadow: none; }
  .scn:active { transform: scale(.99); }
}


/* ============================================================
   3 · SCENARIO DETAIL (scenario.html)
   The page about an agent: what it is, a recorded run, the
   patterns it uses, and the door into the live sandbox (sandbox.html
   is the agent itself — see section 9).
   ============================================================ */
@media (max-width: 720px) {
  .scn-detail { padding: 20px 0 48px; }
  .scn-detail__bread { margin-bottom: 20px; font-size: 13px; }
  .scn-detail__bread a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
  .scn-detail__head { margin-bottom: 24px; }
  .scn-detail__title { font-size: clamp(32px, 9vw, 40px); }
  .scn-detail__desc { font-size: 16px; }

  .scn-detail__media { margin-bottom: 20px; }
  .scn-detail__player { padding: 12px; min-height: 0; border-radius: 20px; }
  .scn-detail__play { width: 64px; height: 64px; }
  .scn-detail__rec { top: 12px; left: 12px; }
  .scn-detail__duration { bottom: 12px; right: 12px; }

  .scn-detail__stats { padding: 16px; gap: 16px 12px; margin-bottom: 36px; border-radius: 20px; }
  .scn-detail__patterns { margin-bottom: 36px; }
  .scn-detail__patterns-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .scn-detail__pcard {
    min-height: 60px;
    justify-content: center;
    padding: 12px 44px 12px 16px;
    border-radius: 16px;
    position: relative;
  }
  .scn-detail__pcard::after {
    content: "";
    position: absolute;
    right: 16px; top: 50%;
    width: 8px; height: 8px;
    margin-top: -4px;
    border-top: 2px solid var(--fg-muted);
    border-right: 2px solid var(--fg-muted);
    transform: rotate(45deg);
  }
  .scn-detail__pcard-name { font-size: 15.5px; }
  .scn-detail__pcard-meta { font-size: 12.5px; }

  .scn-detail__launch-card { padding: 24px 20px; gap: 20px; border-radius: 24px; }
  .scn-detail__launch-actions { gap: 8px; }
  .scn-detail__cta { min-height: 48px; justify-content: center; font-size: 14.5px; }
}
@media (hover: none) {
  .scn-detail__pcard:hover { transform: none; box-shadow: none; }
  .scn-detail__pcard:active { background: var(--ink-50); }
}


/* ============================================================
   4 · CODE — shared by Docs and MCP
   Code scrolls inside its block; the page never does. Copy stays
   in the block's corner (global.js lifts it out of the scroller)
   with a real touch target, and the first line is pushed below it
   instead of running underneath.
   ============================================================ */
.nx-codewrap { position: relative; }
@media (max-width: 720px) {
  .dc-code, .mcp-code {
    font-size: 12.5px;
    line-height: 1.7;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: 14px;
  }
  .nx-codewrap > .dc-code { padding-top: 48px; }
  /* MCP blocks start with the newline the button used to sit on */
  .nx-codewrap > .mcp-code { padding-top: 28px; }
  .nx-codewrap > .mcp-code--tabbed { padding-top: 48px; }
  .nx-codewrap > .mcp-code__copy {
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
    border-radius: 10px;
  }
  .nx-codewrap > .dc-code__copy,
  .nx-codewrap > .mcp-code__copy { top: 8px !important; right: 8px !important; }
  /* the target is 44px even though the chip is 30–32px */
  .nx-codewrap > .mcp-code__copy::after,
  .nx-copy::after { content: ""; position: absolute; inset: -7px; }

  /* one-line commands: wrap at the spaces instead of pushing their
     Copy button out of reach */
  .dc-irow--cmd { align-items: flex-start; }
  .dc-irow--cmd > span { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  .dc-install-block-head { min-height: 32px; }
}


/* ============================================================
   5 · DOCS (docs.html)
   One reading column. The desktop page has no sidebar or on-page
   TOC, so nothing has to be folded away — the work is measure,
   rhythm and code.
   ============================================================ */
@media (max-width: 720px) {
  .dc-hero { padding-block: 36px 28px; }
  .dc-eyebrow { margin-bottom: 12px; }
  .dc-hero__title { margin-bottom: 16px; }   /* size as on desktop: the MCP page's heading */

  .dc-section { padding-block: 32px; }
  .dc-h2 { font-size: clamp(23px, 6.4vw, 27px); line-height: 1.2; margin-bottom: 12px; }
  .dc-body, .dc-pkg-intro { font-size: 16px; line-height: 1.65; }
  .dc-note { font-size: 14.5px; }
  .dc-body code, .dc-pkg-intro code { font-size: 13.5px; overflow-wrap: anywhere; }

  .docs-outline__grid--pkg { gap: 10px; }
  .docs-outline__grid--pkg .docs-card { padding: 16px; border-radius: 18px; }
  .dc-pkg-chip { font-size: 12px; padding: 5px 10px; }
}


/* ============================================================
   6 · MCP (mcp.html)
   ============================================================ */
@media (max-width: 780px) {
  .mcp-hero__title { font-size: clamp(32px, 9vw, 44px); line-height: 1.06; }
  .mcp-hero__sub { font-size: 16.5px; }
}
@media (max-width: 720px) {
  .mcp-hero { padding-block: 32px 36px; }
  .mcp-setup { padding-block: 36px; }
  .mcp-step { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding-bottom: 28px; }
  .mcp-step__num { width: 32px; height: 32px; }
  .mcp-step:not(:last-child)::before { left: 16px; top: 34px; }
  .mcp-step__name { margin-top: 4px; }
  .mcp-step__desc { font-size: 15px; }
  /* the config is JSON: keep its lines, scroll sideways inside the block */
  .mcp-code:not(.mcp-code--tabbed) { white-space: pre; padding-bottom: 6px; }
  .mcp-pkg-tab { min-height: 36px; padding: 0 18px; }

  .mcp-exposed__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
  .mcp-exposed__card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border-radius: 18px;
  }
  .mcp-exposed__card-icon { grid-row: 1 / 3; width: 36px; height: 36px; margin: 0; }
  .mcp-exposed__card-name { margin: 2px 0 2px; font-size: 15.5px; }
  .mcp-exposed__card-desc { margin: 0; font-size: 14px; }
  .mcp-compat__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}
/* the stacked diagram: workspace → server → clients, read top to
   bottom. Its connectors are vertical here, so the travelling dots
   travel down them instead of sideways along a 1px line. */
@media (max-width: 520px) {
  .mcp-flow__connector { height: 32px; }
  .mcp-flow__dot { left: -2.5px !important; top: 0; animation-name: flow-down; }
  .mcp-flow__connector--rev .mcp-flow__dot { animation-name: flow-up; }
  .mcp-flow__node { padding: 14px 16px; border-radius: 16px; }
  .mcp-flow__node-name { font-size: 14px; }
  .mcp-flow__pill { font-size: 11.5px; padding: 3px 9px; }
  .mcp-flow__node-label { font-size: 11px; }
  .mcp-flow__client { min-height: 40px; padding: 8px 12px; font-size: 13px; }
}
@keyframes flow-down {
  0% { top: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; }
}
@keyframes flow-up {
  0% { top: 100%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 0%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mcp-flow__dot { animation: none; opacity: 0; }
}


/* ============================================================
   7 · LABS (labs.html + Lab/*.html)
   The Labs page is an app shell: header, a tab per lab, and the lab
   itself in a frame that fills the rest of the screen. On a phone
   the tabs become one swipeable row (never wrapped onto two lines,
   never shrunk), the fullscreen control becomes an icon, and the
   frame keeps the remaining height as the browser chrome grows and
   shrinks (100dvh). Inside the frames, Lab/lab-touch.js turns the
   finger into the cursor the demos were written for.
   ============================================================ */
@media (max-width: 720px) {
  .labs-head .container { padding-top: 8px; }
  .labs-brand b { font-size: 17px; }
  .labs-brand span { font-size: 10px; letter-spacing: .16em; }
  .labs-fs { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; font-size: 0; gap: 0; }
  .labs-fs svg { width: 18px; height: 18px; }

  .labs-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin: 8px calc(var(--gutter) * -1) 0;
    padding: 0 var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .labs-tabs::-webkit-scrollbar { display: none; }
  .labs-tab {
    flex: none;
    min-height: 44px;
    align-items: center;
    scroll-snap-align: start;
    font-size: 14px;
  }
  .labs-hint__name { font-size: 20px; }
}
@media (max-width: 420px) {
  .labs-brand span { display: none; }
}
/* landscape phone: one slim row — tabs and fullscreen — so the lab
   keeps most of a 360–440px-tall screen */
@media (orientation: landscape) and (max-height: 500px) {
  .labs-head .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 12px;
    padding-top: 6px;
  }
  .labs-head__top { display: contents; }
  .labs-brand { display: none; }
  .labs-fs { grid-column: 2; grid-row: 1; align-self: center; margin-bottom: 4px; }
  .labs-tabs { grid-column: 1; grid-row: 1; margin-top: 0; margin-right: 0; }
}


/* ============================================================
   8 · CONTACT (contact.html)
   Desktop: intro | form. Phone: intro, then the form — already the
   DOM order. What changes is the form's behaviour on a phone.
   ============================================================ */
@media (max-width: 720px) {
  /* 16px stops iOS Safari zooming the page when a field takes focus */
  .form-group input, .form-group textarea { font-size: 16px; }
  .form-group textarea { min-height: 140px; resize: none; overflow-y: auto; }
  /* a focused field is never parked under the sticky header or the
     keyboard's top edge */
  .form-group input, .form-group textarea {
    scroll-margin-top: calc(var(--nav-h) + 24px);
    scroll-margin-bottom: 96px;
  }
  .form-foot .btn-submit { min-height: 52px; }
  /* the browser's validation state stays visible after a failed submit */
  .form-group input:user-invalid, .form-group textarea:user-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
  }
}


/* ============================================================
   9 · SANDBOX — the agent itself (sandbox.html)
   Desktop draws each agent inside a mock desktop window: title bar,
   a sidebar of skeleton rows (conversation list, file tree, inbox,
   tool palette, properties), the working area and a composer.

   On a phone it becomes a phone app:
     top app bar     agent picker + Reset + Ask Lumen (icons)
     workspace       the agent's live feed, filling the screen
     bottom          the composer, pinned at the foot of the app
     below the fold  suggested prompts (one swipeable row), then the
                     active patterns that power the agent
   The skeleton sidebars are placeholder bars with no text and no
   function; a phone app shows its workspace, not a desktop's
   chrome, so they fold away. The agent's feed, composer, prompts,
   pattern links and every action stay.
   ============================================================ */
@media (max-width: 720px) {
  /* — app bar — not sticky: the header above it already is, and the
       agent below fills the screen anyway */
  .sbx-toolbar { position: static; padding: 10px 0; }
  .sbx-toolbar__inner { position: relative; flex-wrap: wrap; gap: 8px; }
  .sbx-toolbar__actions { display: contents; }
  .sbx-selector { position: static; flex: 1 1 0; min-width: 0; }
  .sbx-selector__trigger { width: 100%; min-width: 0; min-height: 52px; padding: 6px 12px 6px 6px; border-radius: 16px; }
  .sbx-selector__icon { width: 38px; height: 38px; border-radius: 12px; }
  .sbx-selector__label { font-size: 15px; }
  .sbx-selector__tag { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the agent list opens full width under the bar */
  .sbx-selector__menu {
    left: 0; right: 0;
    width: auto;
    max-height: min(64dvh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px;
    padding: 8px;
  }
  .sbx-selector__option { min-height: 60px; padding: 10px 12px; border-radius: 14px; grid-template-columns: 36px minmax(0, 1fr) auto; }
  .sbx-selector__option-icon { width: 36px; height: 36px; }
  .sbx-selector__option-label { font-size: 15px; }
  .sbx-selector__option-tag { font-size: 12.5px; }
  .sbx-toolbar__btn {
    order: 2;
    width: 44px; height: 44px;
    padding: 0;
    justify-content: center;
    gap: 0;
    font-size: 0;          /* the label stays as the accessible name */
  }
  .sbx-toolbar__btn svg { width: 18px; height: 18px; }
  .sbx-toolbar__count {
    order: 3;
    flex-basis: 100%;
    margin: 0;
    padding: 0 2px;
    background: none;
    border: 0;
    font-size: 11.5px;
  }

  /* — workspace: the app fills the screen under the bars — */
  .sbx-stage { padding: 4px 0 40px; }
  /* desktop zeroes this container's gutter; the app keeps a slim inset */
  .sbx-stage__main { padding-inline: 12px; }
  /* minmax(0, …): a bare 1fr track is at least as wide as its widest
     line of code, which pushed the whole app past the screen edge */
  .sbx-stage__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sbx-stage__surface, .sbx-stage__rail { min-width: 0; }
  .sbx-stage__shell .tshell__editor { overflow-x: auto; }
  .sbx-stage__shell .tshell__codeline { white-space: pre; }
  .sbx-stage__surface { gap: 10px; }
  .sbx-stage__shell {
    padding: 0;
    background: none;
    border-radius: 22px;
    min-height: 0;
    height: calc(100dvh - var(--nav-h) - 168px);
    min-height: 440px;
    max-height: 760px;
  }
  .sbx-stage__shell .tshell {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    font-size: 13px;
  }
  .sbx-stage__shell .tshell__winbar,
  .sbx-stage__shell .tshell__nav,
  .sbx-stage__shell .tshell__filetree,
  .sbx-stage__shell .tshell__inbox,
  .sbx-stage__shell .tshell__props { display: none; }
  .sbx-stage__shell .tshell__body { flex: 1 1 auto; min-height: 0; }
  .sbx-stage__shell .tshell__main,
  .sbx-stage__shell .tshell__mail,
  .sbx-stage__shell .tshell__editor,
  .sbx-stage__shell .tshell__canvas { flex: 1 1 auto; min-height: 0; padding: 12px; }
  .sbx-stage__shell .sbx-feed { flex: 1 1 auto; min-height: 0; max-height: none; padding: 12px; font-size: 14px; }
  .sbx-stage__shell .sbx-feed--code { margin-top: 8px; border-radius: 12px; }
  /* doc + assistant panel: the document becomes a short strip above
     the assistant, which takes the rest */
  .sbx-stage__shell .tshell__body--rightrail { flex-direction: column; }
  .sbx-stage__shell .tshell__workspace { flex: none; max-height: 92px; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--border); }
  .sbx-stage__shell .tshell__panel { width: auto; flex: 1 1 auto; min-height: 0; }
  /* canvas: the tool palette turns into a row along the top */
  .sbx-stage__shell .tshell__body--creative { flex-direction: column; }
  .sbx-stage__shell .tshell__tools { width: auto; flex-direction: row; justify-content: center; padding: 8px; border-right: 0; border-bottom: 1px solid var(--border); }
  .sbx-stage__shell .tshell__asset { width: 100%; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
  .sbx-stage__shell .tshell__canvas { display: flex; flex-direction: column; }

  .sbx-bubble { font-size: 14px; max-width: 92%; }
  .sbx-bubble--ai { min-width: 0; }
  .sbx-pattern { font-size: 13px; }

  /* — the composer: thumb height, no zoom-on-focus — */
  .sbx-composer { padding: 10px 10px; gap: 8px; align-items: center; }
  .sbx-composer input { font-size: 16px; min-height: 44px; padding: 10px 16px; min-width: 0; }
  #sbx-send { width: 44px; height: 44px; flex: none; }

  /* — suggested prompts: one row you swipe — */
  .sbx-stage__prompts {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    margin: 0 -12px;
    padding: 2px 12px 6px;
    scroll-padding-inline: 12px;
  }
  .sbx-stage__prompts::-webkit-scrollbar { display: none; }
  .sbx-stage__prompts-label { flex: none; }
  .sbx-stage__prompt { flex: none; min-height: 40px; padding: 0 16px; font-size: 13.5px; white-space: nowrap; }

  /* — active patterns: below the app, full-size rows — */
  .sbx-stage__rail { position: static; gap: 8px; }
  .sbx-rail__eyebrow { font-size: 12px; }
  .sbx-rail__hint { font-size: 13.5px; }
  .sbx-rail__patterns { gap: 6px; }
  .sbx-rail-pattern { min-height: 56px; justify-content: center; padding: 10px 14px; border-radius: 14px; }
  .sbx-rail-pattern__name { font-size: 15px; }
  .sbx-rail-pattern__meta { font-size: 12.5px; }
  .sbx-rail__foot-link { min-height: 48px; font-size: 14.5px; }
}
@media (hover: none) {
  .sbx-rail-pattern:hover { transform: none; }
  .sbx-stage__prompt:hover { transform: none; }
}
/* landscape phone: the app gets the full short screen */
@media (orientation: landscape) and (max-height: 500px) {
  .sbx-toolbar { position: static; }
  .sbx-stage__shell { height: calc(100dvh - var(--nav-h) - 24px); min-height: 280px; }
  .sbx-stage__shell .tshell__winbar { display: none; }
}
/* the sandbox has its own Ask Lumen in the app bar; on a phone the
   floating one would sit on top of the composer and the prompts */
@media (max-width: 720px) {
  body:has(.sbx-toolbar) .nx-launcher { display: none; }
}


/* ============================================================
   10 · SIGN IN / SIGN UP / RESET (auth.css pages)
   Already a single column. A phone needs only the field size that
   keeps iOS from zooming on focus and fields that clear the
   keyboard.
   ============================================================ */
@media (max-width: 720px) {
  .auth-input, .auth-input input { font-size: 16px; }
  .auth-input, .auth-input input { scroll-margin-bottom: 120px; }
}


/* ============================================================
   11 · CONTAINMENT — decorative glows stay inside their section
   A few sections let their content overflow on purpose (the Labs
   rail's hover lift, the MCP hero glow). `clip` on the x-axis keeps
   their blurred pseudo-element glows from widening the page while
   leaving the y-axis visible for the lift.
   ============================================================ */
@media (max-width: 900px) {
  body.landing-dark #labs.practices,
  .mcp-hero, .mcp-hero__right { overflow-x: clip; }
}


/* ============================================================
   12 · TOUCH TARGETS — any touch screen, any width
   A landscape phone is 874px wide but still driven by a thumb, so
   these key off the pointer, not the width. Visible sizes stay as
   designed where an invisible hit area can carry the 44px.
   ============================================================ */
@media (pointer: coarse) {
  .gnav .brand, .auth-brand, .nx-msheet__brand { min-height: 44px; display: inline-flex; align-items: center; }
  .scn-detail__bread a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
  /* (the corner Copy buttons are already absolutely placed — their
     ::after hit area hangs off that; the inline ones need an anchor) */
  .mcp-pkg-tab { position: relative; }
  .nx-codewrap > .mcp-code__copy::after, .mcp-pkg-tab::after { content: ""; position: absolute; inset: -8px -4px; }
  .mcp-pkg-tab { min-height: 36px; }
  .shape__dot { position: relative; }
  .shape__dot::after { content: ""; position: absolute; inset: -18px -8px; }
  .foot__links a { display: inline-flex; align-items: center; min-height: 44px; }
  /* auth: the small text links and the Show toggle */
  .auth-footer a, .auth-mini { display: inline-flex; align-items: center; min-height: 44px; }
  .auth-label-row .auth-mini { margin-block: -12px; }
  .auth-reveal::after { content: ""; position: absolute; inset: -8px -6px; }
  .auth-nav a { display: inline-flex; align-items: center; min-height: 44px; }
}