/* src/v085.css — shell, exam mode and paper workspace clean-up (2026-09-30)
   Loaded last so it wins over v027..v084 without editing any of them.
   Where an older rule used !important, this file has to answer in kind. */

/* ==========================================================================
   1. Exam mode — the overlay was shipped with no question inside it.
   ========================================================================== */

.v073-exam-topbar {
  gap: 14px;
  flex-wrap: nowrap;
  padding: 10px 18px;
}
.v073-exam-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.v073-exam-title b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v073-exam-title span { font-size: 11px; opacity: .65; font-weight: 600; }

/* Question strip: the whole point is "jump to Q8 without clicking Next six times". */
.v073-exam-qstrip {
  display: flex; gap: 5px; flex: 1 1 auto; justify-content: center;
  overflow-x: auto; padding: 2px;
}
.v073-exam-qchip {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08);
  color: #e2e8f0; font-size: 12px; font-weight: 800; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.v073-exam-qchip:hover { background: rgba(255,255,255,.18); }
.v073-exam-qchip.is-current { background: #fff; color: #1e293b; border-color: #fff; }
.v073-exam-qchip.is-correct { background: #16a34a; border-color: #16a34a; color: #fff; }
.v073-exam-qchip.is-partial { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.v073-exam-qchip.is-wrong { background: #dc2626; border-color: #dc2626; color: #fff; }

/* Carries .btn as well, so naming both classes outranks the base button rule
   without needing !important. */
.v073-exam-finish.btn {
  background: #dc2626; color: #fff; border: 0;
  font-weight: 800; white-space: nowrap;
}

.v073-exam-intro { text-align: center; padding: 64px 20px; }
.v073-exam-intro h2 { margin: 0 0 8px; font-size: 24px; }
.v073-exam-intro p { color: #64748b; margin: 0 0 6px; }
p.v073-exam-intro-meta { font-size: 13px; font-weight: 700; margin-bottom: 20px; }

.v073-exam-question { max-width: 900px; margin: 0 auto; }
.v073-exam-qhead {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; gap: 12px;
}
.v073-exam-qhead h3 { margin: 0; font-size: 17px; }
.v073-exam-qhead span { font-size: 12px; color: #64748b; font-weight: 700; white-space: nowrap; }

/* The question crop: white card, centred, never wider than the page. */
.v073-exam-image {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 14px; min-height: 220px;
  display: flex; justify-content: center; align-items: flex-start;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.v073-exam-image img { max-width: 100%; height: auto; display: block; border-radius: 6px; }
.v073-exam-missing { color: #b91c1c; font-size: 13px; padding: 24px; text-align: center; }

/* Skeleton instead of the old bare "Loading question..." text. */
.v073-exam-skeleton {
  width: 100%; height: 260px; border-radius: 8px;
  background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: v085shimmer 1.3s ease infinite;
}
@keyframes v085shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.v073-exam-actions {
  margin-top: 16px; display: flex; gap: 8px;
  justify-content: space-between; align-items: center; flex-wrap: wrap;
}
.v073-exam-mark { display: flex; gap: 6px; }
.v073-exam-mark .btn.is-picked {
  border-color: #4F46E5 !important;
  background: #eef2ff !important;
  color: #3730a3 !important;
  box-shadow: 0 0 0 2px rgba(79,70,229,.18);
}
.v073-exam-grade { text-align: center; font-size: 18px; font-weight: 900; margin: 4px 0 2px; }
.v073-exam-sub { text-align: center; color: #64748b; font-size: 13px; margin: 0; }
.v073-exam-warn {
  text-align: center; color: #b45309; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 8px; padding: 8px 12px;
  font-size: 12.5px; font-weight: 600; margin: 14px auto 0; max-width: 420px;
}
.v073-exam-breakdown { margin-top: 20px; }
.v073-exam-breakdown h4 { font-size: 13px; margin: 0 0 6px; color: #475569; }
.v073-exam-row {
  display: flex; justify-content: space-between; width: 100%;
  padding: 9px 10px; border: 0; border-bottom: 1px solid #f1f5f9;
  background: transparent; font-size: 13px; cursor: pointer; text-align: left;
  border-radius: 6px;
}
.v073-exam-row:hover { background: #f8fafc; }
.v073-exam-report-actions {
  margin-top: 20px; display: flex; gap: 8px; justify-content: center;
}

/* ==========================================================================
   2. The original paper is read-only in Split Workspace — no pen tools on it.
   "Write on Original Paper" keeps them (body.paper-original-workspace).
   v078.css restores these bars with `html body :is(#workspace, #papers) .sourceInkToolbar`
   — the `:is(#id)` gives that selector an id's weight (1,1,2), so a plain
   `.paperSourceInkToolbar` rule loses no matter how late it is loaded. The
   hiding rule has to carry the same `#papers` weight to win.
   ========================================================================== */
html body :is(#workspace, #papers) .sourceInkToolbar.paperSourceInkToolbar { display: none !important; }
html body.paper-original-workspace :is(#workspace, #papers) .sourceInkToolbar.paperSourceInkToolbar { display: flex !important; }

/* ==========================================================================
   3. Sidebar — six destinations instead of eight, collapsed by default.
   ========================================================================== */

/* My Work and Paper Archive move into Review and Papers; the tabs themselves
   stay in the DOM (other code looks them up by id), only the nav entry goes. */
body.ial-v030 .nav button[data-tab="mywork"],
body.ial-v030 .nav button[data-tab="archive"] { display: none !important; }

/* Text size is a set-once preference, not a navigation control. */
body.ial-v030 .uiScaleRow { display: none !important; }

/* Copyright collapses to nothing and only opens on hover. */
body.ial-v030 .appCopyright {
  max-height: 0 !important; opacity: 0; overflow: hidden;
  margin: 0 !important; padding: 0 !important;
  transition: max-height .2s ease, opacity .2s ease, padding .2s ease;
}
body.ial-v030 .sidebar:hover .appCopyright {
  max-height: 120px !important; opacity: .55; padding: 10px 0 0 !important;
}

/* Collapsed rail is the 48px the design asked for. The collapse button is
   positioned with `right` against the rail and deliberately hangs past its edge,
   so shrinking the rail needs no change there. */
body.ial-v030 .app.sidebar-collapsed:not(.sidebar-hover-open) .main { padding-left: 72px; }
body.ial-v030 .app.sidebar-collapsed .sidebar {
  width: 48px !important; padding-left: 4px !important; padding-right: 4px !important;
  overflow: hidden !important;
}
/* A 48px rail leaves 40px of clear space; icons must stay centred in it. */
body.ial-v030 .app.sidebar-collapsed .sidebar .nav button .ico { font-size: 17px; line-height: 1; }
body.ial-v030 .app.sidebar-collapsed .nav button { justify-content: center; padding-left: 0; padding-right: 0; }
body.ial-v030 .app.sidebar-collapsed .brand { justify-content: center; }
body.ial-v030 .app.sidebar-collapsed .sidebarCollapseBtn { justify-content: center; }

/* Hover (or focus) opens the rail over the content — no layout shift. */
body.ial-v030 .app.sidebar-collapsed .sidebar:hover,
body.ial-v030 .app.sidebar-collapsed .sidebar:focus-within {
  width: 252px !important; padding-left: 18px !important; padding-right: 18px !important;
  box-shadow: 12px 0 32px rgba(8,20,40,.35);
}
body.ial-v030 .app.sidebar-collapsed .sidebar:hover .nav button,
body.ial-v030 .app.sidebar-collapsed .sidebar:focus-within .nav button { justify-content: flex-start; }
/* index.html sets font-size:0 on the collapsed buttons to kill the labels.
   Restoring `display` alone leaves the words at zero size — invisible but
   still measurable, which is exactly the trap this project keeps falling into. */
body.ial-v030 .app.sidebar-collapsed .sidebar:hover .nav button,
body.ial-v030 .app.sidebar-collapsed .sidebar:focus-within .nav button { font-size: 13px !important; }
/* v028 hides the wordmark with !important too. */
body.ial-v030 .app.sidebar-collapsed .sidebar:hover .brandCopy,
body.ial-v030 .app.sidebar-collapsed .sidebar:focus-within .brandCopy { display: block !important; }

/* The collapse button is parked at x=51 so it sits just outside the 64px rail.
   Once the rail opens it would land on top of the first nav item, so move it to
   the far edge of the open rail — that is also where you click to pin it open.
   It is position:fixed, so `right` would measure against the viewport rather
   than the rail; `left` coincides with the rail's own space because the rail is
   pinned to x=0. Its word stays hidden: the rail is open at this point, so the
   arrow alone is enough. */
body.ial-v030 .app.sidebar-collapsed .sidebar:hover .sidebarCollapseBtn,
body.ial-v030 .app.sidebar-collapsed .sidebar:focus-within .sidebarCollapseBtn { left: 206px !important; }
body.ial-v030 .app.sidebar-collapsed .sidebar:hover .collapseText,
body.ial-v030 .app.sidebar-collapsed .sidebar:focus-within .collapseText { display: none !important; }
body.ial-v030 .app.sidebar-collapsed .sidebar:hover .navsec,
body.ial-v030 .app.sidebar-collapsed .sidebar:focus-within .navsec { display: block; }
/* v028.css hides these with !important, so opening them again needs !important
   too — otherwise the rail widens but the words never come back. */
body.ial-v030 .app.sidebar-collapsed .sidebar:hover .nav button > span:not(.ico),
body.ial-v030 .app.sidebar-collapsed .sidebar:focus-within .nav button > span:not(.ico) { display: inline !important; }
body.ial-v030 .app.sidebar-collapsed .sidebar:hover .sidebarAccountCopy,
body.ial-v030 .app.sidebar-collapsed .sidebar:focus-within .sidebarAccountCopy,
body.ial-v030 .app.sidebar-collapsed .sidebar:hover .acctCopy,
body.ial-v030 .app.sidebar-collapsed .sidebar:focus-within .acctCopy,
body.ial-v030 .app.sidebar-collapsed .sidebar:hover .acctUpgradeWord,
body.ial-v030 .app.sidebar-collapsed .sidebar:focus-within .acctUpgradeWord { display: block !important; }
body.ial-v030 .app.sidebar-collapsed .sidebar:hover .sidebarSignIn,
body.ial-v030 .app.sidebar-collapsed .sidebar:focus-within .sidebarSignIn { display: inline-flex !important; }

/* Give the collapsed icons a hint, since the words are gone. */
body.ial-v030 .app.sidebar-collapsed .nav button { position: relative; }
body.ial-v030 .app.sidebar-collapsed .nav button:hover::after {
  content: attr(data-v085-label);
  position: absolute; left: 60px; top: 50%; transform: translateY(-50%);
  background: #0b1f38; color: #fff; font-size: 12px; font-weight: 700;
  padding: 6px 10px; border-radius: 7px; white-space: nowrap; z-index: 40;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

/* ---- account block: avatar row on top, Upgrade card below, Sign in last ----
   account-ui.mjs re-renders this host, so the layout has to key off the classes
   it produces (.acctAvatar / .acctCopy / .acctStack / .acctUpgrade). */
body.ial-v030 .sidebarAccountMirror {
  display: flex !important; flex-wrap: wrap !important;
  align-items: center !important; gap: 8px !important;
}
body.ial-v030 .sidebarAccountMirror .acctCopy,
body.ial-v030 .sidebarAccountMirror .sidebarAccountCopy { flex: 1 1 auto !important; min-width: 0; }
body.ial-v030 .sidebarAccountMirror .acctStack {
  flex: 1 1 100% !important; display: flex !important; gap: 6px !important; align-items: center;
}
body.ial-v030 .sidebarAccountMirror .acctStack .acctBtn { flex: 1 1 auto !important; }
body.ial-v030 .sidebarAccountMirror .sidebarSignIn,
body.ial-v030 .sidebarAccountMirror .sidebarSettingsBtn {
  position: static !important; width: auto !important;
}

/* The Upgrade card: full width, so no letter can be cut off by the rail. */
body.ial-v030 .acctUpgrade {
  flex: 1 1 100% !important;
  display: flex !important; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box; width: 100%;
  padding: 10px 12px !important;
  border: 0 !important; border-radius: 10px !important;
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
  color: #fff !important; font-weight: 800 !important; font-size: 12.5px !important;
  box-shadow: 0 6px 16px rgba(79, 70, 229, .28) !important;
  cursor: pointer; white-space: nowrap; overflow: visible;
}
body.ial-v030 .acctUpgrade:hover { filter: brightness(1.08); }
body.ial-v030 .acctUpgradeStar { font-size: 13px; }
body.ial-v030 .app.sidebar-collapsed .acctUpgrade { padding: 10px 0 !important; }
body.ial-v030 .app.sidebar-collapsed .acctUpgradeWord { display: none; }
body.ial-v030 .app.sidebar-collapsed .sidebarAccountMirror .acctAvatar,
body.ial-v030 .app.sidebar-collapsed .sidebarAccountMirror .acctCopy { display: none; }
body.ial-v030 .app.sidebar-collapsed .sidebarAccountMirror .acctStack { justify-content: center; }

/* ==========================================================================
   4. Paper workspace: four stacked toolbars down to two.
   ========================================================================== */

/* Save and Download are occasional; Finish and Back are what you actually
   reach for. They move into the overflow menu (see v085-shell.mjs). */
body.ial-v030 .paperWorkspaceTop .paperSaveBtn,
body.ial-v030 .paperWorkspaceTop .paperDownloadBtn { display: none !important; }
body.ial-v030 .paperWorkspaceTop .paperFinishOriginalBtn { display: inline-flex !important; }

/* The overflow button reveals them again, so nothing becomes unreachable. */
body.ial-v030 .paperWorkspaceTop.v085-more-open .paperSaveBtn,
body.ial-v030 .paperWorkspaceTop.v085-more-open .paperDownloadBtn { display: inline-flex !important; }
.v085-paper-more {
  min-width: 34px; padding: 6px 8px; line-height: 1; font-weight: 900;
}

body.ial-v030 .paperWorkspaceTop {
  display: flex !important; flex-wrap: wrap !important;
  align-items: center !important; gap: 10px !important;
  padding: 8px 14px !important;
}
body.ial-v030 .paperModeTitle { font-size: 12px !important; }
body.ial-v030 .v027PaperTimer { font-size: 14px !important; font-variant-numeric: tabular-nums; }
body.ial-v030 .paperWorkspaceActions.adaptivePaperActions { gap: 8px !important; }

/* Row two: one compact line — Q indicator, step, zoom, jump. */
body.ial-v030 .paperViewerToolbar.continuousViewerToolbar {
  padding: 6px 10px !important; gap: 8px !important; flex-wrap: wrap !important;
}
/* Without this the label collapses to nothing once the question strip is added
   and "Original Paper" silently disappears from the bar. */
body.ial-v030 .paperViewerToolbar.continuousViewerToolbar > div:first-child { gap: 6px !important; flex: 0 0 auto !important; }
body.ial-v030 .paperViewerToolbar.continuousViewerToolbar > div:first-child strong { white-space: nowrap; }
body.ial-v030 .paperViewerToolbar.continuousViewerToolbar > div:first-child strong { font-size: 12px !important; }
body.ial-v030 .paperViewerToolbar.continuousViewerToolbar > div:first-child > span:last-child { display: none !important; }
body.ial-v030 .paperZoomStatus { font-size: 11px !important; min-width: 34px; text-align: right; }

/* Question strip for the paper workspace: replaces the Jump ▾ dropdown. */
.v085-paper-qstrip { display: flex; gap: 4px; flex-wrap: wrap; }
.v085-paper-qstrip button {
  min-width: 30px; height: 26px; padding: 0 7px; border-radius: 7px;
  border: 1px solid #d7dfec; background: #fff; color: #475569;
  font-size: 11.5px; font-weight: 800; cursor: pointer;
}
.v085-paper-qstrip button.is-current { background: #4F46E5; border-color: #4F46E5; color: #fff; }
.v085-paper-qstrip button.is-done { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }

/* ==========================================================================
   5. Hero: the primary action has to be legible on the pale gradient.
   ========================================================================== */
/* v033 styles these as `.ial-v030 .home-shell .heroBtns .btn.primary`
   (four classes), so the override has to name at least as much — adding
   .home-shell and .btn beats it on specificity and keeps this file free of
   another round of !important. */
body.ial-v030 .home-shell .heroBtns .btn.heroPrimary,
body.ial-v030 .heroBtns .btn.heroPrimary,
body.ial-v030 .hero .btn.heroPrimary {
  background: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 20px rgba(79, 70, 229, .32);
  font-weight: 800;
}
body.ial-v030 .home-shell .heroBtns .btn.heroSecondary,
body.ial-v030 .heroBtns .btn.heroSecondary {
  background: #fff; color: #312e81;
  border: 1px solid #c7d2fe; font-weight: 700;
}

/* ==========================================================================
   6. Paper library: one obvious action per card, exam mode as a checkbox.
   ========================================================================== */
.v085-paper-card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.btn.v085-paper-start {
  width: 100%; background: linear-gradient(135deg, #4F46E5, #6D28D9);
  color: #fff; border: 0; font-weight: 800;
  padding: 10px 12px; border-radius: 10px;
}
/* Clearly the second choice: outlined, not a second filled button. */
.btn.v085-paper-timed {
  width: 100%; display: block; text-align: center;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid #c7d2fe; background: #eef2ff;
  color: #3730a3; font-weight: 700; font-size: 12.5px;
}
.btn.v085-paper-timed:hover { background: #e0e7ff; }
/* A half-finished paper used to say only "Not started"; show the real progress. */
.v085-paper-progress {
  height: 6px; border-radius: 999px; background: #e8edf6;
  overflow: hidden; margin: 8px 0 4px;
}
.v085-paper-progress span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #4F46E5, #7C3AED);
}
.v085-paper-progressText { display: block; font-size: 11px; color: #64748b; font-weight: 700; margin-bottom: 2px; }

/* ==========================================================================
   7. Small shared fixes
   ========================================================================== */

/* Short questions left a dead area underneath; centre the content instead. */
body.ial-v030 .v027MsContent img,
body.ial-v030 .paperViewerViewport .continuousPdfPageImage { display: block; }

/* Settings text-size row (moved out of the sidebar). */
.v085-scale-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--line, #e5e9f0);
}
.v085-scale-row b { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }