/* A330 Offline — shared responsive presentation layer.
   This file changes layout only. It does not alter navigation, data, or calculations. */

:root {
  --a330-page-edge: clamp(8px, 1.15vw, 22px);
  --a330-safe-left: max(var(--a330-page-edge), env(safe-area-inset-left));
  --a330-safe-right: max(var(--a330-page-edge), env(safe-area-inset-right));
}

html,
body {
  width: 100%;
  max-width: none;
  min-width: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Remove legacy desktop-only page caps while retaining each section's styling. */
body > .wrap,
html[data-theme="light"] body > .wrap {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--a330-safe-left) !important;
  padding-right: var(--a330-safe-right) !important;
}

body > header .header-inner,
body > .top .topin,
body > header .topin,
body > .topin,
body > main.shell,
body > .shell {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/*
 * Some views are created after the page has loaded and bring their own
 * desktop width caps. Keep these work areas fluid too. The extra html/body
 * specificity wins over the late FIN Database style without changing its
 * search or navigation logic.
 */
html body.ammFindbMode .searchbar,
html body.ammFindbMode .finDbIntro,
html body.ammFindbMode .finDbCard {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

/* TSM MEL/detail overlay: use the available viewport instead of a 680 px cap. */
html body .melov > .melbox {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-left: var(--a330-safe-left) !important;
  padding-right: var(--a330-safe-right) !important;
}

/* IPC selected-reference viewer: fill the complete live browser viewport.
   Its existing content/figure split, zoom controls and navigation stay intact. */
html body #modalRoot > .modal {
  box-sizing: border-box !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  padding-top: env(safe-area-inset-top) !important;
  padding-right: env(safe-area-inset-right) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  padding-left: env(safe-area-inset-left) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: hidden !important;
}

html body #modalRoot > .modal > .ipcSplitViewer.modalbox {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Keep a panned/zoomed IPC drawing inside the live viewport. The list and
   figure panes retain their own scrolling while the background page stays put. */
html:has(body #modalRoot > .modal),
html:has(body #modalRoot > .modal) body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* Keep the shared Back/Forward history controls in their own upper-right lane.
   Native manual controls (count, Light and Reset) sit on a second row below. */
@media (min-width: 721px) {
  html body:has(> #a330SequencePageNavV85:not([style*="display: none"])) > .wrap > .hdr {
    box-sizing: border-box !important;
    min-height: 112px !important;
    align-items: flex-start !important;
  }

  html body:has(> #a330SequencePageNavV85:not([style*="display: none"])) > .wrap > .hdr > .stat,
  html body:has(> #a330SequencePageNavV85:not([style*="display: none"])) > .wrap > .hdr > .hstat,
  html body:has(> #a330SequencePageNavV85:not([style*="display: none"])) > .wrap > .hdr > .hr,
  html body:has(> #a330SequencePageNavV85:not([style*="display: none"])) > .wrap > .hdr > #themeBtn,
  html body:has(> #a330SequencePageNavV85:not([style*="display: none"])) > .wrap > .hdr > .a330ThemeBtn,
  html body:has(> #a330SequencePageNavV85:not([style*="display: none"])) > .wrap > .hdr > #a330ResetBtn {
    align-self: flex-end !important;
    margin-top: auto !important;
  }

  /* The IPC figure viewer is full-screen, so reserve its first row for the
     shared history controls and keep the viewer close button unobstructed. */
  html body:has(> #a330SequencePageNavV85:not([style*="display: none"]))
    #modalRoot > .modal > .ipcSplitViewer.modalbox > .modalhdr {
    box-sizing: border-box !important;
    min-height: 96px !important;
    padding: 54px 15px 10px !important;
    align-content: flex-end !important;
    row-gap: 8px !important;
  }

  html body:has(> #a330SequencePageNavV85:not([style*="display: none"]))
    #modalRoot > .modal > .ipcSplitViewer.modalbox > .modalhdr > .xbtn {
    position: relative !important;
    z-index: 2 !important;
    min-width: 42px !important;
    min-height: 42px !important;
    flex: 0 0 42px !important;
    margin-left: auto !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}

/* Let grid/flex children shrink instead of forcing content off-screen. */
main,
section,
article,
aside,
.wrap,
.shell,
.workspace,
.layout,
.panel,
.card,
.viewer,
.body,
.content {
  min-width: 0;
}

img,
svg,
canvas {
  max-width: 100%;
}

/* The CLP landing cards become one clear column on phone-sized screens. */
@media (max-width: 600px) {
  :root {
    --a330-page-edge: 8px;
  }

  html body.ammFindbMode .searchbar,
  html body.ammFindbMode .searchbar input {
    min-width: 0 !important;
  }

  html body.ammFindbMode .finDbRow {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html body.ammFindbMode .finDbRow > div {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  body > .wrap > .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body > header .header-inner,
  body > .top .topin,
  body > header .topin {
    min-width: 0 !important;
  }

  /* Manual headers get two compact rows instead of squeezing the title
     between the task count and utility buttons. */
  body > .wrap > .hdr {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 10px !important;
  }

  body > .wrap > .hdr > .htxt,
  body > .wrap > .hdr > .headtext {
    flex: 1 1 calc(100% - 58px) !important;
    min-width: 0 !important;
  }

  body > .wrap > .hdr > .htxt h1,
  body > .wrap > .hdr > .headtext h1 {
    font-size: clamp(16px, 4.8vw, 20px) !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
  }

  body > .wrap > .hdr > .stat,
  body > .wrap > .hdr > .hstat {
    margin-left: auto !important;
  }

  table {
    max-width: 100%;
  }
}

/* AMM/TSM/MEL/CML/ASM technical split views:
   phone portrait uses two full-width, independently scrollable panels. */
@media (max-width: 600px) and (orientation: portrait) {
  body:not(.ammContentFull):not(.ammFigFull) .ammSplit {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(46svh, 46dvh) minmax(46svh, 46dvh) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body:not(.ammContentFull):not(.ammFigFull) .ammProcPane,
  body:not(.ammContentFull):not(.ammFigFull) .ammFigPane {
    width: 100% !important;
    max-width: 100% !important;
    height: 46svh !important;
    height: 46dvh !important;
    min-height: 320px !important;
    overflow: hidden !important;
  }

  body:not(.ammContentFull):not(.ammFigFull) .ammProcPane {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border, #d8e0ea) !important;
  }

  body:not(.ammContentFull):not(.ammFigFull) .ammPaneBody,
  body:not(.ammContentFull):not(.ammFigFull) .ammFigCanvas {
    min-width: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* IPC split overlay follows the same phone pattern, without cropping either pane. */
  .ipcSplitViewer.modalbox {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  body:not(.ipcFigFull):not(.ipcContentFull) .ipcSplit {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  body:not(.ipcFigFull):not(.ipcContentFull) .ipcPartPane {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border, #d8e0ea) !important;
  }

  body:not(.ipcFigFull):not(.ipcContentFull) .ipcPane,
  body:not(.ipcFigFull):not(.ipcContentFull) .ipcPaneBody,
  body:not(.ipcFigFull):not(.ipcContentFull) .ipcFigCanvas {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* iPhone Pro Max landscape has little vertical room: preserve the side-by-side
   technical view and make its own controls/panes scroll instead of clipping. */
@media (orientation: landscape) and (max-height: 520px) {
  .ammSplit,
  .ipcSplitViewer.modalbox {
    min-height: 0 !important;
  }

  .ammPaneBody,
  .ammFigCanvas,
  .ipcPaneBody,
  .ipcFigCanvas {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Full-screen viewers use the live viewport on Safari/Chrome/WorldwideWeb. */
.fullscreen,
.full,
.is-fullscreen {
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
}

@supports (height: 100dvh) {
  .fullscreen .viewer {
    max-height: 100dvh;
  }
}