/* ===========================================================================
   v059 - the phone layout: no handwriting, just the question and the answer
   ---------------------------------------------------------------------------
   Layered above the v027..v058 chain; nothing here edits an older file.
   Selected by [data-device="phone"], which v059-device.mjs sets from the SHORT
   edge + a coarse pointer (see that file for why width alone is wrong).

   Why a phone does not get the handwriting panel, in the owner's words: the
   screen is small, so writing on it is useless. Phones get the question and the
   official mark scheme side by side, plus the camera - a student works on paper
   and photographs it, which is what the Photo / From phone buttons are for.
   =========================================================================== */

/* ---------- 1. two panes: question and answer, no writing ----------------- */

/* Landscape: wide and short, so question and answer sit side by side.
   Portrait: tall and narrow, so they stack. */
[data-device="phone"] #workspace .workspaceGrid {
  display: flex !important;
  gap: 8px !important;
  overflow: hidden !important;   /* each pane scrolls on its own */
}

[data-device="phone"][data-orient="landscape"] #workspace .workspaceGrid {
  flex-direction: row !important;
}
[data-device="phone"][data-orient="landscape"] #workspace .questionPaper { flex: 0 0 46% !important; }
[data-device="phone"][data-orient="landscape"] #workspace .workingPanel { flex: 1 1 auto !important; }

[data-device="phone"][data-orient="portrait"] #workspace .workspaceGrid {
  flex-direction: column !important;
}
[data-device="phone"][data-orient="portrait"] #workspace .workingPanel { flex: 1 1 auto !important; }

/* the drag handle only makes sense when there are two columns to balance */
[data-device="phone"] #workspace .workspaceSplitter { display: none !important; }

/* A flex item defaults to `min-width:auto`, so the wide question image inside
   stretches the column past the viewport (measured 760px inside a 390px
   screen). Pin both children to the space they are given.
   NOTE: do not add `min-height: 0` here - it lands after the portrait rule
   below and silently cancels the question pane's floor (same specificity, later
   wins). Each orientation sets its own. */
[data-device="phone"] #workspace .questionPaper,
[data-device="phone"] #workspace .workingPanel {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: calc(100dvh / var(--ial-ui-zoom, 1) - 128px) !important;
  overflow: auto !important;
}

/* landscape is the cramped one: both panes share the height, so neither may
   grow past it */
[data-device="phone"][data-orient="landscape"] #workspace .questionPaper,
[data-device="phone"][data-orient="landscape"] #workspace .workingPanel {
  min-height: 0 !important;
}

/* portrait stacks them, so the question gets a fixed slice and the answer takes
   the rest - a short question used to collapse the pane to ~180px, too small to
   read a paper figure.
   `min-height` alone is not enough here: v029 sets `height: 100%` on this pane,
   which is a percentage of a flex container that is still being sized, so it
   resolves against the content and wins (measured 179px with min-height:300px
   in effect). An explicit flex-basis sidesteps the cycle. */
[data-device="phone"][data-orient="portrait"] #workspace .questionPaper {
  flex: 0 0 300px !important;
  height: auto !important;
  min-height: 300px !important;
  max-height: 40vh !important;
}
[data-device="phone"][data-orient="portrait"] #workspace .workingPanel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* ---------- 2. handwriting is OPTIONAL on a phone, not removed ------------ */

/* Redesign ch.10 + test case TC-018: on a phone the default answer mode is
   text/symbols, and handwriting must remain available as a SWITCHABLE option
   ("手写切换入口必须存在且可用 —— 不得一刀切隐藏").
   So nothing is hidden outright any more. Collapsing reuses the site-wide
   `body.ink-hidden` (defined in v033) - the same one the ✏️ button in the top
   bar drives, which already remembers the student's choice in localStorage.
   The default for a phone is set in v059-device.mjs: collapsed on first visit,
   and from then on whatever the student picked. */

/* With the writing column collapsed, the right pane holds only the answer, so
   the Work / Mark Scheme switch has nothing to switch between. Opening the
   writing pad brings the tabs back automatically. */
[data-device="phone"] body.ink-hidden #workspace #v027WorkTabs { display: none !important; }

/* the on-paper writing bar (Paper mode) stays off on a phone - that is
   full-paper handwriting, which is the thing that does not work at this size */
[data-device="phone"] .paperInkToolbar { display: none !important; }

/* The writing toolbar wraps on a narrow screen and stacks into a 231px-tall
   block, which squeezes the canvas itself to zero height - the pad opens onto
   nothing but buttons. Measured on a 390x844 phone: toolbar 231px, canvas 0px,
   inside a 330px panel. One row that scrolls sideways instead. */
[data-device="phone"] #workspace .inkToolbar {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-height: 54px !important;
  flex: 0 0 auto !important;
}

/* the same reasoning for the writing header, which carries a long label */
[data-device="phone"] #workspace .workHead { flex: 0 0 auto !important; }

/* v033 makes the mark-scheme pane permanently visible in workspace mode
   (`display:block!important`), so on a phone the writing pad and the answer are
   BOTH in the panel and they compete for its height. Measured after opening the
   pad: `#inkMethod` got 62px and the canvas inside it 0px, because the pane took
   the rest. Give the writing area a definite height instead, so the canvas has
   something to fill and the panel scrolls to the answer below it. */
[data-device="phone"] body.workspace-mode #workspace .workingPanel {
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

[data-device="phone"] body.workspace-mode #workspace #inkMethod {
  flex: 0 0 auto !important;
  height: 300px !important;
  min-height: 300px !important;
}

/* the canvas itself is flex:1 inside the pad, so it fills the 300px minus the
   toolbar - but only if nothing above it is allowed to grow */
[data-device="phone"] body.workspace-mode #workspace .inkWorkspace {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* ---------- 3. the answer takes the freed space --------------------------- */

/* v027 hides this pane and reveals it only when `.v027-show-ms` is on the
   panel; with the writing column collapsed there is nothing to switch to, so
   show it outright - and hand it back as soon as the pad is opened. */
[data-device="phone"] body.ink-hidden #workspace #v027MarkSchemePane { display: block !important; }
[data-device="phone"] #workspace .v027MarkSchemePane { min-height: 0 !important; }

/* ---------- 4. the top bar has too many buttons for one row --------------- */

[data-device="phone"] #workspace .workspaceTop.task-bar {
  flex-wrap: wrap;
  row-gap: 6px;
}
/* question navigation gets its own row, the actions get the next one */
[data-device="phone"] #workspace .task-bar .taskBarCenter {
  order: 3;
  width: 100%;
  justify-content: center;
}
[data-device="phone"] #workspace .task-bar .taskBarRight {
  order: 4;
  width: 100%;
  flex-wrap: wrap;
  row-gap: 5px;
  justify-content: flex-start;
}
/* the title is the least useful thing up there once space is this tight */
[data-device="phone"] #workspace .task-bar .taskBarLeft { display: none !important; }
/* "Not submitted" is a status, not an action - it can wait for the finish flow */
[data-device="phone"] #workspace .task-bar .taskSubmitStatus { display: none !important; }

/* ---------- 5. the "Self Mark" strip and photos --------------------------- */

[data-device="phone"] #workspace .workspaceSubmit { margin-top: 8px; }

/* ---------- 6. nudge a portrait phone towards landscape ------------------- */

/* Hidden everywhere except a portrait phone: the two-pane view is much easier
   to read when the question and the answer sit side by side, but the student
   chooses - nothing is rotated behind their back. */
.phoneRotateHint { display: none; }

[data-device="phone"][data-orient="portrait"] #workspace .phoneRotateHint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 11px;
  border: 1px solid #c7ddff;
  border-radius: 10px;
  background: #eef4ff;
  color: #274b8f;
  font-size: 12.5px;
  line-height: 1.4;
}

[data-device="phone"][data-orient="portrait"] #workspace .rotateGlyph {
  font-size: 17px;
  line-height: 1;
  flex: 0 0 auto;
}