/* =====================================================================
   v040 — Readability + answer-sheet scrolling  (v040)
   ---------------------------------------------------------------------
   1) Type scale: the interface was set at 8–12px, which is too small to
      read comfortably on a tablet. Micro labels go to 12px, working text
      to 13–14px, buttons to 13.5px, with taller tap targets.
   2) The practice answer sheet scrolls inside its own pane instead of
      stretching the whole workspace, so the toolbar and the question stay
      put while you write down a long answer. Momentum preserved.
   3) Landscape panning is allowed again in the paper viewer, so a zoomed
      page can be dragged sideways as well as up and down.
   Overrides only: no earlier stylesheet is touched.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Type scale
   --------------------------------------------------------------------- */
/* -- 1a. Original paper workspace ---------------------------------- */
body.ial-v030 .paperWorkspaceTop{font-size:12.5px!important}
body.ial-v030 .paperWorkspaceTop b,
body.ial-v030 .paperWorkspaceTop strong{font-size:14px!important}
body.ial-v030 .paperWorkspaceTop span{font-size:12.5px!important}
body.ial-v030 .continuousViewerToolbar{font-size:12.5px!important}
body.ial-v030 .continuousViewerToolbar strong{font-size:14px!important}
body.ial-v030 #paperZoomLabel{font-size:12.5px!important}
body.ial-v030 .paperWorkspaceActions button,
body.ial-v030 .paperWorkspaceActions .btn{font-size:13.5px!important}
body.ial-v030 .paperWorkspaceActions button{min-height:34px}

/* the ink toolbar on the left page */
body.ial-v030 .sourceInkToolbar .paperInkToolBtn{font-size:13px!important;min-height:36px}
body.ial-v030 .sourceInkToolbar .paperInkToolBtn span{font-size:12.5px!important}
body.ial-v030 .sourceFingerModeBtn{font-size:12.5px!important;min-height:36px!important}

/* the answer book on the right */
body.ial-v030 .paperAnswerToolbar b{font-size:14px!important}
body.ial-v030 .paperAnswerToolbar,
body.ial-v030 .segmentedAnswerToolbar{font-size:12.5px!important}
body.ial-v030 .segmentedAnswerToolbar span{font-size:12.5px!important}
body.ial-v030 .segmentedAnswerBook b{font-size:13.5px!important}
body.ial-v030 .stickyPaperBottom,
body.ial-v030 .paperAnswerBottom{font-size:12.5px!important}

/* -- 1b. Practice list --------------------------------------------- */
body.ial-v030 .eyebrow{font-size:12.5px!important}
body.ial-v030 .practicePrimaryFilters label,
body.ial-v030 .practiceSearchWrap label{font-size:12.5px!important}
body.ial-v030 .practiceFilterMeta{font-size:12.5px!important}
body.ial-v030 .qcard .qid{font-size:13px!important}
body.ial-v030 .qcard h4{font-size:17px!important}
body.ial-v030 .qcard button{font-size:13.5px!important;min-height:38px}
body.ial-v030 .countText{font-size:12.5px!important}

/* -- 1c. Practice workspace ---------------------------------------- */
body.ial-v030 .inkToolbar .inkTool{font-size:13px!important;min-height:36px}
body.ial-v030 .inkToolbar .inkTool span{font-size:12.5px!important}
body.ial-v030 .inkInfo{font-size:12.5px!important}
body.ial-v030 .inkDeviceBadge{font-size:12.5px!important}
body.ial-v030 .v027WorkTabs button{font-size:14px!important;min-height:40px}
body.ial-v030 .workspaceCrumb{font-size:13px!important}
body.ial-v030 .workspaceSubmit button{font-size:13.5px!important;min-height:38px}
body.ial-v030 .gestureGuide{font-size:12.5px!important}
body.ial-v030 .canvasFooter{font-size:12.5px!important}
body.ial-v030 .pageRailHead b{font-size:12.5px!important}
body.ial-v030 .pageThumb span,
body.ial-v030 .addPageBtn{font-size:12.5px!important}
body.ial-v030 .answerPaperHeader b,
body.ial-v030 .answerPaperHeader span{font-size:12.5px!important}

/* ---------------------------------------------------------------------
   2. The answer sheet scrolls inside its own pane
   --------------------------------------------------------------------- */
body.ial-v030 .canvasStage{
  max-height:calc(100dvh - 290px);
  min-height:360px;
  overflow-y:auto!important;
  overflow-x:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:auto;
}
/* The footer sits inside the scrolling stage, so pin it to the bottom —
   otherwise "Add page" would only be reachable after scrolling the whole sheet. */
body.ial-v030 .canvasStage > .canvasFooter{
  position:sticky;
  bottom:0;
  z-index:3;
  margin-top:10px;
  background:#fff;
  box-shadow:0 -6px 14px rgba(16,25,40,.06);
}

.canvasPageTools{
  display:flex;
  align-items:center;
  gap:8px;
}
.canvasPageTools .canvasPageCount{
  font-size:12.5px;
  font-weight:800;
  color:#4b5a72;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------------
   3. Zoomed paper: allow sideways panning as well
   ---------------------------------------------------------------------
   touch-action applies to stylus input too, so this must NOT be set on the
   ink canvas (it keeps `none` and drives its own pan in JS). On the viewport
   it only affects drags that start outside the canvas. */
body.ial-v030 #paperViewerViewport{
  touch-action:pan-x pan-y pinch-zoom!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* ---------------------------------------------------------------------
   4. Roomier tap targets in the ink bars
   --------------------------------------------------------------------- */
body.ial-v030 .inkToolbarV018{min-height:56px!important}
body.ial-v030 .paperSettingChip{font-size:12.5px!important;min-height:32px!important}
body.ial-v030 .paperInkToolBtn.compact{min-height:32px}

/* ---------------------------------------------------------------------
   5. Interface size control (sidebar) and the question zoom control
   --------------------------------------------------------------------- */
.uiScaleRow{
  display:flex;
  align-items:center;
  gap:6px;
  margin:10px 12px 6px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;
  background:rgba(255,255,255,.06);
}
.uiScaleRow span{
  flex:1;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.uiScaleRow b{
  min-width:38px;
  text-align:center;
  font-size:11.5px;
  font-variant-numeric:tabular-nums;
  color:#fff;
}
.uiScaleRow button{
  width:28px;
  height:26px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:7px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:11.5px;
  font-weight:900;
  cursor:pointer;
  line-height:1;
}
.uiScaleRow button:hover:not(:disabled){background:rgba(255,255,255,.2)}
.uiScaleRow button:disabled{opacity:.35;cursor:default}

/* the question zoom control in the workspace question toolbar */
body.ial-v030 .questionZoom{
  margin-left:auto;
  border-color:var(--line,#dce2ec);
}
body.ial-v030 .questionZoom button{width:34px;height:32px;font-size:15px}
body.ial-v030 .questionZoom span{min-width:52px;font-size:12.5px!important}

/* ---------------------------------------------------------------------
   6. Answer book (right side of a paper) — missed in the first pass
   ---------------------------------------------------------------------
   The left page toolbar is `.sourceInkToolbar`; the answer book uses
   `.paperInkToolbar`. Only the first was covered, which is why the writing
   panel's own buttons stayed at 8px. */
body.ial-v030 .paperInkToolbar .paperInkToolBtn{font-size:13px!important;min-height:36px}
body.ial-v030 .paperInkToolbar .paperInkToolBtn span{font-size:12.5px!important}
body.ial-v030 .paperInkToolbar .paperSettingChip{font-size:12.5px!important;min-height:32px!important}
body.ial-v030 .paperAnswerToolbar,
body.ial-v030 .paperAnswerToolbar span{font-size:12.5px!important}
body.ial-v030 #goCurrentAnswerBtn{font-size:13px!important;min-height:34px}
body.ial-v030 .autoFollowToggle{font-size:12.5px!important}
body.ial-v030 .stickyPaperBottom,
body.ial-v030 .stickyPaperBottom span,
body.ial-v030 .paperAnswerBottom,
body.ial-v030 .paperAnswerBottom span{font-size:12.5px!important}
body.ial-v030 .paperAnswerCard .paperSegLabel,
body.ial-v030 .segmentedAnswerBook .paperSegLabel{font-size:12.5px!important}

/* ---------------------------------------------------------------------
   7. Question stepping in the original-paper header
   --------------------------------------------------------------------- */
.paperQStep{
  width:30px;
  height:26px;
  margin:0 1px;
  border:1px solid var(--line,#dce2ec)!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#44526a!important;
  font-size:15px!important;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
}
.paperQStep:hover{background:#f2f5ff!important;color:#315efb!important}
.paperQStep:active{transform:translateY(1px)}

/* ---------------------------------------------------------------------
   8. First-run guide
   --------------------------------------------------------------------- */
.obBackdrop{
  position:fixed;
  inset:0;
  z-index:3000;
  display:grid;
  place-items:center;
  padding:22px;
  background:rgba(12,22,40,.42);
  backdrop-filter:blur(2px);
}
.obBackdrop[hidden]{display:none!important}
.obCard{
  width:min(560px,100%);
  max-height:86dvh;
  overflow:auto;
  padding:22px 24px 20px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 24px 60px rgba(12,22,40,.28);
}
.obCard header h2{margin:0 0 4px;font-size:20px;color:#1a2540}
.obCard header p{margin:0 0 16px;font-size:13px;color:#6b7488}
.obList{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.obItem{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.obIcon{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:#eef3ff;color:#315efb;font-size:16px;
}
.obItem b{display:block;font-size:14px;color:#1a2540;margin-bottom:2px}
.obItem p{margin:0;font-size:13px;line-height:1.55;color:#5b6478}
.obCard footer{display:flex;justify-content:flex-end;margin-top:20px}
.obCard footer .btn{min-height:38px;font-size:14px}
.uiScaleRow .guideBtn{
  width:auto;
  padding:0 9px;
  font-size:11px;
  letter-spacing:.02em;
}