/* APPVLR review side panel - ported from the APPVLRV2 INTERACTIVE-RIGHT-PANEL prototype.
   Scope: the review side panel and its buttons only.
   Pair with features/review-panel-v3.js, which builds the host nodes. */

#appvlr-review-panel-versions { width:100%; margin:0; padding:0; }

#appvlr-review-panel-versions #apvPanelMount > .study-body { order:3; }

#appvlr-review-panel-versions #apvPanelMount > #studyOutsideDecisions { order:4; }

#appvlr-review-panel-versions #reviewPanel > .study-decisions { position:relative; z-index:3; display:flex; align-items:center; justify-content:center; padding:16px 8px; background:transparent; border:0; box-shadow:none; }

#appvlr-review-panel-versions #reviewPanel > .study-decisions::before { content:""; position:absolute; left:0; right:0; bottom:100%; height:28px; pointer-events:none; background:linear-gradient(180deg, transparent 0%, rgb(var(--surface-rgb) / .45) 100%); }

#appvlr-review-panel-versions .review-decision-actions { width:100%; }

#appvlr-review-panel-versions .study-body { grid-template-columns:minmax(0,1fr); column-gap:0; }

#appvlr-review-panel-versions .study-rail { display:flex; position:absolute; left:-1.15rem; top:50%; z-index:30; width:44px; height:68px; margin:0; padding:0; align-items:center; justify-content:flex-start; transform:translateY(-50%); pointer-events:none; }

#appvlr-review-panel-versions .study-rail .panel-visibility-toggle { position:static !important; top:auto !important; right:auto !important; translate:none !important; transform:none !important; pointer-events:auto; width:1.15rem; min-width:1.15rem; height:4.25rem; color:var(--text-strong); background:var(--shell-blue); border:1px solid rgb(var(--overlay-rgb) / .24); border-radius:.65rem 0 0 .65rem; box-shadow:0 8px 22px rgb(var(--accent-rgb) / .3); }

#appvlr-review-panel-versions .study-rail .panel-visibility-toggle:hover,
 #appvlr-review-panel-versions .study-rail .panel-visibility-toggle:focus-visible { filter:brightness(1.16); }

@media(min-width:961px) {
  #appvlr-review-panel-versions { height:100% !important; min-height:0; max-height:none; overflow:hidden !important; }
  #appvlr-review-panel-versions #reviewScreen { height:100%; min-height:0; }
  #appvlr-review-panel-versions #apvPanelMount { height:100%; min-height:0; gap:8px; }
  #appvlr-review-panel-versions .study-body { flex:1 1 auto; height:0; min-height:0; grid-template-rows:minmax(0,1fr); }
  #appvlr-review-panel-versions #reviewPanel { height:100% !important; min-height:0 !important; max-height:none !important; align-self:stretch !important; overflow:hidden; }
  #appvlr-review-panel-versions #studyTopTools,
  #appvlr-review-panel-versions #reviewPanel > .findings-tabbar { flex:0 0 auto; display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; padding:8px; }
  #appvlr-review-panel-versions #studyTopTools > button,
  #appvlr-review-panel-versions #reviewPanel > .findings-tabbar .findings-tab:not([hidden]) { height:44px !important; min-height:44px !important; max-height:44px !important; width:100% !important; padding:0 8px !important; }
  #appvlr-review-panel-versions #reviewPanelScroll { flex:1 1 auto; min-height:0 !important; overflow:auto !important; padding-bottom:8px !important; -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 1rem), transparent 100%); mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 1rem), transparent 100%); }
  #appvlr-review-panel-versions #reviewPanel > .study-decisions { flex:0 0 auto; position:relative; z-index:3; display:flex; align-items:center; justify-content:center; padding:16px 8px; background:transparent; border:0; box-shadow:none; }
  #appvlr-review-panel-versions .review-decision-actions > button { height:36px !important; min-height:36px !important; padding:6px 8px !important; }
}

@media(max-width:960px) {
  #appvlr-review-panel-versions { overflow:visible !important; }
}

#appvlr-review-panel-versions { display:block; width:100%; min-width:0; max-width:736px; margin:auto; padding:16px; background:var(--bg); color:var(--text); font-family:var(--font-body); overflow:visible; }

#appvlr-review-panel-versions * { box-sizing:border-box; }

#appvlr-review-panel-versions #reviewScreen { display:block; width:100%; min-width:0; margin:0; padding:0; overflow:visible; }

#appvlr-review-panel-versions .study-unit { width:min(420px,100%); margin:auto; display:flex; flex-direction:column; gap:12px; }

/* Keep the OA rows on the source green status surface without changing their labels. */
#appvlr-review-panel-versions #drawingDetailsPanel #overallDimsPanel > .manual-dimension-card .manual-dimension-row:is(
 [data-manual-dim-row="height"],
 [data-manual-dim-row="width"],
 [data-manual-dim-row="depth"]
) {
 background:rgb(var(--success-rgb) / 0.3);
 border:0;
 box-shadow:none;
 color:var(--text-strong);
}

#appvlr-review-panel-versions #drawingDetailsPanel #overallDimsPanel > .manual-dimension-card .manual-dimension-row > summary:focus-visible {
 outline:2px solid var(--focus);
 outline-offset:2px;
}

#appvlr-review-panel-versions .study-tools { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

#appvlr-review-panel-versions .study-tools > button { width:100%; min-width:0; min-height:44px; }

#appvlr-review-panel-versions .study-body { display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:4px; align-items:stretch; }

#appvlr-review-panel-versions .study-rail { display:flex; align-items:center; }

#appvlr-review-panel-versions .study-rail .panel-visibility-toggle { position:static; transform:none; width:20px; min-width:20px; height:64px; padding:0; }

#appvlr-review-panel-versions #reviewPanel { position:relative; display:flex; flex-direction:column; width:100%; height:auto; min-height:460px; max-height:none; padding:0; margin:0; overflow:visible; }

#appvlr-review-panel-versions #reviewPanel > .findings-tabbar { position:static; flex:none; margin:0; }

#appvlr-review-panel-versions #reviewPanelScroll { padding:16px 8px; flex:1; min-height:0; overflow:visible; }

#appvlr-review-panel-versions #reviewPanelScroll [hidden] { display:none !important; }

#appvlr-review-panel-versions .study-decisions { padding:12px 8px 8px; }

#appvlr-review-panel-versions .study-decisions:empty { display:none; }

#appvlr-review-panel-versions .review-decision-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }

#appvlr-review-panel-versions .review-decision-actions button { min-width:0; width:100%; min-height:44px; }

#appvlr-review-panel-versions .findings-tab { min-height:44px; min-width:0; }

#appvlr-review-panel-versions .study-tools:empty { display:none; }

#appvlr-review-panel-versions #reviewPanel > .study-tools { padding:8px; }

#appvlr-review-panel-versions .study-body.is-collapsed #reviewPanel { display:none; }

#appvlr-review-panel-versions .study-body.is-collapsed { min-height:72px; }

#appvlr-review-panel-versions .study-cards { display:grid; gap:8px; }

#appvlr-review-panel-versions .study-cards .finding { margin:0; padding:8px; gap:8px; }

#appvlr-review-panel-versions .study-cards .finding > p { margin:0; }

@media(max-width:560px) {
  #appvlr-review-panel-versions { padding:12px; }
}

@media(max-width:400px) {
  #appvlr-review-panel-versions .study-tools { grid-template-columns:1fr; }
}

#appvlr-review-panel-versions #reviewPanelScroll > *, #appvlr-review-panel-versions #summaryText { width:100% !important; min-width:0 !important; max-width:100% !important; }

#appvlr-review-panel-versions .review-decision-actions { display:grid !important; width:100% !important; min-width:0 !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }

#appvlr-review-panel-versions .findings-tab { width:0 !important; min-width:0 !important; max-width:100% !important; }

#appvlr-review-panel-versions .review-decision-actions > button { width:100% !important; min-width:0 !important; max-width:100% !important; }

/* Restore component geometry normally supplied by the full review workspace. */
#appvlr-review-panel-versions { box-sizing:border-box; min-height:0 !important; height:auto !important; }

#appvlr-review-panel-versions .study-tools > button,
#appvlr-review-panel-versions .review-decision-actions > button { display:inline-flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:6px; height:44px !important; padding:8px !important; white-space:nowrap; }

#appvlr-review-panel-versions .study-tools > button > svg,
#appvlr-review-panel-versions .review-decision-actions > button > svg { width:16px !important; height:16px !important; flex:0 0 16px; margin:0 !important; }

#appvlr-review-panel-versions .study-tools > button > span,
#appvlr-review-panel-versions .review-decision-actions > button > span { flex:0 1 auto; margin:0 !important; }

#appvlr-review-panel-versions #reviewPanel { grid-area:auto !important; inset:auto !important; transform:none !important; max-height:680px !important; min-width:0 !important; }

#appvlr-review-panel-versions #reviewPanelScroll { overflow:auto !important; min-width:0; overflow-wrap:anywhere; }

#appvlr-review-panel-versions .findings-tabbar { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); width:100%; padding:8px; gap:8px; }

#appvlr-review-panel-versions .findings-tab { flex:none; width:100% !important; white-space:nowrap; padding:0 8px; }

#appvlr-review-panel-versions #studyTopTools,
#appvlr-review-panel-versions #reviewPanel > .findings-tabbar { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; padding:8px; }

#appvlr-review-panel-versions #studyTopTools > button,
#appvlr-review-panel-versions #reviewPanel > .findings-tabbar > .findings-tab:not([hidden]) { height:44px !important; min-height:44px !important; max-height:44px !important; }

#appvlr-review-panel-versions .study-decisions { flex-shrink:0; border:0; box-shadow:none; }

#appvlr-review-panel-versions #reviewPanel > .study-decisions { border:0 !important; box-shadow:none !important; }

/* Extend the existing footer fade across the final decision buttons. */
#appvlr-review-panel-versions #reviewPanel > .study-decisions::before {
  top: -28px;
  bottom: 0;
  height: auto;
  z-index: 1;
}

@media (min-width: 961px) {
  #appvlr-review-panel-versions #reviewPanel > #studyTopTools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 12px 8px;
  }
  #appvlr-review-panel-versions #reviewPanel > .findings-tabbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 12px 12px;
  }
  #appvlr-review-panel-versions #reviewPanel > #studyTopTools > button,
  #appvlr-review-panel-versions #reviewPanel > .findings-tabbar > .findings-tab:not([hidden]) {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
  #appvlr-review-panel-versions #reviewPanel > .study-decisions .review-decision-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  #appvlr-review-panel-versions #reviewPanel > .study-decisions .review-decision-actions > button {
    width: 100%;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}

/* Shared review gutters and card rhythm. Keep severity surfaces and labels from the source. */
#appvlr-review-panel-versions #reviewPanel > #studyTopTools,
#appvlr-review-panel-versions #reviewPanel > .findings-tabbar,
#appvlr-review-panel-versions #reviewPanel > .study-decisions {
  box-sizing: border-box;
}

#appvlr-review-panel-versions #studyTopTools {
  padding: 12px 12px 8px !important;
}

#appvlr-review-panel-versions #reviewPanel > .findings-tabbar {
  padding: 0 12px 12px !important;
}

#appvlr-review-panel-versions #reviewPanel > .findings-tabbar {
  border: 0;
}

#appvlr-review-panel-versions #reviewPanelScroll {
  padding: 0 12px 8px !important;
}

#appvlr-review-panel-versions #reviewPanel > .study-decisions {
  padding: 12px !important;
}

#appvlr-review-panel-versions #reviewPanel > #studyTopTools > button,
#appvlr-review-panel-versions #reviewPanel > .findings-tabbar > .findings-tab:not([hidden]),
#appvlr-review-panel-versions #reviewPanel > .study-decisions .review-decision-actions > button {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}

#appvlr-review-panel-versions .summary-status {
  margin: 0;
  padding: 0;
}

#appvlr-review-panel-versions #aiSummaryPanel .study-cards {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

#appvlr-review-panel-versions #aiSummaryPanel .study-cards .finding {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 8px;
  min-height: 0;
  margin: 0;
  padding: 12px;
}

#appvlr-review-panel-versions #aiSummaryPanel .study-cards .finding-badge {
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin-top: 2px;
}

#appvlr-review-panel-versions #aiSummaryPanel .study-cards .finding-card-content {
  display: grid !important;
  grid-column: 2;
  grid-row: 1;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

#appvlr-review-panel-versions #aiSummaryPanel .study-cards .finding-heading {
  display: grid !important;
  grid-column: auto !important;
  grid-row: auto !important;
  gap: 4px;
}

#appvlr-review-panel-versions #aiSummaryPanel .study-cards .finding-heading strong {
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0;
}

#appvlr-review-panel-versions #aiSummaryPanel .study-cards .finding-heading span {
  display: none;
}

#appvlr-review-panel-versions #aiSummaryPanel .study-cards .finding p {
  grid-column: auto !important;
  grid-row: auto !important;
  margin: 0;
  color: var(--text-muted);
  font-size: .84rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}

#appvlr-review-panel-versions #reviewPanel .finding:not(.manual-dimension-card) .finding-heading strong {
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: 0;
}

#appvlr-review-panel-versions #reviewPanel .finding:not(.manual-dimension-card) p {
  font-size: .84rem;
  line-height: 1.45;
  letter-spacing: 0;
}

#appvlr-review-panel-versions #drawingDetailsPanel {
  gap: 8px;
}

#appvlr-review-panel-versions #drawingDetailsPanel #overallDimsPanel {
  display: grid;
  gap: 8px;
}

#appvlr-review-panel-versions #drawingDetailsPanel .manual-dimension-card {
  --panel-text-scale: .84rem;
  padding: 12px;
}

#appvlr-review-panel-versions #drawingDetailsPanel .manual-dimension-card > div > p {
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
  letter-spacing: 0;
}

#appvlr-review-panel-versions #drawingDetailsPanel .manual-dimension-grid {
  gap: 8px;
  margin-top: 8px;
}

#appvlr-review-panel-versions #drawingDetailsPanel .manual-dimension-row,
#appvlr-review-panel-versions #drawingDetailsPanel .oa-material-card,
#appvlr-review-panel-versions #drawingDetailsPanel .drawing-note-section {
  padding: 12px;
}

#appvlr-review-panel-versions #drawingDetailsPanel .oa-material-list {
  display: grid;
  gap: 8px;
}

#appvlr-review-panel-versions #drawingDetailsPanel .oa-material-head {
  margin: 0;
}

@media (max-width: 960px) {
  #appvlr-review-panel-versions #reviewPanel > #studyTopTools {
    height: auto;
    min-height: 44px;
  }
  #appvlr-review-panel-versions #reviewPanel > .study-decisions {
    min-height: 44px;
  }
}

@media (min-width: 641px) {
  #appvlr-review-panel-versions #reviewPanel > #studyTopTools > button,
  #appvlr-review-panel-versions #reviewPanel > .findings-tabbar > .findings-tab:not([hidden]) {
    height: 2.15rem !important;
    min-height: 2.15rem !important;
    max-height: 2.15rem !important;
  }
}

/* Keep secondary review tabs below the primary action row. */
#appvlr-review-panel-versions #reviewPanel > .findings-tabbar {
  padding: 8px 12px 12px !important;
  row-gap: 8px;
}

#appvlr-review-panel-versions #reviewPanel > .findings-tabbar > .findings-tab:not([hidden]),
#appvlr-review-panel-versions #reviewPanel > .findings-tabbar > .findings-tab:not([hidden]) {
  font-size: .72rem !important;
  line-height: 1.15;
}

@media (min-width: 641px) {
  #appvlr-review-panel-versions #reviewPanel > .findings-tabbar {
    padding-inline: 16px !important;
  }
  #appvlr-review-panel-versions #reviewPanel > .findings-tabbar > .findings-tab:not([hidden]) {
    height: 1.9rem !important;
    min-height: 1.9rem !important;
    max-height: 1.9rem !important;
    font-size: .74rem !important;
    line-height: 1.15;
  }
}

/* Stack the primary review actions while keeping their existing surfaces. */
#appvlr-review-panel-versions #reviewPanel > #studyTopTools {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px;
  padding: 12px 12px 8px !important;
}

#appvlr-review-panel-versions #reviewPanel > #studyTopTools > button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 16px !important;
  justify-content: flex-start !important;
  gap: 10px;
  font-size: .9rem !important;
  white-space: nowrap;
}

#appvlr-review-panel-versions #reviewPanel > #studyTopTools > button > svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
  margin: 0 !important;
}

#appvlr-review-panel-versions #reviewPanel > #studyTopTools > button > span {
  flex: 0 1 auto;
  margin: 0 !important;
}

#appvlr-review-panel-versions #reviewPanel > #studyTopTools > #appQueueButton .app-queue-count {
  margin-inline-start: auto;
}

/* Flat review controls; keep the count outside the centered action label. */
#appvlr-review-panel-versions #reviewPanel :is(#appQueueButton, #reviewAgainButton, #aiSummaryTab, #drawingDetailsTab, #approveDrawingButton, #rejectDrawingButton) {
  background-image: none !important;
  box-shadow: none !important;
}

#appvlr-review-panel-versions #reviewPanel :is(#appQueueButton, #reviewAgainButton, #aiSummaryTab, #drawingDetailsTab, #approveDrawingButton, #rejectDrawingButton):focus-visible {
  outline: 2px solid var(--text) !important;
  outline-offset: 2px;
}

#appvlr-review-panel-versions #reviewPanel #appQueueButton {
  background-color: var(--complete-button-press) !important;
  color: var(--on-colour-button) !important;
}

#appvlr-review-panel-versions #reviewPanel :is(#reviewAgainButton, #approveDrawingButton) {
  background-color: var(--accent-button-press) !important;
  color: var(--on-colour-button) !important;
}

#appvlr-review-panel-versions #reviewPanel #rejectDrawingButton {
  background-color: var(--action-danger) !important;
  color: var(--on-colour-button) !important;
}

#appvlr-review-panel-versions #reviewPanel #rejectDrawingButton:disabled {
  color: rgb(var(--on-colour-button-rgb) / .58) !important;
  background-color: var(--action-danger-press) !important;
  border-color: rgb(var(--action-danger-rgb) / .35) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel #rejectDrawingButton:disabled {
  color: rgb(var(--on-colour-button-rgb) / .58) !important;
  background-color: var(--action-danger-press) !important;
  border-color: rgb(var(--action-danger-rgb) / .35) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

#appvlr-review-panel-versions #reviewPanel #aiSummaryTab {
  background-color: rgb(var(--accent-rgb) / .35) !important;
}

#appvlr-review-panel-versions #reviewPanel #aiSummaryTab[aria-selected="true"] {
  background-color: var(--accent-button) !important;
  color: var(--on-colour-button) !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsTab {
  background-color: rgb(var(--complete-rgb) / .35) !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsTab[aria-selected="true"] {
  background-color: var(--complete-button-press) !important;
  color: var(--on-colour-button) !important;
}

#appvlr-review-panel-versions #reviewPanel > #studyTopTools > :is(#appQueueButton, #reviewAgainButton) {
  position: relative;
  display: flex;
  justify-content: center !important;
  align-items: center;
  font: 700 .9rem/1.1 var(--font-ui) !important;
  letter-spacing: .06em !important;
}

#appvlr-review-panel-versions #reviewPanel > #studyTopTools > :is(#appQueueButton, #reviewAgainButton) > span {
  font: inherit !important;
  letter-spacing: inherit !important;
  flex: 0 0 auto;
}

#appvlr-review-panel-versions #reviewPanel > #studyTopTools > #appQueueButton .app-queue-count {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  background: rgb(var(--well-rgb) / .18) !important;
  box-shadow: none !important;
}

#appvlr-review-panel-versions #reviewPanel > .findings-tabbar { position: relative; }

#appvlr-review-panel-versions #reviewPanel > .findings-tabbar::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 20px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--surface-rgb) / .45), transparent);
}

#appvlr-review-panel-versions #reviewPanel > #studyTopTools > #appQueueButton .app-queue-count {
  display: inline-grid;
  place-items: center;
  min-width: 2.4rem;
  width: auto;
  height: 1.35rem;
  min-height: 1.35rem;
  padding: 0 .4rem;
  color: var(--text-strong);
  font: 700 .82rem/1 var(--font-ui) !important;
  letter-spacing: .04em;
  text-align: center;
  background-color: rgb(var(--well-rgb) / .24) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#appvlr-review-panel-versions #reviewPanel > .study-decisions::before {
  top: -28px;
  bottom: auto;
  height: 28px;
}

#appvlr-review-panel-versions #reviewPanel #aiSummaryTab.is-active:not(:disabled) {
  background-color: var(--accent-button-press) !important;
  background-image: none !important;
  color: var(--on-colour-button) !important;
  border-color: rgb(var(--accent-border-rgb) / .55) !important;
  box-shadow: none !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsTab.is-active:not(:disabled) {
  background-color: var(--complete-button-press) !important;
  background-image: none !important;
  color: var(--on-colour-button) !important;
  border-color: color-mix(in srgb, var(--complete-hover) 76%, transparent) !important;
  box-shadow: none !important;
}

#appvlr-review-panel-versions #reviewPanel #aiSummaryTab:not(.is-active):not(:disabled) {
  background-color: rgb(var(--r69-blue-rgb) / .35) !important;
  background-image: none !important;
  border-color: rgb(var(--r69-blue-rgb) / .24) !important;
  box-shadow: none !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsTab:not(.is-active):not(:disabled) {
  background-color: rgb(var(--r69-purple-rgb) / .35) !important;
  background-image: none !important;
  border-color: rgb(var(--r69-purple-rgb) / .24) !important;
  box-shadow: none !important;
}

/* r70 detail controls: keep semantic card fills while lifting every detail control above them. */
#appvlr-review-panel-versions #reviewPanel::after {
  content: none !important;
  display: none !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel
  :is(.manual-dimension-row, .oa-material-card)
  :is(input, textarea, select) {
  color: var(--text) !important;
  background-color: var(--surface-raised) !important;
  background-image: none !important;
  opacity: 1 !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel
  :is(.manual-dimension-row, .oa-material-card)
  :is(input, textarea, select):is(:disabled, [aria-disabled="true"]) {
  color: rgb(var(--text-rgb) / .58) !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel
  :is(.manual-dimension-row, .oa-material-card) button:not(.oa-material-name) {
  color: var(--text-strong) !important;
  background-color: var(--surface-card) !important;
  background-image: none !important;
  border-color: rgb(var(--text-muted-rgb) / .4) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel
  :is(.manual-dimension-row, .oa-material-card) button:not(.oa-material-name):is(:disabled, [aria-disabled="true"]) {
  color: rgb(var(--text-rgb) / .72) !important;
  opacity: 1 !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel
  :is(.manual-dimension-row, .oa-material-card)
  :is(.manual-dimension-pick[data-manual-dim-pick-side="reference"], .oa-material-source-button[data-material-source-focus-side="reference"]):not(:disabled):not([aria-disabled="true"]) {
  color: var(--on-colour-button) !important;
  background-color: var(--accent-button-press) !important;
  background-image: none !important;
  border-color: rgb(var(--accent-border-rgb) / .55) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel
  :is(.manual-dimension-row, .oa-material-card)
  :is(.manual-dimension-pick[data-manual-dim-pick-side="manufacturer"], .oa-material-source-button[data-material-source-focus-side="manufacturer"]):not(:disabled):not([aria-disabled="true"]) {
  color: var(--on-colour-button) !important;
  background-color: var(--complete-button-press) !important;
  background-image: none !important;
  border-color: color-mix(in srgb, var(--complete-hover) 76%, transparent) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel
  :is(.manual-dimension-row, .oa-material-card)
  :is(.manual-dimension-pick[data-manual-dim-pick-side="reference"], .oa-material-source-button[data-material-source-focus-side="reference"]):is(:disabled, [aria-disabled="true"]) {
  color: rgb(var(--on-colour-button-rgb) / .58) !important;
  background-color: color-mix(in srgb, var(--accent-wash) 28%, var(--surface)) !important;
  background-image: none !important;
  border-color: rgb(var(--accent-border-rgb) / .35) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel
  :is(.manual-dimension-row, .oa-material-card)
  :is(.manual-dimension-pick[data-manual-dim-pick-side="manufacturer"], .oa-material-source-button[data-material-source-focus-side="manufacturer"]):is(:disabled, [aria-disabled="true"]) {
  color: rgb(var(--on-colour-button-rgb) / .58) !important;
  background-color: color-mix(in srgb, var(--complete-wash) 22%, var(--surface)) !important;
  background-image: none !important;
  border-color: rgb(var(--complete-border-rgb) / .35) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel
  :is(.manual-dimension-row, .oa-material-card)
  :is(.manual-dimension-apply, [data-material-action="accept"]):not(:disabled):not([aria-disabled="true"]) {
  color: var(--on-colour-button) !important;
  background-color: var(--action-success) !important;
  background-image: none !important;
  border-color: rgb(var(--success-rgb) / .72) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel
  :is(.manual-dimension-row, .oa-material-card)
  :is(.manual-dimension-apply, [data-material-action="accept"]):is(:disabled, [aria-disabled="true"]) {
  color: rgb(var(--on-colour-button-rgb) / .58) !important;
  background-color: color-mix(in srgb, var(--action-success) 44%, var(--shade)) !important;
  background-image: none !important;
  border-color: rgb(var(--success-rgb) / .35) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel
  :is(.manual-dimension-row, .oa-material-card)
  :is(.manual-dimension-incorrect, [data-material-action="reject"]):not(:disabled):not([aria-disabled="true"]) {
  color: var(--on-colour-button) !important;
  background-color: var(--action-danger) !important;
  background-image: none !important;
  border-color: rgb(var(--action-danger-rgb) / .72) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel
  :is(.manual-dimension-row, .oa-material-card)
  :is(.manual-dimension-incorrect, [data-material-action="reject"]):is(:disabled, [aria-disabled="true"]) {
  color: rgb(var(--on-colour-button-rgb) / .58) !important;
  background-color: var(--action-danger-press) !important;
  background-image: none !important;
  border-color: rgb(var(--action-danger-rgb) / .35) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel
  :is(.manual-dimension-row, .oa-material-card)
  :is(.manual-dimension-ignore, [data-material-action="ignore"], .finding-card-action-ignore):not(:disabled):not([aria-disabled="true"]) {
  color: var(--text-strong) !important;
  background-color: var(--surface-card) !important;
  background-image: none !important;
  border-color: rgb(var(--text-muted-rgb) / .4) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel
  :is(.manual-dimension-row, .oa-material-card)
  :is(.manual-dimension-ignore, [data-material-action="ignore"], .finding-card-action-ignore):is(:disabled, [aria-disabled="true"]) {
  color: rgb(var(--text-rgb) / .72) !important;
  background-color: var(--surface-card) !important;
  background-image: none !important;
  border-color: rgb(var(--text-muted-rgb) / .24) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* r70 material title labels: keep title buttons equal to dimension axis labels. */
#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel
  .oa-material-card .oa-material-card-title > .oa-material-name {
  display: block;
  min-width: 0;
  padding: 0 !important;
  color: var(--manual-axis-color, var(--text)) !important;
  font-size: var(--panel-text-scale) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  overflow-wrap: anywhere;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#appvlr-review-panel-versions #sidebarActionMenu:not([open]) {display:none!important}

#appvlr-review-panel-versions #sidebarActionMenu[open] {display:block!important}

#appvlr-review-panel-versions #sidebarActionMenu>summary {display:none!important}

/* Host safety. The prototype was a fixed-height embed, so its rules zeroed the
   scroll region. In the live app the panel must keep a real content height or
   the summary items and findings collapse to nothing. */
#appvlr-review-panel-versions .study-body {
  height: auto !important;
  min-height: 0 !important;
}

#appvlr-review-panel-versions #reviewPanel {
  height: auto !important;
  min-height: 320px !important;
  max-height: none !important;
}

#appvlr-review-panel-versions #reviewPanelScroll {
  flex: 0 1 auto !important;
  min-height: 180px !important;
  max-height: none !important;
  overflow: auto !important;
}

#appvlr-review-panel-versions .study-cards,
#appvlr-review-panel-versions .summary-point-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* The float overlay hid the panel list and the list tabs by design. The ported
   panel shows the items, so restore the content region the items live in. */
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel > #reviewPanelScroll,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel > .findings-scroll-region,
html[data-layout-v2="float"] #appvlr-review-panel-versions #reviewPanel > #reviewPanelScroll,
html[data-layout-v2="float"] #appvlr-review-panel-versions #reviewPanel > .findings-scroll-region {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* The float panel has one scroll owner. Keep every active tab and its detail
   cards inside that width instead of exporting a second horizontal rail. */
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel > #reviewPanelScroll > .findings-tab-panel,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel > .findings-scroll-region > .findings-tab-panel,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .findings-summary-panel,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .findings-details-panel,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel #overallDimsPanel,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .finding-column,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .finding-list {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* The source OA contract is scoped to #reviewScreen. The live float builder
   moves the same nodes under the viewport stage, so repeat only the responsive
   dimension rules for that real owner. */
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-dim-panel {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-dim-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-areas:
    "axis axis"
    "yours supplied" !important;
  grid-auto-rows: auto !important;
  gap: 6px !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-dim-axis {
  grid-area: axis !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0.34rem 1.75rem 0.34rem 0.55rem !important;
  align-self: center !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-dim-row[data-oa-axis="height"] .oa-dim-axis {
  color: var(--oa-height-text) !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-dim-row[data-oa-axis="width"] .oa-dim-axis {
  color: var(--oa-width-text) !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-dim-row[data-oa-axis="depth"] .oa-dim-axis {
  color: var(--oa-depth-text) !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-dim-pick[data-oa-pick-side="reference"] {
  grid-area: yours !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-dim-pick[data-oa-pick-side="manufacturer"] {
  grid-area: supplied !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-dim-val,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-dim-pick {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: unset !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-dim-pick {
  min-height: 44px !important;
  height: auto !important;
  align-content: center !important;
  padding: 0.34rem 0.55rem !important;
  border: 1px solid rgb(var(--overlay-rgb) / 0.09) !important;
  border-radius: var(--radius-sm) !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-dim-pick:not(:hover):not(:focus-visible):not(.is-picking):not(.is-selected):not([aria-pressed="true"]) {
  background: rgb(var(--overlay-rgb) / 0.045) !important;
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.035) !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-dim-status {
  grid-area: axis !important;
  justify-self: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Material labels are real buttons. The browser's default button white-space
   leaves long labels wider than the fixed float panel even when the card can
   wrap them. Keep every flex item inside the card's measured width. */
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-material-card,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-material-card-head,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-material-card-head > *,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-material-card-body,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-material-side,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-material-side-values,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-material-actions,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-material-comment {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-material-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "title status" !important;
  align-items: center !important;
  column-gap: 6px !important;
  row-gap: 0 !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-material-card-head:has(> .oa-material-counterpart-hint) {
  grid-template-areas:
    "title status"
    "hint hint" !important;
  row-gap: 6px !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-material-name,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-material-focus {
  grid-area: title !important;
  width: auto !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-material-card-head > .oa-dim-status {
  grid-area: status !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel .oa-material-card-head > .oa-material-counterpart-hint {
  grid-area: hint !important;
  width: 100% !important;
}

/* The prototype keeps only the Summary and Drawing Details tabs. Every other
   live tab and the issue crop panel stay out of the panel. */
#appvlr-review-panel-versions #reviewPanel #activeFindingsTab,
#appvlr-review-panel-versions #reviewPanel #revisionReviewTab,
#appvlr-review-panel-versions #reviewPanel #issuePreview {
  display: none !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel > .finding-column,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel > .finding-column {
  flex: 0 0 auto;
  display: grid !important;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow: visible;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel > #revisionReviewPanel:empty,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel > #revisionReviewPanel:empty {
  display: none !important;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel > .finding-column .finding-toolbar,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel > .finding-column .finding-toolbar {
  display: flex !important;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel > .finding-column .finding-list,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel > .finding-column .finding-list {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

/* Material actions stay usable in the narrow live Details column. Allow the
   existing buttons to wrap inside their grid tracks instead of exporting a
   horizontal scroll surface. */
#appvlr-review-panel-versions #reviewPanel #drawingDetailsPanel .oa-material-actions > .finding-card-action,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-material-actions > .finding-card-action {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-inline: 4px;
}

/* The live float keeps the existing finding cards and OA controls. At narrow
   widths, let their real grid items shrink and wrap instead of clipping text
   at the card edge. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel > .finding-column .finding,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel > .finding-column .finding-actions,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel > .finding-column .finding-note-evidence,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel > .finding-column .manual-dimension-actions {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel > .finding-column .finding:not(.manual-dimension-card) .finding-note-evidence {
  grid-column: 1 / -1;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel > .finding-column .finding-card-action,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel > .finding-column .manual-dimension-actions > button,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel > .finding-column .manual-dimension-head .manual-dimension-pick,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel > .finding-column .oa-material-comment .finding-actions > button,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-material-comment .finding-actions > button {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Layout safety. The prototype was a fixed-height embed, so its rules gave the
   wrappers their own boxes. In the live app the wrappers must add no geometry,
   or the panel, its rail, and the header controls overlap. The port keeps the
   prototype look and lets the live review grid place the panel. */
#appvlr-review-panel-versions,
#appvlr-review-panel-versions .study-body,
#appvlr-review-panel-versions .study-rail,
#appvlr-review-panel-versions #apvPanelMount,
#appvlr-review-panel-versions #studyOutsideDecisions {
  display: contents !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#appvlr-review-panel-versions #reviewPanel {
  position: relative !important;
  inset: auto !important;
  grid-area: auto !important;
  align-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

#appvlr-review-panel-versions #reviewPanelScroll {
  flex: 1 1 auto !important;
  min-height: 96px !important;
  max-height: none !important;
  overflow-y: auto !important;
}

/* One inline inset for every row of the panel. The smaller rows must never be
   wider than the primary action row, and no row may overlap the row above. */
#appvlr-review-panel-versions #reviewPanel {
  --panel-row-inset: 24px;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

#appvlr-review-panel-versions #reviewPanel > #studyTopTools,
#appvlr-review-panel-versions #reviewPanel > .findings-tabbar,
#appvlr-review-panel-versions #reviewPanel > .study-decisions,
#appvlr-review-panel-versions #reviewPanel > #reviewPanelScroll {
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--panel-row-inset) !important;
  padding-right: var(--panel-row-inset) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

#appvlr-review-panel-versions #reviewPanel > #studyTopTools {
  padding-top: 12px !important;
  padding-bottom: 8px !important;
}

#appvlr-review-panel-versions #reviewPanel > .findings-tabbar {
  padding-top: 0 !important;
  padding-bottom: 12px !important;
}

#appvlr-review-panel-versions #reviewPanel > .study-decisions {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

#appvlr-review-panel-versions #reviewPanel > #reviewPanelScroll {
  padding-top: 0 !important;
  padding-bottom: 8px !important;
}

/* The secondary rows keep the primary row's edges at every width. */
#appvlr-review-panel-versions #reviewPanel > .findings-tabbar > .findings-tab:not([hidden]),
#appvlr-review-panel-versions #reviewPanel > .study-decisions .review-decision-actions {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Row geometry contract. The primary row spans the full inner width, and the
   two half rows split that same width. The smaller buttons are therefore never
   wider than the primary buttons. */
#appvlr-review-panel-versions #reviewPanel > #studyTopTools {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  row-gap: 10px !important;
}

#appvlr-review-panel-versions #reviewPanel > #studyTopTools > button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

#appvlr-review-panel-versions #reviewPanel > .findings-tabbar {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  justify-items: stretch !important;
  column-gap: 8px !important;
}

#appvlr-review-panel-versions #reviewPanel > .findings-tabbar > .findings-tab:not([hidden]) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

#appvlr-review-panel-versions #reviewPanel > .study-decisions .review-decision-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  justify-items: stretch !important;
  column-gap: 8px !important;
}

#appvlr-review-panel-versions #reviewPanel > .study-decisions .review-decision-actions > button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Align every row to the same left and right edge. The panel supplies the
   inset, so the rows must not add their own horizontal padding. */
#appvlr-review-panel-versions #reviewPanel > #studyTopTools,
#appvlr-review-panel-versions #reviewPanel > .findings-tabbar,
#appvlr-review-panel-versions #reviewPanel > .study-decisions,
#appvlr-review-panel-versions #reviewPanel > #reviewPanelScroll {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Vertical rhythm. Every row keeps clear space above and below, so no row can
   sit on another row and the cards never touch the tab or decision rows. */
#appvlr-review-panel-versions #reviewPanel > #studyTopTools {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  row-gap: 10px !important;
}

#appvlr-review-panel-versions #reviewPanel > .findings-tabbar {
  padding-top: 0 !important;
  padding-bottom: 14px !important;
}

#appvlr-review-panel-versions #reviewPanel > #reviewPanelScroll {
  padding-top: 0 !important;
  padding-bottom: 14px !important;
}

#appvlr-review-panel-versions #reviewPanel > .study-decisions {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

#appvlr-review-panel-versions #aiSummaryPanel .study-cards {
  gap: 12px !important;
}

#appvlr-review-panel-versions #aiSummaryPanel .study-cards .finding {
  padding: 14px !important;
  row-gap: 6px !important;
}

#appvlr-review-panel-versions #aiSummaryPanel .study-cards .finding-heading {
  gap: 4px !important;
}

#appvlr-review-panel-versions #aiSummaryPanel .study-cards .finding p {
  margin-top: 2px !important;
}

/* ==== Live review fixes, 2026-09-17 ==== */

/* Header actions: right aligned, labels centred, Sheet Manager grey. */
#reviewScaleStage .review-header .review-actions {
  margin-left: auto !important;
  justify-content: flex-end !important;
}
#reviewScaleStage .review-actions #drawingControlsSummary,
#reviewScaleStage .review-actions #pairingManagerButton:not([hidden]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
#reviewScaleStage .review-actions #drawingControlsSummary > span,
#reviewScaleStage .review-actions #pairingManagerButton > span {
  flex: 1 1 auto !important;
  text-align: center !important;
}
#reviewScaleStage .review-actions #pairingManagerButton,
#reviewScaleStage .review-actions #pairingManagerButton span {
  color: var(--text-muted) !important;
}

/* Tabs and the decision buttons share one height and one width. */
#appvlr-review-panel-versions #reviewPanel > .findings-tabbar > .findings-tab:not([hidden]),
#appvlr-review-panel-versions #reviewPanel > .study-decisions .review-decision-actions > button {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  width: 100% !important;
}

/* Panel: slightly transparent, and lower on the screen. */
html[data-layout-v2="float"] {
  --floating-panel-top: 320px !important;
}
#appvlr-review-panel-versions #reviewPanel {
  background-color: rgb(var(--surface-rgb) / .92) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Retract-toggle geometry is owned by the breakpoint contracts below. */

/* ==== Live review fixes, pass 2: match the float overlay specificity ==== */

/* Sheet Manager + Drawing Controls: centred labels, right aligned pair. */
html[data-layout-v2="float"] #layoutV2FloatHost #reviewScaleStage .review-header .review-actions {
  margin-left: auto !important;
  justify-content: flex-end !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #reviewScaleStage .review-actions #drawingControlsSummary,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewScaleStage .review-actions #pairingManagerButton:not([hidden]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #reviewScaleStage .review-actions #drawingControlsSummary > span,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewScaleStage .review-actions #pairingManagerButton > span {
  flex: 1 1 auto !important;
  text-align: center !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost #reviewScaleStage .review-actions #pairingManagerButton,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewScaleStage .review-actions #pairingManagerButton span,
html[data-layout-v2="float"] #layoutV2FloatHost #reviewScaleStage .review-actions #pairingManagerLabel {
  color: var(--text-muted) !important;
}

/* Panel: slightly transparent, lower on the screen. */
html[data-layout-v2="float"] #layoutV2FloatHost #appvlr-review-panel-versions #reviewPanel {
  background-color: rgb(var(--surface-rgb) / .92) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost {
  --floating-panel-top: 320px !important;
}

/* The float owner keeps the real toggle. Breakpoint contracts below own its
   position, hit area, and motion. */

/* Exact toggle hooks are kept in the breakpoint contracts below. */

/* Sheet Manager label grey; both top buttons centred. */
#reviewScaleStage #pairingManagerButton,
#reviewScaleStage #pairingManagerButton *,
#reviewScaleStage .pairing-manager-label,
#reviewScaleStage #pairingManagerLabel {
  color: var(--text-muted) !important;
  justify-content: center !important;
  text-align: center !important;
}
#reviewScaleStage #drawingControlsSummary,
#reviewScaleStage #drawingControlsSummary * {
  justify-content: center !important;
  text-align: center !important;
}
#reviewScaleStage .review-header .review-actions {
  margin-left: auto !important;
  justify-content: flex-end !important;
}

/* ==== Live review fixes, pass 4: container-independent hooks ==== */
html[data-layout-v2="float"] #pairingManagerButton,
html[data-layout-v2="float"] #pairingManagerButton *,
html[data-layout-v2="float"] #pairingManagerLabel,
html[data-layout-v2="float"] .pairing-manager-label {
  color: var(--text-muted) !important;
  justify-content: center !important;
  text-align: center !important;
}
html[data-layout-v2="float"] #drawingControlsSummary,
html[data-layout-v2="float"] #drawingControlsSummary *,
html[data-layout-v2="float"] .drawing-controls-chevron {
  justify-content: center !important;
  text-align: center !important;
}
html[data-layout-v2="float"] .review-actions,
html[data-layout-v2="float"] .review-topbar-actions {
  margin-left: auto !important;
  justify-content: flex-end !important;
}

/* ==== Live review fixes, pass 5: no data-attribute gate ==== */
#pairingManagerButton, #pairingManagerButton *, #pairingManagerLabel, .pairing-manager-label {
  color: var(--text-muted) !important;
  justify-content: center !important;
  text-align: center !important;
}
#drawingControlsSummary, #drawingControlsSummary * {
  justify-content: center !important;
  text-align: center !important;
}
.review-actions, .review-topbar-actions, #reviewTopbarActions {
  margin-left: auto !important;
  justify-content: flex-end !important;
}
#reviewPanel { background-color: rgb(var(--surface-rgb) / .92) !important; backdrop-filter: blur(6px) !important; }
#reviewPanel > .findings-tabbar > .findings-tab:not([hidden]),
#reviewPanel > .study-decisions .review-decision-actions > button {
  height: 44px !important; min-height: 44px !important; max-height: 44px !important; width: 100% !important;
}

/* ==== Live review fixes, pass 6: outrank the float overlay ==== */
#pairingManagerButton#pairingManagerButton#pairingManagerButton,
#pairingManagerButton#pairingManagerButton#pairingManagerButton *,
#pairingManagerLabel#pairingManagerLabel#pairingManagerLabel,
.pairing-manager-label.pairing-manager-label.pairing-manager-label {
  color: var(--text-muted) !important;
  justify-content: center !important;
  text-align: center !important;
  flex: 1 1 auto !important;
}
#drawingControlsSummary#drawingControlsSummary#drawingControlsSummary,
#drawingControlsSummary#drawingControlsSummary#drawingControlsSummary * {
  justify-content: center !important;
  text-align: center !important;
  flex: 1 1 auto !important;
}
#reviewScaleStage#reviewScaleStage .review-actions,
#reviewScaleStage#reviewScaleStage .review-header .review-actions {
  margin-left: auto !important;
  justify-content: flex-end !important;
}

/* ==== Live review fixes, pass 7 (four items) ==== */

/* 1. Drawing Controls and Sheet Manager: right justified, Sheet Manager on top. */
#reviewScaleStage#reviewScaleStage .review-header .review-actions {
  margin-left: auto !important;
  justify-content: flex-end !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
}
#reviewScaleStage#reviewScaleStage .review-actions #pairingManagerButton { order: 1 !important; }
#reviewScaleStage#reviewScaleStage .review-actions #drawingControlsSummary { order: 2 !important; }

/* 2. Review panel geometry is owned by the viewport contracts at the end of
   this file. Keep one source for each breakpoint. */

/* 3. Approve and Reject match the Summary tab exactly. */
#aiSummaryTab#aiSummaryTab#aiSummaryTab,
#drawingDetailsTab#drawingDetailsTab#drawingDetailsTab,
#approveDrawingButton#approveDrawingButton#approveDrawingButton,
#rejectDrawingButton#rejectDrawingButton#rejectDrawingButton {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  width: 100% !important;
}
#reviewFinalActions#reviewFinalActions#reviewFinalActions .review-decision-actions,
#reviewPanel#reviewPanel#reviewPanel > .study-decisions .review-decision-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 8px !important;
  width: 100% !important;
}

/* 4. Retract-toggle geometry is owned by the viewport contracts at the end
   of this file. */

/* ==== Live review fixes, pass 8-9 ==== */
/* The old repeated-ID panel and toggle geometry was removed. It overrode the
   responsive owner and made the panel and rail use different insets. */

/* The collapsed rail state is owned by the breakpoint contracts below. */

/* ==== Live review fixes, pass 11 ==== */
/* Float geometry lives in the desktop-only owner contract at the file end. */

/* Approve and Reject span exactly the tab row's width. */
#reviewPanel#reviewPanel#reviewPanel#reviewPanel > .study-decisions,
#reviewPanel#reviewPanel#reviewPanel#reviewPanel > .findings-tabbar {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#reviewPanel#reviewPanel#reviewPanel#reviewPanel > .study-decisions .review-decision-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
}
#reviewPanel#reviewPanel#reviewPanel#reviewPanel > .study-decisions .review-decision-actions > button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}

/* ==== Live review fixes, pass 12: align the top buttons to the supplied pane ==== */
#reviewScaleStage#reviewScaleStage .review-header {
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
}
#reviewScaleStage#reviewScaleStage .review-header .review-actions,
#reviewScaleStage#reviewScaleStage .review-header .review-topbar-actions {
  margin-left: auto !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
}
#reviewScaleStage#reviewScaleStage .review-header .review-actions > * {
  margin-right: 0 !important;
}

/* ==== Live review fixes, pass 13: wider top buttons, grey Sheet Manager ==== */
#drawingControlsSummary#drawingControlsSummary#drawingControlsSummary,
#pairingManagerButton#pairingManagerButton#pairingManagerButton {
  min-width: 220px !important;
  width: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}
#drawingControlsSummary#drawingControlsSummary#drawingControlsSummary > *,
#pairingManagerButton#pairingManagerButton#pairingManagerButton > * {
  margin-left: 6px !important;
  margin-right: 6px !important;
}
#pairingManagerButton#pairingManagerButton#pairingManagerButton,
#pairingManagerButton#pairingManagerButton#pairingManagerButton *,
#pairingManagerLabel#pairingManagerLabel#pairingManagerLabel,
.pairing-manager-label.pairing-manager-label.pairing-manager-label {
  color: var(--text-muted) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  fill: var(--text-muted) !important;
  stroke: var(--text-muted) !important;
}
#pairingManagerButton#pairingManagerButton#pairingManagerButton {
  background-color: var(--surface-card) !important;
  background-image: none !important;
  border-color: rgb(var(--text-muted-rgb) / .45) !important;
}

/* ==== Review panel v3 layout correction: float-owner-overlay ==== */
@media (min-width: 761px) {
  /* The float host owns the panel geometry. Do not reserve page space for it. */
  html[data-layout-v2="float"] #reviewScaleStage {
    box-sizing: border-box !important;
    padding-right: 0 !important;
  }

  html[data-layout-v2="float"] #reviewScaleStage .review-header,
  html[data-layout-v2="float"] #reviewScaleStage .review-heading,
  html[data-layout-v2="float"] #reviewScaleStage .review-heading > *,
  html[data-layout-v2="float"] #reviewScaleStage #screenTitle,
  html[data-layout-v2="float"] #reviewScaleStage #drawingTitle {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Stack label, title, and metadata so the title keeps real line width. */
  html[data-layout-v2="float"] #reviewScaleStage .review-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html[data-layout-v2="float"] #reviewScaleStage .review-heading > * {
    grid-column: 1 !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[data-layout-v2="float"] #reviewScaleStage :is(#screenTitle, #drawingTitle) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

}

@media (min-width: 761px) and (max-width: 1180px) {
  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage .review-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage .review-header .review-heading {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage .review-header .review-heading > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage .review-header :is(#screenTitle, #drawingTitle) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage .review-header .review-heading :is(.screen-label, #drawingMeta) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage .review-header .review-actions {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    padding: 0 0 8px !important;
  }

  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage .review-header .review-actions > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Keep the visible utility controls at the established 44px target. */
html[data-layout-v2="float"] #reviewScaleStage .review-actions > #drawingControls,
html[data-layout-v2="float"] #reviewScaleStage .review-actions > #pairingManagerButton,
html[data-layout-v2="float"] #reviewScaleStage .review-actions > .study-manager,
html[data-layout-v2="float"] #reviewScaleStage .review-actions > button,
html[data-layout-v2="float"] #reviewScaleStage #drawingControlsSummary {
  min-height: 44px !important;
  height: 44px !important;
}

@media (max-width: 760px) {
  html[data-layout-v2="float"] {
    --review-drawer-width: min(268px, calc(100vw - 16px));
    overflow-x: clip !important;
  }

  html[data-layout-v2="float"] body,
  html[data-layout-v2="float"] .app-shell,
  html[data-layout-v2="float"] #reviewScreen,
  html[data-layout-v2="float"] #reviewScaleStage,
  html[data-layout-v2="float"] #layoutV2FloatHost {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  html[data-layout-v2="float"] #reviewScaleStage {
    box-sizing: border-box !important;
    padding-right: 0 !important;
  }

  html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel,
  html[data-layout-v2="float"] #reviewScreen .review-layout > #reviewPanel {
    position: absolute !important;
    inset: auto !important;
    box-sizing: border-box !important;
    top: 50% !important;
    bottom: auto !important;
    left: auto !important;
    right: 8px !important;
    width: var(--review-drawer-width) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    height: min(640px, var(--review-panel-max-height, calc(100dvh - 32px))) !important;
    min-height: 0 !important;
    max-height: var(--review-panel-max-height, calc(100dvh - 32px)) !important;
    margin: 0 !important;
    transform: translate3d(0, -50%, 0) scale(1) !important;
    transition: opacity 220ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s !important;
  }

  html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel.is-collapsed {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(calc(var(--review-drawer-width) + 8px), -50%, 0) scale(1) !important;
    transition: opacity 220ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 220ms !important;
  }

  html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel.is-flyout-opening,
  html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel.is-flyout-closing {
    visibility: visible !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translate3d(calc(var(--review-drawer-width) + 8px), -50%, 0) scale(1) !important;
  }

  html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel > #reviewPanelScroll,
  html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel > .findings-scroll-region {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html[data-layout-v2="float"] #layoutV2FloatHost .panel-visibility-toggle,
  html[data-layout-v2="float"] #reviewScreen .review-layout > .panel-visibility-toggle {
    position: absolute !important;
    inset: auto !important;
    top: 50% !important;
    right: max(0px, calc(8px + var(--review-drawer-width))) !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    pointer-events: auto !important;
    transition: right 220ms cubic-bezier(.16, 1, .3, 1), transform 220ms cubic-bezier(.16, 1, .3, 1), filter 160ms ease !important;
  }

  /* Use the live review state. The workflow body class can describe another
     shell, so it must not move this rail. */
  html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel:not(.is-collapsed)) > button[data-panel-toggle="review"] {
    right: calc(8px + var(--review-drawer-width)) !important;
  }

  /* PS-018: the Stamp and Export panels are wider than the Review drawer, so
     their open tab must sit left of their own width, not the Review width,
     or it covers the panel's tabs and fields. */
  html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#stampPanel:not(.is-collapsed)) > .panel-visibility-toggle,
  html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#savePanel:not(.is-collapsed)) > .panel-visibility-toggle {
    right: calc(var(--floating-panel-right, 0px) + var(--floating-panel-width)) !important;
  }

  html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel.is-flyout-opening) > button[data-panel-toggle="review"],
  html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel.is-flyout-closing) > button[data-panel-toggle="review"],
  html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel.is-collapsed) > button[data-panel-toggle="review"] {
    inset: auto !important;
    top: 50% !important;
    left: auto !important;
    right: max(0px, calc(8px + var(--review-drawer-width))) !important;
    transform: translate3d(calc(var(--review-drawer-width) + 8px), -50%, 0) !important;
  }
}

/* The inner panel list owns vertical scrolling at every float width. Keep the
   fixed panel itself clipped so focus and keyboard scrolling cannot move its
   chrome. */
html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel {
  overflow: clip !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel > #studyTopTools {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 0 !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel > #studyTopTools > button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
}

/* ==== Review panel v3 layout correction: static viewport overlay ==== */
@media (min-width: 761px) {
  /* The fixed float stage is the containing block. Use the bounded slot below
     the utility row; isolated panelOnly mode keeps the 50% fallback. */
  /* The header box spans empty space behind the float panel. Let pointer input
     pass through that box while keeping its live heading and utility controls. */
  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage > .review-header {
    pointer-events: none !important;
  }

  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage > .review-header > .review-heading,
  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage > .review-header > .review-actions {
    pointer-events: auto !important;
  }

  html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel {
    top: var(--review-panel-stage-center, 50%) !important;
    right: var(--floating-panel-right, 20px) !important;
    bottom: auto !important;
    left: auto !important;
    height: auto !important;
    max-height: var(--review-panel-max-height, calc(100dvh - 48px)) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translate3d(0, -50%, 0) scale(1) !important;
    transition: opacity 220ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s !important;
  }

  html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel.is-collapsed {
    transform: translate3d(calc(var(--floating-panel-width, 268px) + var(--floating-panel-right, 20px)), -50%, 0) scale(1) !important;
    transition: opacity 220ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 220ms !important;
  }

  /* The shared scheduler keeps the live panel painted during its 220ms exit.
     Entry and exit use the same full-width transform as the attached tab. */
  html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel.is-flyout-opening,
  html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel.is-flyout-closing {
    visibility: visible !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translate3d(calc(var(--floating-panel-width, 268px) + var(--floating-panel-right, 20px)), -50%, 0) scale(1) !important;
  }

  /* Drawing Controls and Sheet Manager share one measured desktop column. */
  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage .review-header > .review-actions {
    display: grid !important;
    grid-template-columns: 220px 220px !important;
    grid-template-rows: 44px !important;
    flex-direction: initial !important;
    align-items: stretch !important;
    justify-content: end !important;
    width: 448px !important;
    min-width: 448px !important;
    max-width: 448px !important;
    gap: 8px !important;
  }

  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage #drawingControls#drawingControls#drawingControls,
  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage #pairingManagerButton#pairingManagerButton#pairingManagerButton,
  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage .study-manager,
  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    box-sizing: border-box !important;
  }

  /* Sheet Manager remains secondary, with its existing document icon. */
  html[data-layout-v2="float"] #reviewScaleStage #pairingManagerButton {
    color: var(--text-muted) !important;
    background: var(--surface-card) !important;
    background-image: none !important;
    border-color: rgb(var(--text-muted-rgb) / .45) !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Keep the existing document icon outlined. The older grey descendant rule
     must not paint its rect and paths as a solid square. */
  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage #pairingManagerButton#pairingManagerButton#pairingManagerButton > svg,
  html[data-layout-v2="float"] #reviewScaleStage#reviewScaleStage #pairingManagerButton#pairingManagerButton#pairingManagerButton > svg * {
    fill: none !important;
    stroke: currentColor !important;
  }

  /* Place the retract tab in the same fixed stage as the panel. */
  html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel:not(.is-collapsed)) > button[data-panel-toggle="review"] {
    position: absolute !important;
    inset: auto !important;
    top: var(--review-panel-stage-center, 50%) !important;
    left: auto !important;
    right: var(--review-toggle-right, calc(var(--floating-panel-width, 268px) + var(--floating-panel-right, 20px))) !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    transition: right 220ms cubic-bezier(.16, 1, .3, 1), top 220ms cubic-bezier(.16, 1, .3, 1), opacity 220ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1) !important;
  }

  html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel.is-flyout-closing) > button[data-panel-toggle="review"],
  html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel.is-flyout-opening) > button[data-panel-toggle="review"],
  html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel.is-collapsed) > button[data-panel-toggle="review"] {
    position: absolute !important;
    inset: auto !important;
    top: var(--review-panel-stage-center, 50%) !important;
    left: auto !important;
    right: var(--review-toggle-right, calc(var(--floating-panel-width, 268px) + var(--floating-panel-right, 20px))) !important;
    transform: translate3d(calc(var(--floating-panel-width, 268px) + var(--floating-panel-right, 20px)), -50%, 0) !important;
    transition: right 220ms cubic-bezier(.16, 1, .3, 1), top 220ms cubic-bezier(.16, 1, .3, 1), opacity 220ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1) !important;
  }

  /* Review is a viewport overlay. The page itself must not become a second
     scroll surface when the responsive shell grows for the utility header. */
  html[data-layout-v2="float"][data-has~="review-screen"]:not(#has-pad),
  html[data-layout-v2="float"][data-has~="review-screen"]:not(#has-pad) body {
    overflow: hidden !important;
  }

  /* Restore the bounded review row for the float variant. The responsive
     bundle lets landscape PDFs grow the document on wide screens; that is
     correct for the normal layout but creates a page scroll behind this
     viewport overlay. The drawing panes keep their inner surface geometry. */
  html[data-layout-v2="float"] .workspace[data-has~="review-screen"]:not(#has-pad) {
    height: calc(100dvh - var(--workflow-offset) - var(--bottom-action-space)) !important;
    min-height: 0 !important;
    overflow: visible !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
  }

  html[data-layout-v2="float"] #reviewScreen.is-active {
    min-height: 0 !important;
    overflow: visible !important;
  }

  html[data-layout-v2="float"] #reviewScreen > .review-scale-stage,
  html[data-layout-v2="float"] #reviewScreen .review-layout {
    height: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html[data-layout-v2="float"] #reviewScreen > .review-scale-stage {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  html[data-layout-v2="float"] #reviewScreen > #reviewScaleStage > #reviewMobileDecisionHost {
    display: none !important;
  }

  html[data-layout-v2="float"] #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) {
    height: 100% !important;
    align-self: stretch !important;
    align-items: stretch !important;
    grid-auto-rows: minmax(0, 1fr) !important;
  }

  html[data-layout-v2="float"] #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .drawing-pane,
  html[data-layout-v2="float"] #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .review-sheet-frame,
  html[data-layout-v2="float"] #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .review-sheet-frame.sheet-frame {
    height: 100% !important;
    align-self: stretch !important;
  }

  html[data-layout-v2="float"] #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .drawing-pane {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  html[data-layout-v2="float"] #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .review-sheet-frame,
  html[data-layout-v2="float"] #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .review-sheet-frame.sheet-frame {
    height: 100% !important;
    aspect-ratio: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel,
  html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel.is-collapsed,
  html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel.is-flyout-opening,
  html[data-layout-v2="float"] #layoutV2FloatHost #reviewPanel.is-flyout-closing,
  html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel:not(.is-collapsed)) > button[data-panel-toggle="review"],
  html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel.is-collapsed) > button[data-panel-toggle="review"],
  html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel.is-flyout-opening) > button[data-panel-toggle="review"],
  html[data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel.is-flyout-closing) > button[data-panel-toggle="review"] {
    transition: none !important;
  }
}

html[data-reduce-motion="true"][data-layout-v2="float"] #layoutV2FloatHost #reviewPanel,
html[data-reduce-motion="true"][data-layout-v2="float"] #layoutV2FloatHost #reviewPanel.is-collapsed,
html[data-reduce-motion="true"][data-layout-v2="float"] #layoutV2FloatHost #reviewPanel.is-flyout-opening,
html[data-reduce-motion="true"][data-layout-v2="float"] #layoutV2FloatHost #reviewPanel.is-flyout-closing,
html[data-reduce-motion="true"][data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel:not(.is-collapsed)) > button[data-panel-toggle="review"],
html[data-reduce-motion="true"][data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel.is-collapsed) > button[data-panel-toggle="review"],
html[data-reduce-motion="true"][data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel.is-flyout-opening) > button[data-panel-toggle="review"],
html[data-reduce-motion="true"][data-layout-v2="float"] #layoutV2FloatHost .layout-v2-stage:has(#reviewPanel.is-flyout-closing) > button[data-panel-toggle="review"] {
  transition: none !important;
}

/* ==== Review panel v3 layout correction: isolated live panel ==== */
/* panelOnly=1 keeps the real Review panel and its controls. It removes only
   the surrounding Review chrome after the Review screen is active, so auth,
   pairing, and other modal flows remain usable. */
html[data-review-panel-only="true"][data-has~="review-screen"]:not(#has-pad) {
  --floating-panel-width: 268px !important;
  --floating-panel-right: 16px !important;
  --review-panel-max-height: calc(100dvh - 32px) !important;
}

html[data-review-panel-only="true"][data-has~="review-screen"]:not(#has-pad),
html[data-review-panel-only="true"][data-has~="review-screen"]:not(#has-pad) body {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;
}

html[data-review-panel-only="true"] #appShell[data-has~="review-screen"]:not(#has-pad) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html[data-review-panel-only="true"] #appShell[data-has~="review-screen"]:not(#has-pad) > .sidebar,
html[data-review-panel-only="true"] #appShell[data-has~="review-screen"]:not(#has-pad) > .app-legal-footer,
html[data-review-panel-only="true"] #appShell[data-has~="review-screen"]:not(#has-pad) > .workspace > .review-topbar-viewport,
html[data-review-panel-only="true"] #reviewScreen.is-active > #reviewScaleStage > .review-header,
html[data-review-panel-only="true"] #reviewScreen.is-active > #reviewScaleStage > .review-mobile-decision-host,
html[data-review-panel-only="true"] #reviewScreen.is-active .review-layout > .drawing-board {
  display: none !important;
}

html[data-review-panel-only="true"] #appShell[data-has~="review-screen"]:not(#has-pad) > .workspace,
html[data-review-panel-only="true"] #reviewScreen.is-active,
html[data-review-panel-only="true"] #reviewScreen.is-active > #reviewScaleStage {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-review-panel-only="true"] #layoutV2FloatHost {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

/* ==== Review panel v3 visual contract: one live content surface ==== */
/* The live float panel already provides the dark surface. Tab panels and the
   overall-dimensions wrapper are structural, so they must not paint a second
   frame around the same controls. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll {
  --review-panel-scrollbar-inset: 10px;
  gap: 8px !important;
  padding: 8px 0 !important;
  width: calc(100% + var(--review-panel-scrollbar-inset)) !important;
  max-width: none !important;
  margin-right: calc(-1 * var(--review-panel-scrollbar-inset)) !important;
  scrollbar-gutter: stable !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel * {
  text-transform: uppercase !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll > .findings-tab-panel,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll > .findings-tab-panel.is-active:not([hidden]) {
  gap: 8px !important;
  padding: 0 0 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel > #overallDimsPanel,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel > #revisionReviewPanel {
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #aiSummaryPanel,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .finding-column,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .finding-list,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .oa-material-list,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .finding-actions,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-dimension-grid,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .oa-material-card,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .oa-material-card-body,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .oa-material-comment,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .revision-review-panel {
  gap: 8px !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll :is(
  #summaryText,
  .finding p,
  .finding-empty,
  .oa-dim-row,
  .oa-dim-val,
  .oa-dim-pick,
  .oa-material-focus,
  .oa-material-value,
  .manual-dimension-card > div > p,
  .manual-dimension-comment textarea,
  .drawing-note-help,
  .drawing-note-requirement,
  .drawing-note-evidence,
  .finding-note-evidence li,
  .drawing-note-parts dd,
  .revision-review-panel,
  .revision-finding
) {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll :is(
  .finding-heading strong,
  .oa-dim-head,
  .oa-material-name,
  .manual-dimension-axis strong,
  .drawing-note-head,
  .revision-review-panel h2,
  .revision-review-panel h3,
  .revision-review-panel h4
) {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll :is(
  .finding-heading span,
  .finding-source-pages,
  .finding-note-evidence strong,
  .finding-note-evidence li span,
  .oa-dim-head span,
  .oa-dim-side,
  .oa-dim-status,
  .oa-material-counterpart-hint,
  .oa-material-side-label,
  .manual-dimension-status,
  .manual-dimension-detected,
  .manual-dimension-row label span,
  .drawing-note-head > span,
  .drawing-note-requirement strong,
  .drawing-note-evidence strong,
  .drawing-note-parts dt,
  .finding-toolbar .panel-label,
  #findingCount,
  .manual-dimension-comment > span,
  .revision-review-panel small
) {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

/* Keep the existing touch targets while allowing long editor labels to wrap. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll :is(
  .finding-card-action,
  .oa-material-name.oa-material-focus,
  .manual-dimension-actions > button,
  .manual-dimension-head .manual-dimension-pick,
  .oa-material-comment .finding-actions > button,
  .revision-finding-actions button
) {
  min-height: 44px !important;
  height: auto !important;
  max-height: none !important;
}

/* Generated summary markup has its own legacy size and weight rules. Keep the
   live Summary children on the same readable scale without changing their
   generated source strings. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #summaryText,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #summaryText :is(
  .summary-point-list,
  .summary-point-list ul,
  .summary-point-list li,
  .summary-lead,
  .summary-line,
  .summary-line strong,
  .summary-line span
) {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #summaryText {
  font-weight: 400 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #summaryText :is(
  .summary-lead,
  .summary-line strong
) {
  font-weight: 600 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #summaryText :is(
  .summary-point-list li,
  .summary-line,
  .summary-line span
) {
  font-weight: 400 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #summaryText :is(
  .summary-point-list,
  .summary-point-list ul
) {
  gap: 8px !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #summaryText .summary-point-list li::before {
  left: 3px !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .findings-tab-count {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* Keep the two live tabs equal and keep Drawing Details readable in one line.
   Its purple state remains distinct from the existing Summary blue. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel > .findings-tabbar > #drawingDetailsTab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 0 4px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Summary and Drawing Details are equal compact tabs. Other primary and
   action controls keep their existing 44px touch targets below. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel > .findings-tabbar > :is(#aiSummaryTab, #drawingDetailsTab) {
  width: 100% !important;
  min-height: 36px !important;
  height: 36px !important;
  max-height: 36px !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel > .findings-tabbar > #drawingDetailsTab:not(.is-active):not(:disabled):not([aria-disabled="true"]) {
  color: var(--on-colour-button) !important;
  background: color-mix(in srgb, var(--complete-button) 48%, var(--shade)) !important;
  border-color: rgb(var(--complete-border-rgb) / .24) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel > .findings-tabbar > #drawingDetailsTab.is-active:not(:disabled):not([aria-disabled="true"]) {
  color: var(--on-colour-button) !important;
  background: var(--complete-button-press) !important;
  border-color: color-mix(in srgb, var(--complete-hover) 76%, transparent) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel > .findings-tabbar > #drawingDetailsTab:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  outline: 2px solid var(--complete-strong) !important;
  outline-offset: 2px !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList .finding-actions > button {
  min-height: 44px !important;
  height: auto !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel > .findings-tabbar,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll .finding-actions,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll .manual-dimension-actions,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll .oa-material-actions {
  gap: 6px !important;
}

/* ==== Review panel v3 compact cards and native inactive disclosure ==== */
/* Keep the live Review stage on one width token. At phone widths the panel
   leaves room for its 44px rail and 8px outer margins; desktop uses 360px. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen {
  --review-panel-preferred-width: 360px;
  --review-panel-width: min(var(--review-panel-preferred-width), calc(100vw - 60px));
  --review-drawer-width: var(--review-panel-width) !important;
  --floating-panel-width: var(--review-panel-width) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel {
  width: var(--review-panel-width) !important;
  min-width: 0 !important;
  max-width: var(--review-panel-width) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList .other-review-item-list,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList .finding,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll > .findings-tab-panel,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #aiSummaryPanel,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .finding-column,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .oa-material-list,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .oa-material-card,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .oa-material-card-body,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .oa-material-comment,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-dimension-grid,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .summary-point-list,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .summary-point-list ul,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .drawing-note-section,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .drawing-note-list,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .drawing-note-card,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .requirement-results,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .requirement-results-list {
  gap: 6px !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList .finding,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .oa-material-card {
  padding: 6px 8px !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList .other-review-item-list,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList .finding {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

/* Integrated OA editor rows do not paint a second card, border, or shadow
   around the same live controls. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-dimension-card .manual-dimension-row {
  gap: 6px !important;
  padding: 6px 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList > .other-review-items {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList > .other-review-items > summary {
  min-height: 44px !important;
  padding: 6px 8px !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList > .other-review-items > summary:focus-visible {
  outline: 2px solid var(--accent-strong) !important;
  outline-offset: 2px !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList > .other-review-items > .other-review-item-list {
  display: grid !important;
  padding: 4px 0 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList > .other-review-items[open] .finding {
  opacity: 1 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll :is(
  .finding-actions > button,
  .manual-dimension-actions > button,
  .oa-material-actions > button
) {
  min-width: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  max-height: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll :is(
  .manual-dimension-row input,
  .oa-material-value input
) {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 44px !important;
  max-height: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll .oa-material-value {
  box-sizing: border-box !important;
  min-height: 44px !important;
  height: 44px !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll :is(
  .finding-actions > button,
  .manual-dimension-actions > button,
  .oa-material-actions > button
) {
  width: 100% !important;
}

/* Keep one full-width boundary between the toolbar/tabs and the scroll owner.
   The toolbar layout and tab colors remain unchanged. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel > .findings-tabbar {
  align-self: stretch !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin-bottom: 6px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Renderer-owned ordinary float OA cards use the same material-card structure as ABS edging. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #overallDimsPanel > .manual-oa-material-list {
  display: grid !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #overallDimsPanel > .manual-oa-material-list > .manual-oa-material-card {
  cursor: default !important;
  padding: 6px 8px !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-oa-material-card .oa-material-name {
  min-width: 0 !important;
  color: var(--text) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-oa-material-card[data-manual-dim-card-axis="height"] .oa-material-name { color: var(--oa-height-text) !important; }
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-oa-material-card[data-manual-dim-card-axis="width"] .oa-material-name { color: var(--oa-width-text) !important; }
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-oa-material-card[data-manual-dim-card-axis="depth"] .oa-material-name { color: var(--oa-depth-text) !important; }

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-oa-material-card .manual-dimension-value {
  box-sizing: border-box !important;
  min-height: 44px !important;
  height: 44px !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-oa-material-card .manual-dimension-value input {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding-block: 0 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-oa-material-card .manual-dimension-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 0 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-oa-material-card [data-manual-dim-comment-toggle] { grid-column: 1 / -1 !important; }
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-oa-material-card .manual-dimension-comment-toggle {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  color: var(--on-colour-button) !important;
  background-color: var(--accent-button-press) !important;
  background-image: none !important;
  border-color: rgb(var(--accent-border-rgb) / .55) !important;
}
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-oa-material-card .manual-dimension-comment-toggle:hover,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-oa-material-card .manual-dimension-comment-toggle:focus-visible {
  background-color: var(--accent-button-highlight) !important;
  color: var(--on-colour-button) !important;
  border-color: color-mix(in srgb, color-mix(in srgb, var(--accent) 41%, var(--gloss)) 80%, transparent) !important;
}
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-oa-material-card [data-manual-dim-comment-editor] {
  grid-column: 1 / -1 !important;
  display: grid !important;
  gap: 6px !important;
  width: 100% !important;
}
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-oa-material-card [data-manual-dim-comment-editor][hidden] { display: none !important; }
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-oa-material-card [data-manual-dim-comment-editor] .manual-dimension-ignore {
  width: 100% !important;
  min-height: 44px !important;
}
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .manual-oa-material-card .oa-material-card-head:has(> .oa-dim-status.is-ignored)::after {
  content: "−" !important;
  grid-area: status !important;
  justify-self: end !important;
  align-self: center !important;
  width: 1rem !important;
  min-width: 1rem !important;
  height: 1rem !important;
  color: var(--text-muted) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* ==== Review panel v3 status surfaces and shared item cards ==== */
/* Keep the three live item types on one neutral card surface. Selected and
   focused states retain their existing rings and decisions. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel :is(
  .oa-dim-row,
  .oa-material-card,
  #findingList .finding:not(.manual-dimension-card)
) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  padding: 6px 8px !important;
  border-radius: var(--radius-md, 8px) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-dim-row:not(.is-selected):not(:hover):not(:focus-visible),
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-material-card:not(.is-selected):not(:hover):not(:focus-visible),
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel #findingList .finding:not(.manual-dimension-card):not(.is-active):not(:hover):not(:focus-visible) {
  background: rgb(var(--surface-card-rgb) / 0.92) !important;
  border: 1px solid rgb(var(--text-rgb) / 0.28) !important;
  box-shadow: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel :is(
  .oa-dim-axis,
  .oa-material-name,
  #findingList .finding:not(.manual-dimension-card) .finding-heading strong
) {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

/* Existing status spans stay in the accessibility tree. Only their pill paint
   is removed; the generated symbol below carries a redundant visual cue. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel :is(
  .oa-dim-row > .oa-dim-status,
  .oa-material-card-head > .oa-dim-status
) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel :is(
  .oa-dim-row,
  .oa-material-card-head
):has(> .oa-dim-status) {
  position: relative !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-dim-row:has(> .oa-dim-status)::after,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-material-card-head:has(> .oa-dim-status)::after {
  display: inline-grid !important;
  place-items: center !important;
  width: 1rem !important;
  min-width: 1rem !important;
  height: 1rem !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-dim-row:has(> .oa-dim-status)::after {
  grid-area: axis !important;
  justify-self: end !important;
  align-self: center !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-material-card-head:has(> .oa-dim-status)::after {
  grid-area: status !important;
  justify-self: end !important;
  align-self: center !important;
  margin-inline-start: 0 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel :is(
  .oa-dim-row,
  .oa-material-card-head
):has(> .oa-dim-status.oa-ok)::after {
  content: "✓" !important;
  color: var(--success-text) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel :is(
  .oa-dim-row,
  .oa-material-card-head
):has(> .oa-dim-status.oa-unsure)::after {
  content: "!" !important;
  color: var(--warning-text) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel :is(
  .oa-dim-row,
  .oa-material-card-head
):has(> .oa-dim-status.oa-bad)::after {
  content: "×" !important;
  color: var(--danger-text) !important;
}

/* Status classes tint only their own live OA/material item. The tint remains
   on hover, focus, and selection; border rules below leave those rings intact.
   No note evidence status is selected, and no finding result is inferred. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-dim-row:has(> .oa-dim-status.oa-ok),
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-material-card:has(> .oa-material-card-head > .oa-dim-status.oa-ok) {
  background: linear-gradient(rgb(var(--success-rgb) / 0.04), rgb(var(--success-rgb) / 0.04)), var(--surface) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-dim-row:not(.is-selected):not(:hover):not(:focus-visible):has(> .oa-dim-status.oa-ok),
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-material-card:not(.is-selected):not(:hover):not(:focus-visible):has(> .oa-material-card-head > .oa-dim-status.oa-ok) {
  border-color: rgb(var(--success-rgb) / 0.48) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-dim-row:has(> .oa-dim-status.oa-unsure),
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-material-card:has(> .oa-material-card-head > .oa-dim-status.oa-unsure) {
  background: linear-gradient(rgb(var(--warning-rgb) / 0.04), rgb(var(--warning-rgb) / 0.04)), var(--surface) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-dim-row:not(.is-selected):not(:hover):not(:focus-visible):has(> .oa-dim-status.oa-unsure),
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-material-card:not(.is-selected):not(:hover):not(:focus-visible):has(> .oa-material-card-head > .oa-dim-status.oa-unsure) {
  border-color: rgb(var(--warning-rgb) / 0.48) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-dim-row:has(> .oa-dim-status.oa-bad),
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-material-card:has(> .oa-material-card-head > .oa-dim-status.oa-bad) {
  background: linear-gradient(rgb(var(--danger-rgb) / 0.04), rgb(var(--danger-rgb) / 0.04)), var(--surface) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-dim-row:not(.is-selected):not(:hover):not(:focus-visible):has(> .oa-dim-status.oa-bad),
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-material-card:not(.is-selected):not(:hover):not(:focus-visible):has(> .oa-material-card-head > .oa-dim-status.oa-bad) {
  border-color: rgb(var(--danger-rgb) / 0.48) !important;
}

/* Both value buttons remain the original editable controls. The icon is
   decorative, so it does not change their accessible names or handlers. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-dim-pick[data-oa-pick-side]:not(:disabled):not([aria-disabled="true"]) {
  position: relative !important;
  padding-right: 1.2rem !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #drawingDetailsPanel .oa-dim-pick[data-oa-pick-side]:not(:disabled):not([aria-disabled="true"])::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 4px !important;
  width: 12px !important;
  height: 12px !important;
  background-color: currentColor !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M3%2017.25V21h3.75L17.81%209.94l-3.75-3.75L3%2017.25ZM20.71%207.04a1.003%201.003%200%200%200%200-1.42l-2.34-2.34a1.003%201.003%200%200%200-1.42%200l-1.83%201.83%203.75%203.75%201.84-1.82Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M3%2017.25V21h3.75L17.81%209.94l-3.75-3.75L3%2017.25ZM20.71%207.04a1.003%201.003%200%200%200%200-1.42l-2.34-2.34a1.003%201.003%200%200%200-1.42%200l-1.83%201.83%203.75%203.75%201.84-1.82Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Add only the requested breathing room between Review Again and the tabs. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel > .findings-tabbar {
  margin-top: 12px !important;
}

/* Advisory text differences stay outside OTHER REVIEW ITEMS, but use the same
   native disclosure target and full content rail. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList > .advisory-finding-section {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList > .advisory-finding-section > .advisory-finding-disclosure {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList > .advisory-finding-section > .advisory-finding-disclosure > summary {
  display: list-item !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 6px 8px !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList > .advisory-finding-section > .advisory-finding-disclosure > summary > .oa-dim-head {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList > .advisory-finding-section > .advisory-finding-disclosure > summary:focus-visible {
  outline: 2px solid var(--accent-strong) !important;
  outline-offset: 2px !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #findingList > .advisory-finding-section > .advisory-finding-disclosure > .advisory-finding-body {
  display: grid !important;
  min-width: 0 !important;
  width: 100% !important;
  gap: 6px !important;
  padding: 4px 0 !important;
}

/* ==== Review panel design system (2026-10-02) ====
   This block is the last word on the panel's type scale, control sizes and
   card behaviour. Change values here; do not add another override pass.
   Type: 13px titles, 12px controls and body, 11px labels.
   Controls: 44px touch targets, 36px tabs, 8px radius, one weight and tracking. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel {
  --panel-fs-title: 13px;
  --panel-fs-body: 12px;
  --panel-fs-label: 11px;
  --panel-control-radius: 8px;
  --panel-control-tracking: 0.04em;
}

/* Every button in the panel shares one type treatment. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel :is(
  #appQueueButton,
  #reviewAgainButton,
  #aiSummaryTab,
  #drawingDetailsTab,
  #approveDrawingButton,
  #rejectDrawingButton,
  .finding-card-action,
  .manual-dimension-ignore,
  [data-material-comment-action]
) {
  font-size: var(--panel-fs-body) !important;
  font-weight: 700 !important;
  letter-spacing: var(--panel-control-tracking) !important;
  line-height: 1.2 !important;
  border-radius: var(--panel-control-radius) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel :is(.finding-card-action, #approveDrawingButton, #rejectDrawingButton) svg {
  width: 14px !important;
  height: 14px !important;
  flex: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #appQueueButton .app-queue-count {
  font-size: var(--panel-fs-label) !important;
}

/* Summary and Drawing Details: identical 36px tabs. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel > .findings-tabbar > :is(#aiSummaryTab, #drawingDetailsTab) {
  min-height: 36px !important;
  height: 36px !important;
  max-height: 36px !important;
  padding: 0 8px !important;
  transform: none !important;
}

/* Titles, labels and help text. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll :is(
  .oa-dim-head,
  .oa-material-name,
  .oa-dim-axis,
  .finding-heading strong
) {
  font-size: var(--panel-fs-title) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll :is(
  .oa-material-side-label,
  .drawing-note-head,
  .drawing-note-requirement > strong,
  .drawing-note-evidence > strong,
  .finding-heading > span,
  .finding-source-pages,
  .oa-material-value > span[aria-hidden="true"]
) {
  font-size: var(--panel-fs-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll :is(
  .drawing-note-help,
  .drawing-note-requirement,
  .drawing-note-evidence,
  .finding p,
  .drawing-note-parts :is(dt, dd),
  #findingCount
) {
  font-size: var(--panel-fs-body) !important;
  line-height: 1.45 !important;
}

/* Vertical rhythm. 16px between sections, 8px between a heading and its
   cards, between cards, and between the rows inside a card. Cards use 10px
   padding. Change the tokens, not individual margins. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel {
  --panel-section-gap: 16px;
  --panel-gap: 8px;
  --panel-card-pad: 10px;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--panel-gap) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel > * {
  margin: 0 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel > .oa-dim-head:not(:first-child) {
  margin-top: calc(var(--panel-section-gap) - var(--panel-gap)) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel :is(.oa-material-list, .manual-oa-material-list) {
  display: grid !important;
  gap: var(--panel-gap) !important;
  margin: 0 !important;
}

/* Review cards. OA and material cards share one structure: a head with the
   title (name + status mark) and chevron, then YOURS / SUPPLIED on the second
   line. Closed cards show only the head; open cards hide the second line
   because their editable fields show the same values. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card {
  display: grid !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: var(--panel-card-pad) !important;
  border-radius: var(--panel-control-radius) !important;
  background: rgb(var(--surface-card-rgb) / 0.92) !important;
  border: 1px solid rgb(var(--text-rgb) / 0.28) !important;
  box-shadow: none !important;
}

/* A closed <details> keeps an empty content slot in the grid, so rows are
   spaced with margins rather than the grid gap. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card > :not(.oa-material-card-head) {
  margin-top: var(--panel-gap) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card > .oa-material-card-head {
  display: grid !important;
  grid-template-columns: 14px minmax(0, 1fr) !important;
  grid-template-areas:
    "chev title"
    ".    glance"
    ".    hint" !important;
  align-items: center !important;
  column-gap: var(--panel-gap) !important;
  row-gap: 2px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  list-style: none !important;
  cursor: pointer !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card > .oa-material-card-head::-webkit-details-marker {
  display: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card-head > .oa-material-card-title {
  grid-area: title !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--panel-gap) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card-title > button.oa-material-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  /* PS-020: a 44px tap target. The padding grows the hit area and the equal
     negative margin keeps the card header's drawn height unchanged. */
  min-height: 44px !important;
  height: auto !important;
  margin: -13px 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--text) !important;
  font-size: var(--panel-fs-title) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .manual-oa-material-card[data-manual-dim-card-axis="height"] .oa-material-card-title > button.oa-material-name { color: var(--oa-height-text) !important; }
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .manual-oa-material-card[data-manual-dim-card-axis="width"] .oa-material-card-title > button.oa-material-name { color: var(--oa-width-text) !important; }
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .manual-oa-material-card[data-manual-dim-card-axis="depth"] .oa-material-card-title > button.oa-material-name { color: var(--oa-depth-text) !important; }

/* Status is a mark at the end of the title row. The word stays in the
   accessibility tree; only its paint changes. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card-title > .manual-dimension-status {
  position: static !important;
  flex: none !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background: none !important;
  border: 0 !important;
  clip: auto !important;
  clip-path: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card-title > .manual-dimension-status::after {
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card-title > .manual-dimension-status:is(.oa-ok, .is-match)::after { content: "✓" !important; color: var(--success-text) !important; }
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card-title > .manual-dimension-status:is(.oa-unsure, .is-missing, .is-needs_input)::after { content: "!" !important; color: var(--warning-text) !important; }
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card-title > .manual-dimension-status:is(.oa-bad, .is-mismatch)::after { content: "×" !important; color: var(--danger-text) !important; }
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card-title > .manual-dimension-status.is-ignored::after { content: "−" !important; color: var(--text-muted) !important; }

/* Each card is tinted by its own status. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card:is([data-manual-dim-result="match"], .is-material-status-ok) {
  background: linear-gradient(rgb(var(--success-rgb) / 0.04), rgb(var(--success-rgb) / 0.04)), var(--surface) !important;
  border-color: rgb(var(--success-rgb) / 0.48) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card:is([data-manual-dim-result="needs_input"], [data-manual-dim-result="missing"], .is-material-status-unsure) {
  background: linear-gradient(rgb(var(--warning-rgb) / 0.04), rgb(var(--warning-rgb) / 0.04)), var(--surface) !important;
  border-color: rgb(var(--warning-rgb) / 0.48) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card:is([data-manual-dim-result="mismatch"], .is-material-status-bad) {
  background: linear-gradient(rgb(var(--danger-rgb) / 0.04), rgb(var(--danger-rgb) / 0.04)), var(--surface) !important;
  border-color: rgb(var(--danger-rgb) / 0.48) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card.is-selected {
  box-shadow: 0 0 0 1px var(--accent-strong) !important;
}

/* Chevron: points right when closed, down when open. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card-head > .manual-dimension-chevron {
  grid-area: chev !important;
  position: static !important;
  display: block !important;
  justify-self: center !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-right: 2px solid var(--text-muted) !important;
  border-bottom: 2px solid var(--text-muted) !important;
  transform: rotate(-45deg) !important;
  transition: transform 160ms ease !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card-head > .manual-dimension-chevron::before,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card-head > .manual-dimension-chevron::after {
  content: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card:is(.is-open, [open]) > .oa-material-card-head > .manual-dimension-chevron {
  transform: rotate(45deg) !important;
}

/* Second line: YOURS (blue) and SUPPLIED (purple) in two aligned columns. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-card-glance {
  grid-area: glance !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--panel-gap) !important;
  color: var(--text) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: var(--panel-fs-body) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-card-glance-side {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-card-glance-label {
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: var(--panel-fs-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-card-glance-side:first-child .oa-card-glance-label,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-side[data-side="reference"] .oa-material-side-label {
  color: var(--accent-strong) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-card-glance-side:last-child .oa-card-glance-label,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-side[data-side="manufacturer"] .oa-material-side-label {
  color: var(--complete-text) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card-head > .oa-material-counterpart-hint {
  grid-area: hint !important;
  font-size: var(--panel-fs-label) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card:is(.is-open, [open]) .oa-card-glance,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .manual-oa-material-card:not(.is-open) > :not(.oa-material-card-head):not(.oa-close-note):not(.oa-pick-prompt),
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card > :is(.oa-material-card-body, .oa-material-actions)[hidden] {
  display: none !important;
}

/* Open card body: the same two-column YOURS / SUPPLIED fields on both card
   types. The pencil source buttons and the "Dimensions:" caption are hidden;
   the name button already shows the item on both drawings. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card :is(.oa-material-source-button, .oa-material-fields-title) {
  display: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card > .oa-material-card-body {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--panel-gap) !important;
  padding: 0 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card .oa-material-side {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card .oa-material-side-label {
  display: block !important;
  font-size: var(--panel-fs-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card > .oa-material-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--panel-gap) !important;
  padding: 0 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card > .oa-material-actions > :is([data-material-action="comment"], .manual-dimension-comment-toggle, .oa-material-comment) {
  grid-column: 1 / -1 !important;
}

/* The pick hint ("No readable sizes on this sheet...") spans the full card width. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card > .oa-material-actions > .manual-dimension-status {
  grid-column: 1 / -1 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card > .oa-material-actions > .oa-material-comment[hidden] {
  display: none !important;
}

/* Sheet manager is a modal. Nothing in the review panel may paint over it. */
html[data-has~="pairing-overview-open"]:not(#has-pad) #layoutV2FloatHost :is(#reviewPanel, .panel-visibility-toggle) {
  visibility: hidden !important;
}

/* The tab row already draws the divider above the list. The first section in
   a tab must not draw a second one, which read as an empty box. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll :is(#overallDimsPanel, #aiSummaryPanel) > :first-child {
  margin-top: 0 !important;
  border-top: 0 !important;
}

/* Horizontal spacing. Every row sits --panel-inset from both panel edges. The
   list's scrollbar lives in the right inset, centred, with the same gap on
   both sides: inset = gap + bar + gap. Thumb colour matches .app-scroll-rail. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel {
  --panel-inset: 14px;
  --panel-scrollbar: 6px;
  --panel-scrollbar-gap: calc((var(--panel-inset) - var(--panel-scrollbar)) / 2);
  padding-left: var(--panel-inset) !important;
  padding-right: var(--panel-inset) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll {
  width: calc(100% + var(--panel-inset) - var(--panel-scrollbar-gap)) !important;
  margin-right: calc(var(--panel-scrollbar-gap) - var(--panel-inset)) !important;
  padding-right: var(--panel-scrollbar-gap) !important;
  scrollbar-width: auto !important;
  scrollbar-color: auto !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll::-webkit-scrollbar {
  display: block !important;
  width: var(--panel-scrollbar) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll::-webkit-scrollbar-track {
  background: transparent !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll::-webkit-scrollbar-thumb {
  background: rgb(var(--accent-rgb) / 0.72) !important;
  border: 0 !important;
  border-radius: 999px !important;
}

/* One gap between side-by-side controls: tabs, card actions and the footer. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel :is(
  .findings-tabbar,
  #reviewPanelScroll .finding-actions,
  #reviewPanelScroll .manual-dimension-actions,
  #reviewPanelScroll .oa-material-actions,
  #reviewPanelScroll .oa-material-card-body,
  .review-decision-actions
) {
  column-gap: 8px !important;
}

/* Approve and Reject sit side by side at every width. On phones, Queue and
   Review Again share one row too, so the review list keeps the space. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .review-decision-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .review-decision-actions:not(:has(#rejectDrawingButton)) > #approveDrawingButton {
  grid-column: 1 / -1 !important;
}
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel .review-decision-actions > #rejectDrawingButton {
  grid-column: auto !important;
}

@media (max-width: 760px) {
  html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel > #studyTopTools {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 8px !important;
  }

  html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel > #studyTopTools > :is(#appQueueButton, #reviewAgainButton) {
    grid-column: auto !important;
    min-width: 0 !important;
  }
}

/* Icons keep their size when a button narrows. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel :is(#appQueueButton, #reviewAgainButton) svg {
  flex: none !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
}

/* Review header buttons (2026-10-02): Sheet Manager stacked above Drawing
   Controls in one column, same size. Sheet Manager is a solid grey button
   with readable text so it no longer looks disabled. The repeated ids match
   the older override passes for these buttons so this block wins. */
html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage .review-header > .review-actions {
  display: grid !important;
  grid-template-columns: 220px !important;
  grid-template-rows: 44px 44px !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  justify-self: end !important;
  grid-auto-flow: row !important;
  justify-content: end !important;
  align-content: start !important;
  row-gap: 8px !important;
  column-gap: 0 !important;
}

html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #pairingManagerButton#pairingManagerButton#pairingManagerButton#pairingManagerButton,
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #drawingControls > #drawingControlsSummary {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #pairingManagerButton#pairingManagerButton#pairingManagerButton#pairingManagerButton {
  order: 1 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--text-muted) 23%, var(--surface-card)) !important;
  background-image: none !important;
  border: 1px solid rgb(var(--text-rgb) / 0.35) !important;
  opacity: 1 !important;
}

html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #pairingManagerButton#pairingManagerButton#pairingManagerButton#pairingManagerButton:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--text-muted) 38%, var(--surface-card)) !important;
  border-color: rgb(var(--text-rgb) / 0.55) !important;
}

html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #pairingManagerButton#pairingManagerButton#pairingManagerButton#pairingManagerButton :is(span, svg, svg *) {
  color: inherit !important;
  opacity: 1 !important;
}

html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage .review-actions > #drawingControls#drawingControls {
  order: 2 !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  margin: 0 !important;
}

/* The open Drawing Controls menu is wider than its button; anchor it to the
   button's right edge so it opens leftwards and stays on screen. */
html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage .review-actions > #drawingControls#drawingControls > #drawingControlsBody {
  left: auto !important;
  right: 0 !important;
  max-width: calc(100vw - 32px) !important;
}

/* Compact review header (desktop): the stacked Sheet Manager / Drawing
   Controls column rises into the empty right side of the page title band, so
   the sheet meta sits directly under the title and the drawings move up.
   --review-title-band is the title band height (68px) plus its 8px gap. */
@media (min-width: 1181px) {
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage .review-header {
    --review-title-band: 76px;
    align-items: flex-start !important;
    min-height: 0 !important;
  }

  html[data-layout-v2="float"] #reviewScreen#reviewScreen #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;
  }

  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage .review-header > .review-heading {
    align-self: flex-start !important;
  }
}

/* The topbar actions slot is a placeholder that only sometimes holds the
   Queue opener. Empty, it must not reserve a row in the title band. */
html[data-layout-v2="float"] .workspace #reviewTopbarActions:not(:has(> *)) {
  display: none !important;
}

/* Review sheets fill their panels: each frame takes its drawing's aspect
   ratio (--sheet-aspect, set from the rendered image), as the base
   stylesheet intended before the float pass forced height: 100%. A sheet
   that would be taller than the space keeps its cap. Overlays follow the
   drawn area through sizeOverlayToDrawing, so markers stay aligned. */
@media (min-width: 761px) {
  html[data-layout-v2="float"] #reviewScreen#reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .drawing-pane {
    grid-template-rows: auto auto !important;
    height: auto !important;
    align-self: start !important;
  }

  html[data-layout-v2="float"] #reviewScreen#reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .drawing-pane > .review-sheet-frame[style*="--sheet-aspect"] {
    aspect-ratio: var(--sheet-aspect) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 300px) !important;
    align-self: start !important;
  }
}

/* Drawing Controls menu. Desktop: it opens to the left of its button with
   its bottom edge level with the button's, so it sits in the band above the
   PDF panels and clear of the review panel. Narrow screens keep the
   drop-down, where the actions span the full width. Toggle labels sit
   centred beside their icon and wrap inside the button. */
@media (min-width: 961px) {
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage .review-actions > #drawingControls#drawingControls > #drawingControlsBody {
    top: auto !important;
    bottom: 0 !important;
    right: calc(100% + 10px) !important;
    left: auto !important;
    transform-origin: bottom right !important;
  }

  html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions #drawingControls[open] #drawingControlsSummary .drawing-controls-chevron {
    transform: translate(-25%, -50%) rotate(135deg) !important;
  }
}

html[data-layout-v2="float"] #reviewScreen#reviewScreen #drawingControlsBody .toggle > :is(.diff-toggle-label, .link-views-label, .lock-marks-label, .rotate-all-label) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  letter-spacing: .02em !important;
  overflow-wrap: normal !important;
}

/* Max tolerance: one box. The number has no inner ring, and ±, number and
   MM share one centre line. */
html[data-layout-v2="float"] #reviewScreen#reviewScreen #drawingControlsBody .drawing-controls-tolerance-input > * {
  display: block !important;
  height: auto !important;
  font: 700 .7rem/1 var(--font-mono, monospace) !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen #drawingControlsBody .drawing-controls-tolerance-input > input {
  width: 28px !important;
  min-width: 28px !important;
  height: 20px !important;
  min-height: 0 !important;
  border: 0 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  background: transparent !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen #drawingControlsBody .drawing-controls-tolerance-input {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 12px !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage #drawingControls[open] > #drawingControlsBody:not([hidden]) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 88px !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen #drawingControlsBody .review-tolerance-control {
  width: 100% !important;
  min-width: 0 !important;
}

/* Drawing Controls menu height matches the stacked Sheet Manager and Drawing
   Controls buttons (44 + 8 + 44 = 96px): top level with Sheet Manager,
   bottom level with Drawing Controls. */
@media (min-width: 961px) {
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage .review-actions > #drawingControls#drawingControls > #drawingControlsBody {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    padding: 6px 10px !important;
  }
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage #drawingControls[open] > #drawingControlsBody:not([hidden]) {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 6px 10px !important;
  }
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #drawingControlsBody .toggle {
    min-height: 0 !important;
  }
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #drawingControlsBody .review-tolerance-control {
    grid-template-rows: auto 40px !important;
    padding: 0 !important;
  }
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #drawingControlsBody .drawing-controls-tolerance-input {
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* Drawing Controls chevron sits left of the label, on the same line as the
   Sheet Manager icon. */
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions #drawingControlsSummary .drawing-controls-chevron {
  left: 37px !important;
  right: auto !important;
  margin: 0 !important;
}

/* Sheet Manager and Drawing Controls: icon and label form one centred group
   with a 10px gap. Both icons take a 16px slot so the two labels line up. */
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #pairingManagerButton#pairingManagerButton#pairingManagerButton#pairingManagerButton,
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #drawingControls > #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary {
  justify-content: center !important;
  gap: 10px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #pairingManagerButton#pairingManagerButton#pairingManagerButton#pairingManagerButton > *,
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #drawingControls > #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary > * {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #pairingManagerButton#pairingManagerButton#pairingManagerButton#pairingManagerButton > svg {
  width: 16px !important;
  height: 16px !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #drawingControls > #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary > .drawing-controls-chevron {
  position: static !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 4px 0 1px !important;
  transform: rotate(45deg) translate(-2px, -2px) !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #drawingControls[open] > #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary > .drawing-controls-chevron {
  transform: rotate(135deg) translate(-1px, 1px) !important;
}

/* Desktop: both buttons, and the column holding them, are 192px wide. */
@media (min-width: 961px) {
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage .review-header .review-actions,
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage #drawingControls#drawingControls#drawingControls,
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage #pairingManagerButton#pairingManagerButton#pairingManagerButton,
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary {
    width: 192px !important;
    min-width: 192px !important;
    max-width: 192px !important;
  }
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage .review-header .review-actions {
    grid-template-columns: 192px !important;
  }
}

/* Drawing Controls menu spacing: one 8px unit for the outer padding and
   every gap. No divider before Max tolerance; its label and box share the
   toggle rows, so the box is the same height as a toggle. */
html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage .review-actions > #drawingControls#drawingControls > #drawingControlsBody {
  padding: 8px !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage #drawingControls[open] > #drawingControlsBody:not([hidden]) {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen #drawingControlsBody .review-tolerance-control::before {
  content: none !important;
  display: none !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen #drawingControlsBody .review-tolerance-control {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  height: 100% !important;
  padding: 0 !important;
  align-content: stretch !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen #drawingControlsBody #reviewToleranceLabel {
  align-self: center !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen #drawingControlsBody .drawing-controls-tolerance-input {
  height: 100% !important;
  min-height: 0 !important;
}

/* Desktop compact header: the Sheet Manager / Drawing Controls stack sits
   8px above the PDF panels, the same as the 8px between the two buttons.
   The column is anchored to the header bottom (the large negative top margin
   keeps it out of the header's height). */
@media (min-width: 1181px) {
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage .review-header > .review-actions {
    align-self: flex-end !important;
    margin-top: -200px !important;
    margin-bottom: 0 !important;
  }

  /* The title block ends 8px above the PDF panels too: the stage puts a
     16px gap after the header, so the header takes -8px. */
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage .review-header {
    margin-bottom: -8px !important;
  }
}

/* Collapsed Review panel tab: the visible tab sits flush against the window's
   right edge (rounded on its inner side only); the full 44px button stays the
   hit area. The chevron is centred on the visible tab. */
html[data-layout-v2="float"][data-has~="review-panel-collapsed"]:not(#has-pad) #layoutV2Stage-reviewScreen > button.panel-visibility-toggle::before {
  left: auto !important;
  right: 0 !important;
  width: 28px !important;
  border-radius: 14px 0 0 14px !important;
  box-shadow: -4px 0 18px rgb(var(--accent-rgb) / .35), inset 1px 1px 0 rgb(var(--gloss-rgb) / .22) !important;
}
html[data-layout-v2="float"][data-has~="review-panel-collapsed"]:not(#has-pad) #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span {
  width: 28px !important;
  margin-left: auto !important;
  place-items: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Review panel show/hide: quick and direct. Opening slides in over 200ms with
   a strong ease-out; closing slides out over 160ms with an ease-in. The panel
   stays solid while it moves and only fades at the very end of a close. The
   tab uses the same timing, so it stays attached to the panel edge. Reduced
   motion keeps the existing no-transition rules. */
@media (prefers-reduced-motion: no-preference) {
  html[data-layout-v2="float"]:not([data-reduce-motion="true"]) #layoutV2FloatHost#layoutV2FloatHost #reviewPanel:not(.is-collapsed) {
    transition: transform 200ms cubic-bezier(.2, .9, .3, 1), opacity 80ms linear, visibility 0s linear 0s !important;
  }
  html[data-layout-v2="float"]:not([data-reduce-motion="true"]) #layoutV2FloatHost#layoutV2FloatHost #reviewPanel.is-collapsed {
    transition: transform 160ms cubic-bezier(.5, 0, .9, .5), opacity 60ms linear 100ms, visibility 0s linear 160ms !important;
  }
  html[data-layout-v2="float"]:not([data-reduce-motion="true"]) #layoutV2FloatHost#layoutV2FloatHost .layout-v2-stage:has(#reviewPanel:not(.is-collapsed)) > button[data-panel-toggle="review"] {
    transition: right 200ms cubic-bezier(.2, .9, .3, 1), transform 200ms cubic-bezier(.2, .9, .3, 1) !important;
  }
  html[data-layout-v2="float"]:not([data-reduce-motion="true"]) #layoutV2FloatHost#layoutV2FloatHost .layout-v2-stage:has(#reviewPanel.is-collapsed) > button[data-panel-toggle="review"] {
    transition: right 160ms cubic-bezier(.5, 0, .9, .5), transform 160ms cubic-bezier(.5, 0, .9, .5) !important;
  }
}

/* Review tab chevron: an SVG arrow drawn symmetric about its own centre
   (x 9-15, y 6-18 in a 24 box), placed at the exact centre of the visible
   tab. It points right (hide) when open and is mirrored in place, with no
   motion, to point left (show) when collapsed. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span {
  display: block !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background: 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.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center / 18px 18px no-repeat !important;
  transform: none !important;
  transition: none !important;
}
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span::before,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span::after {
  content: none !important;
  display: none !important;
}
html[data-layout-v2="float"][data-has~="review-panel-collapsed"]:not(#has-pad) #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span {
  transform: scaleX(-1) !important;
}
/* Open tab: its painted shape starts 2px left of the button, so the arrow's
   box spans the same 20px. */
html[data-layout-v2="float"][data-has~="review-panel-open"]:not(#has-pad) #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span {
  width: 20px !important;
  min-width: 20px !important;
  margin-left: -2px !important;
}

/* One label style for the top bar and the review utility buttons: step
   names, Undo, Redo, Clear all, Menu, Sheet Manager and Drawing Controls.
   Colours stay per button, since they carry state. Step names join from
   1181px; narrower top bars keep their compact step size so the steps do
   not run into the brand. */
#workflowActions #undoButton > span,
#workflowActions #redoButton > span,
#workflowActions #clearAllButton > .clear-label,
#workflowActions #sidebarActionMenu > summary > span,
#reviewScreen #pairingManagerButton > span:not(.pairing-manager-count),
#reviewScreen #drawingControlsSummary > span:last-child {
  font-family: var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
@media (min-width: 1181px) {
  #workflowPanel .step-list .step .step-copy > strong,
  #workflowPanel .step-list .step .step-copy > strong > span {
    font-family: var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }
}

/* Panel tab: one size open and closed, 28px by 68px with the same rounded
   left edge. The open tab grows left from the panel edge. */
@media (min-width: 761px) {
  html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost .layout-v2-stage:has(#reviewPanel:not(.is-collapsed)) > button[data-panel-toggle="review"] {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
  }
  html[data-layout-v2="float"][data-has~="review-panel-open"]:not(#has-pad) #layoutV2Stage-reviewScreen > button.panel-visibility-toggle::before {
    left: auto !important;
    right: 0 !important;
    width: 28px !important;
    border-radius: 14px 0 0 14px !important;
  }
  html[data-layout-v2="float"][data-has~="review-panel-open"]:not(#has-pad) #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span {
    width: 28px !important;
    min-width: 28px !important;
    margin-left: auto !important;
  }
}

/* Step nav: a little more room between each number circle and its label. */
@media (min-width: 1181px) {
  #workflowPanel .step-list .step {
    column-gap: 12px !important;
  }
}

/* Brand: APPVLR sits 10px from the logo. The divider and Design Approval
   follow it across, with the same visible gap either side of the divider.
   From 1025px up only: phone and tablet spacing is set in the "Header: phone
   and tablet layout (2026-10-05)" block of features/review-responsive.css. */
@media (min-width: 1025px) {
  #homeButton.brand-block > .brand-name {
    margin-left: -6px !important;
  }
  #homeButton.brand-block > div {
    margin-left: -4px !important;
    padding-left: 14px !important;
  }
}

/* Notification bell: a true circle the same height as the other top
   actions, not a 40 by 36 oval. From 1025px up only: below that the header
   buttons are one 44px set (features/review-responsive.css). */
@media (min-width: 1025px) {
  #workflowActions #appNotificationButton.app-notification-button {
    flex: 0 0 auto !important;
    width: var(--app-bell-size, 36px) !important;
    min-width: 0 !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
}

/* Step circles, modern: flat fills with no gloss. Done steps are solid
   purple, the current step is solid blue with a soft halo, and upcoming
   steps are an outline only. Size and colours per state stay as before. */
#workflowPanel .step-list .step:not(.is-complete):not(.is-active) .step-index,
#workflowPanel .step-list .step .step-index {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  font-family: var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: none !important;
  box-shadow: inset 0 0 0 1.5px rgb(var(--accent-strong-rgb) / .38) !important;
  color: var(--accent-strong) !important;
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease !important;
}
#workflowPanel .step-list .step.is-complete .step-index {
  background-color: var(--complete-button-highlight) !important;
  box-shadow: 0 0 0 1px rgb(var(--complete-button-rgb) / .45) !important;
  color: var(--on-colour-button) !important;
}
#workflowPanel .step-list .step.is-active .step-index {
  background-color: var(--accent-button) !important;
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .2), 0 0 0 1px rgb(var(--accent-rgb) / .6) !important;
  color: var(--on-colour-button) !important;
}
#workflowPanel .step-list .step:not(.is-complete):not(.is-active):hover .step-index {
  box-shadow: inset 0 0 0 1.5px rgb(var(--accent-strong-rgb) / .7) !important;
  color: var(--text) !important;
}
#workflowPanel .step-list .step .step-index .circle-glyph {
  color: inherit !important;
  text-shadow: none !important;
}

/* Review title block hierarchy: a quiet eyebrow, the screen title, then one
   row with the sheet status as a chip and the sheet meta in muted grey. The
   meta no longer shares the eyebrow's blue, and the status no longer competes
   with the title. */
html #screenLabel#screenLabel.screen-label {
  margin: 0 0 10px !important;
  font-size: 11px !important;
  letter-spacing: .2em !important;
  color: rgb(var(--accent-strong-rgb) / .8) !important;
}
html #screenTitle#screenTitle {
  line-height: 1.05 !important;
}
html #reviewScreen#reviewScreen .review-header .review-heading > div {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 12px !important;
}
html #reviewScreen#reviewScreen .review-header .review-heading #drawingTitle#drawingTitle {
  order: -1 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 12px 0 10px !important;
  border: 1px solid rgb(var(--accent-strong-rgb) / .28) !important;
  border-radius: 999px !important;
  background: rgb(var(--accent-wash-rgb) / .12) !important;
  color: var(--text) !important;
  font-family: var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
html #reviewScreen#reviewScreen .review-header .review-heading #drawingTitle#drawingTitle::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22) !important;
}
html #reviewScreen#reviewScreen .review-header .review-heading #drawingMeta#drawingMeta.screen-label {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
}

/* Jon 2026-10-02: no status or meta row under the review title. The
   elements stay in the page for scripts; they are just not shown. */
html #reviewScreen#reviewScreen .review-header .review-heading {
  display: none !important;
}

/* Review title spans the Sheet Manager + Drawing Controls stack (96px): the
   title lines up with the bottom of Drawing Controls and the eyebrow sits
   8px above it, the same gap as between the two buttons, both 8px above the PDF panels. The stage keeps a 24px gap
   under the top bar, so the block shifts down 16px. The title
   scales with the window so it never reaches the buttons. */
@media (min-width: 1181px) {
  html[data-has~="review-screen"]:not(#has-pad) .topbar .topbar-main > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 17.4px !important; /* 16px between the visible letters */
    height: 96px !important;
    position: relative !important;
    top: 16px !important;
  }
  html[data-has~="review-screen"]:not(#has-pad) #screenLabel#screenLabel.screen-label {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: .6 !important; /* line box = cap height, so gaps are visible gaps */
  }
  html[data-has~="review-screen"]:not(#has-pad) #screenTitle#screenTitle {
    font-size: clamp(36px, 3.6vw, 62px) !important;
    line-height: .74 !important; /* line box = cap height */
    margin: 0 !important;
  }
}

/* Pane file names stay on one line so both pane headers keep one height. */
#reviewScreen .drawing-pane > header > strong {
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* Review screen: no empty band under the top bar. Sheet Manager starts 16px
   below the bar, and the title and PDF panels move up with it. */
@media (min-width: 1181px) {
  html[data-layout-v2="float"][data-has~="review-screen"]:not(#has-pad) #appShell > main.workspace {
    padding-top: 0 !important;
    /* Jon 2026-10-03: "only 4-6 px tall spaces" under the drawing. The
       workspace ends above the thin Privacy - Terms strip: 19px shell offset
       + 96px shell padding above it, 14px footer + 5px shell margin below. */
    height: calc(var(--app-visible-height, 100dvh) - 134px) !important;
    min-height: 0 !important;
  }
  html[data-layout-v2="float"][data-has~="review-screen"]:not(#has-pad) #appShell > main.workspace > .review-topbar-viewport {
    margin-top: calc(var(--review-topbar-pull, -28px)) !important;
  }
}

/* The review title never runs past the first PDF panel. Each panel is half
   the stage width less the 16px gap, and the title is about 16.8em wide, so
   the size follows the stage width. */
@media (min-width: 1181px) {
  html[data-has~="review-screen"]:not(#has-pad) .topbar > .topbar-main {
    container-type: inline-size !important;
  }
  html[data-has~="review-screen"]:not(#has-pad) #screenTitle#screenTitle {
    font-size: min(62px, calc((100cqi - 16px) / 34)) !important;
  }
}

/* Review panel: semi-translucent glass so the drawing shows through softly.
   A stronger blur keeps the panel text readable over white sheets. */
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #reviewPanel.findings-panel {
  background: linear-gradient(rgb(var(--surface-rgb) / .74), rgb(var(--bg-rgb) / .8)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
}

/* Panel tab: names the panel. A bolder chevron sits above "REVIEW PANEL",
   which reads bottom to top. The tab is 28px by 148px, open and closed. */
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle,
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost .layout-v2-stage > button[data-panel-toggle="review"] {
  height: 148px !important;
  min-height: 148px !important;
  max-height: 148px !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle::before {
  height: 148px !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 148px !important;
  background: none !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span::before {
  content: "" !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  background: 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='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center / 18px 18px no-repeat !important;
}
html[data-layout-v2="float"][data-has~="review-panel-collapsed"]:not(#has-pad) #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span {
  transform: none !important;
}
html[data-layout-v2="float"][data-has~="review-panel-collapsed"]:not(#has-pad) #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span::before {
  transform: scaleX(-1) !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span::after {
  content: "Review panel" !important;
  display: block !important;
  flex: 0 0 auto !important;
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  color: var(--text-strong) !important;
  font-family: var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Review screen content spans exactly the width of the top pill bar: the
   title, buttons and PDF panels start and end at the bar's edges, and the
   open review panel ends at the bar's right edge. */
@media (min-width: 1181px) {
  html[data-layout-v2="float"][data-has~="review-screen"]:not(#has-pad) #appShell > main.workspace {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html[data-layout-v2="float"][data-has~="review-screen"]:not(#has-pad) {
    --floating-panel-right: calc(var(--app-frame-inset, 19px) + env(safe-area-inset-right, 0px)) !important;
  }
}

/* Panel tab: flat app blue with a hairline edge and a soft shadow, white
   chevron and label. Hover lifts it slightly. */
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle::before {
  background: linear-gradient(var(--accent-button), var(--accent-button)) !important; /* PS-007: 4.5:1 under the tab label */
  color: var(--on-colour-button) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgb(var(--overlay-rgb) / .18) !important;
  border-right: 0 !important;
  box-shadow: -6px 0 20px rgb(var(--accent-rgb) / .28) !important;
  transition: border-color 140ms ease, background 140ms ease !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle:is(:hover, :focus-visible)::before {
  background: linear-gradient(var(--accent-button-hover), var(--accent-button-highlight)) !important;
  color: var(--on-colour-button) !important;
  border-color: rgb(var(--overlay-rgb) / .3) !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span::before {
  width: 14px !important;
  height: 14px !important;
  background: 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='3' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center / 14px 14px no-repeat !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span::after {
  color: var(--text-strong) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  transition: color 140ms ease !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle:is(:hover, :focus-visible) > span::after {
  color: var(--text-strong) !important;
}

/* The gap above the PDF panels matches the 16px gap between them: the
   title and Drawing Controls both end 16px above the panels. */
@media (min-width: 1181px) {
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage .review-header {
    margin-bottom: 0 !important;
  }
  html[data-layout-v2="float"][data-has~="review-screen"]:not(#has-pad) #appShell > main.workspace > .review-topbar-viewport {
    margin-top: -20px !important;
  }
  html[data-has~="review-screen"]:not(#has-pad) .topbar .topbar-main > div:first-child {
    top: 8px !important;
  }
}

/* Panel tab: the chevron sits 6px (visible) above the label, and the space
   above the chevron equals the space below the label (about 17.9px). Both are placed exactly: the
   chevron's drawn stroke is 8.75px tall inside its 14px box, and the label's
   ink is 97.5px inside its 98.9px box (the extra is trailing letter-spacing
   at the top end). */
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span::before {
  position: absolute !important;
  top: 15.25px !important;
  left: calc(50% - 7px) !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle > span::after {
  position: absolute !important;
  top: 31.25px !important;
  left: calc(50% - 5.5px) !important;
}

/* Icon to label: 6px of visible space on the panel tab, Sheet Manager and
   Drawing Controls. The Sheet Manager icon's ink stops 1.9px inside its box;
   the Drawing Controls chevron's ink fills its rotated box. */
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #pairingManagerButton#pairingManagerButton#pairingManagerButton#pairingManagerButton {
  gap: 4.1px !important;
  padding-left: 13px !important; /* evens the visible space either side */
  padding-right: 15px !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #drawingControls > #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary {
  gap: 7.7px !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #drawingControls > #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary > .drawing-controls-chevron {
  margin-right: 0 !important;
}

/* Pane header buttons: page arrows and rotate share one solid style per
   pane (blue for your drawing, purple for the supplied drawing) and one
   bold white icon weight, about 2.2px drawn. A disabled page arrow keeps
   the same button and dims only its icon. */
html #reviewScreen#reviewScreen .drawing-pane .pane-header-controls > :is([data-pane-page-side="raeco"], [data-rotate-side="raeco"]) {
  background: linear-gradient(var(--accent-button-highlight), var(--accent-button) 48%, var(--accent-button-press)) !important;
  color: var(--on-colour-button) !important;
  border: 1px solid rgb(var(--accent-rgb) / .82) !important;
}
html #reviewScreen#reviewScreen .drawing-pane .pane-header-controls > :is([data-pane-page-side="manufacture"], [data-rotate-side="manufacture"]) {
  background: linear-gradient(var(--complete-button-highlight), var(--complete-button) 48%, var(--complete-button-press)) !important;
  color: var(--on-colour-button) !important;
  border: 1px solid rgb(var(--complete-border-rgb) / .82) !important;
}
html #reviewScreen#reviewScreen .drawing-pane .pane-header-controls > :is(.sheet-page-button, .rotate-sheet-button) {
  opacity: 1 !important;
  box-shadow: 0 6px 16px rgb(var(--shadow-rgb) / .24), inset 0 1px 0 rgb(var(--gloss-rgb) / .18) !important;
}
html #reviewScreen#reviewScreen .drawing-pane .pane-header-controls > :is(.sheet-page-button, .rotate-sheet-button) svg,
html #reviewScreen#reviewScreen .drawing-pane .pane-header-controls > :is(.sheet-page-button, .rotate-sheet-button) svg path {
  stroke: var(--text-strong) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
}
html #reviewScreen#reviewScreen .drawing-pane .pane-header-controls > .sheet-page-button svg,
html #reviewScreen#reviewScreen .drawing-pane .pane-header-controls > .sheet-page-button svg path {
  stroke-width: 2.35px !important; /* 16-unit icon at 15px */
}
html #reviewScreen#reviewScreen .drawing-pane .pane-header-controls > .rotate-sheet-button svg,
html #reviewScreen#reviewScreen .drawing-pane .pane-header-controls > .rotate-sheet-button svg path {
  stroke-width: 3.5px !important; /* 24-unit icon at 15px */
}
html #reviewScreen#reviewScreen .drawing-pane .pane-header-controls > .sheet-page-button:disabled svg {
  opacity: .5 !important;
}
html #reviewScreen#reviewScreen .drawing-pane .pane-header-controls > .sheet-page-button:disabled {
  cursor: default !important;
}

/* Zoom pill and full-screen button: not faded; the pill is 78% with a blur. Every button in them
   uses the pane colour at 80%: blue on your drawing, purple on the
   supplied drawing, white icons drawn about 2.2px. A disabled button
   keeps its fill and dims only its icon. */
html #reviewScreen#reviewScreen .drawing-pane > :is(.review-zoom-control, .expand-sheet-button) {
  opacity: 1 !important;
}
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control {
  background: rgb(var(--surface-rgb) / .78) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  border-color: rgb(var(--overlay-rgb) / .16) !important;
}
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control > .review-zoom-button,
html #reviewScreen#reviewScreen .drawing-pane > .expand-sheet-button {
  opacity: 1 !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 4px 12px rgb(var(--shadow-rgb) / .24), inset 0 1px 0 rgb(var(--gloss-rgb) / .18) !important;
}
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control > .review-zoom-button[data-review-zoom="raeco"],
html #reviewScreen#reviewScreen .drawing-pane > .expand-sheet-button[data-fullscreen-target="raeco"] {
  background: linear-gradient(color-mix(in srgb, var(--accent-button-highlight) 80%, transparent), rgb(var(--accent-button-rgb) / .8) 48%, rgb(var(--accent-button-press-rgb) / .8)) !important;
  color: var(--on-colour-button) !important;
  border: 1px solid rgb(var(--accent-rgb) / .6) !important;
}
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control > .review-zoom-button[data-review-zoom="manufacture"],
html #reviewScreen#reviewScreen .drawing-pane > .expand-sheet-button[data-fullscreen-target="manufacture"] {
  background: linear-gradient(color-mix(in srgb, var(--complete-button-highlight) 80%, transparent), rgb(var(--complete-button-rgb) / .8) 48%, rgb(var(--complete-active-rgb) / .8)) !important;
  color: var(--on-colour-button) !important;
  border: 1px solid rgb(var(--complete-border-rgb) / .6) !important;
}
/* The + and - are cut from a mask in the button's own label ink (--on-accent on Yours,
   --on-complete on Supplied), never a fixed white, so they read on whatever colour is chosen.
   A disabled button keeps its fill and dims only its icon. */
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control > .review-zoom-button[data-review-zoom-dir="out"],
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control > .review-zoom-button[data-review-zoom-dir="in"] {
  position: relative !important;
}
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control > .review-zoom-button[data-review-zoom-dir="out"]::before,
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control > .review-zoom-button[data-review-zoom-dir="in"]::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 15px;
  height: 15px;
  margin: auto;
  background: currentColor;
  pointer-events: none;
}
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control > .review-zoom-button[data-review-zoom-dir="out"]::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'><path d='M6 12h12'/></svg>") center / 15px 15px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'><path d='M6 12h12'/></svg>") center / 15px 15px no-repeat;
}
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control > .review-zoom-button[data-review-zoom-dir="in"]::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'><path d='M6 12h12M12 6v12'/></svg>") center / 15px 15px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'><path d='M6 12h12M12 6v12'/></svg>") center / 15px 15px no-repeat;
}
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control > .review-zoom-button[data-review-zoom-dir="out"]:disabled::before,
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control > .review-zoom-button[data-review-zoom-dir="in"]:disabled::before {
  opacity: .5;
}
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control > .review-zoom-reset svg,
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control > .review-zoom-reset svg path {
  stroke: currentColor !important;
  stroke-width: 3.5px !important; /* 24-unit icon at 15px */
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
}
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control > .review-zoom-reset:disabled svg {
  opacity: .5 !important;
}
html #reviewScreen#reviewScreen .drawing-pane > .expand-sheet-button svg,
html #reviewScreen#reviewScreen .drawing-pane > .expand-sheet-button svg path {
  stroke: currentColor !important;
  stroke-width: 3.3px !important; /* 24-unit icon at 16px */
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
}
html #reviewScreen#reviewScreen .drawing-pane > .review-zoom-control > .review-zoom-value {
  color: var(--text) !important;
}

/* Sheet Manager and Drawing Controls: each icon and label form one group,
   centred in its button. Each icon sits in a 16px slot, 4px from its label.
   The Drawing Controls chevron is drawn like the other icons, so its ink is
   centred on the label's capital height; open turns it to point up. Drawing
   Controls uses the same blue as Menu. */
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #pairingManagerButton#pairingManagerButton#pairingManagerButton#pairingManagerButton,
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #drawingControls > #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary {
  justify-content: center !important;
  gap: 4px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #drawingControls > #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary > .drawing-controls-chevron {
  position: static !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  border: 0 !important;
  background: 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='3.3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center / 16px 16px no-repeat !important;
  transform: none !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #drawingControls > #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary > .drawing-controls-chevron::before,
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #drawingControls > #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary > .drawing-controls-chevron::after {
  content: none !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #drawingControls[open] > #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary > .drawing-controls-chevron {
  transform: rotate(180deg) !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #drawingControls > #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary {
  background: linear-gradient(var(--accent-button-highlight), var(--accent-button) 48%, var(--accent-button-press)) !important;
  border-color: rgb(var(--accent-rgb) / .82) !important;
  color: var(--on-colour-button) !important;
  box-shadow: 0 10px 24px rgb(var(--shadow-rgb) / .28), inset 0 1px 0 rgb(var(--gloss-rgb) / .18) !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #drawingControls > #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary:hover {
  background: linear-gradient(var(--accent-button-hover), var(--accent-button-hover)) !important;
  color: var(--on-colour-button) !important;
}

/* Optical centring: the icons' ink starts inside their slots, so each group
   shifts left until the visible space either side is equal. */
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #pairingManagerButton#pairingManagerButton#pairingManagerButton#pairingManagerButton {
  padding-right: 1.4px !important;
}
html[data-layout-v2="float"] #reviewScreen#reviewScreen .review-actions > #drawingControls > #drawingControlsSummary#drawingControlsSummary#drawingControlsSummary {
  padding-right: 2.3px !important;
}

/* Review panel top (Jon 2026-10-02, prototype Q3): a heading on the left, a
   small "Review" line over the sheet position, and a labelled purple Queue
   button with its count on the right. Review Again leaves the panel; step 1
   in the top bar does that job once a load has finished. */
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  grid-template-columns: none !important;
  padding: 4px 0 12px !important;
  margin: 0 !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > #reviewAgainButton {
  display: none !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > .study-panel-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  order: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  gap: 6px !important;
  min-width: 0 !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > .study-panel-heading > small {
  color: var(--text-muted) !important;
  font: 500 10.5px/1 var(--font-mono, "IBM Plex Mono", monospace) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > .study-panel-heading > strong {
  color: var(--text) !important;
  font: 700 15px/1 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > #appQueueButton {
  flex: 0 0 auto !important;
  order: 1 !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 6px 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgb(var(--complete-border-rgb) / .38) !important;
  background: rgb(var(--complete-button-rgb) / .18) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > #appQueueButton:is(:hover, :focus-visible) {
  border-color: rgb(var(--complete-border-rgb) / .6) !important;
  background: rgb(var(--complete-button-rgb) / .26) !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > #appQueueButton > svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > #appQueueButton > span {
  font: 700 12px/1 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > #appQueueButton .app-queue-count {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 22px !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--complete-button) !important;
  color: var(--on-colour-button) !important;
  font: 700 11px/1 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
}

/* Step 1 after a load: "Review again" with a refresh icon in its circle. */
#workflowPanel .step-list .step[data-step="load"][data-review-again="true"] .step-index .circle-glyph {
  font-size: 0 !important;
  color: transparent !important;
}
#workflowPanel .step-list .step[data-step="load"][data-review-again="true"] .step-index {
  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='3' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-2.64-6.36'/><path d='M21 3v6h-6'/></svg>") !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  background-repeat: no-repeat !important;
}

/* Heading flipped (Jon 2026-10-02): the sheet position is the small line,
   "Review" the bold one. */
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > .study-panel-heading > small {
  white-space: nowrap !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > .study-panel-heading > strong {
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* Summary points read more easily: semi-bold, near-white text. */
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #summaryText .summary-point-list li {
  color: var(--text) !important;
  font-weight: 600 !important;
}

/* Step 1 menu: Review again or Load new drawings. */
#loadStepMenu.load-step-menu {
  position: fixed;
  z-index: 10000;
  display: grid;
  gap: 4px;
  width: 260px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgb(var(--overlay-rgb) / .12);
  background: rgb(var(--surface-rgb) / .96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgb(var(--shadow-rgb) / .45);
}
#loadStepMenu .load-step-menu-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px 8px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
#loadStepMenu .load-step-menu-item:is(:hover, :focus-visible) {
  background: rgb(var(--accent-wash-rgb) / .16);
  outline: none;
}
#loadStepMenu .load-step-menu-item:disabled {
  opacity: .5;
  cursor: default;
}
#loadStepMenu .load-step-menu-item svg {
  width: 32px;
  height: 32px;
  padding: 8px;
  border-radius: 50%;
  background: var(--complete-button-highlight);
  color: var(--on-colour-button);
  fill: none;
  stroke: var(--on-colour-button);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-sizing: border-box;
}
#loadStepMenu .load-step-menu-item:last-child svg {
  background: var(--accent-button);
  color: var(--on-colour-button);
}
#loadStepMenu .load-step-menu-item strong {
  display: block;
  font: 700 12px/1.2 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
}
#loadStepMenu .load-step-menu-item small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font: 500 12px/1.2 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif);
}

/* Heading: bold "Review" on top, the sheet position under it. */
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > .study-panel-heading {
  flex-direction: column-reverse !important;
}

/* Tabs, as in the chosen prototype: plain labels on one hairline, the
   active tab white with a short blue underline. */
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > .findings-tabbar {
  gap: 0 !important;
  padding: 0 !important;
  margin: 4px 0 6px !important;
  border-bottom: 1px solid rgb(var(--overlay-rgb) / .1) !important;
  background: none !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > .findings-tabbar > .findings-tab:not([hidden]) {
  position: relative !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  font: 700 12px/1 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > .findings-tabbar > .findings-tab:not([hidden]):hover {
  color: var(--text) !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > .findings-tabbar > .findings-tab.is-active:not([hidden]) {
  color: var(--text-strong) !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > .findings-tabbar > .findings-tab.is-active:not([hidden])::after {
  content: "" !important;
  position: absolute !important;
  left: 16% !important;
  right: 16% !important;
  bottom: -1px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--accent-button) !important;
  color: var(--on-colour-button) !important;
}

/* Full-screen button stays in the pane corner when the panel opens. */
@media (min-width: 1181px) {
  html[data-layout-v2="float"][data-has~="review-panel-open"]:not(#has-pad) #reviewScreen#reviewScreen .drawing-pane:nth-of-type(2) > .expand-sheet-button {
    right: 8px !important;
  }
}

/* Queue button: solid purple, like the other purple buttons. The icon, the
   label and the count each sit in a 22px-tall box centred on the button's
   middle line. */
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > #appQueueButton#appQueueButton {
  gap: 8px !important;
  padding: 0 7px 0 12px !important;
  border: 1px solid rgb(var(--complete-border-rgb) / .82) !important;
  background: linear-gradient(var(--complete-button-highlight), var(--complete-button) 48%, var(--complete-button-press)) !important;
  box-shadow: 0 6px 16px rgb(var(--shadow-rgb) / .24), inset 0 1px 0 rgb(var(--gloss-rgb) / .18) !important;
  color: var(--on-colour-button) !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > #appQueueButton#appQueueButton:is(:hover, :focus-visible) {
  background: linear-gradient(var(--complete-button-hover), var(--complete-button-hover)) !important;
  color: var(--on-colour-button) !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > #appQueueButton#appQueueButton > svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  margin: 3px 0 !important;
  stroke: var(--text-strong) !important;
  stroke-width: 2.4 !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > #appQueueButton#appQueueButton > span {
  display: inline-flex !important;
  align-items: center !important;
  height: 22px !important;
  line-height: 1 !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > #appQueueButton#appQueueButton .app-queue-count {
  height: 22px !important;
  line-height: 1 !important;
  background: rgb(var(--overlay-rgb) / .2) !important;
  color: var(--text-strong) !important;
}

/* Panel top rhythm (16px steps): 16px from the panel edge to the heading,
   16px from the heading row to the tabs, 16px from the tabs to the first
   line of text, and 6px from "Review" down to its sheet caption, all
   measured on the visible letters. The Queue button centres on the heading. */
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools {
  align-items: center !important;
  padding: 0 0 4.1px !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > .study-panel-heading {
  gap: 2.2px !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > .study-panel-heading > strong {
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: .05em !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > #studyTopTools#studyTopTools > .study-panel-heading > small {
  line-height: 1 !important;
  letter-spacing: .14em !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > .findings-tabbar {
  margin: 0 !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #reviewPanelScroll#reviewPanelScroll {
  padding-top: 2.5px !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #reviewPanelScroll#reviewPanelScroll #aiSummaryPanel #summaryText {
  padding-top: 0 !important;
}

/* Panel tab glow: a soft blue halo that fades out from the tab, plus a
   faint close glow at its edge. Hover brightens it. */
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle::before {
  box-shadow:
    0 0 0 1px rgb(var(--accent-rgb) / .35),
    -2px 0 8px rgb(var(--accent-rgb) / .45),
    -8px 0 28px rgb(var(--accent-rgb) / .32),
    -16px 0 48px rgb(var(--accent-rgb) / .18) !important;
  transition: box-shadow 160ms ease, background 140ms ease, border-color 140ms ease !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle:is(:hover, :focus-visible)::before {
  box-shadow:
    0 0 0 1px rgb(var(--accent-rgb) / .5),
    -2px 0 10px rgb(var(--accent-rgb) / .6),
    -10px 0 34px rgb(var(--accent-rgb) / .42),
    -20px 0 60px rgb(var(--accent-rgb) / .24) !important;
}

/* Step circles match the 36px top-bar buttons, so every item in the bar
   shares one height and one centre line. From 1025px up only: phone and
   tablet circles are sized in features/review-responsive.css. */
@media (min-width: 1025px) {
  #workflowPanel .step-list .step .step-index {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    flex: 0 0 36px !important;
  }
}

/* More room between each step circle and its label. */
@media (min-width: 1181px) {
  #workflowPanel .step-list .step {
    column-gap: 16px !important;
  }
}

/* Step names larger (14px), closer to the 36px circles. Narrower top bars
   scale them down so the steps never reach the brand or Undo. */
@media (min-width: 1181px) {
  #workflowPanel .step-list .step .step-copy > strong,
  #workflowPanel .step-list .step .step-copy > strong > span {
    font-size: clamp(12px, calc(0.6vw + 4.6px), 14px) !important;
    line-height: 1 !important;
  }
  /* The 36px circle gets a 36px column, so the 16px gap is the visible gap. */
  #workflowPanel .step-list .step {
    grid-template-columns: 36px auto !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  #workflowPanel .step-list {
    gap: 20px !important; /* 28px between steps with the 4px padding */
  }
}

/* Undo and Redo are icon-only 36px buttons (their tooltip and accessible
   name stay), which leaves room for the larger step names. From 1025px up
   only: below that all header buttons are 44px (features/review-responsive.css). */
@media (min-width: 1025px) {
  #workflowPanel #workflowActions :is(#undoButton, #redoButton) {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
  }
}
#workflowPanel #workflowActions :is(#undoButton, #redoButton) > span {
  display: none !important;
}

/* Step circles, flat: every circle is exactly 36px with nothing drawn
   outside it. Done is solid purple, current is solid blue, upcoming is a
   1.5px ring. No gloss, glow or halo. */
#workflowPanel .step-list .step .step-index,
#workflowPanel .step-list .step:not(.is-complete):not(.is-active) .step-index {
  box-sizing: border-box !important;
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1.5px rgb(var(--accent-strong-rgb) / .32) !important;
  color: rgb(var(--accent-strong-rgb) / .85) !important;
  font-weight: 700 !important;
}
#workflowPanel .step-list .step.is-complete .step-index {
  background-color: var(--complete-button-highlight) !important;
  box-shadow: none !important;
  color: var(--on-colour-button) !important;
}
#workflowPanel .step-list .step.is-active .step-index {
  background-color: var(--accent-button) !important;
  box-shadow: none !important;
  color: var(--on-colour-button) !important;
}
#workflowPanel .step-list .step:not(.is-complete):not(.is-active):hover .step-index {
  box-shadow: inset 0 0 0 1.5px rgb(var(--accent-strong-rgb) / .6) !important;
  color: var(--text) !important;
}

/* Upcoming step circles: a flat slate fill with a grey number instead of an
   outline, so all four circles are solid shapes of the same size. */
#workflowPanel .step-list .step .step-index,
#workflowPanel .step-list .step:not(.is-complete):not(.is-active) .step-index {
  background-color: var(--surface-muted) !important;
  box-shadow: none !important;
  color: var(--muted-action) !important;
}
#workflowPanel .step-list .step:not(.is-complete):not(.is-active):hover .step-index {
  background-color: var(--surface-muted) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
#workflowPanel .step-list .step.is-complete .step-index {
  background-color: var(--complete-button-highlight) !important;
  color: var(--on-colour-button) !important;
}
#workflowPanel .step-list .step.is-active .step-index {
  background-color: var(--accent-button) !important;
  color: var(--on-colour-button) !important;
}

/* Panel tab glow, tighter: a crisp edge plus a short halo that fades out
   within about 12px of the tab. */
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle::before {
  box-shadow:
    0 0 0 1px rgb(var(--accent-rgb) / .45),
    -1px 0 4px rgb(var(--accent-rgb) / .5),
    -3px 0 12px rgb(var(--accent-rgb) / .28) !important;
}
html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #layoutV2Stage-reviewScreen > button.panel-visibility-toggle:is(:hover, :focus-visible)::before {
  box-shadow:
    0 0 0 1px rgb(var(--accent-border-rgb) / .6),
    -1px 0 5px rgb(var(--accent-rgb) / .65),
    -4px 0 14px rgb(var(--accent-rgb) / .38) !important;
}

/* Review screen sits a touch lower: Sheet Manager now starts 48px under the
   top bar (was 16px), so the title, buttons and PDF panels move down 32px
   together and the page no longer feels top-heavy. */
@media (min-width: 1181px) {
  html[data-layout-v2="float"][data-has~="review-screen"]:not(#has-pad) #appShell > main.workspace > .review-topbar-viewport {
    margin-top: 12px !important;
  }
}

/* ===== Marching-ants evidence boxes (owner overwrite 2026-10-02, Jon) =====
   ai-ocr-rules/AI_APP_RULES.md. One geometry for every .diff box: H, W, D,
   material, REV, issue and note. --diff-x/-y/-w/-h is the tight evidence (no
   page-mm pad); this block owns the only gap.
   1. Tight fit: applyMarchingAntsClearanceInDom() trims a loose OCR box to
      the glyph ink inside it (--ants-ink-*). It never grows the box.
   2. Equal gap: 4 screen px from the evidence to the inside of the dashed
      line, at every zoom. Review panes zoom by size (1 CSS px = 1 screen px);
      full screen zooms by transform, so --ants-px divides by its zoom.
   3. Nearby print: applyMarchingAntsClearanceInDom() sets --ants-stop-* in
      page percent. That side stops at the print, but keeps a 1 px gap.
   4. Minimum 22 x 18 screen px, centred on the evidence.
   5. One 5 px corner radius on every box.
   6. Centred: both sides of an axis use the same reach, so the nearer
      print stop limits both. */
:is(.sheet-viewport, .fullscreen-frame) .overlay-layer .diff {
  --ants-px: calc(1px / var(--fullscreen-zoom, 1));
  /* The dashed line is 2.2 screen px at every zoom too. Full screen resets
     --review-overlay-inverse to 1 inside .sheet-viewport, so --diff-line
     alone would thicken with its zoom. */
  --ants-line: calc(2.2 * var(--ants-px));
  --ants-reach: calc(4 * var(--ants-px) + var(--ants-line));
  --ants-reach-min: calc(var(--ants-px) + var(--ants-line));
  --ants-half-min-w: calc(11 * var(--ants-px));
  --ants-half-min-h: calc(9 * var(--ants-px));
  /* Evidence: the glyph ink inside the data box when the raster is readable
     (--ants-ink-*), else the data box itself. */
  --ants-cx: var(--ants-ink-x, var(--diff-x));
  --ants-cy: var(--ants-ink-y, var(--diff-y));
  --ants-ev-left: calc(var(--ants-cx) - var(--ants-ink-w, var(--diff-w)) / 2);
  --ants-ev-right: calc(var(--ants-cx) + var(--ants-ink-w, var(--diff-w)) / 2);
  --ants-ev-top: calc(var(--ants-cy) - var(--ants-ink-h, var(--diff-h)) / 2);
  --ants-ev-bottom: calc(var(--ants-cy) + var(--ants-ink-h, var(--diff-h)) / 2);
  /* Rule 6: one reach per axis. The nearer print stop limits both sides
     together, so a box shrinks around its evidence instead of sliding off
     it (the old mm pad was centred the same way). */
  --ants-ev-hw: calc(var(--ants-ink-w, var(--diff-w)) / 2);
  --ants-ev-hh: calc(var(--ants-ink-h, var(--diff-h)) / 2);
  --ants-half-w: max(
    calc(var(--ants-ev-hw) + var(--ants-reach-min)),
    min(
      max(calc(var(--ants-ev-hw) + var(--ants-reach)), var(--ants-half-min-w)),
      calc(var(--ants-cx) - var(--ants-stop-left, -100%)),
      calc(var(--ants-stop-right, 200%) - var(--ants-cx))
    )
  );
  --ants-half-h: max(
    calc(var(--ants-ev-hh) + var(--ants-reach-min)),
    min(
      max(calc(var(--ants-ev-hh) + var(--ants-reach)), var(--ants-half-min-h)),
      calc(var(--ants-cy) - var(--ants-stop-top, -100%)),
      calc(var(--ants-stop-bottom, 200%) - var(--ants-cy))
    )
  );
  left: calc(var(--ants-cx) - var(--ants-half-w)) !important;
  top: calc(var(--ants-cy) - var(--ants-half-h)) !important;
  width: calc(2 * var(--ants-half-w)) !important;
  height: calc(2 * var(--ants-half-h)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  translate: none !important;
  border-width: 0 !important;
}
/* The dashed line's outer edge is the element edge, so the element rect is
   the visible box that badges, ticks and overlap checks measure. */
:is(.sheet-viewport, .fullscreen-frame) .overlay-layer .diff > .diff-ants {
  inset: calc(var(--ants-line) / 2) !important;
  width: calc(100% - var(--ants-line)) !important;
  height: calc(100% - var(--ants-line)) !important;
}
:is(.sheet-viewport, .fullscreen-frame) .overlay-layer .diff .diff-ants rect {
  stroke-width: var(--ants-line) !important;
  rx: calc(5 * var(--ants-px)) !important;
  ry: calc(5 * var(--ants-px)) !important;
}
@media (max-width: 640px) {
  :is(.sheet-viewport, .fullscreen-frame) .overlay-layer .diff {
    --ants-line: calc(1.75 * var(--ants-px));
  }
}
/* ===== end marching-ants evidence boxes ===== */

/* ===== Review mark size: green ticks and red crosses (tick placement agent, 2026-10-02) =====
   Jon: "reduce the sizes, so they can sit closer", then (approved) red
   crosses follow exactly the same system. Same tick and cross artwork and
   colours; only the box is smaller so a mark fits beside small dimension
   text. Screen-space rem sizes stay constant at every PDF zoom. The solver
   in features/review-overlays.js (settleReviewMarksInDom) steps down to the
   smaller sizes only when the larger one has no clear spot beside its item.
   0.625rem (10px) is the smallest readable mark. The :not() guards keep each
   rule above the 1.6rem marker sizes in styles.css. */
.match-mark:not(.is-tick-size-s):not(.is-tick-size-xs) {
  width: 0.875rem;
  height: 0.875rem;
}

.match-mark.is-tick-size-s:not(.is-tick-size-xs) {
  width: 0.75rem;
  height: 0.75rem;
}

.match-mark.is-tick-size-xs:not(.is-tick-size-s) {
  width: 0.625rem;
  height: 0.625rem;
}

/* PS-037: a mark that opens its finding (role="button") keeps its small drawn
   size but gets a transparent 24px hit area, the WCAG 2.2 minimum target. */
.match-mark[role="button"]::before {
  content: "";
  position: absolute;
  inset: calc(50% - 12px);
}
/* ===== end review mark size ===== */

/* Queue count as a corner badge (Jon 2026-10-02, option D). The white badge
   on the button's top-right corner shows how many queued drawings are still
   to review. It becomes a green tick when every drawing is done, and it is
   hidden when nothing is queued. The repeated id outranks every earlier
   placement rule (panel, topbar, load screen, phone). */
html #appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton {
  position: relative !important;
  overflow: visible !important;
  padding: 0 12px !important;
}
html #appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton .app-queue-count {
  position: absolute !important;
  top: -7px !important;
  right: -7px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: grid !important;
  place-items: center !important;
  min-width: 20px !important;
  width: auto !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 6px !important;
  border: 2px solid var(--surface) !important;
  border-radius: 999px !important;
  background: var(--gloss) !important;
  box-shadow: 0 2px 6px rgb(var(--shadow-rgb) / .3) !important;
  color: var(--ink-dark) !important;
  font: 800 11px/1 "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums !important;
  pointer-events: none !important;
}
html #appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton .app-queue-count[data-queue-state="empty"] {
  display: none !important;
}
html #appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton#appQueueButton .app-queue-count[data-queue-state="done"] {
  width: 20px !important;
  padding: 0 !important;
  background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px 11px no-repeat !important;
  color: var(--success-ink) !important;
}

/* Summary / Drawing Details as a segmented switch (Jon 2026-10-02, option A):
   a recessed track with a blue thumb that slides to the active tab. The
   thumb is the track's ::before, so it can glide between the two tabs. With
   a third tab showing, the active tab carries the blue itself instead. */
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > .findings-tabbar.findings-tabbar {
  position: relative !important;
  height: 40px !important;
  margin: 3.9px 0 0 !important;
  padding: 4px !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgb(var(--well-rgb) / .35) !important;
  box-shadow: inset 0 1px 2px rgb(var(--shade-rgb) / .5), inset 0 0 0 1px rgb(var(--gloss-rgb) / .05) !important;
  isolation: isolate !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > .findings-tabbar.findings-tabbar:not(:has(> :is(#activeFindingsTab, #revisionReviewTab):not([hidden])))::before {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  left: 4px !important;
  width: calc(50% - 4px) !important;
  z-index: 0 !important;
  border-radius: 9px !important;
  background: linear-gradient(var(--accent-button), var(--accent-button)) !important;
  color: var(--on-colour-button) !important;
  box-shadow: 0 4px 12px rgb(var(--accent-rgb) / .35), inset 0 1px 0 rgb(var(--gloss-rgb) / .2) !important;
  transition: transform .25s cubic-bezier(.3, .7, .2, 1) !important;
  pointer-events: none !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > .findings-tabbar.findings-tabbar:has(> #drawingDetailsTab.is-active)::before {
  transform: translateX(100%) !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > .findings-tabbar.findings-tabbar > .findings-tab.findings-tab:not([hidden]) {
  z-index: 1 !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: 9px !important;
  background: transparent !important;
  transition: color .15s ease !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > .findings-tabbar.findings-tabbar > .findings-tab.findings-tab:not([hidden])::after {
  content: none !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > .findings-tabbar.findings-tabbar > .findings-tab.findings-tab:not([hidden]):focus-visible {
  outline: 2px solid var(--accent-strong) !important;
  outline-offset: -2px !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > .findings-tabbar.findings-tabbar:has(> :is(#activeFindingsTab, #revisionReviewTab):not([hidden])) > .findings-tab.is-active:not([hidden]) {
  background: linear-gradient(var(--accent-button), var(--accent-button)) !important;
  color: var(--on-colour-button) !important;
  box-shadow: 0 4px 12px rgb(var(--accent-rgb) / .35), inset 0 1px 0 rgb(var(--gloss-rgb) / .2) !important;
}
@media (prefers-reduced-motion: reduce) {
  html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel > .findings-tabbar.findings-tabbar::before {
    transition: none !important;
  }
}

/* Drawing Details cards: tidy-up only (Jon 2026-10-02: "exactly like my now
   version, just clean it up"). Same colours, layout and content. Whole-pixel
   borders, one colour for both chevron arms, 6px between the name, values and
   note lines, label and value on one baseline, and the
   open card's fields and buttons aligned to the name column at a calmer 34-36px
   height, Comment and Pick on drawing sharing a row. */
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #drawingDetailsPanel#drawingDetailsPanel .oa-material-card {
  border-width: 1px !important;
  padding: 12px !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #drawingDetailsPanel#drawingDetailsPanel .oa-material-card-head {
  row-gap: 6px !important;
  column-gap: 8px !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #drawingDetailsPanel#drawingDetailsPanel .manual-dimension-chevron {
  border-color: var(--muted-action) !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #drawingDetailsPanel#drawingDetailsPanel .oa-card-glance-side {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  font: 600 12.5px/1.2 "IBM Plex Mono", monospace !important;
  color: var(--text-strong) !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #drawingDetailsPanel#drawingDetailsPanel .oa-card-glance-label {
  font: 700 10.5px/1 "IBM Plex Sans", sans-serif !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #drawingDetailsPanel#drawingDetailsPanel :is(.oa-ai-suggested-note, .oa-material-counterpart-hint) {
  font: 500 11px/1.5 "IBM Plex Sans", sans-serif !important;
  letter-spacing: .01em !important;
  color: color-mix(in srgb, var(--text) 87%, var(--surface-muted)) !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #drawingDetailsPanel#drawingDetailsPanel :is(.oa-material-card-body, .oa-material-actions) {
  width: auto !important;
  max-width: none !important;
  margin-left: 22px !important;
  margin-top: 10px !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #drawingDetailsPanel#drawingDetailsPanel .oa-material-value {
  height: 36px !important;
  min-height: 36px !important;
  border-width: 1px !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #drawingDetailsPanel#drawingDetailsPanel .oa-material-value input {
  height: 34px !important;
  min-height: 34px !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #drawingDetailsPanel#drawingDetailsPanel .oa-material-actions > button {
  height: 34px !important;
  min-height: 34px !important;
  border-width: 1px !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #drawingDetailsPanel#drawingDetailsPanel .oa-material-actions > button[data-requirement-tile-action="remove"] {
  height: auto !important;
  min-height: 44px !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #drawingDetailsPanel#drawingDetailsPanel .oa-material-actions > button[class*="button-blue"] {
  grid-column: auto !important;
}

/* Drawing Details cards a step lighter (Jon 2026-10-02: "I just dont love how
   dark these are"). Only the grey changes: the card sits lighter than the
   panel instead of darker, keeping its faint status tint and amber/green
   outline. The open card's fields and neutral buttons lift with it so they
   don't read as dark holes. */
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #drawingDetailsPanel#drawingDetailsPanel .oa-material-card {
  background-color: var(--surface-card) !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #drawingDetailsPanel#drawingDetailsPanel .oa-material-value {
  background-color: var(--surface-card) !important;
  border-color: rgb(var(--overlay-rgb) / .1) !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #reviewPanel#reviewPanel #drawingDetailsPanel#drawingDetailsPanel .oa-material-actions > button:not(.is-success):not(.is-danger):not([class*="button-blue"]) {
  background-color: var(--surface-card) !important;
  border-color: rgb(var(--overlay-rgb) / .12) !important;
}

/* ===== Stamp screen uses the Review screen's assets (Jon 2026-10-02) =====
   "fix this page, so it's consistent with the assets that are similar to the
   review page". Every value below is measured from the live Review screen:
   the page heading and frame, a drawing pane (header, buttons, zoom pill,
   full-screen button), the floating panel (heading, segmented tabs, scroll
   body, footer button) and the panel's toggles, cards and buttons.
   Phones keep their own Stamp layout. */

/* -- Page: Review's heading type and full-width frame. The heading starts at
   the shell's own gap under the nav bar, not Review's taller heading block
   (Jon 2026-10-02: "move everything up and shorten this space"). The page
   scrolls when the full-width drawing is taller than the space under the
   heading ("fine if the heading moves up, so it all fits"). -- */
@media (min-width: 1181px) {
  html[data-layout-v2="float"][data-has~="stamp-screen"]:not(#has-pad) {
    --floating-panel-right: calc(var(--app-frame-inset, 19px) + env(safe-area-inset-right, 0px)) !important;
  }
  html[data-layout-v2="float"][data-has~="stamp-screen"]:not(#has-pad) #appShell > main.workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    row-gap: 16px !important; /* the title ends 16px above the pane, as on Review */
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 16px !important;
    overflow: visible !important;
  }
  html[data-layout-v2="float"][data-has~="stamp-screen"]:not(#has-pad) #appShell > main.workspace > .review-topbar-viewport {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    overflow: visible !important;
  }
  html[data-layout-v2="float"][data-has~="stamp-screen"]:not(#has-pad) .topbar {
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html[data-layout-v2="float"][data-has~="stamp-screen"]:not(#has-pad) .topbar > .topbar-main {
    container-type: inline-size !important;
  }
  html[data-layout-v2="float"][data-has~="stamp-screen"]:not(#has-pad) .topbar .topbar-main > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 17.4px !important;
    height: auto !important;
    position: relative !important;
    top: 0 !important;
  }
  html[data-layout-v2="float"][data-has~="stamp-screen"]:not(#has-pad) #screenLabel#screenLabel.screen-label {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: .6 !important;
  }
  html[data-layout-v2="float"][data-has~="stamp-screen"]:not(#has-pad) #screenTitle#screenTitle {
    display: block !important;
    margin: 0 !important;
    font-size: min(62px, calc((100cqi - 16px) / 34)) !important;
    line-height: .74 !important;
  }
  html[data-layout-v2="float"] #stampScreen#stampScreen.is-active,
  html[data-layout-v2="float"] #stampScreen#stampScreen .stamp-layout {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
}

@media (min-width: 761px) {
  /* -- Stamp pane: a Review drawing pane -- */
  html #stampScreen#stampScreen .stamp-canvas {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    background: var(--surface) !important;
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    box-shadow: none !important;
  }
  html #stampScreen#stampScreen .stamp-canvas > .stamp-pane-header {
    position: relative !important;
    z-index: 100 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: .86rem 2rem !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    height: 4.28rem !important;
    min-height: 4.28rem !important;
    max-height: 4.28rem !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    border-radius: 15px 15px 0 0 !important;
    background: rgb(var(--complete-wash-rgb) / .14) !important;
    border-bottom: 1px solid rgb(var(--complete-rgb) / .32) !important;
  }
  html #stampScreen#stampScreen .stamp-pane-header[data-stamp-side="raeco"] {
    background: rgb(var(--accent-wash-rgb) / .14) !important;
    border-bottom-color: rgb(var(--accent-rgb) / .32) !important;
  }
  html #stampScreen#stampScreen .stamp-pane-header > #stampPaneLabel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--complete-strong) !important;
    font: 700 12px/1.2 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }
  html #stampScreen#stampScreen .stamp-pane-header[data-stamp-side="raeco"] > #stampPaneLabel {
    color: var(--accent-strong) !important;
  }
  html #stampScreen#stampScreen .stamp-pane-header > #stampPaneLabel .pane-ref-soft {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
  }
  html #stampScreen#stampScreen .stamp-pane-header > #stampName {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--text-muted) !important;
    font: 700 13.12px/16px var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }
  html #stampScreen#stampScreen .stamp-pane-header > .stamp-header-controls {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  /* Page arrows: Review's solid header buttons in the pane colour, white
     2.35px icon; a disabled arrow keeps its fill and dims only the icon. */
  html #stampScreen#stampScreen .stamp-header-controls > .sheet-page-button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    opacity: 1 !important;
    border-radius: 8px !important;
    background: linear-gradient(var(--complete-button-highlight), var(--complete-button) 48%, var(--complete-button-press)) !important;
    color: var(--on-colour-button) !important;
    border: 1px solid rgb(var(--complete-border-rgb) / .82) !important;
    box-shadow: 0 6px 16px rgb(var(--shadow-rgb) / .24), inset 0 1px 0 rgb(var(--gloss-rgb) / .18) !important;
  }
  html #stampScreen#stampScreen .stamp-pane-header[data-stamp-side="raeco"] > .stamp-header-controls > .sheet-page-button {
    background: linear-gradient(var(--accent-button-highlight), var(--accent-button) 48%, var(--accent-button-press)) !important;
    color: var(--on-colour-button) !important;
    border-color: rgb(var(--accent-rgb) / .82) !important;
  }
  html #stampScreen#stampScreen .stamp-header-controls > .sheet-page-button svg,
  html #stampScreen#stampScreen .stamp-header-controls > .sheet-page-button svg path {
    stroke: var(--text-strong) !important;
    stroke-width: 2.35px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
  }
  html #stampScreen#stampScreen .stamp-header-controls > .sheet-page-button:disabled svg {
    opacity: .5 !important;
  }
  html #stampScreen#stampScreen .stamp-header-controls > .sheet-page-button:disabled {
    cursor: default !important;
  }
  /* Lock stamp: an on/off header button, slate when off and the pane purple
     when on, like the Review toggles. */
  html #stampScreen#stampScreen .stamp-header-controls > .stamp-header-lock {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 8px !important;
    background: linear-gradient(rgb(var(--overlay-rgb) / .075), rgb(var(--overlay-rgb) / .016)), var(--surface-card) !important;
    border: 1px solid rgb(var(--overlay-rgb) / .12) !important;
    box-shadow: 0 6px 16px rgb(var(--shadow-rgb) / .24), inset 0 1px 0 rgb(var(--gloss-rgb) / .14) !important;
  }
  html #stampScreen#stampScreen .stamp-header-controls > .stamp-header-lock input {
    width: 15px !important;
    height: 15px !important;
    background: var(--gloss) !important;
  }
  html #stampScreen#stampScreen .stamp-header-controls > .stamp-header-lock:is(.is-checked, :has(input:checked)) {
    background: linear-gradient(var(--complete-button-highlight), var(--complete-button) 48%, var(--complete-button-press)) !important;
    color: var(--on-colour-button) !important;
    border-color: rgb(var(--complete-border-rgb) / .82) !important;
  }
  html #stampScreen#stampScreen .stamp-header-controls > .stamp-header-lock:has(input:focus-visible) {
    outline: 2px solid var(--accent-strong) !important;
    outline-offset: 2px !important;
  }
  html #stampScreen#stampScreen .stamp-header-controls > .stamp-header-lock:has(input:disabled) {
    cursor: default !important;
  }
  html #stampScreen#stampScreen .stamp-header-controls > .stamp-header-lock:has(input:disabled) input {
    opacity: .5 !important;
  }

  /* Sheet: Review's dark sheet well under the header. */
  html #stampScreen#stampScreen .stamp-canvas > #stampSheet.stamp-frame {
    grid-row: 2 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: var(--bg-strong) !important;
  }

  /* Zoom pill and full-screen button: Review's corner controls in the pane
     colour at 80%, white icons, 8px from the pane corners. */
  html #stampScreen#stampScreen .stamp-canvas > .stamp-zoom-floating {
    left: 8px !important;
    bottom: 8px !important;
    opacity: 1 !important;
    background: rgb(var(--surface-rgb) / .78) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border-color: rgb(var(--overlay-rgb) / .16) !important;
  }
  html #stampScreen#stampScreen .stamp-canvas > .stamp-zoom-floating > .review-zoom-button,
  html #stampScreen#stampScreen .stamp-canvas > #stampExpandButton {
    opacity: 1 !important;
    color: var(--on-colour-button) !important;
    font-size: 0 !important;
    border: 1px solid rgb(var(--complete-border-rgb) / .6) !important;
    box-shadow: 0 4px 12px rgb(var(--shadow-rgb) / .24), inset 0 1px 0 rgb(var(--gloss-rgb) / .18) !important;
    background: linear-gradient(color-mix(in srgb, var(--complete-button-highlight) 80%, transparent), rgb(var(--complete-button-rgb) / .8) 48%, rgb(var(--complete-active-rgb) / .8)) !important;
  }
  /* The + and - are cut from the button's label ink (--on-complete), like Review's. */
  html #stampScreen#stampScreen .stamp-canvas > .stamp-zoom-floating > #stampZoomOut,
  html #stampScreen#stampScreen .stamp-canvas > .stamp-zoom-floating > #stampZoomIn {
    position: relative !important;
  }
  html #stampScreen#stampScreen .stamp-canvas > .stamp-zoom-floating > #stampZoomOut::before,
  html #stampScreen#stampScreen .stamp-canvas > .stamp-zoom-floating > #stampZoomIn::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 15px;
    height: 15px;
    margin: auto;
    background: currentColor;
    pointer-events: none;
  }
  html #stampScreen#stampScreen .stamp-canvas > .stamp-zoom-floating > #stampZoomOut::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'><path d='M6 12h12'/></svg>") center / 15px 15px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'><path d='M6 12h12'/></svg>") center / 15px 15px no-repeat;
  }
  html #stampScreen#stampScreen .stamp-canvas > .stamp-zoom-floating > #stampZoomIn::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'><path d='M6 12h12M12 6v12'/></svg>") center / 15px 15px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'><path d='M6 12h12M12 6v12'/></svg>") center / 15px 15px no-repeat;
  }
  html #stampScreen#stampScreen .stamp-canvas > .stamp-zoom-floating > #stampZoomOut:disabled::before,
  html #stampScreen#stampScreen .stamp-canvas > .stamp-zoom-floating > #stampZoomIn:disabled::before {
    opacity: .5;
  }
  html #stampScreen#stampScreen .stamp-canvas > .stamp-zoom-floating > #stampZoomReset svg,
  html #stampScreen#stampScreen .stamp-canvas > .stamp-zoom-floating > #stampZoomReset svg path {
    stroke: currentColor !important;
    stroke-width: 3.5px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
  }
  html #stampScreen#stampScreen .stamp-canvas > .stamp-zoom-floating > #stampZoomReset:disabled svg {
    opacity: .5 !important;
  }
  html #stampScreen#stampScreen .stamp-canvas > .stamp-zoom-floating > .review-zoom-value {
    color: var(--text) !important;
  }
  html #stampScreen#stampScreen .stamp-canvas > #stampExpandButton {
    right: 8px !important;
    bottom: 8px !important;
  }
  html #stampScreen#stampScreen .stamp-canvas > #stampExpandButton svg,
  html #stampScreen#stampScreen .stamp-canvas > #stampExpandButton svg path {
    stroke: currentColor !important;
    stroke-width: 3.3px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
  }
  /* The panel always stays open in its own column (panels.js), so the pane
     sits left of it: nothing covers the drawing, and the header buttons and
     full-screen button keep their places. */
  html[data-layout-v2="float"] #stampScreen#stampScreen .stamp-layout {
    --rr-panel-width: min(420px, calc(100vw - 60px));
    padding-right: var(--rr-panel-clearance) !important;
    box-sizing: border-box !important;
  }

  /* -- Stamp panel: the Review panel -- */
  html[data-layout-v2="float"] #layoutV2Stage-stampScreen {
    /* A little wider than Review's 360px (Jon 2026-10-03). */
    --stamp-panel-width: min(420px, calc(100vw - 60px));
    --floating-panel-width: var(--stamp-panel-width) !important;
  }
  /* The panel stays open (panels.js) and spans the stamp pane's height
     (--stamp-panel-top and --stamp-panel-height, review-panel-v3.js). */
  html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel {
    top: var(--stamp-panel-top, 24px) !important;
    right: var(--floating-panel-right, 20px) !important;
    bottom: auto !important;
    left: auto !important;
    width: var(--stamp-panel-width) !important;
    min-width: 0 !important;
    max-width: var(--stamp-panel-width) !important;
    height: var(--stamp-panel-height, calc(100dvh - 48px)) !important;
    min-height: 0 !important;
    max-height: var(--stamp-panel-height, calc(100dvh - 48px)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    overflow: clip !important;
    background: linear-gradient(rgb(var(--surface-rgb) / .74), rgb(var(--bg-rgb) / .8)) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
    backdrop-filter: blur(18px) saturate(1.3) !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;
    transform: none !important;
  }

}

/* -- Stamp pane is a Review pane (Jon 2026-10-03) --
   "these pdf panels in stamp/comments and export are meant to be exactly the
   same as the review page" and "the full width span to the panel": the pane
   takes all the width left of the panel and the sheet takes the drawing's
   own shape (--sheet-aspect, set when the image loads) across that width,
   as syncDesktopReviewSheetFrames sizes a Review sheet. No dark bars beside
   the drawing. Export mirrors this rule. */
@media (min-width: 761px) {
  html[data-layout-v2="float"] #stampScreen#stampScreen .stamp-layout {
    container-type: inline-size !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
    align-items: start !important;
    /* Clear the panel. --stamp-row-reserve (review-panel-v3.js) leaves the
       sheet its no-scroll width and gives the panel the rest; before it is
       measured, clear the 420px panel (--rr-panel-clearance is resolved at
       the root from Review's 360px panel). */
    padding-right: var(--stamp-row-reserve, calc(var(--rr-panel-width) + var(--floating-panel-right, 20px) - 8px)) !important;
  }
  html #stampScreen#stampScreen .stamp-canvas {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    justify-self: stretch !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  /* A long file name ellipsises; it does not widen the pane. */
  html #stampScreen#stampScreen .stamp-canvas > .stamp-pane-header {
    contain: inline-size !important;
  }
  html #stampScreen#stampScreen .stamp-canvas > #stampSheet.stamp-frame {
    --stamp-sheet-max-height: var(--stamp-fit-height, calc(var(--app-visible-height, 100dvh) - 32px - 4.28rem - 2px));
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: var(--sheet-aspect, 1.4142) !important;
  }
  /* The shell's top margin collapsed through <body>, pushing the
     window-high body 19px down, so the page scrolled 20px however small the
     sheet was. A flow-root body keeps that margin inside it. */
  html[data-has~="stamp-screen"]:not(#has-pad) > body {
    display: flow-root !important;
  }
  /* Jon 2026-10-03: "at its maximum size before the page needs a scroll",
     with "the bottom part ... its normal consistent spacing". The shell's
     4rem bottom-action reserve is empty here (Export now sits in the panel),
     so drop it as Review does (styles.css "NON-PHONE REVIEW VISIBLE-HEIGHT
     CONTRACT"): under the sheet come only the footer and the frame inset,
     and the fit height (review-panel-v3.js) gives the sheet the rest. */
  #appShell[data-has~="stamp-screen"]:not(#has-pad) {
    padding-bottom: 0 !important;
  }
  /* Jon 2026-10-03: "I want there to only be an 4-6 px tall spaces, so more
     of the pdf can fit." Under the drawing: 5px, the Privacy - Terms line,
     5px, the window edge. Stamp and Export only (Export by the mirror);
     Jon 2026-10-03 put Review and Load back to the normal footer. */
  html[data-has~="stamp-screen"]:not(#has-pad) #appShell#appShell {
    margin-bottom: 5px !important;
  }
  html[data-has~="stamp-screen"]:not(#has-pad) #appShell#appShell > main.workspace {
    padding-bottom: 5px !important;
  }
  html[data-has~="stamp-screen"]:not(#has-pad) #appShell#appShell > .app-legal-footer {
    min-height: 0 !important;
    height: 14px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 14px !important;
  }
  html[data-has~="stamp-screen"]:not(#has-pad) #appShell#appShell > .app-legal-footer a {
    min-height: 0 !important;
    height: 14px !important;
    line-height: 14px !important;
  }
  /* No drawing yet: the empty state keeps the full width. */
  html #stampScreen#stampScreen .stamp-canvas > #stampSheet.stamp-frame:has(.empty-sheet-state) {
    width: 100% !important;
    height: min(var(--stamp-sheet-max-height), calc(var(--app-visible-height, 100dvh) - 340px)) !important;
    aspect-ratio: auto !important;
  }
  /* The panel scrolls with the page, level with the pane: its host leaves
     the window (fixed) for the page (absolute) on this screen. */
  html[data-layout-v2="float"][data-has~="stamp-screen"]:not(#has-pad) #layoutV2FloatHost#layoutV2FloatHost {
    position: absolute !important;
  }
}

/* Panel parts apply at every width, as the Review panel's do; phones keep
   their own drawer geometry. */
@media all {
  /* Heading: bold "Stamp" over the sheet position, as the Review heading. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .stamp-panel-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 4px 0 12px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .stamp-panel-top > .stamp-panel-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .stamp-panel-top > .stamp-panel-heading > strong {
    color: var(--text) !important;
    font: 800 16px/1 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .stamp-panel-top > .stamp-panel-heading > small {
    color: var(--text-muted) !important;
    font: 500 10.5px/1 var(--font-mono, "IBM Plex Mono", monospace) !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  /* Tabs: the Review segmented switch, one tab per function (Jon 2026-10-03:
     "tab out individual functions"). More tabs than one row holds wrap onto a
     second row inside the same dark trough, so every tab stays in reach at
     any panel width. The active tab carries the Review blue thumb itself,
     because a sliding thumb cannot follow a tab onto another row. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .side-panel-tabs {
    position: relative !important;
    isolation: isolate !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgb(var(--well-rgb) / .35) !important;
    box-shadow: inset 0 1px 2px rgb(var(--shade-rgb) / .5), inset 0 0 0 1px rgb(var(--gloss-rgb) / .05) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .side-panel-tabs::before {
    content: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .side-panel-tabs > .side-panel-tab {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    /* Every tab the same width: --panel-tab-cols per row, set by
       review-panel-v3.js so the rows come out even (3 + 3, 2 + 2). A short
       last row centres. */
    flex: 0 0 calc((100% - (var(--panel-tab-cols, 3) - 1) * 4px) / var(--panel-tab-cols, 3)) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    font: 700 12px/1 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transition: color 160ms ease, background 160ms ease !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .side-panel-tabs > .side-panel-tab[hidden] {
    display: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .side-panel-tabs > .side-panel-tab:hover {
    color: var(--text) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .side-panel-tabs > .side-panel-tab.is-active {
    color: var(--on-colour-button) !important;
    background: linear-gradient(var(--accent-button), var(--accent-button)) !important;
    box-shadow: 0 2px 8px rgb(var(--accent-rgb) / .35), inset 0 1px 0 rgb(var(--gloss-rgb) / .2) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .side-panel-tabs > .side-panel-tab:focus-visible {
    outline: 2px solid var(--accent-strong) !important;
    outline-offset: 1px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .side-panel-tabs > .side-panel-tab::after {
    content: none !important;
  }

  /* Stamp tab sections: data-panel-section (review-panel-v3.js) shows one
     function at a time. The tab names it, so its own heading is not
     repeated; Size and position and Approval date open in place of their
     disclosure row. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] > .stamp-controls:not(.comment-controls) > .stamp-section > .stamp-section-label,
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] > .stamp-controls:not(.comment-controls) > section[aria-label="Approval stamp"] > details.advanced-controls > summary,
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel[data-panel-section="approval"] > .stamp-controls > section[aria-label="Approval stamp"] > details.advanced-controls,
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel[data-panel-section="size"] > .stamp-controls > section[aria-label="Approval stamp"] > :not(details.advanced-controls:not(#stampDateDisclosure)),
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel[data-panel-section="date"] > .stamp-controls > section[aria-label="Approval stamp"] > :not(#stampDateDisclosure),
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel:is([data-panel-section="approval"], [data-panel-section="size"], [data-panel-section="date"]) > .stamp-controls > section:not([aria-label="Approval stamp"]),
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel[data-panel-section="positions"] > .stamp-controls > section:not([aria-label="Saved positions"]),
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel[data-panel-section="marks"] > .stamp-controls > section:not([aria-label="Marks"]) {
    display: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] > .stamp-controls:not(.comment-controls) > section[aria-label="Approval stamp"] > details.advanced-controls {
    /* The whole panel width, as every other tab's content. */
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  /* Body: the active tab's controls scroll inside the panel, like Review's
     list, with the same right-edge scrollbar inset. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .stamp-controls {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 -10px 0 0 !important;
    padding: 2.5px 4px 8px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .mark-issue-card:not([hidden]) {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* Footer: Export now is the panel's main action, like Approve on Review. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > #commentsDoneButton {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(var(--accent-button), var(--accent-button) 55%, var(--accent-button)) !important;
    box-shadow: none !important;
    color: var(--on-colour-button) !important;
    font: 700 12px/1.2 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > #commentsDoneButton:not(:disabled):is(:hover, :focus-visible) {
    background: linear-gradient(var(--accent-button-hover), var(--accent-button-hover)) !important;
    color: var(--on-colour-button) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > #commentsDoneButton:disabled {
    opacity: .5 !important;
    cursor: default !important;
  }

}

@media (min-width: 761px) {
  /* No side tab: the Stamp and Export panels stay open beside the drawing
     (panels.js, Jon 2026-10-02 "make it so the panel doesnt hide"). */
  html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost :is(#layoutV2Stage-stampScreen, #layoutV2Stage-saveScreen) > button.panel-visibility-toggle {
    display: none !important;
  }
}

@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
  html[data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel,
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .side-panel-tabs::before {
    transition: none !important;
  }
}
html[data-reduce-motion="true"][data-layout-v2="float"] #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel,
html[data-reduce-motion="true"] #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .side-panel-tabs::before {
  transition: none !important;
}
@media (max-width: 760px) {
  html #stampScreen#stampScreen .stamp-pane-header > #stampPaneLabel {
    display: none !important;
  }
  html #stampScreen#stampScreen .stamp-pane-header > #stampName {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--text-muted) !important;
    font: 700 .72rem/1.2 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }
}
/* ===== end Stamp screen Review assets: shell ===== */

/* ===== Stamp panel contents: Review panel controls (Jon 2026-10-02) =====
   Toggles are the Drawing Controls pills (blue on, slate off), "Advanced" is
   the Review disclosure row, section labels are the Review section heading,
   buttons are the Review 34px action buttons (green, red, blue, slate) and
   hints are the Review card note. Every width, as on Review. */
@media all {
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .stamp-controls,
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel > .stamp-controls > .comment-tab-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 12px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel[data-active-panel="stamp"] > .comment-controls,
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel[data-active-panel="comments"] > .stamp-controls:not(.comment-controls) {
    display: none !important;
  }

  /* Toggles: Drawing Controls pills. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .stamp-section, .manual-mark-panel):not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .stamp-section, .manual-mark-panel, .stamp-action-row) > label.toggle:not([hidden]) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 36px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 12px 4px 8px !important;
    box-sizing: border-box !important;
    border: 1px solid color-mix(in srgb, var(--muted-action) 22%, transparent) !important;
    border-radius: 12px !important;
    background: linear-gradient(var(--surface-card), var(--surface-raised)) !important;
    box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / .06) !important;
    color: color-mix(in srgb, var(--text) 89%, var(--surface-muted)) !important;
    white-space: normal !important;
    cursor: pointer !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .stamp-section, .manual-mark-panel, .stamp-action-row) > label.toggle:has(input:checked) {
    border-color: transparent !important;
    background: linear-gradient(var(--accent-button), var(--accent-button) 55%, var(--accent-button-press)) !important;
    box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / .22), 0 8px 16px rgb(var(--accent-button-rgb) / .32) !important;
    color: var(--on-colour-button) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .stamp-section, .manual-mark-panel, .stamp-action-row) > label.toggle:has(input:focus-visible) {
    outline: 2px solid var(--accent-strong) !important;
    outline-offset: 2px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .stamp-section, .manual-mark-panel, .stamp-action-row) > label.toggle:has(input:disabled) {
    opacity: .5 !important;
    cursor: default !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .stamp-section, .manual-mark-panel, .stamp-action-row) > label.toggle > input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid rgb(var(--overlay-rgb) / .28) !important;
    border-radius: 50% !important;
    background: rgb(var(--overlay-rgb) / .04) !important;
    box-shadow: none !important;
    outline: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .stamp-section, .manual-mark-panel, .stamp-action-row) > label.toggle > input[type="checkbox"]::before,
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .stamp-section, .manual-mark-panel, .stamp-action-row) > label.toggle > input[type="checkbox"]::after {
    content: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .stamp-section, .manual-mark-panel, .stamp-action-row) > label.toggle > input[type="checkbox"]:checked {
    border-color: transparent !important;
    background: rgb(var(--overlay-rgb) / .22) 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='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 12.5l4.2 4.2L18.5 8'/></svg>") center / 15px 15px no-repeat !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .stamp-section, .manual-mark-panel, .stamp-action-row) > label.toggle > span {
    min-width: 0 !important;
    color: inherit !important;
    font: 700 10.5px/1.25 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  /* Sections (Jon 2026-10-02: "Think about what needs to be in this menu, how it
     should be reorganised"). Each tab is a stack of .stamp-section groups: a
     heading, then the controls, with a hairline above every group except the
     first in its container. The Stamp tab and the Comments tab share these
     classes, so they are styled here by class, not by tab. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-section:not(:first-child) {
    padding-top: 12px !important;
    border-top: 1px solid rgb(var(--overlay-rgb) / .08) !important;
  }
  /* Section label: the Review section heading. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-section > .panel-label, .stamp-section-label) {
    display: block !important;
    margin: 0 !important;
    padding: 6px 0 0 !important;
    color: var(--text) !important;
    font: 700 13px/1.3 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }
  /* The first heading sits straight under the tab strip, so it needs no lead-in. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-section:first-child > .stamp-section-label {
    padding-top: 0 !important;
  }

  /* Hints: the Review card note. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.manual-mark-hint, .comment-action-status, .saved-list-empty, .stamp-library-status) {
    margin: 0 !important;
    color: color-mix(in srgb, var(--text) 87%, var(--surface-muted)) !important;
    font: 500 11px/1.5 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .comment-action-status:empty {
    display: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-library-status.is-error {
    color: var(--danger-strong) !important;
  }

  /* Buttons: the Review 34px action buttons. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls :is(.primary-button, .ghost-button):not(.comment-colour-swatch):not(.comment-size-step) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    border: 1px solid rgb(var(--overlay-rgb) / .12) !important;
    border-radius: 8px !important;
    background: linear-gradient(rgb(var(--overlay-rgb) / .075), rgb(var(--overlay-rgb) / .016)), var(--surface-card) !important;
    box-shadow: 0 10px 24px rgb(var(--shadow-rgb) / .28), inset 0 1px 0 rgb(var(--gloss-rgb) / .14), inset 0 -2px 0 rgb(var(--shade-rgb) / .18) !important;
    color: var(--text-strong) !important;
    font: 700 12px/1.2 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    opacity: 1 !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls :is(.primary-button, .ghost-button):not(.comment-colour-swatch):not(.comment-size-step):not(:disabled):is(:hover, :focus-visible) {
    filter: brightness(1.12) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls :is(.primary-button, .ghost-button):not(.comment-colour-swatch):not(.comment-size-step):disabled {
    opacity: .5 !important;
    cursor: default !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls :is(.primary-button, .ghost-button) > svg {
    flex: 0 0 auto !important;
    width: 14px !important;
    height: 14px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls #placeManualTick.manual-mark-button-tick {
    background: linear-gradient(color-mix(in srgb, var(--action-success) 67%, var(--shade)), color-mix(in srgb, var(--action-success) 67%, var(--shade)) 48%, color-mix(in srgb, var(--action-success) 55%, var(--shade))) !important;
    color: var(--on-colour-button) !important;
    border-color: color-mix(in srgb, color-mix(in srgb, var(--success) 67%, var(--shade)) 55%, transparent) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls #placeManualCross.manual-mark-button-cross {
    background: linear-gradient(rgb(var(--overlay-rgb) / .16), transparent 40%), linear-gradient(var(--action-danger-hover), var(--action-danger) 55%, var(--action-danger)) !important;
    color: var(--on-colour-button) !important;
    border-color: rgb(var(--danger-rgb) / .65) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls :is(#placeManualTick, #placeManualCross).is-active {
    box-shadow: 0 0 0 2px var(--gloss), 0 10px 24px rgb(var(--shadow-rgb) / .28) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls #placeManualTick svg,
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls #placeManualCross svg {
    color: var(--text-strong) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls #addCommentButton.comment-add-button {
    background: var(--accent-button-press) !important;
    color: var(--on-colour-button) !important;
    border-color: rgb(var(--accent-border-rgb) / .55) !important;
  }
  /* Two-column action row: Place tick | Place cross, Delete selected | Reset
     marks, Add comment | Remove. Buttons share the width equally; the small
     side padding keeps "Delete selected" on one line in a narrow panel. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls :is(.stamp-action-row, .comment-action-row):not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .stamp-action-row > :is(.primary-button, .ghost-button):not(.comment-colour-swatch):not(.comment-size-step) {
    min-width: 0 !important;
    padding: 0 6px !important;
  }
  /* Blue action buttons (Save position, and any other .button-blue the Comments
     tab adds): the same blue as Add comment. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .stamp-section .button-blue:is(.primary-button, .ghost-button):not(.comment-colour-swatch):not(.comment-size-step) {
    background: var(--accent-button-press) !important;
    color: var(--on-colour-button) !important;
    border-color: rgb(var(--accent-border-rgb) / .55) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls #rejectionBuilderRow:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Save row: a name field and a 34px blue Save button on one line (Saved
     positions today; the Comments tab can reuse it). The field is a 36px value
     box and the button stretches to match it. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-save-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-save-row > input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    border: 1px solid rgb(var(--overlay-rgb) / .1) !important;
    border-radius: 8px !important;
    background-color: var(--surface-card) !important;
    color: var(--text-strong) !important;
    font: 600 12px/1.2 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .02em !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-save-row > input::placeholder {
    color: rgb(var(--text-strong-rgb) / .62) !important; /* PS-054: 4.5:1 */
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-save-row > input:focus-visible {
    outline: 2px solid var(--accent-strong) !important;
    outline-offset: 1px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .stamp-save-row > :is(.primary-button, .ghost-button):not(.comment-colour-swatch):not(.comment-size-step) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 64px !important;
    height: auto !important;
    min-height: 34px !important;
    padding: 0 16px !important;
  }

  /* Saved list (stamp positions and comment templates): one 34px slate row per
     entry. The name button fills the row and applies the entry; the cross at the
     right deletes it. The active entry takes the blue pill gradient. A row is
     min-height, not height, so a template row can carry a second line. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .saved-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .saved-list:empty {
    display: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .saved-row {
    display: flex !important;
    align-items: stretch !important;
    min-width: 0 !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid rgb(var(--overlay-rgb) / .12) !important;
    border-radius: 8px !important;
    background: linear-gradient(rgb(var(--overlay-rgb) / .075), rgb(var(--overlay-rgb) / .016)), var(--surface-card) !important;
    box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / .14), inset 0 -2px 0 rgb(var(--shade-rgb) / .18) !important;
    overflow: hidden !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .saved-row.is-active {
    border-color: transparent !important;
    background: linear-gradient(var(--accent-button), var(--accent-button) 55%, color-mix(in srgb, var(--accent-button) 78%, var(--shade))) !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) / .32) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .saved-row > button {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--text-strong) !important;
    font: 700 12px/16px var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .saved-row > .saved-row-apply {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 8px 4px 8px 12px !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .saved-row > .saved-row-delete {
    flex: 0 0 34px !important;
    width: 34px !important;
    color: var(--muted-action) !important;
    font: 400 20px/32px var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .saved-row.is-active > .saved-row-delete {
    color: rgb(var(--text-strong-rgb) / .8) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .saved-row > .saved-row-apply:hover {
    background: rgb(var(--overlay-rgb) / .08) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .saved-row > .saved-row-delete:hover {
    background: rgb(var(--danger-rgb) / .22) !important;
    color: color-mix(in srgb, var(--text-muted) 29%, var(--text-strong)) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .saved-row > button:focus-visible {
    outline: 2px solid var(--accent-strong) !important;
    outline-offset: -3px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .saved-row > button:disabled {
    opacity: .5 !important;
    cursor: default !important;
  }

  /* Stamp library (Jon 2026-10-02: "ensure there is a small stamp library here,
     that the user can update/remove and do whatever"). Compact tiles, three
     across: a square thumbnail on a light tile so dark stamps read, the name
     under it, and the active stamp ringed in blue. Rename (pencil) and delete
     (cross) are 22px round buttons over the thumbnail corners, shown on
     hover/focus, always on the active tile and always on touch. The last cell is
     the Add tile. styles.css still holds the old dialog-sized tile rules, so
     every property is overridden here under the panel's own ids. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid {
    display: grid !important;
    /* Three across in the 420px panel; a wider panel (Jon 2026-10-03: "make
       the panel wider") adds tiles instead of blowing them up. */
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) !important;
    align-content: start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    container-type: inline-size !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-tile {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-self: start !important;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    outline: none !important;
    cursor: default !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-tile-select {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--paper) !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  /* The card is the image plus the action bar attached under it; it owns the
     border so the selected ring wraps both. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-tile-card {
    display: grid !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 2px solid rgb(var(--overlay-rgb) / .12) !important;
    border-radius: 8px !important;
    background: var(--surface-raised) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-tile-card:hover {
    border-color: rgb(var(--overlay-rgb) / .5) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-tile-select img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    background: none !important;
    object-fit: contain !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-tile[aria-selected="true"] .stamp-library-tile-card {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / .35) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid :is(.stamp-library-tile-select, .stamp-library-tile-rename, .stamp-library-tile-delete):focus-visible {
    outline: 2px solid var(--accent-strong) !important;
    outline-offset: -2px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-tile-name {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-tile-name strong {
    display: block !important;
    overflow: hidden !important;
    color: var(--muted-action) !important;
    font: 600 10.5px/1.3 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .02em !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-tile[aria-selected="true"] .stamp-library-tile-name strong {
    color: var(--text-strong) !important;
  }
  /* Action bar attached under the image (Jon 2026-10-02, option D "added on
     extra"): pencil | bin, always shown, nothing over the stamp. A stamp that
     cannot be deleted gets the pencil across the whole bar. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-tile-actions {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid rgb(var(--overlay-rgb) / .1) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid :is(.stamp-library-tile-rename, .stamp-library-tile-delete) {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text) !important;
    opacity: 1 !important;
    cursor: pointer !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-tile-delete {
    border-left: 1px solid rgb(var(--overlay-rgb) / .1) !important;
    color: var(--danger-strong) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid :is(.stamp-library-tile-rename, .stamp-library-tile-delete):hover {
    background: rgb(var(--overlay-rgb) / .08) !important;
    color: var(--text-strong) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-tile-delete:hover {
    background: rgb(var(--action-danger-rgb) / .35) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid :is(.stamp-library-tile-rename, .stamp-library-tile-delete) svg {
    width: 15px !important;
    height: 15px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
  }
  /* Add tile: the same square as a thumbnail, dashed, with a plus. It is also
     lit while an image is dragged over the grid. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-add {
    position: relative !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 2px !important;
    width: 100% !important;
    /* As tall as a stamp card: one grid column (square image) plus its 30px bar. */
    aspect-ratio: auto !important;
    height: calc((100cqw - 16px) / 3 + 30px) !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 1.5px dashed rgb(var(--overlay-rgb) / .28) !important;
    border-radius: 8px !important;
    background: rgb(var(--overlay-rgb) / .03) !important;
    color: var(--muted-action) !important;
    font: 700 10.5px/1.2 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-add:hover {
    border-color: rgb(var(--overlay-rgb) / .5) !important;
    color: var(--text-strong) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-add:is(.is-dragging, :has(input:focus-visible)) {
    border-color: var(--accent-strong) !important;
    background: rgb(var(--accent-wash-rgb) / .14) !important;
    color: var(--text-strong) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-add > svg {
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
  }

  /* Approval date editor (Jon 2026-10-02: "please also put approval date into
     the stamp menu too"). It used to be a Settings tab; it now sits in a
     disclosure under Size and position. The stamp preview fills the panel
     width (capped so it stays a preview, not a poster) on a light tile, the
     same as the library thumbnails, so a dark stamp and the dashed date marker
     stay legible on the dark panel. Fields are the 36px value boxes. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls details.advanced-controls[hidden] {
    display: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls :is(.date-pos-panel, .date-pos-tool) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    min-width: 0 !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-pos-stage {
    width: min(100%, 14rem) !important;
    margin: 0 auto !important;
    border: 1px solid rgb(var(--overlay-rgb) / .18) !important;
    border-radius: 8px !important;
    background: var(--paper) !important;
    box-shadow: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-pos-stage.is-picking-date-colour {
    outline: 2px solid var(--accent-strong) !important;
    outline-offset: 2px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-pos-marker:focus-visible {
    outline: 2px solid var(--accent-text) !important;
    outline-offset: 2px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-pos-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 8px !important;
    min-width: 0 !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-pos-fields > label {
    display: grid !important;
    align-content: start !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-pos-fields > :is(.date-pos-font, .date-pos-size, .date-pos-colour, .date-pos-actions) {
    grid-column: 1 / -1 !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-pos-fields > label > input:not([type="color"]) {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    border: 1px solid rgb(var(--overlay-rgb) / .1) !important;
    border-radius: 8px !important;
    background-color: var(--surface-card) !important;
    color: var(--text-strong) !important;
    font: 600 12px/1.2 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .02em !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-pos-fields > label > input:not([type="color"]):focus-visible {
    outline: 2px solid var(--accent-strong) !important;
    outline-offset: 1px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-pos-font > select {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    border: 1px solid rgb(var(--overlay-rgb) / .1) !important;
    border-radius: 8px !important;
    background-color: var(--surface-card) !important;
    color: var(--text-strong) !important;
  }
  /* Colour row: dropper, colour well and hex value on one line, then the eight
     basic colours across the full width. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-colour-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls #dateColorDropper.ghost-button.icon-only:not(.comment-colour-swatch):not(.comment-size-step) {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls #dateColorDropper.is-active {
    background: var(--accent-button-press) !important;
    color: var(--on-colour-button) !important;
    border-color: rgb(var(--accent-border-rgb) / .55) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-colour-row #dateColor {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    border: 1px solid rgb(var(--overlay-rgb) / .12) !important;
    border-radius: 8px !important;
    background: var(--surface-card) !important;
    cursor: pointer !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-colour-row #dateColorValue {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: color-mix(in srgb, var(--text) 87%, var(--surface-muted)) !important;
    font: 600 11px/1.2 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .04em !important;
    text-align: left !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-colour-row .date-palette-row {
    flex: 1 0 100% !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-palette-row .comment-colour-swatch {
    width: auto !important;
    min-width: 0 !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    border: 1px solid rgb(var(--overlay-rgb) / .28) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-palette-row .comment-colour-swatch.is-active {
    border-color: var(--text-strong) !important;
    box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / .7) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-palette-row .comment-colour-swatch:focus-visible {
    outline: 2px solid var(--accent-strong) !important;
    outline-offset: 2px !important;
  }
  /* Center X | Center Y, then Reset across the full width. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-pos-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .date-pos-actions > #datePosReset {
    grid-column: 1 / -1 !important;
  }

  /* Tick and cross icon pickers (inside the Marks "Tick and cross icons"
     disclosure): stacked, so each custom dropdown keeps the full panel width. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .stamp-icon-selects {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .stamp-icon-selects label {
    display: grid !important;
    gap: 4px !important;
  }

  /* Advanced: the Review disclosure row (hairline above, label left,
     chevron right). */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls details.advanced-controls {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgb(var(--overlay-rgb) / .08) !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls details.advanced-controls > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 4px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--text) !important;
    font: 800 11.52px/1.5 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    list-style: none !important;
    cursor: pointer !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls details.advanced-controls > summary::-webkit-details-marker {
    display: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls details.advanced-controls > summary::before {
    content: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls details.advanced-controls > summary::after {
    content: "" !important;
    position: static !important;
    flex: 0 0 auto !important;
    width: 8px !important;
    height: 8px !important;
    margin: -4px 4px 0 0 !important;
    border: 0 !important;
    border-right: 1.6px solid var(--text) !important;
    border-bottom: 1.6px solid var(--text) !important;
    background: none !important;
    transform: rotate(45deg) !important;
    transition: transform 160ms ease !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls details.advanced-controls[open] > summary::after {
    margin-top: 4px !important;
    transform: rotate(225deg) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls details.advanced-controls > :not(summary) {
    margin: 0 0 8px !important;
    padding: 12px !important;
    border: 1px solid rgb(var(--overlay-rgb) / .08) !important;
    border-radius: 8px !important;
    background: var(--surface-card) !important;
    box-shadow: none !important;
  }

  /* Fields inside Advanced: the Review value box. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls :is(.stamp-size-grid, .comment-style-grid, .stamp-icon-selects, .date-pos-fields) label,
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls :is(.stamp-position-field > .panel-label, .stamp-size-header .panel-label, .comment-color-control, .comment-align-control legend) {
    color: var(--muted-action) !important;
    font: 700 10.5px/1.3 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .size-input-row,
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .stamp-position-field :is(input, select),
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .comment-style-grid > label > select {
    min-height: 36px !important;
    border: 1px solid rgb(var(--overlay-rgb) / .1) !important;
    border-radius: 8px !important;
    background-color: var(--surface-card) !important;
    color: var(--text-strong) !important;
  }
  /* Every field in the panel is the 36px value box: the custom dropdowns,
     the text size field and its steppers. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .custom-select-trigger {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 10px 0 12px !important;
    border: 1px solid rgb(var(--overlay-rgb) / .1) !important;
    border-radius: 8px !important;
    background-color: var(--surface-card) !important;
    color: var(--text-strong) !important;
    font: 600 12px/1.2 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .02em !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .size-input-row {
    box-sizing: border-box !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .size-input-row > input {
    height: 34px !important;
    min-height: 0 !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .comment-size-control > :is(#commentSize, .comment-size-step) {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    box-sizing: border-box !important;
    border: 1px solid rgb(var(--overlay-rgb) / .1) !important;
    border-radius: 8px !important;
    background-color: var(--surface-card) !important;
    color: var(--text-strong) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls #addCommentButton.is-active {
    box-shadow: 0 0 0 2px var(--gloss), 0 10px 24px rgb(var(--shadow-rgb) / .28) !important;
  }
}
/* "Select more than one" is the touch substitute for shift-click and the drag
   marquee, so it is offered only where there is no fine pointer (Jon
   2026-10-02: "Think about what needs to be in this menu"). */
@media (hover: hover) and (pointer: fine) {
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .stamp-section > label.toggle.manual-mark-multiselect-toggle {
    display: none !important;
  }
}
/* ===== end Stamp panel contents ===== */

/* ===== Comment drawing and templates (Jon 2026-10-02) =====
   Jon 2026-10-02: "I want to be able to drag select a comment box and that's
   its size. I want to be able to save templated comment boxes and their
   locations." Here: the rectangle drawn on the sheet while Add comment is
   armed, and what is specific to template rows. The Templates section, the
   saved-list rows and the blue Save button use the shared classes in the
   Stamp panel block above (.stamp-section, .saved-row, .button-blue). The
   placing cursor is styles.css .stamp-frame.is-placing-comment (the custom
   comment cursor with a crosshair fallback), so none is added here. */
@media all {
  /* Drag-to-size rectangle (stamps.js bindManualMarkInteractions). It sits in
     the sheet's mark layer like the shift-drag marquee (styles.css
     .mark-selection-box: absolute, z-index 5, no pointer events) but dashed,
     so it reads as "the comment box goes here", not "select these marks".
     border-box keeps the dashed edge inside the drawn size, which is the
     size the comment gets. */
  html #stampSheet#stampSheet .comment-draw-box {
    position: absolute !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border: 2px dashed var(--accent) !important;
    border-radius: 2px !important;
    background: rgb(var(--accent-wash-rgb) / .14) !important;
    pointer-events: none !important;
  }

  /* An empty template list and a hidden empty-state note stay out of the
     layout (the shared .saved-list display rule would otherwise beat
     [hidden]). */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(#commentTemplateList, #commentTemplateEmpty)[hidden] {
    display: none !important;
  }

  /* Template rows carry two lines: the comment's title, then the start of its
     body (so templates that share a title such as "ISSUE:" can be told
     apart), each cut with an ellipsis. The shared row is min-height 34px, so
     a two-line row grows and a title-only row stays 34px. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #commentTemplateList .saved-row > .saved-row-apply {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center !important;
    gap: 1px !important;
    padding: 7px 4px 7px 12px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #commentTemplateList .saved-row-apply > :is(.saved-row-name, small) {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #commentTemplateList .saved-row-apply > small {
    color: var(--muted-action) !important;
    font: 500 10.5px/14px var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #commentTemplateList .saved-row.is-active .saved-row-apply > small {
    color: rgb(var(--text-strong-rgb) / .8) !important;
  }

  /* The comment list now sits under its own section heading, so the section's
     8px gap spaces it; styles.css's lead-in margin would double it. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .comment-sheet-section > #commentList {
    margin-top: 0 !important;
  }
}
/* ===== end Comment drawing and templates ===== */

/* ===== Stamp tab, fewer rows (Jon 2026-10-02) =====
   "This feels like there is too much information, is there anyway, we can
   simplify it without losing information." Every control and label stays;
   rows that only took space go:
   - Show stamp and Apply to every sheet share one row of pills.
   - Reset marks is gone and Lock marks takes its place beside Delete selected
     (Jon: "get rid of this and place lock marks there"). It first sat on the
     Marks heading row as a smaller pill, which "feels out of place".
   - Every toggle pill in the panel centres its tick and label.
   - The library status hides while it only repeats the highlighted tile
     (.is-routine, set in syncStampLibraryUi); screen readers still hear it. */
@media all {
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-top-toggles:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Paired pills centre their tick and label, and a label that wraps centres
     each line (Jon 2026-10-02: "center these, ensure the icon and text center"). */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .manual-mark-panel, .stamp-action-row) > label.toggle:not([hidden]) {
    justify-content: center !important;
    /* Centred content only needs a small edge: "TRANSPARENT" fits the narrowest
       pill (Comments > Style on a phone) beside its tick. */
    padding: 4px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .manual-mark-panel, .stamp-action-row) > label.toggle > span {
    flex: 0 1 auto !important;
    text-align: center !important;
  }
  /* Lock marks sits in the button row beside Delete selected, so it takes the
     row's 34px height and 8px corners; it keeps the toggle's tick and colours. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-action-row > label.toggle:not([hidden]) {
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
  }
  /* Its label matches the Delete selected text beside it. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-action-row > label.toggle > span {
    font: 700 12px/1.2 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
  }
  /* A wrapped label's box stays as wide as the space it was given, which pushed
     "Apply to every sheet" 8px left of centre. Its two .pill-line pieces are
     block lines here, so the box is only as wide as its longest line and the
     tick and label centre as one group. Elsewhere the pieces run as one line. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-top-toggles > label.toggle > span > .pill-line {
    display: block !important;
  }
  /* The pieces are spans inside a toggle, so the app-wide toggle label rule
     would give them its 13px type; they take the pill label's type instead. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel label.toggle .pill-line {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    white-space: nowrap !important;
  }
  /* A tile name wraps onto a second line rather than losing its end
     ("Rejected cross" read "REJECTED CRO..." on a phone). */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-tile-name strong {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-library-status.is-routine:not(.is-error) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}
/* ===== end Stamp tab, fewer rows ===== */

/* ===== One checkbox (Jon 2026-10-02) =====
   "The way this checkbox is here. Is how all checkboxes should look." Every
   visible checkbox uses the login's square blue-tick box: a 24px rounded
   square, dark when off, the light-blue gradient with a white tick when on.
   That covers the Stamp and Comments pills, Drawing Controls, Settings, the
   save-folder toggles, feedback consent and the login itself. The stamp
   padlock (#stampLockButton) and the zero-width rotate-all control are not
   drawn as checkboxes, so they are left out. The repeated :not() ids raise
   this rule above the per-panel rules (the Stamp pills use five ids). */
html body input[type="checkbox"]:not(#stampLockButton):not(#requirementDrawingRotateAll):not(#stampLockButton):not(#requirementDrawingRotateAll):not(#stampLockButton):not(#requirementDrawingRotateAll) {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgb(var(--accent-rgb, 46 127 242) / 0.65) !important;
  border-radius: var(--checkbox-radius) !important;
  background: rgb(var(--bg-rgb) / 0.58) !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  accent-color: auto !important;
}
html body input[type="checkbox"]:not(#stampLockButton):not(#requirementDrawingRotateAll):not(#stampLockButton):not(#requirementDrawingRotateAll):not(#stampLockButton):not(#requirementDrawingRotateAll):checked {
  border-color: rgb(var(--accent-border-rgb) / 0.85) !important;
  background:
    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='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 12.5l4.2 4.2L18.5 8'/></svg>") center / 15px 15px no-repeat,
    linear-gradient(180deg, var(--accent-button-hover), var(--accent-button)) !important;
  color: var(--on-colour-button) !important;
}
html body input[type="checkbox"]:not(#stampLockButton):not(#requirementDrawingRotateAll):not(#stampLockButton):not(#requirementDrawingRotateAll):not(#stampLockButton):not(#requirementDrawingRotateAll):focus-visible {
  outline: 2px solid var(--focus, var(--accent-strong)) !important;
  outline-offset: 2px !important;
}
html body input[type="checkbox"]:not(#stampLockButton):not(#requirementDrawingRotateAll):not(#stampLockButton):not(#requirementDrawingRotateAll):not(#stampLockButton):not(#requirementDrawingRotateAll):disabled {
  opacity: 0.5 !important;
  cursor: default !important;
}
html body input[type="checkbox"]:not(#stampLockButton):not(#requirementDrawingRotateAll):not(#stampLockButton):not(#requirementDrawingRotateAll):not(#stampLockButton):not(#requirementDrawingRotateAll)::before,
html body input[type="checkbox"]:not(#stampLockButton):not(#requirementDrawingRotateAll):not(#stampLockButton):not(#requirementDrawingRotateAll):not(#stampLockButton):not(#requirementDrawingRotateAll)::after {
  content: none !important;
}
/* ===== end One checkbox ===== */
/* ===== Stamp & Comments toggles as a settings list (Jon 2026-10-03) =====
   Prototype 5, "this, but checkboxes on the left side": no pill behind the
   checkbox. One row per option, checkbox then label, with hairlines between
   rows. The checkbox itself is the "One checkbox" box. */
@media all {
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-top-toggles:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .stamp-section, .manual-mark-panel) > label.toggle:not([hidden]),
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .stamp-section, .manual-mark-panel) > label.toggle:not([hidden]):has(input:checked) {
    justify-content: flex-start !important;
    gap: 12px !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 0 2px !important;
    border: 0 !important;
    border-bottom: 1px solid rgb(var(--overlay-rgb) / .08) !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--text-strong) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .stamp-section, .manual-mark-panel) > label.toggle:not([hidden]):first-of-type {
    border-top: 1px solid rgb(var(--overlay-rgb) / .08) !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel :is(.stamp-top-toggles, .stamp-section, .manual-mark-panel) > label.toggle > span {
    flex: 1 1 auto !important;
    text-align: left !important;
    font: 700 12px/1.25 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .04em !important;
  }
  /* One line again: the two .pill-line pieces were stacked to centre a pill. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-top-toggles > label.toggle > span > .pill-line {
    display: inline !important;
  }
  /* Delete selected on its own row, full width (Jon 2026-10-03). */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel .stamp-controls .stamp-action-row.stamp-action-row-single:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* ===== end Stamp & Comments settings list ===== */

/* ===== Stamp panel tabs fill the panel (Jon 2026-10-03) =====
   "ensure for all tabs here, that the full height is used in the panel, so
   that all options are visible ... Also fix the approval stamp use. So it
   looks good and even." The open tab fills the space between the tab bar and
   Export now; a tab taller than that scrolls inside the panel. Disclosures
   open by default while they fit (review-panel-v3.js). */
@media all {
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel > .stamp-controls:not(.comment-controls) {
    grid-auto-rows: minmax(min-content, 1fr) !important;
    align-content: stretch !important;
  }
  /* Kept below the tab rules' specificity, so a hidden section stays hidden. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel > .stamp-controls > .stamp-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    /* 12px, opened up to 40px by review-panel-v3.js when the tab has room,
       so a short tab spreads down the panel instead of bunching at the top. */
    gap: var(--panel-section-gap, 12px) !important;
  }
  /* Approval stamp: the library is an even grid. review-panel-v3.js picks
     the column count (--stamp-tile-cols); the columns are equal 1fr tracks, so
     the tiles fill the grid edge to edge (Jon 2026-10-05: "keeps the same
     spacing on each end") and all tiles are one size. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel #stampLibraryTileGrid {
    grid-template-columns: repeat(var(--stamp-tile-cols, 3), minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 10px !important;
  }
  /* The Add tile is exactly a stamp card box (square image area + 30px
     action bar + 2px border each side), top-aligned with the cards; the name
     line under the cards is left empty under it, so rows stay aligned. One
     column is (grid width - gaps) / columns, read from the grid itself (a
     container, 100cqw), so it stays exact when the panel resizes. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel #stampLibraryTileGrid > .stamp-library-add {
    align-self: start !important;
    width: 100% !important;
    height: calc((100cqw - (var(--stamp-tile-cols, 3) - 1) * 10px) / var(--stamp-tile-cols, 3) + 30px) !important;
    min-height: 0 !important;
    margin: 0 0 calc(4px + 10.5px * 1.3) !important;
    box-sizing: border-box !important;
    place-content: center !important;
    justify-items: center !important;
  }
  /* Saved positions: the list takes the height and the save row sits at the
     bottom of the panel, where the new name is typed. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel[data-panel-section="positions"] > .stamp-controls > section[aria-label="Saved positions"] > .stamp-save-row {
    margin-top: auto !important;
  }
  /* Comments: the tab's own scroller fills the panel and the list of comments
     on this sheet takes the room left. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel > .comment-controls > .comment-tab-panel.is-active {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--panel-section-gap, 12px) !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel > .comment-controls > .comment-tab-panel.is-active > * {
    flex: 0 0 auto !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel > .comment-controls > .comment-tab-panel.is-active > .comment-sheet-section {
    flex: 1 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel .comment-sheet-section > #commentList {
    flex: 1 0 auto !important;
  }
}
@media all {
  /* Marks: the icon pickers span the panel, side by side, like the Place
     tick and Place cross pair above them. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel section[aria-label="Marks"] > details.advanced-controls,
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel section[aria-label="Marks"] .stamp-icon-selects {
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel section[aria-label="Marks"] .stamp-icon-selects {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}
@media all {
  /* Group rhythm (Jon 2026-10-03: "better padding and designed nice"):
     review-panel-v3.js sets half the group gap as row-gap and marks every
     group after the first; that group carries a hairline divider and the
     other half of the gap above its content, so the divider sits centred
     between groups. The same on every Stamp and Export tab. */
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel :is(.stamp-section, .comment-tab-panel).panel-group-stack {
    padding-inline: 4px !important;
    box-sizing: border-box !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel .panel-group-stack > .panel-group-divided {
    border-top: 1px solid rgb(var(--overlay-rgb) / .08) !important;
    padding-top: var(--panel-group-half, 12px) !important;
  }
}
/* ===== end Stamp panel tabs fill the panel ===== */

/* ===== Export panel fields (Jon 2026-10-03) =====
   Export looks like Stamp & comments. Its shared pieces take Stamp's rules from
   export-panel-mirror.css (generated). These are the few things only Export
   has: labelled text fields, the destination note, and the result message.
   The values repeat Stamp's field label and 36px value box. */
@media all {
  html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel .stamp-controls .export-field {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    color: var(--muted-action) !important;
    font: 700 10.5px/1.3 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel .stamp-controls .export-field .input-row {
    display: flex !important;
    gap: 8px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel .stamp-controls .export-field input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    border: 1px solid rgb(var(--overlay-rgb) / .1) !important;
    border-radius: 8px !important;
    background-color: var(--surface-card) !important;
    color: var(--text-strong) !important;
    font: 600 12px/1.2 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: .02em !important;
  }
  /* The Approval tag is a combo (text box with a list of saved tags); it fills
     the row like File name, with room for its chevron. */
  html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel .stamp-controls .export-field .combo-field {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel .stamp-controls .export-field .combo-field > input {
    padding-right: 42px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel .stamp-controls .export-field input::placeholder {
    color: rgb(var(--text-strong-rgb) / .62) !important; /* PS-054: 4.5:1 */
  }
  html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel .stamp-controls .export-field input:focus-visible {
    outline: 2px solid var(--accent-strong) !important;
    outline-offset: 1px !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel .stamp-controls .save-destination-note {
    margin: 0 0 8px !important;
    color: var(--text-muted) !important;
    font: 400 12px/1.45 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel .stamp-controls .success-message {
    margin: 0 !important;
    font: 600 12px/1.4 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif) !important;
    text-transform: none !important;
  }
  html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel .stamp-controls .success-message:empty {
    display: none !important;
  }
  /* The button rule sets display with !important; a hidden control stays hidden
     (Export swaps its button for a download link on desktop). */
  html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel .stamp-controls [hidden][hidden][hidden][hidden][hidden] {
    display: none !important;
  }
}
/* 44px phone touch target, Export actions: the extra #savePanel id beats the mirrored Stamp 34px button rule. */
@media (max-width: 640px) {
  html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel#savePanel .stamp-controls .save-export-actions > :is(.primary-button, .ghost-button) {
    height: 44px !important;
    min-height: 44px !important;
  }
  /* PS-003: Export actions and status stay on screen at the panel bottom; the rest scrolls under them. */
  html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel#savePanel .stamp-controls > section.stamp-section[aria-label="Export"] {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 1 !important;
    background-color: var(--bg) !important;
    box-shadow: 0 8px 0 var(--bg) !important;
  }
}
/* Export is one panel again (Jon 2026-10-03: "put all the items on the same
   panel instead for the export"): Save approved drawing, After saving (with
   Where the file goes), Export, in that order. Each section is one group in
   the shared rhythm (review-panel-v3.js spreadPanelSection: 24px with a faint
   divider, opening to 56px when there is room), so a new section is one more
   group. The Stamp tab rules mirrored for Export would hide the section
   headings and stretch the sections to share the height; Export keeps its
   headings and stacks from the top. */
html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel#savePanel#savePanel > .stamp-controls {
  grid-auto-rows: auto !important;
  align-content: start !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel#savePanel#savePanel > .stamp-controls > .stamp-section > .stamp-section-label {
  display: block !important;
}
html #layoutV2FloatHost#layoutV2FloatHost #savePanel#savePanel#savePanel#savePanel > .stamp-controls > .stamp-section > details.advanced-controls > summary {
  display: flex !important;
}
/* ===== end Export panel fields ===== */

/* Jon 2026-10-03: the Privacy - Terms footer was "missing on the review page".
   The drawing row was stretched to fill the shell, leaving an empty band under
   the panes and pushing the footer below the window. On desktop the Review
   column now ends at the panes, so the footer sits under them with its normal
   spacing, and the page does not scroll. Phones keep their own flow. */
@media (min-width: 641px) and (min-height: 480px) {
  html[data-layout-v2="float"] #reviewScreen.is-active,
  html[data-layout-v2="float"] #reviewScreen.is-active > .review-scale-stage,
  html[data-layout-v2="float"] #reviewScreen.is-active .review-layout,
  html[data-layout-v2="float"] #reviewScreen.is-active .drawing-board,
  html[data-layout-v2="float"] #reviewScreen.is-active .drawing-panes:not([data-review-mode="requirements"]) {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto !important;
  }
  html[data-layout-v2="float"][data-has~="review-screen"]:not(#has-pad) #appShell#appShell > main.workspace {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }
}

/* Jon 2026-10-03: "Can you make this screen sit nicer." Load used to stop
   short: an empty band under the Review button, the footer floating mid-page,
   an unused 4rem bottom-action reserve, and a 20px scroll from the frame
   margin leaking through body. Now the page fills the window: the two cards
   grow into the free height, Review sits under them, the footer sits at the
   bottom with its normal spacing. Taller content still scrolls normally. */
@media (min-width: 641px) and (min-height: 480px) {
  html[data-has~="load-screen"]:not(#has-pad) body {
    display: flow-root;
  }
  #appShell#appShell[data-has~="load-screen"]:not(#has-pad) {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-bottom: 0;
    min-height: calc(var(--app-visible-height, 100dvh) - (2 * var(--app-frame-inset)));
  }
  #appShell#appShell[data-has~="load-screen"]:not(#has-pad) > main.workspace {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  #appShell#appShell[data-has~="load-screen"]:not(#has-pad) > .app-legal-footer {
    flex: 0 0 auto;
  }
  #loadScreen#loadScreen.is-active {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  #loadScreen#loadScreen .load-grid {
    flex: 1 1 auto;
  }
}
/* Side by side (styles.css stacks the cards at 1320px and below): the card
   row takes the free height but never less than its content. */
@media (min-width: 1321px) and (min-height: 480px) {
  #loadScreen#loadScreen .load-grid {
    grid-template-rows: minmax(auto, 1fr) auto;
    align-items: stretch;
  }
  #loadScreen#loadScreen .load-grid:has(.load-queue-action > :not([hidden])) {
    grid-template-rows: auto minmax(auto, 1fr) auto;
  }
  /* #appShell outranks the older loaded-files fixed card height. */
  #appShell #loadScreen#loadScreen .load-grid > .drop-zone[data-drop-role="raeco"],
  #appShell #loadScreen#loadScreen .load-grid > .supplied-source-card {
    height: auto;
    min-height: 0;
  }
}

/* ===== Load cards, version 1 (Jon 2026-10-03) =====
   Source of truth: artifacts/load-card-options/load-card-v1-revised.html.
   Each card is translucent glass in its role colour (blue Your file, purple
   Supplied) with marching ants all the way round: a header row (tinted icon
   tile, title, neutral file-type tags), one plain sentence, a large drop area
   that takes the free height, then the file status on the left and the main
   button + Clear on the right.
   - Cards: :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone).
   - The Supplied card is the outer section (it owns the ants); the
     #suppliedFilesPanel / #manualSpecsPanel articles inside are transparent.
   - "#appShell #loadScreen#loadScreen" outranks the older Load rules in
     styles.css and responsive-scaling.css, so this block needs no !important.
   - The fill-the-window block above still sizes the grid rows; these cards
     only lay out their own content. Phones are handled at the end. */
#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) {
  --drop-zone-ant-rgb: var(--load-card-rgb);
  --drop-zone-ant: rgb(var(--load-card-rgb));
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  row-gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgb(var(--load-card-rgb) / 0.16);
  animation: none;
  background:
    radial-gradient(120% 80% at 0% 0%, rgb(var(--load-card-wash-rgb) / 0.2), transparent 60%),
    linear-gradient(160deg, rgb(var(--load-card-wash-rgb) / 0.12), rgb(var(--load-card-rgb) / 0.06) 55%, rgb(var(--load-card-rgb) / 0.09));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

/* Role colour: blue Your file, purple Supplied and the Batch import card (Jon 2026-10-12). */
#appShell #loadScreen#loadScreen .drop-zone[data-drop-role="raeco"] {
  --load-card-rgb: var(--accent-rgb);
  /* The card itself takes the wash: weaker on the Charcoal and Light backgrounds. */
  --load-card-wash-rgb: var(--accent-wash-rgb);
}

#appShell #loadScreen#loadScreen :is(.supplied-source-card, .intake-zone) {
  --load-card-rgb: var(--complete-rgb);
  --load-card-wash-rgb: var(--complete-wash-rgb);
}

#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone)::before,
#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone)::after,
#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) > .supplied-source-panel::before,
#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) > .supplied-source-panel::after {
  content: none;
}

#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone):focus-visible,
#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone):has(> .supplied-source-panel:focus-visible) {
  outline: 2px solid rgb(var(--load-card-rgb));
  outline-offset: 3px;
}

/* The Supplied panels fill the section and carry no card chrome of their own. */
#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) > .supplied-source-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 16px;
  outline: 0;
  background: none;
  box-shadow: none;
  animation: none;
}

#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) > .supplied-source-panel[hidden] {
  display: none;
}

/* Marching ants round the card only once a file is loaded (Jon 2026-10-04). */
#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) > .drop-zone-ants {
  display: none;
}

#appShell #loadScreen#loadScreen .drop-zone[data-drop-role="raeco"].has-file > .drop-zone-ants,
#appShell #loadScreen#loadScreen .supplied-source-card:has(> .supplied-source-panel.has-file:not([hidden])) > .drop-zone-ants {
  display: block;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) > .drop-zone-ants rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: 15px;
  ry: 15px;
  stroke: rgb(var(--load-card-rgb) / 0.85);
  stroke-width: 1.4;
  stroke-dasharray: 6 5;
  filter: none;
  animation: load-card-ants 0.9s linear infinite;
}

@keyframes load-card-ants {
  to { stroke-dashoffset: -11; }
}

@media (prefers-reduced-motion: reduce) {
  #appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) > .drop-zone-ants rect {
    animation: none;
  }
}

/* Header: icon tile, title, file-type tags. */
#appShell #loadScreen#loadScreen .load-card-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 24px 28px 0;
}

#appShell #loadScreen#loadScreen .load-card-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  color: color-mix(in srgb, rgb(var(--load-card-rgb)) 60%, var(--text-strong));
  background: rgb(var(--load-card-rgb) / 0.18);
}

#appShell #loadScreen#loadScreen .load-card-tile svg,
#appShell #loadScreen#loadScreen .load-card-up svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#appShell #loadScreen#loadScreen .load-card-tile svg {
  width: 26px;
  height: 26px;
}

#appShell #loadScreen#loadScreen .load-card-head > h3 {
  flex: 0 1 auto;
  align-self: center;
  justify-self: auto;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  color: color-mix(in srgb, rgb(var(--load-card-rgb)) 60%, var(--text-strong));
  font: 800 20px/1.1 var(--font-head);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

#appShell #loadScreen#loadScreen .load-card-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

#appShell #loadScreen#loadScreen .load-card-types > li {
  margin: 0;
  padding: 4px 8px;
  color: color-mix(in srgb, var(--text) 87%, var(--surface-muted));
  font: 600 11px/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  background: rgb(var(--overlay-rgb) / 0.06);
  border: 1px solid rgb(var(--overlay-rgb) / 0.14);
  border-radius: 6px;
}

/* One plain sentence. */
#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) .load-card-desc {
  align-self: auto;
  max-width: none;
  margin: 16px 28px 0;
  color: color-mix(in srgb, var(--text) 87%, var(--surface-muted));
  font: 600 15px/1.5 var(--font-body);
  letter-spacing: normal;
  white-space: normal;
  transform: none;
}

/* Drop area: fills the free height, no border, black 20% overlay. */
#appShell #loadScreen#loadScreen .load-card-well {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 150px;
  margin: 18px 28px 0;
  padding: 24px;
  overflow: auto;
  text-align: center;
  background: rgb(var(--well-rgb) / 0.2);
  border: 0;
  border-radius: 12px;
  transition: background 0.15s;
}

#appShell #loadScreen#loadScreen .load-card-well:hover,
#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone).is-dragging .load-card-well,
#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) > .is-dragging .load-card-well {
  background: rgb(var(--load-card-rgb) / 0.1);
}

#appShell #loadScreen#loadScreen .load-card-drop {
  display: grid;
  justify-items: center;
  gap: 12px;
}

/* Loaded-file icon: a three.js canvas fills the well behind the copy
   (features/load-file-bounce.js) and takes the upload arrow's place. */
#appShell #loadScreen#loadScreen .load-card-well {
  position: relative;
}

#appShell #loadScreen#loadScreen .load-card-bounce {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

#appShell #loadScreen#loadScreen .load-card-bounce > canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#appShell #loadScreen#loadScreen .load-card-drop > :not(.load-card-bounce) {
  position: relative;
  z-index: 1;
}

#appShell #loadScreen#loadScreen .has-bounce-icon .load-card-up {
  visibility: hidden;
}

#appShell #loadScreen#loadScreen .load-card-up {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: rgb(var(--load-card-rgb));
  background: rgb(var(--load-card-rgb) / 0.18);
}

#appShell #loadScreen#loadScreen .load-card-up svg {
  width: 30px;
  height: 30px;
}

#appShell #loadScreen#loadScreen .load-card-drop > strong {
  color: color-mix(in srgb, var(--text) 87%, var(--surface-muted));
  font: 700 16px/1.2 var(--font-head);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#appShell #loadScreen#loadScreen .load-card-drop > span:last-child {
  color: color-mix(in srgb, var(--text) 87%, var(--surface-muted));
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Supplied file-type confirmation takes the drop area while it is showing. */
#appShell #loadScreen#loadScreen .load-card-well:has(> .supplied-file-kind:not([hidden])) {
  place-items: stretch;
  align-content: start;
  text-align: left;
}

#appShell #loadScreen#loadScreen .load-card-well:has(> .supplied-file-kind:not([hidden])) > .load-card-drop {
  display: none;
}

#appShell #loadScreen#loadScreen .load-card-well > .supplied-file-kind {
  margin: 0;
  min-height: 0;
}

/* PO requirements (Jon 2026-10-04): once the PO is read, the drop area of the
   card holding it shows the requirements as editable text, one line each, the
   same way the file-type row takes the drop area. */
#appShell #loadScreen#loadScreen .load-card-well:has(> .po-requirements:not([hidden])) {
  place-items: stretch;
  align-content: start;
  text-align: left;
}

#appShell #loadScreen#loadScreen .load-card-well:has(> .po-requirements:not([hidden])) > .load-card-drop {
  display: none;
}

#appShell #loadScreen#loadScreen .load-card-well > .po-requirements {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
}

#appShell #loadScreen#loadScreen .po-requirements[hidden] {
  display: none;
}

#appShell #loadScreen#loadScreen .po-requirements-head {
  color: var(--text-muted);
  font: 700 13px/1.3 var(--font-head);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#appShell #loadScreen#loadScreen .po-requirements textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  padding: 10px 12px;
  color: var(--text);
  font: 500 14px/1.6 var(--font-mono);
  /* Shown exactly as the check reads it. */
  text-transform: none;
  letter-spacing: normal;
  background: rgb(var(--well-rgb) / 0.25);
  border: 1px solid rgb(var(--load-card-rgb) / 0.45);
  border-radius: 8px;
  resize: vertical;
}

#appShell #loadScreen#loadScreen .po-requirements textarea:focus-visible {
  outline: 2px solid rgb(var(--load-card-rgb));
  outline-offset: 1px;
}

#appShell #loadScreen#loadScreen .po-requirements-items {
  display: grid;
  gap: 8px;
}

#appShell #loadScreen#loadScreen .po-requirements-items[hidden] {
  display: none;
}

#appShell #loadScreen#loadScreen .po-requirements-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-align: left;
  text-transform: none;
}

#appShell #loadScreen#loadScreen .po-requirements-item small {
  color: var(--text-muted);
  font: 600 13px/1.3 var(--font-mono);
}

#appShell #loadScreen#loadScreen .po-requirements > .supplied-source-status {
  margin: 0;
}

#appShell #loadScreen#loadScreen .po-requirements > .supplied-source-status[hidden] {
  display: none;
}

/* Bottom row: status left; main button then Clear on the right. */
#appShell #loadScreen#loadScreen .load-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 20px 28px 24px;
}

#appShell #loadScreen#loadScreen .load-card-foot > .fake-file {
  display: block;
  flex: 1 1 10rem;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--text) 87%, var(--surface-muted));
  font: 500 15px/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
}

#appShell #loadScreen#loadScreen .load-card-foot > .fake-file::after {
  content: none;
}

#appShell #loadScreen#loadScreen .has-file .load-card-foot > .fake-file {
  color: var(--success-text);
}

#appShell #loadScreen#loadScreen .load-card-foot > .fake-file.is-rejected {
  flex-basis: 100%;
  overflow: visible;
  color: var(--danger-strong);
  font-size: 0.8rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

#appShell #loadScreen#loadScreen .load-card-foot > .file-action-stack {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  align-self: auto;
  justify-self: auto;
  gap: 8px;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 0 0 auto; /* stays right when a slot note or long name wraps it */
}

#appShell #loadScreen#loadScreen .load-card-foot > .file-action-stack > .file-button,
#appShell #loadScreen#loadScreen .load-card-foot > .file-action-stack > .file-clear-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 144px;
  min-width: 0;
  min-height: 44px;
  height: auto;
  margin: 0;
}

/* Purchase-order status sits on its own line under the two buttons. */
#appShell #loadScreen#loadScreen .load-card-foot .supplied-source-status {
  order: 3;
  flex: 1 0 100%;
  max-width: none;
  margin: 0;
  text-align: right;
  transform: none;
}

#appShell #loadScreen#loadScreen .load-card-foot .supplied-source-status:empty {
  display: none;
}

/* Text input (reached only by script while the tabs stay hidden): same
   padding as the files panel so the card does not change shape. */
#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) > .supplied-document-panel {
  gap: 12px;
  padding: 24px 28px;
}

#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) > .supplied-document-panel > h3 {
  align-self: flex-start;
  width: auto;
  margin: 0;
  text-align: left;
  color: color-mix(in srgb, rgb(var(--load-card-rgb)) 78%, var(--text-strong));
  font: 800 20px/1.1 var(--font-head);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) > .supplied-document-panel > p {
  max-width: none;
  margin: 0;
  color: color-mix(in srgb, var(--text) 87%, var(--surface-muted));
  font: 600 15px/1.5 var(--font-body);
  white-space: normal;
  transform: none;
}

#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) > .supplied-document-panel > .manual-intake {
  flex: 1 1 auto;
  min-height: 0;
}

/* Phones: tighter padding, tags under the title, no drag-and-drop art, and
   full-width 44px buttons, one per row, so "Upload files" never clips. */
@media (max-width: 640px) {
  #appShell #loadScreen#loadScreen .load-card-head {
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 20px 0;
  }

  #appShell #loadScreen#loadScreen .load-card-tile {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  #appShell #loadScreen#loadScreen .load-card-tile svg {
    width: 22px;
    height: 22px;
  }

  #appShell #loadScreen#loadScreen .load-card-head > h3 {
    font-size: 18px;
  }

  #appShell #loadScreen#loadScreen .load-card-types {
    flex: 1 0 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  #appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) .load-card-desc {
    margin: 12px 20px 0;
    font-size: 14px;
  }

  #appShell #loadScreen#loadScreen .load-card-well {
    min-height: 0;
    margin: 0 20px;
    padding: 0;
    background: none;
  }

  #appShell #loadScreen#loadScreen .load-card-drop {
    display: none;
  }

  #appShell #loadScreen#loadScreen .load-card-well:has(> .supplied-file-kind:not([hidden])),
  #appShell #loadScreen#loadScreen .load-card-well:has(> .po-requirements:not([hidden])) {
    margin-top: 12px;
  }

  #appShell #loadScreen#loadScreen .load-card-foot {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px 20px;
  }

  #appShell #loadScreen#loadScreen .load-card-foot > .fake-file {
    flex: none;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    font-size: 13px;
  }

  #appShell #loadScreen#loadScreen .load-card-foot > .file-action-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    margin-left: 0;
  }

  #appShell #loadScreen#loadScreen .load-card-foot > .file-action-stack > .file-button,
  #appShell #loadScreen#loadScreen .load-card-foot > .file-action-stack > .file-clear-button {
    width: 100%;
    height: 44px;
  }

  #appShell #loadScreen#loadScreen .load-card-foot .supplied-source-status {
    grid-column: 1 / -1;
    text-align: left;
  }

  #appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role="raeco"], .supplied-source-card, .intake-zone) > .supplied-document-panel {
    padding: 20px;
  }
}

/* PS-005: on phones the open Drawing Controls menu kept its 420px desktop
   width, so it ran off the left edge and Max tolerance could not be reached.
   Fit it to the screen: the four toggles in a 2x2 grid and Max tolerance on
   its own row underneath. */
@media (max-width: 640px) {
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage .review-actions > #drawingControls#drawingControls > #drawingControlsBody {
    left: 0 !important;
    right: auto !important;
    width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform-origin: top left !important;
  }
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage #drawingControls[open] > #drawingControlsBody:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 48px 48px auto !important;
  }
  html[data-layout-v2="float"] #reviewScreen#reviewScreen #drawingControlsBody > .review-tolerance-control {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}

/* PO check in Review (Jon 2026-10-04): the normal two panes. The PO page shows
   on the side the PO was loaded, so a PO loaded on Your file sits on the left. */
#reviewScreen .drawing-panes[data-source-kind="po"][data-po-side="raeco"] .drawing-pane:has(#manufactureSheet) {
  order: -1;
}

/* The PO page is a document, not a drawing: no sheet rotation on its pane. */
#reviewScreen .drawing-panes[data-source-kind="po"] .drawing-pane:has(#manufactureSheet) .rotate-sheet-button {
  display: none;
}

/* Requirement cards are normal finding cards; these only show the reviewer's
   decision. */
.requirement-finding-card .finding-card-action[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px currentColor;
}

.requirement-decision-label {
  margin: var(--space-2) 0 0;
  font: 700 0.64rem/1.3 var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.requirement-decision-label.is-accepted {
  color: var(--success-text);
}

.requirement-decision-label.is-rejected {
  color: var(--danger-text);
}

/* ==== PO check stage on the Review page (Jon 2026-10-04) ==== */
/* A PO check has one PDF pane in both steps (Jon 2026-10-05): the PO page
   while its values are checked, then the drawing in the results. The PO moves
   into the right panel for the results. */
html[data-requirement-stage="confirm"] #reviewScreen .drawing-panes .drawing-pane:has(#raecoSheet),
#reviewScreen .drawing-panes[data-source-kind="po"]:not([data-requirement-stage]) .drawing-pane:has(#manufactureSheet) {
  display: none !important;
}

#reviewScreen .drawing-panes[data-source-kind="po"] {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Nothing is reviewed yet: no Review again, and no sheets to manage. */
html[data-requirement-stage="confirm"] #reviewAgainButton,
html[data-requirement-stage="confirm"] #reviewScreen#reviewScreen .review-actions #pairingManagerButton#pairingManagerButton,
html[data-requirement-stage="confirm"] #pairingManagerButton {
  display: none !important;
}

/* Approve / Reject and Use / Back share one footer; only one pair shows. The
   float layout sets display on the buttons by id, so hiding needs the ids. */
.review-decision-actions > button[hidden],
html[data-layout-v2="float"] #layoutV2FloatHost :is(#approveDrawingButton, #rejectDrawingButton, #requirementStageUseButton, #requirementStageBackButton)[hidden] {
  display: none !important;
}

/* Use / Back are the Approve / Reject buttons of this stage: same box, same
   type. Use is the primary blue; Back is the panel's neutral button. Two equal
   columns can be narrower than "Use these requirements" (on a phone), so the
   label wraps to two centred lines instead of being cut, and both buttons
   keep one height, 44px at least. */
html[data-layout-v2="float"] #layoutV2FloatHost :is(#requirementStageUseButton, #requirementStageBackButton) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 12px !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-align: center !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  box-shadow: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel :is(#requirementStageUseButton, #requirementStageBackButton) {
  font-size: var(--panel-fs-body) !important;
  font-weight: 700 !important;
  letter-spacing: var(--panel-control-tracking) !important;
  line-height: 1.2 !important;
  border-radius: var(--panel-control-radius) !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #requirementStageUseButton {
  background: linear-gradient(var(--accent-button), var(--accent-button) 55%, var(--accent-button)) !important;
  color: var(--on-colour-button) !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #requirementStageUseButton:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

html[data-layout-v2="float"] #layoutV2FloatHost #requirementStageBackButton {
  background: var(--surface-muted) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--gloss-rgb) / .1) !important;
}

/* "Ensure the buttons are equal" (Jon 2026-10-05). Use these requirements and
   Back are two equal columns, exactly as Approve and Reject are, whichever
   label is longer. */
html[data-requirement-stage="confirm"] #reviewPanel#reviewPanel#reviewPanel#reviewPanel > .study-decisions .review-decision-actions,
html[data-requirement-stage="confirm"] #layoutV2Stage-reviewScreen #reviewPanel#reviewPanel#reviewPanel .review-decision-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Check PO values: the tiles are the drawings-review cards in Drawing Details
   (Jon 2026-10-05, "The panel tiles should look like this"), so they take that
   card's own rules. Only what the PO adds is stated here. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-material-card-title > span.oa-material-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--text) !important;
  font-size: var(--panel-fs-title) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .manual-oa-material-card[data-manual-dim-card-axis="height"] .oa-material-card-title > span.oa-material-name { color: var(--oa-height-text) !important; }
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .manual-oa-material-card[data-manual-dim-card-axis="width"] .oa-material-card-title > span.oa-material-name { color: var(--oa-width-text) !important; }
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .manual-oa-material-card[data-manual-dim-card-axis="depth"] .oa-material-card-title > span.oa-material-name { color: var(--oa-depth-text) !important; }

/* The product number and the selected ring are the purple of the product's
   badge and marching ants on the PO page (Jon 2026-10-05). */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-number {
  flex: none !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(var(--complete-button-highlight), var(--complete-button) 64%, var(--complete-button-press)) !important;
  color: var(--on-colour-button) !important;
  font: 700 12px/1 "IBM Plex Mono", monospace !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-card.is-selected {
  box-shadow: 0 0 0 1px rgb(var(--complete-rgb) / .85) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-match {
  color: var(--text-muted) !important;
  font-size: var(--panel-fs-body) !important;
  line-height: 1.45 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-match.is-manual {
  color: var(--warning-text) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel > .requirement-stage-match {
  margin: 0 !important;
}

/* A value with one box (item, size, tolerance) takes the card's full width;
   material and thickness keep two boxes: the value and what it applies to. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-value-card .oa-material-side.is-wide {
  grid-column: 1 / -1 !important;
}

/* The step's cards show only the PO value in the glance line, so that one side
   takes the whole row and a long value is not cut. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-card .oa-card-glance-side:only-child,
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-value-card .oa-card-glance-side:only-child {
  grid-column: 1 / -1 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-field .oa-material-value input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

/* The unit chooser reads as the OA box's unit suffix. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-field .oa-material-value select {
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 6px 0 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: 600 11px/1.5 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-field .oa-material-value select option {
  background: var(--surface-muted);
  color: var(--text-strong);
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-field .requirement-field-error {
  color: var(--danger-text);
  font-size: 12px;
  line-height: 1.3;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-field .requirement-field-error:empty {
  display: none;
}

/* One action on a card (Remove, or Select this product) takes the full row. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel :is(.requirement-stage-card, .requirement-stage-value-card) > .oa-material-actions > :only-child {
  grid-column: 1 / -1 !important;
}

/* Add material, Add thickness, then Reset values on its own row. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel > .requirement-stage-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--panel-gap) !important;
  margin: 0 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel > .requirement-stage-actions > [data-requirement-stage-reset] {
  grid-column: 1 / -1 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel > .requirement-stage-source {
  min-width: 0;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel > .requirement-stage-source > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel > .requirement-stage-source p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel > .requirement-stage-status {
  margin: 0;
  color: var(--danger-text);
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel > .requirement-stage-status:empty {
  display: none;
}

/* PO results: the requirement tiles are the drawings-review cards, so they
   take that card's own rules. Only what the PO adds is stated here: the lines
   under the two values span the card, and the pressed decision keeps its ring. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel :is(.requirement-finding-card, .requirement-stage-value-card, .requirement-stage-card) > .oa-material-card-body > :is(p, .requirement-correction) {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-finding-card .requirement-result-status-text {
  color: var(--text) !important;
  font-size: var(--panel-fs-body) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-finding-card[data-manual-dim-result="match"] .requirement-result-status-text {
  color: var(--success-text) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-finding-card[data-manual-dim-result="mismatch"] .requirement-result-status-text {
  color: var(--danger-text) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-finding-card[data-manual-dim-result="needs_input"] .requirement-result-status-text {
  color: var(--warning-text) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel :is(.requirement-finding-card, .requirement-stage-value-card, .requirement-stage-card) .requirement-result-source {
  color: var(--text-muted) !important;
  font-size: var(--panel-fs-body) !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-finding-card .requirement-decision-label {
  font-size: var(--panel-fs-body) !important;
  font-weight: 700 !important;
}

/* Add note is the full-width third button, as Comment is on a drawing card,
   unless "Correct value" sits beside it. */
html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-finding-card .finding-card-action-note:last-child {
  grid-column: 1 / -1 !important;
}

/* Summary tab: the PO name and its "Open PO" button. */
#purchaseOrderSummary {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin-top: 8px;
}

#purchaseOrderSummary[hidden] {
  display: none !important;
}

#purchaseOrderSummary .po-source-name {
  margin: 0;
  overflow-wrap: anywhere;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #purchaseOrderSummary .finding-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  margin: 0 !important;
}

@media (min-width: 861px) {
  /* A PO is read, not skimmed: the open panel takes its own column so it never
     covers the PO. */
  html[data-layout-v2="float"][data-has~="review-panel-open"]:not(#has-pad) #reviewScreen .drawing-panes[data-source-kind="po"] {
    padding-right: var(--rr-panel-clearance);
  }

  html[data-layout-v2="float"][data-has~="review-panel-open"]:not(#has-pad) #reviewScreen .drawing-panes[data-source-kind="po"] .drawing-pane:nth-of-type(n) > header {
    /* "Put these in the normal position" (Jon 2026-10-05): the page arrows sit
       the normal 16px inside the header's right edge, not flush against it. */
    padding-right: var(--space-4);
  }

  /* "The panel's height is the same as the pdf panel" (Jon 2026-10-05). The
     PO pane takes the height that fits the window (review-panel-v3.js sets
     it), and the open panel spans the pane top to bottom. */
  html[data-layout-v2="float"] #layoutV2FloatHost #layoutV2Stage-reviewScreen > #reviewPanel[data-source-kind="po"]:not(.is-collapsed) {
    height: var(--review-panel-max-height) !important;
  }

  /* Check PO values: "make the pdf panel as tall as it can be ... like the
     other pages" (Jon 2026-10-05). The pane starts under the page title, as
     the Stamp and Export sheets do. The row it replaces holds only controls
     for comparing two drawings, which this step does not have. */
  html[data-requirement-stage="confirm"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage#reviewScaleStage .review-header {
    display: none !important;
  }

  /* Both PO screens: the row fills the window with the panel at the right edge
     and the pane at the left (review-panel-v3.js sets --po-pane-width). The pane
     is as tall as the no-scroll fit height, so the panel spans it and the page
     never scrolls. */
  html[data-layout-v2="float"] #reviewScreen#reviewScreen .drawing-panes[data-source-kind="po"] > .drawing-pane {
    box-sizing: border-box !important;
    margin-left: var(--po-pair-shift, 0px) !important;
    width: var(--po-pane-width, auto) !important;
    max-width: 100% !important;
    justify-self: start !important;
  }

  /* Check PO values too: "make sure the pdf panel hugs the POs. No black bars"
     (Jon 2026-10-12). The pane is the page's size at the fit height, or the width
     the row leaves, so the page fills it edge to edge at zoom 1 for a portrait or
     a landscape PO. Zoom and pan still move inside the frame (the bars of the
     round before are gone because the frame is the page's own shape).

     Results: "the pdf container should fit the pdf" (Jon 2026-10-05). The pane is
     the drawing's size at the fit height (review-panel-v3.js), so the frame is the
     pane's width at the drawing's own shape. No bars, no letterbox: the frame is
     the drawing. In a window too narrow for the fit height the pane is narrower
     and the frame follows it, still at the drawing's shape. */
  html[data-layout-v2="float"] #reviewScreen#reviewScreen .drawing-panes[data-source-kind="po"] .drawing-pane > .review-sheet-frame[style*="--sheet-aspect"] {
    width: 100% !important;
    height: auto !important;
    max-height: var(--po-sheet-fit-height, none) !important;
    aspect-ratio: var(--sheet-aspect) !important;
  }
}

/* "Make the top, where the heading is, consistently spaced with the normal
   review page" (Jon 2026-10-05). From 1181px up, hiding the review header also
   removed its row from the stage, and the 16px gap under the title band went
   with it, so the pane started 16px higher than on the results screen and
   touched the title. The header stays as its empty zero-height row instead, as
   it is on the results screen, so the pane starts at the same y in both steps.
   The fit height and the panel height are measured from the pane, so they
   follow. 861px to 1180px keeps the rule above. */
@media (min-width: 1181px) {
  /* The PO page and the panel are centred as a pair when the page is narrower
     than the room (a portrait PO): review-panel-v3.js sets --po-pair-shift. */
  html[data-layout-v2="float"][data-requirement-stage="confirm"][data-has~="review-screen"]:not(#has-pad) {
    --floating-panel-right: calc(var(--app-frame-inset, 19px) + env(safe-area-inset-right, 0px) + var(--po-pair-shift, 0px)) !important;
  }

  html[data-requirement-stage="confirm"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage#reviewScaleStage .review-header {
    display: flex !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html[data-requirement-stage="confirm"] #reviewScreen#reviewScreen #reviewScaleStage#reviewScaleStage#reviewScaleStage .review-header > * {
    display: none !important;
  }
}
/* ==== end PO check stage ==== */
.requirement-unmarked {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.requirement-unmarked-label {
  margin: 0;
}

/* Check PO values, round 2 (Jon 2026-10-12, Option E).
   1. Each PO line has its own colour; its number badge, card and the cards
      below it use it. White ink on every coloured fill.
   2. All text in the PO check panel is uppercase.
   3. One fact per line on the selected product; the glance line of a closed
      product starts under its name. */
:root {
  --line-1-rgb: var(--success-rgb);
  --line-2-rgb: var(--comment-accent-rgb);
  --line-3-rgb: 8 145 178;
  --line-4-rgb: var(--warning-rgb);
}

/* The marks on the PO page wear their line's colour (Jon 2026-10-12): the frame
   and the number badge, white ink on the fill. The selected line has a solid
   frame; the others keep the dashed, quieter one. */
.po-line-1 { --po-line-rgb: var(--line-1-rgb); }
.po-line-2 { --po-line-rgb: var(--line-2-rgb); }
.po-line-3 { --po-line-rgb: var(--line-3-rgb); }
.po-line-4 { --po-line-rgb: var(--line-4-rgb); }

.diff.is-po-line.is-issue.is-issue,
.diff-badge.is-po-line.is-issue-pill.is-issue-pill {
  --marker-color: rgb(var(--po-line-rgb, var(--success-rgb)));
  --marker-badge: rgb(var(--po-line-rgb, var(--success-rgb)));
  --marker-ink: #fff;
  color: rgb(var(--po-line-rgb, var(--success-rgb)));
}

.diff-badge.is-po-line.is-issue-pill b,
.diff-badge.is-po-line.is-issue-pill.is-active b {
  background: rgb(var(--po-line-rgb, var(--success-rgb))) !important;
  color: #fff !important;
}

.sheet-viewport .overlay-layer .diff.is-po-line,
.fullscreen-frame .overlay-layer .diff.is-po-line {
  /* A line block is exactly its box: no reach around it, so neighbours never overlap. */
  --ants-reach: 0px;
  --ants-reach-min: 0px;
  --ants-half-min-w: 0%;
  --ants-half-min-h: 0%;
  --ants-line: 2px;
}

.sheet-viewport .overlay-layer .diff.is-po-line .diff-ants rect,
.fullscreen-frame .overlay-layer .diff.is-po-line .diff-ants rect {
  stroke-width: 2px !important;
  rx: 10px !important;
  ry: 10px !important;
}

.diff-badge.is-po-line.is-tethered-badge {
  /* The same place on every block: its top-left corner, clamped inside the frame. */
  --diff-badge-size: 12px;
  left: max(var(--badge-x), 6px) !important;
  top: max(var(--badge-y), 6px) !important;
  translate: -50% -50% !important;
  transform-origin: center;
}

.diff-badge.is-po-line b {
  font-size: 8px;
}

/* Every line is the same block: one corner radius, one border weight, the line's
   colour. Unselected: a faint outline and tint. Selected: 20% fill, solid border.
   It holds until another line is selected. */
.diff.is-po-line .diff-ants rect {
  stroke-dasharray: none !important;
  animation: none !important;
  opacity: 0.55;
  fill: rgb(var(--po-line-rgb, var(--success-rgb)) / 0.05) !important;
  stroke: rgb(var(--po-line-rgb, var(--success-rgb))) !important;
  stroke-width: 2px !important;
  rx: 10px !important;
  ry: 10px !important;
}

.diff.is-po-line.is-active .diff-ants rect {
  opacity: 1;
  fill: rgb(var(--po-line-rgb, var(--success-rgb)) / 0.2) !important;
}

html[data-requirement-stage="confirm"] #overallDimsPanel,
html[data-requirement-stage="confirm"] #overallDimsPanel * {
  text-transform: uppercase;
}

html[data-requirement-stage="confirm"] #overallDimsPanel input::placeholder {
  text-transform: uppercase;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-number {
  background: rgb(var(--line-rgb, var(--success-rgb))) !important;
  color: var(--on-colour-button) !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-card.is-selected {
  border-color: rgb(var(--line-rgb, var(--success-rgb))) !important;
  box-shadow: none !important;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .oa-dim-head {
  color: color-mix(in srgb, rgb(var(--line-rgb, var(--success-rgb))) 60%, var(--text-strong));
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-card .requirement-stage-glance {
  padding-left: 30px;
}

html[data-layout-v2="float"] #layoutV2Stage-reviewScreen #reviewPanel #reviewPanelScroll #drawingDetailsPanel #overallDimsPanel .requirement-stage-match {
  grid-column: 1 / -1;
  line-height: 1.5 !important;
}

#overallDimsPanel .po-colourway {
  color: rgb(var(--line-rgb, var(--success-rgb)));
}

#overallDimsPanel .po-attn {
  color: rgb(var(--warning-rgb));
}

#overallDimsPanel .po-auto-reset {
  display: inline;
  margin: 0 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(var(--accent-rgb));
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

#overallDimsPanel .po-facts {
  display: grid;
  gap: 2px;
  margin: 6px 0 4px;
  width: 100%;
  grid-column: 1 / -1;
  min-width: 0;
}

#overallDimsPanel .po-facts > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgb(var(--border-rgb) / .6);
  font-size: .8rem;
  line-height: 1.25;
}

#overallDimsPanel .po-facts > div:last-child {
  border-bottom: 0;
}

#overallDimsPanel .po-facts dt {
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: .04em;
}

#overallDimsPanel .po-facts dd {
  margin: 0;
  color: var(--text-strong);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

#overallDimsPanel .po-facts .is-colourway dd {
  color: rgb(var(--line-rgb, var(--success-rgb)));
}

/* "X W/ Y" material: ask where Y goes. X and Y are bold, nothing else. */
#overallDimsPanel .po-split {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

#overallDimsPanel .po-split-q {
  margin: 0;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--text-strong);
}

#overallDimsPanel .po-split-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#overallDimsPanel .po-split-opts .is-on {
  background: rgb(var(--line-rgb, var(--success-rgb)));
  border-color: transparent;
  color: var(--on-colour-button);
}

#overallDimsPanel .po-split-own {
  display: grid;
  gap: 4px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
}

#overallDimsPanel .po-split-own input {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgb(var(--border-rgb));
  border-radius: 10px;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-size: .85rem;
}

#overallDimsPanel .po-term {
  font-weight: 800;
  color: inherit;
  text-decoration: none;
}

#overallDimsPanel .po-term-chip.is-missing {
  color: rgb(var(--danger-rgb));
}

/* Drawing note check on a PO card: the CHECK text is plain; the buttons reuse the
   app's green (.is-success) and red (.is-danger) with white ink. Both rows are full width. */
#overallDimsPanel .po-note-check {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}

#overallDimsPanel .po-note-check-text {
  margin: 0;
  width: 100%;
  color: var(--text-strong);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

#overallDimsPanel .po-note-check-opts {
  display: flex;
  gap: 6px;
  width: 100%;
}

#overallDimsPanel .po-note-check-opts .po-note-check-btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

#overallDimsPanel .po-note-check-opts .is-on {
  font-weight: 700;
  box-shadow: inset 0 0 0 2px rgb(var(--overlay-rgb) / 0.55);
}

#overallDimsPanel .po-note-check-opts .is-off {
  /* Dim only the fill; text stays fully opaque so white ink keeps AA contrast. */
  filter: saturate(0.45);
}

#overallDimsPanel .po-note-slot {
  align-self: stretch;
  justify-self: stretch;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

#overallDimsPanel .po-note-slot:empty {
  display: none;
}

/* ===== Batch import card: fills the free height; added files show as tiles in its well (TASK-102, Jon 2026-10-13) =====
   Fill-height: tablet and desktop only (wider than 640px and at least 480px tall). Phones and landscape phones keep the old height.
   The jobs board (.intake-result) stays below the card, as before. */
@media (min-width: 641px) and (min-height: 480px) {
  #appShell #loadScreen#loadScreen[data-load-mode="basket"] > .intake-basket,
  #appShell #loadScreen#loadScreen[data-load-mode="basket"] > .intake-basket > [data-intake-panel]:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  #appShell #loadScreen#loadScreen[data-load-mode="basket"] > .intake-basket > [data-intake-panel] > .intake-zone {
    flex: 1 1 auto;
    min-height: 0;
  }
  #appShell #loadScreen#loadScreen[data-load-mode="basket"] > .intake-basket > [data-intake-panel] > .intake-zone.is-compact {
    min-height: auto;
  }
  #appShell #loadScreen#loadScreen[data-load-mode="basket"] > .load-grid {
    flex: 0 0 auto;
  }
}

/* With files added, the well holds the tile grid instead of the big prompt, and grows with the tiles. */
#appShell #loadScreen#loadScreen .intake-zone .load-card-well > .intake-items[hidden] { display: none; }
#appShell #loadScreen#loadScreen .intake-zone.is-compact .load-card-well {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex: 1 0 auto;
  gap: var(--space-3);
  overflow: visible;
  text-align: left;
}
#appShell #loadScreen#loadScreen .intake-zone.is-compact .load-card-well > .intake-items { order: 1; }
#appShell #loadScreen#loadScreen .intake-zone.is-compact .load-card-well > .load-card-drop {
  order: 2;
  margin-top: auto;
  justify-items: center;
  gap: 0;
  text-align: center;
}
#appShell #loadScreen#loadScreen .intake-zone.is-compact .load-card-up,
#appShell #loadScreen#loadScreen .intake-zone.is-compact .load-card-drop > span:last-child { display: none; }
#appShell #loadScreen#loadScreen .intake-zone.is-compact .load-card-drop > strong {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
}
#appShell #loadScreen#loadScreen .intake-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
#appShell #loadScreen#loadScreen .intake-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 8px 34px 8px 8px;
  border-radius: 10px;
  background: rgb(var(--load-card-rgb) / 0.14);
  animation: intake-item-in 160ms ease-out;
}
#appShell #loadScreen#loadScreen .intake-item-icon {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 40px;
  color: rgb(var(--load-card-rgb));
}
#appShell #loadScreen#loadScreen .intake-item-icon svg {
  grid-area: 1 / 1;
  width: 34px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#appShell #loadScreen#loadScreen .intake-item-icon em {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 4px;
  border-radius: 4px;
  background: rgb(var(--load-card-rgb));
  color: #fff;
  font: 700 9px/1.3 var(--font-body);
  font-style: normal;
  letter-spacing: 0.03em;
}
#appShell #loadScreen#loadScreen .intake-item-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font: 600 13px/1.3 var(--font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#appShell #loadScreen#loadScreen .intake-item > .intake-item-x {
  top: 50%;
  right: 6px;
  width: 1.35rem;
  height: 1.35rem;
  transform: translateY(-50%);
}
#appShell #loadScreen#loadScreen .intake-item > .intake-item-x svg { width: 0.85rem; height: 0.85rem; }
@keyframes intake-item-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #appShell #loadScreen#loadScreen .intake-item { animation: none; }
}

/* Batch import sorting progress stays inside the drop card (Jon 2026-10-19): a spinner in each
   tile's x slot and "Sorting N files..." in the foot, instead of a chip list below the card. */
#appShell #loadScreen#loadScreen .intake-item > .intake-item-spin {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -0.35rem;
}
#appShell #loadScreen#loadScreen .load-card-foot > .fake-file.is-working { color: var(--text-muted); }