/* Review screen responsive layer (2026-10-02).
   Purpose: keep the review screen (workflow header, drawing panes, utility
   buttons, floating review panel and its toggle) free of overlap, clipping
   and page scroll from 375px phones to 1920px desktops.
   Loaded directly after review-panel-v3.css. It is not another override pass
   over that file: each rule fixes one measured defect, uses the lowest
   specificity that wins, and avoids !important unless the rule it corrects
   is itself !important. Organised by breakpoint. */

/* ---- Shared tokens ------------------------------------------------------
   The panel width tokens live on #layoutV2Stage-reviewScreen, which is not an
   ancestor of #reviewScreen. Mirror them here (360px preferred width from the
   review-panel-v3 compact-card block) so the drawing panes can keep their
   header controls clear of the open panel. */
html[data-layout-v2="float"] {
  --rr-panel-width: min(360px, calc(100vw - 60px));
  /* Panel width + its right offset, less the page gutter, plus an 8px gap. */
  --rr-panel-clearance: calc(var(--rr-panel-width) + var(--floating-panel-right, 20px) - 8px);
}

/* ---- >= 761px, touch screens: retract tab hit area ----------------------
   The retract tab is 18px wide on desktop by design. On touch screens grow
   its hit area to 44px, towards the drawing, without changing what is drawn
   (::before paints the tab; ::after is unused). */
@media (pointer: coarse) and (min-width: 761px) {
  html[data-layout-v2="float"] #layoutV2FloatHost button[data-panel-toggle="review"]::after {
    content: "";
    position: absolute;
    inset: 0 0 0 -26px;
  }
}

/* ---- >= 861px: workflow header ------------------------------------------
   .sidebar centres the steps with `minmax(0, 1fr) auto minmax(0, 1fr)`. When
   Undo/Redo/Clear all/Menu are wider than the side column, the actions spill
   left over step 4 (1440px: 10px over EXPORT; 1280px: 25px). Let each side
   column grow to its content first. */
@media (min-width: 861px) {
  #workflowPanel {
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  }
}

/* ---- >= 761px: float review stage ---------------------------------------
   #reviewScreen.is-active keeps the pre-wrapper `auto 1fr auto` rows, but its
   only in-flow child is #reviewScaleStage, which landed in the `auto` row.
   Its `height: 100%` then had no definite height, so the drawing panes
   collapsed to their 70px header rows (sheet frame 0px tall) and the
   bottom-anchored zoom pill sat on top of the file names. */
@media (min-width: 761px) {
  html[data-layout-v2="float"] #reviewScreen.is-active {
    grid-template-rows: minmax(0, 1fr);
  }

  /* The floating panel overlays the drawing area by design (PDFs stay
     full-bleed). Keep the pane header controls it would cover reachable by
     moving them left of the open panel; the file name ellipsises instead. */
  html[data-layout-v2="float"][data-has~="review-panel-open"]:not(#has-pad) #reviewScreen .drawing-pane:nth-of-type(2) > header {
    padding-right: var(--rr-panel-clearance);
  }
}

/* ---- >= 1181px: side-by-side panes, panel under the pane headers ---------
   TASK-100 (Jon 2026-10-12): opening the panel must not push the Supplied
   page and rotate buttons. They stay in the pane header corner. The open
   panel starts below the headers (323px = header bottom 315px + 8px gap) and
   takes the height that is left (32px short of the window bottom), so it covers
   no header control and not the expand button at the pane corner. The expand
   button stays in its corner too. */
@media (min-width: 1181px) {
  html[data-layout-v2="float"][data-has~="review-panel-open"]:not(#has-pad) #reviewScreen .drawing-pane:nth-of-type(2) > header {
    padding-right: 16px;
  }

  /* Not the PO stage: there the panel spans the PDF pane (Jon 2026-10-05).
     --rr-panel-top is the measured bottom of the Supplied pane header + 8px
     (review-panel-v3.js). The panel is top-anchored with no vertical
     transform, so opening and closing only slide it sideways. */
  html[data-layout-v2="float"] #layoutV2FloatHost #layoutV2Stage-reviewScreen[data-rr-panel-top] > #reviewPanel:not([data-source-kind="po"]) {
    top: var(--rr-panel-top) !important;
    height: min(640px, calc(100dvh - var(--rr-panel-top) - 32px)) !important;
    max-height: calc(100dvh - var(--rr-panel-top) - 32px) !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  html[data-layout-v2="float"] #layoutV2FloatHost #layoutV2Stage-reviewScreen[data-rr-panel-top] > #reviewPanel:not([data-source-kind="po"]):is(.is-collapsed, .is-flyout-opening, .is-flyout-closing) {
    transform: translate3d(calc(var(--floating-panel-width, 268px) + var(--floating-panel-right, 20px)), 0, 0) scale(1) !important;
  }
}

/* ---- 861px to 1180px: side-by-side panes, panel gets its own column ----
   An overlaid 360px panel would cover most of the supplied pane here, so the
   open panel reserves its column: both panes shrink to fit beside it and
   nothing is covered. The column eases with the panel's show/hide. */
@media (min-width: 861px) and (max-width: 1180px) {
  html[data-layout-v2="float"] #reviewScreen .drawing-panes {
    transition: padding-right 200ms ease;
  }

  html[data-layout-v2="float"][data-has~="review-panel-open"]:not(#has-pad) #reviewScreen .drawing-panes {
    padding-right: var(--rr-panel-clearance);
  }

  /* The panes already clear the panel, so their headers need no extra room. */
  html[data-layout-v2="float"][data-has~="review-panel-open"]:not(#has-pad) #reviewScreen .drawing-pane:nth-of-type(2) > header {
    padding-right: 0;
  }
}

/* ---- 761px to 860px: panes stack, so the panel covers both -------------
   The retract tab sits on the panel's left edge at mid-height, which can be
   level with a pane header here, so clear its 18px as well. */
@media (min-width: 761px) and (max-width: 860px) {
  /* :nth-of-type(n) matches both panes at the same specificity as the
     supplied-pane rule above. */
  html[data-layout-v2="float"][data-has~="review-panel-open"]:not(#has-pad) #reviewScreen .drawing-pane:nth-of-type(n) > header {
    padding-right: calc(var(--rr-panel-clearance) + 18px);
  }

  html[data-layout-v2="float"][data-has~="review-panel-open"]:not(#has-pad) #reviewScreen .drawing-pane > .expand-sheet-button {
    right: calc(var(--rr-panel-clearance) + 18px);
  }
}

/* ---- 861px to 1180px: compact review header ------------------------------
   Jon 2026-10-05: "Clean this up, it should look consistent like the review
   page." Measured at 1024px and 1108px: the status and meta row that was
   removed from the Review title on 2026-10-02 still showed here (the tablet
   heading rule out-ranked that removal), and Sheet Manager / Drawing Controls
   sat on rows of their own, leaving a 142px empty band above the drawings.
   This is the desktop compact header at this width: no status row, and the
   button column rises into the empty right side of the title band.
   --review-title-band is the title block (55px) plus the two 16px gaps
   between it and the review stage. */
@media (min-width: 861px) and (max-width: 1180px) {
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage#reviewScaleStage .review-header > .review-heading {
    display: none !important;
  }

  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage#reviewScaleStage .review-header {
    --review-title-band: 87px;
    min-height: 0 !important;
  }

  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage#reviewScaleStage .review-header > .review-actions {
    margin-top: calc(-1 * var(--review-title-band)) !important;
    padding-bottom: 0 !important;
    position: relative !important;
    z-index: 5 !important;
  }
}
/* ---- end compact review header (861px to 1180px) ---- */
/* ---- 861px to 1180px: step nav and pane header ---------------------------
   Jon 2026-10-05: "Fix the nav bar at the top, fix the blue top bar too."
   Measured at 1024px:
   1. Step nav. The step circle is 36px at every width, but its grid column
      was 36px only from 1181px up. Below that the column was 24.8px, so each
      circle ran 8px into its label ("2 REVIEW" printed over the circle).
      The circle gets its 36px column here too, with a 6px gap.
   2. Pane header. One PO-check pane is as wide as two drawing panes, but its
      header still stacked label, file name and buttons on three rows (108px).
      A pane 460px or wider uses the desktop header: label and name on the
      left, buttons on the right, 68px. A narrow pane keeps the stack. */
@media (min-width: 861px) and (max-width: 1180px) {
  #workflowPanel .step-list .step {
    grid-template-columns: 36px auto !important;
    column-gap: 6px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  /* The wider steps must not push "Drawing approval" into an ellipsis at
     1024px: the bar gives its two gaps back. */
  #workflowPanel {
    column-gap: 8px !important;
  }

  #reviewScreen .drawing-panes[data-source-kind="po"] > .drawing-pane {
    container-type: inline-size;
  }

  /* "Put these in the normal position" (Jon 2026-10-05): the PO pane header is
     the normal pane header at every width from 320px. Label ("PURCHASE order")
     above the file name on the left, the controls centred on the right, one
     band of the normal height. Only a narrower pane keeps the stacked header,
     which hides the label as it does on a drawing review. */
  @container (min-width: 320px) {
    #reviewScreen#reviewScreen .drawing-panes[data-source-kind="po"] > .drawing-pane > header {
      grid-template-columns: minmax(0, 1fr) auto !important;
      grid-template-rows: 0.86rem 2rem !important;
      align-items: center !important;
      align-content: normal !important;
      row-gap: 2px !important;
      height: 4.28rem !important;
      min-height: 4.28rem !important;
      max-height: 4.28rem !important;
      padding: var(--space-3) var(--space-4) !important;
    }

    #reviewScreen#reviewScreen .drawing-panes[data-source-kind="po"] > .drawing-pane > header > span:first-child {
      display: block !important;
      grid-column: 1 !important;
      grid-row: 1 !important;
    }

    #reviewScreen#reviewScreen .drawing-panes[data-source-kind="po"] > .drawing-pane > header > strong {
      grid-column: 1 !important;
      grid-row: 2 !important;
    }

    #reviewScreen#reviewScreen .drawing-panes[data-source-kind="po"] > .drawing-pane > header > .pane-header-controls {
      grid-column: 2 !important;
      grid-row: 1 / span 2 !important;
      align-self: center !important;
      justify-self: end !important;
      justify-content: flex-end !important;
      width: auto !important;
    }
  }
}
/* ---- end step nav and pane header (861px to 1180px) ---- */

/* ---- <= 760px: phones ---------------------------------------------------- */
@media (max-width: 760px) {
  /* The open drawer covers the panes; only its list may scroll. */
  html[data-layout-v2="float"][data-has~="staged-review-panel-open"]:not(#has-pad):not(#has-pad)[data-has~="review-screen"]:not(#has-pad),
  html[data-layout-v2="float"][data-has~="staged-review-panel-open"]:not(#has-pad):not(#has-pad)[data-has~="review-screen"]:not(#has-pad) body {
    overflow: hidden;
  }

  /* The drawer is centred on the viewport (top: 50%), so on 375x812 and
     shorter phones it covered the two-row workflow header (steps 1-4).
     Centre it in the space below the header instead (header ends ~112px;
     8px margins). The retract tab stays at 50%, still on the drawer edge. */
  html[data-layout-v2="float"] #layoutV2FloatHost #layoutV2Stage-reviewScreen > #reviewPanel {
    --review-panel-max-height: calc(100dvh - 128px);
    top: calc((100dvh + 112px) / 2) !important;
  }

  /* 44px touch targets. The design-system tabs are 36px; on phones they
     take the 44px control height. Same selector as that block, so the later
     file wins without extra specificity. */
  html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel > .findings-tabbar > :is(#aiSummaryTab, #drawingDetailsTab) {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
  }
}

/* ==========================================================================
   Header: phone and tablet layout (2026-10-05)
   --------------------------------------------------------------------------
   One block owns #workflowPanel (the signed-in header) at 1024px and below,
   for every screen (Load, Review, Stamp, Export). It replaced the phone and
   tablet header rules that were spread over styles.css, responsive-scaling.css
   and review-panel-v3.css and fought each other. Measured faults it fixes:
   the first step's label clipped to "REVIEW A" and its circle hanging outside
   the panel (fixed 87-90px steps, circle beside the label); APPVLR touching
   the logo tile (a -6px margin cancelled the gap); undo and redo outlined while
   clear all and menu were filled; at tablet widths the steps running over the
   brand tagline, the Menu and bell buttons missing, and 22px-tall buttons.

     0 - 860px      two rows: brand + action buttons, then four equal-column
                    steps with the circle centred above its label. app.js
                    switches to the phone hamburger (#mobileActionsButton) here.
     861 - 1024px   one row: brand | steps | actions, desktop Menu summary.
                    The tagline and its divider show only from 1010px, where the
                    row still has 12px to spare in its widest state (Stamp), so
                    nothing ever overlaps.
   Every action button is one 44x44 round touch target: undo, redo and the bell
   neutral, clear all danger, menu primary. The bell is in row 1 from 641px;
   below that it stays in the menu sheet (row 1 has no room at 320px).
   From 1025px the desktop rules are untouched (review-panel-v3.css scopes its
   fixed 36px circle, undo/redo, bell and brand-margin rules to 1025px and up).

   Colours are theme tokens only. Selectors start "body #appShell #workflowPanel"
   and use the element ids, so they outrank the older "body:has(...) #workflowPanel"
   Review rules without !important (one exception, the z-index below).
   ========================================================================== */

/* ---- Shared by every width up to 1024px --------------------------------- */
@media (max-width: 1024px) {
  body #appShell #workflowPanel {
    --hdr-tap: 44px;
    --hdr-dot: 22px;
  }

  /* Brand: the logo tile, then the word one var(--space-2) away. The tagline
     and its divider are hidden unless a rule below says there is room. */
  body #appShell #workflowPanel #homeButton {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: none;
    height: var(--hdr-tap);
    min-height: var(--hdr-tap);
    margin: 0;
    padding: 0 0 0 2px;
    overflow: visible;
  }

  body #appShell #workflowPanel #homeButton > div {
    display: none;
  }

  body #appShell #workflowPanel #homeButton .brand-logo {
    flex: 0 0 auto;
    width: var(--hdr-logo, 34px);
    height: var(--hdr-logo, 34px);
  }

  body #appShell #workflowPanel #homeButton > .brand-name {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    font-size: var(--hdr-word, 19.5px);
    letter-spacing: 0.08em;
    line-height: 1;
  }

  /* The five action buttons: one size, one shape, equal gaps. Meaning colours
     stay: undo, redo and the bell neutral, clear all danger, menu primary. */
  body #appShell #workflowPanel :is(#undoButton, #redoButton, #appNotificationButton, #clearAllButton, #mobileActionsButton, #sidebarActionMenu > summary) {
    position: relative;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 var(--hdr-tap);
    width: var(--hdr-tap);
    min-width: var(--hdr-tap);
    max-width: var(--hdr-tap);
    height: var(--hdr-tap);
    min-height: var(--hdr-tap);
    margin: 0;
    padding: 0;
    gap: 0;
    aspect-ratio: auto;
    color: var(--text);
    /* A 2px transparent border keeps the 44px touch box while the painted
       disc is 40px, so neighbouring discs are 8px apart. */
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 50%;
    transform: none;
    background-image: linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.08), rgb(var(--overlay-rgb) / 0.018));
    background-color: var(--surface-muted);
    box-shadow:
      inset 0 0 0 1px rgb(var(--text-muted-rgb) / 0.42),
      inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08);
  }

  body #appShell #workflowPanel :is(#undoButton, #redoButton, #appNotificationButton, #clearAllButton, #mobileActionsButton, #sidebarActionMenu > summary)::before {
    content: none;
  }

  body #appShell #workflowPanel :is(#undoButton, #redoButton, #appNotificationButton, #clearAllButton, #mobileActionsButton, #sidebarActionMenu > summary) svg {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
  }

  /* Labels move into the accessible name; the buttons are icon-only. */
  body #appShell #workflowPanel :is(#undoButton, #redoButton, #clearAllButton, #mobileActionsButton, #sidebarActionMenu > summary) > span:not(.notification-count) {
    display: none;
  }

  body #appShell #workflowPanel :is(#undoButton, #redoButton, #clearAllButton):disabled {
    opacity: 0.5;
    cursor: default;
  }

  body #appShell #workflowPanel :is(#undoButton, #redoButton, #appNotificationButton):not(:disabled):hover {
    color: var(--text-strong);
    background-color: var(--surface-card);
  }

  body #appShell #workflowPanel #clearAllButton {
    color: var(--on-colour-button);
    background-image: none;
    background-color: var(--action-danger);
    box-shadow: inset 0 0 0 1px rgb(var(--danger-rgb) / 0.72);
  }

  body #appShell #workflowPanel #clearAllButton:disabled {
    opacity: 1;
    color: rgb(var(--on-colour-button-rgb) / 0.58);
    background-color: var(--action-danger-disabled-bg);
    box-shadow: inset 0 0 0 1px var(--action-danger-disabled-border);
  }

  body #appShell #workflowPanel #clearAllButton:not(:disabled):hover {
    color: var(--on-colour-button);
    background-color: var(--action-danger-hover);
  }

  body #appShell #workflowPanel :is(#mobileActionsButton, #sidebarActionMenu > summary) {
    color: var(--on-colour-button);
    background-image: var(--accent-action-gradient);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px rgb(var(--accent-border-rgb) / 0.62);
  }

  body #appShell #workflowPanel :is(#mobileActionsButton, #sidebarActionMenu > summary):hover,
  body #appShell #workflowPanel #sidebarActionMenu[open] > summary {
    color: var(--on-colour-button);
    background-image: var(--accent-action-gradient-hover);
  }

  /* Steps: label colour follows state; the circle colours stay as they were. */
  body #appShell #workflowPanel nav.step-list .step {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
    appearance: none;
  }

  body #appShell #workflowPanel nav.step-list .step small {
    display: none;
  }

  body #appShell #workflowPanel nav.step-list .step .step-index {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--hdr-dot);
    min-width: var(--hdr-dot);
    height: var(--hdr-dot);
    min-height: var(--hdr-dot);
    margin: 0;
    font-size: 12px;
  }

  body #appShell #workflowPanel nav.step-list .step .step-copy,
  body #appShell #workflowPanel nav.step-list .step .step-copy > strong {
    min-width: 0;
    min-height: 0;
    overflow: visible;
    text-overflow: clip;
  }

  body #appShell #workflowPanel nav.step-list .step .step-label-full {
    display: none;
  }

  body #appShell #workflowPanel nav.step-list .step .step-label-short {
    display: inline;
  }
}

/* The open menu list lives inside the header's stacking context. The Review
   header (z-index 200) and its controls sat above it, so Settings and Log out
   were covered (Sheet Manager, Drawing Controls) or crossed by text. The older
   rule that lifts the bar is !important, so this one has to be too. */
@media (max-width: 1024px) {
  html[data-layout-v2="float"] body #appShell #workflowPanel:is(:has(details[open]), :hover, :focus-within) {
    z-index: 210 !important;
  }
}

/* ---- 641 - 860px: content clears the two-row bar ------------------------- */
@media (min-width: 641px) and (max-width: 860px) {
  /* Review used to set 6rem for a one-row bar. */
  :root,
  body[data-has~="review-screen"]:not(#has-pad) {
    --workflow-offset: calc(7rem + env(safe-area-inset-top, 0px));
  }
}

/* ---- 860px and below: two rows ------------------------------------------- */
@media (max-width: 860px) {
  body #appShell #workflowPanel.sidebar:not([hidden]) {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    align-items: center;
    gap: 2px var(--space-1);
    min-height: 0;
    padding: var(--space-1);
    border-radius: var(--panel-radius);
  }

  body #appShell #workflowPanel #workflowActions {
    display: contents;
  }

  /* Row 1, left: the brand takes whatever the buttons leave. */
  body #appShell #workflowPanel #homeButton {
    order: 0;
    flex: 1 1 0;
  }

  /* Row 1, right: undo, redo, bell, clear all, menu. */
  body #appShell #workflowPanel #undoButton { order: 1; }
  body #appShell #workflowPanel #redoButton { order: 2; }
  body #appShell #workflowPanel #appNotificationButton { order: 3; }
  body #appShell #workflowPanel #clearAllButton { order: 4; }
  body #appShell #workflowPanel #mobileActionsButton { order: 5; }

  body #appShell #workflowPanel #mobileActionsButton {
    display: inline-flex;
  }

  body #appShell #workflowPanel #sidebarActionMenu > summary {
    display: none;
  }

  /* Row 2: four equal columns, circle centred above its label. */
  body #appShell #workflowPanel nav.step-list[aria-label] {
    order: 6;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 0 0 100%;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    justify-self: stretch;
    overflow: visible;
    border: 0;
  }

  body.mobile-actions-open #appShell #workflowPanel nav.step-list[aria-label] {
    display: none;
  }

  body #appShell #workflowPanel nav.step-list .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    width: auto;
    height: 48px;
    min-height: 44px;
    padding: 0 2px;
    border-radius: var(--radius-md);
    text-align: center;
  }

  body #appShell #workflowPanel nav.step-list .step.is-active {
    background: rgb(var(--accent-wash-rgb) / 0.16);
  }

  body #appShell #workflowPanel nav.step-list .step .step-copy {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  body #appShell #workflowPanel nav.step-list .step .step-copy > strong {
    display: block;
    max-width: 100%;
    font-size: 11px;
    line-height: 12px;
    letter-spacing: 0.02em;
    text-align: center;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body #appShell #workflowPanel nav.step-list .step.is-active .step-copy > strong {
    color: var(--text-strong);
  }
}

@media (min-width: 641px) and (max-width: 860px) {
  body #appShell #workflowPanel.sidebar:not([hidden]) {
    column-gap: var(--space-2);
  }
}

@media (max-width: 640px) {
  /* Phones: notifications are in the menu sheet, so the bell stays out of row 1. */
  body #appShell #workflowPanel #appNotificationButton {
    display: none;
  }

  body #appShell #workflowPanel {
    --hdr-word: clamp(12.5px, calc((100vw - 260px) / 5.4), 19.5px);
  }
}

@media (max-width: 340px) {
  body #appShell #workflowPanel {
    --hdr-logo: 28px;
  }

  body #appShell #workflowPanel.sidebar:not([hidden]) {
    padding-inline: 2px;
  }
}

/* ---- 861 - 1024px: one row ---------------------------------------------- */
@media (min-width: 861px) and (max-width: 1024px) {
  body #appShell #workflowPanel {
    --hdr-logo: 44px;
    --hdr-word: clamp(0.92rem, 1.15vw, 1.12rem);
  }

  body #appShell #workflowPanel.sidebar:not([hidden]) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand steps actions";
    column-gap: var(--space-3);
    justify-content: stretch;
  }

  body #appShell #workflowPanel #homeButton {
    grid-area: brand;
    justify-self: start;
    width: max-content;
  }

  body #appShell #workflowPanel nav.step-list[aria-label] {
    grid-area: steps;
    justify-self: center;
    width: max-content;
  }

  body #appShell #workflowPanel #workflowActions {
    grid-area: actions;
    display: flex;
    justify-self: end;
    gap: var(--space-2);
    margin: 0;
  }
}

/* The tagline and its divider come back where the row has 12px to spare. */
@media (min-width: 1010px) and (max-width: 1024px) {
  body #appShell #workflowPanel #homeButton > div {
    display: flex;
  }
}

/* ==== TASK-101: review panel docked left, or detached (>= 761px) ==========
   review-panel-v3.js sets html[data-panel-side] to left, right or float. Right
   is the default and has no rules here: it is the layout above. Left mirrors it
   on the Yours side; float places the panel from --dock-x / --dock-top on the
   stage. The PO stage and the phone bottom sheet are excluded (JS keeps the
   attribute at "right" there, and every rule also skips data-source-kind="po").
   The panel rules out-rank review-panel-v3.css by id count, not order. */
@media (min-width: 761px) {
  /* -- the dock control in the panel header -- */
  html[data-layout-v2="float"] #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > .study-panel-heading {
    position: relative !important;
  }

  #reviewPanel .panel-dock-controls {
    position: absolute;
    top: -2px;
    /* Just after the title; review-panel-v3.js measures it (82px fits "REVIEW"). */
    left: calc(var(--dock-title-w, 82px) + 10px);
    display: inline-flex;
    gap: 4px;
  }

  #reviewPanel .panel-dock-controls > button {
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border: 1px solid rgb(var(--text-muted-rgb) / .45);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
  }

  #reviewPanel .panel-dock-controls > button > svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
    pointer-events: none;
  }

  #reviewPanel .panel-dock-controls > button:hover {
    color: var(--text-strong);
    border-color: var(--text-muted);
  }

  #reviewPanel .panel-dock-controls > button[aria-pressed="true"] {
    background: var(--accent-button);
    border-color: var(--accent-button);
    color: var(--on-colour-button);
  }

  #reviewPanel .panel-dock-controls > button:focus-visible {
    outline: 2px solid var(--text-strong);
    outline-offset: 1px;
  }

  /* Header is the drag handle. */
  html[data-panel-side="float"] #reviewPanel > #studyTopTools,
  html[data-panel-side="left"] #reviewPanel > #studyTopTools,
  html[data-panel-side="right"] #reviewPanel > #studyTopTools {
    cursor: grab;
    touch-action: none;
  }

  html[data-panel-dragging] #reviewPanel > #studyTopTools {
    cursor: grabbing;
  }

  html[data-panel-dragging] {
    user-select: none;
  }

  /* -- docked left -- */
  html[data-panel-side="left"][data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen#layoutV2Stage-reviewScreen:has(#reviewPanel:not([data-source-kind="po"])) > #reviewPanel#reviewPanel {
    right: auto !important;
    left: var(--floating-panel-right, 20px) !important;
  }

  html[data-panel-side="left"][data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen#layoutV2Stage-reviewScreen:has(#reviewPanel:not([data-source-kind="po"])) > #reviewPanel#reviewPanel:is(.is-collapsed, .is-flyout-opening, .is-flyout-closing) {
    transform: translate3d(calc(-1 * (var(--floating-panel-width, 268px) + var(--floating-panel-right, 20px))), -50%, 0) scale(1) !important;
  }

  /* Retract tab: on the panel's right edge, mirrored. */
  html[data-panel-side="left"][data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen#layoutV2Stage-reviewScreen:has(#reviewPanel:not([data-source-kind="po"])) > button[data-panel-toggle="review"] {
    right: auto !important;
    left: calc(var(--floating-panel-width, 268px) + var(--floating-panel-right, 20px)) !important;
  }

  html[data-panel-side="left"][data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen#layoutV2Stage-reviewScreen:has(#reviewPanel:not([data-source-kind="po"])) > button[data-panel-toggle="review"]::before {
    left: 0 !important;
    right: auto !important;
    border-radius: 0 14px 14px 0 !important;
  }

  html[data-panel-side="left"][data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen#layoutV2Stage-reviewScreen:has(#reviewPanel:not([data-source-kind="po"])) > button[data-panel-toggle="review"]:not(.nope) > span::before {
    transform: scaleX(-1) !important;
  }

  html[data-panel-side="left"][data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen#layoutV2Stage-reviewScreen:has(#reviewPanel.is-collapsed:not([data-source-kind="po"])) > button[data-panel-toggle="review"] > span::before {
    transform: none !important;
  }

  html[data-panel-side="left"][data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen#layoutV2Stage-reviewScreen:has(#reviewPanel:is(.is-collapsed, .is-flyout-opening, .is-flyout-closing):not([data-source-kind="po"])) > button[data-panel-toggle="review"] {
    transform: translate3d(calc(-1 * (var(--floating-panel-width, 268px) + var(--floating-panel-right, 20px))), -50%, 0) !important;
  }

  /* -- detached: the panel sits where the user put it -- */
  html[data-panel-side="float"][data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen#layoutV2Stage-reviewScreen:has(#reviewPanel:not([data-source-kind="po"])) > #reviewPanel#reviewPanel {
    right: auto !important;
    bottom: auto !important;
    left: var(--dock-x, 20px) !important;
    top: var(--dock-top, 120px) !important;
    height: var(--dock-h, min(640px, calc(var(--dock-limit, calc(100dvh - 12px)) - var(--dock-top, 120px)))) !important;
    max-height: calc(var(--dock-limit, calc(100dvh - 12px)) - var(--dock-top, 120px)) !important;
    transform: none !important;
    transition: none !important;
    box-shadow: 0 18px 48px rgb(var(--shadow-rgb) / .55), 0 0 0 1px rgb(var(--text-muted-rgb) / .35) !important;
    z-index: 60 !important;
  }

  html[data-panel-side="float"][data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen#layoutV2Stage-reviewScreen:has(#reviewPanel:not([data-source-kind="po"])) > button[data-panel-toggle="review"] {
    display: none !important;
  }

  /* While dragging near an edge, outline where the panel will dock. */
  html[data-panel-snap="left"][data-panel-dragging] #layoutV2Stage-reviewScreen::before,
  html[data-panel-snap="right"][data-panel-dragging] #layoutV2Stage-reviewScreen::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(var(--floating-panel-width, 268px) + var(--floating-panel-right, 20px));
    border: 2px dashed var(--accent-button);
    border-radius: 12px;
    pointer-events: none;
    box-sizing: border-box;
  }

  html[data-panel-snap="left"][data-panel-dragging] #layoutV2Stage-reviewScreen::before { left: 0; }
  html[data-panel-snap="right"][data-panel-dragging] #layoutV2Stage-reviewScreen::before { right: 0; }
}

/* >= 1181px: --rr-panel-top starts the docked-left panel below the Yours
   header. Only the sideways slide differs from the right dock. */
@media (min-width: 1181px) {
  html[data-panel-side="left"][data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen#layoutV2Stage-reviewScreen[data-rr-panel-top]:has(#reviewPanel:not([data-source-kind="po"])) > #reviewPanel#reviewPanel:is(.is-collapsed, .is-flyout-opening, .is-flyout-closing) {
    transform: translate3d(calc(-1 * (var(--floating-panel-width, 268px) + var(--floating-panel-right, 20px))), 0, 0) scale(1) !important;
  }
}

/* 861px to 1180px: the open panel reserves its column on its own side. */
@media (min-width: 861px) and (max-width: 1180px) {
  html[data-panel-side="left"][data-layout-v2="float"][data-has~="review-panel-open-not-po"]:not(#has-pad):not(.has-pad) #reviewScreen .drawing-panes {
    padding-right: 0;
    padding-left: var(--rr-panel-clearance);
    transition: padding-left 200ms ease;
  }

  html[data-panel-side="float"][data-layout-v2="float"][data-has~="review-panel-not-po"]:not(#has-pad) #reviewScreen .drawing-panes {
    padding-right: 0;
    padding-left: 0;
  }
}

/* 761px to 860px: stacked panes; the header clears the left panel. */
@media (min-width: 761px) and (max-width: 860px) {
  html[data-panel-side="left"][data-layout-v2="float"][data-has~="review-panel-open-not-po"]:not(#has-pad):not(.has-pad) #reviewScreen .drawing-pane:nth-of-type(n) > header {
    padding-right: 16px;
    padding-left: calc(var(--rr-panel-clearance) + 18px);
  }

  html[data-panel-side="float"][data-layout-v2="float"][data-has~="review-panel-not-po"]:not(#has-pad) #reviewScreen .drawing-pane:nth-of-type(n) > header {
    padding-right: 16px;
  }
}

/* Phone: no dock controls, bottom sheet as before. */
@media (max-width: 760px) {
  #reviewPanel .panel-dock-controls {
    display: none !important;
  }
}