/* ===========================================================================
   v052 — the Paper workspace survives an enlarged interface
   ---------------------------------------------------------------------------
   Reported: "in Paper, once I enlarge the text size I cannot see the status bar
   at the top at all — only at 100%". Measured at 150%:

     .paperWorkspaceTop            height:50px!important, display:flex
     .continuousViewerToolbar      height:44px!important, position:sticky
     .continuousPaperViewport      height:calc(100% - 44px)
     .continuousPaperBody          height:calc(100dvh - 58px)

   Every one of those heights is a px constant, while `zoom` grows the content
   inside them. At 150% the action row and the toolbar both wrap to a second
   line, the fixed box cannot grow, and the extra line spills out of the dark
   header band and over the toolbar underneath: the zoom controls, the question
   counter and the gesture hint all end up overlapping each other.

   A taller `height` would only move the break even further up the zoom ladder.
   The durable fix is to stop pinning these bars: the workspace becomes a flex
   column, the bars take the height their content needs, and the viewer - which
   can absorb any height - takes whatever is left. Nothing can be pushed out of
   the viewport because nothing is measured against the viewport any more
   except the workspace itself, and that is divided by --ial-ui-zoom because
   `dvh` is read against the unzoomed viewport.
   =========================================================================== */

/* ---------- the workspace is a column: header, body ---------- */

body.ial-v030.paper-fullscreen-mode #paperWorkspace {
  display: flex;
  flex-direction: column;
  /* `dvh` ignores zoom, so divide to get the height that renders to exactly
     the viewport instead of 1.5 viewports. */
  height: calc(100dvh / var(--ial-ui-zoom, 1)) !important;
  max-height: calc(100dvh / var(--ial-ui-zoom, 1)) !important;
  min-height: 0 !important;
}

body.paper-fullscreen-mode.ial-v030 #paperWorkspace > .paperWorkspaceTop {
  flex: 0 0 auto;
  height: auto !important;
  min-height: calc(50px / var(--ial-ui-zoom, 1));
  padding: 5px 12px;
  row-gap: 5px;
  column-gap: 10px;
  align-items: center;
}

body.paper-fullscreen-mode.ial-v030 #paperWorkspace > .paperWorkspaceBody.continuousPaperBody {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* ---------- the second bar: viewer toolbar + viewer ---------- */

body.ial-v030 .paperQuestionViewer {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

body.ial-v030 .paperQuestionViewer > .paperViewerToolbar.continuousViewerToolbar {
  flex: 0 0 auto;
  height: auto !important;
  min-height: calc(44px / var(--ial-ui-zoom, 1));
  position: relative;
  top: auto;
  flex-wrap: wrap;
  row-gap: 5px;
  column-gap: 8px;
  padding: 5px 8px;
  align-items: center;
}

body.ial-v030 .paperQuestionViewer > .paperViewerViewport.continuousPaperViewport {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* In Original mode the paper is the only pane, so it owns the whole body. */
body.ial-v030.paper-original-workspace .paperQuestionViewer {
  height: 100% !important;
}

/* ---------- keep each toolbar group on its own line, never overlapping ---------- */

body.ial-v030 .continuousViewerToolbar > div:first-child,
body.ial-v030 .continuousViewerToolbar > .paperViewerRightTools,
body.ial-v030 .continuousViewerToolbar > .sourceInkToolbar {
  min-width: 0;
  max-width: 100%;
}

/* ---------- an enlarged interface gets a quieter header ---------- */

/* The attempt/autosave note and the gesture hint are the first things to go:
   neither is worth a wrapped line on a small or enlarged screen. */
html[data-ui-eff="mid"] body.ial-v030 .paperModeTitle span,
html[data-ui-eff="narrow"] body.ial-v030 .paperModeTitle span,
html[data-ui-eff="mid"] body.ial-v030 .continuousViewerToolbar > div:first-child > span,
html[data-ui-eff="narrow"] body.ial-v030 .continuousViewerToolbar > div:first-child > span {
  display: none !important;
}

html[data-ui-eff="mid"] body.ial-v030 .paperModeTitle,
html[data-ui-eff="narrow"] body.ial-v030 .paperModeTitle {
  min-width: 0;
  flex: 1 1 auto;
}

html[data-ui-eff="mid"] body.ial-v030 .paperModeTitle b,
html[data-ui-eff="narrow"] body.ial-v030 .paperModeTitle b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The action row still wraps, but on its own line below the title, and the
   buttons keep a touch-sized height instead of being squeezed flat. */
html[data-ui-eff="mid"] body.ial-v030 .paperWorkspaceActions,
html[data-ui-eff="narrow"] body.ial-v030 .paperWorkspaceActions {
  flex: 1 1 100%;
  justify-content: flex-end;
  flex-wrap: wrap;
}

html[data-ui-eff="mid"] body.ial-v030 .paperWorkspaceActions .btn,
html[data-ui-eff="narrow"] body.ial-v030 .paperWorkspaceActions .btn {
  min-height: 34px;
  padding: 6px 10px;
  white-space: nowrap;
}

/* The zoom status and Fit/100%/Jump stop being a wrapped jumble: they keep one
   line and the label is dropped before the buttons are. */
html[data-ui-eff="mid"] body.ial-v030 .continuousViewerToolbar > .paperViewerRightTools,
html[data-ui-eff="narrow"] body.ial-v030 .continuousViewerToolbar > .paperViewerRightTools {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin-left: auto;
}

html[data-ui-eff="mid"] body.ial-v030 .continuousViewerToolbar > div:first-child,
html[data-ui-eff="narrow"] body.ial-v030 .continuousViewerToolbar > div:first-child {
  flex: 1 1 auto;
  flex-wrap: wrap;
}

/* ---------- the answer-book header has the same problem ----------
   `.segmentedAnswerToolbar` is `flex:0 0 44px` and `.segmentedInkToolbar` is
   `flex:0 0 38px`, and the `@media(max-width:980px)` block that already
   simplified them (hide the follow toggle, ellipsise the jump button) does not
   fire at 150% because media queries read the unzoomed viewport. Mirror that
   simplification on the effective width instead. */

html[data-ui-eff="mid"] body.ial-v030 .segmentedAnswerToolbar,
html[data-ui-eff="narrow"] body.ial-v030 .segmentedAnswerToolbar,
html[data-ui-eff="mid"] body.ial-v030 .segmentedInkToolbar,
html[data-ui-eff="narrow"] body.ial-v030 .segmentedInkToolbar {
  flex: 0 0 auto;
  height: auto !important;
  min-height: 0;
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 7px;
  padding: 4px 8px !important;
}

html[data-ui-eff="mid"] body.ial-v030 .segmentedAnswerToolbar {
  min-height: calc(44px / var(--ial-ui-zoom, 1));
}
html[data-ui-eff="narrow"] body.ial-v030 .segmentedAnswerToolbar {
  min-height: calc(44px / var(--ial-ui-zoom, 1));
}

/* "Q1 - independent scroll" is a note, not a control; it is the first to go. */
html[data-ui-eff="mid"] body.ial-v030 .segmentedAnswerToolbar > div:first-child > span,
html[data-ui-eff="narrow"] body.ial-v030 .segmentedAnswerToolbar > div:first-child > span {
  display: none !important;
}

html[data-ui-eff="mid"] body.ial-v030 .segmentedAnswerToolbar > div:first-child b,
html[data-ui-eff="narrow"] body.ial-v030 .segmentedAnswerToolbar > div:first-child b,
html[data-ui-eff="mid"] body.ial-v030 .segmentedAnswerToolbar .autoFollowToggle,
html[data-ui-eff="narrow"] body.ial-v030 .segmentedAnswerToolbar .autoFollowToggle {
  white-space: nowrap;
}

html[data-ui-eff="mid"] body.ial-v030 .autoFollowToggle,
html[data-ui-eff="narrow"] body.ial-v030 .autoFollowToggle {
  display: none;
}

html[data-ui-eff="mid"] body.ial-v030 .goCurrentAnswerBtn,
html[data-ui-eff="narrow"] body.ial-v030 .goCurrentAnswerBtn {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-ui-eff="mid"] body.ial-v030 .answerFollowControls,
html[data-ui-eff="narrow"] body.ial-v030 .answerFollowControls {
  min-width: 0;
  flex: 0 1 auto;
  flex-wrap: wrap;
}

/* The ink tool rows wrap instead of running off the edge of a narrow pane. */
html[data-ui-eff="mid"] body.ial-v030 .segmentedInkToolbar .inkPrimaryTools,
html[data-ui-eff="narrow"] body.ial-v030 .segmentedInkToolbar .inkPrimaryTools,
html[data-ui-eff="mid"] body.ial-v030 .paperSourceInkToolbar .inkPrimaryTools,
html[data-ui-eff="narrow"] body.ial-v030 .paperSourceInkToolbar .inkPrimaryTools {
  flex-wrap: wrap;
  row-gap: 4px;
}