/* APPVLR live layout v2 float — Jon mock 2026-09-16 (attached PNG).
   PDFs full-bleed. Compact floating Review card. DC open = 2×2 pills + MAX TOLERANCE. */
html[data-layout-v2="float"] {
  --floating-panel-width: 268px;
  --floating-panel-right: 20px;
  --floating-panel-top: 248px;
  --floating-panel-bottom: auto;
  --floating-panel-height: auto;
  --layout-v2-toggle-blue: var(--accent-button);
  --layout-v2-pill-on: linear-gradient(180deg, var(--accent-button-highlight), var(--accent-button) 55%, var(--accent-button-press));
  --layout-v2-pill-off: linear-gradient(180deg, var(--border), var(--surface-raised));
  --layout-v2-util-gap: 8px;
  --layout-v2-stack-width: 200px;
  --layout-v2-row-h: 44px;
}

html[data-layout-v2="float"] #reviewScreen,
html[data-layout-v2="float"] #reviewScreen .review-scale-stage,
html[data-layout-v2="float"] #reviewScreen .review-layout,
html[data-layout-v2="float"] #reviewScreen .drawing-board,
html[data-layout-v2="float"] #stampScreen,
html[data-layout-v2="float"] #stampScreen .stamp-layout,
html[data-layout-v2="float"] #saveScreen,
html[data-layout-v2="float"] #saveScreen .save-layout,
html[data-layout-v2="float"] .workspace,
html[data-layout-v2="float"] .app-shell,
html[data-layout-v2="float"] .screen {
  transform: none !important;
  translate: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  will-change: auto !important;
}

html[data-layout-v2="float"] #reviewScreen .review-layout,
html[data-layout-v2="float"] #reviewScreen .review-layout:has(.findings-panel.is-collapsed),
html[data-layout-v2="float"] #stampScreen .stamp-layout,
html[data-layout-v2="float"] #stampScreen .stamp-layout:has(.side-panel-wrap.is-collapsed),
html[data-layout-v2="float"] #stampScreen .stamp-layout:not(:has(.side-panel-wrap > .stamp-controls:not(.is-collapsed))),
html[data-layout-v2="float"] #saveScreen .save-layout,
html[data-layout-v2="float"] #saveScreen .save-layout:has(.save-panel.is-collapsed) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  transition: none !important;
  overflow: visible !important;
  --side-control-width: 0px !important;
}

html[data-layout-v2="float"] #reviewScreen .review-layout::after,
html[data-layout-v2="float"] .panel-resize-handle {
  display: none !important;
}

html[data-layout-v2="float"] #reviewScreen .drawing-board,
html[data-layout-v2="float"] #stampScreen .stamp-canvas,
html[data-layout-v2="float"] #saveScreen .save-preview {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Viewport host: panels live here so page scroll cannot drag them. */
html[data-layout-v2="float"] #layoutV2FloatHost {
  position: fixed !important;
  inset: 0 !important;
  z-index: 130;
  pointer-events: none;
  overflow: visible;
}

/* The nav bar (z 70) sits under the panel host (z 130), so an open Menu or
   notifications list slid under the Review, Stamp and Export panels and hid
   Feedback, Settings and Log out (Jon 2026-10-02). While the bar is in use its
   dropdowns come to the front; the bar itself never overlaps a panel. */
html[data-layout-v2="float"] #workflowPanel:is(:has(details[open]), :hover, :focus-within) {
  z-index: 140 !important;
}

/* An open dropdown also comes in front of the review header, Sheet manager and
   Drawing controls (200), and stays under dialogs (220+) (Jon 2026-10-07). */
html[data-layout-v2="float"] #workflowPanel:has(details[open]) {
  z-index: 210 !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage[hidden] {
  display: none !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel,
html[data-layout-v2="float"] #layoutV2FloatHost #stampPanel,
html[data-layout-v2="float"] #layoutV2FloatHost #savePanel {
  position: absolute !important;
  z-index: 130 !important;
  inset: var(--floating-panel-top) var(--floating-panel-right) auto auto !important;
  width: var(--floating-panel-width) !important;
  max-width: none !important;
  min-width: 0 !important;
  height: var(--floating-panel-height) !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgb(var(--surface-rgb) / .98), rgb(var(--bg-rgb) / .99)) !important;
  border: 1px solid rgb(var(--overlay-rgb) / .1) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 40px rgb(var(--shadow-rgb) / .45), inset 0 1px 0 rgb(var(--gloss-rgb) / .06) !important;
  pointer-events: auto !important;
  transform-origin: right center !important;
  will-change: transform, opacity !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition: opacity 220ms ease, transform 360ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel.is-collapsed,
html[data-layout-v2="float"] #layoutV2FloatHost #stampPanel.is-collapsed,
html[data-layout-v2="float"] #layoutV2FloatHost .side-panel-wrap.is-collapsed,
html[data-layout-v2="float"] #layoutV2FloatHost #savePanel.is-collapsed,
html[data-layout-v2="float"] #layoutV2FloatHost .save-panel.is-collapsed {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: flex !important;
  transform: translate3d(28px, 0, 0) scale(.985) !important;
  transition: opacity 160ms ease, transform 240ms cubic-bezier(.4, 0, 1, 1), visibility 0s linear 240ms !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost .panel-visibility-toggle {
  position: absolute !important;
  z-index: 131 !important;
  /* Open: small blue chevron on the card's left edge */
  inset: calc(var(--floating-panel-top) + 82px) calc(var(--floating-panel-right) + var(--floating-panel-width)) auto auto !important;
  translate: none !important;
  transform: none !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 68px !important;
  min-height: 68px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-strong) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: auto !important;
  filter: none !important;
  cursor: pointer !important;
  transition: inset 360ms cubic-bezier(.16, 1, .3, 1), filter 160ms ease !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost .panel-visibility-toggle::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 0 auto !important;
  width: 20px !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, var(--accent-button), var(--layout-v2-toggle-blue) 48%, color-mix(in srgb, var(--accent-button) 53%, var(--shade))) !important;
  color: var(--on-colour-button) !important;
  border: 1px solid rgb(var(--overlay-rgb) / .28) !important;
  border-right: 0 !important;
  border-radius: .75rem 0 0 .75rem !important;
  box-shadow: -6px 8px 22px rgb(var(--accent-rgb) / .35), inset 0 1px 0 rgb(var(--gloss-rgb) / .22) !important;
  pointer-events: none !important;
  transition: width 360ms cubic-bezier(.16, 1, .3, 1), border-radius 360ms cubic-bezier(.16, 1, .3, 1), background 160ms ease, box-shadow 160ms ease !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost .panel-visibility-toggle:hover::before,
html[data-layout-v2="float"] #layoutV2FloatHost .panel-visibility-toggle:focus-visible::before {
  filter: brightness(1.16);
  box-shadow: -8px 10px 26px rgb(var(--accent-rgb) / .45), inset 0 1px 0 rgb(var(--gloss-rgb) / .28) !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost .panel-visibility-toggle > span {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 100% !important;
  color: var(--text-strong) !important;
  font: 700 1.05rem/1 var(--font-mono, monospace) !important;
  text-shadow: 0 1px 2px rgb(var(--shade-rgb) / .35) !important;
  transition: transform 280ms cubic-bezier(.16, 1, .3, 1) !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(.is-collapsed) > .panel-visibility-toggle {
  /* Collapsed: tab on the right wall */
  inset: calc(var(--floating-panel-top) + 82px) 0 auto auto !important;
  justify-content: flex-start !important;
  transition: inset 240ms cubic-bezier(.4, 0, 1, 1), filter 160ms ease !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(.is-collapsed) > .panel-visibility-toggle::before {
  inset: 0 auto 0 0 !important;
  width: 22px !important;
  border: 1px solid rgb(var(--overlay-rgb) / .28) !important;
  border-right: 0 !important;
  border-radius: .75rem 0 0 .75rem !important;
  box-shadow: -6px 8px 22px rgb(var(--accent-rgb) / .45), inset 0 1px 0 rgb(var(--gloss-rgb) / .22) !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(.is-collapsed) > .panel-visibility-toggle > span {
  width: 22px !important;
  transform: rotate(180deg) !important;
}

/* Fallback if JS has not reparented yet */
html[data-layout-v2="float"] #reviewScreen .review-layout > #reviewPanel,
html[data-layout-v2="float"] #stampScreen .stamp-layout > #stampPanel,
html[data-layout-v2="float"] #saveScreen .save-layout > #savePanel {
  position: fixed !important;
  z-index: 130 !important;
  inset: var(--floating-panel-top) var(--floating-panel-right) auto auto !important;
  width: var(--floating-panel-width) !important;
  height: var(--floating-panel-height) !important;
  pointer-events: auto !important;
}

/* ===== Top utility row — EXACT INTERACTIVE-RIGHT-PANEL open-shelf chrome ===== */
html[data-layout-v2="float"] #reviewScreen .review-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: end !important;
  column-gap: 12px !important;
  row-gap: 8px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

html[data-layout-v2="float"] #reviewScreen .review-heading {
  grid-column: 1 !important;
  min-width: 0 !important;
  align-self: end !important;
}

/* ===== Utility row: INTERACTIVE sheet-manager-drawing-controls-layout =====
   Closed: DC | SM (2×200). Open: absolute popover under DC (2×2 + tolerance). */
html[data-layout-v2="float"] #reviewScreen .review-header {
  position: relative !important;
  z-index: 80 !important;
  overflow: visible !important;
}
html[data-layout-v2="float"] #reviewScreen .review-header:has(#drawingControls[open]) {
  z-index: 150 !important;
}

html[data-layout-v2="float"] #reviewScreen .review-actions {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: 200px 200px !important;
  grid-template-rows: 44px !important;
  gap: 8px !important;
  align-items: end !important;
  justify-content: end !important;
  justify-self: end !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 8px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 200 !important;
}

html[data-layout-v2="float"] #reviewScreen .review-actions > #drawingControls {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}

html[data-layout-v2="float"] #reviewScreen .review-actions > #pairingManagerButton:not([hidden]),
html[data-layout-v2="float"] #reviewScreen .review-actions > .study-manager {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
}

html[data-layout-v2="float"] #reviewScreen .review-actions #pairingManagerButton:not([hidden]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  visibility: visible !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--muted-action) 28%, transparent) !important;
  background: linear-gradient(180deg, rgb(var(--surface-card-rgb) / .98), rgb(var(--surface-rgb) / .98)) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / .08), 0 8px 18px rgb(var(--shadow-rgb) / .28) !important;
  font: 700 .72rem/1 var(--font-ui, system-ui) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsSummary {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 30px 0 12px !important;
  border: 1px solid color-mix(in srgb, var(--muted-action) 25%, transparent) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgb(var(--surface-card-rgb) / .98), rgb(var(--surface-rgb) / .98)) !important;
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / .08) !important;
  color: var(--text) !important;
  font: 700 .72rem/1 var(--font-ui, system-ui) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  list-style: none !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsSummary::-webkit-details-marker { display: none; }

html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsSummary .drawing-controls-chevron {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  background: none !important;
  /* Closed: points down */
  transform: translateY(-65%) rotate(45deg) !important;
  transition: transform 280ms cubic-bezier(.16, 1, .3, 1) !important;
  pointer-events: none !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls[open] #drawingControlsSummary .drawing-controls-chevron {
  /* Open: points up */
  transform: translateY(-25%) rotate(225deg) !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsSummary {
  position: relative !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls[open] #drawingControlsSummary {
  border-color: rgb(var(--accent-rgb) / .45) !important;
  background: linear-gradient(180deg, rgb(var(--surface-card-rgb) / .98), rgb(var(--surface-raised-rgb) / .98)) !important;
  color: var(--text-strong) !important;
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / .1) !important;
}

/* Open shelf — Jon's new UI mock: 2×2 under DC + MAX TOLERANCE ±2 MM (no slider) */
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls > #drawingControlsBody {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: auto !important;
  right: 0 !important; /* hang left from DC so it does not cover Review card */
  bottom: auto !important;
  width: 460px !important;
  min-width: 460px !important;
  max-width: 460px !important;
  height: 128px !important;
  min-height: 128px !important;
  max-height: 140px !important;
  box-sizing: border-box !important;
  padding: 10px !important;
  z-index: 160 !important;
  transform-origin: top right !important;
  background: linear-gradient(180deg, rgb(var(--surface-raised-rgb) / .99), rgb(var(--bg-rgb) / .99)) !important;
  border: 1px solid color-mix(in srgb, var(--muted-action) 32%, transparent) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 36px rgb(var(--shadow-rgb) / .48), inset 0 1px 0 rgb(var(--gloss-rgb) / .1) !important;
  overflow: visible !important;
  will-change: transform, opacity !important;
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls > #drawingControlsBody {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition: opacity 150ms ease, transform 320ms cubic-bezier(.16, 1, .3, 1), display 320ms allow-discrete;
    transition-behavior: allow-discrete;
  }
  html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody[hidden] {
    display: none !important;
    opacity: 0 !important;
    transform: translate3d(0, -8px, 0) scale(.96) !important;
  }
  @starting-style {
    html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls[open] > #drawingControlsBody:not([hidden]) {
      opacity: 0;
      transform: translate3d(0, -8px, 0) scale(.96);
    }
  }
  html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls[open] > #drawingControlsBody:not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 88px !important;
    grid-template-rows: 48px 48px !important;
    gap: 8px 10px !important;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody[hidden] {
    display: none !important;
  }
  html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls[open] > #drawingControlsBody:not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 88px !important;
    grid-template-rows: 48px 48px !important;
    gap: 8px 10px !important;
  }
}

html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody.is-closing {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 66px !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px 8px !important;
  opacity: 0 !important;
  transform: translate3d(0, -8px, 0) scale(.96) !important;
  pointer-events: none !important;
}

html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody > .diff-toggle { grid-column: 1; grid-row: 1; }
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody > .link-views-toggle { grid-column: 2; grid-row: 1; }
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody > .lock-marks-toggle { grid-column: 1; grid-row: 2; }
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody > .rotate-all-toggle { grid-column: 2; grid-row: 2; }
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody > .review-tolerance-control {
  grid-column: 3; grid-row: 1 / span 2;
}

html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .diff-toggle,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .link-views-toggle,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .lock-marks-toggle,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .rotate-all-toggle {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 12px 0 8px !important;
  box-sizing: border-box !important;
  color: color-mix(in srgb, var(--text) 89%, var(--surface-muted)) !important;
  background: var(--layout-v2-pill-off) !important;
  border: 1px solid color-mix(in srgb, var(--muted-action) 22%, transparent) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / .06) !important;
  cursor: pointer !important;
  text-align: left !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .toggle:has(input[type="checkbox"]:checked) {
  color: var(--on-colour-button) !important;
  background: var(--layout-v2-pill-on) !important;
  border-color: transparent !important;
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / .22), 0 8px 16px rgb(var(--accent-button-rgb) / .32) !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .toggle > input[type="checkbox"] {
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: rgb(var(--overlay-rgb) / .12) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  border: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .toggle:has(input[type="checkbox"]:checked) > input[type="checkbox"] {
  background-color: rgb(var(--overlay-rgb) / .22) !important;
  border: 0 !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .diff-toggle > input[type="checkbox"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='6.5'/><path d='M20 20l-3.2-3.2'/></svg>") !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .link-views-toggle > input[type="checkbox"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'><path d='M10 13a5 5 0 0 0 7.07 0l1.4-1.4a5 5 0 0 0-7.07-7.07L10 6'/><path d='M14 11a5 5 0 0 0-7.07 0L5.5 12.4a5 5 0 0 0 7.07 7.07L14 18'/></svg>") !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .lock-marks-toggle > input[type="checkbox"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'><rect x='6' y='11' width='12' height='10' rx='2'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>") !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .rotate-all-toggle > input[type="checkbox"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'><path d='M21 12a9 9 0 1 1-2.64-6.36'/><path d='M21 3v6h-6'/></svg>") !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .diff-toggle-label,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .link-views-label,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .lock-marks-label,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .rotate-all-label {
  grid-area: 1 / 2 !important;
  position: static !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: 700 .64rem/1.08 var(--font-ui, system-ui) !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  overflow: visible !important;
  clip: auto !important;
}

/* MAX TOLERANCE ± N MM — number only, no slider */
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .review-tolerance-control {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  width: 66px !important;
  min-width: 66px !important;
  height: auto !important;
  min-height: 0 !important;
  color: var(--accent-strong) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .review-tolerance-control::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -4px !important;
  width: 1px !important;
  background: rgb(var(--accent-border-rgb) / .28) !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .review-tolerance-slider,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .detail-slider,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .detail-slider-scale,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .detail-slider-stops,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody #reviewToleranceRange,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .mobile-slider-label,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .visually-hidden {
  display: none !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .drawing-controls-label,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody #reviewToleranceLabel {
  display: block !important;
  color: var(--accent-strong) !important;
  font: 700 .58rem/1.05 var(--font-ui, system-ui) !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .drawing-controls-tolerance-input,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .review-tolerance-number.drawing-controls-tolerance-input {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 4px !important;
  color: var(--text-strong) !important;
  background: rgb(var(--bg-strong-rgb) / .96) !important;
  border: 1px solid color-mix(in srgb, var(--muted-action) 32%, transparent) !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .drawing-controls-tolerance-input > span {
  flex: 0 0 auto !important;
  color: var(--text-strong) !important;
  font: 700 .62rem/1 var(--font-ui, system-ui) !important;
  display: inline !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .drawing-controls-tolerance-input input,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .review-tolerance-number input {
  width: 28px !important;
  min-width: 28px !important;
  height: 32px !important;
  padding: 0 !important;
  color: var(--text-strong) !important;
  background: transparent !important;
  border: 0 !important;
  font: 700 .7rem/1 var(--font-mono, monospace) !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}

/* Hide Approve/Reject from this utility row; Review Again stays for next pass */
html[data-layout-v2="float"] #reviewScreen .review-actions > .review-final-stack,
html[data-layout-v2="float"] #reviewScreen .review-actions > .review-again-button,
html[data-layout-v2="float"] #reviewScreen .review-header .review-decision-actions {
  display: none !important;
}
html[data-layout-v2="float"] #reviewScreen .review-post-controls .review-again-button {
  display: none !important;
}
html[data-layout-v2="float"] #reviewScreen .review-post-controls,
html[data-layout-v2="float"] #reviewScreen .review-sticky-actions {
  display: contents !important;
}

@media (max-width: 960px) {
  html[data-layout-v2="float"] #reviewScreen .review-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html[data-layout-v2="float"] #reviewScreen .review-actions {
    grid-column: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}
@media (max-width: 640px) {
  html[data-layout-v2="float"] {
    --floating-panel-width: min(320px, calc(100vw - 60px));
    --floating-panel-right: 0px;
    /* PS-004: the panel starts at --floating-panel-top (320px on phones), so
       its height must stop above the bottom edge or the footer buttons
       (Export now, Export PDF, Share PDF) sit off screen. */
    --floating-panel-height: min(550px, calc(100dvh - var(--floating-panel-top, 320px) - 12px));
  }
}
/* PS-004 (small tablets): between 641px and 760px the panel kept its content
   height (about 770px from a 320px top), so Export now fell off the screen. */
@media (min-width: 641px) and (max-width: 760px) {
  html[data-layout-v2="float"] {
    --floating-panel-height: min(640px, calc(100dvh - var(--floating-panel-top, 320px) - 12px));
  }
}
@media (max-height: 650px) {
  html[data-layout-v2="float"] {
    --floating-panel-top: 112px;
    --floating-panel-height: auto;
  }
}



/* Old tolerance SLIDER removed — number input only (Jon 2026-09-16) */
html[data-layout-v2="float"] .review-tolerance-slider,
html[data-layout-v2="float"] .detail-slider.review-tolerance-slider,
html[data-layout-v2="float"] .detail-slider-scale,
html[data-layout-v2="float"] .detail-slider-stops,
html[data-layout-v2="float"] #reviewToleranceRange,
html[data-layout-v2="float"] .review-tolerance-up-to,
html[data-layout-v2="float"] .mobile-slider-label {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Open state button colors — match Jon mock */
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls[open] #drawingControlsSummary {
  color: var(--text-strong) !important;
  background: linear-gradient(180deg, rgb(var(--surface-card-rgb) / .98), rgb(var(--surface-raised-rgb) / .98)) !important;
  border-color: rgb(var(--accent-rgb) / .45) !important;
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / .1) !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions:has(#drawingControls[open]) #pairingManagerButton {
  color: var(--text) !important;
  background: linear-gradient(180deg, rgb(var(--surface-raised-rgb) / .98), rgb(var(--bg-rgb) / .99)) !important;
  border: 1px solid color-mix(in srgb, var(--muted-action) 30%, transparent) !important;
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / .08) !important;
}

/* Tolerance column — exact mockup: label + ± N MM box */
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .review-tolerance-control {
  width: 88px !important;
  min-width: 88px !important;
  grid-template-rows: auto 48px !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .drawing-controls-label,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody #reviewToleranceLabel {
  grid-row: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .drawing-controls-tolerance-input {
  grid-row: 2 !important;
  border-radius: 2px !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody .drawing-controls-tolerance-input > span[aria-hidden="true"] {
  opacity: 1 !important;
  color: var(--text-strong) !important;
}

/* Review float panel chrome — Jon mock: Queue / Review Again / tabs / Approve+Reject */
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 268px !important;
  background: linear-gradient(180deg, rgb(var(--surface-rgb) / .98), rgb(var(--bg-rgb) / .99)) !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .findings-panel,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .side-panel,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel > * {
  min-width: 0 !important;
  flex: 0 0 auto !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel #reviewPanelScroll,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .findings-scroll-region,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel #activeFindingsTab,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel #revisionReviewTab {
  display: none !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .findings-tabbar {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .findings-tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--accent-button-press) !important;
  color: var(--on-colour-button) !important;
  font: 700 .68rem/1 var(--font-ui, system-ui) !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .findings-tab.is-active {
  background: var(--accent-button) !important;
  color: var(--on-colour-button) !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .findings-tab-details:not(.is-active) {
  background: color-mix(in srgb, var(--complete-button) 48%, var(--shade)) !important;
  color: var(--on-colour-button) !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #reviewAgainButton,
html[data-layout-v2="float"] #layoutV2FloatHost .review-again-button {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: var(--accent-button) !important;
  border: 0 !important;
  color: var(--on-colour-button) !important;
  font: 700 .78rem/1 var(--font-ui, system-ui) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #appQueueButton,
html[data-layout-v2="float"] #layoutV2FloatHost .app-queue-button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  background: var(--complete-button) !important;
  border: 0 !important;
  color: var(--on-colour-button) !important;
  font: 700 .78rem/1 var(--font-ui, system-ui) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  order: -2 !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #reviewAgainButton { order: -1 !important; }
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .findings-tabbar { order: 0 !important; }
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .review-decision-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 2 !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #approveDrawingButton,
html[data-layout-v2="float"] #layoutV2FloatHost #rejectDrawingButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  height: 44px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: var(--text-strong) !important;
  font: 700 .78rem/1 var(--font-ui, system-ui) !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
/* Approve and Reject sit above the panel's bottom fade (z 5) and each carry
   their own shadow, like the other floating buttons (Jon 2026-10-07). */
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel :is(#approveDrawingButton, #rejectDrawingButton) {
  position: relative !important;
  z-index: 6 !important;
  box-shadow: var(--shadow-control) !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #approveDrawingButton {
  background: var(--accent-button) !important;
  color: var(--on-colour-button) !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #rejectDrawingButton {
  background: var(--action-danger) !important;
  color: var(--on-colour-button) !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #rejectDrawingButton::before {
  content: "✕";
  font-size: .95rem;
  line-height: 1;
}


/* Sheet Manager — clean label like mock (hide jammed count chip) */
html[data-layout-v2="float"] #reviewScreen .review-actions #pairingManagerCount,
html[data-layout-v2="float"] #reviewScreen .review-actions .pairing-manager-count {
  display: none !important;
}

/* Always apply open-card grid (not only inside reduced-motion media) */
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls[open] > #drawingControlsBody:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 88px !important;
  grid-template-rows: 48px 48px !important;
  gap: 8px 10px !important;
  align-items: stretch !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody > .diff-toggle,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody > .link-views-toggle,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody > .lock-marks-toggle,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody > .rotate-all-toggle {
  min-height: 48px !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody > .rotate-all-toggle {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* v23-review-midfloat: Review card top-anchored mid-right like Jon mock PNG */

html[data-layout-v2="float"] #pairingManagerCount,
html[data-layout-v2="float"] .pairing-manager-count {
  display: none !important;
}
/* PS-007: white 12px labels need 4.5:1, so the blue is one step deeper than
   the old #3b82f6/#2f83f7 (3.68:1). Same hue and gradient shape. */
html[data-layout-v2="float"] #layoutV2FloatHost #reviewAgainButton,
html[data-layout-v2="float"] #layoutV2FloatHost #approveDrawingButton {
  background: linear-gradient(180deg, var(--accent-button), var(--accent-button) 55%, var(--accent-button)) !important;
  color: var(--on-colour-button) !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #pairingManagerButton,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsSummary,
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls > #drawingControlsBody {
  border-radius: 16px !important;
}


/* v25 — Review card below DC|SM row (mock Queue ~32% down); keep utilities clickable */
html[data-layout-v2="float"] {
  --floating-panel-top: 248px;
}
html[data-layout-v2="float"] #reviewScreen .review-header {
  z-index: 200 !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions > #drawingControls,
html[data-layout-v2="float"] #reviewScreen .review-actions > #pairingManagerButton,
html[data-layout-v2="float"] #reviewScreen .review-actions > .study-manager {
  z-index: 201 !important;
  position: relative !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel {
  top: var(--floating-panel-top) !important;
  bottom: auto !important;
}


/* v26 — park DC|SM left of Review float so Sheet Manager is not covered */
html[data-layout-v2="float"] #reviewScreen .review-actions {
  margin-right: calc(var(--floating-panel-width) + 28px) !important;
  justify-self: end !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls > #drawingControlsBody {
  /* hang left from DC, away from Review card */
  left: auto !important;
  right: 0 !important;
  max-width: min(460px, calc(100vw - var(--floating-panel-width) - 80px)) !important;
}


/* v27 — mock: open DC card left-anchored under DRAWING CONTROLS (spans toward SM); brighter open DC */
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls > #drawingControlsBody {
  left: 0 !important;
  right: auto !important;
  width: 460px !important;
  min-width: 460px !important;
  max-width: min(460px, calc(100vw - var(--floating-panel-width) - 48px)) !important;
  transform-origin: top left !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls[open] #drawingControlsSummary {
  background: linear-gradient(180deg, var(--accent-button), var(--accent-button) 55%, var(--accent-button-press)) !important;
  border-color: transparent !important;
  color: var(--on-colour-button) !important;
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / .22), 0 8px 16px rgb(var(--accent-button-rgb) / .28) !important;
}

/* v28 — open DC card 420px so MAX TOLERANCE clears Review rail (~436px free after DC|SM+margin) */
html[data-layout-v2="float"] #reviewScreen .review-actions {
  margin-right: calc(var(--floating-panel-width) + 40px) !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls > #drawingControlsBody {
  left: 0 !important;
  right: auto !important;
  width: 420px !important;
  min-width: 420px !important;
  max-width: 420px !important;
  transform-origin: top left !important;
}
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls[open] > #drawingControlsBody:not([hidden]),
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControlsBody.is-closing {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 78px !important;
}

/* v29 — mock open DC summary: dark outlined (not solid blue fill); light text + blue border */
html[data-layout-v2="float"] #reviewScreen .review-actions #drawingControls[open] #drawingControlsSummary {
  background: linear-gradient(180deg, rgb(var(--surface-card-rgb) / .98), rgb(var(--surface-rgb) / .98)) !important;
  border: 1px solid rgb(var(--accent-rgb) / .55) !important;
  color: var(--accent-strong) !important;
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / .08), 0 0 0 1px rgb(var(--accent-button-rgb) / .12) !important;
}

/* The Menu dropdown is slightly translucent, like the Settings panel
   (Jon 2026-10-07). */
#workflowPanel #sidebarActionMenu .sidebar-action-menu-list {
  background: rgb(var(--surface-rgb) / .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}