/* Mobile layer: purpose-built guided flow for touch devices. Desktop behavior stays in base layers. */

.mobile-flow-nav,
.mobile-choice-dialog,
.mobile-direct-choices,
.mobile-switch-control,
.mobile-segmented {
  display: none;
}

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 34px; min-height: 0; }
  .hero-copy-block { max-width: 820px; }
  .hero-stage { min-height: 500px; }
  .control-deck { grid-template-columns: 1fr 1fr; }
  .control-card:nth-child(2) { border-bottom: 0; }
  .deck-actions { grid-column: 1 / -1; border-top: 1px solid var(--line-soft); justify-content: flex-end; }
  .workspace { grid-template-columns: 1fr; }
  .preview-panel { position: static; }
  .explanation { grid-template-columns: 120px 1fr; }
  .explanation > p { grid-column: 2; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 154px; }
  body {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    background: var(--canvas);
  }
  .shell { width: min(100% - 20px, 1210px); }

  .site-header {
    width: calc(100% - 14px);
    margin-top: 7px;
    top: 6px;
    border-radius: 17px;
  }
  .header-inner { min-height: 56px; padding-inline: 8px; }
  .brand-mark { width: 32px; height: 32px; padding: 7px 6px; }
  .brand-copy strong { font-size: 12px; }
  .brand-copy small { display: none; }
  nav { gap: 6px; }
  nav a:not(.nav-github) { display: none; }
  .nav-github { min-height: 44px; display: inline-flex; align-items: center; padding: 7px 11px; font-size: 11px; }

  /* Keep the decorative grid where it adds personality instead of repainting it behind the entire long form. */
  .hero {
    position: relative;
    isolation: isolate;
    padding: 64px 0 28px;
    gap: 20px;
  }
  .hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 4px -10px 0;
    pointer-events: none;
    opacity: .78;
    background:
      linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  }
  h1 { font-size: clamp(43px, 13vw, 61px); }
  .lede { font-size: 15px; line-height: 1.62; }
  .trust-row { gap: 6px; }
  .trust-row span { padding: 6px 8px; font-size: 10px; }
  .hero-flow { align-items: stretch; flex-direction: column; gap: 7px; }
  .hero-flow > div { width: fit-content; min-height: 34px; }
  .hero-flow > div:not(:last-child)::after { display: none; }

  .hero-stage { min-height: 410px; overflow: hidden; margin-inline: -4px; }
  .profile-sheet { width: min(335px, 86vw); border-radius: 23px; }
  .profile-sheet.front { min-height: 360px; padding: 11px; }
  .profile-sheet.back-product { height: 328px; transform: translate(-30px,16px) rotate(-4deg); }
  .profile-sheet.back-identity { height: 338px; transform: translate(30px,10px) rotate(4deg); }
  .sheet-topline { min-height: 39px; padding-bottom: 9px; }
  .sheet-blocks { gap: 7px; padding-top: 9px; }
  .sheet-block { min-height: 67px; padding: 10px 11px; grid-template-columns: 30px minmax(0,1fr); gap: 9px; border-radius: 14px; }
  .sheet-block > b { width: 30px; height: 30px; border-radius: 9px; }
  .sheet-block strong { font-size: 11px; }
  .sheet-block small { font-size: 9px; }
  .sheet-footer { min-height: 42px; margin-top: 8px; font-size: 9px; }
  .stage-chip { padding: 7px 9px; font-size: 9px; }
  .stage-chip.local { left: 2px; top: 74px; }
  .stage-chip.eval { right: 0; bottom: 78px; }

  /* Sticky navigation is two-tiered: previous/next plus five directly tappable steps. */
  .mobile-flow-nav {
    position: sticky;
    z-index: 70;
    top: 70px;
    display: grid;
    gap: 7px;
    margin: 4px 0 13px;
    padding: 7px;
    border: 1px solid var(--line-med);
    border-radius: 19px;
    background: color-mix(in srgb, var(--panel-3) 98%, black);
    box-shadow: 0 10px 26px rgba(0,0,0,.15);
    transform: translateZ(0);
  }
  .mobile-flow-top {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) 68px;
    align-items: center;
    gap: 8px;
  }
  .mobile-flow-nav button {
    border: 1px solid var(--line-soft);
    background: var(--panel-2);
    color: var(--ink);
    font: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-back,
  .mobile-next {
    min-height: 44px;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 790;
    transition: transform 150ms var(--motion-ease), background 180ms ease, opacity 180ms ease;
  }
  .mobile-back:active,
  .mobile-next:active { transform: scale(.95); }
  .mobile-flow-nav button:disabled { opacity: .28; }
  .mobile-flow-nav .mobile-next {
    border-color: color-mix(in srgb, var(--product) 55%, transparent);
    background: var(--product);
    color: #0a130d;
  }
  .mobile-step-copy { min-width: 0; display: grid; gap: 2px; }
  .mobile-step-copy small { color: var(--ink-soft); font: 750 9px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .mobile-step-copy strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

  .mobile-step-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel-2) 86%, black);
    overflow: hidden;
  }
  .mobile-step-indicator {
    position: absolute;
    z-index: 0;
    top: 3px;
    bottom: 3px;
    left: 0;
    border: 1px solid color-mix(in srgb, var(--product) 30%, transparent);
    border-radius: 10px;
    background: var(--product-soft);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
    transition: transform 280ms cubic-bezier(.22,1,.36,1), width 280ms cubic-bezier(.22,1,.36,1);
    will-change: transform;
  }
  .mobile-step-indicator.no-transition { transition: none !important; }
  .mobile-step-tab {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 42px;
    padding: 4px 2px;
    border: 0 !important;
    border-radius: 10px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1px;
    background: transparent !important;
    color: var(--ink-soft) !important;
    transition: color 180ms ease, transform 160ms var(--motion-ease);
  }
  .mobile-step-tab:active { transform: scale(.94); }
  .mobile-step-tab > span { font: 800 10px/1 var(--mono); }
  .mobile-step-tab > small {
    width: 100%;
    overflow: hidden;
    font-size: 8px;
    font-weight: 720;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-step-tab.is-complete { color: color-mix(in srgb, var(--product) 68%, var(--ink-soft)) !important; }
  .mobile-step-tab.is-current { color: var(--product) !important; }

  /* One high-level task is painted at a time. JS adds directional transform/opacity transitions. */
  body.mobile-flow .control-deck,
  body.mobile-flow .editor-panel,
  body.mobile-flow .preview-panel { display: none; }
  body.mobile-flow[data-mobile-step="setup"] .control-deck { display: grid; }
  body.mobile-flow[data-mobile-step="product"] .editor-panel,
  body.mobile-flow[data-mobile-step="identity"] .editor-panel,
  body.mobile-flow[data-mobile-step="instructions"] .editor-panel { display: block; }
  body.mobile-flow[data-mobile-step="output"] .preview-panel { display: block; }

  body.mobile-flow .editor-panel .root-section { display: none; }
  body.mobile-flow[data-mobile-step="product"] .editor-panel .section-product,
  body.mobile-flow[data-mobile-step="identity"] .editor-panel .section-identity,
  body.mobile-flow[data-mobile-step="instructions"] .editor-panel .section-instructions { display: block; }

  .control-deck {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 12px;
    border-radius: 22px;
  }
  .control-card {
    border: 0 !important;
    padding: 2px 0 10px;
    border-radius: 0;
    background: transparent;
  }
  .control-card + .control-card { padding-top: 13px; border-top: 1px solid var(--line-soft) !important; }
  .control-card::before { left: 2px; top: 0; }
  .control-label { margin: 10px 0 8px 2px; font-size: 10px; }
  .deck-actions {
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 0 0;
    border-top: 1px solid var(--line-soft);
  }
  .deck-actions .button {
    width: 100%;
    min-height: 48px;
    background: var(--panel-2);
    color: var(--ink-soft);
    border-color: var(--line-soft);
  }
  .deck-actions .button.primary { background: var(--panel-2); color: var(--ink); border-color: var(--line-med); }

  /* Legacy listboxes never become fixed overlays on mobile. */
  .select-menu { display: none !important; }
  .select-trigger {
    min-height: 54px;
    padding: 9px 13px;
    transition: transform 160ms var(--motion-ease), border-color 180ms ease, background 180ms ease;
  }
  .select-trigger:active { transform: scale(.985); }
  .smart-select.mobile-control-replaced .select-trigger { display: none; }

  .mobile-direct-choices { display: grid; gap: 8px; }
  .mobile-choice-card {
    position: relative;
    width: 100%;
    min-height: 66px;
    display: grid;
    gap: 3px;
    padding: 12px 42px 12px 13px;
    border: 1px solid var(--line-soft);
    border-radius: 15px;
    background: var(--panel-2);
    color: var(--ink);
    text-align: left;
    font: inherit;
    transition: transform 180ms var(--motion-ease), border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
  }
  .mobile-choice-card:active { transform: scale(.985); }
  .mobile-choice-card strong { font-size: 14px; }
  .mobile-choice-card small { color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
  .mobile-choice-card::after {
    content: "✓";
    position: absolute;
    right: 15px;
    top: 50%;
    color: var(--product);
    font-weight: 900;
    opacity: 0;
    transform: translateY(-50%) scale(.55) rotate(-12deg);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.22,1,.36,1);
  }
  .mobile-choice-card[aria-checked="true"] {
    border-color: color-mix(in srgb, var(--product) 45%, var(--line-med));
    background: color-mix(in srgb, var(--product-soft) 70%, var(--panel-2));
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
    transform: translateY(-1px);
  }
  .mobile-choice-card[aria-checked="true"]::after { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }

  dialog.mobile-choice-dialog {
    width: calc(100% - 18px);
    max-width: 520px;
    max-height: min(78dvh, 650px);
    margin: auto auto calc(10px + env(safe-area-inset-bottom));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line-med);
    border-radius: 24px;
    background: var(--panel-3);
    color: var(--ink);
    box-shadow: 0 24px 68px rgba(0,0,0,.38);
  }
  dialog.mobile-choice-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0,1fr);
    animation: mobile-dialog-in 240ms cubic-bezier(.22,1,.36,1);
  }
  @keyframes mobile-dialog-in {
    from { opacity: 0; transform: translate3d(0,20px,0) scale(.982); }
  }
  dialog.mobile-choice-dialog::backdrop {
    background: rgba(5,8,6,.72);
    transition: background 170ms ease;
  }
  dialog.mobile-choice-dialog[open]::backdrop { animation: mobile-backdrop-in 180ms ease-out; }
  dialog.mobile-choice-dialog.is-closing::backdrop { background: rgba(5,8,6,0); }
  @keyframes mobile-backdrop-in { from { background: rgba(5,8,6,0); } }

  .mobile-dialog-head {
    min-height: 66px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 44px;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .mobile-dialog-head small { display: block; margin-bottom: 2px; color: var(--ink-soft); font: 750 9px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
  .mobile-dialog-head strong { display: block; font-size: 16px; }
  .mobile-dialog-close {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    background: var(--panel-2);
    color: var(--ink);
    font-size: 22px;
    transition: transform 150ms var(--motion-ease), background 180ms ease;
  }
  .mobile-dialog-close:active { transform: scale(.92) rotate(4deg); }
  .mobile-dialog-options { overflow: auto; padding: 9px; overscroll-behavior: contain; }
  .mobile-dialog-group { padding: 12px 10px 6px; color: var(--ink-soft); font: 800 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .mobile-dialog-option {
    position: relative;
    width: 100%;
    min-height: 62px;
    display: grid;
    gap: 3px;
    padding: 12px 42px 12px 13px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    font: inherit;
    transition: transform 160ms var(--motion-ease), border-color 190ms ease, background 190ms ease;
  }
  .mobile-dialog-option:active { transform: scale(.985); }
  .mobile-dialog-option strong { font-size: 14px; }
  .mobile-dialog-option small { color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
  .mobile-dialog-option::after {
    content: "✓";
    position: absolute;
    right: 16px;
    top: 50%;
    color: var(--product);
    font-weight: 900;
    opacity: 0;
    transform: translateY(-50%) scale(.55);
    transition: opacity 160ms ease, transform 210ms cubic-bezier(.22,1,.36,1);
  }
  .mobile-dialog-option[aria-checked="true"] { border-color: color-mix(in srgb, var(--product) 32%, transparent); background: var(--product-soft); }
  .mobile-dialog-option[aria-checked="true"]::after { opacity: 1; transform: translateY(-50%) scale(1); }

  .status { margin: 0 0 12px; max-width: 100%; min-height: 34px; font-size: 10px; }
  .workspace { display: block; }
  .panel { border-radius: 22px; box-shadow: 0 12px 30px rgba(0,0,0,.11); }
  .editor-panel { border: 0; background: transparent; box-shadow: none; }
  .editor-panel .panel-heading { min-height: 0; margin-bottom: 8px; padding: 14px 4px 10px; border: 0; }
  .editor-panel .panel-heading h2 { font-size: 26px; }
  .editor-panel .panel-caption { max-width: 36ch; font-size: 12px; }
  .editor-panel #validate-button { display: none; }
  .editor-panel form { gap: 0; padding: 0; }
  .validation-summary { margin: 0 0 10px; }

  .root-section {
    padding: 12px 4px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .root-section::before, .root-section::after { display: none !important; }
  .root-section > legend { width: 100%; padding: 0; margin-bottom: 6px; font-size: 21px; letter-spacing: -.025em; }
  .root-section > .section-note { margin: 0 0 20px; padding: 0; font-size: 12px; line-height: 1.55; }
  .nested-section {
    margin: 22px 0 4px;
    padding: 16px 14px 13px;
    border: 1px solid var(--line-soft);
    border-radius: 17px;
    background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  }
  .nested-section > legend { padding: 0 7px; font-size: 13px; }
  .field { gap: 7px; margin-bottom: 18px; }
  .field > label { font-size: 13px; }
  .field-help { margin-bottom: 2px; font-size: 11px; line-height: 1.5; }
  input, textarea { min-height: 50px; border-radius: 14px; font-size: 14px; }
  textarea { min-height: 92px; max-height: 280px; resize: none; }
  .field .select-trigger { min-height: 52px; }

  @supports (field-sizing: content) {
    textarea {
      field-sizing: content;
      min-block-size: 92px;
      max-block-size: 280px;
      overflow-y: auto;
    }
  }

  .mobile-switch-control {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px 9px 13px;
    border: 1px solid var(--line-soft);
    border-radius: 15px;
    background: var(--panel-2);
    transition: transform 170ms var(--motion-ease), border-color 200ms ease, background 200ms ease;
  }
  .mobile-switch-control:active { transform: scale(.985); }
  .mobile-switch-control[aria-checked="true"] { border-color: color-mix(in srgb, var(--product) 28%, var(--line-soft)); background: color-mix(in srgb, var(--product-soft) 35%, var(--panel-2)); }
  .mobile-switch-copy { display: grid; gap: 2px; text-align: left; }
  .mobile-switch-copy strong { color: var(--ink); font-size: 12px; }
  .mobile-switch-copy small { color: var(--ink-soft); font-size: 10px; }
  .mobile-switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 30px;
    border-radius: 99px;
    background: var(--line-med);
    transition: background 220ms ease, box-shadow 220ms ease;
  }
  .mobile-switch-track::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 7px rgba(0,0,0,.22);
    transition: transform 240ms cubic-bezier(.22,1,.36,1);
  }
  .mobile-switch-control[aria-checked="true"] .mobile-switch-track { background: var(--product); box-shadow: 0 0 0 4px color-mix(in srgb, var(--product) 10%, transparent); }
  .mobile-switch-control[aria-checked="true"] .mobile-switch-track::after { transform: translateX(18px); }

  .mobile-segmented {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line-soft);
    border-radius: 15px;
    background: var(--panel-2);
    overflow: hidden;
  }
  .mobile-segment-indicator {
    position: absolute;
    z-index: 0;
    top: 4px;
    bottom: 4px;
    left: 0;
    border: 1px solid color-mix(in srgb, var(--product) 28%, transparent);
    border-radius: 11px;
    background: var(--product-soft);
    transition: transform 260ms cubic-bezier(.22,1,.36,1), width 260ms cubic-bezier(.22,1,.36,1);
    will-change: transform;
  }
  .mobile-segment-indicator.no-transition { transition: none !important; }
  .mobile-segmented button {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 48px;
    padding: 5px 2px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 9px;
    font-weight: 760;
    line-height: 1.15;
    transition: color 180ms ease, transform 150ms var(--motion-ease);
  }
  .mobile-segmented button:active { transform: scale(.92); }
  .mobile-segmented button[aria-checked="true"] { color: var(--product); }

  .json-details.mobile-json-details { margin: 10px 0 0; border-top: 1px solid var(--line-soft); padding-top: 7px; }
  .json-details summary { min-height: 50px; align-items: center; }
  .json-details textarea { min-height: 260px; }
  .json-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .json-actions .button { width: 100%; }

  .preview-panel { border-radius: 22px; }
  .preview-panel .panel-heading { min-height: 0; padding: 20px 17px 16px; }
  .preview-panel .panel-heading h2 { font-size: 24px; }
  .preview-panel .panel-caption { font-size: 12px; line-height: 1.5; }
  .character-summary { display: none; }
  .preview-use-note { margin: 0 10px 8px; font-size: 11px; }`r`n  .output-heading, .output-heading > div { flex-wrap: wrap; }
  .output-stack { padding: 10px; gap: 10px; }
  .output-card { border-radius: 16px; }
  .output-heading { min-height: 58px; padding: 9px 9px 9px 12px; }
  .copy-button { min-height: 44px; min-width: 72px; }
  pre { max-height: 320px; padding: 13px 12px; font-size: 11px; }

  .explanation { margin: 42px 0 20px; padding: 26px 20px; grid-template-columns: 1fr; gap: 13px; border-radius: 24px; }
  .explanation > p { grid-column: auto; }
  .explanation-rule { margin-bottom: 4px; }
  .explanation h2 { font-size: 30px; }
  .footer-inner { gap: 7px; }
}

@media (max-width: 390px) {
  .shell { width: calc(100% - 16px); }
  h1 { font-size: clamp(39px, 13vw, 52px); }
  .hero-stage { min-height: 388px; }
  .profile-sheet { width: min(315px, 88vw); }
  .stage-chip.local { left: -2px; }
  .stage-chip.eval { right: -2px; }
  .mobile-flow-top { grid-template-columns: 44px minmax(0,1fr) 60px; }
  .mobile-step-tab > small { font-size: 7.5px; }
  .mobile-segmented button { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-step-indicator,
  .mobile-segment-indicator,
  .mobile-choice-card,
  .mobile-switch-control,
  .mobile-switch-track,
  .mobile-switch-track::after,
  .mobile-dialog-option,
  .select-trigger,
  .mobile-back,
  .mobile-next { transition: none !important; }
  dialog.mobile-choice-dialog[open],
  dialog.mobile-choice-dialog[open]::backdrop { animation: none; }
}
`r`n