/* Approved Product UI mobile surfaces: Figma 105:6, 105:45, 105:84.
   Presentation only; no runtime or clinical integration. */
.mobile-workspace { display: none; }

@media (max-width: 640px) {
  .mobile-workspace ~ .shell,
  .mobile-workspace ~ .ambient { display: none; }

  body { margin: 0; background: #f7f9fc; }

  .mobile-workspace {
    --mobile-ink: #090c12;
    --mobile-muted: #697386;
    --mobile-dark: #0b0f16;
    --mobile-soft: #f7f9fc;
    --mobile-border: rgba(15, 23, 42, .08);
    --mobile-dark-text: #bec7d2;
    --mobile-accent: #8fc9ff;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    box-sizing: border-box;
    width: min(100%, 24.375rem);
    margin: 0 auto;
    padding: 1.25rem;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    border: 1px solid var(--mobile-border);
    border-radius: 1.625rem;
    background: #fff;
    color: var(--mobile-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  .mobile-workspace *,
  .mobile-workspace *::before,
  .mobile-workspace *::after { box-sizing: border-box; }

  .mobile-workspace > * { min-width: 0; margin: 0; }
  .mobile-workspace p { margin: 0; color: var(--mobile-muted); }

  .mobile-app-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
  }
  .mobile-app-header strong {
    flex: 1;
    font-size: 1.25rem;
    line-height: 1.625rem;
    letter-spacing: -.035em;
    font-weight: 600;
  }
  .mobile-app-header span {
    color: var(--mobile-muted);
    font-size: .625rem;
    line-height: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .mobile-page-heading { display: grid; gap: .25rem; }
  .mobile-page-heading h1 {
    margin: 0;
    font-size: 2rem;
    line-height: 2.5625rem;
    letter-spacing: -.035em;
    font-weight: 600;
  }
  .mobile-page-heading p {
    font-size: .875rem;
    line-height: 1.4875rem;
  }

  .mobile-workspace .mobile-kicker,
  .mobile-section-label {
    font-size: .6875rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .mobile-section-label {
    color: var(--mobile-muted);
    letter-spacing: .1em;
  }

  .mobile-stage,
  .mobile-info-card {
    border: 1px solid var(--mobile-border);
  }
  .mobile-stage {
    display: grid;
    gap: 1.125rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
    background: var(--mobile-dark);
  }
  .mobile-stage h2 {
    margin: 0;
    color: #fff;
    font-size: 1.625rem;
    line-height: 2.0625rem;
    font-weight: 600;
    letter-spacing: -.035em;
  }
  .mobile-stage p {
    color: var(--mobile-dark-text);
    font-size: .875rem;
    line-height: 1.4875rem;
  }
  .mobile-stage .mobile-kicker,
  .mobile-info-card-dark .mobile-kicker { color: var(--mobile-accent); }

  .mobile-info-card {
    display: grid;
    gap: .25rem;
    padding: 1.125rem;
    border-radius: 1.25rem;
    background: var(--mobile-soft);
  }
  .mobile-info-card h2 {
    margin: 0;
    color: var(--mobile-ink);
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 600;
    letter-spacing: -.025em;
  }
  .mobile-info-card > p:not(.mobile-kicker) {
    font-size: .8125rem;
    line-height: 1.25rem;
  }
  .mobile-info-card-dark {
    background: var(--mobile-dark);
  }
  .mobile-info-card-dark h2 { color: #fff; }
  .mobile-info-card-dark > p:not(.mobile-kicker) { color: var(--mobile-dark-text); }

  .mobile-step-list {
    display: grid;
    gap: .625rem;
  }

  .mobile-control-row,
  .mobile-nav,
  .mobile-scope-row {
    display: flex;
    gap: .625rem;
  }

  .mobile-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 3rem;
    padding: .625rem 1.125rem;
    border: 1px solid var(--mobile-border);
    border-radius: 999px;
    background: #fff;
    color: var(--mobile-ink);
    font: 600 .8125rem/1.178125rem Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  .mobile-button-primary,
  .mobile-button-active {
    border-color: var(--mobile-dark);
    background: var(--mobile-dark);
    color: #fff;
  }
  .mobile-button-wide { width: 100%; }
  .mobile-button:disabled { opacity: .62; cursor: not-allowed; }
  .mobile-button:focus-visible,
  .mobile-iq-details summary:focus-visible {
    outline: 3px solid #0a84ff;
    outline-offset: 3px;
  }

  .mobile-control-row .mobile-button,
  .mobile-nav .mobile-button,
  .mobile-scope-row .mobile-button {
    flex: 1;
  }

  .mobile-scope-row .mobile-button {
    min-height: 2.75rem;
    padding-inline: .75rem;
    font-size: .75rem;
    line-height: 1.0875rem;
    font-weight: 500;
  }

  .mobile-policy-note {
    font-size: .8125rem;
    line-height: 1.340625rem;
  }

  .mobile-iq-details { width: 100%; }
  .mobile-iq-details summary { list-style: none; cursor: pointer; }
  .mobile-iq-details summary::-webkit-details-marker { display: none; }
  .mobile-iq-details[open] summary { background: var(--mobile-soft); }
  .mobile-iq-details > p {
    padding: 1.125rem;
    font-size: .8125rem;
    line-height: 1.25rem;
  }

  .mobile-workspace .mobile-continuity {
    font-size: .8125rem;
    line-height: 1.340625rem;
  }
  .mobile-workspace .mobile-safety {
    font-size: .6875rem;
    line-height: .875rem;
  }

  .mobile-nav .mobile-button {
    min-height: 2.75rem;
    padding-inline: .75rem;
    font-size: .75rem;
    line-height: 1.0875rem;
    font-weight: 500;
  }
}

/* Shared preview navigation stays available across desktop and mobile layouts. */
.preview-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  color: #145f9f;
  font: 600 12px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
}
.rail { min-width: 0; }
.rail .nav-item { min-height: 44px; }
.shell :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #145f9f;
  outline-offset: 3px;
  border-radius: 6px;
}
.shell .nav-item:focus-visible { outline-offset: -3px; }
.mobile-workspace .preview-back { margin-top: 0; }
@media (max-width: 920px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail nav { max-width: 100%; }
}
@media (forced-colors: active) {
  .shell :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline-color: Highlight;
  }
}