/* Shared phone refinements. Keep editorial copy and sticky scenes in distinct
   areas, including short viewports and the longer Arabic chapter headings. */
@media (max-width: 800px) {
  :root { --mobile-story-height: clamp(220px, 36svh, 320px); }
  /* Camera captions have no separate text lane at tablet widths. */
  .arrival-viewfinder { display: none; }
  .compliance-stage, .twin-stage {
    top: 80px;
    height: var(--mobile-story-height);
    min-height: 0;
  }
  .compliance-chapter > div, .twin-chapter > div {
    /* The document already supplies 100px of scroll padding (80px header
       plus 20px breathing room). Add the scene, not the header a second time. */
    scroll-margin-top: calc(var(--mobile-story-height) + 4px);
  }
  .compliance-instrument, .twin-instrument { max-width: calc(88% - 100px); }
  .compliance-instrument > span, .twin-instrument > span { line-height: 1.6; }
  .compliance-pause, .twin-pause { min-height: 44px; top: 0; font-size: 9px; }
  .compliance-story-nav a, .twin-story-nav a { min-width: 0; }
  .compliance-legend span, .twin-scene-key > span { min-width: 0; line-height: 1.5; }
  .compliance-legend span:last-child, .twin-scene-key > span:last-child { display: none; }
  .twin-model-label { max-width: 44%; white-space: normal; letter-spacing: 0; line-height: 1.5; top: auto !important; bottom: 88px; }
  .twin-model-label span { display: none; }
  .resource-toolbar button { min-width: 44px; min-height: 44px; }
  .footer-main a, .footer-directory a { overflow-wrap: anywhere; }
  .matrix-end a, .decision-knowledge a { white-space: normal; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; }
}

@media (max-width: 760px) {
  .agentic-visual { top: 80px; height: var(--mobile-story-height); min-height: 0; }
  .agentic-chapter > div { scroll-margin-top: calc(var(--mobile-story-height) + 4px); }
  .agentic-scene-top button { min-height: 44px; font-size: 9px; }
  .agentic-mission { top: 50px; }
  .agentic-scene-footer p { display: none; }
  .agentic-stage-nav a { min-width: 0; }
  .agentic-object-label { top: auto !important; bottom: 80px !important; left: 50% !important; transform: translateX(-50%); max-width: 80%; }
  .agentic-object-label p { white-space: normal; line-height: 1.5; }
}

/* On phones the introduction flows into a compact, persistent factory view.
   Long cards scroll below it; their text never shares the model's viewport. */
@media (max-width: 600px) {
  .factory-experience { --mobile-factory-height: clamp(240px, 38svh, 340px); display: grid; grid-template-columns: minmax(0, 1fr); }
  .factory-narrative { display: contents; }
  .factory-scene-track, .factory-interface-track { position: relative; inset: auto; grid-column: 1; grid-row: 2 / 7; min-width: 0; }
  .factory-scene-track { z-index: 3; }
  .factory-interface-track { z-index: 4; }
  .factory-stage, .factory-interface { top: 80px; height: var(--mobile-factory-height); min-height: 0; }
  .factory-stage { box-shadow: 0 12px 24px #06151c; }
  .factory-beat { position: relative; z-index: 2; grid-column: 1; min-height: 0; padding: calc(var(--mobile-factory-height) + 30px) 5% 64px; scroll-margin-top: 80px; }
  .factory-beat--opening { grid-row: 1; padding: 112px 5% 32px; }
  [data-factory-beat="1"] { grid-row: 2; }
  [data-factory-beat="2"] { grid-row: 3; }
  [data-factory-beat="3"] { grid-row: 4; }
  [data-factory-beat="4"] { grid-row: 5; }
  [data-factory-beat="5"] { grid-row: 6; }
  .factory-copy { position: static; width: 100%; max-width: none; }
  .factory-copy h1 { font-size: clamp(32px, 9.4vw, 44px); }
  .factory-intro { font-size: 14px; max-width: none; }
  .factory-actions { gap: 12px 20px; margin-top: 20px; }
  .factory-actions .button, .factory-demo { min-height: 44px; font-size: 11px; }
  .factory-demo { display: inline-flex; align-items: center; gap: 6px; }
  .opening-index, .arrival-viewfinder, .scene-annotations, .factory-scroll-cue { display: none; }
  .factory-canvas { mask-image: linear-gradient(#000 0%, #000 68%, transparent 85%); }
  .factory-vignette { background: linear-gradient(#06151c 0%, transparent 20%, transparent 65%, #06151c 85%); }
  .factory-status { display: flex; top: 15px; inset-inline-start: 5%; inset-inline-end: 60px; font-size: 10px; }
  .factory-status > * { display: none; }
  .factory-status [data-factory-status] { display: block; }
  .factory-controls { bottom: 0; gap: 0; }
  .factory-controls::before { display: none; }
  .factory-timeline { width: 100%; max-width: none; }
  .factory-timeline input { display: none; }
  .factory-stage-buttons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid #48746655; }
  .factory-stage-buttons button, .factory-stage-buttons button[aria-pressed=true] { flex-direction: column; justify-content: center; gap: 3px; min-width: 44px; min-height: 48px; padding: 5px 0; font-size: 0; white-space: normal; }
  .factory-stage-buttons button span { display: block; font-size: 10px; }
  .factory-stage-buttons button[aria-pressed=true] { border-top: 2px solid #22d3a6; background: #22d3a60c; }
  .factory-motion { position: absolute; inset-inline-end: 0; bottom: calc(var(--mobile-factory-height) - 51px); width: 44px; height: 44px; }
  .factory-footnote { bottom: 54px; font-size: 7px; line-height: 1.5; }
  .factory-footnote a { display: none; }
  .factory-story-card { width: 100%; max-width: 100%; padding: 22px; background: #0a2028; }
  .factory-story-card h2 { font-size: clamp(27px, 7.6vw, 34px); }
  .story-card-body { font-size: 14px; }
  .story-card-facts dt, .story-card-facts dd { font-size: 12px; }
  .story-card-link { min-height: 44px; font-size: 12px; }
  .factory-experience .story-card-facts > div { grid-template-columns: 1fr; gap: 6px; }
  .story-card-meta p { font-size: 8px; }
}

/* A pinned scene must not consume a landscape phone's entire reading area. */
@media (max-width: 900px) and (max-height: 500px) {
  .agentic-visual, .twin-stage, .compliance-stage { height: calc(100svh - 80px); min-height: 0; }
  .agentic-chapter > div, .twin-chapter > div, .compliance-chapter > div { scroll-margin-top: 104px; }
  .growth-model { position: relative; top: 0; }
  .growth-story-copy article { padding-top: 45px; }
}
@media (max-width: 800px) and (max-height: 500px) {
  .twin-stage, .compliance-stage { position: relative; top: 0; height: 240px; }
}
@media (max-width: 760px) and (max-height: 500px) {
  .agentic-visual { position: relative; top: 0; height: 240px; }
}
@media (min-width: 601px) and (max-width: 900px) and (max-height: 500px) {
  .factory-controls, .factory-footnote, .arrival-viewfinder, .scene-annotations, .raqib-system, .opening-index { display: none; }
}