/* OPCO.AI — mobile edits.
   Phones only: every rule sits inside the max-width:700px query, so desktop never reads this file.
   Loads after opco-mobile-v50.css; Rishi's original styles and scripts stay unchanged. */
@media (max-width: 700px) {
  /* Header: solid, so text never shows through it while the page scrolls underneath. */
  .masthead { background: var(--green) }
  /* Header: no pause button, and the menu button is just a three-line icon
     (its "Menu" text stays in the button for screen readers, at zero size). */
  .utility-controls .motion-control { display: none }
  .masthead .nav-toggle { justify-content: flex-end; min-width: 44px; gap: 0; font-size: 0 }
  .masthead .nav-toggle svg { display: none }
  /* Menu: "Pause motion / Resume motion" sits last, small and set apart (opco-mobile-edits.js adds it).
     Access Terminal keeps the arrow layout it had as the last link. */
  .masthead .nav a[data-open="terminal"] { display: flex; align-items: center; justify-content: space-between; gap: 8px }
  .masthead .nav .nav-motion {
    justify-content: flex-start; min-height: 44px; margin-top: 10px; padding: 14px 0 4px;
    border-top: 1px solid var(--line); font: 400 14px/1.4 var(--sans); letter-spacing: .02em; color: var(--muted); text-align: left;
  }
  .masthead .nav-toggle::after {
    content: ""; flex: none; width: 22px; height: 15px;
    background: linear-gradient(currentColor, currentColor) top / 100% 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) bottom / 100% 1.5px no-repeat;
  }

  /* Architecture Target: centred like the opening and question Targets (the base phone layout pushed it right). */
  .architecture .answer-art { justify-content: center }

  /* Intelligence Layer diagram: the desktop diagram turned upright. Your firm's context runs across the top and
     funnels down into the layer; Policy-approved action sits to its right; the models sit below, with the exchange
     running down and back up. The lines are drawn by chapters-interactions.js from these positions. */
  .layer-public .layer-public-map { grid-template-columns: minmax(0, 1fr) clamp(64px, 22vw, 88px) minmax(0, 1fr); column-gap: 14px; row-gap: 0 }
  .layer-public .layer-public-context-bank { display: flex; flex-direction: column; margin-bottom: 96px }
  .layer-public .layer-public-records { order: 1; margin-top: 6px; padding: 0 }
  .layer-public .layer-public-controls { order: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; margin-top: 26px }
  .layer-public .layer-public-controls li { flex-direction: column; justify-content: flex-end; gap: 9px; text-align: center; font-size: clamp(10px, 3vw, 12px); line-height: 1.35 }
  .layer-public .layer-public-controls li > span { padding: 0 }
  .layer-public .layer-public-controls i { width: 1px; height: 14px; margin: 0 }

  .layer-public .layer-public-center { grid-column: 1 / 3; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) clamp(64px, 22vw, 88px); grid-template-rows: 1fr 1fr; column-gap: 14px; align-self: stretch }
  .layer-public .layer-public-center > .layer-public-zone-title { grid-column: 1; grid-row: 1; align-self: end; justify-self: end; display: block; min-height: 0; width: auto; margin: 0; padding: 0; text-align: right; font-size: clamp(16px, 5vw, 20px) }
  .layer-public .layer-public-target { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 100%; height: auto; margin: 0 }
  .layer-public .layer-public-center-note { grid-column: 1; grid-row: 2; align-self: start; justify-self: end; width: auto; margin: 6px 0 0; padding: 0; text-align: right; font-size: 11px; line-height: 1.5 }
  .layer-public .layer-public-action { grid-column: 3; grid-row: 2; align-self: stretch; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; padding: 0; text-align: center }
  .layer-public .layer-public-action-target { grid-row: 2 }
  .layer-public .layer-public-action > p { grid-row: 1; align-self: end; margin: 0 0 10px; padding: 0; font-size: clamp(16px, 5vw, 20px) }
  .layer-public .layer-public-action > span:last-child { grid-row: 3; align-self: start; font-size: 10.5px; line-height: 1.5; margin-top: 8px }

  .layer-public .layer-public-wire-label { grid-row: 3; align-self: center; margin: 30px 0; padding: 0; font-size: 11px; line-height: 1.5 }
  .layer-public .layer-public-outbound-label { grid-column: 1; justify-self: end; text-align: right }
  .layer-public .layer-public-return-label { grid-column: 3; justify-self: start; text-align: left }
  .layer-public .layer-public-model { grid-column: 1 / -1; grid-row: 4; display: flex; flex-direction: column-reverse; align-items: center; padding: 0 }
  .layer-public .layer-public-model-shape { width: clamp(110px, 34vw, 132px) }
  .layer-public .layer-public-model-boundary { margin: 14px auto 0 }

  /* Enterprise: room under the model capsule for the heron's walk (enterprise-heron.js sizes it to the same width). */
  .enterprise-panel .enterprise-copy .chapter-next { margin-top: clamp(150px, calc(29.2vw + 56px), 176px) }

  /* Predictive forecast example: desktop's left half in miniature (the three systems stacked, curved lines with
     travelling dots into the Intelligence Layer), then a short line down into the chart, which fits the screen.
     The five steps sit in one row right under the chart, so each one plays in view. Lines: predictive-panel.js. */
  .predictive-example-caption { max-width: none }
  #predictive-example-title { display: block; max-width: 25ch }
  .predictive-sample-label { margin-top: 10px; font-size: 8px; letter-spacing: .09em; text-align: right }
  .pi-workflow { grid-template-columns: minmax(0, 132px) minmax(40px, 1fr) auto; row-gap: 46px; margin-top: 26px }
  .pi-inputs { grid-column: 1; grid-row: 1 }
  .pi-inputs .pi-zone-label { margin-bottom: 10px; font-size: 10px }
  .pi-system-grid { grid-template-columns: minmax(0, 1fr); gap: 10px }
  .pi-system { min-height: 0; padding-top: 8px }
  .pi-system > span { font-size: 12px }
  .pi-system small { font-size: 10.5px; margin-top: 2px }
  .pi-source-connections, .pi-forecast-connection { display: block }
  .pi-layer { grid-column: 3; grid-row: 1; align-self: center; margin: 0; z-index: 1 }
  .pi-layer::before, .pi-layer::after { content: none }
  .pi-layer .pi-zone-label { font-size: 10px; letter-spacing: .06em; margin-bottom: 10px }
  .pi-layer-target { width: 72px }
  .pi-layer-note { font-size: 10.5px; line-height: 1.5; margin-top: 8px; max-width: 13ch }
  .pi-forecast { grid-column: 1 / -1; grid-row: 2 }
  .pi-forecast-heading h3 { font-size: 24px }
  .pi-range { font-size: 20px; margin-top: 8px }
  .pi-confidence { margin-top: 10px }
  .pi-chart { width: 100%; margin: 16px 0 0 }
  .pi-chart-legend { gap: 8px 12px; margin-top: 8px; font-size: 10.5px }
  .pi-chart-legend i { width: 12px }
  .pi-example-navigation { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 16px; padding-top: 6px }
  .pi-stage-controls { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px clamp(8px, 3.4vw, 14px); min-width: 0 }
  .pi-stage-controls button { min-height: 44px; padding: 8px 0; border-bottom-width: 1px; font-size: 0; gap: 7px; white-space: nowrap }
  .pi-stage-controls button > span { font-size: 12px }
  .pi-stage-controls button[aria-pressed=true] { font-size: 13px }
  .pi-replay { min-width: 44px; justify-content: center; margin-top: 0; font-size: 0; gap: 0 }
  .pi-replay > span { font-size: 17px }
  .pi-stage-description { min-height: 2.56em; margin-top: 12px; font-size: 22px }

  /* Intellectual Property: the macaw flock measures this marker and draws nothing when it has no height,
     which left the flock's perch band above "The sequence matters" empty on phones. */
  .ip-flock-destination { height: 1px }
  .ip-flock-home { height: 64px }
  /* The three invention cards stack together; the trogons perch on the Predictive card's bottom line (ip-trogons.js),
     with room for their heads inside the card and their tails in the space below it. */
  .ip-stage[data-ip-step="3"] { margin-top: 0; padding-bottom: 46px }
  /* IP cards: the filing line joins the text column under the short description and wraps rather than shrinking. */
  .ip-stage-filing { grid-column: 2; grid-row: 4; margin-top: 6px }
  .ip-stage-filing-status { font-size: 10px }
  .ip-stage-filing-number { font-size: 13px; line-height: 1.5 }
  .ip-retained { margin-top: 48px }

  /* Investment Cube: the turning cube comes first, then the six sample faces (the base phone layout put the faces first). */
  .q-panel > .q-figure { order: 2 }
  .q-panel > .q-sample-reader { order: 3 }
}